JavaScript
Ethan Marcotte había publicado en ALA un artículo sobre Grids fluidos (ancho no fijo), los cuales no quedaban muy bien si introducíamos imágenes dentro de ellos. Por defecto, una imagen mantiene su tamaño dado, el que puede ser de 500px, 100px u 800px; pero ¿cómo podemos hacer para que la imagen se adapte a cualquier ancho automáticamente?
El ha publicado un pequeño script que crea imágenes fluidas. Resumiendo, este script analiza nuestra página web y cambia las imágenes por un GIF transparente, y le aplica la propiedad AlphaImageLoader a cada una. Luego, cuando la ventana es redimensionada, el script automáticamente recalcula proporcionalmente el alto y ancho de las imágenes, y las redimensiona. Lo podemos ver en acción desde el siguiente enlace.
Demo | Fluid Images
Descargar | Fluid Images (JavaScript)
Vía | webappers
jQuery Menu es una gran aplicación que nos ayuda a crear menús desplegables con variados themes y estilos fácilmente. Transforma una lista desordenada de links en menús y sub-menús desplegables con fabulosos diseños y efectos.
El script nos permite cambiar la apariencia del menú de manera muy sencilla, ya que utiliza ThemeRoller, con lo que podemos cambiar el tema del menú con solo hacer click o crear nuestros temas rápidamente.
Cuando una lista forma parte de otra lista, jQuery Menu por defecto crea un menú al estilo iPod (¡genial!). Además, utiliza los atributos de ARIA (Accessible Rich Internet Applications Suite).
Requiere jQuery y jQuery UI
Demo y descarga| jQuery Menu
Vía | webresourcesdepot
Newsletter Module es un script que nos permite manejar boletines de noticias. Con este script podemos gestionar direcciones de correo electrónico, crear categorías, configurar plantillas, adjuntar archivos y además goza de una buena documentación.
Newsletter Module es un script construido con PHP y JQuery, que mediante su inteface sencilla, nos permite:
- Crear listas de correos organizadas por categorías
- Enviar emails a cualquier email o categoría seleccionada
- Ver la vista previa de los mensajes antes de enviarlos
- Utiliza 1 archivo PHP y viene con un archivo .SQL para crear las tablas en MySQL
Ahora bien, como el script es utilizado únicamente en la interfaz de administración. Debemos crear una interfaz para los usuarios que quieran suscribirse al newsletter insertando sus correos a las categorías seleccionadas (Ver demo).
Descargar | Newsletter Module
Vía | tutsplus
En este post vamos a comentar dos correctores ortográficos de formularios HTML en español tanto para campos de texto como para textareas, listos para utilizarlos en nuestros proyectos web con solo añadir unas pocas líneas de código HTML y JavaScript.
Spellify
Spellify es un corrector ortográfico basado en script.aculo.us y creado por Nikola Kocic, que utiliza el motor de corrección ortográfica de Google en distintos campos de un formulario. Spellify también se puede configurar en diferentes idiomas (en spellify.js podemos obtener más información acerca de los ajustes de idioma). Spellify requiere:
- PHP 4 + biblioteca CURL instalada (PHP 4.4.6 o superior)
- Script.aculo.us 1.8.0 (sólo effects.js y scriptaculous.js son necesarios)
- Framework JavaScript Prototype 1.6.0
Para instalar Spellify en una página web hay que añadir spellify.js, prototype.js y scriptaculous.js entre las etiquetas <head> de la página HTML:
<script src="spellify/prototype.js" type="text/javascript"></script>
<script src="spellify/scriptaculous.js" type="text/javascript"></script>
<script src="spellify/spellify.js" type="text/javascript"></script>… Y copiar unas líneas de código HTML que aparecen en el paso 3 de esta página, cómo esto:
<input type="text" id="search" name="search"/>
<input type="text" id="city" name="city"/>De esta manera, todos los campos será chequeados cuando un usuario tipee una palabra dentro. Spellify puede ignorar un campo de texto añadiendo una clase con el atributo spellify_ignore. Por ejemplo, si queremos ignorar el campo “city” usamos este código:
<input type="text" id="city" name="city" class="spellify_ignore" />Demos una mirada a la página oficial de spellify para ver el ejemplo en línea.
GoogieSpell
GoogieSpell es un corrector ortográfico tipo Gmail que podemos utilizarlo en nuestras aplicaciones. Soporta 27 idiomas y ha sido testeado en usarlo en IE 5.5, IE 6.0, IE 7, FF 1.0+, Safari, Opera y otros; es extensible y fácil de instalar. Está basado en Ajax, por lo que no es necesario recargar la página. Es liviano, pesa alrededor de 50KB. Está bien documentado y con GoogieSpell Multiple podemos implementar el corrector ortográfico en multiples campos de texto al mismo tiempo. Podemos darle una mirada aquí tanto a la demo como a su código fuente.
Vía | woork
Si estas familiarizado con del.icio.us y haz probado el sistema de autosugerencias ajax que utiliza para añadir tags a los enlaces, podemos lograr ese mismo efecto utilizando jQuery tag suggestion, un plugin de jQuery. Este plugin ha sido creado por Remy Sharp y ha sido probado en IE 7, Firefox 2, Safari 3 y Opera 9
Demo | jQuery tag suggestion
Simpletip, es un plugin de jQuery que nos permite crear tooltips flexibles. Estos tooltips se pueden colocar a cualquier elemento y ser, fácilmente, diseñados (tanto en presentación como posición) con CSS.
Los tooltips pueden ser estáticos, dinámicos o cargados vía Ajax. Aunque, se podría realizar una combinación de efectos para obtener un resultado más atractivo.
Simpletip ofrece diversas opciones para personalizar nuestro tooltip. El plugin está bien documentado y lleno de ejemplos.
Enlace | Simpletip
Vía | webresourcesdepot
