Existen varias tecnologías para mostrar notificaciones de manera no obstrusiva en nuestros escritorios, aplicaciones o navegadores, como las que podemos ver en Ubuntu, Gravity o WinAmp. Tanto Mumbles como Growl o Snarl tienen un funcionamiento y una apariencia similar.

Como esta técnica para mostrar información en directo a los usuarios en ese formato nos ha parecido muy interesante, nos pusimos a buscar plugins de jQuery que consiguiesen ese efecto y encontramos unos cuantos. Sin embargo, el que más nos llamó la atención fue el plugin jQuery Notice de Tim Benniks.

JavaScript

Éste es el código JavaScript que se ha utilizado en el ejemplo. El plugin simplemente amplía el framework jQuery, permitiéndonos activar un mensaje mediante una llamada a la función noticeAdd().

Una característica interesante de este plugin es que nos permite agregar una clase CSS al mensaje de aviso para poder darle estilo.

Por ejemplo, para el mensaje de error hemos agregado la clase .error y en el CSS sólo hemos tenido que añadir un color de fondo.

$(document).ready(function()
{
		jQuery.noticeAdd({
			text: 'Éste es una sencillo aviso que utiliza el plugin jQuery Notice. Haz clic en la X de la esquina para borrarlo.',
			stay: true
		});

	$('.add').click(function()
	{
		jQuery.noticeAdd({
			text: 'Este aviso hay que borrarlo haciendo clic.',
			stay: true
		});
	});

	$('.add2').click(function()
	{
		jQuery.noticeAdd({
			text: 'Este aviso se borra solo.',
			stay: false
		});
	});

		$('.add3').click(function()
	{
		jQuery.noticeAdd({
			text: '¡Esto es un aviso de error!',
			stay: false,
			type: 'error'
		});
	});

				$('.add4').click(function()
	{
		jQuery.noticeAdd({
			text: '¡Esto es un aviso de éxito!',
			stay: false,
			type: 'success'
		});
	});

	$('.remove').click(function()
	{
		jQuery.noticeRemove($('.notice-item-wrapper'), 400);
	});
});

HTML

<ul>
  <li class="add">Haz clic aquí para ver un aviso que tendrás que borrar</li>
  <li class="add2">Haz clic aquí para ver un aviso que desaparece solo</li>
  <li class="add3">Aviso de error</li>
  <li class="add4">Aviso de éxito</li>
  <li class="remove">Borrar todos los avisos activos</li>
</ul>

o bien los archivos del plugin.

Fuente: jQuery growl notification plugin [paper mashup]

Bit.ly es un estupendo servicio de acortamiento de URLs que cuenta con el importante respaldo de ser el servicio por defecto en Twitter.

Destaca por su fiabilidad, las URLs tan cortas que genera, y la información que proporcionan sobre una URL dada. Hace poco que Bit.ly actualizó su API a la versión 3.0, así que vamos a mostrarte cómo puedes crear o expandir URLs cortas utilizando Bit.ly.

/* devuelve la URL acortada */
function get_bitly_short_url($url,$login,$appkey,$format='txt') {
	$connectURL = 'http://api.bit.ly/v3/shorten?login='.$login.'&apiKey='.$appkey.'&uri='.urlencode($url).'&format='.$format;
	return curl_get_result($connectURL);
}

/* devuelve la URL expandida */
function get_bitly_long_url($url,$login,$appkey,$format='txt') {
	$connectURL = 'http://api.bit.ly/v3/expand?login='.$login.'&apiKey='.$appkey.'&shortUrl='.urlencode($url).'&format='.$format;
	return curl_get_result($connectURL);
}

/* devuelve la URL con varios datos */
function curl_get_result($url) {
	$ch = curl_init();
	$timeout = 5;
	curl_setopt($ch,CURLOPT_URL,$url);
	curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
	curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);
	$data = curl_exec($ch);
	curl_close($ch);
	return $data;
}

/* obtiene la URL corta */
$short_url = get_bitly_short_url('http://www.webmasterio.com/','webmasterio','xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');

/* obtiene la URL larga a partir de la corta */
$long_url = get_bitly_long_url($short_url,'webmasterio','xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');

Todo lo que hay que hacer es pasarle tu clave de aplicación y login (hay que registrarse para los servicios de la API), la URL larga o corta, y el formato en el que quieres que te devuelva el resultado. Si sólo quieres la URL sin más información, utiliza el formato por defecto TXT. Recuperar la información en formatos XML o JSON te proporcionará muchos más datos sobre la URL.

Fuente: Create Bit.ly Short URLs Using PHP: API Version 3 [david walsh blog]

