Las novedades en la prueba están enfocadas en resaltar las características que harán posible que la web móvil sea mejor.

Resaltan  que se interesaron en características como la geolocalización, que es muy importante para los usuarios móviles, así como cache de la aplicación (inglés) y web storage (inglés), tecnologías que ayudarán cuando Internet no este disponible, algo muy común cuando se trata de móviles.

Además se interesaron en pedir soporte para audio y vídeo, que son caracteristicas muy solicitadas en móviles. No esta demás mencionar que prueban campos de texto, editores de texto avanzados (rich text) y soporte de tipos de letra.

• Enlace de la prueba: Test de compatibilidad para navegadores móviles
• Noticia Oficial: Web Compatibility Test for Mobile Browsers Version 2

Via Second Web Compatibility Test for Mobile Browsers .

Mobile Drupal

El mes pasado presentaron durante el Drupal Camp en Colorado (EEUU) los puntos esenciales para crear sitios web para móviles en Drupal, aquí una traducción y resumen de los puntos más interesantes, por supuesto al final esta la presentación completa por si no queres perderte nada.

Problemas y dificultades

Fragmentación de móviles

• Millones de móviles diferentes
• Diferentes sistemas operativos
• Diferentes capacidades
  • Resolución, soporte de javascript, css, xhtml, video, etc

Usabilidad: Crear una experiencia fácil y divertida

• El contenido debe ser fácil de encontrarse
• Reducir el scroll (no usar scroll horizontal)
• Hacer enlaces faciles de usar (no demasiado pequeños)
• Usar una forma de navegación sencilla que sea fácil de encontrar.

Optimización de la descarga

• Las conexiones de internet no siempre son optimas (entre 50kb/s – 1.8 Mbit/s)
• No permitas que tu visitante espere, no lo hagas descargar contenido que él no va a usar.

Brindar contenido relevante para los usuarios móviles

• Entiende qué es lo que ellos buscan (piensa y planea bien)
• No es fácil (especialmente para el cliente)

Acerca del diseño

• No márgenes ajustados
• No floats
• No grandes fuentes
• Reduce el uso de tablas (o reduce el número de columnas)
• Haz un bloque de enlaces para ver, como
  • Comentarios recientes
  • Temas más recientes del foro
• Elimina el bloque de contenido de la portada
• Cambia el bloque de inicio de sesión (login) por un enlace.
• La navegación usando combobox (dropdown list) funciona bien.
• Elimina “Quién esta en línea” (no es relevante)
• Tu puedes hacer cosas atractivas para iPhone, Android, etc.

Sobre los módulos móviles para Drupal

[Aclaración: Las extensiones en Drupal son llamadas módulos]

• Muchos intentos en la comunidad (de Drupal)
• Los módulos están enfocados en
  • Ofrecer temas móviles (por ejemplo iUI, mobile theme, etc)
  • Cambio automático de temas
  • Pagos a través del móvil
• No hay muchos ejemplos
• No ofrecen estrategias a largo plazo
• Un vistazo a los módulos móviles para Drupal en An overview of Mobile modules for Drupal
  

Algunos módulos móviles para Drupal

• Mobile Tools
  
• Siruna
  
• WURFL
  
• Planeados (por el autor):
  • Modulo de redimensionamiento de imágenes
  • Solución para convertir vídeo (basado en Media Mover)
  • Ofrecer más temas móviles

4 pasos para el desarrollo de web móvil en Drupal

Luego la presentación se enfoca cada uno de los cuatro pasos para desarrollar para web móvil en Drupal:

1. Detección del dispositivo (Móvil, PC de escritorio, PSP, etc)
2. Switching, o Cambio (para asegurarte de que el visitante tenga la mejor versión del sitio web)
3. Funcionalidad + Contenido (Que la funcionalidad y el contenido sean relevantes para el dispositivo)
4. Theming, o el diseño del tema (diagramación, tamaño de las imágenes, navegación, el uso de tablas, etc)

