Categorías
CSS Diseño web

Expresiones de Zen en los bonsais y su aplicación en el diseño web

Leyendo el título, parece que el discurso de este artículo va a tratar sobre CSS Zen Garden, y las virtudes de separar la presentación del contenido en una página web. Pero no es así, aunque todo puede ocurrir 🙂

Comencemos por el principio. Hace poco he pedido prestado de la biblioteca un libro:

Título
Bonsai
Autor
Peter Chan
ISBN:
84-329-1659-5

En las primeras páginas de este libro se habla de los principios estéticos chinos y japoneses, que tienen su origen en el taoísmo y el zen (budismo chino-japonés). Estos principios son los conceptos de wabi y sabi. Lo que cuento a continuación, se ha extraído de ese libro. No es una copia literal, pero se parece bastante 🙂

Wabi y sabi

Literalmente, wabi significa pobreza. Pero maticemos más este concepto, no se trata de tener o no tener posesiones, hablamos de la no dependencia de las posesiones materiales. Quiere decir que una persona puede ser rica interiormente, teniendo pocas posesiones.

Desde el punto de vista intelectual o artístico, el wabi se asocia con las cosas simples de la vida, con las personas que no caen en complejidades estructurales, ni en el exceso de adornos. Como dijo el poeta “una cruz más sencilla carpintero”.

Sabi significa soledad. Pero de nuevo hay que matizar el concepto para entender mejor sus implicaciones en términos estéticos. El término sabi está relacionado con la antiguedad, como por ejemplo con los utensilios usados en la antigua ceremonia del té. Así, también puede significar imprerfección antigua a propósito y ausencia de sofisticación.

Uniendo estos dos conceptos, obtenemos siete características que se consideran expresiones Zen de una obra de arte.

  • Wabi: Libertad de ataduras, profundidad sutíl
  • Sabi: Sublimidad austera, asimetría
  • Wabi y Sabi: Simplicidad, tranquilidad, naturalidad.

Y ahora desarrollemos un poco estos conceptos

  • Asimetría: En los bonsais (¿recordáis?, hablámos de un libro de bonsais), la mayoria de los diseños son asimétricos en la forma y el balance. Muy pocas composiciones necesitan ser simétricas: la armonía se consigue mediante un balance de la masa visual, el espacio abierto (o espacio en blanco) y las proporciones adecuadas.
  • Simplicidad: A veces, en campos como la filosofía y la ciencia, los pensamientos más profundos se expresan en términos simples. Un exceso de decoración (hablando de bonsáis) en la maceta o el árbol, resta méritos al diseño.
  • Sublimidad austera: Todas las partes sobrantes deben ser eliminadas, manteniendo únicamente los elementos esenciales que se requieren para transmitir el mensaje del artista. Un bonsái se puede diseñar mediante una aproximación minimalista: fuertes líneas del tronco y pocas ramas y follaje.
  • Naturalidad: El propósito de los bonsáis es crear una obra “natural” en una maceta. Debe evitarse cualquier rastro de artificialidad: el objetivo es observar y copiar las características de la naturaleza para crear una impresión de lo accidental ó incidental. Como si no se hubiese tocado por el hombre.
  • Profundidad sutil: Es un término complejo, y de difícil transmisión implica insinuaciones de inagotabilidad y reverberaciones interminables. Hay una sugestión de profundo espacio que implica alguna escondida habilidad o cualidad.
  • Libertad de ataduras: Romper con los convencionalismos, costumbres, ser original,…
  • Tranquilidad: Esta característica, un profundo sentimiento de calma profunda y reposo, está muy asociada al arte chino y japonés y también está presente en los bonsáis.

Después de toda esta explicación, conviene recordar el diseño original de CSS Zen Garden, y visitarlo de nuevo. ¿Comprendéis mejor el diseño ahora?

Si de vuelves atrás, a ojear las características consideradas como expresiones Zen de una obra de arte (ya sabes, asimetría, simplicidad,…) perfectamente se pueden extrapolar a otros ámbitos de la web, como por ejemplo la usabilidad (al menos con algunas características), o incluso el código fuente de una página web (ya sabéis the code is poetry).

Quizás esta analogía te parece demasiado forzada. Ten en cuenta que cuando empezé a escribir esto, estaba de baja con faringitis, otitis y una infección en un ojo. De todas formas te reto, de forma elegante y amistosa, a encontrar similitudes con otras obras, artes, escritos, libros,… que aparentemente estén muy alejando del diseño web. Por pura diversión. 🙂

Categorías
Diseño web

The Web Standards Project, y sus embajadores (International Liaison Group)

