Proyectos · Caso

Institut Francesc Ferrer i Guàrdia, un instituto público que cambia de tecnología sin perder su archivo

Diseño webDesarrollo WordPressMigración desde DrupalCentro educativo 2023
Institut Francesc Ferrer i Guàrdia, un instituto público que cambia de tecnología sin perder su archivo
iesffg.cat · 119 páginas · de Drupal a WordPress en 2023
El encargo

El Institut Francesc Ferrer i Guàrdia es un centro público de Sant Joan Despí que funciona desde el curso 1977/78: casi cincuenta años y tres edificios. Da ESO, bachillerato, tres familias de formación profesional y programas de inserción, y se define como instituto plurilingüe e internacionalizador. Su web llevaba once años en Drupal, con un subtema hecho a medida para el centro.

Un instituto no tiene un público: tiene dos. Las familias buscan el aviso de los libros o del comedor, y el alumnado busca entrar en Moodle antes de que suene el timbre; en medio hay once apartados de información —estudios, secretaría, departamentos, proyectos— que nadie debería tener que recorrer para encontrar una fecha.

Qué hicimos

Montamos la portada como el tablón de la entrada. Primero los trámites abiertos —plazas vacantes, cola virtual—, después los accesos que se usan cada día (XTEC, Moodle, iEduca, correo, intranet) y solo entonces la presentación del centro. Debajo, los destacados del curso —libros, armarios, comedor— en cinco tarjetas iguales: foto, titular y botón.

Pasamos once años de Drupal a WordPress sin perder una fecha. 119 páginas, 284 entradas y 2.122 archivos de mediateca, con sus fechas y sus rutas originales: hay documentos que siguen marcando julio de 2014. No se reescribió el centro desde cero, se mudó entero.

Ordenamos diez secciones y tres niveles de menú. Institut, Estudis, Secretaria, Actualitat, Projectes, Departaments, Coordinació TIC, AFA, Empresa y Contacte. Cada etapa tiene su tablón en secretaría, los documentos de centro van en PDF, los planos van por planta y hay un buzón propio para las empresas que acogen prácticas.

Un solo rojo, el del escudo. #DA251C manda en la cabecera, los botones, los enlaces y el apartado activo del menú; el resto es gris de papel, esquinas casi rectas y un cuerpo de 16/28 pensado para leer textos largos. En el pie, los sellos obligatorios del Departament, el FEDER y el Plan de Recuperación.

La clave

La web de un instituto no se juzga por la portada. Se juzga por si una familia encuentra el aviso de los armarios sin llamar por teléfono. Por eso lo primero de la pantalla no es quiénes somos, sino qué está abierto hoy: los trámites con caducidad arriba, y la historia del centro —que es larga y buena— una pantalla más abajo.

119
páginas publicadas
284
entradas de actualidad
2.122
archivos migrados con su fecha original
1977
curso en que el instituto abrió sus puertas
13
programas y proyectos vigentes con página propia
10
secciones de menú que ordenan toda la información
Qué hay debajo

El sistema visual es corto a propósito: contenedor de 1140 px, fondo de página #F7F7F7, pie #EFEFEF y un cuerpo de 16 px con interlineado de 28 —relación 1,75— porque aquí se leen textos largos: un proyecto educativo, las vías de acceso a un ciclo, el calendario del curso. Los titulares de bloque van a 24 px en negrita y las esquinas son casi rectas: 1 px en los botones de aviso, 6 px en los de trámite. El rojo #DA251C aparece 265 veces y es lo único que decide jerarquía.

La parte que no se ve en ninguna captura es la migración. La API del sitio todavía devuelve 2.122 archivos fechados en 2014 con sus rutas de Drupal intactas y páginas creadas el 28 de julio de 2014. Conservar fechas y direcciones no es una manía de archivero: es lo que hace que un enlace de hace diez años en un correo del AMPA siga funcionando.

Lo demás es fontanería con el ecosistema de la Generalitat: trece accesos directos a XTEC, Moodle, iEduca, SAGA, Esfera, Qbid y el resto de plataformas donde vive de verdad la gestión; tablones incrustados por etapa en secretaría; planos del centro por planta en PDF; y el bloque de financiación europea con la referencia del programa, que en un centro público no es decoración sino obligación.

Cómo fue
01El encargoUn instituto público con once años de Drupal detrás
02La decisiónPrimero los avisos abiertos, después la presentación
03La migración119 páginas, 284 entradas y 2.122 archivos con su fecha
04La web2023: diez secciones, un rojo y las plataformas a un clic
Galería · el proyecto en imágenes (clica para ampliar)
Lo urgente arriba: plazas vacantes y cola virtual. Formar ciudadanos responsables, solidarios y competentes. Tres familias profesionales, FP Dual y Erasmus. Las familias consultan el instituto desde el móvil. De los 12 a los 16 años, explicado sin jerga. Doscientas ochenta y cuatro entradas, ordenables por fecha. Libros, armarios y comedor: lo que se busca en septiembre. Cada trámite en su columna, dentro de un tablero compartido.
Concepto y sistema · moodboard, tipografía, componentes y composición
La decisión de partida: una web que funciona como el tablón de la entrada del instituto. Un solo rojo, esquinas casi rectas y avisos que caben en una tarjeta. Tres franjas fijas arriba y, debajo, tres columnas: información, actualidad y atajos. Sesenta páginas en dos niveles: el instituto entero cabe en un menú sin terceros niveles. Un tercio de la portada es un solo bloque: información, actualidad y atajos.
Así diseñamos todos los casos →
"Té una història de gairebé 50 anys, ja que funciona des del curs 1977/78."iesffg.cat
Créditos · quién ha disparado
Vídeo de bienvenidaPau Martínez Bernadas

¿Quieres un resultado así para tu proyecto?

Siguiente proyecto

Sandra Dachs, una web que se aparta para que se vea la obra