Responsive Web Design
Duración:
20 Horas
Costo:
$ 310.000
Modalidad de estudio:
Virtual
Inscripciones:
Abiertas
En las últimas décadas el tipo de dispositivos desde los que accedemos a internet ha cambiado. Hace unos años solo accedíamos a la Web a través de nuestro pc. Pero desde que se ha producido el avance en las comunicaciones tenemos múltiples dispositivos portátiles desde los que accedemos a internet como ordenadores portátiles, netbook, tablets, móviles, etc. Para que nuestra página web se vea correctamente en todos los dispositivos, se define Responsive Web Design.
- Conocer en qué consiste este tipo de diseño, cómo se desarrolla y todas sus características.
Aprender a crear nuestra web adaptable. - Dominar y conocer los modelos más comunes de frameworks utilizado para el desarrollo de webs adaptables.
UNIDAD 1. Reponsive Web Design
¿Qué es Responsive Web Design?
Características del Responsive Web Design
Ventajas e inconvenientes
Crear un diseño adaptable: CSS
Ejemplo de una página web con diseño Responsive Web Design
Ejemplo de una página web sin diseño Responsive Web Design
¿Cómo comprobar el diseño de tu página Web?
CSS: Medias Queries
Mobile first
Patrones de diseño adaptivo
Diseñar para varios dispositivos en papel
Plantillas para diseñar
Navegadores que soportan Responsive Web Design
Video Ejercicio – Reponsive Web Design
Autopractica – Opera mobile emulator
Autopractica – Responsive web Design
Test – Responsive Web Design
UNIDAD 2. Creando un diseño adaptable
¿Cómo comenzar a diseñar?
¿Cómo crear un diseño adaptable?
El HTML de mi diseño adaptable
Meta tags
El CSS de mi diseño adaptable
Medias Queries
Diseño web fluido
Cálculo de porcentajes
Fuentes flexibles
Imágenes flexibles
Resize Windows
Video Ejercicio – Creando un diseño adaptable
Autopráctica – Creando un diseño adaptable
Autopráctica – Creando un diseño adaptable II
Test – Creando un diseño adaptable
UNIDAD 3. Web con responsive design
Frameworks
Booststrap
Booststrap II
Semantic
Semantic II
Skeleton
Skeleton II
Less Framework
Less Framework II
Columnal
Video ejercicio – Web con responsive design
Autopractica – Patrón de diseño columnal
Autopráctica – Patrón de diseño bootstrap
Test – Web con responsive design