Existe un buen número de efectos en jQuery que también pueden hacerse con CSS, como por ejemplo revelar el contenido extra de un área determinada cuando se hacer hover sobre ella con el ratón, pero con jQuery conseguimos darle un aspecto más atractivo.

Este tutorial explica cómo crear una galería de imágenes con viñetas, y cómo conseguir que al hacer clic sobre ellas se revele la imagen completa e información adicional sobre ella.

El funcionamiento de este script es el siguiente:

1. El evento se inicia al darle al botón de “Más información”
2. “Crecen” dos cosas: todo el contenedor, y el div que contiene la foto
3. Desaparece el botón de “Más información”
4. Aparecen el área de “Información” y el botón de cerrar

CSS

.foto-area
{
	width: 100px;
	height: 130px;
	padding: 10px;
	border: 1px solid #666;
	overflow: hidden;
	position: relative;
	margin: 10px;
	background: white;
}
#foto
{
	width: 100px;
	height: 100px;
	background: url(imagenes/mthood.jpg) center center;
	margin-bottom: 5px;
}
.info-area
{
	opacity: 0.0;
}
a.mas-info
{
	display: block;
	width: 89px;
	height: 26px;
	background: url(imagenes/masInfo.jpg);
	text-indent: -9999px;
}
a.cerrar
{
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: block;
	width: 20px;
	height: 21px;
	background: url(imagenes/botonCerrar.jpg);
	text-indent: -9999px;
}

jQuery

	$(document).ready(function(){

		$(".mas-info").click(function(){
			$(this).parents(".foto-area").animate({
					width: "500px",
					height: "470px",
			        borderWidth: "10px"
			      }, 600 );

			$(this).fadeOut();

			$("#foto").animate({
		        width: "500px",
				height: "375px"
			      }, 600 );
			$(".info-area").animate({
		        opacity: 1.0,
			      }, 600 );
			});

		$(".foto-area .cerrar").click(function(){
			$(this).parents(".foto-area-1").animate({
					width: "100px",
					height: "130px",
			        borderWidth: "1px"
			      }, 600 );

			$(".mas-info").fadeIn();

			$("#foto").animate({
		        width: "100px",
				height: "100px"
			      }, 600 );
			$(".info-area").animate({
		        opacity: 0.0,
			      }, 600 );
			});

		});

Aunque el código funciona bien, tiene algunos problemas y limitaciones:

• El tamaño al que crecen .foto-area y #foto se ha especificado en el código de jQuery. Sería mucho mejor si en lugar de eso, crecieran en base al tamaño de la imagen, quizá con innerWidth.
• La forma de referenciar los elementos de la página también es mejorable; habría que buscar un modo de referenciar padres e hijos para reducir la cantidad de código.

o bien los archivos de ejemplo.

Fuente: Learning jQuery: Revealing Photo Slider (css-tricks)

¿Eres fotógrafo, dibujante o diseñador y quieres sorprender a los visitantes de tu web con una muestra de tus últimos trabajos? ¿Quieres dar un aspecto atractivo a tu portafolio con un carrusel de imágenes que puede hacerse con unas pocas líneas de código?

Entonces sigue los sencillos pasos que te mostramos en este tutorial y pronto podrás crear tu propia galería de imágenes.

Básicamente, los pasos que tenemos que realizar son:

• mostrar sólo la primera imagen y ocultar las demás
• colocar una clase “actual” en la lista de elementos
• sólo hay que ejecutar la función una vez cuando tenga el estado “actual”

Eso es todo, así de fácil. Pasamos a ver el código:

HTML

		<div class="carrusel">
			<ul class="listaReciente">
				<li><a class="actual" href="#imagen1">1</a></li>
				<li><a href="#imagen2">2</a></li>
				<li><a href="#imagen3">3</a></li>
			</ul>
			<img id="imagen1" src="imagen-1.gif" alt="Imagen 1 del carrusel" />
			<img id="imagen2" src="imagen-2.gif" alt="Imagen 2 del carrusel" />
			<img id="imagen3" src="imagen-3.gif" alt="Imagen 3 del carrusel" />
		</div>

CSS

En este ejemplo la lista desordenada tiene posición absoluta, y de esa forma podemos posicionar fácilmente los elementos de la lista sobre las imágenes.

		.carrusel
		{
			position: relative;
			background: #fafafa;
			width: 403px;
			height: 240px;
			border: 1px solid #e5e5e5;
			margin-bottom: 20px;
		}

		.carrusel img
		{
			position: absolute;
			top: 3px;
			left: 3px;
			z-index: 10;
			background: #fff;
		}

		ul.listaReciente
		{
			position: absolute;
			bottom: 12px;
			right: 4px;
			list-style: none;
			z-index: 20;
		}

		ul.listaReciente li { display: inline; }

		ul.listaReciente li a, ul.listaReciente li a:visited
		{
			display: block;
			float: left;
			background: #e5e5e5;
			padding: 4px 8px;
			margin-right: 1px;
			color: #000;
			text-decoration: none;
			cursor: pointer;
		}

		ul.listaReciente li a:hover, ul.listaReciente li a:visited:hover
		{
			background: #666; color: #fff;
		}

		ul.listaReciente li a.actual
		{
			background: #f00;
			color: #fff;
		}

