Descripción Curso

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.

Objetivos

  • 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.

Contenido

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

¿Necesitas más información?