SensorOffice · Documentación del Proyecto

Carpeta del Proyecto del caso Valeria Gómez, Estudio Contable Gómez (Caseros). Evaluación de Proyectos · 7mo Informática 2026 · Instituto Leonardo Murialdo.

Sitio estático, sin build ni dependencias: se abre con doble clic sobre index.html o se publica tal cual en GitHub Pages.

Estructura

index.html                        Documento: contenido, indice y diagramas SVG
css/
  01-tokens.css                   Variables de marca y paletas clara / oscura
  02-base.css                     Reinicio, tipografia raiz y foco
  03-layout.css                   Armazon: .app, grilla, seccion activa, main
  componentes/
    barra-superior.css            Marca, volver al hub, boton de tema
    indice.css                    Indice lateral, buscador, menu compacto
    migas.css                     Ruta Hub / Proyecto / Seccion
    contenido.css                 Titulos, texto, avisos, chips y pildoras
    tablas.css                    Tablas, ficha de usuario, definiciones, codigo
    figuras.css                   Marco de diagramas y cadena de arquitectura
    recorrido-flujo.css           Recorrido guiado del diagrama de flujo (5.7)
    guia-rapida.css               Pasos de la guia e interfaz de preguntas frecuentes
    equipo-embed.css              Integrantes y planillas embebidas
    pie.css                       Pie institucional
  90-responsive.css               Ajustes a 1200 / 920 / 560 px
  99-impresion.css                Documento completo al imprimir
js/
  config.js                       Constantes: claves, puntos de corte, tiempos, selectores, textos
  tema-inicial.js                 Aplica el tema guardado antes del primer pintado
  nav-progresiva.js               Marca el indice como "con JavaScript"
  datos/
    recorrido-flujo.js            Los 12 pasos del recorrido guiado (texto editable)
  modulos/
    secciones.js                  Pagina el documento en secciones navegables
    indice.js                     Grupos plegables, buscador y enlace activo
    menu.js                       Indice desplegable en anchos reducidos
    ruteo.js                      Ruteo por hash, migas y sub-anclas
    tema.js                       Conmutador claro / oscuro
    impresion.js                  Documento entero al imprimir y restauracion
    recorrido-flujo.js            Logica del recorrido del diagrama 5.7
  app.js                          Orquestador: arma el contexto y corre los modulos

Donde se toca cada cosa

Para cambiar	Editar
Un color, una fuente, un radio	css/01-tokens.css
El texto de los pasos del diagrama de flujo	js/datos/recorrido-flujo.js
Un texto de interfaz (boton de tema, recorrido, migas)	js/config.js
Cada cuantos segundos avanza el recorrido	js/config.js → recorrido.intervaloMs
El ancho en que el indice pasa a menu	js/config.js → puntosDeCorte.compacto y el @media(max-width:920px) de css/90-responsive.css
El contenido del documento, las tablas y los diagramas	index.html

Convenciones

• Sin hardcoding en la logica. Claves de almacenamiento, puntos de corte, tiempos, selectores y textos de interfaz viven en js/config.js; el contenido editorial del recorrido guiado, en js/datos/. Los modulos no repiten literales.
• Scripts clasicos, no modulos ES. Se cargan con <script src> en orden, sin fetch ni import, para que la pagina siga funcionando abierta desde el disco (file://).
• Orden de las hojas de estilo. Tokens y base primero, componentes despues, responsive e impresion al final: los ultimos pueden sobreescribir a los primeros.
• Los SVG van en linea. Los diagramas se mantienen dentro de index.html porque el recorrido guiado necesita alcanzar sus nodos (data-step) y porque asi acompañan al tema de la pagina. No pasarlos a <img>.
• Mejora progresiva. Sin JavaScript el documento se lee entero y de corrido, con el indice visible: la paginacion por secciones es una capa que se suma encima.

---

Créditos

• Autor: Prof. Pedaci, Lourdes — LinkedIn
• Institución: Instituto Leonardo Murialdo · 7mo Informática 2026
• Año lectivo: 2026