Como ya comentamos el año pasado, este año también hay el CSS Naked Day. ¿Y en qué consiste? Pues es una iniciativa que surge de Dustin Diaz y que ya va por su cuarta edición.

Este año hemos querido participar y, como estáis viendo si habéis entrado en el blog (si nos leeis por algún lector de rss entrad para comprobarlo) estamos desnuditos, como la red nos trajo al mundo, sin nada que esconder.

El fin de todo ésto es defender los estándares web y que todos los desarrolladores los respetemos.

En el blog de Andrés Nieto podréis encontrar más información, así como algún que otro plugin para wordpress con el que nuestro blog se desnudará solito el día indicado.

Últimamente estoy intentando profundizar y aprender todo lo posible sobre el diseño en general y el web en particular. Es mi punto más flojo, algo que se me da fatal pero que aún así me encanta y me gustaría dominar al menos en un nivel básico.

Entre las cosas que he aprendido está CSS Sprites, que no es más que una técnica por la cual podemos tener en un solo archivo diferentes imágenes y, mediante CSS, elegir la que nos interese en cada uno de los casos. Esto es realmente útil ya que si nuestro sitio hace uso de varias imágenes, con esta técnica tan solo tendríamos que cargar una en vez de todas y cada una de ellas.

¿Y para que se puede usar? Pues el ejemplo más claro es esas imágenes las cuales, al pasar el ratón por encima de ellas, cambian de color o forma. Esto habitualmente se hace teniendo dos imágenes y cargando una u otra en función de la posición del cursor. Dependiendo de la velocidad del servidor y del tamaño de la imagen puede que haya un retraso entre situar el cursor y que se cambie, lo cual no solo queda mal si no que puede confundir al usuario. Si lo hacemos con CSS Sprites ya tendríamos la imagen precargada y al pasar el cursor tan solo cambiaría, por decirlo de alguna forma, el foco a donde apuntar.

Pese a todo no es una técnica del todo sencilla, ya que tenemos que jugar con las coordenadas de la imagen para en todo momento mostrar lo que realmente queremos. Esto se realiza con el atributo background-position y que en el ejemplo que realizan en Cristalab comprendereis mejor su funcionamiento.

Pero también quiero compartir con vosotros una ayudita, y se trata de CSS Sprites Genrator, una herramienta web a la cual le podemos pasar las diferentes imagenes que queramos “meter” en una y él solito lo hará y nos dará no solo una imagen resultado (en jpg y png) si no el código css necesario para “capturar” cada una de ellas.

¿A que ya no os parece tan complicado?

Uno de mis (muchos) puntos débiles en esto de las aplicaciones web es todo lo relacionado con el diseño, y es algo que me he propuesto mejorar y aprender.

Buscando diferentes tutoriales e información me he topado con un blog que reune mucho de lo que necesito encontrar. Se trata de CSS Blog, que como su nombre indica es un blog que nos hablará de este maravilloso mundo de las hojas de estilo.

Tiene desde diferentes trucos, ejemplos de cosas maravillosas que podemos hacer con CSS, diferentes tutoriales, e incluso nos lo dividen según el nivel que tengamos.

Muchas de las cosas que enseñan ya me las he guardado, y la pondremos en práctica en el próximo (y esperado) diseño del blog.

Leyendo el título de la entrada de hoy no veréis nada nuevo ni nada digno para ser publicado en este gran blog, ¿verdad?

Pues aún hay cosas que, al menos a mí, me puede sorprender de este buen teléfono llamado iPhone. Todos sabemos que este aparato sirve para navegar por la red gracias a Safari, y que además, llama y todo. Quizás lo que no sabemos es que se pueden unir ambas funciones.

Si tienes un blog o una web, y queréis que vuestros lectores poseedores de un iPhone os llame con solo pulsar un enlace, tan solo tenéis que poner esta línea de código:

<a href=”tel:666666666″>Llamadme</a>

Y ya tendréis creado un enlace para que os llamen. Útil, rápido e indoloro.

Fuente: Ayuda Wordpress.

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.