Un nombre = Un avatar

Turn your name into a face hace eso que dice el nombre; traducido: Convierte un nombre en una cara.

El sitio es una pequeña herramienta donde ingresamos el nombre y en función de un algoritmo, crea una imagen combinando 18 estilos de siluetas, ojos, nariz y boca, produciendo más de 100.000 avatares diferentes.

Bueno ... si el mio parece gracioso, ni se imaginen lo que pasa al poner otros nombre ...

Adivinen quién es quién

REFERENCIAS:

Google Blogoscoped

"Here on the Gmail team, we're always thinking of ways to help you communicate ... we present, in all their technicolor glory, emoticons in your mail ..." (The Official GMail Blog)

¿Seré yo el único que cree que son muy feos?

Seguramente ya habrán visto el nuevo juguetito de Blogger, ese que comenzaron a promocionar hace unos meses pero que no estaba disponible para los que hablamos español.

Colocarlo es muy sencillo, no tiene opciones de ninguna clase (excepto el título) y en principio, se adapta al estilo de la sidebar. En la plantilla, vamos a encontrar un código largo, muy largo que comienza con:

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'>

Un código bastante críptico por cierto y donde hay muy poco que podamos modificar:

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'>
<b:includable id='main'>

esta parte define el título:

<b:if cond='data:title != ""'>
<b:if cond='data:codeSnippet != ""'>
    <h2 class='title'><data:title/></h2>
<b:else/>
<h2 class='title'><data:title/> (<data:totalFollowerCount/>)</h2>
</b:if>  
</b:if>

NOTA: parece haber una opción para que en el título se muestre o no se muestre la cantidad de seguidores en función de algún dato pero, desconozco donde está. Podríamos hacerlo manualmente, eliminando esa parte y dejando sólo la parte de color.

No es el único caso donde hay opciones poco claras, en el resto siguen apareciendo:

<div expr:id='data:widget.instanceId + "-wrapper"'>
<b:if cond='data:codeSnippet != ""'>
<data:codeSnippet/>
<b:else/>
<b:if cond='data:followingLinkPresent'>

este es el enlace que por defecto dice "Seguir este blog" y que nos permite agregarnos:

<div class='follow-this profile-link item-control following-follow-this'>
<a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<data:followThisMessage/>
</a>
</div>

este es el enlace que aparecerá si estamos siguiendo un blog y queremos dejar de hacerlo. Por defecto dice "Parar siguiente" (una traducción increible):

<div class='follow-this profile-link item-control following-stop-following-this'>
<a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<data:stopFollowingMessage/>
</a>
</div>

</b:if>

<div class='followers-grid'>

este es el mensaje que se muestra si el blog no tiene seguidores y que por defecto dice "Sé el primero en  seguir  este blog":

<b:if cond='data:totalFollowerCount == 0'>
<div class='profile-link item-control following-follow-this'>
<data:emptyFollowersMessage/>
</div>
</b:if>

este es el bucle que muestra el avatar de los seguidores con un enlace a su perfil de Blogger y con el atributo nofollow que no tiene sentido quitar ya que al no apuntar al blog, no significará un enlace valido para posicionar un sitio y de esta manera se evita el "seguimiento spam":

<!-- Relies on the js written out in navbar.gxp -->
<b:loop values='data:followers' var='follower'>
<div class='follower'>
<a expr:href='data:follower.profileUrl' expr:title='data:follower.displayName' rel='nofollow'>
<img class='follower-img' expr:alt='data:follower.displayName' expr:height='data:follower.imageHeight' expr:onerror='"this.onerror=null;this.src=\"" + data:anonFollowerImageUrl + "\";"' expr:onload='"setAttributeOnload(this, \"src\", \"" + data:follower.imageUrl + "\")"' expr:width='data:follower.imageWidth' src='http://img1.blogblog.com/img/blank.gif'/>
</a>
</div>
</b:loop>

<div class='clear'/>
</div>

<div class='followers-canvas profile-link'>

este es el mensaje que muestra la cantidad de seguidores:

<data:followersFooterMessage/>

este enlace permite "Ver todos los seguidores" ya que sólo se mostrará una cantidad máxima:

<span class='item-control following-not-admin'>
<a expr:href='data:followersUri'>
<data:viewAllMessage/>
</a>
</span>

