Cargando...
Menu Ver sumario
¿Te gustó lo que viste?
Recomiéndanos

Post aleatorio






Splush. Gadget para entradas recientes.

30/09/2009
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.

27/09/2009
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

25/09/2009
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

23/09/2009
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:
  1. Panel de control > Diseño > Seleccionar plantilla nueva
  2. Escoger plantilla MINIMA y Guardar plantilla
  3. Diseño > Elementos de página > Añadir un gadget (HTML/Javascript)
  4. 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

20/09/2009
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.

19/09/2009
Una vez más llego un poco tarde, porque 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'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
&#160;
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
&#160;
<data:post.commentRangeText/>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
&#160;
<data:post.commentRangeText/>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>

</p>
</b:if>

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>


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...

18/09/2009
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

16/09/2009
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

13/09/2009
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.


Etiquetas perdidas Blogger. Cómo funcionan.

10/09/2009
En el programa de ayer de LuzdeGas Radioblog, el Capitán Clostridium, administrador de Circulos Cerrados comentaba un problema que tenía en su espacio: las etiquetas que marcan las categorías de cada post, no salían.

Si os pasa esto, en primer lugar hay que entrar en Elementos de Página, y dentro del bloque de las entradas, pinchar en Editar. A continuación, comprobar que la casilla está seleccionada. Si no era así, la seleccionamos ahora y el problema se debe solucionar. Las demás opciones de ese apartado, se explican con más detalle en "Diseño en Blogger. Configurar entradas."

Luego... no debería haber luego, pero como con esto ya hemos contestado al título del post, vamos a ver un poco más a fondo cómo funciona el código que monta en nuestro blog las etiquetas, por si hubiera problemas mayores o quisiéramos modificar algo.

En concreto, las siguientes líneas son las que forman la cadena de etiquetas al final de cada post. Las encontrais sólo si teneis seleccionado Expandir plantillas de artilugios

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>

Lo que hace esto es lo siguiente:
  • Comprueba si el post tiene etiquetas y si es así sigue ejecutando el código. Si no, termina la tarea y no se hace nada más.
  • A continuación se imprime el nombre que le hayamos dado a las etiquetas (data:postLabelsLabel), en función de lo que hayamos grabado al configurar nuestras entradas. Por defecto sale el texto "ETIQUETAS:"
  • En la siguiente línea comienza un bucle (LOOP) que hará que lo siguiente se repita varias veces, tantas como etiquetas haya en el post en cuestión.
  • Ahora la línea clave, que crea un enlace a la dirección de las páginas de navegación por etiquetas (data:label.url) y muestra como palabra de enlace el nombre de la misma (data:label.name). El condicional que hay aquí mismo sirve sólo para poner una coma después de cada etiqueta, excepto en la última (data:label.isLast).
  • Cierre del bucle
  • Cierre del condicional
Lo habitual es encontrar este código encerrado entre dos tags SPAN, designando su clase: <span class='post-labels'>. Su ubicacion normal es en el pie del post, dentro una de las distintas post-footer-line que suelen existir en las plantillas. En otras ocasiones están en la cabecera de la entrada (post-header).

De aquí se deduce que si queremos cambiar el aspecto de salida, bastará con modificar/crear la clase .post-labels en la parte CSS de la plantilla.

Y sobre el sitio donde colocarlas... el que querais, siempre que esté dentro del post. Necesariamente tiene que estar dentro para que el LOOP funcione bien y muestre las etiquetas que tiene que mostrar.

Una cuestión sobre <data:label.url>. Resulta que esta variable almacenada en Blogger, contiene la dirección a las páginas tipo http://blog.blogspot.com/search/label/Etiqueta que por defecto muestra 20 posts o menos si no hay tantos con esa etiqueta. Si por casualidad quereis mostrar más o menos, hay que sustituir la etiqueta entera por todo esto:

<data:blog.homepageUrl + &quot;search/label/&quot; + data:label.name + &quot;?max-results=500&quot;>

El número 500 mostraría todas esas entradas en la misma página, al navegar por etiquetas. O sea, que mejor lo cambiais por un número más modesto ¡salvo que sea eso lo que precisamente quereis hacer!

Si además le echamos un poco de imaginación, podríamos transformarlas en imágenes, como se explica en Iconos de categorías en cada post, adornarlas con fondos sencillos, con fondos formados por imágenes (por ejemplo simulando etiquetas comunes de papelería), otro tipo de letra, efectos rollover, ponerles unos bordes para encuadrarlas, insertar iconos pequeños delante o detrás de cada una de ellas,...


Luz de Gas RadioBlog

