Skip to content

🎨 Palette: Semantic and accessible navigation #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ISTEC-FOR340 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

🎨 Palette: Semantic and accessible navigation #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 `<a>` tags, any nested `<button>` elements must be converted to `<span>` to maintain valid HTML (no nested interactive elements) while preserving visual affordances.
**Action:** Always prefer semantic `<a>` tags for navigation cards. If the card contains a "button" visual, use a `<span>` styled as a button to avoid nesting interactive elements.
85 changes: 42 additions & 43 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,46 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Sketches – ISTEC</title>
<title>Interactive Sketches – ISTEC</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>

<header>
<h1>Interactive Sketches</h1>
<p>Examples of creative coding with p5.js – ISTEC</p>
</header>

<main class="container">

<div class="card" id="btn-p1">
<h2>Circle Matrix (Image → Particles)</h2>
<p>
Transform an image into a dynamic field of circles.
Each pixel becomes an interactive element that reacts to movement.
<br><br>
<strong>Concept:</strong> Image as a system of autonomous particles.
</p>
<button class="btn">Open Sketch</button>
</div>

<div class="card" id="btn-p2">
<h2>The Weight of Words (Voice → Physics)</h2>
<p>
Spoken words are converted into letters that move and fall under gravity.
Language becomes physical and temporary.
<br><br>
<strong>Concept:</strong> Speech transformed into matter.
</p>
<button class="btn">Open Sketch</button>
</div>

</main>

<script src="script.js"></script>
</body>
</html>
<link rel="stylesheet" href="style.css">
</head>
<body>

<header>
<h1>Interactive Sketches</h1>
<p>Examples of creative coding with p5.js – ISTEC</p>
</header>

<main class="container">

<a class="card" id="btn-p1" href="proyecto1/proyecto1.html">
<h2>Circle Matrix (Image → Particles)</h2>
<p>
Transform an image into a dynamic field of circles.
Each pixel becomes an interactive element that reacts to movement.
<br><br>
<strong>Concept:</strong> Image as a system of autonomous particles.
</p>
<span class="btn">Open Sketch</span>
</a>

<a class="card" id="btn-p2" href="proyecto2/proyecto2.html">
<h2>The Weight of Words (Voice → Physics)</h2>
<p>
Spoken words are converted into letters that move and fall under gravity.
Language becomes physical and temporary.
<br><br>
<strong>Concept:</strong> Speech transformed into matter.
</p>
<span class="btn">Open Sketch</span>
</a>

</main>

</body>
</html>
70 changes: 35 additions & 35 deletions proyecto1/proyecto1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circle Matrix Image</title>
<title>Circle Matrix Image</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- UI PANEL -->
<div class="ui-panel">
<h1>Circle Matrix</h1>
<p class="description">
Transform an image into a dynamic field of particles.
The image dissolves into circles that react to your presence.
</p>
<div class="controls">
<input type="file" id="imageLoader" accept="image/*">
<label>Columns <input type="range" id="cols" min="10" max="200" value="60"></label>
<label>Rows <input type="range" id="rows" min="10" max="200" value="60"></label>
<label>Circle Size <input type="range" id="radius" min="2" max="20" value="6"></label>
<label>Interaction Radius <input type="range" id="mouseSize" min="10" max="200" value="80"></label>
</div>
</div>
<button onclick="window.location.href='../index.html'" class="back-btn">
⬅ Back
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
<script src="sketch.js"></script>
</body>
<link rel="stylesheet" href="style.css">
</head>
<body>

<!-- UI PANEL -->
<div class="ui-panel">
<h1>Circle Matrix</h1>
<p class="description">
Transform an image into a dynamic field of particles.
The image dissolves into circles that react to your presence.
</p>

<div class="controls">
<input type="file" id="imageLoader" accept="image/*">

<label>Columns <input type="range" id="cols" min="10" max="200" value="60"></label>
<label>Rows <input type="range" id="rows" min="10" max="200" value="60"></label>
<label>Circle Size <input type="range" id="radius" min="2" max="20" value="6"></label>
<label>Interaction Radius <input type="range" id="mouseSize" min="10" max="200" value="80"></label>
</div>
</div>

<a href="../index.html" class="back-btn">
⬅ Back
</a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
<script src="sketch.js"></script>

</body>
</html>
9 changes: 9 additions & 0 deletions proyecto1/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
6 changes: 3 additions & 3 deletions proyecto2/proyecto2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="es">

<head>
<meta charset="utf-8" />
Expand All @@ -15,9 +15,9 @@
<body>

<!-- BACK -->
<button onclick="window.location.href='../index.html'" class="back-btn">
<a href="../index.html" class="back-btn">
⬅ Back
</button>
</a>

<!-- UI PANEL -->
<div id="gui">
Expand Down
9 changes: 9 additions & 0 deletions proyecto2/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
17 changes: 1 addition & 16 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 <a> tags for navigation.
16 changes: 15 additions & 1 deletion style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down