El plugin es lo bastante inteligente como para poder calcular automáticamente el alto y ancho de cada columna y mostrar, como así también podemos controlar cada aspecto de la grilla, la cantidad de columnas, ancho, gutter, cantidad de celdas y todo lo necesario para poder adaptar el sistema a nuestra grilla.

Quizás habrás que en el site de 960.gs se encuentra un sistema similar a este plugin, donde podemos superponer guiás para comprender la grilla. Si bien cada grid system suele traer sus propias guiás, estas dependen al final de una imagen y CSS; y debemos andar rotando clases para habilitarlas o deshabilitarlas. Este sistema pretende hacernos la tarea mucho mas sencilla, ya que solo tenemos que hacer un click para traer nuestra guiá.

Como IE directamente no reconoce estos nuevos elementos (EJ: <section> o <article> que se utilizan en HTML5, mejor dicho, los reconoce pero no es capaz de cerrar cada elemento, por lo cual siempre quedan “vacios”. IE Print Protector brinda el soporte necesario para renderizar estos nuevos elementos tanto en la pantalla como cuando nos trasladamos al papel.

Cuando estamos trabajando con la pantalla, IE Print Protector utiliza el script mencionado en el principio, ahora cuando se trata del papel el script comienza a hacer su trabajo. En lugar de utilizar los nuevos elementos, lo que hace es reemplazarlos por digamos, con un DIV o un SPAM; para lograr una impresión perfecta, creando una nueva hoja de estilos tomando como base la hoja original.

Si todavía no estas muy seguro si vale la pena implementar este script, te sugiero que veas el Demo donde se compara una hoja de impresión con el script implementado y otra pagina sin la implementación. Las diferencias, por lo que aclare más arriba son abismales.

Como siempre lo digo, cuando se habla de usabilidad se habla de diseñar y armar pensando en el usuario final, nosotros podemos navegar y disponer de un sistema moderno y que sigue los estándares, pero los usuarios, puede que no. En definitiva lo que se trata (y siempre tiene que se así) es hacer que la experiencia del usuario sea de lo mas amigable posible.

Como en ocasiones anteriores vamos a necesitar un archivo HTC que en definitiva es lo que permite a que Internet Explorer reconozca algunas de las nuevas implementaciones que trae CSS3.

Pero que propiedades se puede emular de esta forma, puedes que te permites. Por el momento son solo tres:

• border-radius
• border-shadow
• text-shadow

Implementación

Dentro de nuestra hoja de estilo trabajaremos como de costumbre, solo debemos prestar atención a la ultima linea:

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari y Chrome */
  border-radius: 15px; /* Opera 10.5+ futuros navegadores y también IE6+ con IE-CSS3 */
 
  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari y Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+ futuros navegadores y también IE6+ con IE-CSS3 */
 
  behavior: url(ie-css3.htc); /* Define el comportamiento de los nuevas propiedades para IE*/
}

Como lo podemos observar de esta forma cada elemento con la class box ahora lucirá algunas de las nuevas propiedades cuando se lo visualice en Internet Explorer.

Limitaciones y Problemas

No todo es color de rosa cunado trabajamos con IE. Por el momento hay un problema que surge al aplicar este hack que implica a z-index, por lo que nuestro nuevo elemento puede lucir por encima o por debajo de otros si no se toman los recaudos posibles.

Solo debemos darle a nuestro elemento un z-index mayor a los demás elementos o definir su posición como position: relative o position: absolute

También debemos tener en cuenta que hay ciertas reglas que no se comportan de manera uniforme. Por ejemplo, no podemos definir un border radius individualmente, es decir 5px arriba a la derecha, 20 abajo a la izquierda, etc. Tampoco podemos usar una sombra en box-shadow con un valor en #000 (negro).

Sacando estas limitaciones, creo que es una buena de lograr una mejor aproximación a CSS3, por lo menos hasta que la nueva versión de Internet este disponible.

Tengamos en cuenta que en el mercado hispano la incidencia del Ipad no sera notable hasta (me animaría a decir) en un par de años. Al día de hoy solo se han despachado cerca de 300.000 dispositivos, por lo que esta incidencia global es mínima.

Por otro lado esta la usabilidad, esa palabrita que tanto molesta (a varios). No hay nada mas frustrante que entrar a una pagina con X navegador o dispositivo y tener que hacer malabares para poder leer una entrada. Es aquí donde diseñar user-friendly trae sus méritos: Brindar soporte para la mayoría de los navegadores y dispositivos (en este caso).

Aspectos técnicos de Ipad