The Web Standards Project, ha creado un grupo, denominado International Liaison Group, ¿qué es exactamente?

El Grupo de Enlace Internacional (ILG en inglés) del WaSP (Web Standards Project) es un colectivo internacional de profesionales de internet que promueven el uso global de los estándares para asegurarnos una Internet igualitaria.

Web Standards Project International Liaison Group

¿Y cuáles son sus objetivos?

El WaSP ILG consiste en personas que viven y representan al mayor número de países posible para:

  • Discutir e informar al público sobre estándares Web y cuestiones de accesibilidad según se relacione con las prácticas y leyes en países y/o regiones.
  • Publicar información educativa multilingüe.
  • Ofrecer recursos sobre estándares web a través de vinculación como blogs, libros, artículos, presentaciones, código, diseño, visión y liderazgo.
  • Internacionalizar documentos relevantes y recursos para el uso público.
  • Animar y vitalizar la discusión internacional sobre la red.
  • Estudiar como es la red y como debería ser usada en un contexto global.

ILG Objectives

De momento el único representante en español, es Alex Vega, y de momento ha traducido el documento que presenta a este grupo.

Desde aquí… felicidades a Alex Vega 🙂

Categorías
CSS Diseño web Javascript

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)

Categorías
accesibilidad CSS Diseño web Web móvil

Navegando desde tres teléfonos móviles en un blog (2), resultados optimistas.

En el artículo anterior, Navegando desde tres teléfonos móviles en un blog (1), presentábamos un pequeño experimeto: navegar desde tres teléfonos móviles en esta bitácora. ¿Nuestra intención? Comprobar si los móviles seguían los estándares web y usaban una hoja de estilos apropiada para ellos, es decir media="handheld". Si esto era sí, todos los interesados en el desarrollo web para móviles tendríamos un motivo para alegrarnos: no haría falta hacer versiones distintas de una página web para ordenadores de sobremesa, y otra para pequeños dispositivos. En teoría, debería ser así. En la practica… no podemos extrapolar los resultados de este experimento a todos los teléfonos móviles, pero puede ser un indicio de las tendencias en los modelos más novedosos y los que están por venir.
Para demostrar los resultados de este pequeño experimento, vamos a incluir imágenes del log de los tres modelos al entrar en esta bitácora.

Nokia 6100

Éste es mi teléfono móvil, estoy contengo con él, pero entre sus virtudes no está precisamente la capacidad de navegar por internet. Éste teléfono móvil tiene capacidad de navegar por páginas XHTML, ya sea directamente o mediante el proxy WAP de Google.
Aún así, aquí podemos ver su huella en el log de esta bitácora. Si quieres ver el registro completo, pincha sobre la imagen.

Registro en el log del Nokia 6100 navegando por esta bitácora

Como podemos ver, este navegador no utiliza hoja de estilos, sólamente el código XHTML, y no de forma directa. Si amplias la imagen, podrás ver que se conecta a través de Google WAP Proxy/1.0, no directamente a la bitácora. El motivo es sencillo: si entramos en el blog a través de Google, usando un teléfono móvil de estas características, no nos muestra las páginas webs tal y como están diseñadas, fracciona el código en páginas que puede procesar este teléfono móvil, más o menos unos dos kilobytes.

Sony Ericsson K 300i

Anticipo el resultado, este teléfono móvil, sí reconoce la hoja de estilos de tipo media="handheld". Lo podemos ver en la siguiente imagen. Al igual que antes, si pinchas sobre la imágen, la podrás ver ampliada.

Registro en el log del Sony Ericsson K 300i navegando por esta bitácora

Podemos comprobar claramente que sí utiliza la hoja de estilos que le corresponde. Y además no tiene problemas en procesar un documento más bien extenso como una página de esta bitácora, algo más de 17 kilobytes, no está nada mal…
Además, en el poco tiempo que estuvimos navegando, pudimos comprobar que reconocía todos los estilos correctamente. Es cierto que eran muy básicos (colores y poco más), pero los reconocía. Además usando el navegador que tiene instalado por defecto. Teniendo en cuenta que este teléfono tiene una capacidad aproximada de unos 10 Megabytes, no tenemos porqué descartar que Opera saque a la luz un navegador para este teléfono (aunque de momento no son gratuitos).

Nokia 6630

De este teléfono esperábamos a priori bastante, es sin duda el más completo de los tres que utilizamos. Y al igual que en el teléfono anterior, también este teléfono móvil reconocía la hoja de estilos media="handheld" al navegar por esta bitácora. Aquí tenemos una imagen como prueba, y al igual que antes, pinchando sobre ella, podrás ver una imagen del rastro dejado en el log al navegar por algunas páginas de webposible.

