Responsive Web Design
¿Quién soy?              Jesús David García Gómez              UX Developer at Plain Concepts              dgarcia@plainco...
Preguntas/dudas/sugerencias        #htmltour
Dispositivos
Índice   • Grid Flexible   • Imágenes flexibles   • Media queries   • Progressive Enhacement vs Graceful degradation   • P...
Grid Flexible   • Web fluida.   • Cuando la web se redimensione, toda la web se irá amoldando al     ancho disponible.   •...
¿Cómo se hace?  • Fijamos unas medidas base (fijas)  • Aplicamos la siguiente función:     • Objetivo / contenedor = resul...
Consideraciones   • Si es para un margen, el contenedor es el que contiene al elemento al     que le queremos aplicar el m...
Imágenes Flexibles   • Imágenes fluidas.   • Utilizamos max-width al 100%.           img {                max-width: 100% ...
Imágenes Flexibles   • Y si max-width no se soporta?                     width: 100%.   • Problema: la imagen puede pixela...
Background  • Imagen de x pixeles, replicada en x/y  • Background-size   background-size:   auto; /*se verá en tamaño orig...
Media Queries  • Adaptar nuestra web según el entorno.  • Se utiliza la propiedad media si estamos en el elemento link.   ...
@media  • Nos permite definir el media type y características físicas del    dispositivo  @media screen and (min-width: 10...
Media types   • Screen: Monitor a color.   • Projection: proyectores.   • Braille: dispositivos táctiles braille.   • Tv: ...
Queries
Progressive Enhacemen vs Gracefuldegradation
Graceful degradation   • Mejor experiencia de usuario posible.   • Orientado al navegador.   • Énfasis en la tolerancia a ...
Progressive Enhancement  • Orientado al contenido.  • Hacer versión con funcionalidad básica.  • Mejorar a partir de dicha...
Separación en capas
¿Cómo se hace?  • Markup: HTML bien formado, para la interoperabilidad.  • Styling: Mejora progresiva del look-and-feel de...
Beneficios   • Accesibilidad: Contenido alcanzable para todos los usuarios.   • Portabilidad: Soporte cross-browser y cros...
Guidelines   • Separar HTML, CSS y Javascript en ficheros diferentes.   • Evitar código específico de un navegador y usar ...
No todo es de color de rosa   • Utilizar progressive enhancement requiere más trabajo.   • Requiere revisar la semántica y...
Progressive Enhacement 2.0             OMG CSS     OMG JS              Nice CSS   Nice JS              Base CSS   Base JS ...
En Resumen  • Filosofía de desarrollo web.  • Nos permite crear webs con accesibilidad universal.  • Requiere aprendizaje,...
Preguntas/dudas/sugerencias        #htmltour
Upcoming SlideShare
Loading in …5
×

HTML Tour - Responsive Web Design

3,000 views

Published on

En esta charla veremos cómo conseguir que nuestra página web se vea correctamente tanto en nuestros móviles, como en nuestra pantalla de pc, sin tener que crear una versión diferente para cada uno de los dispositivos. Veremos además, las diferentes técnicas que podemos aplicar para conseguir el resultado deseado, centrándonos sobre todo en Progressive Enhacement.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,000
On SlideShare
0
From Embeds
0
Number of Embeds
2,164
Actions
Shares
0
Downloads
51
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

HTML Tour - Responsive Web Design

  1. 1. Responsive Web Design
  2. 2. ¿Quién soy? Jesús David García Gómez UX Developer at Plain Concepts dgarcia@plainconcepts.com #htmltour Proyectos destacados: www.plainconcepts.com
  3. 3. Preguntas/dudas/sugerencias #htmltour
  4. 4. Dispositivos
  5. 5. Índice • Grid Flexible • Imágenes flexibles • Media queries • Progressive Enhacement vs Graceful degradation • Progressive Enhacement
  6. 6. Grid Flexible • Web fluida. • Cuando la web se redimensione, toda la web se irá amoldando al ancho disponible. • Utilizar porcentajes y em’s. • No utilizar medidas fijas.
  7. 7. ¿Cómo se hace? • Fijamos unas medidas base (fijas) • Aplicamos la siguiente función: • Objetivo / contenedor = resultado.
  8. 8. Consideraciones • Si es para un margen, el contenedor es el que contiene al elemento al que le queremos aplicar el margen. • Si es para un padding, el contenedor es el propio elemento al que le queremos aplicar el padding.
  9. 9. Imágenes Flexibles • Imágenes fluidas. • Utilizamos max-width al 100%. img { max-width: 100% } • Envolveremos la imagen con una capa para dar el tamaño deseado.
  10. 10. Imágenes Flexibles • Y si max-width no se soporta? width: 100%. • Problema: la imagen puede pixelarse. • Si la imagen es grande, no da problemas.
  11. 11. Background • Imagen de x pixeles, replicada en x/y • Background-size background-size: auto; /*se verá en tamaño original*/ background-size: 180px 90px; /*se verá al tamñao especificado*/ background-size: contain; /*se ajusta al tamaño de la ventana manteniendo el aspect ratio*/ background-size: cover; /*cubre todo el background*/
  12. 12. Media Queries • Adaptar nuestra web según el entorno. • Se utiliza la propiedad media si estamos en el elemento link. <link rel="stylesheet" href="main.css" media="screen" /> <link rel="stylesheet" href="paper.css" media="print" />
  13. 13. @media • Nos permite definir el media type y características físicas del dispositivo @media screen and (min-width: 1024px) { body { font-size: 100%; } }
  14. 14. Media types • Screen: Monitor a color. • Projection: proyectores. • Braille: dispositivos táctiles braille. • Tv: televisores. • Etc. http://www.w3.org/TR/CSS21/media.html#media-types
  15. 15. Queries
  16. 16. Progressive Enhacemen vs Gracefuldegradation
  17. 17. Graceful degradation • Mejor experiencia de usuario posible. • Orientado al navegador. • Énfasis en la tolerancia a fallos.
  18. 18. Progressive Enhancement • Orientado al contenido. • Hacer versión con funcionalidad básica. • Mejorar a partir de dicha funcionalidad.
  19. 19. Separación en capas
  20. 20. ¿Cómo se hace? • Markup: HTML bien formado, para la interoperabilidad. • Styling: Mejora progresiva del look-and-feel del diseño, para navegadores con mejores características (ej. Navegadores webkit, IE9/10, etc.) • Behaviors: Mejoramos el sitio añadiendo características interactivas usando javascript.
  21. 21. Beneficios • Accesibilidad: Contenido alcanzable para todos los usuarios. • Portabilidad: Soporte cross-browser y cross-device. • Modularidad: Componentes desacoplados. • Rendimiento: Mejoras en términos de tiempo de carga.
  22. 22. Guidelines • Separar HTML, CSS y Javascript en ficheros diferentes. • Evitar código específico de un navegador y usar detección de características, no detección de navegador. • Hacer pruebas con javascript desactivado, para comprobar que no podemos hacer y presentar una alternativa.
  23. 23. No todo es de color de rosa • Utilizar progressive enhancement requiere más trabajo. • Requiere revisar la semántica y la flexibilidad del markup. • Escribir css extra para aprovechar las características de CSS3 y html5, cuando es soportado.
  24. 24. Progressive Enhacement 2.0 OMG CSS OMG JS Nice CSS Nice JS Base CSS Base JS HTML
  25. 25. En Resumen • Filosofía de desarrollo web. • Nos permite crear webs con accesibilidad universal. • Requiere aprendizaje, disciplina y experiencia. • Recompensa de la inversión es alta.
  26. 26. Preguntas/dudas/sugerencias #htmltour

×