Sinceramente nunca le había prestado demasiada atención a esa barra, por la que me puse a investigar un poco mas sobre su comportamiento y como funciona. Después de mirar un poco pude recrear el efecto sin demasiadas complicaciones con un poco de CSS y jQuery.

Surgieron dos alternativas, la replica exacta (solo me tome el trabajo de explicar el código) de Mashable y otro un poco mas simple.

Si entramos a cualquier post en Mashable, veremos que la barra se acompaña al Scroll sin animaciones. Al usar valores negativos en el margin, esta barra no es visible en resoluciones menores (1024), por lo cual mediante jQuery se transforma en otra barra horizontal para mostrar el contenido; lo mismo sucede si redimencionamos la ventana.

La alternativa mas simple ofrece las mismas funcionalidades y un efecto en el scroll, pero si te excedes en el viewport, los visitantes que tengan una resolución de pantalla menor, no podrán apreciarla. A que me refiero con el exceso en el viewport? Simple, si tu container es de 960px de ancho y posicionamos la barra a unos -80px, nos excedimos en el viewport (960px + 80px = 1040) para resoluciones menores o iguales a 1024×768; ya que el safe area para esta resolución es de 975px de ancho.

Cualquiera de las dos alternativas es válida y funcional, queda en vos utilizar la que creas que mejor se adapte.

Replica de Mashable

Esta opción requiere un poco mas de código dada la complejidad. Al utilizar la posición fixed, esta opción no sera compatible con IE6 ya que este navegador desconoce esta propiedad.

Demo Replica de Mashable

No te olvides de redimensionar la ventana para apreciar el efecto completo

HTML

Como lo podemos apreciar en Mashable tenemos botones para sindicar contenido en Twitter, Google Buzz, Facebook y otras. Cada botón funciona por medio de un script para que les sea mas sencillo de integrar, podes usar e incluir los botones que necesitas por medio de algún plugin o simple código, eso queda en vos.

			<div id="social_bar">
				<div class="botones_grandes">
					<div class="gbuzz s_boton">
						<script type="text/javascript" src="http://button.njuice.com/buzz.js">
</script>
					</div>
					<div class="tweetmeme s_boton">
						<script type="text/javascript">
//<![CDATA[
tweetmeme_source = 'baires'; // Mi usuario en Twitter //
tweetmeme_url = '<?php the_permalink(); ?>'; // URL a socializar en este caso para Wordpress //
//]]>
</script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
</script>
					</div>
					<div class="faceboook s_boton">
						<script src="http://widgets.fbshare.me/files/fbshare.js" type="text/javascript">
</script>
					</div>
				</div>
				<div class="botones_chicos">
					<div class="s_boton_small gbuzz_small">
						<script type="text/javascript">
//<![CDATA[
var njuice_buzz_size = 'small';
//]]>
</script> <script type="text/javascript" src="http://button.njuice.com/buzz.js">
</script>
					</div>
					<div class="s_boton_small twwetmeme_small">
						<script type="text/javascript">
//<![CDATA[
tweetmeme_style = 'compact';
//]]>
</script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
</script>
					</div>
					<div class="s_boton_small facebook_small">
						<script type="text/javascript">
//<![CDATA[
var fbShare = {
size: 'small',
}
//]]>
</script> <script src="http://widgets.fbshare.me/files/fbshare.js" type="text/javascript">
</script>
					</div>
					<div class="s_boton_small">
						<a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=EliseosNet&amp;loc=es_ES" id="s_email" class="social_sprites" name="s_email">email</a>
					</div>
					<div class="s_boton_small">
						<a class="a2a_dd social_sprites" id="s_share" href="http://www.addtoany.com/share_save?linkname=Eliseos%20Net&amp;linkurl=eliseos.net" name="s_sharethis">Share</a><script type="text/javascript">
//<![CDATA[
a2a_linkname="My Sitio";a2a_linkurl="mi-url.com";
//]]>
</script><script type="text/javascript" src="http://static.addtoany.com/menu/page.js">
</script>
					</div>
				</div>
				<div class="s_boton">
					<a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=EliseosNet&amp;loc=es_ES" id="s_email" class="social_sprites" name="s_email">email</a>
				</div>
				<div class="s_boton">
					<a class="a2a_dd social_sprites" id="s_share" href="http://www.addtoany.com/share_save?linkname=My%20Sitio&amp;linkurl=mi-url.com" name="s_sharethis">Share</a><script type="text/javascript">
