Oloblogger

Encontrar imágenes licenciadas CC en Flickr

2009-11-09T18:00:00.000+01:00

Flickr es una de las mayores y mejores librerías de imágenes que existen actualmente en internet. Además tiene una forma relativamente fácil de poder ver la licencia de uso de cada uno de los trabajos que allí podemos encontrar. El problema surge cuando en lugar de ver imágenes y luego comprobar su licencia queremos hacer la tarea al revés. Es decir, buscar imágenes que se ajusten a determinada licencia.

No sé si es nuevo o no, pero yo al menos no lo había visto. Casualmente me he tropezado con este apartado desde dónde poder utilizar el buscador de Flickr con un filtro que sólo nos muestra las imágenes que tengan determinada licencia, dentro de las posibles variantes que ofrece Creative Commons.

Actualmente hay más de 100.000.000 de imágenes que permiten su reutilización y que están allí esperándoos. Eso sí, ya que sabeis que es uno de los requisitos, que no se os olvide referenciar al autor. No cuesta nada.

Una segunda opción aunque indirecta, es la aplicación online FlickrCC, que nos permite buscar por palabras claves sólo entre las imágenes que tengan una licencia CC.

Este invento de Peter Shanks, nos permite filtrar también según las imágenes puedan ser modificadas y/o estén autorizadas para su uso comercial. Adicionalmente junto con la miniatura, la ventana de la derecha muestra la referencia de atribución del trabajo, el enlace a la imagen original, así como un par de enlaces más a herramientas online para edición.

Modificar la anchura en los enlaces de navegación

2009-11-06T18:45:00.000+01:00

Hace ya tiempo que hablamos sobre cómo sustituir los enlaces "Entradas antiguas", "Entradas más recientes" por otro texto o incluso por imágenes. También se vió posteriormente como construir un menú flotante para poder navegar por el blog con este artilugio. Sin embargo, todavía se nos quedó una pequeña cosa en el tintero.

No es un detalle demasiado importante, pero para algunos de vosotros parece que sí es un gran problema y, como mínimo, resulta molesto.

En las plantillas con ancho variable, cuando se observa el blog desde pantallas relativamente anchas, los enlaces laterales puede que se vean muy desangelados porque se van a los extremos. Podría ser interesante colocarlos más juntos, pero sus respectivas clases están hechas con FLOAT por lo que inevitablemente se van a los extremos.

#blog-pager-older-link {float: right;}

#blog-pager-newer-link {float: left;}

#blog-pager {text-align: center;}

La solución es que el contenedor general del artilugio (#blog-pager) no ocupe todo el ancho disponible. Para limitarlo bastaría con modificar ese selector con un WIDTH, bien en porcentaje bien en pixels para que su tamaño sea fijo, lo que os resulte mejor según el diseño de vuestro blog. Tres ejemplos...

#blog-pager {text-align: center;width:80%;}

#blog-pager {text-align: center;width:80%;max-width:600px;min-width:400px;}

#blog-pager {text-align: center;width:400px;}

Una ventana (bloque) emergente con un click

2009-11-03T20:50:00.012+01:00

Continuando con la idea del splash screen que ni era splash ni era screen, el otro día nos preguntaban cómo hacer para que en lugar de salir automáticamente, ese aviso o lo que sea, saliera a demanda. Es decir, que saliera al pinchar en un botón o enlace y que se retirara al volver a pinchar. Prueba, prueba...

Un enlace de texto

Para ello, lo primero que tenemos que hacer es insertar una función que cambiará de oculto a visible aquel bloque que nosotros identifiquemos adecuadamente. Así, antes del </head> metemos...

Ahora colocamos justo después del <body>, el bloque que vamos a mostrar a modo de ventana emergente, pero usando la técnica de la entrada enlazada al principio, es decir un Z-INDEX con un número grande que la muestre en la parte superior y centrado con TOP/LEFT y los MARGIN correspondientes (la mitad del ancho/alto del DIV):

En cuanto a la plantilla, ya hemos terminado y podemos grabar aunque no apreciemos nada en la Vista Previa. Ahora toca colocar el enlace que hará que lo anterior sea visible y al repetir el click, vuelva a ser invisible. Podría ser por ejemplo en la barra lateral, como gadget HTML.

<a href="javascript:plegardesplegar('identificativobloque');">ENLACE DE TEXTO O IMAGEN</a>

En los dos últimos códigos insertados IDENTIFICAVOBLOQUE tiene que ser una combinación alfanumérica igual en ambos casos. Si se utilizara este sistema para plegar/desplegar otro bloque, tanto el enlace como el bloque tendrían que tener también la misma combinación alfanumérica entre sí, pero distinta necesariamente de la de otro/s bloque/s.

Opcionalmente por si nuestro bloque se tiene que abrir justo encima del enlace que serviría para volverlo a cerrar, lo cual complicaría esta acción, podemos incluir en el propio código que forma la información oculta, un segundo enlace con el mismo IDENTIFICATIVOBLOQUE, a modo de botón "cerrar" y que ya habeis podido ver en los ejemplos del principio.

<div class='invisible' id='identificativobloque' style='z-index:99;position:absolute;overflow:visible;top:50%;left:50%;width:400px;height:300px;margin-top:-150px;margin-left:-200px;border:5px solid #990000;background:#ffffff;color:#000000;'><a href="javascript:plegardesplegar('identificativobloque');" style="position:absolute;top:-20px;right:0px;line-height:10px;font-size:10px;" >[X]</a>Aquí va un texto, una imagen, un enlace, un vídeo...</div>

[X]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nulla leo, facilisis non euismod elementum, hendrerit at velit. Maecenas vitae justo vel mauris dignissim pellentesque sed et diam. Etiam dui quam, posuere ut egestas vitae, dapibus id felis. Donec egestas faucibus purus, a bibendum enim feugiat quis. Sed pellentesque orci porta urna tincidunt nec commodo mauris semper. Suspendisse at quam mattis velit commodo sollicitudin id a ante. Maecenas quis libero tortor, vel accumsan erat. Nullam sit amet enim in arcu tristique euismod.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed elementum arcu justo, sed tincidunt lacus. Fusce lorem risus, accumsan vel commodo at, tempus a justo.

[X]

ProfAlliRich

Botón para ofrecer suscripción por correo

2009-11-01T19:00:00.006+01:00

Hay gente que lo de los feeds todavía no lo termina de controlar y para los administradores que se preocupan por ellos, va dedicada esta entrada.

La forma más habitual de ver una fuente es a través de un lector. Bloglines, Google Reader, Alesti, FeedDemon, FeedReader... son algunos de los más conocidos. Una de las opciones de FeedBurner (uno de los gestores de fuentes más utilizados por sus grandes posibilidades y del que ya hablaremos más en otra ocasión) es poder mostrar en la propia fuente unos botones para agregar a los lectores más conocidos, pero también un enlace para la suscripción por e-mail.

Este último sistema sólo requiere introducir la dirección de correo y una verificación de palabra. A partir de ese momento, el suscriptor recibirá un correo cada vez que su blog favorito publique una nueva entrada, con el contenido de la misma. Anular la suscripción si uno se aburre de recibir este tipo de correos es igual de fácil, porque creo recordar que incluso viene un enlace para ello en el propio correo recibido.

No obstante, para el tipo de usuarios mencionado al principio de este post y que quizás no están nada familiarizados con los feeds, pero que sí saben utilizar su correo electrónico, podría ser conveniente poner un enlace directo a la suscripción por e-mail, de manera que sólo tengan que pinchar y poner su dirección.

Para hacer el enlace, primero teneis que averiguar cual es la dirección que lleva a la suscripción de vuestro feed. Si es de Feedburner, la URL tendrá este formato:

http://feedburner.google.com/fb/a/mailverify?uri=NOMBRE_FEED

Por tanto, es suficiente con construir un enlace de texto y/o imagen para facilitar la tarea a nuestros tecnológicamente rezagados lectores. Ejemplo:

Para recibir nuestras entradas en tu correo según se vayan publicando, pincha en esta imagen e introduce tu dirección de e-mail.

<a href="http://feedburner.google.com/fb/a/mailverify?uri=NOMBRE_FEED"><img style="display:block; margin:0px auto; text-align:center;cursor:pointer; cursor:hand;" src="URL_IMAGEN" border="0" alt=""/></a>

Para recibir nuestras entradas en tu correo según se vayan publicando, pincha en esta imagen e introduce tu dirección de e-mail.

A la izquierda un ejemplo operativo de cómo podría quedar un enlace de este tipo con nuestro feed. (NOMBRE_FEED = Oloblogger). En verde lo que tendreis que personalizar.

Se me ocurre un segundo sistema utilizando un pop-up (o ventana emergente), que además de para molestarnos con anuncios, también sirven en ocasiones para otras cosas.

En este caso, el enlace abrirá una ventana nueva, redimensionada al tamaño que queramos y dentro se podrá ver el formulario de suscripción. Pinchando en el siguiente enlace podeis ver cómo funciona este otro sistema.

Suscribir por correo

Aunque en el ejemplo lo hemos hecho con texto, esto no tiene que ser necesariamente así y al igual que antes, el enlace puede estar hecho por una imagen, formando un botón o con cualquier idea que se os ocurra.

El código sería este otro:

Un último ejemplo usando Lightwindow para aquellos que lo tengais instalado. Demo en el dibujo de abajo del todo.

Actualización: Miguel nos ha hecho investigar un poquito más y descubrí que me había olvidado de la solución que ofrece el propio Feedburner, que aunque no es un botón propiamente dicho, funciona a través de un formulario en el que directamente se coloca la dirección de correo del suscriptor.

Este es el código:

<form action="http://feedburner.google.com/fb/a/mailverify" style="margin-right:3px;border:1px solid #ccc;padding:3px;text-align:center;" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Oloblogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input style="width:140px" name="email" type="text"/></p><input value="NOMBRE_FEED" name="uri" type="hidden"/><input value="es_ES" name="loc" type="hidden"/><input value="Subscribe" type="submit"/><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

IconTexto. Más iconos gratuitos.

2009-10-29T16:30:00.000+01:00

Roudy nos pasa un enlace interesante, donde podemos encontrar varios packs de iconos libres muy bien diseñados.

Hay distintas colecciones temáticas: ecológicos (Green), 2.0 atravesando el fondo (Web 2.0 Inside), usuarios (Web 2.0 User), carpetitas (Aurora Folders), latas de bebida (Drink), iconos de búsqueda (Searh), redes sociales (WebDev Social Bookmark), cómo no... emoticonos (Emoticons), soldaditos (Elite Soldiers) y unos cuantos más.

Todas las colecciones incluyen su licencia de uso, que generalmente está sólo restringido para uso comercial.

Modificaciones al sistema de sumarios 2

2009-10-26T14:16:00.001+01:00

Al hilo de esto de poner un enlace en las miniaturas de los sumarios, se me ocurrió que quizás habría otra manera de mostrar esa imagen sin que fuera necesario redimensionar con la consecuente deformación de las imágenes no cuadradas. Estuve haciendo pruebas con la propiedad CLIP de CSS, pero no conseguí un resultado satisfactorio, así que ideé una nueva chapucilla.

Se trataría de mostrar sólo una sección de la imagen original del post, del alto x ancho que hayamos designado, utilizando un OVERFLOW:HIDDEN. Cómo de esta forma siempre sale la parte superior-izquierda, le añadimos un desplazamiento aprovechando POSITION y por último, marcamos un mínimo para las imágenes más pequeñas. Por cierto, para el caso de las imágenes con medidas menores de los mínimos establecidos, la distorsión seguirá produciéndose, pero al menos dejamos la mayoría con un aspecto mejor.

Como la opción del script que muestra la imagen centrada encima del texto, creo que no la usa nadie, también he reducido el código eliminando esa opción. El tamaño de la miniatura tampoco se controla ya desde el script, sino que lo hará la parte del estilo. De esta manera, para implantar un sistema de sumarios con imagen flotante, enlace en la imagen y miniatura (realmente una parte de la imagen) no distorsionada, tendremos que utilizar este código en lugar del anterior.

Primera parte a colocar antes del </head>. Si ya teníais este hack, ahora se trata de sustituir.

<style type='text/css'>
.miniaturas {
position:relative;
float:right;
width:100px; /* Ancho del contenedor de la imagen */
height:100px; /* Alto del contenedor de la imagen */
margin:0px 0px 0px 10px;
border:1px solid #aaaaaa;
overflow:hidden;
}
.recorte {
position:absolute;
top:-20%; /* Desplazamiento vertical para comenzar recorte */
left:-20%; /* Desplazamiento horizontal para comenzar recorte */
}
.recorte img {
min-width:120px; /* Ancho mínimo a mostrar. WIDTH + LEFT */
min-height:120px; /* Alto mínimo a mostrar. HEIGHT + TOP */
}
</style>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1) {
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = sumario_noimg;
if(img.length>=1) {
imgtag = '<div class="miniaturas"><div class="recorte"><img style="background:none;" src="'+img[0].src+'" alt=""/></div></div>';
summ = sumario_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
sumario_noimg = 340;
sumario_img = 250;
//]]>
</script>

Las dos últimas variables sirven para indicar el número de caracteres a mostrar en el sumario:
sumario_noimg: Número de caracteres a mostrar para post sin imágenes.
sumario_img: Idem para post con imágenes.

La segunda parte, la llamada al script es idéntica a la que hacíamos anteriormente, por lo que no habrá que modificarla. Si todavía no la teniais, se trata de cambiar <data:post.body> por todo esto:

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary-" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary-<data:post.id/>");</script>
<a class='leermas' expr:href='data:post.url'>Leer más »</a>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>

Los cambios se pueden apreciar desde Vista previa para ver si está todo correcto antes de Guardar.

Si quereis compaginar esta modificación con la que vimos ayer de incluir un enlace en la imagen, sólo teneis que incorporar lo que allí se explica.

Modificaciones al sistema de sumarios

2009-10-25T13:35:00.000+01:00

Hay varias formas de crear sumarios y esta entrada hace referencia al último que se explicó aquí: Post en forma de sumarios (leer más) en dos pasos

Aitor nos preguntaba hace unos días cómo hacer para que la imagen del sumario fuera a su vez un enlace al post, al igual que pasa con el título. Esto es especialmente útil para blogs como el suyo en el que los sumarios no tienen texto y sólo tienen una imagen.

Para este caso, tendremos que localizar de entre el código que se facilitó la otra vez esta parte y en ella incorporar lo que se ha marcado en verde.

Además, en la llamada al script habrá que incorporar el dato de la URL del post a enlazar...

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary-" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary-<data:post.id/>","<data:post.url/>");</script>
<a class='leermas' expr:href='data:post.url'>Leer más »</a>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>

