Photobox - Galería de imágenes basada en jQuery

Photobox es un plugin basado en jQuery que saca partido de las transformaciones en CSS3 para permitir una excelente experiencia de usuario a la hora de mostrarte galerías de imágenes.

Las imágenes en tamaño natural son mostradas en una ventana modal que, mediante CSS3 se obtienen transiciones muy suaves.

Sitio Web | Photobox
Demo | Photobox
Compatibilidad | Funciona en forma adecuada en Firefox y en Chrome (ya que utiliza acelaración por hardware) y en IE9+ funciona de la manera horrible que los usuarios de este manevador se merecen ¡Cuack! (dicho por el autor)

Leer más

Efectos especiales de imágenes en listas desordenadas

Liffect es una aplicación Web que nos genera el CSS necesario para dotar de animación a las miniaturas de imágenes incluídas en listas desordenadas.

Es necesario:

1. Individualizar el encabezado de la lista desordenada con el atributo relacionado con el tipo de animación. Por ejemplo: 

   <ul data-liffect="fadeIn">

2. Utilizar el CSS que la aplicación genera
3. Utilizar el Javascript generado

La lista de efectos es la siguiente, pudiéndose además elegir la duración y el delay general

• Fade In
• Zoom In
• Zoom Out
• Slide Left
• Slide Right
• Slide Top
• Slide Bottom
• Flip
• Flip In horizontal
• Flip In vertical
• Bounce In
• Bounce In Up
• Bounce In Right
• Bounce In Down
• Bounce In Left
• Page Top
• Page Top (back)
• Page Right
• Page Right (back)
• Page Bottom
• Page Bottom (back)
• Page Left
• Page Left (back)
• Star Wars

Sitio Web | Liffect
Vía | Juaniquillo @ Delicious

Leer más

Como crear texto curvo con CSS3

Mientras que CSS3 te permite rotar texto, es medianamente complicado el arreglo de un texto a lo largo de path curvo.

Arctext.js es un script en jQuery inspirado en Lettering.js

Este script calcula la correcta rotación en CSS3 de cada letra a través del path curvo; distribuyendo así la letras en forma uniforme a través del arco (imaginario) según el radio informado.

Las siguientes opciones están disponible para implementar el efecto

radius  : 0,
// the minimum value allowed is
// half of the word length.
// if set to -1, the word will be straight.
 
dir     : 1,
// 1: curve is down,
// -1: curve is up
 
rotate  : true,
// if true each letter should be rotated.
 
fitText : false
// if you want to try out the
// fitText plugin (http://fittextjs.com/)
// set this to true.
// Don't forget, the wrapper should be fluid.

Sitio Web | Arctext

Leer más

99 Lime - HTML QuickStart

HTML KickStart es un framework; un conjunto formado por fragmentos de HTML5, CSS y archivos jQuery.

Este framework contiene elementos de diseño que le dan al Webmaster una buena ventaja inicial al momento de dar inicio a un nuevo proyecto Web.

El tagline del producto, es más que elocuente: "Si sabés tipear HTML y editar CSS, esto es para vos". El frameworks es sencillo de utilizar; contiene layouts, slideshows, menúes, grillas (muy flexibles), trabaja con contenedores para las imágenes (aka image placeholders), y ofrece botones, pestañas y un largo, largo etcétera.

Si querés ahorrarte recursos a la hora de trabajar en tiempo de diseño; podés descargarte gratis este valioso framework.

Sitio Web | HTML KickStart
Vía | Los marcadores de Delicious de Juaniquillo (Gracias Víctor!)

Leer más

Como mirar relaciones en Twitter

Whishbone es un proyecto de Windward Studios que nos permite llevar a cabo consultas sobre Twitter y ver la medida en que estas consultas se relacionan con otros temas. La aplicación utiliza jQuery.

Los nodos que se generan como relaciones contienen información (sólo es necesario llevar el puntero del mouse sobre los mismos) que se nos presenta en modo tooltip

Es posible efectuar acciones sobre el gráfico como acercar/alejar, mover y cambiar también foco del resultado.

Sitio Web | Whisbone

Leer más

Encabezados escalables con FitText

FitText es un plugin, una librería en jQuery que permite—en los diseños fluídos—adaptar el tamaño de la fuente de los encabezados según el ancho del contenedor correspondiente.