Ipad cuenta con una resolución de 1024×768 en landscape y con su respectiva resolución al rotarlo. Lo cual es un punto a nuestro favor, ya que la mayoría diseñamos Sites teniendo en cuenta esta resolución de pantalla.

Otra cosa muy importante que debemos saber, que Ipad, como su hermanito Iphone no soportan Flash. Se acuerdan cuando decía que teníamos que alejarnos lo más posible de esta tecnología? Bueno, si me hicieron caso, esto no nos demandara mayor esfuerzo alguno, ya que no usamos Flash. Pero si no me hiciste caso y estas trabajando en Flash, es un buen momento para que te hagas amigo de HTML5 CSS3 y Javascript

Primeros pasos

Si diseñaste tu sitio siguiendo las practicas modernas: XHTML, CSS3, HTML5,etc. probablemente no tengas que arreglar nada ya que tu sitio es perfectamente amigable. Lo único que debes tener en cuenta es el ancho de tu container principal, que no debe exceder el viewport de Ipad. Muchos de nosotros nos guiamos trabajando con un sistema de grilla, donde nuestro container es de 960px, pixeles mas pixeles menos.

Tambien tenemos que tener mucho cauidado al usar al propiedad position:fixed dado que no se comporta de manera uniforme dentro de Safari

Ipad y la orientacion

Aquí es donde comienzan los primeros dolores de cabezas, son pequeños, pero dolores al fin. Al ser un dispositivo que permite rotación de pantalla, tenemos que tratar a Ipad como dos dispositivos completamente distintos, pero iguales. Como hacemos esto? Fácil, con lo que se llaman CSS3 media queries, para aplicar distintas reglas dentro de una misma hoja de estilo con @media o haciendo una llamada condicional dentro de nuestro header.

Usando el método @media, dentro de nuestra hoja de estilo podemos hacer el siguiente markup

@media only screen and (max-width: 999px) {
  /* aquí reglas donde el ancho es menor a 1000px */
}
 
@media only screen and (device-width: 768px) and (orientation: landscape) {
  /* reglas para Ipad en modo landscape (768px) */
}
 
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* reglas iPhone, Android y otros dispositivos */
}

Estos condicionales indican que si se trata de un agente donde su viewport es menor a 1000px (Ipad en landscape) se aplique las reglas dentro de esta querie. De tratarse de un agente con un viewport de 768px (Ipad en su rotacion para este ejemplo), esas reglas, y el mismo procedimiento para dispositivos donde el width es igual o menor a 320px.

De esta forma nos aseguramos de brindar un estilo determinado para cada viewport.

Recursos

Si no dispones de Ipad tenemos un par de opciones para emular este dispositivo en nuestro escritorio. Una de las formas mas simple es dirigirnos a Ipadpeek e ingresar la dirección de nuestro sitio y tendremos una idea de como se ve nuestro sitios, junto con la opción de rotar el dispositivo.

Otra forma más completa y recomendable a la hora de diseñar pensando en Ipad, es cambiar nuestro user agent, es decir que el navegador que estamos utilizando nos reconozca como si estuviéramos navegando con Ipad.

El user agent para Ipad es el siguiente

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

Dentro de Safari solo tenemos que crear un nuevo user agent con los datos brindados mas arriba, desde la pestaña de Desarrollo. Y en el caso de Firefox podemos usar el plugin User Agent Switcher para lograr la emulación.

Links recomendados

Si queres leer un poco sobre este tema, te dejo los siguientes links donde encontraras mucha información para desarrollar pensado en Ipad.

• Detecting device size & orientation in CSS
• Preparing Your Web Content for iPad
• User Experience Coding How-To's for Safari on iPhone
• iPad Orientation CSS

Espero que encuentren esta información útil y se animen a comenzar a diseñar pensando en las tecnologías del día de hoy

El siguiente es un pequeño hack que nos permite con tan solo dos caracteres extras indicar un condicional para Internet Explorer, tanto para su versión 6 y 7.

En tu hoja de estilo podemos añadir:

#mi_elemento {  
   background: red; /* navegadores modernos */  
   *background: green; /* IE 7 y anteriores */  
   _background: yellow; /* IE6 solamente */  
}

Lo bueno de este método es que no es necesario generar otra hoja de estilo para Internet Explorer y usar un condicional. Lo malo, es que estos dos caracteres no permitirán validar tu hoja de estilo, por lo que queda en vos el utilizar esta forma o seguir trabajando de la manera clásica.

Si bien este hack apareció en Nettus hace unas cuantas semanas, siempre es bueno hacer un recordatorio.

