Cielofinal: música e historia en un archivo digital con memoria

MEMORIA / CONTENIDO

De material disperso a archivo

Música, portadas y fuentes dentro de una misma lectura.

Necesidad

El legado estaba repartido entre imágenes, canciones y recuerdos.

Decisión de producto

Modelé álbumes, piezas, momentos y personas con relaciones y URLs propias.

Resultado

6 ediciones y 61 entradas de repertorio recorren 18 páginas públicas.

Evidencia

Contenido estructurado y generación de páginas por entidad.

Ver implementación y evidencia

Tecnologías aplicadas en este track

• React: Compone el archivo editorial y el reproductor interactivo.
• TypeScript: Modela álbumes, piezas, momentos y personas con contratos explícitos.
• React Router: Asigna una URL a cada entidad del archivo.

MÚSICA / INTERACCIÓN

Un disco que se toca y escucha

Explorar el archivo desde un vinilo interactivo.

Necesidad

El recorrido musical necesitaba algo más que una lista de enlaces.

Decisión de producto

Conecté un vinilo arrastrable y controles accesibles al reproductor oficial de Spotify.

Resultado

El visitante inicia, pausa y recorre la música mediante acciones explícitas.

Evidencia

Interacción con inercia y teclado conectada a Spotify iFrame API.

Ver implementación y evidencia

Tecnologías aplicadas en este track

• React: Compone el archivo editorial y el reproductor interactivo.
• Spotify: Integra el reproductor oficial mediante su iFrame API y controles por gesto.
• SVG: Conserva los signos reconstruidos y las capas visuales del archivo.

EDICIÓN / TRAZABILIDAD

Historia con fuentes y matices

Preservar la memoria sin convertir dudas en hechos.

Necesidad

Fechas y atribuciones no siempre coincidían entre las fuentes.

Decisión de producto

Separé grabación, edición y publicación digital, conservando matices y pendientes.

Resultado

El archivo explica su contexto sin presentar una formación histórica como actual.

Evidencia

Fuentes y criterios editoriales documentados junto al contenido.

Ver implementación y evidencia

Tecnologías aplicadas en este track

• TypeScript: Modela álbumes, piezas, momentos y personas con contratos explícitos.
• React Router: Asigna una URL a cada entidad del archivo.

ADMINISTRACIÓN / CONTINUIDAD

Editar sin romper lo publicado

Fichas administrables y límites de edición explícitos.

Necesidad

Actualizar información básica no debía requerir editar código cada vez.

Decisión de producto

Incorporé Google Auth, borradores y control transaccional para las fichas administrables.

Resultado

La edición distingue contenido guardado, publicado y pendiente de recompilar.

Evidencia

Administración parcial con protección ante conflictos y sin borrado definitivo.

Ver implementación y evidencia

Tecnologías aplicadas en este track

• Firebase Auth: Identifica a los editores autorizados mediante Google.
• Cloud Firestore: Guarda fichas y borradores con control de conflictos.
• React: Compone el archivo editorial y el reproductor interactivo.

DISTRIBUCIÓN / SEO

Cada obra tiene su dirección

Una URL y una portada para compartir cada disco.

Necesidad

Compartir el inicio del sitio perdía el álbum que se quería mostrar.

Decisión de producto

Generé HTML por ruta, metadata, Open Graph y acciones de compartir.

Resultado

18 páginas estáticas y 7 tarjetas sociales presentan el archivo y sus discos.

Evidencia

Prerender, sitemap y portadas de 1200 × 630 declarados en el proyecto.

Ver implementación y evidencia

Tecnologías aplicadas en este track

• Node.js + Sharp: Genera HTML por ruta y tarjetas sociales optimizadas.
• Web Share: Comparte la URL de cada obra desde dispositivos compatibles.
• Firebase Hosting: Sirve el archivo público con rutas y páginas de error reales.

IDENTIDAD / PRESERVACIÓN

Reconstruir identidad sin inventarla

El diseño parte del material histórico recibido.

Necesidad

Las portadas y signos necesitaban continuidad en una nueva superficie digital.

Decisión de producto

Reconstruí recursos vectoriales y conservé su procedencia junto a los originales.

Resultado

Una identidad editorial propia del archivo, con movimiento reducido disponible.

Evidencia

Manifiesto de recursos, monograma reconstruido y portadas versionadas.

Ver implementación y evidencia

Tecnologías aplicadas en este track

• SVG: Conserva los signos reconstruidos y las capas visuales del archivo.
• React: Compone el archivo editorial y el reproductor interactivo.
• Node.js + Sharp: Genera HTML por ruta y tarjetas sociales optimizadas.

AVVIVO

Sistema que muestra actividad, conecta actores, aplica reglas y registra eventos.

Producto · UX · Frontend · Backend · Datos · Cloud · Operación

CATÁLOGO AYE

Una fuente externa convertida en una experiencia comercial administrable, compartible y preparada para móvil.

Importación · Catálogo · Checkout humano · Administración · SEO · PWA

RISE DIFUSIÓN

Servicios musicales, obra administrable e identidad pública dentro de una presencia digital independiente.

Producto · Identidad · Copy · Experiencia · Administración · SEO

HEMBRA

Una marca artesanal convertida en tienda, operación administrable y sistema de universos visuales.

Marca · Catálogo · Comercio · Administración · Media · QA

ANTO GRISPO

Una obra recuperada y convertida en portfolio narrativo, accesible y autoadministrable.

Recuperación · Narrativa · Identidad · Portfolio · Administración · Publicación

MetalMente Arte

El archivo de un taller, convertido en un catálogo interactivo de herrería artística y restauraciones.

Producto · UX/UI · Frontend · Contenido · Administración · SEO técnico