manusaurio / taller5web Goto Github PK

En la vista "móvil", la selección de obras se realiza con un menú dropdown, que actualmente es un conjunto de <option...> en <select>:

Su apariencia depende del sistema operativo en el que se vea. El diseño de referencia, al que habría que seguir, lo muestra de esta forma:

El trabajo consiste en implementar eso teniendo en cuenta además al script de home que hace uso del evento 'change' de select y otras cosas:

No hay referencia de diseño de cómo debería verse el menú desplegado.

Corresponde al partial en partials/obra/encabezado.html.

La navegación en la vista de obra debería tener el nombre de la persona en un patrón que se repite en múltiples filas, cada una con un offset hacia la derecha:

La naturaleza del patrón hacía que no fuese nada sencillo de implementar sólo con CSS (asumo que de hecho es imposible de hacerlo sólo con CSS, aún empleando las capacidades de SVG, porque no hay forma de computar el ancho de un texto).

Por lo pronto he escrito un script de shell que recibe un nombre y genera un patrón apropiado. Es un borrador, pero la parte más importante de la lógica funciona (si se tiene instalada la fuente dcc-ash y las aplicaciones de ImageMagick):

#!/bin/sh

if [ -z "$1" ]; then
    echo 'Falta especificar el nombre:'
    echo "$0 [NOMBRE]"
    exit 1
fi

NOMBRE="${*^^}"
CORRIMIENTO_DERECHA=50
ESPACIADO_NOMBRE=50
FILAS=7
FUENTE_TAM=120

magick -background none -fill 'rgba(255, 255, 255, 0.5)' -font 'dcc-ash' -pointsize $FUENTE_TAM "label:$NOMBRE" salida.png

ANCHO_ORIGINAL=$(identify -format %w salida.png)
FILA_OFFSET=$((ANCHO_ORIGINAL + ESPACIADO_NOMBRE))

magick salida.png -background none -extent ${FILA_OFFSET}x$(identify -format %h salida.png) salida.png

CLONAR_FILAS_PARAMS=''
for ((i = 1; i < FILAS; i++)); do
    CLONAR_FILAS_PARAMS+=" \( +clone -background none -roll +$CORRIMIENTO_DERECHA+0 \)"
done

printf '%s\0' "${CLONAR_FILAS_PARAMS}" | xargs -0 -I {} sh -c 'magick salida.png {} -append salida.png'

magick salida.png \
    \( +clone -background none +repage -geometry +$FILA_OFFSET+0 \) -composite \
    \( +clone -background none +repage -geometry -$FILA_OFFSET+0 \) -composite \
    salida.png

mv salida.png nav-fondo-nombre.png

Resultado de llamarlo con el nombre Manuel Ignacio Pérez Alcolea (generado con color rojo para que sea visible en cualquier tema de GitHub):

O simplemente Juan:

De esta forma pueden generarse rápida y adecuadamente, sin exceder en ancho más de lo necesario: la repetición puede continuarse con background-repeat en CSS.

