Sushi Card HTML-CSS

_posts/2018-11-10-coderdojo-11-novembre-IED.markdown

@@ -4,7 +4,7 @@ comments: false
 date: 2018-11-10 14:30:00+01:00
 layout: event
 location: ied
-registration_url: 
+registration_url: https://www.eventbrite.it/e/biglietti-coderdojo-milano-ied-milano-51863939439
 type: Player
 slug: coderdojo-il-10-novembre-in-ied
 title: CoderDojo il 10 novembre in IED

_posts/2018-11-24-coderdojo-24-novembre-2018-politecnico.markdown

@@ -4,7 +4,7 @@ comments: false
 date: 2018-11-24 14:30:00+01:00
 layout: event
 location: politecnico
-registration_url: 
+registration_url: https://www.eventbrite.it/e/biglietti-coderdojo-milano-politecnico-di-milano-52550148910
 type: Player
 slug: coderdojo-il-24-novembre-al-politecnico
 title: CoderDojo il 24 novembre al Politecnico

_tutorials/HTML-CSS Sushi Card/Step_1.md

@@ -0,0 +1,20 @@
+## Introduzione
+
+Impara a scrivere il codice del tuo primo sito web!
+
+### Cosa farai
+
+Costruisci un sito come quello che vedi qui sotto.
+
+<div class="trinket">
+  <iframe src="https://trinket.io/embed/html/7bb7dafb6e?outputOnly=true&start=result" width="600" height="505" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen>
+  </iframe>
+</div>
+
+### Cosa imparerai
+
+- Ad usare un editor online per creare un sito fatto con un file HTML e uno CSS
+- A creare un sito in HTML con dei titoli, dei paragrafi di testo, liste e immagini
+- Ad usare il codice CSS per controllare l'aspetto del tuo sito, inserendo una semplice barra menu e cambiare i colori, gli sfondi e i bordi
+- A collegare le pagine tra di loro e collegarle ad altri siti web
+- A creare una tabella che includa le intestazioni e righe multiple

_tutorials/HTML-CSS Sushi Card/step_10.md

@@ -0,0 +1,55 @@
+## Aggiungere altre pagine
+
+Questa parte ti mostrerà come aggiungere altre pagine al tuo sito.
+
+- Al limite superiore del code panel, clicca sul simbolo **+** vicino alle linguette delle schede e digita il nome del nuovo file. Deve terminare con `.html` (incluso il punto!) in modo che il browser possa riconoscerlo come una pagina web.
+
+![Adding a new file in Trinket](images/tktNewFileArrows.png)
+
+--- collapse ---
+---
+title: Rinominare o cancellare un file
+---
+
+Se vuoi cambiare il nome di un file, clicca sull'icona **ingranaggio** a destra del nome file, clicca l'icona **matita**. Digita il nuovo nome del file e premi **Enter**. Puoi anche cancellare un file cliccando sull'icone  **cestino** invece che sull'icona della **matita**.
+![](images/EditFilename.png)
+
+Potresti chiederti perchè non si può modificare il nome del file `index.html`. `index.html` è un nome file speciale usato per indicare la **pagina iniziale**, l'home page, di un sito. Questa è la pagina su cui atterri quando visiti un sito. Ogni volta che vai alla homepage di un sito, il browser cerca il file con il nome  `index.html` e lo mostra sullo schermo.
+
+--- /collapse ---
+
+- Trova il file `template.html` , copia e incolla tutto il codice nel tuo nuovo file. Dato che vuoi copiare l'intero contenuto, puoi cliccare in un punto qualunque del codice e usare le scorciatoie da tastiera <kbd>Ctrl</kbd> (o <kbd>cmd</kbd>) e <kbd>A</kbd> per selezionare tutto in una volta sola.
+
+- Cambia il testo tra il tag`<title> </title>` in modo che la tua nuova pagina abbia un titolo adatto. Trinket non mostrerà il il titolo, ma puoi vederlo all'estremità superiore del tuo browser se scarichi il file e lo apri.
+
+![The page title showing in the browser tab](images/egLocalFileWindowTitle.png)
+
+- Nei tag `<main> </main>` del nuovo file usa tutto ciò che hai imparato per aggiungere elementi alla pagina: paragrafi, intestazioni, immagini ed elenchi!
+
+- I ripeti i passi di sopra per ogni nuova pagina. 
+
+Quando ci sono troppe schede aperte per poter essere visualizzate insieme, puoi usare l'icona **<** e **>** in alto a sinistra per farle scorrere.
+
+![The buttons for scrolling the tabs](images/tktScrollTabIcons.png)
+
+Ora hai bisogno di creare dei link in modo da poter raggiungere ogni nuova pagina! Mettiamo tutti i link in un elenco.
+
+- Nel file `index.html`, aggiungi il seguente codice al body della pagina:
+
+```html
+    <ul>
+        <li><a href="index.html">Home</a></li>
+        <li><a href="birds.html">Uccelli protetti</a></li>
+        <li><a href="conservation.html">Conservazione</a></li>
+        <li><a href="sanctuaries.html">Santuari degli uccelli</a></li>
+    </ul>
+```
+
+- Modifica il valore dell'attributo `href` per ogni link (ricorda, il testo deve essere inserito all'interno delle virgolette) in modo che sia perfettamente identico ad ogni nome dei file che hai creato. 
+
+- Modifica il testo all'interno dei tag `<a> </a>` in modo che sia adatto alla descrizione delle tue pagine.
+
+Ora puoi navigare tra le tue pagine! 
+
+![Example list of links on a web page](images/egListOfPageLinks.png)
+

