Sistema de diseño del sitio

Referencia y evidencia

La referencia visual canónica es el Hub Editorial Studio proporcionado, inspeccionado el 2026-09-07. Astro importa directamente sus tokens independientes del framework y las fuentes locales; los estilos del sitio asignan los nombres existentes a esos tokens en lugar de conservar una segunda paleta. Ambos atributos de tema permanecen sincronizados.

El showcase independiente de React es material de referencia, no el runtime del sitio ni una lección traducida. El sitio Astro utiliza controles nativos y pequeños módulos JavaScript. Los logotipos de productos y la portada de la biblioteca de iconos proporcionada no se reutilizan como identidad del currículo. Las ilustraciones originales y los diagramas monocromos conservan sus proporciones y colores en ambos temas.

Tokens de diseño observados

Los acentos identifican familias de navegación o tarjetas y líneas decorativas, no la semántica de los diagramas. Cada diagrama Mermaid conserva la paleta de blanco, hielo, gris y negro del repositorio y su leyenda accesible.

Tipografía y disposición

La referencia usa Inter para la prosa y JetBrains Mono para las etiquetas pequeñas en mayúsculas. Ambas fuentes se incluyen localmente, con alternativas del sistema y sin solicitudes a servicios de fuentes de terceros. Se incluyen la licencia de Inter y la licencia de JetBrains Mono.

• Cabecera compacta y fija al desplazarse, con controles independientes de navegación, idioma y tema.
• Sección introductoria oscura, encabezado editorial destacado y líneas de acento discretas.
• Contenedor de contenido amplio pero acotado; ancho de artículo legible y espaciado generoso.
• Tarjetas cuadradas o ligeramente redondeadas, bordes finos y sombra mínima.
• Navegación lateral para los documentos de aprendizaje; índice en la página para guías largas.
• Las cuadrículas adaptables se reducen a una sola columna sin ocultar contenido esencial.

La lectura del texto se mantiene en el token base de 16 px en pantallas estrechas. La navegación, los filtros, las acciones de origen y los controles de aprendizaje usan el token de objetivo táctil de 44 px. La cabecera cambia a su menú compacto en 1280 px para dejar espacio a las etiquetas traducidas; los bloques de código conservan espacio sobre su primera línea para el control de copia.

El espaciado exacto no cubierto por el CSS de referencia inspeccionado es una decisión de implementación, no una afirmación de reproducción idéntica píxel a píxel.

Componentes

• Tres rutas reales por idioma: inglés, español y portugués de Brasil.
• Enlaces de idioma al mismo documento, nunca un selector que siempre vuelva a la página de inicio.
• Búsqueda limitada al idioma seleccionado, con entradas de fuente original claramente etiquetadas.
• Explorador del repositorio con todos los archivos fuente, vistas previas de código y datos y descargas originales.
• Avisos sobre material histórico, ejemplos ejecutables sin traducir y licencias conservadas.
• Foco de teclado visible, enlace para saltar al contenido, menú móvil y comportamiento con movimiento reducido.

Reglas de contenido

Diseñar para quien aprende por primera vez

El README raíz y Empieza aquí deben conducir a un primer ejercicio ejecutable antes de presentar la biblioteca completa. Orden de aprendizaje identifica el trabajo obligatorio, opcional, avanzado y de mantenimiento. Descargas proporciona materiales por laboratorio sin exigir una copia completa del repositorio.

Cada lección principal debe responder: qué estoy aprendiendo, por qué lo usaría, qué debe funcionar previamente, dónde ejecuto el comando, qué resultado debo observar y cómo me recupero. El cierre debe ser una lista de evidencias, no una afirmación publicitaria.

Patrón editorial de Markdown

• Un título principal y una breve declaración de propósito antes de los detalles.
• Una tabla inicial con alcance, requisitos previos, tiempo estimado y evidencia esperada.
• Encabezados semánticos y enlaces que describan su destino.
• Notas, consejos y advertencias GFM para decisiones reales; no depender solo del color.
• Acciones numeradas, comandos copiables con contexto del directorio de trabajo y puntos de control.
• Una ilustración o un diagrama específico del concepto con texto alternativo significativo.
• Ejecución obligatoria y opcional claramente separadas, especialmente para servicios reales.
• Navegación al siguiente paso y un reinicio seguro que proteja otros proyectos.

Las ilustraciones explican un concepto; no sustituyen la evidencia ejecutable. Las capturas históricas de interfaces no deben sugerir disponibilidad actual de funciones. La ruta profesional de prácticas sigue sin fantasía; las historias permanecen en las aventuras.

Traduce la prosa de aprendizaje actual, la navegación y los metadatos de los documentos. Conserva los identificadores, comandos, ejemplos de código, datos exactos y URL para que los ejercicios sigan siendo reproducibles. El material histórico y los archivos consumidos por máquinas siguen disponibles como fuente original con un aviso localizado, sin etiquetarlos falsamente como lecciones traducidas.

No se requiere traducción automática de terceros, solicitudes a modelos, analítica ni credenciales para leer el sitio.

Compilación y verificación

