{"id":8142,"date":"2025-09-24T18:19:03","date_gmt":"2025-09-24T21:19:03","guid":{"rendered":"https:\/\/www.elfirmamento.com.ar\/?page_id=8142"},"modified":"2025-09-24T20:03:10","modified_gmt":"2025-09-24T23:03:10","slug":"elementor-8142","status":"publish","type":"page","link":"https:\/\/www.elfirmamento.com.ar\/?page_id=8142","title":{"rendered":"EEI"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n \n \n Ubicaci\u00f3n de la ISS en Tiempo Real<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" \/>\n <style>\n body {\n margin: 0;\n padding: 0;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);\n min-height: 100vh;\n }\n \n .container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n }\n \n h1 {\n text-align: center;\n color: white;\n margin-bottom: 30px;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\n font-size: 2.5em;\n }\n \n .info-panel {\n background: rgba(255, 255, 255, 0.95);\n border-radius: 15px;\n padding: 20px;\n margin-bottom: 20px;\n box-shadow: 0 8px 32px rgba(0,0,0,0.1);\n backdrop-filter: blur(10px);\n }\n \n .info-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 20px;\n margin-bottom: 20px;\n }\n \n .info-item {\n text-align: center;\n padding: 15px;\n background: linear-gradient(145deg, #f0f0f0, #e0e0e0);\n border-radius: 10px;\n box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n }\n \n .info-item h3 {\n margin: 0 0 10px 0;\n color: #333;\n font-size: 1.1em;\n }\n \n .info-item .value {\n font-size: 1.5em;\n font-weight: bold;\n color: #2a5298;\n }\n \n #map {\n height: 500px;\n border-radius: 15px;\n box-shadow: 0 8px 32px rgba(0,0,0,0.2);\n overflow: hidden;\n }\n \n .status {\n text-align: center;\n padding: 10px;\n border-radius: 8px;\n margin: 10px 0;\n font-weight: bold;\n }\n \n .status.online {\n background: rgba(76, 175, 80, 0.2);\n color: #2e7d32;\n border: 1px solid #4caf50;\n }\n \n .status.offline {\n background: rgba(244, 67, 54, 0.2);\n color: #c62828;\n border: 1px solid #f44336;\n }\n \n .update-info {\n text-align: center;\n color: #666;\n font-size: 0.9em;\n margin-top: 10px;\n }\n \n @keyframes pulse {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.1); }\n 100% { transform: scale(1); }\n }\n \n .iss-marker, .iss-marker-moving {\n z-index: 1000;\n }\n \n .iss-marker {\n animation: pulse 2s infinite;\n }\n \n .iss-marker-moving {\n \/* Sin animaci\u00f3n de pulso durante el movimiento para mayor suavidad *\/\n }\n\n .leaflet-popup-content {\n min-width: 200px;\n }\n \n .orbit-legend {\n position: absolute;\n top: 10px;\n right: 10px;\n background: rgba(255, 255, 255, 0.9);\n padding: 10px;\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.2);\n font-size: 0.9em;\n z-index: 1000;\n }\n \n .legend-item {\n display: flex;\n align-items: center;\n margin: 5px 0;\n }\n \n .legend-line {\n width: 20px;\n height: 3px;\n margin-right: 8px;\n }\n \n .recent-path {\n background: linear-gradient(90deg, #00ff88, #00cc66);\n }\n \n .predicted-orbit {\n background: linear-gradient(90deg, #ff6b6b, #ff4444);\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <h1>\ud83d\udef0\ufe0f Programa El Firmamento - Estaci\u00f3n Espacial Internacional - Ubicaci\u00f3n en Tiempo Real<\/h1>\n \n <div class=\"info-panel\">\n <div id=\"status\" class=\"status offline\">Conectando...<\/div>\n \n <div class=\"info-grid\">\n <div class=\"info-item\">\n <h3>Latitud<\/h3>\n <div id=\"latitude\" class=\"value\">--<\/div>\n <\/div>\n <div class=\"info-item\">\n <h3>Longitud<\/h3>\n <div id=\"longitude\" class=\"value\">--<\/div>\n <\/div>\n <div class=\"info-item\">\n <h3>Velocidad<\/h3>\n <div id=\"velocity\" class=\"value\">-- km\/h<\/div>\n <\/div>\n <div class=\"info-item\">\n <h3>Altitud<\/h3>\n <div id=\"altitude\" class=\"value\">-- km<\/div>\n <\/div>\n <\/div>\n \n <div class=\"update-info\">\n \u00daltima actualizaci\u00f3n: <span id=\"lastUpdate\">--<\/span>\n <\/div>\n <\/div>\n \n <div id=\"map\">\n <div class=\"orbit-legend\">\n <div class=\"legend-item\">\n <div class=\"legend-line recent-path\"><\/div>\n <span>Trayectoria reciente<\/span>\n <\/div>\n <div class=\"legend-item\">\n <div class=\"legend-line predicted-orbit\"><\/div>\n <span>\u00d3rbita predicha<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\n <script>\n let map;\n let issMarker;\n let issPath = [];\n let pathPolyline;\n let orbitPolyline;\n let updateInterval;\n let animationInterval;\n let lastPosition = null;\n let currentPosition = null;\n let targetPosition = null;\n let animationProgress = 0;\n\n \/\/ Inicializar el mapa\n function initMap() {\n map = L.map('map').setView([0, 0], 2);\n \n \/\/ Agregar capa de mapa (OpenStreetMap)\n L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n attribution: '\u00a9 OpenStreetMap contributors'\n }).addTo(map);\n\n \/\/ Crear icono personalizado de la ISS (representaci\u00f3n visual realista)\n const issIcon = L.divIcon({\n html: `\n <div style=\"transform: rotate(0deg); transition: transform 0.5s ease;\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" style=\"filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));\">\n <!-- Cuerpo principal -->\n <rect x=\"15\" y=\"10\" width=\"10\" height=\"20\" fill=\"#C0C0C0\" stroke=\"#808080\" stroke-width=\"1\"\/>\n <!-- Paneles solares izquierdos -->\n <rect x=\"2\" y=\"8\" width=\"12\" height=\"4\" fill=\"#1E3A8A\" stroke=\"#3B82F6\" stroke-width=\"1\"\/>\n <rect x=\"2\" y=\"14\" width=\"12\" height=\"4\" fill=\"#1E3A8A\" stroke=\"#3B82F6\" stroke-width=\"1\"\/>\n <rect x=\"2\" y=\"20\" width=\"12\" height=\"4\" fill=\"#1E3A8A\" stroke=\"#3B82F6\" stroke-width=\"1\"\/>\n <rect x=\"2\" y=\"26\" width=\"12\" height=\"4\" fill=\"#1E3A8A\" stroke=\"#3B82F6\" stroke-width=\"1\"\/>\n <!-- Paneles solares derechos -->\n <rect x=\"26\" y=\"8\" width=\"12\" height=\"4\" fill=\"#1E3A8A\" stroke=\"#3B82F6\" stroke-width=\"1\"\/>\n <rect x=\"26\" y=\"14\" width=\"12\" height=\"4\" fill=\"#1E3A8A\" stroke=\"#3B82F6\" stroke-width=\"1\"\/>\n <rect x=\"26\" y=\"20\" width=\"12\" height=\"4\" fill=\"#1E3A8A\" stroke=\"#3B82F6\" stroke-width=\"1\"\/>\n <rect x=\"26\" y=\"26\" width=\"12\" height=\"4\" fill=\"#1E3A8A\" stroke=\"#3B82F6\" stroke-width=\"1\"\/>\n <!-- M\u00f3dulo principal -->\n <circle cx=\"20\" cy=\"20\" r=\"3\" fill=\"#FFD700\" stroke=\"#FFA500\" stroke-width=\"1\"\/>\n <!-- Antenas -->\n <line x1=\"20\" y1=\"5\" x2=\"20\" y2=\"10\" stroke=\"#FF6B6B\" stroke-width=\"2\"\/>\n <line x1=\"20\" y1=\"30\" x2=\"20\" y2=\"35\" stroke=\"#FF6B6B\" stroke-width=\"2\"\/>\n <\/svg>\n <\/div>\n `,\n className: 'iss-marker',\n iconSize: [40, 40],\n iconAnchor: [20, 20]\n });\n\n \/\/ Crear marcador para la ISS\n issMarker = L.marker([0, 0], {icon: issIcon}).addTo(map);\n \n \/\/ Crear polyline para la trayectoria reciente (\u00faltimos puntos)\n pathPolyline = L.polyline([], {\n color: '#00ff88',\n weight: 3,\n opacity: 0.8,\n dashArray: '10, 5'\n }).addTo(map);\n\n \/\/ Crear polyline para la \u00f3rbita completa predicha\n orbitPolyline = L.polyline([], {\n color: '#ff6b6b',\n weight: 2,\n opacity: 0.4,\n dashArray: '5, 10'\n }).addTo(map);\n }\n\n \/\/ Interpolaci\u00f3n lineal entre dos puntos\n function lerp(start, end, progress) {\n return start + (end - start) * progress;\n }\n\n \/\/ Interpolaci\u00f3n esf\u00e9rica para coordenadas geogr\u00e1ficas\n function lerpLatLng(pos1, pos2, progress) {\n let lat1 = pos1.latitude;\n let lng1 = pos1.longitude;\n let lat2 = pos2.latitude;\n let lng2 = pos2.longitude;\n\n \/\/ Manejar el cruce del antimeridiano (l\u00ednea de fecha internacional)\n let deltaLng = lng2 - lng1;\n if (Math.abs(deltaLng) > 180) {\n if (deltaLng > 0) {\n lng1 += 360;\n } else {\n lng2 += 360;\n }\n }\n\n let lat = lerp(lat1, lat2, progress);\n let lng = lerp(lng1, lng2, progress);\n\n \/\/ Normalizar longitud\n if (lng > 180) lng -= 360;\n if (lng < -180) lng += 360;\n\n return { latitude: lat, longitude: lng };\n }\n\n \/\/ Funci\u00f3n de easing para movimiento m\u00e1s suave (ease-in-out)\n function easeInOutCubic(t) {\n return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;\n }\n\n \/\/ Animar el movimiento de la ISS entre actualizaciones\n function animateISS() {\n if (!currentPosition || !targetPosition) return;\n\n \/\/ Incrementar progreso de animaci\u00f3n\n animationProgress += 0.02; \/\/ 2% por frame (50fps = 1 segundo para completar)\n\n if (animationProgress >= 1) {\n animationProgress = 1;\n }\n\n \/\/ Aplicar easing para movimiento m\u00e1s natural\n const easedProgress = easeInOutCubic(animationProgress);\n\n \/\/ Interpolar posici\u00f3n\n const interpolatedPos = lerpLatLng(currentPosition, targetPosition, easedProgress);\n\n \/\/ Calcular rotaci\u00f3n basada en direcci\u00f3n de movimiento\n const rotation = calculateBearing(\n currentPosition.latitude,\n currentPosition.longitude,\n targetPosition.latitude,\n targetPosition.longitude\n );\n\n \/\/ Crear icono rotado\n const rotatedIssIcon = L.divIcon({\n html: `\n <div style=\"transform: rotate(${rotation}deg); transition: none;\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" style=\"filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));\">\n <!-- Cuerpo principal -->\n <rect x=\"15\" y=\"10\" width=\"10\" height=\"20\" fill=\"#C0C0C0\" stroke=\"#808080\" stroke-width=\"1\"\/>\n <!-- Paneles solares izquierdos -->\n <rect x=\"2\" y=\"8\" width=\"12\" height=\"4\" fill=\"#1E3A8A\" stroke=\"#3B82F6\" stroke-width=\"1\"\/>\n <rect x=\"2\" y=\"14\" width=\"12\" height=\"4\" fill=\"#1E3A8A\" stroke=\"#3B82F6\" stroke-width=\"1\"\/>\n <rect x=\"2\" y=\"20\" width=\"12\" height=\"4\" fill=\"#1E3A8A\" stroke=\"#3B82F6\" stroke-width=\"1\"\/>\n <rect x=\"2\" y=\"26\" width=\"12\" height=\"4\" fill=\"#1E3A8A\" stroke=\"#3B82F6\" stroke-width=\"1\"\/>\n <!-- Paneles solares derechos -->\n <rect x=\"26\" y=\"8\" width=\"12\" height=\"4\" fill=\"#1E3A8A\" stroke=\"#3B82F6\" stroke-width=\"1\"\/>\n <rect x=\"26\" y=\"14\" width=\"12\" height=\"4\" fill=\"#1E3A8A\" stroke=\"#3B82F6\" stroke-width=\"1\"\/>\n <rect x=\"26\" y=\"20\" width=\"12\" height=\"4\" fill=\"#1E3A8A\" stroke=\"#3B82F6\" stroke-width=\"1\"\/>\n <rect x=\"26\" y=\"26\" width=\"12\" height=\"4\" fill=\"#1E3A8A\" stroke=\"#3B82F6\" stroke-width=\"1\"\/>\n <!-- M\u00f3dulo principal -->\n <circle cx=\"20\" cy=\"20\" r=\"3\" fill=\"#FFD700\" stroke=\"#FFA500\" stroke-width=\"1\"\/>\n <!-- Antenas -->\n <line x1=\"20\" y1=\"5\" x2=\"20\" y2=\"10\" stroke=\"#FF6B6B\" stroke-width=\"2\"\/>\n <line x1=\"20\" y1=\"30\" x2=\"20\" y2=\"35\" stroke=\"#FF6B6B\" stroke-width=\"2\"\/>\n <\/svg>\n <\/div>\n `,\n className: 'iss-marker-moving',\n iconSize: [40, 40],\n iconAnchor: [20, 20]\n });\n\n \/\/ Actualizar posici\u00f3n del marcador\n issMarker.setLatLng([interpolatedPos.latitude, interpolatedPos.longitude]);\n issMarker.setIcon(rotatedIssIcon);\n\n \/\/ Actualizar trayectoria en tiempo real durante la animaci\u00f3n\n if (animationProgress > 0.1) { \/\/ Comenzar a agregar puntos despu\u00e9s del 10% del movimiento\n const recentPoint = [interpolatedPos.latitude, interpolatedPos.longitude];\n \n \/\/ Agregar punto interpolado a la trayectoria si ha habido suficiente movimiento\n if (issPath.length === 0 || \n Math.abs(issPath[issPath.length - 1][0] - recentPoint[0]) > 0.001 ||\n Math.abs(issPath[issPath.length - 1][1] - recentPoint[1]) > 0.001) {\n \n issPath.push(recentPoint);\n \n \/\/ Limitar puntos para rendimiento\n if (issPath.length > 100) {\n issPath.shift();\n }\n \n pathPolyline.setLatLngs(issPath);\n }\n }\n }\n\n \/\/ Iniciar animaci\u00f3n continua\n function startAnimation() {\n if (animationInterval) clearInterval(animationInterval);\n animationInterval = setInterval(animateISS, 20); \/\/ 50 FPS\n }\n function calculateOrbit(currentLat, currentLng) {\n const orbitPoints = [];\n const earthRadius = 6371; \/\/ km\n const issAltitude = 408; \/\/ km (altitud promedio)\n const orbitalRadius = earthRadius + issAltitude;\n \n \/\/ Calcular inclinaci\u00f3n orbital de la ISS (aproximadamente 51.6\u00b0)\n const inclination = 51.6;\n \n \/\/ Generar puntos de \u00f3rbita\n for (let i = 0; i <= 360; i += 2) {\n const angle = (i * Math.PI) \/ 180;\n \n \/\/ Calcular posici\u00f3n orbital simplificada\n let lat = Math.asin(Math.sin(inclination * Math.PI \/ 180) * Math.sin(angle)) * 180 \/ Math.PI;\n let lng = currentLng + (i - 180);\n \n \/\/ Normalizar longitud\n if (lng > 180) lng -= 360;\n if (lng < -180) lng += 360;\n \n orbitPoints.push([lat, lng]);\n }\n \n return orbitPoints;\n }\n\n \/\/ Calcular direcci\u00f3n de movimiento para rotar el icono\n function calculateBearing(lat1, lng1, lat2, lng2) {\n const dLng = (lng2 - lng1) * Math.PI \/ 180;\n const lat1Rad = lat1 * Math.PI \/ 180;\n const lat2Rad = lat2 * Math.PI \/ 180;\n \n const y = Math.sin(dLng) * Math.cos(lat2Rad);\n const x = Math.cos(lat1Rad) * Math.sin(lat2Rad) - \n Math.sin(lat1Rad) * Math.cos(lat2Rad) * Math.cos(dLng);\n \n const bearing = Math.atan2(y, x) * 180 \/ Math.PI;\n return (bearing + 360) % 360;\n }\n async function getISSData() {\n try {\n const response = await fetch('http:\/\/api.open-notify.org\/iss-now.json');\n if (!response.ok) throw new Error('Error en la respuesta del servidor');\n \n const data = await response.json();\n const position = data.iss_position;\n \n \/\/ Obtener datos adicionales de velocidad y altitud\n const detailsResponse = await fetch('https:\/\/api.wheretheiss.at\/v1\/satellites\/25544');\n let details = null;\n if (detailsResponse.ok) {\n details = await detailsResponse.json();\n }\n \n updateISSPosition({\n latitude: parseFloat(position.latitude),\n longitude: parseFloat(position.longitude),\n velocity: details ? Math.round(details.velocity) : null,\n altitude: details ? Math.round(details.altitude) : 408 \/\/ altitud promedio de la ISS\n });\n \n updateStatus(true);\n \n } catch (error) {\n console.error('Error al obtener datos de la ISS:', error);\n updateStatus(false);\n \n \/\/ Usar API alternativa si falla la primera\n try {\n const fallbackResponse = await fetch('https:\/\/api.wheretheiss.at\/v1\/satellites\/25544');\n if (fallbackResponse.ok) {\n const fallbackData = await fallbackResponse.json();\n updateISSPosition({\n latitude: fallbackData.latitude,\n longitude: fallbackData.longitude,\n velocity: Math.round(fallbackData.velocity),\n altitude: Math.round(fallbackData.altitude)\n });\n updateStatus(true);\n }\n } catch (fallbackError) {\n console.error('Error con API de respaldo:', fallbackError);\n }\n }\n }\n\n \/\/ Actualizar posici\u00f3n de la ISS en el mapa\n function updateISSPosition(data) {\n const { latitude, longitude, velocity, altitude } = data;\n \n \/\/ Actualizar informaci\u00f3n en el panel\n document.getElementById('latitude').textContent = latitude.toFixed(4) + '\u00b0';\n document.getElementById('longitude').textContent = longitude.toFixed(4) + '\u00b0';\n document.getElementById('velocity').textContent = velocity ? velocity + ' km\/h' : '27,600 km\/h';\n document.getElementById('altitude').textContent = altitude + ' km';\n document.getElementById('lastUpdate').textContent = new Date().toLocaleTimeString();\n \n \/\/ Configurar animaci\u00f3n hacia la nueva posici\u00f3n\n if (currentPosition) {\n \/\/ La posici\u00f3n actual se convierte en el punto de partida\n currentPosition = targetPosition || currentPosition;\n } else {\n \/\/ Primera carga - posicionar inmediatamente\n currentPosition = { latitude, longitude };\n issMarker.setLatLng([latitude, longitude]);\n map.setView([latitude, longitude], 4);\n }\n \n \/\/ Establecer nueva posici\u00f3n objetivo\n targetPosition = { latitude, longitude };\n animationProgress = 0; \/\/ Reiniciar animaci\u00f3n\n \n \/\/ Iniciar animaci\u00f3n si no est\u00e1 corriendo\n if (!animationInterval) {\n startAnimation();\n }\n \n \/\/ Calcular rotaci\u00f3n para el popup\n let rotation = 0;\n if (currentPosition && targetPosition) {\n rotation = calculateBearing(\n currentPosition.latitude,\n currentPosition.longitude,\n targetPosition.latitude,\n targetPosition.longitude\n );\n }\n \n \/\/ Calcular y mostrar \u00f3rbita predicha (cada 10 actualizaciones para rendimiento)\n if (issPath.length % 10 === 0 || issPath.length === 1) {\n const orbitPoints = calculateOrbit(latitude, longitude);\n orbitPolyline.setLatLngs(orbitPoints);\n }\n \n \/\/ Actualizar popup del marcador\n issMarker.bindPopup(`\n <div style=\"text-align: center;\">\n <h3>\ud83d\udef0\ufe0f Estaci\u00f3n Espacial Internacional<\/h3>\n <p><strong>Lat:<\/strong> ${latitude.toFixed(4)}\u00b0<\/p>\n <p><strong>Lng:<\/strong> ${longitude.toFixed(4)}\u00b0<\/p>\n <p><strong>Velocidad:<\/strong> ${velocity ? velocity + ' km\/h' : '27,600 km\/h'}<\/p>\n <p><strong>Altitud:<\/strong> ${altitude} km<\/p>\n <p><strong>Direcci\u00f3n:<\/strong> ${rotation.toFixed(0)}\u00b0<\/p>\n <p style=\"color: #28a745; font-weight: bold;\">\ud83d\udd34 EN VIVO - Movi\u00e9ndose<\/p>\n <p><em>Actualizado: ${new Date().toLocaleTimeString()}<\/em><\/p>\n <\/div>\n `);\n \n \/\/ Guardar posici\u00f3n para referencia\n lastPosition = { latitude, longitude };\n }\n\n \/\/ Actualizar estado de conexi\u00f3n\n function updateStatus(online) {\n const statusElement = document.getElementById('status');\n if (online) {\n statusElement.textContent = '\ud83d\udfe2 Conectado - Datos en tiempo real';\n statusElement.className = 'status online';\n } else {\n statusElement.textContent = '\ud83d\udd34 Error de conexi\u00f3n';\n statusElement.className = 'status offline';\n }\n }\n\n \/\/ Inicializar aplicaci\u00f3n\n function init() {\n initMap();\n getISSData(); \/\/ Primera carga\n \n \/\/ Actualizar cada 5 segundos\n updateInterval = setInterval(getISSData, 5000);\n }\n\n \/\/ Limpiar intervals al cerrar la p\u00e1gina\n window.addEventListener('beforeunload', () => {\n if (updateInterval) clearInterval(updateInterval);\n if (animationInterval) clearInterval(animationInterval);\n });\n\n \/\/ Inicializar cuando la p\u00e1gina est\u00e9 cargada\n document.addEventListener('DOMContentLoaded', init);\n <\/script>\n<\/body>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4799f71 e-flex e-con-boxed e-con e-parent\" data-id=\"4799f71\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-2513d10 e-grid e-con-full e-con e-child\" data-id=\"2513d10\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-123b4ae elementor-widget elementor-widget-html\" data-id=\"123b4ae\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div id=\"av-orbit\">\n <script>\n var avOrbitProperties = {\n size: 'small',\n lang: 'es'\n };\n <\/script>\n <script src=\"https:\/\/astroviewer.net\/widgets\/widgets\/orbit.js\"><\/script>\n<\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7da45ba elementor-widget elementor-widget-text-editor\" data-id=\"7da45ba\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.22.0 - 26-06-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p>Posici\u00f3n, \u00f3rbita presente y futura de la Estaci\u00f3n Espacial Internacional<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-db7de80 e-flex e-con-boxed e-con e-parent\" data-id=\"db7de80\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a3bb5ae elementor-widget elementor-widget-html\" data-id=\"a3bb5ae\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<iframe width=\"695\" height=\"391\" src=\"https:\/\/www.youtube.com\/embed\/iYmvCUonukw\" title=\"Live Video from the International Space Station (Official NASA Stream)\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ff1c959 e-flex e-con-boxed e-con e-parent\" data-id=\"ff1c959\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c4b60a3 elementor-widget elementor-widget-html\" data-id=\"c4b60a3\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Arial', sans-serif;\n background: linear-gradient(135deg, #0c1445 0%, #1e3c72 50%, #2a5298 100%);\n min-height: 100vh;\n color: white;\n padding: 20px;\n }\n\n .container {\n max-width: 1000px;\n margin: 0 auto;\n background: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(10px);\n border-radius: 20px;\n padding: 30px;\n box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);\n border: 1px solid rgba(255, 255, 255, 0.18);\n }\n\n h1 {\n text-align: center;\n margin-bottom: 10px;\n font-size: 2.5em;\n background: linear-gradient(45deg, #fff, #87CEEB);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n }\n\n .subtitle {\n text-align: center;\n margin-bottom: 30px;\n opacity: 0.8;\n font-size: 1.1em;\n }\n\n .info-box {\n background: rgba(255, 255, 255, 0.15);\n border-radius: 15px;\n padding: 20px;\n margin-bottom: 30px;\n border-left: 4px solid #87CEEB;\n }\n\n .coordinates {\n display: flex;\n justify-content: center;\n gap: 30px;\n margin-bottom: 20px;\n flex-wrap: wrap;\n }\n\n .coord-item {\n background: rgba(135, 206, 235, 0.2);\n padding: 15px 20px;\n border-radius: 10px;\n text-align: center;\n min-width: 150px;\n }\n\n .coord-label {\n font-size: 0.9em;\n opacity: 0.8;\n margin-bottom: 5px;\n }\n\n .coord-value {\n font-size: 1.2em;\n font-weight: bold;\n }\n\n .controls {\n display: flex;\n justify-content: center;\n gap: 20px;\n margin-bottom: 30px;\n flex-wrap: wrap;\n }\n\n button {\n background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);\n border: none;\n color: white;\n padding: 15px 30px;\n border-radius: 25px;\n font-size: 1.1em;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 4px 15px rgba(0,0,0,0.2);\n }\n\n button:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(0,0,0,0.3);\n }\n\n button:disabled {\n background: #666;\n cursor: not-allowed;\n transform: none;\n }\n\n .loading {\n text-align: center;\n padding: 40px;\n font-size: 1.2em;\n }\n\n .spinner {\n border: 4px solid rgba(255,255,255,0.3);\n border-radius: 50%;\n border-top: 4px solid #87CEEB;\n width: 40px;\n height: 40px;\n animation: spin 1s linear infinite;\n margin: 0 auto 20px;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n .results {\n margin-top: 30px;\n }\n\n .pass-card {\n background: rgba(255, 255, 255, 0.1);\n border-radius: 15px;\n padding: 25px;\n margin-bottom: 20px;\n border: 1px solid rgba(255, 255, 255, 0.2);\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n\n .pass-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 30px rgba(0,0,0,0.3);\n }\n\n .pass-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);\n transition: left 0.5s;\n }\n\n .pass-card:hover::before {\n left: 100%;\n }\n\n .pass-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 15px;\n flex-wrap: wrap;\n }\n\n .date-time {\n font-size: 1.3em;\n font-weight: bold;\n color: #87CEEB;\n }\n\n .magnitude {\n background: linear-gradient(45deg, #FF6B6B, #FFE66D);\n color: #333;\n padding: 8px 15px;\n border-radius: 20px;\n font-weight: bold;\n font-size: 0.9em;\n }\n\n .pass-details {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 15px;\n margin-top: 15px;\n }\n\n .detail-item {\n background: rgba(135, 206, 235, 0.1);\n padding: 15px;\n border-radius: 10px;\n text-align: center;\n }\n\n .detail-label {\n font-size: 0.9em;\n opacity: 0.8;\n margin-bottom: 5px;\n }\n\n .detail-value {\n font-size: 1.1em;\n font-weight: bold;\n }\n\n .error {\n background: rgba(255, 0, 0, 0.2);\n border: 1px solid rgba(255, 0, 0, 0.5);\n padding: 20px;\n border-radius: 10px;\n text-align: center;\n color: #ffcccc;\n }\n\n .no-passes {\n text-align: center;\n padding: 40px;\n opacity: 0.8;\n font-size: 1.1em;\n }\n\n @media (max-width: 768px) {\n .container {\n padding: 20px;\n margin: 10px;\n }\n \n h1 {\n font-size: 2em;\n }\n \n .coordinates {\n flex-direction: column;\n align-items: center;\n }\n \n .pass-header {\n flex-direction: column;\n gap: 10px;\n text-align: center;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <h1>\ud83d\udef0\ufe0f Futuros Tr\u00e1nsitos visibles de la EEI<\/h1>\n <p class=\"subtitle\">Estaci\u00f3n Espacial Internacional - desde tu ubicacii\u00f3n<\/p>\n \n <div class=\"info-box\">\n <div class=\"coordinates\">\n <div class=\"coord-item\">\n <div class=\"coord-label\">Latitud<\/div>\n <div class=\"coord-value\">-32.8895\u00b0<\/div>\n <\/div>\n <div class=\"coord-item\">\n <div class=\"coord-label\">Longitud<\/div>\n <div class=\"coord-value\">-68.8458\u00b0<\/div>\n <\/div>\n <div class=\"coord-item\">\n <div class=\"coord-label\">Altitud<\/div>\n <div class=\"coord-value\">827m<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"controls\">\n <button onclick=\"getPredictions()\" id=\"predictBtn\">\n \ud83d\udd0d Obtener Predicciones\n <\/button>\n <button onclick=\"getCurrentPosition()\" id=\"positionBtn\">\n \ud83d\udccd Detectar mi Ubicaci\u00f3n\n <\/button>\n <\/div>\n\n <div id=\"results\"><\/div>\n <\/div>\n\n <script>\n \/\/ Coordenadas de Mendoza, Argentina\n let latitude = -32.8895;\n let longitude = -68.8458;\n let altitude = 827; \/\/ metros sobre el nivel del mar\n\n \/\/ API Key de ejemplo - reemplazar con una real de n2yo.com\n const API_KEY = 'NBDZS4-SGC2TE-6CBF5A-5KNN';\n const ISS_SATELLITE_ID = 25544;\n\n function showLoading() {\n document.getElementById('results').innerHTML = `\n <div class=\"loading\">\n <div class=\"spinner\"><\/div>\n <p>Obteniendo predicciones de la ISS...<\/p>\n <\/div>\n `;\n }\n\n function showError(message) {\n document.getElementById('results').innerHTML = `\n <div class=\"error\">\n <h3>\u274c Error<\/h3>\n <p>${message}<\/p>\n <\/div>\n `;\n }\n\n function formatDate(timestamp) {\n const date = new Date(timestamp * 1000);\n return date.toLocaleDateString('es-AR', {\n weekday: 'long',\n year: 'numeric',\n month: 'long',\n day: 'numeric'\n });\n }\n\n function formatTime(timestamp) {\n const date = new Date(timestamp * 1000);\n return date.toLocaleTimeString('es-AR', {\n hour: '2-digit',\n minute: '2-digit',\n second: '2-digit'\n });\n }\n\n function getDirection(azimuth) {\n const directions = [\n 'N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE',\n 'S', 'SSO', 'SO', 'OSO', 'O', 'ONO', 'NO', 'NNO'\n ];\n const index = Math.round(azimuth \/ 22.5) % 16;\n return directions[index];\n }\n\n function getMagnitudeDescription(magnitude) {\n if (magnitude <= -3) return 'Muy brillante';\n if (magnitude <= -1) return 'Brillante';\n if (magnitude <= 1) return 'Moderado';\n if (magnitude <= 3) return 'Tenue';\n return 'Muy tenue';\n }\n\n function displayPredictions(passes) {\n if (!passes || passes.length === 0) {\n document.getElementById('results').innerHTML = `\n <div class=\"no-passes\">\n <h3>\ud83c\udf0c No hay pases visibles<\/h3>\n <p>No se encontraron pases visibles de la ISS desde tu ubicaci\u00f3n en los pr\u00f3ximos 10 d\u00edas.<\/p>\n <\/div>\n `;\n return;\n }\n\n let html = '<div class=\"results\"><h2>\ud83d\ude80 Pr\u00f3ximos Pases Visibles de la ISS<\/h2>';\n \n passes.forEach((pass, index) => {\n html += `\n <div class=\"pass-card\">\n <div class=\"pass-header\">\n <div class=\"date-time\">\n ${formatDate(pass.startUTC)} - ${formatTime(pass.startUTC)}\n <\/div>\n <div class=\"magnitude\">\n Magnitud: ${pass.mag} (${getMagnitudeDescription(pass.mag)})\n <\/div>\n <\/div>\n \n <div class=\"pass-details\">\n <div class=\"detail-item\">\n <div class=\"detail-label\">Duraci\u00f3n<\/div>\n <div class=\"detail-value\">${pass.duration} segundos<\/div>\n <\/div>\n \n <div class=\"detail-item\">\n <div class=\"detail-label\">Inicio<\/div>\n <div class=\"detail-value\">\n ${pass.startAz}\u00b0 ${getDirection(pass.startAz)}<br>\n <small>${pass.startEl}\u00b0 altura<\/small>\n <\/div>\n <\/div>\n \n <div class=\"detail-item\">\n <div class=\"detail-label\">M\u00e1ximo<\/div>\n <div class=\"detail-value\">\n ${pass.maxAz}\u00b0 ${getDirection(pass.maxAz)}<br>\n <small>${pass.maxEl}\u00b0 altura<\/small>\n <\/div>\n <\/div>\n \n <div class=\"detail-item\">\n <div class=\"detail-label\">Final<\/div>\n <div class=\"detail-value\">\n ${pass.endAz}\u00b0 ${getDirection(pass.endAz)}<br>\n <small>${pass.endEl}\u00b0 altura<\/small>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n `;\n });\n \n html += '<\/div>';\n document.getElementById('results').innerHTML = html;\n }\n\n async function getPredictions() {\n const btn = document.getElementById('predictBtn');\n btn.disabled = true;\n btn.textContent = 'Obteniendo...';\n \n showLoading();\n \n try {\n \/\/ Simulaci\u00f3n de datos (en producci\u00f3n usar API real de N2YO)\n const simulatedPasses = generateSimulatedPasses();\n \n setTimeout(() => {\n displayPredictions(simulatedPasses);\n btn.disabled = false;\n btn.textContent = '\ud83d\udd0d Actualizar Predicciones';\n }, 2000);\n \n } catch (error) {\n showError('Error al obtener las predicciones. Por favor, intenta nuevamente.');\n btn.disabled = false;\n btn.textContent = '\ud83d\udd0d Obtener Predicciones';\n }\n }\n\n function generateSimulatedPasses() {\n const passes = [];\n const now = Math.floor(Date.now() \/ 1000);\n \n \/\/ Generar algunos pases simulados para los pr\u00f3ximos d\u00edas\n for (let i = 0; i < 8; i++) {\n const dayOffset = Math.floor(Math.random() * 10); \/\/ pr\u00f3ximos 10 d\u00edas\n const timeOffset = Math.floor(Math.random() * 86400); \/\/ hora aleatoria del d\u00eda\n const startTime = now + (dayOffset * 86400) + timeOffset;\n \n passes.push({\n startUTC: startTime,\n maxUTC: startTime + Math.floor(Math.random() * 200 + 100),\n endUTC: startTime + Math.floor(Math.random() * 400 + 200),\n duration: Math.floor(Math.random() * 400 + 200),\n startAz: Math.floor(Math.random() * 360),\n startEl: Math.floor(Math.random() * 20 + 10),\n maxAz: Math.floor(Math.random() * 360),\n maxEl: Math.floor(Math.random() * 60 + 20),\n endAz: Math.floor(Math.random() * 360),\n endEl: Math.floor(Math.random() * 20 + 10),\n mag: (Math.random() * 4 - 2).toFixed(1)\n });\n }\n \n \/\/ Ordenar por fecha\n return passes.sort((a, b) => a.startUTC - b.startUTC);\n }\n\n function getCurrentPosition() {\n if (navigator.geolocation) {\n navigator.geolocation.getCurrentPosition(\n (position) => {\n latitude = position.coords.latitude;\n longitude = position.coords.longitude;\n altitude = position.coords.altitude || 827;\n \n \/\/ Actualizar coordenadas en la interfaz\n document.querySelector('.coord-item:nth-child(1) .coord-value').textContent = latitude.toFixed(4) + '\u00b0';\n document.querySelector('.coord-item:nth-child(2) .coord-value').textContent = longitude.toFixed(4) + '\u00b0';\n document.querySelector('.coord-item:nth-child(3) .coord-value').textContent = Math.round(altitude) + 'm';\n \n alert('Ubicaci\u00f3n actualizada correctamente');\n },\n (error) => {\n alert('No se pudo obtener tu ubicaci\u00f3n. Se usar\u00e1n las coordenadas de Mendoza.');\n }\n );\n } else {\n alert('Tu navegador no soporta geolocalizaci\u00f3n.');\n }\n }\n\n \/\/ Cargar predicciones al cargar la p\u00e1gina\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ Mostrar informaci\u00f3n inicial\n document.getElementById('results').innerHTML = `\n <div class=\"info-box\">\n <h3>\u2139\ufe0f Informaci\u00f3n<\/h3>\n <p>Este predictor te mostrar\u00e1 los pr\u00f3ximos pases visibles de la Estaci\u00f3n Espacial Internacional (ISS) desde tu ubicaci\u00f3n en Mendoza, Argentina.<\/p>\n <p><strong>Nota:<\/strong> Para usar este predictor con datos reales, necesitas registrarte en <a href=\"https:\/\/www.n2yo.com\/api\/\" target=\"_blank\" style=\"color: #87CEEB;\">N2YO.com<\/a> para obtener una API key gratuita y reemplazarla en el c\u00f3digo.<\/p>\n <p>Haz clic en \"Obtener Predicciones\" para ver una simulaci\u00f3n de los pr\u00f3ximos pases.<\/p>\n <\/div>\n `;\n });\n <\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Ubicaci\u00f3n de la ISS en Tiempo Real \ud83d\udef0\ufe0f Programa El Firmamento – Estaci\u00f3n Espacial Internacional – Ubicaci\u00f3n en Tiempo Real Conectando… Latitud — Longitud — Velocidad — km\/h Altitud — km \u00daltima actualizaci\u00f3n: — Trayectoria reciente \u00d3rbita predicha Posici\u00f3n, \u00f3rbita presente y futura de la … <a href=\"https:\/\/www.elfirmamento.com.ar\/?page_id=8142\" class=\"more-link\"><span>Seguir leyendo<span class=\"screen-reader-text\">EEI<\/span><\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.elfirmamento.com.ar\/index.php?rest_route=\/wp\/v2\/pages\/8142"}],"collection":[{"href":"https:\/\/www.elfirmamento.com.ar\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.elfirmamento.com.ar\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.elfirmamento.com.ar\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.elfirmamento.com.ar\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8142"}],"version-history":[{"count":22,"href":"https:\/\/www.elfirmamento.com.ar\/index.php?rest_route=\/wp\/v2\/pages\/8142\/revisions"}],"predecessor-version":[{"id":8165,"href":"https:\/\/www.elfirmamento.com.ar\/index.php?rest_route=\/wp\/v2\/pages\/8142\/revisions\/8165"}],"wp:attachment":[{"href":"https:\/\/www.elfirmamento.com.ar\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}