Arpilleristas en Chile ¿Cómo un entorno digital da cuenta de dinámicas no digitales en comunidades artesanales?
| Título | Proyecto de título - Angelica Andueza |
|---|---|
| Tipo de Proyecto | Proyecto de Titulación |
| Período | 2025-2026 |
| Del Curso | Interacción Material Territorial 2° semestre 2025 |
| Carreras | Diseño |
| Alumno(s) | Angelica Andueza |
| Profesor | Daniela Salgado, Leonardo Aravena |
Investigación
Investigación y análisis de plataformas de archivos históricos
Considerar que hay plataformas de base de datos (que recopilan archivos externos) y otras que presentan los archivos listos (en el mismo sitio) para descargar.
Archivo Nacional Histórico de Chile (ANH)
Empieza presentando su página y ejemplificando sus densidades de archivos (contextualiza).
Se presentan los siguientes botones:
- Catálogos en línea
- Guías de fondos documentales
- Cuadros sinópticos de fondos
- Instrumentos de descripción en sala
- Sitios personales
- “Nuestro proyecto”
- Colecciones digitales
- Otros mini sitios
Observaciones:
- Presentan un resumen de cada elemento
- Tienen archivos en venta, otros gratis
- No hay seguimiento de diseño en las distintas interfaces
- Tiene opción de escuchar textos!!
Cultura Digital UDP (Universidad Diego Portales)
Este sitio no tiene presentación ni resumen. Tiene una barra de informaciones en el margen superior.
Se divide en 6 grandes categorías:
Fotografías
- Colecciones
- Categorías
- Tags
(Presentan imágenes y sobre éstas una barra con las 3 categorías nombradas anteriormente, con palabras claves, facilitando así la búsqueda de archivos)
Documentos
- Colección de Extractos de Filiación y Antecedentes penales
- Colección Enrique Lim
- Fondo diario La Nación
- La Nación
- Colección Patricio Silva
- Manuscritos
- Planos
- Revistas
(Contextualizan cada archivo con una imagen, nombre y fecha. El cursor al pasar sobre estos hace que la imagen se oscurezca y crezca)
Videos
- Conferencias
- Documentales
- Exposiciones
Son videos de Youtube pero se pueden visualizar desde la misma página (como widget de la WIKI).
La Nación
- Filtros por año y mes (menú desplegable)
Presentan los archivos ordenados por día, con una imagen grande de la portada. Dividen los archivos en 4 columnas.
Publicaciones
(Es lo mismo que “Documentos”)
Podcast
- Presentan todos los podcasts de manera desordenada, no se pueden filtrar ni buscar.
(Se puede escuchar en el mismo sitio web)
Archivo General de la Nación (Memórica)
Página del Archivo Nacional Mexicano
Es una página muy interactiva, apenas se abre presenta un video simple y luego permite buscar información.
Haciendo un poco de scroll aparecen las siguientes categorías;
Novedades
Es un carrusel con una gran imagen que resume el título.
- Exposiciones
- Micro sitios
- Colecciones
- Destacado
- Infografía
- Colaboradores
- Sección
Las secciones, al seleccionarlas, abren una página donde presentan más botones. Depende del tema si hay PDF, videos, imágenes, etcétera.
Imperdibles
También es un carrusel pero con botones (imágenes) que aumenta tamaño el del medio. (Se asemejan a las opciones “novedades” pero más específico. Incluye materialidad, para niños, audiovisuales.
Derecho a la memoria
Son tres botones con un fondo, cada imagen tiene su estilo de diseño.
- Memoria en lo femenino
- No olvidamos
- Infografía
Es un sitio web muy moderno que presenta todos los archivos de una manera comprensible y clara.
Antes y después
Se presenta una imagen con su respectivo contexto, y luego una barra vertical que da a conocer el mismo contexto pero en la antigüedad. Con el cursor se puede correr la barra y se ve cómo era el lugar antes y ahora.
Archivo Histórico UC
Es una plataforma que presenta todos los archivos administrativos, sociales, culturales, académicos y estudiantiles.
Presenta una barra superior con distintos botones básicos de un sitio web.
Archivo Histórico
Presenta una explicación y proceso del sitio web
Archivo Fílmico
Abre a un sitio web más moderno (Se nota la intención de ser un sitio práctico, no tan decorado)
Conclusiones
1. Preguntas anteriores a la planeación de la plataforma * ¿Cuál es la finalidad?
- ¿Para quién está hecho?
- ¿Será simple o interactiva?
- ¿La presentación es moderna?
- ¿Presentará archivos escritos solamente?
- ¿Tendrá archivos y enlaces externos?
2. Puntos/observaciones fundamentales
- Presentarse y presentar al proyecto (en el sitio). Resumir qué es, para quién es y dar a conocer a la comunidad.
- Si es posible, agregar la opción de leer texto (es importante para la accesibilidad).
- Los botones que presentan archivos es muy útil contextualizarlos con alguna imagen. Así al usuario le puede interesar más.
- Creo que es importante considerar que es una plataforma para la comunidad, pero también para personas externas.
- Comprender y tener clara la finalidad del sitio.
Código abierto y código cerrado
Abierto: Es un software donde su código es de uso público, todos pueden verlo y modificarlo. Generalmente es de uso gratuito, es colaborativo y puedes adaptarlo a tus necesidades. A veces sucede que programadores descargan el código, lo modifican y crean otra versión de la misma plataforma. (https://thecyberexpress.com/what-is-waterfox/#:~:text=%C2%BFWaterfox%20es%20propiedad%20de%20Mozilla,de%20cualquier%20asociaci%C3%B3n%20con%20Mozilla.)
La licencia de los softwares de código abierto es gratis, no es necesario pagar para utilizarlo (aunque sí dependen de donaciones), pero la plataforma no ofrecerá mejoras ni actualizaciones, eso es trabajo de la comunidad. La seguridad también dependerá de los usuarios, los cuales pueden agregar códigos extra para aportar a ésta.
Ejemplos:
- Blender
- Github
- Firefox
Cerrado: Para utilizar un software de código cerrado se debe pagar la licencia y te ofrecen soporte técnico y actualizaciones durante la vida útil del producto. El nivel de seguridad que el usuario tenga dependerá directamente del proveedor. Ejemplos:
- Microsoft Office (Word, Excel, PowerPoint)
- Adobe
- Autodesk
Categorización de plataformas de participación por parte de los usuarios
- Redes sociales: Tiktok, Instagram, Facebook, Twitter (X), Pinterest.
Los usuarios participan publicando imágenes, videos, comentarios, etcétera.
- Foros públicos: Reddit, Lemmy, Kbin, Hive.
Plataformas donde la gente cuenta historias, discute sobre temas, opina.
- Enciclopedias colaborativas: Wikipedia, Wikihow, Casiopea.
Son plataformas donde los usuarios contribuyen a la creación y edición de contenido.
- Plataformas de streaming y videos: Youtube, Twitch.
Sitios donde la gente publica videos (ya editados o en live).
- Colaboración de software: Github, Gitlab, Bitbucket.
Plataformas donde los usuarios publican códigos de programación para uso público.
- Reseñas y recomendaciones: Tripadvisor, Google maps.
Plataforma donde los usuarios aconsejan sobre destinos (hoteles, restaurantes, negocios).
Categorización de Objetos Semánticos
Utilizado en el contexto de las wikis y sistemas de organización de información es una manera de estructurar y categorizar entidades complejas y extensas. En las wikis, un “objeto semántico” se refiere a una entidad que tiene atributos y relaciones definidas, y que puede ser categorizada dentro de un sistema de taxonomía o de organización. Esto puede incluir desde artículos individuales hasta conceptos más abstractos o entidades que abarcan múltiples aspectos o categorías. Estos objetos semánticos permiten la estructuración y organización efectiva de la información dentro de plataformas colaborativas como Wikipedia, facilitando la navegación y la comprensión de conceptos complejos mediante categorías y relaciones definidas. Según Herbert Spencer (2019), los objetos semánticos dentro de Casiopea son expresados por medio de páginas, las cuales usan plantillas que permiten visualizar los datos. Esta plantilla se configura por medio de un formulario donde se ingresan los datos necesarios para dar “forma”. A su vez, esos datos constituyen propiedades, previamente definidas que determinan las cualidades de un objeto. Por ejemplo, el objeto Tarea y el objeto Travesía poseen ambos la propiedad |Alumno= pero el objeto Tarea no tiene la propiedad |Destino= que es propia de las Travesías. Entonces, las propiedades pueden ser compartidas por otros objetos, permitiendo que se cree una red de datos o “pertenencias” de un objeto dentro de otros. (Fauve Bellenger, 2024).
Definiciones
- Semántica: Disciplina que estudia el significado de las expresiones lingüísticas, sean palabras, sintagmas u oraciones. La semántica no constituye una parte de la gramática paralela a la morfología y a la sintaxis. Su naturaleza se considera, por tanto, transversal, en el sentido de que el estudio de los significados no afecta únicamente a cierto tipo de segmentos, sino a gran número de categorías y de relaciones a lo largo de toda la gramática. (RAE).
- Objeto semántico: Es aquel que modela el significado de los datos de los usuarios. Estos objetos modelan las percepciones de los usuarios con mayor precisión que E-R (El modelo entidad relación (ERD o modelos ER) es una herramienta que permite representar de manera simplificada cómo personas, objetos o conceptos se relacionan entre sí. Se utiliza para exponer cómo se organiza la información en una base de datos).
Tipos de objetos
Objeto simple
Es un objeto que tiene una identidad única y no depende de otros objetos para existir.
Un usuario registrado en una página web:
- Nombre de usuario
- Correo
- Contraseña
Objeto compuesto
Es formado por distintos objetos simples relacionados.
Un artículo de noticia:
- Título
- Cuerpo de texto
- Autor
- Fecha
- Comentarios
Objeto combinado
La unión de varios objetos que crea uno nuevo con un significado propio.
Comprar en un e-commerce:
- Usuario + Carrito de compra + Método de pago = Nuevo pedido
Objetos híbridos
Un objeto que puede funcionar de distintas maneras según el contexto.
Archivo de PDF en un sitio web:
- Puede ser un documento descargable
- Puede verse en el mismo sitio (vista previa)
Objeto de asociación
Un objeto que representa la relación entre dos o más.
Reseña de un producto en e-commerce:
- Relaciona Usuario + Producto
(No tiene sentido si los objetos no se asocian)
Objetos Padre-subtipo
Un objeto general que se especializa en tipos más concretos.
- Contenido (Padre) – Texto, imagen, video, audio (Subtipo)
(Es una forma específica general del contenido)
Objeto Arquetipo-versión
Un modelo base que da origen a distintas versiones.
- Modelo / Plantilla de una página web (Arquetipo) – Página de inicio, Página de contacto, Página de productos (Versión)
Archivos externos en HTML
Vincular archivos de distintas plataformas
Respetando licencias, derechos y atribuciones
API (Interfaz de Programación de Aplicaciones)
¿Qué es una API?
Son mecanismos que logran que dos componentes de software se complementen entre sí mediante protocolos y definiciones. “Por ejemplo, el sistema de software del instituto de meteorología contiene datos meteorológicos diarios. La aplicación meteorológica de su teléfono “habla” con este sistema a través de las API y le muestra las actualizaciones meteorológicas diarias en su teléfono”.
¿Qué significa API?
“Interfaz de programación de aplicaciones”. Separando las palabras, aplicación se refiere a distintos softwares con alguna función. La interfaz se podría considerar como el contrato de servicio de ambas aplicaciones. La documentación de su API declara cómo los desarrolladores deben estructurar las solicitudes y respuestas.
¿Cómo funcionan las API?
El funcionamiento y conversación entre distintos softwares suele explicarse con “cliente y servidor”. La aplicación que envía la solicitud es el cliente y la que responde, servidor. Las API pueden funcionar de cuatro maneras diferentes:
- API de SOAP (Protocolo Simple de Acceso a Objetos): El cliente y servidor se comunican mediante XML (Lenguaje de Marcado Extensible, es un tipo de lenguaje que permite definir y estructurar datos, logrando que tanto personas como máquinas pueden entenderlo).
- API de RPC (Llamadas a Procedimientos Remotos): El cliente realiza un procedimiento en el servidor, y él devuelve el resultado al cliente.
- API de WebSocket: Es un desarrollo moderno de la API que utiliza JSON (JavaScript Object Notation, formato de texto ligero) para transmitir datos.
- API de REST (Transferencia de Estado Representacional): Los clientes pueden acceder a los datos del servidor. Ambos softwares intercambian datos mediante HTTP. La principal característica de REST es que los servidores no guardan los datos del cliente entre solicitudes (hay ausencia de estado).
API REST
Beneficios
- Integración
- Innovación
- Ampliación
- Facilidad de mantenimiento
Diferentes tipos de API
- Privadas: Son internas de una empresa, solo se utilizan para conectar softwares dentro de ésta.
- Públicas: Cualquier persona puede utilizarlas, depende de la API si tiene sistema de autorización y coste asociado a su uso.
- De socios: Solo pueden acceder a éstas los desarrolladores externos autorizados para ayudar a distintas empresas.
- Compuestas: Combinan dos o más API distintas para abordar comportamientos complejos del sistema.
Wikimedia Commons
1. Se busca el archivo correspondiente en https://commons.wikimedia.org/wiki/Main_Page
2. En la página del archivo, se debe revisar la licencia (bajo el documento, imagen, video, audio). https://commons.wikimedia.org/wiki/File:ECH_1999_2_-_Caballer%C3%ADa_en_Chile,_Historia_de_la.djvu
3. Se copia la URL del archivo, y luego insertarlo en el siguiente código:
<a href="URL_DEL_ARCHIVO">Ver documento original</a>
Si no, el código para incrustarlo con atribución (que el documento esté sin necesidad de redirigir a otro sitio).
<img src="URL_DE_LA_IMAGEN" alt="Descripción"> <>Imagen por [Autor] vía Wikimedia Commons (CC BY 4.0)</>
Europeana
Zenodo
Internet Archive
https://info.figshare.com/researchers/
Sistema de Gestión de Contenidos (CMS)
- Wordpress: Es una plataforma de gestión de contenidos que permite crear y administrar sitios web sin necesidad de tener conocimientos sobre la programación. Sirve para crear todo tipo de páginas web; blogs, tiendas online, foros. Funciona a través de temas (que definen el diseño) y plugins. Es un software de código abierto. Se puede utilizar su servicio en la nube, donde no necesitas servidor propio, tiene planes gratuitos y pagados. El único contra es que es más limitado para personalizar. La otra opción que entrega es descargar su software y se instala en el servidor propio. Permite un control total sobre diseño, plugins, base de datos y monetización.
Existen otras plataformas similares;
- Drupal
- Joomla!
- Ghost
Plataformas colaborativas
Tenemos que hablar de Chile
https://www.tenemosquehablardechile.cl/
“Somos una plataforma colaborativa de participación y diálogo ciudadano, que busca promover la cohesión y la construcción de una hoja de ruta país. Impulsada por la Pontificia Universidad Católica y la Universidad de Chile, y con el apoyo de muchas organizaciones de la sociedad civil, promovemos una forma de conversar que valore nuestras diferencias, y permita encontrarnos en torno a ellas. Queremos promover una cultura de diálogo masivo que valore nuestras diferencias, además de sistematizar, representar y responder rigurosamente la mirada de futuro de la sociedad chilena para enfrentar los desafíos de futuro.
Desde el 2020 hemos organizado distintos mecanismos y metodologías de participación en que han participado personas de todo el país. Cada uno de los espacios participativos que hemos implementado han sido creados y sistematizados por la UC y la Chile, buscando relevar lo que millones de personas han compartido en nuestros diálogos virtuales y presenciales.”
Decide Chile
“DecideChile, creado en 2013 por Unholster, es una plataforma de análisis de datos y visualizaciones enfocada en temas públicos.” Su misión es “Poner los datos y nuestra expertise en tecnología al servicio de la sociedad. En Unholster tenemos la convicción de que es importante guiarse por la información dura, que el populismo se combate con data y mientras más datos sean entendibles, se puede construir una mejor democracia.”
Chile Convención
https://www.chileconvencion.cl/
Espacio online donde la ciudadanía podía enviar propuestas de norma constitucional.
DemocraciaOS
Somos Democracia en Red, una organización radicada en Argentina. Conformada por personas activistas, programadores y científicos sociales, que desde el hacer buscamos abrir las instituciones públicas y los procesos de toma de decisión.
Civocracy
“Together you create a joint campaign for your target audience around a central quest. Raise awareness for your topic and reputation for yourself by teaming up and amplifying your reach.
Civocracy develops the engagement strategies to bring your target audience onboard”.
Sistema Georreferencial (SIG)
https://colombiaartesanal.com.co/rutas/magdalena/
10 reglas heurísticas de Nielsen
- Visibilidad del estado del sistema
El usuario debe recibir un feedback al momento de realizar una acción (enviar un correo, hacer una transferencia, pagar algo), el tiempo no debe ser muy largo antes de recibir el estímulo. Esto sirve para que el usuario no sienta duda, pero sí seguridad al utilizar la plataforma. Mostrar el avance del sistema.
- Coincidencia entre el sistema y el mundo real
Nunca hay que asumir que el usuario ya sabe a lo que se está enfrentando en el sitio web. Hay que utilizar un lenguaje amigable para él.
- Dale al usuario el control y la libertad
Hay que entregarle al usuario la opción de decidir por su cuenta lo que quiera hacer, como volver atrás, eliminar o deshacer algo.
- Consistencia y estándares
“El usuario no debe estar preguntándose siempre si ese botón enviará el correo, o si es un botón o un enlace, o si ese elemento es clicable o no”. Hay que mantenerse en los estándares presentes, para así no confundir al usuario ni que el nuevo diseño juegue en contra.
- Prevención de errores
Google aplicó este pop-up en sus funciones. Por ejemplo, si enviamos un mail pensando que adjuntamos un archivo, Gmail te advertirá que no hay tal archivo, también con el asunto.
- Reconocer en lugar de recordar
“En el afán de diseñar pantallas “lo más limpias posibles” muchas veces caemos en ocultar opciones detrás de menús hamburguesa, hovers o ventanas modales”. Está bien mantener un cierto orden, pero hay que mostrarles a los usuarios las opciones que tienen, no asumir que recordarán la ubicación de cada botón y opciones.
- Flexibilidad y eficiencia de uso
Dar la opción de personalización del programa o sitio web. Es prudente dar indicaciones de uso, pero también es importante considerar a los usuarios que no son nuevos, y que no necesitan aprender a utlizarlo.
- Estética y diseño minimalista
“Para lograrlo, pregúntate si toda la información que muestras en la interfaz es necesaria y útil en ese momento exacto. Si no lo es, ocúltala o quítala”. Es fundamental no agregar más información de la necesaria. Hay que lograr disimular y ordenar todas las opciones que entrega el software de una manera clara y precisa.
- Ayuda al usuario a reconocer, diagnosticar y recuperarse de los errores
Hay que facilitar la experiencia cuando suceden problemas desde el usuario o desde la plataforma misma. Si el usuario se equivoca escribiendo su contraseña, hay que avisarle pero también darle la opción de cambiarla. O si los hay un problema con la programación de la página, se deja claro que el error no ha sido del usuario.
- Ayuda y documentación
Añadir una página dentro del sitio con FAQ (preguntas frecuentes), y también agregar contenido explicativo en campos complejos (un formulario, botones, contraseñas).
Presentar lo no digital en una plataforma digital
¿Qué cuentan los tejedores y tejedoras de Valle Hermoso?
Para tener información de primera fuente se visualizaron diversos videos de youtube donde hay entrevistas y documentales de la comunidad de Valle Hermoso.
- Video 1: La producción textil en Valle Hermoso, La Ligua ( Por CorProDeCo, SERPAT )
- Video 2: Tejer el Territorio: Saberes bioculturales en el Río La Ligua
- Video 3: Patrimonio Local: "Los Tradicionales Tejidos y Dulces de La Ligua"
- Video 4: Cuna del Tejido, Valle Hermoso
El tejido en Valle Hermoso constituye conocimientos heredados de generación en generación, aprendido desde la infancia. Para tejer, se utilizan distintos tipos de telares, como el telar a pala (el más antiguo), el telar de peine, el telar eléctrico y las máquinas de tejido de punto. Las materias primas provienen del pelaje de los animales, principalmente de llama, alpaca, vicuña y ovejas. Antiguamente las fibras eran 100% de origen natural, ahora solo un 5% es del animal, el otro porcentaje es fibra sintética, para así entregar más dureza.
Inicialmente, el oficio era solo de mujeres, hasta el 1950 que los hombres comenzaron a ser parte también. Es un saber y oficio ligado al territorio. A pesar de la crisis hídrica, la actividad textil no se ha visto interrumpida.
En 1940 se instaló la primera fábrica de tejidos, lo que provocó un fuerte impulso económico y tecnológico. Los tejidos se volvieron tendencia nacional, donde personas de todo Chile y también del exterior viajaban a La Ligua a comprar sus productos, entregando un gran reconocimiento artesanal. Gracias a este oficio muchas familias alcanzaron seguridad económica y bienestar, por lo que se generó un sentimiento de gratitud hacia el oficio. Los artesanos del sector cuentan que comienzan a tejer desde los seis años, muchos de ellos motivados a independizarse tempranamente (inculcado por la familia).
Con el avance económico nacional y sus tratados de libre comercio, los tejedores comenzaron a competir directamente con productos (externos) más baratos y de menor calidad, con lo que se vieron perjudicados directamente.
El oficio forma pequeños emprendedores, fabricantes medianos y grandes. El avance tecnológico ha permitido realizar en una hora lo que antes llevaba un medio día. Aunque la globalización ha generado dificultades, los artesanos valoran que la gente de fuera siga reconociendo la artesanía, lo que refuerza la importancia cultural y económica que los tejidos han tenido y siguen teniendo en la zona.
Acercamiento al oficio
Para un acercamiento al oficio, compré materiales y comencé a aprender a tejer, el punto más simple. Grabé este video de modo cercano y cálido, fijándome en el sonido y las texturas, para así comprender cómo es la sensación.
¿Cómo abstraer la lana?
Para comenzar a acercarme a la abstracción, visualicé cómo la lana caía y se posaba en una superficie, sin manipularla, solo dejándola caer desde arriba. También, comenzando a tejer, me di cuenta del detalle de las curvas de la lana alrededor de la aguja, siendo este el segundo paso del tejer.
Realicé dibujos de la lana, sin intención de detallarlo mucho, simplemente presenté el recorrido lineal de ésta.
La paleta de colores utilizada en las imágenes son de tierra, colores cálidos cafés (y sus derivados), y verdosos.
¿Cómo cae la lana del ovillo?
Acto del punto
Acercamiento a la presentación de la abstracción
Lana interactiva
HTML
Visualiza el código HTML
<!DOCTYPE html> <html lang="es"> <head>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lana Interactiva</title> <link rel="stylesheet" href="prueba.css">
</head> <body>
<audio id="sound" src="sonidolana.mp3" preload="auto"></audio>
<svg id="canvas" viewBox="0 0 1600 800" preserveAspectRatio="none">
<defs>
<filter id="rugosa" x="0" y="0" width="100%" height="100%">
<feTurbulence type="fractalNoise" baseFrequency="0.07" numOctaves="3" result="noise"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="2"/>
</filter>
</defs>
<path id="lanaPath" d="" stroke="#6e452a" stroke-width="8"
stroke-linecap="round" stroke-linejoin="round"
fill="none"
filter="url(#rugosa) drop-shadow(0 0 6px rgba(166,60,44,0.7))"/>
<g id="ovillo" transform="translate(200,400) scale(1)" cursor="grab">
<circle cx="0" cy="0" r="35" fill="#8b5e3c"/>
<path d="M -20 -10 Q 0 -30, 20 -5" stroke="#a63c2c" stroke-width="3" fill="none"/>
<path d="M -25 15 Q 0 30, 25 10" stroke="#d9c3a6" stroke-width="2" fill="none"/>
<path d="M -30 0 Q 0 20, 30 0" stroke="#5c3a23" stroke-width="2" fill="none"/>
<path d="M -15 -25 Q 5 0, 15 25" stroke="#a63c2c" stroke-width="2" fill="none"/>
</g>
</svg>
<script>
const svg = document.getElementById("canvas");
const ovillo = document.getElementById("ovillo");
const sound = document.getElementById("sound");
const lanaPath = document.getElementById("lanaPath");
let isDragging = false; let scale = 1; let pathData = "";
ovillo.addEventListener("mousedown",(e)=>{
isDragging = true;
ovillo.setAttribute("cursor","grabbing");
const x = e.clientX;
const y = e.clientY;
pathData = `M ${x} ${y}`;
lanaPath.setAttribute("d", pathData);
sound.currentTime = 0;
sound.play();
});
window.addEventListener("mousemove",(e)=>{
if(!isDragging) return;
const x = e.clientX;
const y = e.clientY;
ovillo.setAttribute("transform",`translate(${x},${y}) scale(${scale})`);
pathData += ` L ${x} ${y}`;
lanaPath.setAttribute("d", pathData);
scale = Math.max(0.7, scale - 0.0003); });
window.addEventListener("mouseup",()=>{
isDragging = false;
ovillo.setAttribute("cursor","grab");
sound.pause();
});
</script>
</body> </html>
CSS
Visualiza el código CSS
body {
margin: 0;
background-color: #f5f0e6;
overflow: hidden;
}
svg {
width: 100%;
height: 100vh;
}
.lana {
fill: none;
stroke: #8b5e3c;
stroke-width: 8;
stroke-linecap: round;
stroke-linejoin: round;
filter: url(#rugosa);
transition: stroke 0.3s ease;
}
.lana:hover {
stroke: #a63c2c;
}
Cambio de imágenes lana
HTML
Visualiza el código HTML
<!DOCTYPE html>
<html>
<head>
<title>Cambio de imágenes lana</title>
<link rel="stylesheet" href="imágenes.css">
<script>
document.addEventListener("DOMContentLoaded", () => {
document.body.addEventListener("click", () => {
window.location.href = "imagenes2.html";
});
});
</script>
</head>
<body>
</body> </html>
CSS
Visualiza el código CSS
.grid-container {
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr ;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
gap: 0px;
width: 100%;
margin: 0px ;
background-color: #280e04;
}
.grid-item img {
max-width: 100%;
height: auto;
margin-left: 0px;
}
Museo de La Ligua
Avance 9 octubre
¿Qué hace el museo de La Ligua?
- Rescata
- Estudia
- Preserva
- Difunde
El Patrimonio Cultural y Natural de Petorca
¿Qué busca?
Transformarse en un lugar de encuentro y convivencia compartido por la comunidad, que sea un espacio inclusivo, emotivo, didáctico, democrático, reflexivo y educativo. Buscan “celebrar la vida”.
Sitio web museo
Actualmente existe una página del Museo de La Ligua (https://museolaligua.cl/), pero se nota que está en desuso y no actualizado.
_6.40.06_p.m..png)
_6.28.15_p.m..png)
_6.24.49_p.m..png)
Arquitectura de información
Se categorizaron los archivos en 2: Archivos Históricos (con periódicos de la zona y mapotecas) y Archivos Audiovisuales (con videos etnográficos, documentales, audios y fotografías patrimoniales). A pesar de que estén las dos categorías explicadas en la página, al momento de seleccionar el botón para consumir el contenido, los botones no redirigen ni abren nada, simplemente se expanden (un poco, para dar feedback de ubicación del cursor al usuario), pero no son clickeables.
También tiene un calendario de eventos, el cual se puede organizar por días, meses y listas, lamentablemente no aparece ningún evento, aunque seguramente hayan, lo que me confirma que no existe actividad online.
La información general está presente, como horarios, tarifas y reservas, aunque esta última solo muestra un mail y un número para inscribirse, podría ser interesante agregar un formulario en el mismo sitio web, para así facilitar y promover las reservas.
Acercamiento propuesta nuevo sitio web
Hay categorías del sitio actual que sí aportarían positivamente, pero ¿qué pasaría si dividimos el sitio en "Museo Presencial" y "Museo Online"? Así también se categorizaría el contenido interno y externo.
"Museo Presencial"
- Reservas
- Tarifas
- Accesibilidad
- Estacionamientos
- Actividades
- ¿Cómo llegar?
- Normas del museo
- Salas fijas de exposición
- ¿Qué hay de nuevo?
"Museo Online"
- Calendario de eventos
- Documentos (archivos)
- Contenido audiovisual
- Inmersión sensorial artesanías
- Publicaciones (se podría linkear con la plataforma que más usen, como instagram)
- Noticias
Visita a La Ligua
14 de octubre 2025
Pauta entrevista profesor encargado
Museo
Jornada con las tejedoras
Abstracción de la lana
Telar 1
Telar 2
Telar 3
Telar 4
Inicio maqueta Figma
Wireframes
Para la siguiente propuesta, se dibujan wireframes para llevar el posible diseño a FIGMA. La propuesta comienza con un zoom del globo terráqueo, el cual se aproxima hacia Chile, más específicamente La Ligua.
Luego, se idean distintos botones con la finalidad de entregar información sobre las tejedoras de La Ligua, dónde encontrarlas y qué ver en el Museo.
Avance FIGMA
Considerando que una de las características de este sitio es que sea interactivo, se buscan distintas acciones que aporten positivamente a esta idea.
_16.47.39.png)
Flujo de Wireframes y explicación
Avance proyecto 06.11
Para este diseño se propone adentrarnos a un arpillera, donde luego de una breve presentación del sitio se muestra la totalidad de la pantalla como una obra, con la idea de sentirnos dentro de ésta.
Figma 2
Entrevista arpilleras
Esta conversación / entrevista se realiza con la intención de comprender el trabajo de las arpilleras de La Ligua, su modo de empleo, la cercanía a éste, qué buscan mostrar con sus obras y qué les gustaría mostrar y ver en este posible sitio web.
Avance proyecto 13.11
Luego de la revisión de la maqueta anterior, se discute sobre cómo presentar la obra de la arpillera sin que sea literal. Cómo se puede abstraer esta obra? Se considera también que el sitio no sea una obra, si no que ésta esté presente de una manera no literal.
Se jugó más con los botones y cambios de colores, para lograr una idea más interactiva.
Wireframes
Figma
En esta maqueta de FIGMA, se buscó integrar interacciones con distintos objetos, para lograr una mayor dinámica en el sitio. Al ingresar a este sitio, se muestra una breve animación para comenzar el recorrido. Luego, la pantalla se divide en dos botones, con la finalidad de proponer otro tipo de experiencia. El botón que se desarrolló fue el de "galería virtual".
Maqueta
Link
Avance proyecto 20.11
Búsqueda y recopilación de datos
Para avanzar con la parte del sitio que abarca el archivo histórico, se comenzó con la recopilación de datos de distintas arpilleras (1973 - 2015) utilizando el Archivo de Colecciones del Museo de la Memoria y los Derechos Humanos (LINK). A pesar de que la cantidad de colecciones eran muchas, no todas contaban con la información necesaria para poder categorizarlas, siendo esto un punto fundamental.
La recopilación de información abarcó los siguientes datos:
- Nombre
- Fecha
- Institución Archivística
- Origen del ingreso
- Lugar Cantidad
- Algunas Arpilleras
- Fecha específica
Categorización información
Hipervínculos FIGMA
Ya con la información ordenada, se decide considerar algunas categorías para la tabla de arpilleras. Lo interesante de esta tabla es la manera en que cada elemento se relaciona de alguna u otra manera con otro, a pesar de ser de distintas autoras.
Hipervínculos tabla
Hipervínculos imágenes
Por otra parte, y en paralelo a la tabla, se realiza el mismo hipervínculo pero con las obras en imágenes. Este prototipo no busca ser el final, fue solo una entrada al diseño y orden.
Avance proyecto 28.11
Elementos gráficos
Figma
Entrega Final Título 1
Video figma
Lámina
Presentación final
