Taller Web 1

Inicio / Taller EN VIVO / Taller Web 01
TALLER WEB 01 • CONSTRUCCIÓN DIGITAL
ESPACIO EXCLUSIVO DOCENTE

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.

TravesIA Viva - Tripulación Pedagógica: Gemi, Seño Sonia, Profe TINA y Nano
PRODUCCIÓN PERSONAL

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 →
🏷️
PASO 01 • CONSTRUCCIÓN WEB

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-DISEÑO CON EL COPILOTO

Co-creando el Naming con GEMI

PROMPTING DOCENTE

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.

PROMPT PARA TU CHAT CON GEMI
Gemi, basándote en mis variables de contexto docente que te compartí anteriormente (mi nivel educativo, disciplina, perfil de estudiantes y propósito pedagógico), actúa como especialista en diseño instruccional y naming pedagógico. Sugiéreme 5 posibles nombres para el sitio web iconográfico de mi grupo. Condiciones para cada propuesta: 1. Máximo de 3 a 5 palabras. 2. Debe incluir una metáfora viva o concepto motor (nada de etiquetas burocráticas o administrativas). 3. Incluye una breve justificación pedagógica de 1 línea explicando por qué interpela a mis estudiantes. 4. Agrega un posible subtítulo invitador. Presenta las opciones con el formato: «TravesIA Viva – [Nombre Propuesto]».

💡 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:

🌱 Nivel Inicial • Seño Laura Méndez (Sala de 5 años) Juego, asombro y narración
1. TravesIA Viva – El Bosque de los Secretos

Subtítulo: Pequeños guardianes de historias y criaturas mágicas.
Activa el pensamiento simbólico invitando a crear cuentos y explorar personajes.

2. TravesIA Viva – El Archipiélago Curioso

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.

3. TravesIA Viva – El Nido de los Inventos

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.

🔍 Nivel Primario • Maestro Martín Gómez (6.° Grado) Debates, indagación y comunidad
1. TravesIA Viva – Detectives del Saber

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.

2. TravesIA Viva – Fábrica de Soluciones

Subtítulo: Diseñamos ideas inteligentes en equipo.
Fomenta el enfoque maker, vinculando algoritmos simples con prototipos para el aula y la escuela.

3. TravesIA Viva – La Tribu Digital

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.

⚡ Nivel Secundario • Prof. Valeria Rossi (3.° Año – Tecnológica y Ciudadanía) Autonomía, sesgos y ética digital
1. TravesIA Viva – Observatorio de Algoritmos

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.

2. TravesIA Viva – Expedición Código Ético

Subtítulo: Desarmando sesgos y creando narrativas responsables.
Aborda los dilemas contemporáneos: autoría, privacidad y generación sintética de contenidos.

3. TravesIA Viva – Ágora Artificial

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.

🎓 Nivel Superior • Prof. Dr. Julián Castro (Metodología y Práctica) MODELO DESARROLLADO EN VIVO
1. TravesIA Viva – Laboratorio Dialéctico

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.

2. TravesIA Viva – Observatorio Epistemológico

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.

3. TravesIA Viva – Brújula Metodológica

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?

🎨
PASO 02 • IDENTIDAD CROMÁTICA

La Paleta de 5 Colores: La Regla 60 – 30 – 10

DISEÑO ACCESIBLE & UI/UX
Mesa de diseño y paleta de color con Tina, Sonia, Gemi y Nano

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.

Comodines Base Blanco & Grafito

Fondos limpios sin saturación y textos en alto contraste para lectura sin cansancio visual.

60% del Sitio Color Dominante

El tono base de la atmósfera visual: fondos amplios, encabezados y lienzos de sección.

30% del Sitio Color Secundario

Estructura y ritmo: títulos, divisores, subtítulos y tarjetas de contenido temático.

10% del Sitio Color de Acento

Exclusivo para la acción: botones interactivos, enlaces de entrega y llamados de foco.

