LA TRACCIA
NABA FED 2024
Front-end development — A.a. 2023/24 — Semestre 2
- introduzione
- presenza attiva
- seminario — esercitazioni in sincrono — esercitazioni asincrone
- licenza aperta Vedi →
- l'abbreviazione fa riflettere sulla posizione del docente Vedi →
- metodologia
- iterazione
#Data01
- comunità dei pari
#Data01
- comunità degli esperti
#Data01
- setting
- visual studio code
#Data01
- browser (meglio 2)
#Data01
- canale di comunicazione tra studenti d'aula (whatsapp? telegram?)
#Data01
- radice / nidificazione / root / folders
#Data01
- github
#Data01
- nome utente: libero
- repository name: NABA-fed24-nomeDiBattesimo
(le omonimie si dovranno risolvere in aula da parte degli studenti)
- configurazione di GitHub Pages Vedi →
- tutti i repositories degli studenti saranno pubblici e condivisi con la classe (quindi fatevi una cartella sandbox da tenere privata)
- README.md #avanzato Vedi →
- clona il repository delle dispense #avanzato #FIXME
- Le scorciatoie da tastiera: è importante che ognuno cerchi le proprie in autonomia. Un esempio per il mac →
#Data12
- html
- sintassi Vedi →
#Data01
- doctype e struttura html di base Vedi →
#Data02
- head / body Vedi → Vedi →
#Data02
- div
#Data02
- Per collegare il foglio di stile css: link / style tag / style attribute
#Data02
- indirizzo: URI / URL / PATH
#Data02
- I browser leggono HTML. HTML descrive il contenuto. HTML è struttura.
#Data02
- class e id
#Data02
- box principali: nav, main, header, footer, aside
#Data02
- si comportano come blocchi (block elements)
#Data04
- div
- blocchi di testo e intestazioni: p, h1, h2, h3, (ecc.)
- liste: ul, ol e similari Vedi →
- si comportano come testi in linea (inline elements)
#Data04
- a (vedi sotto alcune note*)
- span
- strong
- em
- img
- I font sono files. Quindi o li ha l'utente nel proprio terminale o li distribuisce il server. Ne consegue che se volessimo un font personalizzato o particolare dobbiamo distribuirlo. Come aggiungere font personalizzati? Ormai la soluzione tecnica usata da tutti è @font-face. Ma come si fa? Tre alternative. Vedi →
#Data05
- Abbiamo i file del font in locale già pronti per l'utilizzo sul web (sono webfont normalmente con formato Woff). Allora li mettiamo in una cartella e vi puntiamo con la regola @font-face. Nonostante le istruzioni che si possono trovare online è sufficiente soltanto il formato Woff (e non Woff2, per cui è necessario avere anche Woff per ragioni di compatibilità). Vedi → Tutorial →
- Abbiamo uno o più file font, la licenza è adatta per la condivisione su web, ma il file font non è in formato per i browser del web (ovvero woff). Si può usare Font Squirrel per convertire i tuoi font in un formato compatibile con il web. Dopodiché segui il punto 1. Vedi → Tutorial →
- Utilizziamo un servizio online come Google oppure Adobe Font. In questo caso @font-face ma non lo vediamo nel nostro codice.
- Box model: "All HTML elements can be considered as boxes." Vedi → Approfondimento → Vedi esercizio inerente →
#Data06
- Tag a, cioè il tag per fare hyper-link! va considerato che i link hanno diversi stati di interazione: stand-by, mouse sopra, link visitati e anche altri. Vedi sotto per CSS Vedi → Approfondimento →
- css
- sintassi Vedi →
#Data01
- chiamate CSS: esterne vs interne vs "inline" (via attributo style)
#Data03
- capire cosa sono i css: W3C senza css. Vedi la homepage di NABA (21.04.2024) senza stili né script. Vedi →
#Data12
- selettori Vedi →
- chiamata con il . (punto) = attributo class Vedi →
#Data02
- chiamata con il # (cancelletto) = attributo id Vedi →
#Data02
- selettori: gerarchia e specificità: è una questione di priorità Vedi →
#Data02
- pseudo selettori:
:first-childVedi →:last-childVedi →:not(.selettore)Vedi →#Data13
- lo pseudo selettore :nth-child(n) Vedi → Approfondimento (recipes) →
#Data13
- unità di misura lineari "assolute" Vedi →
#Data04
- unità di misura lineari relative Vedi →
#Data04
- em, da "em quad", è una unità di misura relativa
- rem, da "em quad" con una differenza fondamentale: è relativo sempre alla dimensione data al tag html
- %, percentuale relativa al position: relative più prossimo
- vh e vw, misure percentuali relative al viewport
- funzione di calcolo di css (e altre funzioni) Vedi →
#Data13
- position Vedi →
#Data04
- static
- relative
- absolute
- z-index
- fixed e sticky
- float
#Data04
- border
#Data04
- background
#Data04
- Tag a, aspetti grafici e il corretto ordine:Vedi → Vedi sopra per HTML
- a:link - un normale link non visitato
- a:visited - un link che l'utente ha già visitato
- a:hover - un link quando il mouse ci passa sopra
- a:active - un link nel momento in cui viene cliccato
- media queries
#Data06
Vedi →
Vedi su mozilla →
Approfondimento →
Approfondimento →
- movimento!
#Data10
- flexbox (display: flex;) Vedi →
Approfondimento →
Approfondimento →
Tutorial video 4'11'' →
#Data12
- lo strumento di Google Chrome per testare le diverse impostazioni di flexbox Vedi →
- flex direcion (main axis e cross axix), start, end e altre terminologie Vedi →
- justify-content (allineamento main axis) Vedi →
- align-items (allineamento cross axis) Vedi →
- flex-wrap Vedi →
- flex-grow Vedi →
- Grid with css (display: grid;) Vedi →
#Data11
- Differenza tra flexbox e grid Vedi → Vedi un esercizio sul tema →
#Data11
- Regolazione della visibilità di elementi più grandi del loro contenitore: overflow Vedi →
- Come faccio 3 colonne?
#Data13
- Metodo 1: flexbox Vedi →
- Metodo 2: grid
- Metodo 3: float (obsoleto)
- Metodo 4: position (inefficace)
scss/sass
javascript
esercitazioni
- esercizio della bandiera #es-01 #es-02
#Data03
- scegli una bandiera nazionale
- rappresenta la bandiera su browser tramite il codice html e css
- condividi con il tuo repository github #es-01
- inventa una nuova bandiera non nazionale oppure utopica e condividila #es-02 Referenza →
- disegna una nave #es-03: utilizza un software grafico (Illustrator?), utilizza soltanto rettangoli o cerchi neri su fondo bianco
#Data03
- disegna "5 forme facili" #es-04: pensa a un set di 5 oggetti semplici (per esempio il set per aperitivo: bicchiere, cannuccia, shaker, fetta di limone, oliva.), disegnali con gli stessi elementi del precedente esercizio più il triangolo. Referenze di ricerca: Referenza →Referenza →
#Data03
- riproduci l'oggetto dell'esercizio 03 in codice #es-05
#Data03
- fai una impaginazione con intestazione, footer, colonna principale e secondarie laterali utilizzando gli appositi tag. #es-06
#Data07
- impagina i cinque oggetti facili utilizzando flex-box e le media queries per il responsive design. con almeno 3 breakpoint. #es-07
#Data08
- incominciamo a pensare al progetto finale per il corso. chiamiamolo "PROGETTO FINALE". tema: l'alfabeto. puoi declinare il tema in senso tipografico (per esempio disegnare un carattere e impaginare su html le specimen) oppure interpretare il tema in altro modo. risultato atteso per la fine del corso: una pagina html in responsive design in cui appare realizzato il concept studiato. obiettivo per questo esercizio corrente: incomincia a scrivere un documento di lavoro su html che contenga referenze di ricerca, uno o più concept espressi in frase e/o disegni, linee di lavoro per l'output finale, insomma un documento preliminare di progetto. deadline per il corrente esercizio (il piano e non la pagina finale): la data 10 del corso, quando ci vedremo in presenza. #es-08
#Data09
- fai una animazione sia transition che animation. muovi qualcosa! #es-09
#Data10
- fai una scheda dell'esercizio finale impaginando una tabella con dati utili (es. target, tono di voce, linguaggio, tempi di realizzazione, ecc.). poi impagina questi dati tabellari usando prima flexbox e poi grid, come nell'esercizio del prof. #es-10
#Data11