Proximamente: Botones para compartir en Blogger

Si miran su plantilla de Blogger y la expanden, verán que en el Widget Blog hay un nuevo INCLUDABLE que, aparentemente, se ha agregado a todas, ya sean estas las originales o no.

El código que tiene es el siguiente:

<b:includable id='shareButtons' var='post'>
<b:if cond='data:post.sharePostUrl'>
<a class='share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.emailThisMsg/></span>
</a>
<a class='share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;&quot; + data:top.blogThisMsg + &quot;\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.blogThisMsg/></span></a>
<a class='share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToTwitterMsg/></span>
</a>
<a class='share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;&quot; + data:top.shareToFacebookMsg + &quot;\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToFacebookMsg/></span>
</a>
<a class='share-button sb-buzz' expr:href='data:post.sharePostUrl + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, \&quot;&quot; + data:top.shareToBuzzMsg + &quot;\&quot;, \&quot;height=415,width=690\&quot;); return false;&quot;' expr:title='data:top.shareToBuzzMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToBuzzMsg/></span>
</a>
</b:if>
</b:includable>

Aparentemente, lo que va ha hacer eso es agregar cinco íconos para compartir entradas con diferentes servicios; en este caso, enviarlas por e-mail, BlogThis, Twitter, Facebook y Google Buzz.

Por ahora, los enlaces no parecen estar funcionando y es probable que requiera que marquemos alguna opción en el widget ya que todo el código está condicionado. De todos modos, podemos espiar.

Le quitamos la condición y lo agregamos, por ejemplo, en el footer de los posts:

<b:include data='post' name='shareButtons'/>

Lo que veríamos seria esto:

Se adapta bien a cualquier color de fondo, es bastante discreto, tiene un efecto hover y al hacer click se abre el enlace en una nueva ventana pero, no vale la pena que lo hagan porque aún no enlaza nada. Habrá que esperar hasta que lo activen.

Este gadget de Blogger no parece haber tenido mucho éxito. Aparecía si entrábamos via Draft pero ya no lo veo aunque sigue siendo accesible y fue publicitado hace más de un año.

Se trata de de Event que permite agregar eso, algún tipo de promoción a un evento determinado e invitar a los visitantes a unirse y participar usando Google Calendar y FriendConnect.

Ellos dicen que es una maravilla; yo, no lo entiendo en absoluto y encima, está en inglés.

Bien. allí está por si a alguien el resulta útil y si no se ve en la lista de gadgets, basta hacer click en Añade tu propio en la ventana y escribir esta URL:

http://www.google.com/ig/modules/calendar/socialevent/bloggerevent.xml

FlashGameDistribution.com es un sitio que permite a los desarrolladores de juegos de Flash, subir sus creaciones y distribuirlas. Recién salido de su versión beta, es una alternativa para todos aquellos que buscan sitios gratuitos e incluye a posibilidad de agregar sponsors.

Click para jugar.

http://flashgamedistribution.com/game/study_materials_spot_the_difference

REFERENCIAS:Emanuele Feronato

Este script se llama M6 menu y es una de las tanta genialidades de dhteumeuleu que siempre me sorprende con sus experimentos. El código es realmente mínimo y ta vez sea eso lo que más llama la atención. El script en si mismo ocupa unas pocas líneas y se coloca antes de </head>:

<script type="text/javascript">
//<![CDATA[
// ===========================================
//                -------- M6 menu ------ 
// script written by Gerard Ferrandez - Ge-1-doot - December 2005 
// http://www.dhteumeuleu.com 
// updated Feb 2010 - namespaced 
// ===========================================

var M6 = function () {
var P,T;
var over = -1;
var fontSize = 38;
var lensFX = 1;
var num = true;
var color = "#FFF";
var selected = "#F80";
var zoom = function (s) {
if(s!=over){
over = s;
var i = 0,o;
while (o = P[i]) {
o.style.fontSize=Math.floor(fontSize / (Math.abs(i - s) + lensFX) + 3)+"px";
o.style.color=(i==s)?selected:color;
i++;
}
}
}
var init = function () {
P = document.getElementById("menu").getElementsByTagName("a");
var i = 0,o;
while (o = P[i]) {
if(num){
x=i+".";
if(x.length<3)x="0"+x;
o.innerHTML = x+o.innerHTML;
}
o.style.width = "100%";
o.i = i;
o.onmouseover= function() {
zoom(this.i);
}
i++;
}
zoom(0);
}
return {
init : init
}
}();
onload = function() {
M6.init();
}
//]]>
</script>

donde hay cuatro datos configurables:

• var num agrega un número de orden delante de cada enlace (poner false para eliminarlo)
• var fontSize establece el tamaño de la fuente del texto
• var color el color de los enlaces (blanco por defecto)
• var selected el color del enlace activo (naranja por defecto)

A esto, le podemos sumar dos definiciones de CSS; por ejemplo:

#menu { /* el rectángulo donde se mostrará la lista de enlaces */
height: 300px; /* la altura del rectángulo */
position: relative;
width: 400px; /* el ancho del rectángulo */
}
#menu a {  /* los enlaces */
display: block;
font-family: Arial, sans-serif;
text-decoration: none;
white-space: nowrap;
}

Y el código HTML sólo es un DIV con una serie de enlaces:

<div id="menu">
<a href="URL_enlace1"> enlace 1 </a>
<a href="URL_enlace2"> enlace 2 </a>
<a href="URL_enlace3"> enlace 3 </a>
.......
</div>

¿Y esto podría usarse para algo?

Sí, claro, por ejemplo, podemos aplicarlo al blog como una forma distinta de mostrar las etiquetas. Para eso basta agregar un nuevo Elemento Etiquetas o usar el que ya tenemos, establecer el tipo LIsta y desmarcar Mostrar cantidad de entradas por etiqueta. Luego, buscamos el widget que, por defecto tendrá como id Label1 y modificamos una línea del script; en lugar de:

P = document.getElementById("menu").getElementsByTagName("a");

ponemos:

P = document.getElementById("Label1").getElementsByTagName("a");

Tambien conviene reducir la fuente del texto y no mostrar el número de orden; Por último, adaptamos el CSS, por ejemplo:

#Label1 {
height: 300px;
position: relative;
width: 250px;
}
#Label1 li {
list-style-type: none;
margin: 0;
padding: 0;
}
#Label1 a {
display: block;
font-family: Arial, sans-serif;
text-decoration: none;
white-space: nowrap;
}
#Label1 a:hover {
text-decoration: none;
}

Like it? Tweet it! es un plugin para jQuery que permite que cualquiera pueda publicar tweets directamente desde una web.

Necesitamos entonces tener jQuery agregado antes de </head>:

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

Y luego, el script del plugin que podemos descargar y alojar nosotros o usar el que ellos ellos ofrecen:

<script type="text/javascript" src="http://tweet-it.s3.amazonaws.com/tweet-it.js"></script>

y la llamada a la función:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$(".tweet-it").tweetIt();
})
//]]>
</script>

Por último, colocamos un enlace donde se nos ocurra:

<a href="javascript:void(0);" class="tweet-it"> un texto o una imagen </a>

Haciendo click en el enlace se abrirá una ventana que siempre se mostrará en la parte inferior de nuestra pantalla y que, la primera vez que la usemos, nos pedirá autorización para conectarse con nuestra cuenta :

El widget admite agunos parámetros opcionales que pueden agregarse a la función:

header: es el texto del header y por defecto dice "Like it? Tweet it!"
intro: es el texto introductorio "No autotweets here! Write your own text ..."
typeATweet: es el texto previo al enlace y por defecto dice "Type a tweet here"
linkSeperator: es la separación entre ese texto y el enlace " — "
animate: es la forma en que se mostraá a ventana; puede ser slide , fade o false
cssFile: un archivo de estilo opcional (más información)
popup: se coloca true si se quier mostrar la ventana en un pop-up
popupWidth: es el ancho de esa ventana popup, por defecto es 500
popupHeight: es el alto de esa ventana popup, por defecto es 233

REFERENCIAS:unijimpe

Leía un tweet de SpamLoco que mostraba una noticia reciente respecto a una demanda y me quedé pensando en el título:

Las webs no son responsables de lo que comentan sus lectores

El Tribunal Supremo ha eximido de responsabilidad al dueño del foro quejasonline.com, en el que se habían vertido comentarios en contra de un abogado de la Mutua Madrileña Automovilista. La aseguradora decidió demanda al dueño del foro por supuestos ataques a su honor. La denuncia se generó por el siguiente comentario: “soy abogado de la Mutua Madrileña y estoy cansado de engañar a la gente, pues la Mutua me hace retrasar los expedientes con el fin de no pagar, tiene pinta de irse al garete“.

El comentario estaba firmado supuestamente por el abogado J.M.M, el cual al encontrarse en el foro con un comentario bajo su nombre que él no había hecho, se puso en contacto con el dueño del foro para solicitarle los datos de contacto de la persona que había suplantado su identidad. El foro siguiendo la ley de protección de datos no le facilitó esa información, y el abogado procedió a demandar al foro, ganando en primera instancia el juicio y recibiendo una indemnización de 6135 euros ... pero la sentencia se recurrió y finalmente ... el Tribunal Supremo ... ha establecido que los responsables de la web no son responsables siempre que no sean conscientes de que la actividad o información es ilícita.eduangi.com

Las webs no son responsables de lo que comentan sus lectores pero ¿las webs no son responsables de lo que comentan sus lectores?

No me lo pregunto desde el punto de vista legal que vaya uno a saber cuál es y poco me preocupa; me lo pregunto desde la simple lógica de alguien que tiene un blog y que navega en al red.

Los administradores de las webs
¿no son responsables de lo que comentan sus lectores?

No cabe duda que si un sitio es público está expuesto a que cualquiera pueda dejar un comentario de cualquier clase; hasta ahí, no hay mucha diferencia con tantos exabruptos que se escuchan a diario en cualquier medio de comunicación pero hay un límite no muy preciso entre opinar y calumniar. Digo que no es muy preciso porque no hay otra forma de establecer ese límite que nuestras propias convicciones, estará más acá o más allá pero existe siempre.

A diferencia de otros medios, internet está abierta las 24 horas del dia así que, en la práctica, es imposible controlar constantemente pero lo razonable es que el administrador ejerza ese control y, aunque sea de forma periódica, elimine cualquier tipo de comentario que pueda considerar agraviante o dudoso y no deba recurrir a escudarse en algún tecnicismo vanal. No es un tema jurídico, es pura higiene.

Si se trata de foros o sitios grandes uno podría decir ... bueno, es mucho trabajo pero, vamos, contraten personal que lo haga ¿o sólo son negocitos de cuarta categoría? Si yo tuviera un comercio que se dedica a vender fruta que está en mal estado, alguna consecuencia tendré ¿por qué la web debería regirse por normas diferentes?

A medida que escribo me convenzo más que las webs no pueden ser responsables de los comentarios de sus lectores pero DEBEN hacerse responsables de lo que permanece publicado, incluyendo esos comentarios.

Es curioso que muchos administradores se indignen con visitantes que escriben todo con mayúsculas o con las faltas de ortografía pero se sientan aliviados frente a este tipo de noticias que, por otro lado, hay que tomar con mucho cuidado ya que sólo se trata de un hecho concreto y hay muchos otros casos donde los tribunales dijeron exactamente lo contrario.