Sitio Web | FitText

Leer más

Como insertar un video de YouTube como fondo de página

jQuery Tubular es un proyecto Web alojado en Google Code que permite miediante una librería en jQuery insertar un video de YouTube como fondo de una página Web o blog.

$('body').tubular('_VKW_M_uVjw','wrapper');

Para su correcta funcionabilidad es condición que Javascript esté habilitado en el navegador e instalada la última versión de Flash disponible.

Sitio Web | jQuery Tubular
Demo | Tubular, a YouTube Background Player jQuery Plugin
Licencia | MIT

Leer más

Page Speed ahora es un servicio online

Page Speed Online es un nuevo lanzamiento de Google desde Google Labs.

Page Speed Online es una aplicación Web que analiza el contenido de una página Web generando sugerencias para que la página cargue más rápido.

Los sitios que cargan rápido generan una mejor experiencia del lado del usuario. Y—de un tiempo a esta parte—Google está considerando este factor para organizar los resultados de búsquedas orgánicas.

Esta aplicación no reemplaza de manera alguna las extensiones de Page Speed, disponibles tanto para Chrome como para Firefox.

Sitio Web | Page Speed Online

Leer más

Como agregar un video en background con jQuery

Tubular es un projecto de Sean Mc Cambridge Design alojado en Google Code. Se trata de una librería en jQuery que permite insertar cualquier video de YouTube como fondo de cualquier página Web.

Sólo requiere que del lado del cliente esté instalado Flash y Javascript habilitado.
Para la instalación, sóo seguir los siguientes pasos:

Leer jQuery en la página

<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

—Sólo recordar que luego del 31/01/01 jQuery no permitirá hacer más hotlink

Aunque tradicionalmente los scripts son llamados en el HEAD de la página; comienza a ser una buena práctica llamar a Javascript antes del cierre de la etiqueta BODY

Cargar swfobject

<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>

Cargar el plugin

<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.js"></script>

Ejecutar el script

$('body').tubular('_VKW_M_uVjw','wrapper');

Donde _VKW_M_uVjw es el ID del video de YouTube y wraper es en el ejemplo el nombre del DIV

Sitio Web | Tubular
Demo | Tubular
Licencia | MIT

Leer más

Audio HTML5 con audio.js

audio.js es un plugin en jQuery que permite utilizar la etiqueta audio para tipos de archivos no admitivos o en navegadores antiguos.

Este script impide que el navegador utilice QuickTime si el mismo soporta—en forma nativa—MIME audio/x-m4a.

Sitio Web | audio.js

Leer más

El único script en el HEAD | Head JS

El HEAD es el peor lugar para cargar scripts. En varios escenarios, pone la carga de la página muy lenta.

La mejor práctica—hoy día—es mover la carga al final de la página; pero aquí se compromete cualquier utilización de HTML5y CSS3.

Una buena opción que remedia todos los males es utilizar Head JS:

head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {

// all done

});

El uso y concepto este script radica en un concepto simple: lee los scripts en paralelo, pero los ejecuta en orden. Además, Head JS permite además (mediante el uso de CLASSes):

• organiza la carga de Javascript
• habilitar HTML5
• detectar el ancho de pantalla
• CSS dinámico
• rutear el CSS
• detectar el tipo de navegador
• deetctar la carga de determiando script

Sitio Web | Head JS

Leer más

Como insertar un flipbook en tu Web con jQuery | Viewbook

Viewbook es un plugin basado en jQuery que de una manera fácil y práctica permite que el contenido de una página sea mostrado como si de un flipbook se tratase.

Para la instalación, es necesario que el contenido tenga un markup—definitivamente—semántico; las opciones permiten de manera amplia customizar la visualización, así también como la manera que el usuario pueda interactuar con el paginado. Finalmente los contenidos permanecen por completo, accesibles.

Sitio Web | Viewbook
Versión actual | 1.0.1
Licencia | MIT, GPL

Leer más

Javascript y jQuery para principiantes

Essential JavaScript & jQuery Design Patterns For Beginners es un interesante ebook que—recientemente—ha publicado Addy Osmani. Aunque en inglés, este texto muestra no otra cosa que soluciones reutilizables (aka patterns) ante problemas comunes que se presentan en tiempo de desarrollo.