Podría adentrar un poco más al tema pero te recomiendo que mejor veas la presentación que amplia más estos cuatro pasos.

Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09

Artículo original: Slides presentation on Mobile Drupal @ drupal camp colorado

Sin embargo, medir el tráfico de móviles en tu web sigue siendo necesario, y luego de la pregunta de Miquel acerca cómo puede medir el tráfico móvil en su web busqué un poco y encontré estas opciones:

• Mobilytics. Sin conocerlo mucho (todavía ) me atrevo a decir que Moblytics es a la web móvil lo que Google Analytics es a la web. Es una herramienta de analíticas web diseñada para móviles, con 3 versiones diferentes, una gratuita (menos de 100,000 pageviews) un básica ($79 mensual) y una professional ($149 mensual). Puedes revisar todas las características en la web oficial.
• Amethon Mobile Analytics. Una de las opciones más “profesionales”, con muy buenas referencias según pude leer, y con bastantes características. Como es de esperarse es una herramienta de pago. Puedes encontrar más información en la web oficial o en su documento de presentación (PDF, Inglés)
• Google Analytics for Mobile (Inglés). En los foros de MobiForge trabajaron en una solución, sin javascript y basada en DeviceAtlas, para enviar datos a Google Analytics a través de PHP, y qué de esta forma trabaje con móviles. También puedes revisar este otro tema sobre Google Analytics sin Javascript (Inglés). Por supuesto es una opción mucho más complicada aunque permite manejar todo con Google Analytics, en caso de que ya lo usemos.

Actualización:

• Mobile Analytics / AdMob. Una herramienta que a simple vista se ve muy similar a Mobilytics, lo cual no es malo, espero probarlas pronto. Gracias a urruti por el aviso.

Escuchar acerca de estadísticas en la web móvil es algo extraño, es una herramienta necesaria pero pocas veces mencionada.

Unas semanas atrás conocí Percent Mobile qué apareció precisamente como una herramienta de estadísticas web enfocada en móviles. La herramienta es gratuita pero esta bajo beta privada (necesitas invitación), por suerte llegue rápido y conseguí uno de los 500 códigos que regalo Percent Mobile para los lectores de TechCrunch.

El proceso para instalarlo es simple, te registras, agregas el código de Percent Mobile en tu sitio web, si usas versión móvil (o plugins para WordPress como Mobile Pack) también lo incluyes en el tema para que funcione.

Percent Mobile en detalle

Percent Mobile es un servicio bastante sencillo, una sola página con información muy visual (iconos, gráficas y demás).

Información general

Es el núcleo de Percent Mobile es la primera fila de información, las información básica: Tráfico desde móviles (porcentaje %), número de dispositivos diferentes, redes (telefónicas), países y acceso por WiFi

Ecosistema de móviles

Un listado de los móviles que más visitan tu sitio web dividos por porcentaje.

Marcas de móviles

Es un top 5 de las marcas de móviles que visitan tu web

Dimensiones de pantalla

Proveedores de servicio (telefónicas)

Países

¿Es útil Percent Mobile?

Como sistema de estadísticas para manejar una campaña de marketing no es la mejor opción, es limitado y muy básico en general. Olvida reportes personalizados, detalles como “tiempo promedio en la página” o referrers por ejemplo, datos esenciales en este caso.

Desde otro punto de vista Percent Mobile es una herramienta bastante amigable, muestra la información necesaria para que un blogger conozca a sus “visitantes móviles” sin complicarse en reportes o información innecesaria. Y precisamente pienso que este público al que esta enfocado Percent Mobile, para lo cuál es un servicio útil.

Quizás lo único que se extraña en Percent Mobile es la división por tiempo, en otras palabras un historial. Es imposible creer que no lo incluyan siendo tan necesario, porque luego de un tiempo sabes que tienes 32% (ejemplo) de visitas desde móvil, pero no sabes cuantas fueron recientes, o de hace 4 meses. Una falta casi imperdonable

