28:null 29:["$","title",null,{"children":"Dia 2 — Introducció a HTML, CSS i JS | Visualization for Transparency Foundation (Fundació ViT) | Observable"}] 2e:T426,

Hola, ${nom2}! ${emojiColor(color2)}

El teu color preferit és ${color2}.
Sabies que el teu color diu molt de tu?

${missatgePersonalitzat (color2)}

2f:[] 2c:{"id":"7c4eb48018bc96b5","slug":null,"title":"Dia 2 — Introducció a HTML, CSS i JS","thumbnail":"2ae18825050c253dba8ba69c0d3c34977ce5b220aa8c2188cdf9fc2476aa73e6","access_level":"public","create_time":"$D2025-06-18T08:52:11.063Z","update_time":"$D2025-07-02T07:21:15.656Z","view_time":null,"first_public_time":"$D2025-07-02T08:04:32.089Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4bce174a609780f2","login":"fndvit","name":"Visualization for Transparency Foundation (Fundació ViT)","avatar_url":"https://avatars-next.observableusercontent.com/754d2d5dd6f85a7606d03844ce81907501d4d8a384ffa6111f47cb5e91b16b8a","tier":"pro_2024"},"version":267,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0e84a18974fa439f","login":"laia","name":"Laia Verdaguer","avatar_url":"https://avatars-next.observableusercontent.com/bb14ccce353f5179ee04603be9238f8225908c8faa211dfb96bc93418084f4f6","tier":null}],"members":[{"type":"team","id":"4bce174a609780f2","login":"fndvit","name":"Visualization for Transparency Foundation (Fundació ViT)","avatar_url":"https://avatars-next.observableusercontent.com/754d2d5dd6f85a7606d03844ce81907501d4d8a384ffa6111f47cb5e91b16b8a","tier":"pro_2024","role":"editor"},{"type":"individual","id":"0e84a18974fa439f","login":"laia","name":"Laia Verdaguer","avatar_url":"https://avatars-next.observableusercontent.com/bb14ccce353f5179ee04603be9238f8225908c8faa211dfb96bc93418084f4f6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"24ed33e539e5f14f","slug":"retech","title":"30-Day Women Dataviz Workshop","owner":{"id":"4bce174a609780f2","login":"fndvit","name":"Visualization for Transparency Foundation (Fundació ViT)"}},"type":"notebook","body":{"titling":"auto","title":"Dia 2 — Introducció a HTML, CSS i JS","cells":[{"id":0,"value":"# Dia 2 — Introducció a HTML, CSS i JS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":106,"value":"## 🎯 Objectiu de la sessió\nAprendre a utilitzar HTML, CSS i JavaScript dins de notebooks d’Observable. Entendre com estructurar una petita targeta visual utilitzant codi HTML, com afegir estils amb CSS i com incorporar interacció i lògica amb JavaScript.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":109,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":111,"value":"### 🧱 HTML — Estructura\nHTML és el llenguatge que defineix l’estructura del contingut.\nFunciona amb etiquetes com `

` (títol), `
` (paràgraf), `
` (contenidor) o `` (text inline).\nCada etiqueta pot tenir atributs, com per exemple style=\"\" per afegir estil directament.\n\nEtiquetes bàsiques HTML","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"
Titol 1
\n
Titol 2
\n
Titol 3
\n\n
\n Contenidor per agrupar elements\n
\n

\n
Paràgraf de text.
\n
L'etiqueta span serveix per modificar petits trossos de text
\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":117,"value":"Exemple bàsic","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":119,"value":"
Hola, món!
\n
Aquest és el meu primer text en HTML.
\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":121,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"### 🎨 CSS — Estil\nCSS ens permet donar color, forma i estil al nostre contingut HTML. A Observable, podem escriure les propietats CSS directament dins del style=\"\".\n\nPropietats bàsiques de CSS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"
Hola!
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":203,"value":"
Hola!
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":206,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":128,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":130,"value":"### 🧠 JavaScript — Lògica\nJavaScript ens permet controlar el contingut.\nPodem definir variables, escriure funcions i modificar elements en funció del que passa al notebook.\n\nSintaxis bàsica de Javascript","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"function saluda(nom) {\n return `Bon dia, ${nom}!`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"saluda(\"noies\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"També podem fer operacions amb variables:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"name = \"Laia\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"missatge = `El meu nom és ${name}!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"## EXERCICI\n🎯 Objectiu: Crear una petita targeta amb el teu nom i color preferit, utilitzant HTML, CSS i JS.\n\n\nPAS 1 — Crea una variables amb el teu nom i un input per capturar el teu color preferit:\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"nom = \"Alumna\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"viewof color = Inputs.color({\n label: \"Tria el teu color preferit\",\n value: \"#ec8383\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"PAS 2 — Mostra una targeta HTML amb el teu nom i posa el color de fons amb el color triat\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":92,"value":"
\n
Hola, ${nom}!
\n
","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":96,"value":"PAS 3 — Crea una funció que mostri el color i posa'l a la targeta:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":221,"value":"function missatgeColor(color) {\n return `El teu color preferit és ${color}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"missatgeColor(color)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"
\n
Hola, ${nom}!
\n
${missatgeColor(color)}
\n
","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":153,"value":"Porta a un nivell extrem la targeta, let's get creative;)
\n(Optional per fer a casa) \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"viewof nom2 = Inputs.text({\n label: \"Posa el teu nom\",\n placeholder: \"Entra el teu nom\",\n value: \"Alumna\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"viewof color2 = Inputs.color({\n label: \"Tria el teu color preferit\",\n value: \"#ec8383\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"function missatgePersonalitzat(color) {\n return color === \"#ffffff\" || color === '#000000'\n ? \"T'agraden els extrems;)\"\n : \"Una elecció amb estil! 😊\";\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"missatgePersonalitzat(color2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"function textColorPerFons(hex) {\n const r = parseInt(hex.slice(1, 3), 16);\n const g = parseInt(hex.slice(3, 5), 16);\n const b = parseInt(hex.slice(5, 7), 16);\n\n const brightness = (r * 299 + g * 587 + b * 114) / 1000;\n\n return brightness < 128 ? \"#ffffff\" : \"#000000\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"function emojiColor(hex) {\n const r = parseInt(hex.slice(1, 3), 16);\n const g = parseInt(hex.slice(3, 5), 16);\n const b = parseInt(hex.slice(5, 7), 16);\n\n // Obtenir color dominant\n if (r > g && r > b) return \"🔥\"; // vermellós\n if (g > r && g > b) return \"🌿\"; // verdós\n if (b > r && b > g) return \"💧\"; // blavós\n\n // Si són iguals o semblants\n if (r === g && g === b) return \"⚪\"; // gris/neutre\n return \"✨\"; // per qualsevol altre cas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"$2e","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W2f","stdlib":"1"}} 2d:"$2c:body"