IA · ORGANIZADOR Y REDACTOR
- Organiza y mejora la información proporcionada.
- Detecta información que puede faltar.
- Resumir la descripción del proyecto.
Sitio web del proyecto · Proyecto STEAM · SIL
Tu proyecto, en una web que funciona
Elegí el recorrido que corresponde a tu proyecto. Una guía para dirigir a la IA con decisiones reales y comprobar que funciona.
Objetivo
Preparar la información, pedir a la IA exactamente lo necesario, probar el resultado y mejorarlo antes de presentar.
Educación Media ·
BATANProyecto STEAMPlanificá, buscá la información con NotebookLM y construí con Gemini.
Tercer cicloProyecto SilEmprendePlanificá,
construí y probá el sitio web de tu proyecto.
Fase 1
Planificar
Descripción, estructura, mapa e identidad visual (páginas 01 a 04)
Fase 2
Construir
Prompt para Canva, prototipo y mejoras del diseño (páginas 05 a 07)
Fase 3
Completar
Información real, imágenes y simulador de tienda (páginas 08 a 10)
Fase 4
Publicar y entregar
Publicación, criterios de evaluación y entrega (páginas 11 y 12)
01
Descripción del proyecto
Primero definí qué debe comunicar la empresa. La IA organiza tus datos; no los inventa.
ALUMNO
- Describe su emprendimiento.
- Verifica y completa la información.
- Aprueba la descripción final.
Resultado esperado
Una descripción clara del proyecto que explique el nombre de la empresa, qué productos o servicios ofrece, a quién se dirige y cuál es el objetivo del sitio web.
Pasos de la etapa
1Respondé las 4 preguntas
Completá las respuestas con información real que conocés de tu emprendimiento.
2Pasá tus respuestas a la IA
La IA organizará tus 4 respuestas y mejorará su redacción sin cambiar su significado. Si considera que falta algún dato clave para definir el proyecto, te lo indicará para que puedas completarlo.
Pegá tus respuestas junto con este prompt. La IA debe organizarlas y avisarte si necesita información adicional, sin inventar datos.
A partir de las preguntas y respuestas sobre mi emprendimiento: [PEGÁ AQUÍ TUS RESPUESTAS] Tu tarea como organizador y redactor: 1. Mejorá la redacción y claridad de cada respuesta sin alterar su significado original. 2. Presentá las respuestas organizadas respondiendo puntualmente a cada una de las 4 preguntas: - ¿Cómo se llama la empresa? - ¿Qué productos o servicios ofrece? - ¿A quién se dirige? - ¿Cuál es el objetivo de crear este sitio web? 3. Si considerás que alguna respuesta está incompleta o es poco clara, avisame qué información puntual falta para que te la pueda aclarar. Reglas: - No inventes datos, nombres de productos ni beneficios que no figuren en mis respuestas. - Mantené un tono claro, directo y adecuado para un proyecto educativo escolar STEAM.
Pegar el prompt en una nueva conversación con una IA.
3Revisá y completá
Observá lo que organizó la IA y comprobá que represente lo que quisiste decir.
- ¿La información es correcta?
- ¿La IA entendió lo que quisiste decir?
- ¿Cambió algún dato?
4Obtené la descripción clara del proyecto
Con las respuestas revisadas y aprobadas, pedí a la IA la descripción clara del proyecto integrada en un texto fluido. Leela y solicitá correcciones si es necesario hasta aprobar la versión final.
Usalo solo cuando ya revisaste y completaste la información de la empresa.
Con las 4 respuestas revisadas y aprobadas en esta conversación: - Nombre de la empresa - Productos o servicios que ofrece - A quién se dirige (público objetivo) - Objetivo de crear este sitio web Redactá la DESCRIPCIÓN CLARA DEL PROYECTO para mi sitio web. Pautas de redacción: 1. Integrá las 4 respuestas en un texto fluido de 1 o 2 párrafos, ordenado y profesional. 2. Explicá con claridad qué es la empresa, qué ofrece, a quién está destinada y el propósito de su sitio web. 3. Usá exclusivamente la información aprobada en esta conversación; no agregues datos ficticios ni características no mencionadas. Entregá la versión final lista para copiar y pegar en el documento de Word de mi tarea.
Pegar el prompt en la misma conversación, después de tener la
información inicial verificada.
Importante: guardá este resultado en tu tarea. Cuando
apruebes la versión final, copiá la descripción clara completa y pegala en el documento de Word de la
tarea, en la sección correspondiente. La vas a utilizar como base para las próximas etapas del sitio
web.
02
Estructura del sitio y navegación
Ya sabemos qué es el proyecto. Ahora diseñamos el mapa de todas las páginas que tendrá su sitio web.
IA · ARQUITECTO WEB
- Ordena las páginas a partir del proyecto aprobado.
- Propone una navegación lógica entre ellas.
- Organiza el mapa del sitio sin inventar información.
ALUMNO
- Decide qué páginas necesita su proyecto.
- Relaciona cada página con información real.
- Aprueba la estructura y el menú final.
Resultado esperado
El menú aprobado del sitio web: los nombres elegidos por el alumno para las 6 páginas que presentarán la bienvenida al proyecto, la fundamentación o justificación, la empresa y el equipo, el proceso de desarrollo, los productos o servicios, y los costos y resultados.
Pasos de la etapa
1Mirá la información que va a tener el sitio
Estos son los 25 datos que va a llevar el sitio, ordenados en las 6 páginas. No hace falta completarlos ahora: sirven para que la IA sepa qué va a tener cada página y te proponga nombres. Los vas a completar más adelante.
Presentación del proyecto
- Identificación del proyecto: curso, proyecto y año.
- Nombre del emprendimiento: el nombre de la empresa.
- Eslogan: frase corta que identifica al emprendimiento.
- Presentación del emprendimiento: breve presentación que permita entender de qué trata.
- Descripción del proyecto: presentación general del proyecto y su propósito.
Fundamentación y áreas
- Áreas integradas: Matemática, Informática, Castellano, Trabajo y Tecnología u otras.
- Objetivos de las áreas: objetivos que aporta cada área al desarrollo del proyecto.
La empresa y el equipo
- Descripción de la empresa: descripción general de la empresa.
- Descripción del logo: descripción del logo y su significado.
- Misión: propósito y actividad principal.
- Visión: qué espera lograr en el futuro.
- Organigrama: organización y distribución de roles.
- Integrantes de la empresa: lista de integrantes, organizada por sección.
- Cargo de cada integrante: cargo o función que desempeña cada persona.
- Sitio web de cada integrante: enlace al sitio web personal de cada alumno.
Proceso de desarrollo
- Proceso de desarrollo del sitio web: etapas y actividades realizadas para planificar, diseñar, construir, probar y publicar el sitio.
- Proceso de elaboración de los productos: pasos principales para elaborar cada producto.
- Descripción de los pasos: breve explicación de cada paso de elaboración.
Productos o servicios
- Presentación del kit: descripción general del kit y de lo que incluye.
- Productos que componen el kit: nombre y descripción breve de cada producto.
- Modo de uso: forma de uso de cada producto, cuando sea necesario.
Costos y resultados
- Precio del kit: precio total del kit.
- Comparación entre costo y ganancia: datos necesarios para elaborar el gráfico comparativo.
- Costos de cada producto: detalle de los costos que intervienen en la elaboración.
- Incremento de cada producto: porcentaje o valor de incremento aplicado al costo para determinar el precio de venta.
2Pedile a la IA opciones de nombres
El prompt ya incluye la información de cada página. La IA te va a proponer 5 nombres para cada una, organizados en 5 líneas con estilos distintos.
Pegalo en la misma conversación donde aprobaste la descripción del proyecto.
A partir de la descripción aprobada de mi proyecto en esta conversación, necesito definir la ESTRUCTURA de mi sitio web: el nombre de cada página del menú. El sitio va a tener 6 páginas. Esta es la información que va a llevar cada una (todavía no está completa, es solo la lista de contenidos): 1. Presentación del proyecto: Identificación del proyecto (curso, proyecto y año); Nombre del emprendimiento (el nombre de la empresa); Eslogan (frase corta que identifica al emprendimiento); Presentación del emprendimiento (breve presentación que permita entender de qué trata); Descripción del proyecto (presentación general del proyecto y su propósito). 2. Explicación del proyecto o fundamento: Áreas integradas (Matemática, Informática, Castellano, Trabajo y Tecnología u otras); Objetivos de las áreas (objetivos que aporta cada área al desarrollo del proyecto). 3. Empresa y equipo: Descripción de la empresa (descripción general de la empresa); Descripción del logo (descripción del logo y su significado); Misión (propósito y actividad principal); Visión (qué espera lograr en el futuro); Organigrama (organización y distribución de roles); Integrantes de la empresa (lista de integrantes, organizada por sección); Cargo de cada integrante (cargo o función que desempeña cada persona); Sitio web de cada integrante (enlace al sitio web personal de cada alumno). 4. Proceso de desarrollo: Proceso de desarrollo del sitio web (etapas y actividades realizadas para planificar, diseñar, construir, probar y publicar el sitio); Proceso de elaboración de los productos (pasos principales para elaborar cada producto); Descripción de los pasos (breve explicación de cada paso de elaboración). 5. Productos o servicios: Presentación del kit (descripción general del kit y de lo que incluye); Productos que componen el kit (nombre y descripción breve de cada producto); Modo de uso (forma de uso de cada producto, cuando sea necesario). 6. Costos y resultados: Precio del kit (precio total del kit); Comparación entre costo y ganancia (datos necesarios para elaborar el gráfico comparativo); Costos de cada producto (detalle de los costos que intervienen en la elaboración); Incremento de cada producto (porcentaje o valor de incremento aplicado al costo para determinar el precio de venta). Proponé 5 opciones de nombre para cada una de las 6 páginas. Presentalas en 5 líneas numeradas (Opción 1 a Opción 5). Cada línea tiene un nombre para cada página, en el mismo orden de arriba, separados por " | ". Dentro de cada línea, los 6 nombres deben tener un estilo parecido: la misma extensión, el mismo tono y la misma forma de escribirse, para que el menú se vea prolijo. Cada línea debe tener un estilo distinto de las otras (por ejemplo: de una sola palabra, de dos o tres palabras, más formal o más cercano). Reglas: - Nombres cortos y claros para un menú (máximo 3 palabras). - Que cada nombre deje claro qué información tiene la página. - No inventes datos del proyecto. - No elijas por mí: yo voy a elegir el nombre de cada página.
Pegar el prompt en la misma conversación con la IA.
3Elegí los nombres para la estructura del sitio
Mirá las 5 líneas de nombres que propuso la IA y escribí el nombre que elegís para cada página. Podés tomar nombres de líneas distintas, pero conviene que combinen entre sí. La decisión es tuya: la IA solo ofreció opciones.
Importante: registrá estos nombres de páginas en tu tarea.
Al usar el botón, los nombres se copiarán y pasarán a la página 03. Pegalos también en el documento de
Word de la tarea para conservar el menú aprobado del sitio.
03
Mapa del sitio
Ya tienen los nombres de las páginas del sitio. Ahora deciden qué información real irá dentro de cada una.
IA · ORGANIZADOR DE CONTENIDO
- Presenta el listado general de contenidos.
- Ayuda a relacionar cada contenido con una página.
- Señala información faltante sin inventarla.
ALUMNO
- Revisa todos los contenidos necesarios.
- Escribe en qué página estará cada uno.
- Aprueba el mapa antes de construir el sitio.
Resultado esperado
Un mapa del sitio aprobado: los nombres de las páginas y los 27 contenidos quedan relacionados para organizar la información antes de construir la web. Son los 25 datos de la página 02 más 2 grupos de imágenes (del proceso y de los productos).
Pasos de la etapa
1Asigná cada contenido a una página
Leé el listado completo y seleccioná en qué página del menú va a estar cada contenido. Las opciones son los nombres de páginas que elegiste y enviaste desde la página 02.
- 01
Identificación del proyecto[Curso · Proyecto · Año]
- 02
Nombre del emprendimiento[Nombre de la empresa]
- 03
Eslogan[Frase que identifica al emprendimiento]
- 04
Presentación del emprendimiento[Breve presentación que permita entender de qué trata]
- 05
Descripción del proyecto[Presentación general del proyecto y su propósito]
- 06
Áreas integradas[Matemática · Informática · Castellano · Trabajo y Tecnología]
- 07
Objetivos de las áreas[Objetivos que aporta cada área al desarrollo del proyecto]
- 08
Descripción de la empresa[Qué es la empresa, qué hace y qué ofrece]
- 09
Descripción del logo[Elementos que componen el logo y su significado]
- 10
Misión[Propósito y actividad principal de la empresa]
- 11
Visión[Qué espera lograr la empresa en el futuro]
- 12
Organigrama[Organización de la empresa y distribución de roles]
- 13
Integrantes de la empresa[Lista de integrantes, organizada por sección]
- 14
Cargo de cada integrante[Cargo o función que desempeña cada integrante]
- 15
Sitio web de cada integrante[Enlace al sitio web personal de cada alumno]
- 16
Proceso de desarrollo del sitio web[Etapas y actividades realizadas para planificar, diseñar, construir, probar y publicar el sitio]
- 17
Proceso de elaboración de los productos[Pasos principales para elaborar cada producto]
- 18
Descripción de los pasos[Breve explicación de cada paso de elaboración]
- 19
Imágenes del proceso[Imagen asociada a cada paso]
- 20
Presentación del kit[Descripción general del kit y de lo que incluye]
- 21
Productos que componen el kit[Nombre y descripción breve de cada producto]
- 22
Modo de uso[Forma de uso de cada producto, cuando sea necesario]
- 23
Imágenes de los productos[Imágenes de cada producto que integra el kit]
- 24
Precio del kit[Precio total del kit]
- 25
Comparación entre costo y ganancia[Datos necesarios para elaborar el gráfico comparativo]
- 26
Costos de cada producto[Detalle de los costos que intervienen en la elaboración]
- 27
Incremento de cada producto[Porcentaje o valor de incremento aplicado al costo para determinar el precio de venta]
2Organizá el mapa completo del sitio
Copiá el listado anterior y completá el prompt. La IA debe ordenar el mapa página por página, aunque todavía falten datos, y dejar cada faltante claramente marcado.
Pegá debajo los nombres de las páginas y los contenidos asignados. Después agregá los datos que ya tengas; la IA organizará todo sin inventar lo que falte.
Actuá como arquitecto de contenidos para sitios escolares STEAM tipo SilEmprende. Voy a darte las páginas elegidas y los datos que ya tengo. Armá el mapa del sitio. Nombres de páginas elegidos y contenido asignado a cada página: [PEGÁ AQUÍ EL TEXTO COPIADO DEL LISTADO DE CONTENIDOS Y PÁGINAS] Datos reales que ya tengo (pueden estar incompletos): [PEGÁ AQUÍ LA INFORMACIÓN DISPONIBLE] FORMATO DE SALIDA (obligatorio, respetalo exactamente): - Un bloque por página, en el mismo orden y con el mismo nombre que te pasé. No cambies ni inventes nombres. - Cada bloque, así, sin agregar nada más: ### <nombre exacto de la página> Objetivo: <una sola frase> Contenidos: - <ítem corto> ✅ (si el dato ya lo tengo) - <ítem corto> ⬜ [INFORMACIÓN PENDIENTE]: <pregunta puntual que debo responder> Material necesario: <fotos / enlaces / gráficos, en una línea; si no hace falta, "—"> Relación: <"—", o "también aparece en <página>"> REGLAS: - Sé telegráfico. Máximo 6 renglones por página. Prohibido texto introductorio o de cierre. - No inventes nada (nombres, integrantes, productos, procesos, precios, imágenes ni enlaces). Lo que falte va como ⬜ [INFORMACIÓN PENDIENTE] con su pregunta. - No pierdas ningún contenido del listado. Si un contenido sirve para dos páginas, ponelo completo en la principal y en la otra solo nombralo en "Relación". AL FINAL, agregá: ## Para resolver antes de publicar Máximo 8 preguntas, solo las decisiones que frenan el armado (sin repetir los [INFORMACIÓN PENDIENTE] de arriba). Una línea cada una.
Pegar el prompt en el mismo chat anterior.
Importante: guardá el mapa completo en tu tarea. Leé y
aprobá el resultado de la IA. Después copiá el mapa completo del sitio y pegalo en el documento de Word
de la tarea, porque será la guía para redactar y construir cada página.
3Guardá el mapa aprobado
Cuando apruebes el mapa completo del sitio, pegalo acá y guardalo.
04
Diseñar la identidad visual
Con la planificación aprobada, definí los patrones visuales que tendrá todo el sitio antes de construirlo.
IA · DISEÑADOR GRÁFICO
- Analiza el nombre, el logo y la información aprobada.
- Propone paleta, tipografías y reglas visuales.
- Prepara instrucciones para diseñar el sitio.
ALUMNO
- Proporciona nombre, logo y datos reales.
- Elige y ajusta el estilo visual.
- Aprueba los patrones antes de diseñar.
Resultado esperado
Identidad visual definida: paleta, tipografías, estilo, componentes y reglas para todas las páginas.
Pasos de la etapa
1Analizá el logo y obtené la paleta
El prompt usa estos 2 datos. Si ya los guardaste, aparecen solos; podés editarlos si hace falta. Después apretá Adjuntar al prompt. El logo lo adjuntás en la conversación.
Se completa con los datos de arriba. Adjuntá la imagen del logo al enviar este prompt en el mismo chat.
Analizá la imagen del logo adjunto de mi emprendimiento. Nombre de la empresa: [NOMBRE DE LA EMPRESA] Descripción clara del proyecto: [DESCRIPCIÓN CLARA DEL PROYECTO] Identificá los colores principales y entregá una paleta con nombre, código HEX, uso recomendado y contraste. No inventes datos, colores ni significados. Si falta información necesaria para realizar el análisis, no la supongas: preguntame únicamente los datos faltantes. Si no se puede analizar la imagen, escribí [PALETA PENDIENTE].
Pegar en la conversación actual.
2Definí el estilo y la tipografía
El prompt usa estos 3 datos. Si ya los guardaste, aparecen solos; podés editarlos si hace falta. Después apretá Adjuntar al prompt. El logo lo adjuntás en la conversación.
Se completa con los 3 datos de arriba. Adjuntá también el logo.
Definí el sistema visual de mi sitio. Descripción clara del proyecto aprobada en la página 01: [DESCRIPCIÓN CLARA DEL PROYECTO] Logo: [ADJUNTAR LOGO O LOGO PENDIENTE] Paleta: [PALETA APROBADA] Mapa y contenidos de las páginas 02 y 03: [MAPA Y CONTENIDOS] Establecé personalidad visual, tipografías disponibles en Canva, tamaños, colores, contraste, fondos, botones, tarjetas, iconos, imágenes, espaciado y elementos a evitar. No inventes datos. Si falta información, indicá [INFORMACIÓN PENDIENTE].
Pegar en la conversación anterior.
3Revisá y aprobá los patrones
Comprobá que el estilo represente al proyecto, sea legible y pueda repetirse en todas las páginas.
- ¿Coincide con el nombre, el logo y el propósito?
- ¿Los colores y tipografías son legibles?
- ¿Las reglas se pueden aplicar a cada página?
4Generá la identidad visual del proyecto
Usá los insumos revisados para pedir a la IA una identidad visual completa. Después revisá el resultado, corregí lo necesario y aprobalo antes de enviarlo a la página 05.
Se completa con los datos de arriba. Usalo en el mismo chat para generar la guía visual completa antes de pasar a la página 05.
Generá la IDENTIDAD VISUAL COMPLETA para mi sitio web a partir de esta información aprobada (el logo va adjunto): Descripción clara del proyecto: [DESCRIPCIÓN CLARA DEL PROYECTO] Mapa completo del sitio: [MAPA COMPLETO DEL SITIO] Paleta de colores: [PALETA APROBADA] Estilo visual y tipografías: [ESTILO VISUAL Y TIPOGRAFÍAS] Entregá un documento organizado con: - Personalidad de la marca y concepto visual - Paleta con códigos HEX y funciones de uso - Tipografías disponibles en Canva (fuentes para títulos, subtítulos y textos) y jerarquía de tamaños - Reglas de estilo para fondos, botones, tarjetas, iconos, imágenes y espaciado - Navegación y adaptación para pantallas de celular - Ejemplos de uso por tipo de página - Elementos o prácticas visuales que deben evitarse No inventes datos del proyecto ni significados. Si falta información necesaria para definir la identidad visual, no la supongas: preguntame únicamente los datos faltantes antes de avanzar. La identidad visual debe ser coherente, aplicable a todo el sitio y quedar lista para revisar y aprobar.
Pegar en la conversación actual.
Importante: guardá la identidad visual en tu tarea. Antes
de
enviarla, revisá que sea correcta. Después copiá la identidad visual aprobada y pegala en el documento
de Word de la tarea.
05
Generar el prompt para el sitio en Canva
Usá la identidad visual aprobada para pedir a Canva una primera propuesta completa del sitio web.
IA · REDACTOR DEL PROMPT
- Convierte la identidad visual en instrucciones concretas.
- Ordena la navegación, las páginas y los componentes.
- Respeta las limitaciones de Canva y no inventa datos.
- Genera el código HTML y CSS del sitio web.
ALUMNO
- Elige y revisa el estilo visual, la estructura y navegación, la composición, las imágenes, el movimiento y las funcionalidades.
- Comprueba que cada decisión represente el proyecto y adjunta las selecciones al prompt.
- Revisa el prompt final antes de copiarlo y usarlo como base para la siguiente fase.
1. Identidad visual: usá la identidad visual aprobada en la página
04, con sus colores, logo, tipografías y reglas de aplicación.
1Elegí las decisiones visuales y funcionales
Completá las selecciones de los siete bloques. Estas decisiones se incorporarán al prompt cuando hagas clic en Adjuntar al prompt.
1Estilo visual
2Estructura y navegación
Regla general: el sitio debe estar compuesto por varias páginas
independientes y contar con un menú de navegación que permita acceder a ellas.
3Composición
4Imágenes y recursos visuales
Regla general: priorizá las imágenes reales. El sitio debe
representar el emprendimiento real, no una empresa ficticia generada por IA.
5Movimiento
6Funcionalidades
7Usabilidad
Lectura y adaptación: reglas obligatorias
- Diseño adaptable a celular.
- Texto breve y fácil de leer.
- Contraste suficiente entre texto y fondo.
- Tipografías claras.
- Botones fáciles de identificar y utilizar.
- Navegación clara.
Las decisiones seleccionadas se cargaron en el prompt de Canva.
Resultado esperado
Un prompt completo para Canva, listo para generar la estructura visual del sitio con la identidad, el mapa, los contenidos y las reglas aprobadas.
2Pedile a la IA el prompt completo para Canva
Comprobá que la identidad visual enviada sea la aprobada. Copiá este prompt y pegalo en la conversación con la IA, adjuntando el archivo Word completo de la tarea. La IA te va a devolver el prompt completo para Canva. Todavía no pegues nada en Canva: eso se hace en la próxima página.
La IA redacta el prompt para Canva con la identidad visual aprobada, el mapa del sitio, los contenidos asignados y tus decisiones de diseño.
Actuá como especialista en diseño web y en redacción de prompts para Canva AI. Necesito que redactes el prompt completo que voy a pegar en Canva AI (Canva IA → Programar) para que construya el sitio web de mi proyecto STEAM. Todavía no construyas el sitio ni lo diseñes: tu tarea es escribir ese prompt a partir del archivo Word de la tarea que adjunto y de las decisiones de diseño indicadas a continuación. Primero, analizá el archivo Word completo. Es la fuente principal y contiene los resultados aprobados de estas fases: Fase 1 · Describir: descripción clara del proyecto. Fase 2 · Planificar: estructura del sitio. Fase 2 · Mapa del sitio: nombres de las páginas y contenidos asignados. Fase 3 · Diseñar: identidad visual del proyecto. Usá solamente la información aprobada del archivo Word, sin inventar datos. Extraé de ese documento la descripción del proyecto y los contenidos asignados a cada página e incluilos en el prompt. Incorporá también estos insumos y decisiones: Identidad visual aprobada: [IDENTIDAD VISUAL APROBADA] Mapa completo del sitio aprobado: [MAPA APROBADO] Estilo visual: [ESTILO ELEGIDO] Estructura y navegación: Tipo de menú: [TIPO DE MENÚ ELEGIDO] Comportamiento del menú: [COMPORTAMIENTO DEL MENÚ ELEGIDO] Composición: [COMPOSICIONES ELEGIDAS] Imágenes y recursos visuales: [IMÁGENES ELEGIDAS] Movimiento: Animaciones: [ANIMACIONES ELEGIDAS] Transiciones: [TRANSICIONES ELEGIDAS] Funcionalidades: [HERRAMIENTAS ELEGIDAS] El prompt que redactes debe dirigirse a Canva AI e incluir, como mínimo, todas estas indicaciones: Construí un sitio compuesto por varias páginas independientes. Creá un menú de navegación claro que permita acceder a todas las páginas del mapa aprobado y respetá exactamente los nombres de páginas elegidos por el alumno. No conviertas el sitio en una sola página con secciones si el mapa define páginas independientes. Aplicá la identidad visual aprobada: colores, logo, tipografías, jerarquías, fondos, botones, tarjetas, iconos, imágenes y reglas de uso. Aplicá el estilo visual elegido y combiná las composiciones seleccionadas según el contenido: productos, proceso, integrantes, resultados y evidencias. REGLA DE IMÁGENES Y ESPACIOS VISUALES: No dejes espacios vacíos, recuadros en blanco ni huecos sin imagen, ya que perjudican el diseño. Si el alumno ya cuenta con fotos o imágenes reales, usalas prioritariamente. Para cualquier sección o espacio donde todavía no haya una foto real (fotos del kit, de cada producto, de los pasos de elaboración o del equipo), creá o insertá una imagen temporal representativa que simule adecuadamente lo que se está tratando. Estas imágenes temporales servirán para que el sitio se vea visualmente completo y atractivo desde el primer momento, y funcionarán como guía visual para que el alumno sepa exactamente qué foto real deberá tomar y reemplazar más adelante. Incorporá únicamente las funcionalidades seleccionadas y ubicá cada una donde tenga sentido: galerías, videos, audio, códigos QR, enlaces externos, botones de acción o formularios. No armes todavía una tienda: se agrega más adelante, en su propia etapa. Los formularios deben operar sin requerir contraseñas ni pagos directos con tarjetas bancarias. No crees calculadoras, simuladores, herramientas de cálculo ni funcionalidades interactivas para costos, precios o resultados. Los datos de costos, precios, rentabilidad y comparaciones se presentarán mediante gráficos e imágenes que el alumno proporcionará. Dejá marcadores [GRÁFICO PENDIENTE] donde corresponda mostrar esos gráficos. Para los productos o servicios del emprendimiento, dejá preparados espacios para 5 productos. Cada producto debe incluir: nombre, una imagen temporal representativa que simule el producto (para que no quede el espacio vacío y sirva de guía al alumno), descripción breve y precio. Usá este formato: Producto 1: [NOMBRE PRODUCTO 1] — [Imagen temporal que represente al producto 1] — [DESCRIPCIÓN PENDIENTE] — [PRECIO PENDIENTE] Producto 2: [NOMBRE PRODUCTO 2] — [Imagen temporal que represente al producto 2] — [DESCRIPCIÓN PENDIENTE] — [PRECIO PENDIENTE] Producto 3: [NOMBRE PRODUCTO 3] — [Imagen temporal que represente al producto 3] — [DESCRIPCIÓN PENDIENTE] — [PRECIO PENDIENTE] Producto 4: [NOMBRE PRODUCTO 4] — [Imagen temporal que represente al producto 4] — [DESCRIPCIÓN PENDIENTE] — [PRECIO PENDIENTE] Producto 5: [NOMBRE PRODUCTO 5] — [Imagen temporal que represente al producto 5] — [DESCRIPCIÓN PENDIENTE] — [PRECIO PENDIENTE] Para la sección de proceso o "cómo lo hicimos", presentá un listado numerado de pasos que el alumno completará. Cada paso debe incluir una imagen temporal que ilustre la acción de esa etapa como guía visual: Paso 1: [DESCRIPCIÓN DEL PASO 1] — [Imagen temporal que represente el paso 1] Paso 2: [DESCRIPCIÓN DEL PASO 2] — [Imagen temporal que represente el paso 2] Paso 3: [DESCRIPCIÓN DEL PASO 3] — [Imagen temporal que represente el paso 3] Paso 4: [DESCRIPCIÓN DEL PASO 4] — [Imagen temporal que represente el paso 4] Paso 5: [DESCRIPCIÓN DEL PASO 5] — [Imagen temporal que represente el paso 5] El alumno reemplazará cada marcador con la descripción real y su foto definitiva de cada etapa del proceso de su emprendimiento. No inventes ni supongas los pasos. Pie de página: en la parte inferior de todas las páginas del sitio, colocá el texto «Realizado por: [NOMBRE Y APELLIDO]». Reglas obligatorias de usabilidad: el diseño debe adaptarse a celulares; el texto debe ser breve, claro y fácil de leer; debe existir contraste suficiente entre texto y fondo; las tipografías deben ser claras; los botones deben ser fáciles de identificar y utilizar; y la navegación debe ser clara. Aplicá las animaciones y transiciones elegidas con moderación y propósito. El sitio debe ser atractivo y visualmente llamativo sin sacrificar la lectura, la accesibilidad ni la facilidad de recorrido. No agregues texto de relleno, nombres, precios, productos, resultados, enlaces, datos de contacto ni características que no estén en el Word. Si falta un dato necesario, Canva debe escribir [INFORMACIÓN PENDIENTE] y no suponerlo. Al finalizar, Canva debe señalar brevemente qué imágenes temporales colocó como guía y qué datos o fotos reales deberán sustituirlas. Tené en cuenta que en Canva también voy a adjuntar este mismo archivo Word. Formato de tu respuesta: entregá solamente el prompt final completo, en un único bloque de texto listo para copiar y pegar en Canva AI. Debe empezar con «Actuá como diseñador/a web dentro de Canva AI», pedirle a Canva que construya directamente el sitio (sin generar otro prompt ni explicaciones) e incorporar los datos reales del Word y todas las decisiones de diseño indicadas. Mantené los marcadores pendientes (productos, pasos, gráficos e información faltante) cuando el Word no tenga ese dato. No agregues comentarios antes ni después del prompt.
Pegar el prompt en la conversación con la IA y adjuntar el archivo Word
completo. Todavía no va en Canva.
3Guardá el prompt final
Pegá acá el prompt completo que te devolvió la IA y guardalo. Ese es el prompt que vas a pegar en Canva en la próxima página.
Importante: guardá también este prompt. Copialo en el documento
de
Word de la tarea junto con la identidad visual y el mapa del sitio. Será el insumo de la fase siguiente.
06
Construir
Generá el primer prototipo del sitio web en Canva y comprobá que responde a lo planificado.
IA · CONSTRUCTOR
- Genera el sitio a partir del prompt.
- Aplica la estructura y las decisiones indicadas.
- Incorpora las funcionalidades solicitadas.
ALUMNO
- Carga el prompt final y el archivo Word completo.
- Genera el primer prototipo.
- Comprueba el sitio con los criterios establecidos.
- Detecta errores y registra qué debe mejorarse.
Objetivo: comprobar si el sitio cumple lo planificado. No lo modifiques
todavía: primero generá el prototipo y revisá el resultado completo.
1Generá tu sitio en Canva
- Ingresá a Canva.
- Abrí Canva IA → Programar.
- Copiá el prompt final preparado en la etapa anterior.
- Pegalo en Canva y adjuntá el archivo Word completo de la tarea.
- Generá el sitio y esperá a que Canva termine de construir el primer prototipo.
No modifiques todavía el sitio sin comprobar primero el
resultado.
La primera revisión debe mostrar qué construyó Canva a partir de lo planificado.
2Comprobá el resultado
No te preguntes solamente si te gusta. Revisá estas 5 cosas: son los errores más comunes de la IA y lo que más mejora el diseño del sitio.
Cómo marcar cada punto: hacé clic una vez en el cuadro para
marcar ✕ si necesita mejoras; se habilitan debajo los campos para explicar el problema. Hacé clic otra vez
para marcar ✓ si está bien. Un tercer clic lo deja en blanco.
1. Información correcta
2. Páginas y menú
3. Identidad visual
4. Orden y legibilidad
5. Funcionamiento y celular
Importante: guardá este análisis. Pegalo en el documento de
Word de la tarea correspondiente. Será el punto de partida de la página 07 — Refinar.
07
Refinar
Corregí los problemas de diseño detectados en el prototipo antes de cargar la información real.
IA · REVISOR Y EDITOR
- Corrige los problemas de diseño registrados.
- Propone mejoras visuales concretas.
- Mantiene la estructura y la identidad aprobadas.
ALUMNO
- Revisa el análisis de la etapa Construir.
- Decide qué cambios aplicar.
- Prueba nuevamente el diseño corregido.
Objetivo: mejorar la estructura visual, la navegación, la composición y la
experiencia de uso. Todavía no reemplaces los ejemplos por datos reales.
1Revisá el análisis del prototipo
Este es el registro que preparaste en la página anterior. Usalo como lista de problemas para decidir qué debe corregirse en Canva.
El análisis se transfiere automáticamente desde Construir. Podés editarlo, pegar el análisis completo de la página anterior o corregirlo antes de enviarlo al prompt.
El análisis editable se cargó dentro del prompt. Revisalo y después copiá el prompt para usarlo en Canva.
2Corregí el diseño en Canva
- Abrí el prototipo actual en Canva IA → Programar.
- Copiá el prompt de revisión que aparece abajo.
- Volvé a la sección anterior, revisá o completá el análisis y hacé clic en Adjuntar al prompt.
- Copiá el prompt actualizado y pedile a Canva que corrija únicamente esos problemas.
- Conservá la identidad visual, las páginas y la estructura aprobadas.
Copialo en Canva junto con el análisis de la página Construir.
3Comprobá el diseño corregido
Cuando Canva termine de corregir, no sigas de largo: volvé a la página anterior (Construir) y verificá de nuevo todos los indicadores que habían quedado con ✕.
Repetí el ciclo Construir → Refinar las veces que haga falta: comprobá otra vez, registrá lo que siga fallando y pedile a Canva que lo corrija, hasta que todos los indicadores estén logrados (✓).
← Volver a Construir para re-verificarImportante: guardá el resultado de esta revisión. Anotá en el
documento de Word qué cambios aplicaste y qué problemas quedan pendientes. Después pasá a la página
siguiente para reemplazar los ejemplos por la información real que ya tengas.
08
Cargar información real
Cambiá los ejemplos del sitio por datos reales de manera progresiva, manteniendo el diseño refinado.
IA · REVISOR Y EDITOR
- Reemplaza los textos de ejemplo por la información entregada.
- Mantiene el diseño refinado y señala lo que todavía falta.
ALUMNO
- Carga la información real que ya tiene disponible.
- Verifica cada reemplazo antes de aprobarlo.
Objetivo: completar el sitio de a poco. No hace falta tener todos los datos
ahora: cargá solo la información real que ya esté verificada y dejá lo demás como pendiente.
1Completá los datos reales que ya tenés
Escribí únicamente información comprobada. Si todavía falta algo, dejalo pendiente para no inventarlo.
Estos son los 24 contenidos de texto del mapa del sitio. Respondé cada campo de información con el dato real que debe reemplazar al texto de ejemplo. Las imágenes (logo, organigrama y fotos) se suben en la página siguiente.
La información disponible ya fue incorporada al prompt. Revisala antes de copiarla en Canva.
2Generá la instrucción para reemplazar los ejemplos
Primero cargá la información de arriba y apretá Adjuntar información al prompt. Después copiá este prompt en la conversación del sitio ya construido en Canva.
Usalo después de refinar el diseño.
3Verificá cada reemplazo y arreglá de ser necesario
Después de que Canva actualice el sitio, comprobá que cada dato esté en la página correcta y que no se haya alterado el diseño refinado.
- ¿La información cargada está aprobada y es verdadera?
Producto de esta etapa: sitio casi terminado. Guardá en el
documento de Word los datos incorporados y los pendientes. La fase de refinamiento termina cuando el sitio
conserva su diseño aprobado y contiene la mayor parte de la información real disponible.
09
Imágenes y recursos visuales
Cada imagen debe representar el emprendimiento o ayudar a entender un producto o servicio.
IA · GENERADOR Y EDITOR VISUAL
- Puede generar una imagen cuando haga falta y agregarla al lugar correcto del sitio.
- Inserta o reemplaza imágenes reales, autorizadas o generadas sin inventar productos ni situaciones falsas.
ALUMNO
- Selecciona o produce imágenes reales, propias, autorizadas o claramente generadas con IA.
- Indica en qué página va cada imagen y qué información aporta al visitante.
- Verifica que no estén deformadas, pixeladas, cortadas de forma incorrecta ni usadas solo como adorno.
Una imagen no está solo para decorar: debe representar algo real del
emprendimiento, mostrar un producto, explicar un proceso, presentar al equipo o dar contexto útil para
entender el proyecto.
1Juntá las imágenes que vas a subir
Estas son las imágenes del sitio. Tenelas listas en tu computadora antes de pedirle a la IA que las coloque.
- Logo de la empresa.
- Organigrama: la organización de la empresa y la distribución de roles.
- Foto personal de cada integrante.
- Imágenes del proceso: una imagen para cada paso de elaboración.
- Imágenes de los productos: una imagen de cada producto que integra el kit.
2Revisá la calidad visual
La imagen debe verse profesional y adaptarse al espacio donde se va a publicar.
- No deformar: mantené la proporción original y evitá estirar personas, logos o productos.
- Tamaño adecuado: usá imágenes suficientemente grandes para el bloque donde aparecerán.
- Resolución nítida: evitá fotos pixeladas, borrosas, movidas o demasiado comprimidas.
- Encuadre claro: el producto o escena principal no debe quedar cortado ni tapado por texto.
- Peso razonable: comprimí archivos pesados para que el sitio cargue rápido sin perder calidad.
3Pedile a la IA que cambie cada imagen
Cambiá las imágenes de a una, con pedidos cortos en el chat de Canva. En cada pedido describí la imagen que está ahora en el sitio y adjuntá la foto nueva que va en su lugar.
- Adjuntá la foto nueva en el chat.
- Describí la imagen actual para que la IA sepa cuál es: en qué página está, dónde está ubicada y qué muestra.
- Pedile que la reemplace por la foto adjunta sin cambiar nada más de la página.
💡
Ejemplo de pedido: «En la página Productos, reemplazá la imagen del frasco verde que
está al lado del título por la foto que te adjunto. No cambies nada más.»
📎
Recordatorio: adjuntá la foto en el mismo mensaje del pedido. Si
la IA cambia otra imagen o modifica algo más, pedile que lo deshaga y volvé a describir la imagen
con más detalle.
Observación: priorizá imágenes reales del proyecto. Las
imágenes
generadas o de banco solo sirven si representan fielmente el emprendimiento y no sustituyen evidencias que
el
equipo debe mostrar.
10
Simulador de tienda con registro de pedidos
Construí la tienda con los productos de tu catálogo siguiendo el prompt. No es una tienda real: simula una compra y guarda cada pedido en una planilla.
IA · CONSTRUYE EL SIMULADOR
- Arma el catálogo, el carrito y el formulario del comprador.
- Vincula el formulario con una planilla para registrar los pedidos.
ALUMNO
- Pide a la IA que construya el simulador usando los productos del catálogo del sitio.
- Hace una compra de prueba y comprueba que el pedido quede en la planilla.
Etapa obligatoria: la tienda es un simulador. No se cobra, no se entregan
productos y no se piden contraseñas ni tarjetas. Solo muestra el recorrido de compra y guarda los datos del
pedido en una planilla.
1Pedile a la IA que construya el simulador
Copiá este prompt en la conversación del sitio en Canva. La IA tomará los productos, fotos y precios directamente de la página de productos que ya está en el sitio.
La tienda registra las compras y los datos del cliente en una hoja de cálculo vinculada.
Construí un simulador de tienda integrado a este mismo sitio web de mi proyecto STEAM en Canva. Tomá los datos de los productos directamente de la página de productos / catálogo que ya está construida en este sitio: utilizá exactamente los mismos nombres, descripciones, fotos reales y precios que ya figuran allí, sin inventar productos nuevos ni alterar los existentes. Organizá el recorrido completo de compra: 1. Catálogo interactivo: vinculá los productos ya publicados en el sitio con tarjetas interactivas que incluyan botón funcional para agregar cada producto al carrito de compras. 2. Carrito de compras funcional: selección de productos, modificación de cantidades (+ / -), eliminación de ítems y cálculo automático del monto total acumulado. 3. Formulario de datos personales al realizar la compra: al hacer clic en "Realizar compra" o "Finalizar pedido", solicitá obligatoriamente los datos personales del comprador para registrar el pedido de prueba: - Nombre y apellido completos. - Número de teléfono o WhatsApp de contacto. - Correo electrónico. - Dirección de entrega y notas/observaciones. 4. Vinculación del carrito con una hoja de cálculo: vinculá el carrito de compras y los datos personales con una hoja de cálculo (Google Sheets o planilla de Canva) para que, al confirmar la compra, se guarde automáticamente en la planilla: - Fecha y hora del pedido. - Datos personales del comprador: nombre, teléfono/WhatsApp, email y dirección. - Compra deseada: detalle de los productos seleccionados, cantidades de cada producto, precio unitario y monto total de la compra. 5. Pantalla de confirmación: al registrar la compra deseada y los datos en la planilla, mostrá un mensaje de confirmación que agradezca el pedido, muestre el resumen de la compra y avise que los datos y el pedido quedaron guardados en la planilla (sin procesar pagos bancarios ni tarjetas en el sitio). Condiciones obligatorias: - Tomá los productos y precios del catálogo ya presente en el sitio web; no inventes datos. - Mantené la misma identidad visual, colores y estilo del sitio web. - Validá que todos los campos de datos personales sean obligatorios antes de permitir confirmar la compra. - Asegurá que todo el recorrido se adapte perfectamente a celular. - No solicites contraseñas ni números de tarjeta bancaria (es un simulador escolar STEAM). - Al finalizar, explicá paso a paso cómo vincular la hoja de cálculo en Canva o Google Sheets y cómo realizar una compra de prueba para verificar que la fila se guarde con éxito.
2Hacé una compra de prueba
Agregá productos al carrito, completá el formulario con datos de ejemplo y confirmá. Comprobá que en la planilla aparezca el pedido con los productos y el total correcto. Probalo también en el celular.
11
Publicar el sitio en Canva
Publicá el sitio en Canva para obtener la URL pública que vas a entregar con tu trabajo.
IA · ASISTENTE DE PUBLICACIÓN EN CANVA
- Orienta sobre las opciones de Canva para publicar, compartir el enlace, configurar privacidad y revisar accesibilidad.
ALUMNO
- Publica el sitio desde Canva y obtiene el enlace público final.
- Verifica que la URL pública cargue en computadora y celular.
- Revisa el sitio publicado con los criterios de evaluación de la página siguiente.
Publicá para obtener la URL pública: asegurate de que el sitio incluya las
páginas del mapa, la información real, las imágenes y el simulador de tienda con planilla antes de presionar
Publicar.
1Publicá el sitio y obtené el enlace público
Seguí estos pasos en Canva IA → Programar para publicar el sitio y obtener la URL pública.
- Ingresá a Canva y abrí el proyecto del sitio que construiste con Canva IA → Programar.
- Comprobá que el sitio tenga todas las páginas, contenidos reales, imágenes y el simulador de tienda con planilla.
- Seleccioná Compartir y luego la opción para publicar el sitio web desde Canva.
- Elegí la configuración de publicación aprobada y permití que el sitio pueda ser visto por cualquier persona con el enlace.
- Presioná Publicar sitio web y esperá a que Canva termine el proceso.
- Copiá el enlace público que Canva te entregue (no copies el enlace de edición del proyecto).
- Abrí el enlace en otra ventana o dispositivo y comprobá que cargue correctamente.
Enlace público: guardá el enlace de Canva porque lo vas a necesitar para la entrega final del proyecto.
2Configurá la publicación en Canva
Usá las opciones de Canva para que las personas puedan encontrar y usar el sitio.
- Abrí en Canva la opción de publicar el sitio web y elegí la configuración aprobada para compartirlo.
- Definí el título, descripción y dirección que identificarán el sitio en Canva.
- Comprobá que el enlace de Canva sea correcto, público cuando corresponda y fácil de compartir.
- Revisá que no se publiquen contraseñas, claves ni datos privados.
- Incluí créditos, permisos, aviso de privacidad y aclaraciones necesarias dentro del sitio.
- Verificá que las imágenes, videos y archivos carguen desde la versión publicada en Canva.
3Recorré la URL pública
Abrí la URL pública generada por Canva como si fueras un visitante nuevo.
- ¿La portada se abre correctamente y explica quién es la empresa?
- ¿El menú, enlaces, formularios y simulador de tienda funcionan desde la URL publicada?
- ¿El sitio se ve bien en computadora y celular?
- ¿Las imágenes conservan proporción, nitidez y posición?
- ¿No aparecen errores, archivos faltantes ni pantallas vacías?
12
Criterios de evaluación
Estos son los puntos que se usan para corregir el sitio web.
Qué tenés que hacer acá: repasá tu trabajo con esta lista y marcá cada
punto que cumplas para estimar tu puntaje.
Puntaje estimado
0 / 10
puntos
- 1 pt
- 1 pt
- 1 pt
- 1 pt
- 1 pt
- 1 pt
- 1 pt
- 1 pt
- 1 pt
- 1 pt
✓Descargá tu trabajo y entregalo
Cuando termines de marcar los criterios, descargá un archivo con todo lo que completaste en esta guía, ordenado por página. Subilo a la tarea junto con el enlace de tu sitio.
El archivo se arma con lo guardado en este navegador. Si usás una computadora compartida, cuando termines apretá Borrar mis datos para que el próximo alumno empiece de cero.