Tu empresa, en una web que funciona

1Completá tus datos

Se usan en el pie de tu sitio («Realizado por») y en el archivo que entregás.

2Definí el objetivo del sitio

El objetivo es el propósito principal del sitio: qué querés comunicar, a quién y qué acción esperás que hagan los visitantes.

• ¿Qué quiero lograr con mi sitio?
• ¿Qué mensaje quiero comunicar?
• ¿Qué acción quiero que realicen los visitantes?

3Definí el público

El público es el grupo de personas para las que hacés el sitio. Conocerlo te ayuda a decidir el contenido, el diseño y el lenguaje.

• ¿A qué grupo de personas quiero llegar? ¿Qué edad tienen?
• ¿Qué intereses o necesidades tienen?
• ¿Dónde y cómo usan internet?
• ¿Qué esperan encontrar en el sitio?

1Elegí las páginas de tu sitio

Las obligatorias ya están marcadas. La página del proyecto STEAM es optativa: sumala si querés contar cómo nació la empresa.

2Pensá cómo se conectan

• ¿Qué información necesita ver primero el visitante?
• ¿Cómo se pasa de una página a otra desde el menú?
• ¿Desde qué páginas conviene llegar a la tienda?

1Creá el cuaderno en NotebookLM

1. Entrá a notebooklm.google.com con tu cuenta del colegio.
2. Creá un cuaderno nuevo y ponele de nombre «Sitio web – nombre de tu empresa».
3. Agregá como fuentes los documentos del proyecto: el trabajo escrito del proyecto STEAM, la presentación de la defensa, las fichas de productos y costos, y otros documentos que tengan información de la empresa.
4. Esperá a que NotebookLM termine de leer las fuentes.

2Pedile la información

Apretá Adjuntar al prompt: se suman tu objetivo, tu público y las páginas que elegiste. Después copiá el prompt en el chat del cuaderno.

Usá únicamente las fuentes de este cuaderno. Necesito la información para el sitio web de la empresa de nuestro proyecto STEAM.

Objetivo del sitio: [OBJETIVO DEL SITIO]

Público: [PÚBLICO]

El sitio va a tener estas páginas:
[PÁGINAS DEL SITIO]

Para cada página escribí:
- El título de la página.
- Un texto breve y claro, pensado para el público del sitio y para leer en pantalla (no un informe).
- Los datos que tiene que mostrar.

En la página de productos y en la tienda, listá cada producto con nombre, descripción corta y precio. En Contacto, poné solo los datos que aparezcan en las fuentes.
Si un dato no está en las fuentes, escribí [PENDIENTE]. No inventes información. Al final, hacé una lista de los datos que faltan.

3Revisá la información

• ¿La información es correcta y está actualizada?
• ¿Sirve para tu objetivo y se entiende para tu público?
• ¿Los textos son cortos y fáciles de leer en pantalla?
• ¿Quedó algún [PENDIENTE]? Buscá el dato, agregalo como fuente o completalo con tu grupo.

4Guardá la información del sitio

1Elegí las funcionalidades

2Pensá cada una

• ¿Qué problema o necesidad resuelve?
• ¿Es indispensable o es un extra?
• ¿Es fácil de usar para todos?

1Analizá el logo y obtené la paleta

El prompt usa estos 2 datos. Si ya los escribiste, aparecen solos; podés editarlos si hace falta. Después apretá Adjuntar al prompt.

Analizá la imagen del logo adjunto de mi empresa.

Nombre de la empresa: [NOMBRE DE LA EMPRESA]
Objetivo del sitio web: [OBJETIVO DEL SITIO]

Identificá los colores principales del logo y proponé una paleta para el sitio web con 4 o 5 colores. Para cada color indicá: nombre, código HEX, para qué usarlo en el sitio (fondo, títulos, botones o detalles) y si el texto se lee bien sobre él.

No inventes colores que no tengan relación con el logo. Si no podés analizar la imagen, escribí [PALETA PENDIENTE].

2Definí el estilo y las tipografías

Pegá la paleta que te dio Gemini y ajustala si hace falta. Después apretá Adjuntar al prompt.

Con esta paleta aprobada, definí el estilo visual del sitio web de mi empresa.

Paleta: [PALETA APROBADA]

Objetivo del sitio: [OBJETIVO DEL SITIO]

Público: [PÚBLICO]

Proponé:
1. La personalidad visual del sitio en pocas palabras (por ejemplo: moderno y confiable, cercano y colorido).
2. Dos tipografías de Google Fonts: una para títulos y otra para textos, con los tamaños sugeridos.
3. Cómo usar los colores en fondos, títulos, botones y tarjetas, cuidando que el texto se lea bien.
4. El estilo de los botones, las tarjetas, los íconos y las imágenes.
5. Qué evitar para que el sitio no se vea recargado.

Entregalo como una guía corta, lista para pegar en el prompt que construye el sitio.

3Revisá y aprobá

• ¿Los colores combinan con el logo y la empresa?
• ¿El texto se lee bien sobre los colores de fondo?
• ¿El estilo va con tu objetivo y tu público?
• ¿Se puede aplicar igual en todas las páginas?

4Guardá la identidad visual

1Revisá tu planificación

Estos datos salen de las páginas anteriores. Si corregís algo acá, también cambia allá.

Las secciones (3) y las funcionalidades (5) se toman de lo que marcaste.

2Armá el prompt

Actuá como diseñador/a y programador/a web. Construí en Canvas el sitio web de la empresa de nuestro proyecto STEAM.

