50 Técnicas Ajax imprescindibles para diseñadores

En este artículo vamos a repasar algunas técnicas y trucos Ajax que te servirán de ayuda en más de una ocasión porque están divididas en varias secciones según el caso, desde ventanas flotantes pop-up clásicas hasta menús pasando por la aplicación de diferentes contenidos dinámicos. Gracias a la tecnología detrás de Ajax todas estas técnicas pueden aplicarse dinámicamente en una página web sin necesidad de recargarla, lo consigues simplemente activando o modificando algún elemento en pantalla.

Índice:

Trucos Ajax para editar texto en pantalla
Listas con Ajax
Mostrar contenido Dinámico con Ajax
Ajax para abrir ventanas pop-up y mostrar iframes
Paginación con Ajax
Navegación con Ajax
Encuestas
Completadores de textos con Ajax
Validación de formularios
Cajas de diálogo con Ajax
Calendarios
Cajas y boxes con Ajax
Subir ficheros con Ajax
Tablas con Ajax
Indicadores de carga y actividad

Trucos Ajax para editar texto en pantalla

Una de las utilidades realmente interesantes que puedes conseguir gracias a Ajax es la de crear un editor de textos que puede utilizarse directamente en una página web, tanto para añadir texto como para editar textos que ya existan.

TinyMce

Probablemente, uno de los más utilizados en todo el mundo. Es fácilmente configurable y puedes utilizarlo tanto como editor simple de texto como editor complejo al estilo ‘Word’ con cambios de formato de texto y funciones avanzadas como insertar tablas, etc.

Open Wysiwyg

Open Wysiwyg es un editor de textos que incluye características Wysiwyg, es decir, ves directamente cómo se aplican los cambios en la edición del texto (negrillas, tablas, etc.).

Easy Ajax inline text edit

Este código Ajax te permite convertir un bloque de texto aparentemente no-editable en un mini-editor de textos, solo haces click sobre la caja que lo contiene y comienzas a escribir y editar.
Demo

Cajas de texto al estilo Flickr

Este editor se basa en cajas de texto al estilo clásico de Flickr. Cuando pasas el ratón sobre un contenido el fondo cambia de color a amarillo indicando que puede editarse. Al hacer click puedes realizar modificaciones y luego guardar los cambios.

Listas con Ajax

Ajax también puede servirte para que las clásicas listas de elementos HTML tengan un aspecto más vistoso y dinámico en una página web.

Árbol al estilo carpetas de Windows

Una lista

clásica se muestra como un árbol de carpetas clásico de windows con iconos de carpetas amarillos que pueden expandirse o contraerse al hacer click sobre ellos.

Listas desplegables encadenadas con AJAX

Un ejemplo que incluye la forma de realizar listas encadenadas utilizando Ajax. En el ejemplo ves cómo los datos cambian según selecciones de una lista de países en un menú desplegable, pero puedes configurarla a medida.

Mostrar contenido dinámico con Ajax

En este apartado veremos algunas técnicas Ajax que permiten mostrar contenido dinámico dentro de una página web, este contenido puede ser obtenido externamente de otros archivos, bases de datos, etc.

Ajax Tooltips

Con esta herramienta Ajax puedes cargar en un div contenido que está contenido en un archivo externo.

RSS Display Boxes

Utiliza Ajax para mostrar dinámicamente contenido en cajas proveniente de fuentes RSS

Advanced RSS Ticker

Con RSS Ticker puedes insertar en una página web contenido proveniente de un feed RSS externo.

Cargador de artículos con Ajax

Configura una serie de artículos con títulos y cárgalos para ir mostrándolos según el orden que hayas configurado.

s3Slider

Con s3Slider puedes crear un slider que muestra imágenes, textos u otros contenidos cargándolos desde archivos externos.

Ajax para cargar contenido de archivos externos

Te permite añadir contenido dinámico que va actualizándose cargado desde archivos externos.

Crear contenido dinámico usando Ajax

Este es un ejemplo de creación de contenido dinámico que puedes utilizar para personalizar a tu gusto.

