Pubblicare uno sketch su Glitch.me

Glitch.me

Registrazione e Log in

Se non si è già registrati (e non si usa abitualmente GitHub) si consiglia di farlo attraverso l’opzione “Email Magic Link”: Glitch.com Sign up

Altrimenti si può entrare direttamente: Glitch.com Log in

Creazione sito web su Glitch.com

• clic su “New Project” (in alto a destra)
• clic su “glitch-hello-website”

Definire nome dominio di terzo livello

• clic su Settings (nel pannello di sinistra)
• clic su Edit Project Details
• in “PROJECT NAME”, impostare il nome che deve apparire nell’URL prima di “glitch.me”, usando solo lettere, numeri e “-”, senza spazi

Test sito

• clic su PREVIEW, nella barra inferiore
• clic Preview in a new window

Modifica e creazione file di codice

File “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) devono ovviamente essere ridefinite:

  <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>

  <!-- informazioni minime per i motori di ricerca -->
  <title>TITOLO DEL PROGETTO (MAX 60 CARATTERI)</title>
  <meta name="description" content="DESCRIZIONE SINTETICA DEL PROGETTO (FRA 50 E 160 CARATTERI)" />
  <!-- informazioni minime per la condivisione sui social -->
  <meta property="og:type" content="website" />
  <meta property="og:title" content="TITOLO DEL PROGETTO (MAX 60 CARATTERI)" />
  <meta property="og:description" content="DESCRIZIONE SINTETICA DEL PROGETTO (FRA 50 E 160 CARATTERI)" />
  <meta property="og:url" content="https://DOMINIO-TERZO-LIVELLO.glitch.me" />
  <meta property="og:image" content="https://URL-IMMAGINE-PREVIEW" />
  <meta name="twitter:card" content="summary_large_image" />
</head>

<body>

  <!-- informazioni visualizzate al clic sul pulsante (?) -->
  <div id="pannello-info">
    <article>
      <h1>TITOLO DEL PROGETTO</h1>
      <p>AUTORI DEL PROGETTO</p>
      <hr>
      <p>INTRODUZIONE AL TEMA O FRASE EVOCATIVA</p>
      <p>DESCRIZIONE SINTETICA DEL PROGETTO</p>
      <p>INTERAZIONE: MOUSE, TASTO "C", ...</p>
      <hr>
      <p>Audio: 
        <a href="https://URLDELBRANO1/" target="_blank">"BRANO 1"</a> DI TIZIO, <!-- con link alla pagina del brano (non al file audio) -->
        "BRANO 2" DI <a href="https://URLDICAIO/" target="_blank">CAIO</a>      <!-- o link al sito del musicista, se manca pagina del brano -->
      </p>
    </article>
  </div>
  
  <button id="pulsante-audio" onclick="attivaDisattivaAudio()"><span class="lnr lnr-volume-high"></span></button>  <!-- eliminare riga se audio non serve -->
  <button id="pulsante-info" onclick="apriChiudiInfo()"><span class="lnr lnr-question-circle"></span></button>

  <!-- librerie e altri script utilizzati -->
  <script src="script.js"></script>
  <script src="sketch.js"></script>

</body>

</html>

• copiare e incollare questo codice nel file “index.html” del progetto Glitch.com

File “style.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 compatibili con la grafica del proprio sketch.

  html,
body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #000;                  /* colore sfondo pagina */
  font-family: Arial, Helvetica, sans-serif; /* font testo */
  font-size: 14px;                           /* altezza di base del testo */
  
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; 
}

canvas {
  display: block;
}

#pulsante-info, #pulsante-audio { 
  background-color: transparent; /* colore sfondo */
  color: #fff;                   /* colore icone */
  text-shadow: 0 0 3px black;    /* ombra icone */
  font-size: 20px;               /* altezza icone */

  position: absolute;
  right: 0;
  bottom: 0;
  padding: 12px 18px;
  border: none;
  text-align: center;
  outline: none;
  cursor: pointer;
  z-index: 1;
}

#pulsante-audio {
  right: auto;
  left: 0;
}

#pannello-info {
  background-color: rgba(0,0,0,.85); /* colore sfondo */
  color: #fff;                       /* colore testo */
  
  position: absolute;
  left: 0;
  top: 100%;
  right: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: wrap;
  transition: all 0.3s ease 0s;
  z-index: 1;
}

#pannello-info.aperto {
  top: 0;
  transition: all 0.6s ease 0s;
}

#pannello-info article {
  max-width: 600px; /* larghezza massima della descrizione */

  width: 100%;
  padding: 24px;
}

#pannello-info article > * {
  margin: 10px 0; 
}

#pannello-info h1 {
  font-size: 20px; /* altezza titolo principale */
}

#pannello-info hr {
  border: none;

  border-top: 1px solid rgba(255,255,255,.25); /* stile linea separatrice */
}

#pannello-info p {
  line-height: 1.33;
}

#pannello-info a { 
  color: #fc4; /* colore dei link */
  
  text-decoration: none;
}

#pannello-info a:hover {
  color: #ff0; /* colore link evidenziato */
}

• copiare e incollare questo codice nel file “style.css” del progetto Glitch.com

File “script.js”

Contiene script usati per implementare l’interazione nella pagina HTML. Nel caso specifico serve a gestire l’attivazione e la disattivazione dell’audio e l’apertura e la chiusure del pannello delle informazioni.

  // NON MODIFICARE E NON CANCELLARE

window.addEventListener("load", function() {
  
  let audioButton = document.getElementById("pulsante-audio");
  if (audioButton) {
    stopPropOf( audioButton );
  }
  let infoButton = document.getElementById("pulsante-info");
  stopPropOf( infoButton );
  let infoPanel = document.getElementById("pannello-info");
  stopPropOf( infoPanel );
  
  if (getAudioContext().state == 'suspended') {
    let audioIcon = document.querySelector("#pulsante-audio > span");
    if (audioIcon) {
      audioIcon.className = "lnr lnr-volume";
    } 
  }
});

function stopProp(e) {
    e.stopPropagation();
}
function stopPropOf( element ) {
  element.addEventListener("click", stopProp, false);
  element.addEventListener("mousedown", stopProp, false);
  element.addEventListener("mouseup", stopProp, false);  
  element.addEventListener("mousemove", stopProp, false);  
}

function apriChiudiInfo() {
  var info = document.getElementById("pannello-info");
  if (info.classList.contains("aperto")) {
    info.classList.remove("aperto")
  } else {
    info.classList.add("aperto")
  }
}

function attivaDisattivaAudio() {
  if (getAudioContext().state == 'suspended') {
    getAudioContext().resume();
    document.querySelector("#pulsante-audio > span").className = "lnr lnr-volume-high";
    attivaAudio();
  } else {
    if (getOutputVolume() > 0) {
      outputVolume(0);
      document.querySelector("#pulsante-audio > span").className = "lnr lnr-volume";
      disattivaAudio();
    } else {
      outputVolume(1);
      document.querySelector("#pulsante-audio > span").className = "lnr lnr-volume-high";
      attivaAudio();
    }
  }
}

function attivaAudio() {
  // può essere ridefenitita in sketch.js 
}

function disattivaAudio() {
  // può essere ridefenitita in sketch.js 
}

• copiare e incollare questo codice nel file “script.js” del progetto Glitch.com
• nell’area di anteprima a destra, provare ad aprire e chiudere il pannello delle informazioni con l’icona “(?)” in basso a destra

Modifica contenuto pannello informazioni

• passare al file index.html
• all’interno dei tag <article></article>…
• modificare le informazioni riportate in maiuscolo
• controllare correttezza cliccando di nuovo sull’icona “(?)”, sempre nell’area di anteprima

Creazione sketch p5.js

Aggiunta del file “sketch.js”

È il codice dello sketch p5.js che può essere definito esattamente come succederebbe nel Web Editor. Il codice si potrebbe inserire anche dentro “script.js” ma le prime volte è meglio tenere separata la gestione dell’interattività della pagina da quella dello sketch vero e proprio.

  // Questo codice può essere totalmente sostituito con
// un codice già pronto o può essere usato come base
// per uno sketch che cambia visualizzazione in relazione
// alle parti del brano audio definite con addCue().
//
// Crediti musicali:
// https://freemusicarchive.org/music/Bauchamp/Loop_Mania_Sampler_Pack/130_od_beat

let sound;
let soundPart;  // parte corrente dell'audio
let fft;
let centro;

