Gioco a bivi html - Cronologia

Leoncino il 15:15, 29 ago 2014

2014-08-29T15:15:24Z

Leoncino: gioco a bivi HTML

2014-08-29T15:11:01Z

gioco a bivi HTML

Leoncino: Creata pagina con "= Gioco a bivi: Avventura nel castello = Si trae ispirazione dal gioco in 5 righe di html, diffuso dal Dojo di Galway. Si tratta di costruire un percorso a scelte multiple tr..."

2014-08-29T15:10:17Z

Creata pagina con "= Gioco a bivi: Avventura nel castello = Si trae ispirazione dal gioco in 5 righe di html, diffuso dal Dojo di Galway. Si tratta di costruire un percorso a scelte multiple tr..."

Nuova pagina

= Gioco a bivi: Avventura nel castello =

Si trae ispirazione dal gioco in 5 righe di html, diffuso dal Dojo di Galway. Si tratta di costruire un percorso a scelte multiple tramite link a diverse pagine html. Inizialmente si dà priorità alla logica del gioco usando pochi tag html e nessun elemento di stile, per inserire successivamente ulteriori elementi html e di stile che permetteranno di abbellire le pagine.

== Passo 1: Logica del gioco ==

È il momento di creare una cartella per contenere i vari file che saranno necessari, dopodiché si parte realizzando la pagina index.html con il seguente codice:

<span style="line-height: 1.6;">index.html:</span>
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html> 
<body> 
<p>Sei davanti a un castello circondato da un fossato pieno di coccodrilli.<br/> 
Puoi <i>entrare</i> nel castello o <i>saltare</i> nel fossato<br/> 
<img src="castello.jpg" /></p> 
    <a href ="entra.html">Entra</a> o <a href="salta.html"> Salta </a> 
</body> 
</html> 
</pre>
Questa pagina dà due scelte, di passare alla pagina entra.html, o alla pagina salta.html che sono le seguenti:

<span style="line-height: 1.6;">entra.html:</span>
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html> 
<body> 
<p>Sei dentro al castello<br/> 
Complimenti</p> 
<img src="sala.jpg" /><br/> 
    <a href ="index.html">Torna Fuori</a> 
</body> 
</html> 
</pre>
<span style="line-height: 1.6;">salta.html:</span>
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html> 
<body> 
<p>Sei stato un ottimo pasto per il coccodrillo, che ti ringrazia con affetto</p> 
<img src="coccodrillo.jpg" /><br/> 
    <a href ="index.html">Ricomincia</a> 
</body> 
</html> 
</pre>
<span style="line-height: 1.6;">Le pagine fanno riferimento a immagini che sono nella stessa cartella dei file html, e devono ovviamente essere già state predisposte.</span>

A questo punto i ragazzi possono estendere o complicare la logica aumentando il numero di scelte, e il numero di livelli.

== Passo 2: abbellimento grafico ==

Si inseriscono sia nuovi tag html, che elementi di stile, in particolare:

'''<head>, <title>, <style>, <h1>''' come tag;

diversi elementi di stile per gestire colore dei font, colore di sfondo e caratteristiche grafiche dei link.

<span style="line-height: 1.6;">index.html diventa:</span>
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html> 
<head> 
    <title>Avventura nel castello</title> 
    <style> 
        p {     color: white; 
            font-size: 16px; 
        } 
        a {    text-decoration: none; 
            color: blue; 
        } 
    </style> 
</head> 
<body style="background-color:black"> 
    <h1 style="color:lightblue">Avventura nel castello</h1> 
    <p>Sei davanti a un castello circondato da un fossato pieno di coccodrilli.<br/> 
Puoi <i>entrare</i> nel castello o <i>saltare</i> nel fossato<br/> 
    <img src="castello.jpg" /></p> 
    <p><a href ="entra.html">Entra</a> o <a href="salta.html">Salta</a></p> 
</body> 
</html>
</pre>
<span style="line-height: 1.6;">Su questa falsariga si modificano entra.html e salta.html, facendo usare le funzioni di copia e incolla. Si mette in evidenza che è sufficiente copiare e incollare il tag '''<style>''' per replicare le caratteristiche grafiche della pagina index.html sulle altre</span>

<span style="line-height: 1.6;">entra.html:</span>
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html> 
<head> 
    <title>Avventura nel castello - Hai vinto!</title> 
    <style> 
        p { color: white; 
            font-size: 16px; 
        } 
        a {    text-decoration: none; 
            color: blue; 
        } 
    </style> 
</head> 
<body style="background-color:black"> 
    <h1 style="color:green">Avventura nel castello - Hai vinto!</h1> 
    <p>Sei dentro al castello<br/> 
