Cómo insertar un “.gif” animado en tu blog

Desde que di vida a este blog, suma de mis pequeñas inmersiones en HTML y de la oportunidad que “Blogger” nos proporciona a todos los que queremos hacer de nuestra voz un eco electrónico, telemático, y/o informático, como prefiráis, mi entrada sobre cómo diantres hacer que nuestro blog sea más atractivo o curioso a la vista gracias a estos bichitos que por extensión tienen un punto seguido de una “g”, una “i”, y una “f” (en otras palabras, Graphics Interchange Format) ocupó el primer puesto de visitas (en mi blog, claro está) desde que a través de un click subió desde mi portátil al hiperespacio electrónico surfeando sin tabla de ídem.

Por ello doy un homenaje a la misma, volviendo a que aparezca ante vosotros, con un aire un poco más renovado. Eso sí, manteniendo la esencia y cada palabra, sin omitir siquiera coma, punto y punto y aparte algunos. Por parte de su contenido, ha adquirido cierto anacronismo, mas como el tiempo es una dimensión más a tener en cuenta (gracias, Sr. Minkowski), ¿por qué no viajar a través de él? Agradeciéndoos como es habitual el tiempo que dedicáis a la lectura de este mi y vuestro blog (y sin querer parecer esto último una solicitud o instancia a vaya usted a saber qué) a continuación la entrada estrella. Adelante:

Creo que no pude escoger mejor título para éste mi blog y el de todos vosotros. “Cajón desastre” (evidente juego de palabras) me permite la libertad de escribir sobre cualquier asunto y en cualquier orden; bien es verdad que, conociéndome, siempre estará presente un cierto orden y concierto; las ideas necesitan del concierto y del orden para que éstas estén bien expresadas. Por mi perfil habréis observado que, además, creé otros dos blogs, “La Magia del Péndulo” y “Tiras cómicas, or comic strips, as you like”; disculpad el retraso en los mismos; aunque intento estirar el tiempo es evidente que hasta ahora no he conseguido llegar al punto de rotura. No obstante, estad alertas, algún día cercano se abrirán paso en esta Web que ahora es llamada semántica, y en ellos compartiré con vosotros dos de mis grandes aficiones: la práctica y teoría de la Radiestesia y el dibujo de tiras cómicas de mi propia creación.

La entrada de esta noche la dedicaré a intentar resolver vuestras dudas sobre cómo lograr que nuestras imágenes animadas en formato .gif, esas en las que hemos invertido horas y horas de nuestro precioso tiempo, puedan ser tratadas como tales en nuestros blogs de Blogger.

Después de muchas vueltas, editar códigos HTML por aquí y por acullá, crear imagen, subir imagen, volver a editar imagen, vaya, resulta que no era eso, bien, probemos lo otro, nada, que no, que por mucho que lo intento, no hay manera, Blogger no trata mi imagen animada como tal, tan solo muestra la primera imagen de la serie. La frustración se incrementa cuando descubro que hay usuarios que sí lo han logrado, simplemente con usar el “gadget” de Blogger “imagen”. Pues no, señores, no hay manera, con otros podrá ser pero con mi .gif “nanay de la China”.

A punto de abrir una caja de turrón que quedó de las Navidades pasadas para aliviar mi pesar y desánimo (menos mal que voy al gimnasio y practico “jogging” los fines de semana), me doy de bruces con un interesantísimo blog que aquí os recomiendo, http://blogger-tricks.blogspot.com/, propiedad de un “bloggero” de cabo a rabo. El blog está escrito en un perfecto y correcto inglés, y para el no avezado en el idioma indicaré los pasos a seguir, si bien, además, nuestro protagonista suele irse por las ramas de la programación, al igual que yo con las de las ideas.

Una vez creado el archivo .gif (menuda perogrullada) haremos lo que a continuación indico esquemáticamente:

1) Abrir una cuenta en Photobucket (es gratuita).	2) Creamos en Photobucket una carpeta, y le daremos nombre.
3) Subimos nuestro archivo .gif a la carpeta creada en Photobucket.	4) Al subirlo, nos pedirá que le demos un nombre, y lo más interesante, podremos asignarle una URL para que apunte adonde queramos.
5) Pinchamos en “select/unselect all” (aparece debajo de nuestro archivo).	6) Accedemos a “Generate HTML and IMG code”.
7) Dentro de la opción, copiamos el contenido de la caja denominada “HTML clickable thumbnails…”	8) Substituimos el contenido de “<a href=” por el de la URL a la que queremos ir cuando pinchemos en nuestro .gif, sin eliminar a partir del comando “target”. De esta forma hacemos que la secuencia busque nuestro archivo en Photobucket, la inserte en nuestro blog creado en Blogger y haga que al pinchar en nuestro archivo vayamos a la página que nosotros queramos.
9) Consejo para el punto anterior: Primero copiar con el ratón el enlace (situarse dentro de la caja y pinchar con el botón izquierdo, después seleccionar copiar con el derecho); segundo, pegarlo en el portapapeles; tercero, editarlo en el portapapeles.	10) Ya editada nuestra URL en HTML, la copiamos y posteriormente la pegamos en el “gadget” de Blogger denominado “HTML/Javascript”, y guardamos. Ya tenemos nuestro archivo .gif, y animado, en nuestro blog.

 
Siguiendo este procedimiento (espero no haber omitido algún paso importante) conseguiremos ver nuestras animaciones en Blogger. La animación que podéis ver debajo de mi perfil fue subida con éxito siguiendo estas indicaciones.