este enlace dice "Administrar" y sólo lo veremos nosotros si estamos logueados:

<span class='item-control blog-admin'>
<a expr:href='data:manageFollowersUri'>
<data:manageFollowersMessage/>
</a>
</span>

</div>
</b:if>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

Los datos que podemos modificar fácilmente son los textos que muestra el gadget; basta reemplazar el código que contiene ese texto por defecto por uno nuestro o incluso por una imagen:

<data:followThisMessage/> es el texto del enlace Seguir este blog
<data:stopFollowingMessage/> es el absurdo texto del enlace Parar siguiente
<data:emptyFollowersMessage/> es el texto Sé el primero en seguir este blog.
<data:viewAllMessage/> es el texto del enlace Ver todos
<data:manageFollowersMessage/> es el texto del enlace Administrar

A diferencia de los últimos agregados de Blogger, este no es un IFRAME así que, por un lado es relativamente más rápido y por otro, nos permite utilizar CSS para modificarlo.

Como la gran mayoría de las clases y definiciones de estilo están en un archivo externo que Blogger agrega, lo ideal es hacer estas modificaciones sobrescribiendo estos datos y colocando todo en una etiqueta STYLE pero no en el encabezado de nuestra plantilla sino después de <BODY>:

<style type='text/css'>
[... aquí colocamos las definiciones ...]
</style>

Estas son definiciones generales, no son demasiado útiles salvo casos especiales:

#Followers1 h2 {
aquí podemos modificar el estilo del título
}

#Followers1-wrapper  {
este es el DIV general que contiene el elemento
}

Los enlaces usan una clase que suele estar definida en las plantillas por defecto y que se llama profile-link a la que se le suma otra que podemos cambiar de manera simple; en mi caso coloqué estas definiciones:

.follow-this {
margin: 0 5px 5px 0;
text-align: right;
}
.follow-this a { /* los enlaces superiores */
color: #7E92A6;
font-weight: normal;
font-size: 11px;
}
.follow-this a:hover {
color: #9EB2C6;
font-weight: bold;
}

.followers-canvas { /* la cantidad de seguidores */
background: transparent url(URL_imagen) no-repeat scroll left top;
color: #778899;
float: right;
font-size: 11px;
font-weight: normal;
margin: 5px 5px 0 0;
padding-left: 15px;
text-align: right;
}

.following-not-admin a { /* es el enlace "Ver Todos" */
color: #7E92A6;
display: block;
font-size: 11px;
font-weight: normal;
text-align: right;
}
.following-not-admin a:hover {
color: #9EB2C6;
font-weight: bold;
}

.blog-admin a { /* es el enlace "Administrar" */
color: #7E92A6;
font-weight: normal;
font-size: 11px;
}
.blog-admin a:hover {
color: #9EB2C6;
font-weight: bold;
}

El área donde se muestran los avatares también es configurable. Para empezar, la clase que usa Blogger es errónea, está definida como follower-grid pero, en realidad se llama followers-grid (una s no es nada, claro). Así que:

.followers-grid { /* el espacio donde se mostrarán los avatares */
margin: 0 auto; /* esto lo centra */
padding: 0;
width: anchopx; 
/* ese ancho es importante ya que define cuántas imágenes se mostrarán por línea */
}

.follower-img { /* es la imagen en si misma que tienen 28x28 */
float: left;
margin: 0;
padding: 0;
}

.follower { /* cada imagen está dentro de un DIV */
float: left;
height: valorpx;
margin: 0px;
width: valorpx}
/* ancho y alto son la imagen más los bordes y márgenes */
}

OTRA MIRADA:

Gem@ Blog

Este post está desactualizado ya que SkyDrive no permite utillizar los archivos de manera directa.

Una consulta repetida es el tema de los enlaces a ciertos archivos alojados en servicios online. Hace unos días hacía referencia a ImageShack y dónde está el enlace directo; algo similar ocurre si usamos SkyDrive aunque, en este caso, encontrar la URL del archivo que debemos utilizar es un poco más engorroso ya que no es mostrada en ninguna parte.

Para saber esa URL, debemos abrir la página del archivo, allí veremos un ícono gigante a la izquierda de la pantalla y deberemos hacer click sobre él, con el botón derecho del ratón.

