Canvas de Gemini para sitios web interactivos
Contenido del curso
LUIS STALIN RAMIREZ CONTRERAS
Yurai Gonzalez
Santiago Vergara
Japheth Calzada López
Gabriel Obregón
José Edgardo Delgado Romero
Ivan Acosta
Maria del Consuelo Castañeda Lopez
Jesús Isaías Ramos
Daniel Alfredo García Serna
Adolfo Coll - Cardenas
Carlos Alfredo Fuentes Alas
César David Ramírez Dimaté
Dennis rodriguez
Andres Rafael Tito
Wilfredo Antonio López Martínez
Dora Alicia Rico Mejia
Dora Alicia Rico Mejia
Maria del Carmen Pérez
Faustino Angel Gonzalez Herrera
Renato Puello Pereira
ALICIA MARINABELTRÁNHERNÁNDEZ
Giovanni Pavajeau Pizarro
Damaris Molina H
Le pedi que me creara una pagina web de ventas de componentes para pc, y este fue el resultado
Hola, yo soy muy nueva en todo lo relacionado a la TECH e informática, soy historiadora, pero ahora estoy aprendiendo otras habilidades que puedan ampliar mis conocimientos. Entonces, ya hice un curso de código Python, mi duda es: Cuándo ya hiciste código, cómo lo haces visible? (si todo tu código ya está hecho para hacer una página web o una aplicación), cómo hago para ver mi código realizado como una página web y una aplicación... 🤔 No sé burlen de mí, ni me hagan comentarios negativos, necesito solo una respuesta, que quizás para los que saben mucho puede ser fácil y lógica, pero para los que venimos de campos humanistas aún no logro entenderlo 100%. Gracias 😇 (ya sé que Python, no es para hacer páginas web).
Cuando escribes código, ese código no se “ve” automáticamente. El código es como las instrucciones o la lógica que hace que algo funcione, pero necesita un medio para mostrarse o ejecutarse.
Si hiciste código en Python puro Por ejemplo, scripts que hacen cálculos, procesan datos o imprimen resultados.
Ese código se ejecuta en la consola o terminal.
Ahí ves los resultados como texto, no como una página web.
Es muy usado para análisis de datos, automatización, investigación, etc.
Lo ejecutas con algo como:
python mi_archivo.py
Si quieres ver tu trabajo como una página web Python no crea páginas visuales por sí solo, pero puede ser el “cerebro” que está detrás.
Necesitas un framework como Flask o Django
Y usar HTML y CSS para lo visual
Python corre en un servidor y tú ves el resultado en el navegador (Chrome, Firefox, etc.), por ejemplo entrando a localhost.
Si quieres una aplicación
Aplicación de escritorio: Python puede crear ventanas usando librerías como Tkinter o PyQt. El resultado es un programa que se abre en tu computadora.
Aplicación web: funciona como una web, pero con más lógica y funcionalidades detrás.
Aplicación móvil: normalmente se usan otros lenguajes; Python no es el más común aquí.
La idea clave es esta: El código no es lo que se ve, es lo que hace que algo funcione.
Hola Yurai, bienvenida, y mis respetos por tu gran cambio de paradigma, te recomendaría tomar el curso de fundamentos de ingenieria, para poderte dar todo un contexto sobre el desarrollo web, como comentas, python no es para mostrar web, lo conocemos como backend, podrias intentar hacer el ejercicio de esta clase, que arroja HTML y aunque aun no es funcional ( le falta el back como python) podria decirse que es un maquetado para mostrar
🧠 CANVAS DE GOOGLE GEMINI PARA CREAR SITIOS WEB Y DASHBOARDS
🎯 ¿PARA QUÉ SIRVE EL CANVAS?
👉 Permite crear sitios web profesionales y dashboards interactivos sin programar, directamente desde el chat.
Características clave:
✔️ Ideal para prototipar, validar ideas y experimentar.
⚙️ ACTIVACIÓN DEL CANVAS
Ruta: 🛠️ Herramientas > canvas
🔄 ¿Qué sucede al activarlo?
⭐ Ventajas
🎨 ITERAR CAMBIOS SIN PROGRAMAR
Función clave: 🖱️ Selecciona y pregunta
🔧 Cómo funciona
🔁 Puedes repetir el proceso todas las veces que quieras.
🧭 VALIDACIÓN DE EXPERIENCIA DE USUARIO
En la demo:
✔️ Permite comprobar la experiencia antes de publicar.
🚀 LLEVAR EL PROYECTO A PRODUCCIÓN
🧑💻 Recomendado: apoyo técnico para el despliegue final.
🤖 AGREGAR IA CON LA API DE GEMINI
Botón disponible: ➕ Agregar funciones de Gemini
🧪 Ejemplo práctico
Simulador financiero que:
📈 Genera:
⚠️ Importante
He creado un app funcional, la cual puedo editar el codigo e insertar las URL de los articulos, imagenes y logo, ademas de jerarquizar sus apartaso y enlace al blog principal, buena fuente de trafico extra la blog, ademas de agregar canal de Youtube y Fanpages
Aquí un recurso donde puedes buscar bases de datos con las que puedes practicar.
ya hace tiempo que realicé una pagina de presentación con gemini para mi trabajo y agregué el calendario de google para agendar reuniones con estudiantes que solicitan tutoría :)
Hice una infografía del resumen de esta clase, primero un canvas dinámico y después una estática para pegarla acá.
📚 Canvas de Gemini para sitios web interactivos
🎯 Idea principal
Canvas para desarrollo web permite a Gemini escribir, ejecutar y previsualizar código HTML, CSS y JavaScript en una ventana lateral interactiva. La clave es que ya no solo recibes un bloque de código muerto; ahora puedes ver el sitio web funcionando en vivo y pedir cambios visuales o funcionales que se aplican y muestran instantáneamente. 🌐
🔑 Puntos clave
🧠 Conceptos importantes
🚀 Acciones inmediatas
🔥 Hacks para la comunidad
📝 Reflexión estratégica
Esta herramienta elimina la barrera técnica entre la idea creativa y el producto funcional. Un profesional que domina Canvas para web puede presentar prototipos navegables en una reunión de 15 minutos, ganando terreno sobre competidores que solo presentan diapositivas estáticas. Es el poder de la ejecución inmediata.
Puedes agregar funciones de IA generativa de Gemini, como simuladores de estrategia o asistentes, a tu sitio web. Esto se hace conectando la API de Gemini, permitiendo interacción inteligente con los usuarios, pero recuerda que estas integraciones pueden tener un costo asociado.
Pregunta: ¿Existe un curso acá en Platzi para aprender a realizar esa integración?
Le puedes preguntar a Gemini en el modo de aprendizaje cómo hacerlo, el límite ahora es tu mente.
Yo igual estoy creando una landing page para trakear hábitos de dieta (aumento de masa muscular ) en base a dietas recomendadas.
Describe una API
Imagina que una API es el mesero en un restaurante: tú haces el pedido y él se encarga de traerlo de la cocina sin que tengas que entrar a cocinar. Es el puente que permite que dos sistemas hablen sin conocer los detalles internos del otro.
Si tuvieras que conectar tu sitio con Gemini, ¿qué "pedido" específico le enviarías para que la interacción fuera realmente útil?
Es una herramienta muy importante para el trabajo con mis alumnos ya wue se trabaja con el sitios web
Es una herramienta nueva muy interesante que la pondré en práctica con mis alumnos utilizando los sitio web con diferentes carpetas
Este fue mi prompt: Necesito que hagas un dashboard interactivo , con indicadores principales tipo KPI, ademas haya graficos por proyecto, partida, estado tipo semaforo, reclamos por prioridad, reclamos por ubicación. El diseño quiero que sea visual, limpio y profesional, debe de ser faciles de ller y graficos claros. Manten una estetica corporativa. El objetivo del dashboard es poder analizar rápidamente qué proyectos tienen más reclamos, qué partidas presentan más incidencias, cuántos reclamos están pendientes y cuáles requieren atención prioritaria.
Este fue el resultado:
No tengo base de datos a la mano pero, le pedi crear un sitio web sobre un taller de robotica educacional mediante metodologia STEM.
Dashboard del top 100 de universidades en el mundo. Link:
Para educación me parece muy útil para crear sitios web sobre los temas de estudio que pueden ser más específicos.
Les comparto una pagina web basada en los principios de uno de mis libros preferidos, el hombre mas rico de balilonia,
no pude responder el quiz desde el celular 🥲
