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
CSS recomendaciones W3C

Guías de referencia del W3C sobre XHTML y CSS

Seguro que todos los sabéis desde hace meses, pero acabo de descubrir en la Oficina española del W3C, un par de Guías de Referencia Rápida muy recomendables:

Para tenerlas en nuestros favoritos, impreso e incluso en una camiseta! 🙂

Categorías
CSS recomendaciones W3C

Diez años de CSS

Lo podemos leer en el archivo de noticias del W3C: W3C Celebrates Ten Years with Style. Diez años han pasado desde que el W3C publicó Cascading Style Sheets, level 1. Podemos ver la página especial que conmemora el aniversario, haciendo un pequeño resumen de la historia de CSS (10 Years of CSS).
Diez años, como pasa el tiempo 🙂

Categorías
CSS Web móvil

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.

Categorías
CSS Personales

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 🙂