5 Jul 2009
Autor: Álvaro Brito
En: Web Móvil, XHTML
Cuando se habla de Web Móvil se está haciendo referencia a una Web en la que el usuario puede acceder a la información desde cualquier lugar, independientemente del tipo de dispositivo que utilice para ello.

La Web móvil se presenta como un auténtico reto tanto para usuarios como para desarrolladores ya que, por un lado, el usuario encuentra problemas al intentar acceder a los sitios Web desde los dispositivos móviles, y por otro, los proveedores de contenido encuentran dificultades para crear sitios Web que funcionen adecuadamente en todos los tipos de dispositivos y configuraciones. Con la Web Móvil se intenta llegar a más usuarios y que ellos puedan acceder desde cualquier dispositivo móvil a la Web.
Este documento especifica las Mejores Prácticas para el contenido Web de dispositivos móviles. El objetivo principal es mejorar la experiencia del usuario de la Web cuando se accede desde estos dispositivos.
Las recomendaciones se refieren a la entrega de contenido y no a los procesos por los cuales se crea, ni a los dispositivos o agentes de usuario al que se entrega.
Principalmente a los desarrolladores y operadores de sitios Web. Con este documento se intenta familiarizados con la creación de sitios Web, y tener una familiaridad con las tecnologías que intervienen, tales como servidores Web y HTTP.
Buenas prácticas Web Móvl
- Consistencia temática: Mantener una temática coherente para los distintos dispositivos móviles.
- Capacidades: Explotar las capacidades del dispositivo para proporcionar una mejor experiencia al usuario.
- Deficiencias: Toma las medidas oportunas para evitar implementaciones deficientes.
- Pruebas: Lllevar a cabo las pruebas sobre los dispositivos, así como los emuladores.
- URLs: Usar URLs cortas.
- Barra de Navegación: Oferecer como mínimo un menú navegación en la parte superior de la página.
- Equilibrio en los enlaces: Tener en cuenta el equilibrio entre tener demasiados enlaces en una página y pedir al usuario a seguir demasiados enlaces para llegar a lo que están buscando
- Navegación: Proporcionar mecanismos de navegación coherentes.
- Claves de Acceso (Acces Keys): Asignar claves de acceso a los enlaces en los menús de navegación y a los enlaces que son visitados frecuentemente.
- Identificar los enlaces: Identificar claramente el objetivo de cada vínculo.
- Mapa de imágenes: No usar mapa de imágenes a menos que sepas que el dispositivo lo soporta eficazmente.
- Pop-Ups o Ventanas emergentes: No utilices Pop-Ups sin informar al usuario.
- Auto Refresh: No utitlizar auto refresh (auto refrescar página) en la página a menos que se le haya informado al usuario.
- Redireccionamiento: No utilices marcar para redirigir las páginas automaticamente. Configura el servidor para que el mismo lo haga de forma automática.
- Recursos externos: Mantén el número de recursos externos al mínimo.
- Contenedido conveniente: Asegúrese de que el contenido es conveniente para su utilización en un contexto móvil.
- Claridad: Utiliza un lenguaje claro y sencillo.
- Limitación del contenido: Limite el contenido a lo que el usuario ha solicitado.
- Tamaño de páginas usable: Mantener el peso de página limitado para que no ralentice la navegación del usuario.
- Tamaño de páginas limitado: Asegurarse de que el tamaño global de la página es adecuado para las limitaciones de memoria del dispositivo.
- Desplazamiento o Scroll: Límite el desplazamiento de la página en una dirección, en el caso de que el desplazamiento secundario se pueda evitar.
- Imágenes para el espaciado: Nunca utilicemos imágenes para el espaciado.
- Tamaño de imágenes: No utitlizar imágenes con una alta resolución y peso elevados. Para una mayor prestación y carga del dispositivo.
- Uso del color e imágenes: Asegurarse que la información que proporcionamos con colores e imágenes también esta disponible sin el uso de estas.
- Contraste de color: Mantener un contraste claro entre el color de fondo y el color del contenido.
- Imágenes de fondo: Cuando utilices imágenes de fondo aseguúrate de que el contenido sigue siendo legible en el dispositivo.
- Título de página: Ofrecer un breve pero descriptivo título de la página.
- No Frames: No utilizar frames (marcos) en ninguna página.
- Estructura: Usar las características del lenguaje para crear una estructura lógica en el documento.
- Tablas: Antes de usar las tablas asegúrate de que el dispositivo las soporte eficazmente.
- Tablas anidadas: No utilizar tablas anidadas.
- Tablas para diseño: No utilices las tablas para diseñar la página.
- Tablas alternativas: Siempre que sea posible, utiliza una alternativa a la presentación de datos o presentación tabular.
- Texto alternativo: Proporcionar un texto alternativo para todo elemento no textual.
- Objects o Scripts: No utilizar objetos incrustados o script, ya que actulamente la mayoría de los dispositivos no los soportan.
- Especificación en el tamaño de las imágenes: Especifica el tamaño de las imágenes a descargar para aquellas que tengan un peso alto.
- Redimensionamiento de imágenes: Cambiar el tamaño de las imágenes en servidor para aquellas que tengan un peso demasiado alto.
- Marcado Válido: Crea documentos que validen satisfactoriamente.
- Medidas: No utilizar medidas en píxeles ni unidades absolutas..
- Uso de CSS: Utiliza una hoja de estilos para controlar la presentación y disposición de la página, a menos que el dispositivo no lo soporte.
- Soporte CSS: Organiza los documentos de modo que si es necesario puedan ser leídos sin hojas de estilo.
- Tamaño de la hoja de estilos CSS: Mantener y minimizar el tamaño de la hoja de estilos.
- Minimizar: Utilizar un marcado conciso y eficiente.
- Soporte de formatos: Enviar contenido en un formato que se sepa que es soportado por el dispositivo.
- Formato preferido: Siempre que sea posible, enviar el contenido en un formato preferido.
- Codificación de caracteres: Asegúrese de que la codificación de caracteres del documento es soportado por el dispositivo.
- Uso de la codificación: Indicar la codificación de caracteres que se utilice.
- Mensajes de Error: Proporcionar información útil en los mensajes de error.
- Cookies: No se basan en cookies disponibles.
- Caché: Proporcionar la información en caché de las respuestas HTTP.
- Fuentes: No contar con la herencia en estilo de fuente.
- Minimizar acciones del teclado: Matener el número de pulsaciones o acciones del teclado del dispositivo al mínimo, para una mayor rapidez del usuario.
- Inputs o entradas de texto libre: Evitar la entrada de texto libre, siempre que sea posible.
- Valores por defecto: Ofrecer pre-seleccionado los valores por defecto cuando sea posible.
- Inputs: Especifique un modo de entrada de texto por defecto, el lenguaje y/o formato de entrada, si el dispositivo se sabe lo soporte.
- Orden de tabulación: Crear un orden lógico a través de los enlaces, controles de formulario y objetos.
- Cotrol de Labels: Etiqueta todos los controles de forma adecuada y explícitamente asociados con las etiquetas..
- Posición de controles: Posicionar las etiquetas de modo que se establecen correctamente en relación a la forma que se refieren a los controles.
Por útlimo os proprociono el validador de las Buenas Prácticas en Web Móvil:
Validador Web Móvil
Fuente: W3C Web Móvil
alvarobr85
Julio 6th, 2009. Hora: 11:55
También pongo un ejemplo claro de como maquetar una web para movil. Como es el caso de la adaptación Web de la página de Technorati exclusivamente para móviles:
m.technorati.com
esainz
Julio 6th, 2009. Hora: 19:32
Estas buenas prácticas para la web móvil, son aplicables a la maquetación web de toda la vida.
Los móviles cada vez traen navegadores más avanzados, y se puede visitar la mayoría de los sitios aunque no estén adaptados.
alvarobr85
Julio 6th, 2009. Hora: 22:28
Bueno, la mayor parte de las buenas prácticas se usan ya en maquetación Web “básica”. Pero tenemos que tener cuenta que no es solo para teléfonos móviles sino para cualquier dispositivo móvil.
Hoy en día hay bastantes móviles de última generación que, soportan perfectamente las tecnologías de la Web y la forma de presentarlas.
Pero estas prácticas no son solo para que se visualicen bien en el móvil o no. Lo más importante es que con estas prácticas mejoramos la navegación del usuario en la página y el rendimiento de ella. Así el usuario evita perder el tiempo con componentes gráficos o demasiados objetos que “sobran” y no “perderse” por la página.. En un dispositivo móvil se busca que las Web carguen rapidamente, se navegue facilmente por ella y que sea práctica.
esainz
Julio 6th, 2009. Hora: 23:48
Algunos simuladores de navegadores móviles:
Opera mini
http://www.opera.com/mini/demo/
Iphone
http://www.testiphone.com/
Nokia
http://www.forum.nokia.com/info/sw.nokia.com/id/db2c69a2-4066-46ff-81c4-caac8872a7c5/NMB40_install.zip.html
Openwave
http://developer.openwave.com/dvl/tools_and_sdk/phone_simulator/choosing.htm
Blackberry
http://www.blackberry.com/developers/downloads/simulators/index.shtml