Cached Commons: Librerías JavaScript online

JMiur [E]

Seguramente, muchas veces hemos accedido a github, una comunidad donde muchos desarrolladores comparten proyectos de manera pública y desde allí, hemos descargado algún tipo de código.

Uno de esos proyectos es el llamado Cached Commons que es una colección de librerías de JavaScript a las que podemos enlazar sin necesidad de descargarlas y alojarlas en nuestros propios servidores. De alguna manera, funciona como las Google Ajax Libraries API y es una muy buena opción, tanto para quienes usamos Blogger (que no dispone de un alojamiento propio para estas cosas) como para cualquier otra web ya que ellos aseguran que las librerías están optimizadas y comprimidas; al agregarse a la caché de cada usuario, ayudará a ascelerar la carga de cualquier sitio.

Lo interesante de esto es que no se limita a las librerías clásicas sino que incluye muchísimas de todo tipo y además, es posible comunicarse con ellos y solicitarles que incluyan otras en el futuro.

En este momento, hay más de cien y las opciones de cada una de ellas varía; nos informan su origen, algunas teinen demos y documentación: ExplorerCanvas, jQuery con decenas de plugins, Modernizr, SoundManager, SWFObject, Cufon, Prettify, etc, etc, etc.

Para utilizarlas, simplemente copiamos la dirección URL y la agregamos al atributo src de la etiqueta script; por ejemplo:

<script type="text/javascript" src="http://cachedcommons.org/javascripts/visualization/raphael-0.8.7.js"></script>

REFERENCIAS:unijimpe.net

Simple slideshow de imágenes con Scriptaculous

Este es un slideshow hiper-simple donde en pocas líneas se explica la forma de crear transiciones utilizando script.aculo.us y por lo tanto, pude servir de base para quien quiera experimentar con el tema.

Como requiere de esa librería, primero que nada, debemos tenerla agregada y lo más simple es cargarla desde los repositorios de Google mismo:

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js' type='text/javascript'></script>

Y ahora, el script en si mismo que podemos poner directamente en la plantilla o cargarlo desde un archivo externo:

<script type='text/javascript'>
//<![CDATA[
var delay = 4000; // la velocidad de las transiciones
var start_frame = 0; // comienza con la primera imagen

// esta es la función qu ejecuta las transiciones cada cierto tiempo
function start_slideshow(delay) {
setTimeout(fadeInOut(delay), delay);
}

// la función de las transiciones usando el efecto Appear se aplica a una lista cuyo ID es slide-images
function fadeInOut(delay) {
return(function() {
lis = $$('#slide-images>li');
new Effect.Appear(lis[1], { duration: 2, afterFinish: function(obj) {
lisFade = lis[0].remove();
lisFade.hide();
$('slide-images').appendChild(lisFade);
start_slideshow(delay);
}});
})
}

// todo se ejecuta cuando se termina de cargar la página
Event.observe(document, 'dom:loaded', function() {
var lis = $$('#slide-images>li');
if(lis.length > 1) for(i = 1; i < lis.length; i++) lis[i].hide();
});
Event.observe(window, 'load', function() {
if($$('#slide-images>li').length > 1) start_slideshow(delay);
});
//]]>
</script>

Y el estilo mínimo que en este caso, será para mostrar imágenes de 400x300:

<style type='text/css'>
#slideshowDEMO { /* es el DIV contenedor que dimensionamos y centramos */
height: 300px;
margin: 0 auto;
width: 400px;
}
#slide-images { /* es la lista con las imágenes */
display: block;
height: 300px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 400px;
}
#slide-images li { /* cada item de la lista */
display: block;
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
#slide-images li img { /* cada imagen */
display: block;
height: 300px;
width: 400px;
}
</style>

Como dije, todo es una simple lista de imágenes así que el HTML es algo similar a esto:

<div id="slideshowDEMO">
<ul id="slide-images">
<li><img src="URL_imagen_1" /></li>
<li><img src="URL_imagen_2" /></li>
.......
<!-- seguimos poniendo tantas imágenes como se nos ocurra -->
</ul>
</div>

Y el resultado final será algo como esto:

REFERENCIAS:Andrew Sellick

Blogger: El código de las imágenes insertadas

Agregar una imagen en una entrada de Blogger es sencillo, la seleccionamos, hacemos un par de clicks y voilá, ya queda colocada pero, las cosas se complican un poquito cuando no nos conformamos con lo que el servicio nos ofrece y ahí surgen las preguntas de por qué no se ve cómo uno quiere o por qué el tamaño no cambia pese a que le ponemos propiedades CSS en la plantilla.

