El documento aborda la necesidad de adaptar el diseño web a la era móvil, destacando que la web tradicional es obsoleta en comparación con la masificación de dispositivos móviles. Se enfatiza la importancia de crear sitios web inclusivos y accesibles, proponiendo el diseño web sensible como solución para lograr una correcta visualización en diversas pantallas. El enfoque 'móvil primero' se presenta como la estrategia óptima para desarrollar contenido que funcione adecuadamente en todos los dispositivos.

1. Web móvil: ¿inclusiva y accesible? Hernán Beati @hernan_beati

2. Hernán Beati Desarrollador Web (desde el siglo de las tablas) Autor del libro PHP, Creación de páginas Web dinámicas (Alfaomega-ITMaster) y actualmente escribiendo mi 2do libro: HTML5 & CSS3 Director de Docente en:

3. Vamos a plantearnos algunas preguntas clave sobre el tema de esta charla...

4. 1. Web 2. Móvil 3. Inclusiva 4. Accesible ? Definamos esto...

5. 1. ¿Qué es la Web? “ Es muy difícil suprimir las voces de mil millones de individuos...” Vinton Cerf COMUNICACION INFORMACION ECOMMERCE ELEARNING EBUSINESS OCIO

6. “ Web: herramienta fundamental para que la humanidad interactúe, usando sitios web como intermediarios.”

7. Hasta hace muy poco, la web era rígida Creábamos sitios web para una sola resolución 1995: 640 x 480px 2000: 800 x 600px 2005: 1024 x 768px Y si el ancho era líquido (en porcentajes ) considerábamos que el sitio se adaptaría a cualquier resolución existente en una PC...

8. Pero cambió el contexto : la masificación de los móviles convirtió en obsoletas a nuestras Webs rígidas . Porque se miniaturizan y se vuelven ilegibles y casi imposibles de navegar en móviles...

9. 2. ¿Qué es Móvil? 128 x 160px 320 x 240px 480 x 320px 800 x 480px 768 x 1024px + 1024 x 768px 1536 x 2048px + 2048 x 1536px 800 x 600px + 1200 x 824px 480 x 272px

10. ? Esto también es móvil 1024 x 600px 800 x 600px 1024 x 600px 1024 x 768px 1182 x 864px

11. O mejor... ¿qué “no” es Móvil? 800 x 600px, 1024 x 768px, 1280 x 768px, 1600 x 1200px, 1920 x 1080px, 2560 x 1600px y MAS...

12. ¿Cuál es el límite de lo “móvil”? Celulares (“antiguos” y Smartphones) iPhone iPod y Consolas portátiles de videojuegos iPad y tabletas similares Kindle y lectores de ebooks con WiFi o 3G Netbooks (no siempre portátil) Notebooks (no siempre portátil) ¿All in One c/pantalla touch? (portátil de cabotaje)

13. Los atributos de lo “móvil” Diversidad de tamaños y resoluciones de pantalla Diversidad de navegadores y versiones Plugins no siempre disponibles (Flash) Poca velocidad de procesamiento Tiempo limitado de uso, apuro por finalizar tarea Conexión a internet intermitente y cara Ah... ¿movilidad? No necesariamente (84% usa móviles en casa, 64% en trabajo). Pero... hay millones de PCs con esos mismos atributos!!!

14. Algunos datos (a Octubre de 2011) 2.095.006.005 de personas utilizan la Web “fija” (30.2% de la humanidad) 5.300.000.000 de personas tienen un celular (77% de la humanidad) 1.300.000.000 de personas ya usan Web Móvil (+18% de la humanidad) 33% de ellos, “solo” usan la Web Móvil (no usan PCs!) Fuente: http://mobithinking.com/mobile-marketing-tools

15. Más del 85% de los Celulares vendidos entre 2010 y 2011 navegan la Web Y no son iPhone... (menos del 4% son iPhone) La tendencia a futuro es clara:

16. Ventas de Smartphones HOY superan ventas de PCs:

17. ...y Tabletas superan a Netbooks 1er trimestre de 2011: 6,4 millones Tabletas – 8,4 millones Netbooks 2do trimestre de 2011: 13,6 millones Tabletas – 7,3 millones Netbooks Tendencia para fin de 2011: 60 millones Tabletas – 32 millones Netbooks Fuente: http://www.clarin.com/internet/tabletas-destrozan-mercado-netbooks_0_578942373.html

18. Cambió el contexto ¿Qué deberíamos replantearnos?

19. ¿Existe una web “Móvil”, independiente de “la otra”? ¿o TODA web debería estar preparada “para Móviles”... ...porque será accedida desde una diversidad de dispositivos , usados por millones de personas ?

