Una de las principales gracias de la web semántica, donde el diseño gráfico de un sitio va enteramente definido vía CSS, es la capacidad de adaptar las páginas de acuerdo al dispositivo utilizado para su visualización. Para ello, existen métodos enteramente definidos en la hoja de estilos (atributos @media para definir distintos estilos dentro de un mismo archivo, o @import para insertar propiedades presentes en otros archivos) y otro completamente basado en HTML, mucho más confiable… Según la experiencia que les relataré.

Pues bien, como ya lo he comentado ampliamente, el último mes estuve trabajando la nueva plantilla de e-noticias. Uno de los objetivos principales de esta renovación era hacer posible el acceso del sitio desde otros dispositivos, ya que, como están las cosas hoy en día con el Wi-Fi, las Pocket PC, Palm, Celulares y demases, parece justo ofrecer los contenidos informativos locales para el, digamos, “penquista digital”. Entonces, aparte del soporte WAP, fue el momento ideal para probar CSS diferenciado según el dispositivo.

Pues bien, partí trabajando un archivo CSS para todo el sitio, siguiendo con las convenciones de Mambo, que dictan que todo lo que sea CSS va en un archivo llamado template_css.css. Entonces, definí los estilos separando con los atributos @media:

@media screen {
/* Propiedades para PC's */
}

@media handheld {
/* Propiedades para PDA's */
}

Y llamé al archivo CSS desde el HTML con


Esto funcionaba de maravillas en Opera, al emular desde ahí la navegación handheld… Sin embargo, en la Pocket PC de un amigo, navegando con Pocket IE, no sólo no mostraba los estilos correspondientes para el dispositivo, sino que no mostraba ningún estilo… Más tarde, probé con un emulador Pocket PC, y se repitieron los mismos resultados…

Pocket IE no muestra ningún estilo.

Opera Mobile, impecable.

Creo que eso deja más que claro el nivel de confiabilidad que le podemos dar a @media… Claro, es bastante probable que los productos para Pocket PC no sigan muy bien los estándares, pero qué le vamos a hacer… Es necesario que funcione.

Entonces, digamos que me fui por la tangente, y separé los estilos en dos archivos, llamados imaginativamente template_screen.css y template_handheld.css. Y la clave, cómo llamé a las hojas de estilo:


Con este arreglín, éstos fueron los resultados:

Pocket IE… Una mezcla de estilos, pero al menos se ve.

Opera Mobile… impecable.

¿Conclusiones? Al menos en Pocket PC (no he probado en Palm), el despliegue de CSS diferenciados depende directamente del HTML, no del CSS. Esto, además de permitir un mejor orden en el servidor y dentro de los mismos archivos, aliviana la carga al navegador (sólo descarga lo necesario). Ah, y además, usen Opera Mobile

Tips sobre el diseño de webs para pantallas pequeñas pueden encontrar en la web de Opera… Y obviamente, en Google.

Y otra cosa… Aunque aún está en desarrollo, y puede que funcione o no, existe un navegador de Mozilla para Pocket PC… Su nombre es Minimo (Mini Mozilla), y está disponible para equipos con Linux (bastante maduro) y Windows Mobile o CE (en pruebas…) Pero claro, mejor ni les cuento cómo desplegaba e-noticias este navegador…

Y de paso: DJFunkinMixer, , la versión WAP (gracias por los arreglines, Claudex) también sirve como e-noticias mobile, tal como se ve en estos shots: Pocket IE | Opera Mobile.

3 comentarios en “Diseño para PDA’s

  1. En Palm OS, bajo AvantGo! y Blazer se ven de maravilla. e-Noticias se ganó un espacio en mi cuenta de Avantgo ahora que me regalaron 1 MB adicional.Un dia puse a prueba el IE en WinMobile y Blazer en PalmOS con mi blog y en Blazer se vio perfectamente, pero en Pocket IE perdía forma.

  2. P.D. Al cargar la versión completa, AvantGo no muestra determinados estilos. Solamente en version mobile se carga bien, Blazer no tiene los mismos problemas.

  3. Ten en cuenta que el navegador que llevan por defecto los pocket PC es un equivalente al explorer 3.0, así que no esperes maravillas.De todas formas, y esto es lo bueno de la accesibilidad web, se puede acceder al contenido y eso es lo importante.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *