En esta parte del taller, cada estudiante creará y publicará su primera página web usando GitHub Codespaces y la ayuda de la Inteligencia Artificial.
- Crear una página web personalizada usando prompts de IA
- Publicarla en Internet con GitHub Pages
- Compartir tu creación con el mundo
-
Crear cuenta en GitHub:
- Accede a GitHub y crea tu cuenta gratuita
- Usa tu email personal y elige un nombre de usuario único
-
Forkear este repositorio:
- Ve a la página principal de este repositorio (
InnovaSchoolsWorkshop) - Haz clic en el botón "Fork" (arriba a la derecha)
- Elige tu cuenta personal para crear una copia (fork) en tu perfil
- Espera unos segundos a que se cree tu propio repositorio
- ¡Listo! Ahora tienes una copia de este repositorio en tu cuenta para trabajar
- Ve a la página principal de este repositorio (
-
Abrir GitHub Codespaces:
- En tu repositorio forkeado, haz clic en el botón "Code" (verde)
- Selecciona la pestaña "Codespaces"
- Haz clic en "Create codespace on main"
- Espera a que se cargue el entorno (1-2 minutos)
-
Vincular VS Code con GitHub:
- Cuando se abra VS Code en el navegador, puede aparecer un mensaje para iniciar sesión
- Haz clic en "Sign in to GitHub" si aparece
- Autoriza los permisos para que VS Code pueda guardar tus archivos
Si quieres usar imágenes en tu página, puedes:
- Ir a Google Images, buscar la imagen que quieras
- Clic derecho → "Copiar enlace de la imagen"
- Usa ese enlace en tu prompt: "incluye esta imagen: [pegar enlace aquí]"
- Copilot la colocará automáticamente donde corresponda
- Usar el Prompt Modular que encontrarás más abajo
- Personalizar tu página según tus intereses
- Importante: Pide que el código se organice así:
index.html→ En la raíz (carpeta principal)styles.cssyscript.js→ En una carpeta llamadaassets
- Solicitar diseño atractivo: Siempre agrega: "Procura que el diseño sea bonito, limpio y moderno"
- Una vez que tengas tu página lista, pídele a Copilot que suba los cambios:
- Escribe en el chat: "Sube todos mis cambios a GitHub" o "Haz commit y push de mis archivos"
- Copilot se encargará de hacer el commit y push automáticamente
- ✅ Verifica que aparezca "Changes pushed successfully" o similar
- Con tus archivos ya subidos al repositorio:
- Activa GitHub Pages:
- Ve a Settings en tu repositorio forkeado
- Scroll hacia abajo hasta "Pages"
- En "Source" selecciona "Deploy from a branch"
- Elige "main" branch y "/ (root)"
- Click "Save"
- ¡Tu página estará disponible en:
https://tu-usuario.github.io/InnovaSchoolsWorkshop/ - Comparte tu URL con tus compañeros
Usa esta plantilla y completa cada sección según tus gustos e intereses:
Crea una página web moderna y atractiva usando Bootstrap con las siguientes características:
**TEMA DE LA PÁGINA:**
- Sobre: [Elige uno: Mi perfil personal / Mi hobby favorito / Un tema que me apasiona / Una causa social / Mi deporte favorito / Mi banda/artista favorito / Mi videojuego favorito / Mi carrera soñada / Otro: ____]
**ESTILO VISUAL:**
- Colores principales: [Elige 2-3 colores armoniosos, ej: Azul marino y dorado / Verde esmeralda y crema / Rosa coral y gris carbón / Púrpura y plata / Naranja y azul petróleo]
- Estilo de diseño: [Elige uno o varios: Moderno y minimalista / Colorido y divertido / Elegante y profesional / Creativo y artístico / Tecnológico futurista]
- Características visuales: [Opcional - elige las que te gusten: Innovador / Animado / Gradientes suaves / Sombras elegantes / Efectos hover / Tipografía moderna / Espacios en blanco / Bordes redondeados]
**CONTENIDO QUE DEBE INCLUIR:**
- Título principal llamativo
- Una breve descripción o introducción (2-3 oraciones)
- Al menos 3 secciones con información relevante organizadas con Bootstrap
- Una galería de imágenes o íconos usando componentes de Bootstrap
- Un formulario de contacto usando clases de Bootstrap
- Enlaces a redes sociales (opcional)
**FUNCIONALIDADES:**
- Usar Bootstrap 5 para el diseño responsivo
- Navegación con navbar de Bootstrap
- Cards o components de Bootstrap para organizar contenido
- Animaciones CSS suaves
- Botones con estilos de Bootstrap personalizados
**REQUISITOS TÉCNICOS:**
- Usar HTML5, CSS3, JavaScript y Bootstrap 5 CDN
- Diseño completamente responsivo con sistema de grillas de Bootstrap
- Incluir meta tags para SEO
- Código limpio y comentado
- Optimizado para GitHub Pages
- Compatible con todos los navegadores modernos
Por favor, genera el código completo HTML con Bootstrap y CSS personalizado listo para publicar en GitHub Pages.
Crea una página web moderna y atractiva usando Bootstrap con las siguientes características:
**TEMA DE LA PÁGINA:**
- Sobre: Mi videojuego favorito - Minecraft
**ESTILO VISUAL:**
- Colores principales: Verde esmeralda, marrón tierra y azul cielo
- Estilo de diseño: Tecnológico futurista
- Características visuales: Innovador, Animado, Pixelado
**CONTENIDO QUE DEBE INCLUIR:**
- Título principal: "Mi Mundo en Minecraft"
- Introducción sobre por qué me gusta Minecraft y desde cuándo juego
- Sección 1: Mis construcciones favoritas (usando Bootstrap cards)
- Sección 2: Consejos para nuevos jugadores (con lista de Bootstrap)
- Sección 3: Mis mods y texturas preferidas (galería con Bootstrap)
- Formulario de contacto para otros jugadores usando Bootstrap forms
- Enlaces a mi canal de YouTube gaming
**FUNCIONALIDADES:**
- Usar Bootstrap 5 para diseño responsivo
- Navbar de Bootstrap con navegación suave
- Cards animadas con efectos hover
- Carousel de Bootstrap para capturas de pantalla
- Botones de Bootstrap con estilos personalizados
**REQUISITOS TÉCNICOS:**
- Usar HTML5, CSS3, JavaScript y Bootstrap 5 CDN
- Diseño completamente responsivo con sistema de grillas de Bootstrap
- Incluir meta tags para SEO
- Código limpio y comentado
- Optimizado para GitHub Pages
- Compatible con todos los navegadores modernos
Crea una página web moderna y atractiva usando Bootstrap con las siguientes características:
**TEMA DE LA PÁGINA:**
- Sobre: Mi deporte favorito - Fútbol
**ESTILO VISUAL:**
- Colores principales: Azul real, blanco y verde césped
- Estilo de diseño: Moderno y dinámico
- Características visuales: Animado, Gradientes suaves, Efectos hover
**CONTENIDO QUE DEBE INCLUIR:**
- Título principal: "Pasión por el Fútbol"
- Introducción sobre mi amor por este deporte y desde cuándo juego
- Sección 1: Mi equipo favorito y jugadores legendarios (usando Bootstrap cards)
- Sección 2: Mis posiciones preferidas y habilidades (con lista de Bootstrap)
- Sección 3: Estadios que quiero visitar (galería con Bootstrap)
- Formulario de contacto para otros fanáticos usando Bootstrap forms
- Enlaces a noticias deportivas y redes sociales
**FUNCIONALIDADES:**
- Usar Bootstrap 5 para diseño responsivo
- Navbar de Bootstrap con navegación suave
- Cards animadas con efectos hover
- Carousel de Bootstrap para fotos de partidos
- Botones de Bootstrap con estilos personalizados
**REQUISITOS TÉCNICOS:**
- Usar HTML5, CSS3, JavaScript y Bootstrap 5 CDN
- Diseño completamente responsivo con sistema de grillas de Bootstrap
- Incluir meta tags para SEO
- Código limpio y comentado
- Optimizado para GitHub Pages
- Compatible con todos los navegadores modernos
- Ve a Google Images o Unsplash
- Encuentra la imagen que quieras usar
- Clic derecho → "Copiar enlace de la imagen"
- En tu prompt agrega: "Incluye esta imagen: [pegar enlace aquí]"
- Especifica dónde quieres la imagen: "ponla como foto principal" o "úsala en la galería"
"Incluye esta imagen como fondo del header:
https://images.unsplash.com/photo-1234567890/imagen-bonita.jpg"
- Sé original en tu elección de tema
- Usa colores que reflejen tu personalidad
- Incluye contenido personal y auténtico
- Piensa en animaciones creativas
- Agrega elementos interactivos únicos
- Deportes: Tu equipo favorito, tu deporte, estadísticas
- Arte: Tus obras, artistas favoritos, técnicas
- Ciencia: Experimentos, descubrimientos, proyectos
- Viajes: Lugares que quieres visitar, culturas que admiras
- Tecnología: Gadgets, apps, tendencias futuras
- Medio Ambiente: Proyectos eco-friendly, sostenibilidad
- Emprendimiento: Tu idea de negocio, productos innovadores
- Guía oficial de GitHub Pages
- Tutorial de HTML y CSS
- Inspiración de diseños web
- Paletas de colores
- Íconos gratuitos
Si tienes alguna duda durante el proceso, no dudes en:
- Levantar la mano para pedir ayuda
- Preguntar a tus compañeros
- Revisar los ejemplos proporcionados
- ¡Experimentar y divertirte!
Recuerda que esta es solo tu primera página web. Con práctica y dedicación, podrías convertirte en:
- 💻 Desarrollador Full-Stack
- 🎨 Diseñador UX/UI
- 🤖 Especialista en IA
- 🔒 Experto en Ciberseguridad
- ☁️ Arquitecto Cloud
- 🎮 Desarrollador de Videojuegos
¡El límite es tu imaginación! 🚀