Caso de estudio · Drupal y web estática
Cartel Urgente
Un archivo de carteles de denuncia hecho con Drupal 11 y publicado como web estática: cinco convocatorias, 111 carteles y 45 autores de 13 países.
- Proyecto
- Cartel Urgente
Carteles de denuncia - Alcance
- Arquitectura de información · Modelo de contenidos
Diseño y desarrollo Drupal - Tecnología
- Drupal 11 · Tome
Web estática - Sitio
- cartelurgente.org ↗
El reto
Convertir un proyecto que crecía a mano en un archivo que se ordena solo.
Cartel Urgente es un proyecto sin ánimo de lucro: cada convocatoria propone una urgencia —Palestina, Venezuela, Cuba, la guerra imperialista, la educación pública— y diseñadores de todo el mundo responden con carteles. En la web anterior cada edición se montaba a mano en seis o siete piezas sueltas: dos ediciones se quedaron sin galería y había menús y metadatos que apuntaban a la edición equivocada. Hacía falta un modelo que creciera sin trabajo extra y una web rápida, barata de alojar y difícil de romper.
Ordenar
Un único tipo de contenido para cada convocatoria: abrir una edición nueva es crear un solo contenido, y todo lo demás se coloca solo.
Mostrar
Un diseño de sala de exposición: los carteles mandan, el amarillo de la marca los enmarca y cada edición se reconoce por su inicial gigante.
Publicar
Drupal se queda en local y la web pública es HTML estático exportado con Tome: sin base de datos ni PHP en el servidor.
La web
Del archivo a la ficha en tres clics.
Portada, archivo con filtros, ficha de cada cartel con su autor y su edición, y la convocatoria abierta con su cuenta atrás. Todo enlazado con todo, para que cada cartel lleve a los demás.
La convocatoria abierta arriba, los últimos carteles en un carrusel, el manifiesto y las cinco ediciones.
Los 111 carteles con filtros por edición y por país, ordenados por fecha o por autor, sin recargar la página.
Cada cartel con sus datos, su licencia y la descarga en alta; enlaza a su autor y a su edición.
Todos los carteles de cada autor, agrupados por edición.
Las cinco convocatorias, cada una con su inicial gigante, su estado y sus carteles.
La edición abierta: bases, plazo, plantilla para descargar y una cuenta atrás.
Arquitectura de información
Tres piezas que hacen todo el trabajo.
Antes, cada edición era una colección de páginas sueltas. Ahora todo cuelga de tres piezas: la convocatoria, el cartel y el autor. Las páginas de cada edición, los listados, las migas de pan y los totales salen de esas relaciones. El país pasó a ser un dato del autor y desaparecieron un vocabulario, una vista y diez páginas que había que mantener a mano.
-
Convocatoria
- Número y nombre
- Plazo
- Llamada y bases
- Lema y logo
- Plantilla PDF
- 1 : N
-
Cartel
- Título e imagen
- Número
- Edición
- Licencia CC BY-NC-ND
- Descarga en alta
- N : 1
-
Autor
- Nombre
- País
- Biografía
El estado no se guarda, se calcula. Próxima, abierta o cerrada sale de las fechas de cada convocatoria, y la vigente es siempre la de número más alto. Mientras una convocatoria está abierta, los huecos de «Cartel pendiente» invitan a participar: «Tu cartel aquí».
El diseño
Una sala de exposición en amarillo y negro.
Exploramos seis direcciones antes de elegir «Sala»: fondos blanco y gris papel, el amarillo del sello y un pie negro, con el lenguaje gráfico del logotipo —la barra, las marcas de corte y de registro— repartido por toda la web. Una retícula de cuatro columnas en la que cada edición empieza con su inicial gigante, ajustada a la altura exacta de las tarjetas.
- Amarillo #FFE200
- Blanco
- Gris papel #ECECE8
- Negro del pie
Anton ganó a Staatliches por un detalle: en Staatliches el 1 se leía como una I, y en un archivo numerado eso no podía pasar.
En el móvil
Igual de cómoda con el pulgar.
Menú a pantalla completa con la convocatoria siempre a mano, un carrusel que se arrastra, filtros que se pulsan con el pulgar y fichas que se leen en una sola pantalla.
La convocatoria abierta, el carrusel de los últimos carteles y el menú con el aviso de la edición en curso.
Los filtros en pastillas: un toque y quedan solo los carteles de esa edición.
El cartel a pantalla completa y, debajo, sus datos y la descarga.
La obra de cada autor y, desde el menú, de vuelta a la convocatoria.
Qué, cómo y cuándo: las bases, leídas de arriba abajo.
Bajo el capó
Drupal para editar, HTML estático para publicar.
Drupal 11 vive en local y es donde se edita todo: convocatorias, carteles y autores. Para publicar, Tome recorre el sitio y lo exporta a HTML: 170 páginas que se suben tal cual al alojamiento. Sin base de datos ni PHP en el servidor no hay nada que actualizar ni que atacar, y la web se sirve rápido desde cualquier hosting.
Drupal 11 en local
Con DDEV. Tema propio «Sala» con 11 componentes SDC y dos módulos a medida.
drush tome:staticExportación
Tome genera cada página, imagen y archivo como HTML estático.
exportar.shRemate
Añade HTTPS, redirecciones, compresión y caché, la página 404 y corrige permisos.
Publicación
La carpeta se sube al servidor y la web anterior queda al lado, para volver atrás en un momento.
Vivo en el navegador
Los filtros del archivo y de autores, el estado de cada convocatoria y la cuenta atrás se resuelven con JavaScript propio, sin librerías.
Componentes
Cabecera, tarjeta, inicial, cifras…: 11 componentes de Drupal (SDC) y listados escritos en un módulo propio, sin Views.
Tarjetas para redes
Un módulo propio genera con Imagick la imagen para compartir de cada página: el logo de su edición sobre amarillo.
Sin enlaces rotos
78 redirecciones 301 desde las direcciones antiguas, migas de pan que siguen las relaciones del contenido y una 404 propia.
La portada completa
De arriba abajo, al ritmo de tu scroll
El estreno
Una web nueva, con su propio anuncio.
Para presentarla en redes hicimos un reel vertical con la propia web en movimiento: el recorrido se grabó fotograma a fotograma sobre la web real y se montó con HTML. Y, con todas las ediciones ya en su sitio, el archivo creció:
- 111carteles
67 - 45autores
28 - 13países
7 - 5ediciones, todas con su galería