Círculo de Maquetadores » Web Móvil

Maquetación Móvil con jQuery Mobile

Álvaro Brito — Sat, 10 Mar 2012 17:16:10 +0000

En la era de los dispositivos móviles, el interés por el desarrollo web móvil cada vez es mayor.

Actualmente lo más utilizado es aplicar el “diseño responsivo (responsive design)” en las web que desarrollemos, para que se visualice o se adapten correctamente en los dispositivos móviles (smartphone, tablet, etc). Esto lo conseguimos haciendo uso de Media Queries CSS3.

Por otro lado tenemos los Frameworks JavaScript orientados exclusivamente para el desarrollo de aplicaciones y sitios web para móvil. Hoy hablaremos de uno de los más útiles, prácticos y que conlleva menor esfuerzo en el desarrollo de aplicaciones web:

jQuery Mobile

¿Qué es jQuery Mobile?

Es un framework de Javascript basado en jQuery y jQuery UI, para el desarrollo de aplicaciones web y de escritorio (nativas) en dispositivos móviles. Soportando una amplia variedad de dispositivos.

¿Por qué nos interesa?

Está basado en jQuery, por lo tanto la curva de aprendizaje será mínima para aquellas personas que hayan utilizado jQuery.
Compatible con las principales plataformas móviles y de escritorio: iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook y todos los navegadores modernos. Ver todas las plataformas soportadas
Su peso de (20kb) y el uso mínimo de imágenes en sus componentes.
Uso de marcado HTML5 en la estructura de las páginas y componentes, utilizando los diferentes atributos para “disparar” automáticamente los Widgets de jQueryMobile. Además podemos aplicar los diferentes comportamientos que trae cada componente sin tener que aplicar ningún script adicional.
Enfocado tanto a aplicaciones web como a aplicaciones nativas. Combinando jQuery Mobile con PhoneGap.
Accesibilidad en sus componentes, basados en la especificación WAI-ARIA y haciendo uso de los ‘roles’. De tal manera que trabaje con los lectores de pantalla. Accesibilidad en jQuery Mobile
Proporciona una potente herramientas para crear diferentes temas (themes): ThemeRoller.

¿Cómo lo utilizamos?

jQuery Mobile proporciona un cojunto de widgets de fácil implementación y un sistema de navegación con AJAX para la transición entre páginas. A continuación veremos como crear fácilmente nuestra primera página:

“EL ESQUELETO”

HEAD

Primero agregamos las referencias necesarias a jQuery, jQuery Mobile y el theme básico de CSS. En el siguiente paso agregaremos nuestro propio theme personalizado.

Una vez que hemos terminado de referenciar las librerías necesarias, creamos la estructura de la plantilla principal de la página utilizando HTML5, y luego definimos las areas de contenido (content region) que proporciona jQueryMobile.

Utilizamos el meta viewport, con el que podemos establecer el ancho del dispositivo y definir la escala . Por defecto, lo podemos dejar definido con la constante width=device-width y definir la escala mínima y máxima a 1; initial-scale=1.0 maximum-scale=1.0. Podemos añadir más reglas en el meta viewport, por ejemplo si queremos permitir que el usuario pueda escalar la página.

BODY

En el cuerpo del documento HTML, especificamos la Página (data-role=”page”), la Cabecera (data-role=”header”), el Contenido (data-role=”content”) y el Pié (data-role=”footer”) de la misma, añadiendo los atributos data- HTML5, que utiliza jQuery Mobile para transformarlo en Widgets funcionales y con los estilos del theme utilizado.




	Título página
	
	
	
	
	

 




	
		Título
	


	
		Hola Mundo
	


	
		© 2012

Añadiendo tu propio contenido

Puedes añadir contenido HTML dentro del data-role=”content”, de esta manera usará el estilo del theme asignado.

Si queréis añadir contenido HTML propio, sin que contenga funcionalidad de jQuery Mobile, tendréis que omitir el atributo data- y utilizar el role adecuado para cada contenido HTML (si no queréis utilizar roles omitir este paso).


	Hola Mundo

Múltiples páginas

Todas las páginas estarán incrustadas en el mismo documento. Como hemos visto anteriormente, cada página del sitio estará representada con el atributo data-role=”page”, también podemos añadirle un título a cada página con el atributo data-title=”Título página 1″.

Por último debemos añadir el atributo id a cada página, de esta manera podemos interactuar con ella, por ejemplo para poder navegar de una página a otra.




	
		Título
	


	
		Hola Mundo
	


	
		© 2012
	
	






	
		Título
	


	
		Hola Mundo
	


	
		© 2012

Ver Múltiples páginas en jQuery Mobile

Navegación entre páginas

La navegación es muy sencilla, solo tenemos que poner en el ‘href’ del enlace el ‘id’ de la página destino. El código HTML quedaría de la siguiente forma:

Ir a la página 2

Podemos especificar el tipo de transición con el atributo data-transition, la transición por defecto es slide pero existen varios tipos de transiciones jQuery Mobile.

Las que podemos usar en la versión actual de jQuery Mobile son las siguientes

slide
slideup
slidedown
pop
fade
flip

También puedes definir la dirección de la transición con el atributo data-direction, por ejemplo: data-direction=”reverse” para invertir la dirección.

Themes jQuery Mobile