Por si te interesa, la empresa que creo Percent Mobile, TipTags, también ofrece otro servicio de métricas para web móvil que por lo visto es mucho más completo y profesional, aunque un poco “caro”.

¿Sabes cuantas visitas tienes desde moviles?

La  noticia del lanzamiento paso casi desapercibida en la comunidad móvil pero yo no podía ignorarla por la importancia que tiene ¿te imaginas cada blog de WordPress con versión móvil? (si, serían muchos blogs )

Si me sigues en Twitter seguro pudiste ver que estuve trabajando con la extensión, y luego de realizar algunas pruebas ya la he instalado en webdebolsillo.

Para no extender demasiado el tema he decidido dividirlo en dos partes, en la primera parte voy a hacer un rápido repaso por las características de WordPress Mobile Pack y su funcionamiento en general. En la segunda parte, que publicaré más adelante, daré mis comentarios sobre la extensión y resultados de algunas de las pruebas.

Vamos con la primera parte.

¿Qué incluye el Mobile Pack para tu blog?

• Cambiador de temas o Mobile switcher, es la funcionalidad base del Mobile pack y realiza la detección del móvil, a través de user-agent, del dominio móvil o de ambas.
• Tema base para móvil, es una adaptación de tema para WordPress que cumple con los estándares XHTML-MP (Mobile Profile).
• Temas adicionales, en resumen son los temas que mejoran la apariencia del tema base con colores y puedes utilizarlos para crear tu diseño.
• Adaptación al dispositivo móvil. Consiste en una serie de modificaciones para ajustan aún más el blog para mejorar la experiencia desde el móvil. Dentro de las modificaciones se encuentran
  • Remove media para eliminar objetos embedidos (Flash por ejemplo). Durante las pruebas tuve conflicto con esta opción, revisa más adelante para más información.
  • Ajuste de imágenes (Shrink images) para adaptarlas al móvil, si usas DeviceAtlas junto al Mobile Pack hace el ajuste al tamaño del dispositivo, de lo contrario redimensiona las imágenes por defecto a 124px.
  • Paginación de artículos extensos. Simple como eso, crea varias páginas para ver un gran artículo sin extender el scroll.
  • Simplificación de estilos, que consiste en eliminar cualquier estilo “especial” usado en línea (al escribir un tema por ejemplo).
• Integración con DeviceAtlas. DeviceAtlas es una herramienta en línea que proporciona información sobre dispositivos móviles, el WordPress Mobile Pack se integra con ella para realizar mejores adaptaciones del blog. Además permite a los desarrolladores de temas acceder a esa información a través de WordPress. Requiere tener una cuenta en DeviceAtlas para poder usarla.
• Ajuste del panel de administración para móviles. Convierte y limita el panel de administración para hacerlo compatible desde el móvil. Desde el móvil puedes crear un nuevo tema, editarlo, ver los comentarios y cambiar algunas opciones.
• Publicidad móvil. WordPress Mobile Pack permite incluir publicidad para la versión móvil usando AdMob o Google Mobile ads. Nada realmente nuevo aunque si facilita el proceso si planes rentabilizar tu sitio web con tráfico desde móviles.
• Barcode widget es una idea genial, aunque quizás no tan útil en este lado del mundo, consiste en mostrar un código de barras (QR-Code en realidad) en tu blog para que con solo tomar una foto desde el móvil pueda capturar la dirección de la versión móvil. Además incluye una lista de enlaces hacía lectores para este tipo de código.

Cómo instalar WordPress Mobile Pack

Todas las características se obtienen instalando una sola extensión, para hacerlo en WordPress 2.7 sigue estos pasos:

