FLUXAR - Ley de Ohm Microscopica<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <style>\r\n :root {\r\n --bg-primary: #05080f;\r\n --bg-panel: rgba(10, 14, 23, 0.85);\r\n --text-primary: #e8edf5;\r\n --text-secondary: #8b9cb8;\r\n --accent-electron: #ef4444;\r\n --accent-conductor: #3b82f6;\r\n --accent-current: #22c55e;\r\n --accent-field: #eab308;\r\n --border-color: #2d3a4f;\r\n }\r\n \r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n \r\n body {\r\n font-family: 'Space Grotesk', sans-serif;\r\n background: var(--bg-primary);\r\n color: var(--text-primary);\r\n overflow: hidden;\r\n height: 100vh;\r\n width: 100vw;\r\n }\r\n\r\n \/* CANVAS DE FONDO (Pantalla Completa) *\/\r\n #simulation-area {\r\n position: fixed;\r\n top: 0; left: 0;\r\n width: 100%; height: 100%;\r\n z-index: 1;\r\n background: radial-gradient(circle at 50% 50%, #111827 0%, #05080f 80%);\r\n }\r\n \r\n canvas { \r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n \/* PANELES FLOTANTES *\/\r\n .panel-overlay {\r\n position: fixed;\r\n top: 20px;\r\n bottom: 20px;\r\n background: var(--bg-panel);\r\n backdrop-filter: blur(12px);\r\n border: 1px solid var(--border-color);\r\n border-radius: 16px;\r\n padding: 25px;\r\n z-index: 10;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n overflow-y: auto;\r\n transition: transform 0.3s ease, opacity 0.3s ease;\r\n width: 320px;\r\n }\r\n\r\n .left-panel { left: 20px; }\r\n .right-panel { right: 20px; }\r\n\r\n \/* T\u00cdTULOS Y TIPOGRAF\u00cdA *\/\r\n h1 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; }\r\n .subtitle { font-size: 0.75rem; color: var(--text-secondary); margin-top: 5px; opacity: 0.8; }\r\n \r\n .section { margin-bottom: 15px; }\r\n .section-title { \r\n font-size: 0.65rem; \r\n color: var(--text-secondary); \r\n text-transform: uppercase; \r\n letter-spacing: 1.5px; \r\n margin-bottom: 15px; \r\n opacity: 0.6;\r\n }\r\n\r\n \/* CONTROLES *\/\r\n .control-row { margin-bottom: 20px; }\r\n .control-label { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 8px; }\r\n .value-display {\r\n font-family: 'JetBrains Mono', monospace;\r\n color: var(--accent-current);\r\n font-size: 0.8rem;\r\n background: rgba(34, 197, 94, 0.1);\r\n padding: 2px 6px;\r\n border-radius: 4px;\r\n }\r\n \r\n input[type=\"range\"] {\r\n width: 100%; height: 2px;\r\n background: #1a2332;\r\n border-radius: 1px;\r\n outline: none;\r\n -webkit-appearance: none;\r\n cursor: pointer;\r\n }\r\n input[type=\"range\"]::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n width: 12px; height: 12px;\r\n background: var(--accent-current);\r\n border-radius: 50%;\r\n border: 2px solid var(--bg-primary);\r\n box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);\r\n }\r\n\r\n .toggle-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 0.85rem; }\r\n \r\n .switch {\r\n position: relative;\r\n width: 36px; height: 20px;\r\n background: #1a2332;\r\n border-radius: 10px;\r\n cursor: pointer;\r\n transition: background 0.3s;\r\n border: 1px solid rgba(255,255,255,0.1);\r\n }\r\n .switch.active { \r\n background: rgba(34, 197, 94, 0.3); \r\n border-color: var(--accent-current);\r\n }\r\n .switch::after {\r\n content: '';\r\n position: absolute;\r\n top: 2px; left: 2px;\r\n width: 14px; height: 14px;\r\n background: #8b9cb8;\r\n border-radius: 50%;\r\n transition: all 0.3s;\r\n }\r\n .switch.active::after { \r\n transform: translateX(16px); \r\n background: var(--accent-current);\r\n box-shadow: 0 0 8px var(--accent-current);\r\n }\r\n\r\n \/* TARJETAS DE DATOS *\/\r\n .data-card {\r\n background: rgba(255, 255, 255, 0.03);\r\n border: 1px solid rgba(255,255,255,0.05);\r\n border-radius: 8px;\r\n padding: 15px;\r\n margin-bottom: 12px;\r\n }\r\n .data-row { display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 8px; color: var(--text-secondary); }\r\n .data-row:last-child { margin-bottom: 0; }\r\n \r\n .highlight-value { \r\n font-family: 'JetBrains Mono', monospace; \r\n color: white; \r\n font-weight: 500;\r\n }\r\n .current-value { color: var(--accent-current); font-weight: 700; font-size: 0.9rem; }\r\n .current-label { color: var(--accent-current); font-weight: 600; }\r\n\r\n \/* CAJA DE F\u00d3RMULAS - ESTILO UNIFICADO *\/\r\n .equation-box {\r\n background: transparent;\r\n border-top: 1px solid rgba(255,255,255,0.1);\r\n padding-top: 20px;\r\n text-align: center;\r\n margin-top: auto;\r\n }\r\n \/* Ambas f\u00f3rmulas con el mismo estilo *\/\r\n .eq-row {\r\n font-family: 'JetBrains Mono', monospace;\r\n font-size: 1.2rem; \/* Mismo tama\u00f1o *\/\r\n color: white; \/* Mismo color *\/\r\n font-weight: 500; \/* Mismo peso *\/\r\n margin-bottom: 10px;\r\n text-shadow: 0 0 20px rgba(255,255,255,0.1);\r\n }\r\n .eq-row:last-child {\r\n margin-bottom: 0;\r\n }\r\n\r\n \/* LOGO *\/\r\n .logo-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin-top: 15px;\r\n padding-top: 15px;\r\n border-top: 1px solid rgba(255,255,255,0.1);\r\n }\r\n .logo-text { font-size: 0.8rem; color: var(--text-secondary); }\r\n .logo-text b { display: block; color: white; font-size: 0.9rem; margin-bottom: 2px; }\r\n\r\n \/* RESPONSIVE *\/\r\n @media (max-width: 1000px) {\r\n .panel-overlay {\r\n position: fixed;\r\n width: 100%;\r\n height: auto;\r\n max-height: 40vh;\r\n top: auto;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n border-radius: 16px 16px 0 0;\r\n }\r\n .left-panel { top: auto; bottom: 0; display: none; } \r\n .right-panel { top: auto; bottom: 0; }\r\n }\r\n \r\n .logo-box {\r\n position: fixed;\r\n bottom: 20px;\r\n right: 20px;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n background: rgba(22, 27, 34, 0.9);\r\n padding: 10px 14px;\r\n border-radius: 8px;\r\n border: 1px solid var(--border-color);\r\n z-index: 100;\r\n }\r\n .logo-img { width: 100px; }\r\n .logo-text { font-size: 0.7rem; line-height: 1.3; color: var(--text-muted); }\r\n .logo-text b { display: block; color: var(--text-main); font-weight: 600; }\r\n\r\n\r\n \r\n \r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <div id=\"simulation-area\">\r\n <canvas id=\"simCanvas\"><\/canvas>\r\n <\/div>\r\n\r\n \r\n <div class=\"panel-overlay left-panel\">\r\n <div>\r\n <h1>Ley de Ohm Microscopica<\/h1>\r\n <div class=\"subtitle\">Modelo de Drude - Visualizacion 2D<\/div>\r\n <\/div>\r\n \r\n <div class=\"section\">\r\n <div class=\"section-title\">Parametros<\/div>\r\n \r\n <div class=\"control-row\">\r\n <div class=\"control-label\">\r\n <span>Densidad electronica (n)<\/span>\r\n <span class=\"value-display\" id=\"valDensity\">5.0<\/span>\r\n <\/div>\r\n <div style=\"font-size:0.7rem; color:var(--text-secondary); margin-bottom:5px;\">\u00d710\u00b2\u2078 electrones\/m\u00b3<\/div>\r\n <input type=\"range\" id=\"sldDensity\" min=\"1\" max=\"10\" value=\"5\" step=\"0.1\">\r\n <\/div>\r\n \r\n <div class=\"control-row\">\r\n <div class=\"control-label\">\r\n <span>Radio del conductor<\/span>\r\n <span class=\"value-display\" id=\"valRadius\">1.0 mm<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"sldRadius\" min=\"0.5\" max=\"2\" value=\"1\" step=\"0.1\">\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"section\">\r\n <div class=\"section-title\">Campo Electrico<\/div>\r\n <div class=\"toggle-row\">\r\n <span>Aplicar Campo E<\/span>\r\n <div class=\"switch\" id=\"tglField\"><\/div>\r\n <\/div>\r\n \r\n <div id=\"fieldControls\" style=\"opacity: 0.3; pointer-events: none; margin-top: 15px; transition: opacity 0.3s;\">\r\n <div class=\"control-row\" style=\"margin-bottom:0;\">\r\n <div class=\"control-label\"><span>Intensidad<\/span> <span class=\"value-display\" id=\"valField\">1.0<\/span><\/div>\r\n <div style=\"font-size:0.7rem; color:var(--text-secondary); margin-bottom:5px;\">\u00d710\u207b\u00b2 V\/m<\/div>\r\n <input type=\"range\" id=\"sldField\" min=\"0.1\" max=\"5\" value=\"1\" step=\"0.1\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"section\">\r\n <div class=\"section-title\">Colisiones<\/div>\r\n <div class=\"control-row\" style=\"margin-bottom:0;\">\r\n <div class=\"control-label\"><span>Frecuencia<\/span> <span class=\"value-display\" id=\"valCollision\">1.0<\/span><\/div>\r\n <div style=\"font-size:0.7rem; color:var(--text-secondary); margin-bottom:5px;\">\u00d710\u00b9\u2074 Hz<\/div>\r\n <input type=\"range\" id=\"sldCollision\" min=\"0.2\" max=\"3\" value=\"1\" step=\"0.1\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"section\">\r\n <div class=\"toggle-row\">\r\n <span>Mostrar Seccion A-A<\/span>\r\n <div class=\"switch active\" id=\"tglSection\"><\/div>\r\n <\/div>\r\n <div class=\"toggle-row\">\r\n <span>Vectores y Polaridad<\/span>\r\n <div class=\"switch active\" id=\"tglVectors\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"panel-overlay right-panel\">\r\n <div class=\"section-title\">Mediciones<\/div>\r\n \r\n <div class=\"data-card\">\r\n <div class=\"data-row\"><span>Campo Electrico<\/span><span class=\"highlight-value\" id=\"infoE\">0.00 V\/m<\/span><\/div>\r\n <div class=\"data-row\"><span>Vel. Deriva<\/span><span class=\"highlight-value\" id=\"infoVd\">0.00 m\/s<\/span><\/div>\r\n <div class=\"data-row\"><span>Area<\/span><span class=\"highlight-value\" id=\"infoA\">3.14 mm\u00b2<\/span><\/div>\r\n <div class=\"data-row\" style=\"margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.1);\">\r\n <span class=\"current-label\">Corriente I<\/span>\r\n <span class=\"current-value\" id=\"infoI\">0.00 A<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"data-card\" style=\"border-color: rgba(234, 179, 8, 0.3); text-align: center;\">\r\n <div style=\"font-size:0.7rem; color:var(--text-secondary); margin-bottom:5px;\">Contador de Seccion<\/div>\r\n <div style=\"font-size: 1.8rem; color: #eab308; font-family: 'JetBrains Mono', monospace; font-weight: bold;\" id=\"infoCounter\">0<\/div>\r\n <\/div>\r\n\r\n <div class=\"equation-box\">\r\n \r\n <div class=\"eq-row\">v<sub>d<\/sub> = qE\u03c4 \/ m<\/div>\r\n <div class=\"eq-row\">I = n q A v<sub>d<\/sub><\/div>\r\n \r\n \r\n \r\n <br><br><br>\r\n \r\n \r\n<div class=\"logo-box\">\r\n <a href=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/FISAR_SIM\/\" target=\"_blank\">\r\n <img decoding=\"async\" src=\"FISAR_SIM_1\" alt=\"Logo\" class=\"logo-img\"><\/a>\r\n <div class=\"logo-text\"><b>FICA UNSL<\/b>Simulaciones Interactivas<\/div>\r\n<\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ --- MOTOR DE SIMULACI\u00d3N 2D ---\r\n const canvas = document.getElementById('simCanvas');\r\n const ctx = canvas.getContext('2d');\r\n \r\n function resizeCanvas() {\r\n canvas.width = window.innerWidth;\r\n canvas.height = window.innerHeight;\r\n }\r\n resizeCanvas();\r\n window.addEventListener('resize', resizeCanvas);\r\n\r\n \/\/ Constantes F\u00edsicas\r\n const q = 1.602e-19; \/\/ Carga del electr\u00f3n\r\n const m = 9.109e-31; \/\/ Masa del electr\u00f3n\r\n\r\n \/\/ Estado\r\n const state = {\r\n n: 5.0, r: 1.0, E: 1.0, tau: 1.0,\r\n fieldOn: false,\r\n showSection: true,\r\n showVectors: true\r\n };\r\n\r\n let electrons = [];\r\n let counter = 0;\r\n let lastTime = 0;\r\n\r\n \/\/ Inicializar Electrones\r\n function initElectrons() {\r\n electrons = [];\r\n \/\/ Escala visual: el radio de 1mm se mapea a 100px en pantalla\r\n const visualRadius = 100 * state.r; \r\n const len = canvas.width * 0.5; \/\/ El conductor ocupa la mitad de la pantalla\r\n const count = 250; \r\n\r\n for (let i = 0; i < count; i++) {\r\n electrons.push({\r\n x: Math.random() * len - (len\/2),\r\n y: (Math.random() - 0.5) * visualRadius * 2,\r\n vx: (Math.random() - 0.5) * 2,\r\n vy: (Math.random() - 0.5) * 2,\r\n color: `hsl(${Math.random() * 20 + 350}, 90%, 60%)` \/\/ Rojo variado\r\n });\r\n }\r\n }\r\n\r\n \/\/ F\u00edsica\r\n function updatePhysics(dt) {\r\n const radiusM = state.r * 1e-3;\r\n const A = Math.PI * radiusM * radiusM;\r\n const nDens = state.n * 1e28;\r\n const tauTime = 1 \/ (state.tau * 1e14);\r\n const eField = state.fieldOn ? state.E * 1e-2 : 0;\r\n \r\n const vd = state.fieldOn ? (q * eField * tauTime) \/ m : 0;\r\n const I = nDens * q * A * Math.abs(vd);\r\n\r\n document.getElementById('infoE').innerText = eField.toExponential(2) + ' V\/m';\r\n document.getElementById('infoVd').innerText = vd.toExponential(2) + ' m\/s';\r\n document.getElementById('infoA').innerText = (A * 1e6).toFixed(2) + ' mm\u00b2';\r\n document.getElementById('infoI').innerText = I.toExponential(2) + ' A';\r\n\r\n \/\/ Escala Visual\r\n const driftVisual = state.fieldOn ? state.E * 0.6 * (1\/state.tau) : 0;\r\n\r\n const visualRadius = 100 * state.r;\r\n const limitY = visualRadius * 0.95;\r\n const limitX = (canvas.width * 0.5) \/ 2;\r\n\r\n electrons.forEach(e => {\r\n const prevX = e.x;\r\n e.x += e.vx;\r\n e.y += e.vy;\r\n\r\n if (state.fieldOn) e.x -= driftVisual;\r\n\r\n if (Math.random() < 0.015 * state.tau) {\r\n e.vx = (Math.random() - 0.5) * 2.5;\r\n e.vy = (Math.random() - 0.5) * 2.5;\r\n }\r\n\r\n if (Math.abs(e.y) > limitY) {\r\n e.y = limitY * Math.sign(e.y);\r\n e.vy *= -1;\r\n }\r\n\r\n if (e.x > limitX) { e.x = -limitX; e.passed = false; }\r\n else if (e.x < -limitX) { e.x = limitX; e.passed = false; }\r\n\r\n if (state.showSection && state.fieldOn) {\r\n if (prevX > 0 && e.x <= 0 && !e.passed) {\r\n counter++;\r\n e.passed = true;\r\n }\r\n }\r\n });\r\n \r\n document.getElementById('infoCounter').innerText = counter;\r\n }\r\n\r\n \/\/ Renderizado\r\n function draw() {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n \r\n const cx = canvas.width \/ 2;\r\n const cy = canvas.height \/ 2;\r\n const visualRadius = 100 * state.r;\r\n const len = canvas.width * 0.5;\r\n\r\n \/\/ 1. Conductor (Cilindro)\r\n ctx.fillStyle = 'rgba(30, 58, 95, 0.1)';\r\n ctx.strokeStyle = '#3b82f6';\r\n ctx.lineWidth = 2;\r\n ctx.shadowColor = '#3b82f6';\r\n ctx.shadowBlur = 15;\r\n ctx.beginPath();\r\n ctx.roundRect(-len\/2 + cx, -visualRadius + cy, len, visualRadius * 2, 40);\r\n ctx.fill();\r\n ctx.stroke();\r\n ctx.shadowBlur = 0;\r\n\r\n \/\/ 2. Secci\u00f3n Transversal\r\n if (state.showSection) {\r\n ctx.beginPath();\r\n ctx.strokeStyle = 'rgba(34, 197, 94, 0.5)';\r\n ctx.lineWidth = 2;\r\n ctx.setLineDash([10, 10]);\r\n ctx.moveTo(cx, cy - visualRadius - 20);\r\n ctx.lineTo(cx, cy + visualRadius + 20);\r\n ctx.stroke();\r\n ctx.setLineDash([]);\r\n \r\n ctx.fillStyle = 'rgba(34, 197, 94, 0.7)';\r\n ctx.font = '12px Space Grotesk';\r\n ctx.fillText('SECCION A-A', cx + 10, cy - visualRadius - 25);\r\n }\r\n\r\n \/\/ 3. Vectores de Campo\r\n if (state.showVectors && state.fieldOn) {\r\n const arrowY = cy - visualRadius - 60;\r\n \r\n ctx.fillStyle = '#eab308';\r\n ctx.strokeStyle = '#eab308';\r\n ctx.lineWidth = 2;\r\n\r\n \/\/ Flechas m\u00faltiples\r\n const arrowCount = Math.floor(len \/ 150);\r\n for (let i = 0; i < arrowCount; i++) {\r\n const xOff = (i - (arrowCount-1)\/2) * 150;\r\n drawArrow(ctx, cx + xOff - 20, arrowY, cx + xOff + 20, arrowY, 8);\r\n }\r\n\r\n \/\/ Polaridad\r\n ctx.font = 'bold 30px Space Grotesk';\r\n ctx.fillStyle = '#ef4444';\r\n ctx.fillText('+', -len\/2 + cx - 30, cy + 10);\r\n ctx.fillStyle = '#3b82f6';\r\n ctx.fillText('-', len\/2 + cx + 15, cy + 10);\r\n\r\n ctx.fillStyle = '#eab308';\r\n ctx.font = 'bold 18px Space Grotesk';\r\n ctx.fillText('E', cx, arrowY - 20);\r\n }\r\n\r\n \/\/ 4. Electrones\r\n electrons.forEach(e => {\r\n ctx.beginPath();\r\n ctx.arc(e.x + cx, e.y + cy, 3.5, 0, Math.PI * 2);\r\n ctx.fillStyle = e.color;\r\n ctx.fill();\r\n \r\n \/\/ Signo -\r\n ctx.fillStyle = 'rgba(255,255,255,0.8)';\r\n ctx.fillRect(e.x + cx - 2, e.y + cy - 0.5, 4, 1);\r\n });\r\n }\r\n\r\n function drawArrow(ctx, fromx, fromy, tox, toy, headlen) {\r\n const dx = tox - fromx;\r\n const dy = toy - fromy;\r\n const angle = Math.atan2(dy, dx);\r\n \r\n ctx.beginPath();\r\n ctx.moveTo(fromx, fromy);\r\n ctx.lineTo(tox, toy);\r\n ctx.stroke();\r\n \r\n ctx.beginPath();\r\n ctx.moveTo(tox, toy);\r\n ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI \/ 6), toy - headlen * Math.sin(angle - Math.PI \/ 6));\r\n ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI \/ 6), toy - headlen * Math.sin(angle + Math.PI \/ 6));\r\n ctx.closePath();\r\n ctx.fill();\r\n }\r\n\r\n \/\/ Loop\r\n function loop(timestamp) {\r\n const dt = (timestamp - lastTime) \/ 1000;\r\n lastTime = timestamp;\r\n updatePhysics(dt);\r\n draw();\r\n requestAnimationFrame(loop);\r\n }\r\n\r\n \/\/ Controles\r\n function setupControls() {\r\n const bind = (id, stateKey, displayId) => {\r\n const el = document.getElementById(id);\r\n el.oninput = function() {\r\n state[stateKey] = parseFloat(this.value);\r\n document.getElementById(displayId).innerText = this.value;\r\n if (stateKey === 'r') initElectrons();\r\n };\r\n };\r\n \r\n bind('sldDensity', 'n', 'valDensity');\r\n bind('sldRadius', 'r', 'valRadius');\r\n bind('sldField', 'E', 'valField');\r\n bind('sldCollision', 'tau', 'valCollision');\r\n \r\n document.getElementById('tglField').onclick = function() {\r\n this.classList.toggle('active');\r\n state.fieldOn = this.classList.contains('active');\r\n const fc = document.getElementById('fieldControls');\r\n fc.style.opacity = state.fieldOn ? '1' : '0.3';\r\n fc.style.pointerEvents = state.fieldOn ? 'auto' : 'none';\r\n };\r\n \r\n document.getElementById('tglSection').onclick = function() {\r\n this.classList.toggle('active');\r\n state.showSection = this.classList.contains('active');\r\n };\r\n \r\n document.getElementById('tglVectors').onclick = function() {\r\n this.classList.toggle('active');\r\n state.showVectors = this.classList.contains('active');\r\n };\r\n }\r\n\r\n \/\/ Inicio\r\n setupControls();\r\n initElectrons();\r\n requestAnimationFrame(loop);\r\n\r\n <\/script>\r\n \r\n \r\n \r\n <style>\r\n .btn-guia {\r\n position: fixed;\r\n bottom: 24px;\r\n left: 24px;\r\n z-index: 999;\r\n background: #3fb950;\r\n color: #0d1117;\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 0.82rem;\r\n font-weight: 700;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n padding: 10px 18px;\r\n border-radius: 8px;\r\n border: none;\r\n cursor: pointer;\r\n box-shadow: 0 4px 20px rgba(63,185,80,0.35);\r\n transition: transform 0.2s, box-shadow 0.2s;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n .btn-guia:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 24px rgba(63,185,80,0.5);\r\n }\r\n .btn-guia svg { width: 15px; height: 15px; flex-shrink: 0; }\r\n .guia-panel {\r\n position: fixed;\r\n bottom: 72px;\r\n left: 24px;\r\n width: 400px;\r\n max-height: 70vh;\r\n z-index: 1000;\r\n background: #ffffff;\r\n border: 1px solid #d0d7de;\r\n border-radius: 12px;\r\n box-shadow: 0 16px 48px rgba(0,0,0,0.4);\r\n display: none;\r\n flex-direction: column;\r\n overflow: hidden;\r\n font-family: 'Space Grotesk', sans-serif;\r\n }\r\n .guia-panel.visible { display: flex; }\r\n .guia-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 12px 16px;\r\n border-bottom: 1px solid #d0d7de;\r\n flex-shrink: 0;\r\n background: #f6f8fa;\r\n }\r\n .guia-header-title {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 0.85rem;\r\n font-weight: 700;\r\n color: #1f2328;\r\n }\r\n .guia-header-title svg { width: 15px; height: 15px; color: #3fb950; }\r\n .guia-close {\r\n background: none;\r\n border: none;\r\n color: #636c76;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n padding: 2px 7px;\r\n border-radius: 4px;\r\n transition: color 0.2s, background 0.2s;\r\n line-height: 1;\r\n }\r\n .guia-close:hover { color: #1f2328; background: rgba(0,0,0,0.06); }\r\n .guia-body {\r\n overflow-y: auto;\r\n padding: 18px 18px 20px;\r\n color: #1f2328;\r\n font-size: 0.83rem;\r\n line-height: 1.65;\r\n background: #ffffff;\r\n }\r\n .guia-body::-webkit-scrollbar { width: 5px; }\r\n .guia-body::-webkit-scrollbar-track { background: transparent; }\r\n .guia-body::-webkit-scrollbar-thumb { background: #d0d7de; border-radius: 3px; }\r\n .guia-section-title {\r\n font-size: 1rem;\r\n font-weight: 700;\r\n color: #1f2328;\r\n margin: 0 0 12px 0;\r\n padding-bottom: 8px;\r\n border-bottom: 1px solid #d0d7de;\r\n }\r\n .guia-block { margin-bottom: 14px; }\r\n .guia-label {\r\n font-size: 0.72rem;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n color: #636c76;\r\n margin-bottom: 4px;\r\n }\r\n .guia-text { color: #1f2328; }\r\n .guia-formula {\r\n background: #f6f8fa;\r\n border: 1px solid #d0d7de;\r\n border-radius: 6px;\r\n padding: 10px 14px;\r\n text-align: center;\r\n font-family: 'JetBrains Mono', monospace;\r\n font-size: 0.88rem;\r\n color: #0550ae;\r\n margin: 10px 0;\r\n }\r\n .guia-steps { list-style: none; margin: 0; padding: 0; counter-reset: steps; }\r\n .guia-steps li {\r\n counter-increment: steps;\r\n display: flex;\r\n gap: 10px;\r\n margin-bottom: 8px;\r\n align-items: flex-start;\r\n color: #1f2328;\r\n }\r\n .guia-steps li::before {\r\n content: counter(steps);\r\n background: #dafbe1;\r\n color: #1a7f37;\r\n font-size: 0.72rem;\r\n font-weight: 700;\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n margin-top: 1px;\r\n border: 1px solid #1a7f37;\r\n }\r\n .guia-result {\r\n background: #dafbe1;\r\n border-left: 3px solid #1a7f37;\r\n border-radius: 0 6px 6px 0;\r\n padding: 10px 14px;\r\n color: #1f2328;\r\n font-size: 0.82rem;\r\n margin-top: 10px;\r\n }\r\n .guia-params {\r\n background: #f6f8fa;\r\n border: 1px solid #d0d7de;\r\n border-radius: 6px;\r\n padding: 10px 14px;\r\n font-size: 0.8rem;\r\n color: #1f2328;\r\n }\r\n .guia-params span { color: #0550ae; font-family: 'JetBrains Mono', monospace; }\r\n .var { font-family: 'JetBrains Mono', monospace; }\r\n .var.pos { color: #cf222e; }\r\n .var.neg { color: #0550ae; }\r\n .var.neu { color: #7d4e00; }\r\n .var.ok { color: #1a7f37; }\r\n<\/style>\r\n\r\n<div class=\"guia-panel\" id=\"guiaPanel\">\r\n <div class=\"guia-header\">\r\n <div class=\"guia-header-title\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>\r\n Gu\u00eda de uso\r\n <\/div>\r\n <button class=\"guia-close\" onclick=\"toggleGuia()\">\u2715<\/button>\r\n <\/div>\r\n\r\n <div class=\"guia-body\">\r\n\r\n \r\n\r\n\r\n\r\n<div style=\"font-family: Arial, sans-serif; line-height: 1.6; color: #333;\">\r\n<h3 style=\"color: #0056b3;\"> <strong><span style=\"font-size: 16px; color: #000080;\">Ley de Ohm<\/span><\/strong><strong><span style=\"font-size: 16px; color: #000080;\"> <\/span><span style=\"font-size: 16px; color: #ff0000;\"> <\/span><\/strong><\/h3>\r\n<span style=\"font-size: 16px;\"><strong>Objetivo:<\/strong> Verificar la relaci\u00f3n lineal entre el voltaje, la corriente y la resistencia en un circuito el\u00e9ctrico simple, y comprender c\u00f3mo cada par\u00e1metro afecta el flujo de carga.<\/span>\r\n\r\n<span style=\"font-size: 16px;\"><strong>Descripci\u00f3n breve:<\/strong> Simulaci\u00f3n interactiva que muestra de manera macrosc\u00f3pica y microsc\u00f3pica c\u00f3mo la variaci\u00f3n de la diferencia de potencial \$V\$ y la resistencia \$R\$ modifican la intensidad de la corriente \$I\$. Utiliza una representaci\u00f3n visual donde el tama\u00f1o de las variables en la ecuaci\u00f3n cambia proporcionalmente a sus valores f\u00edsicos, permitiendo una comprensi\u00f3n intuitiva de la relaci\u00f3n:<\/span>\r\n<div style=\"text-align: center; margin: 20px 0;\"><span style=\"font-size: 16px;\">\$ V = I \\cdot R \$<\/span><\/div>\r\n<span style=\"font-size: 16px;\"><strong>C\u00f3mo usar (pasos):<\/strong><\/span>\r\n<ul style=\"margin-left: 20px;\">\r\n \t<li><span style=\"font-size: 16px;\">Ajustar el voltaje de la fuente (\$V\$) mediante el control deslizante y observar el cambio en la intensidad de la corriente.<\/span><\/li>\r\n \t<li><span style=\"font-size: 16px;\">Modificar el valor de la resistencia (\$R\$) del componente y notar c\u00f3mo se dificulta o facilita el paso de los portadores de carga.<\/span><\/li>\r\n \t<li><span style=\"font-size: 16px;\">Observar el tama\u00f1o de las letras \$V\$, \$I\$ y \$R\$ en la f\u00f3rmula principal para visualizar la proporcionalidad directa e inversa.<\/span><\/li>\r\n \t<li><span style=\"font-size: 16px;\">Consultar las lecturas num\u00e9ricas de los medidores integrados (Voltios, Amperios y Ohmios) para realizar c\u00e1lculos manuales y compararlos con la simulaci\u00f3n.<\/span><\/li>\r\n<\/ul>\r\n<span style=\"font-size: 16px;\"><strong>Par\u00e1metros ajustables:<\/strong> Voltaje de la bater\u00eda (\$V\$), valor de la resistencia (\$R\$), mostrar\/ocultar etiquetas de unidades y visualizaci\u00f3n del flujo de carga.<\/span>\r\n<p style=\"background-color: #f8f9fa; padding: 15px; border-left: 5px solid #0056b3;\"><span style=\"font-size: 16px;\"><strong>Resultados esperados \/ observaciones:<\/strong> La corriente es directamente proporcional al voltaje e inversamente proporcional a la resistencia. A mayor resistencia (con voltaje constante), la corriente disminuye; si se aumenta el voltaje (manteniendo la resistencia), la corriente aumenta de forma lineal.<\/span><\/p>\r\n\r\n<\/div>\r\n\r\n\r\n \r\n\r\n <\/div>\r\n<\/div>\r\n\r\n<button class=\"btn-guia\" onclick=\"toggleGuia()\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>\r\n Gu\u00eda de uso\r\n<\/button>\r\n\r\n<script>\r\n function toggleGuia() {\r\n document.getElementById('guiaPanel').classList.toggle('visible');\r\n }\r\n<\/script>\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>FLUXAR – Ley de Ohm Microscopica Ley de Ohm Microscopica Modelo de Drude – Visualizacion 2D Parametros Densidad electronica (n) 5.0 \u00d710\u00b2\u2078 electrones\/m\u00b3 Radio del…<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-5689","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>ley_de_ohm - F\u00edsica 2<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ley_de_ohm - F\u00edsica 2\" \/>\n<meta property=\"og:description\" content=\"FLUXAR – Ley de Ohm Microscopica Ley de Ohm Microscopica Modelo de Drude – Visualizacion 2D Parametros Densidad electronica (n) 5.0 \u00d710\u00b2\u2078 electrones\/m\u00b3 Radio del…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm\/\" \/>\n<meta property=\"og:site_name\" content=\"F\u00edsica 2\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-19T01:28:04+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/ley_de_ohm\\\/\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/ley_de_ohm\\\/\",\"name\":\"ley_de_ohm - F\u00edsica 2\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#website\"},\"datePublished\":\"2026-03-08T00:44:11+00:00\",\"dateModified\":\"2026-04-19T01:28:04+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/ley_de_ohm\\\/#breadcrumb\"},\"inLanguage\":\"es-AR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/ley_de_ohm\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/ley_de_ohm\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ley_de_ohm\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#website\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/\",\"name\":\"F\u00edsica 2\",\"description\":\"FICA - UNSL\",\"publisher\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es-AR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#organization\",\"name\":\"SAC- Secretar\u00eda General FICA\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-AR\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/SG-Logo.png\",\"contentUrl\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/SG-Logo.png\",\"width\":4483,\"height\":1231,\"caption\":\"SAC- Secretar\u00eda General FICA\"},\"image\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"ley_de_ohm - F\u00edsica 2","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm\/","og_locale":"es_ES","og_type":"article","og_title":"ley_de_ohm - F\u00edsica 2","og_description":"FLUXAR – Ley de Ohm Microscopica Ley de Ohm Microscopica Modelo de Drude – Visualizacion 2D Parametros Densidad electronica (n) 5.0 \u00d710\u00b2\u2078 electrones\/m\u00b3 Radio del…","og_url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm\/","og_site_name":"F\u00edsica 2","article_modified_time":"2026-04-19T01:28:04+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm\/","url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm\/","name":"ley_de_ohm - F\u00edsica 2","isPartOf":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#website"},"datePublished":"2026-03-08T00:44:11+00:00","dateModified":"2026-04-19T01:28:04+00:00","breadcrumb":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm\/#breadcrumb"},"inLanguage":"es-AR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/fisica2.fica.unsl.edu.ar\/"},{"@type":"ListItem","position":2,"name":"ley_de_ohm"}]},{"@type":"WebSite","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#website","url":"https:\/\/fisica2.fica.unsl.edu.ar\/","name":"F\u00edsica 2","description":"FICA - UNSL","publisher":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fisica2.fica.unsl.edu.ar\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es-AR"},{"@type":"Organization","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#organization","name":"SAC- Secretar\u00eda General FICA","url":"https:\/\/fisica2.fica.unsl.edu.ar\/","logo":{"@type":"ImageObject","inLanguage":"es-AR","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#\/schema\/logo\/image\/","url":"https:\/\/fisica2.fica.unsl.edu.ar\/wp-content\/uploads\/2021\/11\/SG-Logo.png","contentUrl":"https:\/\/fisica2.fica.unsl.edu.ar\/wp-content\/uploads\/2021\/11\/SG-Logo.png","width":4483,"height":1231,"caption":"SAC- Secretar\u00eda General FICA"},"image":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/5689","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/comments?post=5689"}],"version-history":[{"count":130,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/5689\/revisions"}],"predecessor-version":[{"id":7125,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/5689\/revisions\/7125"}],"wp:attachment":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/media?parent=5689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n FLUXAR - Ley de Ohm Microscopica<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <style>\r\n :root {\r\n --bg-primary: #05080f;\r\n --bg-panel: rgba(10, 14, 23, 0.85);\r\n --text-primary: #e8edf5;\r\n --text-secondary: #8b9cb8;\r\n --accent-electron: #ef4444;\r\n --accent-conductor: #3b82f6;\r\n --accent-current: #22c55e;\r\n --accent-field: #eab308;\r\n --border-color: #2d3a4f;\r\n }\r\n \r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n \r\n body {\r\n font-family: 'Space Grotesk', sans-serif;\r\n background: var(--bg-primary);\r\n color: var(--text-primary);\r\n overflow: hidden;\r\n height: 100vh;\r\n width: 100vw;\r\n }\r\n\r\n \/* CANVAS DE FONDO (Pantalla Completa) *\/\r\n #simulation-area {\r\n position: fixed;\r\n top: 0; left: 0;\r\n width: 100%; height: 100%;\r\n z-index: 1;\r\n background: radial-gradient(circle at 50% 50%, #111827 0%, #05080f 80%);\r\n }\r\n \r\n canvas { \r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n \/* PANELES FLOTANTES *\/\r\n .panel-overlay {\r\n position: fixed;\r\n top: 20px;\r\n bottom: 20px;\r\n background: var(--bg-panel);\r\n backdrop-filter: blur(12px);\r\n border: 1px solid var(--border-color);\r\n border-radius: 16px;\r\n padding: 25px;\r\n z-index: 10;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n overflow-y: auto;\r\n transition: transform 0.3s ease, opacity 0.3s ease;\r\n width: 320px;\r\n }\r\n\r\n .left-panel { left: 20px; }\r\n .right-panel { right: 20px; }\r\n\r\n \/* T\u00cdTULOS Y TIPOGRAF\u00cdA *\/\r\n h1 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; }\r\n .subtitle { font-size: 0.75rem; color: var(--text-secondary); margin-top: 5px; opacity: 0.8; }\r\n \r\n .section { margin-bottom: 15px; }\r\n .section-title { \r\n font-size: 0.65rem; \r\n color: var(--text-secondary); \r\n text-transform: uppercase; \r\n letter-spacing: 1.5px; \r\n margin-bottom: 15px; \r\n opacity: 0.6;\r\n }\r\n\r\n \/* CONTROLES *\/\r\n .control-row { margin-bottom: 20px; }\r\n .control-label { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 8px; }\r\n .value-display {\r\n font-family: 'JetBrains Mono', monospace;\r\n color: var(--accent-current);\r\n font-size: 0.8rem;\r\n background: rgba(34, 197, 94, 0.1);\r\n padding: 2px 6px;\r\n border-radius: 4px;\r\n }\r\n \r\n input[type=\"range\"] {\r\n width: 100%; height: 2px;\r\n background: #1a2332;\r\n border-radius: 1px;\r\n outline: none;\r\n -webkit-appearance: none;\r\n cursor: pointer;\r\n }\r\n input[type=\"range\"]::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n width: 12px; height: 12px;\r\n background: var(--accent-current);\r\n border-radius: 50%;\r\n border: 2px solid var(--bg-primary);\r\n box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);\r\n }\r\n\r\n .toggle-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 0.85rem; }\r\n \r\n .switch {\r\n position: relative;\r\n width: 36px; height: 20px;\r\n background: #1a2332;\r\n border-radius: 10px;\r\n cursor: pointer;\r\n transition: background 0.3s;\r\n border: 1px solid rgba(255,255,255,0.1);\r\n }\r\n .switch.active { \r\n background: rgba(34, 197, 94, 0.3); \r\n border-color: var(--accent-current);\r\n }\r\n .switch::after {\r\n content: '';\r\n position: absolute;\r\n top: 2px; left: 2px;\r\n width: 14px; height: 14px;\r\n background: #8b9cb8;\r\n border-radius: 50%;\r\n transition: all 0.3s;\r\n }\r\n .switch.active::after { \r\n transform: translateX(16px); \r\n background: var(--accent-current);\r\n box-shadow: 0 0 8px var(--accent-current);\r\n }\r\n\r\n \/* TARJETAS DE DATOS *\/\r\n .data-card {\r\n background: rgba(255, 255, 255, 0.03);\r\n border: 1px solid rgba(255,255,255,0.05);\r\n border-radius: 8px;\r\n padding: 15px;\r\n margin-bottom: 12px;\r\n }\r\n .data-row { display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 8px; color: var(--text-secondary); }\r\n .data-row:last-child { margin-bottom: 0; }\r\n \r\n .highlight-value { \r\n font-family: 'JetBrains Mono', monospace; \r\n color: white; \r\n font-weight: 500;\r\n }\r\n .current-value { color: var(--accent-current); font-weight: 700; font-size: 0.9rem; }\r\n .current-label { color: var(--accent-current); font-weight: 600; }\r\n\r\n \/* CAJA DE F\u00d3RMULAS - ESTILO UNIFICADO *\/\r\n .equation-box {\r\n background: transparent;\r\n border-top: 1px solid rgba(255,255,255,0.1);\r\n padding-top: 20px;\r\n text-align: center;\r\n margin-top: auto;\r\n }\r\n \/* Ambas f\u00f3rmulas con el mismo estilo *\/\r\n .eq-row {\r\n font-family: 'JetBrains Mono', monospace;\r\n font-size: 1.2rem; \/* Mismo tama\u00f1o *\/\r\n color: white; \/* Mismo color *\/\r\n font-weight: 500; \/* Mismo peso *\/\r\n margin-bottom: 10px;\r\n text-shadow: 0 0 20px rgba(255,255,255,0.1);\r\n }\r\n .eq-row:last-child {\r\n margin-bottom: 0;\r\n }\r\n\r\n \/* LOGO *\/\r\n .logo-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin-top: 15px;\r\n padding-top: 15px;\r\n border-top: 1px solid rgba(255,255,255,0.1);\r\n }\r\n .logo-text { font-size: 0.8rem; color: var(--text-secondary); }\r\n .logo-text b { display: block; color: white; font-size: 0.9rem; margin-bottom: 2px; }\r\n\r\n \/* RESPONSIVE *\/\r\n @media (max-width: 1000px) {\r\n .panel-overlay {\r\n position: fixed;\r\n width: 100%;\r\n height: auto;\r\n max-height: 40vh;\r\n top: auto;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n border-radius: 16px 16px 0 0;\r\n }\r\n .left-panel { top: auto; bottom: 0; display: none; } \r\n .right-panel { top: auto; bottom: 0; }\r\n }\r\n \r\n .logo-box {\r\n position: fixed;\r\n bottom: 20px;\r\n right: 20px;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n background: rgba(22, 27, 34, 0.9);\r\n padding: 10px 14px;\r\n border-radius: 8px;\r\n border: 1px solid var(--border-color);\r\n z-index: 100;\r\n }\r\n .logo-img { width: 100px; }\r\n .logo-text { font-size: 0.7rem; line-height: 1.3; color: var(--text-muted); }\r\n .logo-text b { display: block; color: var(--text-main); font-weight: 600; }\r\n\r\n\r\n \r\n \r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <div id=\"simulation-area\">\r\n <canvas id=\"simCanvas\"><\/canvas>\r\n <\/div>\r\n\r\n \r\n <div class=\"panel-overlay left-panel\">\r\n <div>\r\n <h1>Ley de Ohm Microscopica<\/h1>\r\n <div class=\"subtitle\">Modelo de Drude - Visualizacion 2D<\/div>\r\n <\/div>\r\n \r\n <div class=\"section\">\r\n <div class=\"section-title\">Parametros<\/div>\r\n \r\n <div class=\"control-row\">\r\n <div class=\"control-label\">\r\n <span>Densidad electronica (n)<\/span>\r\n <span class=\"value-display\" id=\"valDensity\">5.0<\/span>\r\n <\/div>\r\n <div style=\"font-size:0.7rem; color:var(--text-secondary); margin-bottom:5px;\">\u00d710\u00b2\u2078 electrones\/m\u00b3<\/div>\r\n <input type=\"range\" id=\"sldDensity\" min=\"1\" max=\"10\" value=\"5\" step=\"0.1\">\r\n <\/div>\r\n \r\n <div class=\"control-row\">\r\n <div class=\"control-label\">\r\n <span>Radio del conductor<\/span>\r\n <span class=\"value-display\" id=\"valRadius\">1.0 mm<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"sldRadius\" min=\"0.5\" max=\"2\" value=\"1\" step=\"0.1\">\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"section\">\r\n <div class=\"section-title\">Campo Electrico<\/div>\r\n <div class=\"toggle-row\">\r\n <span>Aplicar Campo E<\/span>\r\n <div class=\"switch\" id=\"tglField\"><\/div>\r\n <\/div>\r\n \r\n <div id=\"fieldControls\" style=\"opacity: 0.3; pointer-events: none; margin-top: 15px; transition: opacity 0.3s;\">\r\n <div class=\"control-row\" style=\"margin-bottom:0;\">\r\n <div class=\"control-label\"><span>Intensidad<\/span> <span class=\"value-display\" id=\"valField\">1.0<\/span><\/div>\r\n <div style=\"font-size:0.7rem; color:var(--text-secondary); margin-bottom:5px;\">\u00d710\u207b\u00b2 V\/m<\/div>\r\n <input type=\"range\" id=\"sldField\" min=\"0.1\" max=\"5\" value=\"1\" step=\"0.1\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"section\">\r\n <div class=\"section-title\">Colisiones<\/div>\r\n <div class=\"control-row\" style=\"margin-bottom:0;\">\r\n <div class=\"control-label\"><span>Frecuencia<\/span> <span class=\"value-display\" id=\"valCollision\">1.0<\/span><\/div>\r\n <div style=\"font-size:0.7rem; color:var(--text-secondary); margin-bottom:5px;\">\u00d710\u00b9\u2074 Hz<\/div>\r\n <input type=\"range\" id=\"sldCollision\" min=\"0.2\" max=\"3\" value=\"1\" step=\"0.1\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"section\">\r\n <div class=\"toggle-row\">\r\n <span>Mostrar Seccion A-A<\/span>\r\n <div class=\"switch active\" id=\"tglSection\"><\/div>\r\n <\/div>\r\n <div class=\"toggle-row\">\r\n <span>Vectores y Polaridad<\/span>\r\n <div class=\"switch active\" id=\"tglVectors\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"panel-overlay right-panel\">\r\n <div class=\"section-title\">Mediciones<\/div>\r\n \r\n <div class=\"data-card\">\r\n <div class=\"data-row\"><span>Campo Electrico<\/span><span class=\"highlight-value\" id=\"infoE\">0.00 V\/m<\/span><\/div>\r\n <div class=\"data-row\"><span>Vel. Deriva<\/span><span class=\"highlight-value\" id=\"infoVd\">0.00 m\/s<\/span><\/div>\r\n <div class=\"data-row\"><span>Area<\/span><span class=\"highlight-value\" id=\"infoA\">3.14 mm\u00b2<\/span><\/div>\r\n <div class=\"data-row\" style=\"margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.1);\">\r\n <span class=\"current-label\">Corriente I<\/span>\r\n <span class=\"current-value\" id=\"infoI\">0.00 A<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"data-card\" style=\"border-color: rgba(234, 179, 8, 0.3); text-align: center;\">\r\n <div style=\"font-size:0.7rem; color:var(--text-secondary); margin-bottom:5px;\">Contador de Seccion<\/div>\r\n <div style=\"font-size: 1.8rem; color: #eab308; font-family: 'JetBrains Mono', monospace; font-weight: bold;\" id=\"infoCounter\">0<\/div>\r\n <\/div>\r\n\r\n <div class=\"equation-box\">\r\n \r\n <div class=\"eq-row\">v<sub>d<\/sub> = qE\u03c4 \/ m<\/div>\r\n <div class=\"eq-row\">I = n q A v<sub>d<\/sub><\/div>\r\n \r\n \r\n \r\n <br><br><br>\r\n \r\n \r\n<div class=\"logo-box\">\r\n <a href=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/FISAR_SIM\/\" target=\"_blank\">\r\n <img decoding=\"async\" src=\"FISAR_SIM_1\" alt=\"Logo\" class=\"logo-img\"><\/a>\r\n <div class=\"logo-text\"><b>FICA UNSL<\/b>Simulaciones Interactivas<\/div>\r\n<\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ --- MOTOR DE SIMULACI\u00d3N 2D ---\r\n const canvas = document.getElementById('simCanvas');\r\n const ctx = canvas.getContext('2d');\r\n \r\n function resizeCanvas() {\r\n canvas.width = window.innerWidth;\r\n canvas.height = window.innerHeight;\r\n }\r\n resizeCanvas();\r\n window.addEventListener('resize', resizeCanvas);\r\n\r\n \/\/ Constantes F\u00edsicas\r\n const q = 1.602e-19; \/\/ Carga del electr\u00f3n\r\n const m = 9.109e-31; \/\/ Masa del electr\u00f3n\r\n\r\n \/\/ Estado\r\n const state = {\r\n n: 5.0, r: 1.0, E: 1.0, tau: 1.0,\r\n fieldOn: false,\r\n showSection: true,\r\n showVectors: true\r\n };\r\n\r\n let electrons = [];\r\n let counter = 0;\r\n let lastTime = 0;\r\n\r\n \/\/ Inicializar Electrones\r\n function initElectrons() {\r\n electrons = [];\r\n \/\/ Escala visual: el radio de 1mm se mapea a 100px en pantalla\r\n const visualRadius = 100 * state.r; \r\n const len = canvas.width * 0.5; \/\/ El conductor ocupa la mitad de la pantalla\r\n const count = 250; \r\n\r\n for (let i = 0; i < count; i++) {\r\n electrons.push({\r\n x: Math.random() * len - (len\/2),\r\n y: (Math.random() - 0.5) * visualRadius * 2,\r\n vx: (Math.random() - 0.5) * 2,\r\n vy: (Math.random() - 0.5) * 2,\r\n color: `hsl(${Math.random() * 20 + 350}, 90%, 60%)` \/\/ Rojo variado\r\n });\r\n }\r\n }\r\n\r\n \/\/ F\u00edsica\r\n function updatePhysics(dt) {\r\n const radiusM = state.r * 1e-3;\r\n const A = Math.PI * radiusM * radiusM;\r\n const nDens = state.n * 1e28;\r\n const tauTime = 1 \/ (state.tau * 1e14);\r\n const eField = state.fieldOn ? state.E * 1e-2 : 0;\r\n \r\n const vd = state.fieldOn ? (q * eField * tauTime) \/ m : 0;\r\n const I = nDens * q * A * Math.abs(vd);\r\n\r\n document.getElementById('infoE').innerText = eField.toExponential(2) + ' V\/m';\r\n document.getElementById('infoVd').innerText = vd.toExponential(2) + ' m\/s';\r\n document.getElementById('infoA').innerText = (A * 1e6).toFixed(2) + ' mm\u00b2';\r\n document.getElementById('infoI').innerText = I.toExponential(2) + ' A';\r\n\r\n \/\/ Escala Visual\r\n const driftVisual = state.fieldOn ? state.E * 0.6 * (1\/state.tau) : 0;\r\n\r\n const visualRadius = 100 * state.r;\r\n const limitY = visualRadius * 0.95;\r\n const limitX = (canvas.width * 0.5) \/ 2;\r\n\r\n electrons.forEach(e => {\r\n const prevX = e.x;\r\n e.x += e.vx;\r\n e.y += e.vy;\r\n\r\n if (state.fieldOn) e.x -= driftVisual;\r\n\r\n if (Math.random() < 0.015 * state.tau) {\r\n e.vx = (Math.random() - 0.5) * 2.5;\r\n e.vy = (Math.random() - 0.5) * 2.5;\r\n }\r\n\r\n if (Math.abs(e.y) > limitY) {\r\n e.y = limitY * Math.sign(e.y);\r\n e.vy *= -1;\r\n }\r\n\r\n if (e.x > limitX) { e.x = -limitX; e.passed = false; }\r\n else if (e.x < -limitX) { e.x = limitX; e.passed = false; }\r\n\r\n if (state.showSection && state.fieldOn) {\r\n if (prevX > 0 && e.x <= 0 && !e.passed) {\r\n counter++;\r\n e.passed = true;\r\n }\r\n }\r\n });\r\n \r\n document.getElementById('infoCounter').innerText = counter;\r\n }\r\n\r\n \/\/ Renderizado\r\n function draw() {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n \r\n const cx = canvas.width \/ 2;\r\n const cy = canvas.height \/ 2;\r\n const visualRadius = 100 * state.r;\r\n const len = canvas.width * 0.5;\r\n\r\n \/\/ 1. Conductor (Cilindro)\r\n ctx.fillStyle = 'rgba(30, 58, 95, 0.1)';\r\n ctx.strokeStyle = '#3b82f6';\r\n ctx.lineWidth = 2;\r\n ctx.shadowColor = '#3b82f6';\r\n ctx.shadowBlur = 15;\r\n ctx.beginPath();\r\n ctx.roundRect(-len\/2 + cx, -visualRadius + cy, len, visualRadius * 2, 40);\r\n ctx.fill();\r\n ctx.stroke();\r\n ctx.shadowBlur = 0;\r\n\r\n \/\/ 2. Secci\u00f3n Transversal\r\n if (state.showSection) {\r\n ctx.beginPath();\r\n ctx.strokeStyle = 'rgba(34, 197, 94, 0.5)';\r\n ctx.lineWidth = 2;\r\n ctx.setLineDash([10, 10]);\r\n ctx.moveTo(cx, cy - visualRadius - 20);\r\n ctx.lineTo(cx, cy + visualRadius + 20);\r\n ctx.stroke();\r\n ctx.setLineDash([]);\r\n \r\n ctx.fillStyle = 'rgba(34, 197, 94, 0.7)';\r\n ctx.font = '12px Space Grotesk';\r\n ctx.fillText('SECCION A-A', cx + 10, cy - visualRadius - 25);\r\n }\r\n\r\n \/\/ 3. Vectores de Campo\r\n if (state.showVectors && state.fieldOn) {\r\n const arrowY = cy - visualRadius - 60;\r\n \r\n ctx.fillStyle = '#eab308';\r\n ctx.strokeStyle = '#eab308';\r\n ctx.lineWidth = 2;\r\n\r\n \/\/ Flechas m\u00faltiples\r\n const arrowCount = Math.floor(len \/ 150);\r\n for (let i = 0; i < arrowCount; i++) {\r\n const xOff = (i - (arrowCount-1)\/2) * 150;\r\n drawArrow(ctx, cx + xOff - 20, arrowY, cx + xOff + 20, arrowY, 8);\r\n }\r\n\r\n \/\/ Polaridad\r\n ctx.font = 'bold 30px Space Grotesk';\r\n ctx.fillStyle = '#ef4444';\r\n ctx.fillText('+', -len\/2 + cx - 30, cy + 10);\r\n ctx.fillStyle = '#3b82f6';\r\n ctx.fillText('-', len\/2 + cx + 15, cy + 10);\r\n\r\n ctx.fillStyle = '#eab308';\r\n ctx.font = 'bold 18px Space Grotesk';\r\n ctx.fillText('E', cx, arrowY - 20);\r\n }\r\n\r\n \/\/ 4. Electrones\r\n electrons.forEach(e => {\r\n ctx.beginPath();\r\n ctx.arc(e.x + cx, e.y + cy, 3.5, 0, Math.PI * 2);\r\n ctx.fillStyle = e.color;\r\n ctx.fill();\r\n \r\n \/\/ Signo -\r\n ctx.fillStyle = 'rgba(255,255,255,0.8)';\r\n ctx.fillRect(e.x + cx - 2, e.y + cy - 0.5, 4, 1);\r\n });\r\n }\r\n\r\n function drawArrow(ctx, fromx, fromy, tox, toy, headlen) {\r\n const dx = tox - fromx;\r\n const dy = toy - fromy;\r\n const angle = Math.atan2(dy, dx);\r\n \r\n ctx.beginPath();\r\n ctx.moveTo(fromx, fromy);\r\n ctx.lineTo(tox, toy);\r\n ctx.stroke();\r\n \r\n ctx.beginPath();\r\n ctx.moveTo(tox, toy);\r\n ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI \/ 6), toy - headlen * Math.sin(angle - Math.PI \/ 6));\r\n ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI \/ 6), toy - headlen * Math.sin(angle + Math.PI \/ 6));\r\n ctx.closePath();\r\n ctx.fill();\r\n }\r\n\r\n \/\/ Loop\r\n function loop(timestamp) {\r\n const dt = (timestamp - lastTime) \/ 1000;\r\n lastTime = timestamp;\r\n updatePhysics(dt);\r\n draw();\r\n requestAnimationFrame(loop);\r\n }\r\n\r\n \/\/ Controles\r\n function setupControls() {\r\n const bind = (id, stateKey, displayId) => {\r\n const el = document.getElementById(id);\r\n el.oninput = function() {\r\n state[stateKey] = parseFloat(this.value);\r\n document.getElementById(displayId).innerText = this.value;\r\n if (stateKey === 'r') initElectrons();\r\n };\r\n };\r\n \r\n bind('sldDensity', 'n', 'valDensity');\r\n bind('sldRadius', 'r', 'valRadius');\r\n bind('sldField', 'E', 'valField');\r\n bind('sldCollision', 'tau', 'valCollision');\r\n \r\n document.getElementById('tglField').onclick = function() {\r\n this.classList.toggle('active');\r\n state.fieldOn = this.classList.contains('active');\r\n const fc = document.getElementById('fieldControls');\r\n fc.style.opacity = state.fieldOn ? '1' : '0.3';\r\n fc.style.pointerEvents = state.fieldOn ? 'auto' : 'none';\r\n };\r\n \r\n document.getElementById('tglSection').onclick = function() {\r\n this.classList.toggle('active');\r\n state.showSection = this.classList.contains('active');\r\n };\r\n \r\n document.getElementById('tglVectors').onclick = function() {\r\n this.classList.toggle('active');\r\n state.showVectors = this.classList.contains('active');\r\n };\r\n }\r\n\r\n \/\/ Inicio\r\n setupControls();\r\n initElectrons();\r\n requestAnimationFrame(loop);\r\n\r\n <\/script>\r\n \r\n \r\n \r\n <style>\r\n .btn-guia {\r\n position: fixed;\r\n bottom: 24px;\r\n left: 24px;\r\n z-index: 999;\r\n background: #3fb950;\r\n color: #0d1117;\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 0.82rem;\r\n font-weight: 700;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n padding: 10px 18px;\r\n border-radius: 8px;\r\n border: none;\r\n cursor: pointer;\r\n box-shadow: 0 4px 20px rgba(63,185,80,0.35);\r\n transition: transform 0.2s, box-shadow 0.2s;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n .btn-guia:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 24px rgba(63,185,80,0.5);\r\n }\r\n .btn-guia svg { width: 15px; height: 15px; flex-shrink: 0; }\r\n .guia-panel {\r\n position: fixed;\r\n bottom: 72px;\r\n left: 24px;\r\n width: 400px;\r\n max-height: 70vh;\r\n z-index: 1000;\r\n background: #ffffff;\r\n border: 1px solid #d0d7de;\r\n border-radius: 12px;\r\n box-shadow: 0 16px 48px rgba(0,0,0,0.4);\r\n display: none;\r\n flex-direction: column;\r\n overflow: hidden;\r\n font-family: 'Space Grotesk', sans-serif;\r\n }\r\n .guia-panel.visible { display: flex; }\r\n .guia-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 12px 16px;\r\n border-bottom: 1px solid #d0d7de;\r\n flex-shrink: 0;\r\n background: #f6f8fa;\r\n }\r\n .guia-header-title {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 0.85rem;\r\n font-weight: 700;\r\n color: #1f2328;\r\n }\r\n .guia-header-title svg { width: 15px; height: 15px; color: #3fb950; }\r\n .guia-close {\r\n background: none;\r\n border: none;\r\n color: #636c76;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n padding: 2px 7px;\r\n border-radius: 4px;\r\n transition: color 0.2s, background 0.2s;\r\n line-height: 1;\r\n }\r\n .guia-close:hover { color: #1f2328; background: rgba(0,0,0,0.06); }\r\n .guia-body {\r\n overflow-y: auto;\r\n padding: 18px 18px 20px;\r\n color: #1f2328;\r\n font-size: 0.83rem;\r\n line-height: 1.65;\r\n background: #ffffff;\r\n }\r\n .guia-body::-webkit-scrollbar { width: 5px; }\r\n .guia-body::-webkit-scrollbar-track { background: transparent; }\r\n .guia-body::-webkit-scrollbar-thumb { background: #d0d7de; border-radius: 3px; }\r\n .guia-section-title {\r\n font-size: 1rem;\r\n font-weight: 700;\r\n color: #1f2328;\r\n margin: 0 0 12px 0;\r\n padding-bottom: 8px;\r\n border-bottom: 1px solid #d0d7de;\r\n }\r\n .guia-block { margin-bottom: 14px; }\r\n .guia-label {\r\n font-size: 0.72rem;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n color: #636c76;\r\n margin-bottom: 4px;\r\n }\r\n .guia-text { color: #1f2328; }\r\n .guia-formula {\r\n background: #f6f8fa;\r\n border: 1px solid #d0d7de;\r\n border-radius: 6px;\r\n padding: 10px 14px;\r\n text-align: center;\r\n font-family: 'JetBrains Mono', monospace;\r\n font-size: 0.88rem;\r\n color: #0550ae;\r\n margin: 10px 0;\r\n }\r\n .guia-steps { list-style: none; margin: 0; padding: 0; counter-reset: steps; }\r\n .guia-steps li {\r\n counter-increment: steps;\r\n display: flex;\r\n gap: 10px;\r\n margin-bottom: 8px;\r\n align-items: flex-start;\r\n color: #1f2328;\r\n }\r\n .guia-steps li::before {\r\n content: counter(steps);\r\n background: #dafbe1;\r\n color: #1a7f37;\r\n font-size: 0.72rem;\r\n font-weight: 700;\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n margin-top: 1px;\r\n border: 1px solid #1a7f37;\r\n }\r\n .guia-result {\r\n background: #dafbe1;\r\n border-left: 3px solid #1a7f37;\r\n border-radius: 0 6px 6px 0;\r\n padding: 10px 14px;\r\n color: #1f2328;\r\n font-size: 0.82rem;\r\n margin-top: 10px;\r\n }\r\n .guia-params {\r\n background: #f6f8fa;\r\n border: 1px solid #d0d7de;\r\n border-radius: 6px;\r\n padding: 10px 14px;\r\n font-size: 0.8rem;\r\n color: #1f2328;\r\n }\r\n .guia-params span { color: #0550ae; font-family: 'JetBrains Mono', monospace; }\r\n .var { font-family: 'JetBrains Mono', monospace; }\r\n .var.pos { color: #cf222e; }\r\n .var.neg { color: #0550ae; }\r\n .var.neu { color: #7d4e00; }\r\n .var.ok { color: #1a7f37; }\r\n<\/style>\r\n\r\n<div class=\"guia-panel\" id=\"guiaPanel\">\r\n <div class=\"guia-header\">\r\n <div class=\"guia-header-title\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>\r\n Gu\u00eda de uso\r\n <\/div>\r\n <button class=\"guia-close\" onclick=\"toggleGuia()\">\u2715<\/button>\r\n <\/div>\r\n\r\n <div class=\"guia-body\">\r\n\r\n \r\n\r\n\r\n\r\n<div style=\"font-family: Arial, sans-serif; line-height: 1.6; color: #333;\">\r\n<h3 style=\"color: #0056b3;\"> <strong><span style=\"font-size: 16px; color: #000080;\">Ley de Ohm<\/span><\/strong><strong><span style=\"font-size: 16px; color: #000080;\"> <\/span><span style=\"font-size: 16px; color: #ff0000;\"> <\/span><\/strong><\/h3>\r\n<span style=\"font-size: 16px;\"><strong>Objetivo:<\/strong> Verificar la relaci\u00f3n lineal entre el voltaje, la corriente y la resistencia en un circuito el\u00e9ctrico simple, y comprender c\u00f3mo cada par\u00e1metro afecta el flujo de carga.<\/span>\r\n\r\n<span style=\"font-size: 16px;\"><strong>Descripci\u00f3n breve:<\/strong> Simulaci\u00f3n interactiva que muestra de manera macrosc\u00f3pica y microsc\u00f3pica c\u00f3mo la variaci\u00f3n de la diferencia de potencial \$V\$ y la resistencia \$R\$ modifican la intensidad de la corriente \$I\$. Utiliza una representaci\u00f3n visual donde el tama\u00f1o de las variables en la ecuaci\u00f3n cambia proporcionalmente a sus valores f\u00edsicos, permitiendo una comprensi\u00f3n intuitiva de la relaci\u00f3n:<\/span>\r\n<div style=\"text-align: center; margin: 20px 0;\"><span style=\"font-size: 16px;\">\$ V = I \\cdot R \$<\/span><\/div>\r\n<span style=\"font-size: 16px;\"><strong>C\u00f3mo usar (pasos):<\/strong><\/span>\r\n<ul style=\"margin-left: 20px;\">\r\n \t<li><span style=\"font-size: 16px;\">Ajustar el voltaje de la fuente (\$V\$) mediante el control deslizante y observar el cambio en la intensidad de la corriente.<\/span><\/li>\r\n \t<li><span style=\"font-size: 16px;\">Modificar el valor de la resistencia (\$R\$) del componente y notar c\u00f3mo se dificulta o facilita el paso de los portadores de carga.<\/span><\/li>\r\n \t<li><span style=\"font-size: 16px;\">Observar el tama\u00f1o de las letras \$V\$, \$I\$ y \$R\$ en la f\u00f3rmula principal para visualizar la proporcionalidad directa e inversa.<\/span><\/li>\r\n \t<li><span style=\"font-size: 16px;\">Consultar las lecturas num\u00e9ricas de los medidores integrados (Voltios, Amperios y Ohmios) para realizar c\u00e1lculos manuales y compararlos con la simulaci\u00f3n.<\/span><\/li>\r\n<\/ul>\r\n<span style=\"font-size: 16px;\"><strong>Par\u00e1metros ajustables:<\/strong> Voltaje de la bater\u00eda (\$V\$), valor de la resistencia (\$R\$), mostrar\/ocultar etiquetas de unidades y visualizaci\u00f3n del flujo de carga.<\/span>\r\n<p style=\"background-color: #f8f9fa; padding: 15px; border-left: 5px solid #0056b3;\"><span style=\"font-size: 16px;\"><strong>Resultados esperados \/ observaciones:<\/strong> La corriente es directamente proporcional al voltaje e inversamente proporcional a la resistencia. A mayor resistencia (con voltaje constante), la corriente disminuye; si se aumenta el voltaje (manteniendo la resistencia), la corriente aumenta de forma lineal.<\/span><\/p>\r\n\r\n<\/div>\r\n\r\n\r\n \r\n\r\n <\/div>\r\n<\/div>\r\n\r\n<button class=\"btn-guia\" onclick=\"toggleGuia()\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>\r\n Gu\u00eda de uso\r\n<\/button>\r\n\r\n<script>\r\n function toggleGuia() {\r\n document.getElementById('guiaPanel').classList.toggle('visible');\r\n }\r\n<\/script>\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>FLUXAR – Ley de Ohm Microscopica Ley de Ohm Microscopica Modelo de Drude – Visualizacion 2D Parametros Densidad electronica (n) 5.0 \u00d710\u00b2\u2078 electrones\/m\u00b3 Radio del…<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-5689","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>ley_de_ohm - F\u00edsica 2<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ley_de_ohm - F\u00edsica 2\" \/>\n<meta property=\"og:description\" content=\"FLUXAR – Ley de Ohm Microscopica Ley de Ohm Microscopica Modelo de Drude – Visualizacion 2D Parametros Densidad electronica (n) 5.0 \u00d710\u00b2\u2078 electrones\/m\u00b3 Radio del…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm\/\" \/>\n<meta property=\"og:site_name\" content=\"F\u00edsica 2\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-19T01:28:04+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/ley_de_ohm\\\/\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/ley_de_ohm\\\/\",\"name\":\"ley_de_ohm - F\u00edsica 2\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#website\"},\"datePublished\":\"2026-03-08T00:44:11+00:00\",\"dateModified\":\"2026-04-19T01:28:04+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/ley_de_ohm\\\/#breadcrumb\"},\"inLanguage\":\"es-AR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/ley_de_ohm\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/ley_de_ohm\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ley_de_ohm\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#website\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/\",\"name\":\"F\u00edsica 2\",\"description\":\"FICA - UNSL\",\"publisher\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es-AR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#organization\",\"name\":\"SAC- Secretar\u00eda General FICA\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-AR\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/SG-Logo.png\",\"contentUrl\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/SG-Logo.png\",\"width\":4483,\"height\":1231,\"caption\":\"SAC- Secretar\u00eda General FICA\"},\"image\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"ley_de_ohm - F\u00edsica 2","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm\/","og_locale":"es_ES","og_type":"article","og_title":"ley_de_ohm - F\u00edsica 2","og_description":"FLUXAR – Ley de Ohm Microscopica Ley de Ohm Microscopica Modelo de Drude – Visualizacion 2D Parametros Densidad electronica (n) 5.0 \u00d710\u00b2\u2078 electrones\/m\u00b3 Radio del…","og_url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm\/","og_site_name":"F\u00edsica 2","article_modified_time":"2026-04-19T01:28:04+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm\/","url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm\/","name":"ley_de_ohm - F\u00edsica 2","isPartOf":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#website"},"datePublished":"2026-03-08T00:44:11+00:00","dateModified":"2026-04-19T01:28:04+00:00","breadcrumb":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm\/#breadcrumb"},"inLanguage":"es-AR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/fisica2.fica.unsl.edu.ar\/"},{"@type":"ListItem","position":2,"name":"ley_de_ohm"}]},{"@type":"WebSite","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#website","url":"https:\/\/fisica2.fica.unsl.edu.ar\/","name":"F\u00edsica 2","description":"FICA - UNSL","publisher":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fisica2.fica.unsl.edu.ar\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es-AR"},{"@type":"Organization","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#organization","name":"SAC- Secretar\u00eda General FICA","url":"https:\/\/fisica2.fica.unsl.edu.ar\/","logo":{"@type":"ImageObject","inLanguage":"es-AR","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#\/schema\/logo\/image\/","url":"https:\/\/fisica2.fica.unsl.edu.ar\/wp-content\/uploads\/2021\/11\/SG-Logo.png","contentUrl":"https:\/\/fisica2.fica.unsl.edu.ar\/wp-content\/uploads\/2021\/11\/SG-Logo.png","width":4483,"height":1231,"caption":"SAC- Secretar\u00eda General FICA"},"image":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/5689","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/comments?post=5689"}],"version-history":[{"count":130,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/5689\/revisions"}],"predecessor-version":[{"id":7125,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/5689\/revisions\/7125"}],"wp:attachment":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/media?parent=5689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}