Podemos crear nuestros propios themes de forma sencilla y rápida con el ThemeRoller que nos ofrece jQueryMobile. Una de las principales características de esta herramienta, es la multitud de themes que podemos crear y asignar cada componente que usemos en nuestra aplicación.

Cada theme o tema tiene asignado una letra, con la que podemos identificar el theme y aplicarlo a cualquier componente que queramos, usando el atributo data-theme. Veamos un sencillo ejemplo:

En la documentación oficial podemos ver más sobre el uso de themes en jQuery Mobile y las opciones posibles para cada uno de los componentes.

Debemos tener en cuenta que jQuery Mobile genera clases para cada uno de sus componentes usando el prefijo ui-.

Formularios

Los componentes de formulario de jQuery Mobile, nos aportan multitud de funciones ya definidas y diferentes tipos de elementos propios. Todos los formularios deben estar dentro de la etiqueta form y con el action y method asignados para procesar la información en servidor:

...

Existen varios tipos de controles, que son mas que suficientes para poder crear formularios complejos. Con galería de elementos de formularios jQuery Mobile podemos ver de un vistazo todos los elementos y la funcionalidad de cada uno de ellos.

También nos da la opción de crear un formulario con una versión mini de sus controles, útil para formularios extensos o para aprovechar espacio en la pantalla del dispositivo. Para ello debemos añadir el atributo data-mini=”true” en el controlgroup:


	
		
			Opciones:
			
			Opción 1
			
			Opción 2

Accesibilidad en formularios

Si se requiere ocultar la etiqueta label por motivos de accesibilidad y que los lectores de pantalla puedan leerla, podemos ayudarnos de la clase ui-hidden-accessible y añadir el atributo placeholder para usar el elemento de formulario como label:

Usuario:

Si tenemos un contenedor de jQuery Mobile para controles de formularios le asignamos la clase al propio contenedor:


	Usuario:

Ambos ejemplos se verían de la siguiente forma:

Nota: Si necesitamos deshabilitar ciertos elementos del formulario, usaremos el atributo disabled. En el caso de que necesitemos aplicar el estilo disabled a un elemento que no sea un control de formulario, podemos utilizar la clase ui-disabled sobre el elemento.

Conluyendo

Hemos analizado de forma rápida las nociones básicas que debemos saber de jQuery Mobile y sus principales componentes, podéis ver la información técnica más detallada en la documentación oficial.

Para concluir os dejo una Guía de referencia de jQuery Mobile

Guía de Desarrollo Web Móvil

Álvaro Brito — Fri, 04 Dec 2009 11:49:24 +0000

Los chicos de mobiforge nos ofrecen de forma gratuita la una dotMobi Guía de Desarrollo Web Móvil. No es una guía muy reciente, pero básicamente contiene casi todos los puntos para cualquiera Web para Móvil.

La guía se ha realizado basandose en el documento de Mobile Web Initiative de W3C Mobile Web Best Practices 1.0, pero lo lleva más lejos. Es muy importante tener la base de estas mejores prácticas y hacerlo más accesible. Con esto en mente, la guía comienza describiendo el panorama web móvil en detalle, y la importancia del contexto móvil.

Hay ejemplos de código y un montón de información útil. Describe las técnicas reales para crear un sitio apto para móviles y la forma de publicarlo. Esta guía está diseñada para los desarrolladores que ya están familiarizados con el desarrollo web en general, pero que ahora quieren probar suerte en el móvil. Por ahora, la guía no incluye las técnicas más avanzadas tales como la adaptación, pero eso se verá en la parte II.

Descargar Guía de Desarrollo Web Móvil

Guía de Emuladores de Móvil

Álvaro Brito — Sun, 08 Nov 2009 10:18:26 +0000

Este artículo se centra en la configuración de emuladores para probar sitios móvil (que también pone de manifiesto emuladores que se pueden utilizar para probar aplicaciones móviles). En él veremos los diferentes tipos de emulador disponible, los mejores para usar, y las diferentes formas en que pueden ser utilizados.

Emuladores de Móviles

Se dividen en tres categorías principales:

Emuladores de dispositivos: Estos son generalmente proporcionados por los fabricantes de dispositivos para simular el dispositivo real. Son excelentes para la prueba de su sitio Web o aplicación en un dispositivo en particular.
Emuladores de navegadores: Para simular entornos móviles. Si bien es útil para determinar la funcionalidad disponible en un navegador móvil en particular, son inútiles para el dispositivo de pruebas específicas. Ya se escribió un artículo sobre Navegadores para dispositivos móviles, dónde podemos ver los diferentes navegadores que existen actualmente para dispositivos móviles.
Microsoft proporciona emuladores para Windows Mobile, y Google proporciona un emulador de Android. Éstos se ejecutan dentro de un entorno simulado de dispositivos móviles y facilita el acceso a aplicaciones que se ejecutan en el sistema operativo, por ejemplo, un navegador Web.

Os dejo con el artículo completo de mobiForge, muy interesante para aquellos desarrolladores Web Móvil que deseen poder probar sus sitios Wen los diferentes dispositivos móviles, con solo instalar y configurar unas aplicaciones:

Guía de Emuladores de Móviles

Agrego tambien una Guía de validadores de Olga Carreras, muy interesante. En dónde incluye también la validación para móviles.

