Esenciales para crear una web móvil con Drupal

drupal-logo Mobile Drupal fue un blog que comencé a seguir porque a pesar de que no uso Drupal ofrece buenos consejos acerca de desarrollo web móvil, aunque por supuesto su punto fuerte es el desarrollo de web móvil para 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.

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

WordPress Mobile Pack podría convertir a WordPress en protagonista de la web móvil

webdebolsillo-mobile-packLa semana pasada dotMobi, fundadores de los dominios mobi y uno de los grandes promotores de la web móvil, lanzó una extensión para WordPress que adapta cualquier blog para hacerlo compatible con móviles. El nombre de la extensión es tan grande como la extensión misma: dotMobi WordPress Mobile Pack.

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.
  • widgetsAdaptació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.
  • qr_widgetBarcode 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.