Roberto Pauletto
4 years ago
parent
c0614a8c0b
commit
fd4d0ee8e4
@ -0,0 +1,232 @@
|
||||
# Progetto Terrario Parte 1: Introduzione all'HTML
|
||||
|
||||
|
||||
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Quiz Pre-Lezione
|
||||
|
||||
[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/15)
|
||||
|
||||
### Introduzione
|
||||
|
||||
HTML, o HyperText Markup Language, è lo "scheletro" del web. Se CSS "veste" il proprio HTML e JavaScript lo porta in vita, HTML è il corpo della propria applicazione web. Anche La sintassi dell'HTML riflette questa idea, poiché include i tag "head" (testa), "body" (corpo) e "footer" (piè di pagina).
|
||||
|
||||
In questa lezione si userà l'HTML per impaginare lo "scheletro" dell'interfaccia del terrario virtuale. Avrà un titolo e tre colonne: una destra e una sinistra dove vivono le piante trascinabili e un'area centrale che sarà il vero terrario dall'aspetto di un vaso di vetro. Alla fine di questa lezione, si sarà in grado di vedere le piante nelle colonne, ma l'interfaccia apparirà un po' strana; non deve preoccupare, nella prossima sezione si aggiungeranno stili CSS all'interfaccia per renderla migliore.
|
||||
|
||||
### Attività
|
||||
|
||||
Sul proprio computer, creare una cartella chiamata "terrarium" e al suo interno un file chiamato "index.html". Puoi farlo in Visual Studio Code dopo aver creato la cartella del terrario aprendo una nuova finestra di VS Code, facendo clic su "apri cartella" e accedendo alla nuova cartella. Fare clic sul piccolo pulsante "file" nel riquadro Explorer e creare il nuovo file:
|
||||
|
||||
|
||||
|
||||
Oppure
|
||||
|
||||
Usare questi comandi sul proprio git bash:
|
||||
|
||||
* `mkdir terrarium`
|
||||
* `cd terrarium`
|
||||
* `touch index.html`
|
||||
* `code index.html` oppure `nano index.html`
|
||||
|
||||
> I file index.html indicano a un browser che è il file predefinito in una cartella; URL come `https://anysite.com/test` potrebbero essere creati utilizzando una struttura di cartelle che includa una cartella chiamata `test` con `index.html` al suo interno; `index.html` non deve essere visualizzato in un URL.
|
||||
|
||||
---
|
||||
|
||||
## I tag DocType e html
|
||||
|
||||
La prima riga di un file HTML è il suo doctype. È un po' sorprendente che sia necessario avere questa riga all'inizio del file, ma indica ai browser meno recenti che il browser deve eseguire il rendering della pagina in una modalità standard, seguendo le specifiche html correnti.
|
||||
|
||||
> Suggerimento: in VS Code, si può passare il mouse su un tag e ottenere informazioni sul suo utilizzo dalle guide di riferimento MDN.
|
||||
|
||||
La seconda riga dovrebbe essere il tag di apertura del tag `<html>`, seguito subito dal suo tag di chiusura `</html>`. Questi tag sono gli elementi radice dell'interfaccia.
|
||||
|
||||
### Attività
|
||||
|
||||
Aggiungere queste righe all'inizio del file `index.html` :
|
||||
|
||||
```HTML
|
||||
<!DOCTYPE html>
|
||||
<html></html>
|
||||
```
|
||||
|
||||
✅ Ci sono alcune modalità differenti che possono essere determinate impostando DocType con una stringa di query: [Quirks Mode e Standards Mode](https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Queste modalità supportano browser molto vecchi che non vengono normalmente utilizzati al giorno d'oggi (Netscape Navigator 4 e Internet Explorer 5). Ci si può attenere alla dichiarazione doctype standard.
|
||||
|
||||
---
|
||||
|
||||
## La "testa" del documento (tag head)
|
||||
|
||||
L'area "head" del documento HTML include informazioni cruciali sulla propria pagina web, note anche come [metadati](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta). In questo caso, si dice al server web a cui verrà inviata questa pagina per essere renderizzata, queste quattro cose:
|
||||
|
||||
- il titolo della pagina
|
||||
- metadati della pagina tra cui:
|
||||
- l'"insieme di caratteri", che indica quale codifica dei caratteri viene utilizzata nella pagina
|
||||
- informazioni sul browser, incluso `x-ua-compatibile` che indica che il browser IE=edge è supportato
|
||||
- informazioni su come dovrebbe comportarsi il viewport quando viene caricato. L'impostazione della visualizzazione (viewport) in modo che abbia una scala iniziale di 1 controlla il livello di zoom quando la pagina viene caricata per la prima volta.
|
||||
|
||||
### Attività
|
||||
|
||||
Aggiungere un blocco "head" al proprio documento tra i tag di apertura e di chiusura `<html>`.
|
||||
|
||||
```html
|
||||
<head>
|
||||
<title>Benvenuti al mio Terrario Virtuale</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
```
|
||||
|
||||
✅ Cosa accadrebbe se il meta tag viewport viene impostato come questo: `<meta name="viewport" content="width=600">`? Ulteriori informazioni sul [viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag).
|
||||
|
||||
---
|
||||
|
||||
## Il corpo (`body`) del documento
|
||||
|
||||
### Etichette HTML
|
||||
|
||||
In HTML, si aggiungono tag al proprio file .html per creare elementi di una pagina web. Ogni tag di solito ha un tag di apertura e chiusura, come questo: `<p>ciao</p>` per indicare un paragrafo. Il corpo dell'interfaccia si crea aggiungendo una coppia di tag `<body>` all'interno della coppia di tag `<html>`; il markup (marcatura) ora ha questo aspetto:
|
||||
|
||||
### Attività
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Benvenuti al mio Terrario Virtuale</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Ora è possibile iniziare a costruire la propria pagina. Normalmente, si usano i tag `<div>` per creare elementi separati in una pagina. Verranno creati una serie di elementi `<div>` che conterranno immagini.
|
||||
|
||||
### Immagini
|
||||
|
||||
Un tag html che non necessita di un tag di chiusura è il tag `<img>`, perché ha un elemento `src` che contiene tutte le informazioni di cui la pagina ha bisogno per eseguire il rendering dell'elemento.
|
||||
|
||||
Creare una cartella nella propria app chiamata `images` e in quella aggiungere tutte le immagini nella [cartella del codice sorgente](../../solution/images); (ci sono 14 immagini di piante).
|
||||
|
||||
### Attività
|
||||
|
||||
Aggiungere quelle immagini di piante nelle due colonne tra i tag `<body></body>`:
|
||||
|
||||
```html
|
||||
<div id="page">
|
||||
<div id="left-container" class="container">
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="right-container" class="container">
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
> Nota: Span contro Div. I div sono considerati elementi "blocco" e gli span sono "in linea". Cosa succederebbe se si trasformassero questi div in span?
|
||||
|
||||
Con questo markup, le piante ora vengono visualizzate sullo schermo. Sembra piuttosto brutto, perché non hanno ancora lo stile utilizzando CSS e verrà fatto nella prossima lezione.
|
||||
|
||||
Ogni immagine ha un testo alternativo che apparirà anche se non è possibile vedere o renderizzare un'immagine. Questo è un attributo importante da includere per l'accessibilità. Ulteriori informazioni sull'accessibilità nelle lezioni future; per ora, occorre ricordare che l'attributo alt fornisce informazioni alternative per un'immagine se un utente per qualche motivo non può visualizzarla (a causa di una connessione lenta, un errore nell'attributo src o se l'utente utilizza un lettore di schermo).
|
||||
|
||||
✅ Si è notato che ogni immagine ha lo stesso tag alt? È una buona pratica? Se sì, perché? Se no, perché? Si può migliorare questo codice?
|
||||
|
||||
---
|
||||
|
||||
## Markup semantico
|
||||
|
||||
In generale, è preferibile utilizzare una "semantica" significativa quando si scrive HTML. Cosa significa? Significa che si utilizzano i tag HTML per rappresentare il tipo di dati o interazione per cui sono stati progettati. Ad esempio, il testo del titolo principale di una pagina dovrebbe utilizzare un tag `<h1>`.
|
||||
|
||||
Aggiungere la seguente riga proprio sotto il tag di apertura ` <body> `:
|
||||
|
||||
```html
|
||||
<h1>My Terrarium</h1>
|
||||
```
|
||||
|
||||
L'utilizzo di markup semantico tipo avere delle intestazioni come `<h1>` e il rendering di elenchi non ordinati come `<ul>` aiuta i lettori di schermo a navigare in una pagina. In generale, i pulsanti dovrebbero essere scritti come `<button>` e gli elenchi come `<li>`. Sebbene sia _possibile_ utilizzare elementi con uno stile speciale `<span>` con gestori di clic per simulare i pulsanti, è meglio per gli utenti disabili utilizzare le tecnologie per determinare dove risiede un pulsante in una pagina e interagire con esso, se l'elemento appare come un pulsante. Per questo motivo, si dovebbe cercare di utilizzare il più possibile il markup semantico.
|
||||
|
||||
✅ Si dia un'occhiata a un lettore di schermo e a [come interagisce con una pagina web](https://www.youtube.com/watch?v=OUDV1gqs9GA). Si riusce a capire perché avere un markup non semantico potrebbe frustrare l'utente?
|
||||
|
||||
## Il terrario
|
||||
|
||||
L'ultima parte di questa interfaccia prevede la creazione di markup che verrà disegnato per creare un terrario.
|
||||
|
||||
### Attività:
|
||||
|
||||
Aggiungere questo markup sopra l'ultimo tag `</div>`:
|
||||
|
||||
```html
|
||||
<div id="terrarium">
|
||||
<div class="jar-top"></div>
|
||||
<div class="jar-walls">
|
||||
<div class="jar-glossy-long"></div>
|
||||
<div class="jar-glossy-short"></div>
|
||||
</div>
|
||||
<div class="dirt"></div>
|
||||
<div class="jar-bottom"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
✅ Anche se questo markup è stato aggiunto allo schermo, non si assolutamente nulla di renderizzato. Perché?
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Sfida
|
||||
|
||||
Ci sono alcuni "vecchi" selvaggi tag in HTML con cui è ancora divertente giocare, anche se non si dovrebero usare tag deprecati come [questi tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) nel proprio markup. Tuttavia, si può usare il vecchio tag `<marquee>` per far scorrere orizzontalmente il titolo h1? (se viene fatto, non dimenticarsi di rimuoverlo dopo)
|
||||
|
||||
## Quiz Post-Lezione
|
||||
|
||||
[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/16)
|
||||
|
||||
## Revisione e Auto Apprendimento
|
||||
|
||||
L'HTML è il sistema di blocchi costitutivi "collaudato e vero" che ha contribuito a trasformare il Web in quello che è oggi. Imparare un po' sulla sua storia studiando alcuni tag vecchi e nuovi. Si riusce a capire perché alcuni tag sono stati deprecati e altri aggiunti? Quali tag potrebbero essere introdotti in futuro?
|
||||
|
||||
Ulteriori informazioni sulla creazione di siti per il Web e i dispositivi mobili in [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=cxaall-4621-cxall).
|
||||
|
||||
|
||||
## Compito
|
||||
|
||||
[Fare pratica con il proprio HTML: creare un modello di blog](assignment.it.md)
|
||||
@ -0,0 +1,11 @@
|
||||
# Fare pratica con il proprio HTML: creare un modello di blog
|
||||
|
||||
## Istruzioni
|
||||
|
||||
Immaginare di progettare o riprogettare il proprio sito web personale. Creare un markup grafico del proprio sito, quindi scrivere il markup HTML che si utilizzerebbe per costruire i vari elementi del sito. Si può fare su carta e scansionarlo o utilizzare un software di propria scelta, ci si assicuri solo di codificare manualmente il markup HTML.
|
||||
|
||||
## Rubrica
|
||||
|
||||
| Criteri | Ottimo | Adeguato | Necessita miglioramento |
|
||||
| -------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
|
||||
| | La disposizione del blog è rappresentata visivamente con almeno 10 elementi di markup visualizzati | La disposizione del blog è rappresentata visivamente con circa 5 elementi di markup visualizzati | La disposizione del blog è rappresentata visivamente con almeno 3 elementi di markup visualizzati |
|
||||
@ -0,0 +1,263 @@
|
||||
# Progetto Terrario Parte 2: Introduzione a CSS
|
||||
|
||||
|
||||
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Quiz Pre-Lezione
|
||||
|
||||
[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/17)
|
||||
|
||||
### Introduzione
|
||||
|
||||
CSS, o Cascading Style Sheets (Fogli di Stile a Cascata), risolve un problema importante dello sviluppo web: come rendere piacevole il proprio sito web. Lo stile delle proprie app le rende più utilizzabili e più belle; è anche possibile utilizzare CSS per creare Responsive Web Design (RWD), consentendo alle proprie app di avere un bell'aspetto indipendentemente dalle dimensioni dello schermo su cui vengono visualizzate. CSS non serve solo a rendere bella la propria app; le sue specifiche includono animazioni e trasformazioni che possono consentire interazioni sofisticate per le proprie app. Il CSS Working Group aiuta a mantenere le attuali specifiche CSS; è possibile seguire il loro lavoro sul [sito del World Wide Web Consortium](https://www.w3.org/Style/CSS/members).
|
||||
|
||||
> Nota, CSS è un linguaggio che si evolve, come tutto sul web, e non tutti i browser supportano parti più recenti delle specifiche. Controllare sempre le proprie implementazioni consultando [CanIUse.com](https://caniuse.com).
|
||||
|
||||
In questa lezione, si aggiungeranno stili al terrario online e si imparerà di più su diversi concetti CSS: la cascata, l'ereditarietà e l'uso di selettori, posizionamento e utilizzo dei CSS per disporre gli elementi. Nel processo si disporrà il posizionamento del terrario e si creerà il terrario stesso.
|
||||
|
||||
### Pre-requisiti
|
||||
|
||||
L'HTML per il proprio terrario dovrebbe essere a disposizione, costruito e pronto per applicarvi uno stile.
|
||||
|
||||
### Attività
|
||||
|
||||
Nella cartella terrarium, creare un nuovo file chiamato `style.css`. Importare quel file nella sezione `<head>`:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## La Cascata
|
||||
|
||||
I Fogli di Stile a Cascata (CSS) incorporano l'idea che gli stili "cascano" in modo tale che l'applicazione di uno stile sia guidata dalla sua priorità. Gli stili impostati dall'autore di un sito Web hanno la priorità su quelli impostati da un browser. Gli stili impostati "in linea" hanno la priorità su quelli impostati in un foglio di stile esterno.
|
||||
|
||||
### Attività
|
||||
|
||||
Aggiungere lo stile in linea "color: red" al tag `<h1>`:
|
||||
|
||||
```HTML
|
||||
<h1 style="color: red">My Terrarium</h1>
|
||||
```
|
||||
|
||||
Quindi, aggiungere il seguente codice al proprio file `style.css`:
|
||||
|
||||
```CSS
|
||||
h1 {
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
✅ Quale colore viene visualizzato nella propria app web? Perché? Si riesce a trovare un modo per ignorare gli stili? Quando si vorrebbe farlo o perché no?
|
||||
|
||||
---
|
||||
|
||||
## Ereditarietà
|
||||
|
||||
Gli stili vengono ereditati da uno stile antenato a uno discendente, in modo che gli elementi nidificati ereditino gli stili dei loro genitori.
|
||||
|
||||
### Attività
|
||||
|
||||
Impostare il carattere nell'elemento body su un dato font e controllare per vedere il carattere di un elemento nidificato:
|
||||
|
||||
```CSS
|
||||
body {
|
||||
font-family: helvetica, arial, sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
Aprire la console del browser nella scheda "Elementi" e osservare il font di H1. Il suo tipo di font viene ereditato dall'elemento body, come dichiarato all'interno del browser:
|
||||
|
||||
|
||||
|
||||
✅ È possibile fare in modo che uno stile annidato erediti una proprietà diversa?
|
||||
|
||||
---
|
||||
|
||||
## Selettori CSS
|
||||
|
||||
### Tag
|
||||
|
||||
Finora, il file `style.css` ha solo pochi tag ai quali si è applicato uno stile e l'app sembra piuttosto strana:
|
||||
|
||||
```CSS
|
||||
body {
|
||||
font-family: helvetica, arial, sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #3a241d;
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
|
||||
Questo modo di modellare un tag dà il controllo su elementi unici, ma si devono controllare gli stili di molte piante nel proprio terrario. Per farlo, si devono sfruttare i selettori CSS.
|
||||
|
||||
### ID
|
||||
|
||||
Viene aggiunto un po' di stile per la disposizione dei contenitori sinistro e destro. Poiché esiste un solo contenitore sinistro e un solo contenitore destro, ad essi vengono forniti degli ID nel markup. Per applicare lo stile, usare `#`:
|
||||
|
||||
```CSS
|
||||
#left-container {
|
||||
background-color: #eee;
|
||||
width: 15%;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#right-container {
|
||||
background-color: #eee;
|
||||
width: 15%;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
Qui, i contenitori sono stati posizionati con posizionamento assoluto all'estrema sinistra e destra dello schermo e si sono utilizzate le percentuali per la loro larghezza in modo che possano ridimensionarsi per piccoli schermi di dispositivi mobili.
|
||||
|
||||
✅ Questo codice è abbastanza ripetuto, quindi non "DRY" (Don't Repeat Yourself - Non ripetere se stessi); si può trovare un modo migliore per applicare uno stile a questi ID, magari con un ID e una classe? Si dovrebbe cambiare il markup e rifattorizzare il CSS:
|
||||
|
||||
```html
|
||||
<div id="left-container" class="container"></div>
|
||||
```
|
||||
|
||||
### Classi
|
||||
|
||||
Nell'esempio sopra, è stato applicato uno stile a due elementi unici sullo schermo. Se si vuole applicare gli stili a molti elementi sullo schermo, si possono usare le classi CSS. Si fa questo per disporre le piante nei contenitori sinistro e destro.
|
||||
|
||||
Si noti che ogni pianta nel markup HTML ha una combinazione di id e classi. Gli id qui sono usati da JavaScript che verrà aggiunto in seguito per manipolare il posizionamento della pianta nel terrario. Le classi, tuttavia, danno a tutte le piante un determinato stile.
|
||||
|
||||
```html
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
|
||||
</div>
|
||||
```
|
||||
|
||||
Aggiungere il seguente codice al proprio file `style.css` :
|
||||
|
||||
```css
|
||||
.plant-holder {
|
||||
position: relative;
|
||||
height: 13%;
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
.plant {
|
||||
position: absolute;
|
||||
max-width: 150%;
|
||||
max-height: 150%;
|
||||
z-index: 2;
|
||||
}
|
||||
```
|
||||
|
||||
Da notare in questo frammento di codice è la combinazione di posizionamento relativo e assoluto, che verrà trattata nella prossima sezione. Si dia un'occhiata al modo in cui le altezze sono gestite in percentuale:
|
||||
|
||||
Si imposta l'altezza del porta piante al 13%, un buon numero per fare in modo che tutte le piante siano esposte in ogni contenitore verticale senza necessità di scorrimento.
|
||||
|
||||
Si imposta il supporto della pianta in modo che si sposti a sinistra per consentire alle piante di essere più centrate all'interno del loro contenitore. Le immagini hanno una grande quantità di sfondo trasparente in modo da renderle più trascinabili, quindi devono essere spinte a sinistra per adattarsi meglio allo schermo.
|
||||
|
||||
Quindi, alla pianta stessa viene assegnata una larghezza massima (max-width) del 150%. Ciò gli consente di ridimensionarsi man mano che il browser si riduce. Provare a ridimensionare il proprio browser; le piante rimangono nei loro contenitori ma si riducono per adattarsi.
|
||||
|
||||
Da notare anche l'uso di z-index, che controlla la profondità relativa di un elemento (in modo che le piante si posizionano sopra il contenitore e sembrano posizionarsi all'interno del terrario).
|
||||
|
||||
✅ Perché serve un selettore CSS sia per il supporto che per la pianta stessa?
|
||||
|
||||
## Posizionamento CSS
|
||||
|
||||
Mescolare le proprietà della posizione - ci sono posizioni statiche (static), relative (relative), fisse (fixed), assolute (absolute) e permanenti (sticky) - può essere un po' complicato, ma se fatto correttamente fornisce un buon controllo sugli elementi delle proprie pagine.
|
||||
|
||||
Gli elementi posizionati in modo assoluto sono posizionati rispetto alla posizione dei loro antenati più prossimi e, se non ce ne sono, vengono posizionati in base al corpo (body) del documento.
|
||||
|
||||
Gli elementi posizionati in modo relativo sono posizionati in base alle direttive CSS per regolare il loro posizionamento rispetto alla loro posizione iniziale.
|
||||
|
||||
In questo esempio, il porta piante `plant-holder` è un elemento in posizione relativa che viene posizionato all'interno di un contenitore in posizione assoluta. Il comportamento risultante è che i contenitori della barra laterale sono bloccati a sinistra e a destra, e il porta piante è annidato, regolando se stesso all'interno delle barre laterali, dando spazio alle piante da posizionare in una fila verticale.
|
||||
|
||||
> La classe `plant` stessa ha anche un posizionamento assoluto, necessario per renderla trascinabile, come si scoprirà nella prossima lezione.
|
||||
|
||||
✅ Sperimentare cambiando i tipi di posizionamento dei contenitori laterali e del porta pianta. Che cosa accade?
|
||||
|
||||
## Disposizione CSS
|
||||
|
||||
Ora si utilizzerà ciò che si è appreso per costruire il terrario stesso, il tutto usando CSS!
|
||||
|
||||
Innanzitutto, si applica lo stile al div figlio `.terrarium` in modo che sia un rettangolo con bordi arrotondati usando CSS:
|
||||
|
||||
```css
|
||||
.jar-walls {
|
||||
height: 80%;
|
||||
width: 60%;
|
||||
background: #d1e1df;
|
||||
border-radius: 10%;
|
||||
position: absolute;
|
||||
bottom: 0.5%;
|
||||
left: 20%;
|
||||
opacity: 0.5;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.jar-top {
|
||||
width: 50%;
|
||||
height: 5%;
|
||||
background: #d1e1df;
|
||||
position: absolute;
|
||||
bottom: 80.5%;
|
||||
left: 25%;
|
||||
opacity: 0.7;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.jar-bottom {
|
||||
width: 50%;
|
||||
height: 1%;
|
||||
background: #d1e1df;
|
||||
position: absolute;
|
||||
bottom: 0%;
|
||||
left: 25%;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.dirt {
|
||||
width: 58%;
|
||||
height: 5%;
|
||||
background: #3a241d;
|
||||
position: absolute;
|
||||
border-radius: 0 0 4rem 4rem;
|
||||
bottom: 1%;
|
||||
left: 21%;
|
||||
opacity: 0.7;
|
||||
z-index: -1;
|
||||
}
|
||||
```
|
||||
|
||||
Notare l'uso delle percentuali qui, anche per il `border-radius` (il raggio del bordo arrotondato). Se si riduce la finestra del browser, si puòi vedere come si ridimensionano anche gli angoli del barattolo. Notare anche le percentuali di larghezza e altezza per gli elementi jar e come ogni elemento sia posizionato in modo assoluto al centro, bloccato nella parte inferiore della finestra visualizzata.
|
||||
|
||||
✅ Provare a cambiare i colori e l'opacità del barattolo rispetto a quelli della terra. Che cosa accade? Perché?
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Sfida
|
||||
|
||||
Aggiungere una lucentezza a forma di bolla nell'area inferiore sinistra del barattolo per farlo sembrare più simile al vetro. Si parte applicando lo stile `.jar-glossy-long` e `.jar-glossy-short` per ottenere la senzazione di una lucentezza riflessa. Ecco come dovrebbe apparire:
|
||||
|
||||
|
||||
|
||||
Per completare il quiz post-lezione, seguire questo modulo di apprendimento: [Applicare uno stile al codice HTML con CSS](https://docs.microsoft.com/it-it/learn/modules/build-simple-website/4-css-basics)
|
||||
|
||||
## Quiz Post-Lezione
|
||||
|
||||
[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/18)
|
||||
|
||||
## Revisione e Auto Apprendimento
|
||||
|
||||
CSS sembra apparentemente semplice, ma ci sono molte sfide quando si cerca di modellare un'app perfettamente per tutti i browser e tutte le dimensioni dello schermo. CSS-Grid e Flexbox sono strumenti che sono stati sviluppati per rendere il lavoro un po' più strutturato e più affidabile. Scoprire questi strumenti giocando a [Flexbox Froggy](https://flexboxfroggy.com/) e [Grid Garden](https://codepip.com/games/grid-garden/).
|
||||
|
||||
## Compito
|
||||
|
||||
[Refattorizzare CSS](assignment.it.md)
|
||||
@ -0,0 +1,11 @@
|
||||
# Rifattorizzare CSS
|
||||
|
||||
## Istruzioni
|
||||
|
||||
Restyling del terrario utilizzando Flexbox o CSS Grid, acquisire schermate per mostrare che lo si è testato su diversi browser. Potrebbe essere necessario modificare il markup, quindi creare una nuova versione dell'app con la grafica disposta per il refactoring. Non ci si preoccupi di rendere gli elementi trascinabili; per ora rifattorizzare solo HTML e CSS.
|
||||
|
||||
## Rubrica
|
||||
|
||||
| Criteri | Ottimo | Adeguato | Necessita miglioramento |
|
||||
| -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
|
||||
| | Presenta un terrario completamente rinnovato utilizzando Flexbox o CSS Grid | Restyling di alcuni elementi | Il restyling del terrario è completamente fallito |
|
||||
@ -0,0 +1,217 @@
|
||||
# Progetto Terrario Parte 3: Manipolazione del DOM e Closure
|
||||
|
||||
|
||||
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Quiz Pre-Lezione
|
||||
|
||||
[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/19)
|
||||
|
||||
### Introduzione
|
||||
|
||||
La manipolazione del DOM, acronimo per "Document Object Model", è un aspetto chiave dello sviluppo web. Secondo [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction), "Il Document Object Model (DOM) è la rappresentazione dei dati degli oggetti che compongono la struttura e il contenuto di un documento sul web". Le sfide intorno alla manipolazione del DOM sul Web sono state spesso l'impulso dietro l'utilizzo di infrastrutture (framework) JavaScript invece di JavaScript puro (vanilla) per gestire il DOM, ma ce la faremo da soli!
|
||||
|
||||
Inoltre, questa lezione introdurrà l'idea di una [closure JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures), che si può intendere come una funzione racchiusa da un'altra funzione in modo che la funzione più interna abbia accesso all'ambito della funzione più esterna.
|
||||
|
||||
> Le closure JavaScript sono un argomento vasto e complesso. Questa lezione tocca l'idea più basilare che nel codice di questo terrario si troverà una closure: una funzione interna e una funzione esterna costruite in modo da consentire alla funzione interna di accedere all'ambito della funzione esterna. Per molte più informazioni su come funziona, visitare l'[ampia documentazione](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures).
|
||||
|
||||
Verra usata una closure per manipolare il DOM.
|
||||
|
||||
Si pensi al DOM come a un albero, che rappresenta tutti i modi in cui un documento di una pagina web può essere manipolato. Sono state scritte varie API (Application Program Interfaces) in modo che i programmatori, utilizzando linguaggio di programmazione di propria scelta, possano accedere al DOM e modificarlo, cambiarlo, riorganizzarlo e gestirlo in altro modo.
|
||||
|
||||
|
||||
|
||||
> Una rappresentazione del DOM e del markup HTML che lo indirizza Da [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
|
||||
|
||||
In questa lezione, verrà completato il progetto di terrario interattivo creando il codice JavaScript che consentirà a un utente di manipolare le piante sulla pagina.
|
||||
|
||||
### Pre-requisiti
|
||||
|
||||
Si dovrebbe avere il codice HTML e CSS per il proprio terrario costruito. Alla fine di questa lezione si sarà in grado di spostare le piante dentro e fuori dal terrario trascinandole.
|
||||
|
||||
### Attività
|
||||
|
||||
Nella cartella terrarium, creare un nuovo file chiamato `script.js`. Importare quel file nella sezione `<head>`:
|
||||
|
||||
```html
|
||||
<script src="./script.js" defer></script>
|
||||
```
|
||||
|
||||
> Nota: utilizzare `defer` quando si importa un file JavaScript esterno nel file html in modo da consentire l'esecuzione di JavaScript solo dopo che il file HTML è stato completamente caricato. È anche possibile utilizzare l'attributo `async`, che consente l'esecuzione dello script durante l'analisi del file HTML, ma in questo caso, è importante avere gli elementi HTML completamente disponibili per il trascinamento prima di consentire l'esecuzione dello script di trascinamento.
|
||||
---
|
||||
|
||||
## Gli elementi DOM
|
||||
|
||||
La prima cosa da fare è creare i riferimenti agli elementi che si vogliono manipolare nel DOM. Nel nostro caso, sono le 14 piante attualmente in attesa nelle barre laterali.
|
||||
|
||||
### Attività
|
||||
|
||||
```javascript
|
||||
dragElement(document.getElementById('plant1'));
|
||||
dragElement(document.getElementById('plant2'));
|
||||
dragElement(document.getElementById('plant3'));
|
||||
dragElement(document.getElementById('plant4'));
|
||||
dragElement(document.getElementById('plant5'));
|
||||
dragElement(document.getElementById('plant6'));
|
||||
dragElement(document.getElementById('plant7'));
|
||||
dragElement(document.getElementById('plant8'));
|
||||
dragElement(document.getElementById('plant9'));
|
||||
dragElement(document.getElementById('plant10'));
|
||||
dragElement(document.getElementById('plant11'));
|
||||
dragElement(document.getElementById('plant12'));
|
||||
dragElement(document.getElementById('plant13'));
|
||||
dragElement(document.getElementById('plant14'));
|
||||
```
|
||||
|
||||
Cosa sta succedendo qui? Si sta referenziando il documento e guardando attraverso il suo DOM per trovare un elemento con un ID particolare. Si ricorda nella prima lezione sull'HTML che sono stati forniti ID individuali a ciascuna immagine della pianta (`id = "plant1"`)? Ora si farà uso di quello sforzo. Dopo aver identificato ogni elemento, lo si passi a una funzione chiamata `dragElement` che verrà creata a breve. Quindi l'elemento nell'HTML è ora abilitato al trascinamento, o lo sarà a breve.
|
||||
|
||||
✅ Perché gli elementi vengono referenziati in base al loro Id? Perché non la loro classe CSS? Si può fare riferimento alla lezione precedente su CSS per rispondere a questa domanda.
|
||||
|
||||
---
|
||||
|
||||
## Closure
|
||||
|
||||
Ora si è pronti per creare la closure dragElement, che è una funzione esterna che racchiude una o più funzioni interne (nel nostro caso, ne avremo tre).
|
||||
|
||||
Le closure sono utili quando una o più funzioni devono accedere all'ambito di una funzione più esterna. Ecco un esempio:
|
||||
|
||||
```javascript
|
||||
function displayCandy(){
|
||||
let candy = ['jellybeans'];
|
||||
function addCandy(candyType) {
|
||||
candy.push(candyType)
|
||||
}
|
||||
addCandy('gumdrops');
|
||||
}
|
||||
displayCandy();
|
||||
console.log(candy)
|
||||
```
|
||||
|
||||
In questo esempio, la funzione displayCandy circonda una funzione che inserisce un nuovo tipo di caramella in una matrice già esistente nella funzione. Se si dovesse eseguire questo codice, l'array `candy` non sarebbe definito, poiché è una variabile locale (locale alla closure).
|
||||
|
||||
✅ Come si può rendere accessibile l'array `candy`? Si provi a spostarlo fuori dalla closure. In questo modo, l'array diventa globale, anziché rimanere disponibile solo per l'ambito locale della closure.
|
||||
|
||||
### Attività
|
||||
|
||||
Sotto le dichiarazioni degli elementi in `script.js`, creare una funzione:
|
||||
|
||||
```javascript
|
||||
function dragElement(terrariumElement) {
|
||||
//imposta 4 posizioni per il posizionamento sullo schermo
|
||||
let pos1 = 0,
|
||||
pos2 = 0,
|
||||
pos3 = 0,
|
||||
pos4 = 0;
|
||||
terrariumElement.onpointerdown = pointerDrag;
|
||||
}
|
||||
```
|
||||
|
||||
`dragElement` ottiene il suo oggetto `terrariumElement` dalle dichiarazioni nella parte superiore dello script. Quindi, si impostano alcune posizioni locali su `0` per l'oggetto passato alla funzione. Queste sono le variabili locali che verranno manipolate per ogni elemento quando si aggiunge la funzionalità di trascinamento all'interno della closure a ciascun elemento. Il terrario sarà popolato da questi elementi trascinati, quindi l'applicazione deve tenere traccia di dove sono posizionati.
|
||||
|
||||
Inoltre, al terrariumElement passato a questa funzione viene assegnato un evento di riconoscimento pressione pulsante (`pointerdown`), che fa parte delle [API web](https://developer.mozilla.org/it/docs/Web/API) progettate per aiutare con la gestione del DOM. `onpointerdown` si attiva quando viene premuto un pulsante o, in questo caso, viene toccato un elemento trascinabile. Questo gestore di evento funziona sia su browser [web che su browser di dispositivi mobili](https://caniuse.com/?search=onpointerdown), con poche eccezioni.
|
||||
|
||||
✅ Il [gestore di evento `onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) ha molto più supporto intra-browser; perché non viene usato qui? Si pensi al tipo esatto di interazione con lo schermo che si sta cercando di creare qui.
|
||||
|
||||
---
|
||||
|
||||
## La funzione Pointerdrag
|
||||
|
||||
Il terrariumElement è pronto per essere trascinato in giro; quando viene generato l'evento `onpointerdown`, viene richiamata la funzione pointerDrag. Aggiungere quella funzione proprio sotto questa riga: `terrariumElement.onpointerdown = pointerDrag;`:
|
||||
|
||||
### Attività
|
||||
|
||||
```javascript
|
||||
function pointerDrag(e) {
|
||||
e.preventDefault();
|
||||
console.log(e);
|
||||
pos3 = e.clientX;
|
||||
pos4 = e.clientY;
|
||||
}
|
||||
```
|
||||
|
||||
Succedono molte cose. Innanzitutto, si impedisce che si verifichino gli eventi predefiniti che normalmente si verificano su pointerdown utilizzando `e.preventDefault();`. In questo modo si ha un maggiore controllo sul comportamento dell'interfaccia.
|
||||
|
||||
> Tornare su questa riga quando si è costruito completamente il file di script e provarlo senza `e.preventDefault()` - cosa succede?
|
||||
|
||||
Secondo, aprire `index.html` in una finestra del browser e controllare l'interfaccia. Quando si fa clic su una pianta, puoi vedere come viene catturato l'evento "e". Analizzare l'evento per vedere quante informazioni vengono raccolte da un evento pointerdown!
|
||||
|
||||
Successivamente, notare come le variabili locali `pos3` e `pos4` sono impostate su e.clientX. È possibile trovare i valori di `e` nel riquadro di ispezione. Questi valori catturano le coordinate x e y della pianta nel momento in cui si fa clic su di essa o si tocca. Si avrà bisogno di un controllo preciso sul comportamento delle piante mentre si fa clic e si trascinano, in modo da tenere traccia delle loro coordinate.
|
||||
|
||||
✅ Sta diventando più chiaro il motivo per cui l'intera app è costruita con un'unica grande closure? Se non lo fosse, come si manterrebbe l'ambito di ciascuna delle 14 piante trascinabili?
|
||||
|
||||
Completare la funzione iniziale aggiungendo altre due manipolazioni di eventi del puntatore sotto `pos4 = e.clientY`:
|
||||
|
||||
```html
|
||||
document.onpointermove = elementDrag;
|
||||
document.onpointerup = stopElementDrag;
|
||||
```
|
||||
Ora si sta indicando che si vuole che la pianta venga trascinata insieme al puntatore mentre lo si muove e che il gesto di trascinamento si interrompa quando si deseleziona la pianta. `onpointermove` e `onpointerup` sono tutte parti della stessa API come `onpointerdown`. L'interfaccia genererà errori ora poiché non si sono ancora definite le funzioni `elementDrag` e `stopElementDrag`, quindi verranno create successivamente.
|
||||
|
||||
## Le funzioni elementDrag e stopElementDrag
|
||||
|
||||
La closure verrà completata aggiungendo altre due funzioni interne che gestiranno ciò che accade quando si trascina una pianta e si smette di trascinarla. Il comportamento desiderato è che si possa trascinare qualsiasi pianta in qualsiasi momento e posizionarla ovunque sullo schermo. Questa interfaccia è abbastanza rigida (non esiste una zona di rilascio, ad esempio) per consentire di progettare il proprio terrario esattamente come si preferisce aggiungendo, rimuovendo e riposizionando le piante.
|
||||
|
||||
### Attività
|
||||
|
||||
Aggiungere la funzione `elementDrag` subito dopo la parentesi graffa di chiusura di `pointerDrag`:
|
||||
|
||||
```javascript
|
||||
function elementDrag(e) {
|
||||
pos1 = pos3 - e.clientX;
|
||||
pos2 = pos4 - e.clientY;
|
||||
pos3 = e.clientX;
|
||||
pos4 = e.clientY;
|
||||
console.log(pos1, pos2, pos3, pos4);
|
||||
terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px';
|
||||
terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px';
|
||||
}
|
||||
```
|
||||
In questa funzione, si faranno molte modifiche alle posizioni iniziali 1-4 che verranno impostate come variabili locali nella funzione esterna. Cosa sta succedendo qui?
|
||||
|
||||
Mentre si trascina, `pos1` viene riassegnato rendendolo uguale a `pos3` (che precedenza si è impostato come `e.clientX`) meno il valore corrente di `e.clientX`. Eseguire un'operazione simile per `pos2`. Quindi, reimpostare `pos3` e `pos4` sulle nuove coordinate X e Y dell'elemento. E' possibile monitorare questi cambiamenti nella console mentre si trascina. Quindi, è stato manipolato lo stile css della pianta per impostare la sua nuova posizione in base alle nuove posizioni di `pos1` e `pos2`, calcolando le coordinate X e Y superiore e sinistra della pianta in base al confronto del suo scostamento con queste nuove posizioni.
|
||||
|
||||
> `offsetTop` e `offsetLeft` sono proprietà CSS che impostano la posizione di un elemento in base a quella del suo genitore; il suo genitore può essere qualsiasi elemento che non è posizionato come `static`.
|
||||
|
||||
Tutto questo ricalcolo del posizionamento consente di mettere a punto il comportamento del terrario e delle sue piante.
|
||||
|
||||
### Attività
|
||||
|
||||
Il compito finale per completare l'interfaccia è aggiungere la funzione `stopElementDrag` dopo la parentesi graffa di chiusura di `elementDrag`:
|
||||
|
||||
```javascript
|
||||
function stopElementDrag() {
|
||||
document.onpointerup = null;
|
||||
document.onpointermove = null;
|
||||
}
|
||||
```
|
||||
|
||||
Questa piccola funzione reimposta gli eventi `onpointerup` e `onpointermove` in modo che si possa riavviare il progresso della pianta iniziando a trascinarla di nuovo, o iniziare a trascinare una nuova pianta.
|
||||
|
||||
✅ Cosa succede se non si impostano questi eventi su null?
|
||||
|
||||
Ora tsdi è completato il progetto!
|
||||
|
||||
🥇Congratulazioni! Il meraviglioso terrario è finito
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Sfida
|
||||
|
||||
Aggiungere un nuovo gestore di eventi alla closure per fare qualcosa di più con le piante; ad esempio, fare doppio clic su una pianta per portarla in primo piano. Si dia sfogo alla propria creatività!
|
||||
|
||||
## Quiz Post-Lezione
|
||||
|
||||
[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/20)
|
||||
|
||||
## Revisione e Auto Apprendimento
|
||||
|
||||
Mentre trascinare elementi sullo schermo sembra banale, ci sono molti modi per farlo e molte insidie, a seconda dell'effetto che si cerca. In effetti, esiste un'intera [API di trascinamento della selezione](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) che si può provare. Non è stata usata in questo modulo perché l'effetto che si voleva era leggermente diverso, tuttavia provare questa API sul proprio progetto per vedere cosa si può ottenere.
|
||||
|
||||
Trovare ulteriori informazioni sugli eventi di puntamento nei [documenti W3C](https://www.w3.org/TR/pointerevents1/) e nei [documenti Web MDN](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events).
|
||||
|
||||
Controllare sempre le funzionalità del browser utilizzando [CanIUse.com](https://caniuse.com/).
|
||||
|
||||
## Compito
|
||||
|
||||
[Lavorare un po' di più con il DOM](assignment.it.md)
|
||||
|
||||
@ -0,0 +1,12 @@
|
||||
# Lavorare un po' di più con il DOM
|
||||
|
||||
## Istruzioni
|
||||
|
||||
Fare ulteriore ricerca sul DOM "adottando" un elemento DOM. Visitare l' [elenco delle interfacce DOM di](https://developer.mozilla.org/it/docs/Web/API/Document_Object_Model) MDN e sceglierne una. Trovarla in uso su un sito web, e scrivere una spiegazione di come viene utilizzata.
|
||||
|
||||
## Rubrica
|
||||
|
||||
| Criteri | Ottimo | Adeguato | Necessita miglioramento |
|
||||
| -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- |
|
||||
| | Viene presentata la redazione del paragrafo, con un esempio | Viene presentata la redazione del paragrafo, senza esempio | Non viene presentato alcun resoconto |
|
||||
|
||||
Loading…
Reference in new issue