Santiago Porras Rodríguez 
UX Developer 
Microsoft Windows Platform Development MVP 
Nokia Developer Champion 
http://geek...
Responsive web design con 
superpoderes
Conceptos básicos 
• Media Queries 
• Diseño flexible 
• Contenido multimedia flexibles 
Santiago J. Porras Rodríguez 
UX ...
Santiago J. Porras Rodríguez 
UX Developer 
Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr 
Media Queries 
Desd...
Santiago J. Porras Rodríguez 
UX Developer 
Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr 
Media queries 
Agre...
Santiago J. Porras Rodríguez 
UX Developer 
Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr 
Media queries 
Medi...
Santiago J. Porras Rodríguez 
UX Developer 
Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr 
Media queries 
Dire...
Frameworks CSS 
Responsive web design
Bootstrap - http://getbootstrap.com/ 
Santiago J. Porras Rodríguez 
UX Developer 
Twitter: @saintwukong Blog: http://geeks...
Foundation - http://foundation.zurb.com/learn/features.html 
Santiago J. Porras Rodríguez 
UX Developer 
Twitter: @saintwu...
Beneficios e inconvenientes 
Beneficios 
• Permite maquetar sin 
tener conocimientos de 
maquetación. 
• Una vez se aprend...
¿Cuándo usar un framework CSS? 
• Si eres Novato en la maquetación web o un desarrollador cuyo 
objetivo no es aprender a ...
¿Cuándo no usar un framework CSS? 
• Si el sitio web requiere un diseño atractivo y diferenciador. En este 
caso la maquet...
Demo 
http://foodsense.is/
SASS - http://sass-lang.com/ 
Santiago J. Porras Rodríguez 
UX Developer 
Twitter: @saintwukong Blog: http://geeks.ms/blog...
Santiago J. Porras Rodríguez 
UX Developer 
Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr 
SASS 
• Importar fi...
Santiago J. Porras Rodríguez 
UX Developer 
Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr 
SASS 
• Mixins comp...
Demo
Santiago J. Porras Rodríguez 
UX Developer 
Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr 
General 
• A book a...
Santiago J. Porras Rodríguez 
UX Developer 
Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr 
Media queries 
• Me...
Santiago J. Porras Rodríguez 
UX Developer 
Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr 
Tutorials 
• http:/...
Santiago J. Porras Rodríguez 
UX Developer 
Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr 
Frameworks CSS 
• F...
Ruegos y Preguntas
Gracias por su atención 
Santiago Porras Rodríguez 
UX Developer 
Microsoft Windows Platform Development MVP 
Nokia Develo...
Próxima SlideShare
Cargando en…5
×

Responsive Web Design con superpoderes

900 visualizaciones

Publicado el

Introducción al concepto de Responsive Web Design descubriendo los superpoderes que podemos añadirle con SASS

Publicado en: Tecnología
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
900
En SlideShare
0
De insertados
0
Número de insertados
445
Acciones
Compartido
0
Descargas
9
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Responsive Web Design con superpoderes

  1. 1. Santiago Porras Rodríguez UX Developer Microsoft Windows Platform Development MVP Nokia Developer Champion http://geeks.ms/blogs/santypr @saintwukong
  2. 2. Responsive web design con superpoderes
  3. 3. Conceptos básicos • Media Queries • Diseño flexible • Contenido multimedia flexibles Santiago J. Porras Rodríguez UX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
  4. 4. Santiago J. Porras Rodríguez UX 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/
  5. 5. Santiago J. Porras Rodríguez UX 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" />
  6. 6. Santiago J. Porras Rodríguez UX 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);
  7. 7. Santiago J. Porras Rodríguez UX 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; } }
  8. 8. Frameworks CSS Responsive web design
  9. 9. Bootstrap - http://getbootstrap.com/ Santiago J. Porras Rodríguez UX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
  10. 10. Foundation - http://foundation.zurb.com/learn/features.html Santiago J. Porras Rodríguez UX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
  11. 11. Beneficios e inconvenientes Beneficios • Permite maquetar sin tener conocimientos de maquetación. • Una vez se aprende se crean sitios responsive de forma rápida. Santiago J. Porras Rodríguez UX Developer 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 Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr 17/10/2014 11
  12. 12. ¿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. Santiago J. Porras Rodríguez UX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
  13. 13. ¿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. Santiago J. Porras Rodríguez UX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
  14. 14. Demo http://foodsense.is/
  15. 15. SASS - http://sass-lang.com/ Santiago J. Porras Rodríguez UX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
  16. 16. Santiago J. Porras Rodríguez UX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr SASS • Importar ficheros • Nesting • Variables • Mixins • Extensiones
  17. 17. Santiago J. Porras Rodríguez UX 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%; } }
  18. 18. Demo
  19. 19. Santiago J. Porras Rodríguez UX 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
  20. 20. Santiago J. Porras Rodríguez UX 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
  21. 21. Santiago J. Porras Rodríguez UX 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-menu/ • http://blog.teamtreehouse.com/how-to-build-a-three-line-drop-down- menu-for-a-responsive-website-in-jquery
  22. 22. Santiago J. Porras Rodríguez UX 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/
  23. 23. Ruegos y Preguntas
  24. 24. Gracias por su atención Santiago Porras Rodríguez UX Developer Microsoft Windows Platform Development MVP Nokia Developer Champion http://geeks.ms/blogs/santypr @saintwukong

×