Intro
En este proyecto van a desarrollar un sitio web funcional sobre el Mundial de Fútbol 2026.
El objetivo no es solamente hacer una página bonita, sino demostrar que saben seguir un proceso básico de desarrollo web: analizar, planear, diseñar, construir, organizar, versionar y publicar un sitio en internet.
El sitio tendrá como tema principal el Mundial de Fútbol 2026. Este Mundial se jugará en Canadá, México y Estados Unidos, será la primera edición con 48 selecciones y tendrá 104 partidos, de acuerdo con información oficial de FIFA.
Cada alumno puede elegir un enfoque distinto:
- Un sitio informativo general,
- Una guía para aficionados,
- Un sitio sobre México como país anfitrión
- O una fan page de una selección.
Es decir; no todos deben hacer el mismo sitio. Lo importante es que el proyecto tenga una idea clara, una estructura ordenada y evidencias del proceso.
Planeación
Antes de abrir Sublime Text y empezar a programar, primero debemos planear. La planeación ayuda a saber qué vamos a construir, para quién será el sitio y qué información tendrá.
El documento de planeación debe ser breve, pero claro. Debe explicar el propósito del sitio, el público al que va dirigido, las páginas o secciones que tendrá y qué información se mostrará en cada parte.
Consejo
Si no pueden explicar su sitio en un documento breve, probablemente todavía no tienen clara la idea. Primero definan bien el tema y después programen.
Wireframes
Después de planear, vamos a diseñar los wireframes. Un wireframe es un boceto simple de la estructura del sitio. No se trata todavía de colores ni imágenes finales, sino de decidir dónde irá el menú, el título, las secciones, las tarjetas, los botones y el contenido.
En esta fase no es necesario usar herramientas avanzadas ni hacer un diseño perfecto. Como se trata de wireframes, pueden elaborarse con bocetos a papel y lápiz. También pueden usarse herramientas simples como draw.io o PowerPoint.
El sitio debe tener mínimo cinco páginas o cinco secciones. Por eso, el wireframe debe mostrar cómo se organizarán esas cinco partes.
Consejo
No empiecen con diseño visual todavía. Primero revisen que el sitio tenga orden, navegación y una estructura lógica.
Mockup visual
Una vez que ya tenemos la estructura, pasamos al mockup.
A diferencia del wireframe, el mockup ya muestra la apariencia visual del sitio. Aquí sí deben definirse colores, tipografías, imágenes, botones, fondos y estilo general.
Por ejemplo: si el sitio será sobre México, pueden usar verdes, rojos, blanco y elementos relacionados con las sedes mexicanas. Si es una fan page de Argentina, Brasil, Francia o Japón, el estilo visual puede tomar colores de esa selección.
Para esta fase pueden usar herramientas como Canva, Figma o PowerPoint. No es obligatorio que el mockup sea interactivo, pero sí debe permitir ver cómo se espera que luzca el sitio antes de programarlo.
Consejo
No saturen el sitio con demasiados colores ni demasiadas imagenes.
Implementación
Antes de programar, necesitamos organizar correctamente los archivos. Un proyecto web ordenado se entiende mejor, se corrige más fácil y se puede subir a GitHub sin problemas.
El archivo principal debe llamarse index.html, porque GitHub Pages normalmente busca ese archivo como página inicial del sitio. Los estilos personalizados irán en la carpeta css, el JavaScript en la carpeta js y las imágenes en la carpeta img.
Consejo
Usen nombres simples, sin espacios y en minúsculas: como sedes.html, calendario.html, mexico.html.
Ahora sí comenzamos con la implementación. Primero construiremos la estructura usando HTML. HTML nos permite definir encabezados, párrafos, enlaces, imágenes, listas, secciones y formularios básicos.
Contenido
Primero hagan que el contenido esté completo y bien organizado. Después agreguen estilos. No intenten resolver diseño, imágenes, animaciones y contenido al mismo tiempo.
Estilo
CSS permite modificar la apariencia del sitio: colores, tamaños, márgenes, fondos, bordes y distribución visual. Aunque usaremos Bootstrap, también deben tener un archivo CSS propio para personalizar el diseño.
Bootstrap ayuda mucho, nos ayuda a crear sitios responsivos de forma más rápida. Incluye componentes como botones, menús, tarjetas, contenedores, columnas y barras de navegación. La documentación oficial permite usar Bootstrap mediante CDN, sin instalar paquetes adicionales.
Consejo
No copien componentes completos sin entenderlos. Cambien textos, colores, imágenes y estructura para que realmente pertenezcan a su proyecto.
Efectos
El sitio debe incluir al menos una función interactiva usando JavaScript con jQuery. jQuery facilita tareas como manipular elementos HTML, responder a clics, ocultar o mostrar contenido y crear efectos sencillos. Según su documentación, jQuery se usa para manipulación del documento, eventos, animaciones y peticiones Ajax.
Consejo
La función interactiva no necesita ser complicada. Es mejor una función sencilla que sí funcione, a una función compleja copiada de internet que no puedan explicar.
Git
Git permite guardar versiones del proyecto. Cada avance importante debe registrarse mediante un commit. No se trata solo de subir el proyecto al final, sino de mostrar el proceso de construcción.
El repositorio debe tener mínimo cinco commits y cada commit debe representar un avance real del proyecto.
Yo, por ejemplo; haré al menos seis commits, en las siguientes etapas:
- Estructura inicial,
- Páginas principales,
- Integración de Bootstrap,
- Estilos personalizados,
- Función interactiva con jQuery
- y ajustes finales con el README.
Así el repositorio no solo mostrará el resultado final, sino también el proceso de desarrollo.
Consejo
No hagan un solo commit llamado “proyecto terminado”. Eso no demuestra proceso. Lo correcto es guardar avances conforme van construyendo.
GitHub
Después de trabajar localmente, el proyecto debe subirse a GitHub. GitHub nos permite guardar el código en línea, revisar los cambios y compartir el proyecto.
Consejo
Revisen que en GitHub se vean los archivos principales: index.html, carpeta css, carpeta js, carpeta img y README.md.
Un proyecto sin README parece incompleto. El README debe ayudar a cualquier persona a entender qué hizo el alumno y cómo está construido el sitio.
GitHub Pages
Una vez que el proyecto está en GitHub, se debe publicar con GitHub Pages. GitHub Pages permite publicar un sitio web desde un repositorio. La documentación oficial indica que se puede configurar una fuente de publicación desde una rama del repositorio, como main.
Antes de entregar, deben revisar que el sitio funcione correctamente. No basta con que abra en la computadora del alumno; también debe abrir desde GitHub Pages.
Consejo
Si la página aparece en blanco, revisen que el archivo principal se llame exactamente index.html y que las rutas de CSS, JavaScript e imágenes estén bien escritas.
Conclusión
En conclusión, este proyecto no se evalúa únicamente por la apariencia final. Se evalúa el proceso completo: planeación, diseño, implementación, organización, control de versiones, publicación y exposición.
Un buen proyecto no es solamente el que se ve bien, sino el que está bien pensado, bien organizado y puede explicarse claramente.