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.

La paciencia es una virtud

La paciencia es una virtud; mis lectores tienen paciencia (y desde luego la tienen, teniendo en cuenta la frecuencia de mis entradas). Por lo tanto, mis lectores son virtuosos. Amañado silogismo que no pretende nada más que daros las gracias; estoy dando los últimos primeros toques necesarios para dejar el blog agradable para mi forma de ser. Por descontado que, con el tiempo, irá cambiando, y así tiene que ser, pues nada hay en esta vida que sea inmune a la transformación.

Un último apunte –más que apunte, consejo—. No ocultéis la barra de navegación de “Blogger”. Gracias al equipo “bloggeriano” podemos disfrutar de un espacio gratuito y con enormes posibilidades (como algunos pisos cuando vas de “house hunting”) de desarrollar nuestros conocimientos, sentido artístico y buena letra. Reconozco que al principio caí en la tentación, pero con el tiempo –léase transformación—, reconocí el error, y lo subsané. No encuentro mejor forma de apoyar a “Blogger” que dejar bien visible la susodicha, o referida. Un abrazo.

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

Ortografía de la lengua española: un comienzo

“TRITUR NUSUCUCA GARVER SIAL URTUTITO RARITRE GULO FUSO LA CARTA ROSA TE TRACE HA HE HI HO HU”

“DIJOLE EN CLASE CON MOFA SAL SEL SIL SOL NENINA NOMAL LLA LLE LLO LLU PRAPREPRIPRO PAR PER POR OL PA POL DE CALCUR”

Este galimatías que acaba de leer, ni es un acertijo basado en los números de Leonardo de Pisa (más conocido como Fibonacci), ni es un fragmento de texto de una variante diacrónica del castellano; es la “chuleta” que nos ayudará a recordar si tal o cual palabra va escrita con la letra “b” o con la “v”.

Recuerdo con cierta nostalgia el día en que tales palabras me fueron mostradas por primera vez. Fue un comandante, en aquel entonces, de la Guardia Civil quien, en una tarde de otoño, y sin mediar palabra, tomó una tiza con su mano derecha, y con firmeza y soltura, escribió, en la vacía pizarra, la letanía que puede que ya conociera usted; en caso contrario, hagamos de este día no un día sino una tarde, tarde de otoño.

Era yo en aquel entonces (redundancia admitida) un aspirante a la Escuela Naval Militar. Y no sé si por fortuna o por la falta de misma que ahora soy Ingeniero Técnico Industrial y Filólogo en lengua inglesa, con un doctorado en curso; creo que mi comandante lamentó, en aquel entonces (anáfora inevitable), que mi condición de aspirante se quedara en, precisamente, aspirante. Sin embargo, intuyo, que si algún día lee estas líneas, al menos esbozará una sonrisa de satisfacción al ver que sus enseñanzas son parte de mi actual existencia.

¿Por qué abrir una categoría dedicada a la ortografía? Porque considero que, más hoy que ayer, es preciso divulgar las normas de ortografía y el buen uso del lenguaje. No acudiré a estructuras asentadas de enseñanza; seguiré la filosofía del título de este “blog”, y seré fiel a un “desastre” organizado y equilibrado, en la medida de lo posible, pues uno también es humano, y como dice la locución latina, errare humanum est.

¿Cómo aplicar la muleta del encabezamiento? Sencillo. El primer párrafo corresponde a la “b”; el segundo, a la “v”. Desmenuce en sílabas los mismos, y tendrá que detrás de las mismas tendrá que venir, bien la “b”, bien la “v”. ¡Ojo!, que hay excepciones. No digamos ahora *sabia (por “savia”) o *tribial.

Recomendación: leer mucho y bien, y acudir, de vez en cuando — más de “de vez” que de “en cuando”—  al magnífico manual de D. Luis Miranda Podadera (en mi poder, la 41ª edición de su “Ortografía práctica de la lengua española”, de Editorial Hernando).

En el próximo “post”, más.