Programa Responsive Design

1

Click here to load reader

description

programa-responsive-design

Transcript of Programa Responsive Design

Page 1: Programa Responsive Design

Curso RESPONSIVE DESIGN

Día: 1Mobile y resoluciones Introducción y análisis de las nuevas tecnologías, cómo ha cambiado la manera de navegar la web con la llegada de dispositivos nuevos y variedad de resoluciones.

Día: 2Contenido Responsive Aprenderemos a generar el contenido óptimo para cada proyecto y a darle su jerarquía necesaria.

Día: 3Herramientas Veremos cómo organizar nuestro workflow y qué herramientas utilizar.

Día: 4Mediaqueries y Breakpoints Analizaremos el Mobile First y que son y la manera de trabajar nuestros breakpoints y mediaqueries.

Día: 5Mediaqueries y Breakpoints No, una clase no es suficiente.

Día: 6Unidades de medida Aprenderemos a dar el uso que debemos a cada unidad. Sacaremos provecho a unidades más nuevas como Viewport Height y Viewport Width en nuestra maquetación.

Día: 7Optimización Responsive Design implica que nuestra web debe verse en todas las diferentes resoluciones y dispositivos, y para ello la optimización del código es imprescindible. Implementaremos Progressive Enhancement a nuestro código.

Día: 8Layout Técnicas de CSS para reorganizar contenido según el tamaño del viewport, olvidémonos del viejo “float” para maquetar contenido.

Día: 9Arquitectura de CSS Cómo organizar nuestro CSS para que sea robusto y escalable en nuestros proyectos.

Día: 10Preprocesadores Uso de preprocesadores en nuestro flujo de trabajo. Cómo nos pueden ayudar a ser más óptimos y a organizarnos mejor.

Día: 12Guía de Estilo Crearemos la guía de estilos óptima para un desarrollo final, aprenderemos a adaptar nuestro workflow a Atomic Design.

Día: 13Ejercicios Revisaremos los prototipados y el desarrollo de los ejercicios mandados previamente.

Día: 14Imágenes Discutiremos cuál es la situación actual de las imágenes en la web, veremos soluciones los 3 elementos a tener en cuenta: Peso, Tamaño y Dirección Artística.

Día: 15CSS3 Uso de Pseudoelementos, Pseudoselectores y Metadata para optimizar el HTML por medio del CSS.

Día: 16Ejercicios Revisaremos los ejercicios encomendados.

Programa

Responsive Design es mucho más que simples breakpoints y mediaqueries. Es optimización de nuestro código, plani�cación y jerarquización del contenido, y por ende, de nuestro work�ow de diseño web.