Dispositivos móviles
● Conocer las capacidades de los dispositivos móviles y los tipos de aplicación adecuadas para dichos dispositivos. ● Comprender las características que conforman una aplicación web destinada a ambientes móviles. ● Conocer las mejores prácticas en el ciclo de desarrollo de aplicaciones web para dispositivos móviles.
3 Desarrollo de Aplicaciones Web para dispositivos móviles
3.1 Introducción Una aplicación móvil es un software escrito para dispositivos móviles que realiza una tarea específica, como un juego, un calendario, un reproductor de música, etc. Se define como nativa aquella aplicación específicamente diseñada para ejecutarse en el sistema operativo de un dispositivo y en el firmware de la máquina, y que, por lo general, tiene que ser adaptada para distintos dispositivos. Una aplicación Web o una aplicación de navegador, en cambio, es aquella en la cual la totalidad o algunas partes de los programas se descargan de la Web cada vez que se ejecuta. Por lo general, se puede acceder desde todos los dispositivos móviles con capacidad Web. Para aplicaciones web para móviles, sin embargo, el interés de desarrolladores surgió sólo en los dos últimos años, específicamente después de la implementación exitosa por parte de Google de las aplicaciones basadas en HTML 5.
Naturalmente, los sitios Web móviles habían existido mucho antes, por ejemplo, Portales WAP.
En cuanto a los motivos para preferir una aplicación nativa a una Web, la mayoría de los desarrolladores de aplicaciones nativas argumentan que la interfaz de usuario es superior y las oportunidades comerciales que ofrece por ejemplo, el iPhone App Store, son mejores.
3.1.1 Características de las aplicaciones para dispositivos móviles ● ● ●
Mayor compatibilidad con diferentes modelos y sistemas operativos. No es necesario distribuir ni instalar ninguna aplicación. Podemos utilizar la aplicación en sistemas operativos propietarios que no permiten la instalación de aplicaciones Standalone. ● Podemos realizar cálculos y algoritmos complejos dado que la ejecución se realiza en el servidor. ● Se puede trabajar con gran cantidad de información.
3.2 Formularios Web con emuladores de dispositivos para móviles 3.2.1 Formularios Web para Móviles Cuando se diseña un formulario que queremos que sea sencillo de usar en un móvil es útil aplicar la máxima “Más es menos”, porque cuanto menor y más objetivo sea el formulario, más contentos estarán tus usuarios. 1. Minimizar la entrada de texto Como decíamos, cuanto menos texto haya que escribir, mucho mejor. Existen muchas veces opciones alternativas a un campo de texto, como cajas de selección, botones de radio, “sliders”, etc. En muchos casos sólo nos servirá colocar un campo de texto y tampoco debe significar un problema, pero al menos sí debemos minimizar el número de campos donde tener que escribir datos con el incómodo teclado virtual. Un claro ejemplo de este detalle es utilizar “datepickers”, para seleccionar una fecha en un calendario, en lugar de escribirla a mano. 2. Minimizar el número de campos Cuanto menor sea el número de campos del formulario como en la figura 3.1, también más satisfecho estaráel usuario. En general, si hay campos prescindibles, se quitan y punto. 3. Utilizar campos input del HTML5 En HTML5 existen diversos tipos nuevos de campos INPUT que pueden ayudarnos a mejorar la interfaz de entrada de datos en los formularios. Existen campos para selección de colores, fechas, meses, números, rangos, URL, email, etc. Estos campos muchas veces se implementan con ligeras diferencias en el navegador a los campos INPUT de texto de toda la vida, por ejemplo cambiando cosas como el “layout” del teclado virtual, para que muestre unas teclas u otras, dependiendo del tipo de campo y del dato que se supone tiene que introducirse en él. 4. Alinear etiquetas arriba Al lado de cada campo de formulario se suele colocar un texto explicativo que sirve para saber qué información se debe colocar en el campo, al que en inglés se le llama “label” y que se traduciría por etiqueta. Ese texto debe aparecer al lado del campo, pero debido al tamaño reducido de las pantallas de móviles, se recomendaría colocarlo en la parte de arriba del campo, en lugar de al lado, como se suele hacer en formularios habitualmente.
3.3 Desarrollo de aplicaciones Web para dispositivos móviles 3.3.1 Consideraciones de diseño Cuando se trata de diseñar un sitio web para móviles es necesario diseñar la aplicación para que pueda hacerse uso en dispositivos de diferentes compañías. Uno de los problemas más comunes experimentados por los diseñadores que trabajan en dispositivos móviles es el conocer cuáles son las proporciones reales de la pantalla de un dispositivo móvil. El iPhone es de 320 píxeles de ancho por 480 píxeles de alto. Muchos dispositivos de Nokia NSeries son 240 píxeles de ancho por 320 píxeles de alto. Los dispositivos más nuevos a menudo apoyan un modo apaisado donde la anchura y la altura se invierte de forma espontánea. Los dispositivos de Nokia más populares disponen de pantallas que van de 176 por 208 píxeles hasta 352 por 416 píxeles. Las resoluciones de pantalla Blackberry variar desde 160 x 160 píxeles hasta a 324 x 352 píxeles.