La explicación es fácil, como todo sistema, Blogger nos permite agregar imágenes y nos da una serie de alternativas pero no puede darnos todas, sólo aquellas que ellos suponen que son las normales; si queremos salirnos de esos patrones no queda otra cosa que editar el código HTML y modificarlo para lo cual, necesitamos entenderlo aunque sea mínimamente.

Esto puede ser un problema doble ya que, el código insertado, varía con nuestras opciones pero también varia según el tipo de editor que estemos usando, dirá una cosa si usamos el editor normal y dirá otra si usamos el editor de Blogger Draft o el editor actualizado.

Desde el editor tradicional, una vez que seleccionamos la imagen, podemos indicarle la forma en que se alineará: Ninguno, Izquierda, Derecha, Centrar y el tamaño que deseamos: Pequeñas, Medio, Grandes y el código insertado, si elegimos Centrar/Grandes será algo así:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://......./s1600/imagenDEMO.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://......./s400/imagesDEMOBASE.jpg" alt="" id="BLOGGER_PHOTO_ID_0000000000000000000" border="0" /></a>

La imagen insertada es un enlace que tiene un evento llamado onblur que vaya uno a saber para qué lo usa Blogger y apunta a la imagen en su tamaño real ya que, siempre, lo que insertamos en una entrada es una miniatura. Al hacer click en la imagen, esta se abrirá en la misma ventana así que si queremos que se abra en otra ventana, deberemos agregarle el atributo target. Podríamos entonces, simplificar ese enlace y dejarlo así:

<a href="http://......./s1600/imagenDEMO.jpg" target="_blank">

La etiqueta IMG es la que muestra la miniatura seleccionada y tiene varios atributos.

border="0" se coloca porque, por defecto, cualquier imagen que es un enlace tiene un borde pero siempre es mejor definirlo con CSS y quitarlos de manera global añadiendo la definición a la plantilla:

a img {border: none;}

alt="" está vacío así que si queremos agregar una descripción, debemos hacerlo manualmente
id="" identifica la etiqueta y no tiene ningún uso práctico

La clave de nuestros desvelos es el atributo style ya que es allí donde Blogger agrega una serie de propiedades que son las que pueden volvernos loco. Es que, si en nuestra plantilla definimos propiedades de algún tipo para las imágenes, estas, se sobrescriben en la etiqueta misma. Por ejemplo, si se establecen tamaños con width y height, estos son ignorados y lo que vale es lo que dice la etiqueta, lo mismo ocurre con los márgenes así que, si queremos algo especial, debemos eliminar todo eso y el código quedará reducido a algo así:

<img src="http://......./s400/imagesDEMOBASE.jpg" alt="" />

Sin formato, sin márgenes, sin nada; donde lo único necesario es la imagen en si misma y eventualmente, el enlace si es que nos gusta. El resto, lo podemos definir en el CSS de la plantilla y usar alguna clase; por ejemplo:

<img class="centrada" src="http://......./s400/imagesDEMOBASE.jpg" alt="" />

.post-body img.centrada {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 0 10px #AA8800 inset;
  -webkit-box-shadow: 0 0 10px #AA8800 inset;
  box-shadow: 0 0 10px #AA8800 inset;
  display: block;
  margin: 0 auto;padding: 10px;
}

Algo similar ocurre con el el nuevo editor, cambia el código pero la idea es similar:

<div class="separator" style="clear: both; text-align: center;"><a href="http://......./s1600/imagesDEMO.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="http://......./s400/imagesDEMOB.jpg" width="400" /></a></div>

Han quitado algunas cosas que evidentemente eran inútiles pero, han agregado otras que también son bastante dudosas y ahora, las distribuyen en varias etiquetas.

En este caso, todo esta dentro de un DIV con una clase CSS que nadie usa y que, por lo general no está definida; en el enlace, el atributo imageanchor no sé para que puede servir; en la etiqueta IMG, en lugar de tener definido el tamaño en style, se lo define con los atributos width y heigh que son los que deben eliminarse si se quiere usar alguna clase de CSS especial. Otra vez, todo eso puede simplificarse y quedarnos sólo con la imagen.

Conviene aclarar que todo lo dicho hasta acá es opcional, no hay ninguna necesidad de hacerlo de este modo y los códigos insertados por Blogger, nos gusten o no, funcionan perfectamente y sólo es necesario meterse con ellos si es que queremos hacer algo especial.

Cinco packs de íconos surtidos

Save as PDF

¿Nubes de etiquetas SI o nubes de etiquetas NO?

Cuando Google habla, la gente escucha; es la voz del dios mundano que rige nuestro destino pero ... siempre hay un pero ... una cosa es escuchar lo que Google dice y otra es entrar en pánico.

En un articulo reciente de El Blog para Webmasters, Matt Cutts, el CEO de Google, responde a una pregunta: ¿Las nubes de etiquetas suponen un obstáculo para la optimización?