Quiero crear un sitio web para: [OBJETIVO DEL SITIO]

El sitio está dirigido a: [PÚBLICO]

Debe tener las siguientes secciones o páginas: [SECCIONES Y PÁGINAS]

La información que debe contener es:
[INFORMACIÓN DEL SITIO]

Las funcionalidades que debe incluir son: [FUNCIONALIDADES]

Diseño (identidad visual aprobada: usá estos colores, tipografías y estilo en todo el sitio): [DISEÑO]

Requisitos:
- Es el sitio de una empresa: tiene que verse profesional y confiable.
- Un menú de navegación que lleve a cada sección y que funcione en el celular.
- Tienda virtual simulada: catálogo con los productos (imagen, nombre, descripción y precio), carrito para agregar y quitar productos, cambiar cantidades y ver el total, y un formulario de pedido con nombre, teléfono y correo que muestre una confirmación con el resumen. No proceses pagos ni pidas datos de tarjetas: es un simulador.
- Usá solo la información que te doy. Donde falte un dato, escribí [PENDIENTE]. No inventes productos, precios ni integrantes.
- Donde vaya una foto real, dejá una imagen de ejemplo con una etiqueta que diga qué va (por ejemplo, "Foto del producto 1").
- Diseño adaptable a celulares, textos breves y buen contraste entre el texto y el fondo.
- En el pie de página de todas las secciones: «Realizado por: [NOMBRE Y APELLIDO]».

3Guardá el prompt final

1Generá el sitio

1. Entrá a gemini.google.com e iniciá sesión con tu cuenta del colegio.
2. Hacé clic en Nuevo chat.
3. Abajo del cuadro de texto, elegí Canvas.
4. Pegá el prompt que preparaste.
5. Enviá el mensaje y esperá: Gemini arma el sitio en Canvas.
6. Revisá la primera versión y seguí mejorándola.

2Revisá lo que generó

• ¿Tiene todas las secciones que definiste?
• ¿Incluye la información que planeaste?
• ¿Tiene las funcionalidades elegidas?
• ¿Aparece «Realizado por» con tu nombre?

3Pedí cambios de a uno

Conversá con Gemini como si trabajaran juntos. Cuanto más claro sea el pedido, mejor el resultado. Por ejemplo:

• «En la página Nosotros, agregá la misión y la visión que están en la información.»
• «El menú no se ve en el celular. Hacé que se abra con un botón.»
• «Cambiá el título del inicio por el eslogan de la empresa.»

1Mirá estos 8 aspectos

• Colores: que combinen entre sí y permitan leer los textos.
• Tipografías: que los títulos se distingan de los textos.
• Distribución: que la información sea clara y fácil de encontrar.
• Imágenes: relacionadas con el proyecto, del tamaño y en el lugar adecuados.
• Botones: visibles y que muestren qué acción hacen.
• Menús: que el visitante pueda moverse fácil por el sitio.
• Organización visual: que se entienda rápido.
• Estilo coherente: el mismo estilo en todas las secciones.

2Pedile a Gemini una revisión

Gemini revisa el sitio y propone mejoras. Vos elegís cuáles aplicar.

Revisá el sitio que creaste en Canvas como si fueras un visitante nuevo y un diseñador. Analizá estos 8 aspectos: colores, tipografías, distribución, imágenes, botones, menús, organización visual y estilo coherente entre las secciones.

Para cada aspecto, decime qué está bien y qué mejorarías, con una propuesta concreta. Todavía no cambies nada: esperá a que yo elija qué mejoras aplicar.

3Sumá el logo y las imágenes

• Adjuntá el logo en el chat del sitio y pedile: «Poné este logo en el menú y en el pie de página».
• Para cada foto, adjuntala y decile en qué lugar va, por ejemplo: «Usá esta foto en la tarjeta del producto 1».
• Si Canvas no puede usar tu foto, pedile que deje la imagen de ejemplo más parecida y anotá en tu tarea qué foto iría.

1Juntá los productos

Copiá de tu información los productos con su nombre, una descripción corta y el precio.

2Pedile a Gemini que arme la tienda

Revisá la tienda virtual del sitio y dejala funcionando con estos productos:
[PRODUCTOS]

La tienda tiene que tener:
1. Catálogo: una tarjeta por producto con imagen, nombre, descripción breve, precio y botón "Agregar al carrito".
2. Carrito: agregar y quitar productos, cambiar cantidades (+ / −) y ver el total actualizado.
3. Pedido: formulario con nombre y apellido, teléfono o WhatsApp y correo; todos obligatorios.
4. Confirmación: un mensaje que agradezca el pedido y muestre el resumen (productos, cantidades y total).

Es un simulador escolar: no proceses pagos ni pidas datos de tarjetas. No cambies el resto del sitio.

3Hacé una compra de prueba

• Agregá productos al carrito y cambiá las cantidades.
• ¿El total se calcula bien?
• Completá el pedido con datos de ejemplo: ¿aparece la confirmación con el resumen?
• Probalo también en el celular.

1Probá como visitante

• ¿Funcionan los enlaces y los botones del menú?
• ¿Funcionan los formularios y la tienda?
• ¿Se ve bien en la computadora y en el celular?
• ¿La información es correcta y no quedó ningún [PENDIENTE]?
• ¿Aparece «Realizado por» con tu nombre?

2Publicá el sitio

1. En Canvas, usá el botón Compartir para crear el enlace público del sitio.
2. Copiá el enlace y abrilo en una ventana privada para comprobar que cualquiera lo puede ver.