Como recientemente he actualizado el servicio tentacul.us, he decidido hacer unos banners para promocionar el servicio:

La mayoría de veces, nos gustaría evitar que roben ciertas partes de nuestro diseño, especialmente las imagenes (ej. logotipos)

A continuación podrás ver la parte técnica, pero si prefieres ir al grano, al final de este tutorial encontrarás un ejemplo para descargar.

Demostración:

Intenta hacer “guardar imagen como” en el logotipo de viciao2k3

Imagen normal:

Código HTML:

<img src=”directorio/imagen.gif”>

Imagen protegida:

Código HTML:

<img src=”directorio/blank.gif” id=”imagen” height=”100″ width=”100″>

Nota: para que se muestre la imagen completamente es importante definir la altura y la anchura de la imagen

Código CSS:

#imagen{background:url(’directorio/imagen.gif ‘)}

¡ Nada más !

¿Como aplicarlo en wordpress?

La imagen que quieras proteger y la transparente, tienen que estar en el directorio:
/wp-content/themes/tu_theme_activo/images/

Código CSS:

#imagen{background:url(’images/imagen.gif ‘)}

Copia el código anterior en la hoja de estilos:

/wp-content/themes/tu_theme_activo/style.css

Modifica el código HTML de tu theme:

<img src=”/wp-content/themes/tu_theme_activo/images/imagen.gif”>

Por:

<img src=”/wp-content/themes/tu_theme_activo/images/blank.gif” id=”imagen” height=”100″ width=”100″>

Notas:

1. Si quieres proteger varias imagenes no repitas el mismo id.
2. Especifica la altura (height) y la anchura (width) de la imagen a proteger en la etiqueta <img
3. Si tu blog esta alojado en un sub-directorio (ej. www.viciao2k3.net/blog ), tendrás que poner:
   <img src=”/blog/wp-content/themes/tu_theme_activo/images/blank.gif” id=”imagen” height=”100″ width=”100″>

Nota: es muy importante enlazar bien la imagen, si introduces una dirección errónea la página tardará más en cargar

Como todo, tiene su parte buena y mala:

• La buena:
  Cuando intenten hacer “guardar imagen como…” se descargaran la imagen transparente
• La mala:
  Es posible que los buscadores indexen la imagen transparente

Descargar ejemplo:

¿Preloading?

Normalmente se utilizan en aplicaciones AJAX, cuando una parte de la web se esta cargando.
Pueden ser de texto ( ej. cargando… ), gráficos ( ej. ) o una mezcla de ambos.

¿Cuál es su utilidad?

Ayudan a entender al usuario que se esta produciendo una acción y no piense que se ha bloqueado la página

¿Dónde encontrarlos?

1. http://ajaxload.info
2. http://www.napyfab.com/ajax-indicators
3. http://mentalized.net/activity-indicators
4. http://www.webscriptlab.com
5. http://netlife.com.au/2007/02/22/more-ajax-spinners-aka-ajax-activity…
6. http://www.loadinfo.net (ideal para fondos oscuros) - gracias hanok