20. Repasemos: 3. ¿Qué es inclusivo? Lo contrario a exclusivo "El diseño de productos y entornos con el fin de que sean usables por el máximo número de personas posible." Conell

21. La intención inclusiva de un diseño se decide a nivel de objetivos del proyecto, porque condiciona cuáles casos de uso y contextos se tomarán en cuenta y cuáles NO. Y lo inclusivo obliga a lo accesible

22. Repasemos también: 4. ¿Qué es accesible? Medida (no booleana, sino escala gradual) de la posibilidad de acceso a los contenidos y las tareas de un sitio web, superando limitaciones de tipo: Visual Auditivo Motriz Cognitivo ...y TECNICO! = DISPOSITIVOS (móviles, antiguos, especiales, etc.)

23. Entonces, la Web Móvil, ¿es inclusiva y accesible? "La accesibilidad no puede depender de los dispositivos, a menos que consideres el no tener un iPhone como una discapacidad " Martín Szyszlican

24. Si el contexto cambió , y las regulaciones todavía no (WCAG, etc.) seamos parte del cambio , y evitemos YA los problemas de accesibilidad propios del nuevo contexto , aunque no estemos “obligados” (aún) a hacerlo. (¿alguien del W3C en el público?)

25. ¿Cómo estamos creando sitios “para móviles” hoy? A. Programando Aplicaciones para cada dispositivo (caro, solo para grandes empresas, y “exclusivo”: solo se hace para “algunos” dispositivos -iPad, iPhone, Blackberry-) B. Creando una Versión Móvil de un sitio web entero “simplificado” (duplicación de esfuerzos, pobreza de resultados, uniformidad, carpeta /movil/ como “ghetto” que no permite compartir URLs) C. O no hacemos Nada , y dejamos que el usuario móvil se frustre... (¡y esto es lo mayoritario!)

26. ¿ Quién puede crear sitios web “para móviles”? A. Programadores de Aplicaciones (Objective-C, .Net, Java) B. Programadores Web (PHP y MySQL) C. Diseñadores Web (HTML5 y CSS3) ¿No hacemos nada? -> ¡OPORTUNIDAD!

27. El precio de no hacer nada... Ojo de cerradura Miniaturización Zoom constante

28. Clientes perdidos Personas que no se comunican Gente que no puede informarse Alumnos que no estudian Menos oportunidades de negocios Niños que no juegan Diseñadores que FRACASARON El precio de la INACCESIBILIDAD

29. ¿Cuales son los enfoques a evitar en nuestros diseños para hacer webs accesibles incluso para celulares?

30. a. El enfoque de la Inflexibilidad de ancho fijo :

31. b. El enfoque de la Inflexibilidad líquida : ? Logo cortado, columnas donde una palabra supera ancho de columna...

32. Solución: Un enfoque flexible , que considere TODAS las resoluciones y tamaños , pero...

33. ¿Es viable para nosotros hacer un diseño para cada dispositivo?

34. ¿O un solo diseño que sea flexible y se adapte? "En lugar de crear diseños desconectados , cada uno adaptado a un dispositivo o navegador, deberíamos tratarlos como facetas de la misma experiencia. En otras palabras, podemos diseñar sitios que no sólo sean más flexibles , sino que puedan adaptarse al medio donde están siendo utilizados." Ethan Marcotte

35. Sin dudas: es más viable un solo diseño que se adapte Ver ejemplo

36. Este enfoque se llama: Diseño Web “Sensible” o Responsive Web Design

37. ¿Cuáles son los elementos de un Diseño Web “Sensible” ? 1. Maqueta adaptable con Media Queries 2. Grillas flexibles 3. Imágenes adaptables

38. 1. Maqueta adaptable con Media Queries Un mismo HTML, distintas hojas CSS

39. Se trata de vincular distintas hojas de estilos: <link href=“estilo_base.css”> <link href=“celulares.css”> ...con Condiciones

40. ¿Qué condición determina “cuál” hoja CSS aplicará un navegador? El tamaño (de viewport o de pantalla ) max-width: x Ancho del Viewport mayor o igual a x min-width: x Ancho del Viewport menor o igual a x max- device -width: x Ancho de Pantalla mayor o igual a x min- device -width: x Ancho de Pantalla menor o igual a x

41. ¿Dónde defino eso?: En tres posibles lugares: 1. Dentro del código HTML: <link href=&quot; tableta.css &quot; rel=&quot;stylesheet&quot; media=&quot;screen and (min-width:480px) &quot;> En “tableta.css”, adaptamos el diseño (cambiando cantidad de columnas, ajustando tamaños).

