LiveValidation es una utilidad en Javascript que permite validar los campos o entradas de textos de los formularios HTML (textarea, input text, input check) en tiempo real. Tiene interesantes características:

• Verifica que un campo no esté vacio.
• Verifica que el texto ingresado corresponda a uno determinado. Si usted exige que el usuario escriba "hola" entonces el validador actuará en función de ello, independientemente de si es con mayúsculas o minúsculas.
• Verifica que cierta palabra aparezca en una expresion ingresada.
  
• Verifica que el texto ingresado solo contenga números, números enteros ó un número específico.
• Verifica que el texto ingresado solo contenga números, pero que éste sea mayor ó menor que cierto valor, ó también verifica que el número corresponda a un valor entre un rango específico.
• Verifica la longitud de caracteres del texto ingresado, puede ser mayor ó menor a cierto valor específico, ó corresponda a un rango específico.
• Verifica que ciertas expresiones ó texto este incluido ó excluido del texto ingresado.
• Verifica que un checkbox este clickeado ó no.
• Verifica que contraseña y confirmanción coincidan (por ejemplo para un formulario de registro.)
• Verifica la estructura de un e-mail (tunickname@servidor.xxx)
• Finalmente todo lo descrito anteriormente lo puede combinar para obtener un validador avanzado.
• Entre otras características muy interesantes.

Cómo usarlo

En la parte del head, agrega el archivo javascript, esto dependerá del tipo de archivo que descarges... en este caso usamos en standalone.

<script type="text/javascript" src="livevalidation_standalone.compressed.js"></script>

Luego dentro del body en los campos ó entradas de texto que desees validar, llama a los métodos necesarios. En este ejemplo estamos validando que el campo cuyo id "f1" no quede en blanco.

<input id="f1" type="text">
<script type="text/javascript">
  var f1 = new LiveValidation('f1');
  f1.add(Validate.Presence);
</script>  

En la sección ejemplos del LiveValidation puede encontrar otras formas de uso.

Enlaces | LiveValidation, Documentación

lazierLoad, es una utilidad hecha en Javascript que funciona con Prototype, que tiene como función cargar las imágenes de una página web mientras nos desplazamos por ella. Supongamos que tenemos una serie de 15 imágenes en una página web. Con lazierLoad, solo se cargarán las n primeras imágenes que alcance a ver el usuario en su monitor. Mientras el usuario se desplaza por la página las imágenes se irán cargando. Nada mal la idea!  Dejemos que una demostración de esta utilidad nos diga todo.

Cómo usarlo

Necesitas una página con varias imágenes y colocar esto en la parte de head. 

<script type="text/javascript" src="js/lib/prototype.js"></script>
<script type="text/javascript" src="js/bramus/lazierLoad.js"></script>

Nota: lazierLoad necesita de Prototype 1.6.0 r0 ó superior para un correcto funcionamiento. 

Enlaces | lazierLoad

Aquí una lista de plugins, o pequeñas utilidades, desarrolladas con MooTools. 

1. Autocompleter : el famoso autocompleto dentro de cajas de texto. [Documentación]

2. FancyUpload : mediante el uso de swf y ajax podemos subir archivos de manera interactiva. [Documentación]

3. HistoryManager : mantiene un historial de todos tus movimientos en cierta página web. [Documentación]

4. SqueezeBox : ventanas flotantes que pueden contener diversos elementos (textos, páginas web, imágenes).

5. LiveGrid : pequeño y rápido Listador de elementos (grid). Muestra elementos en forma horizontal y por bloques.

6. SimpleTabs : Tabs usando Ajax.

7. ReMooz : visualizador de imágenes, muestra un efecto de "zoom in" cuando hacemos clic en una imágen.

Vía | digi.táral

La propiedad CSS text-overflow, reemplaza los caracteres finales de una cadena de texto por puntos suspensivos si esta supera el ancho del elemento contenedor (p, div, span, etc). Con este ejemplo visual se entenderá mejor.