08/09/2009
Actualización 09-09-2009: Al final del post podeis encontrar los ficheros de audio del programa.

Ultimamente casi dedicamos más tiempo a las relaciones públicas que a mantener el blog, pero en fin.

Para los curiosos, mañana miércoles alrededor de las 18:15 podreis oir la dulce vocecita de vuestro blogger favorito... oséase, la de un servidor. Si no podeis oirlo "en directo", Juan Duque, el administrador de LuzdeGas RadioBlog, suele colgar posteriormente el fichero de audio.

¡Cachondos abstenerse de comentar, antes, durante y después! :)

Premios 20 Blogs Programa 11
Miércoles 9 de Septiembre
En directo de 18 a 20 horas
En esta ocasión desde El Rompido - Huelva
Contenido:
  • Pablo Fernández de 20Minutos representante de Premios 20Blogs
  • Olomán presenta a los Premios: "Oloblogger" - "Cosicas de Olomán" (Murcia)
  • Capitán Clostridium presenta a los Premios "Círculos Cerrados por Capitán Clostridium"(Cádiz)
  • Alex Medina y Juan García presenta a los Premios "Que fue de...?" (Santa Cruz de Tenerife)
  • Dani Cortijo presenta a los Premios "Altres Barcelones" (Barcelona)
  • Sección de ayuda blog con Lukas Thywalls. Si necesitas asistencia técnica para tu blog pregúntale pulsando su imagen que está más abajo.
  • Embam no presenta a los Premios: "Embam" (Azpeitia-San Sebastián/Murcia)
  • Maria José Martín presenta a los Premios "Villarochel el rincon mágico" (Zaragoza)
  • Carlos Manuel Barragán presenta a los Premios "Fórmula Joven" (Madrid)



A partir del minuto 18 de la 1ª parte podeis encontrar la entrevista.

1ªParte
2ªParte



Premios Bitacoras 2009

07/09/2009
Todavía sin haber terminado los Premios 20Blogs, hace muy pocas horas ha comenzado otro de los grandes certámenes de la blogosfera. Recién salidito del horno (La casa encendida) desde ya mismo podeis votar a vuestros blogs favoritos en los Premios Bitacoras.com 2009.

Los usuarios podrán nominar sus blogs favoritos entre el 7 de septiembre y el 30 de octubre (3 por categoría). El 14 de noviembre, el jurado hará público el nombre de los ganadores de la quinta edición de los Premios Bitacoras.com, en una ceremonia de entrega que tendrá lugar en Evento Blog España 2009


¿Cómo puedo presentar mi blog?
Para participar sólo es necesario estar registrado en Bitacoras y tener algún blog dado de alta. Todos los blogs que ya formaran anteriormente parte del directorio y los que lo hagan ahora, podrán ser votados.

¿Qué necesito para poder votar?
Sólo es necesario estar registrado en Bitacoras.com. No es necesario tener un blog. La autorización se cursará automáticamente y los votos quedarán asociados a tu cuenta. Ojo porque hay unos límites a los votos.

Y nada, ya voy haciendo autobombo colocando los botoncitos de los blogs que llevo en danza:

Votar en los Premios Bitacoras.comMedio Oficial Premios Bitacorasúltimas noticias
OLOBLOGGER
Blog Software y Seguridad
Votar en los Premios Bitacoras.comMedio Oficial Premios Bitacorasúltimas noticias
COSICAS
Blog Personal/
Blog Cultura






Linkwithin. Entradas relacionadas con imagen.

LinkwithinHay varios truquillos para mostrar las entradas relacionadas con un determinado post, pero este SCRIPT de Linkwithin es muy fácil de instalar, vistoso y eficaz. Además sirve para Blogger, para Wordpress, para Typepad, entre otras plataformas.

Es vistoso porque si la entrada incluye alguna imagen, el enlace se muestra con una miniatura de la misma muy bien cuadrada, por lo que es especialmente recomendable para los que soleis colocar al menos una en cada post. El aspecto es el que podeis ver en la siguiente imagen, a continuación de la frase "Quizás también le interese:"...


Pero lo mejor es su eficacia... Otros artilugios para "entradas relacionadas", funcionan normalmente con las etiquetas de categoría de nuestro feed, por lo que suelen mostrar los más recientes. A nosotros, lo que nos interesa con este tipo de artilugios es que artículos antiguos no caigan del todo en el olvido por estar redactados hace más tiempo, máxime cuando tienen más relación con el post visitado que otros más modernos. LinkWithin usa un algoritmo algo más complejo y analiza todos los mensajes de nuestros blogs, eligiendo los más relevantes. Al menos eso cuentan... Pero escepticismos aparte, lo cierto es que las pruebas que he hecho dan unos resultados muchos mejores que con otros gadgets, lo cual va en beneficio de la navegabilidad por temas y por ende, de nuestros lectores.