42. También podemos crear “zonas” en un archivo CSS : @media screen and (min-width:480px) { .columnas { float: left; } } O usar @import desde una hoja maestra: @import url(&quot;tableta.css&quot;) screen and (min-width: 480px) ;

43. Veamos esto en acción: Galería de sitios que usan Media Queries http://www.mediaqueri.es

44. Pero, atención! Existen dos enfoques : 1) PC primero ← no funcionó! 2) Móvil primero ← actual

45. a. Enfoque obsoleto (no sirve!) Partir del sitio “grande” (PC) y aplicar Media Queries para móviles (problema: no todos los móviles entienden Media Queries... y se quedan con diseño “grande”!) ?

46. ¿Cómo se hacía? (no lo hagan!) <link href=&quot; pc.css &quot; rel=&quot;stylesheet&quot; media=&quot;all&quot;> <link href=&quot; movil.css &quot; rel=&quot;stylesheet&quot; media=&quot;screen and ( max -width:768px)&quot;> Si el navegador del celular no reconoce media queries, solo lee “pc.css”... y se bajará fotos gigantes, maquetará columnas flotadas de pocos “milímetros” de ancho, etc. ?

47. Otro error muy común de este enfoque: Ocultar contenidos en versión móvil!! -No usar display:none ni visibility:hidden ni text-indent:-9999px Porque el contenido será transferido igual (consumiendo tiempo y cuota de transferencia)

48. b. Enfoque actual (este sí!) Enfoque actual, “Móvil primero”: comenzamos con textos estructurados para quienes no soportan Media Queries. Luego, usando min -width, apuntamos a “rangos” de tamaños (no dispositivos específicos), cada vez más grandes.

49. ¿Cómo se hace? (háganlo así!) <link href=&quot; movil.css &quot; rel=&quot;stylesheet&quot; media=&quot;all&quot;> <link href=&quot; mas-grande.css &quot; rel=&quot;stylesheet&quot; media=&quot;screen and ( min -width:481px)&quot;> Si el navegador del celular no reconoce media queries, se queda con “movil.css”, y... quedó diseñado.

50. Concepto Mobile First: Luke Wroblewski

51. Quitemos las limitaciones que nosotros mismos impusimos. Cambiemos nuestra metodología de diseño . Móvil primero, texto primero.

52. ¿Por dónde empiezo el proceso de diseño si quiero aplicar Media Queries? Por el principio: el texto .

53. Pregunta al paso : ¿Denominador común de una pizza? ¿Ananá? ¿Anchoas? ¿Morrones? O la MASA ...

54. ¿Denominador común de una Web? ¿Flash? ¿Imágenes? ¿Videos? O el TEXTO ...

55. Tenemos la oportunidad de enfocar nuestros textos Si pensamos ocultar un texto en la versión móvil, posiblemente tampoco sea tan importante en la versión “no móvil”... ¡quitémoslo!

56. Una vez marcados los textos semánticamente (con h1, h2, p, ul con li), marcamos las secciones con article, section, aside y nav. ¡Ya tenemos la versión BASE! La usarán celulares de 128px sin soporte para Media Queries, y lectores de pantalla.

57. Base: sin estilos

58. Proceso de texto a maqueta : 1. Diseñar wireframes 2. Decorarlos en Photoshop 3. Codificar el sitio con HTML & CSS

59. Punto clave a considerar: -Pensar contenidos en franjas (secciones, bloques) ¿Puedo “ horizontalizar ” las secciones, y los bloques dentro de ellas? (pasarlos de “apilados” a “flotados”)

61. Ejemplo:

62. 1. Wireframes Dos por rango a cubrir (uno al mínimo y otro al máximo ancho definido)

63. Consejo: Empezar por la Home Recordar que cada uno de estos bocetos (empezando del más angosto) deberá ensancharse hasta el tamaño del siguiente ...

64. Orden de creación 1. Celulares antiguos (128px) 2. iPhone y smartphones (320px) 3. iPad y otras tabletas (480px / 768px) 4. PC (+1024px)

65. No queremos adaptación “a los saltos”... Ver ejemplo

66. Ajustar Navegación:

67. Flotar más y más columnas...

68. 2. Maquillar los Wireframes

69. 3. Codificar CSS con Media Queries

