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 y tarjetas y reglas decorativas, no la semántica de los diagramas. Cada diagrama Mermaid conserva la paleta blanco/hielo/gris/negro del repositorio y su leyenda accesible. El hero, la galería de películas y el pie de página permanecen oscuros en ambos temas; comparten un único ámbito de tokens invertido en lugar de tres paletas escritas a mano, así que su tinta, sus reglas y sus superficies provienen de los mismos tokens que el resto.

La marca de agua del hero utiliza el logotipo original de Paula Silva con un 8% de opacidad. Sus colores y proporciones se mantienen intactos: sin aproximaciones con texto, rotación ni filtros de color. Es un fondo CSS decorativo, no un elemento interactivo ni texto accesible.

Los navegadores móviles conservan el zoom de página y utilizan áreas de navegación de 44 px. Los campos de búsqueda y los selectores del estudio usan texto de 16 px en pantallas estrechas y dispositivos táctiles. Las rutas largas de archivos se ajustan dentro de los resultados de búsqueda, y los diálogos siguen el área visible dinámica con desplazamiento contenido; las tablas anchas y el código se desplazan dentro de sus propias regiones en lugar de ensanchar la página.

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.

El texto de lectura mantiene el token de cuerpo de 16 px en pantallas estrechas. La navegación, los filtros, las acciones de origen y los controles de aprendizaje usan el token de área táctil de 44 px. Los seis enlaces de sección permanecen visibles hasta 1200 px, donde el encabezado cambia a su menú compacto; los dos títulos de sección más largos usan etiquetas de navegación cortas para que las barras en español y portugués quepan en una sola fila. Los bloques de código conservan espacio sobre su primera línea para el control de copia. Un documento de aprendizaje usa una columna más ancha que una medida de libro, porque incluye diagramas, tablas y código además de prosa; la prosa conserva una medida acotada dentro de esa columna.

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 de idioma reales: inglés, español y portugués de Brasil.
• Enlaces de idioma al mismo documento, nunca un cambio que siempre vuelve a la portada.
• Búsqueda acotada al idioma seleccionado, con entradas de origen claramente etiquetadas.
• Explorador del repositorio con todos los archivos fuente, vistas previas de código y datos y descargas originales.
• Avisos para material histórico, ejemplos ejecutables sin traducir y licencias preservadas.
• Foco de teclado visible, enlace para saltar, menú móvil superpuesto y comportamiento de movimiento reducido.
• La respuesta de las tarjetas atiende al puntero, al foco de teclado y al toque; la elevación se reserva para un puntero real.
• La búsqueda coloca las lecciones por encima de las rutas del repositorio y limita esas rutas para que no entierren una respuesta.
• El modo de alto contraste de Windows conserva cada estado que el color por sí solo transmitiría.

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 el encabezado en cualquier tamaño de pantalla, y el pie de página nombra los tres idiomas completos. Cambiar de idioma conserva el documento, el fragmento del encabezado y los filtros activos de la biblioteca.

El bloque principal prioriza el título y las acciones de aprendizaje, sin un panel lateral. La página de inicio muestra la ruta real de aventuras: seis niveles construidos a partir del catálogo publicado, con sus lecciones. El catálogo de aventuras repite ese orden en bandas de portadas, y el índice de ejercicios prácticos agrupa los laboratorios según su catálogo, con cada tarjeta indicando su tecnología. Cada lección empieza con una ficha basada en sus propios metadatos: la capacidad que enseña, su nivel, su duración estimada y su estado. La biblioteca combina filtros por tema, búsqueda localizada y marcas de lectura opcionales.

El cierre de la lección separa marcar esta página de gestionar todas las marcas de lectura. Marcar es opcional, nunca bloquea la siguiente lección y nunca demuestra que se haya completado un laboratorio o superado una prueba. La gestión está en un desplegable secundario con una confirmación que enfoca primero la cancelación; restablecer elimina solo las marcas de lectura de este sitio, no las listas de evidencias ni los archivos del laboratorio. Los errores de almacenamiento muestran un estado no disponible en lugar de un cero o un mensaje de éxito, con recarga y restablecimiento para recuperarse. Los enlaces al código fuente y a las contribuciones permanecen en otro desplegable nativo que funciona sin JavaScript.