* MODO BPT ON
Tras acceder al enlace que facilitamos, tenemos que rellenar un formulario: dirección de correo, dirección del blog, plataforma y la cantidad de artículos relacionados a mostrar (de 3 a 5)

Hay una casilla de verificación para los blogs con letra clara sobre fondo oscuro. Pinchar sólo si estás en ese caso.



Lo que sigue es sólo válido para Blogger, porque no lo he podido probar con otro tipo de blog (no tengo otra plataforma), pero sale una página donde nos indican qué es lo que hay que hacer para instalar automáticamente el artilugio. En primer lugar hay que pulsar el botón Install Widget y con eso se abrirá una nueva ventana ya en Blogger (necesitamos estar logueados previamente). Ahí elegimos el blog dónde queremos instalar el artilugio, cambiamos el título del gadget si lo creemos necesario , pinchamos en Añadir Artilugio y ya tenemos instalado el cacharrito en nuestra barra lateral.
* MODO BPT OFF

En Linkwithin nos recomiendan mover el gadget posteriormente desde la barra lateral a la parte inferior de las entradas. En un principio, si no nos da problemas, lo podemos dejar ahí mismo.

Si preferís hacer una instalación manual, en lugar de pinchar en Añadir Artilugio, simplemente desplegamos Editar Contenido, copiamos el código y añadimos un gadget tipo HTML de la forma habitual, pegando allí el código. Es importante destacar que el código incluye un ID que se genera con los datos grabados incialmente (correo, URL, etc.), distinto para cada blog.

<script>
var linkwithin_site_id = XXXXX; <-- Este el código de tu blog
(function () {
var elem = document.createElement('script');
elem.type = 'text/javascript';
elem.src = 'http://www.linkwithin.com/widget.js?rand=' + Math.random();
document.getElementsByTagName('head')[0].appendChild(elem);
})();
</script>
<a href="http://www.linkwithin.com/"><img alt="Blog Widget by LinkWithin" style="border: 0" src="http://www.linkwithin.com/pixel.png"/></a>

El artilugio se muestra después de que se ha cargado toda la página. En otras ocasiones, tarda un poco en empezar a dar resultados, así que no desespereis si en un primer momento no os funciona. Tampoco os extrañeis si en alguna de las entradas relacionadas no sale imagen. Simplemente será porque el post no tiene ninguna. Si todas las relacionadas se redactaron sin imagen, el gadget cambia de aspecto y se muestra como una lista (UL).

Y dado que todo el artilugio está controlado desde el SCRIPT y que este no lo podemos instalar por nuestra cuenta, ya os anticipo que muy poco podemos hacer para configurar su salida.

Lo primero que sí se puede hacer es reubicar el sitio dónde aparecen los resultados. Por defecto salen en el pie de la entrada y para colocarlos dónde queramos, tendremos que editar la plantilla -expandiendo plantillas de artilugios- y colocar el siguiente código allí dónde queremos que aparezcan:

<div class="linkwithin_div"/> <-- No olvidar la última barra

Y para el final, el cambio quizás más interesante. Si no hacemos nada, las entradas relacionadas saldrán en todos los posts, sea la página inicio, sea una búsqueda por categorías... cuando seguramente lo más deseable es que salgan sólo en las entradas individuales (páginas tipo ITEM). Para solucionarlo vamos a utilizar un condicional.

En este caso, tenemos que copiar entero el artilugio (con nuestra ID), editar nuestra plantilla y colocar con una condición dónde queremos que aparezcan los posts relacionados. Si cómo hemos explicado en primer lugar, hemos metido un DIV clase LINKWITHIN_DIV para reubicar el gadget, no olvideis quitarlo en el caso de que hagais esta segunda modificación. Tampoco olvideis quitar el gadget de la sidebar si ya lo teníais instalado... pero sin perder de vista el código y sobre todo vuestro ID.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
CODIGO ARTILUGIO CON NUESTRO ID
</b:if>


Imágenes rotativas

05/09/2009
Buscando otra cosa, me he encontrado con este script de Dynamic Drive que me ha parecido bastante majo. El código permite mostrar una serie de imágenes dentro de un DIV y que estas vayan pasando automáticamente en horizontal. Cuando pasamos el puntero por encima, las imágenes se detienen. Con él podemos hacer un slideshow casero y lo que es mejor, personalizarlo.

