La última actualización del sistema uCoz ha traído una nueva función a todos los usuarios – versión PDA del sitio web. ¿Qué es? Aquí te voy a contar esta cosa.

Así pues, hay muchísimos usuarios utilizando los teléfonos móviles u otros aparatos portátiles. El sitio PDA se requiere para estar más cerca a su propietario. De día en día se va creciendo el número de personas que utilizan teléfonos inteligentes y PDAs. Para eso ellos requieren los recursos de Internet del formato correspondiente, la gente se apropia del espacio informativo móvil y lo utiliza muy activamente. Y esta cosa se irá acelerando más y más. Pues bien, para que los usuarios visiten sus páginas web con más frecuencia y haya más visitantes a sus sitios, hay que crear todas las condiciones. Una de éstas es la versión PDA del sitio web.

Es verdad que a veces es imposible acceder a un sitio web desde un móvil. Por eso cuando se habla de esto, todo el mundo empieza a recordar sitios WAP. ¿Por qué? Porque muchos de los móviles viejos no admiten XHTML y se limitan de WAP. Pero de momento estos móviles son pocos ya y no hay sentido de crear una versión aparte para este tipo de teléfonos.

Por eso la variante PDA es más óptima entre otras.

¿Qué es lo que lo que diferencia una versión común de la PDA?
Compacidad. En PDA no debe haber nada de excesivo, sólo lo más esencial e importante de la página. Por consecuencia, el peso de tal página será mucho menos.

¿Cómo activar la versión PDA del sitio?
Se hace esta vaina muy simple: en el Panel de Control: Inicio » Configuraciones » Configuraciones generales » Activar las plantillas para la versión PDA del sitio.

¿Cómo puedo acceder a esta versión simplificada del sitio?
Al entrar en el sitio de tu móvil, accedes a la versión PDA automáticamente. Pero si quieres entrar desde una PC, en la barra de direcciones del navegador se debe escribir la dirección: http://tu_sitio.dominio/pda

¿Es posible modificar el diseño de la versión PDA?
Sí, por supuesto. Si tu sitio es único tanto acerca del contenido, como por su diseño, tendrás que sustituir las plantillas estándar por tuyas.

Para poder cambiar el diseño, como siempre pasa al Panel de Control: Inicio » Diseño » Gestión de diseño (plantillas). Allá se eligen y se activan Plantillas para la versión PDA del sitio y se trabaja con éstas como con las plantillas comunes. (¡No olvides activar la versión PDA en las configuraciones!).

ATENCIÓN: ¡¡¡cuídate y durante la edición de las plantillas presta máxima atención a lo qué plantilla estás editando – PDA o común!!!

He activado la versión PDA, pero se me escribe que el módulo no está activado. ¿Qué pasa?
Desactiva PDA y actívala de nuevo una vez más.

He accedido a la versión PDA de mi computadora y ahora no puedo desactivar la versión. ¿Qué debo hacer?
Hay que pasar por el enlace: http://tu_sitio/index/53 – esto activa la la versión completa de tu sitio.
En la parte inferior de cada página del sitio en la plantilla estándar de PDA hay un enlace: versión completa del sitio – ella tiene la dirección http://tu_sitio/index/53. ¡La puedes utilizar!

Yo paso al Panel de Control: Inicio » Diseño » Gestión de diseño (plantillas) » Plantillas para la versión PDA del sitio, pero allá no hay nada. No tengo idea cómo hacer esta plantilla.
Abre cualquiera plantilla PDA y haz clic sobre restaurar la plantilla estándar.
Se restaurará la plantilla estándar.

ATENCIÓN: ¡¡¡cuídate y durante la edición de las plantillas presta máxima atención a lo qué plantilla estás editando – PDA o común!!!

¿Qué módulos se puede utilizar en PDA?
Puedes utilizar todos los módulos que hay. ¡La funcionalidad de la versión completa se guarda también para PDA!

¿Se puede aplicar la sustitución rápida de los sectores de la plantilla para la versión PDA?
¡Por supuesto! En esta misma sección de tu Panel de Control, como también para la versión completa del sitio, hay un formulario de sustitución rápida de los sectores de la plantilla. Marca el punto plantillas PDA

Una guía para el correcto diseño de sitios webs accesibles desde PDAs. (Personal Digital Assitants)

1. Ser consciente de las limitaciones de los PDAs.
Los ordenadores de bolsillo tienen una pantalla más reducida, menos memoria y menos velocidad de proceso que los ordenadores convencionales.

2. Definir cuidadosamente la estructura del site.
Con las secciones más importantes y enlaces a las mismas desde todas las páginas. La primera página ya ha de mostrar información útil para el usuario, evitando páginas de bienvenida o de selección de idioma.

