curso de responsive design
TRANSCRIPT
![Page 1: Curso de Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022042723/587781401a28abc85f8b58d1/html5/thumbnails/1.jpg)
Curso de ResponsiveDesign
@carlosazaustre+CarlosAzaustre
Bogotá Octubre 2015
![Page 2: Curso de Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022042723/587781401a28abc85f8b58d1/html5/thumbnails/2.jpg)
Sobre Mi
Carlos Azaustre
Ingeniero en Telemática
CTO y Cofundador en CheflyFormador Web / Tech. BloggerMentor en NodeSchool Madrid
Autor deDesarrollo web ágil con Angular.jsAprendiendo JavaScript
Me puedes leer enhttps://carlosazaustre.es
![Page 3: Curso de Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022042723/587781401a28abc85f8b58d1/html5/thumbnails/3.jpg)
La Web en lo 90’s
http://www.vectorportal.com/img_novi/desktop-pc-vector.jpg
![Page 4: Curso de Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022042723/587781401a28abc85f8b58d1/html5/thumbnails/4.jpg)
La Web ahora
webresponsivas.com - http://www.vectorsland.com/
![Page 5: Curso de Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022042723/587781401a28abc85f8b58d1/html5/thumbnails/5.jpg)
La Web ¿ahora?
webresponsivas.com - http://www.vectorsland.com/
![Page 6: Curso de Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022042723/587781401a28abc85f8b58d1/html5/thumbnails/6.jpg)
Responsive Design no es una opción
http://www.inthedigital.co.uk/mobile-friendly-websites-must-2015/
![Page 7: Curso de Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022042723/587781401a28abc85f8b58d1/html5/thumbnails/7.jpg)
Unidades relativas
Porcentajes - %emremvh, vw
![Page 8: Curso de Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022042723/587781401a28abc85f8b58d1/html5/thumbnails/8.jpg)
media-queries
@media screen and (max-width:480px) {.miClase {
...}
}
widthheightdevice-widthdevice-heightorientationaspect-ratiodevice-aspect-ratiocolorcolor-indexmonochromeresolutionscangrid
![Page 9: Curso de Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022042723/587781401a28abc85f8b58d1/html5/thumbnails/9.jpg)
media-queries
max-widthAplica a todo lo menor del valor
min-widthAplica a todo lo mayor que el valor
![Page 10: Curso de Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022042723/587781401a28abc85f8b58d1/html5/thumbnails/10.jpg)
Viewport
Hardware Pixel
Device Independent Pixel (DIP)
Pixel CSS
![Page 11: Curso de Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022042723/587781401a28abc85f8b58d1/html5/thumbnails/11.jpg)
Viewport
<meta name="viewport" content="width=device-width,initial-scale=1">
![Page 12: Curso de Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022042723/587781401a28abc85f8b58d1/html5/thumbnails/12.jpg)
Progressive Enhancement vsGraceful Degradation
http://metamonks.com/mobile-first-vs-responsive/
![Page 13: Curso de Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022042723/587781401a28abc85f8b58d1/html5/thumbnails/13.jpg)
Patrones de diseño Responsive
Tiny Tweaks
http://www.lukew.com/ff/entry.asp?1514
![Page 14: Curso de Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022042723/587781401a28abc85f8b58d1/html5/thumbnails/14.jpg)
Patrones de diseño Responsive
Column-Drop
http://www.lukew.com/ff/entry.asp?1514
![Page 15: Curso de Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022042723/587781401a28abc85f8b58d1/html5/thumbnails/15.jpg)
Patrones de diseño Responsive
Mostly-Fluid
http://www.lukew.com/ff/entry.asp?1514
![Page 16: Curso de Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022042723/587781401a28abc85f8b58d1/html5/thumbnails/16.jpg)
Patrones de diseño Responsive
Layout Shifter
http://www.lukew.com/ff/entry.asp?1514
![Page 17: Curso de Responsive Design](https://reader033.vdocuments.site/reader033/viewer/2022042723/587781401a28abc85f8b58d1/html5/thumbnails/17.jpg)
Patrones de diseño Responsive
Off-Canvas
http://www.lukew.com/ff/entry.asp?1514