Al estilo de las que habitualmente aparecen en prensa, ciertas imágenes ilustrativas de una entrada, pueden necesitar un texto con algún tipo de información que se muestre fuera del flujo del texto principal, acompañando directamente la imagen.

Para conseguir esto, crearemos un bloque mediante un DIV que flotará dónde nos interese y dentro de ese bloque, pondremos la imagen y el texto.

De esta manera, sólo nos tendremos que preocupar de posicionar el DIV donde queremos, porque todo lo que lleve dentro formará un bloque compacto que se situará en esa posición.

Y después de la teoría, la práctica... Una vez redactado nuestro texto principal y desde Edición de HTML, empezamos a insertar este código allá dónde queremos que aparezca la imagen. En primer lugar creamos un bloque alineado al centro o flotando con respecto al texto principal. Esto sólo dependerá de nuestro gusto estético o del tamaño de la imagen.


Ahora, dentro de este bloque, insertaremos la imagen y el texto. Como se ha dicho, no es necesaria ninguna etiqueta STYLE en este segundo paso, ya que los atributos del DIV serán los que prevalezcan al estar la imagen y el texto anidados dentro de él. A lo sumo, podemos incluir un display:block; en la imagen, para ahorrarnos un salto de línea tras el texto. Lo vemos para un bloque flotando a la derecha, tal y como se ha colocado la caricatura de Kikelin.


A partir de aquí ya podemos añadir un enlace al texto, a la imagen o incluso dar formato a cualquiera de ellos. Por ejemplo, podemos hacer más pequeño el texto del pie de imagen o colocar un borde a la idem.


Nota: En el anterior ejemplo se han introducido saltos de línea entre etiquetas para que se aprecie más fácilmente el anidamiento de estas, pero lo correcto sería redactarlo en una sola línea.



Actualización: Nos comentan que los textos largos van ampliando el DIV en lugar de irse adaptando al mismo. Esto es porque en el código de esta entrada no se ha indicado ancho alguno para dichos bloques. Para el caso de textos largos, conviene añadir a la etiqueta STYLE un atributo WIDTH con los pixeles de ancho que queremos que ocupe el bloque.

El grunge es un movimiento nacido a finales de los 80, con un representante muy conocido: Kurt Cobain, el malogrado vocal de Nirvana.

Al igual que cuando se habla de otros movimientos sociales, es difícil definir con exactitud qué es grunge y qué es otra cosa, pero si hay una característica común, quizás sea el gusto por lo sucio, roto y, en general, el rechazo a lo convencional.

La estética en cuanto a grupo social, se correspondería con vaqueros con agujeros, camisetas de propaganda rotas, camisas de cuadros desgastadas, jerseys viejos, deshilachados, zapatillas Converse (de imitación), pelo largo, despeinado...

Si todo esto lo trasladamos a una web, nos encontraríamos con líneas irregulares, no definidas, elementos asimétricos, desestructurados, sobrepuestos a otros y sobre todo, aspecto viejo o sucio y textos simulando la escritura manual o los graffiti.

Como una imagen vale más que...








La estética 2.0 es casi todo lo contrario: fondo blanco con líneas casi invisibles o inexistentes para delimitar cajas, texturas muy suaves, con líneas diagonales, fuente Georgia, Helvética o similar, bordes redondeados, links sin subrayado, comillas gigantes, contenido centrado, ancho fijo, imágenes cristal, 3D,...

Como le tengo un poco de manía a esa estética y además últimamente he confirmado mis sospechas de que podía pertenecer a la Generación X, voy a proponeros unos cuantos enlaces para aquellos que quieran poner un toque grunge a sus páginas. La mayoría son en inglés, pero como se trata principalmente de imágenes, no creo que haya problema. Desgraciadamente, hay pocas recopilaciones para blogger.

• Estilo grunge en el diseño de webs. Smashing Magazine.
• 100 fuentes grunge. Hongkiat.
• 23 plantillas grunge para Wordpress. Designm.ag.
• plantillas grunge para Blogger. BTemplates
• Skings grunge. BlogSkins
• Grungy, plantilla para Blogger. Blogmundi.
• Iconos RSS estilo grunge. Customize.org
• Iconos grunge. Dryicons.
• Texturas grunge. Grunge textures.

Como decíamos ayer, la plantilla Aspire tienes algunos pequeños inconvenientes. Ahora nos vamos a ocupar de la desaparición de las líneas laterales que rodean los artilugios de las sidebars.

Para crear el formato de pergamino de estos gadgets, el código incluye una imagen de fondo para la cabecera y otra para el resto del contenido. Con la primera no existe ningún problema, pero en el caso de contenidos muy largos, la imagen de fondo de la parte inferior, a pesar de tener una longitud más que suficiente para el 90% de los casos, se queda corta para algunos contenidos muy extensos.

