WIKI CoderDojo Firenze - Contributi utente [it]

Colora il box

2014-09-21T18:09:42Z

2014-09-21T17:23:37Z

Margherita:

Colora il box

2014-09-21T17:22:18Z

Margherita:

Questo semplice tutorial combina conoscenze basiche di HTML, CSS e Javascript.

Il suo scopo è quello di colorare un quadrato inizialmente nero, scegliendo una combinazione dei tre colori base rosso, verde e blu (terna RGB: Red Green Blue) cioè scegliendo una terna RGB.

La scelta del valore per il rosso, verde o blu viene fatto inserendo un valore a scelta tra 0 e 255 per ciascuno dei tre colori.

Consiste nella creazione, in una pagina HTML, di un quadrato inizialmente nero insieme a tre box testuali in cui l'utente potrà inserire i tre valori scelti per la terna RGB.

In particolare il codice HTML è il seguente;
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><html><br/>    <body><br/>        Rosso (0 - 255): <input type="Text" id="rosso" value=0 ><br/><br/>        Verde (0 - 255): <input type="Text" id="verde" value=0 ><br/><br/>        Blu (0 - 255): <input type="Text" id="blu" value=0 ><br/><br/>        Codice esadecimale del colore risultante: <label id='codice'>#000000</label><br/><br/>        <div style="height:100px; width:100px; background-color:#000000; border:1" id="colore"></div><br/>    </body><br/></html><br/></div>
in cui si possono notare i tre elementi HTML <input type="text"> che conterranno i tre numeri (0-255) per i tre colori della terna RGB, cioè rosso, verde e blu e che inzialmente sono a 0 (value=0). 

Dopo questi tre campi è presente una etichetta (tag <label>) che riporterà il codice esadecimale del colore risultante dalla combinazione dei tre colori base e cioè il codice della terna RGB.