Diseñando para Móviles (diseño para múltiples tamaños de pantalla)

Álvaro Brito — Sat, 17 Oct 2009 10:47:11 +0000

En este artículo os enseñaremos y aprenderéis como conseguir un Diseño Web 100% Móvil, se explicará paso a paso las distintas estrategias para lograr el objetivo de; diseñar una Web totalmente válida para la gran mayoría de dispositivos móviles, usando las técnicas y tecnologías que podrás ir viendo a continuación.

Imaginemos que tenemos que encagarnos de crear un diseño de un sitio web para móviles. Es probable que, a menos que estemos diseñando para un solo dispositivo, rápidamente nos vamos a encontrar con un problema común que experimentan todos los diseñadores que trabajan con dispositivos móviles, averiguar cuales son realmente las proporciones de pantalla de un dispositivo móvil.

Por ejemplo:

El iPhone es de 320 píxeles de ancho por 480 píxeles de alto.
Muchos dispositivos de Nokia N-Series 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.

Este artículo se destina a ayudar a desarrollar el diseño de estrategias eficaces para orientarlo a una amplia gama de dispositivos móviles y tamaños de pantalla. Con este fin, comenzamos con un esquema de dos cuestiones clave que se encontrará en el diseño para las pequeñas pantallas: la diversidad en la pantalla y el tamaño del píxel.

Esperar y gestión de la diversidad

En este punto, probablemente te estarás preguntando “… ¿es realmente necesario para el diseño de todos estos tamaños diferentes de pantalla?”, o “… es lo que realmente necesitamos para crear un diseño para cada dispositivo?”. Dependiendo de los requerimientos de negocio del proyecto, puede ser totalmente factible diseñar sólo para un tamaño de pantalla o dispositivo. Sin embargo, si los requisitos determinan que debe ser utilizado por la mayoría de los dispositivos, vamos a tener que encontrar la manera de hacer frente a esta diversidad.

Las cosas pueden no ser tan malas como parecen. Al diseñar para la web móvil, podemos suponer que las páginas se desplazan hacia arriba y hacia abajo como lo hacen los navegadores. Esto, de alguna forma elimina la necesidad de preocuparse por la altura de la pantalla, lo que nos permite centrar nuestros esfuerzos principalmente en tratar con la diversidad en anchos de pantalla del dispositivo. Afortunadamente DeviceAtlas Explorer nos proporciona un medio rápido para comprobar que el ancho de la pantalla en “se rompe” a través de los miles de dispositivos móviles conocidos.

Los gráficos anteriores indican, que la gran mayoría de los dispositivos comparten sólo tres anchos de pantalla, 128, 240 y 176 píxeles con muchos de los valores restantes, 120, 130, 160, 208 y 220 píxeles, no demasiado divergentes de estos tres valores centrales. Esto nos deja con unos cuantos dispositivos, tanto en los extremos altos y bajos, con una anchura de 96, 101, 320 y 320 + píxeles. Mientras que los dispositivos con un ancho de pantalla de menos de 128 píxeles pueden parecer un pequeño porcentaje de la totalidad, cuando se combina (96, 120, 101 y 84 píxeles) que suman hasta 469 dispositivos!. Más de la mitad del número de dispositivos de 240 píxeles o alrededor del 10% de todos los dispositivos conocidos.

Tambien debemos señalar que en este momento, menos del 5% de los dispositivos tienen resoluciones superiores a 320 píxeles de ancho. Esperamos que esto cambie en los próximos años, ahora estamos viendo las resoluciones de pantalla más pequeña (128, 176, etc), y dando paso a las más grandes (240 +), como se ilustra en el gráfico siguiente:

Teniendo en cuenta que el tamaño de pantalla es importante, también hay un parámetro adicional a considerar: la dimensión física de la pantalla.

El problema de los Píxeles

Durante años, los diseñadores han realizado principalmente plantillas Web para monitores comunes. El tamaño de pantalla medio es de 1024 x 768 pixels, y aunque el tamaño físico de las pantallas varían, las dimensiones totales normalmente son como resultado una densidad de píxeles de alrededor de 85 ppp (píxeles por pulgada). Últimamente, sin embargo, el panorama ha empezado a mostrar el cambio, sobre todo con los nuevos dispositivos portátiles:

Netbooks, como el Asus Eee PC 900 tienen un rango de 9 pulgadas en diagonal con una resolución en torno a 1024 x 600 píxeles dándoles la densidad de píxeles de alrededor de 133 ppp.
El iPhone de Apple tiene una resolución de pantalla de 320 x 480 píxeles que al combinarse con sus 3.6″ de diagonal de pantalla los resultados nos llevan a, una densidad de píxeles de 160 ppp.
El E60 de Nokia tiene una resolución de pantalla de 416 x 352 píxeles y un minúsculo 2,2″ de diagonal de pantalla dándole una densidad de píxeles de más de 240 ppp!

Cuando se combina con la necesidad de apoyar muchos dispositivos, esta gran variación en la densidad de píxeles introduce un nuevo problema, el impacto del tamaño de píxels en el diseño.

La siguiente ilustración simula la misma imagen de 100 x 100 píxeles en dispositivos con la densidad de píxeles de 72, 144 y 240 píxeles por pulgada. Observemos cómo el tipo y los detalles finos se pierden como se representa en las imágenes más pequeñas.