Una vez más, lo que está en verde es lo que se ha incorporado nuevo.

Ya tenemos enlace en nuestra miniatura.

Gracias

2009-10-23T09:58:00.004+02:00

Actualización: Fuera de casa, sin bluetooth, con poco tiempo y una puñetera conexión GPRS a 5Kb -o poco más- a duras penas pude crear esta mañana esta entrada para meter al menos una imagen y el mensaje principal que ahora reitero: Gracias.

Ahora, más o menos en las mismas circunstancias, pero con algo más de tiempo, ya puedo añadir que lo de ayer estuvo genial. Y no sólo por los premios que evidentemente son un gran halago, sino especialmente por la experiencia que este tipo de cosas suponen. Resultó muy curioso conocer a tanta gente de la que has leído cosas, con las que incluso has competido y que nunca llegas a ponerle cara del todo ni a conocer como es debido. Afortunadamente, eso ha cambiado un poco.

Ya puedo confirmar que los componentes del equipo de Deprisa Deprisa, a los que reconocí por su representante en la entrevista de 20minutos, El Bardo, son unos tíos/tías geniales; que Hasta los Cojones -el otro al que yo reconocí porque a partir de aquí ya fue todo al contrario- no es tan malo y borde como parece; que efectivamente, Abacab es más largo que un día sin pan... doy fé; que Anómalo hace honor a su nick también en persona; que los enviados por La Aldea Irreductible y Crónicas de una Cámara a la gala son unos dignos representantes de sus respectivos mandatarios y unos tíos muy elegantes; que Mariano Zurdo es clavadito a su avatar... ¿o quizás es al revés?; que Chary Serrano existe y es también una persona de carne y hueso; que Juan Duque (Luz de Gas Radioblog) habla igual en directo que en diferido y que sobre todo, tiene mucho aguante y no se cabrea demasiado cuando tiene problemas técnicos que le impiden retransmitir como a él le gustaría; que las cucarachas son lo más irreverente que existe, pero tienen una habilidad especial para comer canapés a dos carrillos a través de una máscara; que Banaka-Banaka es alguien muy simpático, de muy al sur, pasando frío en el norte...

En fin, seguro que hablé con más gente de la que recuerdo y cito, pero teneis que perdonarme todos aquellos que seguro me he dejado en el tintero. Ayer estaba flotando y hoy todavía no he aterrizado del todo. Todo un lujo conoceros. Mis saludos a todos.

Más actualizaciones: Subsanando olvidos -en lo posible- también pude cruzar unas palabras con:
Balovega
Diario de una chica con síndrome de Down
Cabreada
Reina
...

Las no-claves para tener un buen blog

2009-10-21T19:00:00.002+02:00

Partiendo de la base de que una web necesita a partes casi iguales de un buen contenido y de un buen continente ¿podemos establecer unos parámetros de referencia para hacer un buen blog? ¿cómo podemos saber a priori cuáles son los buenos contenidos y cuáles los mejores diseños?

Hay cientos de sitios que ofrecen consejos y recomendaciones sobre cómo se debe escribir, cuales son los mejores diseños, qué tipografías son las mejores, que estilo utilizar, estrategias para conseguir visitas... Lo que no entiendo es por qué si las claves para el... llamemosle éxito, están ahí, son claras y son conocidas por todo el mundo, no todos las aplican inmediatamente y comienzan a recoger frutos en forma de popularidad, visitas, distinciones o lo que sea.

Jumping Brain by Emilio Garcia