_tutorials/HTML-CSS Sushi Card/step_11.md

@@ -0,0 +1,65 @@
+## Navigare nel sito
+
+Molti siti hanno un menu di **navigazione** per aiutare i visitatori a spostarsi tra le pagine.
+Ora che hai un po' di pagine, una homepage, dei link ad ogni pagina, spostiamo la lista dei link in una sezione in alto della pagina. 
+
+![Example of a web page with navigation links at the top](images/egNavLinksAtTop.png)
+
+- Cerca il codice usato per creare un elenco nei passaggi precedenti.
+
+- Premi invio subito prima del tag di apertura `<ul>` per creare una nuova riga vuota, dopo su questa nuova riga scrivi il seguente tag: `<nav>`. Trinket aggiungerà automaticamente il tag di chiusura , ma puoi cancellarlo perchè al momento non è al posto giuasto.
+
+- Subito **dopo** il tag di chiusura `</ul>` , premi **Invio** per creare un'altra riga vuota, e digita qui il tag di chiusura `</nav>`. 
+
+- Ora dovrai selezionate l'intera sezione `<nav>` e l'elenco cliccando appena rima del tag `<nav>` e tenendo premuto trascina il mouse verso il basso fino allo spazio immediatamente successivo al tag di chiusura  `</nav>`, in questo modo tutto il testo, inclusi i tag di apertura e chiusura saranno evidenziati. Assicurati che siano evidenziate anche le **parentesi angolari** (i segni `<` e `>`).
+
+![Text is not fully selected](images/egSelectedWhoops.png)
+![Fully selected text](images/egSelectedYay.png)
+
+- Adesso **taglierai** anzichè incollare. Premi  il tasto <kbd>Ctrl</kbd> (o <kbd>cmd</kbd>), mentre lo tieni premuto premi il tasto  <kbd>X</kbd> . Il testo selezionati scompare, ma... don't panic!
+
+- All'inizio del file in altro, clicca nello spazio tra  i tag `<header> </header>` . Assicurati che il cursore stia lampeggiando nel posto giusto. Ora incolla il testo tagliato premendo come sempre <kbd>Ctrl</kbd> (o <kbd>cmd</kbd>) e <kbd>V</kbd>. Il codice dovrebbe apparire come questo:
+
+```html
+    <header>
+        <nav>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="birds.html">Uccelli protetti</a></li>
+                <li><a href="conservation.html">Conservazione</a></li>
+                <li><a href="sanctuaries.html">Santuari degli uccelli</a></li>
+            </ul>
+        </nav>
+    </header>
+```
+
+--- collapse ---
+---
+title: Undo!
+---
+
+Se commetti un errore, puoi annullare (**undo**) premendo insieme <kbd>Ctrl</kbd> (o <kbd>cmd</kbd>) e <kbd>Z</kbd> . Generalmente è possibile premere questa combinazione di tasti tante volte quanti sono i passaggi che vuoi cancellare. Questa è un'altra combinazione di tasti che puoi usare in molti altri programmi!
+
+--- /collapse ---
+
+- Fai una prova per verificare che i link funzionino ancora.
+
+--- challenge ---
+
+## Sfida: menu di navigazione per tutte le pagine
+
+- Inserisci questa porzione di codice nella sezione header di ogni file HRML che hai creato. Questo farà apparire il menu di navigazione in ogni pagina del tuo sito.
+
+ --- hints ---
+
+ --- hint ---
+Seleziona l'intera sezione  `<nav>` copiandola come hai fatto prima premendo insieme <kbd>Ctrl</kbd> (o <kbd>cmd</kbd>) e <kbd>C</kbd> . 
+
+Dopo, in ogni file `.html`, clicca in mezzo ai tag `<header> </header>` e incolla il codice proprio come hai fatto prima.
+ --- /hint ---
+
+ --- /hints ---
+
+Ora potrai cliccare sui link in qualunque pagina tu sia. 
+
+--- /challenge ---

