RESPONSIVE WEB DESIGN

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.

Responsive Web Design

UNIDAD – 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 – 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 – 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