Quizás sí que lo hacen y lo que ocurre realmente es que dichas claves no lo son tanto. Quizás no hay recetas para la magia, para la chispa, para la CREATIVIDAD, para la originalidad... Cuando Manuel Jalón Corominas y Enric Bernat decidieron ponerle un palo a algo que hasta ese momento no lo tenía, demostraron tener el don de la genialidad. Si ahora yo uso un palo para otros fines distintos de los habituales, probablemente sólo sería un friki más o un oportunista. Si todos hacemos lo mismo, lo que antes había sido original ahora deja de serlo y se convierte en una medianía o incluso en una mediocridad. Esta frase me la apunto...

Es de perogrullo pero hoy día, la coincidencia con el gusto de la mayoría es muy importante. Si algo le gusta a la mayoría está bien, si le gusta a casi todos es una obra maestra; si no le gusta a casi nadie entonces es un bodrio... pero subrayo lo de hoy día. Hay una cosa que se llama MODA y que en mayor o menor medida, seguimos muchos. Actualmente se lleva el estilo 2.0 para webs: fondos muy claros con líneas casi invisibles para delimitar cajas, texturas muy suaves, fuente Georgia, Helvética o similar, bordes redondeados, links sin subrayado, iconos cristal, 3D,... pero ¿era esto lo que se llevaba hace por ejemplo 5 años? ¿es esto lo que se llevará dentro de otros 5? ¿por qué lo que ahora está bien, en el futuro seguro que será una antigualla? Probablemente sólo por definición de la propia palabra.

Pero ¿qué ocurre con los primeros que empiezan a marcar la moda del futuro? Pues que les pasa lo que a Van Gogh. Creo que Van Gogh vendió un solo cuadro en su vida y que no se comenzó a apreciar su obra con fuerza hasta 11 años después de su muerte. ¿Qué hizo que algo que no gustaba comenzara a ser tan reconocido? Pues principalmente al empeño de su cuñada que resultó ser su única heredera y que hizo una gran tarea de PROMOCION. Tras una exposición de renombre en París, la cotización de los cuadros del maestro pelirrojo comenzó a subir exponencialmente, afortunadamente -y nunca mejor dicho- para ella.

Nos dejamos llevar fácilmente por los poderosos, por los que ya han demostrado su valía, por lo popular, por los distintos gurús que existen en todos los ámbitos. La imagen de la derecha la podría haber dibujado perfectamente un niño y no pasaría nada; la podría haber pintado yo y me mandarían a una academia de dibujo a perfeccionar mi estilo; pero la realidad es que es de Miró y eso ya es una señal inequívoca de que tiene que ser buena ¿no? A ver qué crítico se atreve a decir que eso lo podría hacer mucha gente y que no tiene demasiado mérito. Una vez que me hayais disculpado por el ejemplo, de forma parecida, las personas y los medios con más INFLUENCIA pueden ensalzar o hundir totalmente en la miseria cualquier trabajo ajeno.

Por último y como con otras tantas cosas, ciertos asuntos requieren de una importante dosis de SUERTE. Pero bien entendido que la suerte hay que buscarla. Encontrar un trébol de cuatro hojas y además rojo, sólo contemplando el paisaje a ver si aparece alguno por casualidad, es directamente imposible. Si plantas algunas semillas, las riegas, las abonas, estudias algo de genética vegetal, realizas cruces con otras especies, compartes ideas con otros, etc., seguramente la probabilidad de tener suerte y encontrar uno, aumentará muchos enteros.

Una pregunta que me hacen mucho es ¿qué plantilla (diseño) es la mejor? Las menos ¿cómo puedo mejorar el contenido de mi blog? La opinión y el gusto por las cosas es algo tan subjetivo que lo que para uno es perfecto, para otro es sencillamente un gran desastre. Por tanto, la respuesta es que no tengo ni idea.

Sin embargo, como supongo que es posible que después de todo este taco, sigas buscando respuestas, ofrezco unos apuntes para la reflexión. Posibles planteamientos a la hora de crear un blog desde el punto de vista del continente y del contenido. Se puede...

construir/escribir algo que le guste al autor
construir/escribir algo que el autor sepa
construir/escribir algo que le guste a otros
construir/escribir algo que el autor piensa que le gusta a otros
construir/escribir algo que otros dicen que es lo que se debe

Personalmente me quedo con las dos primeras y si es posible, simultaneándolas. Si el contenido está basado en algo que desconoces y/o que no es de tu total agrado, lo de escribir en un blog o es tu trabajo o seguramente pasará a la historia en poco tiempo. Proponerse hacer un sitio con un diseño espectacular cuando no se tienen los más mínimos conocimientos o cuando a uno mismo no le gusta, también está probablemente abocado al fracaso.

Si entramos en el terreno profesional, la cosa cambia bastante. Cualquier gerente de un medio digital se tiene que preocupar más por lo que le gusta a otros que por lo que le gusta a él mismo. Tampoco debería ser un obstáculo su nivel personal de conocimientos, porque se le suponen medios económicos, documentales y técnicos, aunque sean ajenos, para resolver esa parte.

Cuando alguien escribe un libro, dudo mucho de que al hacerlo sepa con certeza que va a ser un futuro boom editorial. Seguro que ese autor lo redacta con todo su cariño, siguiendo las pautas conocidas de éxito y el mayor de sus esmeros, pero queda a la decisión del público que esa obra sea considerada como maestra o como fiasco. Cuestión de números: la mayoría debería tener la razón... aunque una minoría presuntamente cualificada, los críticos, también podrían tenerla.

Aviso fijo al final de cada entrada.

2009-10-19T17:27:00.000+02:00

Con esto de los concursos (20blogs, Bitácoras), ya sois más de uno y más de tres, los que me habéis preguntado cómo poner un texto fijo, imagen o lo que sea, tras el contenido de cada post. La idea es que tras leer vuestra entrada, el visitante lea también algo tipo: "Si te ha gustado, Menéame", "¿Te ha parecido interesante esta entrada? Pues...", "Te mola > Vótame", etc.

Para conseguir esto tenemos que realizar dos tareas:

1. Lo primero es preparar el mensaje o aviso. Si es un texto, será suficiente con hacer un DIV con una etiqueta de estilo y el texto-enlace dentro. Por ejemplo:

Si no se ha entendido vuelve a empezar. ¿O.K.?

<div style='width:370px;text-align:center;padding:5px;margin:15px auto;color:#5882AA;background:#cccccc'><img src='URL_IMAGEN' style='float:right;margin:0px 0px 3px 3px;'/>TEXTO <a href='URL_DESTINO' style='text-decoration:underline;'>ENLACE</a>. MAS TEXTO</div>

Dentro del primer STYLE irán los atributos del bloque (DIV). En el segundo, los de la imagen que acompaña al texto. Esta imagen se puede poner o no, al gusto.

Otra opción más simple es colocar directamente sólo una imagen sin texto, pero con un enlace:

¿Hay más opciones...? Sí, pero esas ya os las dejo como deberes para casa :)

2. Una vez diseñado vuestro aviso, la segunda parte es colocarlo en su sitio, pero esto es quizás lo más fácil. Simplemente teneis que localizar (artilugios expandidos) la variable DATA:POST.BODY y justo detrás incluir el código que habeis preparado antes.

Si teneis puesto el truco del estilo revista, leer más o similares, lo más seguro es que tengais una parte de código que incluye una condición para mostrar un aspecto u otro según estemos en páginas de entradas o en otras. En este caso, habrá dos DATA:POST.BODY. Aquel que sea para entradas individuales (ITEM), será la referencia correcta.

Probando fuentes

2009-10-16T14:40:00.005+02:00

No es que se me ocurran muchas aplicaciones para este código, pero siempre puede de ser de utilidad para alguien. Se trata de unos botones que mediante instrucciones JavaScript de estilo, permiten que el lector de una web vea que aspecto tendría la página que está visitando, con los distintos tipos de fuentes considerados estándar.

Tipografías estándar son las que tienen instaladas una mayoría considerable de los ordenadores y en una información más exacta, las que nos relaciona Cosas Sencillas. Cada uno puede ver en una página web, sólo las tipografías que tiene instaladas en su propia máquina. O sea, que si pones una fabulosa fuente en tu espacio, tan buena como poco común, lo más seguro es que tú y sólo tú la veas como es debido. El resto verán unas letras distintas, las que estén definidas por defecto. Como podeis comprobar en el anterior enlace, incluso hay algunas fuentes "estándar", que vienen con Windows y no con Apple, otras para la versión Vista...

Realmente no hay una fuente que valga para todos los equipos, arquitecturas y sistemas operativos y por eso es conveniente saber cómo funciona el selector font-family. El valor de esta propiedad debería ser en un principio el nombre de la fuente deseada, pero por lo anteriormente explicado, es conveniente montar una relación de fuentes que el navegador irá intentando leer en el orden en que se escriban, hasta encontrar una que el usuario efectivamente tenga:

p {
font-family: Cambria, "Times New Roman", Times, Serif;
}

Hay dos tipos de nombres de tipografías, el que hace referencia a la fuente en sí y el de las familias genéricas. Poner una familia genérica sirve para el caso de que todas las anteriores fallen. Las posibilidades son serif, sans-serif, cursive, fantasy y monospace.