70. <link rel=&quot;stylesheet&quot; href=&quot;smartphone.css&quot; media=&quot;only screen and (min-device-width : 320px) and (max-device-width : 480px)&quot;> <link rel=&quot;stylesheet&quot; href=&quot;smartphone-landscape.css&quot; media=&quot;only screen and (min-width : 321px)&quot;> <link rel=&quot;stylesheet&quot; href=&quot;smartphone-portrait.css&quot; media=&quot;only screen and (max-width : 320px)&quot;> <link rel=&quot;stylesheet&quot; href=&quot;ipad.css&quot; media=&quot;only screen and (min-device-width : 768px) and (max-device-width : 1024px)&quot;> <link rel=&quot;stylesheet&quot; href=&quot;ipad-landscape.css&quot; media=&quot;only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)&quot;> <link rel=&quot;stylesheet&quot; href=&quot;ipad-portrait.css&quot; media=&quot;only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)&quot;> <link rel=&quot;stylesheet&quot; href=&quot;widescreen.css&quot; media=&quot;only screen and (min-width : 1824px)&quot;> <link rel=&quot;stylesheet&quot; href=&quot;iphone4.css&quot; media=&quot;only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)&quot;> Andy Clarke: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries Antes: base.css

71. La única decisión es entre cuáles rangos estirar “ Un” ejemplo (y no “el” ejemplo): 128 hasta 319 (sin estilo) 320 hasta 479 480 hasta 767 768 hasta 1023 1024 hasta 1824 (PC) Más de 1825 (Pantalla gigante)

72. Considerar el Viewport Tamaño de “ventana” del navegador En PC, es menor que la pantalla. En móvil, es mayor . Ejemplo: Safari asigna 980px de ancho y hace zoom para mostrar lo que supone una web hecha para PC (y en el 99% de los casos, acierta!)

73. ¿Solución? <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;/> Ahora, ya no lo lleva a 980px, lo deja en 320px que es el ancho del dispositivo. Referencia: http://davidbcalhoun.com/2010/viewport-metatag

74. Los iPhone 4... Los iPhone 4 miden 640 x 960px, pero a 326 dpi Sin embargo, detectan esto: <link media=&quot;only screen and ( max-device-width: 480px )&quot; href=&quot;iphone.css&quot; rel=&quot;stylesheet&quot; />

75. Específico para iPhone 4: <link media=&quot;all and ( -webkit-min-device-pixel-ratio:2 )&quot; href=&quot;iphone4.css&quot; rel= &quot;stylesheet&quot; />

76. La orientación: <link rel=&quot;stylesheet&quot; media=&quot;all and ( orientation:portrait )&quot; href=&quot;vertical.css&quot; /> <link rel=&quot;stylesheet&quot; media=&quot;all and ( orientation:landscape )&quot; href=&quot;horizontal.css&quot; />

77. Navegadores con Media Queries Firefox 3.5 y + Google Chrome (todos) Safari 3 y + Opera 9.5 y + Internet Explorer 9 y + ¿Y los demás? -> Polyfills + “Móvil primero” ¿Y los lectores de pantalla? -> No aplica, leen HTML

78. Compatibilizadores / Shims / Polyfills https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills CSS3.mediaqueries-js Respond matchMedia jQuery Media Helpers Adapt.js

79. 2. Grillas flexibles Usar anchos de contenedor y de columnas en porcentajes , para que el diseño se mantenga PROPORCIONAL dentro del rango de ancho mínimo y máximo definido en las Media Queries del punto anterior. Ver ejemplo

80. Fórmula mágica (o casi) Tamaño Elemento / Tamaño Contexto Ejemplo: 200px / 960px = 0,2083

81. De pixeles a porcentajes (usar calculadora) Tamaño Elemento / Tamaño Contexto Ejemplo de 3 columnas para fotos en zona de 480px: 150px / 480px = 0,3125 31.25%

82. Márgenes y paddings flexibles 1. Margen: el contexto es el ancho del elemento padre (contenedor): Ej. 24px / 900px = 0,02666 = 2,66% 2. Padding: el contexto es el ancho del elemento mismo al que lo aplico: Ej. 24px / 200px = 0,12 = 12%

83. body { font:1 em /1.5em 'Arial', sans-serif; -webkit-text-size-adjust: none; } @media screen and (max-width:800px) { body { font-size:0.8 em ; } } @media screen and (max-width:400px) { body { font-size:0.7 em ; } } Demo: http://www.alistapart.com/d/responsive-web-design/ex/ex-article.html Tipografía, siempre en EM

84. Si en cada hoja CSS condicional, apuntamos a distintas imágenes (de distintos tamaños) , no tendremos problemas con background-image 3. Imágenes adaptables

