ZonaMasters - Recursos para webmasters

Manual básico HTML - Cap 1 - Estructura de un documento HTML

rikype — Tue, 07 Oct 2008 12:04:21 +0000

Una página web es en esencia un archivo de texto que podemos crear desde cualquier procesador de textos, incluído el Bloc de Notas de Windows.

El principio fundamental del lenguaje HTML son las llamadas Tags (Etiquetas), con una estructura del siguiente tipo:

Inicio de la etiqueta

Fin de la etiqueta

Todo lo que quede comprendido entre esas dos etiquetas se veerá influenciada por ellas.

Para empezar, tódo documento HTML debe abrirse y, finalmente, cerrarse con las etiquetas y .

Es decir, que si vieramos el código fuente de cualquier página web deberíamos ver algo así:

El resto de la página

Dentro de las etiquetas de inicio y cierre del documento HTML, éste documento estará dividido en dos zonas principales, el encabezado (Head) y el cuerpo (body). En el encabezado habrá información sobre nuestro documento que no se verá en la pantalla, la principal etiqueta aquí sera la del título (Title), que describirá el contenido de nuestra página a todo aquel que nos quiera agregar a su agenda de direcciones. Por otra parte, dentro del cuerpo (body) estará todo lo que queramos que aparezca en pantalla.

Es decir, la construcción básica de un documento HTML sería el siguiente:

Título de la página

Aquí ira todas las etiquetas para visualizar la pagina que ya veremos mas adelante

Fácil, ¿verdad?, pues esto es en esencia la estructura básica de un documento HTML, en el segundo capítulo daremos forma a los textos y realizaremos un par de prácticas que seguro que os resultan interesantes.

Introducción al Manual Básico de HTML

rikype — Mon, 06 Oct 2008 12:08:45 +0000

MANUAL BÁSICO DE HTML

¿Qué es eso de HTML?

HTML son las siglas de Hypertext Markup Language (Lenguaje de macas de Hipertexto), un lenguaje mediante el cual se construyen las páginas web, el lenguaje con el que se escriben los millones de documentos que hoy existen en la World Wide Web (WWW).

Cuando accedemos a uno de estos documentos, el cliente (ya sea Netscape, Mozilla, IE…) los interpretan y los despliega, por eso, el lenguaje HTML es un estándar reconocido en todo el mundo y, como define W3C (World Wide Web Consortim -es el organismo que define las reglas del HTML), el HTML es un un lenguaje reconocido universalmente y que permite publicar información de forma global.

Un poco de historia

La historia de HTML es extensa, nos tenemos que remontar a 1980 cuando un físico de nombre Tim Berners-Lee propuso un nuevo sistema de “hipertexto” para compartir documentos, pero no fue hasta 1991 cuando, con la unión de Tim Beners-Lee y del ingeniero de sistemas Robert Cailliau publicaran el primer documento que describía HTML, de nombre HTML TAGS (Etiquetas HTML) y que aún puede ser consultada como una reliquia de la informática.

En 1993 se lanzó la primera propuesta, por parte del organismo IETF, para convertir HTML en un estándar, sin embargo, ninguna de las dos propuestas, HTML y HTML+ no consiguieron convertirse en estándar oficial.

EL primer estándar sería el HTML 2.0, publicado en 1995 por IETF, pero a partir del año siguiente, los estándares los publicaría W3C, asñi HTML 3.2 saldría a la luz en 1997 con importantes avances en el desarrollo de páginas webs como el uso de applets de java.

En 1999 se publica HTML 4.1 que no presentaría grandes novedades con respecto a su predecesor, y, debido a esta falta de novedades, Apple, Mozilla y Opera deciden unirse para crear un nuevo estándar HTML organizándose en una nueva asociación de nombre WHATWG (Web Hypertext Application Technology Working Group) y centrándose en el desarrollo de HTML 5.0

¿Que pretende este manual?

