https://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_html&feed=atom&action=historyGioco a bivi html - Cronologia2024-03-29T07:31:40ZCronologia della pagina su questo sitoMediaWiki 1.23.2https://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_html&diff=41&oldid=prevLeoncino il 15:15, 29 ago 20142014-08-29T15:15:24Z<p></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black; text-align: center;">← Versione meno recente</td>
<td colspan='2' style="background-color: white; color:black; text-align: center;">Versione delle 15:15, 29 ago 2014</td>
</tr><tr><td colspan="2" class="diff-lineno">Riga 1:</td>
<td colspan="2" class="diff-lineno">Riga 1:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>= Gioco a bivi: Avventura nel castello =</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>= Gioco a bivi: Avventura nel castello =</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>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.</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>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.<ins class="diffchange diffchange-inline">&nbsp;</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">Il sorgente del gioco, con vari tipi di abbellimento grafico è scaricabile [http://kata.coderdojo.it/archivio/bivi.zip qui]</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>== Passo 1: Logica del gioco ==</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>== Passo 1: Logica del gioco ==</div></td></tr>
<tr><td colspan="2" class="diff-lineno">Riga 116:</td>
<td colspan="2" class="diff-lineno">Riga 118:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div></body>&nbsp;</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div></body>&nbsp;</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div></html></pre></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div></html></pre></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><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]]<del class="diffchange diffchange-inline"></span></del></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><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;">.<ins class="diffchange diffchange-inline"></span></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[[<ins class="diffchange diffchange-inline">Category:HTML|</ins>Category:HTML]]</div></td></tr>
</table>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_html&diff=40&oldid=prevLeoncino: gioco a bivi HTML2014-08-29T15:11:01Z<p>gioco a bivi HTML</p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black; text-align: center;">← Versione meno recente</td>
<td colspan='2' style="background-color: white; color:black; text-align: center;">Versione delle 15:11, 29 ago 2014</td>
</tr><tr><td colspan="2" class="diff-lineno">Riga 116:</td>
<td colspan="2" class="diff-lineno">Riga 116:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div></body>&nbsp;</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div></body>&nbsp;</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div></html></pre></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div></html></pre></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><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></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><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;">.<ins class="diffchange diffchange-inline">[[Category:HTML]]</ins></span></div></td></tr>
</table>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_html&diff=39&oldid=prevLeoncino: 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<p>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..."</p>
<p><b>Nuova pagina</b></p><div>= Gioco a bivi: Avventura nel castello =<br />
<br />
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.<br />
<br />
== Passo 1: Logica del gioco ==<br />
<br />
È 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:<br />
<br />
<span style="line-height: 1.6;">index.html:</span><br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html>&nbsp;<br />
<body>&nbsp;<br />
<p>Sei davanti a un castello circondato da un fossato pieno di coccodrilli.<br/>&nbsp;<br />
Puoi <i>entrare</i> nel castello o <i>saltare</i> nel fossato<br/>&nbsp;<br />
<img src="castello.jpg" /></p>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<a href ="entra.html">Entra</a> o <a href="salta.html"> Salta </a>&nbsp;<br />
</body>&nbsp;<br />
</html>&nbsp;<br />
</pre><br />
Questa pagina dà due scelte, di passare alla pagina entra.html, o alla pagina salta.html che sono le seguenti:<br />
<br />
<span style="line-height: 1.6;">entra.html:</span><br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html>&nbsp;<br />
<body>&nbsp;<br />
<p>Sei dentro al castello<br/>&nbsp;<br />
Complimenti</p>&nbsp;<br />
<img src="sala.jpg" /><br/>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<a href ="index.html">Torna Fuori</a>&nbsp;<br />
</body>&nbsp;<br />
</html>&nbsp;<br />
</pre><br />
<span style="line-height: 1.6;">salta.html:</span><br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html>&nbsp;<br />
<body>&nbsp;<br />
<p>Sei stato un ottimo pasto per il coccodrillo, che ti ringrazia con affetto</p>&nbsp;<br />
<img src="coccodrillo.jpg" /><br/>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<a href ="index.html">Ricomincia</a>&nbsp;<br />
</body>&nbsp;<br />
</html>&nbsp;<br />
</pre><br />
<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><br />
<br />
A questo punto i ragazzi possono estendere o complicare la logica aumentando il numero di scelte, e il numero di livelli.<br />
<br />
== Passo 2: abbellimento grafico ==<br />
<br />
Si inseriscono sia nuovi tag html, che elementi di stile, in particolare:<br />
<br />
'''&lt;head&gt;, &lt;title&gt;, &lt;style&gt;, &lt;h1&gt;''' come tag;<br />
<br />
diversi elementi di stile per gestire colore dei font, colore di sfondo e caratteristiche grafiche dei link.<br />
<br />
<span style="line-height: 1.6;">index.html diventa:</span><br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html>&nbsp;<br />
<head>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<title>Avventura nel castello</title>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<style>&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;p { &nbsp;&nbsp; &nbsp;color: white;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;font-size: 16px;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;a {&nbsp;&nbsp; &nbsp;text-decoration: none;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;color: blue;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;<br />
&nbsp;&nbsp; &nbsp;</style>&nbsp;<br />
</head>&nbsp;<br />
<body style="background-color:black">&nbsp;<br />
&nbsp;&nbsp; &nbsp;<h1 style="color:lightblue">Avventura nel castello</h1>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<p>Sei davanti a un castello circondato da un fossato pieno di coccodrilli.<br/>&nbsp;<br />
Puoi <i>entrare</i> nel castello o <i>saltare</i> nel fossato<br/>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<img src="castello.jpg" /></p>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<p><a href ="entra.html">Entra</a> o <a href="salta.html">Salta</a></p>&nbsp;<br />
</body>&nbsp;<br />
</html><br />
</pre><br />
<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 '''&lt;style&gt;''' per replicare le caratteristiche grafiche della pagina index.html sulle altre</span><br />
<br />
<span style="line-height: 1.6;">entra.html:</span><br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html>&nbsp;<br />
<head>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<title>Avventura nel castello - Hai vinto!</title>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<style>&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;p { color: white;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;font-size: 16px;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;a {&nbsp;&nbsp; &nbsp;text-decoration: none;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;color: blue;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;<br />
&nbsp;&nbsp; &nbsp;</style>&nbsp;<br />
</head>&nbsp;<br />
<body style="background-color:black">&nbsp;<br />
&nbsp;&nbsp; &nbsp;<h1 style="color:green">Avventura nel castello - Hai vinto!</h1>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<p>Sei dentro al castello<br/>&nbsp;<br />
Complimenti</p>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<img src="sala.jpg" /><br/>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<a href ="index.html">Torna Fuori</a>&nbsp;<br />
</body>&nbsp;<br />
</html>&nbsp;<br />
</pre><br />
<span style="line-height: 1.6;">salta.html:</span><br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html>&nbsp;<br />
<head>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<title>Avventura nel castello - Hai perso!</title>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<style>&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;p { color: white;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;font-size: 16px;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;a {&nbsp;&nbsp; &nbsp;text-decoration: none;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;color: blue;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;<br />
&nbsp;&nbsp; &nbsp;</style>&nbsp;<br />
</head>&nbsp;<br />
<body style="background-color:red">&nbsp;<br />
&nbsp;&nbsp; &nbsp;<h1 style="color:black">Avventura nel castello - Hai perso!</h1>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<p>Sei stato un ottimo pasto per il coccodrillo, che ti ringrazia con affetto</p>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<img src="coccodrillo.jpg" /><br/>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<a href ="index.html">Ricomincia</a>&nbsp;<br />
</body>&nbsp;<br />
</html></pre><br />
<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></div>Leoncino