Mobile, otra pantalla, la misma web de siempre

Este post es un mensaje no sólo para desarrolladores, que pueden o no estar al tanto de lo que voy a exponer, sino también para managers y emprendedores, que de golpe se enfrentan a la necesidad de extender sus propiedades a la pequeña pantalla de un dispositivo móvil. ¿Hay algo más decepcionante que la primera vez que navegás la web mobile? Sitios perfectamente legibles en la pantalla ancha, son miniaturas imposibles en el pequeño visor de una blackberry, iphone o lo que fuere. Esas miniaturas son maravillosas, pero ¿son consumibles? Lo dudo.

La propuesta es simple: encara tu proyecto mobile NO como una nueva creación que necesita nuevas herramientas y nuevas reglas y nuevos paradigmas, SINO simplemente como una nueva vista, de la misma aplicación que ahora tenés en pantalla ancha o wide-screen.

La primera reacción que tenemos cuando tenemos que lanzar las versiones móviles, es la de hacer una aplicación nuevo, o un sitio nuevo dedicado sólo a dicha plataforma. Evidentemente hay proyectos que son definitivamente para hacer una app en iPhone, Android o la plataforma de tu interés. Pero no hablo de esos proyectos, sino de la versión mobile de tu sitio web, donde se ha invertido en desarrollo y diseño y seguramente se seguirá invirtiendo.

Para esos casos, iniciar un proyecto paralelo, no parece ser la mejor idea, sobretodo cuando sigas enriqueciendo tu aplicación principal y veas quedar obsoleta o raquítica tu versión mobile.

Si usás WordPress, como este no tan simple blog de Mariano, entonces no tenés que hacer nada (si sólo te interesa la plataforma iPhone). Simplemente por usar el plugin correspondiente, tu blog se va a ver correctametne en un dispositivo móvil. Esa es la idea. Pero lamentablemente no todos usamos WordPress o nos interesan también BB, Android, Symbian y demás. ¿Cómo lograrlo?

Receta para convertir tu sitio web a mobile web

Como dije, esta receta no es solo para desarrolladores. Si no entendés de programación, pero de vos dependen los desarrollos de la versión mobile de tu sitio web, entonces tenés un programador en tu equipo a quien pasarle la receta y el sabrá qué hacer. Lo importante es que sepas que es fácil y rápido. Aunque tu programador se niegue a admitirlo facilmente :)

1. Primero, convengamos que tu sitio web es capaz de un mínimo de inteligencia y de ahora en más refirámonos a él directamente
   como aplicación. Como tal, tu aplicación debe ser capaz de discernir visitantes en plataforma mobile de los que son visitantes de plataforma wide-screen. Por medio de esta expresión regular:

   
if (($ENV{HTTP_USER_AGENT} =~ /(iphone|android|blackberry|ipod|opera mini|pre\/|palm os|palm|hiptop|avantgo|plucker|xiino|blazer|elaine|iris|3g_t|
windows ce|opera mobi|windows ce; smartphone;|windows ce; iemobile|mini 9.5|vx1000|lge |m800|e860|u940|ux840|compal|wireless| mobi|ahong|lg380|lgku|lgu900|lg210|lg47|lg920|lg840|lg370|sam-r|mg50|s55|g83|t66|vx400|mk99|d615|d763|el370|sl900|mp500|samu3|
samu4|vx10|xda_|samu5|samu6|samu7|samu9|a615|b832|m881|s920|n210|
s700|c810|_h797|mobx|sk16d|848b|mowser|s580|r800|471x|v120|rim8|
c500foma:|160x|x160|480x|x640|t503|w839|i250|sprint|w398samr810|
m5252|c7100|mt126|x225|s5330|s820|htil-g1|fly v71|s302|-x113|novarra|
k610i|-three|8325rc|8352rc|sanyo|vx54|c888|nx250|n120|mtk|
c5588|s710|t880|c5005|i;458x|p404i|s210|c5100|teleca|s940|c500|s590
|foma|samsu|vx8|vx9|a1000|_mms|myx|a700|gu1100|bc831|e300|ems100|
me701|me702m-three|sd588|s800|8325rc|ac831|mw200|brew|d88|htc\/|
htc_touch|355x|m50|km100|d736|p-9521|telco|sl74|ktouch|m4u\/|me702|
8325rc|kddi|phone|lg|sonyericsson|samsung|240x|x320|vx10|nokia|sony
cmd|motorola|up.browser|up.link|mmp|symbian|smartphone|midp|wap|
vodafone|o2|pocket|kindle|mobile|psp|treo)/i) &&
($ENV{HTTP_USER_AGENT} !~ /(ipad)/i)) {

   $is_mobile = 1;

   } else {

   $is_mobile = 0;

   }


   Como ves en la expresión, se intenta dar soporte a equipos mínimos, además de smartphones robustos. Si no deseas incluir equipos de baja gama simplemente eliminalos de la expresión, así de fácil. Sólo acordate de eliminar tambien el caracter pipe “|” que tiene a su izquierda
   para no romper la expresión. Nótese además que a los efectos del rendering, tratamos al iPad como pantalla ancha no pequeña. Si no estás de acuerdo, elimina la parte del iPad. Una vez que tu aplicación sabe cuáles visitantes usan dispositivos móviles, entonces podés
   crear bloques de en tus páginas como este:

   
