"Responsive web design": desarrollando para todos lados
1 recomendación1,110 vistas
Este documento describe los conceptos de diseño web responsivo. Explica que el diseño web responsivo utiliza estructuras e imágenes fluidas así como media queries en CSS para adaptar un sitio web a diferentes dispositivos. Detalla los componentes clave del diseño responsivo como layouts fluidos, media queries y RESS (responsive design más componentes del lado del servidor). Proporciona ejemplos de cómo implementar layouts fluidos, tipos y sintaxis de media queries, y cómo la detección de dispositivos y características puede usarse para entregar contenido condicional.
"Responsive web design": desarrollando para todos lados
- 1. “RESPONSIVE WEB DESIGN - DESARROLLANDO PARA TODOS LADOS” Por: @dgfrancisco Imagen por: - http://thenounproject.com/ martes 26 de junio de 12
- 2. @dgfrancisco www.dgfrancisco.com martes 26 de junio de 12
- 3. @enterco www.enter.co martes 26 de junio de 12
- 4. ¿Y qué con eso de RD? Imagen por: Lukew - http://www.flickr.com/photos/lukew/7382743430/in/photostream martes 26 de junio de 12
- 5. Estadísticas Crecimiento de las ventas y actualización de teléfonos inteligentes para los próximos años. 982 millones 2015 25% 630 millones 2012 472 millones 2011 Sources: IDC.com - flurry.com - NPD.com - onlinemarketingtrends.com - abiresearch.com - gartner.com martes 26 de junio de 12
- 6. Estadísticas Los usuarios en que momento están usando sus dispositivos para usar apps o web y que es lo q hacen en esos momentos. Hogar En la calle Mientras compran En el trabajo En el transporte 98% 89% 79% 74% 64% Navegando, buscando, Fotos, Música, Ubicación, Cupones, descuentos, Navegando, buscando, Fotos, Música, Ubicación, amigos, chat, redes, Redes sociales, chat. ofertas, comparando. amigos, chat, redes, Redes sociales, chat. remplazando computadores remplazando computadores martes 26 de junio de 12
- 7. TODO martes 26 de junio de 12
- 8. Conceptos Adaptive web design Mobile first Responsive design martes 26 de junio de 12
- 9. ¿Qué es responsive design? “... una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media- queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario ...” Enlace: http://es.wikipedia.org/wiki/Dise%C3%B1o_web_adaptativo martes 26 de junio de 12
- 10. ¿Qué es responsive design? Un solo código fuente, adaptado por su capa gráfica por medio de media-queries y layouts fluidos martes 26 de junio de 12
- 11. ¿Cómo? Imagen: HikingArtist - www.flickr.com/photos/hikingartist/5726773583/in/photostream martes 26 de junio de 12
- 12. 1. Layout Fluido 2. Media-queries 3. RESS martes 26 de junio de 12
- 13. 1. Layout Fluido 2. Media-queries 3. RESS martes 26 de junio de 12
- 14. Layouts fluidos % 1. Retículas flexibles 2. Elementos contenedores flexibles 100% width: 60% 40% martes 26 de junio de 12
- 15. Layouts fluidos Target ÷ Contexto = Resultado% Contexto 1000px Target 600px % martes 26 de junio de 12 600px ÷ 1000px = 0.6%
- 16. 1. Layout Fluido 2. Media-queries 3. RESS martes 26 de junio de 12
- 17. Media-queries <link rel="stylesheet" media="print" type="text/css" href="print.css" /> http://www.w3.org/TR/css3-mediaqueries martes 26 de junio de 12
- 18. Media-queries Tipos print Impresos. braille Dispositivos de lectura braille. embossed Dispositivos de impresión braille. handheld Dispositivos de mano. projection Dispositivos para proyección como el videobin. screen Pantallas de computadores. speech Sintetizadores de Voz (Sordos). tty Dispositivos mecánicos, como los teletipos. tv Televisores de gran, medio o pequeño formato. martes 26 de junio de 12
- 19. Media-queries Propiedades width Filtro por ancho. height Filtro por alto. device-width Filtro por el ancho del dispositivo. device-height Filtro por el alto del dispositivo. orientation Landscape o Portrait. aspect-ratio X:Y (ancho/altura, 16:9 TV). device-aspect-ratio X:Y (ancho/altura) de los dispositivos. color Cantidad de color por bit, sin color = 0 color-index Capacidad de color del dispositivo. monochrome monocromático. resolution densidad de pixeles. martes 26 de junio de 12
- 20. Media-queries Syntaxis @media all and (max-width: 1000px) and (min-width: 700px) {} @media screen and (orientation:portrait) and (min-width: 400px) {} @media (tipo) and (filtro por: ...) and (filtro por: ...) { body{background-color: #c00;} } martes 26 de junio de 12
- 21. Media-queries max-width :/ min-height min-color-index max-device-width max-color min-resolution min-monocrohme martes 26 de junio de 12
- 22. 1. Layout Fluido 2. Media-queries 3. RESS martes 26 de junio de 12
- 23. RESS Responsive design + Server side components 1. Detección de dispositivos 2. Detección de características 3. Contenido condicional martes 26 de junio de 12
- 24. RESS Detección de dispositivos Request BD con info detallada ¿Qué tipo de dispositivo, móvil, TV, tablet? martes 26 de junio de 12
- 25. RESS Detección de dispositivos / BD • WURFL (PHP, Java, .Net) • 51Degrees.mobi (.Net) martes 26 de junio de 12
- 26. RESS Detección de características <html class="js canvas canvastext geo cssanimations csscolumns no-cssgradi cufon-active fontface cufon-ready"> CSS3 - HTML5 ¿Qué soporta? ¿Qué puedo usar? martes 26 de junio de 12
- 27. RESS js geolocation Detección de características rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions video audio fontface martes 26 de junio de 12
- 28. RESS Contenido Condicional 1. Cambiar pauta 2. img de tamaño XXX 3. Secciones registros/login 1. Quitar XXX poner XXX Js 2. Forzar propiedades 3. Validaciones martes 26 de junio de 12
- 29. Entonces 1. Layout Fluido 2. Media-queries 3. RESS martes 26 de junio de 12
- 30. Siguiente paso 1. Progressive enhancement 2. Off Canvas layouts 3. Pre-procesadores martes 26 de junio de 12
- 31. Gracias Francisco Rodríguez @dgfrancisco yo@dgfrancisco.com @nounproject martes 26 de junio de 12