Un acortador de URL es un tipo de servicio software que permite usar URL cortas las cuales redirigen a la URL original. El objetivo de este tipo de servicios es hacer la URL más manejable y fácil de compartir y recordar. Se utiliza sobre todo para acortar enlaces profundos que, por su naturaleza, suelen ser largos.
Funcionamiento del Acortador URL
El funcionamiento del acortador de URL consiste básicamente en asignar caracteres aleatorios a nuestra URL para reducir su longitud. Aunque algunos permiten sustituir estos caracteres aleatorios por las palabras clave que queramos.
Un método habitual para generar URL cortas es utilizar una función hash, como MD5 o SHA-256, para generar un hash de longitud fija de la URL original. Luego, este hash se codifica en una forma más corta utilizando Base62. Base62 utiliza caracteres alfanuméricos (AZ, az, 0-9), que son compatibles con las URL y proporcionan un espacio de codificación denso.
El servicio de acortamiento de URL que elija mantendrá la conexión entre el nuevo enlace y la URL original. Esto significa que cualquier persona que haga clic en su nuevo enlace será redirigida a la página original.
CÓDIGO COMPLETO DE ACORTADOR URL
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<style>
body {
font-family: sans-serif;
margin: 20px;
display: flex;
flex-direction: column;
align-items: center; /* Centra el contenido horizontalmente */
min-height: 100vh; /* Asegura que el body ocupa toda la altura de la pantalla */
}
.container {
width: 90%;
max-width: 500px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box; /* Incluye el padding y el border en el ancho total */
}
label {
display: block;
margin-bottom: 5px;
}
input[type="url"] {
width: calc(100% - 12px); /* Ajusta el ancho para compensar el padding */
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
padding: 10px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
box-sizing: border-box;
}
#resultado {
margin-top: 10px;
word-wrap: break-word; /* Permite que las URLs largas se ajusten */
}
/* Media query para pantallas más pequeñas */
@media (max-width: 400px) {
.container{
width: 95%;
}
}
</style>
</head>
<body>
<h1>Acortador de URLs</h1>
<div class="container">
<label for="url">Introduce la URL:</label>
<input type="url" id="url" name="url" required placeholder="Ej: https://www.ejemplo.com">
<button onclick="acortarUrl()">Acortar</button>
<div id="resultado"></div>
<button id="copiar" style="display:none;" onclick="copiarAlPortapapeles()"></button>
</div>
<script>
function acortarUrl() {
const urlOriginal = document.getElementById("url").value;
const resultadoDiv = document.getElementById("resultado");
const copiarButton = document.getElementById("copiar"); // Obtener referencia al botón
if (!urlOriginal) {
resultadoDiv.innerHTML = "<p style='color: red;'>Por favor, introduce una URL.</p>";
copiarButton.style.display = "none"; // Ocultar el botón si hay error
return;
}
try {
new URL(urlOriginal); // Validar formato de URL
} catch (error) {
resultadoDiv.innerHTML = "<p style='color: red;'>La URL introducida no es valida.</p>";
copiarButton.style.display = "none"; // Ocultar el botón si hay error
return;
}
// Simulación de acortamiento (REEMPLAZAR CON UNA API REAL)
const caracteresAleatorios = Math.random().toString(36).substring(2, 8);
const urlAcortada = `https://ee3.es/${caracteresAleatorios}`;
// ... (Código de validación y generación de urlAcortada igual al anterior) ...
resultadoDiv.innerHTML = `<p>URL Acortada: <a href="${urlOriginal}" target="_blank" rel="noopener noreferrer">${urlAcortada}</a></p>`;
document.getElementById("url").value = "";
document.getElementById("copiar").style.display = "block";
}
function copiarAlPortapapeles() {
const urlAcortadaElement = document.querySelector("#resultado a");
if (urlAcortadaElement) {
// *** CORRECCIÓN IMPORTANTE: copiar el texto del enlace ***
navigator.clipboard.writeText(urlAcortadaElement.textContent).then(() => {
alert("URL copiada al portapapeles.");
}).catch(err => {
console.error('Error al copiar: ', err);
alert("No se pudo copiar la URL.");
});
}
}
</script>
</body>
</html>Proporcionado por Gemini