Registro en el log del Nokia 6630 navegando por esta bitácora

Conclusión

Creo que los que tengamos algo de relación con el desarrollo web, si estamos trabajando con páginas maquetadas con capas, es muy recomendable usar una hoja de estilos para pequeños dispositivos (media="handheld"). En esta prueba, de tres teléfonos dos las reconocían, y la ventaja es evidente. Ya se que no es una muestra muy representantiva (y lo digo yo, con titulación universitaria de estadística, je je), pero como ya he dicho antes: se trata de una tendencia que se ha iniciado ahora, y puede imponerse en un futuro muy próximo.
Si además de incluir una hoja de estilos adaptada, también colocamos vínculos de navegación entre elemenos de la misma página, del tipo Saltar al contenido, Ir al buscador, Saltar a categorías,… mejor que mejor, ya que moverse dentro de una página grande con la pequeña pantalla de un teléfono móvil, resulta bastante complicado.
No resulta casualidad, pero cada vez que hablo en esta bitácora de teléfonos móviles, de una manera bastante directa, encuentro relación con la accesibilidad web. Y es que esto también es accesibilidad, poder acceder desde cualquier dispositivo conectado a internet. Y si encima lo hacemos sencillo, mejor que mejor.
Sería buena idea escribir un día de estos una especie de guía para hacer buenas hojas de estilos para handheld
¿Alguien quiere añadir algo más?
Actualización (2005/11/24): Otra muestra más, esta vez anónima, de cómo un teléfono móvil puede navegar por esta bitácora. Por casualidad revisando el log de las visitas, me encontré con la «huella» de un teléfono Motorola V600, visitando este blog. En el vínculo anterior puedes ir directamente a la imágen.
A ver si vamos encontrando más casos, je je.

Categorías
accesibilidad CSS Diseño web Web móvil

Navegando desde tres teléfonos móviles en un blog (1)

¿Qué ocurre cuando tres entusiastas empiezan a charlar sobre tecnología? Web semántica, accesibilidad, conexiones inalámbricas, diseño web, móviles, internet,…
No sé como será en otros casos, pero en este acabamos navegando todos en este humilde blog, y de forma satisfactoria (en mi caso es que soy bastante optimista, je je). Pero centrémonos en lo que nos interesa. Tenemos a tres personas con tres teléfonos móviles más o menos modernos. Para mantener el anonimato, utilizaremos sus iniciales, je je:

  • F. con un Nokia 6630
  • J. con un Sony Ericsson K 300i
  • G. (bueno, Gonzalo, que soy yo) con un Nokia 6100

Nuestro objetivo: comprobar la capacidad de navegación por internet de estos teléfonos móviles. ¿Web elegida? Esta misma que estás leyendo. ¿Características especiales de la web? Aparte de estar maquetada con capas, ninguna que no pueda hacer cualquiera: simplemente utiliza cuatro hojas de estilos distintas para diferentes dispositivos, que son:

  • Una hoja de estilos media="screen", para el uso más habitual de una web: visualización a través de un monitor. El nombre del fichero: style.css
  • Una hoja de estilos media="handheld" para dispositivos con un procesador modesto, y una pequeña pantalla, como por ejemplo una PDA, un teléfono móvil,… el nombre del fichero: estilopda.css
  • Una hoja de estilos media="print", para cuando se quiera imprimir un documento (básicamente, consiste en ocultar aquellos elementos que no nos hacen falta cuando leemos en papel, por ejemplo, menú de navegación, vínculos, etcétera). El nombre del fichero: estiloprint.css
  • Una hoja de estilos media="aural", para cuando algún internauta se acerca a este blog con un navegador parlante, o lector de pantalla. El nombre del fichero: estilosaural.css

La pregunta que rondaba en el ambiente: ¿Serán capaces los móviles de usar una hoja de estilos, y además la que les corresponde, al menos en teoría? Dicho de manera práctica: En el registro de visitas, ¿veríamos cómo se utiliza el fichero estilopda.css?
Igual que una mala serie de televisión traslada al siguiente episodio la conclusión narrativa de una o varias historias, en este mal blog haremos lo mismo. Dejaremos para más adelante (puede que luego, o mañana), la respuesta a las incógnitas que han conducido a escribir este pequeño artículo.
Hagan sus apuestas, digo… que podéis ir dejando vuestra sabia opinión en los comentarios, a ver quién acierta. No se vosotros, pero yo estoy intrigado (ya se que esto no es creíble, pero pretendo transmitiros mi entusiasmo con este pequeño experimento, je je).