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.
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 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.).
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
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.
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.
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.
Con RSS Ticker puedes insertar en una página web contenido proveniente de un feed RSS externo.
Te permite añadir contenido dinámico que va actualizándose cargado desde archivos externos.
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 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.
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.
Incluye contenido desde múltiples fuentes (otras páginas, archivos, etc.) y pagina el resultado.
Similar al anterior aunque más simple visualmente, puedes configurarlo para adaptarlo al diseño de tu web.
Crea un sistema que te permite expandir o contraer contenidos tan solo con un click de ratón.
Con este efecto puedes expandir y contraer contenido con efecto acordeón vertical.
Un sistema básico de encuestas agradable visualmente.
Encuestas con Ajax que incluye un generador de gráficos.
Un generador de clásicas cajas de encuestas para registrar votos entre diferentes opciones.
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.
Añade una barra de progreso que indique cuántos caracteres faltan para completar un campo del formulario.
Este generador te permite crear formularios de login, encuestas, formularios de pedidos, registros de usuarios, etc.
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.
Una caja de diálogo flotante con Ajax.
Una caja de diálogo flotante e interactiva con Ajax.
Un calendario basado en Ajax. Tambien tienes una versión basada en Google calendar aquí.
Un calendario que te permite seleccionar el mes y el año.
Un calendario bastante sencillo pero eficiente.
Un menú basado en una lista desplegable modifica el contenido que se muestra en la caja inferior.
Ajax también te sirve para subir ficheros a tu servidor desde una página web de una forma visualmente elegante y sencilla de utilizar.
Ajax File Upload
Bastante sencillo y clásico desde el punto de vista visual.
Utiliza Ajax para conseguir una tabla editable y redimensionable.
Preloaders te permite configurar tu icono animado de cargador, puedes partir de varias opciones que te presenta y personalizar luego su aspecto, colores, color de fondo, velocidad de la animación, tamaño, etc.
Este es otro generador de indicadores de actividad que puedes configurar, incluye una galería de varias docenas de diseños pre-definidos para personalizar según color, velocidad, color de fondo/transparencia, etc.
A diferencia de los casos anteriores, aquí encuentras una galería de indicadores de actividad predefinidos.
Í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 listaListas 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 RSSAdvanced 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.
Boxy
Una caja de diálogo flotante con Ajax.
jQuery dialog
Una caja de diálogo flotante e interactiva con Ajax.
Calendarios
Gracias a Ajax puedes mostrar calendarios en tu web con un aspecto impecable.Calendario con Scheduler (programador)
Monket calendario
Un calendario basado en Ajax. Tambien tienes una versión basada en Google calendar aquí.
MySQL calendario
Un calendario que te permite seleccionar el mes y el año.
Free Ajax Calendar
Un calendario bastante sencillo pero eficiente.
Cajas y boxes con Ajax
Arrastrar y soltar cajas con Ajax
Crea cajas con contenido diverso (texto o imágenes) que pueden agarrarse con el ratón para arrastrar y soltar en otro lugar de la página.Contenido dinámico con menú
Un menú basado en una lista desplegable modifica el contenido que se muestra en la caja inferior.
Subir ficheros con Ajax
File Upload
Ajax también te sirve para subir ficheros a tu servidor desde una página web de una forma visualmente elegante y sencilla de utilizar.
jQuery Fileuploader Plugin
Un plugin que te permite subir ficheros, bastante sencillo de instalar y configurar.Ajax File Upload
Bastante sencillo y clásico desde el punto de vista visual.
Tablas con Ajax
Consigue unas tablas visualmente vistosas utilizando Ajax.TableKit
Permite ordenar filas, reordenar columnas, cambiar el tamaño de columnas y editar el contenido de las casillas o celdas de la tabla.MochiKit tablas con Ajax
Utiliza Ajax para conseguir una tabla editable y redimensionable.
Indicadores de carga y actividad
Los indicadores de carga y actividad permiten al usuario indicar que Ajax está trabajando cargando contenidos. Además del clásico existe un buen número de alternativas que te permiten personalizar tus trabajos.Preloaders
Preloaders te permite configurar tu icono animado de cargador, puedes partir de varias opciones que te presenta y personalizar luego su aspecto, colores, color de fondo, velocidad de la animación, tamaño, etc.
Generador de indicadores de actividad
Este es otro generador de indicadores de actividad que puedes configurar, incluye una galería de varias docenas de diseños pre-definidos para personalizar según color, velocidad, color de fondo/transparencia, etc.
Indicadores de Actividad de Ajax
A diferencia de los casos anteriores, aquí encuentras una galería de indicadores de actividad predefinidos.
Comentarios
Publicar un comentario
Que estas pensando?