Date post: | 12-Jan-2017 |
Category: |
Presentations & Public Speaking |
Upload: | carlos-azaustre |
View: | 389 times |
Download: | 0 times |
Curso de ResponsiveDesign
@carlosazaustre+CarlosAzaustre
Bogotá Octubre 2015
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
La Web en lo 90’s
http://www.vectorportal.com/img_novi/desktop-pc-vector.jpg
La Web ahora
webresponsivas.com - http://www.vectorsland.com/
La Web ¿ahora?
webresponsivas.com - http://www.vectorsland.com/
Responsive Design no es una opción
http://www.inthedigital.co.uk/mobile-friendly-websites-must-2015/
Unidades relativas
Porcentajes - %emremvh, vw
media-queries
@media screen and (max-width:480px) {.miClase {
...}
}
widthheightdevice-widthdevice-heightorientationaspect-ratiodevice-aspect-ratiocolorcolor-indexmonochromeresolutionscangrid
media-queries
max-widthAplica a todo lo menor del valor
min-widthAplica a todo lo mayor que el valor
Viewport
Hardware Pixel
Device Independent Pixel (DIP)
Pixel CSS
Viewport
<meta name="viewport" content="width=device-width,initial-scale=1">
Progressive Enhancement vsGraceful Degradation
http://metamonks.com/mobile-first-vs-responsive/
Patrones de diseño Responsive
Tiny Tweaks
http://www.lukew.com/ff/entry.asp?1514
Patrones de diseño Responsive
Column-Drop
http://www.lukew.com/ff/entry.asp?1514
Patrones de diseño Responsive
Mostly-Fluid
http://www.lukew.com/ff/entry.asp?1514
Patrones de diseño Responsive
Layout Shifter
http://www.lukew.com/ff/entry.asp?1514
Patrones de diseño Responsive
Off-Canvas
http://www.lukew.com/ff/entry.asp?1514