Internet Explorer viene con esta interesante característica, pero desafortunadamente no es estándar y no es soportado por Firefox, Opera y otros navegadores (en la versión CSS 3, ya es estándar está propiedad). Así que en el blog ruzee.com encontramos una solución a esto usando JavaScript. Creando un clase ellipsis y aplicándolo a los elementos que deseamos. Ejemplo:

.w2 { width:300px; } 

 <div class="w2">
  <h3 class="ellipsis">
    This is another heading in a wider container
  </h3>
  <p>And some more text that is long, long, long, and wraps around, cool!</p>
</div>

En el ejemplo, apreciamos el estilo .w2 con ancho de 300px. Si el texto del elemento <h3> supera la longitud de 300px, mostrará puntos suspensivos (...) como caracteres finales, pues usamos la clase ellipsis; pero no aplicará al texto del elemento <p>.

Enlaces | Demo, Descarga [ellipsis.js]

En el blog de Ryan Scherf encontre un script que hace uso de las librerías prototype y script.aculo.us para generar el efecto de drag & drop sobre achivos que deseamos descargar.

Ver demo

ThickBox es una pequeña utilidad (hecha con JavaScript y la librería jQuery) que tiene como función ser una ventana modal de múltiple propósito: mostrar una ó un grupo de imágenes, contenido texto y también contenido generado con Ajax.

Cómo usarlo

Descarga la librería jQuery y la utilidad Thickbox

<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>

También hay que incluir la hoja de estilos, que proporciona ThickBox

<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />

En los ejemplos que proporciona la página del ThickBox podemos aprender las diversas formas de usarlo.

Magic Image Rotation es una pequeña utilidad que muestra una serie de imágenes y las rota cada n segundos, tal como una diapositiva de imágenes. Su característica sobresaliente es que cada imágen que se muestra puede tener un enlace o link independiente del resto de imágenes.

Cómo usarlo 

Tendremos que modificar el archivo banner.js para agregar la ruta de las imágenes, los enlaces a donde apuntan y un título. También podemos modificar el tiempo que se mostrará cada imagen.

var BannerLoad =  
[ 
['mienlace.htm',     'graphics/one.jpg',     'Blue Flower'            ], 
['http://www.ribosomatic.com/',     'graphics/two.jpg',     'Distant Rainstorm'        ], 
['index.htm',     'graphics/three.jpg',     'Raindrops on a Leaf'    ], 
['index.htm',     'graphics/four.jpg',     'Jungle Dream'            ], 
['index.htm',     'graphics/five.jpg',     'Daisies'                ], 
['index.htm',     'graphics/six.jpg',     'Sunflowers'            ] 
]; 

En la parte HTML llamamos al archivo Javascript y especificar un div cuyo id es banner (esto también se puede modificar en el archivo banner.js).

<script src="banner.js" type="text/javascript"> 
</script> 
 <div id="banner"></div>

 Enlaces | Demo y Descarga

Está pequeña utilidad llamada df Smooth Scroll hecha en JavaScript, nos permite desplazarnos entre los link que apuntan a la misma página (anchor).

Cómo usarlo

<script type="text/javascript" src="smooth.pack.js"></script>

En la parte html

<a name="top" href="#footer">IR ABAJO</a>
<p>Contenido por aqui...</p>
<a name="footer" href="#top">IR ARRIBA</a>
<p>Mas contenido por aqui...</p>

El resultado será un desplazamiento con estilo entre los enlaces internos gracias a que se usa JavaScript.

Enlaces | Demo 

Vía Ajaxian, una pequeña presentacion acerca del uso de jQuery. Explica selectores CSS, manejo de eventos, Ajax entre otros.

El autor de Dragan's Blog ha desarrollado una librería llamada canvas3DGraph.js que nos permite crear / mostrar gráficos 3D en una página HTML. Él nos explica que la etiqueta <canvas> no es soportada por IE (cuando no!). Así que teniendo en cuenta eso se ayudo de la librería excanvas.js para mostrar o trabajar sobre IE. Sobre Firefox y Safari los gráficos hechos con canvas van de maravilla (10 veces más rápido que IE).

El la página del proyecto podemos encontrar un ejemplo en tiempo real e información sobre como usar las librerías en nuestra páginas web. 

Enlaces | ¿Qué es canvas?