La misma persona, nueva creación

Tras el cierre de El Balcón en el año 2011, el autor se dedicó enteramente a una afición que le acompañaba desde niño. Actualmente ha hecho de ese pasatiempo su forma de vida. Entra en el nuevo sitio web y descubre su nueva obra. La misma persona, nueva creación
La misma persona, nueva creación. Entra y descúbrelo.   Canovu.com    

Efecto desvanecer y aparecer en imágenes al pasar el cursor

Con anterioridad vimos cómo darle un efecto de opacidad a las imágenes al pasar el cursor, para ello incluíamos dentro del código de la imagen los estilos necesarios para generar la opacidad. El efecto descavenecer o aparecer que se explica en esta entrada no es muy diferente al ya comentado pero posee una nueva característica. Al pasar el cursor sobre la imagen, ésta se desvanece o aclara suavemente.

A continuación puede verse el truco en funcionamiento:


El resultado presenta dos variantes del efecto. La primera tira de imágenes aparece con un grado de opacidad de 0.5 que produce la aparición de la imagen al pasar el cursor; la segunda tira, por el contrario, no presenta opacidad sino que se las imágenes se desvanecen al pasar el cursor.

Diseño>Edición de HTML>expandimos artilugios

Localizamos la etiqueta </head> y justo antes insertamos uno de los siguientes bloques, dependiendo de la variante escogida y la presentación deseada:

Para el efecto aparecer al pasar el cursor en todas las imágenes del blog:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('img').fadeTo('slow', 0.5);
$('img').hover(function() {
$(this).fadeTo('slow', 1.0);
}, function() {
$(this).fadeTo('slow', 0.5);
});
});
</script>

Para el efecto desvanecer al pasar el cursor en todas las imágenes del blog:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('img').fadeTo('slow', 1.0);
$('img').hover(function() {
$(this).fadeTo('slow', 0.5);
}, function() {
$(this).fadeTo('slow', 1.0);
});
});
</script>

Para el efecto aparecer al pasar el cursor en las imágenes escogidas:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('.blImagjtef').fadeTo('slow', 0.5);
$('.blImagjtef').hover(function() {
$(this).fadeTo('slow', 1.0);
}, function() {
$(this).fadeTo('slow', 0.5);
});
});
</script>

Para el efecto desvanecer al pasar el cursor en las imágenes escogidas:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('.blImaggjtef').fadeTo('slow', 1.0);
$('.blImaggjtef').hover(function() {
$(this).fadeTo('slow', 0.5);
}, function() {
$(this).fadeTo('slow', 1.0);
});
});
</script>

Los dos últimos códigos, al contrario que los dos primeros (que al guardar la plantilla aplicarán el efecto a todas las imágenes), se aplican de forma manual, utilizando las clases resaltadas en color rojo (respectivamente), dentro del código de la imagen:

<img class='blImagjtef' src='URL DE LA IMAGEN'/>

<img class='blImaggjtef' src='URL DE LA IMAGEN'/>

En donde dice URL DE LA IMAGEN incluiremos la dirección de la fotografía o imagen.

El truco usa jQuery por lo tanto, si hemos instalado Scriptaculous, Prototype o Mootools seguramente no pueda utilizarse.

Con esto habremos terminado la instalación de este elegante efecto.

Mejorar el posicionamiento de imágenes con la etiqueta ALT

Utilizadas en imágenes como 'texto alternativo', las etiquetas ALT nos permiten incluir una descripción y mejorar así su posicionamiento en los buscadores.

Otra de las ventajas que ofrece es la de mostrar la descripción cuando la imagen, por el motivo que sea, no aparece.

Los buscadores deben disponer de términos adicionales que describan a la imagen para indexarla. Al realizar la búsqueda de una fotografía en Google, por ejemplo, solemos escribir una breve frase. El buscador muestra entonces los resultados, teniendo en cuenta las palabras clave utilizadas tanto por el autor como por el visitante.

La fotografía de una casa podría aparecer sin problemas en los resultados de búsqueda para imágenes de plantas. Esto ocurre gracias a las etiquetas ALT.

A continuación les muestro la estructura que llevará el código de la imagen y un ejemplo real:

<img src="URL DE LA IMAGEN" alt="DESCRIPCION"/>

Otro factor que mejorará el posicionamiento es la URL o dirección de la imagen, que debería contener también una breve descripción.

Recuerda que al incluir un código dentro de cualquier post, debe seleccionarse la pestaña de 'Edición de HTML' y no la de 'Redactar'.



Nota:

Si lo que buscas es hacer lo contrario, evitar que se indexe cierto contenido del Blog, accede a este otro tutorial.

Evitar que se indexe cierto contenido del Blog

El tráfico del blog es algo positivo pero, a veces, también preocupante. Y esque se dan casos en los que recibimos quizás demasiado tráfico por parte del buscador, lo que sólo da problemas.

Las imágenes son por lo general lo que normalmente deseamos ocultar. A alguien con un blog personal podría no hacerle mucha gracia encontrar las fotos de sus hijos o familiares en la búsqueda de imágenes de Google, percatándose de que cualquiera puede verlas o guardarlas.

Diseño>Edición de HTML>expandimos artilugios

Localizamos la siguiente línea:

<title><data:blog.pageTitle/></title>

Ahora, justo antes añadimos esta otra:

<meta name="robots" content="noimageindex"/>

La etiqueta Meta utilizada evitará que nuestras imágenes se conviertan en públicas.

Guardamos la plantilla y listo.

También podemos ocultar uno o varios elementos dentro de una entrada o de un gadget html-javascript (ya sea una imagen o varios párrafos).

Haremos uso de las etiquetas googleoff y googleon, resaltadas en color rojo:

Contenido indexado.
<!--googleoff: all --> Contenido protegido. <!--googleon: all -->
Resto del contenido indexado.

Para incluirlas en el post, debe seleccionarse la pestaña de 'Edición de HTML' y no la de 'Redactar'.


A pesar de que el truco es seguro, siempre conviene evitar cualquier publicación que dote de datos personales o fotografías inapropiadas.

Crear vinculos dentro de una misma entrada o artículo

Los enlaces no sólo facilitan la navegación al lector sino que también pueden vincular apartados dentro de un artículo extenso en donde se crea un índice con los temas tratados.

Este índice permite acceder a cualquier apartado con un click, sin abandonar la entrada.


Supongamos que nuestro índice se compone por la siguiente estructura:

Primer apartado
Segundo apartado
Tercer apartado

El primer paso constará de crear la tabla de contenido. Para ello utilizamos el atributo href al que atribuímos un nombre único (en lugar de una URL):

<a href="#primero">Primer apartado</a>
<a href="#segundo">Segundo apartado</a>
<a href="#tercero">Tercer apartado</a>

Seguidamente y haciendo uso del atributo name especificamos el área a donde conducirá cada enlace.

Para el primer apartado emplearíamos lo siguiente:

<a name="primero">Primer apartado</a>

Este sería el contenido perteneciente al primer apartado del artículo, como podría ser la introducción.

Haremos lo mismo para los apartados restantes. Debe tenerse en cuenta que el nombre a utilizar en el enlace (primer paso) y posteriormente en el apartado (segundo paso) debe ser único.

Si lo repetimos en otro apartado, el enlace no conducirá al tema apropiado y acudirá al área en donde tenemos el nombre correcto.

Al poner cualquier código en la entrada, conviene hacerlo en la pestaña de 'Edición de HTML' y no en la de 'Redactar'.



En el ejemplo se presenta un artículo 'falso'. El truco ha sido utilizado para crear, por ejemplo, numerosos artículos acerca de los periquitos.