Desarrollando para mobile

En las últimas semanas estuve desarrollando un sitio web mobile. Desde mi punto de vista, lo mejor que tiene el desarrollar/maquetar para mobile es que se pueden usar (y de hecho se fomenta) las ventajas de HTML5.

Con lo que me encontré a la hora de hacer esta webapp, es con pequeños yeites, que paso a poner a disposición de todos.

Un CSS para todos

Hace unos meses Jakob Nielsen, en contra de cualquier práctica realista, propuso que en lo que a desarrollo web mobile se refiere, lo mejor es olvidar las mediaqueries al hacer un único sitio que se adapta a todos los dispositivos, y en su lugar hacer sitios mobiles por separado del sitio full, tantos como hagan falta, e inclusive, crear tantos generadores de contenido como sean necesarios para permitir, justamente, esta proliferación de sitios.

Ridículo.

Yo uso mediaqueries por todos los motivos que se pueden encontrar googleando, y porque mis clientes y los de la agencia para la que trabajo no tienen presupuestos tan grandes para lograr lo que Nielsen propone. Entonces, un CSS con mediaqueries para todos.

Y la mejor manera que por el momento encontré para apuntar a las distintas pantallas, es la siguiente:


/* generales */
@media only screen and (min-width: 420px) and (max-width: 767px) {
}
/* iPad */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
}
/* iPhone */
@media only screen and (max-device-width: 480px) {
}

Cabe notar que el de iPhone se superpone con el de dispositivos mobiles en general, por lo que esta diferenciación pocas veces hará falta, pero no está de más el saberla.

iPhone/iPad reescala al rotar

Este es un curioso problema, cuya solución, si bien la entiendo, no me gusta al 100%. El problema es que al cargar una página en un iPad, y luego cambiar la rotación, la escala «cambia» y nos vemos forzados a hacer el ajuste, que si bien el gesto con los dedos lo hace facilísimo, no deja de ser molesto. El problema se origina en código que se suele encontrar incompleto, como el siguiente:

<meta name ="viewport" content="initial-scale=1.0, width=device-width">

En la ardua tarea de copypastear código hasta que funciona, pocas veces nos detenemos a pensar para qué realmente sirve cada parámetro. El meta «viewport» nos permite indicarle al browser cómo se debe comportar nuestro contenido respecto del dispositivo. Podríamos entonces setear content=»width=200px», que lo que hará será forzar el ancho del contenido a un máximo de 200px. No se me ocurre un ejemplo práctico en donde querramos setear un ancho de esta manera, pero lo que si sabemos es que si podemos setear ese ancho de forma proporcional, entonces podemos poner nuestra web al ancho de cualquier dispositivo. Y eso es lo que hace width=device-width.

También se puede setear la escala a la que se debe ver el contenido con initial-scale=1.0. Pero lo que en verdad necesitamos para corregir las rotaciones de iPhones/iPods/iPads es lo siguiente:

<meta name ="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes"/>

De este modo seteamos la escala incial, la escala máxima, y le quitamos la posibilidad al usuario de reescalar, al mismo tiempo que seteamos nuestro ancho de página a todo el dispositivo. Y con la instrucción que sigue le indicamos al dispositivo que nuestra aplicación corre en full screen.

Lo que veo de negativo de esto es que se le quita la posibilidad al usuario de escalar, y eso no me gusta. Pero se trata de equilibrio, si como usuario voy a estar cambiando la escala, entonces no puedo pretender que la rotación de mi dispositivo me recalcule todos los tamaños a como me es a gusto. O quizás debiera? en fin… será problema de los ingenieros.

Por nuestra parte, nos queda saber diseñar/maquetar para que los usuarios roten y puedan tener la mejor experiencia posible.

Les dejo un link a stackoverflow, de donde pude empezar a ilustrarme sobre el tema, y otro a la documentación oficial de Safari, de donde pueden leer sobre «apple-mobile-web-app-capable».

Favicons

El tema con los favicons en mobile se reduce a crear un archivo .png por cada tipo de pantalla que puede guardar la webapp como favorito. No me voy a extender demasiado en esto, porque simplemente seguí el paso a paso que encontré en esta página. El único tip que sí voy a dar es que los .png no pueden tener transparencia en IOS (android si los lee), confirmado esta vez en la documentación para desarrolladores de Apple.

Debugging

Por último, un plugin que no conocía, y permite cambiar el user agent en el Firefox o Chrome. Es algo que parece tonto, hasta que te das cuenta que todos los sitios usan el user agent para detectar si es o no un dispositivo móvil el que se conecta.

Samsung Galaxy I5500L

