Mi web móvil

Aprovechando que estamos haciendo algunos cambios en la web móvil de la Universidad de Murcia voy a intentar detallar estos cambios en el blog, y de paso ir actualizando con alguna información más.

No es fácil sacar tiempo para escribir en detalle algunas noticias o artículos que leo sobre la web móvil, sin embargo si es más rápido dejar como mínimo los enlaces y una pequeña descripción.

A través del blog de aNieto2K leo un interesante artículo informando de un emulador que nos facilita Opera para probar nuestras aplicaciones web y por supuesto, cómo se visualizará nuestra web móvil en los dispositivos con este navegador.

Podéis descargar este emulador desde la web de Opera. Supongo que a estas alturas ya sabéis que se trata de un emulador de escritorio y no es como el resto que puse en el blog que eran emuladores vía web.

Por último comentaros que es muy sencillo de instalar y que cuando tecleamos la dirección de nuestra web debemos introducir la dirección de la web móvil directamente porque el user-agent con el que accede a la web este emulador no se detecta como la de un navegador móvil. Por tanto, si queréis ver la web móvil de la Universidad de Murcia, no tecleeis http://www.um.es, debeis introducir http://m.um.es

Estoy de vuelta…hace mucho que no puedo dedicar tiempo a este blog. Depende de mi tiempo libre y últimamente por diferentes motivos no he tenido demasiado. Espero poder sacar más tiempo a partir de ahora…

Supongo que muchos de los lectores de este blog tendrán acceso a las estadísticas de visitas de su web, y como sabreis, normalmente y dependiendo de la temática de vuestra web, en verano descienden las visitas. No es que se produzca una descenso catastrófico, pero evidentemente bajan las visitas. La razón es evidente, la gente se va a la playa, a la montaña o a Sebastopol, y allí su conexión normal a internet no existe, así que buscamos otros medios de conexión.

Al final terminamos conectandonos con nuestro móvil, los cuales cada vez tienen mejores conexiones y navegadores. Es por esto que ahora más que nunca cobra importancia tener una web móvil. En el caso de la Universidad de Murcia el número de accesos a la web móvil creció un 30% en Junio, y un 20% en Julio, respecto a Junio. Es decir, entre Mayo y Julio incluidos ha crecido un 50% el número de visitas a la web móvil. Y Agosto va por el mismo camino…

Como digo esto no tiene por qué se así en todos los casos porque tiene mucho que ver con la temática de la página, pero es algo que me ha llamado la atención porque no pensaba que el incremento que ibamos a tener en el verano iba a ser este.

Bueno de momento sólo quería comentaros esta curiosidad y que estoy de vuelta, pronto volveré con  más cosas.

Código QR de http://m.um.es

La Universidad de Murcia utilizará códigos QR en algunos carteles publicitarios. Es una forma más para acercarnos a los usuarios de la web móvil, facilitándole lo máximo posible el acceso a la web.

¿Que es un código QR?

El código QR (del inglés, Quick Response), es un sistema para almacenar información en una matriz de puntos. Su funcionamiento se podría considera como un código de barras bidimensional. Para que un lector sepa cual es la posición correcta para leerlo, el código qr tiene tres cuadrados en las esquinas.

Fue creado a mediados de los noventa por la empresa japonesa Denso-Wave y es en este país donde más se usan este tipo de “código de barras”.

¿Cómo leer un código QR?

Sólo necesitais que el móvil tenga cámara y un programa para leer este tipo de códigos. Os dejo algunas de las páginas donde podeis encontrar este programa:

• http://reader.kaywa.com
• http://www.i-nigma.com
• http://www.quickmark.com.tw/En/basic/index.asp

Si entrais a estas páginas desde el navegador web de vuestro móvil os ofrecerá directamente la descarga del programa que se necesita para poder leer códigos QR. Estas son algunas de las que hay, pero seguro que podeis encontrar más páginas donde descargar estos programas a vuestro ordenador y desde ahí pasarlo al móvil.

¿Cómo crear códigos QR?

Podeis crear códigos QR desde la web http://qrcode.kaywa.com/

¿Qué utilidades tienen los códigos QR?