_tutorials/HTML-CSS Sushi Card/step_12.md

@@ -0,0 +1,75 @@
+## Creazeione di una barra-menu
+
+In questa card vedrai come trasformare il tuo menù di navigazione in una barra-menu dall'aspetto cool, soltanto aggiungendo alcune regole CSS al tuo foglio di stile.
+
+![Example of a menu bar](images/egCoolMenuBar.png)
+
+- Vai al foglio di stile nel tab `styles.css` . Clicca **sotto** una parentesi graffa di chiusura `}`, e premi  **Invio** per creare una nuova riga vuota. Aggiungi le regole CSS seguenti:
+
+```css
+    nav ul {
+        background-color: tomato;
+    }
+```
+
+Hai visto che abbiamo usato due selettori  `nav` a `ul` invece che uno solo? Se usi solo il selettore `ul` , la regola avrà effetto su tutti gli elenchi non numerati del sito, mentre aggiungendo il selettore `nav` come sopra, avrà effetto solo sugli elenchi all'interno dei tag  `nav` .
+
+![List with red background](images/egMenuBarFirstStyle.png)
+
+Ora liberiamoci dei Bullet point. Sono i  punti che compaiono prima delle voci dell'elenco. 
+
+- Aggiungi il codice seguente al file  `styles.css`. Nuovamente, scrivi si una nuova riga dopo `}` così non digiterai all'inteno di un altro blocco di regole.
+
+```css
+    nav ul li {
+        list-style-type: none;
+    }
+```
+
+Come puoi notare questo set di regole ha tre selettori:  si selezionano tutti gli elementi `li` che si trovano in una lista `ul` che a sua volta si trova all'interno di una sezione `nav` . Forte! 
+
+![List with bullet points removed](images/egMenuBarNoBullets.png)
+
+Ora imposteremo la lista in orizzontale anzichè verticale. 
+
+- Dentro la regola CSS che hai appena creato aggiungi questa riga di codice: `display: inline;`.
+
+![](images/egMenuBarInline.png) 
+
+- Ora gli oggetti del menu sono orizzontali ma tutti schiacciati insieme, quindi aggiungiamo le proprietà  `margin-right` e `margin-left` per inserire un po' di spazio tra di essi. Ora Il blocco di codice CSS dovrebbe essere così:
+
+```css
+    nav ul li {
+        list-style-type: none;
+        display: inline;
+        margin-right: 10px;
+        margin-left: 10px;
+    }
+```
+
+Ricorda: `10px` significa 10 pixels.
+
+Cosa ne pensi se ora facciamo in modo che il menu cambi in modo da indicare in quale pagina ti trovi? Questa parte non riguarda il foglio di stile.
+
+- Iniziamo dalla homepage. Vai al file `index.html`. Nell'elenco con i link del menu, rimuovi il tag del link prima edopo la parola  `Home`, in modo che l'oggetto della lista che indica l'homepage appaia solo tra i tag `<li> e </li>`, come questo: `<li>Home</li>`.
+
+- Ora devi fare lo stesso in tutti gli altri file che compongono le pagine del tuo sito, rimuovendo ogni volta i tag che linkano alla pagina stessa che stai modificando. Così, per esempio, nel file `birds.html`, abbiamo rimosso il tag link tags nell'oggetto `Uccelli protetti`:
+
+```html
+    <header>
+        <nav>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li>Protected Birds</li>
+                <li><a href="conservation.html">Conservazione</a></li>
+                <li><a href="sanctuaries.html">Santuari degli uccelli</a></li>
+            </ul>
+        </nav>
+    </header>
+```
+
+- Esplora le tue pagine cliccando sui link. Vedi come la barra-menu indica la pagina che stai visitando indicandola con del semplice testo anzichè con un link? 
+
+![Example of menu bar highlighting current page](images/egMenuBarOnPage.png)
+
+Nella prossima card imparerai alcuni trucchi di CSS per fare ancora più bella la tua barra-menu.

