MetalMente Arte: del archivo de un taller a un catálogo interactivo

CONTENIDO / PRODUCTO

Del archivo al catálogo

Piezas y procesos que se pueden descubrir, comparar y consultar.

Necesidad

Las fotos sueltas no explicaban la obra ni el proceso del taller.

Decisión de producto

Organicé trabajos por categoría, con fichas, IDs y rutas estables.

Resultado

12 trabajos y 25 fotografías forman un catálogo navegable.

Evidencia

Catálogo tipado con cuatro categorías y fichas por trabajo.

Ver implementación y evidencia

Tecnologías aplicadas en este track

• HTML5: Entrega el catálogo público como contenido estático y navegable.
• JavaScript: Coordina el visor, las galerías, el zoom y las acciones para compartir.
• TypeScript: Define contratos del catálogo, la experiencia y los borradores.

IDENTIDAD / INTERACCIÓN

Una identidad que responde

Hierro, vidrio y luz forman parte del recorrido.

Necesidad

La identidad del taller necesitaba sentirse en la interfaz.

Decisión de producto

Diseñé un ventanal con SVG y Canvas, sensible al puntero y al scroll.

Resultado

Una experiencia propia que respeta la preferencia de movimiento reducido.

Evidencia

Ventanal interactivo construido como componente independiente.

Ver implementación y evidencia

Tecnologías aplicadas en este track

• React: Compone el ventanal interactivo y la administración privada.
• TypeScript: Define contratos del catálogo, la experiencia y los borradores.
• SVG + Canvas: Construye vidrio, hierro y luz con gráficos vectoriales e interacción.

VISOR / ACCESIBILIDAD

El detalle sin recortes

Acercarse a la materia desde escritorio o celular.

Necesidad

Las texturas y etapas de restauración necesitaban una mirada cercana.

Decisión de producto

Implementé lupa, zoom, navegación táctil y controles de teclado.

Resultado

Cada pieza puede inspeccionarse conservando la proporción de la fotografía.

Evidencia

Visor con presentación adaptable a escritorio y móvil.

Ver implementación y evidencia

Tecnologías aplicadas en este track

• JavaScript: Coordina el visor, las galerías, el zoom y las acciones para compartir.
• HTML5: Entrega el catálogo público como contenido estático y navegable.

DISTRIBUCIÓN / SEO

Cada obra tiene su enlace

Compartir una pieza concreta con su imagen y contexto.

Necesidad

Un enlace genérico perdía la pieza que motivaba la consulta.

Decisión de producto

Generé páginas y tarjetas por trabajo y foto, con canonical y datos estructurados.

Resultado

38 páginas y portadas sociales listas para compartir.

Evidencia

Generador de HTML y Open Graph a partir del catálogo.

Ver implementación y evidencia

Tecnologías aplicadas en este track

• Vite: Compila las entradas públicas y administrativas por separado.
• Node.js + Sharp: Optimiza imágenes y genera páginas y portadas sociales por pieza.
• Firebase Hosting: Publica el catálogo y sus rutas estáticas.

ADMINISTRACIÓN / PERMISOS

Borrador no es producción

Editar con control sobre lo que termina publicado.

Necesidad

El catálogo debía actualizarse sin publicar cambios por accidente.

Decisión de producto

Separé el panel privado, los borradores y la publicación; agregué control de conflictos.

Resultado

El editor prepara contenido protegido antes de incorporarlo al sitio público.

Evidencia

Google Auth, reglas por propietario y revisión transaccional de borradores.

Ver implementación y evidencia

Tecnologías aplicadas en este track

• Firebase Auth: Identifica al editor mediante Google en el panel privado.
• Cloud Firestore: Protege los borradores con reglas y revisión transaccional.
• React: Compone el ventanal interactivo y la administración privada.

CALIDAD / PUBLICACIÓN

Publicar con evidencia

Comprobar rutas, contenido y permisos antes de publicar.

Necesidad

Los cambios podían romper enlaces o filtrar referencias privadas.

Decisión de producto

Sumé validadores de catálogo y SEO, y pruebas aisladas de administración.

Resultado

El build rechaza borradores y recursos privados en el catálogo público.

Evidencia

Validación de snapshot público y pruebas con emulador.

Ver implementación y evidencia

Tecnologías aplicadas en este track

• TypeScript: Define contratos del catálogo, la experiencia y los borradores.
• Playwright: Comprueba recorridos y permisos con pruebas aisladas.
• Vite: Compila las entradas públicas y administrativas por separado.

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

Cielofinal

La música y la historia de una banda, reunidas en un archivo digital navegable y compartible.

Dirección visual · UX · Frontend · Contenido · Spotify · Administración · SEO