Hace dos meses más o menos perdí mi celular, aquel Sony Ericcson K310 que tanto tiempo me acompañó y que por algún motivo el que lo encontró no quiso devolver, por más que estaba hecho mierda. Admito que quería el Galaxy S i9000, pero como Claro no tenía stock, me llevé el modelo un poco más viejo, menos top, pero que no por eso deja de ser un smartphone.

En este tiempo de uso, estoy muy conforme. Lo único malo del equipo es que viene con Android 2.1 preinstalado, cuando hoy en día la versión 2.2 es la común. Por qué no le instalé el 2.2 ni bien lo compré? Bueno, primero porque lo tengo que hacer yo, segundo, porque no tenía tiempo, tercero, porque cuando tenés algo que funciona, hace falta arreglarlo? (if it ain’t broke, don’t fix it).

Genial, hasta que dejó de andar…. desde hace unos días (bastantes) no podía enviar SMSs ni recibirlos, y cualquiera que me llamase, por más que el número esté agendado, siempre figuraba como «Desconocido». Me decidí entonces a actualizar el firmware y el Android.

Dónde podría encontrar todo lo necesario para hacer el update? No, Google no… Taringa. Primero encontré un post donde podía hacer el update a través de Kies (software oficial de Samsung). Como ya venía leyendo sobre el tema, tenía instalado el Kies con la sorpresa de que mi desktop no detectaba el teléfono.

En un momento de iluminación, instalé el Kies en mi netbook, y como vengo comprobando desde hace un tiempo, tener un Windows original tiene sus ventajas… probablemente este diciendo una boludez, pero mi realidad es que cuando algo no anda como es de esperarse, la netbook me salva.

Entonces, Kies leyó mi teléfono, se propuso a bajar todo lo necesario (sólo dije que sí a una o dos cosas) y me quedé esperando a que Kies haga todo, como dice en el tutorial. Llegó el momento de la verdad, donde ya está todo bajado, y el teléfono se empieza a prender y a apagar, y aparece la pantallita «downloading…»:

Como nadie se queda con lo primero que encuentra, ya estaba leyendo este otro post donde se explica el mismo update pero con más pasos y sin usar el Kies. De allí no sólo obtuve la imagen que muestro arriba, sino que supe que el tiempo de esa pantalla debe durar de 3 a 10 minutos. Por eso es que cuando llevaba dos horas de «downloading», sabía que algo andaba mal…

A esta altura, ya me había bajado todos los archivos para hacer el update manual. Luego de mucho meditarlo, opté por reiniciar Kies. El primer mensaje de reinicio de Kies me dijo que había ocurrido un error durante una actualización. Ok, clic en restaurar, y por supuesto, no funcionó, diciéndome que no reconoce ningún teléfono conectado.

Hasta ahora no me había animado al proceso manual porque el firmware nombrado en el tutorial dice Europa, y uno nunca sabe como funcionan estas cosas. Investigando un poco más, no soy el único con este problema, y acá responden a mi duda, asi que Europa esta bien para Argentina.

Decido encarar el tutorial de instalación manual, pero llegué al mismo problema, ODIN no reconce ningún teléfono conectado a la netbook.

Ya notoriamente nervioso, decidí desconectarlo, abrirlo, quitar la batería, tarjeta SIM y memoria SD. Volví a poner la batería, y lo encendí con la combinación «volumen bajo + tecla central + encendido». Obtuve exactamente la misma pantalla y no reconocimiento del teléfono. Releyendo el tutorial del instalación manual, me di cuenta de que esta pantalla nos dice que el teléfono esta en «modo» de copiado de archivos, sólo necesita recibirlos.

En un nuevo momento de iluminación, antes de seguir probando cualquier cosa, reinicié la netbook. Y ahora sí, al conectar el teléfono ya lo reconocìa el sistema, por lo que empiezo a tranquilizarme un poco. Descarté por completo seguir con Kies, y seguí con ODIN.

Entre 5 y 10 minutos tardó en instalarse todo, y salió bárbaro. Ya con mi Android 2.2 pruebo el SMS…. y no anda. Bueno, ok, entonces, despues de todo, puede ser un problema de Claro… *610, opción 3, le describo mi problema a la operadora, y resulta que mi lìnea no tenía todo activado. Dos minutos después ya estaba enviando y recibiendo SMSs.

Conclusiones: tengo que llamar a servicio técnico más seguido. Y Kies es una CAGADA. Sirve para hacer backups, pero si tu vida ya está en Gmail, entonces no lo necesitas.

Parecen ser más pasos, y definitivamente más intimidante, pero el segundo tutorial fue el camino a seguir.

A propòsito, Android 2.2, está MUY bueno.