Lamentablemente, WindowsTabs cuesta 19 $, aunque podemos usar una versión gratuita que sólo nos permite tener agrupadas hasta tres aplicaciones.

Por último os dejo un par de vídeos, el primero, Windows agrupando pestañas con WindowsTabs y el segundo Ubuntu agrupando pestañas con Compiz Fusion.

En muchas páginas webs hay carruseles que muestran una imagen y un pequeño texto. Un ejemplo de estos carruseles lo podemos ver algunas páginas de empresas de diseño web, donde nos muestras el nombre de uno de sus diseños y una pequeña captura. También son frecuentes en webs de revistas, usados para mostrar los artículos más destacados.

Desde hacía tiempo quería crear un carrusel con jQuery y hace un rato he encontrado un plugin de este framework que es precisamente lo que andaba buscando: Step Carousel.

Para añadir el carrusel basta con enlazar jQuery y el plugin mediante <script /> y luego añadir el siguiente código Javascript, que inicia el carrusel:

<script type="text/javascript">
stepcarousel.setup({
galleryid: ‘carousel’, //ID del div que contiene el carrusel
beltclass: ‘belt’, //Clase del primer div dentro del carrusel, que contiene al resto de divs
panelclass: ‘panel’, //Clase de cada panel individual
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>

También es necesario incluir un poco de CSS para que el carrusel funcione correctamente:

#carousel {
position: relative; /* Necesario */
overflow: hidden; /* Necesario */
height: 250px;
margin-left:35px;
background:#5B5B5B url(carousel-bg.png) bottom left repeat-x;
}
#carousel .belt {
position: absolute; /* Necesario */
left: 0;
top: 0;
margin:0 10px 10px 0;
}
#carousel .panel {
width:265px;
float: left; /* Necesario */
overflow: hidden;
margin: 15px;
padding:7px;
border:1px solid #5B5B5B;
background:#383838 url(carousel-panel-bg.png) bottom left repeat-x;
}

Finalmente, este es el código HTML que usaremos en el carrusel:

<a href="javascript:stepcarousel.stepBy(‘carousel’, 1)">Anterior</a>
<a href="javascript:stepcarousel.stepBy(‘carousel’, -1)">Posterior</a>
<div id="carousel" class="stepcarousel">
<div class="belt">
<div class="panel">
<img src="img1.png" />
<div class="panel-text">
<p>Este carousel es una demostraci&oacute;n</p>
</div>
</div>
<div class="panel">
<img src="img2.png" />
<div class="panel-text">
<p>de un tutorial de <a href="http://sumolari.com">Sumolari.com</a>.</p>
</div>
</div>
</div>
</div>

El código es sencillo de entender y fácil de personalizar. Por ejemplo, para añadir más paneles basta con añadir más bloques, que tienen la siguiente estructura:

<div class="panel">
<img src="img2.png" />
<div class="panel-text">
<p>de un tutorial de <a href="http://sumolari.com">Sumolari.com</a>.</p>
</div>
</div>

Si lo que queremos es que el link pase dos paneles en lugar de uno, basta con cambiar el -1 o el 1 por -2 o 2 respectivamente.

He montado una demostración del carrusel que se puede ver aquí.

Por último, podéis descargar la demostración desde aquí (incluye imágenes, Javascript y CSS).

Os resumo un poco más la historia de Compiz:

En 2006 Novell presentó Compiz junto con XGL (una capa de OpenGL). Con ambos se pudo componer un gestor de ventanas con muchas posibilidades visuales, además de afectar a todas las ventanas del escritorio.

Poco después apareció Beryl, como una “bifurcación” de Compiz, dirigida por una parte de la comunidad que no estaba de acuerdo con lo que se estaba haciendo en la rama Quinnstorm (de Compiz).

Además, Beryl incluía el decorador de ventanas Emerald, su gestor de temas y un montón de plugins.