Ajax para abrir ventanas pop-up y mostrar iframes

Parece que las ventanas pop-up quedaron obsoletas hace ya bastante tiempo, cuando los bloqueadores de ventanas flotantes hicieron su aparición en el mundo de los navegadores. Sin embargo, ya habrás notado que estas ventanas siguen apareciendo en muchas páginas, en parte gracias a trucos Ajax que vamos a ver.

Greybox

GreyBox te permite aplicar técnicas ajax para cargar páginas web completas, imágenes, textos y otros contenidos en una ventana flotante sobre una página web. Ocupa apenas 22kb lo cuál es de agradecer y es bastante sencillo de instalar y configurar.

Dynamic Drive

Dynamic Drive es ya un clásico dentro de los scripts para internet y, probablemente, una de las webs de este tipo más antiguas todavía activa. El script en cuestión te permite mostrar contenidos diversos en una ventana flotante sobre una página web. Utiliza cookies para controlar que la ventana se muestre solo una vez o cada cierto tiempo o a partir de un número generado aleatoriamente.

Iframes con Ajax

Crea cajas que pueden mostrar contenido de forma dinámico en una ventana iframe insertada en una página web.

Paginación

Paginación de contenido con Ajax

Divide el contenido en diferentes apartados que pueden paginarse fácilmente. Incluye unos botones en la parte superior para que puedas pasar de una página a otra. Ideal para mostrar mucho contenido en poco espacio o para que el contenido muy grande parezca más pequeño y sea más fácil de leer.

Paginación avanzada

Incluye contenido desde múltiples fuentes (otras páginas, archivos, etc.) y pagina el resultado.

Scroll con Ajax

Aquí puedes paginar poco a poco con un clásico scroll vertical.

Navegación con Ajax

Mozilla

Un navegador basado en Ajax desarrollado por la gente de Mozilla.

MooTabs

Un sistema de navegación basado en Ajax que te permite crear tabs o pestañas para modificar el contenido de la caja inferior.

Navegación con pestañas

Similar al anterior aunque más simple visualmente, puedes configurarlo para adaptarlo al diseño de tu web.

Contraer o expandir contenidos

Crea un sistema que te permite expandir o contraer contenidos tan solo con un click de ratón.

Boxes con efecto acordeón

Con este efecto puedes expandir y contraer contenido con efecto acordeón vertical.

Encuestas con Ajax

Las típicas encuestas también pueden configurarse fácilmente utilizando Ajax.

Ajax Poll Script

Un sistema básico de encuestas agradable visualmente.

Ajax Poll Script

Encuestas con Ajax que incluye un generador de gráficos.

Ajax Poller

Un generador de clásicas cajas de encuestas para registrar votos entre diferentes opciones.

Completadores de textos con Ajax

Completa texto con Ajax

Cuando estás rellenando contenido de un formulario, Ajax busca en la base de datos y completa los textos de forma automática según lo programes, por ejemplo, datos de clientes que ya existen, etc.

Ajax autocompletion

Otro completador automático que toma datos de una base de datos para completar automáticamente contenidos y ahorrar tecleo.

Ajax auto-sugest

Esta solución es similar a los anteriores, pero en lugar de auto-completar automáticamente lo que hace es mostrar sugerencias en una ventana flotante.

Validación de formularios

Vforms

Una librería que te permite añadir funcionalidades extra a tus formularios como validación, campos condicionales, pistas para rellenar campos, campos repetibles, cálculos, etc.

Formulario de contacto con validación

Un formulario de contacto basado en Ajax que, además, valida los datos introducidos.

Barra de progreso para formularios con Ajax

Añade una barra de progreso que indique cuántos caracteres faltan para completar un campo del formulario.

jQuery Form Plugin

Un plugin jQuery para formularios.

Generador de formularios con validación

Este generador te permite crear formularios de login, encuestas, formularios de pedidos, registros de usuarios, etc.

Cajas de diálogo

Prototype Window

Una caja de diálogo ampliamente configurable, lo mismo te vale para ventanas flotantes de login que alertas, ventanas de confirmación, mostrar contenidos varios, etc.