Esto significa que debemos de dar solución a una amplia gama de píxeles. Sin embargo, es importante tener en cuenta que no todos los píxeles son creados iguales, y cuando sea posible:

Determinar la gama completa de densidades de píxeles, necesitará ser soportada.
Revisa tus diseños para estos dispositivos, para garantizar su visualización en todos ellos.
Diseñar y definir los elementos de la maquetación en unidades relativas, como el em y en porcentajes.

Con un desarrollo y estrategia teniendo en cuenta los tamaños de pantalla, conseguiremos construir sitios Web escalables para una amplia gama de dispositivos móviles.

A continuación definiremos las diferentes estrategias para conseguir una Web para múltiples pantallas. No solo para dispositivos móviles sino también para pantallas de escritorio:

Estrategias de diseño de sitios Web para móviles

Estrategia 1: Definición de grupos de dispositivos

Como hemos comentado antes, puede haber miles de modelos de dispositivos, la diversidad no es tan mala como parece a simple vista. De hecho, es completamente posible agrupar muchos dispositivos con un ancho de pantalla similar y acabar con cinco grupos con diferentes anchos de pantalla:

tiny: 84px, 96px, 101px, 128px, 130px, 132px
pequeña: 160px, 176px
medio: 208px, 220px, 240px
grande: 320px, 360px, 480px +
escritorio: 800px +

Estas agrupaciones son, por supuesto, totalmente arbitrarias y los requisitos de un proyecto pueden dictar un conjunto totalmente diferente. Por ejemplo, 320 píxeles para el iPhone y, poco más de 240 píxeles para navegadores móviles más recientes y 128 píxeles para dispositivos más antiguos. Al final, la definición de las agrupaciones de dispositivos realmente se reduce a los objetivos y la necesidad del proyecto. Con este fin, es una buena idea visitar DeviceAtlas de forma regular con el fin de ver las estadísticas y volver a evaluar la relevancia de sus agrupaciones.

Tambien debemos tener en cuentas las capacidades de cada dispositivo no todos soportan CSS avanzado, manipulación del DOM y JavaScript. Antes de hacer las agrupaciones comentadas anteriormente, debemos asegurarnos que los dispositivos móviles son compatibles con las tecnologías que ofrecerá el proyecto Web.

Estrategia 2: Crear un diseño de referencia por defecto

Después de haber definido los grupos de dispositivos, ahora debemos seleccionar el dispositivo de referencia. Este es el dispositivo que se usara como base durante el proceso de diseño y en última instancia, dará lugar a la creación de un diseño de referencia. Dependiendo de las necesidades de negocio que desee, se diseñará una versión de referencia para un ancho medio de pantalal de (240px). Esto mantiene el diseño suficientemente simple para adaptarse a pantallas más pequeñas, permitiendo al mismo tiempo la libertad de crear un diseño que se adaptará a los dispositivos con pantallas más grandes. También alguna vez crearemos 2 diseños de referencia, pero solo cuando sea necesario. Todo esto nos permite lo siguiente:

Progresivamente mejorar el diseño de los dispositivos más avanzados (por ejemplo: para aprovechar el GPS o el apoyo a CSS3).
Adaptarse a los multiples dispositivos de contacto (móviles, PDA, etc).
Ajustar el diseño para compensar las actuales limitaciones graves en los dispositivos más restringidos.

Estrategia 3: Definir las normas para el contenido y la adaptación de diseño

Una vez que hayamos completado un diseño de referencia, también debemos proporcionar una dirección específica para la adaptación de este diseño a otros tamaños de pantalla. Similares a los contenidos de un documento de diseño visual. Estas normas y directrices deben ayudar al equipo de maquetación Web a adaptar el diseño sacando partido al código XHTML y CSS. Por ejemplo:

El logotipo del sitio debe estar adaptado para cada agrupación de dispositivos para garantizar la visualización de dicha imagen.
Las cabeceras deberían estirarse al 100% del ancho de la pantalla utilizando una imagen de fondo repetitiva siempre que sea posible.
Las imágenes de contenido no deben ser mayor de 200 píxeles de ancho para el grupo por defecto, (o el 80% de la anchura de la pantalla del dispositivo).
Las imágenes de contenido debe ser automáticamente optimizadas para escalar, independientemente del ancho de pantalla.
Siempre que sea posible, las listas de iconos o gráficos decorativos deben de ser eliminados, y así conseguir el mayor espacio disponible para el contenido.
Una hoja de estilo dinámica se utilizará con el fin de establecer los valores para cada dispositivo.

Aunque no es una recomendación formal, resume las estrategias comunes para adaptar y mejorar el diseño, manteniendo los tamaños de archivos al mínimo. Siempre debemos tomar decisiones de diseño pensando en la mayoría de usuarios, y en lo objetivos del proyecto.

Estrategia 4: Opta por los estándares web y un diseño flexible

Con las normas del diseño de referencia y la adaptación en su lugar, la estrategia final se basa en la flexibilidad de marcado a través de la reutilización de un código genérico, basados en estándares XHTML y CSS. En la práctica significa, la creación de un código XHTML y CSS genérico, que podemos usar mayormente en cualquiera de los futuros proyectos para dispositivos móviles, esto nos aportará beneficio, tiempo y productividad en los siguientes proyectos. Dado el gran número de dispositivos móviles, este beneficio no puede ser subestimado, ya que garantiza que su contenido será accesible a un gran número de usuarios, sin complicar el trabajo a los desarrolladores. A continuación, se presenta una serie de indicaciones para aumentar progresivamente el diseño de las agrupaciones dispositivo diferentes, a través del uso de navegador y/o el dispositivo específico. CSS, gráficos y marcado HTML.

