Estructura del Proyecto — Independencia Judicial

Metricas del proyecto

Vista General

Resumen de los dos archivos HTML principales y los recursos multimedia que componen el modulo de Independencia Judicial.

📄

m1_1.html

2,929

📊

inf1.html

1,556

📂

Archivos en Assets

186

🎨

Tipos de recurso

Archivos principales

Comparacion

Diferencias de arquitectura, componentes y tecnologias entre la unidad de contenido y la infografia.

m1_1.html Unidad 1.1 — Contenido

Parallax Video Audio Interactivo Flip Cards Reveal

Contenido educativo completo con 9 secciones. Incluye video hero, citas con audio, tarjetas flip de los 3 poderes, garantias constitucionales, seccion Hamilton, premisas interactivas tipo tabs y conclusion con SVG animado. CSS y JS embebidos (~2000 lineas de estilo). Progress bar de lectura y topbar sticky.

inf1.html Infografia — Unidad I

Three.js 3D Depth Parallax Dot Nav Scroll Snap Wave Dividers

Infografia inmersiva con 6 secciones full-screen. Fondo animado Three.js con particulas, navegacion por puntos laterales, scroll snap vertical, shape blobs decorativos con parallax por profundidad. Layout a dos columnas (texto + ilustracion). Conclusion con icono y footer minimalista.

Estructura HTML

m1_1.html

m1_1.html 2,929 lineas · Unidad 1.1 — Aspectos Generales de la Independencia Judicial

L 1–1991 <head> — CSS + Variables

<style> embebido

CSS custom properties (colores navy, teal, amber, brown), reset, tipografia (Playfair Display, Montserrat, Open Sans), componentes visuales, responsive, animaciones reveal y parallax.

L 1992–1996 Progress Bar + Sticky Topbar

.progress-bar, .sticky-topbar

Barra de progreso de lectura fija en top y botones sticky (guardar + menu).

Progress Sticky Nav

L 2004–2082 Hero Video Section

.hero-video.parallax-group

Video principal con poster overlay, controles custom (play, mute, volumen, velocidad), barra de progreso, visualizador de audio, shapes decorativos y wave SVG inferior.

Video Player Parallax Reveal Scale

L 2087–2108 Titulo de Seccion

.section-title-hero #content-start

Badge de unidad (1.1), titulo principal "Aspectos Generales de la Independencia Judicial", linea decorativa.

Reveal Delay

L 2113–2127 Texto Introductorio

.section-text

Parrafos de contenido educativo sobre la independencia judicial como pilar del Estado de Derecho.

L 2132–2155 Cita de Montesquieu

.quote-section

Cita destacada de "El espiritu de las leyes" (1748) con imagen, comillas decorativas, atribucion y reproductor de audio (1_1.m4a).

Audio 1_1 Parallax

L 2160–2243 La Triada de Poderes

.powers-section.parallax-group

Constitucion de EE.UU. 1787: 3 tarjetas flip (Legislativo Art. I, Ejecutivo Art. II, Judicial Art. III), info card con Articulo III Seccion 1, wave SVG y audio (1_4.mp3).

Flip Cards x3 Audio 1_4 Multi-depth

L 2248–2287 Garantias Constitucionales

.constitution-section

Articulo III Seccion 1, con dos guarantee-cards: (a) Estabilidad en el cargo, (b) Irreductibilidad del salario. Audio 1_5.mp3.

Cards x2 Audio 1_5 Parallax

L 2292–2321 Seccion Hamilton

.hamilton-section.parallax-group

El Federalista (1788): cita de Hamilton con imagen decorativa, blobs parallax, audio 1_2.mp3.

Audio 1_2 Blobs

L 2326–2371 Premisas Interactivas

.interactive-section.parallax-group

Tabs interactivos sobre "Separacion de poderes e independencia judicial" con chevrons decorativos, curve SVG y audio 1_7.mp3.

Tabs Audio 1_7 Chevrons

L 2376–2413 Conclusion

.conclusion-section

SVG de martillo de juez animado, titulo "Premisas fundamentales de este modulo", resumen final con divider vertical.

SVG Anim. Reveal L/R

L 2418–2420 Barra Siguiente Unidad

.next-unit-bar

Enlace de navegacion a la siguiente unidad del modulo.

Navegacion

L 2421–2929 <script> — JavaScript

<script> embebido

Parallax engine, IntersectionObserver para reveals, video player custom, reproductores de audio, flip cards, tabs interactivos, progress bar de scroll, save/menu topbar.

Estructura HTML

inf1.html

inf1.html 1,556 lineas · Infografia — Unidad I: Aspectos Generales

L 1–756 <head> — CSS + Tokens

Variables extendidas (navy, teal, gold, orange, brown, terracotta, olive, neutros), tipografia (Playfair, Montserrat, Open Sans), escala tipografica clamp(), scroll-snap, wave dividers SVG, dot-nav, info-cards, shape blobs, reveal animations.

L 758 Three.js Canvas Container

#three-container

Canvas fixed full-screen para particulas 3D animadas como fondo.

Three.js Particulas 3D

L 763 Scroll Progress Bar

.scroll-progress

Barra de progreso horizontal en top que se llena conforme se hace scroll.

Progress Fill

L 768–776 Dot Navigation

Navegacion lateral por puntos fijos, 6 dots para cada seccion con tooltips.

Dot Nav x6 Click Nav

L 780–800 S1: Hero — UNIDAD I

.info-section #sec-hero [data-index="0"]

Pantalla completa con titulo "UNIDAD I", subtitulo "ASPECTOS GENERALES", divider, hint de scroll con flecha, shape blobs (teal + gold), numero romano "I" de fondo, wave divider inferior.

Depth Layers Scroll Hint

L 805–828 S2: Que es la Independencia Judicial?

.info-section.light-bg #sec-definicion [data-index="1"]

Layout dos columnas: info-card con overline + titulo + divider + texto, columna de ilustracion con shape blobs decorativos. Wave divider.

Depth 0.08

L 833–855 S3: Dimensiones de la Independencia

.info-section.light-bg #sec-dimensiones [data-index="2"]

Misma estructura: info-card + ilustracion. Contenido sobre las dimensiones (interna, externa) de la independencia judicial.

Depth 0.08

L 860–884 S4: Fundamento Democratico

.info-section #sec-fundamento [data-index="3"]

Info-card sobre el fundamento democratico de la independencia judicial. Ilustracion en columna vertical.

Depth 0.08

L 889–911 S5: Garantia para la Ciudadania

.info-section #sec-garantia [data-index="4"]

Independencia como garantia ciudadana. Layout a dos columnas con shape blobs.

Depth 0.08

L 916–931 S6: Conclusion

.info-section #sec-conclusion [data-index="5"]

Icono de lampara, cita conclusiva: "La independencia judicial no es un privilegio de los jueces: es una garantia esencial para la democracia". Blobs naranja y dorado.

Reveal

L 936–940 Footer

.info-footer

Pie de pagina minimalista de la infografia.

L 942–1556 <script> — JavaScript

<script> embebido

Three.js scene (camera, particles, renderer), depth-based parallax engine, IntersectionObserver reveals, dot-nav active state, scroll-snap detection, scroll progress fill, resize handlers.