Diseñamos una web en ChatGPT antes de crearla
Los textos en color malva oscuro son enlaces para consultar contenidos o descargar materiales.
En el texto anterior en este blog, publiqué cómo crear una web con el nuevo modo Work en ChatGPT Plus. Lo hice sin mucha iteración, como ejemplo no tanto de diseño de la web, sino para ver cuáles son los pasos que hay que dar para configurarla en la interfaz. Digo esto porque lo recomendable, antes de crear la web, es diseñarla. Para eso debemos tener más o menos claro qué queremos y cómo lo queremos.
¿Cuáles son los pasos previos a la creación de la web?
- Saber qué y cómo lo quiero. Objetivos, a quién va dirigido, contexto, criterios de evaluación... Si tienes documentos para afinar, mejor. Aportar documentos ayuda a afinar el diseño.
- Abrir un chat de ChatGPT y decírselo.
- Definir lo más detalladamente la estructura de tu web, las secciones, estilo gráfico (letras, colores), contenidos, tareas o actividades, evaluación, interacción...
- Diseñar en imágenes el design mockup de la web. El design mockup es una representación visual que muestra cómo se verá un producto final. ChatGPT te irá creado las maquetas visuales de la estructura general, de cada sección, del estilo gráfico, de las páginas de tareas, de la evaluación...
- Una vez tenemos listo el diseño visual, ahora toca determinar el uso de la web, los contenidos, las tareas, la evaluación... Como en la conversación ya le habrás aportado materiales de contexto y ya está listo el diseño gráfico, con tu iteración será más fácil ir delineando cada aspecto didáctico de uso de la web. ChatGPT permite crear documentos en formato docx o pdf de estos materiales de diseño curricular. Te recomiendo que te los cree en docx. Así será más fácil rehacerlos a gusto.
- Revisar todo: diseño gráfico y curricular. Cuanto más afinado esté, menos iteraciones necesitará el diseño web. Ten en cuenta que diseñar una web, al principio, cuando somos novatos, consume muchos tokens. A mí me consumió un 70% de la cuota semanal. Por eso, es tan importante hacer esto que te muestro en este artículo. No crees la web a pelo, directamente, sin un paso previo de prediseño.
- Subir todos los archivos del diseño gráfico y el curricular a unas carpetas y tenerlo listo para crear tu web en el modo Work de ChatGPT.
La idea es crear una web para estudiantes de ELE de Primaria. Lo deseable es que sepan leer y escribir en su idioma nativo. La web se llama Mi casa y pretende practicar español a partir del entorno familiar de su propia casa.
Tienes a tu disposición más abajo los materiales de diseño gráfico y curricular.
Pasos a dar:
Quiero crear una web educativa. Antes de diseñarla o programarla, ayúdame a definir su base pedagógica y curricular: título, finalidad, destinatarios, contexto de uso, objetivos, contenidos, competencias, criterios de evaluación, metodología, actividades, accesibilidad y alcance de la primera versión. Revisa también los documentos y mockups que adjunte, pero no construyas todavía la web. Hazme preguntas breves, una cada vez, detecta contradicciones y ayúdame a concretar las decisiones. Empieza analizando los materiales aportados y pregúntame cuál es la idea general de la web y qué quiero que consiga el alumnado.
Analiza ahora todos los documentos, mockups y materiales aportados junto con la definición pedagógica y curricular acordada. Antes de construir la web, comprueba si la información es suficiente, detecta contradicciones, vacíos o decisiones pendientes y dime qué datos adicionales necesitas. Hazme únicamente las preguntas imprescindibles, una cada vez. Cuando dispongas de todo lo necesario, presenta un resumen de cómo interpretarás el proyecto y espera mi aprobación antes de comenzar a construirlo.
Con toda la información ya recopilada, redacta un guion previo de diseño y construcción de la web. Organiza la propuesta por secciones y pantallas e indica en cada una: finalidad, contenidos, actividades, navegación, elementos visuales, interacciones, audios, ayudas, evidencias y adaptación móvil. Incluye también el recorrido principal del usuario y el orden de construcción recomendado. No programes todavía la web. Presenta el guion para que pueda aprobarlo, corregirlo o pedir modificaciones antes de comenzar.
Antes de desarrollar la web, crea su propuesta de diseño gráfico a partir de la definición pedagógica, el guion aprobado y los materiales aportados. Define la identidad visual: paleta de colores, tipografías, estilo de ilustraciones e iconos, fondos, botones, tarjetas, navegación, estados de interacción y adaptación a móvil. Después, crea mockups representativos de la portada, una sección, una actividad y una misión. No construyas todavía la web funcional. Presenta primero el sistema visual y los mockups para que pueda aprobarlos o solicitar cambios.
Paso 5: Terminada esta fase, toca el diseño curricular. Ten en cuenta que estos documentos se ajustan a la normativa española: el currículo de Educación Primaria y las competencias clave, el enfoque de Lengua Extranjera establecido en el Real Decreto 157/2022 y el MCER y su volumen complementario.
Ahora desarrolla el diseño curricular de la web a partir de la definición pedagógica, el guion aprobado y los materiales aportados. Alinea la propuesta con el currículo español de Educación Primaria, las competencias clave, el enfoque de Lengua Extranjera del Real Decreto 157/2022 y el MCER con su Volumen complementario. Concreta objetivos, competencias específicas, criterios de evaluación, saberes básicos, descriptores, contenidos, actividades, evidencias e instrumentos de evaluación. Relaciona cada elemento curricular con secciones y tareas reales de la web. No construyas todavía la versión definitiva. Presenta primero una tabla curricular clara y revisa que exista coherencia entre objetivos, actividades y evaluación para que pueda aprobarla o solicitar cambios.
Paso 6: Si estás de acuerdo, entonces dile que abra la herramienta interna Sites y cree la versión preliminar de la web. Prompt:
Revisa ahora el conjunto completo del proyecto: definición pedagógica, diseño gráfico, arquitectura, diseño curricular, accesibilidad, actividades, misiones, evaluación y materiales aportados. Comprueba si todo es coherente y suficiente para construir la web. Si detectas algún vacío crítico, indícalo antes de empezar. Si está lista, abre la skill Sites y crea la versión funcional completa siguiendo fielmente todo lo aprobado. Prioriza claridad, accesibilidad, navegación sencilla, adaptación móvil, coherencia visual y utilidad pedagógica. Al terminar, resume qué has construido, qué elementos quedan como provisionales y qué convendría revisar en la siguiente iteración.
Paso 7: ¿Hay algo que revisar? Díselo. Afina hasta tenerla pulida. Prompt:
Revisa y prueba ahora la web completa. Detecta errores de contenido, navegación, diseño, accesibilidad, funcionamiento y adaptación móvil. Corrige todo lo que puedas y afina la experiencia hasta obtener una versión estable, coherente y pulida. Comprueba los recorridos principales del alumnado, las actividades, las misiones, los audios, el guardado, el progreso y las áreas para docentes y familias. Cuando consideres que está lista, realiza una última prueba general y prepara una versión compartible mediante enlace para que pueda probarla con colegas y estudiantes. Indícame también qué aspectos conviene observar durante ese pilotaje y cómo comunicarte después las incidencias detectadas.
Paso 8: ¿Está lista? Pruébala y compártela con tus colegas y estudiantes. Pero recuerda que debes comunicar antes cómo funciona la web, cómo usarla, cómo se evaluará. No les tires a la piscina sin flotador. Hay que ver si la web se usará en el aula y/o en casa, con familiares o no.
Antes de compartir la web, ayúdame a preparar su plan de uso y pilotaje. Define primero si se utilizará en el aula, en casa o en ambos contextos, si requerirá acompañamiento docente o familiar, cuánto durará cada sesión, qué deben hacer los participantes, qué productos o evidencias se recogerán; y cómo se evaluará el aprendizaje y el funcionamiento de la propia web. Después redacta materiales breves y claros para: profesorado, alumnado, familias, cuando participen, y personas colaboradoras que vayan a probarla. Explica cómo funciona la web, cómo acceder, qué recorrido seguir, qué se espera de cada usuario, qué datos se recogerán, cómo comunicar incidencias y qué aspectos deben observarse durante la prueba. No compartas todavía el enlace. Presenta primero el plan de uso, evaluación y comunicación para que pueda revisarlo y aprobarlo.
Recuerda que siempre podrás volver a esta conversación y mejorar elementos. Conviene que pruebes la web como si fueras tú el usuario o usar a un niño/a de cobaya para testarla.
Desde el modo Work no puedes crear multimedia, pero sí enlazar desde fuentes externas. Revisa qué contenidos de la web necesitan audio o vídeo. Para cada recurso, redacta el guion, duración, finalidad didáctica, texto de locución, elementos visuales, subtítulos, transcripción, nombre de archivo y lugar exacto donde se integrará. No inventes que puedes generar directamente los archivos si esa función no está disponible. Cuando te entregue los archivos finales o sus enlaces, intégralos en la web con controles accesibles de reproducción, pausa, repetición y subtítulos.
Para esta web, la opción más realista sería audios pregrabados para vocabulario e instrucciones. Actividades de grabación sencilla del alumnado, si la web lo permite y la privacidad está resuelta. Un botón opcional del tipo Habla con ChatGPT que abra ChatGPT fuera de la web. Esta opción es sencilla, pero el alumno saldría de la web.
Materiales de diseño gráfico y curricular
Para que los descargues y se los pases a ChatGPT en modo Work:
Comentarios
Publicar un comentario