Da WIKI CoderDojo Firenze.
(gioco a bivi HTML)
 
Riga 1: Riga 1:
 
= Gioco a bivi: Avventura nel castello =
 
= 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. 
 +
 
 +
Il sorgente del gioco, con vari tipi di abbellimento grafico è scaricabile [http://kata.coderdojo.it/archivio/bivi.zip qui]
  
 
== Passo 1: Logica del gioco ==
 
== Passo 1: Logica del gioco ==
Riga 116: Riga 118:
 
</body>&nbsp;
 
</body>&nbsp;
 
</html></pre>
 
</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>
 +
[[Category:HTML|Category:HTML]]

Versione attuale delle 16:15, 29 ago 2014

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. 

Il sorgente del gioco, con vari tipi di abbellimento grafico è scaricabile qui

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:

index.html:

<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> 

Questa pagina dà due scelte, di passare alla pagina entra.html, o alla pagina salta.html che sono le seguenti:

entra.html:

<html> 
<body> 
<p>Sei dentro al castello<br/> 
Complimenti</p> 
<img src="sala.jpg" /><br/> 
    <a href ="index.html">Torna Fuori</a> 
</body> 
</html> 

salta.html:

<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> 

Le pagine fanno riferimento a immagini che sono nella stessa cartella dei file html, e devono ovviamente essere già state predisposte.

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.

index.html diventa:

<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>

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

entra.html:

<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> 

salta.html:

<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>

Si vede come le impostazioni generali di stile possano essere definite nella sezione <head>,inserendole una sola volta, mentre le impostazioni specifiche di un tag vadano inserite nel tag stesso, come nei tag <h1> e <body>.