Sketch di base per un minisito

Codice di base

Per creare un minisito sperimentale, evitando la creazione dei file HTML e CSS che richiederebbe conoscenze specifiche, è possibile partire da uno sketch di base con i codici minimi già presenti:

Sketch di base

Per usarlo è sufficiente:

duplicarlo dal proprio account del Web Editor [menu: File / Duplicate],
incollare il proprio codice p5.js nel file “sketch.js” e
aggiungere eventuali file usati nel progetto (audio, font, altri script, ecc.).

Strutturazione dello sketch

I file presenti all’interno sketch di base, visualizzabili attraverso l’icona “>” visibile in alto a sinistra nel Web Editor, sono:

Sketch Files

NOMEAUDIO.mp3

È un file audio caricato dallo sketch e analizzato per ottenere i parametri di generazione della parte visiva. Per l’audio si possono usare anche formati diversi ma è meglio evitare quelli senza compressione (ad es. WAV o FLAC) e orientarsi sull’MP3, che rimane il formato con il miglior supporto dei browser anche meno recenti. Il nome sarà ovviamente diverso da “NOMEAUDIO” ma si consiglia di evitare nomi lunghi con spazi e caratteri speciali.
Lo stesso vale per qualsiasi altro file (immagini, testo, dati, ecc.) che è possibile leggere negli sketch con le istruzioni loadQualcosa().

index.html

È il primo file letto dal browser e contiene le informazioni sulla pagina, tutti gli elementi (canvas, testi, immagini, ecc.) e i riferimenti ai codici JavaScript e CSS salvati in file esterni. Nello sketch di base è già presente buona parte del codice ma le informazioni strettamente dipendenti dallo sketch (evidenziate in maiuscolo nel file) devono ovviamente essere ridefinite.

minisito.css

È il file che definisce l’aspetto (colori, font, dimensioni, posizioni, ecc.) di tutti gli elementi inseriti nel corpo del file “index.html”. In linea di massima si può evitare di modificarlo ma sono stati messi in evidenza alcuni valori che possono tornare utili per impostare proprietà cromatiche o tipografiche più coerenti con la grafica del proprio sketch [vedi Modifiche al minisito].

minisito.js

Contiene gli script usati per far funzionare l’interazione con il tasto audio e il pannello delle informazioni, e non deve essere né modificato né eliminato.

preview.png

È l’immagine che verrà usata nella condivisione sui social network. La risoluzione consigliata è di 1200 x 630 pixel o superiore, ma sempre con un rapporto larghezza:altezza di 1,91:1. Le modalità di creazione e caricamento sono le stesse usate per le esercitazioni.

sketch.js

È il codice dello sketch p5.js che può essere sviluppato a partire da quello presente o sostituito completamente. Si consiglia di impostare il codice in modo da gestire la visualizzazione a tutta pagina [con windowWidth, windowHeight e windowResized()] ma si può utilizzare anche un canvas a dimensione fissa che verrà centrato automaticamente. In quest’ultimo caso potrebbe essere necessario modificare il colore della pagina del minisito [vedi modifiche cromatiche].

Inserimento delle informazioni

Le metainformazioni andranno inserite nel blocco <head></head> del file “index.html” sostituendo i testi in maiuscolo e seguendo, per quanto possibile, le relative indicazioni. Le informazioni del pannello andranno invece inserite all’interno del blocco <body></body>:

  <!DOCTYPE html>
<html>
<head>
  <!-- impostazioni base e inclusione file principali -->
  <!-- informazioni minime per i motori di ricerca -->
  <!-- informazioni minime per la condivisione sui social -->
</head>
<body>
  <!-- informazioni visualizzate al clic sul pulsante (?) -->
  <div id="pannello-info">
    ...
  </div>  
  <!-- pulsanti dell'audio e delle informazioni -->
  <!-- inclusione altri script e sketch.js -->
</body>
</html>

Si raccomanda di fare attenzione a non modificare o cancellare le parti diverse da quelle indicate in maiuscolo per non compromettere l’interpretazione del codice da parte dei browser.

Modifiche al minisito

Anche se non indispensabile, è possibile fare interventi nei codici HTML e CSS (ad esempio per armonizzare i colori dei pannelli a quelli del progetto) facendo riferimento alle seguenti risorse:

A complete guide to making web pages from scratch, una miniguida per principianti sulla creazione di una pagina web [da un po’ è senza immagini ma ancora comprensibile].
HTML basics (in italiano?), per capire un po’ meglio la sintassi dell’HTML.
CSS basics (in italiano?), per capire un po’ meglio la sintassi dei CSS.
Colors Tutorial, per capire come indicare i colori.
CSS Reference, con informazioni dettagliate su tutte le proprietà CSS.
Google Fonts, per usare un font diverso nel pannello delle informazioni.

Modifiche cromatiche

Se ci si vuole limitare a cambiare i colori del pannello delle informazioni si può intervenire nelle regole di #pannello-info:

  #pannello-info {
  background-color: rgba(0,0,0,0.9);  /* sfondo nero semitrasparente */
  color: #CCC;                        /* testo grigio chiaro */
  ...
}

Se lo sfondo e il pannello sono entrambi chiari, i pulsanti possono essere impostati con un colore scuro e senza ombra intervenendo nelle regole dei pulsanti:

  #pulsante-info, #pulsante-audio {
  ...
  color: #444;                       /* pulsanti grigio scuro */ 
  /* text-shadow: 0 0 3px black; */  /* riga da eliminare per togliere ombre */
  ...
}

Se il canvas non copre tutta l’area di visualizzazione, il colore della pagina può essere cambiato nelle regole del body:

  body {
  background-color: #444;  /* sfondo pagina grigio scuro */
  ...
}

Modifiche tipografiche

Su Google Fonts, una volta selezionati i font da usare, è necessario;

aprire il pannello “View selected families” [icona in alto a destra],
cliccare su “Get embed code” e
copiare i codici della sezione “Web / <link>” nei file…

“index.html”:

  <head>
    ...
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
</head>

e “minisito.css”:

  body {
    ...
    font-family: 'Nome Font Scelto', ...;
}