Cine Uruguayo
AcadémicoUna cinemateca del cine uruguayo. Veintiséis películas entre 1994 y 2024, cada una con su afiche, su fotograma, su ficha técnica y su sinopsis, en un sitio que se puede recorrer por año, buscando, o dejándose llevar.
La premisa está escrita en la propia página: es un cine que existe y casi no se ve. Por eso el sitio no abre con un buscador sino con un fotograma a pantalla completa, y el catálogo muestra los afiches en grande. Lo que se pone al frente es la obra, no la interfaz.
Está hecho sin frameworks: HTML, CSS y JavaScript escritos a mano. Todo el contenido es un solo arreglo de objetos, y de ahí salen las cinco listas del sitio. Cambiar un dato en esa lista cambia el sitio entero.
- FORMATO
- Website
- ESTADO
- Completed
- PROPÓSITO
- Academic
- DIMENSIÓN
- Single Production
- DISCIPLINAS
- Web Design · UI Design/UX Design · Interactive Design
- TÉCNICAS
- Coding · Scripting
- SOFTWARE
- HTML/CSS/JAVASCRIPT · Figma
El recorrido
El inicio
Abre con un fotograma a pantalla completa y una frase: "si necesitás nuestro cine". El fondo no es fijo — cada diez segundos cambia por otro cuadro sorteado del catálogo, así que la portada no es la misma dos veces.
Más abajo, cuatro películas elegidas al azar entre las veintiséis. No es una selección editorial: es una invitación a entrar por cualquier lado, que es como uno entra a una cinemateca.
Y la línea de tiempo, año por año desde 1994. Cada año se despliega y muestra qué se estrenó. Los años sin estreno también están en la lista: el hueco es parte de lo que se cuenta.
El catálogo
Las veintiséis en grilla, con el afiche original de cada una. Arriba, tres formas de encontrar algo: buscar por texto, filtrar por año y ordenar. Los tres trabajan sobre la misma lista y se combinan entre sí.
El buscador filtra mientras se escribe: sin botón, sin recargar y sin pedirle nada a ningún servidor. Escribiendo "whisky" queda una sola película en pantalla.
La ficha
Cada película tiene su página: el fotograma de fondo a pantalla completa y los datos encima —año, duración, dirección, género y sinopsis—. No hay un archivo por película: es una sola página que lee el id de la dirección y se arma con ese dato.
Al pie, otras películas de la misma década, en un carrusel. Esa relación no está escrita a mano en ningún lado: se calcula agrupando los años de a diez.
Sugerir una película
El catálogo se sabe incompleto, así que hay un formulario para proponer lo que falta. Valida campo por campo mientras se escribe: el nombre no acepta números, el año tiene que ser un año, la duración tiene que ser un número. El campo que no pasa se marca en rojo en el momento, no al enviar.
Y confirma con un modal, que se cierra con la cruz o clickeando afuera.
Una sola lista
Las cinco listas del sitio salen del mismo arreglo de veintiséis objetos.
Los datos, en un archivo
Sin base de datos y sin backend.
- afiche
- fotograma
- ficha
- sinopsis
- año
Cada película es un objeto con once campos y las veintiséis viven en un archivo de JavaScript que se carga con el resto de la página. Para un catálogo cerrado eso alcanza, y de paso saca del medio el único lugar donde algo podría fallar: no hay servidor al que pedirle nada.
Una función, cuatro formas
Los recomendados, la línea de tiempo, el catálogo y los relacionados.
- recomendados
- línea de tiempo
- catálogo
- relacionados
Las cuatro listas las dibuja la misma función: recibe el arreglo, el contenedor y un tipo, y arma el HTML que corresponde. Escribir cuatro recorridos habría sido más rápido y más caro: cambiar cómo se ve una tarjeta habría que hacerlo en cuatro lados, y el día que uno se olvida, una lista queda distinta.
El estado vive en la dirección
Una sola página de ficha para las veintiséis películas.
- id
- sin ruteo
- compartible
La ficha lee el id de la URL y se arma con él. Es lo que hace que el link a una película se pueda mandar por mensaje y siga funcionando del otro lado, sin ninguna librería de ruteo y sin generar veintiséis archivos que después habría que mantener.
Helvetica y una serif
Lo que se opera y lo que se lee, separados por la tipografía.
- Helvetica
- serif
- negro
- blanco
- rojo
Siete cortes de Helvetica para todo lo que se usa —menú, filtros, formulario— y una serif para los títulos de las películas. La paleta es blanco, negro y un solo rojo, que aparece únicamente para marcar dónde estás: el ítem activo del menú y el año de cada ficha.