1. Ingresa al panel de administración de tu blog en WordPress y ve a la sección de Plugins.
2. Luego en el menú selecciona Add new y en el buscador escribe WordPress Mobile Pack. También puedes descargar la extensión, en ZIP, desde la página oficial.
3. Una vez la instalas debes activarla desde el área de Plugins –> Activate (Activar).
4. Luego en la sección de Apariencia (Appearance) vas a encontrar tres nuevos enlaces: Mobile Theme, Mobile Widgets y Mobile Switcher.
5. Mobile Theme te permite configurar todas las opciones para adaptar mejor tu blog a los dispositivos móviles. En esta sección te recomiendo desactivar la opción “Remove media”, que es la encargada de deshabilitar los objetos flash u otro tipo de objetos embedidos porque tuve problemas con las imágenes, esta opción elimina el atributo img que contiene la dirección de la imagen y no muestra las imágenes.
6. Mobile Widgets es para seleccionar que widgets quieres usar en la versión móvil. Te muestra únicamente los que estén activados en la versión normal.
7. Mobile Switcher muestra las opciones para detectar los dispositivos móviles, como comente antes puedes hacerlo a través del user-agent o del dominio. En esta sección también puedes elegir el tema para móvil que deseas utilizar.
8. Listo, ya tienes configurado tu wordpress para móviles

Actualización importante:

Lesther hizo bien al recordarme que WordPress Mobile Pack falla al usarse al mismo tiempo que  MobilePress. Con el plugin WPhone funciona bien pero deshabilita las mejoras de WPhone. Con el plugin WP Touch sucede algo curioso, WP Touch funciona perfectamente pero al desactivar la versión móvil (al final de la página) se activa la versión de WordPress Mobile Pack, esto significa que siempre veras una versión móvil del blog, aún cuando el visitante no lo desee. Más información sobre estas extensiones en Plugins para presumir tu blog desde el teléfono.

La forma de cambiar el User Agent en Safari es distinta, básicamente porque Safari ya incluye una lista de user agents configurados que hace más fácil todo, aunque por otro lado es más limitado porque solo permite tener un user agent personalizado, y no muchos como User Agent Switcher.

Para cambiar el user agent en Safari primero tienes que activar el menú de desarrollo:

1. Edición –> Preferencias…

1. Ve a la pestaña Avanzado –> Activa la opción “Mostrar el menú de Desarrollo en la barra de menús”

Listo, ya tienes el menú de desarrollo con la lista de User agent que puedes usar, incluyendo el user agent del iPhone y iPod Touch

Para agregar un user agent extra usa la opción “Otra…” al final del menú

y luego escribe el user agent que deseas usar

Recuerda que Safari solo te deja utilizar un user agent personalizado a la vez, así que elige sabiamente cual vas a usar o usa Firefox

En el tema anterior, acerca de User Agent Switcher, encuentras una lista de user agents de móviles.

User Agent Switcher sirve, como su nombre lo dice, para cambiar el User Agent del navegador, en este caso Firefox, por el que nosotros queramos. El User Agent es un texto que usan los navegadores para identificarse con los servidores en Internet y en donde comparten características y alguna otra información útil. Por ejemplo, el User Agent del iPhone se ve así:

Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_1 like Mac OS X; en-us) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5F136 Safari/525.20

¿Para qué sirve User Agent Switcher en el desarrollo para móviles?
La mayoría de métodos para detectar cuando móvil ingresa a un sitio web se basan en el user agent, por eso es bastante útil disfrazar a Firefox de móvil cambiándole el User Agent. Puedes navegar por cualquier sitio como si de un móvil se tratará.

Cómo cambiar el User Agent con User Agent Switcher

1. Lo primero es instalar User Agent Switcher (UAS) y reiniciar Firefox.
2. Luego debes agregar un User Agent usando el botón UAS ->  Options –> Options…

   
   

3. Selecciona el área de User Agents y luego el botón Add

   

4. Ingresa la información del User Agent de la siguiente forma, no es necesario llenar todos los datos, aunque si tienes la información es bueno hacerlo. A continuación el ejemplo con el User Agent del iPhone

   

Lista de User Agent de móviles

Abajo te dejo una lista de los user agents usados por móviles, intente incluir uno por cada marca o navegador importante, aunque la lista podría ser “interminable”.