Y su respuesta es SI.

Normalmente, si tienes un blog o algo similar, verás que en la barra lateral derecha o encima de la barra lateral izquierda aparece un conjunto de varias etiquetas utilizadas para marcar diferentes entradas de blog ... ¿Qué es una nube de etiquetas? En realidad, se trata simplemente de una lista de enlaces ... ¿pueden ser un obstáculo? Sí, si la nube incluye unas 500 etiquetas, ya que puede parecer una aglomeración de palabras clave, sobre todo porque se trata de palabras arbitrarias mezcladas entre sí. Esto también ocurre si la nube de etiquetas hace una especie de efecto "flash", es decir, si las etiquetas giran por la página. Esto puede resultar divertido para los usuarios, pero no creo que siempre se puedan extraer esos enlaces ni que PageRank pueda rastrearlos.

Semejante afirmación ha hecho que varios me pregunten ¿qué hago? ¿las quito? ¿cómo puedo reemplazarlas? ¿coloco la lista de etiquetas de modo "normal"? ¿Google me odia?

Vayamos por partes.

Primero que nada, una verdad indiscutible: una nube de etiquetas es una lista de enlaces y la teoría dice que debemos ser cuidadosos con los enlaces de una página; deberíamos analizar bien cuáles son los relevantes y cuales son los intrascendentes. Esto no significa que no deba haber enlaces sino que debemos tener cuidado con qué sitios enlazamos.

Aquí, ya entramos en lo subjetivo pero en realidad, todo lo que se refiere a SEO, indexaciones y otras magias negras, queda siempre circunscripto a uná técnica muy compleja: el sentido común.

Ese sentido común hace que podamos analizar esto con tranquilidad ¿Tiene sentido enlazar ciertos sitios externos? No, de nada sirve un enlace a Google, a la Wikipedia o a YouTube y, para eso, es que se ha inventado el atributo nofollow que lo que hace es, simplemente, decirle a los buscadores que no lo indexe. De ese modo, en una página con cierta cantidad de enlaces, solo aquellos que no tengan ese atributo serán tenidos en cuenta:

<a href="http://googlewebmaster-es.blogspot.com/" rel="nofollow"> Google Webmasters Blog </a>

Lo mismo pasa con nuestros enlaces internos ya que los blogs también tienen páginas irrelevantes, la página donde está el formulario de contacto, las páginas con listas de archivos, etc. Entre esos enlaces que se consideran irrelevantes están los comentarios que algunos promueven diciendo que no tienen un nofollow para, en teoría, fomentar los comentarios pero, eso no es del todo cierto ya que Blogger SIEMPRE agregará nofollow a cualquier enlace interno de un comentario y eso no es algo que podamos controlar. En todo caso, pude eliminarse el nofollow del autor pero, si es alguien logueado en Blogger, esa URL apunta a su perfil y no a su blog, por lo tanto, también es un enlace irrelevante y no sólo no ayuda en absoluto al comentarista sino que perjudica a todos los otros enlaces, haciendo que disminuyan su importancia.

Blogger, por defecto, agrega en sus plantillas dos tipo de enlaces con nofollow, en los backlinks y en los autores de los comentarios; ambos, deberían ser dejados si es que queremos que nuestro blog esté optimizado. Además, deberiamos agregar ese atributo a todos aquellos enlaces que veamos en nuestra plantilla y que consideremos irrelevantes ¿Ejemplos? Como dije, página de contacto, nuestra direccion de mail, botones de traducción que usan servicios externos, etc, etc, etc. Es más fácil pensarlo al revés ¿qué enlaces queremos "promover"? Los nuestros (con prudencia), los de algunas páginas específicas, los de nuestro blogroll; lo mismo pasa en las entradas aunque allí, hay que hacerlo manualmente y eso es molesto.

Pero, ese atributo no es la única forma de evitar el problema de los enlaces irrelevantes. De manera genérica, puede usarse una etiqueta META:

<meta content='noindex,nofollow' name='robots'/>

Y un detalle más que es algo sobre lo que no habla el artículo, el archivo robots.txt que agrega Blogger y que nosotros no podemos modificar.

Los archivos robots.txt son listas de instrucciones que le indican a los motores de búsqueda, que el acceso a ciertas páginas de nuestro sitio están restringidas y de esa manera, esas páginas y su contenido, no son indexados. Entre otras cosas, el de Blogger dice esto:

User-agent: *
Disallow: /search

Lo que significa que toda página cuya URL sea de este tipo no será indexada:

http://miblog.blogspot.com/search/.......

