Diseño Web adaptativo con HTML5 y CSS3 (24 horas)

Descripción: Quien piensa que necesita crear una versión "móvil" de su sitio web está equivocado. Un diseño adaptativo de páginas web ofrece mejoras, ya que no sólo luce, sino también funciona muy bien en teléfonos inteligentes, computadoras de escritorio y cualquier tipo de dispositivo. Como su nombre indica, se adaptará sin complicaciones al tamaño de pantalla, proporcionando una mejor experiencia de usuario.

Con este curso, el alumno aprenderá cómo crear diseños fluidos y adaptativos. Además, ampliará su metodología de diseño Web mediante la aplicación de las más recientes y útiles técnicas proporcionadas por HTML5 y CSS3 comprendiendo los métodos utilizados, a través de las mejores prácticas de escritura y entrega de código, además de la inclusión de contenido multimedia.

Dirigido a: Diseñadores gráficos y desarrolladores web.

Nivel: Básico - intermedio.

Temario:

1. Introducción a HTML5, CSS3 y diseño web adaptativo

Por qué es importante el diseño adaptativo | Definición de un diseño adaptativo | Ejemplos

2. Media Queries: Adaptar diferentes configuraciones de pantalla

Qué son las media queries | Nuestro primer diseño adaptativo | Controlar el autoajuste en navegadores | Conocer y controlar los distintos tipos de viewport | Media queries, sólo una parte de la solución

3. Diseño fluido

Importancia de diseños proporcionales en el diseño fluido | Modificación de un diseño fijo a disposición proporcional | Uso de "ems" en tipografía | Imágenes fluidas | Diferentes imágenes para distintos tamaños de pantalla | Conjugar media queries y retículas fluidas | Sistemas de retículas con CSS 

4. HTML5 para diseños adaptativos

Qué si y qué no, soporte con HTML5 | Semántica en HTML5 | Elementos estructurados | Accesibilidad | Insertar elementos multimedia | Video adaptativo | Aplicaciones fuera de línea

5. CSS3: Selectores, tipografía y modos de color

Capacidades generales de CSS3 | Prefijos | Nuevos selectores y cómo usarlos | Tipografía personalizada | Nuevos formatos de color y transparencia  

6. Mejorar el diseño con CSS3

Sombra de texto | Sombra de la caja | Degradados | Fondos múltiples 

7. Transiciones, transformaciones y animaciones en CSS3

Transiciones con CSS3 | Transformaciones 2D con CSS3 | Transformaciones 3D con CSS3 y soporte | Animación con CSS3

8. Formularios con HTML5 y CSS3

Formularios HTML5 | Soporte en browsers y opciones | Validación | Nuevos tipos de entrada de datos

9. Resolver los desafíos de plataforma cruzada del diseño web adaptativo

Mejora progresiva o degradación elegante | Modernizr y frameworks de compatibilidad