jQuery

Vamos a asegurarnos de que cuando un elemento de la lista posea la clase “actual”, el script no se ejecute otra vez.

		$(function()
		{
			var imgWrapper = $('.carrusel > img');

			// mostrar sólo la primera imagen, ocultar el resto

			imgWrapper.hide().filter(':first').show();

			$('ul.listaReciente li a').click(function ()
			{
				// comprobar si este elemento no tiene class="actual"
				// si tiene class="actual" no debe ejecutar el script de nuevo

				if (this.className.indexOf('actual') == -1)
				{
					imgWrapper.hide();
					imgWrapper.filter(this.hash).fadeIn(500);
					$('ul.listaReciente li a').removeClass('actual');
					$(this).addClass('actual');
				}
				return false;
			});
		});

Fuente: Simple Slideshow with jQuery [icng]

El navegador Google Chrome, del mismo modo en que lo hace Firefox, nos brinda la posibilidad de aumentar sus funciones y prestaciones mediante el uso de extensiones.

Si eres desarrollador web, sabrás que Google Chrome trae incorporado un buen conjunto de herramientas de desarrollo para hacerte la vida más fácil, pero también hay un buen número de extensiones que pondrán nuevas herramientas a tu disposición. Lo bueno de las extensiones es que te permiten ejecutar tareas que normalmente te obligarían a recurrir a otra aplicación, y poder hacer otras cosas sin tener que salir del navegador se convierte en un gran ahorro de tiempo.

Aquí tienes 13 extensiones de Google Chrome que te resultarán de lo más útil:

Color Picker

Color Picker te permite obtener rápidamente los valores Hexadecimales y RGB de cualquier color. También podrás ajustar Tono, Saturación y Equilibrio de color.

Firebug Lite

Firebug Lite es una herramienta para desarrolladores web que nos permite editar, depurar y monitorizar en tiempo real el HTML, CSS y JavaScript de cualquier página web.

Domain Availability Checker

Esta extensión comprueba la disponibilidad de un nombre de dominio. ¿Para qué asomarte a otra página cuando puedes comprobarlo desde tu barra de herramientas?

Aviary Screen Capture

Aviary Screen Capture nos da la posibilidad de hacer capturas de pantalla de cualquier web y editarla directamente en el navegador con las aplicaciones de Aviary.com. Además nos brinda un conveniente acceso a la web y las herramientas de Aviary.

Lorem Ipsum Generator

Lorem Ipsum Generator resulta una forma fácil y conveniente de generar texto de relleno para la maquetación de nuestras páginas.

IE Tab

IE Tab es una extensión que utiliza Internet Explorer para mostrar páginas web en una pestaña de Chrome. Algunas páginas sólo pueden visualizarse utilizando IE, y con esta extensión ahora podremos verlas sin abandonar Chrome. Resulta una estupenda herramienta para desarrolladores web que quieran probar el motor de renderizado de IE,usuarios que utilicen páginas con controles ActiveX, o bien que quieran utilizar la vista del explorador para archivos locales.

MeasureIt!

MeasureIt! nos brinda la posibilidad de dibujar una regla que nos muestra la anchura y altura en pixels de cualquier elemento de una página web.

PlainClothes

Esta extensión elimina el estilo de una página web. La página quedará con el texto en color negro, los fondos en blanco, los enlaces no visitados aparecerán en azul y los visitados en morado, y todos los enlaces estarán subrayados. Podemos cambiar los colores por otros que nos gusten más, y todo el texto se mostrará en la fuente por defecto (tal como se haya definido en“Options” > “Under the Hood” > “Change font and language settings”).

Eye Dropper

Esta extensión contiene un Cuentagotas y un Selector de Color que nos permiten elegir colores desde cualquier página web o desde un avanzado selector de color.

Speed Tracer

Speed Tracer es una herramienta que nos ayuda a identificar y corregir problemas de rendimiento en nuestras aplicaciones web. Muestra datos generados por el navegador y los analiza mientras se ejecuta nuestra aplicación. Speed Tracer está disponible como extensión de Chrome y funciona en todas las plataformas que soportan extensiones (Windows y Linux).

Pendule

