Diseño web para iPhone

Las estadísticas no mienten, un millón de dispositivos vendidos el primer fin de semana, Apple produciendo a su máxima capacidad (40 millones de iPhones al año) para satisfacer la falta de inventario, listas de espera de 2 meses en algunos casos para conseguir el teléfono del cuál todo mundo esta hablando y la pregunta está en el aire ¿Los diseñadores/desarrolladores estamos listos? o mejor aún, ¿debemos estarlo? qué no eran ya suficientes temas de moda para manejar con nuestros clientes: Web 2.0, AJAX, SEO, RIAs, etc.

Vamos por partes, al hablar del desarrollo de aplicaciones para el iPhone podríamos partir de dos vertientes, la primera que implica desarrollar Aplicaciones Nativas para el teléfono, programar nuestras aplicaciones con un lenguaje de programación tipo C y obtener el mejor desempeño de las mismas. Este esquema  esta orientado principalmente a gente con buenos conocimientos de programación y que estén pensando distribuir sus aplicaciones en la plataforma de Apple llamada “App Store”.

El otro tipo de aplicaciones del cual estaríamos hablando son las aplicaciones Web para el iPhone, y para desarrollar/diseñar en este esquema lo que se requiere son conocimientos fundamentales en el diseño/desarrollo web, tales como HTML, CSS, Javascript, etc. En este nicho entran las Aplicaciones Web diseñadas específicamente para el iPhone y también los Sitios Web para el mismo y que en este caso son el tema central de este artículo.

Del diseño web tradicional al diseño web para iPhone

Al decir Diseño Web “Tradicional” nos referimos a sitios hechos a la medida para alguna empresa, proyecto o institución, la gran mayoría de ellos están hechos con HTML y otros tantos con Flash; ambas situaciones pueden dar origen a una estrategia alternativa para nuestro proyecto, en la primera situación aunque tengamos un sitio HTML que posiblemente sea visible en el iPhone, este no aprovechará varias características que se han hecho presentes y que seguramente marcaran la pauta a seguir para futuras versiones de los navegadores móviles y en el segundo escenario donde hablamos de un sitio Flash es ya sabido por todos, que aún a la fecha de publicación de este artículo no existe una versión de Flash Player para iPhone, tanto Apple como Adobe se han pronunciado al respecto y al parecer tendremos que seguir esperando para tener una versión móvil de nuestro plug-in favorito para desarrollar sitios web y aplicaciones RIA, pero mientras esto sucede tendremos que optar por otro esquema.

En este otro esquema no hay ningún secreto para los diseñadores/desarrolladores web que están acostumbrados a manejar estándares web en sus sitios, de hecho si tenemos nuestro sitio web planeado de esta manera, bastará con una pequeña actualización en el CSS para que el iPhone y/o cualquier otro dispositivo móvil puedan interpretarlo de manera adecuada, entiéndase por esto último la posibilidad de ver el sitio web en la versión móvil de Safari y para los más entusiastas que tienen la inquietud de crear un sitio web especialmente diseñado para el dispositivo tenemos algunos tips bastante interesantes.

Pruebas de Compatibilidad con Webkit

El navegador del iPhone esta basado en el mismo motor web que Safari llamado WebKit, salvo con algunas adaptaciones para el dispositivo y por ello es una de las herramientas clave para probar nuestra creaciones; otro factor importante es el hecho de que actualmente ya se encuentra disponible para Windows lo cual da libertad a los desarrolladores/diseñadores de utilizar la plataforma de su preferencia. A pesar de esto es muy recomendable conseguir un iPhone para tener una percepción real de como se va a ver y a comportar el contenido en la pantalla.

De lo anterior, uno de los temas más discutidos en foros es el viewport; que en pocas palabras es la manera en la cual los diseñadores del iPhone decidieron que una página web de tamaño real debería ser vista en la pantalla del dispositivo a un tamaño relativo al mismo. Cuando vemos una página en el navegador a través del viewport, se interpreta una sección de 980 pixeles y se plasma en la pantalla de 320 pixeles del iPhone, lo anterior fue pensado para lograr la mayor compatibilidad con los sitios web actuales.

Conforme utilizamos el zoom al pellizcar la pantalla o dar un “tap” sobre la misma, todo el contenido se re escalara para brindarnos una mejor vista con mas detalles de las imágenes y las tipografias. Para controlar este comportamiento se implementó una etiqueta meta que lleva la siguiente sintaxis:

<meta name="viewport" content="width=880" />

