Torna ai risultati

Cartella con più sketch e risorse condivise

  (agg. )

Strutturazione dei file

  • CARTELLA-DEGLI-SKETCH
    • assets
      • BITMAP.png
      • AUDIO.mp3
    • libs
      • p5.min.js
      • p5.sound.min.js
    • SKETCH-UNO
      • index.html   (sketch)
      • sketch.js
    • SKETCH-DUE
    • SKETCH-ECC
    • index.html   (principale)
    • style.css

index.html   (sketch)

// marks=6:53-6:56,7:21-7:29,8:21-8:29 marks2=6:56-6:65
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Titolo dello sketch</title>
        <link rel="stylesheet" type="text/css" href="../style.css">
        <script src="../libs/p5.min.js"></script>
        <script src="../libs/p5.sound.min.js"></script>
        <script src="sketch.js"></script>
    </head>
    <body>
    </body>
</html>

sketch.js

// marks=0:18-0:28,1:18-1:28 placeholders=0:28-0:34,1:28-1:33
img = loadImage( "../assets/BITMAP.png" );
snd = loadSound( "../assets/AUDIO.mp3" );

index.html   (principale)

// marks=12:21-12:32,16:21-16:32,20:21-20:32 marks2=6:53-6:62 placeholders=12:21-12:32,16:21-16:32,20:21-20:32
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Nome del progetto</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <section>
            <h1>Nome del progetto</h1>
            <p>Eventuali informazioni sul progetto</p>
            <a href="SKETCH-UNO/">
                <h2>Titolo dello sketch uno</h2>
                <p>Eventuali informazioni sullo sketch uno</p>
            </a>
            <a href="SKETCH-DUE/">
                <h2>Titolo dello sketch due</h2>
                <p>Eventuali informazioni sullo sketch due</p>
            </a>
            <a href="SKETCH-ECC/">
                <h2>Titolo dello sketch ecc</h2>
                <p>Eventuali informazioni sullo sketch ecc</p>
            </a>
        </section>
    </body>
</html>

style.css

html, body {
    height: 100%;
}
body {
    padding: 0;
    margin: 0;
    background-color: White;  /* colore della pagina */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.25;
    color: Black;  /* colore dei testi */
    display: flex;
    align-items: center;
    justify-content: center;
}
section {
    max-width: 600px;  /* larghezza massima del contenuto */
    padding: 0 40px;
}
a {
    text-decoration: none;
    color: Black;  /* colore dei link */
}
a:hover {
    color: DodgerBlue;  /* colore dei link evidenziati */
}
h1 {
    font-size: 28px;
    margin: 0 0 -8px;
}
h2 {
    font-size: 20px;
    margin: 34px 0 -8px;
}

I file "index.html" principale e "style.css" sono solo esemplificativi e possono essere personalizzati liberamente. Se il file "index.html" principale richiede modifiche sostanziali al file "style.css", si consiglia di creare, nella cartella principale, un file CSS specifico per gli sketch, ad esempio sketch.css:

html, body {
    height: 100%;
}
body {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

e di aggiornare il riferimento negli "index.html" di tutti gli sketch:

// marks2=0:48-0:58
<link rel="stylesheet" type="text/css" href="../sketch.css">