El objetivo de este manual es conseguir alcanzar un conocimiento básico para la construcción de páginas Web, HTML es muchísimo más de lo que trataremos aquí, pero eso ya lo dejaremos para un futuro.

¡¡¡Espero que lo disfruteis!!!

Presentación manuales básicos

rikype — Mon, 06 Oct 2008 11:37:49 +0000

Viendo que este blog está un poco abandonado, vamos a tratar de revivirlo con una serie de cursillos básicos que seguro que le resultarán de utilidad a todos aquellos que se acercan por primera vez al mundo de la creación web.

Para empezar, ya se que para algunos al principio se haran algo pesados para los que tienen una base ya que empezaremos por un nivel muy muy básico, pero seguro que con el tiempo también le sacareis provecho a estos manuales.

En principio, publicaré 3 manuales que se alargarán bastante en el tiempo, por lo que no seais muy impacientes, el primero de ellos será un Manual Básico de HTML, posteriormente, un Manual Básico de PHP y, para terminar, un Manual Básico de CSS.

Todos ellos tendran como objetivo capacitarnos para entender de una manera básica los comandos y sentencias que hay a nuestra disposición, lo que nos resultará sumamente útil al configurar nuestro Blog bajo Wordpress por ejemplo.

Y como el más inmediato va a ser el Manual de HTML, voy a presentar cómo se estructurará el mismo:

Constará de unos 10 capítulos (puede variar en función de lo extenso que se me hagan algunos), que en principio serán los siguientes:

Estructura de un documento HTML
Dar forma al texto
Enlaces
Inserción de imágenes
Inseción de caracteres especiales.
Selección de fondos
Tablas
Formularios
Trabajar con Frames
Inserción de sonidos

Espero que estos manuales os sirvan de utilidad y que juntos animemos zonamasters.com

Por cierto, si quereis cualquier otro manual o teneis alguna duda en los capítulos que posteo, ¡¡¡¡no dudeis en escribir un comentario!!!!.

Nuevo Blog de Diseño en Archivados

Marcelo Avero — Mon, 07 Jul 2008 18:57:02 +0000

Hemos dejado un poco abandonado a ZonaMasters, pero no ha sido porque hemos querido, sino porque pasamos estas semanas intentando concretar un proyecto que por suerte a salido. Se trata de un nuevo blog de la Red Archivados llamado 1001Photoshop.

Como su nombre lo sugiere, se trata de una página donde podéis disfrutar de varios tutoriales para aprender a usar esta poderosa herramienta de Adobe. Dichos tutoriales, además de estar detalladamente explicados paso a paso, también vienen acompañados (en su gran mayoría) por vídeos en alta resolución (1024×768), alojados en el servidor Rapidshare, para que os despeje cualquier duda que podáis tener al finalizar la lectura.

Como sabemos, el desarrollo Web va de la mano con el diseño, creación y manipulación de imágenes, es por esto que en el equipo estamos seguros que este nuevo blog os va a ser de mucha utilidad.

De hecho, al día de hoy ya hay algunos tutos interesantes, donde aprendimos a utilizar las herramientas correspondientes para lograr el retoque fotográfico, la creación de pinceles etc. Además, vamos a ir añadiendo descargas de pinceles, plugins y demás utilidades que podrían convertirse en elementos necesarios para acelerar los trabajos que realicemos.

Dicho esto, os esperamos en este nuevo blog que va haciendo crecer aún más a la Red Archivados.

Cambiar el Header de un tema Wordpress

Marcelo Avero — Wed, 28 May 2008 23:43:20 +0000

Tener un blog no necesariamente quiere decir que seamos WebMasters y estemos inundados de conocimientos de PHP o HTML, por lo tanto no todos pueden crear sus propios temas para Blogs. Es por esto que existen temas prontos para la descarga y así hacernos la vida más fácil al momento de crear un Blog.

Temas para Wordpress hay cientos, se pueden descargar todos desde esta página. Pero no siempre los temas de adecuan a nuestros intereses, ya sea por el nombre o los colores.

