En este tutorial aprenderemos a clonar un sitio web utilizando HTTrack, con esto nos referimos a descargar los archivos .hml, .css, .js e imágenes que dan forma a un sitio web.

HTTrack es un software libre que permite descargar un sitio web disponible en Internet en un directorio local, el modo en el que trabaja es recorriendo inicialmente la URL del sitio web de interés y posteriormente, recorre la estructura de links internos. En este recorrido, va guardando a nivel local los archivos .html, .css, .js e imágenes que va encontrando.

El programa HTTRACK lo podemos descargar desde su sitio oficial

¿Cómo instalar HTTRACK?

Primero, daremos click en el enlace de descarga recomendado, en mi caso es compatible con Windows 7 de 64 bits; de contar con un sistema operativo de diferentes características a las del detalle del enlace, puedes elegir otra de las opciones.

Una vez descargado, damos click en el instalador y nos pregunta si deseamos ejecutar el archivo, damos click en “Ejecutar”.

Ahora nos da la bienvenida el Asistente de instalación de HTTrack, damos click en “Next”.

Luego se nos presenta el acuerdo de licencia, seleccionamos la opción “I accept the agreement” y damos click en “Next”.

Además nos pide elegir la ubicación donde se instalará el programa, dejamos la ubicación por defecto: "C:\Program Files\WinHTTrack" además te comenta que al menos requerirá de 13.9 Mb de espacio libre en el disco. Damos click en “Next”.

A continuación te pide poner el nombre del folder del menú de inicio, por defecto con el nombre WinHTTrack. Damos click en “Next”.

Así mismo, te consulta si deseas agregar algunas tareas adicionales, por defecto te propone algunas, damos click en “Next”.

Luego se presenta un resumen de la configuración de instalación, ya estamos listos para instalar así que damos click en “Install”.

Una vez instalado damos click en “Finish” para iniciar nuestro programa.

El programa se encuentra abierto, seleccionamos castellano como lenguaje y damos click en “OK” y el programa está listo para ser utilizado.

¿Cómo funciona HTTRACK?

Para aprender cómo funciona, intentaremos clonar el sitio web oficial de Bootstrap, el cual se ubicará por defecto en "C:\Mis lugares Web". Luego damos click en “Siguiente”.

A continuación deberemos ingresar la url, en este caso: http://getbootstrap.com/ del sitio web oficial, luego damos cick en “Siguiente”.

Nos aparecen opciones para hacer algunas configuraciones más, sin embargo daremos click en “Finalizar” para empezar.

Luego inicia el proceso de descarga.

Una vez finalizado podemos revisar el fichero de auditoría, en este caso vemos que se completó en 4 minutos con 14 segundos, se escanearon 182 links, de los cuales se escribieron 178 links correctamente, hubo 1 alerta y 3 errores.

Ahora veamos nuestra web clonada en la ubicación "C:\Mis lugares Web\Bootstrap", aquí veremos un archivo index.html, el cual nos redireccionará a la web clonada, siendo la ubicación del proyecto la siguiente: "file:///C:/Mis%20lugares%20Web/Bootstrap/getbootstrap.com/index.html"

Para poder revisar los archivos que hemos descargado debemos ingresar a "C:\Mis lugares Web\Bootstrap\getbootstrap.com", es aquí donde encontrarás todos los archivos .html, .css, .js e imágenes que dan forma al sitio web clonado.

HTTrack funciona en la mayoría de sitios web pero no en todos, dado que existen maneras de evitar que tu sitio web sea clonado con este software. Los archivos .php en el caso de páginas programadas en este lenguaje no son descargados, dado que estos archivos funcionan del lado del servidor y no es necesario mostrarlos en el navegador a diferencia de los archivos .css.

Clonar un sitio web te permite de una manera más familiar revisar la estructura HTML y estilos empleados, así como eventos en JavaScript entre otros, podrás jugar con el código y hacer experimentos con el diseño a manera local.

Se recomienda no utilizar diseños de terceros como propios, sin la autorización de los autores por el principio de ética profesional. Sin embargo esta herramienta existe y nos puede ayudar a acelerar nuestro aprendizaje descubriendo cómo funcionan otros sitios web. Recuerda que si deseas profundizar más en HTML, CSS o Javascript tenemos un Curso de HTML y CSS y un Curso de JavaScript en nuestra plataforma.