Hechos que debes conocer antes de instalar WordPress Mobile Pack

Seguro recuerdas el artículo anterior acerca de WordPress Mobile Pack, y como mencione en el mismo artículo hice unas pruebas con WordPress Mobile Pack y esta vez voy a escribir sobre eso, junto a otros comentarios sobre el plugin.

Resultados de webdebolsillo en Ready.Mobi WordPress Mobile Pack se instala fácil  y los resultados son impresionantemente buenos, de un blog normal no apto para móviles puedes llegar a una puntuación de 5/5 en ready.mobi, de 97/100 en el validador de la W3C para móviles (resultados de webdebolsillo.com) y sin necesidad de enredarte en problemas técnicos. Esto es mucho decir porque no es tan sencillo de lograr.

Por otro lado WordPress Mobile Pack no es un plugin atractivo para cualquier bloggero, porque desde el punto de vista de resultados y estándares esta muy bien pero del lado del visitante suele ser un desastre. Un diseño desordenado, confuso y feo que no mejora la experiencia desde el punto de vista visual. Claro, lo importante del blog es el contenido pero como visitante y bloggero también se agradece un diseño agradable y fácil de usar.

Otro punto en contra, al menos para blogs en español, es el idioma. El tema por defecto esta en inglés y aunque no sea complicado no se ve bien mezclar ambos idiomas. Más adelante trabajaré en una traducción así que esperen noticias.

Rendimiento de WordPress Mobile Pack

Por curiosidad se me ocurrió hacer pruebas para conocer la diferencia de peso entre la versión estándar de WordPress, la versión de WordPress Mobile Pack y la de MobilePress.

El peso lo medí usando Firebug (net) en Firefox junto a la extensión User-Agent Switcher para simular la visita desde un móvil. Use 4 tipos de páginas diferentes: portada, un tema con imagen grande, un tema corto y un tema extenso.

  WordPress estándar WordPress con Mobile Pack (WMP) MobilePress sin javascript MobilePress con javascript
Portada 186 kb 17 kb 8 kb 63 kb
Tema con imagen grande (1024x768px, 143kb) 172 kb 18 kb 151 kb 206 kb
Tema pequeño sin imágenes (1 párrafo de 7 líneas) 29 kb 15 kb 8 kb 63 kb
Tema extenso con una imagen mediana (900 palabras, imagen a 300x225px de 22kb) 56 kb 24 kb 35 kb 90 kb

Wordpress Mobile Pack demo La mejora de peso con WordPress Mobile Pack (WMP) es bastante notable, con ahorro de más de la mitad en la mayoría de páginas, seguido de MobilePress sin javascript, siempre y cuando no se incluyan imágenes. En este aspecto el acierto de WMP es el redimensionamiento de imágenes, que por defecto reduce las imágenes a 124x124px, o en caso de integrarse con DeviceAtlas las ajusta al dispositivo.

El mayor fallo de MobilePress es el javascript, que a pesar de ser una versión reducida de jQuery, sigue agregando 55 kb a cada página.

Fallas

Como toda aplicación recién lanzada WordPress Mobile Pack aún tiene fallas, que aunque son pocas y no criticas me parece importante mencionarlas. También me parece justo mencionar que el equipo de desarrollo sigue mejorando el plugin y han estado actualizando (la última actualización fue hace 6 días aproximadamente).

  • [Error] Al utilizar la opción Remove Media las imágenes pueden fallar porque el plugin elimina el atributo src de la etiqueta img (imagen). Desactivando la opción se soluciona.
  • [Usabilidad] Los enlaces en menús o listas son pequeños y están muy cerca, lo que aumenta los fallos al presionar un enlace desde una pantalla táctil.
  • [Apariencia] La apariencia es muy desordenada y demasiado genérica. Como una primera versión esta bien pero a largo plazo es buena idea mejorarla. Incluso MobilePress cuenta con un diseño más ordenado, sin mencionar a WPTouch que tiene un diseño muy bueno para iPhone.
  • [Compatibilidad] Como mencione en el tema anterior, WordPress Mobile Pack no es compatible con MobilePress porque fallan ambos, ni con WPhone porque WMP reemplaza la funcionalidad de WPhone. Con WPTouch es compatible pero este reemplaza el diseño de WMP, y al desactivar la versión móvil WMP se activa, en otras palabras siempre estará una versión móvil.

En resumen

Wordpres Mobile Pack es la mejor opción actualmente si buscas un blog compatible con cualquier móvil, evitándole cargos altos y esperas largas a tus visitantes, por otro lado sacrificas el diseño y la personalidad de tu blog. No se compara con WPTouch en diseño para iPhone por ejemplo, sin embargo, no tienen el mismo enfoque, Wordpres Mobile Pack intenta cumplir todos los estándares posibles y adaptar la experiencia para muchos móviles, mientras que WPTouch se enfoca en mejorar la experiencia solo para iPhone/iPod Touch aprovechando todas las características que estos ofrecen.

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.