Usa la compilación estática de Astro, las colecciones de contenido validadas y la publicación con GitHub Actions. Las traducciones faltantes, los enlaces locales rotos, la cobertura incompleta de fuentes y las rutas de idioma inválidas son errores de compilación, no sustituciones silenciosas por inglés.

Antes de publicar, verifica la navegación en escritorio y móvil, el uso del teclado, el cambio de idioma en la misma página, la búsqueda localizada, las descargas de fuentes y el renderizado de Mermaid.

La guía de publicación documenta la compilación, los archivos generados y las referencias oficiales de Astro y GitHub. El diseño es original; no requiere un tema de terceros ni un framework de aplicaciones del lado del cliente.

Interacción y movimiento

El selector de idioma permanece visible en la cabecera en todos los tamaños de pantalla; la página inicial también muestra los nombres de los tres idiomas. Al cambiar de idioma se conservan el documento, el fragmento del encabezado y los filtros activos de la biblioteca.

La sección principal contiene un acordeón de cinco etapas del flujo de trabajo que se puede manejar con el teclado. La biblioteca combina filtros por tema, búsqueda localizada y marcas de lectura opcionales. Las marcas de lectura son un estado local del navegador registrado por el propio usuario, nunca una prueba de que se haya superado un laboratorio o una prueba; los estudiantes pueden borrar solo las marcas de este sitio mediante una confirmación explícita.

Las animaciones de entrada, las apariciones únicas de secciones, las transiciones acotadas de contadores, la respuesta de las tarjetas y un indicador de desplazamiento aportan movimiento sin canvas ni framework de animación. Las preferencias de movimiento reducido desactivan los efectos. El contenido esencial permanece legible sin JavaScript; las expansiones nativas del flujo siguen funcionando.

Estudio de práctica integrado

El estudio de práctica está disponible en los tres idiomas, enlazado desde la página inicial, la cabecera, el pie de página, la navegación de aprendizaje y las lecciones relacionadas. Sus pestañas utilizan fragmentos estables, navegación por teclado y alternativas legibles sin JavaScript. La búsqueda y el mapa del sitio incluyen la página.

• Flujo: reproducción explícita, pausa, paso individual, velocidad, reinicio y una revisión fallida que bloquea la etapa final de evidencia. La reproducción se pausa al ocultar la página o salir de la pestaña del flujo; nada se reproduce automáticamente.
• Contexto: un ejercicio acotado de selección con estados de material ausente, presupuesto excedido, distracción y enfoque. Las unidades son sintéticas, no tokens de un modelo.
• Verificación: tres comprobaciones fijas de JavaScript se ejecutan en el navegador contra implementaciones incompletas o corregidas. Cambiar la implementación invalida los resultados anteriores. El módulo no evalúa código arbitrario ni llama a un servicio.

El estado de las simulaciones es temporal y nunca se almacena como finalización del curso. Las marcas de lectura siguen siendo un estado separado, elegido explícitamente y local del navegador, que se sincroniza entre pestañas. Ninguna simulación afirma que se haya ejecutado un agente, terminal o laboratorio real.

Tratamiento de imágenes e iconos

Los iconos lineales del sitio son pequeños SVG originales con trazos uniformes y semántica decorativa; los controles conservan texto o nombres accesibles. Las ilustraciones de tarjetas son decorativas junto a los títulos de las lecciones. Las imágenes de artículos conservan el texto alternativo descriptivo, pueden ampliarse en un diálogo operable por teclado y mantienen un enlace a la imagen original. Cerrar el diálogo restaura el foco. Ninguna imagen se invierte, estira ni recolorea para simular el modo oscuro.

El diseño estrecho presenta la navegación de aprendizaje como un elemento desplegable nativo, en vez de eliminarla. Los controles principales usan el área táctil mínima del sistema de diseño. Las preferencias de movimiento reducido desactivan el movimiento sin desactivar las herramientas de aprendizaje.

Portadas de aventuras y montajes animados

Las 14 aventuras usan portadas WebP optimizadas de 1456 x 832 recibidas de la mantenedora, mientras sus ilustraciones conceptuales SVG originales y localizadas permanecen en elementos desplegables nativos. El inventario de portadas registra cada pareja. El arte de fantasía se limita a la ruta de aventuras; las ilustraciones hands-on no cambian.

La página de inicio y el catálogo de aventuras incluyen 3 montajes animados silenciosos de 10 segundos. Cada uno tiene un póster del primer fotograma, una descripción visual localizada, controles nativos de reproducción y un retorno explícito a la imagen fija. No se carga ninguna fuente de vídeo hasta que el alumno elige reproducir. Solo se reproduce un clip a la vez. Ocultar la página o cambiar al movimiento reducido restaura el póster sin reanudación automática. Los enlaces directos siguen disponibles sin JavaScript.

Se conservan los JPEG y MP4 originales; las portadas optimizadas, las copias silenciosas y los pósteres son recursos separados. El inventario multimedia mapea los archivos, y las notas de los vídeos describen los límites de reproducción. Las escenas generadas son introducciones visuales, no capturas de interfaces ni prueba de ejecución de un laboratorio, agente en la nube o sesión SDK.