Buenas noches. Me presento soy 0ld. Hace poco encontré los recursos que elhacker nos ofrece en la url:
https://elhacker.info/ y al ser un catálogo tan extenso e interesante, se me ocurrió la idea de organizarlo un poco para ayudar a la clasificación de los distintos temas que ahí encontramos. Me ayudé de la IA para que me aconsejara en qué categorías podría agruparlos.
Y quiero presentarles como hasta el momento se me ha ocurrido. Los recursos que me propuse 'organizar' fueron los
Cursos.
Dejo a continuación lo que llevo de código:
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>elhacker.INFO - Descargas Cursos, Manuales, Tutoriales y Libros</title>
<meta charset="uft-8">
<meta name="description" content="Cursos, Manuales, Tutoriale y libros">
<meta name="keywords" content="Hacker, Hacking, Linux, Windows">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/favicon.png" type="image/png" sizes="16x16">
<link rel="stylesheet" href="styles.css">
<!-- <base href="
https://elhacker.info"> -->
</head>
<body>
<header>
<h1>elHacker.INFO Downloads</h1>
<p>[<a href="
https://elhacker.info/descargas.html">Índice de contenido</a>]</p>
<footer>
<small>
<p>Copyright issues contact <a href="mailto:webmaster@elhacker.info">
webmaster@elhacker.info</a></p>
</small>
</footer>
</header>
<main>
<section>
<img src="
https://elhacker.info/icons/back.gif" alt="[Volver]">
<a href="/">Parent Directory</a>
</section>
<section>
<table id="tabla">
<tr>
<th>Seguridad Ofensiva y Pentesting (Hacking Ético)</th>
<th>Ciberseguridad General y Privacidad (Fundamentos)</th>
<th>Infraestructura, Redes y DevOps</th>
<th>Desarrollo de Software y Programación</th>
<th>Recursos Complementarios y Diccionarios</th>
</tr>
</table>
</section>
</main>
<footer>
<small>
<p>Copyleft (2001-2026) elhacker.NET. Algunos derechos reservados.<br>
Usamos cookies propias y de terceros. Consula el <a href="
https://www.elhacker.net/legal.html">Aviso Legal</a> para más información.</p>
</small>
</footer>
<script src="./script.js" defer></script>
</body>
</html>
javascript
const tabla = document.getElementById('tabla')
let filaGeneral = 0
let categoria1 = 0
let categoria2 = 0
let categoria3 = 0
let categoria4 = 0
let categoria5 = 0
const baseDeDatos = {
'(Absolute Basic Concepts) ABCs of Malware Analysis': 2,
'(Tutorial) Hacking Etico Avanzado': 1,
'0.14. Máster en SQL Server_ Desde Cero a Nivel Profesional_': 4,
'2. Digital Marketing Course ( English )': 5,
'2 in 1! Cisco CCNA 200-301 + Python Network Automation': 3,
'3. HTML5 y CSS3': 4,
'4. javascript desde 0': 4,
'5. Desarrolle un VideoJuego desde 0 con C++': 4,
'8. Lenguaje de Programación GO': 4,
'9. Aprende Python desde 0 a Experto Practicando': 4,
'10. ✔HACKING Con [ Python3 ]. Audita, Defiende, Crea!. Año 2019': 1
}
function iniciarCodigo() {
const llaveValor = Object.entries(baseDeDatos)
llaveValor.forEach((elemento) => {
console.log(elemento)
if (elemento[1] == 1) {
categoria1++
crearFila(categoria1)
insertarRecurso(elemento, categoria1)
} else if (elemento[1] == 2) {
categoria2++
crearFila(categoria2)
insertarRecurso(elemento, categoria2)
} else if (elemento[1] == 3) {
categoria3++
crearFila(categoria3)
insertarRecurso(elemento, categoria3)
} else if (elemento[1] == 4) {
categoria4++
crearFila(categoria4)
insertarRecurso(elemento, categoria4)
} else {
categoria5++
crearFila(categoria5)
insertarRecurso(elemento, categoria5)
}
})
}
function crearFila(categoria) {
if (filaGeneral < categoria) {
filaGeneral++
let nuevaFila = tabla.insertRow(-1)
nuevaFila.id = `fila${filaGeneral}`
for (let i = 1; i <= 5; i++) {
let nuevaCelda = nuevaFila.insertCell(-1)
nuevaCelda.id = `fila${filaGeneral}_td${i}`
}
}
}
function insertarRecurso(elemento, categoria) {
const idCelda = `fila${categoria}_td${elemento[1]}`
const columna = document.getElementById(idCelda)
if (columna) {
const recursoCodificado = encodeURIComponent(elemento[0])
const urlCompleta = `https://elhacker.info/Cursos/${recursoCodificado}`
columna.innerHTML = `
<img src="
https://elhacker.info/icons/folder2.png" alt="[Directorio]">
<a href="${urlCompleta}">${elemento[0]}</a>
`
}
}
window.addEventListener('load', iniciarCodigo)
CSS
body {
background-color: #eee;
font-family: Geneve, Arial, Helvetica, sans-serif;
font-size: 12px;
}
a:link {
color: #009;
text-decoration: none;
}
a:visited {
color: #A78989;
text-decoration: none;
}
a:hover {
color: #006;
}