_tutorials/HTML-CSS Sushi Card/step_13.md

@@ -0,0 +1,59 @@
+## Aggiungiamo dello stile alla barra-menu
+
+Con  CSS, le possibilità per dare un look fantastico alla tua menu-bar sono infinite. 
+
+- Vai nuovamente al file `styles.css` - il posto dove avvengono le cose cool!
+
+- Trova il tuo selettore `nav ul` , e aggiungiamo altre regole in modo che sia come questo:
+
+```css
+  nav ul {
+    background-color: tomato;
+    border-style: solid;
+    border-color: MediumVioletRed;
+    border-width: 2px;
+    padding: 10px;
+  }
+```
+
+La proprietà `padding` aggiunge dello spazio. Riesci ad immaginare a cosa servono le altre proprietà? Prova a fare degli esperimenti con altri colori ed altri numeri di pixel.  
+
+![Menu bar with borders and padding added](images/egMenuBarMoreStyle.png)
+
+- Per sbarazzarsi della sottolineatura dei link, aggiungi il codice che segue su una nuova riga dopo la chiusura della parentesi graffa `}` della regola per `nav ul li`. Potresti inserirlo dove vuoi dopo `}`, ma sarebbe meglio mantenere insieme le cose che sono collegate tra di loro, così sarà più facile trovarle!
+
+```css
+  nav ul li a {
+      text-decoration: none;
+  }
+```
+
+La regola precedente si applica a tutti i link  `<a>` situati all'interno di un oggetto `<li>` in un elenco non numerato `<ul>` posto a sua volta all'interno di una sezione `<nav>`. Wow, sono ben quattro selettori! 
+
+![Menu bar with link underlining removed](images/egMenuBarNoUnderline.png)
+
+Ti ricordi come hai rimosso il tag link da alcuni oggetti dell'elenco nella sezione `<nav>` in modo da riconoscere in quale pagina ti trovavi? Perchè non cambiare anche il colore degli elementi della lista di navigazione che non sono dei link? 
+
+- Trova il selettore `nav ul li` , e **dentro** la parentesi graffa aggiungi la riga:
+
+```css
+  color: PapayaWhip;
+```
+
+Puoi scegliere qualunque colore ti piaccia! 
+
+Puoi aggiungere la proprietà `color` alla regola del selettore  `nav ul li a` in modo che sia di un colore differente dagli altri link del sito.
+
+- Cosa ne pensi di mettere degli angoli arrotondati per il tuo menu? Prova ad aggiungere il codice seguente alla regola di `nav ul` e guarda cosa succede: `border-radius: 10px;`.
+
+Con la proprietà `border-radius` è veramente facile dare un look più moderno ad ogni cosa! 
+
+![Webpage with rounded corners on the menu bar and on a picture](images/egMenuBarFullStyles_result.png)
+
+--- challenge ---
+
+## Sfida: fai in modo che gli angoli delle tue immagini siano arrotondati
+
+- Nel tuo foglio di stile, crea un nuovo set di regole per le immagini usando il selettore `img` e aggiungi la regola `border-radius`.
+
+--- /challenge ---

_tutorials/HTML-CSS Sushi Card/step_14.md

