From f6c940e51c7670beb025ef2a8237be4b71190d1b Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Fri, 19 Jun 2026 06:42:22 +0000 Subject: [PATCH] palette: semantic and accessible navigation - Refactor landing page cards to semantic tags - Convert nested buttons to spans to maintain valid HTML - Add focus-visible styles for keyboard navigation - Remove redundant JS navigation logic - Improve subproject navigation consistency - Add Palette journal entry Co-authored-by: ISTEC-FOR340 <269002038+ISTEC-FOR340@users.noreply.github.com> --- .Jules/palette.md | 3 ++ index.html | 85 ++++++++++++++++++++-------------------- proyecto1/proyecto1.html | 70 ++++++++++++++++----------------- proyecto1/style.css | 9 +++++ proyecto2/proyecto2.html | 6 +-- proyecto2/style.css | 9 +++++ script.js | 17 +------- style.css | 16 +++++++- 8 files changed, 117 insertions(+), 98 deletions(-) create mode 100644 .Jules/palette.md diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 0000000..c7a4f89 --- /dev/null +++ b/.Jules/palette.md @@ -0,0 +1,3 @@ +## 2026-06-19 - Semantic Navigation Cards +**Learning:** Using `div` containers with `onclick` handlers for large navigation elements prevents native browser features (like middle-click to open in new tab) and breaks keyboard accessibility. When converting these to semantic `` tags, any nested ` - - -
-

The Weight of Words (Voice → Physics)

-

- Spoken words are converted into letters that move and fall under gravity. - Language becomes physical and temporary. -

- Concept: Speech transformed into matter. -

- -
- - - - - - + + + + +
+

Interactive Sketches

+

Examples of creative coding with p5.js – ISTEC

+
+ +
+ + +

Circle Matrix (Image → Particles)

+

+ Transform an image into a dynamic field of circles. + Each pixel becomes an interactive element that reacts to movement. +

+ Concept: Image as a system of autonomous particles. +

+ Open Sketch + + + +

The Weight of Words (Voice → Physics)

+

+ Spoken words are converted into letters that move and fall under gravity. + Language becomes physical and temporary. +

+ Concept: Speech transformed into matter. +

+ Open Sketch + + +
+ + + diff --git a/proyecto1/proyecto1.html b/proyecto1/proyecto1.html index c22da09..dcea080 100644 --- a/proyecto1/proyecto1.html +++ b/proyecto1/proyecto1.html @@ -1,40 +1,40 @@ - - - - + + + + - Circle Matrix Image + Circle Matrix Image - - - - - -
-

Circle Matrix

-

- Transform an image into a dynamic field of particles. - The image dissolves into circles that react to your presence. -

- -
- - - - - - -
-
- - - - - - - + + + + + +
+

Circle Matrix

+

+ Transform an image into a dynamic field of particles. + The image dissolves into circles that react to your presence. +

+ +
+ + + + + + +
+
+ + + ⬅ Back + + + + + + \ No newline at end of file diff --git a/proyecto1/style.css b/proyecto1/style.css index b562aca..09fed55 100644 --- a/proyecto1/style.css +++ b/proyecto1/style.css @@ -108,6 +108,15 @@ input[type="file"] { -webkit-backdrop-filter: blur(16px); transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); z-index: 100; + text-decoration: none; + outline: none; +} + +.back-btn:focus-visible { + background: rgba(255, 255, 255, 0.1); + transform: translateY(-2px); + border-color: var(--accent-color); + box-shadow: 0 0 0 4px var(--bg-color), 0 0 0 6px var(--accent-color); } .back-btn:hover { diff --git a/proyecto2/proyecto2.html b/proyecto2/proyecto2.html index e984f76..93dad31 100644 --- a/proyecto2/proyecto2.html +++ b/proyecto2/proyecto2.html @@ -1,5 +1,5 @@ - + @@ -15,9 +15,9 @@ - +
diff --git a/proyecto2/style.css b/proyecto2/style.css index fd6dfbb..7635562 100644 --- a/proyecto2/style.css +++ b/proyecto2/style.css @@ -143,6 +143,15 @@ input[type="range"]::-webkit-slider-thumb { -webkit-backdrop-filter: blur(16px); transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); z-index: 1000; + text-decoration: none; + outline: none; +} + +.back-btn:focus-visible { + background: rgba(255, 255, 255, 0.1); + transform: translateY(-2px); + border-color: var(--accent-color); + box-shadow: 0 0 0 4px var(--bg-color), 0 0 0 6px var(--accent-color); } .back-btn:hover { diff --git a/script.js b/script.js index 56bdf15..a13151f 100644 --- a/script.js +++ b/script.js @@ -1,16 +1 @@ -window.onload = function () { - const routes = { - "btn-p1": "proyecto1/proyecto1.html", - "btn-p2": "proyecto2/proyecto2.html" - }; - - Object.keys(routes).forEach(id => { - const element = document.getElementById(id); - - if (element) { - element.onclick = () => { - window.location.href = routes[id]; - }; - } - }); -}; +// No longer needed as we use semantic tags for navigation. diff --git a/style.css b/style.css index f563ad8..3b64d2f 100644 --- a/style.css +++ b/style.css @@ -79,8 +79,22 @@ header p { flex-direction: column; justify-content: space-between; position: relative; - overflow: hidden; + overflow: visible; animation: fadeInUp 0.8s ease-out both; + text-decoration: none; + outline: none; +} + +.card:focus-visible { + transform: translateY(-8px); + border-color: var(--accent-color); + box-shadow: 0 0 0 4px var(--bg-color), 0 0 0 6px var(--accent-color), 0 20px 40px rgba(0, 0, 0, 0.3); +} + +.card:focus-visible .btn { + background: var(--accent-gradient); + border-color: transparent; + box-shadow: 0 8px 16px rgba(56, 189, 248, 0.2); } .card:nth-child(2) {