Pendule amplía las herramientas de desarrollo que Chrome trae ya incorporadas.

Resolution Test

Resolution Test cambia el tamaño de la ventana del navegador para que los desarrolladores puedan previsualizar sus páginas web en diferentes resoluciones de pantalla. Incluye una lista de las resoluciones más comunes y también posee una opción de personalización para añadir resoluciones propias.

Snippy

Snippy nos permite tomar trozos de páginas web y guardarlos para su uso futuro. Captura contenido enriquecido y preserva el formato, así que podemos guardar párrafos, imágenes, enlaces y mucho más.

Fuente: 13 Useful Google Chrome Extensions for Web Developers [web design ledger]

Tanto los principiantes como los programadores más expertos pueden cometer errores en la codificación de sus archivos HTML y CSS, ya sea por descuido o por falta de experiencia.

Crear un código limpio es muy importante y te ayudará a mejorar tu habilidad como desarrollador web, además de ahorrarte el tiempo que perderías en posteriores ediciones. Nunca está de más revisar el código aunque seas un desarrollador experto, porque la causa de muchos de estos errores es hacer las cosas con demasiadas prisas y no haber observado unas buenas técnicas de codificación desde el principio.

Aquí tienes una útil lista de los errores y equivocaciones más comunes que hemos observado tanto en nuestros propios trabajos como en los ajenos.

Errores de HTML

Olvidarse de cerrar las etiquetas

Esto es muy habitual, especialmente entre los principiantes. Hay varias etiquetas que requieren sus etiquetas de cierre, como div, strong o los enlaces, por nombrar sólo unas pocas. Otras etiquetas requieren una barra de cierre para terminar la línea, como es el caso de la etiqueta img.

<div>Texto dentro del DIV.</div>
<img src="imagenes/nombredelaimagen.jpg" />

Utilizar un DOCTYPE inadecuado

HTML nos exige que empecemos el documento con una declaración DOCTYPE correcta. Debe hacerse antes de cualquier otro elemento del código, y comenzar el documento declarando qué tipo de HTML estamos usando.

Éste es el DOCTYPE para XHTML 1.0 Transicional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Anidar etiquetas de forma incorrecta

Es muy importante abrir y cerrar las etiquetas en el orden apropiado. Cuando abrimos algo (un div, por ejemplo), hay que cerrarlo antes de que cualquier elemento superior pueda cerrarse.

El ejemplo siguiente es incorrecto:

<div><strong>texto</div></strong>

Escribir las etiquetas en mayúsculas

Esto se considera simplemente una mala práctica, pero hará que tu código no pueda ser validado. Siempre deberíamos utilizar minúsculas para etiquetas como los div, los enlaces o las imágenes.

El ejemplo siguiente es incorrecto:

<DIV></DIV>

Olvidarse de abrir o cerrar comillas

Este error puede verse mucho en los principiantes, y provoca código erróneo y que las cosas no funcionen adecuadamente. HTML requiere comillas dobles que hay que abrir y cerrar correctamente.

Esto es un ejemplo de su uso correcto:

<img src="imagenes/imagendecabecera.jpg" />

Usar estilos en línea

Su uso también se considera mala práctica. Los estilos en línea funcionan pero terminan convirtiéndose en dolores de cabeza más tarde. El estilo de los elementos debería aplicarse de forma global mediante una hoja de estilos externa, y así será mucho más fácil editar y añadir estilos posteriormente.

Un ejemplo de estilos en línea:

<a href="enlace.html" style="color: #000; text-decoration: none;">nombre del enlace</a>

No codificar los caracteres especiales

Los caracteres como “©” o “&” deberían mostrarse utilizando el código HTML apropiado para cada uno. En la red pueden encontrarse infinidad de listas de caracteres con sus equivalencias en las entidades HTML correspondientes.

Confundir “class” con “id”

Las clases (“class”) son para elementos que se utilizan más de una vez en la página. Como por ejemplo, el estilo de un enlace al que se hace referencia varias veces desde una página pero que no sigue el estilo global de los demás enlaces. Los identificadores (“id”) son elementos a los que sólo se hace referencia una vez, como el div de la cabecera. A menudo se abusa de las clases y los identificadores, y también se utilizan en lugares innecesarios. Intenta usar el menor número posible de atributos.

Errores de CSS

Olvidarse de los cierres apropiados

Todos los elementos comienzan con una llave de apertura y terminan con una llave de cierre. Todos los estilos tienen que terminar con un punto y coma. La última declaración dentro de un elemento no necesita el punto y coma, pero es mejor utilizarlo porque en caso de que tengas que añadir más elementos posteriormente, es posible que te olvides de añadirlo.