En este sencillo pero efectivo tutorial vamos a modificar el Header de nuestro blog para que sea acorde a la idea que tengamos en mente para el mismo.

Para este ejemplo, utilicé el tema “Activate“, creado por Brian Gardner para Wordpress.

Lo primero que deberemos hacer es descargar el tema desde aquí. Una vez hecho esto descomprimimos la carpeta dentro del directorio ‘wordpress/wp-content/themes’ dentro de nuestro servidor. Luego activaremos dicho tema yendo al panel del blog y seleccionando ‘Presentación‘ (Presentation), aparecerá una lista de los temas habilitados, entre los que figura el que acabamos de descargar. Con sólo hacer un clic sobre él ya estará activado.

En este caso haremos un header para ZonaMasters.Com, lo que nos obligará a cambiar el nombre Activate por el de nuestro Blog:

Dentro de la página principal del blog, le damos clic derecho sobre la imagen (header) y seleccionamos “ver imagen“, se nos abrirá otra ventana con sólo la imagen que queremos cambiar.
La misma imagen la guardaremos, mediante clic derecho y seleccionando ‘Guardar Imagen como…’ en el disco duro de nuestro PC, sin cambiarle el nombre ni el formato, esto es muy importante para que luego el PHP reconozca la nueva imagen como el Header original. Puede pasar que el formato de la imagen sea Gif, lo que no nos permitirá agregarle capas en la edición con Photoshop, si este es el caso, cambiaremos el modo de la imagen (Imagen/Modo/Color RGB), pero deberemos recordar volver al formato original cuando hayamos terminado la edición, guardándola como archivo Gif.

Figura 1-

Figura 2-

Ya está lista la imagen para editarla en nuestro Photoshop. Yo utilizaré la versión CS3, pero los pasos que verán están también disponibles en todas las versiones Photoshop.

Una vez abierta la imagen en el Photoshop, procederemos a rellenar su contenido con el color de nuestro agrado, en este caso utilizaré el color del Header original de ZonaMasters (082334) y presionando ‘Alt+Supr‘ o seleccionando la herramienta ‘Bote de Pintura‘ () y haciendo clic sobre la imagen.
Luego añadiremos algunos efectos al fondo para que no se vea tan plano. Vamos a la ventana ‘Capas’ y le damos doble clic a la capa ‘Fondo‘, pulsamos Ok a la ventana que aparece y volvemos a darle doble clic a la capa (que ahora se llama ‘Capa 0‘). Se nos abrirá la ventana ‘Estilo de Capa‘.
Le añadimos el efecto ‘Resplandor Exterior‘ donde seleccionaremos un color un poco más claro que el del fondo y configuraremos de la siguiente manera:

►Modo de fusión = Normal
►Opacidad = 95%
►Ruido = 0%
►Color de Resplandor = 40a0b8
►Técnica = Más Suavizado
►Origen = Borde
►Retraer = 0%
►Tamaño = 10 Px

Figura 3-

Figura 4-

Ahora seleccionaremos una fuente de nuestro agrado para colocar el nombre de nuestro Blog en el Header.

Luego de seleccionada nuestra fuente, seleccionamos la herramienta ‘Texto‘ () y posicionaremos el cursor en el centro de la imagen. Escribimos el nombre. Si el texto no se ve, es porque está del mismo color del fondo. Lo que deberemos hacer es ir a la ventana ‘Carácter‘ (Ventana/Carácter) y, con el texto seleccionado, cambiamos el color y lo posicionamos donde más nos agrade.
Ahora llega el momento de agregarle algunos efectos al texto. Doble clic a la capa del texto y se nos abrira otra vez la ventana ‘Estilo de Capa‘ y seleccionaremos el efecto ‘Resplandor Exterior‘ con esta configuración:

►Modo de Fusión = Color más Claro
►Opacidad = 75%
►Ruido = 0%
►Color de Resplandor = befff4
►Técnica = Más Suavizado
►Extender = 0%
►Tamaño = 10 Px
Figura 5-
Figura 6-

