2009-12-11

Post Pic 70 técnicas Javascript profesionales + tutoriales avanzados.


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.

TextboxList's Autocompletion

Hyphenation in Web

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.

Showcase of Beautiful Album and CD covers- Hyphenation in Web

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.

Useful JavaScript Techniques - SocialHistory.js

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.

Useful JavaScript Techniques - addSizes.js

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.

Useful JavaScript Techniques - syntaxhighlighter

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.

Useful JavaScript Techniques - samaxesjs

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.

Useful JavaScript Techniques - Step by Step

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.

Useful JavaScript Techniques - MoreCSS

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.

Useful JavaScript Techniques - Facelift Image Replacement

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.

Useful JavaScript Techniques - CSS Sprites2

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.

Useful JavaScript Techniques - jParralax

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.

Useful JavaScript Techniques - ddMenu - Context Menu Script

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.

Useful JavaScript Techniques - js-hotkeys

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).

Useful JavaScript Techniques - Proto.Menu, prototype based context menu

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.

Useful JavaScript Techniques - Galleria

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.

Useful JavaScript Techniques - History Keeper

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.

Useful JavaScript Techniques - date.js

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.

Useful JavaScript Techniques - Lightview

Coda popup bubbles

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.

Coda Bubble

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.

LiveValidation

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.

Live Validation

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.

Ajax Auto Suggest

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.

Fancy Upload

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 en tu etiqueta, y tendrás el poder de instalado en tu sitio. Su uso es interesante; se le pueden agregar notas y otra información importante a las fotos.

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.

Taggify

AmberJack

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.

JavaScript Image Loader

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.

swfIR

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.

MooFlow

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.

AM Charts

GreyBox

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.

Mailist

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.

SWF Object

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.

PlotKit

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

junto con la clase “tabber” rondando el contenido destinado, y entonces adicionar la clase “tabbertab” y el título para el
.

Tabifier

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.

Useful JavaScript Techniques - A Mac OS X-style Dock In JavaScript

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.

Useful JavaScript Techniques - fValidator - An open source (free) unobtrusive javascript tool for easy handling form validation

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.

Useful JavaScript Techniques - jQuery Interactive Date Range Picker with Shortcuts

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.

Useful JavaScript Techniques - Raphaël

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.

Useful JavaScript Techniques - NoGray Time Picker

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.

Useful JavaScript Techniques - Yetii - Yet (E)Another JavaScript Tab Interface

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.

Useful JavaScript Techniques - Calendar

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.

Useful JavaScript Techniques - Starbox

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á.

Useful JavaScript Techniques - Magic Zoom

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.

Useful JavaScript Techniques - Magic Magnify

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.

Useful JavaScript Techniques - Carousel.us

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.

Useful JavaScript Techniques - slideshow

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.

Useful JavaScript Techniques - jgrousedoc

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.

Useful JavaScript Techniques - Lightbox 2

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.

Useful JavaScript Techniques - Control.Window

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.

Useful JavaScript Techniques - SimpleModal

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.

Useful JavaScript Techniques - Creating a carousel with 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.

Useful JavaScript Techniques - Unobtrusive Expand and Collapse Navigation

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.

Useful JavaScript Techniques - Image Cross Fade Transition

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.

Useful JavaScript Techniques - Slider Gallery

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.

Useful JavaScript Techniques - FancyZoom meets jQuery // Ordered List // We Make The Web Beautifully Simple

AJAX Powered Shopping Cart
La meta de este tutotial es mostrar cómo construir una cesta de compra vía AJAX

Useful JavaScript Techniques - Build An AJAX Powered Shopping Cart

jQuery iPod-style Drilldown Menu
Este es un menú tipo iPod, muy conveniente para cuando organizamos una larga estructura de datos.

Useful JavaScript Techniques - jQuery iPod-style Drilldown Menu

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.

Useful JavaScript Techniques - Load Content While Scrolling With jQuery

JavaScript Tooltips
Este tutorial muestra cómo crear un agradable y efectivo tooltip en JavaScript. Por Michael Leigeber.

Useful JavaScript Techniques - JavaScript Tooltips

Newsticker
Antonio Lupetti re-creó un mini mostrador de noticias muy similar al de Newsvine. Hecoh con Mootols.

Useful JavaScript Techniques - Newsticker

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.

Useful JavaScript Techniques - jQuery virtual tour

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.

Useful JavaScript Techniques - Flexigrid

tableFilter
Este script le permite a los usuarios filtrar y mostrar largas cantidades de tablas de una forma muy rápida e interactiva.

Useful JavaScript Techniques - tableFilter

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.

Useful JavaScript Techniques - Row Locking with Checkboxes

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.

Useful JavaScript Techniques - jQuery File Tree

Proto.Menu, prototype based context menu
Proto.Menu es una solución sencilla para crear menús contextuales dentro de tu sitio web.

Useful JavaScript Techniques - Proto.Menu, prototype based context menu

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.

Useful JavaScript Techniques - Proto.Menu, prototype based context menu

Toggling Announcement Slider
Este es un script para trabajar con anuncios dentro de tu sitios web. Está escrito en MooTools 1.2.

Useful JavaScript Techniques - Proto.Menu, prototype based context menu

Tutoriales


Useful JavaScript Techniques - Create an apple style menu and improve it via jQuery

Por Chris Coyier.

Useful JavaScript Techniques - Creating a Slick Auto-Playing Featured Content Slider

Useful JavaScript Techniques - Build An Incredible Login Form With jQuery

Useful JavaScript Techniques - Create a Slick Tabbed Content Area using CSS & jQuery

Useful JavaScript Techniques - Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous

Useful JavaScript Techniques - Create a Simple, Powerful Product Highlighter with MooTools

Useful JavaScript Techniques - Creating a Dynamic Poll with jQuery and PHP

Contenido relacionado




Fuente: webizzima.com

No hay comentarios: