Identidad y maquetación base
Diseño de la identidad visual de la web pedagógica para tus estudiantes: naming con propósito, definición de la paleta de 3 colores, selección tipográfica accesible y configuración inicial del lienzo en Google Sites desde cero.
1. Naming del Sitio
Nombre pedagógico, metáfora del viaje e identidad del proyecto.
2. Paleta de Color
Selección y contraste de los 3 colores rectores (fondo, estructura y acento).
3. Tipografías
Fuentes legibles y jerarquía visual para títulos, botones y microtextos.
4. Configuración Sites
Creación de tema personalizado y limpieza de lienzo desde cero.
Tu Bitácora Docente
Accede a tu plantilla en Google Slides para documentar la identidad de tu sitio: registra el naming elegido, los códigos de tu paleta de 3 colores, las tipografías seleccionadas y el checklist de configuración inicial en Google Sites.
Accede a tu Bitácora Docente →Naming: El Nombre como Brújula Pedagógica
El nombre de tu sitio web no es un rótulo administrativo ni una etiqueta de archivo: es la primera puerta conceptual que atraviesan tus estudiantes. Un buen naming reduce la distancia con la pantalla, establece una narrativa clara y los sitúa como exploradores activos junto a la IA.
❌ Qué evitar (Enfoque Burocrático)
Nombres descriptivos o rígidos que anticipan consumo pasivo de tareas:
- «Actividades de Computación 2026»
- «Sitio de Metodología de la Investigación»
- «Recursos Digitales Sala 5»
✅ Qué buscar (Enfoque TravesIA)
Metáforas de acción y viaje que despiertan intriga y pertenencia:
- «El Bosque de los Secretos: Guardianes IA» (Inicial)
- «Detectives del Saber Comunitario» (Primaria)
- «Laboratorio Dialéctico: Evidencias e IA» (Superior)
Co-creando el Naming con GEMI
Antes de volcar el nombre definitivo en tu Bitácora, no te enfrentes a la hoja en blanco en soledad. Aprovecha la calibración que ya realizaste con GEMI: pídele que dialogue con tus variables de aula y te ofrezca 5 propuestas con metáforas vivas adaptadas a tu grupo.
💡 Respuestas de GEMI según el Nivel Educativo
Observa cómo la misma instrucción se adapta al tono, madurez y propósito de cada grupo pedagógico:
Subtítulo: Pequeños guardianes de historias y criaturas mágicas.
Activa el pensamiento simbólico invitando a crear cuentos y explorar personajes.
Subtítulo: Islas de juego, preguntas y asombro visual.
Presenta el entorno como un viaje insular donde cada isla es un juego desenchufado o digital.
Subtítulo: Donde las ideas crecen jugando con Nano y Gemi.
Pone el foco en el cobijo, el trabajo colaborativo en ronda y la creación plástica.
Subtítulo: Pistas, datos reales y preguntas para transformar el barrio.
Plantea el aprendizaje como investigación activa de problemas locales y proyectos de impacto.
Subtítulo: Diseñamos ideas inteligentes en equipo.
Fomenta el enfoque maker, vinculando algoritmos simples con prototipos para el aula y la escuela.
Subtítulo: Aprender a convivir, dialogar y crear con inteligencia colectiva.
Subraya la identidad grupal, el compañerismo y el uso solidario y ético de la tecnología.
Subtítulo: Auditoría ciudadana, huella digital y pensamiento crítico.
Invita a no ser meros consumidores de feeds, sino a auditar cómo operan los modelos de IA.
Subtítulo: Desarmando sesgos y creando narrativas responsables.
Aborda los dilemas contemporáneos: autoría, privacidad y generación sintética de contenidos.
Subtítulo: Debates contemporáneos entre la mente humana y la máquina.
Plantea el aula como espacio asambleario para confrontar posturas éticas y tecnológicas.
Subtítulo: Investigación, rigor epistemológico y co-creación con IA.
Sitúa a la IA como un interlocutor académico para contrastar evidencias y formular hipótesis.
Subtítulo: Miradas críticas, sesgos de datos y autoría académica.
Ejercita la vigilancia metodológica sobre las fuentes y el juicio reflexivo de futuros docentes.
Subtítulo: Criterio formativo frente a la marea de información.
Remarca que el valor diferencial en la formación superior reside en la intención didáctica.
Tu consigna en la Bitácora (Página de Taller):
Escribe en tu plantilla el Nombre Definitivo de tu Web (máximo 3 a 5 palabras) y un subtítulo de una línea que responda: ¿Qué desafío o expedición vivirán tus estudiantes en este espacio?
La Paleta de 5 Colores: La Regla 60 – 30 – 10
El color no adorna: orienta la mirada y reduce la fatiga cognitiva. Para garantizar una experiencia accesible en Google Sites usamos una paleta de 5 colores: dos neutros universales (Blanco y Grafito para lectura y contraste WCAG) y tres tonos identitarios gobernados por la regla proporcional 60 – 30 – 10.
Fondos limpios sin saturación y textos en alto contraste para lectura sin cansancio visual.
El tono base de la atmósfera visual: fondos amplios, encabezados y lienzos de sección.
Estructura y ritmo: títulos, divisores, subtítulos y tarjetas de contenido temático.
Exclusivo para la acción: botones interactivos, enlaces de entrega y llamados de foco.
¿Códigos HEX fríos? ¡Pidámosle a Nano ver los colores reales!
Los códigos como #0F172A o #06B6D4 no transmiten emoción ni atmósfera. Nosotros pensamos en imágenes: pídele a Nano que transforme esa tabla en una muestra física de diseño para evaluar el contraste y la armonía visual antes de decidir.
💡 Muestrario de Paletas de 5 Tonos según los Perfiles Docentes
Observa cómo se articulan los neutros de lectura con la tríada 60-30-10 en cada nivel educativo:
#FFFFFF
#27272A
#D1FAE5
#166534
#FB923C
#FFFFFF
#1E293B
#E0F2FE
#0369A1
#F59E0B
#FFFFFF
#18181B
#F4F4F5
#6B21A8
#D946EF
#FFFFFF
#0F172A
#F0FDF4
#1E3A5F
#059669
¡Turno de registrar en tu Bitácora!
Ve a la solapa TALLER de tu Bitácora personal en Google Slides y completa el casillero 2. Paleta de colores anotando los 3 códigos Hexadecimales de tu tríada identitaria (#HEX) junto a tu base neutra.
Jerarquía Visual: La Regla de los 2 tipos de letra
La tipografía es la voz de tu entorno digital: no decora, organiza la lectura y reduce el esfuerzo visual de tus estudiantes. En lugar de mezclar muchas fuentes, aplicamos la regla de oro: máximo 2 familias tipográficas complementarias de Google Fonts (una con carácter para títulos y otra de lectura limpia para párrafos y consignas).
Fuente expresiva que define el tono pedagógico (cálido, dinámico, reflexivo). Se usa en encabezados principales y tarjetas clave.
Sans-serif limpia, neutra y abierta. Garantiza que consignas largas y microtextos en botones se lean sin fatiga en cualquier pantalla.
Diferenciación nítida de pesos y tamaños: el estudiante reconoce al instante dónde está el tema, la explicación y la llamada a la acción.
¿Nombres de fuentes que no dicen nada? ¡Miremos cómo dialogan!
Leer nombres como Montserrat o Merriweather no nos permite sentir cómo conviven en la pantalla. Pídele a Nano que te genere un espécimen tipográfico en una imagen para evaluar la jerarquía visual antes de configurar Google Sites.
💡 Muestrario de 3 Duplas Tipográficas Recomendadas
Tres soluciones nativas en Google Fonts y Google Sites diseñadas para distintos propósitos formativos:
Trazo geométrico con bordes amables. Estimula el asombro y el espíritu de juego sin perder legibilidad.
Gran altura de la «x» y espaciado generoso. Muy cómoda para lectores iniciales en tablets y pantallas táctiles.
Corte urbano y rotundo. Destaca con fuerza en mayúsculas o títulos breves para proyectos de indagación y debate.
Tipografía técnica optimizada para interfaces web. Distingue sin fallas números, letras y consignas de código.
Serifa elegante y equilibrada. Evoca rigor de investigación, mirada crítica y tradición universitaria.
Contraste óptico perfecto para balances largos: alivia la vista frente a artículos, marcos teóricos y guías.
¡Turno de registrar en tu Bitácora!
Entra a la solapa TALLER en tu Bitácora de Google Slides y completa el casillero 3. Tipografías con el nombre exacto de tu fuente de Títulos y tu fuente de Cuerpo.
Paso 04: Configuración y Lienzo en Google Sites
Con tu Naming, tu Paleta de 5 colores y tus 2 Tipografías registradas en la Bitácora, es momento de abrir Google Sites, crear tu tema personalizado e iniciar con un lienzo limpio sin plantillas recargadas.
Próxima MARTESclass: TravesIA Viva
Súmate a la transmisión sincrónica en el marco de los Encuentros de Centros Innovadores del Grupo DIM-EDU de España. Abordaremos el marco pedagógico, la tripulación en cabina y el modelado paso a paso para construir la identidad digital de tu proyecto educativo junto a la comunidad docente.