Aplicaciones web vs. Aplicaciones nativas
Debes tener en mente que una aplicación web funciona en el navegador, mientras que una aplicación nativa se encuentra instalada en el iPhone. Así que si deseas hacer algo así como un súper juego, de alta calidad, respuesta rápida y performance increíble, probablemente deberías optar por aprender algo de Objective-C y realizar una aplicación nativa. Sin embargo, si no posees una Mac y/o estás intentando realizar algo mucho más sencillo, como una versión para móvil de tu sitio web o blog, crear una aplicación web seguramente sea la forma más rápida y razonable de lograrlo.
¿Todavía no estás seguro? Aquí hay una lista de populares sitios web que son aplicaciones web para el iPhone:
Y la lista continua…
Si quieres dar el máximo, puedes considerar la idea de realizar tanto una aplicación nativa (esperemos que gratuita) y una aplicación web, como lo han hecho la mayoría de los sitios listados anteriormente.
1: Viewport, Viewport, Viewport
Esto puede que sea la cosa más simple e importante para una aplicación web para el iPhone. Se trata de una sola línea de código que debemos incluir en nuestros tags head con los otros meta tags:
<meta name=“viewport” content=“width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />
Esto le dice al navegador que es necesario escalar tu página de tal forma que quepa bien en el iPhone. Esto es lo que cada campo significa:
- width=device-width
Esto hace que la página quepa en el ancho del dispositivo. El display del iPhone es de 320×480 pixeles en modo retrato y 480×320 en modo paisaje, esto es por lo que a veces se ven sitios que usan un ancho de 320 en lugar de un ancho del mismo tamaño que del del dispositivo. - initial-scale=1.0
Esta es la escala de la primera carga de la página. - maximum-scale=1.0
Este es el escalamiento máximo permitido. - user-scalable=0
Esto determina si el usuario tiene permitido hacer zoom in y out por medio del presionamiento/doble-tapping. También se puede utilizar user-scalable=no y user-scalable=yes en lugar de 0 y 1.
Ten en mente que viewport NO ES UNA VENTANA. Tómalo como si fuera una lupa sobre una página. Puedes moverla por todos lados y realizar zoom in/out. Este es el motivo por el cual ciertas propiedades como posicionamiento fijo no funcionan en el iPhone. En Professional iPhone and iPod touch Programming, Richard Wagner explica lo que es un viewport:
Un viewport es un área rectangular de un espacio de la pantalla en el que se muestra una aplicación. Las aplicaciones Windows y Mac tradicionales están contenidas dentro de sus propias ventanas. Las aplicaciones web se muestran dentro de una ventana del navegador. Un usuario puede manipular lo que se ve dentro de un viewport redimensionando la ventana, haciendo scroll a través de su contenido y en muchos casos, cambiando el nivel del zoom.
Especificar el viewport es una obligación y se trata del primer paso para lograr una aplicación web amigable al iPhone.
2: “Esconder” la barra de direcciones
La barra de direcciones ocupa una parte considerable de la ya bastante pequeña pantalla con la que tenemos que trabajar. Por eso seguramente desearás esconderla y así podrás mostrar tanta información en la pantalla como te sea posible. Mira el ejemplo que sigue:
Con la barra de direcciones
Ahora, ocultemos la barra añadiendo esta simple línea de código javascript:
window.scrollTo(0, 1);
La siguiente imagen muestra que había mucha más información que se podría mostrar:
Sin la barra de direcciones
Noten que esto sólo esconde temporalmente la barra de direcciones. Esconderla permanentemente se puede, pero no es la mejor idea.
3: Prueba en iPhone y en navegadores
Más allá de que tu meta final sea crear una aplicación web para el iPhone probarla en navegadores normales puede resultar beneficioso.
Dado que se trata de una aplicación web, la puedes probar como a una de ellas. Esto quiere decir que podrás utilizar muchas herramientas útiles como YSlow, Firebug, y Web Developer.
NOTA: Puede que obtengas errores de ciertas piezas del código que son legítimas. Por lo que no te conviene depender mucho de estas herramienta, úsalas sólo como una guía.
Debes tener presente que Firefox puede que muestre las cosas de forma distinta de la que lo hará Safari y, a la vez, Safari también es distinto a Mobile Safari. Más que seguro notarás que las web apps que desarrollas en Dashcode no se mostrarán bien en Firefox. Es por esto que necesitas realizar la prueba en un iPhone. Si de hecho desarrollas en Dashcode, este posee herramientas de prueba/debuggeo propias.
4: Imitar una aplicación nativa es posible
Desde una perspectiva de usabilidad, hacer que tu aplicación web luzca como una nativa es beneficioso porque los usuarios ya saben cómo utilizar una aplicación iPhone. Además, utilizar los botones, fuentes, listas, etc. es también útil. Apple puso mucho tiempo y dinero para lograr un buen diseño, así que usemos de base su buen criterio y nos ahorraremos la necesidad de atravesar todo el proceso de diseño de forma innecesaria.
La siguiente foto muestra el menú “Groups” de la propiedad “Contacts”. ¿Puedes adivinar si se trata de la aplicación nativa o su imitación?
Sí, efectivamente se trata de la aplicación web.
Si no deseas imitar una aplicación iPhone nativa, por lo menos sigue los siguientes consejos básicos:
- Se consistente (por ejemplo, botones de navegación en cada página)
- Crea botones que sean lo suficientemente grandes para poder apretarlos (por ejemplo, para los dedos gordos)
- Haz que las cosas sean intuitivas (Por ejemplo, las cajas desplegables/contraíbles deben tener alguna pista como un +/- a su lado)
5: Utiliza Frameworks, librerías y herramientas para ahorrar tiempo
Si decides imitar una aplicación nativa, existen varias cosas que te pueden ahorrar una gran cantidad de tiempo:
- Dashcode
Si tienes una Mac, esta puede que sea la mejor manera de lograr algo rápido. Dashcode posee una librería de partes (marcos, botones, etc.), una librería de snippets, una guía de pasos sobre el flujo de trabajo y mucho más. - iUI
Este bonito framework te permite crear web apps con simple HTML! Y también posee un lindo efecto deslizante. El desempeño es bastante rápido y el mismo framework es un archivo de tamaño bastante pequeño. - iWebkit
Como con iUI, puedes crear tu aplicación con HTML sencillo. Sin embargo, este framework posee muchas propiedades únicas. También tiene una guía de usuario que explica claramente cómo utilizar estas propiedades. Este framework funciona bien con otro código javascript, por lo que se puede personalizar la aplicación web de la forma en que cada uno desee.
Por supuesto, estos son sólo algunas de las herramientas que pueden servirte, existen muchas más.
6: Utiliza listas cuando te sea posible
Las listas son una forma buena y rápida de mostrar información. “Contacts” y “Mail” muestran la información en forma de listas. Estas permiten una fácil navegación, nos dan la posibilidad de mostrar una gran cantidad de ítems en una pantalla pequeña y son fáciles de tocar en comparación con las imágenes. Además también se cargan de forma bastante rápida ya que se trata sólo de texto. Son el método de navegación ideal, dependiendo claro está del tipo de tu aplicación web.
Si utilizas una lista, agrupar los elementos por orden alfabético, relevancia o utilidad es siempre algo bueno.
Una lista con ítems agrupados alfabéticamente
7: Minimiza la navegación horizontal
De ser posible, minimiza la cantidad de pantallas por las que tus usuarios deben navegar hasta acceder a la información que desean. Tener menos páginas por las que navegar implica menos redireccionamiento, y por ende, menos cargas innecesarias por tener que ir adelante y atrás.
Muchas pantallas de navegación
8: Haz que tu aplicación sea pequeña y rápida
Recuerda que el desempeño es algo crítico en el mundo móvil, dado que un usuario puede estar en la red EDGE o poseer una conexión lenta. Es necesario dar la menor cantidad de datos a descargar que sea posible. Las reglas de desempeño de cualquier sitio normal se aplican también aquí. Las puedes chequear mediante Page Speed y YSlow.
No está mal para un framework que posee un archive .js, un .css y un montón de imágenes. ¿Verdad?
9: Ten un ícono de Home
Asegúrate de tener un bonito ícono que la gente pueda ver cuando añadan tu aplicación web a su escritorio. Realíza un archivo PNG de 57×57 y añade el siguiente código a tu home page, en el head:
<link href="path/to/your/icon.png" rel="apple-touch-icon" />
Tener un ícono es una buena forma de reconocer rápidamente tu aplicación web, y también de hacer que ésta se vea profesional.
10: Los “simuladores” iPhone no son perfectos
Notarás que los simuladores iPhone, incluso el oficial “Aspen Simulator”, pueden a veces mostrar resultados diferentes que el propio iPhone. Es necesario tener esto en cuenta dado que mucha gente desarrolla y prueba las aplicaciones principalmente en estos “simuladores” sólo para descubrir cerca del final del desarrollo que en el iPhone la aplicación posee muchos bugs o directamente ni funciona. Así que tengan cuidado al utilizar un simulador, dado que no son un reemplazo del verdadero iPhone.
Falló la simulación 
Conclusión
Seguramente existan muchos consejos que aquí no se hayan nombrado, así que no tengan miedo de exponer sus trucos y pasos a seguir a la hora de lograr el desarrollo de una buena aplicación.
Es necesario que colaboremos entre todos para lograr una web cada día mejor 
Fuente: Net Tuts +
No hay comentarios:
Publicar un comentario