Hojas de estilos, y dispositivos: monitores, PDA, teléfonos móviles, smartphones,…

Leyendo el artículo The Multi-Web Practice, sobra la dificultad que existe en la práctica del concepto de Web única (para muchos dispositivos con muy diferentes características), me encuentro al final una especie de propuesta para aumentar el número de medios-hojas de estilos más allá de screen y handheld que actualmente reconoce la especificación de HTML 4.01 del año 1999 (ver Descriptores de medios).

Sus propuestas, son los siguientes:

  • Monitores de alta resolución (2048 pixels de ancho)
  • Monitores “normales” (1024 pixels de ancho)
  • PDA (480 pixels de ancho)
  • Smart Phone (320 pixels de ancho)
  • Teléfonos móviles (160 pixels de ancho)

Tras unos segundos de “sesuda” reflexión, encuentro que puede tener mucha razón, aunque quizás aportaría alguna sugerencia con respecto al tamaño de algunos dispositivos.

Hay que tener en cuenta que la especificación de HTML tiene ya algunos años y aunque se intentó anticipar a un previsible crecimiento de dispositivos pequeños conectados a internet (PDAs, teléfonos móviles, smart phones) la realidad ha demostrado ser más diversa de lo que se pudo predecir en su momento.

Porque en dos “pequeños dispositivos” (tipo de medio handheld) te puedes encontrar con un teléfono móvil con una pantalla de 128×128, o una PDA con una pantalla de 480 x 640. Evidentemente en el primer caso (teléfono móvil con una pantalla pequeña), sólo te puedes plantear una disposición de la información vertical, colocando sucesivamente los bloques de información (por ejemplo, primero la cabecera, segundo el contenido, después el menú y por último el pié de página). En cambio para la PDA de gran resolución (480 x 640), se podría optar por un diseño vertical-horizontal, donde te puedes plantear por ejemplo, colocar el menú en un lateral junto al contenido, ambos por debajo de la cabecera y por encima del pié de página.

Evidentemente todo esto se podría optimizar desde el servidor y mostrando hojas de estilos optimizadas para cada tipo de pantalla, e incluso un navegador “inteligente” podría indicar al usuario las diferentes hojas de estilo que dispone para elegir la más adecuada (que puede ser el no usar ninguna).

Un asunto complicado, me temo.

El anuncio de Bruce Lee, versión XHTML + CSS

Simplifica tu código XHTML.
Utiliza un marcado estructural.
Usa CSS.
Pon una hoja de estilos “handheld” y la página se mostrará optimizada para una PDA.
Por una hoja de estilos “screen” y se mostrará optimizada para un monitor.
Las hojas de estilo pueden ser artísticas…
… y funcionales.
Usa CSS, amigo.

Inspirado en el anuncio de Bruce Lee

Gracias, Jacobo 🙂

Colección de esquinas redondeadas con CSS

Inculto de mí, que pensaba que las únicas formas verdaderas de redonedar las esquinas usando CSS era las mostradas por Caótico Neutral en su excelentes artículo Redondeando esquinas (I) y Redondeando esquinas (II), pero no es así.

En Smiley Cat, han recopilado alrededor de cincuenta formas para redondear esquinas: CSS Rounded Corners ‘Roundup’. Y lo mejor de todo es que prentende seguir aumentando la lista que de momento ronda los cincuenta métodos. La lista es casi tan larga como la de los Reyes Godos que algunos olvidamos a los pocos segundos de memorizarla en el colegio, por aquí, por España.

Por cierto, no nos olvidemos de un método, que no funciona en todos los navegadores pero sí en los de la Familia Firefox, y es mediante el uso del estilo -moz-border-radius: (de momento no forma parte de las recomendaciones de CSS), que podemos ver funcionando en  algunas páginas del sitio web de inkel, por ejemplo en su blog ({ ?sujeto ?predicado ?objeto } => “Web Semántica”@es)

Una referencia completa de CSS 2.1

En Cascading Style Sheets 2.1 Reference podemos encontrar todas las propiedades de CSS 2.1 en una página (aunque requiere javascript para visualizarse correctamente).

Está divida en secciones (texto, maquetación, elementos, varios), propiedades y detalles. Entre los detalles nos podemos encontrar la compatibilidad de cada una de las propiedades con Firefox, Opera, Safari e Internet Explorer. Bastante útil, aunque sea imprescindible tener javascript activado…

Disponibles las presentaciones de la XV conferencia Internacional del WWW: WWW2006

Supongo que ya sabréis casi todos que entre los días 24 y 26 de Mayo se celebró la quinceava conferencia internacional del WWW en Edimburgo, Escocia. Puedes encontrar más información de la conferencia en su sito web oficial www2006.org, que entre otras cosas, tiene el programa de la conferencia, papers de investigación, talleres, tutoriales, posters (documentos breves), paneles, tutoriales para desarrolladores, tutoriales del W3C, pistas de audio, notas de prensa,…

En resumen, que hay material de sobra para investigar sobre accesibilidad web, web semántica, web móvil,… y dedicarle tiempo, si es que se tiene, por supuesto.