Dependiendo del navegador que usemos, seleccionaremos: Copiar dirección del enlace (en Firefox) o Copiar acceso directo (en Internet Explorer):

Ahora, podemos pegar eso que hemos copiado en cualquier editor de textos o en el editor de Blogger y tendremos algo tan estrafalario como esto:

http://zvymaq.bay.livefilestore.com/y1pbItubVO5wyAV2jKWCEs6uAIhFchi84eCWuTyOVofncqqjK8JBl2aLfai_fpWxnCj825ARhP9a1E/darkbox.css?download

Allí, en la mayoría de los casos, esa parte final ?download es irrelevante así que podemos eliminarle. Lo que queda, es la URL directa al archivo que queremos utilizar.

Growl es un script para Prototype que muestra información en una ventanita con una serie de efectos. No es difícil de implementar pero parece poco flexible para usar en Blogger así que resulta mucho más cómodo usar el modelo que explicaba Gem@ hace unos días: Un cartel de aviso flotante.

Es más cómodo porque podemos agregarlo, tanto a la plantilla como a un post en particular. En ambos casos, necesitamos el script que podríamos agregar antes de </head> copiando y pegando el código:

<script type='text/javascript'>
//<![CDATA[
....... aquí copiamos el código .......
//]]>
</script>

o bien, alojarlo en un servidor y cargarlo cuando lo queremos utilizar:

<script src="URL_archivo.js"></script>

var persistclose = 1 // una vez cerrada permanece cerrada (0 se muestra cada vez que se abre la página)
var startX = 20 // posición horizontal de la ventana (en pixeles)
var startY = 5 // posición vertical de la ventana (en pixeles)
var verticalpos = "fromtop" // va arriba de la pantalla ("frombottom" va abajo)

