Este proyecto es una iniciativa personal para modernizar la presencia digital de la Institución Educativa Municipal Emilio Cifuentes, un colegio público ubicado en Facatativá, Colombia. El rediseño surge tras un análisis del sitio institucional original, donde se identificaron problemas críticos de usabilidad, adaptación móvil y rendimiento. La solución está construida con HTML5 y CSS3 puros — sin frameworks ni dependencias externas — y actualmente se encuentra en fase MVP (Minimum Viable Product).Documentation Index
Fetch the complete documentation index at: https://mintlify.com/g4lvan/demo_page_colegio.github.io/llms.txt
Use this file to discover all available pages before exploring further.
¿Por qué se rediseñó?
Objetivos del proyecto
- Modernizar la interfaz del sitio web institucional con un lenguaje visual contemporáneo.
- Mejorar la experiencia de usuario (UX) para toda la comunidad educativa.
- Implementar un diseño completamente responsive adaptado a móviles, tablets, laptops y escritorio.
- Reorganizar la estructura de la información para que sea clara, accesible e intuitiva.
- Optimizar el rendimiento y los tiempos de carga eliminando dependencias innecesarias.
Antes vs Después
- Antes (sitio original)
- Después (rediseño)
El sitio original presentaba las siguientes deficiencias:
- Diseño basado en plantillas tradicionales sin identidad visual propia
- Baja jerarquía visual — contenido difícil de escanear
- Exceso de texto sin estructura clara ni separación visual
- Navegación poco intuitiva que dificultaba encontrar información
- Experiencia limitada o rota en dispositivos móviles
- Rendimiento general bajo con animaciones poco optimizadas
Tecnologías utilizadas
HTML5
Estructura semántica de todas las páginas del sitio. Se utilizan etiquetas modernas como
<header>, <main>, <section>, <article>, <nav> y <footer> para garantizar accesibilidad, SEO y mantenibilidad del código.CSS3
Estilos y diseño visual del sitio. Se emplean propiedades personalizadas (custom properties / variables CSS), Flexbox y CSS Grid para construir un layout responsive, coherente y fácilmente escalable sin depender de ningún framework externo.
Características del rediseño
Diseño moderno y limpio
Interfaz visual actualizada con tipografía Nunito, paleta de color institucional basada en verde primario (
#029642) y espaciado consistente definido mediante tokens CSS en :root.Navegación clara e intuitiva
Barra de navegación principal con acceso directo a las cinco secciones del sitio: Inicio, Nosotros, Noticias, Recursos y Contacto. Incluye buscador visual preparado para integración futura.
Layout responsive
El sitio se adapta a todos los tamaños de pantalla — móviles, tablets, laptops y escritorio — usando técnicas modernas de Flexbox y Grid, sin media queries innecesarias.
Mejor jerarquía visual
El contenido está organizado con encabezados claros, tarjetas de acceso rápido, secciones bien delimitadas y separación visual que facilita el escaneo rápido de la página.
Estructura HTML optimizada
Uso correcto de etiquetas semánticas, metadatos SEO completos, Open Graph para compartir en redes sociales, y atributos de accesibilidad (
alt, aria-label, lang).Demo en vivo
Puedes explorar el rediseño funcionando en producción directamente en el navegador:🔗 https://g4lvan.github.io/demo_page_colegio.github.io/El sitio está desplegado en GitHub Pages y no requiere ninguna instalación para visualizarse.