Detrás de Cámaras: El Making-Of

Un recorrido paso a paso de cómo un estudiante y su asistente de Inteligencia Artificial (Antigravity) crearon esta web.

Volver a la Web

Paso 1: La Tarea y el Prompt Inicial

Todo gran proyecto comienza con una buena instrucción (Prompt). Aquí es donde el estudiante le presenta el reto escolar a la Inteligencia Artificial.

Estudiante (Prompt Inicial)

"Debo crear una página web como tarea para el colegio. Escogí el tema: El impacto de la Inteligencia Artificial en la educación moderna. La página debe informar sobre los beneficios de la IA, mostrar ejemplos prácticos de herramientas y usar imágenes que representen el tema. Debe entregarse en formato HTML."

Antigravity (Inteligencia Artificial)

"¡Entendido! Como tu asistente de Inteligencia Artificial experto en código, analicé los requerimientos de tu tarea escolar. Procedí a diseñar un plan para construir la página web usando HTML5 y CSS moderno para que se viera sumamente profesional. Me aseguraré de estructurar la información para que sea clara y de organizar los archivos correctamente en tu computadora."

Paso 2: Construyendo la Estructura

Una vez clara la idea, es hora de escribir el código fuente. El estudiante guía las secciones que necesita.

Estudiante

"¡Perfecto! Necesito que la estructura tenga una sección de inicio atractiva, otra con tarjetas que expliquen los beneficios de la IA para estudiar, estadísticas reales y por último, algunos ejemplos prácticos de herramientas que los alumnos puedan usar."

Antigravity (Inteligencia Artificial)

"Me puse manos a la obra. Generé el código completo para index.html asegurándome de usar un diseño responsivo para celulares y pantallas grandes. Añadí un menú de navegación flotante, tarjetas interactivas que se elevan al pasar el mouse y un script de JavaScript para que las estadísticas cuenten hacia arriba automáticamente. Escribí el archivo en tu sistema de manera segura."

Paso 3: Gestión de Imágenes (Assets)

Una web sin gráficos es aburrida. Aquí coordinamos dónde y cómo colocar las imágenes para que el navegador las lea correctamente.

Estudiante

"La estructura y los textos se ven geniales, pero necesitamos organizar las imágenes. ¿Cómo hacemos para que la página las encuentre correctamente cuando la abra?"

Antigravity (Inteligencia Artificial)

"Yo como IA me encargué de esto. Creé una carpeta específica llamada assets dentro del proyecto en tu computadora. Allí le indiqué al sistema que guardara las imágenes con las características deseadas (como hero-learning.png). Luego, vinculé esas imágenes en el código HTML usando rutas relativas, garantizando que el diseño fuera estéticamente moderno."

Paso 4: Publicación en el Servidor Web

El paso final para que una web local pueda ser visitada por el profesor y los compañeros en internet.

Estudiante

"Tengo los archivos listos en mi computadora y todo funciona. Ahora, ¿cómo la subo a internet para cumplir con la entrega de mi tarea?"

Antigravity (Inteligencia Artificial)

"Después de confirmar que todo el código local estaba perfecto, te sugerí subir la página a un servidor web real. Para evitar errores comunes donde las imágenes (assets) se pierden, ejecuté un comando para comprimir todo tu proyecto en un archivo ZIP. Así, solo tuviste que subir el ZIP a tu Hosting y extraerlo. La web quedó correctamente publicada y lista para tu evaluación."

Paso 5: Reflexión sobre la Colaboración

La conclusión de trabajar de la mano con herramientas de nueva generación.

Estudiante

"¡La página ya está online y funciona perfecto! Ahora estoy listo para presentarla al profesor. Gracias por la ayuda, fue mucho más rápido que hacerla desde cero."

Antigravity (Inteligencia Artificial)

"Ha sido un placer trabajar contigo. Esta experiencia demuestra perfectamente el concepto principal de tu tarea: La Inteligencia Artificial no hace el trabajo por ti de forma mágica; ella actúa según las instrucciones (Prompts) que tú diseñas. Tú fuiste el director del proyecto y yo fui tu desarrollador técnico. ¡El resultado es un 10 asegurado!"