Desarrollo Web

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

Una de las características más reconocidas de Google es su velocidad. Y ellos, han querido compartir con toda la comunidad de Firefox un extensión que han creado especialmente para medir el rendimiento de sus aplicaciones.

Page Speed es una extensión para Firefox creada por Google que realiza una prueba de performarce de nuestras páginas Webs. Esta extensión se integra a Firebug, y para ejecutarla hay que presionar el botón “Analyze Performance”, y de inmediato recibiremos sugerencias de cómo cambiar nuestras páginas web para volverlas más rápidas.

Por ejemplo, Page Speed automáticamente optimiza las imágenes para nosotros, proporcionándonos un versión comprimida que podemos usar inmediatamente en nuestro sitio web. Además, identifica como son cargados los ficheros JavaScript y CSS en nuestra página web, y si alguno de sus elementos no han sido utilizados, nos sugerirá que los retiremos. Estas líneas de código menos reducen el tiempo de carga que nuestros usuarios gastan esperando que la web cargue y se muestre por completo...

Este es un tip para trabajar con fuentes ems sin ningún problema. Recuerden que la ventaja de trabajar con ems, en lugar de pixeles, es la flexibilidad que tiene, permitiendo a los lectores poder incrementar o reducir el tamaño del texto a su gusto y antojo.

Para poder definir el tamaño de las fuentes con CSS de una manera coherente, debemos primero igualar 1em a 10px para toda la página.

Y luego, establecer el tamaño de la fuente de las secciones o elementos de nuestro sitio, por ejemplo el contenido.

1.6em es igual a 16px.

El line-height es la distancia entre las lineas.

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.

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

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

Open Video Player es un proyecto comunitario bajo el apoyo de empresas como Adobe, Microsoft, Akamai entre otras, con el objeto de promover y compartir un reproductor open source que tome en cuenta las mejores prácticas para su desarrollo y monetización.

Viene en 2 versiones: Para Flash y Silverlight.

Open Video Player es un reproductor listo para usar, pero que también nos ofrece su código fuente que podemos adaptar y personalizar fácilmente. El reproductor de video puede ser totalmente configurado desde el color de sus botones y herramientas incluidas.

Demo| Open Video Player
Descargar | Video Player
Vía | webresourcesdepot