Trabajar con CSS (hojas de estilo) es algo que, al menos para mí, se me hace muy complicado. Es una gran herramienta de diseño, y totalmente aconsejable para realizar una buena aplicación web, pero que tiene muchos conceptos y es difícil de dominar.

En Ateneu Popular se han currado una chuleta con los conceptos básicos que, según ellos:

se explican de manera concreta las propiedades básicas que se pueden utilizar en una hoja de estilos, se muestran sus valores y se refleja un ejemplo de aplicación.

Sin lugar a dudas una gran ayuda para tenerlo siempre a mano.

• Fuente: Ateneu Popular.
• Descargar.

Leo en el blog de anieto una propuesta que no deja de ser curiosa, y hoy en día con internet como vía de comunicación, cualquier idea llega a la larga cola. No me extrañaría comprobar que el próximo día 9 de abril alguna web/blog/site se desnuda, se despoja de sus estilos.

Esta iniciativa, que ya va por su tercera edición, promueve el cumplimiento de los estándares y por ende, la correcta separación entre representación y contenido. ¡Como debe de ser!. Hay que demostrar que las webs bien hechas se puede seguir visitando aunque carezcan de estilos, como en los primeros años de internet, con aquellos navegadores en modo texto,…

En este enlace os explican como hacerlo en vuestro blog de Wordpress. Alfonso y yo lo meditaremos a ver que hacemos el próximo miércoles.

Investigando como se podría realizar la navegación por imágenes de una manera atractiva y cómoda encontramos el llamado efecto lightbox. Este efecto 2.0 desarrollado por Lokesh Dhakar permite mostrar pop-ups con imágenes y grupos de imágenes de una manera bastante atractiva. Seguimos analizando este efecto, cuando encontramos una mejora llamada ’Ajax lightbox’, creado por Ignacio G. en su blog hellogoogle.com la cual conseguía, además de manejar imágenes, cargar en el pop-up ficheros externos. Este efecto nos permitiría enseñar en estos pop-ups pequeños formularios, en tiempo de ejecución, lo cual haría mucho más ágil la navegación.
Según su propio autor, “Ajax Lightbox es un script no intrusivo que permite mostrar una
ventana por encima del contenido actual de una página. El término no intrusivo se utiliza para denominar al código javascript que no se ejecuta inmerso en el HTML si no que se aplica de manera indirecta una vez cargado el documento, permitiendo conseguir independizar completamente. ’Contenido, Presentación y Comportamiento’”.

Se puede visualizar tres tipos diferentes de ventanas:

• Contenido dinámico extraído vía Ajax de un fichero.
• Imágenes individuales.
• Grupos de imágenes.

La implementación que se ha realizado empleando esta librería ha sido testeada en las últimas versiones de los navegadores más extendidos: IE/FireFox/Opera.

Aquí podeis ver un ejemplo de como queda una imagen con este efecto, que al pulsar sobre ella será, en sí misma, un ejemplo:

Y como extra comentar que existe un plugin para wordpress que usa estás librerías para conseguir este efecto en tu blog. Lo podeis descargar de aquí.

La instalación ya sabeis, descargar el plugin, descomprimirlo y subirlo al directorio wp-content/plugins, y activarlo.

Tutorial en inglés de lightbox 2.0.

Tutorial traducido de lightbox 2.0.

Tutorial Ajax Lightbox.