Una observación. La relación de fuentes debe ir separadas por comas y los nombres de fuentes que contienen espacios en blanco, deben ir entrecomillados si se utiliza con STYLE en HTML.

Y ahora el código por si quereis poner unos botones de este tipo:

Añadiendo nuevos elementos a la lista, podeis incluir otras fuentes que considereis oportuno probar con este sistema. El código está preparado para colocar en una entrada o un gadget añadido desde Elementos de página, pero lo más importante es que escojais el nombre de un CONTENEDOR (#) lo más genérico posible para que se pueda cambiar el tipo de letra de toda la página y no sólo una parte de ella. Esto ya va en función de cada plantilla. Si no estais muy seguros podeis hacer pruebas con OUTER-WRAPPER o MAIN-WRAPPER que suelen ser muy comunes en las plantillas Blogger.

Hay sistemas para forzar que el usuario vea la fuente que el programador desea a pesar de que el primero no la tenga, pero no están exentos de inconvenientes. Uno es convertir el texto en imágenes que diseñaremos con nuestras propias fuentes y colocar dichas imágenes en su lugar, pero como podeis imaginar, es pesado de hacer, no es bueno para la correcta indexación de las páginas y además ralentizará la carga de la misma. Otros sistemas basados en scripts sIFR, nos liberan de la tarea de conversión, pero no elimina todos los inconvenientes.

De momento, el futuro está en la generalización de @font-face de CSS3 para todos los navegadores, que es la forma más sencilla y práctica de conseguir utilizar tipografías no-estándar, ya que este atributo permite indicar la dirección de una fuente en la hoja de estilo y esta se descargará automáticamente en el ordenador del usuario.

Hacer este artilugio se me ha ocurrido al hilo de la polémica sobre Oloblogger, que ha provocado mi curiosidad y me ha hecho leer mucho sobre el tema del uso de la tipografía Comics Sans. Tanto que estoy planteándome cambiarla. El caso es que parece que esta tipografía si bien es una de las más utilizadas, también es la más odiada dentro del mundo del diseño web. O sea, a los usuarios de procesadores de texto y a los aficionados a desarrollar webs parece que les encanta, pero los profesionales no la quieren ni ver.

Existe incluso una Organización Contra el Abuso de la Comic Sans (castellano) y otra página que directamente propone el banneo de esta tipografía de nuestras vidas (inglés). Chistes, más chistes y artículos ingeniosos a cuento de la Comic, además de la historia sobre su origen. Todo para reforzar la idea de que no es una tipografía al uso.

En Blogoff nos dan 5 razones de peso para no utilizarla, todas válidas pero de las cuales me parecen muy convincentes dos: ¿Si mucha gente la odia, por qué espantar lectores por una cosa tan simple de cambiar? ¿Original la fuente más usada en el mundo? Parece que algo de razón, sí que tienen.

No es la primera vez que alguien me llama la atención con la tipografía y aunque por otra parte parece que no debe ser demasiado molesta (finalista por decisión del jurado en 20blogs y tercero provisionalmente en la categoría en Bitácoras * ) me he propuesto dar gusto a los lectores y a los no lectores de este espacio -ya veremos si no me arrepiento- y aprovechando el artilugio de hoy, abro una encuesta para saber vuestra opinión. Sólo teneis que haceros una idea pinchando en los distintos botones de arriba y luego seleccionar en la encuesta de abajo aquellas tipografías que más os gusten PARA ESTE BLOG de entre las propuestas. Se pueden seleccionar varias de ellas. Prometo al menos estudiarlo.

Una curiosidad: Una tabla periódica con las mejores tipografías, donde por supuesto, no está la Comic.

(*) ¡No sabía cómo contarlo! Por eso está ahí metido con calzador :)

Splash screen... o algo parecido

2009-10-13T18:00:00.001+02:00

No tenía ni idea de que se llamaba así, pero a resultas de una pregunta, he podido descubrir que un Splash Screen es una pantalla, generalmente una imagen, que aparece mientras se carga un programa, un sistema operativo, una aplicación de instalación... Vamos, la pantallita que muestra nuestro sistema operativo cuando arrancamos el ordenador desde que se cargan los datos básicos de hardware, hasta que comienza a cargar el escritorio, por ejemplo. Algunos les llaman quitamiedos, porque sirven para evitar la sensación de que el ordenador se ha quedado colgado en el caso de que la cosa se demore. Suelen llevar una señal de avance de la carga.

Para los que quieran sencillamente eso, algo que salga mientras vuestra página carga, os remito a la entrada sobre cómo crear un aviso para la carga de una página y que precisamente mostrará en el blog una capa superpuesta, que desaparece cuando termina completamente la carga de todo su contenido. La capa puede tener cómo se explica allí un gif animado, una imagen fija, pero también otro tipo de elementos y sólo con ampliar su tamaño, obtendremos una cosa similar a un splash screen.

Sin embargo hay otra posibilidad, que es mostrar algo que desaparezca tras cumplir su misión (pasado un tiempo realmente). Si es eso lo que quereis, entonces continuad aquí que vamos a tratar de explicar cómo se hace.

En primer lugar generamos un script, que precisamente lo que hace es ocultar determinada capa identificada mediante su nombre, transcurrido determinado tiempo. Para ello, antes del </head> pegamos lo siguiente:

ID_CAPA será el nombre que le pondremos después al DIV que contendrá aquello que queremos que se vea con este sistema. La última cifra (10000) es el tiempo en milisegundos que tardará en aplicarse la instrucción contenida dentro del setTimeout y que en este caso consiste en ponerle un valor HIDDEN a la capa para que deje de verse. Dicho al revés, pasados 10 segundos, la capa que ahora después crearemos, desaparecerá.

Ahora el bloque que queremos mostrar. En primer lugar, tiene que tener el mismo nombre (ID_CAPA) que pusiéramos en el script. El lugar dónde debe ir ubicado es justo después del <body>

Configuración:
Hay que cambiar, para adaptarlo a vuestras necesidades, el ancho y el alto del bloque (WIDTH-HEIGHT). Los márgenes (MARGIN-LEFT MARGIN-TOP) tienen que tener justo la mitad de pixels que las correspondientes medidas de ancho y alto, para que el resultado se vea totalmente centrado. El borde (BORDER) se puede cambiar o incluso anular. También se puede incorporar un color o un imagen de fondo (BACKGROUND), incluyendo un PADDING para que no se solape por completo. Como estamos ante un DIV que va a funcionar de forma independiente al resto de la página, podeis poner el estilo que querais.

El enlace que está alrededor de la imagen del ejemplo (javascript:void(0);), sirve para que el usuario pueda hacer desaparecer la imagen antes de transcurrido el tiempo programado, con sólo pinchar en ella. Para que se pueda cerrar sólo desde un punto determinado del bloque, habría que quitar el enlace de la imagen y generar un nuevo DIV dentro del principal con una instrucción javascript algo distinta:

Con respecto a su contenido, es necesario especificar la direción de la imagen que se quiere mostrar o, si se prefiere, cambiar la imagen por un texto u otra cosa. Por ejemplo, se podría mostrar una animación flash o un vídeo de YouTube -qué viene a ser lo mismo para este caso- cambiando todo el tag IMG por un objeto embebido. Ejemplo con contenido para copiar y pegar y una demo de cómo quedaría:

En este último caso, en función de la duración del vídeo, ajustaremos el valor del tiempo del primer script que instalamos (10000), hasta una cifra que nos permita ver la secuencia completa. Para estos menesteres, parece adecuado incluir al enlace del fichero flash, un &autoplay=1, cómo se ha hecho en este último ejemplo, que hará que el vídeo comience a reproducir solo. Si esperamos a que el usuario le de al play y por otro lado, nosotros programamos el tiempo justo, lo más seguro es que el elemento desaparezca antes de terminar. Sin embargo, si ponemos tiempo de más y el usuario le da desde el principio, el aburrimiento/desesperación puede ser máximo. Por cierto, mucho ojito con poner cosas del estilo de esta película.

Una pega de este sistema usando elementos multimedia, es que el script sólo oculta el contenido, por lo cual, si este tiene sonido y es cerrado por el usuario antes de tiempo, el audio seguirá oyéndose hasta que no termine del todo.

Este código se puede colocar en una entrada, para que el pantallazo se vea sólo cuando se accede a ella. Para ello habría que cambiar las comillas simples por dobles y los " por comillas sencillas, amen de redactarlo todo seguido, sin saltos de línea. (ejemplo)

Cuidado con los posicionamientos. Si no hay ninguna instrucción POSITION en vuestra plantilla, el bloque se colocará en referencia al BODY tanto si lo ponemos en la plantilla como si lo ponemos en un post y servirá todo el código explicado hasta el momento. Por contra, si nuestra plantilla incluye algún atributo POSITION y para el caso de colocarlo en un post, habrá que ajustar los parámetros porque el bloque se colocará con respecto al contenedor de las entradas y no con respecto al BODY.

Este truco se puede usar como pantalla de presentación, para dar un aviso, para mostrar un contenido destacado, una lista de enlaces,... lo que vuestra imaginación os diga. Se admiten sugerencias de uso.

