Blogger recientemente agregó de manera automática y obligatoria una LightBox en las imágenes de todos sus blogs. Una lightbox es una buena forma de resaltar fotografías y será útil en mucho casos, pero no en todos. Esta nueva característica usa javascript e igualmente con javascript se puede eliminar.

Actualización: 20/10/2011. Parece que Blogger entendió que no puede simplemente imponer características y ya ofrece la opción directamente desde el panel para eliminar la lightbox de imágenes. Para ello ve a Escritorio → Configuración → Entradas y comentarios → Showcase images with Lightbox y selecciona “No”.

Método por javascript, ya no recomendado:

Basta agregar el siguiente código antes de </head>:

<script type="text/javascript">
//<![CDATA[
function killLightbox() {
 var images = document.getElementsByTagName('img');
 for (var i = 0 ; i < images.length ; ++i) {
  images[i].onmousemove=function() {
   var html = this.parentNode.innerHTML;
   this.parentNode.innerHTML = html;
  };
 }
}

if (window.addEventListener) {
 window.addEventListener('load',killLightbox,false);
} else {
 window.attachEvent('onload',killLightbox);
}
//]]>
</script>

Fuente: English java drinker / Vía: Vagabundia.

Los estándares web están teniendo una transformación, como es el caso de  HTML5 vs Flash, es por de más cierto que HTML5 tiene mucho potencial para establecerse como estándar oficial y que quizás cuando eso pase Flash tendrá que haber encontrado un mercado de nicho propio. Mientras eso sucede los invito a visitar esta interesante galería de Javascript de alto nivel, Chrome Experiment que tienen como objetivo recoger los mejor de Javascript y de estándares abiertos como HTML5, Canvas, SVG.

La idea básica es demostrar que hay diseñadores usándolos, que hacen la web más rápida, sencilla y eficiente, en pocas palabras, según los propios autores del sitio, tratan de ser congruentes con el espíritu de Chrome. El sitio es por demás recomendable, les dejo un videos de lo que pueden encontrar y en el sitio todo pueden probarlo por ustedes mismo, no está por demás advertir que deberán de tener un navegador que cumpla con los últimos requerimientos en cuanto a estándares para poder tener una experiencia completa.

Sitio: chromeexperiments.com

En Blogger es posible crear también este tipo de fechas con un poco de javascript y agregando un par de cosas en la plantilla, de manera muy rápida.

Fechas amigables en Blogger

1. Entra al código de tu plantilla ( Escritorio → Diseño → Edición HTML → Expandir plantilla de artilugios ) y justo después del siguiente código:

]]></b:skin>

Añade el siguiente script:

