El documento recoge un conjunto de consejos interesantes y sobretodo en un lenguaje más accesible que las Mobile Web Best Practices (si bien estas son indispensables).

También explica en la introducción las diferentes asociaciones y organizaciones que están detrás de los últimos intentos para estandarizar dispositivos y formatos (W3C, OMA, NFTH y Tiresias).

Otro punto que no suele verse son las distintas herramientas o programas que podemos encotrar a la hora de hacer los teléfonos móviles más accesibles (copio y pego):

• Nombre: Mobile Speak
  • Fabricante: Code factory
  • URL: http://www.codefactory.es
  • Tipo de herramienta: Lector de pantalla para teléfonos móviles
  • Sistema operativo: Symbian
  • Descripción: Aplicación de asistencia consistente en un lector de pantalla para teléfonos móviles que utilicen el sistema operativo Symbian. Da soporte a algunas aplicaciones de accesorios creadas por el fabricante, como son juegos, reconocedor de colores, y otras.
• Nombre: SMS Dictation
  • Fabricante: Nuance
  • URL: http://www.nuance.com
  • Tipo de herramienta: Reconocedor de voz aplicado a dispositivos móviles.
  • Sistema operativo: Symbian.
  • Descripción: Aplicación basada en el Dragon Naturally Speaking (para PC) y que ofrece la funcionalidad de poder crear mensajes de texto a través del dictado en dispositivos móviles.
• Nombre: Mobile accessibility
  • Fabricante: Code factory
  • URL: http://www.codefactory.es
  • Tipo de herramienta: Solución cerrada para teléfonos móviles diseñada para ciegos
  • Sistema operativo: Symbian
  • Descripción: Aplicación para teléfonos móviles que da acceso a las funciones básicas de un teléfono móvil para usuarios ciegos. Permite llamar, consultar la agenda, enviar y leer mensajes SMS y MMS. Utiliza síntesis de voz.
• Nombre: Mobile magnifier
  • Fabricante: Code factory
  • URL: http://www.codefactory.es
  • Tipo de herramienta: Magnificador de pantalla para teléfonos móviles
  • Sistema operativo: Symbian
  • Descripción: Aplicación de asistencia que, junto con Mobile Speak o sin él, da soporte de asistencia para usuarios con deficiencia visual parcial, aportando un aumento controlado de la imagen de la pantalla. Posee configuraciones para controlar el contraste de color, el tamaño de aumento y soporte con salida de síntesis de voz, si se instala junto con Mobile Speak.
• Nombre: Mobile speak pocket
  • Fabricante: Code factory
  • URL: http://www.codefactory.es
  • Tipo de herramienta: Lector de pantalla para PDAs y Smartphone
  • Sistema operativo: Microsoft windows 2003/2005 pocket, phone and Smartphone edition
  • Descripción: Lector de pantalla para PDAs que funciona con la mayoría de versiones de Microsoft Windows Mobile.
    La salida de información se realiza mediante síntesis de voz o conectando una línea braille mediante tecnología Bluetooth. Soporta un teclado Bluetooth como método de entrada de información aunque implementa varios mecanismos para poder utilizar la PDA sin necesidad de accesorios externos al dispositivo.

Más información en la web de INTECO

Para rematarlo acabo de instalar un plugin para wordpress que mobiliza (si es que esa palabra se puede utilizar) un blog en wordpress para que se vea correctamente en un teléfono móvil.

El plugin lo presenta MobileForge y se llama The dotMobi WordPress Mobile Pack y su instalación es tan sencilla como la de cualquier plugin:

1. Accedemos y nos logueamos en panel de control de nuestro blog: http://nuestroblog.com/wp-admin
2. Cargamos la sección Añadir Plugins
3. Buscamos el plugin por  nombre: WordPress Mobile Pack
4. Accedemos a la instalación automática.
5. Si se produce algún error, se puede realizar también la instalación manual de WordPress Mobile Pack.

Actualmente este blog está bajo la versión 2.8.1 de WordPress y si bien es cierto que tiene algunas modificaciones para mejorar la accesibilidad del tema base, este plugin permite mobilizar correctamente cualquier wordpress ya que carga un tema independiente.

Una prueba rápida nos da un 94/100 en el validador de w3c mobileOK.