Ahora sólo resta agregarle algunos “adornos” para hacer nuestro Header más vistoso. Lo que recomiendo a partir de ahora es investigar sin miedo todas las posibilidades que nos da esta poderosa herramienta llamada Photoshop, que son infinitas y muy sencillas de utilizar. Otra cosa que recomiendo es que no toméis este tutorial al pie de la letra, ya que es sólo una sencilla guía de las cosas que podréis hacer en poco tiempo.

Figura 7-

Luego que tengamos pronto nuestro nuevo Header, deberemos optimizarlo para la Web, de manera que no quede muy pesado y haga demorar la carga de nuestro Blog. Para eso presionaremos las teclas Ctrl+Shift+Alt+S y se nos abrirá la ventana ‘Guardar para Web y Dispositivos‘ donde configuraremos las siguientes opciones:

Figura 8-

De más está decir que deberemos guardar el archivo resultante con el mismo nombre y formato del original (en este caso es header.gif)

Ya tenemos pronto nuestro Header, ahora sólo falta subirlo a nuestro servidor y reemplazar el existente. Para eso deberemos ir a la ruta del tema (wordpress/wp-content/themes/carpeta del tema/images) y reemplazar la imagen.
Figura 9-

Como siempre decimos, si tenéis alguna duda, sólo hace falta explayarla en los comentarios y a la brevedad os ayudaremos.

Más adelante volveremos con más tutoriales para seguir personalizando nuestros temas Wordpress.

Malware detectado en más de medio millón de sitios Web

Marcelo Avero — Tue, 13 May 2008 17:06:06 +0000

Más de medio millón de sitios Web han sido atacados por un malware, según TrendMicro. El código JavaScript se aprovecha de aplicaciones PHP mal configuradas para así insertar una variante del troyano Zlob disfrazado de un códec de vídeo.

El malware cambia la configuración DNS del PC infectado dejándolo propenso a ataques remotos. Se encuentra presente principalmente en foros de la Web. Se dice que en el Reino Unido la mayoría de los sitios infectados tienen una débil seguridad que ha sido quebrantada, permitiendo el ingreso de ataques hacker.

Los atacantes tienden cada vez más a colocar estos scripts, principalmente en sitios pornográficos y warez (donde predomina la piratería), y cada vez más se utilizan falsos códecs de vídeo, necesarios para visualizar el contenido streaming de éstas páginas, para propagar sus virus y troyanos. McAfee había advertido la semana pasada que cientos de miles de copias de un nuevo tipo de troyano había inundado las redes P2P. Estos tipos de troyano, como Zlob y otros, convierten el PC en un “zombie” al servicio de los hackers.

Por suerte, los troyanos infectan ordenadores, no archivos, y además son fácilmente reconocibles.

Si tenemos la mala suerte de albergar en nuestro PC al Zlob, deberemos borrar los siguientes valores del registro de Windows (visto en TechFAQ):

►HKEY_LOCAL_MACHINE/Software/MicrosoftWindows/CurrentVersion/Run/RegSvr32 =% System% msmsgs.exe

►HKEY_LOCAL_MACHINE/Software/MicrosoftWindows/NT/CurrentVersion/WinlogonShell/ = explorer.exe

Luego habrá que borrar los siguientes archivos:

nvctrl.exe
msmsgs.exe
hp[X].tmp
msvol.tlb
ncompat.tlb
RSA, Protect
vnp7s.net
zxserv0.com
dumpserv.com

Vía| TrendMicro

Convierte tu Firefox en una poderosa herramienta para Blogs

Marcelo Avero — Sat, 03 May 2008 00:13:26 +0000

Según un estudio, hay más escritores de Blogs que lectores. Es por eso que sería bueno, para los que recién se inician, tener una idea más o menos clara de las herramientas disponibles y gratuitas que hay desperdigadas por la Web que nos harán la vida mucho más fácil a aquellos que estamos compenetrados en la blogósfera.

