Simulación de Internet html

samuel gaitan
16 sept
8 Min. de lectura

<!DOCTYPE html>

<head>

<title>Simulación de Internet - Conexión Global</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 50%, #16213e 100%);

color: white;

overflow-x: hidden;

min-height: 100vh;

}

.container {

position: relative;

width: 100%;

height: 100vh;

display: flex;

flex-direction: column;

}

.header {

background: rgba(0, 0, 0, 0.3);

backdrop-filter: blur(10px);

border-bottom: 1px solid rgba(255, 255, 255, 0.1);

padding: 20px;

text-align: center;

z-index: 100;

}

.header h1 {

font-size: 2.5rem;

background: linear-gradient(45deg, #00f5ff, #ff00ff, #ffff00);

background-size: 300% 300%;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

animation: gradientShift 3s ease-in-out infinite;

margin-bottom: 10px;

}

.header p {

color: rgba(255, 255, 255, 0.8);

font-size: 1.1rem;

}

@keyframes gradientShift {

0%, 100% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

}

.network-container {

flex: 1;

position: relative;

display: flex;

align-items: center;

justify-content: center;

overflow: hidden;

}

.network-map {

position: absolute;

width: 100%;

height: 100%;

pointer-events: none;

}

.node {

position: absolute;

width: 80px;

height: 80px;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

cursor: pointer;

pointer-events: all;

transition: all 0.3s ease;

box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);

backdrop-filter: blur(5px);

}

.node:hover {

transform: scale(1.2);

box-shadow: 0 0 50px rgba(0, 255, 255, 0.6);

}