Son muchas las aplicaciones en las que se pueden usar este tipo de códigos.  Puede ser una herramienta publicitaria muy buena debido a que es poco intrusiva y muy cómoda para obtener datos desde el móvil y llevar usuarios a nuestra web. Espero que poco a poco, cuando las tarifas de internet para los móviles sean más razonables, este tipo de códigos se pongan en carteles publicitarios, en ofertas o anuncios de periódicos, o en cualquier soporte donde anuncien algo y podamos conocer de esta forma toda la oferta o información a través de la web.

Es por tanto un herramienta eficaz contra uno de los enemigos más grandes que considero que tiene la web móvil, teclear las direcciones de las webs que queremos visitar. Todo lo que nos evite hacer eso, significará en parte un éxito y un incremento de usuarios que visitan nuestra web.

Os dejo el cartel publicitario diseñado por el Servicio de Información Universitario de la Universidad de Murcia donde se insertará el código QR.

Por último me gustaría agradecer a Victor, compañero de trabajo, su aportación a la aplicación de estos códigos. Que bien nos ha venido tu blackberry!!. A Oscar, otro compañero, que es el autor del poster y que paró las máquinas rapidamente para poder meter el código QR.

Y por último agradecer a Vicente(jefe del Servicio) y a Juan Carlos(responsable del grupo web) su confianza y apoyo en este tipo de proyectos donde el terreno es tan desconocido.

Fuentes:

• Wikipedia
• Xataka
• Tufuncion
  

Os recomiendo la lectura del alertbox de Jakob Nielsen, Mobile Web 2009 = Desktop Web 1998.  Según nos dice, los problemas que se encuentra ahora un usuario de web a través de dispositivos móviles son los mismos o muy parecidos a los que se encontraba un usuario de web tradicional en el año 1998.

Como el tiempo es un bien escaso os remito a la entrada escrita en Úsalo, “Para Nielsen las webs móviles deben ser simples y minimalistas“. Ahí encontrareis en la lengua de Cervantes lo que nos cuenta Nielsen sobre la web móvil.

Sólo comentaré parte de un párrafo del artículo de Nielsen que me ha llamado la atención.

The very best option is to go beyond browsing and offer a specialized downloadable mobile application for your most devoted users. In practice, however, only the biggest and richest sites can afford all this extra work on top of their desktop-optimized website.

Una aplicación para trabajar más facilmente, y que sólo webs muy importantes podrian afrontar… ¿Os suenan últimamente noticias de este tipo?:  Nueva aplicación de Facebook para Iphone. Que es algo distinto a su web para iPhone. No sólo la tenemos disponible para iPhone, por ejemplo, hace unos días Sergio Ortega me hablaba de esta aplicación para Blackberry. Una opción interesante, pero no termino de verle las ventajas respecto a la web. Sobre todo en el caso del iPhone.

Para terminar, decir que este artículo de Nielsen ha sido un empujón anímico debido a que eran muchas las dudas que teniamos de cómo afrontar la web móvil de la Universidad de Murcia y parece que el camino tomado es el correcto.

Nunca había escuchado estos términos hasta que nos hablaron de esto en el congreso de websmaster, dentro de la ponencia de web para dispositivos móviles.

Definición de ON-PORTAL:

Navegación en la web móvil que los usuarios realizan dentro de los portales de los operadores.

Definición de OFF-PORTAL:

Navegación en la web móvil que los usuarios realizan fuera de los portales de las operadoras.

Podemos simplificar más estos términos y decir que estamos navegando On-Portal cuando desde nuestro móvil pulsamos sobre el icono que pone E-moción, orange o vodafone live. Además, detectaremos que estamos navegando on-portal porque la cabecera y pie de la página es de la operadora, y tendremos buscador o publicidad suya.

Por lo que he leido es la operadora la que decide meternos en su portal wap, y poco podemos hacer nosotros, salvo conseguir una popularidad de nuestra web muy alta…entonces nos buscarán ellos.

http://www.mmaglobal.com/offportal.pdf

La operadoras suelen poner los botones de acceso a sus portales en lugares muy visibles, para incentivar así que los usuarios pinchen y naveguen. O dicho de otro modo, que los usuarios se conecten, entren, descarguen y paguen.

Supongo que ahora a nadie le sorprenderás que las webs móviles más visitadas en España son los portales de movistar, orange y vodafone.

¿Por qué me gana la partida on-portal, sobre mi web off-portal?. En la segunda, el usuario tiene que teclear la url. Le estamos pidiendo al usuario que la recuerde entera y que la teclee. No es el mejor camino, pero entonces cómo promocionar nuestra web.