3. Evitar el uso de tablas.
En la mayoría de los casos basta con dividir el texto con saltos de línea y párrafos. El procesado de las tablas ralentiza la velocidad de carga de la página. Si se utilizan, especificar las dimensiones en porcentajes y sin sobrepasar los 150 pixels de ancho.

4. No utilizar marcos (frames).
Si ya de por sí se ha de intentar evitar su uso en el Internet convencional, con más razón en el Internet móvil: la mayoría de los navegadores no los soportan y restan mucho espacio en la pantalla.

5. Publicar contenidos concisos.
Por la limitación de la memoria y de la pantalla, escoger sólo la información más importante y esencial.

6. Organizar la información cuidadosamente.
Minimizando la longitud del texto (máximo 3 pantallas de longitud) y escogiendo una distribución óptima de los links de navegación (enlaces a otras secciones). Si el texto debe ser extenso, incluir enlaces a distintas partes del mismo para mejorar la navegación.

7. Optimizar los gráficos.

Una guía para el correcto diseño de sitios webs accesibles desde PDAs (Personal Digital Assitants).

1. Ser consciente de las limitaciones de los PDAs.
Los ordenadores de bolsillo tienen una pantalla más reducida, menos memoria y menos velocidad de proceso que los ordenadores convencionales.

2. Definir cuidadosamente la estructura del site.
Con las secciones más importantes y enlaces a las mismas desde todas las páginas. La primera página ya ha de mostrar información útil para el usuario, evitando páginas de bienvenida o de selección de idioma.

3. Evitar el uso de tablas.
En la mayoría de los casos basta con dividir el texto con saltos de línea y párrafos. El procesado de las tablas ralentiza la velocidad de carga de la página. Si se utilizan, especificar las dimensiones en porcentajes y sin sobrepasar los 150 píxeles de ancho.

4. No utilizar marcos (frames).
Si ya de por sí se ha de intentar evitar su uso en el Internet convencional, con más razón en el Internet móvil: la mayoría de los navegadores no los soportan y restan mucho espacio en la pantalla.

5. Publicar contenidos concisos.
Por la limitación de la memoria y de la pantalla, escoger sólo la información más importante y esencial.

6. Organizar la información cuidadosamente.
Minimizando la longitud del texto (máximo 3 pantallas de longitud) y escogiendo una distribución óptima de los links de navegación (enlaces a otras secciones). Si el texto debe ser extenso, incluir enlaces a distintas partes del mismo para mejorar la navegación.

7. Optimizar los gráficos.
- En dimensión: las pantallas de dispositivos Palm OS tienen un tamaño de 150x150, y los Windows CE/Pocket PC de unos 240x320.
- En tamaño: escogiendo el número de colores visibles en el PDA. (16 y 8 bits de color; 16, 4 y 2 escalas de grises).

8. Incluir texto alternativo en todas las imágenes.
Con el tag alt ofrecemos información a los usuarios que han deshabilitado la carga de imágenes en su navegador.

9. Añadir el tag handheldfriendly al comienzo de todas las páginas.
AvantGo sabrá que la página está optimizada para PDAs.

10. Utilizar convenientemente el caching de las páginas.
Para aumentar la velocidad de carga de las páginas. No guardar en caché las páginas que se actualizan todos los días (página de noticias), y guardar en caché las páginas que se actualizan raramente (página de créditos).

Introducción
La creación de un portal WAP es mucho más sencilla que la de un portal web tradicional. Esta sencillez es consecuencia de las propias limitaciones que imponen los teléfonos móviles con tecnología WAP. La pequeña pantalla de estos terminales apenas dejan libertad para el diseño, que se reduce a mostrar información textual. En la Red existen pequeñas utilidades que facilitan la creación de páginas WML y emuladores para comprobarlas.

Las páginas web que muestran los teléfonos WAP están escritas en un lenguaje llamado WML. Se trata de una versión adaptada del popular lenguaje HTML para la tecnología móvil. Las páginas diseñadas para WAP utilizan la extensión wml en los nombres de los archivos (por ejemplo, index.wml), en lugar de las conocidas extensiones htm o html, propias de las páginas HTML.

El lenguaje WML

Si pensamos en la pequeña pantalla de los teléfonos móviles y en la reducida velocidad de conexión (9,6 Kbps, frente a los 56 Kbps de un módem), deduciremos que el lenguaje WML no puede ser muy complejo. En efecto, éste se limita a mostrar menús por pantalla que llevan a pequeños fragmentos de texto y a enlaces a otras páginas WML.