function iecompattest() {
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar() {
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else {
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}

window.stayTopLeft=function() {
if (verticalpos=="fromtop") {
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
} else {
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}

if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar

Una vez que tenemos el script, podemos colocar el contenido en un DIV al que identifiquemos con un ID específico llamado topbar:

<div id='topbar'>
....... aquí va el contenido del mensaje a mostrar .......
<a href="javascript:void(0);" onclick="closebar(); return false">CERRAR</a>
</div>

Conviene agregarle algún enlace para cerrar la ventana o bien hacer que se cierre al hacer click en ella:

<div id="topbar" onclick="closebar(); return false">
....... aquí va el contenido del mensaje a mostrar .......
</div>

Todo lo que faltaría, sería agregar las definiciones CSS que pueden ser de cualquier tipo:

#topbar{
background-color: #F35D5D;
border: 2px solid #FFFFFF;
color: #FFFFFF;
height: 70px;
padding: 10px;
position:absolute;
width: 500px;
visibility: hidden;
z-index: 640;
}

StickyNote es un script similar de DynamicDrive pero, al que se le agrega un efecto de fade.

Lo usamos de la misma manera, necesitamos el script que insertamos de la misma manera que el anterior y un poco de CSS para establecer las propiedades del cartel:

<style type="text/css">#fadeinbox{
background-color: lightyellow;
border: 2px solid #FFFFFF;
left: 0;
padding: 10px;
position:absolute;
top: -400px;
visibility:hidden;
width: 350px;
z-index: 100;
}</style>

<script type="text/javascript">
//<![CDATA[

var displaymode="always";  // la forma en que se mostrará 
var enablefade="yes" // habilita el efecto fade
var autohidebox=["yes", 5] // oculta el cartel tras  cierta cantidad de tiempo
var showonscroll="yes" // se ueve mediante scroll
var IEfadelength=1 // tiempo del fade para IE
var Mozfadedegree=0.05 // datos del fade para NS6+

if (parseInt(displaymode)!=NaN)
var random_num=Math.floor(Math.random()*displaymode)

function displayfadeinbox() {
var ie=document.all && !window.opera
var dom=document.getElementById
iebody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
objref=(dom)? document.getElementById("fadeinbox") : document.all.fadeinbox
var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
var docwidth=(ie)? iebody.clientWidth : window.innerWidth
docheight=(ie)? iebody.clientHeight: window.innerHeight
var objwidth=objref.offsetWidth
objheight=objref.offsetHeight
objref.style.left=docwidth/2-objwidth/2+"px"
objref.style.top=scroll_top+docheight/2-objheight/2+"px"
if (showonscroll=="yes")
showonscrollvar=setInterval("staticfadebox()", 50)
if (enablefade=="yes" && objref.filters) {
objref.filters[0].duration=IEfadelength
objref.filters[0].Apply()
objref.filters[0].Play()
}
objref.style.visibility="visible"
if (objref.style.MozOpacity) {
if (enablefade=="yes")
mozfadevar=setInterval("mozfadefx()", 90)
else {
objref.style.MozOpacity=1
controlledhidebox()
}
} else
controlledhidebox()
}

function mozfadefx() {
if (parseFloat(objref.style.MozOpacity)<1)
objref.style.MozOpacity=parseFloat(objref.style.MozOpacity)+Mozfadedegree
else {
clearInterval(mozfadevar)
controlledhidebox()
}
}

function staticfadebox() {
var ie=document.all && !window.opera
var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
objref.style.top=scroll_top+docheight/2-objheight/2+"px"
}

function hidefadebox() {
objref.style.visibility="hidden"
if (typeof showonscrollvar!="undefined")
clearInterval(showonscrollvar)
}

function controlledhidebox() {
if (autohidebox[0]=="yes") {
var delayvar=(enablefade=="yes" && objref.filters)? (autohidebox[1]+objref.filters[0].duration)*1000 : autohidebox[1]*1000
setTimeout("hidefadebox()", delayvar)
}
}

function initfunction() {
setTimeout("displayfadeinbox()", 100)
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = ""
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

if (displaymode=="oncepersession" && get_cookie("fadedin")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0) {
if (window.addEventListener)
window.addEventListener("load", initfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", initfunction)
else if (document.getElementById)
window.onload=initfunction
document.cookie="fadedin=yes"
}

//]]>
</script>

Para usarlo, usamos un código parecido a este:

<div id="fadeinbox" onclick="hidefadebox(); return false" style="filter:progid:DXImageTransform.Microsoft.RandomDissolve(duration=1) progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135); -moz-opacity:0">
....... aquí va el contenido del mensaje a mostrar .......
</div>

Una última opción un poco más limitada pero efectiva, es usar la propiedad position: fixed de CSS y "fijar" un DIV en la pantalla sin necesidad de agregar scripts.

Es cierto que no tiene la espectacularidad del scroll pero es muy flexible y sencilla de implementar; basta declarar una clase tal como nos muestran en DailyCoding:

<style type="text/css">
.cartelFijo {
background-color: #0080FF;
border: 2px solid #FFFFFF;
color: #FFFFFF;
font-family: Tahoma;
font-weight: bold;
left: 20px; /* la coordenada horizontal donde se muestra */
padding: 10px;
position: fixed;  /* esto es lo que lo fija */
text-align: justify;
top: 30px; /* la coordenada vertical donde se muestra */
width: 200px;  /* el ancho del cartel */
z-index: 10000;
}

El HTML lo colocamos en cualquier parte, incluso dentro de un post:

<div class="cartelFijo" onclick="this.style.display='none'; return false">
....... aquí va el contenido del mensaje a mostrar .......
</div>

Como es una clase CSS, podemos aplicarla repetidas veces así que también es útil cuando se quieren mostrar varios mensajes simultánemamente.

Parece que el nuevo gadget (widget) de Blogger llamado Seguidores (followers) ya está disponible en español y se lo ve tanto en el escritorio como en Elementos de diseño.

Si queremos usarlo basta hacer click en agregar, ponerle un título y nada más; eso, lo incluirá en la plantilla como cualquier otro elemento.

No he leido mucho del tema pero lo agregaré temporalmente para ver de que se trata.

Y mientras programo este post veo que atajar me avisa de lo mismo así que debe ser algo generalizado ya que también veo entradas en el Blog de Gem@ y en El escaparate de Rosa

Ah, y por cierto, también Bonzu Pipinpadaloxicopolis III me dice que está disponible el botón de Vista Previa en los comentarios incrustados, algo de lo que realmente no me había dado cuenta. Así que parece ser que en Blogger se han dedicado a lanzar varias modificaciones todas juntas; también veo una diferencia en el código de las imágenes y vaya uno a saber que otra cosilla nos tiene escondida.