• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web móvil ¿inclusiva y accesible?
 

Web móvil ¿inclusiva y accesible?

on

  • 1,381 views

Hernán Beati

Hernán Beati
http://www.disenoinclusivo.org.ar/evento-2011/programa/web-movil-inclusiva-accesible/

Statistics

Views

Total Views
1,381
Views on SlideShare
1,306
Embed Views
75

Actions

Likes
0
Downloads
24
Comments
0

1 Embed 75

http://www.disenoinclusivo.org.ar 75

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Web móvil ¿inclusiva y accesible? Web móvil ¿inclusiva y accesible? Presentation Transcript

    • Web móvil: ¿inclusiva y accesible?
      • Hernán Beati
        • @hernan_beati
    • 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:
    • Vamos a plantearnos algunas preguntas clave sobre el tema de esta charla...
    • 1. Web 2. Móvil 3. Inclusiva 4. Accesible ? Definamos esto...
    • 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
    • “ Web: herramienta fundamental para que la humanidad interactúe, usando sitios web como intermediarios.”
      • 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...
    • 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...
    • 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
    • ? Esto también es móvil 1024 x 600px 800 x 600px 1024 x 600px 1024 x 768px 1182 x 864px
    • 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...
    • ¿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)
    • 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!!!
    • 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
    • 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:
    • Ventas de Smartphones HOY superan ventas de PCs:
    • ...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
    • Cambió el contexto ¿Qué deberíamos replantearnos?
    • ¿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 ?
    • 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
    • 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
    • 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.)
    • 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
    • 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?)
    • ¿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!)
    • ¿ 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!
    • El precio de no hacer nada... Ojo de cerradura Miniaturización Zoom constante
      • 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
    • ¿Cuales son los enfoques a evitar en nuestros diseños para hacer webs accesibles incluso para celulares?
    • a. El enfoque de la Inflexibilidad de ancho fijo :
    • b. El enfoque de la Inflexibilidad líquida : ? Logo cortado, columnas donde una palabra supera ancho de columna...
    • Solución: Un enfoque flexible , que considere TODAS las resoluciones y tamaños , pero...
    • ¿Es viable para nosotros hacer un diseño para cada dispositivo?
    • ¿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
    • Sin dudas: es más viable un solo diseño que se adapte Ver ejemplo
    • Este enfoque se llama: Diseño Web “Sensible” o Responsive Web Design
    • ¿Cuáles son los elementos de un Diseño Web “Sensible” ? 1. Maqueta adaptable con Media Queries 2. Grillas flexibles 3. Imágenes adaptables
    • 1. Maqueta adaptable con Media Queries Un mismo HTML, distintas hojas CSS
    • Se trata de vincular distintas hojas de estilos: <link href=“estilo_base.css”> <link href=“celulares.css”> ...con Condiciones
    • ¿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
    • ¿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).
    • 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) ;
    • Veamos esto en acción: Galería de sitios que usan Media Queries http://www.mediaqueri.es
    • Pero, atención! Existen dos enfoques : 1) PC primero ← no funcionó! 2) Móvil primero ← actual
    • 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”!)
      ?
    • ¿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. ?
    • 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)
    • 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.
    • ¿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.
    • Concepto Mobile First: Luke Wroblewski
    • Quitemos las limitaciones que nosotros mismos impusimos. Cambiemos nuestra metodología de diseño . Móvil primero, texto primero.
    • ¿Por dónde empiezo el proceso de diseño si quiero aplicar Media Queries? Por el principio: el texto .
    • Pregunta al paso : ¿Denominador común de una pizza? ¿Ananá? ¿Anchoas? ¿Morrones? O la MASA ...
    • ¿Denominador común de una Web? ¿Flash? ¿Imágenes? ¿Videos? O el TEXTO ...
    • 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!
    • 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.
    • Base: sin estilos
    • Proceso de texto a maqueta : 1. Diseñar wireframes 2. Decorarlos en Photoshop 3. Codificar el sitio con HTML & CSS
    • 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”)
    •  
    • Ejemplo:
    • 1. Wireframes Dos por rango a cubrir (uno al mínimo y otro al máximo ancho definido)
    • 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 ...
    • Orden de creación 1. Celulares antiguos (128px) 2. iPhone y smartphones (320px) 3. iPad y otras tabletas (480px / 768px) 4. PC (+1024px)
    • No queremos adaptación “a los saltos”... Ver ejemplo
    • Ajustar Navegación:
    • Flotar más y más columnas...
    • 2. Maquillar los Wireframes
    • 3. Codificar CSS con Media Queries
    • <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
    • 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)
    • 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!)
    • ¿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
    • 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; />
    • 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; />
    • 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; />
    • 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
    • Compatibilizadores / Shims / Polyfills https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
      • CSS3.mediaqueries-js
      • Respond
      • matchMedia
      • jQuery Media Helpers
      • Adapt.js
    • 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
    • Fórmula mágica (o casi)
      • Tamaño Elemento / Tamaño Contexto
      • Ejemplo:
      • 200px / 960px = 0,2083
    • 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%
    • 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%
    • 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
    • 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
    • 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 )
    • Evitar problemas en Explorer: .imagen{ background: none; /* quitamos otros */ filter: progid:DXImageTransform.Microsoft. AlphaImageLoader(src=&quot;foto. png &quot;, sizingMethod=&quot;scale&quot; ); }
    • 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.
    • 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
      ?
    • 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.
    • www.adaptive-images.com 850Kb -> 210Kb -> 117Kb -> 74Kb -> 30Kb PHP & GD Library + .htaccess + <script> (opcional)
    • 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)
    • 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>
    • <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>
    • 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” */ }
    • Videos adaptables FitVids.js (plugin para JQuery) https://github.com/davatron5000/FitVids.js Videos elásticos: http://webdesignerwall.com/tutorials/css-elastic-videos
    • 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)
    • 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 .
    • 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
    • Web móvil: ¿inclusiva y accesible? Hernán Beati