¿Por qué semejante jaleo, si me permitís la expresión? Pues por que Blogger no interpreta correctamente todos los archivos .gif animados que son colgados en este entorno. Y por eso se hace necesario en la mayoría de las ocasiones alojar nuestro archivo en un servidor externo que admita los citados archivos (de todos los que he consultado, escogí Photobucket por su magnífico entorno de trabajo y gratuidad; eso sí, preparaos a ser asaltados por publicidad constante).

Espero haber contribuido con mis palabras a facilitar que vuestros blogs cobren el aspecto que siempre habéis deseado. Por otra parte, os recomiendo que consultéis la ayuda propia de Blogger; está muy bien estructurada y organizada por temas (al fin y al cabo es un producto Google). ¡Ánimo, y a subir vuestros archivos animados!

Escribir una entrada

Abrir una cuenta en un servidor que ofrezca la posibilidad de tener un “blog” en el que poder contar nuestras aficiones, expresar nuestros pensamientos de forma escrita, compartir nuestro día a día con el resto del mundo conectado a la “World Wide Web”, es algo bien sencillo, y que conocéis todos los que tenéis abierta una cuenta, por ejemplo, en “Blogger” (sobra decir que existen más servidores que proporcionan servicios similares, pero permitidme que haga ejemplo de aquél que me permite publicar estas palabras).

Escribir una entrada, sobre todo si ésta se extralimita de los formatos clásicos de líneas y párrafos, es tarea ya algo más complicada, no sólo por el esfuerzo creativo, sino por darle a la misma la apariencia final deseada. Aquí os hablaré del método que he utilizado desde mi primera entrada, o “post”.

¿Qué hacemos cuando queremos escribir un documento? Recurrir a un paquete de ofimática; los hay de pago y gratuitos (en línea), para cualquier procesador y soporte. Y es que no hay nada más cómodo que un buen procesador de textos, a no ser que aún pertenezcamos a ese grupo de incondicionales de la pluma y el tintero, o del humilde bolígrafo de usar y tirar. Ni con la pluma ni el tintero, ni con el humilde bolígrafo podremos publicar nuestros partos mentales en cualquier servidor, por muy grande que sea el empeño. Pero sí con algo parecido a un procesador de textos, uno capaz de reconocer la plantilla de nuestro “blog” y de ponerse en contacto con él cuando sea preciso. Puesto que el sistema operativo de mi unidad es Windows Vista me decidí, desde un primer momento, por el paquete Windows Live.

Windows Live ofrece una amplia oferta de soluciones prácticas para nuestro trabajo diario tanto en “on line” como en “off line”. El que ahora es objeto de nuestro interés es uno de los programas que vienen en ese conjunto, Windows Live Writer. Con esta utilidad podremos crear nuestras entradas sin preocuparnos de las molestas directivas y etiquetas que dan formato a los textos en el lenguaje “HTML”. Windows Live Writer lo hará por nosotros. Y su uso es completamente intuitivo, ya que funciona al igual que cualquier procesador de textos, eso sí, con ciertas limitaciones. Con el citado programa podremos, entre otras acciones:

1. Crear nuestras entradas.
2. Editar las mismas (conservando la misma fecha de creación).
3. Editar el formato.
4. Obtener una vista previa.
5. Asignar categorías y etiquetas.

Windows Live Writer actualizará cada cierto tiempo sus datos con el servidor de nuestro “blog”, si bien podremos hacerlo cuando queramos (es decir, cada vez que modifiquemos nuestra plantilla, recomiendo que actualicemos el programa). Y si guardamos las entradas, tendremos así una copia de seguridad de las mismas en nuestro equipo, dándonos así la oportunidad de editarlas y actualizarlas, conservando su fecha de publicación y posición en el “blog”.

No es ésta una entrada publicitaria; es una entrada consejera, puesto que otros “blogs”, concretamente en los comentarios, es frecuente encontrarse con consultas de cómo conseguir que aparezca esta línea de tal o cual manera, o la mejor manera de publicar entradas con código “HTML”, cosa que se nos simplifica con editores de “blogs” de este tipo.

Jugando con los anchos

Como veis he cambiado la leyenda correspondiente a los comentarios publicados que tras cada “post” suele haber por un icono con el número de los mismos, modelo que además he utilizado para designar a los comentaristas visitantes, es decir, vosotros.

Por esto de los bloques, los anchos, altos, "margins” y “paddings”, “Mozilla Firefox” e “IE” casi se hace tarea imposible acomodar distancias, numerología e iconografía.

La solución más simple que he encontrado ha sido modificar los anchos totales del “blog”, que por otra parte he descubierto que incluso queda más diáfano.

Mi consejo; si decidís realizar tal cambio, probablemente tendréis que hacer lo mismo con los anchos que definen vuestra plantilla.

Cambiar el estilo de nuestros “links”

Como ya sabréis, los “links” vienen definidos en las primeras líneas de código, en la pseudoclase “a”, de esta forma: “a:link/visited/hover/active {propiedad:valor;}”; quedan así de esta manera definidos los estilos para todo nuestro “blog”.

Ahora bien, puede ocurrir –como es el caso de este “menda lerenda”—que queramos modificar el estilo de ciertos vínculos  por razones de diseño; el asunto es sencillo, pero debemos tener cuidado en la escritura del código.

En primer lugar tendremos que decidir la clase donde estarán los vínculos que queramos modificar; llamémosla, por ejemplo, “enlaces” –en mi caso concreto, fue en “.comment-link” donde tuve que realizar las modificaciones oportunas.

Y ahora, el quid de la cuestión:

1. Crearemos las siguientes clases:
1. enlaces:link {propiedad1:valor1;… propiedadn:valorn;}
2. enlaces:visited {ídem}
3. enlaces:hover {ídem}
2. Nuestra clase “enlaces” estará precedida por “#” o por “.”, dependiendo de si queremos asignarla a un elemento o a varios –también seguiremos la sintaxis de la clase a modificar, es decir, si era “#” o “.” por los que venía definida anteriormente.
3. Colocamos la lista de “1.” debajo de la clase a modificar.

Siguiendo esta estructura tendríamos que conseguir nuestros propósitos.

Otros diseñadores apuntan a esta sintaxis:

• “enlaces a:link {propiedad:valor;}”;

en principio esta sintaxis tendría que dar el mismo resultado que la anterior (el literal dentro de las comillas); personalmente la he probado, y no funciona con ciertos navegadores, entre ellos “Mozilla Firefox”. Las sentencias que os escribo al principio al menos funcionan en este navegador y en “IE”.

Una referencia a la entrada anterior. A ver si aparece ese “ángel” que me aclare cómo poder modificar el botón y los “tooltips” del buscador que puede instalarse desde los “widgets” que hay en “Elementos de página”; añado además el conseguir cambio de color en los textos mostrados en el evento “hover”. Comentarios, por favor.

Selectores “ID”

Esta entrada, aunque breve y probablemente de escasa información para los avezados en “CSS”, contiene un concepto fundamental a la hora de crear nuestras hojas de estilo o modificar la plantilla que en su día escogimos como plataforma base para nuestro “blog”: los selectores “ID”.

En el diseño de nuestro código es conveniente separar –y así seguimos la norma—el código “HTML” y el correspondiente a las hojas de estilo “CSS”. ¿Por qué razón? Pues porque, en primer lugar, nos será más sencillo manipular el resultado final de nuestro “blog”; por supuesto esta afirmación se extiende a las más que seguras modificaciones posteriores; y en segundo lugar, para ayudar a que nuestro “blog” sea lo más accesible a cualquier tipo de terminal, incluso navegador.

Para lograrlo, es tarea imprescindible comprender tal concepto, pues una vez dominados nos será muy sencillo incluir cualquier tipo de elemento en nuestro “HTML” y posteriormente cómodamente editado a través de nuestra hoja u hojas de estilos. Pensemos en los “ID” como elementos “bloque”, que podemos colocar a nuestro antojo allí dónde queramos. Usémoslos pues, primero como tales. Una vez definidas las acciones y posición del mismo, es el momento de diseñar nuestra hoja de estilos. Así, si definimos un “ID” como por ejemplo, <… id= ‘mielemento’…> lo llamaremos para su diseño en nuestra hoja de estilos como #mielemento.  Sólo podemos usarlo una vez en nuestro documento. ¡Y mucho cuidado con los caracteres empleados!, pues sólo pueden estar formados por letras, números y guiones. Siempre comenzarán por una letra, y un apunte más: aunque no estoy del todo seguro, aconsejo que no se utilice, por ejemplo, #MiElemento como #mielemento, y viceversa. Es importante conservar la sintaxis; después de todo, estamos construyendo en una “web semántica”.

Este consejo podréis encontrarlo en cualquier publicación sobre “CSS”. En mi caso particular, mis fuentes son “Diseño web con CSS”, de Ralph G. Schulz y “CSS”, de Xavier Colomés Fornós; el primero de Marcombo, y el segundo, de Anaya.

Evento “rollover” válido en “IE” y “Firefox”

Los que hayáis visitado mi “blog”, que como siempre digo, vuestro “blog”, habréis notado una leve evolución en los archivos animados, pasando éstos a inanimados, para después, algunos de ellos pasarlos a “inanimados del todo”. Dentro de breves palabras entenderéis este juego de ídem.

En mi anterior entrada comenté que una buena solución para alojar nuestras imágenes es utilizar el propio alojamiento de “Blogger”, Picasa. Los motivos los encontraréis en ella. Debido a ello, y como este alojamiento “aún no se lleva bien” con los archivos animados, decidí cambiar éstos por otros, mostrando en la medida de lo posible respectivos eventos “rollover”. Mira tú por dónde que en el hipervínculo precedente se encuentra la solución.

Como buen autodidacta que soy –al fin y al cabo, obtuve mi segunda carrera a través de una de las más prestigiosas universidades a distancia, la U.N.E.D.—, decidí ponerme a investigar la mejor manera de conseguir tal efecto con un claro y sencillo “script”. Fácil. “OnMouseOver”, “OnMouseOut”, una “img” por aquí, una “src” por allí, etiquetamos con “a”, una precarga con otro sencillo “script”, y listo. Terminado. Pues no. Ahora vas a ver como queda tu “blog” en “IE” y… ¿qué pasa"? Pues, sencillamente, que no pasa nada. Nada de nada. Tu trabajado y bonito “rollover” invisible para todos aquellos que sean fieles a Bill Gates.

Como podréis leer en otra entrada, veréis que he decidido hacer que este “blog” sea lo más transparente posible, por lo menos para los dos navegadores más difundidos, “Mozilla Firefox” e “IE”. Ignoro cómo se verá en los demás navegadores; entre otras cosas, porque creo que es suficiente para mi trabajo el uso de los citados. No obstante, admitiré sugerencias en todos los sentidos.

Bien, entre los libros que tengo abiertos, uno de ellos, en concreto, sobre diseño “web” con “CSS” –precisamente así reza su título, siendo su autor Ralph G. Schulz—, aconseja, casi en todas sus páginas, ser claro a la hora de escribir nuestro código, fiel a la norma, y siempre pensando en que no todos navegan con los mismos remos y timón. Me parecen unas excelentes directrices (la retórica, es mía).

En ese mismo volumen se observa que esta clase de eventos generalmente no son bien interpretados por “IE”, bien por el lenguaje Java, bien por la “URL” que asignemos a nuestra imagen (ha de ser relativa, si seguimos en el empeño). Pero si conseguimos el objetivo a través de “HTML” y “CSS”, lograremos el éxito. Y es verdad.

Volved al enlace “rollover”; fijaros en lo que dice la enciclopedia “Wikipedia” al respecto. Ahí tenemos la solución. Existe otro interesante “blog” donde se nos aclara aún más el procedimiento, Uninstallme; si con ello no fuera suficiente, tomad nota (puesto que imagino que querréis poner vuestro “rollover” como un “widget”, por ejemplo, en la “sidebar”, el tutorial irá en ese camino):

1. Creamos primero nuestras imágenes en formato, por ejemplo, “.png”
2. Con las dos imágenes (ambas iguales tanto en su ancho como en su alto) vamos a crear otra, que conservará el ancho, pero que observará una altura que será la suma de las dos, es decir, doble; así tendréis una nueva imagen formada por las otras dos, una “encima de la otra”, siendo la superior nuestra imagen “mouseout”, y la inferior, nuestra “mouseover”.
3. Los pasos 1 y 2 son fáciles de conseguir con un programa de edición que trabaje con capas (modificando el lienzo).
4. Subimos nuestra imagen “doble” a nuestro servidor habitual, y copiamos su “URL”.
5. Diseñamos la parte “CSS”, formada por un selector de clase, “span.nombrequequeramos”, y por “span.nombrequequeramos a:hover”; es importante no omitir el selector de etiqueta “a” (que podría hacerse), puesto que si lo hiciésemos “IE” no interpretaría correctamente nuestro código. El porqué de “span”: estamos apuntando al contenido del bloque.
6. Los atributos ancho y alto corresponden al ancho y alto de cada imagen de las que componen nuestra imagen final; por tanto, el valor de “width” será el ancho de una de las imágenes (ambas tienen el mismo); el valor de “height” será la altura de una de las imágenes previas (ambas también con el mismo valor), no la de la imagen final (la suma de ambas).
7. En “hover” veréis que el “top” es el alto pero en negativo; así se consigue superponer la imagen “de abajo” con la “de arriba” –que en realidad ya no son dos, sino una—,  logrando el evento. En realidad no es una “superposición”, sino que desplazamos hacia arriba nuestra imagen “1+1”.
8. Mantened los valores de “display” y “position”; son artimañas pensadas para que IE nos responda como queremos.
9. Y el código “CSS” así formado será:
   1. span.nombrequequeramos {
   2.     width:XXpx;
   3.     height:YYpx;
   4.    overflow:hidden; /*al menos “IE8” lo lee; el valor “hidden” puede dar problemas con alguna versión anterior de “IE” */
   5.     display:block;
   6.     position:relative;
   7. }
   8. span.nombrequequeramos a:hover {
   9.     top:-YYpx;
   10.     position:relative;
   11. }
10. Ahora el código “HTML”:
    1. <span class=’nombrequequeramos’>
    2. <a href=’url de nuestro enlace’>
    3. <img src=’nuestraimagen’ alt=’’ title=’’ border=’’>
    4. </img></a></span>

Os aconsejo poner “title” en la etiqueta “img”, para que “IE” muestre correctamente nuestras leyendas (sino el resultado sería que “IE” presentaría el valor de “alt”). El código “HTML” lo pondremos en “widgets HTML/Java”; el código “CSS” donde queramos, siempre antes de “]]></b:skin>”.

Con este sistema, no hace falta precargar imágenes, puesto que sólo subimos una. Y además, seguimos la norma de edición y diseño de códigos. Ahorramos espacio y tiempo de carga. Un método fácil, económico y elegante. Por cierto, agradeced a “Wikipedia” y al creador de “Uninstallme” la elaboración de este código; yo no he hecho más que entenderlo, modificarlo un poquito, y ver si funciona. Y funciona. Probadlo, y ya me contaréis.

El alojamiento de las imágenes en “Blogger”

En la mayoría de los “blogs” dedicados a guiar nuestros pasos y desastres en el código “HTML” y “CSS” de las plantillas de “Blogger”, o bien en los que, como el presente, ofrecen entradas al efecto, podremos encontrar diversos procedimientos para insertar nuestras imágenes tanto en nuestras entradas o “posts” como en la modificación del diseño de la plantilla que hayamos escogido. En mi caso concreto utilicé para tal tarea un servidor externo (Photobucket), y de hecho fue una buena solución, ya que me permitía colocar en mi plantilla imágenes con cualquier tipo de extensión, incluso en movimiento –como los archiconocidos archivos “.gif” animados—.

Hoy utilizo para tal cometido el alojamiento de Picasa, no por la razón generalizada de que los citados servidores externos, y en concreto los de alojamiento gratuito, a veces se colapsan y no transmiten la información adecuada, mostrando nuestra página el no deseado cuadro con en blanco con una molesta aspa en rojo. Hay otro motivo, y de mayor peso. Existen instituciones, organismos, empresas, que limitan los accesos a Internet de sus respectivos empleados modificando los niveles de seguridad hasta niveles que bordan el paroxismo de la locura por la seguridad y la eficiencia en el trabajo. Los servidores de alojamiento externos gratuitos basan sus ingresos en la publicidad, y ahí es donde radica el problema. Al alojar nuestras imágenes en ellos, y al acceder nuestra cuenta (en este caso en “Blogger”) para rescatar y mostrar las mismas, se descargan, simultáneamente, “cookies” de rastreo y publicitarias, que al ser rechazadas por tales mecanismos de seguridad provoca que, al mismo tiempo, no se visualicen nuestras imágenes. ¡Ojo!, estos servidores son muy útiles, y funcionan muy bien, pero observan estos inconvenientes. Si a esto añadimos que tales organizaciones, organismos, empresas, suelen emplear como navegador el más que archiconocido Internet Explorer, el desastre es total. Nuestro “blog” lleno de cuadros con aspas –que me hacen recordar los gigantes de Don Quijote—y además apareciendo donde no tienen que aparecer. Para evitar estos inconvenientes es recomendable subir nuestras imágenes al alojamiento propio de “Blogger”; eso sí, de momento, olvidémonos de los archivos animados.

¿Cómo los subimos? Muy sencillo:

1. Ingresamos en nuestra cuenta de “Blogger” a través de “Blogger in draft”.
2. Pinchamos en “NUEVA ENTRADA”.
3. Accedemos a “Redactar”. 
4. Carga tu imagen en el icono que parece una foto instantánea.
5. Te saldrá un cuadro de diálogo, donde verás un botón en el que cargar tu imagen. Hazlo, y valida hasta completar el proceso.
6. Bien, ya tienes tu imagen en el servidor de “Blogger”; ahora hay que ajustar unos parámetros si quieres conservar las dimensiones de la misma, ya que “Blogger” las ajusta por defecto a las de sus plantillas.
7. Ahora verás tu imagen en pequeño, y unos botones indicando el tamaño abajo a la izquierda; no les hagas caso, y ve a “Edición de HTML”.
8. En en esta parte “Blogger” te muestra el código “HTML” que le asigna a tu imagen. Verás que le asigna una etiqueta  “div”, otra “a” y otra “img”; deshazte de la etiqueta “a” si no quieres que tu imagen direccione a su alojamiento en Picasa. Y para que la misma conserve sus dimensiones, cambia el atributo “sXXX” a “s00” (“s y dos ceros seguidos”). Copia la “URL” que verás dentro de la etiqueta “img”; pégala donde quieres que se vea tu imagen, y listo, ya tienes tu imagen en el alojamiento de “Blogger”, y lista para ser utilizada tantas veces como quieras.

Si te fijas, verás que “Blogger” te permite titular a tu imagen; esto lo podrás hacer al principio, durante o al final de todo el proceso. No hace falta guardar, “Blogger” ya lo hace por nosotros automáticamente.

Un último apunte; si vas a editar entradas observarás que se ha creado una nueva; esa es la imagen que acabas de subir (por esa razón siempre es conveniente titularlas). Y si en algún momento decides que esa imagen ya ha cumplido bien su trabajo y es la hora de cambiarla, te aconsejo, en primer lugar, que elimines la entrada en, precisamente, “Editar entradas”; después, ingresa en Picasa y accede al álbum de tu “blog”, que se llamará igual que el título que le hayas puesto a tu bitácora ciberespacial. Pinchas en la imagen a eliminar, y accederás a esta pantalla:

Escoge “Editar” en el menú, y después “Eliminar esta foto”. Confirmas y asunto arreglado. Es una buena costumbre eliminar aquellas imágenes que no utilizamos; así ahorramos espacio y mantenemos nuestro álbum curioso y aseado.

Espero que este intento de tutorial os haya ayudado en algo. Y ahora, a aprovechar lo que nos queda de este fin de semana aunque el tiempo no acompañe, que aquí, aún siendo la isla de La Palma, hace frío, viento, y se vislumbra un nubarrón que me da la sensación que dentro de poco aligerará peso.

“Una nueva esperanza”

“A New Hope”, o “Una nueva esperanza”; así es como rezaba el título de la que fue la primera película de la saga “Star Wars”. Todos quedamos impresionados cuando, tras el encabezado en párrafos en fuga hacia el infinito y con fondo soberbio de John Williams, tras una diminuta y desprotegida nave espacial, un majestuoso y terrorífico Destructor Espacial iba detrás de ella en voraz persecución. “Una nueva esperanza”, me dije a mí mismo hace un par de días, cuando descargué en mi ordenador personal la última versión de Internet Explorer. “Una nueva esperanza” que pasó a ser “la venganza de los Microsith”.

Podría decir que prácticamente todo mi periplo por Internet ha estado ligado al navegador de Microsoft. ¿La razón? Pues, tan simple como que el sistema operativo Windows siempre vino con el citado navegador incluido. ¿Cuándo descubrí que había otras naves para escoger? En el mismo instante en que decidí unirme a todos los que mantienen un “blog” en este ancho mar.

¿Por qué unos navegadores interpretan de forma diferente un mismo código, que por otra parte, es el normalizado por la “W3C”?

Hace unos días leí en un blog –desafortunadamente extravié el en enlace y no puedo ahora ofrecéroslo—, que el principal motivo (porque es intencionado) es la competencia. Así, si uno diseña bajo entornos creados por Microsoft, éstos generarán un código que otros navegadores interpretarán inadecuadamente. De la misma manera, si la creación está cimentada en el estándar, Internet Explorer podrá hacer de ella maravillas no deseadas.

En mi corta experiencia “bloguera” podré decir que estos fallos son debidos fundamentalmente a incorrectas interpretaciones de las propiedades “CSS”, y de ciertos archivos gráficos. como los acabados en la extensión “.png”.

Afortunadamente, la nueva versión de Internet Explorer interpreta estos últimos correctamente, si bien sigue dando quebraderos de cabeza con las directivas “CSS”.

Puesto que yo no soy quién para decir a nadie que utilice un navegador u otro, he decidido:

1. No mostrar ningún mensaje alertando del navegador utilizado.
2. Intentar, en la medida de lo posible, que este “blog” sea aceptablemente visible, sea cual sea el navegador de turno.

Aún así, os digo que la única forma de ver correctamente este “blog” es, por el momento, usando Mozilla Firefox. No obstante, cuando los ratos libres me lo permitan, iré modificando el código para el gusto de todos –por supuesto, aceptaré de buen grado vuestros consejos para corregir los defectos que encontréis—.

No quiero terminar este “post” sin antes agradecer la ayuda indirecta recibida por “blogs” tan interesantes como El Escaparate de Rosa, Vagabundia, Oloblogger, Gem@ Blog, El balcón de Jaime y Blogger Tips and Tricks. Sin ellos –mis disculpas por los omitidos—, no es que hubiera sido imposible, pero sí más dificultosa mi entrada en este mundo. Prometo, con el tiempo, insertar un “widget” en el que poner vuestros enlaces; algo probablemente innecesario por vuestra fama consolidada en la “blogesfera”, sin duda alguna por vuestro buen hacer, pero sí para mostrar mi agradecimiento de manera distinta y no tan difusa como la de una humilde entrada, como la presente.

Nuevas secciones se irán abriendo, así como creciendo. Buen sábado a todos.

“Al andar se hace camino…”

Hacía tiempo que no publicaba párrafo alguno, ni siquiera una solitaria y desangelada línea. Motivos tuve, y así permítanme que los utilice como excusa de mi falta.

Este universo, si es que es correcta la nominalización, es un intrincado laberinto que, una vez que entras en él, elimina o difumina tu recuerdo del camino de salida, camino que una vez fue el de entrada –tremenda paradoja—;  Teseo también habría sufrido el “mal del cibernauta”.

Y es que si es usted un inconformista como el que subscribe, no tendrá suficiente con utilizar las magníficas herramientas que Blogger pone a nuestra disposición, para nuestro provecho y disfrute; irá más allá, y pretenderá que lo que está arriba aparezca abajo, y que el centro se difumine en la derecha o en la izquierda. No intente buscar ironía alguna en estas últimas palabras, más bien una metáfora de los sudores que todo aquel editor de “blogs” infectado del virus HTML desprende por su frente y manos, delante de su ordenador, en la soledad de la “red de redes”.

En resumen; que he conseguido –eso espero—el quid del “blog” que tiene ahora usted entre sus teclados. Aún faltan elementos, pero pienso que he dado con la senda o camino adecuados, al igual que el poeta, que sabiamente nos enseñó, que no hay caminos, “sino estelas en la mar”.

Progresivamente iré compartiendo con todos vosotros –ahora sí cambio el registro por aquel de cortesía propio de la “web” semántica—los cambios que he realizado (espero que sean de vuestro agrado) y los que seguro desarrollaré. Gracias por vuestra infinita paciencia. Y un agradecimiento más: quiero corresponder de forma individualizada a Rosa María; hace un excelente e interesante trabajo de divulgación. Visitad su “blog”, merece la pena.

Cómo crear un icono para nuestro “feed”

Siempre es reconfortante, y motivo de felicidad, el que un amigo te llame, o te escriba. Igual sensación provoca el ver cómo tu “blog” es visitado; no podría comenzar esta entrada de otra manera, y agradecer con amplia sonrisa a mis dos nuevos y “feedelizados” (como filólogo, me apunto la autoría del término) lectores el que lo sean; espero que con el tiempo mi contador crezca, bien geométricamente, o aún mejor, exponencialmente.

Y de los agradecimientos, pasemos al tema en cuestión. Si nos ponemos a buscar, o a navegar (siguiendo a los puristas de la red), entre los miles y miles de “blogs” que pululan por la web, encontraremos que todos buscan, de forma más o menos acertada, la manera de que el lector “de paso” pase a ser uno “de parada y fonda”, fidelizado, o “feedelizado”. La sindicación está de moda. Y como el diseño también lo está, nos vamos a encontrar con otros tantos (no tantos pero casi) iconos destinados a que seamos seguidores a tal o cual bitácora. No es de extrañar, pues la oferta de páginas creadas como almacenes de iconos e imágenes pueblan por doquier. Pero claro, ¿que ocurre cuando, como yo, queremos que nuestro “blog” sea lo más personalizado posible? Una buen camino (de hecho, el mejor) de conseguirlo es empezar con crear nuestro propio icono “feed”. Y a continuación, el cuerpo principal del texto.

Manos a la obra. Bien, la figurita que en su día se dibujó para convertirse en la puerta a un “feed” está formada de otras cuatro, a saber: un cuadrado con las puntas redondeadas en color naranja, un pequeño círculo blanco, y dos rectángulos curvados también de color blanco. Hasta el círculo, todo bien; los problemas comienzan con los dichosos “rectángulos curvados”. “¡Dios santo! ¿Y cómo los pinto?”, es lo que me pregunté cuando me puse a la tarea. “¡Ah, ya está!”, me dije con voz sonora. “No tengo más que pintar un cuarto de círculo, luego, los superpongo, sumo la forma restante, y…”, y después de un intento tras otro no conseguía más que tonterías, una detrás de otra. Estaba bloqueado con conseguir esas tiras curvadas.

“¡Gráficos vectoriales!”; la solución a mis quebraderos de cabeza tendría que ver con los susodichos. Así que, ni corto ni perezoso, me puse de lleno con el grafismo vectorial y ayudado con el programa Inkscape, potente editor de gráficos vectoriales, de código abierto; aún así, el proceso requería tiempo, y mucha paciencia (aclaro para el que la tenga, que aquí está una de las soluciones al embrollo, y el programa lo recomiendo de todas todas).

Pero tenía que encontrar una forma más eficiente, pues efectiva lo era la comentada en el párrafo anterior. Y entre mis búsquedas, topé con un tutorial dedicado a Photoshop, de excelente edición y explicaciones detalladas y claras; eso sí, está en inglés, pero hoy en día, si uno quiere desenvolverse con soltura en la WWW debe, al menos, comprender un texto en el idioma “anglosajónnormandolatino”. Podréis decirme que acabo de acudir a uno de los editores gráficos que precisamente no están al alcance de todos los bolsillos. Cierto. Y si así lo hago es porque precisamente tampoco figura entre mis programas del menú de inicio. El magnífico programa de Adobe es, además, sólo recomendable para aquellos profesionales del sector gráfico. Pero existe una variante, Photoshop Elements, que ya va por la versión 7 (yo trabajo con la anterior, número 6), y que es una excelente opción para todos aquellos que , como yo, queremos óptimos resultados gráficos y a un coste razonable.

Volvamos a los “rectangulitos”. En el tutorial del párrafo anterior se nos enseña a crear nuestro icono y empleando un carácter muy conocido, el del “copyright” (©). La solución es tan simple como ingeniosa. Al estar éste creado como gráfico vectorial lo podemos manipular a nuestro antojo, y si os fijáis, rotando y cortando debidamente, ¿qué obtenemos? ¡Exacto! Nuestros dos famosos “rectángulos circulares”. No os daré más pistas, porque el proceso resulta de lo más aleccionador. Un detalle; tened en cuenta que (al menos con mi versión de Photoshop Elements) para conseguir que la capa de diseño muestre nuestro carácter, antes hay que seleccionar un área con la herramienta de selección. Omito decir (y con esto no pretendo seguir los apostolados de Epiménides) que es necesario un mínimo conocimiento del diseño con capas.

¡Venga, vamos a ver quién consigue el logo más llamativo!; pues originales y creativos los serán todos.

Decorando nuestro blog

En primer lugar, tengo que expresar mi agradecimiento a todos los “bloggeros” que sin atender al dichoso secuaz del Dios del Tiempo, o en otras palabras, nuestro querido amigo el reloj, pasan (seguro) horas, horas y más horas delante de las pantallas de sus respectivos ordenadores en pos de dar con el truco del almendruco para mejorar las bitácoras que, día tras día, inundan esa maraña que ahora comienza a llamarse “Web 3.0”. Yo, al menos de momento, no me incluyo en esa lista; sí en aquélla constituida por aprendices y novatos de la programación en HTML y en XHTML. Y por infantil que pueda parecer cada uno de mis logros, uno por uno será manifestado en esta sección, que espero que con ayuda del tiempo crezca y crezca, tanto en cantidad como en calidad.

Si ahora mismo estás leyendo estas líneas, en primer lugar, gracias por tu tiempo; y si así es, habrás observado un, permíteme el calificativo, gracioso dibujito que se repite a lo largo de la columna. Decirte que soy el padre de la criatura, y como por aquél entonces este “menda lerenda” que aquí te escribe aún no disponía de tarjeta gráfica (ahora, aunque modesta, sí), me dispuse (cambio la persona) de rotulador negro de punta ni muy fina ni muy gruesa, papel vegetal, y unas buenas dosis de paciencia en un marco de creatividad. Y es que como resulta que disfruto dibujando tiras cómicas (que pronto comenzaré a subir) pues también pasé un buen rato dando a luz a este simpático trazo. Una vez terminado, lo convertí mediante el escáner a un formato que estos cachivaches pudieran entender. El tipo de archivo que me ofreció el mejor resultado fue el .png, tanto por tamaño final como por su, como dicen por estos lares, “peso”.

Ya tenemos el archivo. Ahora, la pregunta de siempre: ¿Cómo (omito la consabida interjección) hacemos ahora para subir el (ahora omito cierto calificativo) archivo de marras? Pues muy simple. Primero, date de alta en un sitio web como Photobucket (hay más dónde escoger, como podrás imaginar; si lo aconsejo no es por publicidad, sino porque es el que utilizo, y francamente, me va bien). Segundo; una vez tenemos nuestro archivo en el servidor de imágenes, copiamos la URL y pegamos la dirección a la que apuntará Blogger donde queramos que nuestro dibujo, imagen, icono aparezca; en mi caso en la línea “background” y después de la definición del color de fondo. Con el atributo “repeat” logramos que aparezca en toda la página, bien en una línea (“repeat-x”) bien en la columna donde ves mi pequeño “Cajón desastre” (“repeat-y”). Y, ¿ves qué fácil?

Un último agradecimiento, vaya, dos; el primero para ti, querido lector, por dedicar tu tiempo en este mi, nuestro blog. Y el segundo para el equipo de Blogger, por desarrollar un entorno en el que nuestra imaginación pueda tener su lugar de expresión, ya sea mediante la palabra, ya sea mediante el diseño.