@@ -0,0 +1,93 @@
+## Aggiungere una tabella
+
+A volte può essere utile mostrare delle informazioni in una tabella. Per esempio, potresti voler fare un elenco dei membri di una società sportiva locale o della squadra della scuola, oppure la top ten delle tue canzoni preferite.
+
+Una tabella è una griglia fatta di **righe** e **colonne**. La maggior parte delle tabelle include in cima ad ogni colonna un titolo chiamato **header**. Ecco un esempio:
+
+![Example of information in a table](images/egTableResult.png)
+
+- Vai al file `page_with_table.html`. Qui vedrai un mucchio di codice tra i tag `<table> </table>` . 
+
+- Seleziona tutto il codice dall'inizio del tag `<table>` fino al tag di chiusura `</table>` e copialo. Poi vai ad uno dei tuoi file dove vorresti mettere una tabella e incolla il codice.
+
+Al momento la tua tabella è vuota. 
+
+- Inizia a riempire la tabella con ciò che ti piace! Semplicemente inserisci del testo tra i tag `<td> </td>` e i tag `<th> </th>`. Puoi aggiungere più informazioni e più tag se lo desideri.
+
+--- collapse ---
+---
+title: Codice di esempio
+---
+
+Il codice HTML per la tabella apparirà come quello qui sotto:
+
+```html
+  <table>
+    <tr>
+      <th>Nome</th>
+      <th>Località</th>
+      <th>Uccelli trovati qui</th>
+    </tr>
+    <tr>
+      <td>Skellig Michael</td>
+      <td>Island off coast of Kerry</td>
+      <td>Pulcinelle di mare</td>
+    </tr>
+    <tr>
+      <td>Bird Island</td>
+      <td>Strangford Lough</td>
+      <td>Cormorani</td>
+    </tr>
+    <tr>
+      <td>Burren Birds of Prey Centre</td>
+      <td>County Clare</td>
+      <td>Vari tipi, incluse aquile, falchi, gufi e falconi</td>
+    </tr>
+  </table>
+```
+
+--- /collapse ---
+
+Per aggiungere un'altra **riga**, aggiungi un altro set di tag `<tr> </tr>`. Tra di essi, inserisci dei **dati** tra le coppie di tag `<td> </td>` tanti quanti nelle altre righe.
+
+Per aggiungere un'altra **colonna**, aggiungi altri dati con un set di tag `<td> </td>` per **riga**. Aggiungi anche un ulteriore  **header** per la prima riga usando i tag `<th> </th>`.
+
+--- collapse ---
+---
+title: Come funziona?
+---
+
+Diamo un'occhiata a tutti questo codice. Assomiglia un po' al codice per un elenco (ti ricordi `<ul>` e `<ol>`) ma con più livelli.
+
+Ogni coppia di tag `<tr> </tr>` genera una riga, così tutto ciò che scrivi al loro interno appare in una singola riga dalla tabella.
+
+La prima irga contiene i tag `<th> </th>` tags. Questi sono usati per i titoli delle colonne che vanno perciò indicati tra di essi. Ce n'è una coppia per ogni colonna della tua tabell.
+
+I tag `<td> </td>` definiscono ciò che sono le celle della tabella, e appaiono sulla stessa riga. Sono simili ai tag  `<li> </li>` degli elenchi: tutto ciò che va tra di essi costituisce un oggetto in una riga della tabella.
+
+--- /collapse ---
+
+- Se dai un'occhiata alla fine del file `styles.css`, troverai del codice CSS che descrive come deve apparire una tabella. Non serva che tu lo comprenda tutto ora! Ma puoi fare un po' di esperimenti cambiando il testo, i bordi e il colore di sfondo, creando il tuo stile personale.
+
+```css
+  table, th, td {
+    border: 1px solid HoneyDew;
+    border-collapse: collapse;
+  }
+  tr {
+    background-color: PaleTurquoise;
+  }
+  th, td {
+    vertical-align: top;
+    padding: 5px;
+    text-align: left;
+  }
+  th {
+    color: purple;
+  }
+  td {
+    color: purple;
+  }
+```
+
+Hai visto che alcuni selettori sono separati dalle virgole, per esempio `table, th, td`? Questo è un **elenco di selettori**: significa che la regole che segue si applica a tutti i tag `<th>`, a tutti i tag `<td>`. Ti evita di dover riscrivere il set di regole per ogni selettore!