PROMPT PARA TU CHAT CON GEMI
Gemi, con base en el nombre pedagógico que seleccioné para mi web («[Pega aquí el nombre elegido]») y mi contexto formativo, actúa como especialista en UI/UX educativo y accesibilidad web (WCAG). Diseña mi paleta armónica de 5 colores, considerando blanco (#FFFFFF) y grafito (#1E293B) como base de legibilidad, y definiendo la tríada de identidad según la regla 60-30-10: 1. 60% Color Dominante: tono de fondo de la experiencia / atmósfera principal. 2. 30% Color Secundario: tono estructural para jerarquía, títulos y contenedores. 3. 10% Color Acento: tono vibrante de alto impacto, exclusivo para interacción (botones y clics). Para cada uno de los 3 colores identitarios incluye: – Nombre sugerido y código Hexadecimal (#HEX). – Función pedagógica específica en el sitio. – Relación de contraste accesible frente al fondo.
🍌
VISUALIZACIÓN MULTIMODAL CON NANO

¿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.

Nano, crea una imagen de un cuadrado tipo muestra de diseño dividido en franjas horizontales que contengan los 5 colores de la paleta que acabamos de definir: los dos neutros de lectura (blanco y grafito) y la tríada identitaria (60% dominante, 30% secundario y 10% acento). En cada franja incluye su nombre y su código hexadecimal correspondiente con tipografía clara y excelente contraste.

💡 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:

🌱 Nivel Inicial • El Bosque de los Secretos (Seño Laura) Atmósfera de asombro y calma
NEUTRO LUZ
Blanco Puro
#FFFFFF
NEUTRO TEXTO
Carbón Suave
#27272A
60% DOMINANTE
Menta Calma
#D1FAE5
30% SECUNDARIO
Verde Roble
#166534
10% ACENTO
Melocotón
#FB923C
🔍 Nivel Primario • Detectives del Saber (Maestro Martín) Indagación y dinamismo
NEUTRO LUZ
Blanco Nieve
#FFFFFF
NEUTRO TEXTO
Pizarra Texto
#1E293B
60% DOMINANTE
Azul Cielo
#E0F2FE
30% SECUNDARIO
Azul Océano
#0369A1
10% ACENTO
Amarillo Lupa
#F59E0B
⚡ Nivel Secundario • Observatorio de Algoritmos (Prof. Valeria) Cultura digital y ética
NEUTRO LUZ
Blanco Óptico
#FFFFFF
NEUTRO TEXTO
Grafito Oscuro
#18181B
60% DOMINANTE
Zinc Neutro
#F4F4F5
30% SECUNDARIO
Violeta Auditor
#6B21A8
10% ACENTO
Magenta Neón
#D946EF
🎓 Nivel Superior • Laboratorio Dialéctico (Prof. Dr. Julián) MODELO EN VIVO
NEUTRO LUZ
Blanco Neutro
#FFFFFF
NEUTRO TEXTO
Tinta Académica
#0F172A
60% DOMINANTE
Hielo Clínico
#F0FDF4
30% SECUNDARIO
Azul Noche
#1E3A5F
10% ACENTO
Esmeralda
#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.

🔤
PASO 03 • IDENTIDAD TIPOGRÁFICA

Jerarquía Visual: La Regla de los 2 tipos de letra

LEGIBILIDAD & NAVEGACIÓN
Mesa de diseño tipográfico con Tina, Sonia, Gemi y Nano explorando letras y escalas

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).

1. Fuente de títulos (Voz y clima)

Fuente expresiva que define el tono pedagógico (cálido, dinámico, reflexivo). Se usa en encabezados principales y tarjetas clave.

2. Fuente de cuerpo (Lectura ágil)

Sans-serif limpia, neutra y abierta. Garantiza que consignas largas y microtextos en botones se lean sin fatiga en cualquier pantalla.