Para utilizarlo se podría tal vez usar otro script en shell, o sino algo como Python porque tomar los nombres de los index.md es algo más complejo (por ej. usando pathlib.Path y un glob de content/obra/**/index.md, y luego para obtener el nombre de la persona:

contenido = ''

with index_md_path.open(encoding='utf-8') as archivo:
    next(línea for línea in archivo if línea.startswith('---'))

    for línea in archivo:
        if línea.startswith('---'):
            break

        contenido += línea

artista = yaml.safe_load(contenido)['artist']

Al realizar un build con hugo, muchas imágenes y archivos de texto son leídos y procesados para mostrarse en el layout. Sus originales no son usados directamente como recursos del sitio, pero son copiados igual a los directorios del build.

Hugo provee algunas herramientas para prevenir esto. me temo que va a ser necesario mover los archivos a procesar a data/ y reescribir parte de la lógica de los layouts, porque las configuraciones del link anterior hacen que los archivos sean ignorados incluso para procesarlos.

Este issue depende de que estén listas las 40 obras (o al menos, que la imagen principal de ellas para sus encabezados sean provistas).

Actualmente, las obras listadas en el home se muestran como estas tarjetas:

Cada una de estas tarjetas son 5 "capas", sin contar el texto:

• Una pequeña foto de la obra.
• Un gradiente, proveído desde CSS con background-image: linear-gradient(...); y mix-blend-mode: darken; .
• Una imagen de trama de círculos concéntricos, con mix-blend-mode: overlay;.
• Una imagen de textura de papel negro.
• El logo de Artimañas.

En ciertos dispositivos lentos/en ahorro de energía, el renderizado se vuelve notablemente lento cuando esta zona está visible en el viewport, con glsl::textureLinearUnpackedRGBA8 presente la mayor parte del tiempo en el stack según el profiler de Firefox.

Cuando estén todas las obras listas, sería muy conveniente reemplazar el layout de esta parte para tener cuanto mucho 3 imágenes, y sin blending modes específicos:

• Recorte de foto de obra, con efectos de color y textura de círculos ya aplicados. La resolución puede ser la misma que la actual.
• Imagen de textura de papel negro, que puede ser la misma que la actual.
• Logo de artimañas.

Las dos últimas podrían combinarse en una, sola también.

Su partial es partials/footer.html.

Probablemente lo más fácil de implementar de todo el sitio.

Aún no hay ningún partial para esto.

En el diseño de referencia, tiene esta apariencia:

Podría emplearse la misma estrategia que con el "recorte" de la obra siguiente en la navegación de la vista de obra, con un path de SVG invisible referenciado desde CSS con clip-path: url(...);, usando su ID como URL:

Aunque tal vez haya alguna forma más sencilla.

Esta es la parte que precede al footer, donde se muestra a el o la artista (supongo que la persona que siga a la actual, aunque en el diseño se muestre la misma) y una imagen de su obra. Su partial es el de partials/obra/navegacion.html, que por ahora sólo describe la lógica para mostrar un texto con la siguiente persona/obra.

Probablemente sea útil usar la propiedad clip-path de CSS para hacer una especie de máscara de recorte para la foto de la obra.

No sé si es un bug de fontconfig en Linux o qué, pero las fuentes de Hit me, punk! son listadas correctamente en los programas pero no renderizadas (se muestran con alguna fuente serif por defecto en su lugar), y en el caso de los navegadores nunca funcionaban sin importar cómo fuesen proveídas por CSS.

Parece ser un problema con sus nombres:

>>> import fontforge
>>> font = fontforge.open("hitmepunk.ttf")
>>> print(f"{font.familyname=}", f"{font.fullname=}", f"{font.fontname=}", sep='\n')
font.familyname='Hit me, punk! 03'
font.fullname='Hit me, punk! 03'
font.fontname='Hitme,punk!03'

Si cambio los nombres a algo más simple como "hitmepunk" y realizo un font.generate(...), las fuentes sí funcionan correctamente con la versión generada. No es así si genero una fuente sin cambiarle el nombre.

Esta fuente debería ser usada en cada título de los elementos de la lista de obras, que se presentan así en el diseño:

La parte de video + descripción + investigación. Corresponde al partial de layouts/partials/obra/obra-e-investigacion.html.

Esta parte es algo complicada.

El partial está en partials/home/header.html.

En el diseño para el breakpoint de resolución más pequeña, la barra es cambiada por un botón de hamburguesa (sin especificar cómo se ve). La verdad, no creo que haga falta eso y el patrón de diseño me parecesúper extraño porque nunca vi un menú hamburguesa con opciones que al pulsarlas lleven a anchors de la propia página. Tampoco sé qué iría en "contacto".

Probablemente la parte más complicada de todo el sitio, dependiendo de cómo se implemente (y de qué diseño realmente se siga, porque no está totalmente claro). Su partial es partials/home/obras.html.

Comparto lo dicho por la coordinadora de maquetado:

Lo que se podría hacer como opción es dejar la elección por categorías sin que el usuario tenga que scrollear; es decir, que si en una categoría hay 7 obras que las mismas se desplieguen de forma vertical.

Es decir, no implementen el scroll (al menos no el vertical!). El horizontal puede ser, pero no me parece necesario.

Los dos botones de Volver a las obras (el acá mostrado y su versión alternativa) deberían tener otro color. Seguramente la diferencia de colores que se ve en el diseño original fue un accidente.

No hay consistencia en cuál es exactamente el "color magenta" que debe utilizarse, así que establezcamos que es #E5098F (de paso podría declararse como una variable en :root desde main.css).

Los archivos son:

• obra-siguiente-volver-mob.webp
• obra-siguiente-volver.webp

Deberían preservar ese recorte y resolución.

es necesario crear la base del proyecto con Hugo