//<![CDATA[
a2a_linkname="My Sitio";a2a_linkurl="mi-url.com";
//]]>
</script><script type="text/javascript" src="http://static.addtoany.com/menu/page.js">
</script>
				</div>
			</div>

Nuestro markup es de lo mas sencillo, como se puede hay dos clases de botones: grandes y chicos. Los botones grandes son los que se aprecian a simple vista, los chicos se encuentran escondidos para las resoluciones inferiores o en caso de redimensioanarse la pantalla. Es necesario que edites los datos de cada botón para que coincida con los tuyos, en URL, Nombre del Sitio, etc.

Recomiendo introducir la barra justo después del titulo y antes del contendido para poder desplazarnos sin problemas. Para el caso de Wordpress dentro del archivo single.php

CSS

Esto es parte de la magia, otra vez es algo extremadamente simple de entender. Intente comentar lo mas posible el código para que sea de fácil entendimiento.

 
#social_bar {
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #DDDDDD;
float:left;
margin-left:-80px; /* // La distacia de la barra que queremos tener en relacion al post */
margin-right:10px;
position:relative;
}
 
/* // Formato de los Botones grandes */
.s_boton {
padding:5px;
clear:left;
margin:0;
}
 
/* // Formato de los Botones chicos */
.s_boton_small{
clear:none;
float:left;
padding:5px;
}
 
/* // Ocultamos los botones chicos de momento */
.botones_chicos{display:none;}
 
/* //Iconos para los links de Share y Email */
#social_bar a#s_email.social_sprites {
background-position:2px -32px;
text-decoration: none;
}
 
#social_bar a:hover#s_email.social_sprites {
background-position:2px -50px;
color:#4c545b;
text-decoration: none;
}
 
#social_bar a#s_share.social_sprites {
background-position:0px 4px;
text-decoration: none;
}
 
#social_bar a:hover#s_share.social_sprites {
background-position:0px -14px;
color:#4c545b;
text-decoration: none;
}
 
#social_bar a.social_sprites {
-moz-border-radius:3px 3px 3px 3px;
background:url(../images/social_sprites.png) no-repeat scroll 0 0 #FFFFFF;
border:1px solid #E8E8E8;
color:#989898;
display:block;
font:9px/1.625 verdana,sans-serif;
margin:0;
padding:2px;
text-align:right;
width:44px;
}

En caso que lo necesites esta es la imagen que utilice en los links de share & e-mail. Los iconos pertenecen al set Glyphish.

jQuery

Y aquí viene la magia que hará que el comportamiento de la barra acompañe al scroll y diferencie las distintas resoluciones de pantalla.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