Sin duda una aproximación mucho mejor que simplemente personalizar la css para los dispositivos móbiles.

EDITO: Es raro, porque con los posts antiguos todo funciona correctamente, pero este WordPress y Mobile OK no. Únicamente carga el título y luego falla.

De momento he probado a:

• Actualizar WordPress a la versión 2.8.2.
• Actualizar el plugin de WP Super Cache.
• Limpiar las reglas del .htaccess como explican en la página de configuración del WP Super Cache.
• Desactivar el plugin de vozme.
• Crear un nuevo post.

Nada ha solucionado el problema (de momento…).

EDITO 1: parece que está solucionado. Era algún problema con las opciones:

• Mobile Theme->Partitiion Large Pages
• Mobile Theme->Shrink images
• Mobile Theme->Simplify styling

Desactivándolas parece que no se reproduce el problema. (solución temporal mientras no encuentro el problema real)

Podemos comprobar que el sitio se renderiza elegantemente si lo probamos utilizando firefox+webdeveloper toolbaro el emulador Beta Yahoo! Mobile en el DotMobi emulator. Obtenemos también un resultado muy positivo si navegamos desde un iphone (imagen tomada de mobilecrunch).

Lo más interesante de todo esto, es que la nueva Beta de Yahoo! Mobile saca un precioso 8 de 10 en el Ready.mobi validator , aunque no valida xhtml (Errores además fácilmente solucionables, como el uso de la etiqueta align, cellspacing y no incluir los textos alternativos de las imágenes).

¿Realmente los estándares son un problema? ¿No deberían tomarse la molestia de validar formalmente los nuevos productos que sacan?

Viendo el resultado de la validación, la verdad es que se me apaciguó la emoción de probar la plataforma de Yahoo! para desarrolladores de sitios móviles, donde prometen que:

“el SDK Blueprint 1.0 es una plataforma de desarrollo basada en estándares”

Vía MobileCrunch: New beta version of m.yahoo.com in the works – we’ve got screenshots

Se trataba de escoger una página de un sitio y rehacerla de manera que validase su código (xhtml, css) y se solucionasen los problemas que pudiera tener cuando se navegaba desde un dispositivo móvil.

Para este ejercicio elegí rediseñar este nuestro blog, y de paso hacer varios cambios que tenía en la cabeza:

1. Solucionados los problemas que no permitían validar el xhtml. Ahora mismo la plantilla del libro de apuntes  es xhtml 1.0  Transitional ok.
   Ahora sólo queda revisar todos los posts para solucionar el código que genera el editor de texto rico de wordpress (que no genera xhtml válido…).
   
2. Creada una css para dispositivos móviles libro de apuntes Mobile CSS2.1 compliant. De esa manera si te conectas desde un móvil, el contenido aparecerá maquetado de otra manera (evitando algunos errores). Lo principal es que no carga ni la imagen de la cabecera ni lo bullets de las listas y que el menú de la izquierda se muestra al final del último post.
3. Revisada la css para eliminar las medidas absolutas. Se han cambiado todos los px a em, para lo que fue de gran ayuda el EmCalculator, una calculadora para pasar medidas absolutas a relativas (de px a em). Además también valida libro de apuntes screen CSS2.1.
4. Se han solucionado algunos problemillas de accesibilidad, con lo que ahora la plantilla cumple el nivel AA de WAI (comprobado mediante el TAW).
5. Añadidas varias anclas que únicamente se ven si navegas desde dispositivos móviles. La intención facilitar la navegación (acceso al menú, saltar al contenido y volver al principio).

Los emuladores de dot.mobi, no muestran la css apropiada, sin embargo sí podemos comprobarlo desde nuestro teléfono real, desde Firefox con la web developer toolbar o utilizando el opera mini emulator.

Por otra parte la plantilla no valida mobileok validator principalmente por el tamaño total de la página (160KB!!), porque es xhtml transitional y no se marcan el tamaño de las imágenes…

Debería también personalizar el contenido que se muestra cuando navegas desde el móvil, a que por ejemplo no tiene mucho sentido ver la nube de tags en la minúscula pantalla del teléfono.

A continuación, la traducción a inglés de lo realizado.