3. Escala y jerarquía

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.

PROMPT PARA TU CHAT CON GEMI
Gemi, tomando como referencia el nombre pedagógico de mi web («[Pega aquí el nombre elegido]»), mi paleta de colores y mi nivel educativo, actúa como especialista en tipografía digital y diseño editorial accesible. Sugiéreme 3 opciones de combinaciones tipográficas (pares de fuentes) disponibles de forma nativa en Google Fonts / Google Sites. Cada propuesta debe seguir la regla de 2 fuentes: 1. Una fuente con carácter e identidad pedagógica para títulos y encabezados. 2. Una fuente neutra, abierta y de alta legibilidad para cuerpos de texto, consignas y botones. Para cada una de las 3 opciones presenta: – Nombre de la fuente de títulos y nombre de la fuente de cuerpo. – Clima pedagógico que transmite la combinación. – Justificación de contraste visual y accesibilidad en pantallas táctiles y móviles.
🍌
MUESTRA VISUAL CON NANO

¿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.

Nano, crea una imagen tipo cartel o muestra tipográfica sobre fondo blanco, dividida en 3 bloques horizontales que comparen visualmente las 3 opciones de fuentes que me propuso Gemi. En cada bloque escribe como título el nombre de mi proyecto: «[Pega aquí el Nombre de tu Proyecto]» aplicado con la fuente de títulos correspondiente, y justo debajo escribe mi subtítulo: «[Pega aquí tu Subtítulo]» aplicado con la fuente de cuerpo. Incluye al costado de cada bloque los nombres de ambas fuentes para apreciar con mi propio contenido su armonía, contraste y jerarquía de lectura.

💡 Muestrario de 3 Duplas Tipográficas Recomendadas

Tres soluciones nativas en Google Fonts y Google Sites diseñadas para distintos propósitos formativos:

🌱 Opción 1: Dinámica y Acogedora (Inicial / Primaria / Maker) Formas redondas y amigables
Títulos y Encabezados
Poppins (Semibold / Bold)

Trazo geométrico con bordes amables. Estimula el asombro y el espíritu de juego sin perder legibilidad.

Cuerpo, Consignas y Botones
Open Sans / Nunito (Regular)

Gran altura de la «x» y espaciado generoso. Muy cómoda para lectores iniciales en tablets y pantallas táctiles.

🔍 Opción 2: Sólida y Tecnológica (Secundaria / STEAM / Ciudadanía) Claridad de laboratorio digital
Títulos y Encabezados
Montserrat (Bold)

Corte urbano y rotundo. Destaca con fuerza en mayúsculas o títulos breves para proyectos de indagación y debate.

Cuerpo, Consignas y Botones
Roboto / Inter (Regular)

Tipografía técnica optimizada para interfaces web. Distingue sin fallas números, letras y consignas de código.

🎓 Opción 3: Humanista y Académica (Superior / Metodología / Ensayo) Rigor reflexivo y editorial
Títulos y Encabezados
Merriweather / Playfair (Bold)

Serifa elegante y equilibrada. Evoca rigor de investigación, mirada crítica y tradición universitaria.

Cuerpo, Consignas y Botones
Source Sans 3 / Lato (Regular)

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.

FASE 2 • PUESTA EN ESCENA

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.

Ir al Paso 4: Configurar Sites ⚙️ →
📹
REGISTRO AUDIOVISUAL

Próxima MARTESclass: TravesIA Viva

EN VIVO DENTRO DE 1 SEMANA

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.

🎓
¿Deseas participar del vivo y recibir certificación oficial? Inscríbete en el formulario para asegurar tu plaza sincrónica y tramitar tu certificado de asistencia avalado por el Grupo DIM-EDU.
Registrarse al Evento ✍️
¿Quieres que YouTube te avise al comenzar? Ingresa a la sala y activa la campana de notificación: Abrir transmisión en YouTube ↗