Algunas formas de promocionar tu web móvil:

• Detección automática de dispositivos móviles en nuestra web de pc.
• Subdominios m.dominio.com
• Dominio .mobi
• Códigos QR
• Envio de sms a móviles con enlace para acceder a nuestra web móvil.

Aunque no tengo tanto tiempo como me gustaría para este blog,  en breve me gustaría hablaros en detalle de estas formas de promoción. La mayoría ya las hemos aplicado en la Universidad de Murcia, así que también os podré hablar de qué repercusión o eficacia han tenido.

Según vi en el Curso de diseño de webs eficaces, podemos definir la arquitectura de información como:

El arte, la ciencia y la práctica de diseñar espacios interactivos comprensibles, que ofrezcan una experiencia de uso satisfactorio facilitando el encuentro entre las necesidades de los usuarios y los contenidos del sitio web.

También nos proponían unos pasos a seguir para conseguirlo, grosso modo, eran estos:

1. Conocer a nuestros usuarios
2. Definir estructura y organización de nuestra web.
3. Cómo organizar y presentar los contenidos, incluido sistema de navegación.
4. Diseño. Detalles de colores, fuentes,…

Dicho esto, que sólo es redundar en lo que muchos sabeis, nos queda aplicar este proceso para nuestra web móvil.

Recordemos que nuestros usuarios están navegando con un dispositivo que tiene una pantalla muy pequeña, no es sencillo introducir datos, tiene muchas cosas que le pueden distraer mientras navega, etcétera. Por tanto, nuestro usuario busca algo concreto y rápido. De lo contrario es muy probable que nuestro usuario se vaya de nuestra web.

En la siguiente imagen podemos ver la estructura de nuestra web para pc. La cual no sería nada válida para una web móvil.

Sin centrarnos en la temática de nuestra web, ya sabemos que nuestra web móvil debe ser lo más simple posible. Debo simplificar al máximo y definir de forma muy clara los enlaces, para saber a dónde te llevan claramente.  Podemos crear prototipos, en papel o html, para que los usuarios evaluen y aporten mejoras.

Para hacerlo los más simple posible, tenemos dos aproximaciones, según nos dice la guía de desarrollo de webs para dispositivos móviles:

• Limitar las opciones.
  Coge sólo el contenido que va a ser relevante para un usuario móvil y descarta el resto.  Evita riesgos de que el usuario se pierda en la navegación. Esta aproximación será buena para sitios pequeños o muy enfocados a un tema concreto. Por ejemplo, puede que lo más interesante de nuestra web sea su sección de noticias, localización y contacto. ¿Entonces para qué ponemos enlace a la estructuración y junta directiva, foto incluida, de nuestra empresa?. ¿Recuerdas que voy en bus y tengo 5 minutos para ver tu datos de contacto?.

• Crear una arquitectura de información jerarquica simple y bien etiquetada. Obviamente, esto incluirá la aproximación anterior en la que limitabamos las opciones a presentar. Algunas sugerencias:
  • 5 Categorías como máximo
  • 10 enlaces por página como máximo.
  • No más de 5 niveles de profundidad.
  • Priorizar enlaces por actividad y popularidad.
  • Utilizar accesskeys.
  • Evitar formularios.
  • No usar tablas.

  Una vez que determines las necesidades del contenido y definido la estructura de categorias y etiquetas, crea un mapa web para tener una visión de alto nivel de tu información. Fijaos en la estructura simplificada que podemos obtener de la estructura anterior.

Llegamos a una conclusión clara, y es que la clave para mejorar u obtener la Arquitectura de información de tu web móvil, de nuevo, es tener presente la simplicidad.

Podemos encontrar varios simuladores que nos permitirán obtener una vista previa de nuestra página en dispositivos móviles. También Firefox tiene varias extensiones muy útiles para realizar pruebas, pronto os dejaré una entrada con las que yo utilizo.

Os dejo un listado de los simuladores que más utilizo:

• iPhone (iPhone tester) (Test iPhone)
• Opera Mini (Simulador web) (Descargar simulador)
  
• Simulador incluido dentro de ready.mobi

También puede ser muy interesante DeviceAnywhere. Aunque lo veo excesivo para realizar pruebas sobre el diseño de nuestra página. Sí puede ser interesante para quien realice aplicaciones para móviles, ya que trabajarán sobre dispositivos reales.