Para instalar este tipo de presentación, sólo se trata de Añadir un gadget y copipastear en él el código que nos facilitan. Luego configuramos cambiando por nuestros propios valores lo que hemos marcado en verde.


Las imágenes tienen que ser de la misma altura para que queden bien, ya que se alinearán a la parte inferior de la más alta. El ancho no es relevante siempre que no sea excesivo.

Para ver cómo se ve sin añadir nada más, pinchad en el primer enlace del post, el de Dynamic Drive ;)


El script por sí mismo ya está bien para presentar imágenes con sus correspondientes enlaces, pero si además le ponemos un fondo, pues ya se pueden conseguir otros efectos más originales.



Para verlo en movimiento, acceder a este ejemplo.

Si quereis hacer algo similar con esta u otra imagen, a continuación el código anterior un pelín adaptado, para que sólo tengais que poner URL's y pixels. Ahora hay unos nuevos parámetros para que pongais la imagen de fondo que querais, pero en cada lugar se indica lo que hay que poner.

Actualización. No sé si ya conoceis a Chacien, pero le molestan mucho las imperfecciones en una web por pequeñas que sean ;). Resulta que en IE, el SCRIPT generaba un extraño salto al final de cada secuencia completa de imágenes y claro, esto no le ha gustado. Para solucionarlo nos propone cambiar el valor la propiedad LEFT de la siguiente línea, de manera que en lugar de ser cero como inicialmente se proponía, sea -1000px. Con ello el salto se soluciona, aunque se generará una pequeña demora en el inicio del carroussel:

write('<div id="test2" style="position:absolute;left:-1000px;top:0px;"></div>')


Construye tu propia tira cómica online

02/09/2009
Seguro que alguna vez hemos dejado de publicar un buen chiste que se nos pasó por la cabeza, simplemente porque no somos muy mañosos para el dibujo.

Esto se ha acabado porque hay muchas páginas que ofrecen herramientas para crear tu propia tira, así que el que no lo haga a partir de ahora es porque no le da la gana.

Monkey Dyne nos ofrece una forma muy sencilla de combinar personajes y texto. Aunque muy limitado, para diálogos de dos personajes resulta suficiente. Estos ya están diseñados y sólo hay que elegir cual ponemos a la izquierda y cual a la derecha. Admite hasta un bocadillo por personaje para cada una de las tres viñetas posibles.


En Witty Comics ya tenemos 48 personajes distintos y 60 fondos para elegir. Posibilidad de cambiar el bocadillo según sea un texto normal, pensamiento, grito o susurro. Personajes dibujados tipo años 70 y otros basados en animales. Previsualización directa.


Strip Generator tiene unos personajes mezcla de la Familia Adams y las Supernenas, pero permite mayor flexibilidad a la hora de crear y colocar los personajes. Con un catálogo aceptable de personajes, objetos y bocadillos, también permite cambiar los tamaños, rotar y la superposición de elementos.


Pixton tiene personajes muy simples prediseñados, que podemos personalizar algo más que en los anteriores casos: tamaño, cabello, color... e incluso cambiar la postura. La escena también es modificable y se pueden añadir objetos.

MakeBeliefsComix. Prácticamente todos los elementos son personalizables. Algo más flexible en cuanto al número de viñetas porque se puede elegir entre 2 y 4. Quince personajes a elegir con variaciones en cuanto a posición y expresión. También incluye la posibilidad de rotar, cambiar tamaño y posicionar libremente.


Pikistrips, aporta una variante que es la de subir las imágenes que quieras. Prácticamente me ha parecido un laboratorio de fotomontaje, pero adaptado al comic. Un montón de parámetros personalizables similares a los de los programas de edición de imágenes, bastantes modelos predefinidos de maquetado de viñetas y los bocadillos, que no podían faltar.

Bitstrips es el más completito, pero en consecuencia, el más complicado. Creo que no es recomendable para un trabajo esporádico, pero es el mejor si vas a hacer tiras con cierta frecuencia. Permite personalizar todos los rasgos de los personajes, así como su complexión, postura o vestimenta. Aunque tienes suficientes prediseñados para poder empezar, puedes crear tus propios personajes y guardarlos en tu librería personal. Muchos fondos, muchos objetos, muchos formatos de tira.

En casi todos los procesos de creación se dispone de un editor básico y de otro avanzado para poder recrearse un poco más.


Suscribirse a: Entradas (Atom)
Recibe por correo las últimas publicaciones.
Teclea tu dirección.


No rights reserved
NINGUN DERECHO RESERVADO
...aunque se agradece un enlace. Si crees que algo aquí vulnera los derechos de otro, mándanos un correo.

El botón que
no hace nada El botón que no hace nada

Ir Arriba