Diseño y automatización de
experiencias web
Construyendo con Gemini, Apps Script y Google Sites
Impartido por
Adrián Escamilla
Facilitador de transformación digital educativa con IA
Team GEG Puebla
"La inteligencia artificial no reemplaza docentes,
pero los docentes que diseñan sistemas con inteligencia artificial cambiarán la educación."
Viendo a quienes nos acompañan hoy, este no es un curso de herramientas.
Es un espacio para aprender a diseñar sistemas.
No venimos a usar Gemini o Apps Script. Venimos a convertir datos en experiencias y procesos manuales en plataformas web.
El Cambio de Paradigma
De consumidor de herramientas a
creador de soluciones.
Este taller no se trata solo de aprender a "usar IA" o escribir prompts. Se trata de un cambio de identidad profesional.
- Eres un usuario que se adapta a las plataformas.
- No eres solo un docente que usa IA, eres un diseñador de sistemas.
Pensamiento de Sistemas
Aprender a conectar herramientas para construir un flujo continuo.
Automatización
Hacer que los procesos repetitivos ocurran solos, 24/7 y sin ti.
Diseño Ligero
Traducir datos a interfaces visuales atractivas rápidamente.
IA Generativa
Tu copiloto inteligente para generar y escalar el código.
Nos volvimos expertos en
pedir información.
Hacemos un Google Form para todo: tareas, reportes, encuestas, proyectos... Creemos que por usar la herramienta digital, ya estamos innovando.
Pero usar la herramienta no es diseñar la experiencia.
¿Cuál fue el resultado?
El Problema Actual
El Cementerio de Formularios
Datos Estancados
Las escuelas capturan miles de datos en Forms, pero mueren en filas y columnas aburridas.
-
Trabajo manual infinito para publicar.
-
Proyectos de estudiantes que nadie ve.
-
Nadie visita un Sheet para inspirarse.
La Evolución
De recolectar datos a publicar experiencias
Filas Ocultas
Automatización
Contenido Vivo
Metodología Replicable
¿Qué podemos construir con esto?
Portafolios
Páginas de perfil generadas automáticamente cuando el alumno llena un Form.
Exhibiciones
Galerías de arte o ferias de ciencias virtuales publicadas al instante.
Directorios
Páginas de eventos, perfiles docentes o blogs actualizados desde Sheets.
Construyendo el
Portafolio Automatizado
Lo haremos paso a paso juntos.
Nuestra ruta de hoy
Captura
Forms + Sheets
Diseño
Prompt a Gemini
Conexión
Apps Script
Publicación
Google Sites
La Captura de Datos
Instrucciones:
- Abre una pestaña y teclea: forms.new
- Añade estas 3 preguntas cortas:
- Nombre del Estudiante
- Título del Proyecto
- Enlace de la Foto (URL)
- Ve a "Respuestas" y da clic en Vincular a Sheets.
Aquí es donde nuestros usuarios "alimentarán" el sistema. Mantenlo simple.
El Diseño con Inteligencia Artificial
Ve a gemini.google.com y pega esto (llena tus datos):
Tengo un archivo de Sheet que se llama ['Nombre del archivo'], el link es ['URL'], el nombre de la hoja es ['Nombre hoja'] y tiene estas columnas: ['A, B, C...'].
Quiero que me hagas el código .gs y el index.html para Google Sites full embed que sea responsivo. El objetivo es generar un portafolio de evidencias visualizado en tarjetas o cajas con un diseño institucional.
El nombre de la escuela es ['Nombre escuela'], sus colores son: ['Hex o Nombre']."
El Pegamento (Apps Script)
-
Desde tu Sheet, ve al menú y da clic en:
Extensiones > Apps Script - Crea un archivo Index.html y pega ahí el código que te dio Gemini.
-
Da clic en el botón azul superior derecho:
Implementar > Nueva Implementación
¿Qué hace el código .gs?
Lee la hoja de cálculo fila por fila, inyecta esos datos en tu plantilla HTML (sustituyendo las variables), y genera la página final.
La Publicación
1. Copia la URL
Copia la URL que te dio Apps Script al finalizar la implementación web.
2. Abre Sites
Ve a sites.new para crear un sitio web en blanco de Google.
3. Inserta
Doble clic en la página en blanco > Selecciona Incorporar > Pega la URL.
Pausa de control:
¿Cómo vamos hasta aquí?
Preguntas, dudas o ¿alguien se nos atoró en algún paso?
Solución de Errores con IA
No memorices código, memoriza esta estructura (Sin Pánico).
Cuando algo falle, envíale esto a Gemini:
"Tratar de crear un portafolio..."
(Pegas tu código aquí)
"Line 14: TypeError..."
¡Momento de Magia!
1. Abre tu Google Form.
2. Llénalo con un proyecto de prueba.
3. Actualiza tu Google Site y observa cómo aparece al instante.
Esta es la nueva
IAlfabetización
Años 90s
Computación
Aprender a usar la computadora, dominar Office y guardar archivos.
Años 2000s
Digital
Saber buscar información en Google, usar apps y navegar en internet.
Hoy
IAlfabetización
Dejar de ser un simple usuario para convertirse en diseñador de sistemas.
El verdadero valor no es aprender a usar una nueva herramienta, es diseñar procesos que creen experiencias con sentido.
¡Gracias por
diseñar el futuro!
Adrián Escamilla
Conectemos en LinkedIn
in/mradrianGEG Puebla
Únete a la comunidad
atom.bio/gegpuebla
Un agradecimiento muy especial al Team GEG Puebla
(Pris, Miguel, Enrique y Manuel)
por el apoyo constante, la motivación y el gran espacio para hacer posible este taller.