| | <!DOCTYPE html> |
| | <html lang="es"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>🌐 Vilanet - Red Comunitaria Autónoma (Guía Completa)</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| | <style> |
| | @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Ubuntu+Mono:wght@400;700&display=swap'); |
| | |
| | :root { |
| | --primary: #3b82f6; |
| | --secondary: #10b981; |
| | --dark: #1e293b; |
| | --light: #f8fafc; |
| | } |
| | |
| | body { |
| | font-family: 'Ubuntu Mono', monospace; |
| | background-color: #0f172a; |
| | color: var(--light); |
| | overflow-x: hidden; |
| | line-height: 1.6; |
| | } |
| | |
| | .tech-card { |
| | transition: all 0.3s ease; |
| | border-left: 4px solid var(--primary); |
| | } |
| | |
| | .tech-card:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); |
| | } |
| | |
| | .code-block { |
| | background-color: #1e293b; |
| | border-radius: 0.5rem; |
| | position: relative; |
| | } |
| | |
| | .code-block::before { |
| | content: ''; |
| | position: absolute; |
| | top: 0; |
| | left: 0; |
| | width: 4px; |
| | height: 100%; |
| | background: linear-gradient(to bottom, var(--primary), var(--secondary)); |
| | border-radius: 0.5rem 0 0 0.5rem; |
| | } |
| | |
| | .timeline-item { |
| | position: relative; |
| | padding-left: 2rem; |
| | } |
| | |
| | .timeline-item::before { |
| | content: ''; |
| | position: absolute; |
| | left: 0; |
| | top: 0; |
| | width: 1px; |
| | height: 100%; |
| | background: linear-gradient(to bottom, var(--primary), transparent); |
| | } |
| | |
| | .timeline-dot { |
| | position: absolute; |
| | left: -6px; |
| | top: 0; |
| | width: 12px; |
| | height: 12px; |
| | border-radius: 50%; |
| | background-color: var(--secondary); |
| | } |
| | |
| | .mesh-node { |
| | animation: pulse 2s infinite; |
| | } |
| | |
| | @keyframes pulse { |
| | 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); } |
| | 70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); } |
| | 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } |
| | } |
| | |
| | .radio-wave { |
| | position: relative; |
| | } |
| | |
| | .radio-wave::after { |
| | content: ''; |
| | position: absolute; |
| | top: 0; |
| | left: 0; |
| | right: 0; |
| | bottom: 0; |
| | border: 2px solid var(--primary); |
| | border-radius: 50%; |
| | animation: ripple 3s infinite; |
| | opacity: 0; |
| | } |
| | |
| | @keyframes ripple { |
| | 0% { transform: scale(0.5); opacity: 0.7; } |
| | 100% { transform: scale(1.5); opacity: 0; } |
| | } |
| | |
| | .explanation-box { |
| | background-color: rgba(30, 41, 59, 0.7); |
| | border-left: 3px solid var(--secondary); |
| | padding: 1rem; |
| | margin: 1rem 0; |
| | border-radius: 0 0.5rem 0.5rem 0; |
| | } |
| | |
| | .analogy { |
| | background-color: rgba(16, 185, 129, 0.1); |
| | border-left: 3px solid var(--secondary); |
| | padding: 1rem; |
| | margin: 1rem 0; |
| | border-radius: 0 0.5rem 0.5rem 0; |
| | } |
| | |
| | .feature-grid { |
| | display: grid; |
| | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
| | gap: 1rem; |
| | } |
| | |
| | .feature-card { |
| | background: linear-gradient(145deg, #1e293b, #0f172a); |
| | border-radius: 0.5rem; |
| | padding: 1.5rem; |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .feature-card:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 10px 20px rgba(0,0,0,0.2); |
| | } |
| | |
| | .comparison-table { |
| | width: 100%; |
| | border-collapse: collapse; |
| | } |
| | |
| | .comparison-table th, .comparison-table td { |
| | padding: 1rem; |
| | text-align: left; |
| | border-bottom: 1px solid #334155; |
| | } |
| | |
| | .comparison-table th { |
| | background-color: #1e293b; |
| | font-weight: bold; |
| | } |
| | |
| | .pros-cons { |
| | display: flex; |
| | gap: 1rem; |
| | margin-top: 1rem; |
| | } |
| | |
| | .pros, .cons { |
| | flex: 1; |
| | padding: 1rem; |
| | border-radius: 0.5rem; |
| | } |
| | |
| | .pros { |
| | background-color: rgba(16, 185, 129, 0.1); |
| | border-left: 3px solid var(--secondary); |
| | } |
| | |
| | .cons { |
| | background-color: rgba(239, 68, 68, 0.1); |
| | border-left: 3px solid #ef4444; |
| | } |
| | </style> |
| | </head> |
| | <body class="min-h-screen"> |
| | <div class="container mx-auto px-4 py-8 max-w-6xl"> |
| | |
| | <header class="mb-12 text-center"> |
| | <div class="flex justify-center items-center mb-4"> |
| | <div class="mesh-node w-16 h-16 rounded-full bg-blue-500 flex items-center justify-center text-white text-2xl mr-4"> |
| | <i class="fas fa-network-wired"></i> |
| | </div> |
| | <h1 class="text-4xl md:text-5xl font-bold bg-gradient-to-r from-blue-500 to-emerald-400 bg-clip-text text-transparent"> |
| | Vilanet |
| | </h1> |
| | </div> |
| | <p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
| | Red Comunitaria Autónoma - Sistema de comunicación resistente que funciona sin internet |
| | </p> |
| | |
| | <div class="explanation-box mt-8 text-left"> |
| | <h3 class="text-lg font-bold text-blue-400 mb-2">¿Qué es Vilanet y por qué es revolucionario?</h3> |
| | <p class="text-gray-300"> |
| | Vilanet es como crear tu propio "internet local" que sigue funcionando incluso cuando fallan las redes convencionales. Imagina poder enviar mensajes, compartir información y mantenerte conectado con tu comunidad durante cortes de internet, desastres naturales o situaciones de emergencia. |
| | </p> |
| | <p class="mt-2 text-gray-300"> |
| | Este sistema combina tecnologías accesibles (como routers modificados) con protocolos avanzados para crear una red que se auto-organiza y se mantiene funcionando sin depender de compañías telefónicas o proveedores de internet. Es como tener tu propio sistema postal digital que no necesita oficinas centrales. |
| | </p> |
| | |
| | <div class="pros-cons mt-4"> |
| | <div class="pros"> |
| | <h4 class="font-bold text-emerald-400 mb-2">✅ Beneficios clave:</h4> |
| | <ul class="space-y-1 text-sm"> |
| | <li>Funciona sin infraestructura tradicional</li> |
| | <li>Resistente a cortes y censura</li> |
| | <li>Privacidad garantizada</li> |
| | <li>Control comunitario total</li> |
| | <li>Costo único sin suscripciones</li> |
| | </ul> |
| | </div> |
| | <div class="cons"> |
| | <h4 class="font-bold text-red-400 mb-2">❌ Limitaciones:</h4> |
| | <ul class="space-y-1 text-sm"> |
| | <li>Velocidades más bajas que internet</li> |
| | <li>Requiere participación activa</li> |
| | <li>Alcance geográfico limitado</li> |
| | <li>Curva de aprendizaje inicial</li> |
| | </ul> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="analogy mt-6"> |
| | <h4 class="font-bold text-emerald-400 mb-2">🔍 Analogía del Sistema Postal</h4> |
| | <p>Piensa en Vilanet como el sistema postal tradicional pero digitalizado:</p> |
| | <ul class="mt-2 space-y-1 text-sm"> |
| | <li><strong>Nodos = Oficinas postales locales</strong> - Cada una puede recibir y enviar mensajes</li> |
| | <li><strong>Red mesh = Carteros</strong> - Llevan los mensajes de un nodo a otro</li> |
| | <li><strong>Protocolos = Reglas postales</strong> - Determinan cómo se enrutan los paquetes</li> |
| | <li><strong>Encriptación = Sobres cerrados</strong> - Nadie puede leer los mensajes excepto el destinatario</li> |
| | </ul> |
| | </div> |
| | </header> |
| |
|
| | |
| | <section class="mb-16"> |
| | <div class="flex items-center mb-8"> |
| | <div class="radio-wave w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white mr-4"> |
| | <i class="fas fa-wifi"></i> |
| | </div> |
| | <h2 class="text-3xl font-bold text-blue-400">📡 El Corazón del Sistema: Cómo Funciona Realmente</h2> |
| | </div> |
| | |
| | <div class="explanation-box"> |
| | <p> |
| | La infraestructura principal de Vilanet funciona como un "teléfono de hilo" moderno y potente, donde cada dispositivo (nodo) puede comunicarse con los demás directamente, sin necesidad de una torre de telefonía central. Cuando un nodo recibe un mensaje, lo retransmite a sus vecinos, creando una red que se extiende como las ondas en el agua. |
| | </p> |
| | <p class="mt-2"> |
| | <strong>Ejemplo práctico:</strong> Si Juan en la Calle A quiere enviar un mensaje a María en la Calle D, pero no están directamente conectados, el mensaje pasará por los nodos intermedios (como vecinos que pasan un recado) hasta llegar a destino. La red encuentra automáticamente el mejor camino, incluso si algunos nodos fallan. |
| | </p> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> |
| | |
| | <div class="tech-card bg-slate-800 p-6 rounded-lg"> |
| | <div class="flex items-center mb-4"> |
| | <div class="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-400 mr-3"> |
| | <i class="fas fa-microchip"></i> |
| | </div> |
| | <h3 class="text-xl font-bold">Equipamiento Básico</h3> |
| | </div> |
| | <ul class="space-y-2 text-gray-300"> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <div> |
| | <span class="font-medium">Raspberry Pi 5</span> |
| | <p class="text-sm text-gray-400">Pequeñas computadoras del tamaño de una tarjeta de crédito que actúan como "cerebros" de cada nodo de la red. Consumen menos energía que una bombilla LED (5-10W) y cuestan alrededor de €80-100 cada una.</p> |
| | </div> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <div> |
| | <span class="font-medium">Tarjetas WiFi Alfa</span> |
| | <p class="text-sm text-gray-400">Adaptadores especiales que dan mayor alcance que los WiFi normales (hasta 15km en condiciones ideales con línea de vista). Precio aproximado: €50-80 por unidad.</p> |
| | </div> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <div> |
| | <span class="font-medium">Antenas Ubiquiti</span> |
| | <p class="text-sm text-gray-400">Como "megáfonos digitales" que amplifican la señal para que llegue más lejos. Existen modelos desde €60 hasta €200 dependiendo de la ganancia y calidad.</p> |
| | </div> |
| | </li> |
| | </ul> |
| | |
| | <div class="mt-4 p-3 bg-slate-700/50 rounded text-sm"> |
| | <p class="text-emerald-400 font-medium">💡 ¿Sabías que?</p> |
| | <p class="text-gray-300">Un nodo completo (RPi + WiFi + antena) puede montarse por unos €200-300, menos que un smartphone de gama media, y servir a decenas de usuarios simultáneamente.</p> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="tech-card bg-slate-800 p-6 rounded-lg"> |
| | <div class="flex items-center mb-4"> |
| | <div class="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-400 mr-3"> |
| | <i class="fas fa-code"></i> |
| | </div> |
| | <h3 class="text-xl font-bold">Programas Esenciales</h3> |
| | </div> |
| | <div class="code-block p-4 mb-4"> |
| | <code class="text-gray-300"> |
| | # En cada nodo:<br> |
| | git clone https://github.com/libremesh/lime-packages<br> |
| | make defconfig && make -j4 |
| | </code> |
| | </div> |
| | <div class="text-sm text-gray-400"> |
| | <p>Estos comandos instalan el software que convierte un router normal en un nodo inteligente de la red mesh. Es como enseñarle a un teléfono normal a formar parte de una red comunitaria.</p> |
| | <p class="mt-2">El software incluye:</p> |
| | <ul class="mt-1 space-y-1"> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <span>Protocolos de enrutamiento (OLSR, B.A.T.M.A.N.)</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <span>Herramientas de monitorización</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <span>Sistema de actualizaciones automáticas</span> |
| | </li> |
| | </ul> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="tech-card bg-slate-800 p-6 rounded-lg"> |
| | <div class="flex items-center mb-4"> |
| | <div class="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-400 mr-3"> |
| | <i class="fas fa-lock"></i> |
| | </div> |
| | <h3 class="text-xl font-bold">Seguridad Integrada</h3> |
| | </div> |
| | <ul class="space-y-2 text-gray-300"> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <div> |
| | <span class="font-medium">WPA3 + WireGuard</span> |
| | <p class="text-sm text-gray-400">Como poner una cerradura digital de alta seguridad en cada mensaje que envías. WPA3 protege la conexión WiFi, mientras que WireGuard (VPN moderna) cifra toda la comunicación entre nodos.</p> |
| | </div> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <div> |
| | <span class="font-medium">Topología de malla</span> |
| | <p class="text-sm text-gray-400">La red no tiene un punto central vulnerable, como una telaraña donde cortar un hilo no la destruye. Si un nodo es comprometido, solo afecta a su conexión directa, no a toda la red.</p> |
| | </div> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <div> |
| | <span class="font-medium">Telegram modificado</span> |
| | <p class="text-sm text-gray-400">Una versión especial de Telegram que funciona sin servidores de internet, usando solo la red local. Los mensajes se cifran de extremo a extremo igual que en Telegram normal.</p> |
| | </div> |
| | </li> |
| | </ul> |
| | |
| | <div class="mt-4 p-3 bg-slate-700/50 rounded text-sm"> |
| | <p class="text-emerald-400 font-medium">🔒 Nivel de seguridad:</p> |
| | <p class="text-gray-300">Vilanet usa encriptación de grado militar (AES-256, Curve25519) similar a la que protege transacciones bancarias y comunicaciones gubernamentales.</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="analogy"> |
| | <h4 class="font-bold text-emerald-400 mb-2">🔍 Analogía Práctica: El Juego del Teléfono</h4> |
| | <p>Imagina que Vilanet es como el juego infantil del "teléfono descompuesto", pero con reglas que evitan que el mensaje se distorsione:</p> |
| | <ul class="mt-2 space-y-1 text-sm"> |
| | <li><strong>Verificación de mensajes:</strong> Cada nodo confirma que recibió el mensaje correctamente antes de pasarlo</li> |
| | <li><strong>Rutas alternativas:</strong> Si un "jugador" no responde, el mensaje toma otro camino</li> |
| | <li><strong>Priorización:</strong> Mensajes urgentes (como alertas) pasan primero</li> |
| | <li><strong>Privacidad:</strong> Solo el destinatario final puede entender el mensaje</li> |
| | </ul> |
| | </div> |
| | |
| | <h3 class="text-2xl font-bold text-blue-400 mb-4 mt-8">Telegram X - La Aplicación de Mensajería Adaptada</h3> |
| | |
| | <div class="explanation-box mb-6"> |
| | <p> |
| | Hemos modificado la aplicación Telegram para que en lugar de conectarse a los servidores de internet normales, use nuestra red comunitaria. Es como convertir un teléfono móvil normal en un walkie-talkie que funciona con nuestra infraestructura. |
| | </p> |
| | <p class="mt-2"> |
| | <strong>Ventaja clave:</strong> Los usuarios no necesitan aprender una nueva aplicación - la interfaz es idéntica a Telegram normal, pero los mensajes viajan por nuestra red segura en lugar de por internet. |
| | </p> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| | <div class="bg-slate-800 p-6 rounded-lg"> |
| | <h4 class="text-lg font-bold mb-2">Cambios Clave:</h4> |
| | <ul class="space-y-3 text-gray-300"> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <div> |
| | <span class="font-medium">Servidores locales</span> |
| | <p class="text-sm text-gray-400">Redirigimos la app para que use computadoras dentro de la comunidad en lugar de servidores lejanos. Esto permite mensajería instantánea incluso sin conexión a internet.</p> |
| | </div> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <div> |
| | <span class="font-medium">Soporte para radio</span> |
| | <p class="text-sm text-gray-400">Añadimos capacidad para enviar mensajes incluso a través de ondas de radio tradicionales cuando el WiFi no llega. Los mensajes se comprimen automáticamente para minimizar el tamaño.</p> |
| | </div> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <div> |
| | <span class="font-medium">Modo offline extendido</span> |
| | <p class="text-sm text-gray-400">Puedes escribir mensajes aunque no haya conexión inmediata - se enviarán automáticamente cuando la red esté disponible.</p> |
| | </div> |
| | </li> |
| | </ul> |
| | </div> |
| | |
| | <div class="bg-slate-800 p-6 rounded-lg"> |
| | <h4 class="text-lg font-bold mb-2">Proceso de Instalación:</h4> |
| | <div class="code-block p-4"> |
| | <code class="text-gray-300"> |
| | git clone --recursive https://github.com/TGX-Android/Telegram-X<br> |
| | nano local.properties # Editar configuración<br> |
| | ./gradlew assembleUniversalRelease |
| | </code> |
| | </div> |
| | <div class="text-sm text-gray-400 mt-2"> |
| | <p>Estos pasos descargan el código, permiten personalizar la app para tu comunidad y generan el archivo instalable para Android. No se necesitan conocimientos avanzados - proporcionamos scripts que automatizan el 90% del proceso.</p> |
| | </div> |
| | <div class="mt-3 p-2 bg-slate-700/50 rounded text-xs"> |
| | <p class="text-blue-400">⚠️ Importante: La app modificada es 100% compatible con Telegram normal. Si hay internet, funciona como siempre; si no, usa automáticamente Vilanet.</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-6 bg-slate-800 p-6 rounded-lg"> |
| | <h4 class="text-lg font-bold mb-2 text-center">📱 Características de Telegram X para Vilanet</h4> |
| | <div class="feature-grid mt-4"> |
| | <div class="feature-card"> |
| | <div class="flex items-center mb-2"> |
| | <div class="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-400 mr-2"> |
| | <i class="fas fa-bolt"></i> |
| | </div> |
| | <h5 class="font-bold">Mensajería instantánea</h5> |
| | </div> |
| | <p class="text-sm text-gray-300">Chats individuales y grupales con la misma velocidad que Telegram normal dentro de la red local.</p> |
| | </div> |
| | |
| | <div class="feature-card"> |
| | <div class="flex items-center mb-2"> |
| | <div class="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-400 mr-2"> |
| | <i class="fas fa-image"></i> |
| | </div> |
| | <h5 class="font-bold">Compartir archivos</h5> |
| | </div> |
| | <p class="text-sm text-gray-300">Envía fotos, documentos y archivos pequeños (hasta 10MB) directamente entre usuarios de la red.</p> |
| | </div> |
| | |
| | <div class="feature-card"> |
| | <div class="flex items-center mb-2"> |
| | <div class="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-400 mr-2"> |
| | <i class="fas fa-map-marked-alt"></i> |
| | </div> |
| | <h5 class="font-bold">Mapas offline</h5> |
| | </div> |
| | <p class="text-sm text-gray-300">Accede a mapas descargables de la zona que funcionan sin conexión a internet.</p> |
| | </div> |
| | |
| | <div class="feature-card"> |
| | <div class="flex items-center mb-2"> |
| | <div class="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-400 mr-2"> |
| | <i class="fas fa-bullhorn"></i> |
| | </div> |
| | <h5 class="font-bold">Alertas comunitarias</h5> |
| | </div> |
| | <p class="text-sm text-gray-300">Sistema prioritario para mensajes de emergencia que llegan a todos los usuarios inmediatamente.</p> |
| | </div> |
| | |
| | <div class="feature-card"> |
| | <div class="flex items-center mb-2"> |
| | <div class="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-400 mr-2"> |
| | <i class="fas fa-book"></i> |
| | </div> |
| | <h5 class="font-bold">Wiki local</h5> |
| | </div> |
| | <p class="text-sm text-gray-300">Base de conocimiento colaborativa con información útil de la comunidad que se sincroniza automáticamente.</p> |
| | </div> |
| | |
| | <div class="feature-card"> |
| | <div class="flex items-center mb-2"> |
| | <div class="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-400 mr-2"> |
| | <i class="fas fa-shield-alt"></i> |
| | </div> |
| | <h5 class="font-bold">Modo seguro</h5> |
| | </div> |
| | <p class="text-sm text-gray-300">En situaciones críticas, la app puede ocultar chats sensibles y activar autodestrucción de mensajes.</p> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="mb-16"> |
| | <div class="flex items-center mb-8"> |
| | <div class="radio-wave w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white mr-4"> |
| | <i class="fas fa-globe"></i> |
| | </div> |
| | <h2 class="text-3xl font-bold text-blue-400">🌍 Conectividad a Diferentes Escalas: Desde tu Calle hasta el Mundo</h2> |
| | </div> |
| | |
| | <div class="explanation-box mb-6"> |
| | <p> |
| | Vilanet funciona como un sistema de comunicación por capas, donde cada tecnología cubre una necesidad diferente según la distancia y las condiciones. Es como tener diferentes tipos de transporte: bicicletas para distancias cortas, autos para la ciudad y aviones para viajes internacionales, pero para datos. |
| | </p> |
| | <p class="mt-2"> |
| | <strong>Lo revolucionario:</strong> Estas tecnologías trabajan juntas sin problemas. Puedes empezar un chat por WiFi local, y si el destinatario está lejos, el sistema automáticamente lo enviará por radio sin que tengas que hacer nada. |
| | </p> |
| | </div> |
| | |
| | <div class="overflow-x-auto mb-8"> |
| | <table class="w-full bg-slate-800 rounded-lg overflow-hidden comparison-table"> |
| | <thead> |
| | <tr class="bg-blue-500/20 text-left"> |
| | <th class="p-4">Alcance</th> |
| | <th class="p-4">Tecnología</th> |
| | <th class="p-4">Distancia</th> |
| | <th class="p-4">Velocidad</th> |
| | <th class="p-4">Uso Ideal</th> |
| | <th class="p-4">Costo Aprox.</th> |
| | </tr> |
| | </thead> |
| | <tbody> |
| | <tr class="border-b border-slate-700 hover:bg-slate-700/50"> |
| | <td class="p-4 font-bold text-blue-400">Local</td> |
| | <td class="p-4">Wi-Fi Mesh</td> |
| | <td class="p-4">5-15km</td> |
| | <td class="p-4">100Mbps</td> |
| | <td class="p-4">Chats, fotos, mapas</td> |
| | <td class="p-4">€200-500/nodo</td> |
| | </tr> |
| | <tr class="border-b border-slate-700 hover:bg-slate-700/50"> |
| | <td class="p-4 font-bold text-blue-400">Regional</td> |
| | <td class="p-4">LoRa Mesh</td> |
| | <td class="p-4">50km</td> |
| | <td class="p-4">300bps</td> |
| | <td class="p-4">Mensajes cortos</td> |
| | <td class="p-4">€100-300/nodo</td> |
| | </tr> |
| | <tr class="border-b border-slate-700 hover:bg-slate-700/50"> |
| | <td class="p-4 font-bold text-blue-400">Global</td> |
| | <td class="p-4">Radio HF</td> |
| | <td class="p-4">Mundial</td> |
| | <td class="p-4">1200bps</td> |
| | <td class="p-4">Emergencias</td> |
| | <td class="p-4">€800-1500/estación</td> |
| | </tr> |
| | <tr class="hover:bg-slate-700/50"> |
| | <td class="p-4 font-bold text-blue-400">Satélite</td> |
| | <td class="p-4">LoRa-to-Sat</td> |
| | <td class="p-4">Mundial</td> |
| | <td class="p-4">100bps</td> |
| | <td class="p-4">Último recurso</td> |
| | <td class="p-4">€300-600/estación</td> |
| | </tr> |
| | </tbody> |
| | </table> |
| | </div> |
| | |
| | <div class="analogy"> |
| | <h4 class="font-bold text-emerald-400 mb-2">🔍 Explicación de Velocidades: El Sistema Postal Digital</h4> |
| | <p>Las velocidades varían porque no todas las tecnologías pueden llevar la misma cantidad de información. Es como comparar:</p> |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4"> |
| | <div class="bg-slate-800 p-4 rounded-lg"> |
| | <div class="flex items-center mb-2"> |
| | <div class="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-400 mr-2"> |
| | <i class="fas fa-truck"></i> |
| | </div> |
| | <h5 class="font-bold">WiFi Mesh (100Mbps)</h5> |
| | </div> |
| | <p class="text-sm text-gray-300">Como un camión de correos: lleva muchos paquetes (datos) rápidamente, pero solo por carreteras (distancia limitada). Ideal para enviar fotos, documentos y chats dentro de la comunidad.</p> |
| | </div> |
| | |
| | <div class="bg-slate-800 p-4 rounded-lg"> |
| | <div class="flex items-center mb-2"> |
| | <div class="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-400 mr-2"> |
| | <i class="fas fa-dove"></i> |
| | </div> |
| | <h5 class="font-bold">LoRa/Radio (300-1200bps)</h5> |
| | </div> |
| | <p class="text-sm text-gray-300">Como palomas mensajeras: llevan pequeños mensajes (texto corto) a grandes distancias, pero no pueden transportar paquetes grandes. Perfecto para alertas y coordinación en emergencias.</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <h3 class="text-2xl font-bold text-blue-400 mt-8 mb-4">📻 Caso Práctico: Conexión con Radio HF</h3> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| | <div class="bg-slate-800 p-6 rounded-lg"> |
| | <h4 class="text-lg font-bold mb-2">Equipo Necesario</h4> |
| | <ul class="space-y-3 text-gray-300"> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <div> |
| | <span class="font-medium">Transceptor Xiegu G90</span> |
| | <p class="text-sm text-gray-400">Radio de 20W que cubre todas las bandas HF (3-30MHz). Precio: ~€450. Consume menos que una bombilla incandescente.</p> |
| | </div> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <div> |
| | <span class="font-medium">TNC-Pi</span> |
| | <p class="text-sm text-gray-400">Adaptador que convierte señales digitales a analógicas para radio. ~€80. Se conecta directamente al Raspberry Pi.</p> |
| | </div> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <div> |
| | <span class="font-medium">Antena dipolo</span> |
| | <p class="text-sm text-gray-400">Puede fabricarse con cable eléctrico común. Costo mínimo (~€20 en materiales).</p> |
| | </div> |
| | </li> |
| | </ul> |
| | |
| | <div class="mt-4 p-3 bg-slate-700/50 rounded text-sm"> |
| | <p class="text-emerald-400 font-medium">💡 ¿Sabías que?</p> |
| | <p class="text-gray-300">Con solo 20W de potencia (menos que una bombilla LED grande), una estación HF puede comunicarse con el otro lado del mundo gracias a la reflexión en la ionosfera.</p> |
| | </div> |
| | </div> |
| | |
| | <div class="bg-slate-800 p-6 rounded-lg"> |
| | <h4 class="text-lg font-bold mb-2">Configuración Básica</h4> |
| | <div class="code-block p-4"> |
| | <code class="text-gray-300"> |
| | # Instalar software AX.25 para radio packet<br> |
| | sudo apt install ax25-tools ax25-node<br><br> |
| | |
| | # Configurar interfaz radio<br> |
| | sudo kissattach /dev/ttyUSB0 radio 192.168.1.1<br><br> |
| | |
| | # Iniciar servicio<br> |
| | sudo systemctl start ax25 |
| | </code> |
| | </div> |
| | <div class="text-sm text-gray-400 mt-3"> |
| | <p>Esta configuración permite que la red local envíe y reciba mensajes a través de ondas de radio. Los usuarios siguen usando Telegram normalmente - el sistema se encarga de la traducción entre formatos automáticamente.</p> |
| | </div> |
| | <div class="mt-3 p-2 bg-slate-700/50 rounded text-xs"> |
| | <p class="text-blue-400">⚠️ Requisito legal: En muchos países necesitarás una licencia de radioaficionado para operar estaciones HF. El examen suele ser sencillo y cubre conocimientos básicos de radio.</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-6 bg-slate-800 p-6 rounded-lg"> |
| | <h4 class="text-lg font-bold mb-4 text-center">🌐 Ejemplo de Red Multinivel</h4> |
| | <div class="flex flex-col items-center"> |
| | <div class="relative w-full max-w-2xl"> |
| | |
| | <div class="flex justify-center mb-8"> |
| | <div class="bg-blue-500/20 p-4 rounded-lg text-center w-64"> |
| | <div class="font-bold text-blue-400 mb-1">Red Local</div> |
| | <div class="text-sm text-gray-300">WiFi Mesh • 5-15km • 100Mbps</div> |
| | <div class="mt-2 text-xs text-blue-300">10-100 usuarios • €200-500/nodo</div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="flex justify-center mb-8"> |
| | <div class="h-16 w-0.5 bg-gradient-to-b from-blue-500 to-emerald-500"></div> |
| | </div> |
| | |
| | |
| | <div class="flex justify-center mb-8"> |
| | <div class="bg-emerald-500/20 p-4 rounded-lg text-center w-64"> |
| | <div class="font-bold text-emerald-400 mb-1">Conexión Regional</div> |
| | <div class="text-sm text-gray-300">LoRa Mesh • 50km • 300bps</div> |
| | <div class="mt-2 text-xs text-emerald-300">Enlace entre comunidades • €100-300/nodo</div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="flex justify-center mb-8"> |
| | <div class="h-16 w-0.5 bg-gradient-to-b from-emerald-500 to-purple-500"></div> |
| | </div> |
| | |
| | |
| | <div class="flex justify-center"> |
| | <div class="bg-purple-500/20 p-4 rounded-lg text-center w-64"> |
| | <div class="font-bold text-purple-400 mb-1">Conexión Global</div> |
| | <div class="text-sm text-gray-300">Radio HF • Mundial • 1200bps</div> |
| | <div class="mt-2 text-xs text-purple-300">Emergencias • €800-1500/estación</div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | <p class="mt-6 text-center text-sm text-gray-400">Este diagrama muestra cómo Vilanet escala desde comunicación local hasta global. Cada nivel complementa a los otros, creando un sistema resiliente que funciona en cualquier situación.</p> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="mb-16"> |
| | <div class="flex items-center mb-8"> |
| | <div class="radio-wave w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white mr-4"> |
| | <i class="fas fa-shield-alt"></i> |
| | </div> |
| | <h2 class="text-3xl font-bold text-blue-400">🛡️ Protección Contra Amenazas: Diseñado para Sobrevivir</h2> |
| | </div> |
| | |
| | <div class="explanation-box mb-6"> |
| | <p> |
| | Vilanet está diseñado para resistir desde cortes de energía hasta pulsos electromagnéticos que podrían dañar equipos electrónicos. Hemos implementado protecciones físicas y digitales para garantizar que la red siga funcionando en condiciones extremas. |
| | </p> |
| | <p class="mt-2"> |
| | <strong>Escenario real:</strong> Imagina que ocurre un desastre natural (terremoto, huracán) que derriba torres de telefonía y corta la electricidad por semanas. Vilanet puede seguir funcionando porque: |
| | </p> |
| | <ul class="mt-2 space-y-1"> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <span>Los nodos principales tienen protección Faraday contra pulsos electromagnéticos</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <span>Funcionan con energía solar/baterías</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <span>No dependen de infraestructura centralizada</span> |
| | </li> |
| | </ul> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| | <div class="bg-slate-800 p-6 rounded-lg"> |
| | <h3 class="text-xl font-bold mb-4 flex items-center"> |
| | <i class="fas fa-shield-virus mr-3 text-emerald-400"></i> |
| | Jaula Faraday: Tu Escudo Electrónico |
| | </h3> |
| | <ul class="space-y-3 text-gray-300"> |
| | <li> |
| | <div class="font-bold text-blue-400">Para el servidor principal:</div> |
| | <div>Caja de aluminio de 2mm (€120) que actúa como un "escudo" contra pulsos electromagnéticos. Pruebas muestran que protege contra campos de hasta 50kV/m (suficiente para sobrevivir a un EMP nuclear).</div> |
| | <div class="text-sm text-gray-400 mt-1">Funciona como el caparazón de una tortuga, protegiendo el equipo sensible en su interior. Se puede fabricar artesanalmente con materiales comunes.</div> |
| | </li> |
| | <li> |
| | <div class="font-bold text-blue-400">Para dispositivos móviles:</div> |
| | <div>Bolsas especiales (€25/unidad) que protegen teléfonos y tablets cuando no se usan. Hechas de tejido metálico que bloquea señales externas.</div> |
| | <div class="text-sm text-gray-400 mt-1">Como una funda a prueba de rayos para tus dispositivos. También evita el rastreo por GPS cuando está activa.</div> |
| | </li> |
| | </ul> |
| | |
| | <div class="mt-4 p-3 bg-slate-700/50 rounded text-sm"> |
| | <p class="text-emerald-400 font-medium">🔍 ¿Cómo funciona?</p> |
| | <p class="text-gray-300">Una jaula Faraday distribuye cualquier carga electromagnética alrededor del exterior del recipiente, sin permitir que penetre al interior. Es el mismo principio que hace que los aviones sean seguros durante tormentas eléctricas.</p> |
| | </div> |
| | </div> |
| | |
| | <div class="bg-slate-800 p-6 rounded-lg"> |
| | <h3 class="text-xl font-bold mb-4 flex items-center"> |
| | <i class="fas fa-database mr-3 text-emerald-400"></i> |
| | Respaldo de Datos a Prueba de Todo |
| | </h3> |
| | <div class="code-block p-4 mb-3"> |
| | <code class="text-gray-300"> |
| | # Copia de seguridad automática<br> |
| | sudo apt install growisofs<br> |
| | growisofs -Z /dev/sr0 -r -J /var/backups |
| | </code> |
| | </div> |
| | <div class="text-gray-300"> |
| | <p>Estos comandos configuran copias de seguridad en discos especiales (M-DISC) que:</p> |
| | <ul class="mt-2 space-y-1 text-sm"> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <span><strong>Resisten 1000 años</strong> sin degradarse - usan una capa de grabación de piedra (rock-like)</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <span><strong>Inmunes a imanes/radiación</strong> - a diferencia de discos duros o memorias flash</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <span><strong>Legibles con cualquier lector de DVD</strong> - no necesitan hardware especial</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <span><strong>Costo accesible</strong> - ~€2 por disco de 25GB</span> |
| | </li> |
| | </ul> |
| | </div> |
| | |
| | <div class="mt-4 p-3 bg-slate-700/50 rounded text-sm"> |
| | <p class="text-emerald-400 font-medium">📅 Política de respaldos recomendada:</p> |
| | <ul class="text-gray-300 text-sm space-y-1"> |
| | <li>Diario: En discos reescribibles (para datos cambiantes)</li> |
| | <li>Semanal: En M-DISC (para archivos importantes)</li> |
| | <li>Mensual: Copia fuera del sitio (en lugar seguro)</li> |
| | </ul> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="analogy mt-6"> |
| | <h4 class="font-bold text-emerald-400 mb-2">🔍 ¿Por qué esta protección es crucial?</h4> |
| | <p>En situaciones de crisis (desastres naturales, conflictos), las redes convencionales suelen ser las primeras en fallar. Vilanet está diseñado específicamente para:</p> |
| | <ul class="mt-2 space-y-1"> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <span><strong>Resistir cortes prolongados de energía</strong> - los nodos pueden funcionar con paneles solares pequeños (50W son suficientes para un nodo)</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <span><strong>Proteger la información</strong> contra interferencias deliberadas o accidentales - tus mensajes no pueden ser borrados o interceptados</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <span><strong>Mantener comunicación básica</strong> cuando todo lo demás ha fallado - incluso si solo queda un nodo funcionando, puede retransmitir mensajes cruciales</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <span><strong>Recuperarse rápidamente</strong> después de daños - gracias a los respaldos indestructibles y la auto-organización de la red</span> |
| | </li> |
| | </ul> |
| | |
| | <div class="mt-4 p-3 bg-blue-500/10 rounded border border-blue-500/30"> |
| | <p class="text-blue-400 font-medium">🛡️ Caso de uso real:</p> |
| | <p class="text-sm text-gray-300">Durante los apagones en Venezuela (2019), comunidades con redes mesh mantuvieron comunicación cuando el internet y la telefonía colapsaron. Usaban energía de autos y paneles solares, demostrando la efectividad de este enfoque.</p> |
| | </div> |
| | </div> |
| | |
| | <h3 class="text-2xl font-bold text-blue-400 mt-12 mb-4">⚡ Energía Alternativa: Manteniendo la Red Viva</h3> |
| | |
| | <div class="explanation-box mb-6"> |
| | <p> |
| | La electricidad es el "oxígeno" de cualquier red digital. Vilanet está diseñado para funcionar con fuentes alternativas cuando la red eléctrica falla. Estos son los sistemas recomendados según diferentes escenarios: |
| | </p> |
| | </div> |
| | |
| | <div class="overflow-x-auto mb-8"> |
| | <table class="w-full bg-slate-800 rounded-lg overflow-hidden comparison-table"> |
| | <thead> |
| | <tr class="bg-blue-500/20 text-left"> |
| | <th class="p-4">Escenario</th> |
| | <th class="p-4">Solución</th> |
| | <th class="p-4">Autonomía</th> |
| | <th class="p-4">Costo</th> |
| | <th class="p-4">Complejidad</th> |
| | <th class="p-4">Recomendación</th> |
| | </tr> |
| | </thead> |
| | <tbody> |
| | <tr class="border-b border-slate-700 hover:bg-slate-700/50"> |
| | <td class="p-4 font-bold text-blue-400">Cortes breves (horas)</td> |
| | <td class="p-4">Baterías de respaldo</td> |
| | <td class="p-4">6-12 horas</td> |
| | <td class="p-4">€50-100</td> |
| | <td class="p-4">⭐</td> |
| | <td class="p-4">Batería de 12V 7Ah + inversor pequeño</td> |
| | </tr> |
| | <tr class="border-b border-slate-700 hover:bg-slate-700/50"> |
| | <td class="p-4 font-bold text-blue-400">Cortes medios (días)</td> |
| | <td class="p-4">Panel solar + batería</td> |
| | <td class="p-4">Indefinido (con sol)</td> |
| | <td class="p-4">€200-400</td> |
| | <td class="p-4">⭐⭐</td> |
| | <td class="p-4">Panel 100W + batería 50Ah + controlador</td> |
| | </tr> |
| | <tr class="border-b border-slate-700 hover:bg-slate-700/50"> |
| | <td class="p-4 font-bold text-blue-400">Cortes largos (semanas)</td> |
| | <td class="p-4">Sistema híbrido</td> |
| | <td class="p-4">Semanas</td> |
| | <td class="p-4">€500-1000</td> |
| | <td class="p-4">⭐⭐⭐</td> |
| | <td class="p-4">Solar + batería + generador manual</td> |
| | </tr> |
| | <tr class="hover:bg-slate-700/50"> |
| | <td class="p-4 font-bold text-blue-400">Situación extrema</td> |
| | <td class="p-4">Energía humana</td> |
| | <td class="p-4">Mientras haya usuarios</td> |
| | <td class="p-4">€20-50</td> |
| | <td class="p-4">⭐⭐</td> |
| | <td class="p-4">Bicigenerador o dinamo manual</td> |
| | </tr> |
| | </tbody> |
| | </table> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| | <div class="bg-slate-800 p-6 rounded-lg"> |
| | <h4 class="text-lg font-bold mb-2">Configuración Solar Básica</h4> |
| | <div class="code-block p-4"> |
| | <code class="text-gray-300"> |
| | # Monitoreo de energía en Raspberry Pi<br> |
| | sudo apt install power-monitor<br> |
| | power-monitor --config solar-setup.json |
| | </code> |
| | </div> |
| | <div class="text-sm text-gray-400 mt-3"> |
| | <p>Este software ayuda a optimizar el consumo energético según la disponibilidad de energía. Puede apagar servicios no esenciales cuando la carga de la batería es baja, extendiendo la autonomía.</p> |
| | </div> |
| | <div class="mt-3 p-2 bg-slate-700/50 rounded text-xs"> |
| | <p class="text-blue-400">💡 Consejo: Un nodo completo (RPi + radio) consume ~10W. Un panel solar de 50W puede mantenerlo funcionando indefinidamente en la mayoría de climas.</p> |
| | </div> |
| | </div> |
| | |
| | <div class="bg-slate-800 p-6 rounded-lg"> |
| | <h4 class="text-lg font-bold mb-2">Bicigenerador Casero</h4> |
| | <ul class="space-y-2 text-gray-300"> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <div> |
| | <span class="font-medium">Materiales necesarios:</span> |
| | <p class="text-sm text-gray-400">Bicicleta vieja, dinamo de auto (€15), regulador de voltaje (€10), batería de moto (€30)</p> |
| | </div> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <div> |
| | <span class="font-medium">Rendimiento:</span> |
| | <p class="text-sm text-gray-400">30 minutos de pedaleo = 1 hora de funcionamiento del nodo</p> |
| | </div> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <div> |
| | <span class="font-medium">Ventaja:</span> |
| | <p class="text-sm text-gray-400">No depende del clima como la solar, y provee ejercicio</p> |
| | </div> |
| | </li> |
| | </ul> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="mb-16"> |
| | <div class="flex items-center mb-8"> |
| | <div class="radio-wave w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white mr-4"> |
| | <i class="fas fa-tools"></i> |
| | </div> |
| | <h2 class="text-3xl font-bold text-blue-400">📱 Personalización de la Aplicación: Telegram Adaptado</h2> |
| | </div> |
| | |
| | <div class="explanation-box mb-6"> |
| | <p> |
| | Hemos adaptado Telegram (una app de mensajería popular) para que funcione con Vilanet. Estas modificaciones permiten que la app use nuestra red comunitaria en lugar de internet normal, manteniendo una experiencia familiar para los usuarios. |
| | </p> |
| | <p class="mt-2"> |
| | <strong>Beneficio clave:</strong> Los miembros de la comunidad no necesitan aprender una nueva aplicación - usan la misma interfaz que ya conocen, pero los mensajes viajan por nuestra red segura. |
| | </p> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> |
| | <div class="bg-slate-800 p-6 rounded-lg"> |
| | <h3 class="text-xl font-bold mb-4">Cambios Principales:</h3> |
| | <ul class="space-y-3 text-gray-300"> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <div> |
| | <span class="font-medium">Redirección de servidores</span> |
| | <p class="text-sm text-gray-400">La app ahora busca los servidores dentro de la red local en lugar de conectarse a internet. Esto permite mensajería instantánea incluso sin conexión a internet global.</p> |
| | </div> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <div> |
| | <span class="font-medium">Soporte para radio</span> |
| | <p class="text-sm text-gray-400">Añadimos capacidad para enviar mensajes incluso a través de ondas de radio tradicionales cuando el WiFi no llega. Los mensajes se comprimen automáticamente para minimizar el tamaño.</p> |
| | </div> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <div> |
| | <span class="font-medium">Modo offline extendido</span> |
| | <p class="text-sm text-gray-400">Puedes escribir mensajes aunque no haya conexión inmediata - se enviarán automáticamente cuando la red esté disponible.</p> |
| | </div> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <div> |
| | <span class="font-medium">Priorización inteligente</span> |
| | <p class="text-sm text-gray-400">Los mensajes marcados como "urgentes" saltan la cola y usan rutas más directas, incluso si consumen más energía.</p> |
| | </div> |
| | </li> |
| | </ul> |
| | </div> |
| | |
| | <div class="bg-slate-800 p-6 rounded-lg"> |
| | <h3 class="text-xl font-bold mb-4">Requisitos Técnicos:</h3> |
| | <div class="code-block p-4"> |
| | <code class="text-gray-300"> |
| | Android NDK r25c<br> |
| | TDLib 1.8.6<br> |
| | Java 17<br> |
| | Python 3.9+<br> |
| | Git 2.35+ |
| | </code> |
| | </div> |
| | <div class="text-sm text-gray-400 mt-3"> |
| | <p>Estas son las herramientas necesarias para compilar la aplicación modificada. Son equivalentes a los "utensilios de cocina" que necesitas para preparar este "plato" software.</p> |
| | <p class="mt-2">Proporcionamos scripts que automatizan el 90% del proceso de compilación. Incluso usuarios con conocimientos técnicos básicos pueden seguir nuestras guías paso a paso.</p> |
| | </div> |
| | <div class="mt-3 p-2 bg-slate-700/50 rounded text-xs"> |
| | <p class="text-blue-400">⚠️ Compatibilidad: La app modificada es 100% compatible con Telegram normal. Si hay internet, funciona como siempre; si no, usa automáticamente Vilanet sin que el usuario note la diferencia.</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <h3 class="text-2xl font-bold text-blue-400 mb-4">Ejemplo Práctico: Puente Matrix-LoRa</h3> |
| | |
| | <div class="explanation-box mb-4"> |
| | <p> |
| | Este pequeño programa actúa como traductor entre la red digital (Matrix) y los radios LoRa (ondas de radio). Es como un intérprete que permite que mensajes escritos en smartphones lleguen a radios tradicionales y viceversa. |
| | </p> |
| | <p class="mt-2"> |
| | <strong>Uso típico:</strong> Un médico en el pueblo puede recibir consultas por Telegram en su teléfono, mientras un enfermero en una aldea remota sin cobertura celular las recibe en su radio LoRa, respondiendo de igual manera. |
| | </p> |
| | </div> |
| | |
| | <div class="bg-slate-800 p-6 rounded-lg"> |
| | <div class="code-block p-4"> |
| | <code class="text-gray-300"> |
| | # matrix_lora_bridge.py<br> |
| | from matrix_client.client import MatrixClient<br> |
| | import serial<br><br> |
| | |
| | # Conectar al servidor Matrix local<br> |
| | matrix = MatrixClient("http://local.matrix:8008")<br> |
| | # Conectar al radio LoRa<br> |
| | lora = serial.Serial('/dev/ttyUSB0', 9600)<br><br> |
| | |
| | # Cuando llega un mensaje en Matrix<br> |
| | def handle_room_message(room, event):<br> |
| | if event['type'] == "m.room.message":<br> |
| | # Enviarlo por radio LoRa<br> |
| | lora.write(f"{event['sender']}: {event['content']['body']}\n".encode())<br><br> |
| | |
| | # Escuchar mensajes continuamente<br> |
| | matrix.add_listener(handle_room_message)<br> |
| | matrix.listen_forever() |
| | </code> |
| | </div> |
| | <div class="text-sm text-gray-400 mt-3"> |
| | <p>Este código se ejecuta en un Raspberry Pi conectado tanto a la red local como a un radio LoRa. Cuando recibe un mensaje de chat, lo reenvía por radio, y viceversa.</p> |
| | <p class="mt-2">Características avanzadas incluidas:</p> |
| | <ul class="mt-1 space-y-1"> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <span>Compresión de mensajes para ahorrar ancho de banda</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <span>Priorización de mensajes urgentes</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <span>Reintentos automáticos en caso de fallo</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <span>Registro de mensajes para auditoría</span> |
| | </li> |
| | </ul> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-6 bg-slate-800 p-6 rounded-lg"> |
| | <h4 class="text-lg font-bold mb-4 text-center">🔄 Flujo de Mensajes en Vilanet</h4> |
| | <div class="flex flex-col items-center"> |
| | <div class="relative w-full max-w-2xl"> |
| | |
| | <div class="flex items-center mb-8"> |
| | <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white mr-4"> |
| | 1 |
| | </div> |
| | <div class="bg-blue-500/20 p-4 rounded-lg flex-1"> |
| | <div class="font-bold text-blue-400">Usuario escribe mensaje</div> |
| | <div class="text-sm text-gray-300">En Telegram normal, como siempre</div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="flex items-center mb-8"> |
| | <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white mr-4"> |
| | 2 |
| | </div> |
| | <div class="bg-blue-500/20 p-4 rounded-lg flex-1"> |
| | <div class="font-bold text-blue-400">App detecta conexión</div> |
| | <div class="text-sm text-gray-300">Si hay internet, usa servidores Telegram; si no, usa nodos Vilanet</div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="flex items-center mb-8"> |
| | <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white mr-4"> |
| | 3 |
| | </div> |
| | <div class="bg-blue-500/20 p-4 rounded-lg flex-1"> |
| | <div class="font-bold text-blue-400">Red elige mejor ruta</div> |
| | <div class="text-sm text-gray-300">WiFi si el destinatario está cerca, radio si está lejos, mezcla si es necesario</div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="flex items-center"> |
| | <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white mr-4"> |
| | 4 |
| | </div> |
| | <div class="bg-blue-500/20 p-4 rounded-lg flex-1"> |
| | <div class="font-bold text-blue-400">Destinatario recibe mensaje</div> |
| | <div class="text-sm text-gray-300">En su Telegram, sin saber qué tecnología se usó para enviarlo</div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | <p class="mt-6 text-center text-sm text-gray-400">Este flujo muestra cómo Vilanet integra tecnologías heterogéneas en una experiencia de usuario unificada. La complejidad técnica queda oculta tras la interfaz familiar de Telegram.</p> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="mb-16"> |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| | <div> |
| | <div class="flex items-center mb-8"> |
| | <div class="radio-wave w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white mr-4"> |
| | <i class="fas fa-calendar-alt"></i> |
| | </div> |
| | <h2 class="text-3xl font-bold text-blue-400">⏳ Plan de Implementación Paso a Paso</h2> |
| | </div> |
| | |
| | <div class="explanation-box mb-6"> |
| | <p> |
| | Implementar Vilanet en una comunidad es un proceso gradual que combina trabajo técnico con capacitación. Hemos dividido el proceso en fases manejables para asegurar el éxito, incluso en comunidades con recursos limitados. |
| | </p> |
| | <p class="mt-2"> |
| | <strong>Filosofía:</strong> Comenzar pequeño, probar, aprender y expandir. Cada fase construye sobre la anterior, permitiendo ajustes según las necesidades reales de la comunidad. |
| | </p> |
| | </div> |
| | |
| | <div class="bg-slate-800 p-6 rounded-lg"> |
| | <div class="space-y-6"> |
| | <div class="timeline-item"> |
| | <div class="timeline-dot"></div> |
| | <h3 class="text-xl font-bold text-blue-400 mb-2">Fase 1: Infraestructura Básica (2 semanas)</h3> |
| | <ul class="text-gray-300 text-sm space-y-1 mb-1"> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <span><strong>Instalar 3 nodos principales</strong> en ubicaciones estratégicas (centro comunitario, casa de líder local, punto alto)</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <span><strong>Configurar la red mesh básica</strong> - prueba de conectividad entre nodos</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <span><strong>Capacitación inicial</strong> para 2-3 técnicos locales</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <span><strong>Primeras pruebas</strong> con usuarios clave (líderes comunitarios, personal médico)</span> |
| | </li> |
| | </ul> |
| | <div class="mt-2 p-2 bg-slate-700/50 rounded text-xs"> |
| | <p class="text-blue-400">🎯 Objetivo: Tener una red funcional que cubra el área central de la comunidad, permitiendo mensajería básica.</p> |
| | </div> |
| | </div> |
| | |
| | <div class="timeline-item"> |
| | <div class="timeline-dot"></div> |
| | <h3 class="text-xl font-bold text-blue-400 mb-2">Fase 2: Aplicación de Mensajería (1 semana)</h3> |
| | <ul class="text-gray-300 text-sm space-y-1 mb-1"> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <span><strong>Modificar y compilar Telegram X</strong> para la comunidad específica</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <span><strong>Distribuir la app</strong> a los primeros 20-30 usuarios</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <span><strong>Talleres de capacitación</strong> para usuarios no técnicos</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <span class="text-emerald-400 mr-2">›</span> |
| | <span><strong>Recopilar feedback</strong> y ajustar configuración</span> |
| |
|
| | </html> |