Complimenti</p> 
    <img src="sala.jpg" /><br/> 
    <a href ="index.html">Torna Fuori</a> 
</body> 
</html> 
</pre>
<span style="line-height: 1.6;">salta.html:</span>
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html> 
<head> 
    <title>Avventura nel castello - Hai perso!</title> 
    <style> 
        p { color: white; 
            font-size: 16px; 
        } 
        a {    text-decoration: none; 
            color: blue; 
        } 
    </style> 
</head> 
<body style="background-color:red"> 
    <h1 style="color:black">Avventura nel castello - Hai perso!</h1> 
    <p>Sei stato un ottimo pasto per il coccodrillo, che ti ringrazia con affetto</p> 
    <img src="coccodrillo.jpg" /><br/> 
    <a href ="index.html">Ricomincia</a> 
</body> 
</html></pre>
<span style="line-height: 1.6;">Si vede come le impostazioni generali di stile possano essere definite nella sezione </span>'''<head>'''''<b><span style="line-height: 1.6;">,</span></b>''<span style="line-height: 1.6;">inserendole una sola volta, mentre le impostazioni specifiche di un tag vadano inserite nel tag stesso, come nei tag </span>'''<h1>''' e '''<body>'''<span style="line-height: 1.6;">.</span>

@@ Riga 116: / Riga 116: @@
 </body>&nbsp;
 </html></pre>
-<span style="line-height: 1.6;">Si vede come le impostazioni generali di stile possano essere definite nella sezione </span>'''&lt;head&gt;'''''<b><span style="line-height: 1.6;">,</span></b>''<span style="line-height: 1.6;">inserendole una sola volta, mentre le impostazioni specifiche di un tag vadano inserite nel tag stesso, come nei tag&nbsp;</span>'''&lt;h1&gt;'''&nbsp;e&nbsp;'''&lt;body&gt;'''<span style="line-height: 1.6;">.</span>
+<span style="line-height: 1.6;">Si vede come le impostazioni generali di stile possano essere definite nella sezione </span>'''&lt;head&gt;'''''<b><span style="line-height: 1.6;">,</span></b>''<span style="line-height: 1.6;">inserendole una sola volta, mentre le impostazioni specifiche di un tag vadano inserite nel tag stesso, come nei tag&nbsp;</span>'''&lt;h1&gt;'''&nbsp;e&nbsp;'''&lt;body&gt;'''<span style="line-height: 1.6;">.[[Category:HTML]]</span>

@@ Riga 1: / Riga 1: @@
 = Gioco a bivi: Avventura nel castello =
-Si trae ispirazione dal gioco in 5 righe di html, diffuso dal Dojo di Galway. Si tratta di costruire un percorso a scelte multiple tramite link a diverse pagine html. Inizialmente si dà priorità alla logica del gioco usando pochi tag html e nessun elemento di stile, per inserire successivamente ulteriori elementi html e di stile che permetteranno di abbellire le pagine.
+Si trae ispirazione dal gioco in 5 righe di html, diffuso dal Dojo di Galway. Si tratta di costruire un percorso a scelte multiple tramite link a diverse pagine html. Inizialmente si dà priorità alla logica del gioco usando pochi tag html e nessun elemento di stile, per inserire successivamente ulteriori elementi html e di stile che permetteranno di abbellire le pagine.&nbsp;
 == Passo 1: Logica del gioco ==
@@ Riga 116: / Riga 118: @@
 </body>&nbsp;
 </html></pre>
-<span style="line-height: 1.6;">Si vede come le impostazioni generali di stile possano essere definite nella sezione </span>'''&lt;head&gt;'''''<b><span style="line-height: 1.6;">,</span></b>''<span style="line-height: 1.6;">inserendole una sola volta, mentre le impostazioni specifiche di un tag vadano inserite nel tag stesso, come nei tag&nbsp;</span>'''&lt;h1&gt;'''&nbsp;e&nbsp;'''&lt;body&gt;'''<span style="line-height: 1.6;">.[[Category:HTML]]</span>
+<span style="line-height: 1.6;">Si vede come le impostazioni generali di stile possano essere definite nella sezione </span>'''&lt;head&gt;'''''<b><span style="line-height: 1.6;">,</span></b>''<span style="line-height: 1.6;">inserendole una sola volta, mentre le impostazioni specifiche di un tag vadano inserite nel tag stesso, come nei tag&nbsp;</span>'''&lt;h1&gt;'''&nbsp;e&nbsp;'''&lt;body&gt;'''<span style="line-height: 1.6;">.</span>