Se trataba de personalizar el contenido según el dispositivo del usuario, es decir, si una persona se conecta a nuestra web desde un móvil, debemos entregarle contenido ajustado a su dispositivo (por ejemplo debemos reducir el número de imágenes, utilizar una maquetación más sencilla…), pero si se conecta desde un ordenador o navegador “normal”, debe poder aprovechar al máximo las capacidades del mismo (debe poder ver vídeos, flash, utilizar ajax…).

Para este ejercicio debíamos basarnos en el de la semana pasada y debíamos modificar el menú, el tamaño y formato de las imágenes.

En resumen lo que hice fue:

• Eliminar la imagen decorativa principal de Beethoven.
• Crear dos css, una para los móviles y otra para el resto de los dispoisitivos.
• Ajustar el tamaño del contenido principal y pintar el menú de navegación flotando a la derecha para aquellos dispositivos que no sean móviles.

Podéis consultar el resultado en:

• dot.mobi bruno rico assignment for week 4.
• direct link to exercise about Beethoven site.

A partir de aquí, una pequeña traducción al inglés de lo realizado.

Para ello debíamos realizar un pequeño rediseño de una web de prueba con información acerca de Beethoven.

En resumen lo que hice fue:

• Reescalar la imagen de la cabecera y hacer un pequeño ajuste en la css para que no dejase tantos márgenes laterares.
• Añadir enlace directo y anclas a las sinfonías y otros a la parte superior de la página.
• Dividir el menú en dos partes: por una parte un menú con los relativos a la información que se está mostrando. Por otra parte un menú con los enlaces de navegación genéricos del sitio (política de privacidad, home…)
• Transformar la tabla en la que se mostraban las distintas sinfonías en una lista ordenada.

Como no es un curso orientado al diseño (y por falta de tiempo), no he realizado ajustes para que se viese más bonito, sino que he corregido los errores para que la información se mostrase correctamente.

Podéis consultar el ejercicio en Bruno Rico Week 3 Assignment y probarlo en el emulador dot.moby Beethoven site.

Para ser exactos, los objetivos eran:

• Aprender el código y etiquetas que no debemos usar.
• Identificar los errores de diseño y etiquetas.
• Evitar y saberlos corregir para realizar un diseño usable desde un dispositivo móvil.
• Aprender las técnicas para reemplazar los popups, las tablas anidadas, las tablas de maquetación, los gráficos para espaciar, los frames o marcos y los mapas de imagen.

He de decir que esta práctica, aunque me ha recordado varias cosas, ha sido más lenta y trabajosa que aprovechable, pero bueno, supongo que para demostrar que has aprendido y leido los contenidos hay que mancharse las manos…

El ejercicio en cuestión:

• Web Original a revisar W3C: Gold Trade
• Web Revisada por Bruno Rico: Gold Trade

Aviso, no se trataba de rehacer el diseño, sino de eliminar barreras. Bueno, al menos así es como yo lo he interpretado…

Lo que más trabajo me ha dado ha sido sin duda los formularios, el tema de la localización de las oficinas y luego la maquetación.

A partir de aquí, el mensaje de entrega de la práctica (en inglés):

Assignment 6: Redesign a non accesible site

Well here is my redesign.
I didn’t change the colors, etc and I managed to arrange only the web mobility issues.

It was tested with the dot.mobi emulator.
I published the web on Bruno Rico: Gold Trade so you can look it easily.

The most annoying issues were:

• forms: validate it.
• tables: I splitted the rate table in three tables (one for every currency). Also made it accessible.
• Layout: a bit annoying too.
• Problem with the bit image of branch location: I decided not to redesign or detect dispositive, but it’s a todo! .

Al estilo de W3C Quick Tips to Make Accessible Web Sites podemos descargarnos las Tarjetas de Buenas Prácticas en Web Móvil (también disponibles en inglés Mobile Web Best Practices Flipcards).

Por desgracia no las envían a casa gratuitamente como las anteriores…

Es muy curioso fijarse en el formato empleado: es totalmente accesible cuando en verdad parecen simples imágenes…

También existe la versión PDF Mobile Web Best Practices (MWBP) Flipcards preparada para imprimirlas aprovechando el máximo de papel.

Es una buena iniciativa para facilitarle la vida a editores de contenido y diseñadores web (¡y para el resto!).