CSS Viewer es una impresionante extension para nuestro firefox realizada por Nicolas Huon que nos permite saber de un modo totalmente visual los valores de los atributos CSS de los elementos que marquemos con el cursor del ratón.

Realmente útil y cómodo para todos aquellos diseñadores web y/o interesados en la materia.

Las páginas webs en realidad están formadas por código: HTML, CSS, XML, Javascript, etc... Existen unas recomendaciones realizadas por la W3C que indican como debe estar construido un código correcto para tener una experiencia satisfactoria para el mayor número de usuarios (incluyendo usuarios con lectores de pantalla, PDA, móviles WAP , etc...). Hasta aquí podríamos hablar perfectamente de usuarios que siguen los estandares y usuarios que no los siguen. Pero la cosa no es tan bonita como la pintan. Diseñadores web y usuarios más allegados sabrán de que hablo.

Existe una amplia variedad de navegadores donde elegir, pero una gran mayoría de ellos, aún leyendo una página con código HTML, CSS, etc. estándar no sería correctamente interpretado, por la razón de que el navegador no interpreta el lenguaje de forma correcta.

Para ello, los chicos de Web Standards han realizado un «examen» para navegadores web llamado Acid2 Browser Test.

El test se basa en mostrar una simple imagen:

Pero en realidad, esa imagen no es tal, sino que se construye siguiendo una serie de códigos (algo rebuscados eso si) con diferentes lenguajes, comprobando así si el navegador sigue correctamente los estándares. Usan técnicas tan interesantes como selectores CSS, pseudoclases, etiquetas con nombres inválidos (para comprobar si el navegador los ignora como debería o los pasa por alto), etc.

En definitiva, en cada navegador se podrá comprobar el grado de efectividad que tiene mostrando páginas web observando simplemente la fidelidad con el dibujo original. Es ideal puesto que los usuarios llanos o sin conocimientos de dicho código, pueden hacerse una idea a como tratan una web los diferentes navegadores:

Muchos se darán cuenta ahora porque criticamos tanto al Internet Explorer y sucedáneos.

Se rumorea que la beta del Opera en su versión 9 aprueba el test correctamente, al igual que el Konqueror 3.5 y el Safari 2.0.2.

Impresionante el proyecto que se han marcado los del equipo de WHAT (con colaboradores de Google):

Canvascape 3D Walker.

Para ello usan solamente el lenguaje Javascript, con la ayuda de la etiqueta canvas, destinada a incluir gráficos, e implementada en navegadores actuales como Firefox 1.5, Opera o Safari.

Un ejemplo de la potencia que se puede obtener con las librerias ExplorerCanvas, donde Glen Murphy nos explica su funcionamiento.

Vía Google Dirson.

Muchas personas me han preguntado como pueden hacer una cabecera de logotipo al estilo de Emezeta.com que vaya variando al azar, para mostrar una distinta en cada carga de la página.

Como ya es hora de dejar de hacerse el remolón, voy a intentar explicarlo de forma sencilla para que todos aquellos sin conocimientos de programación puedan usarlo en su web sin problemas.

Lo primero es tener las imagenes preparadas. Después de diseñarlas las ubicaremos todas en nuestra página web con un mismo nombre, pero variando el número del final: imagen1.jpg, imagen2.jpg, imagen3.jpg... Asi pues, éstas imagenes estarán disponibles en una hipotética dirección de nuestra web: http://www.paginaweb.com/img/imagenX.jpg.

PHP

Ya tenemos todo preparado, solo nos falta realizar el código para cargarlas aleatoriamente. El lenguaje HTML no nos brinda ninguna posibilidad para hacer esto, asi que necesitaremos otro lenguaje. El ideal -que la mayoría de servidores lo soportan- es el lenguaje PHP. El código sería algo tan sencillo como incluir el siguiente trozo de HTML:

Con este código estamos consiguiendo que se cargue una imagen al azar entre 1 y 3, es decir, imagen1.jpg, imagen2.jpg o imagen3.jpg. Solo debemos incrementar este número al de imagenes que tengamos.

Javascript

Pero puede ocurrir que nuestro servidor sea más decentito, y no tenga soporte de PHP. No hay problema, el javascript puede hacernos salir del paso ya que es un lenguaje a nivel de cliente y no de servidor como PHP, lo que significa que todo usuario con un navegador moderno lo podrá interpretar. Bastaría con incluir el siguiente código en la parte donde queremos ubicar la imagen:

Este código realizado en Javascript, hace lo mismo que el anterior, con alguna diferencia aparente pero mismo efecto.

CSS

Por último, puede ocurrir que nosotros la imagen que queremos variar la tengamos incluida en un fichero CSS externo (hojas de estilo). En este caso tendremos algo parecido a esto:

En el fichero HTML:

En el fichero CSS externo:

En este caso lo que haremos es combinar una de las dos opciones anteriores, pero con algunos cambios. Lo primero será buscar en el código HTML la sección de cabecera, (entre los tags head):

Este último ejemplo -el más complejo- lo que hace es sobreescribir la hoja de estilo externa, generando automáticamente por javascript el código al azar necesario. Habría que andar cuidadosos con el nombre de la capa div (en este caso logo) que quizás se llame de otra forma, no sea una capa sino otro elemento, etc...

Espero que así haya echado una mano y sirva de ayuda a todos aquellos que le haya interesado el tema de colocar una imagen al azar en nuestra página web.