Trabajo / Front-end / Proyecto Djehuty · La web en React
Trece años llevando esta web, y ahora remaquetada en React
Proyecto 15 de 28 del archivo 06 de 08 en Desarrollo front-end Ver la disciplina completa ↗
Esta se recorre dentro del marco, y sólo dentro del marco
El contenido no es mío: es de una misión arqueológica que lleva veinte años excavando y publicando. Enseñar aquí mi trabajo de maquetación es una cosa; dejar suelta en internet una copia navegable de su web es otra distinta, y no me corresponde. Así que la reconstrucción no se abre fuera de esta ficha: si alguien llega a ella por un enlace directo, no arranca. A cambio, el marco de aquí abajo cambia de tamaño.
Escritorio o teléfono, sin salir de aquí
Trece años de trabajo que ya no están en internet
La web del Proyecto Djehuty es el archivo público de una excavación que empezó en 2002. Dentro hay el diario de campaña día a día, las fichas de cada persona del equipo, los resúmenes anuales, la guía de la tumba, los contextos geográfico, histórico y cultural, las publicaciones y la prensa. Nada de eso se puede reescribir ni resumir: es material científico y está firmado.
De esa web me encargué yo desde 2006 hasta 2019: la maquetación, las hojas de estilo, el JavaScript y el volcado de cada campaña según iba saliendo del yacimiento. La maquetación del PHP también fue mía, a cuatro manos con la persona que llevaba la parte de servidor: las plantillas se escribían entre los dos, y de ahí salen 1.356 ficheros y 121.420 líneas en las que la plantilla, la consulta y el texto acaban mezclados en el mismo archivo, con jQuery 1.11 y Magnific Popup encima.
Eso era lo normal en 2006 y siguió siéndolo trece años. El precio se ve ahora: mi trabajo no vive en ningún sitio, está repartido y repetido dentro de esos 1.356 ficheros, y no hay manera de enseñarlo sin levantar un servidor con PHP.
Y hay una razón más concreta. Desde 2019 la web la lleva otra persona y le ha cambiado el diseño: lo que hay hoy en línea ya no es lo que hice yo. Así que el encargo que me pongo tiene dos mitades. Una, volver a levantar aquella versión con herramientas de hoy, para que exista en algún sitio y se pueda enseñar. Otra, hacerlo en React, que es la parte que me interesa demostrar de mí ahora. Si al terminar alguien nota la diferencia con el original, está mal hecho.
Páginas de contenido
Extraídas del PHP a JSON, sin tocar una comaDías de diario
Dieciocho campañas, entrada a entradaFichas de equipo
Dieciocho años de gente en la excavaciónRutas de React
Una por cada.php?year=…&option=… del originalLa regla que ordena todo lo demás
El diseño no se toca, y menos siendo el único sitio donde queda. Las hojas de estilo son las que fui escribiendo durante esos trece años —867 líneas de common.css y view_gallerie.css— enlazadas sin modificar, y las tipografías, las mismas. Habría sido facilísimo aprovechar el viaje para retocar lo que hoy haría distinto, y por eso mismo no lo he hecho: esto no es un rediseño, es un archivo. Y como archivo sólo vale si no hay trampa.
Primero se saca el texto, y después se levanta
La reconstrucción son dos trabajos seguidos, y el orden importa: mientras el contenido siga dentro del PHP no hay nada que maquetar. Un guion de Node recorre los 1.356 ficheros, elimina la lógica, reescribe las rutas de imagen y de enlace y deja 1.269 fragmentos de HTML limpio en JSON. A partir de ahí, React sólo tiene que pintarlos.
El resultado son 1.260 líneas de componentes frente a las 121.420 de partida. No es magia: es que el 98 % de aquello era el mismo <header> repetido 1.356 veces.
01 · Un componente para el HTML heredado
El contenido extraído sigue siendo el marcado de 2019, y ese marcado esperaba que jQuery le montase cosas encima. Html.jsx —109 líneas— lo pinta y le devuelve exactamente lo que perdió: los enlaces internos los resuelve el router sin recargar, las galerías abren a pantalla completa, la miniatura de vídeo se sustituye por el <video> y el menú vertical se despliega en móvil.
Es la pieza que evita tener que reescribir 1.269 páginas a mano. Se toca una vez y arregla el sitio entero.
src/components · Html.jsx109 líneas · 4 comportamientos
02 · La galería, sin jQuery y con la misma hoja de estilo
El visor de imágenes original era Magnific Popup: 48 KB de plugin más los 96 KB de jQuery que necesitaba debajo. Lo sustituyen 72 líneas que generan el mismo marcado —las mismas clases mfp-— y por eso las estiliza view_gallerie.css sin cambiar una línea.
Además hace algo que el original no hacía: se cierra con Esc y se recorre con las flechas.
src/components · Lightbox.jsx144 KB de librería → 72 líneas
03 · Las direcciones viejas siguen significando lo mismo
Un archivo científico se cita, y lo que se cita son sus URL. Por eso el mapa de rutas no se inventó de cero: cada .php con sus parámetros tiene su equivalente exacto, y un traductor convierte los enlaces internos al vuelo mientras se extrae el contenido.
diario_de_excavacion_dia.php?year=2018&dia=02-24 es hoy /diario/2018/02-24, y los valores por omisión —campañas 2018, diario y equipo 2019, plano, egipto— son los que tenía el PHP.
scripts · php-utils.mjs38 rutas · valores por omisión heredados
04 · Responsive de verdad, porque el original ya lo era
La web de 2019 estaba maquetada para teléfono y lo estaba bien. Al no tocar el CSS, esa maquetación sigue viva: el menú se convierte en hamburguesa, la barra de años se reordena en cuatro columnas y las galerías pasan a una sola columna.
Es la parte que más me interesa enseñar del ejercicio, y la razón de que el marco de aquí abajo tenga un control de tamaño: no hay ninguna captura que demuestre que algo es responsive. O lo estrechas tú, o te lo estás creyendo.
common/css · common.css867 líneas originales, sin tocar
Y se ve con doble clic, sin levantar un servidor
Un <script type="module"> y un fetch() se descargan con las reglas de CORS, y al abrir un fichero desde el disco el navegador le da origen null a la página y bloquea los dos. Con el reparto habitual de Vite, el marco se queda en blanco. Así que el paquete se compila como script clásico y los 1.269 fragmentos se sirven como .js que llaman a una función global, en vez de como JSON que haya que pedir. Servido por HTTP se comporta igual; la diferencia es que así también funciona en local.
Cuatro gigas no caben en un portfolio
El material gráfico del sitio original pesa 4 GB: 17.231 fotografías, doce vídeos en tres formatos cada uno y 250 MB de PDF. Meter eso entero aquí sería absurdo, y dejarlo fuera convertiría la reconstrucción en una maqueta vacía. La decisión está tomada con números, no a ojo.
Y hay una cosa que no he arreglado a propósito: medio centenar de imágenes siguen sin cargar. Estaban rotas en el servidor original —el fichero no existe— y así se han quedado. Repararlas habría sido inventar contenido que nunca hubo.
Menos peso en imagen
17.231 JPG a WebP: de 1.653 MB a 357 MBDe vídeo descartado
Las pistas .ogv y .webm de repuesto, que hoy sobranDe PDF fuera
Sus enlaces lo dicen en vez de dar un 404De JavaScript comprimido
Todo el sitio, sin una sola librería de tercerosUn enlace roto se avisa; no se disimula
Los PDF que no viajan no se han quitado del texto: sus enlaces quedan marcados y, al pulsarlos, un aviso explica que no se incluyen en la demostración. Un enlace que lleva a la nada es peor que un enlace que dice adónde no lleva, y el visitante merece saber cuál de las dos cosas está viendo.
El sitio, funcionando
Aquí debajo está la web entera: baja al diario de cualquiera de los dieciocho años, abre una jornada, amplía una fotografía de la galería, cambia la campaña de idioma o entra en la guía de la tumba. Todo lo que se ve es contenido real del Proyecto Djehuty, servido desde React.
Y lo que de verdad hay que probar es el control de arriba a la derecha: cambia el marco a tamaño teléfono y mira cómo responde. No hay ningún escalado; se le está entregando un ancho distinto y el sitio se recoloca solo.
Los textos, las fotografías y los vídeos son del Proyecto Djehuty, la misión arqueológica hispano-egipcia que dirige José Manuel Galán desde el CSIC. Mío es el front-end —la web de 2006 a 2019 y esta remaquetación de 2026— y la parte del material cerámico en la que trabajé como una más del equipo. Esto no es la web del proyecto: la de verdad la lleva otra persona desde 2019 y hoy tiene otro diseño. Es mi versión, rehecha para poder enseñarla, y por eso no se abre fuera de esta página.
1.269 páginas · 17.230 imágenes · 224 KB de JavaScript · el marco es la única puerta
De dónde sale: de trece años y de un yacimiento
No llegué a esta web desde fuera. El Proyecto Djehuty es del CSIC, así que los trece años que llevé la web los trabajé para el proyecto y, por tanto, para el Consejo Superior de Investigaciones Científicas. Formé parte del Equipo Djehuty como experta en cerámica egipcia y siete de esos años estuve contratada como investigadora. Actualmente ya no formo parte del Equipo. Estuve en el yacimiento, lavé, dibujé y clasifiqué material, y de ahí salieron los informes de cerámica que firmé. Los dossieres anuales de campaña vienen del mismo sitio. Las dos piezas son diseño gráfico y editorial, y están en el archivo bajo esa disciplina.
Eso explica por qué la web fue mía durante trece años y no un encargo suelto: quien la actualizaba cada febrero era alguien que volvía de la campaña, y que el resto del año seguía en plantilla. Sé qué es un contexto, por qué el diario se ordena por jornadas y no por temas, y qué fotografía de un fragmento no se puede recortar. Al decidir qué se conserva y qué se descarta, eso pesa más que cualquier criterio técnico.
Volver sobre el propio trabajo es un ejercicio incómodo y muy útil. Lo que de verdad se aprende es cuánto de aquellos trece años era maquetar y cuánto era pelearse con el andamio. Al quitar el andamio quedan 1.260 líneas de componentes. Lo demás era repetición.
Y por eso está hecho en React y no en cualquier otra cosa. Esta ficha tiene que responder a dos preguntas a la vez: qué hice durante trece años —que ya no se puede ver en línea, porque el sitio tiene otro diseño desde 2019— y qué sé hacer ahora. Un pantallazo respondería a la primera y a la segunda no. Una maqueta de escaparate respondería a la segunda y a la primera tampoco. Rehacerlo entero, con su contenido real y su diseño intacto, responde a las dos, y esa es toda la razón de que exista.
Siguiente en Desarrollo front-end
My little baby