A medida que vamos leyendo aprendemos que realmente para conseguir un diseño accesible para cualquier dispositivo móvil es, crear diseños líquidos partiendo de un diseño de referencia y maximizar el uso de CSS y XHTML. Todo esto incluye tomar como referencia las siguientes inidicaciones:

No especificar un ancho de documento específico, permitiendo así que el diseño pueda expandirse y contraerse, y así pueda llenar la pantalla del navegador del dispositivo.
Aprovechar los elementos de bloque que también se expanden y se contraen de forma nativa.
Usar la hoja de estilos para dsitribuir los elementos de contenido de forma accesible para el usuario.
Especificar el tamaño de los elementos de diseño utilizando los porcentajes de modo que, naturalmente se expandan y se contraigan adaptandose al ancho de página.

Poniendo todo junto

Para minimizar al máximo el tiempo de carga de la página, debemos simplificar y agrupar el código a una sola línea. Tambien tenemos que cumplir con los estándares XHTML y CSS. Por ejemplo el marcado y diseño de la web de la BBC para móviles es bastante simple y con un contenido básico:

Como podemos comprobar es un diseño totalmente fluido y escalable, que ocupa todo el ancho de la pantalla, independientemente del dispositivo que se use. El resto de los estilos y contenidos son especialmente adaptados en la siguiente imagen, que satisfacen el producto o familia de dispositivos más usados actualmente:

El logotipo cambia de tamaño o es sustituido para adaptarse a la anchura de la pantalla del dispositivo.
La cabecera y otros elementos utilizan una textura como fondo y un color, en dispositivos más antiguos dicha textura no se muestra, perso si se muestra el color de fondo.
La BBC, parerce que a optado por adaptar el contenido a diferentes grupos de dispositivos, como podemos comprobar en la imagen las diferencias que hay entre el iPhone y el resto de dispositivos. También podemos ver que en el iPhone se muestran más contenidos y gráficos aprovechando al máximo su gran pantalla.
Las imágenes son escalables y se adaptan a cualquiera de los dispotivios.
En los dispositivos más grandes, los iconos asociados a cada elemento de la lista se pueden ver. Mientras que en los dispositivos más pequeños se elimina para garantizar una longitud de línea cómoda, para la visualización correcta del contenido.

El sitio Web de la BBC, es un ejemplo ideal, ya que muestra de forma simple que se puede combinar un marcado y estilos para llevar a acabo la visualización correcta de un amplio grupo de dispotitivos móviles. Su diseño, adaptación, redacción y funcionalidad esta totalmente orientado a los múltiples dispositivos que usan los usuarios. Con una rápida carga del sitio, una buena optimización y equilibrio etre diseño y accesibilidad.

User Agent Switcher

Por último quiero incluir un práctico complemento para firefox, su nombre es User Agent Switcher, nos permite visualizar una Web en diferentes dispositivos. La extensión User Agent Switcher añade un menú y un botón de la barra de herramientas para cambiar el agente de usuario del navegador. Está diseñado para Firefox, Flock, Songbird y Thunderbird, y se ejecutarán en cualquier plataforma que soporte estos navegadores, incluyendo Windows, Mac OS X y Linux. Creo que es la herramienta más apropiada para testear nuestra maquetas en cualquier dispositivo. Tambien os añado un fichero xml para integrarlo en la herramienta, con el que nos añadira los agentes de usuario de los distintos dispositivos móviles más populares y usados actualmente:

Descargar pack de agentes de usuario

Concluyendo, espero que todo lo que hemos comentado os sirva de gran ayuda para vuestros proyectos para dispositivos móviles, ya que son el futuro de la Web.

Estudio de Usabilidad Móvil de Jacob Nielsen

Álvaro Brito — Thu, 17 Sep 2009 22:05:22 +0000

Jacob Nielsen, experto en estudios de usabilidad, ha realizado un estudio de usabilidad sobre el uso de la Web móvil en general, con 48 participantes en los EE.UU. y Reino Unido. Se realizó una revisión de diseño de 20 sitios Web, con 6 teléfonos: un teléfono móvil de pantalla táctil, tres teléfonos inteligentes (smartphones) diferentes, y dos teléfonos de contacto diferentes.

El estudio revela que el uso de la Web en un teléfono móvil varía dependiendo de las características del dispositivo que se use. Como era de esperar, se descubrió que los sitios diseñados específicamente para su uso en un teléfono móvil rinde sustancialmente mejor, que los “sitios completos” y no adaptados para ello. Cosa que debemos tener muy en cuenta para nuestros proyectos Web.

Nielsen también en comparación con un estudio del año 2000. Las mismas tareas que llevan más tiempo a hacer hoy, que los que lo hicieron en el año 2000 en un teléfono WAP. Sugiere que la razón principal es que en aquel entonces, la web móvil era un “jardín cercado”, limitado, pero relativamente simple, mientras que hoy la Web es más abierta en los teléfonos móviles. Y la gente lo que necesita es ir a un motor de búsqueda y no perder tiempo en introducir y buscar una palabra, debido a los tiempos de carga para buscar una respuesta.