Ya está abierto el plazo de matrícula, hasta el 26 de Febrero, de una nueva edición del Curso en línea de introducción al diseño de webs eficaces.

El curso no esta destinado al diseño web en general sino a la eficacia en el diseño web, basado en estándares (css) y en criterios de eficacia (usabilidad, accesibilidad y arquitectura de la información).

Los profesores del curso son Inma Bermejo Salar, Juan Carlos García Gómez y Yusef Hassan Montero.

Lo realicé en la edición del año pasado y me pareció excelente. Os lo recomiendo.

A través de anieto2k descubro XUI, un framework de javascript para dispositivos móviles. Tiene un tamaño muy reducido, sólo 6 Kb, comparado con jQuery, Mootools, ExtJS, etcétera.

Why another JavaScript framework?! When development of PhoneGap was under way we noticed slow load times for modern JavaScript frameworks (such as Prototype, MooTools, YUI, Ext and (yes) even jQuery. A big reason why these libraries are so big is because is mostly they contain a great deal of cross browser compatability code.

Como veis, justifican su desarrollo y escaso tamaño debido a que el resto de framework contienen mucho código debido al cross browser y no son apropiados para dispositivos móviles.

Nos dicen que está desarrollado para trabajar en navegadores basados en WebKit(Safari y Google Chrome), Fennec(Mozilla) y Opera, pero trabajan en una versión compatible con IE Mobile y Blackberry.

Este tipo de desarrollos demuestran que la web móvil es un mercado emergente, y que se trabaja para que cada vez sea más atractiva. Tampoco estoy diciendo que sea necesario javascript para hacer una web atractiva, pero en muchos casos el javascript no intrusivo nos puede facilitar la vida.

W3C nos ofrece una lista de 60 Buenas Prácticas en la realización de la Web Móvil .

Os dejo un resumen de lo que considero más importante.

• URL. Lo más corta posible.

• Barra de navegación. Ofrezca en la cabecera de la página sólo la navegación mínima necesaria.

• Lo más importante, primero. Ofrece al usuario lo que busca. Si sabes que pide muchas noticias de prensa, eso debe ser el primer enlace de la web.

• No recargar automáticamente la página, a menos que se informe claramente al usuario y se ofrezca una forma de poder detener dicha acción. El usuario se podria encontrar con una factura considerable por un descuido.

• Peso limitado. Yo recomendaría no más de 10 KB

• Scroll. Limite el desplazamiento de la página a una dirección.

• Test. Haga pruebas en emuladores y en dispositivos reales siempre que sea posible. Porque hay que recordar que por bueno que sea un emulador, es un emulador.

• Enlaces
  • Intentar que sean mínimos a recursos externos.
  • Proporcione accesskeys. Es aconsejable etiquetar los enlaces con número del 0 al 9 para aprovechar el teclado móvil. Hay que minimizar las veces que el usuario tiene que teclear.
  • Intente conseguir un equilibrio entre los enlaces que hay en la web y lo que un usuario tarda en llegar a donde quiere.
  • Identificar de forma clara el destino del enlace. Si no estamos seguros de si el formato del destino es soportado por el dispositivo debemos indicarlo. Por ejemplo, para un pdf o para una web no móvil.

• No usar ventanas emergentes(Pop-Up).

• No ofrecer más contenido del solicitado por el usuario y que sea estrictamente necesario para la estructura y navegación de la página.

• Minimizar el código. Un espacio en blanco hay que cargarlo, y eso con un móvil cuesta dinero. Esto se puede llevar al extremo, no lo recomiendo, de quitar la tabulación de la programación y dejar todo el texto compacto.

• No utilice tablas, a menos que sepa que el dispositivo es compatible con ellas.

• Utilice caché y no confie ciegamente en Cookies.

• Intente que las hojas de estilo sean pequeñas (en peso), recordando que la página tiene que ser legible sin hojas de estilo.

Después de leerlas y resumirlas creo que se pueden reducir en una: sentido común. No subimos un logo de 2 mb en una web para pc, y no necesariamente hemos leido una regla que nos diga eso. Pues ahora tenemos que cambiar nuestra forma de afrontar el diseño y pensar en las características de nuestros dispositivos.

Podeis comprobar si se cumplen estas reglas en vuestra página en la herramienta que nos proporciona W3C Mobile Web Best Practices Checker.