►Para empezar, Firefox ofrece mucha más rapidez, estabilidad y sencillez a la hora de trabajar en blogs. Es por eso que si aún no lo poseemos, deberemos descargarlo desde aquí.

Una vez instalado, procederemos a “afinarlo”, de la misma manera que lo haríamos con nuestro coche. Esto es, instalar las herramientas necesarias para poder leer fuentes, redactar y publicar nuestras noticias desde la misma ventana, sin necesidad de instalaciones “sospechosas”, cracks de programas pirateados y sobretodo, que no se transforme en un dolor de cabeza a la hora de comenzar a utilizarlas.

►El primero, y me animaría a decir que es el más importante, es el plugin llamado ScribeFire, el cual nos permite redactar un post en la misma ventana del navegador donde tenemos la noticia. Se trata de un poderoso editor de textos, que obviamente soporta HTML y cuenta con todas las herramientas que posee el mismo Wordpress.

La ventana aparecerá (presionando F8) en la parte inferior de la pantalla, sin taparnos la página que estamos investigando, además de que su tamaño es totalmente configurable, nos permitirá fácilmente hacer links, negritas, citas, subrayados, insertar imágenes etc. Todo al alcance de la mano sin necesidad de meterse en un curso intensivo de blogs.

ScribeFire también nos da la opción de publicar directamente en nuestro blog, o sencillamente guardar el post como una nota, si lo que queremos es continuar redactando más adelante.

►Una de las cosas más importantes a tener en cuenta para que nuestros lectores nos tomen en serio es la ausencia total de faltas de ~~hortografia~~ ortografía. Para eso también existe un interesante plugin para Firefox que nos irá subrayando en rojo todas las bestialidades que pueden aparecer, sin querer, en nuestra escritura.

Se trata del Diccionario Español/España, disponible aquí. Una vez instalado ya está pronto para utilizarse. Aunque tiene algunas fallas, como por ejemplo no reconocer la palabra “desarrolladores”, nos permite, al igual que lo hace el Microsoft Word, agregar la palabra al diccionario. Otra característica que tiene igual al Word, es que cuando la palabra está remarcada como errónea, nos dará ejemplos con sólo hacer click derecho en la misma, enseñándonos dónde está el error en cuestión.

►Imaginemos que escribimos en varios blogs, y no siempre podemos hacerlo desde la comodidad de nuestro hogar. Es un verdadero problema “bloguear” desde otro PC que no tenga nuestros marcadores. Para eso existe la Barra de Google, altamente recomendada. Con una cuenta Gmail podremos crear nuestros marcadores y alojarlos en la Web, teniendo acceso a ellos desde cualquier parte del mundo. Si no podemos instalar la barra en un PC ajeno, siempre podremos entrar a la página de marcadores simplemente “logueándonos” en nuestra cuenta Gmail y accediendo a la página “marcadores”.

►Un Blogger debe tomar notas todo el tiempo, pero puede pasar por ejemplo que vemos una noticia pero no tenemos tiempo de empezar a desarrollarla en ese momento. Es por eso que recomiendo instalar el Blog de Notas de Goolge. De esta forma, tendremos siempre a disposición el mismo en la parte inferior derecha de la ventana del navegador. Con un simple click se abrirá una pequeña ventana muy parecida al notepad de Windows donde escribiremos la nota y luego la guardaremos. Al igual que los marcadores de la barra de Google, el Bloc de Notas está también disponible en nuestra cuenta Gmail.

►Existen muchos bloggers que prefieren que sus fuentes sean las de habla inglesa, por la sencilla razón de que son ellas, casi siempre, las primeras en dar una noticia; o simplemente porque al leer una blog en español, éste nos influye sin querer en las palabras que escribiremos después. Pero no todos entendemos el inglés a la perfección. Para eso ya tenemos el Google Translate, pero existe un plugin para Firefox llamado gTranslate que nos permite acceder a la página de traducción sin escribir la dirección de la misma y sin tener que copiar el texto a traducir. Simplemente seleccionando la palabra y haciendo click derecho, aparecerá la opción “Traducir (la palabra en cuestión)” en el menú contextual. Si esperamos un poco aparecerá la traducción, y si hacemos click en la misma se abrirá la pantalla del GoogleTranslate en una nueva pestaña.