$(function(){	
 
    if( $('#social_bar').length > 0 && !($.browser.msie && parseInt($.browser.version) < 7) ) {
        var descripY = parseInt($('.main').offset().top) - 20;
        var $postShare = $('#social_bar');
        var pullX = $postShare.css('margin-left');
 
        $(window).data('scrollBound', false);
 
        function positionShareScroll() {
            var scrollY = $(window).scrollTop();
            var fixedShare = $postShare.css('position') == 'fixed';
            if ( scrollY > descripY && !fixedShare ) {
                $postShare.stop().css({
                    position: 'fixed',
                    left: '50%',
                    top: 20,
                    marginLeft: -540 // Este valor se debe ajustar ya que depende de cada diseño//
                });
            } else if ( scrollY < descripY && fixedShare ) {
                $postShare.css({
                    position: 'relative',
                    left: 0,
                    top: 0,
                    marginLeft: pullX
                });
            }
        }
 
 
        $(window).resize(function(){
            var windowW = $(window).width();
            var pulledOutside = $postShare.css('margin-left') == pullX;
            if ( windowW >= 1137 ) {
                if ( !$(window).data('scrollBound') ) {
                    if ( !pulledOutside ) {
                        $postShare.animate({ marginLeft: pullX });
						//Crear barra Vertical
						$('.botones_chicos').hide();
						$('.s_boton').show();
						$('.botones_grandes').show();
						$postShare.css('border-width', '1px');
						$postShare.width('auto');
						$postShare.css({
							marginRight: 7,
							marginTop: 0
						});
                    }
                    $(window)
                        .data('scrollBound', true)
                        .bind('scroll.positionShare', function(){
                            positionShareScroll()
                        })
                    ;
                    positionShareScroll();
                }
            } else {
                if ( pulledOutside || $(window).data('scrollBound') ) {
                    $postShare
                        .css({ position: 'relative', left: 0, top: 0 })
                        .animate({marginLeft: 0})
                    ;
					//Crear barra Horizontal
					//$postShare.append(smallButtons);
					//smallButtons = '';
					$('.botones_grandes').hide();
					$('.s_boton').hide();
 
					$('.botones_chicos').show();
					$postShare.css({
						marginTop: 5,
						marginBottom: 5
					});
					$postShare.css('border-width', 0);
 
					var content_width = $('.main').width();
					if (content_width == 'undefined') content_width = 600;
					if ( $postShare.attr('_width') ) {
						$postShare.width($postShare.attr('_width'));
						var block_width = $postShare.attr('_width');
					} else {
						$postShare.attr('_width', $postShare.width() );
						var block_width = $postShare.width();
					}
					$postShare.width(content_width);
					var add_padding = ( (content_width - block_width) / ($postShare.find('.s_boton_small').length * 2) ) + 4;
 
					//var add_padding = (642 - (88 + 120 * (buttons_count - 2) )) / (buttons_count * 2);
					//var add_padding = ( ( 642 - ( 88 * buttons_count ) ) / (buttons_count * 2) ) + 5;
					$postShare.find('.s_boton_small').css({
						paddingLeft: add_padding,
						paddingRight: add_padding
					});
 
 
                    $(window)
                        .data('scrollBound', false)
                        .unbind('scroll.positionShare')
                    ;
                }
            }
        });
        $(window).resize();
    }
});

Solamente dos cosas debemos tener presentes, la primera es definir en la linea 4 cual sera nuestro valor de referencia para el comportamiento de la barra, es decir el ancho; generalmente corresponde al container en el que se encuentra el post. En mi caso he utilizado la clase main, que se vuelve a utilizar en la linea 76 y en la 77 con su ancho.

Luego procederemos a adaptar la distancia a la que se posicionara la barra cuando nos desplacemos, al utilizar la posición fixed, el valor difiere de los 80px originales. Este ejemplo muestra la barra posicionada a unos -540px (linea 18). Este valor tenes que ajustarlo vos ya que depende de tu diseño. Una aproximación a este numero responde a: Ancho del container (en este ejemplo: main) – 80px

Una vez presentadas todas las partes solo tenemos que integrarlas en nuestro Site, dependiendo de la plataforma con lo que estemos trabajando pude variar algún detalle, pero este código sirve tanto para Wordpress como para cualquier otro CMS.

Replica de Mashable Simple

A diferencia de la opción anterior esta barra es compatible con IE6, pero no podrá ser apreciada en resoluciones menores. El scroll para este caso es una animación del padding que produce un simpático efecto final.

Demo Replica de Mashable

HTML

Es casi el mismo markup de la primera opción pero sin incluir los botones pequeños ya que no son necesarios.

	<div id="social_bar_wrapper">
			<div id="social_bar">
				<div class="botones_contenedor">
					<div class="gbuzz s_boton">
						<script type="text/javascript" src="http://button.njuice.com/buzz.js">
</script>
					</div>
					<div class="tweetmeme s_boton">
						<script type="text/javascript">
tweetmeme_source = 'baires';
tweetmeme_url = '<?php the_permalink(); ?>';
 
</script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
</script>
					</div>
					<div class="faceboook s_boton">
						<script src="http://widgets.fbshare.me/files/fbshare.js" type="text/javascript">
</script>
					</div>
				</div>
				<div class="s_boton">
					<a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=EliseosNet&amp;loc=es_ES" id="s_email" class="social_sprites" name="s_email">email</a>
				</div>
				<div class="s_boton">
					<a class="a2a_dd social_sprites" id="s_share" href="http://www.addtoany.com/share_save?linkname=My%20Sitio&amp;linkurl=mi-url.com" name="s_sharethis">Share</a><script type="text/javascript">
a2a_linkname="My Sitio";a2a_linkurl="mi-url.com";
</script><script type="text/javascript" src="http://static.addtoany.com/menu/page.js">
</script>
				</div>
			</div>
		</div>

