Hace algún tiempo tocamos por encima unos cuantos scripts javascript que nos permitían crear atractivos tooltips para nuestros sitios web. Hoy ha aparecido la versión renovada y mejorada de uno de ellos: tooltip.js de Jonathan Weiss.
Esta versión introduce dos mejoras fundamentales:
- Sigue correctamente al ratón cuando usamos Firefox. Muy útil cuando usamos posicionamiento absoluto en nuestras hojas de estilo
- Gracias a Xabier Lepaul, ahora podemos crear tooltips de un texto existente. Esto nos permite, por ejemplo, crear tooltips para los atributos tittle
Puedes ver una demo o descargar el archivo tooltip.js del blog del autor.
tooltip.js - version 0.2
Via Ajaxian
Utilizar flash en nuestros sitios es siempre una elección controvertida, su incompatibilidad con ciertos SO, etiquetas que no funcionan en algunos navegadores, sus defectos en el campo de la accesibilidad y SEO…
SWFObject (anteriormente conocido como FlashObject) es un script Javascript que pretende disminuir tus dolores de cabeza. Este script puede detectar automáticamente el plugin en la mayoría de navegadores y está pensado para facilitar la tarea de embeber contenido Flash en nuestros sitios. Además es amistoso con los buscadores, degrada sin inconvenientes para navegadores sin javascript o flash, pude insertarse en páginas HTML y XHTML válidas (siempre que el XHTML se sirva como text/html) y será compatible con subsiguientes versiones de navegadores y plugins.
SWFObject: http://blog.deconcept.com/swfobject/
Edición:
Me recomiendan que os comente que el script creado por David y que podeis encontrar en: http://armonia.spiral-static.org/?2006/09/19/144-activar-contenido-embebido-con-javascript es una mejor alternativa a SWFObject.
Firebug, la popular extensión para Firefox que nos ayuda a editar, depurar y monitorizar CSS, HTML y Javascript, ha llegado a su versión 1.0 beta con una buena noticia adicional.
Durante un tiempo su creador, Joe Hewitt, barajó la posibilidad de convertir Firebug en un producto comercial pero, con el lanzamiento de la versión 1.0 beta nos ha sorprendido con una fantástica noticia: Firebug va a seguir siendo gratuito y de código abierto, adoptando para la versión 1.0 final la misma licencia triple MPL/GPL/LGPL que utiliza Firefox.
Además, a partir de ahora tendremos la posibilidad de disfrutar de las ventajas de Firebug cuando estemos depurando código en Opera, Safari o Internet Explorer gracias a Firebug Lite, una librería Javascript que te permitirá embeber una consola de Firebug en tus páginas.
Firebug: http://www.getfirebug.com
Firebug Lite: http://www.getfirebug.com/lite.html
Una forma interesante de darle un poco de vida a esas tablas que introducimos en nuestros sitios web para contener listados de, por ejemplo, productos. Con un poco de Prototype es francamente sencillo conseguir:
- Alternar el color de las filas
- Cambiar el color de fondo de la fila al pasar el ratón por encima
- Al hacer click en una columna se abre una ventana con información sobre la misma
La tabla que queremos mejorar es algo así:
- <table id="products">
- <tr>
- <th>product</th>
- <th>price</th>
- </tr>
- <tr id="1">
- <td>mouse</td>
- <td>12.34</td>
- </tr>
- <tr id="2">
- <td>printer</td>
- <td>23.45</td>
- </tr>
- <tr id="3">
- <td>screen</td>
- <td>34.21</td>
- </tr>
- <tr id="4">
- <td>USB stick</td>
- <td>1.23</td>
- </tr>
- <tr id="5">
- <td>keyboard</td>
- <td>2.34</td>
- </tr>
- </table>
Ahora colocamos el siguiente código Javascript en un archivo a parte, así podremos reutilizarlo y no hacer demasiado pesada la página con la tabla
- var ListTable = Class.create();
- ListTable.prototype = {
- initialize: function(tableId, path) {
- table = $(tableId);
- Element.addClassName(table, 'listTable');
- var odd = true;
- $A(table.getElementsByTagName('TR')).each(function(row){
- if(row.id !== ''){
- listRow = new ListRow(row, path, odd);
- odd = !odd;
- }
- });
- }
- };
-
- var ListRow = Class.create();
- ListRow.prototype = {
- initialize: function(row, path, odd) {
- this.row = row;
- this.path = path;
- if(odd) {
- this.addBehavior('ltOdd', 'ltOddOver');
- } else{
- this.addBehavior('ltEven', 'ltEvenOver');
- }
- },
- addBehavior: function(clazz, classOver) {
- Element.addClassName(this.row, clazz);
- this.classOver = classOver;
- this.row.onmouseover = this.handleOnMouseOver.bindAsEventListener(this);
- this.row.onmouseout = this.handleOnMouseOut.bindAsEventListener(this);
- this.row.onclick = this.handleOnClick.bindAsEventListener(this);
- },
- handleOnClick: function(event) {
- location.href = this.path + '?id=' + this.row.id;
- },
- handleOnMouseOver: function(event) {
- Element.addClassName(this.row, this.classOver);
- },
- handleOnMouseOut: function(event) {
- Element.removeClassName(this.row, this.classOver);
- }
- };
Añades el archivo prototype.js al directorio del javascript y listo.
Toda la explicación del «truco» en el artículo original, con un ejemplo para descargar de regalo: Enhance list tables with Prototype Javascript Framework
Open-jACOB Draw2D es una librería Javascript que te permite crear gráficos y diagramas. Su interfaz te permitirá dibujarlos directamente desde tu navegador, sin necesidad de instalar ningún software adicional.
Open-jACOB Draw2D es el componente de dibujo de Open-jACOB un editor de Workflow al puro estilo de Visio con la finalidad de probar que realmente puede hacerse totalmente online y sin necesidad de instalar plugins.
Open-jACOB Draw2D: http://www.openjacob.org/draw2d.html
Demo Interactiva: http://www.openjacob.org/draw2d/simple_interactive/index.html
Open-jACOB: http://www.openjacob.org/index.html
Vía Ajaxian
En Frequency Decoder han creado un sencillo Javascript que nos permite ofrecer a nuestros visitantes pequeñas capturas de pantalla de los sitios a los que les llevarán nuestros enlaces, utilizando el servicio de Websnapr.
Integrarlo en nuestros sitios es, incluso más sencillo que utilizar un plugin, tan simple como añadir una referencia a los archivos websnapr.js y websnapr.css en la cabecera de nuestros documentos
- <style type="text/css" media="screen">@import "/the/path/to/websnapr.css";</style>
- <script type="text/javascript" src="/the/path/to/websnapr.js"></script>
Y editar la línea 22 de websnapr.js para que refleje nuestra ruta a las imágenes
- // Line 22
- baseURI: "./",
Podéis ver un ejemplo en El Buscador de Webmaster Libre
Link Preview v2:
http://www.frequency-decoder.com/2006/10/25/link-preview-v2
SWFUpload es una pequeña librería javascript/swf que te permitirá crear agradables diálogos de subida de archivos para tus aplicaciones web.
Características:
- Muestra sólo los tipos de archivo seleccionados en el diálogo
- Permite subir múltiples archivos a la vez presionando ctrl/shift-seleccion
- Activa funciones en Javascript al iniciar, cancelar, en progreso y finalizado
- Obtiene la información/tamaño del archivo antes de iniciar la subida
- Da estilo a los botones del modo que prefieras
- Crea barras de progreso/información usando XHTML y CSS válido
- Sin recargas de página, los archivos se muestran según terminan de subirse
- Funciona en todas las plataformas con soporte para Flash ( está hecho en Flash 8 )
- Se degrada a un formulario de upload HTML para navegadores sin Javascript o Flash
SWFUpload: http://labb.dev.mammon.se/swfupload/
Via Ajaxian
Una de las formas más sencillas de transmitir la «vida» de un sitio web es ofrecer a nuestros visitantes algo nuevo en cada una de sus visitas. Con este sencillo Javascript podremos servir imágenes aleatorias, por ejemplo la cabecera que cambiará con cada carga de página.
- <script language="JavaScript" type="text/javascript">
- <!--
- // La función devuelve un número entre 0 y "nums - 1"
- function getRandom(nums)
- {
- var ranNum= Math.round(Math.random()*nums);
- return ranNum;
- }
-
- // Nos dice cuantas imágenes tenemos
- var numberOfImages = 5;
- var randomNumber = getRandom(numberOfImages);
-
- // Creamos un Array con los nombres de las imagenes, introduce tantas como necesites pero recuerda actualizar también la variable numberOfImages
- var image = new Array(numberOfImages);
- image[0]="imagen1.gif";
- image[1]="imagen2.gif";
- image[2]="imagen3.gif";
- image[3]="imagen4.gif";
- image[4]="imagen5.gif";
-
- // Escribimos la etiqueta img con una imagen aleatoria
- document.write("<img xsrc='" + image[randomNumber] + "' />");
-
- --></script>
Se trata de un script muy sencillo que aprovecha una función que nos devuelve números de forma aleatoria. Es, por tanto, importante que todas nuestras imágenes estén renombradas según un patrón: imagen*.gif, por ejemplo.
El otro día nos sorprendíamos con la librería Animator.js, del que se hacía eco Andrés Nieto que nos permitía crear excelentes efectos de animación de elementos de una página con CSS y Javascript.
Hoy descubro MochiKit.Animator, una versión totalmente renovada y vectorizada de la librería de Bernard Sumption, que genera complejas animaciones con un par de líneas de código y permite unos efectos realmente impresionantes.
MochiKit.Animator Demo: http://gr.ayre.st/~grayrest/animator/animator.html
Seguro que alguna vez has visto el tipico tour guiado por las características de un sitio web o, incluso, el archiconocido paseo por Windows XP.
Amberjack es una ligera librería javascript de Código Abierto que te permitirá crear uno de estos paseos con el que explicar a tus visitantes lo que puedes ofrecerles y como interactuar con el sitio, con el subsiguiente aumento en la usabilidad del mismo.
Para crear tu «tour» no tendrás que aprender demasiado ya que cuenta con un Asistente que te guiará paso a paso en la creación del mismo.
En cuanto a posibilidades de personalización, dispones de algunos skins listos para descargar en el sitio y podrás crear los tuyos propios editando los parametros de la hoja de estilo CSS.
Yo ya tengo un par de ideas para darle uso ¿y vosotros?
Amberjack: http://amberjack.org
Via Ajaxian