.node.google {

background: linear-gradient(135deg, #4285f4, #34a853, #ea4335, #fbbc05);

top: 20%;

left: 20%;

animation: pulse 2s ease-in-out infinite;

}

.node.bing {

background: linear-gradient(135deg, #0078d4, #00bcf2);

top: 20%;

right: 20%;

animation: pulse 2.5s ease-in-out infinite;

}

.node.server {

background: linear-gradient(135deg, #ff6b6b, #ee5a24);

top: 60%;

left: 15%;

animation: pulse 3s ease-in-out infinite;

}

.node.database {

background: linear-gradient(135deg, #a29bfe, #6c5ce7);

top: 60%;

right: 15%;

animation: pulse 2.2s ease-in-out infinite;

}

.node.router {

background: linear-gradient(135deg, #00d2d3, #01a3a4);

top: 40%;

left: 50%;

transform: translateX(-50%);

animation: pulse 1.8s ease-in-out infinite;

}

.node.user {

background: linear-gradient(135deg, #feca57, #ff9ff3);

bottom: 10%;

left: 50%;

transform: translateX(-50%);

animation: pulse 2.8s ease-in-out infinite;

}

@keyframes pulse {

0%, 100% {

transform: scale(1);

box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);

}

50% {

transform: scale(1.05);

box-shadow: 0 0 50px rgba(0, 255, 255, 0.6);

}

.node-label {

position: absolute;

top: -40px;

left: 50%;

transform: translateX(-50%);

font-size: 0.9rem;

font-weight: bold;

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

white-space: nowrap;

}

.connection {

position: absolute;

height: 3px;

background: linear-gradient(90deg, transparent, #00f5ff, #ff00ff, transparent);

background-size: 200% 100%;

border-radius: 2px;

animation: dataFlow 2s linear infinite;

box-shadow: 0 0 10px rgba(0, 245, 255, 0.5);

}

@keyframes dataFlow {

0% { background-position: -200% 0; }

100% { background-position: 200% 0; }

}

.stats-panel {

position: fixed;

top: 50%;

right: 20px;

transform: translateY(-50%);

background: rgba(0, 0, 0, 0.4);

backdrop-filter: blur(15px);

border: 1px solid rgba(255, 255, 255, 0.1);

border-radius: 15px;

padding: 20px;

min-width: 250px;

z-index: 50;

}

.stats-panel h3 {

color: #00f5ff;

margin-bottom: 15px;

text-align: center;

font-size: 1.2rem;

}

.stat {

display: flex;

justify-content: space-between;

margin-bottom: 10px;

padding: 8px;

background: rgba(255, 255, 255, 0.05);

border-radius: 5px;

}

.stat-label {

color: rgba(255, 255, 255, 0.8);

}

.stat-value {

color: #00ff88;

font-weight: bold;

}

.control-panel {

position: fixed;

bottom: 20px;

left: 50%;

transform: translateX(-50%);

display: flex;

gap: 15px;

z-index: 50;

}

.control-btn {

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

border: none;

color: white;

padding: 12px 24px;

border-radius: 25px;

cursor: pointer;

font-weight: bold;

transition: all 0.3s ease;

backdrop-filter: blur(10px);

border: 1px solid rgba(255, 255, 255, 0.1);

}

.control-btn:hover {

transform: translateY(-2px);

box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);

}

.control-btn.active {

background: linear-gradient(135deg, #00f5ff 0%, #ff00ff 100%);

}

.packet {

position: absolute;

width: 8px;

height: 8px;

background: #00ff88;

border-radius: 50%;

box-shadow: 0 0 10px #00ff88;

animation: packetMove 3s linear infinite;

}

@keyframes packetMove {

0% { opacity: 0; transform: scale(0); }

10% { opacity: 1; transform: scale(1); }

90% { opacity: 1; transform: scale(1); }

100% { opacity: 0; transform: scale(0); }

}

.info-popup {

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

background: rgba(0, 0, 0, 0.9);

backdrop-filter: blur(20px);

border: 1px solid rgba(255, 255, 255, 0.2);

border-radius: 20px;

padding: 30px;

max-width: 500px;

display: none;

z-index: 200;

}

.info-popup.show {

display: block;

animation: popupShow 0.3s ease-out;

}

@keyframes popupShow {

from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }

to { opacity: 1; transform: translate(-50%, -50%) scale(1); }

}

.close-popup {

position: absolute;

top: 15px;

right: 20px;

background: none;

border: none;

color: #ff4757;

font-size: 1.5rem;

cursor: pointer;

}

.floating-particles {

position: absolute;

width: 100%;

height: 100%;

overflow: hidden;

pointer-events: none;

}

.particle {

position: absolute;

width: 2px;

height: 2px;

background: rgba(0, 245, 255, 0.6);

border-radius: 50%;

animation: float 20s linear infinite;

}

@keyframes float {

0% {

transform: translateY(100vh) rotate(0deg);

opacity: 0;

}

10% {

opacity: 1;

}

90% {

opacity: 1;

}

100% {

transform: translateY(-100px) rotate(360deg);

opacity: 0;

}

@media (max-width: 768px) {

.stats-panel {

position: fixed;

top: auto;

bottom: 100px;

right: 10px;

left: 10px;

transform: none;

max-width: none;

}

.node {

width: 60px;

height: 60px;

}

.control-panel {

flex-wrap: wrap;

justify-content: center;

}

.control-btn {

padding: 10px 16px;

font-size: 0.9rem;

}

</style>

</head>

<body>

<h1>🌐 Simulación de Internet</h1>

<p>Visualización interactiva de la red global conectando Google y Bing</p>

</div>

<div class="node-label">Google</div>

</div>

</div>

<div class="node-label">Router Central</div>

</div>

<div class="node-label">Servidor Web</div>

</div>

<div class="node-label">Base de Datos</div>

</div>

<div class="node-label">Usuario</div>

</div>

<h3>📊 Estadísticas de Red</h3>

<span class="stat-label">Latencia:</span>

</div>

<span class="stat-label">Throughput:</span>

</div>

<span class="stat-label">Paquetes/seg:</span>

</div>

<span class="stat-label">Nodos activos:</span>

</div>

<span class="stat-label">Conexiones:</span>

</div>

<button class="control-btn active" onclick="toggleSimulation()">▶️ Simular</button>

<button class="control-btn" onclick="resetNetwork()">🔄 Reset</button>

<button class="control-btn" onclick="toggleTraffic()">📊 Tráfico</button>

</div>

</div>

let simulationActive = true;

let trafficVisible = true;

let animationId;

let stats = {

latency: 0,

throughput: 0,

packets: 0

};

const nodeInfo = {

google: {

title: "🌟 Google Search Engine",

description: "Motor de búsqueda más utilizado del mundo. Procesa más de 8.5 mil millones de búsquedas por día usando algoritmos avanzados de PageRank y machine learning.",

specs: "Servidores: 900,000+<br>Centros de datos: 21 regiones<br>Latencia promedio: 100ms<br>Capacidad: 40,000 búsquedas/segundo"

bing: {

title: "🔍 Microsoft Bing",

description: "Motor de búsqueda de Microsoft que utiliza inteligencia artificial y procesamiento de lenguaje natural. Integrado con Copilot para búsquedas conversacionales.",

specs: "Participación de mercado: 3.03%<br>Búsquedas/día: 900 millones<br>Características: AI-powered<br>Integración: Office 365"

router: {

title: "🔄 Router Central",

description: "Dispositivo de red que dirige paquetes de datos entre diferentes redes utilizando protocolos como BGP, OSPF y RIP.",

specs: "Protocolo: BGP/OSPF<br>Capacidad: 100 Gbps<br>Latencia: <1ms<br>Tabla de enrutamiento: 800k+ rutas"

server: {

title: "🖥️ Servidor Web",

description: "Servidor que hospeda sitios web y aplicaciones, procesando peticiones HTTP/HTTPS y entregando contenido a los usuarios.",

specs: "CPU: 64 cores<br>RAM: 512GB<br>Almacenamiento: 10TB SSD<br>Conexiones simultáneas: 10,000+"

database: {

title: "💾 Base de Datos",

description: "Sistema de gestión de base de datos que almacena y organiza información de manera eficiente para consultas rápidas.",

specs: "Tipo: NoSQL/SQL híbrido<br>Capacidad: 100TB<br>Transacciones/seg: 50,000<br>Replicación: Multi-región"

user: {

title: "👤 Usuario Final",

description: "Persona que utiliza Internet para acceder a información, servicios y comunicarse a través de dispositivos conectados.",

specs: "Dispositivos: PC/Mobile<br>Velocidad: 100 Mbps<br>Ubicación: Global<br>Protocolo: HTTP/2, QUIC"

}

};

function initializeNetwork() {

createConnections();

createParticles();

updateStats();

if (simulationActive) {

animate();

}

function createConnections() {

const networkMap = document.getElementById('networkMap');

const connections = [

{from: 'google', to: 'router'},

{from: 'bing', to: 'router'},

{from: 'router', to: 'server'},

{from: 'router', to: 'database'},

{from: 'router', to: 'user'},

{from: 'server', to: 'database'},

{from: 'google', to: 'bing'},

{from: 'user', to: 'server'}

];

connections.forEach((conn, index) => {

setTimeout(() => createConnection(conn.from, conn.to), index * 200);

});

}

function createConnection(from, to) {

const networkMap = document.getElementById('networkMap');

const fromNode = document.querySelector(`.node.${from}`);

const toNode = document.querySelector(`.node.${to}`);

if (!fromNode || !toNode) return;

const fromRect = fromNode.getBoundingClientRect();

const toRect = toNode.getBoundingClientRect();

const mapRect = networkMap.getBoundingClientRect();

const fromX = fromRect.left + fromRect.width/2 - mapRect.left;

const fromY = fromRect.top + fromRect.height/2 - mapRect.top;

const toX = toRect.left + toRect.width/2 - mapRect.left;

const toY = toRect.top + toRect.height/2 - mapRect.top;

const distance = Math.sqrt(Math.pow(toX - fromX, 2) + Math.pow(toY - fromY, 2));

const angle = Math.atan2(toY - fromY, toX - fromX) * 180 / Math.PI;

const connection = document.createElement('div');

connection.className = 'connection';

connection.style.width = `${distance}px`;

connection.style.left = `${fromX}px`;

connection.style.top = `${fromY}px`;

connection.style.transform = `rotate(${angle}deg)`;

connection.style.transformOrigin = '0 50%';

networkMap.appendChild(connection);

}

function createParticles() {

const particlesContainer = document.getElementById('particles');

for (let i = 0; i < 50; i++) {

setTimeout(() => {

const particle = document.createElement('div');

particle.className = 'particle';

particle.style.left = Math.random() * 100 + '%';

particle.style.animationDelay = Math.random() * 20 + 's';

particle.style.animationDuration = (15 + Math.random() * 10) + 's';

particlesContainer.appendChild(particle);

}, i * 100);

}

function createPacket(fromClass, toClass) {

if (!trafficVisible) return;

const fromNode = document.querySelector(`.node.${fromClass}`);

const toNode = document.querySelector(`.node.${toClass}`);

if (!fromNode || !toNode) return;

const packet = document.createElement('div');

packet.className = 'packet';

const fromRect = fromNode.getBoundingClientRect();

const toRect = toNode.getBoundingClientRect();

const containerRect = document.getElementById('networkMap').getBoundingClientRect();

const fromX = fromRect.left + fromRect.width/2 - containerRect.left;

const fromY = fromRect.top + fromRect.height/2 - containerRect.top;

const toX = toRect.left + toRect.width/2 - containerRect.left;

const toY = toRect.top + toRect.height/2 - containerRect.top;

packet.style.left = fromX + 'px';

packet.style.top = fromY + 'px';

document.getElementById('networkMap').appendChild(packet);

// Animate packet movement

const animation = packet.animate([

{ transform: `translate(0, 0)`, opacity: 1 },

{ transform: `translate(${toX - fromX}px, ${toY - fromY}px)`, opacity: 0.8 }

], {

duration: 2000,

easing: 'ease-in-out'

});

animation.onfinish = () => {

packet.remove();

stats.packets++;

};

}

function updateStats() {

stats.latency = 15 + Math.random() * 100;

stats.throughput = 50 + Math.random() * 950;

document.getElementById('latency').textContent = Math.round(stats.latency) + 'ms';

document.getElementById('throughput').textContent = Math.round(stats.throughput) + ' Mbps';

document.getElementById('packets').textContent = stats.packets;

}

function animate() {

if (!simulationActive) return;

// Generate random packet traffic

if (Math.random() < 0.3) {

const routes = [

['user', 'router'],

['router', 'google'],

['router', 'bing'],

['server', 'database'],

['google', 'router'],

['bing', 'router']

];

const route = routes[Math.floor(Math.random() * routes.length)];

createPacket(route[0], route[1]);

}

updateStats();

animationId = requestAnimationFrame(animate);

}

function toggleSimulation() {

simulationActive = !simulationActive;

const btn = event.target;

if (simulationActive) {

btn.textContent = '⏸️ Pausar';

btn.classList.add('active');

animate();

} else {

btn.textContent = '▶️ Simular';

btn.classList.remove('active');

if (animationId) {

cancelAnimationFrame(animationId);

}

function resetNetwork() {

// Clear existing connections and packets

document.querySelectorAll('.connection, .packet').forEach(el => el.remove());

stats.packets = 0;

// Recreate network

setTimeout(() => {

createConnections();

updateStats();

}, 500);

}

function toggleTraffic() {

trafficVisible = !trafficVisible;

const btn = event.target;

if (trafficVisible) {

btn.textContent = '📊 Tráfico';

btn.classList.add('active');

} else {

btn.textContent = '🚫 Sin tráfico';

btn.classList.remove('active');

// Remove existing packets

document.querySelectorAll('.packet').forEach(el => el.remove());

}

function showNetworkInfo() {

const popup = document.getElementById('infoPopup');

const content = document.getElementById('popupContent');

content.innerHTML = `

<h2>🌐 Información de la Red</h2>

<p><strong>Esta simulación muestra cómo funciona Internet a nivel conceptual:</strong></p>

<br>

<h3>🔧 Componentes:</h3>

<li><strong>Google & Bing:</strong> Motores de búsqueda principales</li>

<li><strong>Router Central:</strong> Distribuye el tráfico de red</li>

<li><strong>Servidores:</strong> Procesan y almacenan información</li>

<li><strong>Usuario:</strong> Punto de acceso final</li>

</ul>

<br>

<h3>📡 Tecnologías Utilizadas:</h3>

<li>Protocolo TCP/IP</li>

<li>Enrutamiento BGP/OSPF</li>

<li>HTTP/HTTPS</li>

<li>DNS Resolution</li>

</ul>

<br>

<p><em>Haz clic en cualquier nodo para ver información detallada.</em></p>

popup.classList.add('show');

}

function closePopup() {

document.getElementById('infoPopup').classList.remove('show');

}

// Event listeners

document.addEventListener('DOMContentLoaded', function() {

initializeNetwork();

// Node click events

document.querySelectorAll('.node').forEach(node => {

node.addEventListener('click', function() {

const type = this.dataset.info;

const info = nodeInfo[type];

if (info) {

const popup = document.getElementById('infoPopup');

const content = document.getElementById('popupContent');

content.innerHTML = `

<h2>${info.title}</h2>

<p style="margin: 15px 0; line-height: 1.6;">${info.description}</p>

<br>

<h3>🔧 Especificaciones:</h3>

${info.specs}

</div>

popup.classList.add('show');

}

});

// Close popup when clicking outside

document.getElementById('infoPopup').addEventListener('click', function(e) {

if (e.target === this) {

closePopup();

}

});

// Update stats every 2 seconds

setInterval(updateStats, 2000);

});

// Keyboard shortcuts

document.addEventListener('keydown', function(e) {

switch(e.key.toLowerCase()) {

case ' ':

case 'p':

e.preventDefault();

toggleSimulation();

break;

case 'r':

resetNetwork();

break;

case 't':

toggleTraffic();

break;

case 'i':

showNetworkInfo();

break;

case 'escape':

closePopup();

break;

}

});

</script>

</body>

</html>

REVISTA DE INFORMATICA GIRALISMO

Explora la Tecnología

https://wa.me/57

Simulación de Internet html

Entradas recientes

Comentarios

REVISTA DE INFORMATICA GIRALISMO