<script type='text/javascript'>
/* Fechas amigables en Blogger: http://blogandweb.com/2784 */
function timeAgo(date1,date2,granularity){var self=this;periods=[];periods[&#039;semana&#039;]=604800;periods[&#039;d&amp;iacute;a&#039;]=86400;periods[&#039;hora&#039;]=3600;if(!granularity){granularity=5;}
(typeof(date1)==&#039;string&#039;)?date1=new Date(date1).getTime()/1000:date1=new Date().getTime()/1000;(typeof(date2)==&#039;string&#039;)?date2=new Date(date2).getTime()/1000:date2=new Date().getTime()/1000;if(date1&gt;date2){difference=date1-date2;}else{difference=date2-date1;}
output=&#039;&#039;;for(var period in periods){var value=periods[period];if(difference&gt;=value){time=Math.floor(difference/value);difference%=value;output=output+time+&#039; &#039;;if(time&gt;1){output=output+period+&#039;s &#039;;}else{output=output+period+&#039; &#039;;}}
granularity--;if(granularity==0){break;}}
return&#039;Hace &#039;+output;}
$(document).ready(function(){});
</script>

2. Ahora busca:

<data:post.dateHeader/>

Nota: recuerda tener los artilugios expandidos o no encontraras este código.

Y sustitúyelo con:

<script type='text/javascript'>document.write(timeAgo(&#39;<data:post.dateHeader/>&#39;));</script>

3. El último paso es cambiar el formato de fecha para que sea compatible con el script entra a: Escritorio → Configuración → Formato → Formato de cabecera de fecha. Y cambia el formato de fecha por el sexto de arriba hacia abajo, es tipo: 7/18/2010. Guarda los cambios.

Y listo. El resultado puedes verlo en nuestro demo.

Script para encontrar el tiempo entre dos fechas

Esta práctica función javascript se puede usar en cualquier otro desarrollo, y recibe como parámetros dos o una fecha. Si son dos fechas, obtendrá el tiempo entre ellas, si es una, obtendrá el tiempo de esa fecha a la actual.

function timeAgo(date1, date2, granularity){

	var self = this;

	periods = [];
	periods['semana'] = 604800;
	periods['día'] = 86400;
	periods['hora'] = 3600;
	periods['minuto'] = 60;
	periods['segundo'] = 1;

	if(!granularity){
		granularity = 5;
	}

	(typeof(date1) == 'string') ? date1 = new Date(date1).getTime() / 1000 : date1 = new Date().getTime() / 1000;
	(typeof(date2) == 'string') ? date2 = new Date(date2).getTime() / 1000 : date2 = new Date().getTime() / 1000;

	if(date1 > date2){
		difference = date1 - date2;
	}else{
		difference = date2 - date1;
	}

	output = '';

	for(var period in periods){
		var value = periods[period];

		if(difference >= value){
			time = Math.floor(difference / value);
			difference %= value;

			output = output +  time + ' ';

			if(time > 1){
				output = output + period + 's ';
			}else{
				output = output + period + ' ';
			}
		}

		granularity--;
		if(granularity == 0){
			break;
		}
	}

	return  'Hace ' + output;
}

Nota: Arriba,en la función para Blogger, el código se ha comprimido para que ocupe menos tiempo de carga.

La versión PHP de esta función la encuentras igualmente en el artículo "Fechas más amigables en WordPress".

Una forma sencilla de solucionarlo y mejorar con ello la experiencia del usuario es con jQuery:

Solución sencilla

En el header de la página se agrega el script que hará el efecto:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
	$('#arriba').click(function(){ //Id del elemento cliqueable
		$('html, body').animate({scrollTop:0}, 'slow');
		return false;
	});
});
</script>

Y el enlace que envía al usuario arriba es:

<a href='#' id='arriba'>Volver arriba &uarr;</a>

Solución completa

Una solución más completa y personalizada se consigue con plugins como:

• Smooth-scroll.
• ScrollTo.
• jQuery.ScrollTo.

Los plugins son más robustos, así que valen la pena solo si hace mucho uso de anclas en una página y estas son claves en la navegación. Recordar que usar estas soluciones con jQuey se justifican si la librería se usa en la solución de otros problemas, de otro modo, una solución basada en javascript "puro" sería más viable.

Solución

En Web Designer Wall plantean una solución con jQuery y usando border-radius (ver demostración). La solución consiste en agregar el siguiente script al header de la página:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $(".rounded-img, .rounded-img2").load(function() {
    $(this).wrap(function(){
      return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });

});
</script>

Y a cada imagen en la que se desea el efecto de esquinas redondeadas se le agrega la clase: rounded-img o rounded-img2. Ejemplo:

<img src="images/blogandweb.png" class="rounded-img" alt="Blog and Web" />

Y por último, se definen estas clases CSS en el header del documento o el archivo de estilos:

.rounded-img {
	display: inline-block;
	border: solid 1px #000;
	overflow: hidden;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.rounded-img2 {
	display: inline-block;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
	-moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
	box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
}

Explicación

La propiedad border-radius no puede actuar cuando el elemento al que se aplica contiene una imagen, sin embargo, funciona correctamente cuando el elemento tiene a esa imagen como fondo.

El script oculta la imagen (con opacity:0) y la envuelve con un elemento <span> que tiene a la misma imagen como fondo.

Conclusión

Una solución bastante práctica y útil principalmente en cabeceras de sitios web, pero aplicable a cualquier imagen. Lo cierto es que esto es un bug, que los navegadores tendrán que arreglar en sus versiones siguientes.

Todo desarrollador web da por descontado tener una conexión, sin embargo, siempre hay casos extraordinarios donde no se tiene este acceso y es cuando se valora todo el material de consulta que se tiene en el disco duro.

Para prevenir este "peligro" bien vale la pena tener manuales de consulta offline. Algunos de los que me han sido útiles personalmente son:

• Manual oficial de PHP – Disponible en html y chm en varios idiomas, incluido el español.
• Manual oficial de MySQL – Disponible en html, chm y pdf en varios idiomas, incluido el español.
• Manual CSS – Manual de CSS 2.1 en formato chm (no oficial).
• Manual HTML – Manual de HTML 4.0 en formato chm (no oficial).
• Manual Javascript – Manual de Javascript 1.5 en formato chm (no oficial).
• Manual de jQuery – La documentación oficial de jQuery 1.4 en un archivo chm (no oficial).
• Manual de la W3C – Manual sobre los estándares web en formato chm (no oficial).

Además de manuales, es muy útil contar con libros con una explicación más amplio y de aplicación práctica, para esto, los libros de librosweb.es son una excelente muestra (disponibles en versiones pdf).

Tú ¿Qué libros y manuales tienes para cuando te quedas offline?

Fotografía de Feuillu

Si no haz usado jQuery, con los siguientes 10 snippets tendrás un ligera idea del potencial de este librería javascript.

1. Agregar/eliminar una clase CSS a un elemento

Especificando un selector, simplemente se usa la función addClass de jQuery para agregar un clase CSS.

Ejemplo: al dar clic en un botón con un id "boton", que agregue la clase "alternativo" a un div con id "header":

$("#boton").click(function () {     $("#header").addClass("alternativo"); })

Y análogamente para removeClass, que cualquier clase establecida en un elemento.

2. Cambiar la hoja de estilos de un documento.

Con jQuey es sencillo seleccionar un elemento a partir de un atributo y también modificarlo con la función attr.

Ejemplo: Cambiar la hoja de estilos de un sitio web al pulsar un link con id "cambiarestilos".

$("#cambiarestilos").click(function () {     $("link[media='screen']").attr("href", "estilos2.css"); })

Análogamente existe una función para remover atributos, con un nombre bastante obvio: removeAttr().

3. Crear un efecto de "zebra".

Gracias al selector "odd", es posible crear tablas o listas con efecto de "zebra", es decir, con estilos intercalados:

Ejemplo: Crear efecto zebra en listas y tablas, agregando una nueva clase llamada "lineazebra".

$("tr:odd").addClass("lineazebra"); $("li:odd").addClass("lineazebra");

4. Verificar si un elemento tiene una clase especifica.

Con la función hasClass() es bastante sencillo saber si un elemento contiene una clase o no.

Ejemplo: Si un párrafo tiene un texto bajo la clase "cita", agregarle una nueva clase llamada "quote".

if ( $("p").hasClass("cita") ) {     $(this).addClass("quote"); }

5. Encontrar el elemento más cercano con alguna característica particular.

Con la función closest() se puede encontrar al elemento que cumpla con una característica en particular.

Ejemplo: Encontrar el imagen más cercano a un párrafo y obtener su id.

$("p").closest("div").attr("id");

Más snippets jQuey

La idea de los 5 sinippets listados es mostrar la punta del iceberg con jQuery, existen una gran cantidad de snippets que te ayuda a mejorar la experiencia de tus visitantes en tu sitio web:

• 50 jQuery Snippets That Will Help You Become A Better JavaScript Developer.
• Manipulating the DOM with jQuery: 10+ useful code snippets. (en el que se baso este post)
• Top 10 jQuery Snippets (including jquery 1.4)
• 6 jQuery snippets you can use to manipulate select inputs.
• Jquery en snipplr.
• 31 jQuery Snippets That Will Help Make You A JavaScript Pro.

Los videotutoriales parten de cero, así que con el conocimiento básico de html y css podrás seguirlos sin problema. En cada video se explica un poco la teoría del funcionamiento y se dan ejemplos prácticos de uso, lo que los hace bastante efectivos para aprender.

Videotutorial 1. Selectores JQuery.

Videotutorial 2: Filtros de selectores.

Videotutorial 3: Manejo de atributos.

Videotutorial 4: Funciones, manipulación de DOM.

Videotutorial 5: Métodos específicos a eventos.

Y el curso continuará, pueden estar pendientes directamente en el blog de Fernando Yanes. Otro material de mucha ayuda para aprender jQuery es:

• Documentación oficial. (en inglés).
• JQuery ya (en español).
• Chuleta o "acordeón" visual de jQuery.

Si quieres aprender a usar esta excelente herramienta, en Videotutoriales.com están haciendo una serie de videotutoriales de lo más básico hasta cosas más particulares. Sino no usas FireBug es una buena introducción y sí ya lo usas, seguramente encontraras alguna función que no conocías.

Hasta el momento son tres los tutoriales:

• 01.- Usando Firebug. Primer videotutorial dedicado al depurador 2.0
• 02.- Curso de Firebug. Trabajar con la Consola.
• 03.- Curso de Firebug. Depurar código JavaScript (arriba)

Desde mi punto de vista, una extensión indispensable para todo desarrollador web, pero también para el que esta incursionando en el diseño y la programación.

Descargar FireBug