Textboxlist Auto-Completar
Una de las mejores características de JavaScript es la capacidad de autocompletado avanzado. No existe un sitio web que emplee la técnica de autocompletado mejor que Facebook. Ellos han creado una forma elegante para la búsqueda de otros usuarios de Facebook usando esta característica. Una vez que el usuario es encontrado, su nombre es mostrado con un vínculo a su perfil y una X al lado para eliminarlo en caso que se quiera así. TextboxList ha imitado esta característica y ha creado un pequeño script para descargar.
Este proyecto colecciona soluciones de trabajo para plecaje en páginas XHTML automático. El mismo posee una solución JavaScript llamada Hyphenator.js. Hyphenator.js le muestra al cliente plecaje de documentos HTML en cada navegador insertando pequeñas plecas usando paternos de plecaje del algoritmo de Franklin M. Liangs comúnmente conocidos en LaTeX y en OpenOffice.
SocialHistory.js
SocialHistory.js te permite detectar qué sitios sociales de bookmarking están utilizando tus visitantes. NO te permite el resto del historial de los usuarios, solo eso. Chequea, en un formulario de 20 preguntas, si el usuario ha estado en una URL en particular. SocialHistory.js posee una lista inmensa de los sitios más populares de bookmarking los cuales chequea.
addSizes.js
Este pequeño JavaScript se encarga de un vínculo de generación de archivos. Por ejemplo, si posees un archivo .mp3 o un .pdf dentro de tu página, este script automáticamente chequea el tamaño del mismo y muestra el tamaño y la extensión.
syntaxhighlighter
SyntaxHighlighter está aquí para ayudar a un desarrollador a postear snippets de código online de manera fácil y se encarga de que luzca bien. Está basado al 100% en JavaScript y no importa lo que tengas en tu servidor.
samaxesjs
samaxesJS es un set de utilidades y controles, escrito en JavaScript, para la creación y construcción de aplicaciones webs. La creación de la tabla de contenidos se forma a partir de los encabezados que posea un documento y le provee a cada uno de los encabezados números de secciones.
Step by Step
Este script te permite mostrarle y explicarle a los visitantes lo que tu página tiene para ellos. Puedes encontrar demostraciones interactivas sobre el funcionamiento del mismo. La imagen muestra lo que este script es capaz de hacer.
MoreCSS
MoreCSS es una pequeña librería la cual te permite crear menús con pestañas, tablas y listas con estilo zebra como si estuvieras usando CSS puro.
Facelift Image Replacement
Facelift Image Replacement (o FLIR, se pronuncia “fleer”) es un script reemplazador de imagen el cual genera dinámicamente representaciones de texto mediante una imagen en tu página web con tipografías que comúnmente los usuarios no lograrían ver. La imagen generada será insertada en tu página web automáticamente vía JavaScript y visible para todos los navegadores. Cualquier elemento de texto puede ser reemplazado por una imagen, desde los encabezados (h1, h2, h3, etc.) hasta los elementos span, etc.
CSS Sprites2
jQuery trabaja en la gran mayoría de los navegadores de hoy día, así que, todo lo que ves en la imagen funciona perfectamente en Internet Explorer (versión 6 en adelante), Firefox, Safari, Opera, etc.
jParralax
“Parallax es una librería jQuery que transforma un objeto seleccionado en una ‘ventana’, o viewport, y todos sus derivados en capas posicionadas que pueden ser vistas a través del mismo. Estas capas se mueven en respuesta al mouse, y, dependiendo de sus dimensiones, se mueven en diferentes cantidades.” Imagina mirar a través de una cámara y tienes capas de objetos a varias distancias moviéndose alrededor. Esta librería logra ese efecto haciendo uso de múltiples imágenes estáticas, una por cada capa.
ddMenu – Context Menu Script
ddMenu es un script basado en MooTools para crear un menú contextual. Debes presionar la tecla Ctrl+Clic Derecho para que se active dicho menú y no el del navegador.
js-hotkeys
jQuery.Hotkeys es un plugin que te permite agregarle a tus vínculos teclas de acceso rápido, incluso combinación de teclas. Solo se requiere una pequeña línea de código para activar o desactivar una tecla de acceso rápido.
BarackSlideshow
El mismo es un elegante script de presentación de imágenes tipo lightweight. Trabaja bajo MooTools 1.2, y soporta todo tipo de transformaciones (coordenadas de izquierda, arriba, y propiedades de ancho y alto).
Galleria
Galleria es una galleria de imágenes escrita en JQuery. La misma carga las imágenes una por una desde una lista no ordenada y muestra las vistas en miniature cuando éstas son cargadas. Creará dichas vistas en miniatura si así lo escojes tú, escaladas o no, centradas y cortadas dentro de una vista en miniatura con los cambios mostrados, la cual es definida vía CSS.
History Keeper
unFocus History Keeper ies una librería JavaScript para manipular el historial de un navegador, además prove soporte para vinculaje profundo en animaciones Flash y en AJAX. Para los clients que navegan este script genera un botón de Atrás a tu gusto.
date.js
Datejs es una fuente extensa de JavaScript para el trabajo con fechas, la cual es open source, la misma nos sirve para formatear y procesar horarios y fechas.
Lightview
Lightview es otro script que crea una ventana donde podremos navegar cierto contenido. Posee una pequeño cargador de imágenes, esquinas ajustables, y contenido editable en cuanto a tamaño. El contenido siempre se las ingeniará para ajustarse a tu resolución de pantalla. El script nos servirá par aver imágenes, archives Quicktime, Fromularios, iFrames, Animaciones Flash, etc.
La compañía de software Panic es la dueña de una aplicación muy querida por los usuarios de Mac concebida para desarrolladores llamada Coda. Coda posee un increíble y elegante diseño, y dentro de la gran cantidad de efectos hechos en JavaScript que tiene, el más notable es una burbuja de información. El blog jQuery for Designers ha creado un script que combina jQuery con el código correspondiente para replica esta característica usada en el sitio de Coda. El efecto es precioso y le brinda al usuario una incredible experiencia de navegación.
ajax im
Con la popularidad de los clientes de mensajería via web como Meebo, muchos desarrolladores pudieran querer tener uno de su propiedad, sobretodo hecho en JavaScript. Ajax IM es una librería dedicada a crear un cliente de mensajería instantánea hecho en AJAX. El script es algo extenso, no obstante puede constituir un efecto distinto para muchos sitios web que necesiten más interacción con los usuarios.
Esto que tienen a continuación es un diamante en bruto par aquellos que hagan uso de los formularios. Crear un formulario de subscripción de manera intuitive pudiera se una gran faena con todos los diferentes tipos de validación que se necesitan. No obstante, crear un formulario aún más rápido y más intuitive escrito en JavaScript no es tarea fácil del todo. Por suerte existe LiveValidation, el cual se ha hecho dueño del trono creando un script pequeñito y para nada trabajoso que puede alejarle el miedo a cualquiera respecto a enfrentarse a la creación de una validación de formulario. Si eres un desarrollador de Ruby on Rails, LiveValidation viene en dos formas: vía Prototype (ideal para Ruby on Rails) or un paquete conjunto.
Ajax AutoSuggest
Al igual que el script de autocompletado de TextboxList, Ajax AutoSuggest es un script de la misma índole con mucho ‘sabor’. El mismo es pequeño, se lleva tan solo 9KB a cambio de dotarle de un gran toque a cualquier formulario de búsqueda.
FancyUpload
Este es un script de subida el cual te muestra el progreso de los archives que se van subiendo. Es perfecto para cualquier formulario de subida, incluso permite la subida de múltiples subidas al mismo tiempo. Puedes limitar la capacidad del archivo a subir así como restringir el tipo de archive que va a ser subido. El único requerimiento que posee FancyUpload es que los usuarios deben tener instalado el reproductor Flash el cual está presente en el 95% de las computadoras de este mundo.
Taggify
Taggify es un poco distinto en implementación que los otros JavaScripts listados. Taggify es una solición hosteada para agregar widgets de información a las fotos. En vez de bajarlo para hostearlo en tu sitio, su implementación consta de agregar un
Míralo como una variante a la característica de agregarle notas a las fotos en Flickr. Puedes agregar cualquier HTML a la nota de Taggify, creando una página bien informada y de manera única. Es esencial para imágenes que a veces requieren un tanto más de información.
AmberJack es una de las técnicas más interesantes creada en JavaScript. Un web tour es algo extremadamente beneficioso debido a que permiten que los usuarios puedan familiarizarse, muestran las características y productos de nuestro sitio y muchas cosas más. Posiblemente la mejor parte de AmberJack es que nada debe ser instalado o aprendido para comenzar a crear web tours. Su tamaño consta simplemente de 4KB. Increíble!
Sliding Tabs
Este es otro script inspirado por Coda. Esencialmente, es un sistema de ‘navegación’ de pestañas que permite una interacción entre sí muy fácil e inteligente. Para ver un demo puedes hacer clic aquí. Sliding Tabs está escrito bajo el framework MooTools.
Si estás buscando una vía más intuitiva para proveerle a los usuarios una forma de efectuar subidas de imágenes y mostrar vistas previas de las mismas en tu sitio, pues te comento que JavaScript Image Loader (demo) puede llenar tus expectativas. JavaScript Image Loader es una forma de mostrarles a los usuarios la imagen antes de ser subida, también puede proporcionarnos otra información sobre la misma si lo deseamos así.
swfIR
swfIR es un interesante concepto el cual efectúa una combinación de Flash y JavaScript y les provee funcionalidades de manipulación. Una vez que swfIR es instalado, adiciona una etiqueta con la clase “swfir” alrededor de la imagen. swfIR puede proporcionarle a una imagen casi todo tipo de manipulación. Una característica que debemos resaltar es la habilidad de modificar el temaño de la imagen en dependencia del tamaño de la página. Cuando modificas el tamaño del texto de la página, el tamaño de la imagen se modifica proporcionalmente con el mismo. Modificando el tamaño de la imagen conjuntamente con el texto le crea al sitio mucha más coherencia.
MooFlow
Para los fanes de Cover Flow en Leopard (Mac), MooFlow es lo que más se acerca a ello. MooFlow es una galleria que hace uso de MooTools y trabaja con un poco de la magia de JavaScript para crear increíbles galerías de imágenes.
Así como Cover Flow, puedes manipular el esquema y la funcionalidad de MooFlow. Puedes activar el modo a pantalla completa, reflexión de imagen y autoplay. MooFlow es muy configurable y debido a eso adhiere todas las imágenes dentro de un element.
amCharts
Este script es un generador de charts que corre sobre una bella combinación entre Flash y JavaScript. Puedes generar virtualmente cualquier tipo de gráfico o chart con este script, incluso puedes utilizar archivos .CSV y XML para sacar los datos.
El sitio web de GreyBox sentencia a las ventanas flotantes hechas en JavaScript de la siguiente manera: “A pop-up window that doesn’t suck”, y bien que lo dicen por una buena razón. GreyBox hace todo lo que una ventana convencional debería hacer. Puede mostrar imágenes, sitios web, y casi toda cantidad de contenido que se te pueda ocurrir.
Mientras que Mailist no se considera un formulario de contacto de AJAX este pequeño script es lo que los desarrolladores web necesitan para trabajar con direcciones de correo para cosas como suscripciones y similares formularios. Incluso posee un panel de administración para trabajar pequeñas cosas como salvas de correos y editar la vista del formulario.
SWFObject
SWFObject es un pequeño reproductor Flash que usa JavaScript para evitar mucho de los obstáculos que no pueden ser resueltos de manera convencional. El reproductor consta de una pequeña descarga de apenas 9.5KB (o 3.8KB en GZIP). SWFObject se enorgullece de su compatibilidad con todos los navegadores modernos, y actualmente hace uso de JavaScript para ayudar a detector qué version de reprodutor Flash posees y de esta forma evitas plugins Flash antiguos que corrompan el también contenido Flash.
PlotKit
PlotKit es un script para el trabajo con ploteo el cual es hecho bajo el framework Moochikit. PlotKit es una herramienta excepcional para plotear cualquier tipo de gráficos.
JavaScript tabifier
JavaScript tabifier es un pequeño script que te permite crear pestañas para la navegación de tu contenido. Todo lo que se requiere para hacer uso de dicho script es incluirle al sitio el archivo JavaScript y posteriormente adicionar una etiqueta
FancyZoom 1.1
Diseñado para ver imágenes a pantalla completa sin que te separes del navegador web, además, FancyZoom prove un diseño estilo Mac realmente asombroso.
Puede ampliarse sin que se requiera una carga externa y sin cambios dentro del código HTML. Además no requiere de librerías JavaScript. FancyZoom requiere solamente dos líneas de código en tus archivos HTML.
A Mac OS X-style Dock In JavaScript
Si por algo la gran Apple con su Mac OS X dejó asombrado al mundo fue por su increíble forma de verse respecto a los efectos gráficos. Sin lugar a dudas el más impresionante es es el efecto ‘fish-eye’, donde los iconos se agrandan en la medida que pasamos el mouse sobre ellos, formando una especie de ola. Lograr este efecto en JavaScript es muy difícil, no obstante MacStyleDock permite que esta tarea sea ejecutada con facilidad.
fValidator
fValidator es una herramienta open source para el trabajo con formularios de validación. El mismo le permitirá a los usuarios inserter los datos que le requieras de manera intuitive.
jQuery Interactive Date Range Picker with Shortcuts
Esta es una herramienta avanzada hecha en jQuery, la cual es un calendario en el cual seleccionamos fechas para diferentes propósitos, y para otras opciones que tiene esta herramienta existen una serie de transiciones que te dejarán con la boca abierta.
Raphaël
Raphaël es una pequeña librería JavaScript que debería simplificar tu trabajo con gráficos vectoriales en la web. En caso de que quieras ponerle a tu sitio alguna imagen vectorial, simplemente lo vas a lograr fácilmente con esta herramienta. Raphaël hace uso de SVG y VML como su base para la creación de gráficos.
NoGray Time Picker
Esta herramienta posee una interface ‘drag-and-drop’. Para seleccionar la hora los usuarios simplemente arrastran los minutes u horas de un reloj.
Yetii – Yet (E)Another JavaScript Tab Interface
Yetii es una implementación muy functional. Gracias a esta herramienta puedes varias interfaces de pestañas independientes en una sola página, especificar la pestaña inicial, accionar la rotación de pestañas, agregar navegación tipo anterior/siguiente, anidar una interface de pestaña dentro de otra y definir algunas funciones para que se ejecuten después de que cierta pestaña sea cliqueada.
Calendar
Calendar es una clase JavaScript escrita bajo MooTools, la misma te muestra un calendario con el fin de escojer cierta fecha, se desarrollo para los formularios de inscripción donde en muchas ocasiones debemos proporcionar nuestra fecha de nacimiento.
Starbox
Starbox te permite crear de manera facil todo tipo de sistemas de rating usando tan solo una imagen PNG. La librería está escrita en Prototype. Para efectos extras puedes usar Scriptaculous.
Magic Zoom
Magic Zoom es una herramienta hecha en JavaScript para la ampliación de imágenes. Es la mejor de las vías para mostrar imágenes en un increíble detalle. Los usuarios no tienen la necesidad de hacer clic en ninguna parte, simplemente mueven el mouse sobre la parte preferida de la imagen y esta se mostrará.
Magic Magnify
Magic Magnify es una herramienta escrita en Flash para la ampliación de imágenes. Es un efecto elegante para ver imágenes con un increíble detalle. Mientras el usuario corre el mouse libremente sobre la imagen esta mostrará un detalle más amplio de la misma. La aplicación no es libre y cuesta $28 / £15 / €18.
Carousel.us
Carousel.us es un carrusel, que usa los frameworks prototype.js y scriptaculous.js o mootools.js. También usa PHP Easy Reflections v3 por Richard Davey.
slideshow
Slideshow es una clase escrita en Mootools 1.2 para animar imágenes en tu sitio. Slideshow es el resultado de muchos códigos de prueba para crear una clase JavaScript que fuera fácil, detallada, profesional, extendible, configurable y no obstrusiva en su uso. Fue escrita con los mejores efectos que ofrece este framework. Comenzó como un pequeño proyecto de Aeron Glemann, y ahora es open source con una licencia MIT.
jgrousedoc
jGrouseDoc le permite a los desarolladores producir documentación para sus códigos JavaScript basados en comentarios estilo javadoc los cuales se embeben dentro del código fuente.
Lightbox 2
Lightbox es un simple y no obstrusivo script usado para ver imágenes dentro de una misma página. Es muy fácil de configurar y funciona con todos los navegadores modernos.
Control.Window
Control.Window es una herramienta programable y multipropósito para ventanas que trabaja con Prototype. Cubre una variedad de usos y permite una gran personalización.
SimpleModal
SimpleModal es un plugin de jQuery que provee una interface muy simple para crear un diálogo común. La meta de SimpleModal es brindar a los desarrolladores un modo de estar en contacto muy profesional e intuitivo.
MooTools Carousel
Probablemente lo habrás visto en varios sitios: esas pequeñas presentaciones de imágenes (y de contenido también). Muchas personas copian el código para usarlo en su sitio, bien, en lo personal creo que lográndolo tú mismo, aprenderás una nueva técnica y obtendrás una vista más profunda. De manera que, te caminaré hacia este tutorial que de seguro te gustará mucho, es muy interesante, el mismo te mostrará cómo lograr esto con CSS y Mootools.
Expand and Collapse Navigation
Un tutorial sobre cómo crear una navegación vertical que expandirá y colapsará el contenido a tu antojo haciendo uso de listas no ordenadas y algunas clases CSS.
Image Cross Fade Transition
El volcado de imágenes fue lo básico de JavaScript en sus inicios en los 90s, y para muchos desarrolladores JavaScript, su pasión comenzó debido al logro de efectos de este tipo. Hoy ya no es trabajoso crear efectos de volcado de imágenes, ya sea en CSS o en JavaScript.
Slider Gallery
Este ‘producto deslizante’ es similar a una galería de imágenes común, con la diferencia de que hay una barra deslizante para navegar los objetos.
FancyZoom meets jQuery
Este es un efecto hecho con jQuery, el mismo sirve para el trabajo de ampliación de imágenes, es muy curiosa la forma en que trabaja, en que se ‘expresa’, deberías probarlo.
AJAX Powered Shopping Cart
La meta de este tutotial es mostrar cómo construir una cesta de compra vía AJAX
jQuery iPod-style Drilldown Menu
Este es un menú tipo iPod, muy conveniente para cuando organizamos una larga estructura de datos.
Load Content While Scrolling With jQuery
Este script te permite cargar el contenido “al vuelo” en la medida en que los usuarios utilizan el scroll hacia abajo.
JavaScript Tooltips
Este tutorial muestra cómo crear un agradable y efectivo tooltip en JavaScript. Por Michael Leigeber.
Newsticker
Antonio Lupetti re-creó un mini mostrador de noticias muy similar al de Newsvine. Hecoh con Mootols.
jQuery virtual tour
Esta es una extensión del visor panorámico que te permite trabajar con jQuery de manera tal que podamos transformar una imagen panorámica en un tour virtual.
Flexigrid
Este es un datagrid de columnas expandibles y datos scrolleables, además posee la habilidad de conectarse a una fuente de base de datos XML usando AJAX para cargar el contenido. Muy similar en concepto a Ext Grid respecto a que es puro jQuery, lo que lo hace muy flexible ya que sigue la filosofía de jQuery de menos cantidad de configuración.
tableFilter
Este script le permite a los usuarios filtrar y mostrar largas cantidades de tablas de una forma muy rápida e interactiva.
Row Locking with Checkboxes
Este es un script muy útil, para el trabajo con rows y checkboxes, viene muy a manos cuando necesitamos trabajar con este tipo de datos.
jQuery File Tree
jQuery File Tree es un plugin navegador de datos en AJAX escrito en jQuery, muy configurable. Puedes crear árboles de archivos con tan solo una línea de código JavaScript. Posee la habilidad de estilizar iconos basados en su extensión, usa AJAX para mostrar la información de los archivos al vuelo, tiene un evento de expandir/colapsar y soporta la navegación de varios directorios.
Proto.Menu, prototype based context menu
Proto.Menu es una solución sencilla para crear menús contextuales dentro de tu sitio web.
Pricing Matrix
Este tutorial explicará cómo crear una matriz que podría brindar una indicación de relaciones sobre la información proveída.
Toggling Announcement Slider
Este es un script para trabajar con anuncios dentro de tu sitios web. Está escrito en MooTools 1.2.
Tutoriales
Por Chris Coyier.
Contenido relacionado
Fuente: webizzima.com
No hay comentarios:
Publicar un comentario