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 :)
- 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">
}
- 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.comy 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
Es curioso que, por intereses económicos, se quiera pasar por encima a los estándares y criticar a la W3C de burocracia y demás, que aunque estoy de acuerdo que es lentisima y complicada, tiene un punto de vista muy bueno sobre como debe ser el Internet. Es decir, ellos tienen las bases.
Comento esto porque justo eso que propones es lo que la W3C ha aconsejado desde hace tiempo, y es a lo que se le llama One web, o web única (enlazo a mi blog por sí te interesa leer más). Sí tienes oportunidad dale un vistazo a la documentación de la W3C y te sorprendes de lo mucho que puedes mejorar una web sin implementar tecnologías “nuevas” (y probablemente incompletas como HTML)
Dejando fuera el desahogo(XD) te felicito por el post, bien hecho y al punto. Dalo por twitteado.
Ups! un teclazo, quise decir “…incompletas como HTML5”
Ivan, ya estaba al tanto, el concepto me encontró hace tiempo y te agradezco el aporte de esos links que no pude volver a encontrar en su momento.
Maximiliano, muy cierto lo que decís. No fue mi intención minimizar el problema de ese 50% de nuevas prácticas y soporte, sino más bien, entusiasmar a quienes vienen considerando desarrollar para mobile, o directamente están desconformes con como se ve su sitio en Safari de iPhone, pero no hacen nada porque hasta blogger o blogspot.com no hace nada tampoco. Para ese numero inmenso de sitios que podrían al menos mostrar una versión con un tamaño de fuente legible y no microscópica. Y ya que estás acá, aprovecho para comentar que en tu libro, practicamente se tratan en profundidad todos esos problemas, no solo la parte tecnica sino también histórica lo que lo hace de interesante lectura, por lo que lo recomiendo a todos los que quieran estar orgullosos al ver su sitio en un pantalla móvil.
Exelente.
Yo tengo mi verción mobile del sitio.
Es feisimo, pero bueno, como recien comienzo nisiquiera hace falta.
Primero tengo que generar tráfico.
En realidad… sabes q hoy por hoy ya tenemos un metodo mejor para hacer esto?
En lugar de preocuparte por el dispositivo, te preocupas por el tamaño de pantalla.
Mira mas aca, esta muy buena la idea:
http://lessframework.com/
CSS3+HTML5
Me alegro por el artículo! Me gusta ver que se difundan este tipo de soluciones. También agradezco lo de “maravilloso centro de recursos” :), pero nobleza obliga, tengo que expresar mi opinión respecto al segundo párrafo: es verdad y correcto que la web móvil es otra vista de la misma web, pero NO es verdad que eso no implique que haya que usar las mismas reglas ni los mismos paradigmas. No me da el tiempo para explicarlo aquí, pero siempre digo que el 50% de Mobile Web es el mismo conocimiento de desktop web, pero hay un 50% de nuevas prácticas, estándares, herramientas y soportes que necesariamente el desarrollador debe conocer para lograr un producto de mobile web exitoso. Es una discusión larga.
Saludos!
Bueno, como el lead-dev de PadPressed estoy obviamente parcializado, pero definitivamente creo que si usas WordPress y quieres ofrecer una experiencia de aplicación html5 cuasi-nativa (con gestures y toda la cosa) PadPressed es LA respuesta.
Bueno, solo para iPad… por ahora.
(si quieres probarlo, te consigo una copia de evaluacion)
Excelente articulo! Personalmente soy fiel defensor del concepto de “una sola web”, la gran mayoría de sitios web pueden adaptarse para móviles con solo pequeños ajustes como estos, sin tener que recurrir a duplicar esfuerzos ni dominios.
Me obsesiona hacer un solo HTML y que las hojas de estilo se encarguen de adaptar el sitio según el dispositivo, creo que la web debe ser la que se adapte al usuario
Aprovecho para invitar a los activistas del tema al proyecto de difusión de tecnología móvil http://revolucion.mobi , me encantaría poder entrevistarles y contagiar de su entusiasmo a toda la comunidad :)
Me encantaría que uberbin tuviera versión movil. Y si la tiene saber cual es
Muy interesante el post. Les dejo un recurso adicional para aquellos interesados en la versión móvil de su sitio: mobify.me
Básicamente, te dan un código que pegás en tu web y los accesos desde dispositivos móviles se redirigen a un nuevo sitio que podés armar con tu contenido pero eligiendo plantillas que ya te dan optimizadas para dispositivos móviles.
Es curioso que éste sitio hable de móviles, y no tenga su version para dispositivos moviles. Tal vez me equivoco espero q sea asi, y por favor pasen la voz para verlo desde mi movil. Respecto al post. muy bueno.