De todos modos, sea cual sea el parecer de los jueces y abogados, nosotros, personas comunes que sólo tienen un blogcito, también deberíamos reflexionar sobre el tema y establecer nuestras propias reglas internas que a mi entender, deberían incluir un extremo cuidado con aquello que se publica o que se permite que se publique, caso contrario, terminaremos en medio de un enorme tablón de anuncios anónimos donde fulanos y menganos se insulten los unos al otros sin consecuencias de ninguna especie y sin crear otra cosa que un circo romano que probablemente sea muy rentable pero que poco tiene que ver con lo debería ser internet y la vida misma.

Mucho se habla del CSS3 y claro, ¡cómo no hacerlo! Decenas de entradas muestran detalles, ejemplos de aplicación y, por lo general aclaran: estro no funcionará en IE etc etc etc.

Es verdad pero, hay ciertas cosas que sí funcionarán y para ser justos, habría que decir que en realidad, hay ciertas cosas que ya existían en Internet Explorer, desde su versión 5.5 y que recién ahora, los otros navegadores están incorporando. Obviamente, no se trata más que de alguna clase de casualidad pero, bienvenida sea ya que, con las limitaciones del caso, podemos aprovecharnos de ellas.

Ese es el caso de las gradientes, una forma excelente de usar el CSS para generar degradados y reemplazar el uso de ciertas imágenes.

Las gradientes pueden ser utilizadas en la mayoría de los navegadores y entre otras cosas, nos permiten generar botones de aspectos "sofisticados". Vamos a los ejemplos más sencillos donde la clave está en el uso de estas tres propiedades:

-moz-linear-gradient(); en Firefox
-webkit-gradient(); en Safari y Chrome
DXImageTransform.Microsoft.Gradient(); en Internet Explorer

Cada navegador tiene su regla y en este caso, son muy diferentes así que vamos a hacerlo de la manera más sencilla posible para que no haya diferencias. En IE, como se trata de un filtro que ya tiene muchos años de existencia, las posibilidades son menores así que nos basamos en ese modelo y creamos un botón, por ejemplo:

<a href="#" class="boton">mi botón</a>

mi botón

.boton {
    color: #FFF;
    display: block;
    font-family: Tahoma;
    font-size: 40px;
    height: 50px;
    line-height: 50px;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: 300px;
}

No se ve nada más que el texto así que vamos a ponerle un fondo usando gradientes y hacer que cambie al poner el cursor del ratón encima:

<a href="#" class="boton demo1">mi botón</a>

mi botón