Como se ha comentado, con respecto al año 2000 la usabilidad Web en móviles no ha progresado, sobre todo en los tiempos de espera para ver los contenidos que buscas y teniendo en cuenta que las conexiones a Internet son mucho más rapidas que hace 9 años. Pero poco a poco se piensa mas en el diseño Web para Móvil, ya que es el futuro de la Web.

Las pantallas grandes y la manipulación directa tiene un gran impacto en la usabilidad.

Como era de esperar, entre más grande sea la pantalla, mejor será la experiencia del usuario al acceder a sitios Web. A continuación os dejo con el promedio de exito en estos dispositivo:

Teléfonos móviles de contacto 38%
Smartphones 55%
Teléfonos de pantalla táctil 75%

Con estos números, el consejo para los consumidores es fácil: comprar un teléfono de contacto si los sitios Web que están utilizando son importantes para ellos.

El consejo para los Desarrolladores Web es más difícil. Los teléfonos de uso tienen una mejor facilidad de uso, pero ¿realmente se usa para navegar, lo suficiente como para tenerlos en cuenta?. Otra posibilidad es centrarse en los usuarios de teléfonos smartphone y teléfonos táctiles que son más propensos a navegar por la Web.

Fuente: Mobile Usability

Navegadores para dispositivos móviles

Eduardo Sainz — Sun, 09 Aug 2009 22:16:22 +0000

El acceso a la red desde dispositivos móviles está aumentando de una forma espectacular, un 30 por ciento en España, lo que supone un total de más de 4,7 millones de internautas móviles.

Los factores que están ayudando a este crecimiento, son los avances tecnológicos en los dispositivos móviles, un mayor ancho de banda y el descenso de las tarifas para navegar.

Por ese motivo, en este artículo vamos a realizar un repaso de los navegadores que más se llevan.

Opera Mobile.

Desarrollador: Opera
Gratuito: No (24$)
Última versión: 9.7 beta
Motor: Presto
Plataformas soportadas: Symbian UIQ, Symbian S60, Windows Mobile.
Web: opera.com/mobile

Una de las características de este navegador, es que puede formatear automáticamente cualquier página web, ajustando el tamaño de las imágenes, texto, tablas y demás a la resolución del dispositivo móvil sobre el cual se este utilizando, esta tecnología es llamada Small Screen Rendering.

Podemos decir que Opera Mobile es uno de los navegadores web para móviles más completos, atractivos y avanzados disponibles actualmente. Desde su web podemos descargar una demo de 30 días.

Principales tecnologías soportadas:

HTML 4.01, XHTML 1.0/1.1, HTML5(parcial) XML, XSLT, XPath
CSS 2.1 y CSS3 (parcial)
DOM Level 2 y 3 (parcial)
JavaScript 1.2-1.5 / ECMAScript
AJAX
SVG 1.1 Full y Tiny 1.2
Flash Lite 3.1

Opera Mini

Desarrollador: Opera
Gratuito: Si
Última versión: 4.2
Motor: Presto
Plataformas soportadas: Java MIDP 2.0.
Web: opera.com/mini – Simulador de Opera Mini

El navegador para dispositivos móviles más utilizado, con un porcentaje de uso del 25% , superando a la versión de Safari para iPhone. Funciona en cualquier dispositivo que pueda ejecutar Java, lo que lo hace instalable en casi cualquier sistema. A diferencia de la versión Mobile, las páginas consultadas se optimizan previamente en los servidores de Opera, para posteriormente visualizarla correctamente en nuestro dispositivo.

S60 Browser

Desarrollador: Nokia
Gratuito: Licencia Symbian
Última versión: S60
Motor: WebKit
Plataformas soportadas: Symbian S60.
Web: nokia.com/browser

Es el navegador por defecto en los sistemas basados en Symbian s60. Este navegador web es capaz de ejecutar aplicaciones web desarrollados especificamente para Safari y iPhone, ya que utiliza frameworks WebCore y JavascriptCore desarrollados por Apple.

Otra característica destacada es que permite mostrar una vista en miniatura de la página web en su totalidad llamada minimaps que permite a los usuarios magnificar las áreas que quieren leer

Características principales:

HTML 4.01, XHTML 1.1, XML
CSS 2.1
JavaScripT 1.5
AJAX
Flash

Obigo

Desarrollador: Obigo AB
Gratuito: No
Última versión: Q7
Motor: Propio
Plataformas soportadas: Symbian S60, Windows Mobile, BREW
Web: obigo.com

Obigo es una compañía sueca perteneciente a Teleca cuya oferta software para teléfonos gira alrededor del navegador.

Obigo empezó a desarrollar software para teléfonos móviles desde los comienzos de Internet móvil, antes incluso de que se aprobara la primera versión del estándar WAP, lo que la convierte en unos veteranos de la Industria, con más de 300 millones de teléfonos móviles en el mundo que incluyen alguna de sus aplicaciones. Fué el segundo navegador móvil en superar el Acid2 test.

Características principales:

HTML 4.01, XHTML 1.1, XML 1.1
DOM1, DOM2
CSS 2.1
RSS 2.0 / ATOM 1.0