También se ha añadido un wrappera la barra para poder controlar el margin.

CSS

Es exactamente el mismo de la primera opción, con el adicional de wrapper y sin los botones pequeños.

#social_bar_wrapper{
	position: absolute;
	margin-top:20px;
}
 
#social_bar {
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #DDDDDD;
float:left;
margin-left:-80px; /* // La distacia de la barra que queremos tener en relacion al post */
margin-right:10px;
position:relative;
 
}
 
/* // Formato de los Botones grandes */
.s_boton {
padding:5px;
clear:left;
margin:0;
}
 
/* //Iconos para los links de Share y Email */
#social_bar a#s_email.social_sprites {
background-position:2px -32px;
text-decoration: none;
}
#social_bar a:hover#s_email.social_sprites {
background-position:2px -50px;
color:#4c545b;
text-decoration: none;
}
 
#social_bar a#s_share.social_sprites {
background-position:0px 4px;
text-decoration: none;
}
 
#social_bar a:hover#s_share.social_sprites {
background-position:0px -14px;
color:#4c545b;
text-decoration: none;
}
 
#social_bar a.social_sprites {
-moz-border-radius:3px 3px 3px 3px;
background:url(../images/social_sprites.png) no-repeat scroll 0 0 #FFFFFF;
border:1px solid #E8E8E8;
color:#989898;
display:block;
font:9px/1.625 verdana,sans-serif;
margin:0;
padding:2px;
text-align:right;
width:44px;
}