Plantilla. Oldbook

2009-10-10T00:37:00.003+02:00

No es que tenga pensado reconvertirme y comenzar a ofrecer plantillas propias, no. Lo que ocurre es que alguien me planteó si sería posible poner un post al lado de otro, en lugar de que se muestren apilados (lo normal) y no me pude resistir a intentarlo. Luego me fuí liando, liando, liando... y al final salió esto, una plantilla completa muy en la línea Oloblogger. O sea, oscura, recargada, algo gótica, algo gore, algo grunge, llena de cachivaches y en fin, todo lo contrario del estilo 2.0.

Click para ampliar

Lo que veis en la captura es el aspecto de un post individual (item): Entrada a la izquierda y comentarios a la derecha. En la página Inicio y en la navegación por fechas o por etiquetas, los posts se muestran ocupando ambas páginas, uno a cada lado... lo que en un principio os comentaba.

Los posts de la demo explican sus características así como los pequeños ajustes que hay que hacer en la configuración general del blog (por ejemplo, número par de entradas por página). También tiene un catálogo de las imágenes utilizadas por si quereis almacenarlas vosotros mismos y no quereis correr si un día se pierde el hosting original.

En la propia demo hay un botón para descargar la plantilla completa. Para los mañosos, desde ya advierto que este tipo de plantillas no permiten muchas modificaciones, debido a su gran componente gráfico. No obstante, por lo peculiar de su diseño, probablemente no haya que tocar mucho: o te gusta así o casi mejor que escojas otro template.

Pensando en los que les gusta poner muchos cacharritos, como no tiene barra lateral, he incorporado secciones arriba y abajo del cuerpo de las entradas para poder poner lo que se quiera.

¡Que la disfruteis!

Barra de herramientas Wibiya

2009-10-07T00:08:00.001+02:00

...o cómo meter un montón de cacharritos en muy poco espacio, de una manera sencilla.

Esto es en pocas palabras Wibiya Tools Bar. Se trata de una versión Beta y sólo funciona por invitación, aunque esta seguramente te llegará en muy pocos días con sólo solicitarla.

Demo en versión Dark Red en la parte inferior de este blog de pruebas.

La barra es muy fácil de instalar pues basta con poner una línea de código para que se ejecute la llamada al script que desarrolla todo. La configuración es bastante amplia pero también fácil. Podremos elegir el aspecto y -lo más interesante- los gadgets que queremos que incorpore la barra: cuadro de búsqueda interna/externa, traducción, entradas recientes, suscripción a feed, galería de imágenes, enlaces a Facebook (sólo a este servicio, se ve que llevan comisión), botón "compartir" para mandar a las más conocidas redes sociales, una especie de bloc de notas para avisos a tus lectores, un cuadro para Twitter... y supongo que le irán colgando más cosas, pero también supongo que eso será cuando empiecen a cobrar por el servicio ;)

Como está en inglés, un pequeño tutorial para instalar el artilugio:

0. Accedemos a la dirección de Wibiya y pinchamos en Get It Now. En la pantalla que aparece y en el lado derecho introducimos nombre, dirección de correo y la dirección de nuestra página. Eso es sólo para pedir una invitación. Al cabo de unos días, recibiremos un correo con un link y una clave para poder acceder. A mí me tardó menos de 24 horas. Cuando lo tengamos nos vamos al lado izquierdo e introducimos nuestro correo y la clave que nos mandan.

1. Una vez que hayamos podido entrar, iremos al primer paso Create an Account, en el que indicaremos el nombre de nuestro sitio, la dirección y el idioma. A la derecha una cuenta de correo y un password. Con el captcha resuelto, pinchamos en Next para seguir.

2. Ahora elegimos el diseño que más nos cuadre en cuanto a color y a la derecha si queremos que muestre el icono de nuestro sitio, otro personalizado que podremos subir desde ahí mismo o un icono de Wibiya. Sale una previsualización abajo para que no nos lo tengamos que imaginar. Next de nuevo.

3. Cómo decía antes, ahora lo más interesante: una selección de gadgets para escoger aquellos que queremos poner. Con ir marcando/desmarcando es suficiente. Eso sí, aquí ya necesitais un traductor los que no sepais inglés o dejaros llevar por vuestra intuición... o por los iconos. También podeis ir viendo cómo queda. Next.

Ahora, adicionalmente y en función de los artilugios elegidos, puede que se os pregunten detalles cómo vuestra cuenta de Flickr o vuestro usuario de Twitter, necesarios para personalizar la barra con vuestros propios datos.

4. Ya tenemos creada nuestra barra y ahora sólo nos falta seleccionar la plataforma dónde la usaremos. Seleccionándola entre las distintas opciones, a la derecha nos darán las intrucciones necesarias para poderla instalar. En el caso de Blogger, si estais logueados en vuestro blog, directamente aparece una aplicación para instalarlo en vuestra barra lateral con sólo aceptar. No importa el lugar dónde se coloque; la barra siempre estará en la parte inferior. Por cierto, es plegable (botón a la derecha del todo).

Antes de hacerlo, podeis ver el contenido del código y comprobareis que sólo es este:

La identificación (XXXXX) es única por cuenta y eso os permitirá cambiar posteriormente cualquier cosa desde la web de Wibiya, sin tocar nada en vuestro blog. Los cambios son visibles enseguida sólo refrescando.

Para desinstalarla si os aburrís o simplemente porque no os convence, es suficiente con eliminar el gadget que se incorporó en su momento.

Proteger un contenido... pero poco

2009-10-04T17:45:00.013+02:00

Como respuesta a una consulta, a continuación se explica cómo proteger parte del contenido de una página o incluso una página entera. Que quede claro antes de empezar, que el nivel de seguridad de estos sistemas es cero. Cualquiera con unos pocos conocimientos podría averiguar la contraseña sin ningún problema. Por tanto, sólo debería usarse como divertimento o para datos sobre los que no preocupe su difusión. Los únicos sistemas seguros (casi) del todo son los que utilizan bases de datos para almacenar los idem, pero hoy por hoy, la mayoría de nosotros no tenemos acceso a manejar dichas bases de datos.

Una primera opción sería introducir este script en nuestra plantilla, antes del </head>:

<style type='text/css'>
.ver {display:block;}
.ocultar {display:none;}
</style>
<script type='text/javascript'>
function desplegar(identificacion){
var menu = document.getElementById(identificacion);
if(document.formclave.clave.value == 'PASSWORD')
{if(menu.className == "ocultar")
{menu.className = "ver";}
else {window.alert("Ya está todo el contenido a la vista");}
}
else {window.alert("Contraseña errónea");}
}
</script>

A continuación sólo sería necesario introducir esta estructura de código en una entrada para que una parte de su contenido quede oculto hasta que se introduzca la contraseña correcta (en mayúsculas lo que habría que personalizar):

Para acceder a la información, introduzca la contraseña:
<form name="formclave"><input type="text" name="clave"><input type="button" value="Enviar" name="enviar" onclick="desplegar(IDENTIFICATIVO_UNICO)"></form>
<div class="ocultar" id="IDENTIFICATIVO_UNICO">AQUI EL CONTENIDO OCULTO DE LA PAGINA</div>

El script y su estilo sólo hace falta instalarlo una vez. Luego, cada vez que se quiera proteger una parte de contenido, habrá que incluir esta segunda parte de código. Hay que tener cuidado con que los pares IDENTIFICATIVO_UNICO sean iguales entre sí pero distintos con respecto a otros pares.

Para cambiar la contraseña sólo habría que cambiarla en el script (PASSWORD) y esto ya os da una pista de lo fácil que sería ver el código fuente y averiguar la susodicha, pero el caso es que ni eso haría falta: Botón derecho, ver código fuente y buscar la información oculta bastaría para verla sin preocuparnos de buscar la contraseña. Probemos aquí el sistema con la palabra "hola"

Introduzca la clave

ESTE ES EL CONTENIDO OCULTO DE ESTA PAGINA

Light drawing during insomnia

Si preferís no trastear la plantilla porque sólo utilizareis esto para ocasiones puntuales, también se puede poner directamente el código en la entrada. En este caso, hay que hacer unas pequeñas modificaciones con las comillas y escribir toda la parte de estilo y script en la misma línea, sin saltos de línea, tal que así:

Ahora otra variante sin contraseña escrita en ningún sitio y sin poder ver el contenido en la página en la que se está. Tiene el inconveniente de que la información es pública para todo aquel que conozca la dirección de la página, ya que precisamente la contraseña es la dirección de dicha página o mejor dicho, una parte de esa dirección.

En este caso, lo primero que tenemos que hacer es crear la página y publicarla (la palabra lo dice, será pública). En Blogger, para que no nos salga de las primeras, deberíamos ponerle una fecha atrasada. Para que se vaya lo más lejos posible, mirad vuestra primera entrada y ponerle esa misma fecha.

Ahora comprobamos la direccion de la página. En Blogger la cosa será algo así:
http://NOMBREBLOG.blogspot.com/AÑO/MES/PALABRA1-PALABRA2-PALABRA3-PALABRA4.html