Esto es un ejemplo de uso correcto:

#nombre_div
{
	width: 40px;
	height: 30px;
}

Es discutible si es conveniente condensar la hoja de estilos escribiendo todas las declaraciones de un div en una sola línea. Yo prefiero poner cada declaración en su propia línea porque creo que es más fácil editar el código de esa manera, pero otros argumentan que eso produce un código más largo y unos archivos CSS más pesados.

No usar estilos globales

El estilo de muchos elementos debería aplicarse de forma global, como los estilos de párrafo y cabecera para el texto o los estilos de los enlaces. Esto reducirá el riesgo de errores y también la cantidad de código de tu hoja de estilos.

No utilizar nombres únicos para los identificadores y las clases

Es muy importante elegir nombres que sean únicos para facilitar su posterior edición y para poder identificarlos en la hoja de estilo. Pon nombres específicos a tus div: es mejor un nombre como #columnaIzquierdaInicio que sólo #izquierda.

No usar código abreviado

El código abreviado es otra manera de condensar tu hoja de estilo, y resulta útil para acelerar los tiempos de carga del usuario y también para encontrar algo cuando estés editando más tarde. En vez de usar padding-top, padding-left, padding-bottom y padding-right, puedes escribir:

padding: 5px 10px 0 10px;

El código abreviado se puede utilizar en muchas declaraciones, incluyendo padding, margin, border y font.

No utilizar declaraciones cortas de color

Los números hexadecimales que se repiten, como #FFFFFF o #000000, pueden acortarse a #FFF y #000. Es otra forma de condensar tu código y de hacer que todo sea corto y fácil de revisar.

Usar el posicionamiento de forma incorrecta

El posicionamiento es difícil de comprender cuando se empieza con CSS. Tienes cuatro opciones a elegir: static, relative, absolute y fixed. Static es la opción por defecto y se posiciona según el flujo normal de la página. Un elemento cuyo estilo es relative posee una posición relativa a sí mismo, lo que significa que puedes moverlo arriba, abajo, a derecha o izquierda, basándonos en la posición en la que normalmente se colocaría. La posición absolute nos permite situar un elemento en cualquier lugar de la página, y es la declaración de posicionamiento que menos se usa. Los valores que establezcas para él serán relativos al último elemento padre que sea relative o absolute, y si no hay ninguno, vuelve por defecto a la etiqueta html, permitiéndonos situarlo en cualquier parte de la página mediante valores asignados a top, left, right o bottom.  Un elemento fixed tiene una posición relativa a la ventana del navegador, así que el elemento se quedará en el mismo sitio aunque el usuario haga scroll. Aprender cómo usar el posicionamiento correctamente es importante, aunque no debería utilizarse en exceso.

Validación

Validar tus archivos HTML y CSS te ayudará a reducir errores y a descubrir de dónde puede proceder un problema. Puede que tu página web funcione correctamente aunque muestre algunos de estos errores de HTML y CSS, pero eso no significa que sea buena práctica o código válido. El validador te ayudará a identificar estos problemas, y pronto serás capaz de mejorar tu forma de codificar en proyectos futuros.

Fuente: The Most Common HTML and CSS Mistakes to Avoid [web design ledger]

En este tutorial vamos a ver cómo crear dos efectos para que se muestren al hacer hover sobre un grupo de enlaces con iconos, en la misma línea que los efectos que poseen docks como ObjectDock o RocketDock.

Usando los efectos de animación de jQuery, vamos a experimentar con dos tipos de iconos: unos tienen un efecto de reflejo en su parte inferior y los otros tienen sombra.

Tanto el HTML como el CSS que vamos a usar son bastante claros, y tienen una estructura y estilo que son comunes a muchos menús de navegación web. No vamos a incluir el código en este artículo pero podéis echarle un ojo a la página de ejemplo o bien descargaros los archivos de ejemplo para verlos.

jQuery

// Inicio jQuery

