{"id":108,"date":"2025-10-20T22:13:12","date_gmt":"2025-10-20T22:13:12","guid":{"rendered":"https:\/\/avat.uprrp.edu\/cocreacion\/?p=108"},"modified":"2025-11-09T02:46:36","modified_gmt":"2025-11-09T02:46:36","slug":"museo-del-color","status":"publish","type":"post","link":"https:\/\/avat.uprrp.edu\/cocreacion\/2025\/10\/20\/museo-del-color\/","title":{"rendered":"El Museo del Color"},"content":{"rendered":"\n<p>Proyecto de concreci\u00f3n con estudiantes del curso CIFI 4074 Ciencia de Materiales de Arte donde recorremos&nbsp;la historia del color \u2014desde los pigmentos minerales y los tintes naturales hasta su representaci\u00f3n digital\u2014 creando narrativas audiovisuales que fusionan ciencia, arte y tecnolog\u00eda.<br>A trav\u00e9s de la co-creaci\u00f3n asistida por inteligencia artificial, transforman conceptos sobre la materia y la luz en experiencias educativas inmersivas.<br>Este proyecto, parte del ecosistema GAIA\u2013AVAT, demuestra c\u00f3mo aprender ciencia tambi\u00e9n puede ser investigar, narrar y crear juntos.<\/p>\n\n\n\n<p><a href=\"\/cocreacion\/museo-del-color\/\">Entrar al Museo del Color \u2192<\/a><\/p>\n\n\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-8\" class=\"h5p-iframe\" data-content-id=\"8\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"El Museo de los Colores\"><\/iframe><\/div>\n\n<section style=\"max-width:1100px;margin:0 auto;padding:24px 0;\">\n  <h2 style=\"text-align:center;margin-bottom:12px;\">Explora y colabora<\/h2>\n  <div class=\"grid-links\" style=\"display:grid;gap:16px;\">\n    <a class=\"nav-card\" href=\"\/cocreacion\/museo-del-color\/laboratorio\/\">\n      \ud83c\udfa8 <strong>Laboratorio del Color<\/strong><br><small>Bocetos, prompts y materiales en proceso.<\/small>\n    <\/a>\n    <a class=\"nav-card\" href=\"\/cocreacion\/museo-del-color\/bitacora\/\">\n      \ud83d\udcd6 <strong>Bit\u00e1cora GAIA\u2013AVAT<\/strong><br><small>Reflexiones y aprendizajes del equipo.<\/small>\n    <\/a>\n    <a class=\"nav-card\" href=\"\/cocreacion\/museo-del-color\/salas\/\">\n      \ud83d\uddfa\ufe0f <strong>Salas y actividades<\/strong><br><small>Acceso a cada m\u00f3dulo tem\u00e1tico H5P.<\/small>\n    <\/a>\n    <a class=\"nav-card\" href=\"\/cocreacion\/museo-del-color\/recursos\/\">\n      \ud83e\uddf0 <strong>Recursos y gu\u00edas<\/strong><br><small>Plantillas, r\u00fabricas y referencias.<\/small>\n    <\/a>\n    <a class=\"nav-card\" href=\"\/cocreacion\/museo-del-color\/historial-versiones\/\">\n      \ud83d\udd52 <strong>Historial de versiones<\/strong><br><small>Fechas, cambios y responsables.<\/small>\n    <\/a>\n    <a class=\"nav-card\" href=\"\/cocreacion\/proyectos\/\">\n      \u2190 <strong>Ver todos los proyectos<\/strong><br><small>Volver al \u00edndice de CoCreaci\u00f3n.<\/small>\n    <\/a>\n  <\/div>\n<\/section>\n\n<style>\n  .nav-card{\n    display:block;background:#fff;border-radius:16px;padding:16px 18px;text-decoration:none;color:#222;\n    box-shadow:0 8px 22px rgba(0,0,0,.08);transition:transform .18s ease, box-shadow .18s ease;\n  }\n  .nav-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.12)}\n  .nav-card small{color:#555}\n  @media(min-width:860px){.grid-links{grid-template-columns:repeat(3,1fr)}}\n<\/style>\n\n\n<p><\/p>\n\n\n<p><!-- ========================= SALA 1 ========================= --><\/p>\n<section id=\"sala1\">\n<h2>\ud83e\udea8 Sala 1 \u00b7 El fuego y la piedra<\/h2>\n<p class=\"meta\">Tema: pigmentos prehist\u00f3ricos, <em>hematita<\/em> vs <em>goethita<\/em> cocida, cargas y ligantes, talleres rupestres.<\/p>\n<div class=\"box instr\">\n<h3>Instrucciones para el equipo (Esto es solo a manera de ejemplo)<\/h3>\n<ol>\n<li>Inserten un video (propio o curado) sobre <strong>Altamira<\/strong>\/<strong>Lascaux<\/strong> y expliquen la diferencia entre <strong>hematita<\/strong> natural y <strong>hematita<\/strong> sint\u00e9tica a partir de <strong>goethita<\/strong> cocida.<\/li>\n<li>Agreguen una pregunta de opci\u00f3n m\u00faltiple sobre <strong>difracci\u00f3n de rayos X<\/strong> y otra sobre el papel de la <strong>carga<\/strong> (arcilla, granito, feldespato).<\/li>\n<li>Completen el ejercicio de arrastrar: pigmento \u2192 uso principal.<\/li>\n<\/ol>\n<\/div>\n<div class=\"grid grid-2\">\n<div class=\"box\">\n<h3>1) Video + preguntas<\/h3>\n<p>Reemplacen el <code>&lt;iframe&gt;<\/code> por su recurso de video (Drive\/YouTube local del curso). A\u00f1adan preguntas en H5P o usen el quiz simple aqu\u00ed.<\/p>\n<div class=\"card\">\n<div id=\"quiz-sala1\" class=\"quiz\">\n<div class=\"radio\"><input id=\"q1a\" name=\"q1\" type=\"radio\" value=\"ok\" \/><label for=\"q1a\">La hematita sint\u00e9tica muestra picos de RX ensanchados por menor regularidad cristalina.<\/label><\/div>\n<div class=\"radio\"><input id=\"q1b\" name=\"q1\" type=\"radio\" value=\"no\" \/><label for=\"q1b\">La hematita sint\u00e9tica siempre contiene m\u00e1s agua que la natural.<\/label><\/div>\n<div class=\"radio\"><input id=\"q1c\" name=\"q1\" type=\"radio\" value=\"no\" \/><label for=\"q1c\">La hematita natural se reconoce porque es incolora.<\/label><\/div>\n<p><button class=\"btn\">Comprobar<\/button><\/p>\n<div id=\"score-sala1\" class=\"score muted\">\u2014<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"box\">\n<h3>2) Arrastra pigmento \u2192 uso<\/h3>\n<p>Arrastra cada <strong>chip<\/strong> al recuadro correcto. (Exportable a H5P\/Drag and Drop).<\/p>\n<div id=\"chips-sala1\" class=\"row\">\n<div class=\"chip\" draggable=\"true\" data-target=\"contorno\">Carb\u00f3n<\/div>\n<div class=\"chip\" draggable=\"true\" data-target=\"fondo\">Hematita<\/div>\n<div class=\"chip\" draggable=\"true\" data-target=\"trazo\">Manganeso<\/div>\n<div class=\"chip\" draggable=\"true\" data-target=\"brillo\">Granito<\/div>\n<\/div>\n<div class=\"grid grid-2\">\n<div>\n<p class=\"pill\">Contorno \/ sombreado<\/p>\n<div class=\"target\" data-accept=\"contorno\">\u00a0<\/div>\n<\/div>\n<div>\n<p class=\"pill\">Fondo rojizo<\/p>\n<div class=\"target\" data-accept=\"fondo\">\u00a0<\/div>\n<\/div>\n<div>\n<p class=\"pill\">Trazo negro<\/p>\n<div class=\"target\" data-accept=\"trazo\">\u00a0<\/div>\n<\/div>\n<div>\n<p class=\"pill\">Efecto irisado (carga)<\/p>\n<div class=\"target\" data-accept=\"brillo\">\u00a0<\/div>\n<\/div>\n<\/div>\n<div class=\"row\" style=\"margin-top: .6rem;\"><button class=\"btn alt\">Revisar<\/button><br \/><button class=\"btn ghost\">Reiniciar<\/button><br \/><span id=\"dnd-msg-1\" class=\"muted\">Arrastra y suelta para asignar.<\/span><\/div>\n<\/div>\n<\/div>\n<\/section>\n<p><!-- ========================= SALA 2 ========================= --><\/p>\n<section id=\"sala2\">\n<h2>\ud83c\udffa Sala 2 \u00b7 Alquimia del templo (Azul y Verde de Egipto)<\/h2>\n<p class=\"meta\">Tema: cuprorivaita (CaCuSi<sub>4<\/sub>O<sub>10<\/sub>), fase amorfa, natr\u00f3n, calc\u00e1reo, atm\u00f3sfera de cocci\u00f3n.<\/p>\n<div class=\"box instr\">\n<h3>Instrucciones para el equipo<\/h3>\n<ol>\n<li>Completen el <strong>escenario ramificado<\/strong>: elijan ingredientes y condiciones para obtener Azul Egipcio (cristalino) o Verde Egipcio (m\u00e1s amorfo).<\/li>\n<li>Agreguen <strong>hotspots<\/strong> sobre la imagen del \u201ctaller egipcio\u201d con los roles de: s\u00edlice, natr\u00f3n, calc\u00e1reo, cobre, horno.<\/li>\n<li>Describan la relaci\u00f3n <strong>granulometr\u00eda \u2194 tono<\/strong> y c\u00f3mo moler para conservar tonalidad.<\/li>\n<\/ol>\n<\/div>\n<div class=\"grid grid-2\">\n<div class=\"box\">\n<h3>1) Escenario ramificado (receta)<\/h3>\n<p>Elige proporciones y condiciones. Observa el resultado. (Luego se puede portar a H5P\/Branching Scenario).<\/p>\n<details open=\"\">\n<summary><strong>Paso 1 \u00b7 Ingredientes base<\/strong><\/summary>\n<div class=\"row\"><span class=\"pill\">S\u00edlice<\/span><br \/><span class=\"pill\">Calc\u00e1reo<\/span><br \/><span class=\"pill\">Cobre<\/span><br \/><span class=\"pill\">Natr\u00f3n<\/span><\/div>\n<\/details><details>\n<summary><strong>Paso 2 \u00b7 Proporciones<\/strong><\/summary>\n<div class=\"row\"><button class=\"btn ghost\" data-recipe=\"azul\">Cobre bajo \u00b7 Sodio medio<\/button><br \/><button class=\"btn ghost\" data-recipe=\"verde\">Cobre bajo \u00b7 Sodio alto<\/button><br \/><button class=\"btn ghost\" data-recipe=\"fallo\">Proporciones err\u00e1ticas<\/button><\/div>\n<\/details><details>\n<summary><strong>Paso 3 \u00b7 Horno<\/strong><\/summary>\n<div class=\"row\"><button class=\"btn ghost\" data-recipe=\"azul\">Oxidante \u00b7 900\u20131000\u00b0C<\/button><br \/><button class=\"btn ghost\" data-recipe=\"verde\">Oxidante \u00b7 1000\u20131100\u00b0C<\/button><br \/><button class=\"btn ghost\" data-recipe=\"fallo\">Reductora \u00b7 800\u00b0C<\/button><\/div>\n<\/details>\n<div id=\"resultado-sala2\" class=\"card\"><strong>Resultado:<\/strong> <span class=\"muted\">Selecciona proporciones y horno\u2026<\/span><\/div>\n<\/div>\n<div class=\"box\">\n<h3>2) Hotspots del taller<\/h3>\n<p>Haz clic en los puntos para ver el rol de cada componente. (Reemplaza la imagen por la de tu equipo).<\/p>\n<div id=\"hots-sala2\" class=\"hotspots\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/3\/30\/House_of_Life_-_Egyptian_Workshop_-_Hypothetical.jpg\/640px-House_of_Life_-_Egyptian_Workshop_-_Hypothetical.jpg\" alt=\"Taller egipcio (imagen de ejemplo)\" \/><br \/><button class=\"hotspot\" style=\"left: 20%; top: 30%;\" data-info=\"S\u00edlice: aporta la red de silicato; controla la matriz v\u00edtrea.\">SiO\u2082<\/button><br \/><button class=\"hotspot\" style=\"left: 48%; top: 60%;\" data-info=\"Calc\u00e1reo: fuente de Ca; estabiliza la cuprorivaita y act\u00faa con el fundente.\">CaCO\u2083<\/button><br \/><button class=\"hotspot\" style=\"left: 76%; top: 28%;\" data-info=\"Cobre: centro crom\u00f3foro; valencia y coordinaci\u00f3n definen el tono.\">CuO\/Cu\u2082O<\/button><br \/><button class=\"hotspot\" style=\"left: 62%; top: 78%;\" data-info=\"Natr\u00f3n\/cenizas: fundente s\u00f3dico; favorece fase amorfa y sinterizaci\u00f3n.\">Na\u2082CO\u2083<\/button><br \/><button class=\"hotspot\" style=\"left: 28%; top: 75%;\" data-info=\"Horno: 870\u20131100\u00b0C; control de atm\u00f3sfera (oxidante) y tiempo de cochura.\">Horno<\/button><\/div>\n<div class=\"box\"><em>Nota para el equipo:<\/em> A\u00f1adan un texto breve sobre <strong>granulometr\u00eda<\/strong>: por ejemplo, \u226420 \u00b5m \u2192 azul claro; ~60 \u00b5m \u2192 azul intenso.<\/div>\n<\/div>\n<\/div>\n<\/section>\n<p><!-- ========================= SALA 3 ========================= --><\/p>\n<section id=\"sala3\">\n<h2>\ud83c\udf3f Sala 3 \u00b7 El jard\u00edn de los tintes vivos<\/h2>\n<p class=\"meta\">Tema: \u00edndigo, cochinilla, alizarina, Murex, alumbre (mordiente), fermentaci\u00f3n\/oxidaci\u00f3n.<\/p>\n<div class=\"box instr\">\n<h3>Instrucciones para el equipo<\/h3>\n<ol>\n<li>Esquematicen un <strong>ciclo de cuba de \u00edndigo<\/strong> (reducci\u00f3n \u2192 oxidaci\u00f3n) con pasos y tiempos.<\/li>\n<li>Dise\u00f1en una actividad de <strong>emparejamiento<\/strong> mol\u00e9cula \u2194 fuente \u2194 proceso.<\/li>\n<li>Incluyan un breve guion de audio \u201cVoz del tintorero\u201d.<\/li>\n<\/ol>\n<\/div>\n<div class=\"grid grid-2\">\n<div class=\"box\">\n<h3>1) Matching (arrastrable)<\/h3>\n<p>Arrastra cada t\u00e9rmino al recuadro correcto.<\/p>\n<div id=\"chips-sala3\" class=\"row\">\n<div class=\"chip\" draggable=\"true\" data-target=\"molec\">Indigotina<\/div>\n<div class=\"chip\" draggable=\"true\" data-target=\"fuente\">Cochinilla<\/div>\n<div class=\"chip\" draggable=\"true\" data-target=\"proc\">Fermentaci\u00f3n<\/div>\n<div class=\"chip\" draggable=\"true\" data-target=\"molec\">\u00c1cido carm\u00ednico<\/div>\n<div class=\"chip\" draggable=\"true\" data-target=\"fuente\">Murex<\/div>\n<div class=\"chip\" draggable=\"true\" data-target=\"proc\">Mordiente<\/div>\n<\/div>\n<div class=\"grid grid-3\">\n<div>\n<p class=\"pill\">Mol\u00e9cula<\/p>\n<div class=\"target\" data-accept=\"molec\">\u00a0<\/div>\n<\/div>\n<div>\n<p class=\"pill\">Fuente<\/p>\n<div class=\"target\" data-accept=\"fuente\">\u00a0<\/div>\n<\/div>\n<div>\n<p class=\"pill\">Proceso<\/p>\n<div class=\"target\" data-accept=\"proc\">\u00a0<\/div>\n<\/div>\n<\/div>\n<div class=\"row\" style=\"margin-top: .6rem;\"><button class=\"btn alt\">Revisar<\/button><br \/><button class=\"btn ghost\">Reiniciar<\/button><br \/><span id=\"dnd-msg-3\" class=\"muted\">Asigna todos los chips.<\/span><\/div>\n<\/div>\n<div class=\"box\">\n<h3>2) Voz del tintorero (guion)<\/h3>\n<p>Escribe un guion de 60\u201390 segundos (luego lo grabar\u00e1n):<\/p>\n<ul class=\"muted\">\n<li>Describe la <strong>cuba<\/strong>, el olor, el color antes y despu\u00e9s de la <strong>oxidaci\u00f3n<\/strong>.<\/li>\n<li>Menciona un <strong>mordiente<\/strong> (alumbre) y su efecto en la fijaci\u00f3n.<\/li>\n<li>Compara un tinte vegetal con el extra\u00eddo de <strong>moluscos<\/strong> (valor social y costo).<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/section>\n<p><!-- ========================= SALA 4 ========================= --><\/p>\n<section id=\"sala4\">\n<h2>\u2697\ufe0f Sala 4 \u00b7 Del alquitr\u00e1n al laboratorio<\/h2>\n<p class=\"meta\">Tema: Perkin, anilina, mauve\u00edna, Hofmann, Kekul\u00e9, quinina, cronolog\u00eda y reacciones.<\/p>\n<div class=\"box instr\">\n<h3>Instrucciones para el equipo<\/h3>\n<ol>\n<li>Construyan una <strong>l\u00ednea de tiempo<\/strong> (Perkin, Hofmann, Kekul\u00e9, Graebe) con eventos clave.<\/li>\n<li>Incluyan un <strong>quiz<\/strong> sobre el intento de s\u00edntesis de quinina y el rol del <strong>dicromato<\/strong>.<\/li>\n<li>Opcional: una mini simulaci\u00f3n de \u201claboratorio\u201d con decisiones sobre oxidaci\u00f3n.<\/li>\n<\/ol>\n<\/div>\n<div class=\"grid grid-2\">\n<div class=\"box\">\n<h3>1) Timeline<\/h3>\n<div id=\"tl\" class=\"timeline\">\n<div class=\"tl-item\"><strong>1856 \u00b7 Perkin<\/strong> \u2014 Oxida <em>anilina<\/em> y obtiene <em>mauve\u00edna<\/em>.<\/div>\n<div class=\"tl-item\"><strong>1865 \u00b7 Kekul\u00e9<\/strong> \u2014 Propone el anillo de <em>benceno<\/em>.<\/div>\n<div class=\"tl-item\"><strong>1868 \u00b7 Graebe &amp; Liebermann<\/strong> \u2014 <em>Alizarina<\/em> sint\u00e9tica.<\/div>\n<div class=\"tl-item\"><strong>1870s \u00b7 Ehrlich (pr\u00f3logo)<\/strong> \u2014 Tintes como base de <em>quimioterapia<\/em>.<\/div>\n<\/div>\n<p><button class=\"btn ghost\">A\u00f1adir evento<\/button><\/p>\n<\/div>\n<div class=\"box\">\n<h3>2) Quiz (redox de Perkin)<\/h3>\n<div id=\"quiz-sala4\" class=\"quiz\">\n<div class=\"radio\"><input id=\"q4a\" name=\"q4\" type=\"radio\" value=\"ok\" \/><label for=\"q4a\">Oxidante: <strong>dicromato<\/strong>; sustrato: <strong>anilina<\/strong>; producto: mezcla violeta (mauve\u00edna).<\/label><\/div>\n<div class=\"radio\"><input id=\"q4b\" name=\"q4\" type=\"radio\" value=\"no\" \/><label for=\"q4b\">Reductante: zinc; sustrato: antraceno; producto: quinina.<\/label><\/div>\n<div class=\"radio\"><input id=\"q4c\" name=\"q4\" type=\"radio\" value=\"no\" \/><label for=\"q4c\">Oxidante: permanganato; sustrato: fenol; producto: \u00edndigo.<\/label><\/div>\n<p><button class=\"btn\">Comprobar<\/button><\/p>\n<div id=\"score-sala4\" class=\"score muted\">\n<h3>3) El Sue\u00f1o de Kelul\u00e9<img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-128 alignleft\" src=\"https:\/\/avat.uprrp.edu\/cocreacion\/wp-content\/uploads\/sites\/7\/2025\/10\/El-sueno-de-Kekule_-La-serpiente-200x300.png\" alt=\"\" width=\"200\" height=\"300\" srcset=\"https:\/\/avat.uprrp.edu\/cocreacion\/wp-content\/uploads\/sites\/7\/2025\/10\/El-sueno-de-Kekule_-La-serpiente-200x300.png 200w, https:\/\/avat.uprrp.edu\/cocreacion\/wp-content\/uploads\/sites\/7\/2025\/10\/El-sueno-de-Kekule_-La-serpiente-683x1024.png 683w, https:\/\/avat.uprrp.edu\/cocreacion\/wp-content\/uploads\/sites\/7\/2025\/10\/El-sueno-de-Kekule_-La-serpiente-768x1152.png 768w, https:\/\/avat.uprrp.edu\/cocreacion\/wp-content\/uploads\/sites\/7\/2025\/10\/El-sueno-de-Kekule_-La-serpiente.png 1024w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/h3>\n<hr \/>\n<p><span style=\"color: var(--ast-global-color-2); font-size: 1.875rem; font-weight: 600; text-align: center; background-color: var(--ast-global-color-4);\">Parecia una serpiente mordiendo su propia cola<\/span><\/p>\n<h2>\u00a0<\/h2>\n<h1><span style=\"color: var(--ast-global-color-2); font-size: 1.875rem; font-weight: 600; text-align: center; background-color: var(--ast-global-color-4);\">\ud83e\uddec Sala 5 \u00b7 Pigmentos del futuro<\/span><\/h1>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<section id=\"sala5\">\n<p class=\"meta\">Tema: petroqu\u00edmica vs bio, color estructural, IA, sostenibilidad y reflexi\u00f3n cr\u00edtica.<\/p>\n<div class=\"box instr\">\n<h3>Instrucciones para el equipo<\/h3>\n<ol>\n<li>Redacten un breve ensayo comparando <strong>cuprorivaita<\/strong> y un <strong>quantum dot<\/strong> (mecanismo del color: d\u2013d vs confinamiento cu\u00e1ntico).<\/li>\n<li>Arrastren t\u00e9rminos modernos para completar enunciados.<\/li>\n<li>Opcional: dise\u00f1en una pregunta abierta sobre impacto ambiental y econom\u00eda circular.<\/li>\n<\/ol>\n<\/div>\n<div class=\"grid grid-2\">\n<div class=\"box\">\n<h3>1) Ensayo breve<\/h3>\n<\/div>\n<div class=\"box\">\n<h3>2) Drag-text (moderno)<\/h3>\n<p>Arrastra los t\u00e9rminos a los espacios en blanco entre corchetes.<\/p>\n<div id=\"chips-sala5\" class=\"row\">\n<div class=\"chip\" draggable=\"true\" data-token=\"[nanotecnolog\u00eda]\">nanotecnolog\u00eda<\/div>\n<div class=\"chip\" draggable=\"true\" data-token=\"[biotinte]\">biotinte<\/div>\n<div class=\"chip\" draggable=\"true\" data-token=\"[qu\u00edmica verde]\">qu\u00edmica verde<\/div>\n<div class=\"chip\" draggable=\"true\" data-token=\"[sostenibilidad]\">sostenibilidad<\/div>\n<\/div>\n<div id=\"dragtext-sala5\" class=\"box\">La transici\u00f3n desde los colorantes de anilina hacia pigmentos inspirados en la biolog\u00eda exige aplicar y repensar procesos con . Los son una v\u00eda prometedora para integrar la en la cadena textil.<\/div>\n<div class=\"row\" style=\"margin-top: .6rem;\"><button class=\"btn alt\">Revisar<\/button><br \/><button class=\"btn ghost\">Reiniciar<\/button><br \/><span id=\"dt-msg\" class=\"muted\">Coloca cada chip en su espacio correspondiente.<\/span><\/div>\n<\/div>\n<\/div>\n<\/section>\n<footer>Museo de los Colores \u00b7 Plantilla de cocreaci\u00f3n (HTML base). Esta p\u00e1gina est\u00e1 pensada para migrar f\u00e1cilmente a H5P (Course Presentation, Drag &amp; Drop, Branching Scenario, Timeline, Image Hotspots).<\/footer>\n<p><script><br \/>\n\/\/ ======= Quiz simple (selecci\u00f3n \u00fanica)<br \/>\nfunction gradeQuiz(containerId, outId){<br \/>\n  const c = document.getElementById(containerId);<br \/>\n  const out = document.getElementById(outId);<br \/>\n  if(!c){return}<br \/>\n  const ok = c.querySelector('input[type=\"radio\"][value=\"ok\"]:checked');<br \/>\n  out.textContent = ok ? \"\u2705 Correcto\" : \"\u274c Revisa tu elecci\u00f3n\";<br \/>\n  out.className = \"score \" + (ok ? \"success\" : \"error\");<br \/>\n}<\/p>\n<p>\/\/ ======= Drag & Drop gen\u00e9rico (por data-target \/ data-accept)<br \/>\nlet dragSrc = null;<br \/>\ndocument.addEventListener('dragstart', (e)=>{<br \/>\n  const t = e.target;<br \/>\n  if(t.classList.contains('chip')){<br \/>\n    dragSrc = t;<br \/>\n    t.style.opacity = .6;<br \/>\n    e.dataTransfer.setData('text\/plain', t.textContent.trim());<br \/>\n  }<br \/>\n});<br \/>\ndocument.addEventListener('dragend', (e)=>{<br \/>\n  const t = e.target;<br \/>\n  if(t.classList.contains('chip')) t.style.opacity = 1;<br \/>\n});<br \/>\ndocument.addEventListener('dragover', (e)=>{<br \/>\n  if(e.target.classList.contains('target')) e.preventDefault();<br \/>\n});<br \/>\ndocument.addEventListener('drop', (e)=>{<br \/>\n  const targ = e.target;<br \/>\n  if(targ.classList.contains('target') && dragSrc){<br \/>\n    e.preventDefault();<br \/>\n    \/\/ For Sala 1 & 3 (category style)<br \/>\n    const accept = targ.dataset.accept;<br \/>\n    const need = dragSrc.dataset.target;<br \/>\n    \/\/ For Sala 5 drag-text (token style)<br \/>\n    const token = targ.dataset.token;<br \/>\n    const chipToken = dragSrc.dataset.token;<br \/>\n    if(accept){<br \/>\n      targ.appendChild(dragSrc);<br \/>\n    }else if(token){<br \/>\n      \/\/ Allow only one chip inside token target<br \/>\n      if(targ.firstElementChild){return}<br \/>\n      targ.appendChild(dragSrc);<br \/>\n    }<br \/>\n  }<br \/>\n});<br \/>\nfunction checkDnD(scopeSel){<br \/>\n  const scope = document.querySelector(scopeSel);<br \/>\n  const chips = scope.querySelectorAll('.chip');<br \/>\n  let good=0, total=0;<br \/>\n  chips.forEach(ch=>{<br \/>\n    total++;<br \/>\n    const parent = ch.parentElement;<br \/>\n    if(parent && parent.classList.contains('target')){<br \/>\n      const needed = parent.dataset.accept;<br \/>\n      if(needed === ch.dataset.target) good++;<br \/>\n    }<br \/>\n  });<br \/>\n  const msg = document.querySelector(scopeSel.includes('sala1') ? '#dnd-msg-1' : '#dnd-msg-3');<br \/>\n  if(msg){<br \/>\n    if(good===total) {msg.textContent = \"\u2705 Todo correcto\"; msg.className=\"success\"}<br \/>\n    else {msg.textContent = \"\u26a0\ufe0f \"+good+\" de \"+total+\" correctos (puedes volver a intentar)\"; msg.className=\"error\"}<br \/>\n  }<br \/>\n}<br \/>\nfunction resetDnD(scopeSel){<br \/>\n  const scope = document.querySelector(scopeSel);<br \/>\n  const chips = scope.querySelectorAll('.chip');<br \/>\n  const pool = scope; \/\/ back to source row<br \/>\n  chips.forEach(ch=> pool.appendChild(ch));<br \/>\n  const msg = document.querySelector(scopeSel.includes('sala1') ? '#dnd-msg-1' : '#dnd-msg-3');<br \/>\n  if(msg){ msg.textContent = \"Arrastra y suelta para asignar.\"; msg.className=\"muted\"}<br \/>\n}<\/p>\n<p>\/\/ ======= Hotspots (toggle info)<br \/>\ndocument.querySelectorAll('.hotspot').forEach(btn=>{<br \/>\n  btn.addEventListener('click', ()=>{<br \/>\n    const open = btn.getAttribute('data-open') === '1';<br \/>\n    if(open){<br \/>\n      btn.setAttribute('data-open','0');<br \/>\n      btn.textContent = btn.textContent.split(' \u2022 ')[0];<br \/>\n      btn.title='';<br \/>\n    } else {<br \/>\n      btn.setAttribute('data-open','1');<br \/>\n      btn.textContent = btn.textContent.split(' \u2022 ')[0] + ' \u2022 info';<br \/>\n      btn.title = btn.dataset.info;<br \/>\n      alert(btn.dataset.info);<br \/>\n    }<br \/>\n  })<br \/>\n});<\/p>\n<p>\/\/ ======= Sala 2 branching (receta)<br \/>\nconst recipeState = {prop:null, atm:null};<br \/>\nfunction setRecipe(kind, value, el){<br \/>\n  recipeState[kind] = value;<br \/>\n  \/\/ UI highlight<br \/>\n  el.parentElement.querySelectorAll('button').forEach(b=> b.classList.remove('selected'));<br \/>\n  el.classList.add('selected');<br \/>\n  renderRecipe();<br \/>\n}<br \/>\nfunction renderRecipe(){<br \/>\n  const out = document.getElementById('resultado-sala2');<br \/>\n  const {prop, atm} = recipeState;<br \/>\n  if(!prop || !atm){ out.innerHTML = \"<strong>Resultado:<\/strong> <span class='muted'>Selecciona proporciones y horno\u2026<\/span>\"; return; }<br \/>\n  let result = \"\";<br \/>\n  if(prop==='azul' && atm==='azul'){<br \/>\n    result = \"\ud83c\udfaf <strong>Azul Egipcio<\/strong>: cristalizaci\u00f3n de <em>cuprorivaita<\/em> (CaCuSi\u2084O\u2081\u2080) en matriz v\u00edtrea. Tono definido por granos 20\u201360 \u00b5m.\";<br \/>\n  } else if(prop==='verde' && atm==='verde'){<br \/>\n    result = \"\ud83c\udf3f <strong>Verde Egipcio<\/strong>: mayor fundente s\u00f3dico, menor Cu \u2192 fase amorfa m\u00e1s rica, tono turquesa\/verde.\";<br \/>\n  } else {<br \/>\n    result = \"\u26a0\ufe0f <strong>Mezcla fallida<\/strong>: atm\u00f3sfera\/temperatura inadecuadas \u2192 vitrificado amorfo sin fase cristalina \u00fatil.\";<br \/>\n  }<br \/>\n  out.innerHTML = \"<strong>Resultado:<\/strong> \" + result;<br \/>\n}<\/p>\n<p>\/\/ ======= Sala 4 timeline: a\u00f1adir tarjeta<br \/>\nfunction addTimeline(){<br \/>\n  const ev = prompt(\"A\u00f1ade un evento (a\u00f1o \u00b7 descripci\u00f3n breve):\");<br \/>\n  if(!ev) return;<br \/>\n  const div = document.createElement('div');<br \/>\n  div.className='tl-item';<br \/>\n  div.innerHTML = \"<strong>\"+ev.split('\u00b7')[0].trim()+\"<\/strong> \u2014 \"+ev.split('\u00b7').slice(1).join('\u00b7').trim();<br \/>\n  document.getElementById('tl').appendChild(div);<br \/>\n}<\/p>\n<p>\/\/ ======= Sala 5 drag-text (token match)<br \/>\nfunction checkDragText(poolSel, targetSel){<br \/>\n  const pool = document.querySelector(poolSel);<br \/>\n  const targets = document.querySelector(targetSel).querySelectorAll('.target');<br \/>\n  let ok = 0, total = targets.length;<br \/>\n  targets.forEach(t=>{<br \/>\n    const chip = t.querySelector('.chip');<br \/>\n    if(chip && chip.dataset.token === t.dataset.token) ok++;<br \/>\n  });<br \/>\n  const msg = document.getElementById('dt-msg');<br \/>\n  if(ok===total){ msg.textContent = \"\u2705 Perfecto: \"+ok+\"\/\"+total; msg.className=\"success\"; }<br \/>\n  else{ msg.textContent = \"\u26a0\ufe0f \"+ok+\"\/\"+total+\" correctos. Ajusta tus elecciones.\"; msg.className=\"error\"; }<br \/>\n}<br \/>\nfunction resetDragText(poolSel, targetSel){<br \/>\n  const pool = document.querySelector(poolSel);<br \/>\n  const targets = document.querySelector(targetSel).querySelectorAll('.target .chip');<br \/>\n  targets.forEach(ch=> pool.appendChild(ch));<br \/>\n  const msg = document.getElementById('dt-msg');<br \/>\n  msg.textContent = \"Coloca cada chip en su espacio correspondiente.\";<br \/>\n  msg.className = \"muted\";<br \/>\n}<br \/>\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Proyecto de concreci\u00f3n con estudiantes del curso CIFI 4074 Ciencia de Materiales de Arte donde recorremos&nbsp;la historia del color \u2014desde [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":148,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[2,3],"tags":[],"class_list":["post-108","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cocreacion","category-proyectos"],"_links":{"self":[{"href":"https:\/\/avat.uprrp.edu\/cocreacion\/wp-json\/wp\/v2\/posts\/108","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/avat.uprrp.edu\/cocreacion\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/avat.uprrp.edu\/cocreacion\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/avat.uprrp.edu\/cocreacion\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/avat.uprrp.edu\/cocreacion\/wp-json\/wp\/v2\/comments?post=108"}],"version-history":[{"count":24,"href":"https:\/\/avat.uprrp.edu\/cocreacion\/wp-json\/wp\/v2\/posts\/108\/revisions"}],"predecessor-version":[{"id":175,"href":"https:\/\/avat.uprrp.edu\/cocreacion\/wp-json\/wp\/v2\/posts\/108\/revisions\/175"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/avat.uprrp.edu\/cocreacion\/wp-json\/wp\/v2\/media\/148"}],"wp:attachment":[{"href":"https:\/\/avat.uprrp.edu\/cocreacion\/wp-json\/wp\/v2\/media?parent=108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/avat.uprrp.edu\/cocreacion\/wp-json\/wp\/v2\/categories?post=108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/avat.uprrp.edu\/cocreacion\/wp-json\/wp\/v2\/tags?post=108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}