Plugins para presumir tu blog desde el teléfono

Wordpress móvilQuizás presumir tu blog desde el teléfono no sea lo mejor jeje pero dejar que otros lo lean desde su teléfono sin duda qué es muy útil. ¿Cuantas veces has querido leer el blog de un amigo y no puedes porque es muy “pesado” o porque no se ve bien? A mi me ha pasado y muchas veces, por eso agradezco cuando los blogs tienen una versión para teléfonos. Esta vez quiero recomendar algunos plugins para Wordpress que solucionan ese problema.

MobilePress

MobilePress es el primero de ellos, es un plugin que encontré hace ya algún tiempo y me gusto porque ofrece varias versión móvil para varios navegadores. Al instalar el plugin automáticamente tu blog ofrece cuatro versiones, una para iPhone/iPod Touch, una para Windows Mobile (CE), otra para Opera Mini y una más para otros navegadores de teléfono.

webdebolsillo usando Mobilepress

webdebolsillo usando Mobilepress

MobilePress es el que estoy usando en webdebolsillo en estos momentos y me ha funcionado muy bien. Los posts se ven bien, incluye los comentarios (en otra página), además de dejarte comentar y lo mejor es que es personalizable usando plantillas, así que si sabes hacer plantillas de wordpress puedes crear tu propio estilo y agregarlo.

Al momento solo he tenido un problema, y es relativamente pequeño, ocurre cuando publicas fotos muy grandes y son más grandes que la pantalla de tu móvil. En la mayor parte de navegadores no hay problema pero en iPhone el zoom se reduce (para mostrar toda la imagen) y el texto se ve muy pequeño.

Wordpress con MobilePress

Wordpress con MobilePress

Nuevo comentario con MobilePress

Nuevo comentario con MobilePress

WPTouch

WPTouch es otro plugin que ofrece una versión para Safari de iPhone/iPod Touch y hace un buen trabajo. El diseño es atractivo y conserva el estilo de las apps de iPhone, incluye iconos, animaciones al abrir los menús (con javascript), soporte para otros plugins como FlickrRSS y Blip.it y tienve varias opciones de personalización como configurar páginas de archivo, fotos o enlaces.

Portada usando WPTouch

Portada usando WPTouch

Sin embargo, este plugin solo ofrece soporte para iPhone/iPod Touch lo que deja fuera a otros navegadores móviles. Personalmente, y aunque me gusta más la versión para iPhone de WPTouch, recomiendo usar MobilePress porque es una solución mucho más completa para ofrecer la versión para teléfono de tu blog.

Categorías con WPTouch

Categorías con WPTouch

Menú con WPTouch

Menú con WPTouch

Como ejemplo puedes ver este plugin en funcionamiento en el blog de arturogoga.

Además Javier Aroche, de Maestros del Web, ha comentado que ellos utilizan los dos plugins. WPTouch para iPhone y MobilePress para el resto de navegadores de teléfono.

¿También puedo escribir en mi blog desde el teléfono?

Ok, con los dos plugins anteriores tus amigos pueden ver tu blog pero ninguno de ellos te deja escribir tus temas. Para eso existen dos herramientas más, una es un plugin para wordpress y la otra una app para iPhone.

WPHONE

WPhone es el plugin para WordPress que una vez lo instalas le agrega una opción al login del administrador de wordpress para habilitar la versión para iPhone.

Panel de administración de WPhone

Panel de administración de WPhone

La primera vez que carga se siente pesado, incluso diría que es lento, pero una vez cargo la interfaz es muy fluida. Con casi todas las opciones necesarias para administrar tu blog desde el iPhone, como ejemplo escribir nuevos temas, editar comentarios (esta opción da problemas a veces) y revisar lo último de tu blog (estadísticas).

Crear nuevo tema con WPhone

Crear nuevo tema con WPhone

WPhone muestra la última actividad del blog

WPhone muestra la última actividad del blog

WPhone incluye menú de atajos

WPhone incluye menú de atajos

App de WordPress

La aplicación de WordPress para iPhone/iPod Touch la encuentras en la iTunes Store y te permite manejar todo el administrador de tu blog desde una app, lo cual lo hace muy rápido. Con esta app desarrollada por Automattic, la misma empresa que creó WordPress, puedes administrar varios blogs, escribir temas en ellos, tener la vista previa antes de publicarlos, soporte para cámara (en el iPhone) y galería de fotos (en iPhone y iPod Touch).

En webdebolsillo utilizo WPHone porque rara vez escribo desde el teléfono, pero igual siempre tengo la opción de conectarme desde la app WordPress para escribir, que se siente más estable y confiable de usar. Ambas funcionan muy bien pero es más simple de instalar la app para iPhone, así que te recomiendo usar esta.