https://camera-signal-route.netlify.app/

1<!doctype html>
2<html lang="es">
3  <head>
4    <meta charset="UTF-8" />
5<!-- This site is hosted on Netlify. Anyone can build and deploy a site
6     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=4482acc7-a08d-4cb8-af97-12c0e8597e0b
7     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
8    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9    <meta name="theme-color" content="#07100f" />
10    <meta name="description" content="Museo interactivo de la ruta de la señal dentro de una cámara digital." />
11    <title>De fotones a archivos · Ruta de la señal</title>
12    <link rel="stylesheet" href="./styles.css?v=1.6.5" />
13  </head>
14  <body>
15    <a class="skip-link" href="#signal-map">Saltar al diagrama</a>
16    <div class="grain" aria-hidden="true"></div>
17    <main class="museum-shell">
18      <header class="hero">
19        <div class="hero-copy">
20          <p class="eyebrow"><span></span> Museo de la imagen digital · Sala 01</p>
21          <h1>De fotones<br /><em>a archivos</em></h1>
22          <p class="hero-intro">Recorre el interior de una cámara y descubre cuándo la luz deja de ser luz, cuándo aparecen los píxeles y por qué RAW y video no son la misma ruta.</p>
23        </div>
24        <div class="hero-index" aria-label="Resumen de la experiencia">
25          <span class="index-number">08</span>
26          <div><strong>conceptos</strong><span>2 rutas digitales</span></div>
27        </div>
28      </header>
29
30      <section class="orientation" aria-label="Instrucciones">
31        <span class="orientation-mark" aria-hidden="true">↳</span>
32        <p><strong>Empieza por la luz.</strong> Selecciona cualquier pieza para abrir su cédula o sigue el recorrido completo.</p>
33        <button class="start-tour" id="start-tour" type="button">Iniciar recorrido <span aria-hidden="true">→</span></button>
34      </section>
35
36      <section class="map-section" id="signal-map" aria-labelledby="map-title">
37        <div class="section-heading">
38          <div>
39            <p class="section-kicker">La cámara por dentro</p>
40            <h2 id="map-title">Ruta completa de la señal</h2>
41          </div>
42          <div class="route-legend" aria-label="Leyenda">
43            <span><i class="common"></i> Señal común</span>
44            <span><i class="raw"></i> Ruta RAW</span>
45            <span><i class="video"></i> Ruta de video</span>
46          </div>
47        </div>
48
49        <div class="diagram-frame">
50          <div class="diagram" id="diagram" aria-label="Diagrama interactivo de la ruta de señal">
51            <svg class="route-lines" viewBox="0 0 1600 600" preserveAspectRatio="none" aria-hidden="true">
52              <defs>
53                <marker id="arrow-common" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto"><path d="M0,0 L0,6 L7,3 z" fill="#aebbb5" /></marker>
54                <marker id="arrow-raw" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto"><path d="M0,0 L0,6 L7,3 z" fill="#f1ae62" /></marker>
55                <marker id="arrow-video" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto"><path d="M0,0 L0,6 L7,3 z" fill="#63d9c6" /></marker>
56              </defs>
57              <path class="line common-line" d="M185 300 H995" />
58              <path class="line raw-line" d="M995 300 C1040 300 1025 145 1090 145 H1250 C1320 145 1300 300 1360 300" />
59              <path class="line video-line" d="M995 300 C1040 300 1025 455 1090 455 H1360" />
60            </svg>
61            <div class="nodes" id="nodes"></div>
62            <span class="branch-label raw-label">Datos del sensor · RAW</span>
63            <span class="branch-label video-label">Imagen procesada · VIDEO</span>
64          </div>
65        </div>
66        <p class="map-note"><span aria-hidden="true">✦</span> RAW puede estar comprimido. La diferencia decisiva es qué procesamiento queda f

66ijado y qué decisiones conserva postproducción.</p>
67      </section>
68
69      <section class="concept-strip" aria-labelledby="distinctions-title">
70        <div>
71          <p class="section-kicker">Tres distinciones esenciales</p>
72          <h2 id="distinctions-title">No son sinónimos</h2>
73        </div>
74        <div class="distinction"><span>01</span><strong>Fotosito</strong><p>Recoge fotones y produce una señal monocromática.</p></div>
75        <div class="distinction"><span>02</span><strong>Sensel</strong><p>Es el valor de señal producido por ese fotosito.</p></div>
76        <div class="distinction"><span>03</span><strong>Píxel</strong><p>Es una muestra RGB reconstruida después del Debayering.</p></div>
77      </section>
78
79      <details class="bibliography">
80        <summary><span>Fuentes y criterio editorial</span><span aria-hidden="true">＋</span></summary>
81        <div class="bibliography-body" id="bibliography"></div>
82      </details>
83
84      <footer>
85        <span>Ruta de la señal de cámara</span>
86        <span>Supervisión de postproducción · v1.6.5</span>
87      </footer>
88    </main>
89
90    <dialog class="exhibit-dialog" id="exhibit-dialog" aria-labelledby="dialog-title">
91      <div class="dialog-shell">
92        <header class="dialog-header">
93          <div class="dialog-identity">
94            <span class="dialog-number" id="dialog-number"></span>
95            <div><p id="dialog-route"></p><h2 id="dialog-title"></h2></div>
96          </div>
97          <button class="close-dialog" id="close-dialog" type="button" aria-label="Cerrar cédula">×</button>
98        </header>
99
100        <div class="dialog-body">
101          <div class="demo-stage" id="demo-stage"></div>
102          <div class="exhibit-copy">
103            <div class="level-tabs" role="tablist" aria-label="Nivel de explicación">
104              <button id="tab-simple" role="tab" aria-selected="true" aria-controls="panel-simple" type="button">En pocas palabras</button>
105              <button id="tab-deep" role="tab" aria-selected="false" aria-controls="panel-deep" type="button">Profundiza</button>
106            </div>
107            <section id="panel-simple" role="tabpanel" aria-labelledby="tab-simple"></section>
108            <section id="panel-deep" role="tabpanel" aria-labelledby="tab-deep" hidden></section>
109            <div class="source-list" id="source-list"></div>
110          </div>
111        </div>
112
113        <div class="branch-choice" id="branch-choice" hidden>
114          <p><strong>La señal puede tomar dos caminos.</strong> Elige qué sucede después del ADC:</p>
115          <div>
116            <button type="button" data-choose-route="raw"><span>6R</span> Conservar datos RAW</button>
117            <button type="button" data-choose-route="video"><span>6V</span> Procesar como video</button>
118          </div>
119        </div>
120
121        <footer class="dialog-footer">
122          <button class="tour-nav previous" id="previous-stage" type="button"><span aria-hidden="true">←</span> Anterior</button>
123          <div class="tour-progress"><span id="progress-text"></span><i><b id="progress-bar"></b></i></div>
124          <button class="tour-nav next" id="next-stage" type="button">Siguiente <span aria-hidden="true">→</span></button>
125        </footer>
126      </div>
127    </dialog>
128
129    

129<script type="module" src="./src/app.js?v=1.6.5"></script>

129
130  </body>
131</html>