Netfront

Desarrollador: Access Co
Gratuito: No
Última versión: 3.5
Motor: Propio
Plataformas soportadas: Symbian S60, S80, UIQ, Palm OS, PSP, PlayStation3, Windows Mobile entre muchas otras.
Web: access-company.com

Es un microbrowser para dispositivos embebidos, en principio se creó específicamente para renderizar HTML en dispositivos portátiles de bajo consumo de energía, en sus primeras versiones fué diseñado para dispositivos con pocos recursos. La mayoría de los móviles Sony Ericsson con sistema propietario lo incorporan, así como la consola Playstation 3 y PSP.

Principales tecnologias soportadas:

HTML 4.01, XHTML 1.1
CSS1, CSS2 y CSS3 (parcial)
JavaScript 1.2-1.5 / ECMAScript
Ajax
RSS
Visor documentos
SMIL 2.1
SVG 1.2 + microDOM

Safari Mobile

Desarrollador: Apple
Gratuito: Si
Última versión: 4
Motor: WebKit
Plataformas soportadas: iPhone OS, itouch
Web: apple.com

La versión móvil de este navegador solo está disponible para los iPhone e iTouch. Muy rápido, muestra las páginas tal cual, no redimensiona. Hasta hace poco era el navegador móvil más utilizado, siendo ahora superado por Opera.

Principales tecnologías soportadas:

HTML 4.01, XHTML 1.0/1.1, HTML5(parcial), XML, XSLT, XPath
CSS2 y CSS3 (parcial)
JavaScript 1.2-1.5 / ECMAScript
DOM Level 2 y 3
SVG 1.1
Ajax
RSS

Internet Explorer Mobile

Desarrollador: Microsoft
Gratuito: Necesita licencia Windows
Última versión: 6
Motor: Trident
Plataformas soportadas: Windows CE, Mobile.
Web: microsoft.com/spain

También llamado Pocket Internet Explorer, solo está disponible para plataformas windows CE / Mobile. En su última versión tiene un mejor renderizado de las páginas, múltiples niveles de zoom, soporte touchscreen, Flash Lite 3.1, entre otras mejoras.

Principales tecnologías soportadas:

HTML 4.01, XHTML 1.0/1.1, XML, XSLT, XPath
CSS 2.1
DOM Level 2 y 3 (parcial)
JavaScript 1.2-1.5 / ECMAScript
AJAX
SVG 1.1 Full y Tiny 1.2
Flash Lite 3.1

Fennec

Desarrollador: Mozilla
Gratuito: Si
Última versión: 1.01a1
Motor: Gecko
Plataformas soportadas: Symbian OS, Windows Mobile, Nokia Maemo.
Web: mozilla.org/projects/fennec/

Así se conoce a la nueva versión de Firefox para móviles. El nombre del navegador viene del zorro Fennec, un pequeño zorro del desierto. Destaca su sencillo uso y su sistema de actualizaciones similar a la de su hermano mayor Firefox.

Principales tecnologías soportadas:

HTML 4.01, XHTML 1.0/1.1, HTML5(parcial), XML
CSS2 y CSS3 (parcial)
JavaScript 1.2-1.5 / ECMAScript
SVG

Teashark

Desarrollador: Teashark
Gratuito: Si
Última versión: 1.01a1
Motor: Webkit
Plataformas soportadas: Java ME.
Web: teashark.com

60 Buenas prácticas Web Móvil

Álvaro Brito — Sun, 05 Jul 2009 12:41:32 +0000

Cuando se habla de Web Móvil se está haciendo referencia a una Web en la que el usuario puede acceder a la información desde cualquier lugar, independientemente del tipo de dispositivo que utilice para ello.

La Web móvil se presenta como un auténtico reto tanto para usuarios como para desarrolladores ya que, por un lado, el usuario encuentra problemas al intentar acceder a los sitios Web desde los dispositivos móviles, y por otro, los proveedores de contenido encuentran dificultades para crear sitios Web que funcionen adecuadamente en todos los tipos de dispositivos y configuraciones. Con la Web Móvil se intenta llegar a más usuarios y que ellos puedan acceder desde cualquier dispositivo móvil a la Web.

Este documento especifica las Mejores Prácticas para el contenido Web de dispositivos móviles. El objetivo principal es mejorar la experiencia del usuario de la Web cuando se accede desde estos dispositivos.

Las recomendaciones se refieren a la entrega de contenido y no a los procesos por los cuales se crea, ni a los dispositivos o agentes de usuario al que se entrega.
Principalmente a los desarrolladores y operadores de sitios Web. Con este documento se intenta familiarizados con la creación de sitios Web, y tener una familiaridad con las tecnologías que intervienen, tales como servidores Web y HTTP.

Buenas prácticas Web Móvl