• Android:
  Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; Google Wireless Transcoder;)
• iPhone:
  Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_1 like Mac OS X; en-us) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5F136 Safari/525.20
• iPod Touch 2.0:
  Mozilla/5.0 (iPod; U; CPU iPhone OS 2_0 like Mac OS X; de-de) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5A347 Safari/525.20
• Blackberry 8830:
  BlackBerry8330/4.3.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 VendorID/105
• Opera Mini 4.1:
  Opera/9.60 (J2ME/MIDP; Opera Mini/4.1.11320/608; U; en) Presto/2.2.0
• Sony Ericsson K550i (NetFront browser):
  SonyEricssonW850i/R1ED Browser/NetFront/3.3 Profile/MIDP-2.0 Configuration/CLDC-1.1
• Sony Ericsson K700i (NetFront browser):
  SonyEricssonK700i/R2N SEMC-Browser/4.0.1 Profile/MIDP-2.0 Configuration/CLDC-1.1
• HTC TyTN Windows Mobile 6.1:
  Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; IEMobile 7.11)
• LG Voyager:
  Mozilla/4.1 (compatible; MSIE 6.0; ) 400×240 LGE VX10000
• Motorola Razor V3:
  MOT-V3r/08.BD.43R MIB/2.2.1 Profile/MIDP-2.0 Configuration/CLDC-1.1
• Nokia N95:
  Mozilla/5.0 (SymbianOS/9.2; U; Series60/3.1 NokiaN95/10.0.018; Profile/MIDP-2.0 Configuration/CLDC-1.1 ) AppleWebKit/413 (KHTML, like Gecko) Safari/413
• Samsung SGH-E900:
  samsung sgh-e900 /netfront 3.2

Encuentras una lista mucho más completa de user agents en la página web de Zytrax: Mobile Browser ID (User-Agent) Strings.

Importar user agents en User Agent Switcher

Agregar la lista anterior de user agents puede ser algo tedioso, menos mal tenemos la opción de importar la lista, para hacerlo sigue estos pasos:

• Descarga el archivo con los user agents de user-agents-moviles.xml (3.07kb, Click y guardar como…)
• Entra a las opciones UAS y selecciona la opción de importar. Si activas la opción Overwrite existing user agents when importing los user agents que tengas se reemplazaran por los del archivo:
• Buscas el archivo que descargaste y lo cargas. Listo, con eso tendrás la lista de user agents actualizada.

Usar User Agent Switcher te evita estar probando páginas de tu móvil porque “engaña” a los servidores de Internet haciéndolos creer que los visitas desde un móvil, también si usas diferentes versiones (o si usas algún plugin como MobilePress) te permite probar cómo verían tus visitantes el sitio web, saber si están viendo la versión correcta.

Si tienes dudas y sugerencias son bienvenidas en los comentarios.

Por defecto no incluye ninguna ayuda para desarrollar para móviles pero si la opción de agregar herramientas, de esta forma podemos configurarla para trabajar webs para móviles, y es justo lo que voy a explicar en este artículo.

Agrega validadores para web móvil

Los validadores nos ayudan a “certificar” la calidad del código en base a una serie de lineamientos, que si los cumplimos podremos obtener mejores resultados mientras que trabajamos con buenas practicas. Existen dos validadores famosos para web móvil, el primero (y “oficial”) es el W3C MobileOk Checker, y el segundo, un test para evaluar buenas practicas, es el de ready.mobi.

1. Para agregar un validador a Web Developer Toolbar debes ir a Tools –> Edit Tools…

   

2. Presiona el botón Add y te mostrará una ventana para que ingreses datos

   

3. Agrega el validador del W3C de esta forma:

   Description: W3C MobileOK Checker (o cómo quieras llamarle)
   Keyboard Shortcut: (agrega una letra para usarla como atajo si quieres)
   Tool Type: Selecciona URL.
   URL: http://validator.w3.org/mobile/?checkasync=true&view=cat&docAddr=

   

