Escuela Militar del Libertador Bernardo O'Higgins

Propuesta de rediseño del sitio web institucional

Un diagnóstico del sitio actual y tres direcciones de diseño completas, navegables y responsivas, construidas con el contenido y las fotografías reales de la Escuela.

Preparado por Roka Digital Fecha Octubre 2026 Estado Propuesta — no es el sitio oficial

Diagnóstico

Qué encontramos en escuelamilitar.cl

Medimos la portada en un navegador real. El sitio funciona, pero su base técnica y visual corresponde a una generación anterior de la web: pesa demasiado, tarda demasiado y no se ve como lo que representa.

~38 MBdescarga la portada (lo recomendado para una portada moderna es bajo 2 MB)
250peticiones de red en una sola página
~21 shasta terminar de cargar la portada
11dominios de terceros, incluidos rastreadores publicitarios

Medición hecha el 2 de octubre de 2026 sobre la portada, en Chrome y con conexión de banda ancha a través de VPN. Los tiempos varían según la red; el peso y el número de peticiones no.

Fotografía

Las mismas fotos, a la altura de la institución

Recuperamos y reconstruimos las fotografías del propio sitio para que puedan usarse a pantalla completa. Mueve el control para comparar. Para el sitio definitivo recomendamos, además, una sesión fotográfica propia.

Fotografía original de baja resolución La misma fotografía reconstruida en alta resolución Original del sitio Reconstruida

Cadetes frente a la Catedral de Santiago — original 640 × 480 px, reconstruida a 1536 × 1024 px.

Escuadrón montado, original de baja resolución Escuadrón montado reconstruido en alta resolución Original del sitio Reconstruida

Escuadrón Montado en la Gran Parada Militar — original 640 × 426 px, reconstruida a 1536 × 1024 px.

Tres caminos

Tres propuestas, el mismo contenido

Cada una es una portada completa y navegable, con el contenido real de la Escuela. Ábrelas en el computador y en el teléfono: las tres se adaptan.

Los colores institucionales

Son los del logotipo: amarillo #FFD900, negro, blanco, el rojo ladrillo de la torre y el plata del cóndor. Son fuertes, así que las tres propuestas los tratan distinto: C los usa tal cual, A baja el amarillo a un dorado sobre azul profundo y B los reserva sólo para el logotipo.

El video, bien cargado

La propuesta C usa el video de la campaña de admisión. El original pesa 24,5 MB; aquí va en 2,3 MB. Lo primero que se ve es una imagen de 53 KB, y el video entra después, sin sonido y en silencio. No se descarga en teléfonos, ni con ahorro de datos, ni si la persona pidió reducir las animaciones. Así se ve el movimiento sin pagar el precio que paga hoy la portada.

Pensado para el teléfono

Las cuatro páginas se probaron en pantalla de teléfono. La primera pantalla pesa cerca de 200 KB y la página entera, con todas las fotos, se queda bajo 1,6 MB — la portada actual descarga 38 MB. Las imágenes van en formato WebP y en el tamaño que pide cada pantalla, el menú y el comparador funcionan con el pulgar, no hay desplazamiento lateral y se respeta el ahorro de datos y la reducción de animaciones.

El proyecto

Cómo lo haríamos

ETAPA 1

Definición

Elección de la dirección de diseño, mapa de contenidos y entrevistas con las áreas que publican.

ETAPA 2

Diseño

Sistema visual completo: portada, páginas internas, noticias, admisión, galerías y versión móvil.

ETAPA 3

Construcción

Desarrollo del sitio y del gestor de contenidos, migración de noticias e historia, y sesión fotográfica.

ETAPA 4

Puesta en marcha

Capacitación al equipo, pruebas de accesibilidad y rendimiento, y acompañamiento posterior.

Diseño

  • Identidad digital y escudo vectorizado
  • Sistema tipográfico y de color
  • Diseño responsivo de todas las plantillas
  • Biblioteca de componentes reutilizables

Tecnología

  • Gestor de contenidos simple para el equipo
  • Carga por debajo de 2 segundos
  • Video de portada optimizado: de 24,5 MB a 2,3 MB
  • Imágenes WebP servidas por tamaño de pantalla
  • Accesibilidad WCAG 2.2 AA
  • Buscador interno y estructura para Google

Contenido

  • Fotografía profesional de la Escuela
  • Reconstrucción del archivo fotográfico
  • Reescritura de admisión y perfil de egreso
  • Versión en inglés para vínculos internacionales