Ese fondo está alineado a la parte inferior de cada artilugio (bottom), así que cuando la longitud del gadget supera la longitud de la imagen, la imagen de fondo no llega a cubrir todo el artilugio. El resultado es que en la parte superior del contenido, no son visibles las líneas que deberían rodear el mismo. (Ver imagen de ejemplo).

Esto se podría solucionar acortando la imagen del pie y creando un tercer ID para la parte central, sólo con las líneas. Lo que ocurre es que habría que modificar manualmente todos los códigos de todos los gadgets y, además, acordarnos de modificar todos aquellos que fuéramos incorporando nuevos.

Dicho esto, vamos a hacer una chapuza que es lo nuestro y con una modificación mínima, intentaremos solucionar de una forma digna el problema. Para ello, simplemente vamos a incluir unas líneas de borde, que se superpondrán a la imagen de fondo antes mencionada. Estas líneas estarán en toda la longitud del contenido del artilugio. En todo excepto en el título).

Dónde haya imagen no se notarán porque serán del mismo color, pero dónde no llegue la imagen, si que se apreciarán, consiguiendo el resultado deseado.

Y después de todo este rollo, aquí está el código a buscar y en negro, los atributos que hay que añadir. Con Vista Previa podeis decidir si os convence o no la solución.

Aspire es una plantilla con mucha aceptación pero que tiene diversos problemillas en su diseño. Desde Mango Street, echan de menos el lapicero que sirve para editar desde la vista normal del blog, las entradas ya publicadas.

Aunque parece que el artilugio correspondiente no está, la realidad es que sí. El problema es que incluye un código (#160) que no es visible y que no nos permite acceder a la edición. De esta manera, la solución es bastante fácil y simplemente se de trata de sustituir dicho código por una imagen.

Acudimos a nuestra pestaña de Diseño, Edición de HTML y con artilugios expandidos, buscamos esto:


En negro se ha marcado la línea en cuestión. Hay que sustituirla por la que se marca a continuación y que incluye la imagen original que Blogger coloca por defecto en sus plantillas.


Un problema menos.

En ocasiones es interesante indicar al usuario de una página web, que esta está en proceso de carga. Recuerdo especialmente el ejemplo del script Lightwindow. Se trataba de un fichero que tardaba un poco en cargarse y cualquier intento de utilizarlo antes de estar completamente en la caché, provocaba que no funcionara.


Si queremos advertir de que algo está todavía pendiente de cargar en nuestro espacio, tendremos que colocar un aviso (texto y/o imagen) justo después de la etiqueta <BODY>, para que sea lo primero que se ejecute. Pero, una vez cargada la página, lo más normal será que deseemos quitar dicho aviso. Para ello, vamos a incorporar también, una función que oculta el mensaje una vez cargada la página. Esa función será llamada desde la propia etiqueta <BODY>.

El código, por tanto, debería quedar más o menos así:


Podemos modificar la imagen o el texto y el aspecto del bloque cómo queramos, modificando los valores CSS de la etiqueta STYLE.

Nos queda crear el pequeño SCRIPT para esconder el DIV, para lo cual insertaremos este código antes del </head>:


Puede que en vez de un aviso, prefirais poner cualquier otra cosa que entretenga a vuestros lectores. Todo lo que querais lo podeis colocar dentro del DIV llamado aquí "aviso".

Pero usad un poco el sentido común porque con las ADSL actuales, la cosa no se verá durante mucho tiempo y tampoco es cuestión de que pongais cosas como esta...

Con Widgetbox, es muy sencillo crear un pequeño (o gran) artilugio asociado a tu feed, dónde mostrar de manera automatizada, un resumen de tus últimas entradas.

Es servicio es antiguo, pero el resultado sigue siendo igual de profesional. Requiere registro pero eso no debería ser un obstáculo a estas alturas.

Su utilización es muy sencilla, pero para los usuarios BPT, ahí va un mini-tutorial.

Accedemos a http://www.widgetbox.com/ y pinchamos en JOIN NOW para registrarnos. Se abre una ventana emergente dónde escribiremos nuestro nick, password, correo electrónico. Aceptamos los términos de uso y pinchamos en SIGN UP. Ya tenemos nuestra cuenta en marcha porque no es necesario confirmar desde el correo ni nada parecido.


Arriba a la derecha tenemos un botón verde (MAKE A WIDGET) desde dónde accedemos al lugar donde empezar a crear nuestro artilugio.

En la nueva ventana seleccionamos BLOG/FEED y en el recuadro que se mostrará, tecleamos la dirección de nuestro feed. Si no lo conoceis, simplemente pinchar en vuestro blog en cualquier artilugio de feed que tengais instalado o incluso en la leyenda "Enviar comentarios (Atom)" que aparece por defecto en todas las plantillas Blogger y la página que se muestra es precisamente un intérprete de FEED. En la barra de direcciones teneis vuestra dirección. Copypasteo al canto.


Pinchamos en CONTINUAR y ya podemos previsualizar nuestro cacharrito. Ahora toca configurarlo a nuestro gusto.

En primer lugar escogemos entre ver una tira vertical de contenido con scroll o una presentación semi-automática. Al ir pinchando en las opciones, podreis ver como quedaría cada una. También podeis escoger si mostrar sólo un resumen de texto (summaries), imágenes o ambos.

En el cuadro 2 (Design look & feel) seleccionamos entre tamaño estrecho, ancho o uno propio. A continuación los colores y aspecto del fondo así como del título. En este se puede poner el título en texto, una imagen y, otra vez, ambos. También podeis escoger la alineación.


El último cuadro (3) sirve para incluir (o no) vuestro widget en la galería de Widgetbox, de manera que quede disponible para otros usuarios que quisieran incorporarlo a su blog (con vuestro feed, claro).

SAVE BLIDGET y aceptar los términos de uso (de nuevo) para terminar.

Cerramos la publi :) y en GET WIDGET conseguimos el código para pegar en nuestro blog. Lo normal será que lo incorporeis como un nuevo ELEMENTO DE PAGINA, tipo HTML en vuestra sidebar.