Elegimos de esa dirección la palabra que más nos guste y que será la que sirva de contraseña. Para el ejemplo cogeremos PALABRA3. Ahora se trata de escribir en el sitio oportuno la dirección entrecomillada, pero sustituyendo esa para de la dirección (contenido) por la variable que captura el formulario. Se reproduce el código en formato entrada:

Una prueba para este otro sistema (password="contenido"):

Introduzca la clave

Se puede coger una sola palabra o cualquier otro trozo. Podría ser incluso toda la parte final (palabra1-palabra2-palabra3-palabra4), pero siempre sustituyendo la parte que sirve como contraseña por document.formclave.clave.value.

Novedades legales y de cortesía.

2009-10-02T12:06:00.007+02:00

Algún avezado lector ya se habrá percatado a estas alturas, de que tenemos un par de nuevos apartados fijos en el blog. (de hecho me consta que algunos ya lo han hecho). Amen de los "históricos" Indice y Enlazar, ahora se han incorporado Aviso legal-Política de privacidad y ¿Esto qué es?

El primero intenta cumplir con la legalidad vigente, reflejando las condiciones de uso, la forma en que recogemos, guardamos o utilizamos la información que recabamos a través de los diferentes servicios que se ofrecen y/o páginas disponibles en este sitio, la licencia del contenido y la forma de contacto con el administrador. ¿Que no os preocupa este tema? A mí tampoco mucho, la verdad. Pero si se pueden hacer las cosas bien, ¿por qué no hacerlo?

El segundo es el típico About, que cuenta de qué va este blog y que creo que era una asignatura pendiente que tenía con los usuarios del mismo. En él se explica cómo surgió este blog, qué pretende ser actualmente y además, unas recomendaciones para mejorar en lo posible su óptimo desarrollo.

Espero que le echeis un vistazo a ambos.

Más información: Ley de Servicios de la Sociedad de la Información (LSSI). Preguntas frecuentes. Ministerio de Industria, Turismo y Comercio. Gobierno de España.

Splush. Gadget para entradas recientes.

2009-09-30T09:00:00.003+02:00

Splush es un servicio para obtener un simpático gadget con efecto acordeón, basado en el feed (fuente). Con él podremos mostrar las entradas más recientes de nuestro blog o los últimos posts de nuestros espacios favoritos. Permite incorporar varios feeds por lo que también podría servir de blogroll compacto. Podeis juguetear con el modelo que hemos incorporado a la derecha.

Advierto que está en inglés, pero no es complicado seguir las instrucciones para conseguir el código. Requiere registro, pero sólo para poder modificar posteriormente el artilugio. No requiere validación por e-mail, o lo que es lo mismo, traga con cualquiera que pongais, pero en ese caso, no podreis recuperar la contraseña si la olvidais.

Comenzamos pinchando arriba a la derecha en Create your own Splush », rellenamos los datos del formulario, seleccionamos "I have read and I agree to the terms of services" y pinchamos en el botón "Create my account".

A continuación nos logueamos con el usuario y contraseña antes grabados y pinchamos en "Añadir nuestro 1º Widget" (en inglés o francés, según hayamos seleccionado).

TUTORIAL

1. Empezamos con el primero de los cuatro pasos para crear el widget. Lo que se pregunta al principio es la página dónde se exhibirá el widget. Si luego colocais el código en otra página distinta, saldrá un mensaje de error. No me pregunteis por qué, pero es así. Ojo que sólo es válido para una página. Si se quiere poner el mismo artilugio en otra, habrá que crear otro widget distinto. Para distinguirlos, podeis nombrarlos (Widget name).

Click para ampliar

La última casilla no la he utilizado, pero si la dejais marcada, nos cuentan que pondrán anuncios en el artilugio y nos cederán un 50% de... nosequé. Esta parte la dejo para que los interesados investiguen y si tienen a bien, pongan su experiencia en los comentarios. Si no quereis anuncios, la desmarcais y pinchais "Next Step".

2. Ahora sí que la dirección que nos piden es la de la página cuyas entradas queremos mostrar. Tecleais la dirección completa de la página y el servicio buscará si tiene fuentes. Con "Add my Feed", añadís el feed y podeis seguir añadiendo más si quereis esta característica. Cuando tenemos lo que queremos, pinchamos de nuevo "Next Step".

Click para ampliar

3. En la siguiente página podeis configurar el formato de fecha, el ancho y los colores del cacharrito, así como si quereis que se muestren imágenes o no. Podeis ir viendo como queda en una demo que sale a la derecha. Cuando terminemosPinchamos "Validate and get my code"

4. Ultima pantalla en la que sólo tenemos que copiar el código que nos facilitan y pegarlo dónde queramos. Lo normal será en la barra lateral o en el pie de la página.

Click para ampliar

Es posible editar a posteriori el widget para alterar los feeds o el aspecto, así que tranquilos y a probar cosas.

Feed. Qué es y para qué sirve.

2009-09-27T11:27:00.004+02:00

Una de las mejores formas -no me atrevo a decir la mejor- de mantenerse al día de lo que se cuece en La Red, es usando los feeds y los lectores de idem.

Muy utilizados en bitácoras y en prensa, un feed o fuente es realmente un fichero normalizado con la información de la web en cuestión, que se actualiza automáticamente (casi) en tiempo real. Si quereis ver uno en bruto, este es el feed de Oloblogger. Al ser necesario usar un formato sencillo, muchas de las instrucciones y sobre todo los estilos que hay programados en las páginas, no son visibles allí. Pero en este caso, lo importante es el contenido, no el continente.

¿Y cómo sacarle partido a esto? Pues mejor que con simples palabras lo vais a ver en formato multimedia, porque los chicos de Common Craft lo explican genial y en muy poco tiempo.

O sea, que si utilizamos un lector de feeds y en él vamos agregando las fuentes de las páginas que solemos visitar, no tendremos que estar echando viajes a cada momento a ver si se ha publicado algo nuevo en todas y cada una de ellas. Bastará con visitar nuestro lector y cuando comprobemos que hay contenido nuevo, pinchar directamente en el título del post para ir allí y ver toda la entrada. La lista de lectura que tenemos los de Blogger en el Escritorio de administración es un ejemplo de cómo funciona.

Las redes sociales utilizan estas fuentes para añadir el contenido de las entradas que se publican, dentro de dichos servicios: Blogalaxia, Bitácoras, Tecnorati,... por citar algunos ejemplos. Algunos de estos servicios añaden feeds sin consultar y para salir en otros es necesario dar el alta manualmente. Unos publican sólo el título y un pequeño sumario y otros todo el contenido... restándote visitas por cierto. Pero eso, es otra historia.

Hay feed para distintos tipo de información: para las entradas, para los comentarios, para ciertas categorías, para imágenes... Al tratarse de un formato estandar, muchas aplicaciones pueden usarlo para extraer datos, filtrarlos si es necesario y mostrarlos. ¿Os acordais de Blogumus con imágenes para Flickr o Picasa? Pues se basaba precisamente en el feed de estos servicios de almacenamiento.

¿Y a qué viene toda esta charla sobre las fuentes a estas alturas? Pues viene al hilo de que en los últimos días, Oloblogger ha superado los 1.000 suscriptores de media diaria y no sabíamos como contarlo :). El indicador es una aproximación que se calcula teniendo en cuenta las peticiones en periodos de 24 horas y los datos se obtienen haciendo un análisis desde diferentes lectores y agregadores que llegan a ese feed diariamente, excluidos navegadores y bots. En base a esto, el número final va cambiando todos los días, pero una captura ya no nos la quita nadie ;)

No cabemos de gozo. Algo impensable cuando empezamos con este invento.

A vueltas con los avatares y con la exportación

2009-09-25T11:46:00.013+02:00

Jose GDF, ha descubierto un problema con los avatares en los comentarios, relacionado con la importación/exportación de entradas.

El problema se manifiesta cuando importamos entradas procedentes de otro blog y sus correspondientes comentarios. En ese caso, el icono del comentarista desaparece. El hueco reservado para él si que está, pero el dibujito del avatar no se ve.

Explicado desde un gran desconocimiento del tema (...advierto), los datos que van incorporándose a nuestro blog, tanto por nosotros como por los lectores (texto entradas, imágenes, comentarios,etc...) se almacenan inmediatamente en una base de datos del servidor de Blogger. Cuando accedemos a una página concreta, el navegador solicita recuperar esos datos para ser visualizados y Blogger a través de la dirección y de las instrucciones contenidas en nuestra plantilla, extrae de la susodicha base de datos, todo aquello que tiene relación con esa URL y los coloca adecuadamente. Bueno, adecuadamente según la plantilla; si la tenemos chunga, los datos saldrán chungos.

Cuando exportamos nuestros posts y/o comentarios, lo que hacemos es acceder a esa base de datos y generar (automáticamente) un fichero .xml. Ese fichero contiene en un formato estándar, toda la información necesaria para poder "montar" de nuevo y con los mismos datos, esas entradas y comentarios en un nuevo blog. Un blog que como ya sabreis, puede ser el mismo de partida o incluso tener otra dirección.