$(document).ready(function() {

/* Menú con reflejo ----------------------------------------------- */

    // Agregar un SPAN a cada LI para añadir el reflejo

    $("#nav-reflection li").append("<span></span>");

    // Animar los botones, mover el reflejo y atenuarlo

    $("#nav-reflection a").hover(function() {
        $(this).stop().animate({ marginTop: "-10px" }, 200);
        $(this).parent().find("span").stop().animate({ marginTop: "18px", opacity: 0.25 }, 200);
    },function(){
        $(this).stop().animate({ marginTop: "0px" }, 300);
        $(this).parent().find("span").stop().animate({ marginTop: "1px", opacity: 1 }, 300);
    });

/* Menú con Sombra ----------------------------------------------- */

    // Agregar la imagen de la sombra a cada LI

    $("#nav-shadow li").append('<img class="shadow" src="images/icons-shadow.jpg" width="81" height="27" alt="" />');

    // Animar los botones, y encoger y atenuar la sombra

    $("#nav-shadow li").hover(function() {
    	var e = this;
        $(e).find("a").stop().animate({ marginTop: "-14px" }, 250, function() {
        	$(e).find("a").animate({ marginTop: "-10px" }, 250);
        });
        $(e).find("img.shadow").stop().animate({ width: "80%", height: "20px", marginLeft: "8px", opacity: 0.25 }, 250);
    },function(){
    	var e = this;
        $(e).find("a").stop().animate({ marginTop: "4px" }, 250, function() {
        	$(e).find("a").animate({ marginTop: "0px" }, 250);
        });
        $(e).find("img.shadow").stop().animate({ width: "100%", height: "27px", marginLeft: "0px", opacity: 1 }, 250);
    });

// Fin jQuery

En pocas palabras, el .JS añade un reflejo o una sombra a cada <li>, y luego anima la posición y opacidad de esos elementos y de los iconos-enlace al hacer hover. Hemos añadido .stop() para eliminar cualquier cola resultante de pasar el ratón de un lado a otro rápidamente por el menú de navegación.

Como nota final, tened en cuenta que no nos hemos molestado en dar soporte para IE6.

o bien los archivos de ejemplo.

Fuente: Create a Realistic Hover Effect with jQuery [adrian pelletier]

Este tutorial te enseñará cómo crear un script en jQuery para mostrar información a los visitantes cada vez que hagan hover con el ratón sobre una imagen.

Es un efecto muy sencillo de implementar que tiene un aspecto muy atractivo, y resulta una excelente opción para un portafolio, por ejemplo.

La mecánica es muy simple: hacemos una lista con posición relativa, colocamos imágenes con posición absoluta, y cuando pasemos el ratón sobre ella le daremos a jQuery la orden de aplicarle un bonito efecto de animación.

Aquí tenéis el código:

HTML

<ul class="bloque_hover">
	<li>
		<a href="/"><img src="your_image.gif" alt="alt" /> Texto</a>
	</li>
	<li>
		<a href="/"><img src="your_image.gif" alt="alt" /> Texto</a>
	</li>
</ul>

CSS

		ul.bloque_hover li
		{
			list-style: none;
			float: left;
			background: #fff;
			padding: 10px;
			width: 300px;
			position: relative;
			margin-right: 20px;
		}
		ul.bloque_hover li a
		{
			display: block;
			position: relative;
			overflow: hidden;
			height: 150px;
			width: 268px;
			padding: 16px;
			color: #000;
			font: 1.6em/1.3 Helvetica, Arial, sans-serif;
		}
		ul.bloque_hover li a { text-decoration: none; }
		ul.bloque_hover li img
		{
			position: absolute;
			top: 0;
			left: 0;
			border: 0;
		}

jQuery

$(function()
{
	$('ul.bloque_hover li').hover(function()
	{
		$(this).find('img').animate({top:'182px'},{queue:false, duration:500});
	}, function()
	{
		$(this).find('img').animate({top:'0px'},{queue:false, duration:500});
	});
});

Podéis ver en acción este efecto de jQuery pinchando en este enlace: demo

Fuente: Animate a Hover with jQuery [icng]

HTML

<div id="carrusel">
<div id="botones">
		<a id="anterior" href="#">anterior</a>
		<a id="siguiente" href="#">siguiente</a>

</div>
<div id="paneles">
<ul>
	<li><img src="slide1.gif" alt="Imagen 1" width="240" height="240" /></li>
	<li><img src="slide2.gif" alt="Imagen 2" width="240" height="240" /></li>
	<li><img src="slide3.gif" alt="Imagen 3 3" width="240" height="240" /></li>
</ul>
</div>
</div>

#carrusel {
	width:255px;
	height:290px;
	margin:0 auto;
}

#paneles {
	overflow:hidden;
	/* fix ie overflow issue */
	position:relative;
	width:250px;
	height:250px;
	border:1px solid #ccc;
}

/* eliminar estilos de lista, width: ancho del elemento x total de elementos */
#paneles ul {
	position:relative;
	left:0;
	top:0;
	list-style:none;
	margin:0;
	padding:0;
	width:750px;
}

/* ancho del elemento; en este caso es un gif de 250x250px */
#paneles li {
	width:250px;
	height:250px;
	float:left;
}

#paneles li img {
	padding:5px;
}

/* estilo para los botones "anterior" y "siguiente" */
#botones {
	padding:0 0 5px 0;
	float:right;
}

