InicioHazlo Tu MismoClona (Duplica) Todo una Página Web

Clona (Duplica) Todo una Página Web

Hazlo Tu Mismo7/13/2012
Hola amigos de T!.. en esta ocasión les voy a enseñar a cómo duplicar (clonar) todo un sitio web... Este post es totalmente creado por mí (CarlosSimbo).. y bueno, aprendí esto porque a mi me gusta la programación web.. empezé en el colegio hace más de 4 años con lo básico. hasta que ahora sé algunos lenguajes para tener una web sólida.. como HTML, CSS, PHP, MYSQL, JAVASCRIPT ... sin más que decir, empezamos. Comenzamos explicando que toda página web está conformada por código fuente que hacen que se vea tal cual, para ver este código hacemos clic derecho a cualquier parte de la pagina y luego en "Ver código de fuente" Todo esos códigos son los que hacen ver el sitio web tal cual.. los lenguajes como PHP o AJAX hace que la web sea dinámica.. osea, que cambie, la portada o el título, cada vez que algún usuario haya colocado un contenido (como taringa) En este caso vamos a duplicar una web peruana llamada "trome.pe".. Ingresamos a la web.. Hacemos clic derecho y ver código fuente (como expliqué allá arriba).. Abrimos el "Bloc de notas" y pegamos todo ese código de la web.. Luego lo guardamos en "Archivo ► Guardar como".. colocamos el nombre que queramos, pero con la terminación ".html" y en codificación como "UTF-8" No cerramos el bloc de notas... y vamos al escritorio, buscamos la página guardad y la abrimos.. Veremos que la página se ve muy mal.. esto es porque los estilos (que dan color a la página) y las imágenes se encuentran en el servidor del sitio web, en este caso de "Trome" y para colocar una imagen se coloca: se mostraría la imagen si estuviese en el propio servidor.. pero como estamos en nuestra computadora no se puede.. Así que para extraer todo eso pondríamos a cada imagen "http://trome.pe/imagen.jpg".. pero, menos mal, existe un código para facilitar todo eso.. En el bloc de notas vamos a colocar lo siguiente después de la etiqueta "".. (Allí se muestra el título para la página web).. Ahora, guardamos "CTRL + G" vamos a la página y presionamos F5 (actualizamos) Y ahora sí vemos la página tal cual a la original... podemos modificar, por ejemplo, la parte que dice "MAGALY SALE LIMPIA DE QUERELLA"... buscamos en el bloc de notas presionando CTRL + R, pegamos el texto, buscamos y editamos: Lo actualizamos (F5) y eso es todo.. luego se puede subir esta página a un servidor que puede ser gratuito o de paga.. para una mejor visualización de códigos se utiliza el programa "DREAMWEAVER"... Les dejo aquí una web para que puedan aprender lo básico como HTML Y CSS.. http://manualw.tk Y eso es todo amigos de T!.. espero les haya gustado y si no les sale me preguntan cualquier cosa.. Salu2!</div></article><div class="flex flex-col gap-3 my-10"><div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 flex-wrap bg-[#fff9eb] border border-[#f5e6c4] px-4 py-3 rounded text-[11px] font-medium text-[#856404]"><div class="flex flex-wrap items-center gap-x-6 gap-y-2"><div class="flex items-center gap-1.5 shrink-0 opacity-80 uppercase tracking-wide"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock w-3.5 h-3.5" aria-hidden="true"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg><span>Datos archivados del Taringa! original</span></div><div class="flex flex-wrap items-center gap-x-8 gap-y-2"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-3.5 h-3.5 fill-[#856404] opacity-40 shrink-0" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><span class="text-gray-900 font-extrabold tabular-nums text-xs">34</span><span class="opacity-70 lowercase">puntos</span></div><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye w-3.5 h-3.5 shrink-0 opacity-40" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg><span class="text-gray-900 font-extrabold tabular-nums text-xs">0</span><span class="opacity-70 lowercase">visitas</span></div><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square w-3.5 h-3.5 shrink-0 opacity-40" aria-hidden="true"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"></path></svg><span class="text-gray-900 font-extrabold tabular-nums text-xs">0</span><span class="opacity-70 lowercase">comentarios</span></div></div></div></div><div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 flex-wrap bg-[#f0fff4] border border-[#c6f6d5] px-4 py-3 rounded text-[11px] font-medium text-[#2f855a]"><div class="flex flex-wrap items-center gap-x-6 gap-y-2"><div class="flex items-center gap-1.5 shrink-0 opacity-80 uppercase tracking-wide"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-3.5 h-3.5" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><span>Actividad nueva en Posteamelo</span></div><div class="flex flex-wrap items-center gap-x-8 gap-y-2"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-3.5 h-3.5 fill-[#2f855a] opacity-40 shrink-0" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><span class="text-gray-900 font-extrabold tabular-nums text-xs">0</span><span class="opacity-70 lowercase">puntos</span></div><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye w-3.5 h-3.5 shrink-0 opacity-40" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg><span class="text-gray-900 font-extrabold tabular-nums text-xs">1</span><span class="opacity-70 lowercase">visitas</span></div><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square w-3.5 h-3.5 shrink-0 opacity-40" aria-hidden="true"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"></path></svg><span class="text-gray-900 font-extrabold tabular-nums text-xs">0</span><span class="opacity-70 lowercase">comentarios</span></div></div></div><div class="flex flex-wrap items-center gap-3"><span class="text-[10px] text-[#2f855a] font-bold uppercase tracking-tight mr-1">Dar puntos:</span><button class="px-1.5 py-0.5 rounded text-[10px] font-extrabold transition-colors hover:bg-[#2f855a] hover:text-white">+<!-- -->1</button><button class="px-1.5 py-0.5 rounded text-[10px] font-extrabold transition-colors hover:bg-[#2f855a] hover:text-white">+<!-- -->2</button><button class="px-1.5 py-0.5 rounded text-[10px] font-extrabold transition-colors hover:bg-[#2f855a] hover:text-white">+<!-- -->3</button><button class="px-1.5 py-0.5 rounded text-[10px] font-extrabold transition-colors hover:bg-[#2f855a] hover:text-white">+<!-- -->5</button><button class="px-1.5 py-0.5 rounded text-[10px] font-extrabold transition-colors hover:bg-[#2f855a] hover:text-white">+<!-- -->10</button></div></div></div></div><div class="bg-white rounded-lg shadow-sm border border-gray-100 p-6"><div class="h-4 w-36 bg-gray-100 rounded mb-6 animate-pulse"></div><div class="flex flex-col gap-4"><div class="flex items-center justify-between"><div class="space-y-2 flex-1"><div class="h-3 w-3/4 bg-gray-100 rounded animate-pulse"></div><div class="h-2 w-24 bg-gray-100 rounded animate-pulse"></div></div><div class="h-3 w-10 bg-gray-100 rounded animate-pulse"></div></div><div class="flex items-center justify-between"><div class="space-y-2 flex-1"><div class="h-3 w-3/4 bg-gray-100 rounded animate-pulse"></div><div class="h-2 w-24 bg-gray-100 rounded animate-pulse"></div></div><div class="h-3 w-10 bg-gray-100 rounded animate-pulse"></div></div><div class="flex items-center justify-between"><div class="space-y-2 flex-1"><div class="h-3 w-3/4 bg-gray-100 rounded animate-pulse"></div><div class="h-2 w-24 bg-gray-100 rounded animate-pulse"></div></div><div class="h-3 w-10 bg-gray-100 rounded animate-pulse"></div></div><div class="flex items-center justify-between"><div class="space-y-2 flex-1"><div class="h-3 w-3/4 bg-gray-100 rounded animate-pulse"></div><div class="h-2 w-24 bg-gray-100 rounded animate-pulse"></div></div><div class="h-3 w-10 bg-gray-100 rounded animate-pulse"></div></div></div></div><div class="bg-white rounded-lg shadow-sm border border-gray-100 p-6 mt-10"><h3 class="text-sm font-bold text-gray-800 uppercase tracking-tight mb-6">Dejá tu comentario</h3><form><div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"><div class="flex flex-col gap-2"><label data-slot="label" class="flex items-center gap-2 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 text-[11px] font-bold text-gray-400 uppercase tracking-wide" for="name">Nombre</label><input data-slot="input" class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-10 bg-gray-50/50 border-gray-100 focus:ring-[#6b4255]/20 focus:border-[#6b4255]/40" id="name" placeholder="Tu nombre" value=""/></div><div class="flex flex-col gap-2"><label data-slot="label" class="flex items-center gap-2 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 text-[11px] font-bold text-gray-400 uppercase tracking-wide" for="country">País</label><select id="country" class="flex h-10 w-full items-center justify-between rounded-md border border-gray-100 bg-gray-50/50 px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-[#6b4255]/20 focus:border-[#6b4255]/40 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1"><option value="1">Otro</option><option value="2">Argentina</option><option value="3">México</option><option value="4" selected="">Chile</option><option value="5">Colombia</option><option value="6">España</option><option value="7">Venezuela</option><option value="8">Uruguay</option><option value="9">Perú</option><option value="10">Ecuador</option></select></div></div><div class="flex flex-col gap-2 mb-6"><label data-slot="label" class="flex items-center gap-2 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 text-[11px] font-bold text-gray-400 uppercase tracking-wide" for="comment">Comentario<!-- --> <span class="normal-case font-normal text-gray-400 lowercase ml-1">(usa **negrita** y *cursiva*)</span></label><textarea id="comment" rows="5" placeholder="Escribí tu comentario..." maxLength="2000" class="flex min-h-[120px] w-full rounded-md border border-gray-100 bg-gray-50/50 px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-[#6b4255]/20 focus:border-[#6b4255]/40 disabled:cursor-not-allowed disabled:opacity-50"></textarea><div class="flex justify-between"><span class="text-[11px] text-gray-300 font-medium tabular-nums">0<!-- -->/2000</span></div></div><div class="flex justify-end"><button data-slot="button" data-variant="default" data-size="default" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md transition-all disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive py-2 has-[>svg]:px-3 bg-[#4b2c3d] hover:bg-[#6b4255] text-white px-8 h-10 text-xs font-bold uppercase tracking-tight disabled:opacity-50" type="submit">Publicar comentario</button></div></form></div><div class="mt-8"><div class="border-b border-gray-200 mb-6"><div class="flex gap-6"><button class="pb-3 text-sm font-bold uppercase tracking-wide transition-colors relative text-[#4a3048] border-b-2 border-[#4a3048]">Comentarios Archivados (<!-- -->0<!-- -->)</button><button class="pb-3 text-sm font-bold uppercase tracking-wide transition-colors relative text-gray-400 hover:text-gray-600">Comentarios Nuevos (<!-- -->0<!-- -->)</button></div></div><div class="space-y-4"><div class="bg-white border border-gray-100 p-4 rounded-lg shadow-sm"><div class="flex items-center gap-2 mb-3"><div class="w-5 h-5 bg-gray-100 rounded animate-pulse"></div><div class="h-3 w-28 bg-gray-100 rounded animate-pulse"></div><div class="h-3 w-20 bg-gray-100 rounded animate-pulse"></div></div><div class="space-y-2"><div class="h-3 w-full bg-gray-100 rounded animate-pulse"></div><div class="h-3 w-5/6 bg-gray-100 rounded animate-pulse"></div></div></div><div class="bg-white border border-gray-100 p-4 rounded-lg shadow-sm"><div class="flex items-center gap-2 mb-3"><div class="w-5 h-5 bg-gray-100 rounded animate-pulse"></div><div class="h-3 w-28 bg-gray-100 rounded animate-pulse"></div><div class="h-3 w-20 bg-gray-100 rounded animate-pulse"></div></div><div class="space-y-2"><div class="h-3 w-full bg-gray-100 rounded animate-pulse"></div><div class="h-3 w-5/6 bg-gray-100 rounded animate-pulse"></div></div></div><div class="bg-white border border-gray-100 p-4 rounded-lg shadow-sm"><div class="flex items-center gap-2 mb-3"><div class="w-5 h-5 bg-gray-100 rounded animate-pulse"></div><div class="h-3 w-28 bg-gray-100 rounded animate-pulse"></div><div class="h-3 w-20 bg-gray-100 rounded animate-pulse"></div></div><div class="space-y-2"><div class="h-3 w-full bg-gray-100 rounded animate-pulse"></div><div class="h-3 w-5/6 bg-gray-100 rounded animate-pulse"></div></div></div></div></div></div><div class="w-full lg:w-80 shrink-0 flex flex-col gap-8"><div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden"><div class="bg-[#4b2c3d] px-4 py-2 text-white flex items-center justify-between"><h3 class="text-xs font-bold uppercase tracking-tight">Autor del Post</h3></div><div class="p-4 flex flex-col gap-4"><div class="flex items-center gap-4"><span data-slot="avatar" class="relative flex size-8 overflow-hidden w-14 h-14 rounded-lg border border-gray-100 shrink-0"><span data-slot="avatar-fallback" class="flex size-full items-center justify-center rounded-full bg-gray-200 text-gray-500 font-bold uppercase">C</span></span><div class="flex flex-col min-w-0"><div class="flex items-center gap-1.5 min-w-0"><a class="text-sm font-bold text-gray-700 hover:text-[#336699] truncate" href="/autor/CarlosSimbo">CarlosSimbo</a><span class="text-base shrink-0">🇦🇷</span></div><span class="text-[10px] text-gray-400 font-medium uppercase tracking-wide">Usuario</span></div></div><div class="flex flex-col gap-2 pt-2"><div class="flex items-center justify-between text-xs"><span class="text-gray-400 font-medium uppercase">Puntos</span><span class="text-gray-700 font-bold tabular-nums">0</span></div><div class="flex items-center justify-between text-xs"><span class="text-gray-400 font-medium uppercase">Posts</span><span class="text-gray-700 font-bold tabular-nums">19</span></div></div><a class="text-[11px] font-bold text-[#b53a3a] hover:underline flex items-center justify-center pt-2 mt-2 border-t border-gray-50" href="/autor/CarlosSimbo">Ver perfil →</a></div></div></div></div></main><footer class="w-full bg-[#291823] text-white/50 py-12 px-4 sm:px-6 lg:px-8 border-t border-white/5"><div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-12"><div class="flex flex-col gap-4"><div class="flex flex-col"><span class="text-white text-xl font-bold tracking-tight">Posteamelo</span><span class="text-xs text-white/40 mt-1 max-w-xs leading-relaxed">Archivo Histórico de Taringa! (2004-2017). Preservando la inteligencia colectiva de la internet hispanohablante.</span></div></div><div class="flex flex-col gap-4"><h4 class="text-white/80 text-sm font-bold uppercase tracking-wider">LEGAL</h4><nav class="flex flex-col gap-2"><a class="text-xs hover:text-white transition-colors" href="/terminos">Términos y Condiciones</a><a class="text-xs hover:text-white transition-colors" href="/privacidad">Política de Privacidad</a><a class="text-xs hover:text-white transition-colors" href="/sobre-nosotros">Sobre Nosotros</a></nav></div><div class="flex flex-col gap-4"><h4 class="text-white/80 text-sm font-bold uppercase tracking-wider">CONTACTO</h4><div class="text-xs leading-relaxed flex flex-col gap-1"><p>18 de Septiembre 455, Casilla 52</p><p>Chillán, Región de Ñuble, Chile</p><p class="mt-2 text-white/30 italic">Solo correo postal</p></div></div></div><div class="max-w-7xl mx-auto mt-16 pt-8 border-t border-white/5 flex flex-col md:flex-row items-center justify-between gap-4 text-[10px] text-white/30 uppercase tracking-widest font-medium"><p>© 2026 Posteamelo.com. No afiliado con Taringa! ni sus sucesores.</p><p>Contenido preservado con fines históricos y culturales.</p></div></footer><section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false"></section></div></div> <script> // Mark body as ready once styles are loaded if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', function() { document.body.classList.add('ready'); }); } else { document.body.classList.add('ready'); } </script> </body> </html>