La página de inicio ofrece dos entradas ilustradas, aventuras y laboratorios prácticos profesionales, antes de la progresión detallada. La visión general completa permanece en un desplegable nativo en vez de repetir toda la introducción. El pie de página utiliza una ilustración compacta de la responsable del proyecto y separa los enlaces de aprendizaje, idiomas, créditos y licencias tipográficas; los diagramas decorativos no compiten con la lección.

Las animaciones de entrada, la aparición única de secciones, las transiciones acotadas de contadores, la respuesta visual de tarjetas y el indicador de desplazamiento añaden movimiento sin canvas ni un framework de animación. Las preferencias de movimiento reducido desactivan los efectos. El contenido esencial sigue siendo legible sin JavaScript; los desplegables nativos de contenido siguen funcionando.

Algunas lecciones abren con una escena de mecanismo: un SVG original en línea que dibuja el modelo que enseña en orden de lectura, seguido de tres leyendas breves. La escena se activa al entrar en pantalla y se puede repetir; con movimiento reducido aparece completa y quieta. La página de inicio lleva una escena del mismo tipo para el ciclo Ask, Plan, Agent, Revisión y Evidencia, incluida la ruta de retorno que toma una brecha sin resolver. Las lecciones largas llevan un riel de sesión que numera las secciones, marca las ya recorridas y muestra la posición actual. Cada aventura y cada laboratorio incluyen una comprobación de recuerdo antes de la sección donde se registra la evidencia: nada viene preseleccionado, la opción elegida explica por qué se sostiene o falla, y sin JavaScript cada opción y su razón siguen siendo legibles. La lista de evidencia se puede marcar durante el laboratorio; las marcas viven solo en ese navegador y nunca sustituyen a un comando que se ejecutó. Una lección cierra con una tarjeta de la siguiente lección de la ruta en lugar de un enlace suelto, y la navegación entre páginas hace una transición suave donde el navegador la admite. Todo esto se detiene cuando la persona pide movimiento reducido.

Los diagramas de mecanismos se ajustan inicialmente a su contenedor, incluso en pantallas estrechas. Las etiquetas de los nodos se ajustan dentro de límites con espacio interior, y las leyendas se apilan según el ancho de la figura, no de la pantalla. Un control explícito de ampliación muestra el diagrama a tamaño de lectura, con una región de desplazamiento horizontal con nombre, accesible por teclado y con orientación localizada; volver a ajustar al ancho reinicia el desplazamiento horizontal. Estos controles manuales siguen funcionando con movimiento reducido. Sin JavaScript, la vista general completa y las leyendas permanecen visibles.

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.

Algunas lecciones también incluyen una referencia visual contextual de la colección proporcionada. Cada referencia conserva sus proporciones y tiene una descripción localizada de lo que conviene observar. Las capturas de interfaz son instantáneas, no garantías de disponibilidad actual de funciones o modelos. Las capturas de benchmarks y las fotografías de archivo sin derechos de reutilización verificados no se presentan como evidencia de una lección ni como portadas decorativas.

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 en una sección editorial de ancho completo. Cada uno tiene un póster del primer fotograma y una descripción visual localizada. Pasar el cursor o enfocar con el teclado inicia una escena sin un botón de reproducción separado; al salir de la escena se restaura el póster. En pantallas táctiles, la imagen alterna la reproducción. Solo se reproduce un clip a la vez.

No se carga ninguna fuente de vídeo antes de la interacción. Ocultar la página o cambiar al movimiento reducido restaura el póster sin reanudación automática. Con movimiento reducido, el cursor y el enfoque mantienen la imagen fija y se requiere un toque o una activación explícita. 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.