Jornadas de Accesibilidad

Transcripción

1 Christian González (Diseño y estándares web) Jornadas de Dispositivos móviles. Navegadores móviles. Antes de comenzar a meter código. Estructura de maquetación. Buenas prácticas. Enlaces. Muchas gracias.

2 Dispositivos móviles Hay una gran variedad de dispositivos móviles que evolucionan constantemente. BlackBerry Es un dispositivo handheld inalámbrico introducido en 1999 que admite correo push, telefonía móvil, SMS, navegación web y otros servicios de información inalámbricos. Dispositivos móviles Hay una gran variedad de dispositivos móviles que evolucionan constantemente. Nokia N95 Se basa en el software del paquete 1 de la tercera edición S60 sistema operativo Symbian (v9.2) y es particularmente significativo para ser el primer HSDPA de Nokia y también primer celular con GPS incluido.

3 Dispositivos móviles Hay una gran variedad de dispositivos móviles que evolucionan constantemente. iphone Es un teléfono celular multimedia, con capacidad para navegar en Internet y tecnología GSM y EDGE, que fue desarrollado y es comercializado por Apple. Navegadore móviles Hay una gran variedad de navegadores para visualizar nuestros sitios web. Opera Mini Es un navegador web para dispositivos móviles desarrollado con Java ME. Funciona en la mayoría de los teléfonos que soportan midlets Java. El navegador está disponible en dos versiones, dependiendo de la memoria instalada en el teléfono.

4 Navegadores móviles Hay una gran variedad de navegadores para visualizar nuestros sitios web. Safari Mobile Utiliza la versión beta del webkit (el motor de renderizado de Safari) y la que vemos en la versión final de Safari incluida con Leopard, Navegadore móviles Hay una gran variedad de navegadores para visualizar nuestros sitios web. Internet Explorer Mobile Permite navegar por la web o descargar páginas para leerlas mientras trabaja sin conexión. Ha sido optimizado para conexiones rápidas o lentas, con lo cual puede elegir entre páginas con un denso contenido gráfico si dispone de una conexión lo suficientemente rápida, o páginas sólo de texto si su conexión es algo más lenta.

5 Antes de comenzar a teclear código Para que el usuario quede satisfecho: Es importante dejar a un lado el diseño visual para centrarnos en mostrar la información importante de nuestro sitio web. Antes de comenzar a teclear código Para que el usuario quede satisfecho: Es importante dejar a un lado el diseño visual para centrarnos en mostrar la información importante de nuestro sitio web. Es importante hacer una web funcional que proporcione la información que necesita el usuario de una forma rápida y sencilla.

6 Antes de comenzar a teclear código Para que el usuario quede satisfecho: Es importante dejar a un lado el diseño visual para centrarnos en mostrar la información importante de nuestro sitio web. Es importante hacer una web funcional que proporcione la información que necesita el usuario de una forma rápida y sencilla. Son importantes los menús de navegación claros, en los que la navegación por las diferentes páginas proporcionen la información demandada por el usuario. Estructuras de maquetación Proporcionar una estructura de maquetación lógica.

7 Estructuras de maquetación Proporcionar una estructura de maquetación lógica. CABECERA Podemos proporcionar información corporativa a modo de imagen o utilizar encabezados. Es muy importante utilizar textos alternativos para las imágenes. Estructuras de maquetación Proporcionar una estructura de maquetación lógica. NAVEGACIÓN - Proporcionaremos información de primer nivel. - Es importante no abusar del scroll. - Estructurarlo de forma que sin estilos pueda ser legible.

8 Estructuras de maquetación Proporcionar una estructura de maquetación lógica. CONTENIDO - Proporcionaremos información breve pero consistente. - Es importante no abusar del scroll. - Estructurarlo de forma que sin estilos pueda ser legible. Estructuras de maquetación Proporcionar una estructura de maquetación lógica. NAVEGACIÓN - Proporcionaremos una navegación de refuerzo. - Es aconsejable utilizar accesos del teclado (Acceskey).

9 Estructuras de maquetación Proporcionar una estructura de maquetación lógica. PIE DE PÁGINA - Proporcionaremos una información reducida, teléfonos de contacto . A continuación describiremos quince pautas que nos servirán a la hora de crear un Sitio Web Móvil.

10 1. Consistencia en el contenido Asegúrese de que el contenido obtenido accediendo a la URL proporciona una consistencia de contenido coherente cuando se accede desde diferentes dispositivos. Fuente:

11

12 2. Proporcione una barra de navegación mínima Proporcione una barra de navegación mínima al principio de la página con los botones principales para el acceso a la información. 3. Priorice las secciones Sopese la cantidad de vínculos de la página, priorizar los links de navegación. Al existir la posibilidad de que el usuario acceda con un dispositivo móvil de tamaño reducido de pantalla el menú no debe generar un scroll exagerado.

13 4. Navegación de segundo nivel o refuerzo En la navegación de segundo nivel o refuerzo constará de unos botones extraordinarios para poder movernos por el Sitio más rápida y cómodamente. Ejem. [ inicio ] [ anterior ] [ contacto ]. Es muy aconsejable utilizar Accesskey: <li><a href= inicio.html" accesskey="1">inicio</a></li> 5. Identificar claramente el destino de cada vínculo. Identificar claramente el destino de cada vínculo utilizando un lenguaje claro.

14 6. Use un lenguaje claro y simple. Asegúrese de que el contenido es adecuado para su uso en el contexto de dispositivos móviles. 7. Limite el contenido a lo que ha solicitado el usuario. La información que aparezca en la página de segundo nivel ha de corresponderse con el link que nos llevo a ella. Si por ejemplo tenemos un sitio web de una compañía de transportes y selecciono origen Logroño con destino a Pamplona, en la página de resultados ofreceré solamente esa información.

15 8. Divida las páginas en proporciones usables pero de tamaño limitado. Asegúrese de que el tamaño total de la página es apropiado para las limitaciones de memoria de los dispositivos. El tamaño se verá afectado por las imágenes por las CSS y por el XHTML generado. 9. Limite el scroll. El puede encontrar dificultades para desplazarse por el Scroll en algunos dispositivos móviles.

16 10. No utilice medidas absolutas. Las utilización de mediadas relativas nos garantizará una mayor compatibilidad entre los diferentes dispositivos. 11. Organice los documentos. Organice los documentos para que puedan ser leídos sin las hojas de estilo.

17 12. Cree un orden lógico de navegación. Un orden lógico de navegación entre vínculos, controles de formularios y objetos. 13. Optimice el tamaño de la imagen. Optimice el tamaño de las imágenes para facilitar la descarga de las mismas. Además debe proporcionar un texto alternativo ya que muchos usuarios navegará sin haber cargado las imágenes.

18 14. Cuidado con las imágenes de fondo. Si utilizamos imágenes de fondo hay que tener presente de que se va a proporcionar la misma información sin las imágenes. Muchos dispositivos no muestran el fondo. Estaríamos haciendo una mejora de diseño que solo se verá en móviles muy concretos. 14. Cuidado con las imágenes de fondo. Si utilizamos imágenes de fondo hay que tener presente de que se va a proporcionar la misma información sin las imágenes. Muchos dispositivos no muestran el fondo. Estaríamos haciendo una mejora de diseño que solo se verá en móviles muy concretos.

19 15. Cuidado con la propiedad Tel. Para dotar de una mayor funcionalidad a nuestros links podemos utilizar la propiedad tel. Ejem. <a href= tel: > </a> Deberíamos tener en cuenta que esta propiedad no funciona en los dispositivos móviles. Muchas gracias Christian González info@christiangr.com