Ir al contenido principal

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

    tecnicas-ajax-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

    tecnicas-ajax-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

    tecnicas-ajax-editor-texto
    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

    tecnicas-ajax-editor-texto-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

    listas-desplegables-encadenadas
    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

    tecnicas-ajax-rss
    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

    tecnicas-ajax-archivo-externo
    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

    tecnicas-ajax-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

    tecnicas-ajax-dynamicdrive
    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

    tecnicas-ajax-paginacion
    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

    tecnicas-ajax-paginacion-2
    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

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

    Contraer o expandir contenidos

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

    Boxes con efecto acordeón

    tecnicas-ajax-acordeon
    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

    tecnicas-ajax-encuestas
    Un sistema básico de encuestas agradable visualmente.

    Ajax Poll Script

    tecnicas-ajax-encuestas-2
    Encuestas con Ajax que incluye un generador de gráficos.

    Ajax Poller

    tecnicas-ajax-encuestas-3
    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

    tecnicas-ajax-autosugest
    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

    tecnicas-ajax-formulario
    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

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

    Cajas de diálogo

    Prototype Window

    tecnicas-ajax-boxes-dialogos-3
    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

    tecnicas-ajax-boxes-dialogos
    Una caja de diálogo flotante con Ajax.

    jQuery dialog

    tecnicas-ajax-boxes-dialogos-2
    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)

    tecnicas-ajax-calendario-5

    Monket calendario

    tecnicas-ajax-calendarios
    Un calendario basado en Ajax. Tambien tienes una versión basada en Google calendar aquí.

    MySQL calendario

    tecnicas-ajax-calendarios-3
    Un calendario que te permite seleccionar el mes y el año.

    Free Ajax Calendar

    tecnicas-ajax-calendarios-2
    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ú

    tecnicas-ajax-archivo-cajas-menu
    Un menú basado en una lista desplegable modifica el contenido que se muestra en la caja inferior.

    Subir ficheros con Ajax

    File Upload

    tecnicas-ajax-subir-archivos
    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
    tecnicas-ajax-subir-archivos-2
    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

    tecnicas-ajax-tablas-2
    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

    tecnicas-ajax-cargadores
    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

    tecnicas-ajax-generador-indicadores-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

    tecnicas-ajax-indicadores-actividad
    A diferencia de los casos anteriores, aquí encuentras una galería de indicadores de actividad predefinidos.

    Comentarios

    Entradas populares de este blog

    Como en el cine: NASA considera hibernar astronautas en el espacio

    Ya se sabe que la ciencia-ficción siempre va varios pasos por delante de la ‘ciencia’ oficial, en este caso han tenido que pasar varias décadas para que una idea bastante presente en obras futuristas del siglo pasado llegue a considerarse como real: la hibernación de astronautas durante viajes espaciales para ‘abaratar’ costes por un lado, y para conseguir que el viaje sea lo menos aburrido, ya sabes, estás congelado y cuando te despiertas ya estás en Marte. La idea pudo verse en clásicos como El Planeta de los Simios o Alien, y ahora la NASA parece estar considerando esta opción como válida, alternativa al hecho de que no puedes conseguir (de momento) que una nave salga de La Tierra y llegue a Marte en unas pocas semanas de viaje. A la solución se le llama ‘sueño profundo’, inducida por hipotermia, esto lleva a un proceso de hibernación donde los astrnautas tienen las constantes vitales al mínimo y no necesitan de muchos nutrientes, es decir, aq...

    Cómo Crear Mapas Mentales

    Para desarrollar un mapa mental de cualquier proyecto que tenga en mente, utilice las siguientes instrucciones: (Necesitará papel, lapiz. goma y colores) El mapa debe estar formado por un mínimo de palabras. Utilice únicamente ideas clave e imágenes. Inicie siempre desde el centro de la hoja, colocando la idea central (Objetivo) y remarcándolo. A partir de esa idea central, genere una lluvia de ideas que esten relacionadas con el tema. Para darle más importancia a unas ideas que a otras (priorizar), use el sentido de las manecillas del reloj. Acomode esas ideas alrededor de la idea central, evitando amontonarlas. Relacione la idea central con los subtemas utilizando lineas que las unan. Remarque sus ideas encerrándolas en círculos, subrayándolas, poniendo colores, imágenes, etc. Use todo aquello que le sirva para diferenciar y hacer más clara la relacion entre las ideas. Sea creativo, dele importancia al mapa mental y diviértase al mismo. No se limite, si se le acaba la hoja ...

    What is forex tech trading world?

    Actually Forex trading is them most global systems betting on the future movement of exchange rates. Forex trading is generally considered a high-risk activity. Professional forex traders have jobs in which 100% of their time is devoted to making profits by trading. These traders have market experience and real-time market information at their fingertips. They may also have huge amounts of capital to bet. As retail investors, most of us will not have much, if any, of these. - Am I suited to fast-paced trading? Online trading, which includes forex trading, is fast-paced. Forex trading in particular requires round-the-clock attention to the markets and rapid decision-making. Not everyone will be suited for such demands, or is able to devote the required time and attention. Ask yourself if you are suited to this sort of trading style. - Do I understand binary options? Binary options are susceptible to market risk. Like other options products, investors’ losses can be magnified by ...