También es posible mostrar imágenes, aunque no es recomendable utilizarlas debido a su mayor tiempo de descarga. Estas imágenes son mapas de bits guardadas en archivos con extensión wbmp. Un mapa de bits o bitmap es una secuencia de ceros y unos que dibujan toda la imagen: un 1 muestra un punto negro y un 0, un punto blanco. Los formatos JPEG y GIF son inviables en un teléfono móvil porque requieren ejecutar algoritmos de descompresión para mostrarlos.

Pero es en esta sencillez donde reside la dificultad para crear las páginas. Debemos hacernos a la idea de que los navegadores incorporados en los teléfonos WAP son muy tontos y requieren que las páginas estén perfectamente construidas. Si falta una coma, la página probablemente no llegue ni a mostrarse. Para rizar más el rizo, las distintas implementaciones de los navegadores en los teléfonos pueden ocasionar que una página WML produzca errores en algunos (por ejemplo, se vea en un Motorola pero no en un Nokia). También existen emuladores de WML que funcionan en entornos Windows o Linux, aunque suelen ser mucho más permisivos en la sintaxis de las páginas que los teléfonos WAP.

Editores de páginas WML
Cualquier editor de texto (incluido el Notepad de Windows) nos servirá para escribir una página en lenguaje WML. Pero si queremos trabajar má¡s cómodamente con el código WML, es recomendable utilizar editores que resalten en colores las etiquetas (comandos) del lenguaje. En Linux, tanto Emacs como Vim permiten resaltar la sintaxis del lenguaje.

Para Windows se puede utilizar WAPtor, que dispone de una vista previa para mostrar el resultado final de la página.

Emuladores de páginas WAP

WinWAP mostrando una página WML

Debido al alto precio de las conexiones desde un teléfono WAP, no siempre es posible realizar las pruebas desde un terminal real. Por esta razón, resultan de gran utilidad los emuladores de WAP diseñados para nuestro sistema operativo. Para ver las páginas WML desde nuestro ordenador será necesario recurrir a estos emuladores, ya que los navegadores habituales no las muestran.

Para Windows encontramos una gran variedad de emuladores. De las pruebas que han realizado en el Departamento de Tecnología, WinWAP ha sido, por su parecido a Explorer y Netscape, el que más nos ha agradado.

Apenas existen para Linux buenos emuladores que muestren contenidos WAP. Waplet, de código libre, es uno de los pocos disponibles para este sistema operativo.

Estos programas pueden utilizarse para navegar por páginas WAP sin disponer de un teléfono con esta tecnología. Sin embargo, debemos tener en cuenta que las reproducciones de las páginas no siempre son fieles y, en ocasiones, pueden verse correctamente desde un emulador pero mostrar errores desde un teléfono móvil.

Los servidores WAP
Cualquier servidor web puede adaptarse para mostrar páginas WML. Tan sólo es necesario configurar el servidor para que asocie las extensiones wml y wmls a los correspondientes tipos MIME, de manera equivalente a como están configuradas las extensiones htm y html. Si definimos que el archivo índice se llame index.wml, entonces será suficiente con marcar www.nombre-de-mi-portal.com para llegar a la página principal, que previamente la habremos nombrado como index.wml. Esta página habitualmente tendrá un menú para llegar a otras páginas WML dentro del mismo web.

Algunos servidores están configurados para detectar el origen del visitante. Si se utiliza un navegador WAP, se mostrará la correspondiente página WML. En cambio, si se accede a estos sitios web desde un navegador estándar (como Explorer o Netscape), aparecerá una página HTML. Entre ellos podemos citar a Google.

¿Se puede ver una página web HTML desde un WAP? En principio no se puede, ya que sólo se muestran las páginas específicamente preparadas para WAP. Sin embargo, existen conversores que transforman estas páginas a formato WML. Por ejemplo, el navegador UP Phone, que está implementado en los teléfonos Motorola Timeport, incluye un conversor automático. Si nuestro navegador no dispone de conversor, también es posible utilizar conversores online, como el de Google (desde la página WAP de Google.com se pueden ver páginas HTML).

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.

También 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.

También 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 múltiples 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 creció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 indicaciones:
• 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 adaptándose 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 dispositivos.

• 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 dispositivos 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 entre 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.

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.

• 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: Llevar a cabo las pruebas sobre los dispositivos, así como los emuladores.
• URLs: Usar URLs cortas.
• Barra de Navegación: Ofrecer 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 utilizar 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 automáticamente. 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.
• Contenido 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 utilizar 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 asegú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 actualmente 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: Mantener 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.
• Control 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 último os proporciono el validador de las Buenas Prácticas en Web Móvil.

Las estadísticas no mienten, más de 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 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:

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:

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.