El pasado sábado 14 de Marzo se celebró en Guatemala el primer Barcamp, en el que estuve participando, no solo como parte del staff, sino también con una charla acerca de la web móvil. En Guatemala, al igual que en otros países de Latinoamérica el desarrollo en web móvil no es muy común, por eso decidí dar una charla de introducción a la web móvil para animar a los diseñadores y desarrolladores a trabajar con ella.

Abajo les dejo la charla, no es una transcripción por lo tanto no es literal, son, por decirlo de alguna forma, “las notas del orador”

Introducción a la web móvil

¿Qué es la web móvil?

La web móvil es Internet, el mismo que todos conocemos, la única diferencia de la web móvil o la razón por la que se le llama así es porque esta hecho para PDAs en un principio, luego se popularizo en teléfonos y ahora resulto en una mezcla de los dos que dio paso a gadgets más bonitos como el Nokia N95 o el iPhone.

¿Por qué es móvil?

Es móvil porque es pequeña, me refiero a que ocupa poco espacio o al menos debería y se puede navegar desde cualquier lugar con un gadget con conexión a Internet. Las ventajas de la web móvil es que esta disponible en lugares en donde quizás una computadora o laptop no sería practica. Es rápida, actualmente se usa exclusivamente para buscar, hacer consultas y demás, pero poco a poco se ha vuelto también una herramienta de entretenimiento, podemos leer blogs y ver vídeos de Youtube.

¿Necesitas una web móvil?

Dejando atrás los conceptos hablemos ya de diseño web para móviles, de desarrollar páginas para el teléfono y aquí el primer paso, la igual que otras páginas de internet, es preguntarse "¿necesito mi sitio web en el teléfono?" "¿para qué serviría?"

Ok, después de mucho pensarlo y consultarlo con la almohada estamos seguros que necesitamos el sitio web de la empresa en el teléfono. Claro también esta la opción de que el jefe te obligue y no hay mucho de donde elegir jeje

¿En donde empiezo?

Lo primero que viene a la mente, o al menos a mi me paso, es buscar un gadget donde probar el diseño, prueba y error, descargar X cantidad de programas, investigar porque no puedo ver mi intro en flash y de vuelta a probar otra vez el diseño. Error.

No digo que no funcione así, claro que funciona pero van a perder mucho tiempo, y el tiempo es oro y el oro dinero ok? El problema con el ejemplo anterior no es buscar un gadget, eso es lo más fácil con tanta empresa acechándonos con superplanes y si son listos hasta consiguen que el jefe (o la jefa) les compre uno. No es un error probar, tampoco instalar programas, mucho menos investigar, el problema es que nos saltamos un paso: Saber qué es lo que se necesita

¿Necesitamos esa intro en flash? Casi estoy seguro que no, tampoco en la computadora pero ese es otro tema, por eso tenemos que hacer una lista básica de lo que queremos.

Supongamos que es el sitio web de un fotógrafo

¿Qué tenemos?

• el portafolio
• el perfil del fotógrafo
• área de clientes donde pueden descargar sus fotos
• una lista con los servicios

¿Ahora pensemos que sería útil en un teléfono? ¿qué valdría la pena conservar? Se me viene a la mente

• El listado de servicios
• La información de contacto
• Quizás el perfil del fotógrafo o fotógrafos.
• El portafolio puede servir pero lo dejaría afuera porque se vuelve un poco pesado y contratar a un fotógrafo por las fotos que vimos en el teléfono es algo arriesgado, si entienden a qué me refiero? jeje Además, si entramos desde el teléfono es muy probable de que ya conozcamos al fotografo.

Otras opciones que agregaría porque me parecen interesantes para los clientes son:

• Saber si las fotos que se tomo el cliente ya estan listas
• Hacer cita para la sesión de fotos
• Opción de compartir las fotos con amigos

¿Quedo claro en donde hay que empezar?

Investigación

Cuando se habla de web móvil solo hablamos de una, el problema es que a cada pinche navegador la muestra como se le antoja. Por eso es bueno pensar en la web móvil pero también pensar en qué teléfonos y navegadores nos gustaría que se viera mejor, si pueden conocer que teléfono usan los clientes excelente sería genial, sino se puede usen las estadísticas. Para nadie es un secreto que el iPhone es bastante popular, incluyendo el ipod touch, también las blackberry son famosas en el mundo de los trajes negros y no dejemos afuera a Opera Mini, el mejor navegador para teléfono hasta que llego Safari junto al iPhone y el G1 con Android.

