ExplorerCanvas: Dibuja en la web
Impresionante el proyecto que se han marcado los del equipo de WHAT (con colaboradores de Google):
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.
Imagen al azar para nuestra web
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:
<img src="http://www.paginaweb.com/img/mz/imagen<?php echo rand(1,3); ?>.jpg" alt="Pagina web">
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:
<script type="text/javascript">
num = Math.round(Math.random()*3)
document.write('<img src="http://www.paginaweb.com/img/imagen' + num + '.jpg" alt="Pagina web">');
</script>
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:
<div id="logo"></div>
En el fichero CSS externo:
div#logo {
width : 500px;
height : 180px;
background : url(http://www.paginaweb.com/img/imagen1.jpg);
}
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):
<script type="text/javascript">
num = Math.round(Math.random()*3)
document.write('<style type="text/css">');
document.write('div#logo { background: url(http://www.paginaweb.com/img/imagen' + num + '.jpg)!important }');
document.write('</style>');
</script>
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.
Examinator: Accesibilidad web
En Accesible de la mano de Carlos Benavidez podrás encontrar un servicio bastante interesante llamado Examinator, un sistema que trata de evaluar la accesibilidad de tu sitio web.
La accesibilidad indica la facilidad con la que algo puede ser usado, visitado o accedido en general por todas las personas, especialmente por aquellas que poseen algún tipo de discapacidad.
Fuente: Wikipedia.
Está bastante bien, puesto que examinator hace un amplio repaso a todas las características que puedan aportar problemas de accesibilidad a los usuarios de tu página, así como aquellas opciones que tienes correctamente fabricadas, y brindan una excelente experiencia al usuario.
Al entrar la dirección del sitio web a examinar, nos mostrará la puntuación obtenida, informando en grupos con pequeños bloques calificados con Excelente, Muy bien, regular o mal.
Emezeta se mantiene en un humilde aprobado con un 5.1, ya que reconozco que hay varios puntos que aún necesito pulir. También creo que debido al Adsense de Google, obtengo varios puntos negativos.
Una excelente herramienta a tener en cuenta.
HTML con XHTML y CSS
El pasado viernes, aprovechando el fin de los examenes y que tenía la biblioteca de la universidad cerca, decidí echarle un ojo a algunos libros sobre HTML y derivados.
En principio encontré tres libros que me llamaron la atención, entre ellos el que finalmente tomé prestado, HTML con XHTML y CSS de Elizabeth Castro (Anaya Multimedia):
Durante esta semana he podido echarle un breve vistazo y parece bastante interesante. El problema es que la mayoría de los libros que encuentro sobre diseño web apenas se basan en software como Dreamweaver, FrontPage o similares, y es lógico, es lo que se vende. Pero mi verdadera intención era encontrar un libro en el que se tratase el HTML como lo que es, un lenguaje de etiquetado.
En principio elegí este libro, porque era uno de los más actuales (concretamente del 2003) ya que no era cuestión de sacar un libro que nos contara las últimas mejoras del Mosaic o los huevos de pascua del Netscape.
Considero que el contenido está muy completo y bastante actualizado. Incluye una breve introducción a la la guerra de los navegadores y la importancia de los estándares web y ya desde ahí, parte a temas más especificos del lenguaje.
Me sorprendió gratamente que el libro toca temas interesantes como las distintas compresiones entre formatos gráficos como GIF, JPG o PNG, el uso de UTF-8 en tus documentos web, la idea a seguir de la separación de la presentación y el contenido, ligeros usos de aplicaciones como Adobe Photoshop, Generic (Simulador de navegación WML: dispositivos moviles) u otros. Incluso hace mención a la grandiosa web A list apart, especialistas en diseño CSS y otros.
En definitiva, un buen libro para comenzar y/o mejorar tus conocimientos sobre (X)HTML y desarrollar páginas con contenido de calidad.