if ($is_mobile) {

   <link rel="stylesheet" type="text/css" href="/mobile.css">

   } else {

   <link rel="stylesheet" type="text/css" href="/wide.css">

   }

2. Luego, debes ajustar la declaración DOCTYPE en todas tus páginas HTML, por esta:

   
if ($is_mobile) {

   <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"

   "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

   } else {

   # la que uses ahora

   }

   Esto es necesario para que tu aplicación no se vea como miniatura en la pantalla pequeña. Con esta declaración DOCTYPE tu página
   se convertirá en legible y dejará de ser la espantosa miniatura.

CHA CHAAAAN

Listo, creaste la versión mobile de tu sitio web, felicitaciones!

Recursos:

• iPhone Human Interface Guidelines for Web Applications
• Realmente hay muy pocos emuladores online, pero el de Opera lo encuentro bastante bueno para hacer pruebas.
• Programming the Mobile Web, maravilloso centro de recursos del argentino Maximiliano Firtman, O’Reilly Media, Julio 2010.
• Building iPhone Apps with HTML, CSS, and JavaScript. Making App Store Apps Without Objective-C or Cocoa, por Jonathan Stark, O’Reilly Media, 2009. Este libro está disponible online, y tiene código fuente listo para usar, incluyendo style sheets.
• iPhone Native Looking Skin, maravilloso ejemplo de una miniaplicación web que se ve exactamente como una iPhone App.

Descargos:

• Sí, damos por sentado que tu sitio usa plantillas y que no tenés que editar todas las páginas una por una.
• Sí, damos por sentado que tu sitio usa una plataforma de scripting como PHP, punto net, Ruby, Phyton, (¿por qué no?) Perl, o algun otro.
• También que algo debes inventar para acortar tus páginas largas o pesadas, y convertir algunos forms para tener que tipear menos. Pero el building block sigue siendo if ($is_mobile). El punto es que aún esto queda integrado en un UNICO proyecto, y no partido en varios.
• Es cierto: existen m.google.com, m.youtube.com, m.lanacion.com y seguramente tienen poderosas razones para ello. Preguntate entonces cuáles son tus razones, antes de embarcarte en algo tanto más complicado que nuestra receta.
• El código utilizado en esta página es open-source. Podés utilizarlo, mejorarlo y reproducirlo. Aunque esperamos que sirva
  para que puedas hacer algo útil, productivo y maravilloso con él, no cuenta con ninguna garantía de ninguna naturaleza, ni del autor del artículo, ni de los titulares del blog donde se publica, ni se declara que sirva para algo en particular.

Por: Jorge Grippo CEO y Fundador de Grippo.com, el portal de anuncios y avisos clasificados que está en línea desde 1996. Jorge es uno de los pioneros de la internet en América Latina. Estudió Letras en la UBA y es autodidacta en sistemas. Fue gerente y luego consultor SEO de algunas propiedades del grupo Clarín. Actualmente participa en áreas de nuevas tecnologías en compañías regionales y sigue desarrollando su siito Grippo.com que cuenta con más de 4 millones de usuarios mensuales. Pueden seguirlo en su Twitter @grippo o en su blog http://grippo.typepad.com