En la pestaña MY WIDGETBOX de la página principal, tendreis acceso a los artilugios creados por vosotros para en cualquier momento volverlos a modificar, aunque si lo grabais en la galería de WIDGEBOX estará disponible para cualquiera sólo con buscarlo.

Un poco farragoso quizás, pero perfectamente visible en todos los navegadores y sin necesidad de crear, almacenar y utilizar diversas imágenes.

El truco está en crear líneas de 1px de altura (2 y 3 en las zonas menos pronunciadas) que van disminuyendo su anchura progresivamente. Las líneas así construidas, se apilan y en sus extremos simulan una esquina redondeada. Para construir las líneas de distinto tamaño, utilizamos 9 bloques (DIV) aplicando márgenes distintos.



Este sería el código CSS a instalar antes de ]]></b:skin>


Ahora para formar la caja en cualquier post o artilugio, lo hacemos de la siguiente manera:



Como decía al principio, quizás un poco farragoso, pero con ir copiando y pegando el código necesario allá dónde lo necesitemos, la cosa se simplifica bastante. Hay que tener en cuenta que blogger mete saltos de línea entre DIV's si estos se redactan dentro de un post, tal y como se muestran aquí. En ese caso, basta con escribir el código todo seguido (sin retornos de carro).

A primeros de año, Espineli tuvo la iniciativa de ofrecer sin contraprestación alguna, enlaces en su blog a través de la publicación de faviconos. En un principio, parecía que la idea estaba siendo muy bien acogida, ya que además de recibir numerosas solicitudes, otros bloggers pusieron campañas similares en marcha ofreciendo espacios similares en sus respectivos blogs. El Escaparate, incluso echó una manita en la promoción de esa idea.

Pensaba que este sistema sería bueno para todos (enlazazantes y enlazados) y que muchos secundarían lo de la faviconera:

• para los blogs poco conocidos o con poca relevancia para Google (entiéndaseme bien... para Google), sería una forma fácil de darse a conocer. Además, seguro que conseguirían algún que otro enlace a su favor. En la mayoría de los casos, no era obligatorio un enlace recíproco, pero la amabilidad que suele caracterizar a la mayoría de bloggers, hacía muy propenso el mismo.
• como con cualquier otro directorio o red social, el intercambio de comentarios solicitando la inclusión, favorecía conocer nuevos sitios. También se prestaba a realizar una entrada explicando la propia inciativa, haciendo referencia a otras similares.
• el gadget incluso requería menos espacio que los enlaces de texto o los tradiciones botones de cualquier blogroll, mientras que su formato variable, permitía colocarlo en cualquier lugar de la web.
• tampoco era difícil encontrar sitios donde fabricar rápidamente tu favicon.
• para algunos blogs "más importantes", también resultaba una manera sencilla de aumentar sus enlaces entrantes y visitas.
• la mayoría de sitios para colocar tu favicon preexistentes, eran de pago.
  

... pero parece que me equivoqué.

Sorprendentemente -al menos para mí-, he comprobado que tras un trimestre completo, pocos sitios han instalado la susodicha faviconera. Realmente no sé qué puede haber pasado para que este invento no se extendiera más. Si como pienso lo de los faviconos reunía a priori muchas ventajas para todos ¿por qué no ha terminado de cuajar? Los misterios de internet son inescrutables, sobre todo en cuanto a averiguar a priori cual es una idea que puede tener éxito y cual no.

En fin, como me sigue gustando el formato, pondré mi granito de arena publicando la relación de los intrépidos faviconeros para ver si alguien más se anima tanto a rellenar los espacios aún vacíos, como a crear su propia faviconera. ¡Y allá voy a inscribirme en todos!

Iremos actualizando los microbanners según vayamos conociendo nuevos espacios.