.demo1{
  background-image: -moz-linear-gradient(100% 100%  90deg, #222222, #BBBBBB);
  background-image: -webkit-gradient(linear, 0% 100%, 0% 0%,from(#222222), to(#BBBBBB));
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#BBBBBB', EndColorStr='#222222');
}
.demo1:hover{
  background-image: -moz-linear-gradient(100% 100%  90deg, #222222, #DDDDDD);
  background-image: -webkit-gradient(linear, 0% 100%, 0% 0%,from(#222222), to(#DDDDDD));
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#DDDDDD', EndColorStr='#222222');
}

En los tres casos, la gradiente es horizontal (en IE sólo hay dos tipos disponibles) y los valores hexadecimales indican los colores desde #222222 (el color más oscuro) hasta #BBBBBB (el color más claro) y lo que hacemos en el efecto hover es que ese color final sea aún más claro lo que lo "ilumina".

Ahora, lo mismo pero con otros colores:

<a href="#" class="boton demo2">mi botón</a>

mi botón

.demo2 {
  background-image: -moz-linear-gradient(100% 100%  90deg, #220000, #FF0000);
  background-image: -webkit-gradient(linear, 0% 100%, 0% 0%,from(#220000), to(#FF0000));
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF0000', EndColorStr='#220000');
}
.demo2:hover {
  background-image: -moz-linear-gradient(100% 100%  90deg, #220000, #FF8800);
  background-image: -webkit-gradient(linear, 0% 100%, 0% 0%,from(#220000), to(#FF8800));
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF8800', EndColorStr='#220000');
}

Y algo similar pero con una gradiente en el otro sentido:

<a href="#" class="boton demo3">mi botón</a>

mi botón

.demo3 {
  background-image: -moz-linear-gradient(100% 100%  135deg, #FF3300, #FFFF00);
  background-image: -webkit-gradient(linear, 100% 100%, 0% 0%,from(#FF3300), to(#FFFF00));
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#FFFF00', EndColorStr='#FF3300');
}
.demo3:hover {
  background-image: -moz-linear-gradient(100% 100%  135deg, #FFFF00, #FF3300);
  background-image: -webkit-gradient(linear, 100% 100%, 0% 0%,from(#FFFF00), to(#FF3300));
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#FF3300', EndColorStr='#FFFF00');color:#000 !important;
  color: #000;
}

Click para ver ampliar imágenes.

REFERENCIAS:InfinitosMundos en Facebook

Me enteré por un ronroneo de Pau pero, seguramente, ya lo habrán visto anunciado en muchos sitios así que, para no ser menos, aquí vamos a probar este nuevo juguetito que nos regala Google: la llamada Google Font API que nos va a permitir utilizar fuentes de texto no convencionales en cualquier sitio web sin tener que estar lidiando con archivos complicados de alojar y difíciles de manejar.

Es tan sencilla que llama la atención y si bien la biblioteca disponible aún no es demasido grande, las alternativas que se presentan de acá al fuuro son increibles.

Las fuentes disponibles pueden verse en el directorio de Google Font y muchas de ellas tiene variantes, basta hacer click en cada una de ellas para que nos vayan guiando hasta una descripción detallada con ejemplos online y el código necesario que siempre es el mismo y donde sólo varia el nombre.

Un ejemplo simple, copiamos y pegamos lo siguiente en el head de nuestra página, por ejemplo, en Blogger, justo antes de <b:skin>:

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>

Aquí estamos cargando una fuente llamada Lobster pero, cualquier otra es similar, siempre usamos el mismo código:

<link href='http://fonts.googleapis.com/css?family=NOMBRE' rel='stylesheet' type='text/css'/>

y si el nombre tiene espacios intermedios, los reemplazamos con el signo +. Así incluiríamos la fuente llamada Crimson Text:

<link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css' />

Y ahora, ¿cómo la usamos? Como cualquier otra fuente, simplemente, la colocamos en la propiedad font-family:

h3 {
font-family:'Lobster',serif;
}

o en una etiqueta con el atributo style:

<a style="font-family:Lobster,serif;"> un enlace </a>

Todo esto, sin restricciones, usando IDs, clases, etc, tal como haríamos con cualquier otra fuente "normal", agregando tamaños, colores, etc.

Hay una guia bastante completa (en inglés) donde se muestran las diferentes alternativas, allí, nos dicen que si queremos agregar varias, basta declararlas separándolas con el caracter | así que para usar las dos anteriores (Lobster y Crimson Text) podríamos escribir esto:

<link href='http://fonts.googleapis.com/css?family=Lobster|Crimson+Text' rel='stylesheet' type='text/css' />

Una alternativa es usar el cargador que es un script. En ese caso, en lugar de usar la etiqueta LINK, colocamos lo siguiente:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script type="text/javascript">
//<![CDATA[
WebFont.load({
google: {
families: [ 'Lobster', 'Crimson Text' ]
}
});
//]]>
</script>

<link href='http://fonts.googleapis.com/css?family=Tangerine|Crimson+Text|IM+Fell+English+SC|Lobster|Reenie+Beanie' rel='stylesheet' type='text/css'/>

luego definí una serie de clase CSS:

div.tangerine {
color: #000;
font-family: 'Tangerine',serif;
font-size: 36px;
text-shadow: 2px 2px 2px #888;
}
div.crimson {
color: Brown;
font-family: 'Crimson',serif;
font-size: 26px;
}
div.imfell {
background-color: #000;
color: #FFF;
font-family: 'IM Fell English SC',serif;
font-size: 34px;
line-height: 1em;
padding: 10px;
text-shadow: 0 5px 1px #888;
}
div.lobster {
color: #555;
font-family: 'Lobster',serif;
font-size: 18px;
}
div.reenie {
border: 1px solid #000;
color: CornflowerBlue;
font-family: 'Reenie Beanie',serif;
font-size: 64px;
font-weight: bold;
letter-spacing: -5px;
line-height: normal;
}

Que usé igual que cualquier otra, en este caso, en una entrada:

<div class="crimson"> ....... </div>

A veces, tenemos la costumbre de eliminar cosas de la plantilla porque no sabemos que son, porque nos parece que "sobran" y el resultado final es impredecible. No hay problema, es parte del aprendizaje; puede hacerse siempre que probemos y luego, llegado el caso, sepamos como volver a poner todo en su lugar.

Uno de esos códigos "perturbadores" lo encontramos en el <head>, casi al inicio de la plantilla:

<b:include data='blog' name='all-head-content'/>

Muchas consultas respecto a la imposibilidad de acceder a los feeds de nuestro sitio terminan resolviéndose cuando se agrega esa línea que hemos borrado o que la plantilla que descargamos no tenía ya que lo que hace es incluir una serie de etiquetas extras.

Estas, especifican el tipo de codificación, un viejo atributo de Microsoft que no se utiliza y una "marca" que indica al creador de la página web o sea, ellos:

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>

Luego, un favicon por defecto que es el que causa problemas si el nuestro lo colocamos antes de esa instrucción; una serie de etiquetas link que asocian nuestro perfil, el atributo canonical, etc:

<link href='http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>
<link rel="me" href="http://www.blogger.com/profile/xxxxxxxxxx" />
<link rel="openid.server" href="http://www.blogger.com/openid-server.g" />
<link href='xxxxxxxxxx' rel='canonical'/>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.blogger.com/rsd.g?blogID=xxxxxxxxxx" />

Y por últlimo, las etiquetas de los feeds:

<link rel="alternate" type="application/atom+xml" title="miTitulo - Atom" href="http://miblog.blogspot.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="miTitulo - RSS" href="http://miblog.blogspot.com/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="miTitulo - Atom" href="http://www.blogger.com/feeds/xxxxxxxxxx/posts/default" />

Todo eso va cambiando con el tiempo, es decir, Blogger va agregando o modificando algunas de esas etiquetas y si bien podemos colocarlas manualmente, lo mejor es dejar que ellos se encarguen de eso. Por ejemplo, recientemente, le han agregado una nueva etiqueta que podemos ver en las páginas individuales si es que en esa entrada hemos agregado alguna imagen:

<link rel="image_src" href="URL_imagen" />

Esta etiqueta es la que permite que, cuando alguien comparte un enlace de nuestro blog en Facebook, este, contenga la imagen en miniatura correpondiente a esa entrada:

Es que Facebook posee una serie de etiquetas específicas que podríamos utilizar aunque en Blogger es casi imposible. Algunas, tales como las title y description son las estándares pero otras no; por ejemplo, hay una serie de etiquetas que permitirían definir el tipo de medio, algo muy interesante para compartir audio o video:

<meta name="medium" content="tipo_de_dato" />
donde el tipo_de_dato puede ser audio, image,video, news, blog o mult

Por ejemplo, para compartir videos podríamos usar esto:

<link rel="video_src" href="URL_video"/>
<link rel="image_src" href="URL_imagen" />
<meta name="video_type" content="application/x-shockwave-flash" />
<meta name="video_height" content="valor" />
<meta name="video_width" content="valor" />

Si pudiéramos identificar los videos, incluso, sería posible solicitar que Facebok nos permitiera utilizar nuestro propio reproductor e incrustralo directamente tal como lo hacen sitios como YouTube.

Sueños al margen, el hecho que haya una etiqueta link que contiene la URL de la primera imagen de las entradas podría llegar a ser útil aunque no sé muy bien para qué y eso queda librado a la imaginación de quien quiera explorarlo.

Usando JavaScript es bastante sencillo leerla, por ejemplo, esta función devolverá la URL de la imagen o una cadena vacía.

function getImageSRC()
  var laIMG = '';
  var links = document.getElementsByTagName('link');
  for ( var i = 0; i < links.length; i ++ ) {
    if(links[i].rel=='image_src') { laIMG = links[i].href; }
  }
  return laIMG;
}

No, no es algo útil y encima, tarda bastante en cargarse pero no hay que perdérselo porque esta aplicación web basada en Twitter es lo más divertido que se ha visto en mucho pero mucho tiempo.

IS Parade es un sitio japonés pero se entiende así que no necesitamos diccionario; simplemente, poner el nombre de un usuario de Twitter y deleitarse con la animación donde podemos ver a sus seguidores, desfilando uno tras otro.

Algunas opciones permiten hacer capturas de pantalla y publicarlas o bien colocar un pequeño demo en nuestro blog pero, lo ideal es armarse de paciencia, ir y verlo.

REFERENCIAS:Himsomnio

Ese el título de la campaña de Microsoft Australia para ver si logra que los usuarios abandonen definitivamente las viejas versiones de su navegador; algo que deberían haber hecho hace mucho tiempo pero a lo que siempre se negaron.

Y macoteca hace una buenísima pregunta:

¿Merece la pena sacrificar recursos, dinero e innovación por un usuario que en 10 años ni siquiera se ha molestado en hacer “click” para actualizar su navegador?

Una pregunta que en realidad, está dirigida a todos nosotros, a quienes, de alguna manera, agregamos contenido a la web, poco o mucho, no importa. Y responden en un artículo que no debe dejar de leerse:

• Si Microsoft está invirtiendo dinero para que la gente deje de usar un navegador que se ha vuelto obsoleto ¿Por qué los demás no colaboramos también con su muerte?
• Las empresas tecnológicamente punteras como Google, Yahoo o Facebook han dejado ya de dar soporte a Explorer 6. Si funciona, perfecto, si no, te actualizas.
• No se trata de limitar el acceso a una parte de clientes, se trata de sugerirles e invitarles a que obtengan algo mejor y dejar de ocultarles que las cosas no funcionarían si no se hicieran expresamente para Explorer.

¿Donde firmo?

• Descargar Internet Explorer 8
• Descargar Firefox 3.6
• Descargar Google Chrome
• Descargar Opera 10
• Descargar Safari 4

REFERENCIAS:Macoteca

Hace ya tiempo, Ivanna me preguntaba por un efecto que había visto en un blog y que mostraba el header como una sucesión de imágenes con cierto efecto de fade. Ahora, llegó el momento de la explicación.

Se trata de un script simple llamado Image Cross Fader Redux que tiene dos versiones, la más antigua es la que se veía en el ejemplo y una más actualizada y flexible a la que basta modificarla un poco para que funcione en Blogger sin necesidad de alojar archivos.

Necesitamos entonces el script que puede descargarse desde el sitio del desarrollador.

Como cualquier otro, lo colocamos antes de </head>:

<script type='text/javascript'>
//<![CDATA[
... y aquí pegamos el contenido del archivo ...
//]]>
</script>

Agregamos un poco de estilo. A continuación, ponemos esto:

<style>
#imageContainer {
margin: auto;
position: relative;
}
#imageContainer {
height: VALORpx;
width: VALORpx;
}
#imageContainer img {
left:0;
position: absolute;
top:0; 
}
</style>

Allí, sólo cambiaremos VALOR por el ancho y alto de las imágenes que, por lógica, deben ser todas del mismo tamaño.

Por último, el HTML que agregaremos donde nos guste:

<div id="imageContainer">
<img src="URL_imagen_1" />
<img src="URL_imagen_2" />
<img src="URL_imagen_3" />
</div>

Como se ve, sólo es un DIV con un ID específico dentro del cual se colocan las etiquetas IMG de todas las imágenes que querramos mostrar.

Para aplicarlo en el header de Blogger, el proceso es el mismo, agregamos el script, el CSS y luego, sin expandir la plantilla, buscamos el header por defecto que, podemos eliminar o simplemente, ocultar para que no se muestre y de ese modo, si quisiéramos restaurarlo, bastaría hacer el proceso inverso. Eso, podemos hacerlo agregando lo siguiente en el CSS:

#header-wrapper { display: none; }

Y el código HTML lo ponemos arriba de ese DIV del header:

<div id="imageContainer">
<img src="URL_imagen_1" />
.......
<img src="URL_imagen_N" />
</div>

<div id='header-wrapper'>

Gracias, Carlos, por la cordialidad con que siempre me has tratado y por la posibilidad de expresarme libremente. Ha sido un honor que hayas pensado en mi y un placer haber podido responder tus preguntas.

REFERENCIAS:Entrevista

Este es un experimento de Román Cortés y claro, no podía no estar en este blog.

No hay explicaciones, sólo para disfrutar:

click en la letra para empezar

Que el tema no sea de Lennon sino de McCartney es un detalle.

Estos son dos plugins que permiten hacer un debug de cualquier sitio en Internet Explorer; es decir ver el código fuente de manera ordenada, buscar, modificar detalles, explorar el contenido del HTML, el CSS y los scripts, algo muy útil cuando se trata de resolver problemas de diseño.

IE Developer Toolbar es la herramienta que ofrece Microsoft y es bastante completa; con ella, podemos exprimentar modificando el documento mismo sin temor a destruir nuestro blog ya que todos esos cambios son transitorios. Además, podemos buscar, validar, limpiar la caché, etc.

DebugBar es similar y quizás, un poco más amplia en cuanto a funciones y por lo tanto, algo más compleja. El debug de JavaScript es eficiente y posee una consola integrada que permite ejecutar códigos y modificar variables. Incluye un capturador de pantallas, un selector de colores y un gerenciador de cookies avanzado.

Ambos son compatibles así que pueden agregarse simultáneamente.

Estos menús son una demostración práctica y muy original del uso de sprites para crear efectos.

Siempre se parte de lo mismo, el menú, es una lista:

<div class="navi1">
  <ul>
    <li class="sm1"><a href="URL_enlace1"></a></li>
    <li class="sm2"><a href="URL_enlace2"></a></li>
    <li class="sm3"><a href="URL_enlace3"></a></li>
    <li class="sm4"><a href="URL_enlace4"></a></li>
    <li class="sm5"><a href="URL_enlace5"></a></li>
  </ul>
</div>

Pero, como se ve, no hay textos en los enlaces ya que todo el menú es una imagen transparente que tiene dos partes, la de arriba es la que vemos por defecto y la de abajo es la que vemos cuando el ratón se coloca encima

La clave es el CSS y usar la aritmética para calcular cada desplazamiento. No es mucho lo que puede explicarse del tema, hay que mirar y probar:

.navi1 {
  display: block;
  height: 72px;
  margin:0 auto;
  position: relative;
  width: 525px;
}
.navi1 ul {
  float: none;
  list-style-image: none;
  list-style-type: none;
  margin: 3px 0;
}
.navi1 ul li {
  height: 72px;
  background-image: url(URL_imagen);
  background-repeat: no-repeat;
  float: left;
  margin: 0px;
  padding-top: 5px;
  position: absolute;
}
.navi1 ul li a {
  display: block;
  height: 100%;
  width: 100%;
}
.navi1 ul li.sm1 { background-position: 0px 0px; left: 0px; width: 125px; }
.navi1 ul li.sm2 { background-position: -125px 0px; left: 100px; width: 124px; }
.navi1 ul li.sm3 { background-position: -249px 0px; left: 200px; width: 124px; }
.navi1 ul li.sm4 { background-position: -373px 0px; left: 300px; width: 125px; }
.navi1 ul li.sm5 { background-position: -498px 0px; left: 400px; width: 126px; }
.navi1 ul li:hover { z-index: 1000; }
.navi1 ul li.sm1:hover { background-position: 0px -75px; }
.navi1 ul li.sm2:hover { background-position: -125px -75px; }
.navi1 ul li.sm3:hover { background-position: -249px -75px; }
.navi1 ul li.sm4:hover { background-position: -373px -75px; }
.navi1 ul li.sm5:hover { background-position: -498px -75px; }

Las otras variantes siguen el mismo criterio y todos los ejemplos pueden descargarse desde la web del autor.

REFERENCIAS:DeepuBalan

Como son varios los comentarios donde preguntan por la llamada Like-Box de Facebook, vamos a ver si podemos agregar una. Primero que nada, debemos hacer dos cosas, crear la página y leer el artículo de El escaparate de Rosa donde se explica todo paso a paso.

La aparición de los llamados Plugins Sociales ha cambiado levemente la forma en que podemos conectarnos con Facebook y, de alguna manera, lo ha simplificado ya que nos permiten agregar cualquiera de ellos de manera directa y con una línea de código. Para usarlos, necesitamos saber la ID de nuestra página que podemos ver al hacer click en Editar Página:

http://www.facebook.com/pages/edit/?id=ESTE_ES_EL_PROFILE_ID

Ya que estamos allí, seguimos.

A la derecha, hacemos click en Promociona con un "Me gusta" en tu página y nos encontraremos en el wizard del plugin:

Donde tendremos que agregar el ID y luego, seleccionar las diferentes opciones:

Facebook Page ID es el número identificatorio, también lo vemos al final de la URL de esa misma página
Width es el ancho en pixeles; puede ponerse cualquier valor
Connections es la cantidad de avatares de usuarios a mostra (poner cero si no se quiere ninguno)
Stream muestra miniaturas de las entradas públicas de nuestra página de Facebook
Header muestra una barra 'Encuéntranos enFacebook'

Con cada detalle que modifiquemos podremos ver una previsualización del resultado. Una vez que nos hemos decidido, hacemos click en Get Code donde nos darán dos opciones, usar un IFRAME o un código especial:

<fb:like-box profile_id="PROFILE_ID"></fb:like-box>

Código que luego, si queremos, podemos modificar manualmente; por ejemplo:

<fb:like-box profile_id="PROFILE_ID" width="350" connections="5" stream="false" header="false"></fb:like-box>

Si bien el IFRAME funcionará correctamente, me inclino por usar este otro código y para que este sea comprendido por nuestra web, deberemos agregar un script justo después de <body>:

<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({appId: 'PROFILE_ID', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/es_ES/all.js';
document.getElementById('fb-root').appendChild(e);
}());
//]]>
</script>

Por último, en nuestra plantilla, agregaremos el código de Facebook, alli donde se nos ocurra mostrarlo, por ejemplo, en un elemento HTML en la sidebar y, sugeriría, colocarlo dentro de un DIV:

<div id="fbfans">
<fb:like-box profile_id="PROFILE_ID"></fb:like-box>
</div>

¿De qué sirve ponerlos en un DIV? De ese modo, podemos controlar relativamente nuestro widget, sobre todo, el color de fondo que, por defecto es transparente:

#fbfans {
background-color: #FFF;
border: 10px solid #303941;
}

Gem@ publica Pixiz fotomontajes, Himsomnio muestra cómo compartir dibuos con Draw.to y para seguir divirtiéndose con estos juguetitos, CaTa me envía sus creaciones realizadas con pho.to/ que es un sitio con muchas herramientas para imágenes: un editor online, varios albums para webs, presentaciones y algunas muchas cosas divertidas y útiles.

• Enhance.Photo.to mejora las imágenes agregando filtros de color.
• Avatar.Photo.to nos permite crear un avatar animado con muchos efectos disponibles
• Makeup.Photo.to retoca fotografías con un par de clicks
• Ffunny.Photo.to tiene decenas de opciones y efectos para retocar imágenes
• Cartoon.Photo.to es de lo mejor, crea caricaturas de cualquier imagen

Esta es una variante muy interesante para crear una Tabla de Contenidos, creada por Abu Farhan que lista las entradas del blog, ordenadas alfabéticamente, organizadas por categoría y con una marca en los últimos diez posts publicados.

Click para ver el ejemplo online.

Utilizarla tal como está es muy simple. Debemos crear una página estática y agregar el siguiente código donde lo único que debemos establecer es la URL de nuestro sitio:

<link rel="stylesheet" href="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css" type="text/css" media="screen"></link>
<script style="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/daftarisiv2.js"></script>
<script src="http://miblog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&amp;callback=loadtoc"></script>

De aquí en adelante, todo es un problema de personalización así que vamos a ver esos detalles.

Primero que nada, una aclaración, este script y todos aquellos que utiliza json para leer los feeds tienen, por lo general, un párametro que indica la cantidad de entradas a leer; en este caso y en muchos otros, dice: max-results=9999. La teoría de este número 9999 es que, de esa forma, se leerán TODAS las entradas pero, eso no es cierto ya que, pongamos el número que pongamos, el máximo a leer son 500 y por o tanto, ni esta ni ninguna otra tabla de contenidos, mostrará el 100% de las entradas. Si, por algún motivo, se necesitan mostrar más hay que hacer otra llamada; es decir, crear otra página y cambiar el script indicando desde donde hasta donde se va a leer.

Esto mostraría 500 entradas empezando con el post número 501 (ver ejemplo):

<script src="http://miblog.blogspot.com/feeds/posts/default?&start-index=501&max-results=500&alt=json-in-script&callback=loadtoc"></script>

y esto mostraría otras 500 entradas empezando con el post número 1001 (ver ejemplo):

<script src="http://miblog.blogspot.com/feeds/posts/default?&start-index=1001&max-results=500&alt=json-in-script&callback=loadtoc"></script>

El segundo tema importante es que, si bien podemos usar los archivos tal como los provee el desarrollador, siempre conviene que descarguemos una copia de los mismos para evitar sorpresas.

Por último, la personalizacion del script debemos hacerlas con CSS. En este caso, el estilo se encuentra en el archivo gfdynamicfeedcontrol.css que es un archivo que utiliza Google para mostrar feeds y que podemos modificar a gusto y simplificar bastante ya que contienen una enorme cantidad de definiciones que no se utilizarán en absoluto. Lo básico es esto:

/* el rectangulo donde se mostrará */
#feed-control { /* no requiere definiciones */ }

/* el rectangulo interno donde se mostrará el contenido */
.gfg-root {
height: auto;
overflow: hidden;
position: relative;
width: 100%;
}

/* los títulos de cada etiqueta */
.gfg-subtitle {
overflow:hidden;
white-space:nowrap;
}
.gfg-subtitle a { /* cada título es un enlace  */
/* cualquier tipo de propiedad, color, fuente, etc */
}
.gfg-subtitle:hover  { /* efecto hover sobre esos enlaces */ }

/* cada rectángulo con la lista de entradas de una etiqueta */
.gfg-list {
position : relative;
overflow : hidden;
margin: 10px 0;
}
/* cada item de esa lista */
.gfg-list li {
list-style-type: none;
}
/* cada enlace esta en un DIV */
.gfg-listentry {
overflow: hidden;
white-space: nowrap;
}
/* podemos darle fondos distintos intercalados ya que se diferencian los apres de los impares */
.gfg-listentry-odd { }
.gfg-listentry-even { }
/¨* en enlace a cada entrada */
.gfg-listentry a {
/* cualquier tipo de propiedad, color, fuente, etc */
}
.gfg-listentry a:hover { /* efecto hover sobre esos enlaces */ }

/* limpia las flotaciones de algunas etiquetas */ 
.clearFloat {clear: both;}

Y eso es todo; no puede mostrarse mucho más ya que el diseño gráfico dependerá de cada plantilla y de la imaginación de cada uno.

Cuando se cargan las imágenes de una página, estas quedan almacenadas en el caché. Por lo tanto, si una de ellas se utiliza en otras páginas no será requerida al servidor para ser cargada de nuevo. Por ello, siempre que se pueda, es conveniente repetir la misma imagen para los botones, los íconos, las barras de separación, etc.

leer artículo actualizado

Twitter Quotes es una nueva posibilidad para insertar tweets individuales en un sitio web; la idea es utilizar esto como una forma de citar fuentes o hacer referencias.

Podemos usarlo si ingresamos a Blackbird Pie y allí colocamos la URL del tweet que queremos mostrar; por ejemplo:

http://twitter.com/Ivan_RG/status/13437288179

Inmediatamente, nos mostrarán una previsualización y el código que deberemos usar y que es ENORME!!!!!!!!!!!!!

<!-- http://twitter.com/Ivan_RG/status/13437288179 --> <style type='text/css'>.bbpBox{background:url(http://a1.twimg.com/profile_background_images/6479780/fondo_twitterpng.png) #877F7F;padding:20px;}p.bbpTweet{background:#fff;padding:10px 12px 10px 12px;margin:0;min-height:48px;color:#000;font-size:18px !important;line-height:22px;-moz-border-radius:5px;-webkit-border-radius:5px}p.bbpTweet span.metadata{display:block;width:100%;clear:both;margin-top:8px;padding-top:12px;height:40px;border-top:1px solid #fff;border-top:1px solid #e6e6e6}p.bbpTweet span.metadata span.author{line-height:19px}p.bbpTweet span.metadata span.author img{float:left;margin:0 7px 0 0px;width:38px;height:38px}p.bbpTweet a:hover{text-decoration:underline}p.bbpTweet span.timestamp{font-size:12px;display:block}</style> <div class='bbpBox'><p class='bbpTweet'>RT @<a class="tweet-url username" href="http://twitter.com/TwittBoy" rel="nofollow">TwittBoy</a>: Twitter Quotes - Incrustar Tweets en tu web o blog  <a href="http://bit.ly/bPc8c2" rel="nofollow">http://bit.ly/bPc8c2</a><span class='timestamp'><a title='Wed May 05 17:11:02 +0000 2010' href='http://twitter.com/Ivan_RG/status/13437288179'>less than a minute ago</a> via <a href="http://www.tweetdeck.com" rel="nofollow">TweetDeck</a></span><span class='metadata'><span class='author'><a href='http://twitter.com/Ivan_RG'><img src='http://a3.twimg.com/profile_images/547933473/Ivan_R03_normal.jpg' /></a><strong><a href='http://twitter.com/Ivan_RG'>Ivan Rodriguez</a></strong><br/>Ivan_RG</span></span></p></div> <!-- end of tweet -->

RT @TwittBoy: Twitter Quotes - Incrustar Tweets en tu web o blog http://bit.ly/bPc8c2less than a minute ago via TweetDeckIvan Rodriguez
Ivan_RG

Twitter mismo reconoce que esto es puramente experimental y que no funcionará en todos lados. Si bien es una alternativa, hay una crítica muy interesante de labnol.org que sugiere evitar su uso y da algunas razones:

• el código HTML contiene estilos CSS lo que no permite que sea utilizado en algunos servicios de blogs (por ejemplo, en wordpress.com)
• aparentemente, se ve horrible en Google Reader y en otros lectores de feeds
• el código contiene la imagen del perfil de quien escribió el tweet y si esta es modificada en el futuro, lo que hemos incrustado dejará de funcionar correctamente

Por eso, recomiendan seguir usando servicios online tales como Kwout, QuoteURL o Twonvo aunque, en realidad, todos ellos generan códigos de longitudes excesivas.

Twitter / Ivan Rodriguez: RT @TwittBoy: Twitter Quot ... via kwout

Obviamente, cualquier tipo de herramienta es bienvenida porque cuantas más alternativas haya mejor pero, tengo la impresión que esto no tiene demasiado sentido ya que no suma nada y es un exceso; es como si cada vez que enlazáramos algo, pusiéramos un IFRAME del sitio pero claro, Twitter y Facebook buscan destronar a Google y ahí estamos nosotros, tratando de ver cómo nos acomodamos a las nuevos tiempos.

REFERENCIAS:todoTwitter

Cuando se agrega un fondo a una etiqueta, ya sea un color o una imagen, y esa etiqueta tiene un borde, se puede producir un conflicto ya que por defecto, el borde se muestra superpuesta a la imagen pero, algunas propiedades CSS nos permiten resolver esto.

leer artículo actualizado

ver actualización

Así como es fácil colocar el botón de Me Gusta de Facebook en cualquier sitio web, agregar alguno de los otros plugins requiere un poco más de trabajo.

Enrique Nava preguntaba específicamente por uno llamado Comments Box que permite a los visitantes, comentar de manera directa desde nuestro blog.

El problema fundamental para incluir esto es que debemos crear una aplicación; debemos entrar en la página de Desarrolladores de Facebook y crearla,dándole un nombre cualquiera

Hecho eso, la siguiente ventana puede resultar apabullante pero lo fundamental es copiar los dato que nos dan en la pestaña Básico

Id. de aplicación xxxxxxxxxx
Clave API xxxxxxxxxxxxxxxxxxxx
Secreto xxxxxxxxxxxxxxxxxxxx

Luego, haremos click en la pestaña Connect y allí, en el campo Conecte la pagina web, colocaremos la URL de nuestro sitio

Y eso es todo, en principio, no necesitaríamos hacer otra cosa que guardar y listo.

Para agregar el plugin en Blogger, lo mejor es ir a la página de Comments Box donde podemos probar si funcionará. Allí, debemos pegar en el campo Unique ID, la ID de la aplicación que hayamos creado y, si todo es correcto, inmediatamente veremos la previsualización a la derecha.

Number of Comments permite configurar la cantidad de comentarios a mostrar (por defecto 10) o podemos poner cero si no queremos que se muestren y que el plugin sólo permita agregarlos.
Width es el ancho en pixeles (550 por defecto) y es bastante flexible ya que parece admitir cualquier valor.

Decidido esto, hacemos click en Get Code que nos dira algo así:

<fb:comments xid="000000000000000" width="valor"></fb:comments>

¿Qué hacemos con eso? Vamos a la plantilla de Blogger e inmediatamente luego de <body>, agregaremos la llamada al Graph API de Facebook que es la forma más simple de incluir cualquiera de los plugins. Es un script muy simple:

<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + 
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
//]]>
</script>

Eso, nos permitirá agregar los distintos códigos de Facebook directamente en nuestro blog así que, por último colocaremos el código que nos dieron ahí donde se nos ocurra mostrar la caja de comentarios; por ejemplo, en un elemento HTML de la sidebar:

<fb:comments numposts='10' width='550' xid='000000000000'/>

O en el footer de las entradas y, en ese caso, sugeriría condicionarlo para que solo se vea en las páginas individuales:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<fb:comments numposts='10' width='550' xid='000000000000'/>
</b:if>

ver actualización