Por otra parte, el dato del avatar (URL de la imagen), parece que es independiente con respecto a cada comentario, debido a que no se puede controlar fácilmente si uno y otro los han hecho el mismo usuario. Lo podeis comprobar de esta manera: si escribo un comentario con determinado avatar y a continuación cambio el mismo en mi perfil y vuelvo a hacer un nuevo comentario, podreis ver que cada uno mantiene aquel dibujo que teníamos en el momento de redactarlo.

Tiene su lógica toda vez que no todos los que comentan tienen una cuenta Blogger y sería imposible que Blogger administrara los avatares de todos los sistemas de identificación. Hoy tienes este, te guardo este. Mañana tienes otro, te guardo el otro.

Dicho esto, creo que el problema viene probablemente de que el fichero de exportación no contiene los datos de los avatares. Si es así, en el blog que recibe los datos del fichero .xml, es imposible que se vean y sólo Blogger puede arreglar eso. ¿Cómo? Reproprogramando la utilidad de exportación para que incluya los datos de los avatares.

Posible sí. Probable, no.

Decora tu blog... en menos de un minuto

2009-09-23T09:00:00.002+02:00

Un banner me dió la pista de esta ingeniosa web, que ofrece más de 100 skins para Blogger, instalables con el mínimo esfuerzo.

Y ¿por qué digo ingeniosa...? pues porque cambiar el aspecto de nuestro blog con el sistema que proponen, no puede ser más fácil. Tengas la plantilla que tengas, los pasos a seguir son los siguientes:

Panel de control > Diseño > Seleccionar plantilla nueva
Escoger plantilla MINIMA y Guardar plantilla
Diseño > Elementos de página > Añadir un gadget (HTML/Javascript)
Copiar el código que te facilitan en la web y Guardar

Ya tenemos nuestro blog maqueado y seguramente no me he pasado ni un segundo, del tiempo que dice el título de esta entrada. Una vez instalada la plantilla mínima y para cualquier cambio posterior con el mismo sistema, bastaría con hacer los pasos 3 y 4, o sea, unos 10 segundos.

Aclarar que no se trata realmente de instalar una plantilla completa, ya que lo que tendremos a partir de ese momento siempre será la plantilla MINIMA en cualquiera de sus variantes.

Actualización: Se puede probar a añadir el gadget sin cambiar a plantilla mínima. Puede que de la casualidad de que se ajuste a vuestro diseño. En ese caso, sólo hay que añadir el gadget y si no que da bien, con borrarlo ya estará todo deshecho.

No obstante, si se desea instalar y conservar la plantilla que se tenga al mismo tiempo, viendo que no "cuadra", podeis intentar los siguiente. Siempre que sea un diseño centrado, ajustar el ancho exterior (outer-wrapper y header) a 660px para las carátulas diseñadas para "2 columnas" y a 880px para las de "3 columnas". Puede que también sea necesario cambiar el ancho de otras columnas.

Lo que en verdad estamos haciendo con el código que nos facilitan, es forzar un estilo en el nuevo gadget, para colocar y fijar una imagen de fondo determinada a todo el blog. La facilidad de la instalación radica en que el ancho de las columnas de esa plantilla (MINIMA) es conocido, lo que permite hacer como churros, skins (carátulas) del mismo tamaño e instalarlas igual de rápido. Ya sabeis que con este sistema, el contenido simulara siempre desplazarse por la parte central del dibujo.

En vuestra elección, tened cuidado de elegir el fondo cuyo color central os cuadre con el color de letra que teneis. Si teneis un blog negro (con letra clara) y ahora escogeis un skin con fondo central blanco, la letra no se verá. Las opciones son dos, o escoger otro skin con fondo central oscuro o ir a Diseño > Fuentes y Colores y escoger un tipo de letra que contraste con el nuevo fondo.

Actualización: Se puede probar a añadir el gadget sin cambiar a plantilla Mínima. Puede que dé la casualidad de que se ajuste bien a vuestro diseño. En ese caso, sólo hay que añadir el gadget y si no queda bien, con borrarlo ya estará todo deshecho.

No obstante, si se desea instalar y conservar la plantilla al mismo tiempo, viendo que no "cuadra", podeis intentar los siguiente. Siempre que sea un diseño centrado, ajustar el ancho exterior (outer-wrapper y header) a 660px para las carátulas diseñadas para "2 columnas" y a 880px para las de "3 columnas". Puede que también sea necesario cambiar el ancho de otras columnas. Son unos cambios que se pueden también deshacer fácilmente si anotais los valores previo a cambiarlos.

Personalizar avatares comentaristas

2009-09-20T01:28:00.002+02:00

Como vimos, otra vez funciona cómo es debido el artilugio de los avatares de los comentaristas de Blogger. Hace tiempo que quería usarlo y lo reinstalé, pero para variar, me encontré con el primer problema. Lo cierto es que es un problema menor pero si se puede solucionar ¿por qué no hacerlo?

El caso es que cuando un comentario se produce en anónimo el sistema coloca una imagen sin contenido y el hueco que queda no me gustaba. Por otra parte, yo he cambiado de avatar un par de veces y resulta que los comentarios se graban con el avatar que tenía en cada momento. Como en mi propio blog queda raro que haya comentarios míos con distintos dibujitos, he aprovechado para forzar la impresión de un avatar concreto.

No he podido resolver todos los casos, porque falta por solucionar el tema del hueco para cuando el usuario se identifica con nick+URL. Ahí sigue saliendo, ya que el código propuesto identifica al anónimo precisamente por su ausencia de URL y en este caso, si hay URL. Lo he intentado con la etiqueta data:comment.authorClass que nos descubrió Vagabundia en su post sobre cómo identificar a los autores de los comentarios, pero no he conseguido que saque resultados en esta parte. Espero que una vez lanzada la idea, alguien encuentre una DATA para poder identificar a este tipo de usuarios. Si es así, los comentarios están abiertos. (Actualización al final)

Colocando unos pocos condicionales se puede arreglar todo esto... y a eso vamos.

Localizamos las líneas que comprueban si hemos activado que se vean las imágenes en perfiles...

<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

...y se sustituyen por estas otras.

<b:if cond='data:blog.enabledCommentProfileImages'>
<!-- Personalizar avatar -->
<!-- si el autor ha grabado alguna URL -->
<b:if cond='data:comment.authorUrl'>
    <!-- mis propios comentarios -->
    <b:if cond='data:comment.author == &quot;TUNOMBRE&quot;'>
    <span class='avatar-image-container'><img src='URL_IMAGEN_PROPIA'/></span>
    <b:else/>
    <!-- cualquier comentarista con URL -->
<data:comment.authorAvatarImage/>
    </b:if>
<!-- no hay URL  -->
<b:else/>
<!-- anónimo -->
<span class='avatar-image-container'><img src='URL_IMAGEN_ANONIMOS'/></span>
</b:if>
</b:if>

En el propio código y mediante comentarios, podeis ver qué hace cada parte. En negrita, lo que teneis necesariamente que cambiar, vuestro nick, vuestra imagen y la imagen para usuarios anónimos. Si no se desea personalizar el propio avatar, entonces simplemente borrar las líneas marcadas en verde.

Si sois varios autores, al contrario. Habrá que añadir más condicionales para distinguir a las diferentes personas con el suyo propio, aunque personalmente, en este último caso, lo que a mí me parece más práctico es dejar el avatar actual de cada uno para no complicar mucho el código.

Otra cosilla. Si el avatar os parece muy pequeño, se queda pegado al nombre del autor o quereis por ejemplo, colocarle un borde, podeis incorporar las siguientes clases antes del /skin y redactar las propiedades que os gusten.

#comments-block .avatar-image-container {
margin-right:5px;
}

#comments-block .avatar-image-container img {
float: none;
width:35px;
height:35px;
border:1px solid #000000;
}

Ojo con el tamaño, porque si lo haceis muy grande, se puede distorsionar demasiado la imagen.

Actualización: Para que en todos los casos se vea una imagen y no un hueco, es necesaro añadir

#comments-block .avatar-image-container.avatar-stock {
background:url(URL_IMAGEN_RESTO DE CASOS) transparent no-repeat 50% 50%;}

Esa es la clase que controla los avatares para los casos que no se contemplaban en el código facilitado aquí. Al asignar una imagen de fondo, cuando no hay ninguna, se verá la susodicha. Una vez más, la pista nos la dió Vagabundia.

Avatar en comentarios. Restaurar artilugio.

2009-09-19T14:37:00.005+02:00

Una vez más llego un poco tarde, porquer revisando mi lector de feeds que lo tenía algo abandonado, he descubierto que ayer Vagabundia habló de esto mismo. Pero bueno, ya que lo tenía redactado y para los que no sigais mis consejos y no esteis suscritos a ese estupendo blog, ahí va lo que había preparado.

Hace tiempo, los avatares de los comentaristas sólo salían cuando tenías seleccionada la opción de Ventana Emergente. Surgió entonces un código (PurpleMoggy) que solucionaba el asunto y que mostraba los avatares en cualquier caso. Pero por un motivo que desconozco, luego también dejó de funcionar.

Parece ser que Blogger ya lo ha arreglado, pero el problema es que a los que tenemos (bastante) modificada la plantilla, esas actualizaciones no nos han sido cargadas. Esto de que Blogger cambie de cuando en cuando el código que sólo manejan ellos, nos trae de cabeza en estos casos.