Consistencia temática: Mantener una temática coherente para los distintos dispositivos móviles.
Capacidades: Explotar las capacidades del dispositivo para proporcionar una mejor experiencia al usuario.
Deficiencias: Toma las medidas oportunas para evitar implementaciones deficientes.
Pruebas: Lllevar a cabo las pruebas sobre los dispositivos, así como los emuladores.
URLs: Usar URLs cortas.
Barra de Navegación: Oferecer como mínimo un menú navegación en la parte superior de la página.
Equilibrio en los enlaces: Tener en cuenta el equilibrio entre tener demasiados enlaces en una página y pedir al usuario a seguir demasiados enlaces para llegar a lo que están buscando
Navegación: Proporcionar mecanismos de navegación coherentes.
Claves de Acceso (Acces Keys): Asignar claves de acceso a los enlaces en los menús de navegación y a los enlaces que son visitados frecuentemente.
Identificar los enlaces: Identificar claramente el objetivo de cada vínculo.
Mapa de imágenes: No usar mapa de imágenes a menos que sepas que el dispositivo lo soporta eficazmente.
Pop-Ups o Ventanas emergentes: No utilices Pop-Ups sin informar al usuario.
Auto Refresh: No utitlizar auto refresh (auto refrescar página) en la página a menos que se le haya informado al usuario.
Redireccionamiento: No utilices marcar para redirigir las páginas automaticamente. Configura el servidor para que el mismo lo haga de forma automática.
Recursos externos: Mantén el número de recursos externos al mínimo.
Contenedido conveniente: Asegúrese de que el contenido es conveniente para su utilización en un contexto móvil.
Claridad: Utiliza un lenguaje claro y sencillo.
Limitación del contenido: Limite el contenido a lo que el usuario ha solicitado.
Tamaño de páginas usable: Mantener el peso de página limitado para que no ralentice la navegación del usuario.
Tamaño de páginas limitado: Asegurarse de que el tamaño global de la página es adecuado para las limitaciones de memoria del dispositivo.
Desplazamiento o Scroll: Límite el desplazamiento de la página en una dirección, en el caso de que el desplazamiento secundario se pueda evitar.
Imágenes para el espaciado: Nunca utilicemos imágenes para el espaciado.
Tamaño de imágenes: No utitlizar imágenes con una alta resolución y peso elevados. Para una mayor prestación y carga del dispositivo.
Uso del color e imágenes: Asegurarse que la información que proporcionamos con colores e imágenes también esta disponible sin el uso de estas.
Contraste de color: Mantener un contraste claro entre el color de fondo y el color del contenido.
Imágenes de fondo: Cuando utilices imágenes de fondo aseguúrate de que el contenido sigue siendo legible en el dispositivo.
Título de página: Ofrecer un breve pero descriptivo título de la página.
No Frames: No utilizar frames (marcos) en ninguna página.
Estructura: Usar las características del lenguaje para crear una estructura lógica en el documento.
Tablas: Antes de usar las tablas asegúrate de que el dispositivo las soporte eficazmente.
Tablas anidadas: No utilizar tablas anidadas.
Tablas para diseño: No utilices las tablas para diseñar la página.
Tablas alternativas: Siempre que sea posible, utiliza una alternativa a la presentación de datos o presentación tabular.
Texto alternativo: Proporcionar un texto alternativo para todo elemento no textual.
Objects o Scripts: No utilizar objetos incrustados o script, ya que actulamente la mayoría de los dispositivos no los soportan.
Especificación en el tamaño de las imágenes: Especifica el tamaño de las imágenes a descargar para aquellas que tengan un peso alto.
Redimensionamiento de imágenes: Cambiar el tamaño de las imágenes en servidor para aquellas que tengan un peso demasiado alto.
Marcado Válido: Crea documentos que validen satisfactoriamente.
Medidas: No utilizar medidas en píxeles ni unidades absolutas..
Uso de CSS: Utiliza una hoja de estilos para controlar la presentación y disposición de la página, a menos que el dispositivo no lo soporte.
Soporte CSS: Organiza los documentos de modo que si es necesario puedan ser leídos sin hojas de estilo.
Tamaño de la hoja de estilos CSS: Mantener y minimizar el tamaño de la hoja de estilos.
Minimizar: Utilizar un marcado conciso y eficiente.
Soporte de formatos: Enviar contenido en un formato que se sepa que es soportado por el dispositivo.
Formato preferido: Siempre que sea posible, enviar el contenido en un formato preferido.
Codificación de caracteres: Asegúrese de que la codificación de caracteres del documento es soportado por el dispositivo.
Uso de la codificación: Indicar la codificación de caracteres que se utilice.
Mensajes de Error: Proporcionar información útil en los mensajes de error.
Cookies: No se basan en cookies disponibles.
Caché: Proporcionar la información en caché de las respuestas HTTP.
Fuentes: No contar con la herencia en estilo de fuente.
Minimizar acciones del teclado: Matener el número de pulsaciones o acciones del teclado del dispositivo al mínimo, para una mayor rapidez del usuario.
Inputs o entradas de texto libre: Evitar la entrada de texto libre, siempre que sea posible.
Valores por defecto: Ofrecer pre-seleccionado los valores por defecto cuando sea posible.
Inputs: Especifique un modo de entrada de texto por defecto, el lenguaje y/o formato de entrada, si el dispositivo se sabe lo soporte.
Orden de tabulación: Crear un orden lógico a través de los enlaces, controles de formulario y objetos.
Cotrol de Labels: Etiqueta todos los controles de forma adecuada y explícitamente asociados con las etiquetas..
Posición de controles: Posicionar las etiquetas de modo que se establecen correctamente en relación a la forma que se refieren a los controles.

Por útlimo os proprociono el validador de las Buenas Prácticas en Web Móvil:
Validador Web Móvil

Fuente: W3C Web Móvil