Infine, è presente un tag <div> a cui sono state date le carattersitche di un quadrato nero grazie alle impostazione di stile: l'attributo style, infatti, ne specifica lo stile definedo un'altezza ed una base entrambe di 100px (height:100px; width:100px;), un colore di sfondo pari al nero (background-color:#000000;) ed un bordo sottile (border:1).

Il codice così riportato disegna una pagina del tipo:

[[File:Colore-mini.png|border|center|Colore-mini.png]]

ma questa pagina html non è ancora in grado di far cambiare il colore al quadrato nero, perchè manca il codice Javascript necessario a impostare la terna RGB (i tre valori tra 0 e 255) inserita dall'utente nei tre box testuali indicati con ''Rosso (0 - 255)'', ''Verde (0 - 255)'', ''Blu (0 - 255)''.

Il codice Javascript, riportato di seguito, contiene due funzioni:

*''calcolaCodice()'': restituisce una stringa contenente il codice HTML del colore ottenuto dalla combinazione delle tre componenti RGB; infatti, trasforma le tre componenti scelte dall'utente (numeri decimali tra 0 e 255) in numeri esadecimali e li scrive in successione in una stringa aggiungendo all'inizio il carattere '#'. Si ottengono stringhe del tipo #000000 (nero), #FF0000 (rosso), #FFFFFF (bianco) etc
*colora(id): usa la calcolaCodice() per calcolare il codice di colore HTML e per colorare il quadrato di tale colore, cambiando le impostazioni di stile del quadrato dell'attributo ''background-color''. Inotre modifica l'etichetta <label> scrivendo il codice di colore risultante dalla combinazione RGB scelta.

<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;">
        function calcolaCodice(){<br/>            r=parseInt(document.getElementById('rosso').value);<br/>            g=parseInt(document.getElementById('verde').value);<br/>            b=parseInt(document.getElementById('blu').value);<br/>            return '#'+ ('0'+r.toString(16)).slice(-2)+('0'+g.toString(16)).slice(-2)+('0'+b.toString(16)).slice(-2);<br/>        }<br/>        function colora(id){<br/>            c=calcolaCodice();<br/>            div=document.getElementById(id);<br/>            div.style.backgroundColor=c;<br/>            document.getElementById('codice').innerHTML=c;<br/>        }
</div>
E quindi, di seguito, il codice della pagina completo
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><html><br/>    <head><br/>        <script language="javascript"><br/>        function calcolaCodice(){<br/>            r=parseInt(document.getElementById('rosso').value);<br/>            g=parseInt(document.getElementById('verde').value);<br/>            b=parseInt(document.getElementById('blu').value);<br/>            return '#'+ ('0'+r.toString(16)).slice(-2)+('0'+g.toString(16)).slice(-2)+('0'+b.toString(16)).slice(-2);<br/>        }<br/>        function colora(id){<br/>            c=calcolaCodice();<br/>            div=document.getElementById(id);<br/>            div.style.backgroundColor=c;<br/>            document.getElementById('codice').innerHTML=c;<br/>        }<br/>        </script><br/>    </head><br/>    <body><br/>        Rosso (0 - 255): <input type="Text" id="rosso" value=0 onblur="colora('<span style="background-color: rgb(238, 238, 238);">quadrato</span>')"><br/><br/>        Verde (0 - 255): <input type="Text" id="verde" value=0 onblur="colora('<span style="background-color: rgb(238, 238, 238);">quadrato</span>')"><br/><br/>        Blu (0 - 255): <input type="Text" id="blu" value=0 onblur="colora('<span style="background-color: rgb(238, 238, 238);">quadrato</span>')"><br/><br/>        Codice esadecimale del colore risultante: <label id='codice'>#000000</label><br/><br/>        <div style="height:100px; width:100px; background-color:#000000; border:1" id="quadrato"></div><br/>    </body><br/></html><br/></div>
Notare la chiamata della funzione ''colora(id)'' nel codice HTML attraverso l'attributo ''onblur'' che rappresenta l'evento di perdita del 'fuoco' dell'oggetto in considerazione: in altre parole, tutte le volte che l'utente uscirà da una dei tre box testuali (che abbia o meno scritto un valore) verrà reimpostato il colore del quadrato secondo la scelta fatta. Notare anche che la funzione ''colora(id)'' è chiamata passando l'id del <div> che disegna il quadrato e cioè ''colora('<span style="background-color: rgb(238, 238, 238);">quadrato'</span>)''.

Colora il box

2014-09-21T17:21:14Z

Margherita:

Questo semplice tutorial combina conoscenze basiche di HTML, CSS e Javascript.

Il suo scopo è quello di colorare un quadrato inizialmente nero, scegliendo una combinazione dei tre colori base rosso, verde e blu (terna RGB: Red Green Blue) cioè scegliendo una terna RGB.

La scelta del valore per il rosso, verde o blu viene fatto inserendo un valore a scelta tra 0 e 255 per ciascuno dei tre colori.

Consiste nella creazione, in una pagina HTML, di un quadrato inizialmente nero insieme a tre box testuali in cui l'utente potrà inserire i tre valori scelti per la terna RGB.

In particolare il codice HTML è il seguente;
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><html><br/>    <body><br/>        Rosso (0 - 255): <input type="Text" id="rosso" value=0 ><br/><br/>        Verde (0 - 255): <input type="Text" id="verde" value=0 ><br/><br/>        Blu (0 - 255): <input type="Text" id="blu" value=0 ><br/><br/>        Codice esadecimale del colore risultante: <label id='codice'>#000000</label><br/><br/>        <div style="height:100px; width:100px; background-color:#000000; border:1" id="colore"></div><br/>    </body><br/></html><br/></div>
in cui si possono notare i tre elementi HTML <input type="text"> che conterranno i tre numeri (0-255) per i tre colori della terna RGB, cioè rosso, verde e blu e che inzialmente sono a 0 (value=0). 

Dopo questi tre campi è presente una etichetta (tag <label>) che riporterà il codice esadecimale del colore risultante dalla cobinazione dei tre colori base e cioè il codice della terna RGB.

Infine, è presente un tag <div> a cui sono state date le carattersitche di un quadrato nero grazie alle impostazione di stile: l'attributo style, infatti, ne specifica lo stile definedo un'altezza ed una base entrambe di 100px (height:100px; width:100px;), un colore di sfondo pari al nero (background-color:#000000;) ed un bordo sottile (border:1).

Il codice così riportato disegna una pagina del tipo:

[[File:Colore-mini.png|border|center|Colore-mini.png]]

ma questa pagina html non è ancora in grado di far cambiare il colore al quadrato nero, perchè manca il codice Javascript necessario a impostare la terna RGB (i tre valori tra 0 e 255) inserita dall'utente nei tre box testuali indicati con ''Rosso (0 - 255)'', ''Verde (0 - 255)'', ''Blu (0 - 255)''.

Il codice Javascript, riportato di seguito, contiene due funzioni:

*''calcolaCodice()'': restituisce una stringa contenente il codice HTML del colore ottenuto dalla combinazione delle tre componenti RGB; infatti, trasforma le tre componenti scelte dall'utente (numeri decimali tra 0 e 255) in numeri esadecimali e li scrive in successione in una stringa aggiungendo all'inizio il carattere '#'. Si ottengono stringhe del tipo #000000 (nero), #FF0000 (rosso), #FFFFFF (bianco) etc
*colora(id): usa la calcolaCodice() per calcolare il codice di colore HTML e per colorare il quadrato di tale colore, cambiando le impostazioni di stile del quadrato dell'attributo ''background-color''. Inotre modifica l'etichetta <label> scrivendo il codice di colore risultante dalla combinazione RGB scelta.

<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;">
        function calcolaCodice(){<br/>            r=parseInt(document.getElementById('rosso').value);<br/>            g=parseInt(document.getElementById('verde').value);<br/>            b=parseInt(document.getElementById('blu').value);<br/>            return '#'+ ('0'+r.toString(16)).slice(-2)+('0'+g.toString(16)).slice(-2)+('0'+b.toString(16)).slice(-2);<br/>        }<br/>        function colora(id){<br/>            c=calcolaCodice();<br/>            div=document.getElementById(id);<br/>            div.style.backgroundColor=c;<br/>            document.getElementById('codice').innerHTML=c;<br/>        }
</div>
E quindi, di seguito, il codice della pagina completo
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><html><br/>    <head><br/>        <script language="javascript"><br/>        function calcolaCodice(){<br/>            r=parseInt(document.getElementById('rosso').value);<br/>            g=parseInt(document.getElementById('verde').value);<br/>            b=parseInt(document.getElementById('blu').value);<br/>            return '#'+ ('0'+r.toString(16)).slice(-2)+('0'+g.toString(16)).slice(-2)+('0'+b.toString(16)).slice(-2);<br/>        }<br/>        function colora(id){<br/>            c=calcolaCodice();<br/>            div=document.getElementById(id);<br/>            div.style.backgroundColor=c;<br/>            document.getElementById('codice').innerHTML=c;<br/>        }<br/>        </script><br/>    </head><br/>    <body><br/>        Rosso (0 - 255): <input type="Text" id="rosso" value=0 onblur="colora('<span style="background-color: rgb(238, 238, 238);">quadrato</span>')"><br/><br/>        Verde (0 - 255): <input type="Text" id="verde" value=0 onblur="colora('<span style="background-color: rgb(238, 238, 238);">quadrato</span>')"><br/><br/>        Blu (0 - 255): <input type="Text" id="blu" value=0 onblur="colora('<span style="background-color: rgb(238, 238, 238);">quadrato</span>')"><br/><br/>        Codice esadecimale del colore risultante: <label id='codice'>#000000</label><br/><br/>        <div style="height:100px; width:100px; background-color:#000000; border:1" id="quadrato"></div><br/>    </body><br/></html><br/></div>
Notare la chiamata della funzione ''colora(id)'' nel codice HTML attraverso l'attributo ''onblur'' che rappresenta l'evento di perdita del 'fuoco' dell'oggetto in considerazione: in altre parole, tutte le volte che l'utente uscirà da una dei tre box testuali (che abbia o meno scritto un valore) verrà reimpostato il colore del quadrato secondo la scelta fatta. Notare anche che la funzione ''colora(id)'' è chiamata passando l'id del <div> che disegna il quadrato e cioè ''colora('<span style="background-color: rgb(238, 238, 238);">quadrato'</span>)''.

Colora il box

2014-09-21T17:19:06Z

Margherita:

Questo semplice tutorial combina conoscenze basiche di HTML, CSS e Javascript.

Il suo scopo è quello di colorare un quadrato inizialmente nero, scegliendo una combinazione dei tre colori base rosso, verde e blu (terna RGB: Red Green Blue) cioè scegliendo una terna RGB.

La scelta del valore per il rosso, verde o blu viene fatto inserendo un valore a scelta tra 0 e 255 per ciascuno dei tre colori.

Consiste nella creazione, in una pagina HTML, di un quadrato inizialmente nero insieme a tre box testuali in cui l'utente potrà inserire i tre valori scelti per la terna RGB.

In particolare il codice HTML è il seguente;
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><html><br/>    <body><br/>        Rosso (0 - 255): <input type="Text" id="rosso" value=0 ><br/><br/>        Verde (0 - 255): <input type="Text" id="verde" value=0 ><br/><br/>        Blu (0 - 255): <input type="Text" id="blu" value=0 ><br/><br/>        Codice esadecimale del colore risultante: <label id='codice'>#000000</label><br/><br/>        <div style="height:100px; width:100px; background-color:#000000; border:1" id="colore"></div><br/>    </body><br/></html><br/></div>
in cui si possono notare i tre elementi HTML <input type="text"> che conterranno i tre numeri (0-255) per i tre colori della terna RGB, cioè rosso, verde e blu e che inzialmente sono a 0 (value=0). 

Dopo questi tre campi è presente una etichetta (tag <label>) che riporterà il codice esadecimale del colore risultante dalla cobinazione dei tre colori base e cioè il codice della terna RGB.

Infine, è presente un tag <div> a cui sono state date le carattersitche di un quadrato nero grazie alle impostazione di stile: l'attributo style, infatti, ne specifica lo stile definedo un'altezza ed una base entrambe di 100px (height:100px; width:100px;), un colore di sfondo pari al nero (background-color:#000000;) ed un bordo sottile (border:1).

Il codice così riportato disegna una pagina del tipo:

[[File:Colore-mini.png|border|center|Colore-mini.png]]

ma questa pagina html non è ancora in grado di far cambiare il colore al quadrato nero, perchè manca il codice Javascript necessario a impostare la terna RGB (i tre valori tra 0 e 255) inserita dall'utente nei tre box testuali indicati con ''Rosso (0 - 255)'', ''Verde (0 - 255)'', ''Blu (0 - 255)''.

Il codice Javascript, riportato di seguito, contiene due funzioni:

*''calcolaCodice()'': restituisce una stringa contenente il codice HTML del colore ottenuto dalla combinazione delle tre componenti RGB; infatti, trasforma le tre componenti scelte dall'utente (numeri decimali tra 0 e 255) in numeri esadecimali e li scrive in successione in una stringa aggiungendo all'inizio il carattere '#'. Si ottengono stringhe del tipo #000000 (nero), #FF0000 (rosso), #FFFFFF (bianco) etc
*colora(id): usa la calcolaCodice() per calcolare il codice di colore HTML e per colorare il quadrato di tale colore, cambiando le impostazioni di stile del quadrato dell'attributo ''background-color''.
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;">
        function calcolaCodice(){<br/>            r=parseInt(document.getElementById('rosso').value);<br/>            g=parseInt(document.getElementById('verde').value);<br/>            b=parseInt(document.getElementById('blu').value);<br/>            return '#'+ ('0'+r.toString(16)).slice(-2)+('0'+g.toString(16)).slice(-2)+('0'+b.toString(16)).slice(-2);<br/>        }<br/>        function colora(id){<br/>            c=calcolaCodice();<br/>            div=document.getElementById(id);<br/>            div.style.backgroundColor=c;<br/>            document.getElementById('codice').innerHTML=c;<br/>        }
</div>
E quindi, di seguito, il codice della pagina completo
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><html><br/>    <head><br/>        <script language="javascript"><br/>        function calcolaCodice(){<br/>            r=parseInt(document.getElementById('rosso').value);<br/>            g=parseInt(document.getElementById('verde').value);<br/>            b=parseInt(document.getElementById('blu').value);<br/>            return '#'+ ('0'+r.toString(16)).slice(-2)+('0'+g.toString(16)).slice(-2)+('0'+b.toString(16)).slice(-2);<br/>        }<br/>        function colora(id){<br/>            c=calcolaCodice();<br/>            div=document.getElementById(id);<br/>            div.style.backgroundColor=c;<br/>            document.getElementById('codice').innerHTML=c;<br/>        }<br/>        </script><br/>    </head><br/>    <body><br/>        Rosso (0 - 255): <input type="Text" id="rosso" value=0 onblur="colora('<span style="background-color: rgb(238, 238, 238);">quadrato</span>')"><br/><br/>        Verde (0 - 255): <input type="Text" id="verde" value=0 onblur="colora('<span style="background-color: rgb(238, 238, 238);">quadrato</span>')"><br/><br/>        Blu (0 - 255): <input type="Text" id="blu" value=0 onblur="colora('<span style="background-color: rgb(238, 238, 238);">quadrato</span>')"><br/><br/>        Codice esadecimale del colore risultante: <label id='codice'>#000000</label><br/><br/>        <div style="height:100px; width:100px; background-color:#000000; border:1" id="quadrato"></div><br/>    </body><br/></html><br/></div>
Notare la chiamata della funzione ''colora(id)'' nel codice HTML attraverso l'attributo ''onblur'' che rappresenta l'evento di perdita del 'fuoco' dell'oggetto in considerazione: in altre parole, tutte le volte che l'utente uscirà da una dei tre box testuali (che abbia o meno scritto un valore) verrà reimpostato il colore del quadrato secondo la scelta fatta. Notare anche che la funzione ''colora(id)'' è chiamata passando l'id del <div> che disegna il quadrato e cioè ''colora('<span style="background-color: rgb(238, 238, 238);">quadrato'</span>)''.

saa

Colora il box

2014-09-21T17:17:50Z

Il mio Blog HTML

2014-08-29T17:31:18Z

Margherita: il mio Blog html

= Il mio Blog HTML =

Questo tutorial descrive la creazione di un semplice blog con HTML e CSS.<br/>L'esercizio consiste nella creazione di quattro pagine HTML:

*index.html, homepage del blog;
*chisono.html, contenente una descrizione del proprietario del blog;
*cosamipiace.html, contenente una descrizione delle preferenze del proprietario del blog;
*cosafaro.html, contenente una descrizione dei progetti futuri del proprietario del blog.

I quattro file sono quasi uguali: disegnano un riquadro centrale con un menu sovrastante su uno sfondo personalizzato e si distinguono solo per il contenuto del riquadro centrale.

== passo 1: realizzazione della pagina homepage ==

Il codice seguente è composto dalle sezioni di base della pagina html:<br/><head>: contiene il titolo (tag <title>) della pagina e le impostazioni di stile comuni (tag <style>)<br/><body>: contiene tre tabelle allineate in verticale che si riferiscono alle tre parti della pagina e cioè: menu (in alto), corpo (centrale) e piedipagina (in basso).

'''index.html'''
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><span style="font-family:courier new,courier,monospace;"><html><br/>    <head><br/>        <title>Il mio Blog</title><br/>        <style><br/>            body{<br/>                font-family:Arial, Helvetica;<br/>                background-image:url('personcina.png');<br/>            }<br/>            .cellamenu{<br/>                background-color:#D4E6CA;<br/>                height:50px;<br/>                width:25%;<br/>                text-align:center;<br/>                cursor:pointer;<br/>            }<br/>            .cellamenuselezionata{<br/>                background-color:#99FF66;<br/>                height:50px;<br/>                width:25%;<br/>                text-align:center;<br/>                cursor:pointer;<br/>            }<br/>        </style><br/>    </head><br/>    <body onload="SelezionaPagina(document.getElementById('home'));"><br/>        <table id="menu" align="center" style="border:0;width:800px;"><br/>            </tr><br/>                <td id="home" class="cellamenuselezionata">Home</td><br/>                <td id="chisono" class="cellamenu" ><a href="chisono.html">Chi Sono</a></td><br/>                <td id="cosapiace" class="cellamenu"><a href="cosamipiace.html">Cosa mi piace</a></td><br/>                <td id="cosafaro" class="cellamenu" ><a href="cosafaro.html">Cosa farò da grande</a></td><br/>            <tr><br/>        </table><br/>        <table id="corpo" align="center" style="border:1px solid #000000;width:800px;background-color:#D4E6CA;height:600px;"><br/>            <tr id="corpohome"><br/>                <td><br/>                    <div style="background-image:url('nuvola2.png');background-repeat:no-repeat;height:184px;margin-left:200px;<br/>                                    margin-top:10px;width:300px;text-align:center;"><br/>                        <span style="position:relative;left:10px;top:80px;">Questa è la home page del blog di margherita</span><br/>                    </div><br/>                </td><br/>            </tr><br/>        </table><br/>        <table id="piedipagina" align="center" style="border:0;width:800px;"><br/>            </tr><br/>                <td style="text-align:center;border-top:1px solid red;width:100%;font-weight:bold;font-size:12px;background-color:#FFFFFF;">MDV Copyleft 2014</td><br/>            <tr><br/>        </table><br/>    </body><br/></html></span><br/></div>
== passo 2: realizzazione delle altre tre pagine del blog ==

Le altre tre pagine html si distiguono da questa solo per la modifica del contenuto della tabella con id="corpo". Di seguito i sorgenti di queste pagine.

'''chisono.html'''
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><span style="font-family:courier new,courier,monospace;"><html><br/>    <head><br/>        <title>Il mio Blog</title><br/>        <style><br/>            body{<br/>                font-family:Arial, Helvetica;<br/>                background-image:url('personcina.png');<br/>            }<br/>            .cellamenu{<br/>                background-color:#D4E6CA;<br/>                height:50px;<br/>                width:25%;<br/>                text-align:center;<br/>                cursor:pointer;<br/>            }<br/>            .cellamenuselezionata{<br/>                background-color:#99FF66;<br/>                height:50px;<br/>                width:25%;<br/>                text-align:center;<br/>                cursor:pointer;<br/>            }<br/>        </style><br/>    </head><br/>    <body onload="SelezionaPagina(document.getElementById('home'));"><br/>        <table id="menu" align="center" style="border:0;width:800px;"><br/>            </tr><br/>                <td id="home" class="cellamenu"><a href="index.html">Home</a></td><br/>                <td id="chisono" class="cellamenuselezionata" >Chi Sono</td><br/>                <td id="cosapiace" class="cellamenu"><a href="cosamipiace.html">Cosa mi piace</a></td><br/>                <td id="cosafaro" class="cellamenu" ><a href="cosafaro.html">Cosa farò da grande</a></td><br/>            <tr><br/>        </table><br/>        <table id="corpo" align="center" style="border:1px solid #000000;width:800px;background-color:#D4E6CA;height:600px;"><br/>            <tr id="corpochisono"><br/>                <td><br/>                    <div style="background-image:url('nuvola2.png');background-repeat:no-repeat;height:184px;width:300px;<br/>                                    margin-left:10px;margin-top:10px;text-align:center;"><br/>                        <span style="position:relative;left:10px;top:80px;">Questa sono io</span><br/>                    </div><br/>                    <div style="background-image:url('nuvola2.png');background-repeat:no-repeat;height:184px;width:300px;<br/>                                            margin-left:200px;margin-top:50px;text-align:center;"><br/>                        <span style="position:relative;left:10px;top:80px;">Questa è la mia foto</span><br/>                    </div><br/>                </td><br/>            </tr><br/>        </table><br/>        <table id="piedipagina" align="center" style="border:0;width:800px;"><br/>            </tr><br/>                <td style="text-align:center;border-top:1px solid red;width:100%;font-weight:bold;font-size:12px;background-color:#FFFFFF;">MDV Copyleft 2014</td><br/>            <tr><br/>        </table><br/>    </body><br/></html></span><br/></div>
<br/>'''cosamipiace.html'''
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><span style="font-family:courier new,courier,monospace;"><html><br/>    <head><br/>        <title>Il mio Blog</title><br/>        <style><br/>            body{<br/>                font-family:Arial, Helvetica;<br/>                background-image:url('personcina.png');<br/>            }<br/>            .cellamenu{<br/>                background-color:#D4E6CA;<br/>                height:50px;<br/>                width:25%;<br/>                text-align:center;<br/>                cursor:pointer;<br/>            }<br/>            .cellamenuselezionata{<br/>                background-color:#99FF66;<br/>                height:50px;<br/>                width:25%;<br/>                text-align:center;<br/>                cursor:pointer;<br/>            }<br/>    </style><br/>    </head><br/>    <body onload="SelezionaPagina(document.getElementById('home'));"><br/>        <table id="menu" align="center" style="border:0;width:800px;"><br/>            </tr><br/>                <td id="home" class="cellamenu"><a href="index.html">Home</a></td><br/>                <td id="chisono" class="cellamenu" ><a href="chisono.html">Chi Sono</a></td><br/>                <td id="cosapiace" class="cellamenuselezionata">Cosa mi piace</td><br/>                <td id="cosafaro" class="cellamenu" ><a href="cosafaro.html">Cosa farò da grande</a></td><br/>            <tr><br/>        </table><br/>        <table id="corpo" align="center" style="border:1px solid #000000;width:800px;background-color:#D4E6CA;height:600px;"><br/>            <tr id="corpocosapiace"><br/>                <td><br/>                    <p>Queste sono le cose che mi piacciono:</p><br/>                    <ul><br/>                        <li>leggere</li>                    <br/>                        <li>programmare</li>                    <br/>                        <li>mangiare</li>                    <br/>                        <li>nuotare</li>                    <br/>                    </ul><br/>                    <p>e poi mi piace questo video:</p><br/>                    <iframe width="420" height="315" src="[http://www.youtube.com/embed/OXrU2ECBH-E?rel=0 http://www.youtube.com/embed/OXrU2ECBH-E?rel=0]" frameborder="0" allowfullscreen></iframe><br/>                </td><br/>            </tr><br/>        </table><br/>        <table id="piedipagina" align="center" style="border:0;width:800px;"><br/>            </tr><br/>                <td style="text-align:center;border-top:1px solid red;width:100%;font-weight:bold;font-size:12px;background-color:#FFFFFF;">MDV Copyleft 2014</td><br/>            <tr><br/>        </table><br/>    </body><br/></html></span><br/></div>
<br/>'''cosafaro.html'''
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><span style="font-family:courier new,courier,monospace;"><html><br/>    <head><br/>        <title>Il mio Blog</title><br/>        <style><br/>            body{<br/>                font-family:Arial, Helvetica;<br/>                background-image:url('personcina.png');<br/>            }<br/>            .cellamenu{<br/>                background-color:#D4E6CA;<br/>                height:50px;<br/>                width:25%;<br/>                text-align:center;<br/>                cursor:pointer;<br/>            }<br/>            .cellamenuselezionata{<br/>                background-color:#99FF66;<br/>                height:50px;<br/>                width:25%;<br/>                text-align:center;<br/>                cursor:pointer;<br/>            }<br/>        </style><br/>    </head><br/>    <body onload="SelezionaPagina(document.getElementById('home'));"><br/>        <table id="menu" align="center" style="border:0;width:800px;"><br/>            </tr><br/>                <td id="home" class="cellamenu"><a href="index.html">Home</a></td><br/>                <td id="chisono" class="cellamenu" ><a href="chisono.html">Chi Sono</a></td><br/>                <td id="cosapiace" class="cellamenu"><a href="cosamipiace.html">Cosa mi piace</a></td><br/>                <td id="cosafaro" class="cellamenuselezionata" >Cosa farò da grande</td><br/>            <tr><br/>        </table><br/>        <table id="corpo" align="center" style="border:1px solid #000000;width:800px;background-color:#D4E6CA;height:600px;"><br/>            <tr id="corpocosafaro"><br/>                <td><br/>                    <p>Da grande farò .....</p><br/>                    <p>Ma io sono già grandeeeeeeeee</p>                    <br/>                </td><br/>            </tr><br/>        </table><br/>        <table id="piedipagina" align="center" style="border:0;width:800px;"><br/>            </tr><br/>                <td style="text-align:center;border-top:1px solid red;width:100%;font-weight:bold;font-size:12px;background-color:#FFFFFF;">MDV Copyleft 2014</td><br/>            <tr><br/>        </table><br/>    </body><br/></html></span></div>
Di seguito un'immagine di come si presenta la homepage del blog.<br/>[[File:IlmioBlogmini.png|IlmioBlogmini.png]]
[[Category:HTML|Category:HTML]]

Il mio Blog HTML

2014-08-29T17:29:03Z

Margherita: il mio Blog html

Movimento con i tasti

2014-08-24T16:09:42Z

Margherita: Movimenti usando i tasti

= Movimenti usando i tasti =

Per spostare uno sprite nelle 4 direzioni usando le frecce o altri tasti (es. “a s d w”) e ruotandolo<br/>nella direzione del moto, ci si aggancia all'evento “Quando si preme il tasto.....” come si vede nella seguente immagine<br/>[[File:Movimenti1.png|File:Movimenti1.png]]<br/>Va gestito ogni tasto di movimento in maniera separata. <span style="line-height: 1.6;">In questo caso il comando “punta in direzione....” serve a direzionare lo sprite nella direzione del moto. Il numero di pixel di </span><span style="line-height: 1.6;">spostamento (3 nell'esempio) può essere variato per muovere più o meno velocemente lo sprite.</span>

Per ottenere un moto continuo è necessario tenere premuto il tasto della direzione del moto. Questo tipo di movimento si usa per muovere sprite lungo percorsi o labirinti.<br/>[[File:Movimenti2.png|File:Movimenti2.png]]<br/>Se si vuole un moto continuo, comandando soltanto la direzione di moto attraverso i tasti, è necessario utilizzare una variabile che conservi il tasto che di volta in volta viene premuto. Si può dunque produrre uno script come il seguente:<br/><br/>In questo caso si fa uso della variabile privata dello sprite “direzione” che viene impostata ogni volta che si preme un tasto,<br/>di un ciclo infinito (“per sempre”) in cui facciamo spostare lo sprite nella direzione definita dal tasto.
[[Category:Scratch]]

Categoria:Scratch

2014-08-24T15:07:52Z

Margherita:

'''Scratch''' è un ambiente di programmazione visuale creato per avvicinare i bambini alla programmazione.

[[Category:Principale|Category:Principale]]

Pagina principale

2014-08-24T14:01:46Z

Margherita:

'''Benvenuti nel WIKI del CoderDojo di Firenze'''<br/><br/>
In questo WIKI raccogliamo tutorial, articoli e linee guida da seguire durante i nostri incontri.<br/>
Tutti i nostri mentor sono chiamati a collaborare al WIKI e possono farlo iscrivendosi liberamente.<br/>
<br/>
La scrittura di un tutorial deve attenersi alle seguenti linee guida:<br/>
- Avere una versione per i mentor<br/>
- Avere una versione per i ragazzi (eventualmente tratta da quella per mentor)<br/>
- Essere sviluppata per passi, con almeno un obiettivo intermedio da raggiungere entro la metà dell'incontro (prima della pausa).<br/>
- Essere facilmente stampabile<br/>
- Appartenere ad una categoria fra quelle disponibili<br/>