Claro que puse el ejemplo de traducir del inglés al español, porque para eso lo utilizo yo, pero también están disponibles otros muchos idiomas, como el chino, alemán, árabe, japonés, francés, italiano, coreano, holandés, etc.

Para aquellos “vaguillos” que les cuesta instalar y configurar, he subido el Firefox Portable, con todos los plugins mencionados en este post, al servidor Rapidshare (archivo WinRar 9.25 Mb). Esta versión podemos llevarla en nuestro PenDrive a cualquier sitio, ya que no utiliza un instalador.

Descarga. Contraseña: ZonaMasters.com

Cualquier duda que tengáis, sólo pongan la consulta en los comentarios y con gusto os ayudaremos.

Disponible Wordpress 2.5.1

Marcelo Avero — Tue, 29 Apr 2008 20:41:11 +0000

Aparentemente el sistema de cookies del anterior Wordpress 2.5 contiene un agujero de seguridad “tan grande que podríamos conducir un camión a través del mismo“.

Es por eso que se ha lanzado una nueva actualización del popular gestor de contenidos éste y varios bugs más. Los php que han sido son wp-includes/pluggable.php, wp-admin/includes/media.php y wp-admin/media.php. Wordpress aconseja actualizar estos archivos inmediatamente.

Según el sitio oficial, el nuevo Wordpress 2.5.1 soluciona arriba de 70 agujeros de seguridad y se enfoca en reparar varios bugs desconocidos además de mejorar su rendimiento.

También han realizado mejoramientos en las páginas “Escritorio“, “Escribir” y “Comentarios“. Han reparado las fallas presentadas al momento de subir archivos multimedia y en la administración de los widgets.

Por otra parte, se ha reportado que mejoraron la compatibilidad de diseño para el Internet Explorer y han actualizado el TinyMCE a su versión 3.0.7, potente editor para HTML en JAVAScript compatible con los navegadores IE, Firefox, Safari, Konqueror y Opera.

Para más información, visita el blog oficial de Wordpress.

Vía| WebMasterWorld

Instalando Wordpress en nuestro PC

Marcelo Avero — Sat, 12 Apr 2008 08:59:20 +0000

Hay muchas personas a las que les gustaría crear sus propios temas en Wordpress, y los que sean como yo, “plugin-maníaco”, gustarían de probar cada uno de los que nos ofrece la red. Y una de las mejores maneras de hacerlo es con el Wordpress instalado en el PC. De otra forma, podríamos dejar “inservible” nuestro sitio sólo porque se nos ocurrió “explorar” nuestros conocimientos: ¿Pero cómo logramos esto?

Lo primero que debemos conseguir es la aplicación XAMPP para Windows que está disponible aquí. Deberemos elegir, de las múltiples opciones de descarga, la versión “installer” (pesa 34 Mb). Una vez descargada, instalaremos el software en la raíz (C:).
Lo siguiente es correr el acceso directo creado en el escritorio, si es que no elegimos abrirlo cuando finalizó la instalación. En la ventana que aparece, el panel de control, deberemos presionar ‘start‘ en el campo “apache” y en el campo “MySql“

Abrimos nuestro navegador (yo utilicé Firefox) y escribimos ‘http://localhost/‘ y escogeremos el lenguaje de nuestra preferencia.

Entraremos a la interfaz de configuración del servidor. Deberemos elegir “phpMyAdmin” del menú en la parte izquierda de la página. Luego veremos un campo donde le pondremos de nombre a nuestra base de datos “wordpress“.

Aquí va un vídeo demostrativo por si se nos ha pasado por alto algo:

Como podemos ver, ya tenemos un servidor y una base de datos completa. Sólo falta el Wordpress.