A mi entender es un técnica muy buena para cuando disponemos de muy poco espacio y queremos añadir un poco más de funcionalidad a nuestro diseño.

Demo

Antes de empezar quizás quieras mirar un poco lo que vamos a crear,  el demo para este ejemplo es bien sencillo y contundente.

Introducción

Como ya lo remarque anteriormente esta es una técnica de lo mas sencilla que no te dará mayores complicaciones. Este footer al que hago referencia, se encuentra potenciado por jQuery (solo unas pocas lineas) y CSS.

Markup

Para este ejemplo, me encuentro trabajando con una grilla, pero vos podes utilizarlo dentro de tu diseño sin problemas. La única parte que debe llamar tu atención es el footer que es lo que vamos a construir.  Para esto he creado el siguiente markup solo focalizandome en el footer

<div id="footer">
    <div class="row container">
      <ul class="column grid_12">
        <li><strong>&copy; Tumblr, Inc.</strong></li>
 
        <li><a href="#">Help</a></li>
 
        <li><a href="#">About</a></li>
 
        <li><a title="Tumblr Themes" href="#">Themes</a></li>
 
        <li><a href="#">Meetups</a></li>
 
        <li><a href="#">What's New</a></li>
 
        <li><a href="#">API</a></li>
 
        <li><a href="#">Content Policy</a></li>
 
        <li><a href="#">Terms of Service</a></li>
 
        <li><a href="#">Privacy Policy</a></li>
      </ul>
    </div>
  </div>

En este caso he decido llamar el container footer, esto queda en vos, lo único importante es que debe ser el ultimo bloque antes de la etiqueta body para que el efecto funcione correctamente.

CSS

Daré por sentado que ya sabemos como trabajar con listas y como darles formato, y pasare al bloque más importante

#footer {
color:#fff;
font:11px 'Lucida Grande',Verdana;
font-weight:700;
text-align:center;
line-height:80px;/* centramos el texto verticalmente */
height:56px;
background:url("../images/gradient.png") repeat-x scroll center bottom transparent;
background:url("../images/gradient.png") repeat-x scroll center bottom #fbfbfb\9;/* Hack para IE8 y below */
position:fixed; /* footer siempre visible */
bottom:0; /* footer siempre al pie */
width:100%; /* 100% del viewport */
text-shadow:1px 1px 2px #000; /* sombras a modo de detalle */
opacity:0; /* nunca visible hasta activar el hover */
filter:alpha(opacity=0); /* ocultar visibilidad en IE */
margin:0;
}

Como veras el código esta fuertemente comentado, lo único relevante es que estamos usando la posición fixed para que nuestro bloque este siempre visible y bottom en 0 para que se ubique al pie siempre. Luego liberamos cualquier margin que podamos haber heredado.

Update

Con la nueva versión de jQuery este efecto comenzó a mostrar incompatibilidades con IE. He incluido dos pequeños hacks en el CSS:

• Tenemos que añadir un color de fondo en nuestro #footer para que IE pueda interpretar correctamente las transparencias.
• Añadimos el filter:alpha() para que el DIV quede oculto en IE

Como siempre IE no reconoce las propiedades text-shadow por lo que vas a tener que usar al hack extra, ya he hablado aqui de como brindar soporte en Internet Explorer 6, 7 y 8 para CSS3

jQuery

Como siempre la magia para el final. Lo que vamos a buscar es que el bloque este siempre oculto (anteriormente lo ocultamos en nuestro CSS) y que al posicionar el mouse sobre él este se muestre con un bonito efecto.

(function($) {
	$.fn.customFadeOut = function(speed, callback) {
		$(this).fadeTo(speed, function() {
			if(jQuery.browser.msie)
				$(this).get(0).style.removeAttribute('filter');
			if(callback != undefined)
				callback();
		});
	};// jQuery fadeIn/fadeOut IE cleartype glitch by Benjamin Michael Novakovic
})(jQuery);
 
//estamos listos?.
$(document).ready(function() {
 $("div#footer").mouseover(function(){
		$(this).stop().fadeTo("slow", 1.0);
	}).mouseout(function(){
		$(this).stop().fadeTo("slow", 0.0);
	});
 
});

Update

Por la misma discrepancia entre IE y Jquery, es necesario añadir una nueva funcion para IE pueda interpretar el fading que estamos añadiendo. Esta maravillosa función es una ocurrencia de Benjamin Michael Novakovic.

Cuando se hace hover la visibilidad del bloque se degrada desde 0 a 100 para lograr un lindo efecto. Esta es la pieza final de este pequeño rompecabezas

