JavaScript

Tips de usabilidad con Ajax

En jankoatwarpspeed nos comentan algunos tips de usabilidad al realizar consultas con ajax. La idea principal es ayudar a los usuarios de la aplicación a identificar fácilmente que es lo que esta ocurriendo en la página web y prevenir que cometan errores durante el uso de la aplicación...

En internet, existe una multitud de galerías de imágenes que podemos descargar gratuitamente; pero es difícil encontrar una que sea compatible con el iPhone.

Galería de imágenes optimizada para el iPhone

Jaipho es una pequeña aplicación hecha en JavaScript que nos permite montar una galería de imágenes especialmente optimizada para los iPhones.

Funciona de una manera muy similar a la aplicación “Fotos” y puede mostrar las imágenes:

  • como un slideshow
  • con botones para adelantar o retroceder
  • usando movimiento de los dedos

Además, puede ser acompañado de Pipho, una aplicación PHP que nos permite crear versiones dinámicas de Jaipho.

Con Pipho podemos ver fotos almacenadas en una carpeta, crear thumbnails redimensionados, realizar slides y generar el código JavaScript de Jaipho automáticamente. Requiere de PHP 5  y la librería GD.

Demo | Jaipho Demo
Descargar | Jaipho

Web-kreation esta compartiendo un bien diseñado panel de login desplegable, muy útil para usar en websites con espacio limitado.

Panel desplegable de login con MooTools/jQuery

Tiene 2 versiones:

  • Usando MooTools
  • Usando jQuery (versión mejorada en lo que respecta a diseño y funcionalidad)

El panel funciona sobropiendo el contenido en lugar de empujarlo, y puede ser fácilmente convertido por cualquier otra funcionalidad (cómo navegación, búsqueda, formulario de contacto, etc.).

También ha sido integrado en Wordpress mediante plugins:

Demo | Sliding login panel with jQuery
Descargar | Nice & Clean Sliding Login Panel built with jQuery
Vía | webresourcesdepot

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

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