function preload() {
  sound = loadSound("audio.mp3");
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  noFill();

  fft = new p5.FFT();

  sound.addCue(0.01, cueReached, "bum");   // parte "bum" all'inizio (0.0 sembra far perdere la notifica al riavvio)
  sound.addCue(4.2, cueReached, "bumcha"); // parte "bumcha" a partire dal secondo 4,2
  sound.addCue(7.8, cueReached, "cha");    // parte "cha" a partire dal secondo 7,8

  sound.playMode("restart"); // evita sovrapposizioni audio
  sound.setVolume(0.5); // solo per non spaventare la nonna
  sound.loop(); // audio che parte subito

  setupResizable();
}

function cueReached(val) {
  soundPart = val;
}

function setupResizable() {
  centro = createVector(width/2, height/2);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  setupResizable();
}

function draw() {
  
  fft.analyze();  // analizza frequenze (per getEnergy())
  
  // sfondo (in base alla parte dell'audio)
  if (soundPart == "bum") {
    background(192, 32, 0); // rosso scuro
  } else if (soundPart == "bumcha") {
    background(192, 155, 240); // violetto
  } else if (soundPart == "cha") {
    background(120, 210, 250); // azzurro
  }

  // cerchio spesso (se parte dell'audio è "bum" o "bumcha")
  if (soundPart == "bum" || soundPart == "bumcha") {
    let eBass = fft.getEnergy("bass");
    let diamBass = map(eBass, 0, 255, 0, 400);
    strokeWeight(12);
    stroke(0);
    circle(centro.x, centro.y, diamBass);
  }

  // cerchio sottile (se parte dell'audio è "bumcha" o "cha")
  if (soundPart == "bumcha" || soundPart == "cha") {
    let eTreble = fft.getEnergy("treble");
    let diamTreble = map(eTreble, 0, 255, 0, 800);
    strokeWeight(2);
    stroke(255);
    circle(centro.x, centro.y, diamTreble);
  }
}

// FUNZIONI CHIAMATE ATTRAVERSO ICONA ALTOPARLANTE

function attivaAudio() {  // se l'audio viene riattivato...
  sound.loop(); // riavvia il brano
}

function disattivaAudio() {  // se l'audio viene disattivato...
  sound.pause(); // metti in pausa il brano
}

• clic su “+” a destra di Files nel pannello di sinistra
• inserimento di “sketch.js” (senza virgolette) nel primo campo
• clic su Add This File
• copiare e incollare questo codice nel file “sketch.js” del progetto Glitch.com

Aggiunta file audio

• scaricare sul proprio computer il file audio.mp3 d’esempio
• nell’area di sinistra, cliccare su Assets
• clic su “UPLOAD AN ASSET”
• selezionare il file “audio.mp3” scaricato
• dopo il caricamento, cliccare sull’icona “audio.mp3”
• copiare l’URL con “Copy URL” e chiudere la finestrella
• spostarsi sul file “sketch.js”
• nella funzione preload(), sostituire “audio.mp3” con l’URL copiato
• se è tutto a posto, lo sketch dovrebbe funzionare correttamente
• per fermare l’audio, provare a cliccare sull’icona dell’altoparlante, nell’area di anteprima a destra, oppure chiudere il pannello di anteprima attraverso il tasto “PREVIEW” nella barra inferiore

Metainformazioni (per social network e motori di ricerca)

Modifica metainformazioni

• spostarsi sul file “index.html”
• nel blocco <head></head>, ridefinire le parti in maiuscolo con le informazioni da visualizzare nelle anteprime social e nei risultati dei motori di ricerca (Google, Bing, ecc.)
• escludere temporaneamente la definizione della proprietà “og:image”, definita nel prossimo passaggio

Aggiungere immagine (di anteprima)

• scaricare sul proprio computer il file preview.png d’esempio
• nell’area di sinistra, cliccare su Assets
• clic su “UPLOAD AN ASSET”
• selezionare il file “preview.png” scaricato
• dopo il caricamento, cliccare sull’icona “preview.png”
• copiare l’URL con “Copy URL” e chiudere la finestrella
• nel file “index.html”, sostituire “https://URL-IMMAGINE-PREVIEW” con l’URL copiato

Verifica metainformazioni

• copiare l’URL del microsito appena realizzato, ricavabile attraverso il tasto “PREVIEW” nella barra inferiore o aggiungendo il nome del progetto a “.glitch.me”, ad esempio:
  https://NOME-PROGETTO.glitch.me/
• aprire il sito OpenGraph
• nel campo a sinistra del tasto “Check Website”, inserire l’URL del microsito
• cliccare su “Check Website” e verificare la corretta visualizzazione delle informazioni

Le verifiche si possono fare anche con altri siti, come Social Share Preview o Meta Tags