Blog de sonicbyte

Diseño web para telefonos moviles con HTML5, CSS3 y Javascript

Ser o no ser…¿Versión nativa o HTML5 para nuestro nuevo sitio o aplicación web móvil?

Perdón, chiste trillado….Pero es una pregunta importante que debemos hacernos antes de encarar un proyecto de estas características. Elegir uno u otro camino tiene sus pro y contras, y si bien no voy a profundizar respecto a crear aplicaciones nativas, haré una introducción al tema.

Aplicación nativa es aquella que especificamente es diseñada para funcionar en el sistema operativo de ese dispositivo.

Esto tiene sus ventajas:

• Acceso al hardware del dispositivo
• Capacidad para funcionar sin conexión web (aunque gracias al Html5 ahora es posible lograr una funcionalidad similar, lo explico luego.)
• Performance y velocidad
• Posibilidad de monetizar la aplicación (Por ejemplo vender tu app desde el appStore)

Estas ventajas por supuesto son importantes, pero requieren de un desarrollo específico por cada plataforma (Android, Iphone, Symbian, Blackberry, etc), a veces inclusive más de una versión, y una inversión de recursos de hardware, y mayor tiempo y conocimientos de desarrollo.

Por otra parte, si optamos por HTML5, CSS3 y Javascript como opción de desarrollo tenemos un camino diferente.

Podemos utilizar reglas de CSS3 y aprovechar características HTML5 + Javascript para controlar el comportamiento de nuestro sitio o aplicación de teléfono móvil y ofrecer una grata experiencia al usuario sin preocuparnos por tantas variables.

Con Media Queries podemos evaluar unos pocos parámetros universales que cualquier dispositivo actual tiene (hay más, pero sólo éstos nos interesan en este caso):

• Ancho y alto del navegador
• Ancho y alto del dispositivo
• Orientación del dispositivo (Ejemplo, evaluar si un iPad se encuentra en modo landscape or portrai)
• Resolución del dispositivo

Ejemplo:

@media all screen and (max-device-width: 600px) {#container { width: 550px;}}

Con esta simple regla estamos diciendo que si el dispositivo que carga nuestra página tiene un ancho máximo de 600px entonces le aplique al div “container” un ancho de 550px.

De esta forma podemos controlar cómo se visualizará nuestro sitio web o aplicación en diferentes resoluciones, no sólo de teléfonos moviles sino también ordenadores de sobremesa, notebooks y netbooks con mínimo esfuerzo.

Aquí pueden ver un ejemplo práctico de una aplicacion web que recientemente desarrollamos para un cliente, llamada Tivifan en la que utilizamos esta técnica, y notarán en las capturas como el diseño se adapta a los diferentes dispositivos:

Monitor de sobremesa:

Esta es la vista del sitio “normal” en un monitor con resolución alta.

Ipad en modo portrait: el sitio se muestra correctamente, pero en una sola columna, dando mayor espacio y comodidad al contenido principal.

Ipad en modo landscape: Al tener mayor espacio, mostramos el sitio a dos columnas.

Móvil con Android: A menores resoluciones, como la de éste dispositivo, toda la estructura del sitio es modificada. Navegación, logo y formulario mas pequeño y simplificado, fuentes reducidas, contenido a una columna, etc. Aunque menos atractivo que las otras opciones el sito es plenamente usable y su contenido más importante sigue siendo accesible.

Puedes probarlo tu mismo desde aquí, simplemente cambiando el tamaño de tu navegador manualmente.

Otras métodos interesantes: Antes comentaba que una ventaja de aplicación nativa era la capacidad de trabajar off-line, esto con HTML5 es también posible, gracias a la capacidad de guardar datos de forma local. Una de las opciones es utilizar localStorage. Permite definir algunos campos en lo que se puede describir como una simple base de datos en el navegador y recuperar un valor, incluso cuando el usuario ha cerrado su navegador y lo vuelve a abrir más tarde.

Haz la prueba y juega con este ejemplo online creado con HTML5 y Javascript desde el siguiente link:

http://jsbin.com/alagur/3/edit

Este por supuesto fue apenas un vistazo del potencial de HTML5, javascript y CSS3 para el desarrollo de aplicaciones y sitios web para teléfonos moviles. Muy pronto, más…

Más información de localStorage y Media Queries:

Media Queries

LocalStorage en Quirksmode