Esta etiqueta es interpretada por el navegador para cambiar el tamaño original del viewport de los 980 pixeles originales a una medida de 880 pixeles, otra medida muy utilizada por sites con relación de aspecto 4:3, sin duda este es uno de los primeros recursos de usabilidad que tendremos que controlar al estar diseñando para una pantalla de 320 pixeles.

Otro factor a considerar es la tipografía, que incrementa su tamaño para darle al usuario mayor legibilidad en relación al zoom utilizado en el viewport, es recomendable si estamos utilizando elementos de posición y tamaño absoluto como los AP elements de Dreamweaver, desactivar esta funcionalidad con la directiva: -webkit-text-size-adjust: none; dentro del CSS para evitar problemas de desbordamiento (overflow) del contenido o bien controlarlo mediante propiedades de visibilidad y scroll para evitar resultados inesperados.

El tamaño sí importa

Antes de seguir adaptando nuestro sitio también es recomendable considerar las dimensiones físicas del aparato para el cual estamos diseñando, el saber que en un centímetro vamos tener 64 pixeles es un dato a tener en cuenta ya que no hay cursor que nos refleje la selección en pantalla y en lugar de ello tendremos que estar utilizando los dedos que en promedio usaran entre 60 y 90 pixeles del área visible. Lo cual nos hace pensar en una estrategia para crear un sistema de navegación adecuado al tamaño de nuestras manos.

Y al hablar de sistemas de navegación para el iPhone al parecer están de moda los acordeones, debido a la flexibilidad de los mismos. Una regla de tamaño al respecto sería que el alto de cada elemento de navegación fuera de alto tal que permitiera cómodamente seleccionar una sección del sitio web, aún en movimiento!
Para aplicar estas reglas Apple recomienda en sus guías de desarrollo web utilizar una petición de tamaño específica al ligar el CSS al documento, podría ser de la siguiente manera:

<link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />

Al buscar un navegador web la página, pasaran por alto este archivo CSS por tener un máximo de 480px.

Herramientas de desarrollo web para iPhone

Si bien es cierto que en repetidas ocasiones hemos recomendado para diseño/desarrollo móvil alguna de las herramientas de la Suite de Adobe CS3 en combinación con Device Central y ese ambiente de trabajo sigue siendo vigente ya que solo bastará con generar un documento nuevo para displays de 320x480, en esta ocasión vamos a hablar de otra herramienta llamada Aptana.

Aptana es un ambiente de desarrollo que esta basado en Eclipse, al igual que Flex Builder. Nos permite trabajar con tecnologías como HTML, CSS, DOM, JavaScript, Adobe AIR, PHP y lo más importante es que existe un plug in para el desarrollo orientado a iPhone. Dicho plug in aún esta en fase beta, pero es lo suficientemente estable para producir con él.

Algunas de sus características más importantes son:

• Multiplataforma y de Código Abierto
• Integración con FTP
• Soporte parat Javascript, HTML y CSS
• Previsualización de proyectos iPhone en modo vertical y horizontal
• Plantillas para crear aplicaciones de iPhone
• Fácil importación de librerías AJAX
• Servidor local para correr aplicaciones directamente en el iPhone

Por todo lo anterior se vuelve una herramienta indispensable al momento de estar creando contenido para el dispositivo.

Consideraciones Finales

A grandes rasgos hemos hablado en general del panorama para crear contenido para el iPhone. Queda de ustedes el poner manos a la obra para tener esos sitios web optimizados para el dispositivo que sin lugar a dudas esta dando mucho de que hablar y que esta creando un parte aguas en cuestión de interfaces móviles debido a lo avanzado de sus tecnologías. Es un fenómeno que no podemos ignorar, desde un punto de vista global las estadísticas son contundentes, en toda Latinoamérica no somos ajenos a esta situación y este dispositivo a pesar de ubicarse en un nicho algo elitista, está creando conciencia de que hay otras maneras de acceder a la red, de mantener sincronizada nuestra información en la nube de Internet y de consumir contenidos aún en movimiento. Estoy en espera de sus comentarios e inquietudes acerca del tema.

Aquí tienen algunas ligas de referencia:

1. Sitio Oficial del iPhone - http://www.apple.com/iphone/
2. Grupo de Google  iPhoneWebDev - http://groups.google.com/group/iphonewebdev
3. Aptana, herramienta con plugin de desarrollo para iPhone - http://aptana.com/iphone/
4. Página iPhone de Activ - http://www.activ.com.mx/iphone
5. Página iPhone de Cinepolis - http://www.cinepolis.com.mx/iphone

Edgar Parada de Activ (www.activ.com.mx)

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.