Antes de seguir, una nota importante. Los avatares sólo se verán si previamente hemos seleccionado esta opción en Configuración > Comentarios > ¿Mostrar imágenes de perfil en los comentarios? > SI, así que ya le estais dando si vais a continuar con esta modificación.

La solución para volver a tener avatares como Dios manda, aunque drástica, no es muy complicada. El único problema es que perdereis los posibles cambios que en esta parte hubierais hecho hasta ahora, tal como numerar los comentarios, estilos personalizados por autores, efectos especiales en el formato del bloque del comentario, avatares especiales, reubicación de los iconos... Por eso, antes de cambiar nada, copiar el artilugio en un bloc de notas o similar y guardarlo. Después sólo tendreis que volver a incorporar las cosas que os gusten a este nuevo código, de la misma forma que lo hicisteis anteriormente. También podeis hacer directamnte una copia de seguridad de toda la plantilla por si las flies.

Y a lo que vamos... buscamos en nuestra plantilla con artilugios expandidos, el que comienza con <b:includable id='comments' var='post'>. Una vez localizado, habrá que cortar desde ahí hasta </b:includable>, ambos incluidos y sustituir por el código original que ahora proporciona Blogger y que por su extensión hemos puesto plegado en este enlace.

No podreis ver el resultado con Vista Previa porque los comentarios sólo salen en páginas individuales (item. En consecuencia, habrá que Guardar y visualiza una entrada con comentarios para comprobar los cambios.

Ver/Ocultar CODIGO [+/-]

<b:includable id='comments' var='post'>

Actualización: Para los que querais conservar vuestras modificaciones, echad un vistazo a este post de Trucos Geek, porque parece que en la mayoría de casos, no hará falta sustituir todo el código y será suficiente con hacer cambios en un par de líneas.

20blogs.Tras la tempestad...

2009-09-18T17:50:00.008+02:00

Tras la tempestad de los últimos días, la calma. Y lo digo de veras. Esto de participar en un concurso en el que puedes observar la evolución de los resultados minuto a minuto, es realmente agotador.

Recuerdo el año pasado, cuando me presenté por primera vez, cómo con más asiduidad de la que debería, pinchaba en el enlace al concurso para ver como iba. Imaginaos este año en el que los votos sumaban en mi casillero con mucha más frecuencia.

Ver cada nuevo voto te da un yoquesé por las tripas que es indescriptible. Y en esta ocasión que las sensaciones se han multiplicado probablemente por 10, el esfuerzo emotivo ha sido tal que ahora es cuando, después de muchos días, me siento relajado.

De momento los resultados son provisionales, ya que no será hasta el 28 de Septiembre cuando se publique la clasificación definitiva. A partir de ese momento y tras los ajustes que la organización crea necesarios, se confirmarán los ganadores de cada una de las 20 categorías del certamen, el ganador absoluto Mejor blog por votación y los finalistas que optarán al premio del jurado, Mejor blog 2009.

Es un tópico, pero no por eso menos cierto; yo ya he ganado una experiencia inolvidable y un montón de nuevos camaradas con los que compartir este tema tan frío como es el de teclear HTML y similares. Si además detrás viene una guinda (no guindilla) en forma de premio, pues ya está todo dicho.

Una vez más, mis disculpas por el off-topic, pero es que ya empezabais a saliros del tiesto escribiendo comentarios sobre el concurso por entradas que no tenían relación. Ahora ya tendreis un sitio más adecuado donde hacerlo. ¡Y qué coño! ¡Que me moría de ganas por escribir algo al respecto y lo he hecho!

28-09-09 ACTUALIZACION: Ya tenemos clasificaciones definitivas.

Oloblogger

1º puesto en la categoría Ciencia y Tecnología
1º puesto en Mejor Diseño de Blog
3º en el Premio de los Blogueros

GRACIAS A TODOS

...y cómo sé que luego sustituyen la página por la de la edición en curso, unas capturillas de recuerdo:

Plantilla Bloggerbloc

2009-09-16T00:22:00.002+02:00

Ya hacía tiempo que varios me andabais pidiendo la plantilla que este blog venía usando desde sus orígenes hasta hace no mucho. Lo cierto es que muchos de los efectos estaban metidos como gadgets, confusamente repartidos por todo el código y por ese motivo, he tardado un poco en desliar toda la madeja. Retocando y retocando, al final me ha salido un template algo distinto del que estabais acostumbrados a ver, pero creo que conserva la esencia del anterior... o sea, oscura, nada elegante y quizás algo recargada, pero es que no me gusta que todo sea tan del estilo 2.0.

La que os podeis descargar ahora, es una plantilla en condiciones, lista para ser instalada sólo subiendo el archivo .xml correspondiente. Cierto es que tendreis que hacer unos ajustes iniciales, pero esos, además de que se explican en la propia web demostrativa, son bastante fáciles de hacer.

Para cosas mayores, consultar los distintos posts que incluye, porque me he liado tanto que al final he incluido un montón de cacharritos, que sin embargo creo que os pueden venir bien. Si no os gustan, con quitarlos estará arreglado.

El código incluye muchos comentarios para saber qué hacen ciertas partes de código, así como instrucciones para cambiar algunos elementos. Creo que aunque sólo sea por verle las tripas instalándola en un blog de prueba, merece la pena.

Click en la imagen para ampliar

Enlace a la plantilla

Como es mi primer template público, espero que seais caritativos con el autor y sepais perdonar los posibles fallos... que por cierto, espero me comuniqueis.

Para que la nube de etiquetas parezca más una nube

2009-09-13T19:45:00.004+02:00

El otro día anunciábamos que ya se podía colocar una nube de tags, etiquetas o categorías, directamente desde los gadgets de Blogger.

El caso es que después de probarla para uno de mis blogs, el resultado me pareció bastante soso. Vamos, que para eso mejor que se hubieran estado quietos. Sin embargo, (casi) todo es aprovechable y en esta ocasión, con un poco de CSS podemos hacer una chapucilla para que la cosa tenga algo más de salero.

En un principio, se instalan las etiquetas en modo "nube" y todo lo demás lo haremos editando la plantilla y dando formato a las clases de estilo internas que Blogger utiliza para este artilugio y que según nos explicó en su momento Vagabundia, son:

El bloque contenedor: .cloud-label-widget-content
Etiqueta SPAN para los enlaces: .cloud-label-widget-content span
Los cinco tamaños de los enlaces: .label-size-1, .label-size-2, .label-size-3, .label-size-4 a y .label-size-5.

Como viene muy lineal, para hacer la nube un poco más caótica, vamos a hacer flotar todas las etiquetas a la derecha para que se vayan solapando en horizontal, asignaremos un alto de línea menor que las etiquetas más grandes para que se monten un poco en vertical y por último colocaremos distintos márgenes para los distintos tamaños para descentrarlas un poco más. De esta manera, un código de ejemplo podría ser este que reproducimos a continuación. Hay que colocar justo antes del ]]></b:skin>

/* ESTILO NUBE */
.cloud-label-widget-content {
width:100%;
margin:0px auto;
}
.cloud-label-widget-content span {
float:right;
}
.cloud-label-widget-content span a {
line-height:12px;
}
.cloud-label-widget-content span a:hover {
background:#ff0000;
text-decoration:none;
}
.label-size-1 a, .label-size-1 a:link, .label-size-1 a:visited {
font-size:10px;
margin:25px 0px 0px 5px;
color:#ffffff;
}
.label-size-2 a, .label-size-2 a:link, .label-size-2 a:visited {
font-size:14px;
margin:5px 10px 0px 20px;
color:#990000;
}
.label-size-3 a, .label-size-3 a:link, .label-size-3 a:visited {
font-size:18px;
margin:10px 30px 0px 30px;
color:#ffffff;
}
.label-size-4 a, .label-size-4 a:link, .label-size-4 a:visited {
font-size:22px;
margin:0px 20px 0px 10px;
color:#999999;
}
.label-size-5 a, .label-size-5 a:link, .label-size-5 a:visited {
font-size:26px;
margin:0px 0px 0px 5px;
color:#990000;
}

El resultado sería algo así:

Podeis observar que también se han usado distintos colores para las distintas etiquetas y que se han incluido las pseudo clases LINK y VISITED. Esto último es para dos cosas. Una para que no cambie el color del enlace de las etiquetas y la otra para que el puñetero Explorer no le de prioridad al estilo por defecto que tengamos para los enlaces. Por otro lado, el WIDTH se ha colocado intencionadamente para el caso de que se instale en columnas muy anchas o en blogs con pocas etiquetas, (widebar). En ese caso, convendría reducir el porcentaje a una cifra menor para que el artilugio no quedara muy desangelado.

Ahora a jugar con los tamaños, los colores, los fondos para el HOVER o cualquier otro efecto que se os ocurra. El aspecto final también cambia dependiendo de si escogemos que las etiquetas se muestren por FRECUENCIA o por orden ALFABETICO. Los tamaños de letra muy grandes o los LINE-HEIGHT más pequeños, provocan que las letras se monten bastante más, incluso solapándose. Haced pruebas.