Passa al contenuto principale

Piano

Il Progetto​

Pianoforte interattivo sviluppato con CSS responsive, in cui il numero di tasti si adatta automaticamente alle dimensioni dello schermo tramite media query.

Codice Sorgente​

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Piano</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="piano">
      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
      <div class="keys">
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>

        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>

        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
      </div>
    </div>
  </body>
</html>

L’Esperienza di Sviluppo​

È stato molto rapido e allo stesso tempo estremamente utile dal punto di vista del responsive (non a caso il corso si chiama Responsive Web Design). Infatti, il numero di tasti del pianoforte varia in base alle dimensioni dello schermo.

Il collegamento con Refactoring UI​

Ho collegato questo progetto a un concetto fondamentale di Refactoring UI che sto studiando: le proporzioni perfette cambiano in base al contesto.

La rivelazione: non basta “rimpicciolire tutto” per il mobile. Ogni schermo ha le SUE proporzioni ottimali.

Il principio scoperto​

❌ Pensiero sbagliato: «Se desktop ha una proporzione di 2,5x, mobile deve avere 2,5x»

✅ Pensiero corretto: «Ogni schermo ha le SUE proporzioni ottimali»

L’analogia che mi ha colpito​

È come la differenza tra parlare in una stanza grande e in una stanza piccola:

  • Desktop (stanza grande): urli per il titolo (48px), parli normalmente per il testo (16px)
  • Mobile (stanza piccola): parli forte ma non urli per il titolo (24px), sussurri per il testo (14px)

Esempio concreto dal progetto​

/* Desktop - molto spazio disponibile */
#piano { width: 992px; }
.keys { width: 949px; }

/* Mobile - spazio limitato */
@media (max-width: 768px) {
  #piano { width: 358px; }
  .keys { width: 318px; }
}

Non è solo “più piccolo”, è proporzionalmente diverso per ogni contesto.

Cosa Ho Imparato​

  • Media query per il responsive design
  • Float e positioning per il layout dei tasti
  • Pseudo-elementi (::after) per creare i tasti neri
  • Il principio delle proporzioni contestuali di Refactoring UI
  • Overflow hidden per gestire il layout

Riflessione​

Questo progetto ha consolidato una comprensione fondamentale: il responsive design non è solo una questione tecnica, ma di proporzioni intelligenti che si adattano al contesto d’uso.

Prossimo Progetto: Technical Documentation Page (Certification Project)