No es obligatorio descargar este libro; ya que puede consultarse online, también.

Sitio Web | Essential JavaScript & jQuery Design Patterns For Beginners
Licencia | Creative Commons Attribution-NonCommercial-ShareAlike 3.0 unported license
Tamaño | 2.0 Mb

Leer más

Aplicaciones Web menores de 10Kb | 10K Apart

10K Apart significó un regreso a las fuentes; a los inicios de la programación donde con cada byte podía irte la vida :-)

¿El desafío de 10K Apart? desarrollar una aplicación Web por debajo de los 10Kb.

Con predilección al uso de HTML5—aunque eso no era materia obligada en la participación—pero, sí lo era el uso de las librerías; ya que debía ser:

• jQuery
• Prototype
• Typekit

La galería de trabajos cuenta con poco mas de 350 trabajos

En lo particular, me han gustado mucho Chroma y Pintura, 2 aplicaciones para trabajar con colores y paletas de colores en cuanto al diseño.

Sitio Web | 10K Apart

Leer más

editEase

un simple CMS basado en jQuery

editEase es un proyecto alojado en Google y es un CMS basado en jQuery que no requiere siquiera una base de datos (!)

Es rápida y fácilmente configurable y se presenta como una atractiva idea para pequeños sitios que no necesitan una robusta tecnología del lado del servidor.

En la siguiente dirección http://editease.jquerystuff.net/ se puede llevar a cabo una prueba de edición.

Sólo hacer un log en Admin | Username: demo Password: access

Vista del editor


Es un ver-para-creer porque la edición del Sitio se lleva a cabo directamente sobre el browser. Incluyendo también un FileManager.

Este proyecto se distribuye con una licencia MIT
Sitio Web | editEase

Leer más

Bumpbox

No sólo otro clon de lightbox

Bumpbox tiene pocas ventajas sobre otras versiones de lightbox, y es que además de soportar varios y diferentes tipos de archivos, soporta además, archivos PDF.



La implementación es verdaderamente sencilla, como cualquier versión de lightbox. Sólo hay que enlazar los archivos JS en el HEAD y declarar las CLASSes correspondientes.

A diferencias de otros, Bumpbox en forma automática detecta el tipo de archivo que deseamos mostrar; facilitando así el proceso de integración.

Es compatible con los navegadores más modernos:

• Firefox 3 - 3.5
• Internet Explorer 7 | 8
• Google Chrome
• Apple Safari 3 | 4
• Opera 9.04

Ver | Demo
Descargar | Bumpbox

Leer más

efecto Page Peel | CSS + JQuery

El efecto Page Peel o de hoja doblada puede llevarse a cabo (mediante JQuery y CSS) siguiendo las instrucciones que aparecen en el blog de Sohtanaka
El concepto es simple y fácil de implementar, si se siguen las indicaciones del tutorial.



Sitio Web | Sohtanaka
Ver demo | Page Peel

Leer más

Un background siempre a pantalla completa

Supersized es un script en JQuery que hace las cosas muy fáciles ante la eterna pregunta ¿cómo diseño el layout para una imagen de fondo que se adapte a cualquier resolución?

La respuesta:

Supersized

Ventajas del uso del script

• Redimensiona cualquier imagen de fondo en el body para que, manteniendo sus proporciones, la misma ocupe el ancho de la ventana.
• No necesita un marcado extra, no hay barras de desplazamiento.
• Compatible con Firefox, Safari, Opera, IE7, and IE6.
• Adicionalmente, se puede trabajar el fondo como un slideshow cíclico.

No existen muchas consideraciones, pero sí algunas en cuanto al HTML y el CSS a utilizar.

Código HTML

<div id="supersize">
     <img class="activeslide" src="http://www.example.com/picture.jpg" />
     <a href="http://www.example.com/><img src="http://www.example.com/imagen.jpg" /></a>
</div>

Código CSS

body {
     overflow:hidden;
}
#supersize img, #supersize a{
 height:100%;
 width:100%;
 display:none;
}
#supersize .activeslide, #supersize .activeslide img{
 display:inline;
}

Ver | demo
Visto en | Build Internet

Leer más