Diapositiva 1 Portada: TEMA 6: ACCESIBILIDAD A LA WEB MÓVIL. MOVILIDAD DESDE LA WEB ACCESIBLE Lourdes Moreno, Paloma Martínez Universidad Carlos III de Madrid {lmoreno,pmf}@inf.uc3m.es Asignatura Humanidades “Evitando la barreras de accesibilidad en la Sociedad de la Información” OpenCourseWare de la Universidad Carlos III de Madrid Esta obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-Compartirigual 3.0 España (http://creativecommons.org/licenses/by-nc-sa/3.0/es/deed.es) Logo licencia Creative Commons Reconocimiento-NoComercial-Compartirigual Diapositiva 2 Contenido: Imagen de un usuario trabajando con varios dispositivos móviles. Créditos de la foto: Autor: Michael Coghlan Ubicada en: https://www.flickr.com/photos/mikecogh/7348035690/in/photolist-ccjB1w-boWaij-9DVVfk-8SViJr-dsojPq-aDgsC-dxgtXS-dQXWH2-d5DMnG-8hG1ky-psg32v-neQ5Ed-neN5UB-ncKfFV-ncKvQ3-neQr51-neN24a-nePZpJ-neMZo6-neQdnY-ncKzMq-nePXch-8SYnSq-8SYnKq-8SVhwV-8SYoPo-8SYo11-8SVhkB-8SYnQj-8SVibB-8SYp23-8SYoYG-8SYofs-aDgYm-casCAw-8SVinP-4AYU89-8SVhTr-jJKoja-8WNvTL-oyJQB5-neN82F-ncKvy5-neMQE4-neQdwW-neN5JX-ncKy2Y-neN8dH-ncKj2n-neNi3T Bajo licencia creative commons: https://creativecommons.org/licenses/by-sa/2.0/ Diapositiva 3 Título: Índice Contenido: Accesibilidad a la Web móvil Movilidad desde la Web accesible En la diapositiva hay dos imágenes, una de ellas muestra varios dispositivos móviles de distintas marcas y la otra es el logotipo de mobileOK de la W3C. Diapositiva 4 Título: Accesibilidad a la Web móvil (I) Contenido: W3C lanzó a mediados del 2005 la Iniciativa Web Móvil. La Iniciativa Web Móvil busca resolver los problemas de interoperabilidad y usabilidad que dificultan el acceso a la Web desde dispositivos móviles, haciendo posible uno de los objetivos principales del W3C que consiste en alcanzar una Web única. El principal objetivo de las iniciativas puestas en marcha en torno a la Web móvil es la búsqueda de una Web no fragmentada, como consecuencia de la multitud de nuevos dispositivos móviles, navegadores, operadores, proveedores de contenido, etc. Información: http://www.w3c.es/Divulgacion/GuiasBreves/WebMovil En la diapositiva hay una imagen del logotipo de la Mobile Web Initiative de la W3C Diapositiva 5 Título: Accesibilidad a la web móvil (II) Contenido: Principales diferencias Diferente tipos de contenido que manejan Capacidades de los dispositivos (pantallas pequeñas) Contexto en el cual el usuario recibe el contenido (caminando, autobús, …) En la diapositiva hay 3 imágenes de 3 dispositivos móviles: un iphone (Mac), una pda y un móvil con teclado extraíble Diapositiva 6 Título: Accesibilidad a la web móvil (III) Contenido: Generación de buenas prácticas. Para ello se creó el "Grupo de Trabajo de Buenas Prácticas en Web Móvil" (Mobile Web Best Practices, MWBP) cuyo objetivo es desarrollar pautas, puntos de verificación y buenas prácticas para ayudar a los proveedores de contenido a desarrollar contenido Web que funcione correctamente en dispositivos móviles. Descripción de dispositivos móviles. Para ello se creó el "Grupo de Trabajo de Descripción de Dispositivo" para guiar el desarrollo de mecanismos de descripción de dispositivos que los desarrolladores de contenido podrán utilizar para adaptar los contenidos a los diferentes dispositivos. Diapositiva 7 Título: Accesibilidad a la web móvil, Buenas Prácticas en Web Móvil (MWBP) Contenido: Las Buenas prácticas en Web Móvil 1.0 son un estándar Web del W3C cuyo objetivo es ayudar a los desarrolladores Web a diseñar y publicar contenido Web que funcione adecuadamente en dispositivos móviles. El objetivo principal de las MWBP es el de mejorar la experiencia del usuario en la Web cuando se accede desde dispositivos móviles. MWBP 1.0: Mobile Web Best Practices 1.0, Basic Guidelines. W3C Recommendation 29 July 2008 (W3C, 2008) Mobile Web Best Practices 1.0 (MWBP1.0 ) Flipcards (W3C, 2008 b) MobiWeb1.0, MobiWeb2.0 Project: "Mobile Web 2.0“ En la diapositiva hay una imagen del Logo de Buenas prácticas en Web Móvil 1.0 (W3C) Diapositiva 8 Título: Accesibilidad a la web móvil. Tarjetas de Buenas Prácticas en Web Móvil Contenido: Tarjetas de Buenas Prácticas en Web Móvil 1.0 (MWBP 1.0) (W3C, 2008 b) Imagen de las Tarjetas de Buenas Prácticas en Web Móvil 1.0 (MWBP 1.0) (W3C, 2008 b) Diapositiva 9 Título: Accesibilidad a la Web móvil. Buenas Prácticas en el Desarrollo de Aplicaciones para la Web Móvil (MWABP) Contenido: Nuevo estándar de Buenas Prácticas, Diciembre 2010 Construye aplicaciones más inteligentes para la Web Móvil Es un documento de Buenas Prácticas en el Desarrollo de Aplicaciones para la Web Móvil donde se ofrecen: Consejos prácticos para poder desarrollar e implementar de forma fácil y sencilla aplicaciones para la Web móvil que funcionan en numerosas plataformas. Indican como diseñar aplicaciones Web que sean eficientes, adecuadas a los diferentes contextos y que mejoren la experiencia de usuario de los dispositivos móviles. Recursos: MWABP: Mobile Web Application Best Practices (W3C, 2010) Tarjetas: (W3C, 2010 b) En la diapositiva hay una imagen del Logo de Buenas prácticas en Web Móvil 1.0 (W3C) Diapositiva 10 Título: Accesibilidad a la web móvil. Tarjetas de Buenas Prácticas en el Desarrollo de Aplicaciones para la Web Móvil Contenido: (W3C, 2010 b) Tarjetas de Buenas Prácticas en Aplicaciones para la Web Móvil http://www.w3.org/2010/09/MWABP/#exploit Imagen de las tarjetas Buenas Prácticas en Aplicaciones para la Web Móvil Diapositiva 11 Título: Accesibilidad a la web móvil. Validador de las MWBP Contenido: El W3C pone también a disposición de los desarrolladores un validador automático online. La aplicación valida la adecuación de una página a las buenas prácticas MWBP 1.0. W3C mobileOK Checker (http://validator.w3.org/mobile/): http://validator.w3.org/mobile/ (W3C, 2010 c) Como toda herramienta automática, es una ayuda, pues habrá puntos que no podrán ser verificados mas que de forma manual. Otras herramientas (W3C, 2011) En la diapositiva hay 2 imágenes, una de una interfaz de mobileOK Checker (W3C) y otra Logo de MobileOk (W3C) Diapositiva 12 Título: Movilidad desde la Web accesible. Las MWBP y las WCAG (I) Contenido: Relación entre las WCAG y las MWBP. Documentación desde 2008: Cómo aplicar de forma conjunta: WCAG 2.0 and MWBP 1.0 together (W3C, 2009) De las MWBP a las WCAG: Hacia las WCAG 1.0: From Mobile Web Best Practices 1.0 to Web Content Accessibility Guidelines 1.0 http://www.w3.org/TR/mwbp-wcag/mwbp-wcag10.html Hacia las WCAG 2.0 (borrador) From Mobile Web Best Practices 1.0 to Web Content Accessibility Guidelines 2.0 http://www.w3.org/TR/mwbp-wcag/mwbp-wcag20.html Diapositiva 13 Título: Movilidad desde la Web accesible. Las MWBP y las WCAG (II) Contenido: De las WCAG a las MWBP Desde las WCAG 1.0 a las MWBP: From Web Content Accessibility Guidelines 1.0 to Mobile Web Best Practices 1.0, http://www.w3.org/TR/mwbp-wcag/wcag10-mwbp.html Desde las WCAG 2.0 a las MWBP: From Web Content Accessibility Guidelines 2.0 to Mobile Web Best Practices 1.0 http://www.w3.org/TR/mwbp-wcag/wcag20-mwbp.html Diapositiva 14 Título: Movilidad desde la Web accesible. Soluciones tecnológicas Contenido: Web única que se pueda adaptar a distintos dispositivos móviles parare buena idea La web accesible lo facilita Tecnología que hace el proceso (mobileOK transcoders). Ejemplo de uno español: MERKUR: (Fundación CTIC 2010) http://merkur.fundacionctic.org/index.php.es [W3C, Chus García . 2010. “Movilidad desde la accesibilidad”, Presentación en Jornadas SIDAR 2010] Video presentación: http://www.innovarioja.tv/?video=168 Diapositiva 15 Título: Adaptación de la navegación (I) Contenido: Casi todas las páginas Web diseñadas para presentación de escritorio siguen una estructura común. Este diseño típico de escritorio donde el principal contenido está rodeado por contenido auxiliar. Es terrible para móviles. No trates de reproducir esto para móviles. En la diapositiva hay una imagen de una maqueta de estructura con elementos de navegación de una página web para escritorio Diapositiva 16 Título: Adaptación de la navegación (II) Contenido: Si la pantalla móvil, por pequeña que sea, solo muestra la navegación y la información de la marca cuando el usuario se mueve de página a página no hay nada que indique que la página haya cambiado. Los usuarios de móviles tienden a tener una tarea específica en mente. Necesitan saber algo o hacer algo rápidamente. Esto se suma a la necesidad de poner información importante en la pantalla sin esperar a que el usuario tenga que desplazarse hacia abajo para encontrarla. Diapositiva 17 Título: Adaptación de la navegación (III) Contenido: Un diseño móvil típico donde una cantidad de contenido de la página primaria es visible sin desplazamiento (por ejemplo, arriba de la línea punteada del diagrama) Como muestra el diagrama la idea es que no más de 2 o 3 líneas sean tomadas para el material de estructura, típicamente el encabezado del sitio con no más de 3 enlaces claves. Por lo menos ½ de la pantalla debe ofrecer el contenido específico de la página. En la diapositiva hay una imagen de maqueta de estructura con elementos de navegación de una página móvil Diapositiva 18 Título: Adaptación de la navegación (IV) Contenido: Dependiendo de la aplicación, un buscador podría ser considerado una parte importante del contenido. Si es un sitio de comercio electrónico, poder buscar un artículo es una función crucial. Si vas a proporcionar información sobre eventos (en este caso ‘eventos’ significa desde una reunión hasta un vuelo) entonces poder ver un evento en particular, es, de nuevo, una característica importante. Así que ¿dónde va el resto del menú de navegación? En la parte inferior. Diapositiva 19 Título: Adaptación de la navegación (V) Contenido: Esto no es tan diferente como la estructura de escritorio con la que todos estamos familiarizados. Muchos sitios incluyen enlaces en letra pequeña en la parte inferior por lo que es buena idea hacer uso de ella en móvil. Es imposible decir que debe ponerse en la barra de navegación superior en el móvil. Frecuentemente prevalecen consideraciones de marketing/marcas, las cuales tienen su importancia, pero es razonable suponer que los enlaces claves incluirá una o más de: página de inicio; una o dos de las páginas más populares/claves; un mapa del sitio. Diapositiva 20 Título: Adaptación de la navegación (VI) Contenido: La barra de navegación en la parte inferior de la página puede ser tan extensa como sea necesaria, pero si el sitio tiene muchos enlaces, probablemente es mejor guiar al usuario etapa por etapa en lugar de presentar todos los enlaces en el mismo lugar. El sistema de navegación por migas de pan es muy conocida por los usuarios, y si tu sitio lo merece, es un buen sistema de navegación para el usuario. En resumen: la navegación en móvil es complicada. Tu usuario probablemente sabrá lo que está buscando y por lo tanto, idealmente, es lo que verán en la pantalla. Si están buscando algo en otra página: enséñales el camino. Recuerda el contexto, que ellos y tu, acostumbrados a ver en la pantalla de escritorio, ya no está presente. Diapositiva 21 Título: Aplicaciones móviles Contenido: Móviles Responsive design Nativas Híbridas Diapositiva 22 Título: Guías accesibilidad para desarrollo de apps nativas: Android Contenido: Guías para desarrolladores de Android: Implementing Accessibility: http://developer.android.com/training/accessibility/index.html Accessibility patterns: http://developer.android.com/design/patterns/accessibility.html Making Applications Accessible: https://developer.android.com/guide/topics/ui/accessibility/apps.html Accessibility Developer Checklist: https://developer.android.com/guide/topics/ui/accessibility/checklist.html Building Accessibility Services (API features): https://developer.android.com/guide/topics/ui/accessibility/services.html Guías para usuarios de Android: Ayuda de Android Accessibility: https://support.google.com/accessibility/android/?hl=es#topic=3529932 Diapositiva 23 Título: Guías accesibilidad para desarrollo de apps nativas: Apple Contenido: Guía para desarrolladores de Apple: Accessibility for Developers: https://developer.apple.com/accessibility/ Accessibility Programming Guido for iOS: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/iPhoneAccessibility/Introduction/Introduction.html iOS. A wide range of features for a wide range of needs: https://www.apple.com/accessibility/ios/ Making Your iPhone Application Accessible: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/iPhoneAccessibility/Making_Application_Accessible/Making_Application_Accessible.html Verifying App Accessibility on iOS: https://developer.apple.com/library/ios/technotes/TestingAccessibilityOfiOSApps/TestingtheAccessibilityofiOSApps/TestingtheAccessibilityofiOSApps.html#//apple_ref/doc/uid/TP40012619 Diapositiva 24 Título: Guías accesibilidad para usuario de: Apple Contenido: Guía para usuarios de Apple: iOS: Configuring accessibility features: http://support.apple.com/en-us/HT5018 Featrues that are helpful beyond words: https://www.apple.com/accessibility/ios/ Accessibility tips and tricks: https://www.apple.com/ios/accessibility-tips/ Diapositiva 25 Título: Guías accesibilidad para desarrollo de apps nativas: Blackberry Contenido: Guía para desarrolladores de Blackberry: Development Guide Accessibility - BlackBerry Java SDK - 6.0iOS: http://docs.blackberry.com/en/developers/deliverables/20100/index.jsp?name=Accessibility+-+Development+Guide+-+BlackBerry+Java+SDK6.0&language=English&userType=21&category=Development+Guides&subCategory. Incluye: "Understanding accessibility" "Best practice: Designing accessible applications", Guidelines for UI design Guidelines for navigation, for text, for color and images "Developing accessible BlackBerry device applications by using the Accessibility API" "Related resources“ (BlackBerry Screen Reader) Diapositiva 26 Título: Guías accesibilidad para desarrollo de apps nativas: Windows Contenido: Guía para desarrolladores de Windows Mobile 6.5: Accessibility Application Development. Describe los diferentes métodos disponibles en Windows Embedded CE para establecer las opciones de accesibilidad: http://msdn.microsoft.com/en-us/library/aa932900 Accessibility Reference. Proporciona una descripción de los elementos de accesibilidad de programación: http://msdn.microsoft.com/en-us/library/aa925067 Design Guidelines: Accessibility and Ergonomic Guidelines: http://msdn.microsoft.com/en-us/library/aa925067 Diapositiva 27 Título: Referencias (I) Contenido: (W3C, 2008) MWBP 1.0: Mobile Web Best Practices 1.0, Basic Guidelines. W3C Recommendation 29 July 2008, http://www.w3.org/TR/mobile-bp/ (W3C, 2008 b) Mobile Web Best Practices 1.0 (MWBP 1.0) Flipcards http://www.w3c.es/Divulgacion/Tarjetas/MWBP/ (W3C, 2010) MWABP: Mobile Web Application Best Practices, W3C Recommendation 14 December 2010. http://www.w3.org/TR/mwabp/ (W3C, 2010 b) Mobile Web Application Best Practices Cards, (MWABP), 2010, http://www.w3c.es/Divulgacion/Tarjetas/MWABP/ (W3C, 2010 c) W3C mobileOK Checker (v1.4.2 2010). http://validator.w3.org/mobile/ Diapositiva 28 Título: Referencias (II) Contenido: Mobile Accessibility: http://www.w3.org/WAI/mobile/ (Fundación CTIC, 2011) mobileOK chequeo http://www.tawdis.net/ (W3C, 2011) W3C, Developers' corner, Tools, http://www.w3.org/Mobile/Dev (Fundación CTIC, 2010) Fundación CTIC, Merkur, http://merkur.fundacionctic.org/index.php.es Resources for Mobile Accessibility Guidelines: http://www.iheni.com/mobile-accessibility-guidelines/ Mobile accessibility tests: http://www.iheni.com/mobile-accessibility-tests/ Diapositiva 29 Título: Referencias (II) Contenido: Mobile Accessibility Standards and Guidelines v1.0: http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile_access.shtml Mobile Accessibility Standards: http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile Amóvil: identificar dispositivos móviles accesibles, que se ajusten a las diferentes necesidades y preferencias: http://www.amovil.es/es/que-es-amovil Mobile Navigation Guidelines: http://www.funkanu.com/PageFiles/19930/Mobile-Navigation-Guidelines-Funka-2014.pdf Guidelines for the development of accessible mobile interfaces: http://www.funkanu.com/PageFiles/19930/Guidelines_for_the_development_of_accessible_mobile_interfaces.pdf Diapositiva 30 Fin de presentación TEMA 6: ACCESIBILIDAD A LA WEB MÓVIL. MOVILIDAD DESDE LA WEB ACCESIBLE Lourdes Moreno, Paloma Martínez Universidad Carlos III de Madrid {lmoreno,pmf}@inf.uc3m.es Asignatura Humanidades “Evitando la barreras de accesibilidad en la Sociedad de la Información” OpenCourseWare de la Universidad Carlos III de Madrid Fin de presentación