Quizás lo único que tengas que modificar es la distancia a la que se encuentra la barra con respecto del contenido, para este ejemplo es -80px (dentro de #social_bar). No te excedas en mas de -100px o no sera visible en varias resoluciones.

jQuery

Como te lo adelante anteriormente solamente animamos el padding (gracias CSS Tricks), no es necesario modificar este código a no ser que sepas lo que estas haciendo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

	$(function() {
 
    var $sidebar   = $("#social_bar"),
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;
 
    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
 
});

Por ultimo solo resta presentar todo en nuestro diseño y tendremos otra alternativa a a barra de Mashable.

Cualquier duda que tengas, hacémelo saber.

Su funcionamiento es de lo mas simple, solo debemos crear un container con algunas imágenes dentro:

<div id='slideshowHolder'>
<img src='img1.jpg' alt='img1' />
<img src='img2.jpg' alt='img2' />
<img src='img3.jpg' alt='img3' />
</div>

Y luego iniciar el plugin:

$('#slideshowHolder').jqFancyTransitions({ width: 400, height: 300 });

Esta es la configuración por defecto, donde solo indicamos el ancho y el alto del Slider, si lo necesitáramos (seguramente) podemos indicar que efecto necesitamos, delay en las transiciones, etc.

jqFancyTransitions cuenta con un demo online, donde podrás observar todos los efecto que comente anteriormente junto con la documentación necesaria.Y por ultimo, este plugin prueba ser compatible con Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

Si el visitante utiliza un navegador no soportado para el tag <video>, el plugin reemplazara el tag por el reproductor Flowplayer, logrando así una consistencia en todos los navegadores.

Este plugin soporta los formatos MP4, utilizando el codec h.264 y el OGV a través del codec Theora. Como si fuera poco, en html5media disponemos una serie de controles para tomar control sobre el video; como ser:

• Control: Posibilidad de mostrar los botones (controles) del reproductor
• Autobuffer: Comenzar a cargar el video automáticamente
• Autoplay: Reproducir el video automáticamente
• Loop: Reproducir el video constantemente
• Splash image: añadir una imagen a modo de introducción el nuestro reproductor.

Para utilizar este maravilloso plugin, solo debemos realizar el llamado dentro de nuestro header:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://html5media.googlecode.com/svn/trunk/src/jquery.html5media.min.js"></script>

Y seguir la siguiente sintaxis:

<video src="video.mp4" width="320" height="240" controls autobuffer></video>

Y si necesitáramos servir dos versiones del mismo video (Theora y h.254)

<video class="video" poster="cat.jpg" width="352" height="264" controls autobuffer>
    <source src="cat.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="cat.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

Por ultimo no te olvides que puedes visualizar un demo del funcionamiento de este plugin.

Mas de alguna vez te habrás preguntado como lograr ese estilo en los botones, por suerte con escasas lineas de código podrás recrear ese efecto.

Lograremos utilizar y definir la posición de los botones, apilarlos, usar Checkboxes o Dropdown, y todos los estilos de botones que podrías encontrar en los productos de Google.

Este plugin no utiliza imagenes, ya que todo su poder se encuentra en jQuery y CSS. Su utilización es muy simple; solo necesitamos jQuery, el Plugin (styledButton) y el estilo referido al plugin.

Una vez cumplido los requisitos, solo restaría inicializar el plugin y definir nuestro marktup. Por una cuestión de mantener la semántica en nuestro código, debemos usar un span para llamar al plugin darle vida al boton.

Estos botones se verán de la misma manera en la mayoría de los navegadores modernos, incluso en IE6.

Como lo mencione anteriormente, este es un editor muy liviano, solo 9 kb comprimidos y tan solo 25 Kb para las imágenes. Podemos usar su configuración por defecto o instruirlo para que se comporte acorde a nuestras necesidades, como ser incluir y excluir botones o también la posibilidad de de incluir un botón para guardar lo tipeado en el box.

La integración es de lo mas sencilla, solo debemos incluir el plugin, las imágenes y la hoja de estilo e identificar nuestro textarea.

$(function(){
    $("textarea").htmlarea();
});

Por ejemplo podríamos incluir el editor en el box de los comentarios de nuestro Blog para bien de los usuarios.

Esta es una simple configuración, en la documentación encontraras como manipular el editor a tus necesidades.

Uno de los puntos fuertes es qu el plugin detecta automáticamente los bordes de la ventana en el navegador y nos permite que el Toolti se muestre arriba, abajo, en la izquierda o derecha; según sea necesario.

TipTip trabaja con el atributo title para mostrar el Tooltip y solo necesitaremos definir nuestra class para hacerlo funcionar. También, cuenta con varias opciones para controlar su comportamiento.

Con este plugin solo necesitas tu API key que se obtiene rápidamente desde Google y ya podrás comenzar a embeber tus mapas.

Entre varias de las ventajas que cuenta es plugin es la posibilidad de personalizar casi cualquier aspecto del mapa y exprimir el APi al máximo. Por ejemplo podremos insertar latitudes y longitudes exactas, insertar una polyline (ruta), capas y marcadores y muchas mas funciones.

Este plugin pesa menos de 10 Kb., el aspecto del container del mapa es controlado vía CSS para que el usuario final pueda controlar los estilos y es compatible con la mayoría de los navegadores modernos.

La documentación es muy amena y habla por si sola y te resultara muy fácil de entender.

Según la configuración que usemos con Meerkat estaremos logrando un slider en el top o bottom de la pagina. Contamos con una opción para cerrar el slider y determinar su comportamiento, es decir cuando se mostrara, y por que periodo de tiempo: hasta que finalice la sesión o por un periodo de tiempo especifico.

Podemos usar este plugin como herramienta de marketing o como una pagina splash a modo de introducción o bienvenida.

Meerkat cuenta con tres demos muy bien documentados para que puedas implementar este plugin.

mbFlipText viene a llenar ese vació, poder introducir un texto vertical que sea seleccionable y sin la necesidad de recurrir a imágenes. Su funcionamiento es muy sencillo, el plugin transforma un elemento del DOM dado, como un div o span en un elemento SVG.

Contamos con dos opciones: trabajar con texto vertical desde arriba hacia abajo o viceversa.

El call en JS

$(".tb").mbFlipText(true) //Orientacion: de arriba hacia abajo
$(".bt").mbFlipText(false) // Orientacion de abajo a hacia arriba

Nuestro Markup

<div class="tb">"de arriba hacia abajo"</div>
<div class="bt">"abajo hacia arriba"</div>

Como IE es el unico navegador que no soporta los elementos SVG nativamente, deberos hacer uso de como lo mencione mas arriba del filtro flipv()

Con bxSliderodemos:

• Elegir el modo del slider: slide, fade o ticker
• La duración de las transiciones
• Transiciones automáticas, o no
• Ancho del container, en pixels
• Textos a mostrar para los controles

Para hacer la llamada a bxSlider solo debemos:

$('#mi_ID').slider({
	mode: 'slide',
	speed: 250,
	wrapper_class: 'mi_slider'
});