SO · Unidad 02 y Unidad 03 · Seteo del Sistema Operativo

Sitio web educativo interactivo para 5° año de Informática, laboratorio de Sistemas Operativos. Desarrollado para ser proyectado en clase y consultado desde los dispositivos de los alumnos.

El material integra dos módulos: el recorrido del hardware a la instalación del sistema operativo, y el seteo posterior (licencias, cuentas, panel de control, drivers y seguridad). Es un sitio estático (HTML, CSS y JavaScript), sin paso de compilación ni dependencias, pensado con enfoque mobile-first y también para escritorio.

Contenido

Módulo 1 · Hardware e Instalación

Sección	Descripción
Mapa de interconexión	Diagrama interactivo del recorrido del hardware al SO instalado. Clic en cada bloque para ver qué es y con qué se conecta.
Almacenamiento	Medios internos y externos, HDD clasificado por color y SSD (SATA, M.2, NVMe).
Live USB	Herramientas para crear el medio de instalación: Rufus, Ventoy, Windows Install Media, HirenBoot PE.
BIOS / UEFI	Firmware, Secure Boot, TPM 2.0 y su relación con los esquemas MBR y GPT.
Flujo completo	Del archivo ISO al sistema operativo funcionando, paso a paso.
Virtualización	Máquinas virtuales como camino alternativo a la instalación física.

Módulo 2 · Seteo del S.O.

Sección	Descripción
Licencias	Concepto y tipologías: OEM, Retail, GLVK/Volumen, clave genérica y sin sistema operativo.
Activación	Activación legal frente a ilegal: KMS, keygen, crack y el caso real de MAS.
Instalación y cuentas	Cuentas estándar, Microsoft e invitado, roles de usuario y rutas de almacenamiento.
Panel de Control	Applets, Sistema y Administrador de dispositivos.
Drivers	Plug and Play, driver universal frente a driver de fabricante e instalación de controladores.
Programas y Firewall	Programas y características de Windows, firewall de entrada y salida, y sus reglas.
Árbol de ficheros	Organización de archivos, rutas, extensiones y metadatos.
Glosario	Términos de seguridad y del sistema operativo.

Autoevaluación

Práctica de recuperación con preguntas al azar de ambas unidades. Ofrece dos rondas: repaso rápido (20 preguntas) y desafío (40). Cada pregunta muestra la respuesta correcta y una explicación al verificar. El banco de preguntas se guarda en data/autoevaluacion_preguntas.json.

Estructura

so_unidad-03/
├── index.html               # portada del curso (dos módulos + autoevaluación)
├── 01-hardware.html         # Módulo 1: hardware e instalación (mapa interactivo)
├── 02-seteo.html            # Módulo 2: seteo del S.O. (paneles por tema)
├── 03-autoevaluacion.html   # Autoevaluación: quiz de práctica
├── css/
│   ├── site.css             # tokens de color/tipografía + header, footer y navegación
│   ├── index.css            # estilos de la portada
│   ├── hardware.css         # componentes del Módulo 1
│   ├── seteo.css            # componentes del Módulo 2
│   └── autoevaluacion.css   # componentes del quiz
├── js/
│   ├── site.js              # header, footer y navegación generados desde una configuración
│   ├── hardware.js          # mapa interactivo y pestañas de marca
│   └── autoevaluacion.js    # motor del quiz

Características

• Navegación por temas con resaltado automático de la sección activa.
• Código de color por tema, coherente entre la barra de navegación y las tarjetas.
• Header, footer y menú generados desde una única configuración en js/site.js, sin repetir marcado entre páginas.
• Navegación en tres tramos, sin anchos muertos entre uno y otro: en escritorio (1040px o más) la marca lleva su subtítulo y los enlaces van completos; en tablet (800 a 1039px) se cae el subtítulo y las etiquetas se acortan para que todo entre en una línea; por debajo de 800px aparece el botón de menú y los enlaces se despliegan en un panel flotante.
• El panel del menú flota por encima del contenido, así que abrirlo no cambia la altura del encabezado ni empuja la página, y la barra de temas queda siempre pegada en el lugar correcto.
• La barra de temas de cada módulo se adapta al espacio: mientras los temas entran en una línea se ven todos en fila; cuando dejan de entrar, la barra pasa a ser un desplegable que indica en qué tema estás y abre los temas completos en una o dos columnas. El corte lo decide el ancho real que ocupan los temas de esa página, así que cada módulo se pliega cuando le hace falta.

Uso

No requiere instalación ni servidor. Abrí index.html en el navegador y recorré los módulos desde el encabezado. Para clase, se recomienda proyectar a pantalla completa.

---

Prof. Pedaci Lourdes · LinkedIn Instituto Leonardo Murialdo · 5° Informática · Laboratorio de Sistemas Operativos