Supongamos que investigamos y decidimos que vamos a trabajar para teléfonos básicos, las feas páginas wap y una versión bonita para webkit. Mobile Safari el navegador del iphone, opera mini, Android y Oss, el navegador de Nokia trabajan con webkit, estos por mencionar algunos porque hay muchos más. Con ellos podemos trabajar un sitio web presentable.

Los Limites

• Pantalla pequeña
• Escritura complicada
• Velocidad de conexión
• Memoria del teléfono
• Pocas opciones multimedia
• Sin comunidad de desarrollo

No tienen que saber todos los limites, solo tener una idea básica para que nuestra idea no quede muy grande para el teléfono.

Por el otro lado están las buenas practicas

La W3C hace ya un tiempo recomendó buenas practicas para diseño de la web móvil.

1. Diseña para una web
2. Basarse en estándares
3. Aléjate de peligros conocidos
4. Ten cuidado con las limitaciones de cada dispositivo
5. Optimiza la navegación
6. Revisa los colores e imágenes
7. Mantenlo pequeño
8. Usa la conexión con moderación
9. Reduce las dificultades para ingresar información
10. Piensa en los usuarios en movimiento. El tiempo es corto y las distracciones muchas.

Diseño web móvil es fácil

No se que hayan escuchado sobre diseñar para teléfonos pero yo les digo que es fácil. Hablando técnicamente es igual a diseñar para cualquier navegador para PC, es HTML, CSS y en el caso de los Smartphones podemos darnos el lujo de usar Javascript.

Si saben hacer un sitio web para PC, entonces saben hacer un sitio web para móvil, por supuesto, siempre que tengan presentes las buenas practicas que mencione antes.

Seguro van a escuchar de algunos tipos de construir páginas web como por ejemplo xhtml-mp (mobile profile), que esta hecho especialmente para la web móvil y funciona, pero NO ES NECESARIO. Grábense eso.

Trabajen XHTML hasta CSS2 (que es básicamente es lo que se usa ahora) y estarán bien.

También es un poco lento

El diseño web móvil requiere mucha prueba y error, eso quita tiempo. Además es bueno probarlo en la mayor cantidad de navegadores para mejorar la experiencia. Luego con el tiempo sabrán que funciona y que no sin necesidad de mucha revisión. Obviamente no pueden tener todos los móviles, si los tienen perfecto, pero sino hay que apoyarse en los emuladores. Esos programitas que simulan lo que necesitamos ver. Ahora, rápido les puedo mencionar que hay emulador para iPhone, Opera Mini, Android, creo que Blackberry también tiene el suyo, en ready.mobi encuentran emulador de Nokia y de Sony Ericsson. Hay algunos más pero al final les voy a dar la dirección de del blog en donde tengo toda esa información (la dirección es webdebolsillo.com/recursos).

Hacer cosas

En este punto ya saben que es bueno y qué es malo, o al menos deberían. Hay que probar porque no se sabe que se puede hasta que se intenta. Prueben hacer efectos, prueben reducir espacio, prueben hacer algo nuevo. Muchas cosas que sabemos del diseño web aplican también para los teléfonos, solo hay que saber como adaptarlas.

Inspiración

Cuando se empieza en esto es bueno tomar inspiración, ir a ver que ha hecho gente con más experiencia en el campo. Por ejemplo de mis sitios web móviles favoritos esta Flickr. Su sitio web es genial, ojala hubiera más sitios web como este. También esta Facebook, que aunque un poco más pesado es igual de interesante.

Otro sitio web interesante, que por cierto ayer no estaba disponible pero que espero mañana si, es CWTV, un canal de Warner que logro un buen diseño y una buena adaptación del mismo para móviles.

Recursos

Hay bastantes recursos para diseñar para web móvil, pueden ver una recopilación en mi blog visitando la página de recursos (http://webdebolsillo.com/recursos).

Allí están los enlaces de los emuladores, de documentos con buenas practicas y de otros artículos que podrían servirles. Igual, lo seguiré ampliando poco a poco y con su ayuda.

Seguir aprendiendo

Me hubiera gustado mostrarles un ejemplo, algo más practico pero por cuestiones de tiempo no se puede. Si están interesados pueden entrar webdebolsillo.com y preguntar, también junto a Hugo Muralles (@hCante) estamos empezando un grupo para desarrollo de móviles y aprender, pueden unirse comentando aquí o en el foro de móviles en Cristalab.

---

Presentación completa

Pueden ver o descargar la presentación completa desde SlideShare. También pueden utilizarla, solo les recuerdo que esta bajo licencia Creative Commons By-Sa (Mencionen que soy el autor y compartan bajo las misma licencia)

---

Más adelante incluiré la presentación y quizás el audio porque estoy seguro de que alguien me grabo. Espero poder rescatar las preguntas del público porque sería interesante tenerlas por acá.