Download - Responsive Web Design con superpoderes
![Page 1: Responsive Web Design con superpoderes](https://reader035.vdocuments.mx/reader035/viewer/2022062709/558e44441a28ab82668b46fc/html5/thumbnails/1.jpg)
Santiago Porras RodríguezUX Developer
Microsoft Windows Platform Development MVP
Nokia Developer Champion
http://geeks.ms/blogs/santypr
@saintwukong
![Page 2: Responsive Web Design con superpoderes](https://reader035.vdocuments.mx/reader035/viewer/2022062709/558e44441a28ab82668b46fc/html5/thumbnails/2.jpg)
Responsive web design con superpoderes
![Page 3: Responsive Web Design con superpoderes](https://reader035.vdocuments.mx/reader035/viewer/2022062709/558e44441a28ab82668b46fc/html5/thumbnails/3.jpg)
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
Conceptos básicos
• Media Queries• Diseño flexible• Contenido multimedia flexibles
![Page 4: Responsive Web Design con superpoderes](https://reader035.vdocuments.mx/reader035/viewer/2022062709/558e44441a28ab82668b46fc/html5/thumbnails/4.jpg)
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
Media Queries
Desde CSS 2.1 se ha usado para pantalla e impresión
Sirven para definir diferentes formas de visualizar la información en pantalla dependiendo de las características correspondientes a los medios donde se esté mostrando.
Información: • http://msdn.microsoft.com/en-us/magazine/hh653584.aspx• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Ejemplos • http://mediaqueri.es/
![Page 5: Responsive Web Design con superpoderes](https://reader035.vdocuments.mx/reader035/viewer/2022062709/558e44441a28ab82668b46fc/html5/thumbnails/5.jpg)
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
Media queries
Agregando multiples hojas de estilo
<link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <link rel="stylesheet" type="text/css" href="printfriendly.css" media="print" /><link rel="stylesheet" type="text/css" media="screen and (max-device-width: 800px)" href="style800.css" />
![Page 6: Responsive Web Design con superpoderes](https://reader035.vdocuments.mx/reader035/viewer/2022062709/558e44441a28ab82668b46fc/html5/thumbnails/6.jpg)
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
Media queries
Mediante importación desde otra hoja de estilos
@import url(style600min.css) screen and (min-width: 600px);
![Page 7: Responsive Web Design con superpoderes](https://reader035.vdocuments.mx/reader035/viewer/2022062709/558e44441a28ab82668b46fc/html5/thumbnails/7.jpg)
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
Media queries
Directamente en hoja de estilos#nav { float: right; } #nav ul { list-style: none; } @media screen and (min-width: 400px) and (orientation: portrait) { #nav li { float: right; margin: 0 0 0 .5em; border:1px solid #000000; } }
![Page 8: Responsive Web Design con superpoderes](https://reader035.vdocuments.mx/reader035/viewer/2022062709/558e44441a28ab82668b46fc/html5/thumbnails/8.jpg)
Frameworks CSS Responsive web design
![Page 9: Responsive Web Design con superpoderes](https://reader035.vdocuments.mx/reader035/viewer/2022062709/558e44441a28ab82668b46fc/html5/thumbnails/9.jpg)
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
Bootstrap - http://getbootstrap.com/
![Page 10: Responsive Web Design con superpoderes](https://reader035.vdocuments.mx/reader035/viewer/2022062709/558e44441a28ab82668b46fc/html5/thumbnails/10.jpg)
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
Foundation - http://foundation.zurb.com/learn/features.html
![Page 11: Responsive Web Design con superpoderes](https://reader035.vdocuments.mx/reader035/viewer/2022062709/558e44441a28ab82668b46fc/html5/thumbnails/11.jpg)
17/10/2014 11Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
Beneficios e inconvenientes
Beneficios
• Permite maquetar sin tener conocimientos de maquetación.• Una vez se aprende se
crean sitios responsive de forma rápida.
Inconvenientes• Limitación a la forma de maquetar del framework• Para personalizar hay que sobreescribir las reglas del
framework que a su vez ya están sobreescribiendo otras reglas.
• Hay que personalizar para no caer en que nuestros sitios sean “iguales” que el resto con lo que habrá que trabajar en implantar el framework y en personalizarlo (doble trabajo)
• Aportan más de lo que se necesita y esto se traduce en mayor carga, más aún si incluyen scripts como apoyo.
• Ligado a un producto de terceros que podría evolucionar (al igual que el ámbito web) y del que desconocemos la compatibilidad de las nuevas versions (Incertidumbre)
• En parte, perdemos el control de nuestro propia maquetación
![Page 12: Responsive Web Design con superpoderes](https://reader035.vdocuments.mx/reader035/viewer/2022062709/558e44441a28ab82668b46fc/html5/thumbnails/12.jpg)
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
¿Cuándo usar un framework CSS?
• Si eres Novato en la maquetación web o un desarrollador cuyo objetivo no es aprender a maquetar, un framework te puede ser de gran ayuda porque te permitirá hacer cosas decentes.• Si un Proyecto no require diseño y no preocupa que tenga el mismo
look&feel que multitude de sitios.
![Page 13: Responsive Web Design con superpoderes](https://reader035.vdocuments.mx/reader035/viewer/2022062709/558e44441a28ab82668b46fc/html5/thumbnails/13.jpg)
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
¿Cuándo no usar un framework CSS?• Si el sitio web requiere un diseño atractivo y diferenciador. En este
caso la maquetación debería ir acorde al trabajo de diseño gráfico.• Si aunque el diseño no sea especialmente diferenciador, sí que
require de una alta personalización de los elementos, la maquetación debería huir de estadarizaciones del framework.• Si eres frontend developer o diseñador con conocimientos de
maquetación, se te presuponen ciertas habilidades de maquetación que te permiten maquetar bien, de forma más eficiente y rápida, con tus propios criterios, lo que no incluye el uso estos frameworks que te ponen límites y te hacen perder en gran medida el control de tu propia maquetación.
![Page 14: Responsive Web Design con superpoderes](https://reader035.vdocuments.mx/reader035/viewer/2022062709/558e44441a28ab82668b46fc/html5/thumbnails/14.jpg)
Demohttp://foodsense.is/
![Page 15: Responsive Web Design con superpoderes](https://reader035.vdocuments.mx/reader035/viewer/2022062709/558e44441a28ab82668b46fc/html5/thumbnails/15.jpg)
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
SASS - http://sass-lang.com/
![Page 16: Responsive Web Design con superpoderes](https://reader035.vdocuments.mx/reader035/viewer/2022062709/558e44441a28ab82668b46fc/html5/thumbnails/16.jpg)
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
SASS
• Importar ficheros• Nesting• Variables• Mixins• Extensiones
![Page 17: Responsive Web Design con superpoderes](https://reader035.vdocuments.mx/reader035/viewer/2022062709/558e44441a28ab82668b46fc/html5/thumbnails/17.jpg)
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
SASS
• Mixins complejos
@mixin media($queryString){ @media #{$queryString} { @content; }}
.container { width: 900px; @include media("(max-width: 767px)"){ width: 100%; }}
![Page 18: Responsive Web Design con superpoderes](https://reader035.vdocuments.mx/reader035/viewer/2022062709/558e44441a28ab82668b46fc/html5/thumbnails/18.jpg)
Demo
![Page 19: Responsive Web Design con superpoderes](https://reader035.vdocuments.mx/reader035/viewer/2022062709/558e44441a28ab82668b46fc/html5/thumbnails/19.jpg)
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
General
• A book apart http://www.abookapart.com/products/responsive-web-design • MSDN http://msdn.microsoft.com/en-us/magazine/hh653584.aspx • Mozilla Developer Network https://
developer.mozilla.org/en-US/docs/Web/Guide/CSS
![Page 20: Responsive Web Design con superpoderes](https://reader035.vdocuments.mx/reader035/viewer/2022062709/558e44441a28ab82668b46fc/html5/thumbnails/20.jpg)
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
Media queries
• Media queries • http://mediaqueri.es/• http://msdn.microsoft.com/en-us/magazine/hh653584.aspx
![Page 21: Responsive Web Design con superpoderes](https://reader035.vdocuments.mx/reader035/viewer/2022062709/558e44441a28ab82668b46fc/html5/thumbnails/21.jpg)
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
Tutorials
• http://www.creativebloq.com/netmag/16-really-useful-responsive-design-tutorials-71410085• http://designsparkle.com/responsive-web-design-tutorials/• http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-m
enu/• http://blog.teamtreehouse.com/how-to-build-a-three-line-drop-down
-menu-for-a-responsive-website-in-jquery
![Page 22: Responsive Web Design con superpoderes](https://reader035.vdocuments.mx/reader035/viewer/2022062709/558e44441a28ab82668b46fc/html5/thumbnails/22.jpg)
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
Frameworks CSS
• FOUNDATION• http://foundation.zurb.com/learn/features.html• http://sudheerdev.github.io/Foundation5CheatSheet/
• BOOTSTRAP• http://getbootstrap.com/
![Page 23: Responsive Web Design con superpoderes](https://reader035.vdocuments.mx/reader035/viewer/2022062709/558e44441a28ab82668b46fc/html5/thumbnails/23.jpg)
Ruegos y Preguntas
![Page 24: Responsive Web Design con superpoderes](https://reader035.vdocuments.mx/reader035/viewer/2022062709/558e44441a28ab82668b46fc/html5/thumbnails/24.jpg)
UX Developer
Microsoft Windows Platform Development MVP
Nokia Developer Champion
http://geeks.ms/blogs/santypr
@saintwukong
Santiago Porras Rodríguez
Gracias por su atención