Consideraciones Finales

EL contenido del bloque puede ser casi cualquiera, un guía de navegación, algunos anuncios de texto, lo que necesites incluir. Espero que este mini tutorial les sea de utilidad, cualquier duda no tienen mas que preguntar

Descarga

Si lo necesitas pongo a tu disposición los archivos necesarios para que trabajes localmente: Tumblr Footer (1)

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 distancia 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
            });
        }
    });
 
});

Bug encontrado

No la había notado la semana pasada, pero me lo remarcan en un e-mail, al contar con un contenido “muy” largo; la barra empuja ciertas secciones dentro del container en el que introducimos la barra. Una opción es cambiar a un container mas “chico” (poco practico) o para esas secciones problemáticas que se desplazan tenes que usar la regla: display: inline-block

Al añadir esta nueva regla, veras que todos los problemas se solucionan, el único inconveniente que se genera, es que display: inline-block no se comporta de manera homogénea en IE por lo que tendríamos que trabajar un poco más. Pero eso es tema para cortar otra tela, por ahora lo dejo como un pendiente.

Consideraciones finales

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.

El HTML del que les hablaba es muy simple, solamente podemos escribir <div>Content</div> o <p>Content</p> y la magia de CSS se hará cargo de ahí en mas.

La mención honorifica se la llevan los pseudo-elements :before y/o :after que crearan nuestras formas (Speech bubbles) y las propiedades border-radius y transform son los condimentos.

Si nos ponemos a trabajar con los pseudo-elements y las propiedades arriba mencionadas podemos lograr resultado muy interesantes.

Un ejemplo de esto, puede ser este CSS donde se creara un Speech Bubble con un triangulo isoceles en la parte inferior

/* Bubble con triangulo isósceles
------------------------------------------ */
 
.triangle-isosceles {
   position:relative;
   padding:15px;
   margin:1em 0 3em;
   color:#000;
   background:#f3961c;
 
   /* css3 */
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   background:-moz-linear-gradient(top, #f9d835, #f3961c);
   background:linear-gradient(top, #f9d835, #f3961c);
}
 
/* crear triangulo */
.triangle-isosceles:after {
   content:"\00a0";
   display:block; /* reduce the damage in FF3.0 */
   position:absolute;
   z-index:-1;
   bottom:-30px;
   left:50px;
   width:0;
   height:0;
   border-width:15px 15px;
   border-style:solid;
   border-color:#f3961c transparent transparent;
}

Dentro del demo podras observar el comportamiento y acceder a todo el CSS necesario para que puedas ver en detalle como funciona cada shape y así poder implementarlas o crear shapes propias.

Como lo sabrás cada Theme tiene su propia hoja de estilos que es lo que le formato en definitiva. Si necesitáramos personalizar nuestras entradas, tendríamos que editar la hoja de estilos del Theme; cosa que puede ser algo molesto si solo necesitamos personalizar una entrada en concreto.

Con esta pequeña función, estaremos añadiendo un Box para que la hora de crear un Post o Pagina podamos insertar un estilo para cada entrada/pagina en concreto.

Por medio de filtros y acciones esta función insertar en el header de nuestro Theme, el estilo que le hayamos aplicados. Solo tenes que cerciorarte que Theme cuente con wp_head(); dentro del Header.

Uso

En tu archivo functions.php inserta lo siguiente:

 //Custom CSS 
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
}
function custom_css_input() {
	global $post;
	echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
	echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
	if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$custom_css = $_POST['custom_css'];
	update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
	if (is_page() || is_single()){
		if (have_posts()) : while (have_posts()) : the_post();
			echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
		endwhile; endif;
		rewind_posts();
	}
}
 
//End Custom CSS

Ahora cada vez que escribas una entrada/pagina encontraras este box para insertar tus estilos:

Como lo veras esta función es bastante flexible por lo sera posible adaptarla, para por ejemplo también poder incluir scripts en nuestro Header.

Este Framework utiliza referencias simples de recordar y lógicas, por ejemplo; si necesitáramos crear un DIV de un height de 700px y un width de 500px, solo haríamos referencia a esta clase:

<div class=”rl w500 h700”>
    <div class=”rl w50 h70”></div>
</div>

Otro punto fuerte es el hecho de que Markercss se encuentra sub-dividido en distintos temas para una mejor compresión y aplicación: bordes, fondos, links, etc.

Como lo habrás notado los CSS Framework son cada vez mas comunes y potentes, hay opiniones encontradas a favor y en contra de ellos, pero en definitiva están aquí para quedarse.