Es por eso que a veces, si entramos en las Herramientas para Desarrolladores de Google y vamos a Diagnóstico | Errores de rastreo, veremos que en la pestaña Restringidas por robot.txt, aparece la advertencia que, en realidad, no es un error. Simplemente se nos informa que esas direcciones no se indexarán.

En nuestro caso, las etiquetas tienen ese tipo de URL con lo cual el tema de la nube-si o nube-no se resuelve y la respuesta a ¿debo quitar la nube de etiquetas por lo que dicen Matt Cutts y Google? es NO, en Blogger no es necesario y en cualquier otro sistema o página web, podemos resolverlo con alguna otra alternativa así que ...

la vida continua ...

Efecto Polaroid con CSS

Este demo de Zurb utiliza CSS para mostrar imágenes con un efecto tipo Polaroid y emplea transiciones que son propiedades que, por ahora, sólo son animadas en Safari y Chrome. En Firefox, veremos el efecto como una transición estática y me he tomado el atrevimiento de agregar algún filtro para que en Internet Explorer veamos algo aunque sea incompleto. Moraleja, como siempre, lo mejor está por venir así que es bueno irse acostumbrando a ciertas cosas que no tardarán demasiado en ser un nuevo estandard en al forma de crear páginas web.

Ponemos las imágenes en una lista ordenada con una clase llamada polaroids y cada una en un enlace donde el atributo title, será el texto que agregaremos debajo de ellas:

<ul class="polaroids">
  <li>
    <a href="javascript:void(0);" title="imagen 1"><img src="URL_imagen1"  /></a>
  </li>
  <li>
    <a href="javascript:void(0);" title="imagen 2"><img src="URL_imagen2"  /></a>
  </li>
  .......
  <li class="messy">
    <a href="javascript:void(0);" title="imagen especial"><img src="URL_imagenespecial"  /></a>
  </li>
  .......
</ul>

Ahora el CSS que es el punto clave de todo esto; el que usé en este ejemplo es algo así:

<style>
/* a la lista le damos una dimensión y le colocamos los márgenes necesarios */
ul.polaroids {
  list-style-type: none;
  margin: 0 0 0 50px;
  width: 600px;
}
ul.polaroids li {
  display:inline;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
/* cada enlace contiene una imagen y es donde definimos los colores y las propeidades de los textos */
ul.polaroids a {
  display: inline;
  float: left;
  margin: 10px 30px;
  padding: 10px;
  width: auto;
  /* las propiedades gráficas */
  background-color: #FFF;
  /* las propiedades de los textos */
  font-family: Tahoma;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 1px #123;
  /* por defecto, rotamos las imágenes */
  -moz-transform: rotate(-2deg);
  -webkit-transform: rotate(-2deg);
  filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9993908270190958, M12=0.03489949670250097, M21=-0.03489949670250097, M22=0.9993908270190958);
  /* y la transición */
  -webkit-transition: -webkit-transform .15s linear;
}
/* cada imagen (en este caso las dimensiono todas iguales pero, pueden ser diferentes) */
  ul.polaroids img {display: block;
  margin-bottom: 5px;
  height: 150px;
  width: 200px;
}
/* esto es lo que agregará el texto contenido en el atributo title */
ul.polaroids a:after{
  content: attr(title);
}
/* utilizando la pseudo-clase nth-child hacemos que algunas imágenes se muestren diferentes */
/* no usamos filtros para IE porque esta pseudo-clase no es reconocida */
ul.polaroids li:nth-child(even) a {
  -moz-transform: rotate(2deg);
  -webkit-transform: rotate(2deg);
}
ul.polaroids li:nth-child(3n) a {
  background-color: #AAA;
  color: #589;
  position: relative;
  top: -5px;
  -moz-transform: none;
  -webkit-transform: none;
  }
ul.polaroids li:nth-child(5n) a {
  background-color:#DDD;
  color:#BEF;
  position: relative;
  right: 5px;
  -moz-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
}
ul.polaroids li:nth-child(8n) a {
  position: relative;
  right: 5px;
  top: 8px;
}
/* una opción es definir una clase con una característica especial, diferenciada del resto */
ul.polaroids li.messy a {
  background-color: #FEA;
  margin: 20px 150px;
  -moz-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.984807753012208, M12=0.17364817766693033, M21=-0.17364817766693033, M22=0.984807753012208);
}
/* por último, el efecto hover es el que lanza las transiciones */
ul.polaroids li a:hover {
  position: relative;
  z-index: 5;
  -moz-box-shadow: 0px 0px 20px #000 inset,10px 15px 10px #000;
  -webkit-box-shadow:0px 0px 20px #000 inset,10px 15px 10px #000;
  -moz-transform: scale(1.25);
  -webkit-transform: scale(1.25);
  filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1);
}
</style>