En marzo del 2007 se anunció la reunificación de Beryl con Compiz, lo que dio lugar a Compiz Fusion.
La primera versión estable de Compiz Fusion fue anunciada en octubre del mismo año.

Compiz Fusion le daba al sistema de mayor estabilidad (usando el núcleo de Compiz), una gran cantidad de efectos y plugins (que venían de Beryl), algunas mejoras y plugins nuevos.

El 24 de diciembre del año pasado (2008) se anunció Compiz++, una rama que utiliza C++ y mejora las prestaciones y los recursos necesarios para hacer funcionar el sistema.

Estas últimas semanas está habiendo movimientos para impulsar de nuevo Compiz unificando todas las ramas en una única.

Parte de la historia la conocía, pero la verdad es que sorprende el número de proyectos que llegan a derivar de uno y la cantidad de cosas que han sucedido durante un periodo no muy largo (2006-2008).

También me impresiona que las ramas que he probado de Compiz (Compiz, Beryl y Compiz Fusion) son impresionantes, no hay ninguna decaída de calidad de una rama a otra, de hecho, cada vez que aparece una nueva rama (o se unifican en una única), aparece con mejoras y novedades que la anterior no tenía.

Si ya os conté cómo evitar conflictos entre jQuery y Mootools, hoy os explico para qué estaba usando jQuery en el nuevo diseño.

Probablemente os habréis fijado en el link que dice Sidebar, en el index del blog. Pues bien, este link despliega la sidebar superior del blog.

Para añadir este efecto a tu web debes seguir unos pasos sencillos, comenzando por descargar jQuery.

Ahora abrimos el archivo en el que queremos añadir el efecto.

El código Javascript

Nos situamos en antes del </head> y añadimos las siguientes líneas:

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".boton").click(function(){
$("#desplegable").slideToggle("slow");
});
$("#desplegable").css({ display: ‘none’ });
});
</script>

La primera línea llama a jQuery, tened en cuenta que la URL al archivo debe ser la correcta, sino no funcionará.

La tercera indica que se realicen las acciones una vez la página esté cargada.

La cuarta determina qué clase llevará el link que activará el efecto (.boton es una clase, si fuese #boton sería una id) e inicia una condición.

La quinta indica qué id tiene la capa que se ocultará / mostrará, e inicia el efecto.

La sexta cierra la condición iniciada en la cuarta línea.

La séptima no es necesaria.  Lo que hace es ocultar la capa. Podría hacerlo mediante CSS, pero en caso de no estar activado javascript no se mostraría nada, mientras que en este caso si no estuviese el javascript activado se vería la capa, pero sin efecto.

La octava línea indica al script el fin de las acciones que debe llevar a cabo jQuery.

Podemos personalizar un poco más el script, cambiando en la línea 10 slow por normal o fast (para modificar la velocidad del efecto).

El código HTML

Lo último que nos queda es añadir el código HTML correspondiente al link de ocultar / mostrar y al contenido que se ocultará / mostrará.

Comenzaremos con el enlace, que debe tener de clase boton. El código que uso yo para el enlace es:

<a href="#" class="boton">Ver / Ocultar contenido</a>

Pero se pueden hacer variaciones, lo único necesario es la clase boton.

Ahora añadimos la capa con id desplegable, que será la que se ocultará y se mostrará. El código que uso yo es:

<div id="desplegable">
<h2>Contenido oculto</h2>
<p>Sólo verás este contenido si despliegas el panel.</p>
</div>

Como antes, este código se puede variar.

Y ya tenemos completo el efecto.

Demo

Podéis ver el efecto en este mismo blog (en la sidebar superior) o en esta página de demostración.

Sin embargo hoy os traigos un efecto logrado con jQuery y creado por Timothy van Sas.

El código

Javascript

CSS

HTML

Podemos ver el ejemplo que ha creado Timothy para hacernos una idea de cómo queda.

Vía Anieto2k.