85. Haciendo flexible la imagen dentro del rango mínimo y máximo: img, video, object { max-width:100% ; } Para Explorer 6 y 7 (en hoja aparte): img, video, object { width :100%; } (Cuidar ancho del elemento contenedor )

86. Evitar problemas en Explorer: .imagen{ background: none; /* quitamos otros */ filter: progid:DXImageTransform.Microsoft. AlphaImageLoader(src=&quot;foto. png &quot;, sizingMethod=&quot;scale&quot; ); }

87. Pero, ¿qué hacemos con el único src posible dentro de las etiquetas <IMG> ? No soluciona nada el “no darle ancho” a la imagen, porque entonces deberíamos crearla en Photoshop a su mayor ancho (por ej. 900px) y se transferiría entera, a pesar de mostrarla luego a 400 o 200px de ancho en pantallas chicas.

88. Objetivos a lograr Evitar peso y tiempo de descarga innecesario Usar distintas imágenes para distintos dispositivos, pero generadas automáticamente. Estirar “de a rangos” cada imagen ?

89. Técnicas existentes Cookies y orden “actual” de procesamiento del navegador. Problema: las primeras imágenes descargadas antes de definir la cookie no se adaptan. Técnicas con uso de <noscript> . Funcionan, aunque no es semántico (el marcado ya no refleja los contenidos). Dependen de JavaScript activado. Detección de dispositivo del lado del servidor. Es semántica, y a futuro puede eliminarse sin tocar el marcado.

90. www.adaptive-images.com 850Kb -> 210Kb -> 117Kb -> 74Kb -> 30Kb PHP & GD Library + .htaccess + <script> (opcional)

91. Configuración de archivo PHP $resolutions (array de tamaños) $jpg_quality (de 0 a 100%) $cache_path (ruta a la carpeta) $watch_cache (TRUE o FALSE) $sharpen (TRUE aplica sharpen a reducciones) $browser_cache (default: una semana) $mobile_first (TRUE: si no hay cookies envía menor tamaño, FALSE envía mayor tamaño)

92. Configuración de .htaccess <IfModule mod_rewrite.c> Options +FollowSymlinks RewriteEngine On # Carpetas de fotos que no se redimensionan, una por línea: RewriteCond %{REQUEST_URI} ! fotos-intocables # Enviamos al script PHP el resto de las fotos: RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php </IfModule>

93. <script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script> Con JavaScript Sin JavaScript Configurar $mobile_first = FALSE ANTES de links a estilos, agregar: <style> @media only screen and (max-device-width: 479px) { html { background-image:url( ai-cookie.php?maxwidth=479 ); } } @media only screen and (min-device-width: 480px) and (max-device-width: 767px) { html { background-image:url( ai-cookie.php?maxwidth=767 ); } } @media only screen and (min-device-width: 768px) and (max-device-width: 991px) { html { background-image:url( ai-cookie.php?maxwidth=991 ); } } @media only screen and (min-device-width: 992px) and (max-device-width: 1381px) { html { background-image:url( ai-cookie.php?maxwidth=1381 ); } } @media only screen and (min-device-width: 1382px) { html { background-image:url( ai-cookie.php?maxwidth=unknown ); } } </style>

94. Bordes de imagen adaptables (en porcentajes) img{ max-width:98%; padding:1%; /* Despega 1% de cada lado, y completa el 100% */ background:#000; /* Color del borde “falso” */ }

95. Videos adaptables FitVids.js (plugin para JQuery) https://github.com/davatron5000/FitVids.js Videos elásticos: http://webdesignerwall.com/tutorials/css-elastic-videos

96. Es escalable (sin pixelarse!) y degrada en imagen en Explorer <= 8 (resto de navegadores ya lo soportan) <object data=&quot; imagen. svg &quot; type=&quot;image/svg+xml&quot;> <img src=&quot;imagen-b.png&quot; alt=&quot;Texto alt&quot; width=&quot;144&quot; height=&quot;144&quot; /> </object> ¿El futuro? SVG (Scalable Vector Graphics)

97. Conclusión: Es posible crear Webs Móviles (y “no móviles” también) inclusivas y accesibles, previendo diseños consistentes y compatibles con distintos dispositivos y resoluciones, usando Media Queries , grillas flexibles e imágenes adaptables .

98. Recursos: Emulador de Media Queries http://mattkersley.com/responsive/ Galería de sitios con Media Queries http://mediaqueri.es Libro de Ethan Marcotte http://www.abookapart.com/products/responsive-web-design Bryan Rieger: Rethinking Mobile Web http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

99. Web móvil: ¿inclusiva y accesible? Hernán Beati