4. Repite los dos pasos anteriores para agregar el validador de Ready.mobi, solo que ahora con esta información:

   Description: Ready.mobi
   Tool Type: Selecciona URL.
   URL: http://ready.mobi/results.jsp?uri=

   

Personaliza las resoluciones de pantalla

Web Developer Toolbar incluye la opción de modificar las dimensiones del navegador solo seleccionando una opción del menú. En el caso de los móviles es muy útil para darnos una idea aproximada del resultado final, en la imagen se puede ver Firefox en una ventana de 320×480 (HVGA) simulando la resolución del iPhone:

1. Para agregar una nueva resolución de pantalla usa Resize –> Edit Resize Dimensions…
   

   

2. Presiona el botón Add… y agrega la resolución que quieres usar:
   Description: (Cómo quieras llamarla)
   Width: Ancho en pixeles
   Height: Alto en pixeles
   Resize the viewport: Activado. Se usa para que las medidas se apliquen directamente al área de la página y no a toda la ventana, evita que las barras de herramientas y demás arruinen el efecto de simular las dimensiones.

   

Resoluciones de pantalla más populares en móviles

Abajo te dejo una lista de las resoluciones de pantalla más populares en móviles:

Desactivar Javascript o cargar CSS Handheld

Los validadores y modificar el tamaño de la ventana son dos herramientas útiles para desarrollar para la web móvil, pero en general Web Developer toolbar es una herramienta bastante completa que incluye muchas más opciones para desarrollo web, por ejemplo puede desactivar Javascript (ver imagen) o cargar la hoja de estilos CSS Handheld, aunque es poco usada por los navegadores en móviles. Puedes leer el artículo Return of the Mobile Style Sheet que trata más acerca del tema de las hojas de estilo en móviles.

Eso es todo por ahora con Web Developer Toolbar, más adelante escribiré sobre cómo simular una visita desde el móvil usando User Agent Switcher. Dudas y sugerencias son completamente bienvenidas

Como mencione antes, esta aplicación es pequeña, pero además muy poderosa. Posee el tipo de cambio de la mayoría(por no decir todas) de las monedas, entre ellas Euro, Dolar estadounidense, Peso argentino, chileno y mexicano, Quetzal guatemalteco, entre otros.

Además ofrece la posibilidad de actualizar, vía internet, las diferentes tasas de cambio.

Enlaces

• Descargar CurrencyConv(Zip).
• Visitar sitio web oficial.
  
• Descargar la última actualización de tasa de cambio(XML).

Existen varias aplicaciones que permiten crear accesos directos sin ningún problema, sin embargo, lo que caracteriza a esta herramienta es la posibilidad de personalizar el acceso directo, al punto en que es posible modificar el volumen encender el Bluetooth, WiFi, cambiar brillo, etc. todo esto solo ejecutando solo el acceso directo creado.

Solo necesitamos ejecutar la aplicación para crear el acceso
directo, seleccionamos las opciones en la interfaz del programa y por último
elegimos donde almacenara el acceso directo. Luego, al ejecutar el acceso
directo, mientras se
ejecutan las acciones solicitadas el programa se mantendrá invisible.

Sabiendo utilizar de manera adecuada esta herramienta resulta muy útil, en mi caso la utilizo par ejecutar el MSN messenger y a la vez encender el Bluetooth y cambiar el volumen de mi Pocket PC. También la utilizo al leer, normalmente leo de noche por lo que la luz de la PDA es muy brillante para leer, con CommManagerPlus puedo ejecutar MsReader y bajar el brillo de la pantalla a la vez.

Ustedes muy probablemente encontraran mucha otras formas de utilizarlo, y que quizás quieran compartir con otros usuarios por medio de los comentarios.

Calificación:

Enlaces

• Descargar CommManagerPlus(ZIP, 233kb) : Este enlace es directo hacia la descarga para evitarles la busqueda dentro de un foro en ruso