123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <h4>TEMARIO - Curso de Diseño y Programación Web y UX</h4>
<p>Nuestro <b>Curso de Diseño y Programación Web y UX</b> para dispositivos móviles y escritorio, está dirigido a diseñadores gráficos, estudiantes o graduados en publicidad e informática, interesados en incursionar en el mundo del diseño y desarrollo web, con lo más nuevo en herramientas programación HTML e interactividad de páginas web, los principios básicos del diseño, de la usabilidad y de la accesibilidad web.</p>
<p>Al concluir el curso el alumno es capaz de construir un sitio web estático, interactivo y funcional, adaptable a todo tipo de dispositivos. Aprenderás a desarrollar un sitio web desde cero y utilizar el HTML5 y CSS3 para crear sitios web semánticamente
   bien estructurados con los estándares actuales de HTML5.</p>
<p>Se incluyen conocimientos teóricos y prácticos, y se desarrolla y estimulan las habilidades propias y su creatividad, con el fin de capacitarte para crear websites profesionales y proyectos visuales innovadores.</p>
<p>El curso contiene módulos de HTML5 y CSS3 para implementar el aprendizaje de diseño web con lo último en desarrollo y lenguaje HTML. Está especialmente dirigido a cualquiera de las ramas vinculadas con la comunicación y/o el arte, así como a profesionales
   del sector que desean ampliar o reciclar sus conocimientos en los siguientes contenidos:</p>
<ol>
   <li><b>Historia y herramientas</b></li>
   <ol type="a">
      <li>Historia y evolución de Internet, la Web, Navegadores y cambios del código</li>
      <li>Software disponible, gratuito y formas de trabajo. (Brackets, Sublime Text)</li>
      <li>Recursos gratuitos, frameworks y código abierto.</li>
   </ol><br />
   <li><b>HTML 5 BÁSICO-INTERMEDIO - SEMÁNTICA</b></li>
   <ol type="a">
      <li>Jerarquizar y organizar información en un documento HTML. DIV para delimitar zonas lógicas en un documento web</li>
      <li>Etiquetas de estructura (header, nav, section, aside, footer, article...)</li>
      <li>Atributos y elementos obsoletos</li>
      <li>Etiquetas de Texto (headings,paragraphs, listings)</li>
      <li>Hipervínculos</li>
      <li>Imágenes</li>
      <li>Tablas</li>
      <li>Video y Audio</li>
      <li>Creación de formularios en HTML</li>
   </ol><br />
   <li><b>CSS3 BÁSICO-INTERMEDIO y nuevas herramientas</b></li>
   <ol type="a">
      <li>Qué es CSS y para qué sirve</li>
      <li>Creación de una hoja de estilo</li>
      <li>Cómo incluir CSS en nuestro documento</li>
      <li>Selectores</li>
      <li>Colores</li>
      <li>Modelo de cajas</li>
      <li>Posicionamiento</li>
      <li>Flotado y flexibilidad</li>
   </ol><br />
   <li><b>CSS3 AVANZADO</b></li>
   <ol type="a">
      <li>Pseudo clases CSS3</li>
      <li>Nuevos selectores CSS3</li>
      <li>Nuevos estilos CSS3 (efectos, transparencias, degradados)</li>
      <li>Transformaciones (rotar,escalar,perspectiva,traslado)</li>
      <li>Transiciones y animaciones</li>
      <li>Diseño de menús interactivos, animación de controles y movimiento</li>
      <li>@keyframes para animación controlada por tiempo y ciclos (loops)</li>
   </ol><br />
   <li><b>DISEÑO RESPONSIVO</b></li>
   <ol type="a">
      <li>Diseño Flexible, imágenes, textos</li>
      <li>Mediaqueries y trucos de display</li>
      <li>Wireframes y prototipos. Bloques y navegación</li>
   </ol><br />
   <li><b>Diseño, creación y optimización de imágenes finales para web.</b></li>
   <ol type="a">
      <li>Comprensión de impresión vs diseño web.</li>
      <li>Diseño Gráfico. Concepto y fundamentos. Photoshop, Principales tendencias actuales.</li>
      <li>Formatos de salida.</li>
      <li>Optimización de imágenes para web.</li>
      <li>Construcción y colocación de gráficos de Photoshop.</li>
   </ol>
   <br />
  <li><b> UX / UI - Usabilidad y experiencia de usuario</b></li>
   <ol type="a">
      <li>Diseño de Experiencia / Diseño de Interfaces, centrado en el usuario</li>
<li>Arquitectura de la información</li>
<li>Microinteracciones</li>
<li>Tipografías web e iconografía svg</li>
   </ol>
   <br />
   <li><b>Programación web.</b></li>
   <ol type="a">
      <li>Javascript. DOM y eventos en Javascript.</li>
      <li>jQuery y AJAX CSS y HTML 5 / Lenguaje PHP</li>
      <li>Programación de formularios. Manipulación de documento PHP para hacer que la información llegue a un correo electrónico.</li>
      <li>Aplicación de jQuery: menús, slider, modal, lightbox, galerías</li>
   </ol><br />
   <li><b>Servidores, hospedaje y dominios</b></li>
   <ol type="a">
      <li>Configuración y uso.</li>
      <li>Transferencia de Archivos por FTP</li>
      <li>Publicación en la web</li>
   </ol><br />
   <li><b>Herramientas y conocimientos adicionales para profesionalización</b></li>
   <ol type="a">
      <li>Search Engine Optimization. Concepto y fundamentos del SEO. Objetivos. Principales técnicas y herramientas para una estrategia SEO eficaz.</li>
      <li>Complementos terminales, adición de efectos.</li>
      <li>Adición de un formulario de contacto.</li>
      <li>Integración de los medios sociales, timelines de Facebook, Twitter</li>
      <li>Inserción de YouTube, Vimeo</li>
      <li>Google Maps iframe</li>
      <li>Cotizaciones y precios hora/desarrollo.</li>
   </ol>
</ol>
<h4>Ejercicios en cada sesión</h4>
<p>Clases concretas, fáciles de llevar. Se propone un conjunto de ejercicios, para practicar y comprobar que se han asimilado adecuadamente los conceptos del tema que se explica. Algunos conceptos sólo se entenderán por completo durante la práctica.</p>

<h4>Ejercicio de práctica final</h4>
<p>Para completar este curso tendrás que desarrollar una página web de inicio de un proyecto real o ficticio. Puede ser un sitio comercial, personal, portafolio etc.</p>

<h4>Requisitos para el aprendizaje</h4>
<p>Habilidades en el uso de la computadora<br />Experiencia utilizando el Word Wide Web</p>
<h4>Duración del curso y prácticas</h4>
<p>48 horas en total, si el alumno invierte tiempo adicional en asesorías o prácticas logrará mayores resultados</p>
<h4>Referencias de contenidos y estándares de conocimientos</h4>
<p>http://www.w3c.es/Divulgacion/GuiasReferencia/XHTML1/<br />http://www.w3.org/TR/xhtml1/Cover.html<br />https://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/</p>
            
          
!
            
              @import url('https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

body { margin:2%;
  background-color: #CCC;
}
* {
  font-family: 'Montserrat', sans-serif;
}


            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console