#botones a {
	display:block;
	width:31px;
	height:32px;
	text-indent:-999em;
	float:left;
	outline:0;
}

a#anterior {
	background:url(arrow.gif) 0 -31px no-repeat;
}

a#anterior:hover {
	background:url(arrow.gif) 0 0 no-repeat;
}

a#siguiente {
	background:url(arrow.gif) -32px -31px no-repeat;
}

a#siguiente:hover {
	background:url(arrow.gif) -32px 0 no-repeat;
}

.clear {clear:both}

$(document).ready(function() {

	//velocidad de rotación y temporizador
	var speed = 5000;
	var run = setInterval('rotate()', speed);

	//tomar el ancho y calcular el valor izquierdo
	var item_width = $('#paneles li').outerWidth();
	var left_value = item_width * (-1);

	//poner el último elemento antes del primero, por si el usuario pulsa "anterior"
	$('#paneles li:first').before($('#paneles li:last'));

	//colocar el elemento por defecto en la posición correcta
	$('#paneles ul').css({'left' : left_value});

	//si el usuario pulsó "anterior"
	$('#anterior').click(function() {

		//tomar la posición derecha
		var left_indent = parseInt($('#paneles ul').css('left')) + item_width;

		//animar el elemento
		$('#paneles ul').animate({'left' : left_indent}, 200,function(){

			//mover el último elemento y ponerlo como primero
			$('#paneles li:first').before($('#paneles li:last'));

			//colocar el elemento por defecto en la posición correcta
			$('#paneles ul').css({'left' : left_value});

		});

		//cancelar el comportamiento del enlace
		return false;

	});

	//si el usuario pulsó "siguiente"
	$('#siguiente').click(function() {

		//tomar la posición derecha
		var left_indent = parseInt($('#paneles ul').css('left')) - item_width;

		//animar el elemento
		$('#paneles ul').animate({'left' : left_indent}, 200, function () {

			//mover el primer elemento y ponerlo como último
			$('#paneles li:last').after($('#paneles li:first'));

			//colocar el elemento por defecto en la posición correcta
			$('#paneles ul').css({'left' : left_value});

		});

		//cancelar el comportamiento del enlace
		return false;

	});

	//si se hace hover con el ratón pausar la autorotación, y si no, rotar
	$('#paneles').hover(

		function() {
			clearInterval(run);
		},
		function() {
			run = setInterval('rotate()', speed);
		}
	);

});

//una sencilla función para hacer clic en el siguiente enlace
//un temporizador llamará a esta función, y comenzará la rotación
function rotate() {
	$('#siguiente').click();
}

[/sourcecode]

¿Estás buscando una forma sencilla de hacer que tus lectores naveguen fácilmente por larguísimas páginas web? ¿Estás cansado de darle a la rueda del ratón durante un buen rato para llegar al principio del documento?

Aquí tienes un sencillo botón de “Volver al inicio” que flota sobre la esquina inferior derecha de la pantalla. Y lo mejor de todo es que está completamente hecho en jQuery, CSS y HTML, por lo que vas a poder integrarlo con facilidad en páginas que ya tengas hechas y personalizarlo para dejarlo a tu gusto.

El código está en gran parte una adaptación de los trabajos de Brian Cray y David Walsh, aunque es una combinación de sus ideas con el añadido de un efecto fade en el botón y un movimiento de scroll suave. El botón se ha colocado en la esquina inferior derecha para que resulte menos intrusivo. El navegador hará un scroll hasta el texto ancla de forma suave y agradable, gracias al estupendo plugin de jQuery ScrollTo, creado por Ariel Flesler.

¿Y cuál es ese plugin? ¿Quieres verlo en acción? Vale, entonces échale un ojo a la demo.

Sin más que añadir, aquí está el código. Primero, hay que añadir el botón y el texto ancla a la página o la plantilla. El botón debería ir al final de la página, justo encima de la etiqueta </body>. Y el texto ancla debería ir al principio de la página.

<div id="top"></div> <!--esto va al principio-->
<div id="message">
	<a href="#top" id="top-link">Volver al inicio</a>
</div> <!--esto va al final-->

Ahora, necesitaremos algo de CSS para formatear el aspecto del botón. Seguramente habrás visto que se ha dejado un espacio al final de la página para que puedan leerse las últimas líneas de texto sin que se vean obstruidas por el botón. Aquí está la hoja de estilos:

