70 técnicas nuevas y útiles de AJAX y JavaScript

 

 

 

  • ¡Registro!
  • Clase magistral de diseño para una interfaz de usuario compleja, con Vitaly Friedman

  • Índice
    1. 1. Calendarios y cronogramas: ejemplos y demostraciones
    2. 2. Ejemplos y demostraciones de navegación
    3. 3. Ejemplos y demostraciones de sugerencias sobre herramientas
    4. 4. Ejemplos y demostraciones de menús
    5. 5. Ejemplos y demostraciones de controles deslizantes
    6. 6. Ejemplos y demostraciones de presentaciones de diapositivas
    7. 7. Ejemplos y demostraciones de recorte de imágenes
    8. 8. Ejemplos y demostraciones de vista previa de imágenes
    9. 9. Ejemplos y demostraciones de carga de archivos
    10. 10. Ejemplos y demostraciones de autocompletar
    11. 11. Ejemplos y demostraciones de Lightbox
    12. 12. Ejemplos de formularios y demostraciones
    13. 13. Ejemplos de tablas y demostraciones
    14. 14. Vale la pena consultar: ejemplos y demostraciones
    15. 15. Ejemplos y demostraciones de AJAX

    A medida que la Web crece y se vuelve más dinámica, cada vez más sitios web tienen contenido y herramientas generados por los usuarios que mejoran enormemente la experiencia del usuario en términos de usabilidad y accesibilidad. Se están desarrollando soluciones interactivas para cajas de luz, validación de formularios, navegación, carga, autocompletar, recorte de imágenes, presentaciones de diapositivas, información sobre herramientas, controles deslizantes y tablas que utilizan ingeniosos scripts JavaScript y AJAX.

     

    Al utilizarlos, los desarrolladores deben considerar cuidadosamente muchas técnicas sutiles para ayudar a los usuarios a hacer las cosas. En este artículo presentamos 70 técnicas nuevas y útiles de JavaScript y AJAX , todas ellas de la más alta calidad y más o menos fáciles de configurar. También encontrará algunas técnicas muy útiles pero más conocidas para utilizar en casi cualquier proyecto en el que trabaje.

    En estos ejemplos se utilizan jQuery , MooTools , Prototype y script.aculo.us , por lo que cada gusto tiene su merecido.

    1. Calendarios y cronogramas: ejemplos y demostraciones

    Marco de tiempo Un marco de tiempo de hacer clic y arrastrar, con una función para definir rangos. Un mejor calendario. Revisa la demostración aquí .

    Cree asombrosos calendarios similares a iCal con jQuery. Similar a la aplicación Calendario de iPhone, con una descripción del evento que aparece al pasar el mouse. La parte más complicada es hacer que tus imágenes sean perfectas y usar una sola imagen para todos los gráficos siempre que sea posible para reducir el tiempo de descarga. Revisa la demostración aquí.

    Dateslider Este elemento le permite elegir fechas con una simple barra deslizante. Al arrastrar la barra sobre la línea de tiempo, las fechas cambian instantáneamente. Y cuando el usuario decide cambiar las fechas manualmente, la barra se ajusta automáticamente a las fechas correspondientes. Revisa la demostración aquí .

    Elegante línea de tiempo semanal animada Este tutorial explica cómo diseñar una línea de tiempo semanal elegante y animada, con anotaciones diarias, que puede personalizar y reutilizar rápidamente en sus proyectos web. Revisa la demostración aquí .

    Discreto widget de selector de fechas Este discreto selector de fechas (calendario), al que se puede acceder mediante el teclado, no requiere bloques de JavaScript incrustados, no utiliza ventanas emergentes y es adecuado para su uso dentro de documentos servidos como aplicación/XHTML+XML. Revisa la demostración aquí.

    Selector de fecha El complemento jQuery Selector de fecha permite a los usuarios seleccionar una fecha o un rango de fechas fácilmente. Incluye muchas opciones: múltiples calendarios; selección única, múltiple y de rango; marcado de fechas especiales, de fin de semana y especiales; una apariencia fácil de personalizar mediante CSS; día personalizado para comenzar la semana, un ajuste con la ventana gráfica.

    2. Ejemplos y demostraciones de navegación

    Navegación de páginas con desplazamiento automático Aprenda a crear navegación de páginas con desplazamiento automático utilizando script.aculo.us. Revisa la demostración aquí.

    Crear un portafolio "filtrable" con jQuery En este tutorial, aprenderá cómo hacer que el "filtrado por categoría" sea un poco más interesante con solo un poco de jQuery.

     

    Cree un resaltador de productos simple y potente con MooTools. Aprenda a crear una herramienta flexible para resaltar los productos y servicios de su sitio web utilizando el marco JavaScript de MooTools. Revisa la demostración aquí .

    Ext Accordion El widget Accordion y su InfoPanel son componentes que utilizan la biblioteca Ext JS . Se puede utilizar para navegación de páginas, ventanas de herramientas, detalles que se pueden ocultar, formularios de inicio de sesión, cuadros de diálogo de opciones, notas adhesivas y más.

    Complemento jQuery ListNav Este complemento jQuery proporciona una manera fácil de agregar discretamente un widget de navegación basado en letras a cualquier lista ul o ol. Aparece una barra de navegación fácilmente modificable (a través de CSS) encima de la lista, que muestra las letras de la A a la Z. Al hacer clic en una de las letras, se filtra la lista para mostrar solo los elementos que comienzan con esa letra. Al pasar el cursor sobre una letra (opcionalmente), se muestra un recuento encima de la letra, que indica cuántos elementos hay en esa lista. Revisa la demostración aquí .

    3. Ejemplos y demostraciones de sugerencias sobre herramientas

    Duplique las sugerencias sobre herramientas de la página de inicio de jQuery usando MooTools. La página de inicio de jQuery tiene un efecto similar al de información sobre herramientas bastante suave, como se ve arriba. A continuación se explica cómo lograr el mismo efecto utilizando MooTools.

    Prototip Prototip le permite crear fácilmente información sobre herramientas tanto simples como complejas utilizando el marco Prototype JavaScript. Puede personalizarlo fácilmente, controlar la posición de la punta de la herramienta y obtener esquinas redondeadas configurables (sin necesidad de imágenes PNG).

    Simpletip Simpletip es un complemento para la popular biblioteca jQuery JavaScript. Le permite crear información sobre herramientas con facilidad para cualquier elemento de la página utilizando el poder de los selectores y la gestión de eventos de jQuery. La información sobre herramientas puede ser estática, dinámica o incluso cargada a través de AJAX con una variedad de efectos visuales diferentes.

    Burbujas emergentes de Coda Recrea las burbujas emergentes de Coda, que se muestran al pasar el mouse sobre una imagen descargable.

    4. Ejemplos y demostraciones de menús

    Menú animado suave con jQuery Bonito menú jQuery con un efecto de animación de transición suave. Revisa la demostración aquí .

    Menú que se desvanece: Reemplazo de contenido La página de ejemplo siguiente tiene tres elementos de menú para tres áreas de contenido: "Inicio", "Acerca de" y "Contacto". Cuando se selecciona un elemento de menú, su gráfico de menú se muestra con total opacidad y su área de contenido correspondiente, mientras que los otros elementos de menú aparecen difuminados y sus áreas de contenido ocultas. Con jQuery, puede atenuar el elemento del menú en el que se hace clic, atenuar todos los demás elementos del menú, mostrar el área de contenido correspondiente y ocultar todas las demás áreas de contenido. Revisa la demostración aquí .

    Complemento del menú contextual de jQuery jQuery Context Menu es un complemento del menú contextual para jQuery. Está diseñado para facilitar la implementación de la funcionalidad del menú contextual y requiere un esfuerzo mínimo para configurarlo. Revisa la demostración aquí.

     

    e24TabMenu – Menú de pestañas desplegable AJAX e24TabMenu es un complemento escrito para script.aculo.us. Es un menú de pestañas que se expande y contrae suavemente. Revisa la demostración aquí.

    5. Ejemplos y demostraciones de controles deslizantes

    Control deslizante MooTools con dos perillas Este es el control deslizante MooTools con dos perillas (es decir, un control deslizante de doble clavija), con indicador de rango. Revisa la demostración aquí .

    Barra de desplazamiento con estilo CSS de MooTools Una pequeña pieza de JavaScript que crea una barra de desplazamiento con estilo CSS a partir de la clase "control deslizante" de MooTools. Revisa la demostración aquí .

    Control deslizante ultraversátil para sitios web Un sencillo tutorial paso a paso para implementar un control deslizante ultraversátil con desplazamiento horizontal y efectos animados utilizando MooTools. Revisa la demostración aquí .

    Una mejor paginación Un pequeño script que puede convertir números de paginación feos en un control deslizante atractivo usando MooTools. Revisa la demostración aquí .

    6. Ejemplos y demostraciones de presentaciones de diapositivas

    noobSlide Otro complemento de control deslizante creado con MooTools.

    Easy Slider Easy Slider permite que las imágenes o cualquier contenido se deslice horizontal o verticalmente al hacer clic. Las características incluyen: deslizamiento automático, deslizamiento continuo, botones "Ir al primero" e "Ir al último", controles ocultos, marcado envolvente opcional para los botones de control, deslizamiento vertical, controles deslizantes múltiples en una página. Revisa la demostración aquí .

    Supersized: complemento jQuery de fondo/presentación de diapositivas en pantalla completa Supersized es un complemento jQuery que cambia automáticamente el tamaño de las imágenes (de fondo) al tamaño del navegador y las ejecuta como una presentación de diapositivas. Es liviano y funciona bien con todos los navegadores. Revisa la demostración aquí .

    Presentación de diapositivas animada de JavaScript Las nuevas funciones de esta presentación de diapositivas dinámica de JavaScript incluyen compatibilidad con descripciones, compatibilidad con enlaces, sin restricciones de nombres, compatibilidad con imágenes verticales, degradación elegante y estado de miniatura activo. Revisa la demostración aquí . Blog sobre vibradores

    Cuadros móviles Un control deslizante jQuery con botones para cambiar paneles y acercar y alejar los paneles. Revisa la demostración aquí .

    Carrusel de prototipos con script.aculo.us Un carrusel basado en prototipos que permite la paginación de n elementos. Los elementos dentro del carrusel se pueden extraer del propio HTML y, por lo tanto, los motores de búsqueda pueden indexarlos. También permite paginación vertical, horizontal y agrupada. Revisa la demostración aquí.

    7. Ejemplos y demostraciones de recorte de imágenes

    UvumiTools Crop Esta sencilla herramienta ofrece a sus usuarios la posibilidad de crear un área de selección que se puede utilizar para recortar una imagen en vivo en su sitio web. Puede establecer un tamaño mínimo para la selección, vista previa en tiempo real, soporte para cambio de tamaño HTML, alternancia de encendido y apagado, estilo CSS y más.

     

    Kroppr Script discreto que permite a los usuarios rotar, cambiar el tamaño y recortar sus imágenes, con cambios menores en su sitio web.

    Jcrop Jcrop es la forma rápida y sencilla de agregar funcionalidad de recorte de imágenes a su aplicación web. Combina la facilidad de uso de un complemento jQuery típico con un potente motor de recorte DHTML multiplataforma que es fiel a las aplicaciones gráficas de escritorio familiares.

    8. Ejemplos y demostraciones de vista previa de imágenes

    imgPreview El complemento imgPreview permite a los usuarios obtener una vista previa de una imagen antes de hacer clic en ella y precarga la imagen para que cuando un usuario haga clic en ella no haya tiempo de espera. La vista previa de la imagen se muestra en un cuadro similar a información sobre herramientas al pasar el mouse. Revisa la demostración aquí .

    FancyZoom se encuentra con Prototype Orderedlist reescribió FancyZoom en Prototype con algunos pequeños cambios. Ahora utiliza las esquinas redondeadas de Apple y admite prácticamente cualquier HTML que puedas incluir en un div (imágenes, texto, Flash, etc.). Fue construido usando Prototype y script.aculo.us; No se utilizó AJAX, por lo que ahora funciona con cualquier HTML ya incluido en la página. Revisa la demostración aquí.

    Dojo Zoomer Una demostración con todas las funciones que muestra el poder del kit de herramientas Dojo. El marcado es válido, con dos etiquetas "script" externas que cargan mejoras progresivas en una lista de anclajes y miniaturas que de otro modo sería sencilla. Revisa la demostración aquí .

    9. Ejemplos y demostraciones de carga de archivos

    Cargador de múltiples archivos Le permite crear un formulario en el que los usuarios pueden cargar más de un archivo usando MooTools. Revisa la demostración aquí .

    Fancy Upload FancyUpload es una herramienta de reemplazo de entrada de archivos que presenta un discreto menú de selección de múltiples archivos y carga en cola, con una barra de progreso animada. Es fácil de configurar, independiente del servidor y completamente configurable mediante CSS y XHTML. Utiliza MooTools, por lo que funciona en todos los navegadores modernos. Revisa la demostración aquí .

    Extensión:UploadForm La Extensión:UploadForm es una extensión Ext.form.BasicForm que le permite cargar fácilmente varios archivos a un servidor. Los archivos se agregan primero a una cola y luego se cargan en el servidor. Revisa la demostración aquí.

    10. Ejemplos y demostraciones de autocompletar

    Control de autocompletar Un widget independiente para poner una función de autocompletar en su sitio web. Revisa la demostración aquí .

    Control de autocompletar Cree un filtro estilo Google Suggest con el control de autocompletar. Revisa la demostración aquí .

    Autocompletar Autocompletar es un campo de entrada que permite a los usuarios buscar y seleccionar rápidamente un valor, aprovechando la búsqueda y el filtrado. Revisa la demostración aquí.

    ¡Proto! La lista de cuadros de texto cumple con el autocompletado

     

    11. Ejemplos y demostraciones de Lightbox

    Lightview Lightview fue creado para cambiar la forma en que superpones contenido en un sitio web. Diseñado para complementar su contenido, tiene las siguientes características: precarga inteligente de imágenes, personalización sin CSS, esquinas redondeadas ajustables, no requiere PNG, cambio de tamaño para ajustarse siempre a la pantalla y presentación de diapositivas con un solo clic.

    Sexy LightBox 2 SexyLightBox es un clon más liviano del clásico Lightbox. Soporta todo tipo de imágenes y diferentes tamaños. Las imágenes grandes cambian de tamaño automáticamente para adaptarse al navegador.

    FancyBox Un clon de jQuery Lightbox con algunas características excelentes: cambio de tamaño automático para ajustar imágenes grandes en la ventana; una bonita sombra debajo de los elementos ampliados; agrupación de elementos relacionados con la navegación; visualización de contenido en línea y en iframe; Personalización a través de configuraciones y CSS.

    LightWindow Un clon de Lightbox que renderiza correctamente muchos formatos multimedia, con algunos efectos de animación agradables.

    12. Ejemplos de formularios y demostraciones

    FancyForm FancyForm es un poderoso script de reemplazo de casillas de verificación que brinda máxima flexibilidad para cambiar la apariencia y función de los elementos de formulario HTML. Es accesible, fácil de usar y se degrada fácilmente en todos los navegadores antiguos no compatibles.

    Cómo cambiar los estilos de entrada del formulario en foco con jQuery Este tutorial le ayudará a darle vida a su formulario con clases CSS y valores predeterminados que cambian según el elemento del formulario seleccionado. Todo con sólo un toque de jQuery. Revisa la demostración aquí .

    Form.Check FormCheck es una clase de MooTools que le permite validar un formulario realizando diferentes pruebas antes de enviarlo. Revisa la demostración aquí .

    fValidator fValidator es una herramienta JavaScript gratuita, de código abierto y discreta para manejar la validación de formularios fácilmente.

    Usar valores de entrada como sugerencias Ofrezca a los usuarios sugerencias sobre qué ingresar en los campos de texto. Cada campo se borra automáticamente cuando el usuario hace clic o tabula en él. Si no se ingresa nada, la pista reaparece una vez que el usuario se aleja.

    Elementos de formulario personalizados Este script mejora los elementos del formulario, incluidas casillas de verificación, botones de opción, carga de archivos, campos de texto, áreas de texto, imágenes y los botones de seleccionar, enviar y restablecer. Revisa la demostración aquí .

    13. Ejemplos de tablas y demostraciones

    TableGear Integrado en MooTools, TableGear lleva sus datos a una página web. Maneja datos enviados tanto de llamadas AJAX como de una publicación estándar, y devuelve datos a la aplicación. Revisa la demostración aquí.

    Clasificador de tablas JavaScript Este script de clasificación de tablas JavaScript es fácil de usar, rápido y liviano, con solo 1,7 KB. Incluye formato de filas alternativas, alternancia de clases de encabezado, reconocimiento automático de tipos de datos y clasificación selectiva de columnas. Actualmente puede ordenar cadenas, números y monedas. Revisa la demostración aquí .

     

    DrasticGrid DrasticGrid es una cuadrícula de datos basada en AJAX con soporte de edición. Utiliza MySQL como fuente de datos y admite paginación, clasificación, así como edición, adición y eliminación de registros.

    Sorttable Una forma buena y sencilla de ordenar datos en una tabla con un simple clic en los encabezados de la tabla.

    14. Vale la pena consultar: ejemplos y demostraciones

    typeface.js En lugar de usar imágenes o Flash para mostrar el texto de su sitio web en la fuente que desee, puede usar typeface.js y simplemente escribir en HTML y CSS sin formato, como si sus visitantes tuvieran la fuente instalada localmente.

    Arrastrar y soltar listas ordenables

    Starbox Starbox le permite crear fácilmente todo tipo de cuadros de calificación utilizando una sola imagen PNG. La biblioteca se basa en el marco Prototype JavaScript. Para obtener algunos efectos adicionales, también puedes agregar script.aculo.us.

    Cuadros de diálogo de alerta de jQuery Este complemento de jQuery tiene como objetivo reemplazar la funcionalidad básica de las funciones estándar de JavaScript alert(), confirm() y Prompt(). Revisa la demostración aquí.

    Creación de un mapa interactivo con jQuery en lugar de Flash Este mapa fue creado para ser lo más atractivo posible mediante el uso de animaciones fluidas y gráficos nítidos. Consulta el mapa final aquí .

    jQuery Fundido de entrada.Fundido de salida Este efecto desvanece un elemento al 30% al cargar la página y luego lo lleva a su opacidad total cuando se coloca el cursor sobre él. El efecto se puede asignar a prácticamente cualquier cosa en un sitio web, ya sea una imagen, texto, enlace o incluso un div. Revisa la demostración aquí.

    Cambio de opacidad usando script.aculo.us Este tutorial explica cómo usar script.aculo.us para implementar un bonito efecto de "cambio de opacidad" para una capa y su contenido.

    Efecto de transformación al ingresar/salir del mouse En este tutorial, verá cómo agregar algunos efectos sorprendentes a una lista desordenada al pasar el mouse con el elemento Método: morph y cómo hacer que se pueda hacer clic en una región de elemento de lista completa con Mootools 1.2. El objetivo es convertir una lista aburrida y desordenada en algo divertido en lo que hacer clic. Revisa la demostración aquí .

    Editable Este es un complemento jQuery editable y personalizable. Actualmente, puede convertir cualquier etiqueta (span, div, p, etc.) en entrada de texto, contraseña, área de texto o lista desplegable. Puede ampliarlo fácilmente agregando su propio tipo de entrada usando el objeto "editableFactory".

    15. Ejemplos y demostraciones de AJAX

    Verificador de disponibilidad de nombres de usuario AJAX usando MooTools ¿ Por qué hacer que los usuarios envíen formularios cuando puedes usar AJAX para informarles de inmediato si los nombres de usuario elegidos están disponibles? A continuación se explica cómo implementar un verificador de disponibilidad de nombres de usuario utilizando MooTools 1.2. Revisa la demostración aquí .

    Ajaxify Ajaxify es un complemento de jQuery que puede convertir todos los enlaces de una página web en una carga AJAX y enviar solicitudes. Revisa la demostración aquí.

    Carga de archivos AJAX Este complemento, tanto para jQuery como para Prototype, permite a los usuarios cargar fácilmente varios archivos sin tener que actualizar la página. Y se puede utilizar cualquier elemento para abrir la ventana de selección de archivos. Revisa la demostración aquí.

    La página AJAX se carga usando MooTools Fx.Explode Un bonito efecto de MooTools: haga clic en cualquier elemento Fx.Explode y "explota" fuera de la pantalla. Haz clic en él nuevamente y reaparecerá mágicamente. Revisa la demostración aquí .

    Eliminación de registros AJAX animados usando MooTools Aprenda cómo crear el efecto que se ve en WordPress, donde hace clic para eliminar un artículo, el elemento del menú cambia a rojo y luego desaparece. A continuación se explica cómo lograr esa funcionalidad con MooTools JavaScript. Revisa la demostración aquí .

    (Alabama)Explora más en

    • Codificación
    • AJAX
    • javascript
    • Recursos





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. Más de 45 excelentes recursos y repositorios de fragmentos de código
    4. Lo que necesita saber sobre el alcance de JavaScript

    70 técnicas nuevas y útiles de AJAX y JavaScript

    70 técnicas nuevas y útiles de AJAX y JavaScript

    ¡Registro! Clase magistral de diseño para una interfaz de usuario compleja, con Vitaly Friedman Índice

    programar

    es

    https://pseint.es/static/images/programar-70-tecnicas-nuevas-y-utiles-de-ajax-y-javascript-760-0.jpg

    2024-04-04

     

    70 técnicas nuevas y útiles de AJAX y JavaScript
    70 técnicas nuevas y útiles de AJAX y JavaScript

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20