JavaScript

Como crear un carrusel infinito con jQuery

jQueryforDesigners ha creado un carrusel con jQuery que trabaja de la misma manera que el carrusel horizonal de la página de anuncios de Get a Mac. Ellos han publicado un tutorial (incluye video) donde explican los fundamentos del carrusel y como lo han creado, lllamándolo jQuery Infinite Carousel.

El truco, según comentan, está en construir el DOM con nodos clonados; así, cuando hacemos scroll y llegamos al último ítem, clonamos el inicio de la lista y lo insertamos al final de la lista. Una vez que la animación haya terminado, regresaremos a la posición del primer ítem. Interesante.

Enlace | jQuery Infinite Carousel
Vía | webappers

La semana pasada Google hizo una serie de anuncios como parte del Google I/O conference, pero hubo una novedad que no fue anunciada, tal vez opacada por el gran anuncio de Google Wave.

Muchas personas se retiraron con las sospechas de que Google estaba rastreando javascript por algún tiempo, pero debido a las dudas razonables, nadie se puso a testear si en realidad lo estaba haciendo.

Estos cambios en el buscador fueron revelados por Vanessa Fox y están basados en la manera como Google considera los enlace no-estandars.

Google: Enlaces con Javascript ahora transmiten PageRank y Anchor Text

Googlebot está capacitado ahora para identificar mejor una página web y poder acceder a los eventos onClick en muchos tags. Por ahora, si el evento onClick llama a una función que construye una URL, Googlebot puede interpretarlo si la función forma parte de la página web (y no si es un script externo).

Algunos ejemplos de código que Googlebot puede ahora ejecutar incluye:

  • <div onclick="document.location.href='http://foo.com/'">
  • <tr onclick="myfunction('index.html')"><a href="#" onclick="myfunction()">nueva página </a>
  • <a href="javascript:void(0)" onclick="window.open('welcome.html')">abrir nueva ventana</a>

Estos enlaces pasan tanto anchor text y PageRank. Por tanto, hay que tener los cuidados necesarios para manejarlos y no infringir ninguna directriz del buscador.

Vía | blogstorm

jPlayer es un plugin de jQuery para reproducir y controlar archivos de audio mp3 en una página web. Este reproductor usa un pequeño fichero swf por detrás, que no es mostrado en la página y que sirve para reproducir los archivos; dejando la posibilidad de personalizar totalmente al reproductor con XHML y CSS.

Reproductor de MP3 con Javascript (jQuery)

El plugin ofrece funciones como:

  • Seleccionar el archivo mp3 a reproducir
  • Reproducir, pausar y detener el audio
  • Control de Volumen
  • Observar el progreso de la descarga y reproducción

La página web del creador además pone a disposición una variedad de demos incluyendo el reproductor de un archivo, el reproductor de un playlist o un reproductor basado en texto con una barra de progreso.

Descargar | jPlayer (Reproductor de mp3 con javacript)
Vía | webresourcesdepot

Redimensiona imágenes automáticamente con Fluid Images

Ethan Marcotte había publicado en ALA un artículo sobre Grids fluidos (ancho no fijo), los cuales no quedaban muy bien si introducíamos imágenes dentro de ellos. Por defecto, una imagen mantiene su tamaño dado, el que puede ser de 500px, 100px u 800px; pero ¿cómo podemos hacer para que la imagen se adapte a cualquier ancho automáticamente?

El ha publicado un pequeño script que crea imágenes fluidas. Resumiendo, este script analiza nuestra página web y cambia las imágenes por un GIF transparente, y le aplica la propiedad AlphaImageLoader a cada una. Luego, cuando la ventana es redimensionada, el script automáticamente recalcula proporcionalmente el alto y ancho de las imágenes, y las redimensiona. Lo podemos ver en acción desde el siguiente enlace.

Demo | Fluid Images
Descargar | Fluid Images (JavaScript)
Vía | webappers

jQuery Menu es una gran aplicación que nos ayuda a crear menús desplegables con variados themes y estilos fácilmente. Transforma una lista desordenada de links en menús y sub-menús desplegables con fabulosos diseños y efectos.

Crea menús desplegables fácilmente con jQuery Menu

El script nos permite cambiar la apariencia del menú de manera muy sencilla, ya que utiliza ThemeRoller, con lo que podemos cambiar el tema del menú con solo hacer click o crear nuestros temas rápidamente.

Cuando una lista forma parte de otra lista, jQuery Menu por defecto crea un menú al estilo iPod (¡genial!). Además, utiliza los atributos de ARIA (Accessible Rich Internet Applications Suite).

Requiere jQuery y jQuery UI

Demo y descarga| jQuery Menu
Vía | webresourcesdepot

Newsletter Module es un script que nos permite manejar boletines de noticias. Con este script podemos gestionar direcciones de correo electrónico, crear categorías, configurar plantillas, adjuntar archivos y además goza de una buena documentación.

Script para Newsletter con PHP y Ajax

Newsletter Module es un script construido con PHP y JQuery, que mediante su inteface sencilla, nos permite:

  • Crear listas de correos organizadas por categorías
  • Enviar emails a cualquier email o categoría seleccionada
  • Ver la vista previa de los mensajes antes de enviarlos
  • Utiliza 1 archivo PHP y viene con un archivo .SQL para crear las tablas en MySQL

Ahora bien, como el script es utilizado únicamente en la interfaz de administración. Debemos crear una interfaz para los usuarios que quieran suscribirse al newsletter insertando sus correos a las categorías seleccionadas (Ver demo).

Descargar | Newsletter Module
Vía | tutsplus

Suscríbete

  • Suscribete a nuestro feed
  • Add to Google Reader or Homepage
  • Subscribe in NewsGator Online
  • Add to My AOL
  • Subscribe in Bloglines
  • Add to netvibes