#message
{
	/* display: block antes de ocultarlo */
	display: block;
	display: none;

	/* el enlace va sobre todos los otros elementos */
	z-index: 999;

	/* el enlace no oculta texto tras él */
	opacity: .8;

	/* el enlace se queda en el mismo lugar de la página */
	position: fixed;

	/* el enlace va al final de la página */
	top: 100%;
	margin-top: -80px; /* = altura + margen inferior elegido */

	/* centrando el enlace */
	left: 80%;
	margin-left: -80px;

	/* redondea las esquinas (como prefieras) */
	-moz-border-radius: 24px;
	-webkit-border-radius: 24px;

	/* hazlo grande y fácil de ver (tamaño y estilo a tu elección) */
	width: 300px;
	line-height: 48px;
	height: 48px;
	padding: 10px;
	background-color: #000;
	font-size: 24px;
	text-align: center;
}

#message a {color: #fff;}

Y naturalmente, el jQuery. Asegúrate de haber incluido jQuery y el plugin ScrollTo en el código fuente:

$(function () // ejecuta este código al cargar la página (AKA DOM load)
{
	/* inicia las variables localmente para mejorar el rendimiento */
	var scroll_timer;
	var displayed = false;
	var $message = $('#message');
	var $window = $(window);
	var top = $(document.body).children(0).position().top;

	/* reacciona al evento 'scroll' en window */
	$window.scroll(function ()
	{
	window.clearTimeout(scroll_timer);
	scroll_timer = window.setTimeout(function ()
	{ // usa un temporizador para el rendimiento
		if($window.scrollTop() <= top) // ocúltalo si está al principio de la página
		{
			displayed = false;
			$message.fadeOut(500);
		}
		else if(displayed == false) // muéstralo si se hace scroll hacia abajo
		{
			displayed = true;
			$message.stop(true, true).fadeIn(500).click(function () { $message.fadeOut(500); });
		}
	}, 100);
});

$('#top-link').click(function(e)
{
	e.preventDefault();
	$.scrollTo(0,300);
});
});

… y listo! Comparte este código con tus amigos, y aprovecha los comentarios para contar qué tal te funciona. También puedes aportar tus sugerencias para mejorar sus funciones.

Fuente: Create a Hovering Scroll to Top button With jQuery [cherrysave]

jQuery for Beginners: Selectors, Hierarchies and Attributes, Oh My!

JQuery for Beginners: Using Simple JQuery Effects for a Rockstar User Interface »

Create a Hovering Scroll to Top Button With JQuery

JQuery Hovering Scroll to Top Button

Looking for an easy way to help your readers power through long web pages? Sick of scrolling for minutes at a time to get to the top of the document? Here’s a simple Scroll to Top button that hovers in the bottom right corner of your screen. Best of all, it’s made entirely from JQuery, CSS, and HTML, so you can easily drop it into preexisting pages and customize it to your hearts content.

The code is largely adapted from Brian Cray and David Walsh, but it’s a combination of the two ideas with the addition of a fade effect on the button and smooth scrolling action. Also, I moved the button to the bottom right corner of the page because I thought it was a little less intrusive. The browser will nicely and smoothly scroll up to the anchor when users click the link, and this is thanks to the super helpful ScrollTo plugin for JQuery, built by Ariel Flesler.

What’s that? You want to see it in action? Okay, you should check out the demo!

And without further ado, here’s the code. First, add the button and the anchor to your web page or template. The button should go at the bottom of your page, right above the </body> tag. And, the anchor should go at the top of your page.

view source

print?

·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150

1.<div id="top"></div> <!--this goes at the top-->

2.<div id="message"><a href="#top" id="top-link">Scroll to Top</a></div> <!--this goes at the bottom-->

Now, you’ll need some CSS to format the look and feel of the button. As you probably noticed, I left a gap at the bottom of the page so you can read the last few lines of text without being obstructed by the button. Here’s the stylesheet:

view source

print?

·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150

01..container {padding: 0 0 70px 0;} /* the gap for the bottom */

02.

03.#message

04.{

05./* display: block before hiding */

06.display: block;

07.display: none;

08.

09./* link is above all other elements */

10.z-index: 999;

11.

12./* link doesn't hide text behind it */

13.opacity: .8;

14.

15./* link stays at same place on page */

16.position: fixed;

17.

18./* link goes at the bottom of the page */

19.top: 100%;

20.margin-top: -80px; /* = height + preferred bottom margin */

21.

22./* link is centered */

23.left: 80%;

24.margin-left: -80px;

25.

26./* round the corners (to your preference) */

27.-moz-border-radius: 24px;

28.-webkit-border-radius: 24px;

29.

30./* make it big and easy to see (size, style to preferences) */

31.width: 300px;

32.line-height: 48px;

33.height: 48px;

34.padding: 10px;

35.background-color: #000;

36.font-size: 24px;

37.text-align: center;

38.}

39.

40.#message a { color: #fff; }

And, of course, the JQuery. Make sure you have JQuery and the ScrollTo plugin included in the source: