¿Cómo se comunican los ordenadores? o La impresora caprichosa
REFERENCIAS:Colores nevados
Optimizar el blog para que nos encuentren |
"Cuando se sienta frente a su equipo informático y realiza una búsqueda en Google, obtiene de forma prácticamente instantánea una lista de resultados de la Web. ¿Qué sistemas utiliza Google para encontrar páginas web que coincidan con su consulta y para determinar el orden de los resultados de búsqueda?"
Así comienza una página de ayuda de las Herramientas para Desarrolladores de Google y tal vez, pueda servir como introducción para responder una pregunta que me formulan una y otra vez: ¿Cómo hacer que mi sitio sea conocido? Y si digo introducción es porque hasta ahí podemos llegar, es lo que podemos "controlar" y el resto, como en cualquier orden de la vida, dependerá de miles de casualidades.
Que nuestro sitio aparezca en los buscadores es lo elemental ¿En que posición de los resultados? En la mejor posible, de eso, se encargan las técnicas SEO y la Divina Providencia.
¿Por qué es importante? Porque la fuente de tráfico principal de un sitio son los motores de búsqueda:
Así comienza una página de ayuda de las Herramientas para Desarrolladores de Google y tal vez, pueda servir como introducción para responder una pregunta que me formulan una y otra vez: ¿Cómo hacer que mi sitio sea conocido? Y si digo introducción es porque hasta ahí podemos llegar, es lo que podemos "controlar" y el resto, como en cualquier orden de la vida, dependerá de miles de casualidades.
Que nuestro sitio aparezca en los buscadores es lo elemental ¿En que posición de los resultados? En la mejor posible, de eso, se encargan las técnicas SEO y la Divina Providencia.
¿Por qué es importante? Porque la fuente de tráfico principal de un sitio son los motores de búsqueda:
- Google 74%
- Directo 16%
- Referral 7%
- Otros 3%
Claro que visitas y lectores no es lo mismo. Si analizan las estadísticas notarán que si bien la mayor cantidad de visitas es la que poviene de los buscadores, también es la más volatil, la que menos páginas mira y la que dura menos. Es lógico y hay que tener muy en claro lo que nos interesa ya que el "exito" es una definición muy subjetiva que no depende de números.
Sea como sea, los buscadores son "la vidriera" que nos permite tener cierta presencia, sin ellos, las cosas se harían muy complicadas. Entonces, el punto elemental es ¿conocen los buscaores la existencia del sitio? ¿pueden encontrarlo? ¿cómo lo hacen? Es lo que llaman Rastreo. Los buscadores recorren la web y mediane el uso de ciertos programas (robots, arañas, spiders, como quieran llamarse) leen, toman nota de lo que encuentran y lo añaden a sus índices. Cada vez que encuentran un enlace dentro de un sitio, lo guardan para ampliar la búsqueda y visitarlo luego. En teoría, salvo en una red cerrada, partiendo de una sola página, podrían llegar a recorrer toda la web.
Esto quiere decir que esos robots nos visitan cada cierto tiempo ¿cuántas veces? ¿lo hacen regularmente con todos los sitios? No, en realidad, visitan más seguido ciertos sitios que otros, sobre todo, si se dan cuenta que son sitios que se modifican con cierta asiduidad o que tienen cierta relevancia ¿Si tengo Adsense o alguna publicidad similar, Google lo tendra en cuenta? La respuesta es NO, sería un soborno y en principio, los buscadores son independientes.
El segundo punto es la Indexación, es decir, la forma en que se guarda y ordenar la información del rastreo. Es el punto clave y hay que tener claro que lo único que leen los buscadores es texto. Aunque últimamente han ampliado esa posibilidad, deberíamos basarnos en esa premisa, todo lo que no es texto es ignorado y eso significa que el contenido es lo único relevante, que los scripts son ignorados y que las etiquetas que usamos son muy importantes. Parámetros como title y alt en las imágenes, el uso adecuado de los encabezados (h1 h2 h3 h4 h5 h6) que no son sólo un tamaño de letra. El título de las entradas, la descripción del sitio. Todo es importante pero, como cualquier otra cosa que hagamos, siempre hay detalles que pueden mejorarse y ninguno genera resultados mágicos.
¿Y cómo hacer que un sitio tenga una buena posición en las páginas de resultados? ¿Qué significa esto? Es obvio que si alguien hace una búsqueda de algo, y recibe cincuenta páginas con "respuestas", es mejor estar entre las primera que entre las últimas. Esa posición es lo que llaman relevancia, es decir, de alguna manera, las páginas se analizan y se ordenan "de mayor a menor".
Google dice que esas relevancia se determina a partir de más de 200 factores pero sólo uno de ellos es el PageRank. Sabemos, por experiencia propia que a veces, esos resultados suelen ser raros. Escribes un artículo original y el primero que aparece es una referencia a ese artículo publicado en otro sitio. Pasa seguido, muy poco podemos hacer al respecto y aunque garantizan que siempre trabajan para perfeccionar la detección de la página con el contenido original, da la impresión que aún tienen mucho camino que recorrer.
En la práctica, los pasos para dar a conocer nuestro sitio a los buscadores son sencillos:
Sea como sea, los buscadores son "la vidriera" que nos permite tener cierta presencia, sin ellos, las cosas se harían muy complicadas. Entonces, el punto elemental es ¿conocen los buscaores la existencia del sitio? ¿pueden encontrarlo? ¿cómo lo hacen? Es lo que llaman Rastreo. Los buscadores recorren la web y mediane el uso de ciertos programas (robots, arañas, spiders, como quieran llamarse) leen, toman nota de lo que encuentran y lo añaden a sus índices. Cada vez que encuentran un enlace dentro de un sitio, lo guardan para ampliar la búsqueda y visitarlo luego. En teoría, salvo en una red cerrada, partiendo de una sola página, podrían llegar a recorrer toda la web.
Esto quiere decir que esos robots nos visitan cada cierto tiempo ¿cuántas veces? ¿lo hacen regularmente con todos los sitios? No, en realidad, visitan más seguido ciertos sitios que otros, sobre todo, si se dan cuenta que son sitios que se modifican con cierta asiduidad o que tienen cierta relevancia ¿Si tengo Adsense o alguna publicidad similar, Google lo tendra en cuenta? La respuesta es NO, sería un soborno y en principio, los buscadores son independientes.
El segundo punto es la Indexación, es decir, la forma en que se guarda y ordenar la información del rastreo. Es el punto clave y hay que tener claro que lo único que leen los buscadores es texto. Aunque últimamente han ampliado esa posibilidad, deberíamos basarnos en esa premisa, todo lo que no es texto es ignorado y eso significa que el contenido es lo único relevante, que los scripts son ignorados y que las etiquetas que usamos son muy importantes. Parámetros como title y alt en las imágenes, el uso adecuado de los encabezados (h1 h2 h3 h4 h5 h6) que no son sólo un tamaño de letra. El título de las entradas, la descripción del sitio. Todo es importante pero, como cualquier otra cosa que hagamos, siempre hay detalles que pueden mejorarse y ninguno genera resultados mágicos.
¿Y cómo hacer que un sitio tenga una buena posición en las páginas de resultados? ¿Qué significa esto? Es obvio que si alguien hace una búsqueda de algo, y recibe cincuenta páginas con "respuestas", es mejor estar entre las primera que entre las últimas. Esa posición es lo que llaman relevancia, es decir, de alguna manera, las páginas se analizan y se ordenan "de mayor a menor".
Google dice que esas relevancia se determina a partir de más de 200 factores pero sólo uno de ellos es el PageRank. Sabemos, por experiencia propia que a veces, esos resultados suelen ser raros. Escribes un artículo original y el primero que aparece es una referencia a ese artículo publicado en otro sitio. Pasa seguido, muy poco podemos hacer al respecto y aunque garantizan que siempre trabajan para perfeccionar la detección de la página con el contenido original, da la impresión que aún tienen mucho camino que recorrer.
En la práctica, los pasos para dar a conocer nuestro sitio a los buscadores son sencillos:
- enviar el sitio a Google http://www.google.es/addurl.html o en Blogger, marcar la opción SI en ¿Deseas añadir tu blog a nuestras listas? y ¿Deseas permitir que los motores de búsqueda encuentren tu blog?
- enviar un sitemap que ayudará a reconocer la estructura del sitio
Las recomendaciones sobre el diseño y el contenido también ayudan:
- usar enlaces de texto claros y lo más simple posibles
- evitar la sobreabundancia de enlaces internos y privilegiar sólo los que se consideran relevantes
- si una página contiene más de cien enlaces deberia dividirse en varias
- el contenido debe tener información útil
- pensar qué palabras podría introducir un usuario para localizar esas páginas e incluir esas palabras en el sitio
- utilizar texto en lugar de imágenes para mostrar nombres, contenido o enlaces importantes
- eliminar los enlaces obsoletos
- corregir el código HTML incorrecto
- saber que, en principio, JavaScript, frames, DHTML y Flash no son indexados
Las imágenes que usamos no sólo son decorativas, pueden ser un elemento muy importante así que se recomienda utilizar nombres de archivo informativos y detallados, nada de nombres crípticos. Por ejemplo:
IMG00023.jpg no es un buen nombre
gatito.jpg es más adecuado
gatito-jugando-playa.jpg es casi ideal sobre todo si le agregamos alt a la etiqueta:
IMG00023.jpg no es un buen nombre
gatito.jpg es más adecuado
gatito-jugando-playa.jpg es casi ideal sobre todo si le agregamos alt a la etiqueta:
<img src="gatito-jugando-playa.JPG" alt="gatito jugando en la playa de Ipanema" />
Como todo, esto debe hacerse sin abusar porque el uso excesivo de palabras clave se considera una infracción que es penada.
"La página en la que se encuentra una imagen y el contenido que la rodea (incluidos los títulos y los pies de foto) ofrecen a los motores de búsqueda una información importante sobre el tema de la imagen. Por ejemplo, si incluye una fotografía de un oso polar en una página sobre cultivo de tomates de cosecha propia, estará transmitiendo un mensaje confuso a los motores de búsqueda sobre el tema del archivo osopolar.jpg."
Por útimo, las recomendaciones sobre calidad tienen algunos puntos que vale la pena pensar:
"La página en la que se encuentra una imagen y el contenido que la rodea (incluidos los títulos y los pies de foto) ofrecen a los motores de búsqueda una información importante sobre el tema de la imagen. Por ejemplo, si incluye una fotografía de un oso polar en una página sobre cultivo de tomates de cosecha propia, estará transmitiendo un mensaje confuso a los motores de búsqueda sobre el tema del archivo osopolar.jpg."
Por útimo, las recomendaciones sobre calidad tienen algunos puntos que vale la pena pensar:
- cree páginas para los usuarios, no para los motores de búsqueda
- no engañe a los usuarios de su sitio ni muestre a los motores de búsqueda un contenido distinto del que ofrece a los usuarios
- no participe en esquemas de enlaces destinados a mejorar la posición de su sitio o a manipular los resultados del algoritmo PageRank en su favor
- evite los enlaces a spam o "sitios indeseables"
- no utilice técnicas de redireccionamiento engañoso
- no cree varias páginas, subdominios o dominios que presenten básicamente contenido duplicado
- no cree páginas de comportamiento malicioso, como páginas de suplantación de identidad (phishing) o páginas que instalen virus, troyanos u otro tipo de software malicioso
- proporcione contenido único y relevante que ofrezca a los usuarios una razón para visitar el sitio
REFERENCIAS:Optimización de motores de búsqueda: Mejor posición para su sitio en las búsquedas 
Los sitemaps de Blogger y sus errores |
Hace unos días, me preguntaban en un comentario respecto a un error que habían advertido en los sitemaps de Blogger enviados a través de las Herramientas para Desarrolladores de Google. Verifiqué los mios y no vi problemas, respondí entonces que lo mejor era reenviarlos porque se trata de feeds así que tal vez, un pequeño error provoca esas advertencias; no es algo fuera de lo común y normalmente, no tiene mayor trascendencia.
Un par de dias después, es Alejandro quien tiene la misma inquietud, los sitemaps muestran una advertencia y además, indican que las URLs indexadas en cada uno de ellos es 22 y no las aproximadamente 500 que son las indicadas:
Un par de dias después, es Alejandro quien tiene la misma inquietud, los sitemaps muestran una advertencia y además, indican que las URLs indexadas en cada uno de ellos es 22 y no las aproximadamente 500 que son las indicadas:atom.xml?redirect=false&start-index=1&max-results=500
Vuelvo a fijarme y, efectivamente, la advertencia existe en algunos de ellos:
Código XML no válido en la Etiqueta principal: author
No se ha reconocido esta etiqueta. Soluciónelo y vuelva a enviar la información.
Como en principio, sólo es una advertencia y por lo tanto no debería tener importancia ni podemos corregir el error, el proceso normal es reenviarlo o esperar. Eso hice y por lo general, la respuesta es rápida pero en este caso no, todos los reenviados permanecieron como pendientes durante varios dias; los otros no tenían problemas; de todas maneras de 2500 páginas indexadas, ahora se mostraban 1500. No es poca cosa.
Tal como lo dice el post de SpamLoco
, intentamos varias combinaciones cambiando parámetros a ver si alguno funcionaba. Incluso lo hice en un blog de pruebas y el resultado era siempre el mismo: nada.
Hoy ya veo que lo que me muestra es que todos los sitemaps indican error y todos reconocen sólo 24 páginas así que la cantidad de URLs indexadas ha pasado a ser 120. Mucha diferencia.
Código XML no válido en la Etiqueta principal: author
No se ha reconocido esta etiqueta. Soluciónelo y vuelva a enviar la información.
Como en principio, sólo es una advertencia y por lo tanto no debería tener importancia ni podemos corregir el error, el proceso normal es reenviarlo o esperar. Eso hice y por lo general, la respuesta es rápida pero en este caso no, todos los reenviados permanecieron como pendientes durante varios dias; los otros no tenían problemas; de todas maneras de 2500 páginas indexadas, ahora se mostraban 1500. No es poca cosa.
Tal como lo dice el post de SpamLoco
, intentamos varias combinaciones cambiando parámetros a ver si alguno funcionaba. Incluso lo hice en un blog de pruebas y el resultado era siempre el mismo: nada.Hoy ya veo que lo que me muestra es que todos los sitemaps indican error y todos reconocen sólo 24 páginas así que la cantidad de URLs indexadas ha pasado a ser 120. Mucha diferencia.
Click para ampliar.
Las respuestas de Google son curiosas. Hay muchas quejas y ambiguedades. Comenzaron minimizando el problema y terminaron reconociéndolo pero, curiosamente, dicen que "no afecta la indexación" y se limitan a contarnos que trabajan en algún metodo para "ocultar" el error, es decir, no corregirlo, taparlo ya que todos sabemos que lo que no se ve, no existe.
Es cierto, la advertencia en si misma sólo es una molestia aunque no debería haber errores, sobre todo porque estamos hablando de la misma empresa que imagino yo, coordina los cambios para no afectar a los usuarios. Sin embargo, nada dicen de esa baja en la cantidad de páginas indexadas. Peor aún, en una respuesta, un empleado dice que no vale la pena enviar sitemaps en Blogger porque el sistema se encarga de hacerlo:
"If your site is hosted on Blogger, you don't need to submit a Sitemap file at all. This is all done automatically for you, so you can either ignore those errors or just remove the Sitemap file from your Webmaster Tools account."
Gracioso porque cualquier blog creado en Blogger y que tenga los feeds habilitados se integra de manera automática a las Herramientas de Google e incluye un sitemap.
Es cierto, la advertencia en si misma sólo es una molestia aunque no debería haber errores, sobre todo porque estamos hablando de la misma empresa que imagino yo, coordina los cambios para no afectar a los usuarios. Sin embargo, nada dicen de esa baja en la cantidad de páginas indexadas. Peor aún, en una respuesta, un empleado dice que no vale la pena enviar sitemaps en Blogger porque el sistema se encarga de hacerlo:
"If your site is hosted on Blogger, you don't need to submit a Sitemap file at all. This is all done automatically for you, so you can either ignore those errors or just remove the Sitemap file from your Webmaster Tools account."
Gracioso porque cualquier blog creado en Blogger y que tenga los feeds habilitados se integra de manera automática a las Herramientas de Google e incluye un sitemap.
Click para ampliar.
Moraleja: sólo resta esperar a menos que a alguien se le ocurra una solución milagrosa.
REFERENCIAS:SpamLoco
Insertar MP3s con facilidad |
Cualquier tipo de código HTML puede ser escrito utilizando JavaScript. Esta posibilidad es muy útil cuando se trata de códigos repetidos o engorrosos como lo son los reproductores de video o de audio que, por lo general, son siempre iguales ý sólo cambia un dato, el archivo a reproducir.
Así como era posible crear un script para insertar videos de YouTube con una instrucción sencilla, también podemos hacerlo con un reproductor de audio como el DewPlayer.
¿Qué necesitamos? Alojar el reproductor (un archivo SWF) en un servidor, por ejemplo en una cuenta de ImageShack y agregar este código en nuestra plantilla, antes de </head>:
Así como era posible crear un script para insertar videos de YouTube con una instrucción sencilla, también podemos hacerlo con un reproductor de audio como el DewPlayer.
¿Qué necesitamos? Alojar el reproductor (un archivo SWF) en un servidor, por ejemplo en una cuenta de ImageShack y agregar este código en nuestra plantilla, antes de </head>:
<script type='text/javascript'>
//<![CDATA[
function escribir_MP3(archivo) {
var output = "<object type=\"application/x-shockwave-flash\" data=\"URL_dewplayermulti.swf?mp3=" + archivo + "\" height=\"20\" width=\"240\">";
output += "<param name=\"movie\" value=\"URL_dewplayermulti.swf?mp3=" + archivo + "\"></object>";
document.write (output);
}
//]]>
</script>Donde debemos reemplazar URL_dewplayermulti.swf por la dirección URL de nuestro archivo.
¿Cómo lo usamos? Escribiendo una llamada al script donde quisiéramos que se mostrara:
¿Cómo lo usamos? Escribiendo una llamada al script donde quisiéramos que se mostrara:
<script type='text/javascript'>escribir_MP3("URL_archivo");</script>
Ilusiones opticas |
Las miniaturas de Blogger |
Cuando subimos una imagen a Blogger, el proceso es sencillo pero a veces, desconcertante, sobre todo si queremos hacer alguna clase de modificación en la imagen o se nos ocurre intentar algo distinto de las cosas que ya están predefinidas. De todas las cosas extrañas, el tamaño de la imagen subida es la que más confusión crea ya que sólo hay tres alternativas:
Tamaño de la imagen:
Pequeñas
Medio
Grandes
¿Que significan esas opciones? Así, en abstracto, parecerían no significar nada porque algo es grande o chico si tenemos otra cosa con que compararlo y aquí, no hay nada. Tampoco significa que si la imagen es "grande" debamos usar esa opción y si es "pequeña" la otra; en realidad, mientras la imagen no pese mas de 8MB, da lo mismo si elegimos una opción u otra, la imagen original se guardará tal y como es, aunque no nos demos cuenta.
Al subir una imagen, Blogger crea una serie de miniaturas de manera automática y son esas las que normalmente usamos; al definir Pequeñas/Medio/Grandes estamos decidiendo cuál de esas miniaturas vamos a usar y eso es lo que nos muestra el código HTML.
Supongamos que yo tengo una imagen que mide 617x423 pixeles, la subo a y elijo Medio y Centrar; el código generado dirá algo así:
Tamaño de la imagen:
Pequeñas
Medio
Grandes
¿Que significan esas opciones? Así, en abstracto, parecerían no significar nada porque algo es grande o chico si tenemos otra cosa con que compararlo y aquí, no hay nada. Tampoco significa que si la imagen es "grande" debamos usar esa opción y si es "pequeña" la otra; en realidad, mientras la imagen no pese mas de 8MB, da lo mismo si elegimos una opción u otra, la imagen original se guardará tal y como es, aunque no nos demos cuenta.
Al subir una imagen, Blogger crea una serie de miniaturas de manera automática y son esas las que normalmente usamos; al definir Pequeñas/Medio/Grandes estamos decidiendo cuál de esas miniaturas vamos a usar y eso es lo que nos muestra el código HTML.
Supongamos que yo tengo una imagen que mide 617x423 pixeles, la subo a y elijo Medio y Centrar; el código generado dirá algo así:
<a href="http:// ....... /s1600-h/miImagen.jpg">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 219px;" src="http:// ....... /s320/miImagen.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_XXXXXXXXXX" />
</a>
Lo primero que tenemos que saber es que lo único que nos interesa es la etiqueta IMG, el enlace no importa. Allí, en esa etiqueta hay dos datos claves en el parámetro style:
width: 320px; height: 219px;
es decir, la imagen, se mostrará de ese tamaño, de 320x219, no es la imagen subida, es una miniatura; usando Grande, pasaría algo similar, sólo cambiarían los valores, el valor de width diría 400px y si usara la opción Pequeña diría 200px.
Ah, bueno, entonces, para ver la imagen real deberé cambiar ese valor y poner width:617px ... no; eso no funcionará, veremos la imagen de ese tamaño pero no será la original, seguirá siendo la misma pero redimensionada y por lo tanto, se verá mal (pixelada): Ver/Ocultar un ejemplo [+]
width: 320px; height: 219px;
es decir, la imagen, se mostrará de ese tamaño, de 320x219, no es la imagen subida, es una miniatura; usando Grande, pasaría algo similar, sólo cambiarían los valores, el valor de width diría 400px y si usara la opción Pequeña diría 200px.
Ah, bueno, entonces, para ver la imagen real deberé cambiar ese valor y poner width:617px ... no; eso no funcionará, veremos la imagen de ese tamaño pero no será la original, seguirá siendo la misma pero redimensionada y por lo tanto, se verá mal (pixelada): Ver/Ocultar un ejemplo [+]
El problema es que sin importar la parte de style, la URL de la imagen es la miniatura y eso está indicado por el directorio donde está guardada; es lo que vemos justo antes del nombre:
htp://......./s320/miImagen.jpg"
Ese dato define la miniatura a usar:
dirá s200 si elegimos Pequeña
dirá s320 si elegimos Medio
dirá s400 si elegimos Grande
Sólo cambiar ese dato tampoco servirá de nada porque style seguirá influyendo, veremos las distintas miniaturas, todas redimensionadas así que tendrán el mismo tamaño. Ver/Ocultar el ejemplo [+]
htp://......./s320/miImagen.jpg"
Ese dato define la miniatura a usar:
dirá s200 si elegimos Pequeña
dirá s320 si elegimos Medio
dirá s400 si elegimos Grande
Sólo cambiar ese dato tampoco servirá de nada porque style seguirá influyendo, veremos las distintas miniaturas, todas redimensionadas así que tendrán el mismo tamaño. Ver/Ocultar el ejemplo [+]
Si cambiamos la miniatura también debemos cambiar las propiedades width y height o eliminarlas. Ver/Ocultar el ejemplo [+]
Es importante entender que lo que hace Blogger es limitar el tamaño pero no necesariamente el ancho, eso depende de la imagen, si es apaisada (más ancha que alta) el tamaño máximo lo define width pero si no lo es (es más alta que ancha), el máximo lo define height. Por ejemplo, al insertar una imagen de 533x800 se generará este código:
<img
style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 213px; height: 320px;"
src="http:// ....... /s320/miImagen.jpg"
border="0"
alt=""id="BLOGGER_PHOTO_ID_XXXXXXXXXX" />
Las miniaturas generadas por las opciones por defecto tendrán un tamaño máximo en alguno de sus sentidos (ancho o alto) pero ¿dónde está la imagen original? ¿podemos usarla? Si nuestro blog está en un dominio de blogspot.com, podemos usarla con facilidad, si está en un dominio propio, no porque hay restricciones que limitan su uso.
Como el resto de las miniaturas, la imagen original se encuentra en un directorio especial o mejor dicho, en varios: s00, s000 o s1600. Todos ellos contienen la imagen real, la que nosotros hemos subido y pueden usarse con el mismo criterio anterior, eliminando width y height del style y cambiando el directorio:
http:// ....... /s00/miImagen.jpg
Esta es la imagen original de 617x423 y esta otra la de 533x800.
Como el resto de las miniaturas, la imagen original se encuentra en un directorio especial o mejor dicho, en varios: s00, s000 o s1600. Todos ellos contienen la imagen real, la que nosotros hemos subido y pueden usarse con el mismo criterio anterior, eliminando width y height del style y cambiando el directorio:
http:// ....... /s00/miImagen.jpg
Esta es la imagen original de 617x423 y esta otra la de 533x800.
El hecho que Blogger cree esas miniaturas es útil ya que con una sola imagen, tenemos cuatro variantes a nuestra disposición ¿No habrá más? Pués la verdad si y ahí las cosas se vuelven interesantes.
Subo otra imagen, esta vez de 596x596. No importa el método porque lo único que voy a usar es la URL de la etiqueta IMG así que ya dispongo de cuatro:
http: ....... /s00/demoIMGs_01.jpg la original de 596x596
http: ....... /s200/demoIMGs_01.jpg una miniatura de 200x200
http: ....... /s320/demoIMGs_01.jpg una miniatura de 320x300
http: ....... /s400/demoIMGs_01.jpg una miniatura de 400x400
Pero si juego un poco y pruebo otros directorios, me encuentro con que todos estos también funcionan y para verlos, uso una imagen mayor, la de 533x800:
s220 mostrará la imagen como miniatura de 220x220
s640 mostrará la imagen como miniatura de 426x640
s720 mostrará la imagen como miniatura de 480x720
s800 mostrará la imagen como miniatura de 533x800 que es la original
Pero también es interesante que nos muestra miniaturas mucho más chicas lo que es útil para generar galerías:
s32 son miniaturas de 32 pixeles
s48 son miniaturas de 48 pixeles
s64 son miniaturas de 64 pixeles
s128 son miniaturas de 128 pixeles
s150 son miniaturas de 150 pixeles
Y Plethoras comenta que ha encontrado más así que seguimos ampliando la lista de posibilidades:
s72 | s94 | s104 | s110 | s144 | s160 | s288 | s512 | s576 | s912 | s1024 | s1152 | s1280 | s1440
Subo otra imagen, esta vez de 596x596. No importa el método porque lo único que voy a usar es la URL de la etiqueta IMG así que ya dispongo de cuatro:
http: ....... /s00/demoIMGs_01.jpg la original de 596x596
http: ....... /s200/demoIMGs_01.jpg una miniatura de 200x200
http: ....... /s320/demoIMGs_01.jpg una miniatura de 320x300
http: ....... /s400/demoIMGs_01.jpg una miniatura de 400x400
Pero si juego un poco y pruebo otros directorios, me encuentro con que todos estos también funcionan y para verlos, uso una imagen mayor, la de 533x800:
s220 mostrará la imagen como miniatura de 220x220
s640 mostrará la imagen como miniatura de 426x640
s720 mostrará la imagen como miniatura de 480x720
s800 mostrará la imagen como miniatura de 533x800 que es la original
Pero también es interesante que nos muestra miniaturas mucho más chicas lo que es útil para generar galerías:
s32 son miniaturas de 32 pixeles
s48 son miniaturas de 48 pixeles
s64 son miniaturas de 64 pixeles
s128 son miniaturas de 128 pixeles
s150 son miniaturas de 150 pixeles
Y Plethoras comenta que ha encontrado más así que seguimos ampliando la lista de posibilidades:
s72 | s94 | s104 | s110 | s144 | s160 | s288 | s512 | s576 | s912 | s1024 | s1152 | s1280 | s1440
| s32 | s48 | s64 | s128 | s150 | s00 |
 |  |  |  |  | 596x596 |
 |  |  |  |  | 501x750 |
 |  |  |  |  | 450x609 |
 |  |  |  |  | 533x800 |
 |  |  |  |  | 617x423 |
Tooltips con efecto fade |
Fading JavaScript Tooltips es un pequeño script que permite crear esos pequeños cuadros de textos informativos que se ven cuando colocamos el puntero del ratón sobre un enlace (tooltips). Su característica principal es que es muy lviana y no depende de otras librerías así que puede usarse en cualquier página web.
Una vez que descargamos el ZIP
veremos una serie de archivos incluyendo el demo. De todos ellos, el único necesario es script.js que podemos alojar en un servidor o bien agregarlo de manera directa en la plantilla con una única condición, DEBE estar al final de nuestra página así que lo colocamos antes de </body>:
Una vez que descargamos el ZIP
veremos una serie de archivos incluyendo el demo. De todos ellos, el único necesario es script.js que podemos alojar en un servidor o bien agregarlo de manera directa en la plantilla con una única condición, DEBE estar al final de nuestra página así que lo colocamos antes de </body>:<script type='text/javascript' src='URL_script.js'></script>o bien:
<script type='text/javascript'>
//<![CDATA[
aqui copiamos y pegamos el contenido del archivo
//]]>
</script>¿Cómo lo vamos a usar? Indicando los textos que queremos que sirvan como "lanzadores" mediante etiquetas SPAN:
<span class="hotspot" onmouseover="tooltip.show('lo que queremos mostrar');" onmouseout="tooltip.hide();"> un texto </span>Es decir, colocamos en tooltip.show() una cadena de texto de cualquier tipo que, puede incluir código HTML aunque para esto, deberemos cambiar los caracteres prohibidos:
en lugar de < escribimos <
en lugar de > escribimos >
por ejemplo:
en lugar de < escribimos <
en lugar de > escribimos >
por ejemplo:
<span class="hotspot" onmouseover="tooltip.show('Blablabla <b>negrita</b> blablaba');" onmouseout="tooltip.hide();"> un texto </span>y no sólo es texto lo que puede colocarse, también s posible usar una imagen; por ejemplo:
<span class="hotspot" onmouseover="tooltip.show('<img src=\'URL_imagen\'/>');" onmouseout="tooltip.hide();"> un texto </span>Para este tipo de cosas, donde el HTML a colocar es complejo, sólo debemos prestar atención a las comillas e indicarle al navegador que ciertos caracteres deben tomarse de manera literal, para eso, les anteponemos una barra invertida:
'<img src=\'URL_imagen\'/>'
Las comillas de incio y fin son parte del código y las internas son literales.
Lo que faltaría agregar es el CSS que es fundamental para que esto funcione. Lo agregamos antes de </b:skin>. Aunque hay un archivo llamado style.css en el demo que puede usarse de base, podemos cambiarlo. Por ejemplo, en el demo, se usan tres imágenes para darle forma redondeada al tooltip (tt_left.gif, tt_top.gif, tt_bottom.gif) si quieren usarse, deben ser alojadas en algún sitio y cambiar las URLs.
En estos ejemplos no estoy usando imágenes así que el estilo se reduce a dos definiciones:
Lo que faltaría agregar es el CSS que es fundamental para que esto funcione. Lo agregamos antes de </b:skin>. Aunque hay un archivo llamado style.css en el demo que puede usarse de base, podemos cambiarlo. Por ejemplo, en el demo, se usan tres imágenes para darle forma redondeada al tooltip (tt_left.gif, tt_top.gif, tt_bottom.gif) si quieren usarse, deben ser alojadas en algún sitio y cambiar las URLs.
En estos ejemplos no estoy usando imágenes así que el estilo se reduce a dos definiciones:
.hotspot { /* es el texto que sirve de lanzador */
color: #94D5FD;
cursor: pointer;
font-weight: bold;
font-family: tahoma;
font-size: 13px;
}
#tt { /* es el contenido del tooltip y el único obligatorio */
background: CornflowerBlue;
color: #FFF;
display: block;
font-family: Arial;
font-size: 16px;
padding: 5px 10px;
position: absolute;
-moz-border-radius: 10px;
}
/* los otros tres bloques son optativos y tiene sentido usarlos sólo si le colocamos un fondo con imágenes */
#tttop { /* la parte superior */ }
#ttcont { /* la parte central */ }
#ttbot { /* la parte inferior */ }