Descargamos la última versión desde aquí, y el archivo .zip deberemos descomprimirlo en ‘C:\xampp\htdocs‘. Ahora deberemos editar el archivo ‘wp-config-sample.php‘ dentro de la carpeta del wordpress.

Abrimos el archivo con el bloc de notas y definimos ‘wordpress’ al nombre de la base de datos. El nombre del usuario en ‘root‘ y el password, para la instalación local, debe dejarse en blanco. Una vez hecho esto, guardamos el archivo con el nombre de ‘wp-config.php‘.

En el navegador, iremos a ‘http://localhost/wordpress/wp-admin/install.php‘ y seguimos los pasos de instalación de wordpress.

Ya tenemos pronto un Wordpress “privado” en el que podremos hacer cuanta prueba se nos ocurra, para después aplicarla confiados en nuestra Web y así dejarla como más nos guste.

Cómo proteger nuestras imágenes de los robots

Marcelo Avero — Fri, 11 Apr 2008 06:12:05 +0000

Hay sitios que deliberadamente buscan e indexan imágenes agregándolas en su servidor. De esta forma, cualquiera que busque en Internet información referente a vuestra imagen, puede fácilmente llegar a ella, copiarla y re-publicarla después como propia, aunque nuestra imagen esté claramente protegida con copyright, y lo que es peor, sin siquiera haber pasado por vuestro sitio.

Es lo que le sucede a miles de fotógrafos, artistas, diseñadores Web, etc. Hasta se ha llegado a demandas judiciales en algunos casos.

Pero hay una manera muy sencilla de evitar esto, y más fácil es aún si poseemos nuestro propio dominio. Sólo es necesario un simple Robot.txt, del que ya hemos hablado antes.

Compondremos el Robot.txt de la siguiente manera:

User-agent: vscooter
User-agent: DittoSpyder
User-agent: Googlebot-image
User-agent: psbot
Disallow: /

User-agent: Googlebot
**Disallow: /.gif$
Disallow: /.jpg$
Disallow: /.jpeg$
Disallow: /.png$**

En el caso de VSCOOTER, éste es el nombre del rastreador de imágenes de Alta Vista, con este código evitamos que la molesta arañita llamada “Scooter” entre en nuestro sitio para indexar archivos, pero al agregarle el prefijo V hablitamos al robot a indexar el sitio para figurar en las búsquedas. Lo mismo pasa con Google, al que sólo impediremos indexar imágenes con el código “GOOGLEBOT-IMAGES“.

DITTOSPYDER es el robot de Ditto.com. Lo único que hace este sitio es indexar imágenes, así que no lo queremos para nada dentro del nuestro, ¿verdad?. PSBOT, de Picsearch, otro sitio que sólo indexa imágenes, tampoco lo dejaremos entrar.

Vale aclarar que hemos puesto como ejemplo los archivos de imagen, pero también sirve para otros archivos, como los multimedia (Wav, MP3, Zip, Mid, etc.), sólo basta con agregarlos al Robot.txt y poner los códigos de los robots que queramos evitar.

Otra forma de proteger nuestras imágenes es el uso de algunos Meta Tag, entre y en nuestro html, pondremos lo siguiente:

El problema con este sistema es que no todos los robots reconocen este tag, aunque funciona perfectamente con Alta Vista. Pero si verdaderamente queremos proteger nuestras imágenes, cambiaremos el tag por este:

Este tag es como un arma de doble filo, ya que corremos el riesgo de que la totalidad de nuestro sitio quede fuera del rastreo.

Luego de hacer esto, deberemos confirmar que los sitios han eliminado nuestras imágenes de su servidor. Con Alta Vista, deberemos indexar nuestro sitio nuevamente y ellos automáticamente removerán el material prohibido una vez que encuentren el Robot.txt.

En el caso de Ditto, deberemos pedir que eliminen nuestro sitio de su base de datos, mediante el link de contacto.

Google borrará automáticamente las imágenes la próxima vez que rastree nuestra página, por lo que no es necesario realizar ninguna acción además del Robot.txt.