Nell’A.A. 2019-2020 ho tenuto un corso di Web Development per gli studenti del secondo anno del corso in Digital Communication Design in IAAD (Bologna).
Si è trattato della seconda iterazione del corso e di una sua espansione, dato che l’anno precedente ne avevo tenuto una versione di 1 semestre (36 ore circa). Nella prima edizione il mio obiettivo era fornire una conoscenza di base dei linguaggi HTML e CSS, di come funziona l’architettura del web, di cosa vuol dire pubblicare contenuti online da un punto di vista tecnologico. Mi sarebbe piaciuto arrivare a parlare di Javascript, di framework come Bootstrap e CMS come WordPress, ma il tempo non è stato per niente adeguato a fare tutto.
La seconda edizione è durata invece 2 semestri (33 ore + 33 ore) e mi ha permesso di dedicare tutta la prima parte ad un approfondimento dei linguaggi HTML e CSS. La seconda parte mi sono concentrato su temi più rilevanti per il mio gruppo di studenti: usare una libreria di componenti per prototipare pagine web, usare FIGMA per realizzare una style guide, installare e usare il CMS WordPress.
👫 Le persone
In passato avevo già tenuto laboratori o corsi di web development per bambinə e ragazzə ma mi ero concentrato molto su attività unplugged e live coding assieme, per arrivare in poco tempo a far realizzare poche semplici pagine web.
In questo caso ho invece progettato le attività per un gruppo di 30 studentə al secondo anno del corso di laurea in Digital Communication Design. Con lo stesso gruppo l’anno precedente avevamo fatto un percorso di Coding con Scratch.
L’idea di questo corso non è formare degli sviluppatorə web, ma fornire le basi per capire i linguaggi e la tecnologia che ne stanno alla base. Anche se sapevo che tra di loro c’erano alcune persone interessate a diventare sviluppatorə o che avevano un background informatico, avere un gruppo così eterogeneo (e che già conoscevo) mi ha stimolato a immaginare attività un po’ diverse dal solito.
📽 Spazio e tools
Non serve molto, ma è importante che lo spazio sia sufficientemente modulare. Per un corso dove si usa il computer avrete bisogno:
- di un proiettore o grande schermo a cui potete collegarvi e facilmente visibile da tutti
- di far discutere i partecipanti tutti in gruppo, possibilmente senza un computer davanti
- di far discutere/collaborare i partecipanti in piccoli gruppi
- di far usare ai partecipanti il loro computer
- di poter far alzare i partecipanti per andare a guardare cosa fanno gli altri
- di poter attaccare post-it o appendere grandi fogli in giro
Il tipico assetto da laboratorio di informatica con dei computer fissi è uno dei setting peggiori che esistano 😩. Negli anni mi sono sempre trovato meglio con i computer portatili 💻: si può chiudere lo schermo e si possono spostare con estrema facilità.
Durante le lezioni uso spesso una cassa portatile per mettere della musica 🎼 e un time timer ⏲, ma queste sono preferenze personali e non vi serviranno per forza.
Per quanto riguarda i tools da far installare sul computer, a livello di sviluppo locale ho suggerito di installare Sublime Text o editor simili. Mentre mi sono affidato a CodePen e Codesandbox (oppure Glitch) per la condivisione del codice. Al di là di feature come l’autocompletamento o il syntax highlighting, era infatti fondamentale per me che fosse possibile: condividere facilmente il proprio progetto, ispezionarlo, commentarlo, remixarlo/forkarlo.
🦄 Lo stile
Sono convinto che si impari meglio se abbiamo l’opportunità di scoprire, attraverso la libera esplorazione, ciò di cui abbiamo bisogno per realizzare un progetto che ci sta a cuore, possibilmente confrontandoci e collaborando in gruppo in un clima accogliente e giocoso. Per questo motivo preferisco investire del tempo a creare un clima di collaborazione e curiosità nel gruppo, proponendo progetti che siano interessanti fin da subito.
HTML e CSS non sono linguaggi di programmazione e prima di arrivare a divertirsi per creare cose interessanti (intendo qualcosa oltre alla classica pagina web della squadra del cuore) può volerci tanto tempo ⌛️. La mia domanda guida è stata: cosa si può fare di creativo e curioso con solo un po’ di HTML e CSS?
🤨 Niente Javascript?
Dopo la prima iterazione, mi sono accorto che, considerati gli obiettivi del corso e il tempo a disposizione, era preferibile mettere da parte Javascript. È già complicato avere a che fare con 2 linguaggi nuovi molto diversi tra loro (HTML e CSS). Senza contare parecchie altre cose tangenti e per niente scontate per chi non ha mai programmato: muoversi nel filesystem del proprio computer, far dialogare client e server, ecc.
🦠 L’anno 2020
Il secondo semestre mi sono trovato, come tutti, ad avere a che fare con uno stravolgimento delle nostre abitudini. Passare dalla didattica in presenza alla didattica online è stato certamente sfidante, soprattutto nel cercare di ricreare online quel clima laboratoriale dove le persone possono copiare dal vicino, lavorare a gruppetti ecc… Al di là di questo, la cosa più importante è stata decidere di dedicare sufficiente tempo durante le lezioni alla condivisione di come stavano affrontando il lockdown i ragazzə. Al di là di qualsiasi progetto con HTML e CSS.
Ed ora, qui di seguito, un po’ delle attività proposte durante il corso:
🤩 Personal Manifesto
La nostra primissima pagina web composta solamente di h1, h2, p e una spolverata di CSS.
La proposta era che ognuno creasse il suo manifesto personale:
Una dichiarazione dei tuoi valori e dei tuoi sogni, di cosa vuoi realizzare con la tua vita e per cosa ti impegni.
Può esserti d’ispirazione, può servire a orientarti, può farti conoscere, può innescare il cambiamento.
Sii coraggioso e determinato. Scrivilo al presente. Rendilo positivo.
In questa Collection su CodePen potete curiosare i progetti dei ragazzə, mentre quello qui sotto è il mio esempio 👇
📰 Newspaper Blackout
Si tratta di un bellissimo modo per creare poesie utilizzato da Austin Kleon, che consiste nell’osservare una pagina di giornale ed eliminare con l’indelebile tutte le parti meno interessanti, arrivando a lasciare in evidenza le sole parole del componimento.
La versione unplugged, cioè senza computer, di questa attività mi piace perché permette di creare poemi “con le mani” e attraverso un processo di sottrazione.
La mia trasposizione sul web consiste nel trovare un articolo online di giornale e ispezionarne il codice sorgente per trovare la parte di HTML relativa al testo. Una volta incollato il solo testo su un nuovo file, si può ripulire dai numerosi tag non necessari.
Per oscurare tutto il testo e lasciare visibili solo alcune parole, si può usare un tag come em attorno alle parole da mettere in risalto. Quindi il CSS qui sotto fa il resto del lavoro 👇
p {
font-family: Georgia, Times, "Times New Roman", serif;
text-decoration: line-through;
text-decoration-thickness: 0.95em;
text-decoration-color: #000000ef;
text-decoration-skip-ink: none;
}
em {
font-style: normal;
text-decoration: none;
background: #fff;
display: inline-block;
padding: 4px;
border-radius: 4px;
}Code language: CSS (css)⚠️ le proprietà text-decoration-thickness e text-decoration-skip-ink fanno parte del CSS Text Decoration Module Level 4 che è ancora un working draft (aprile 2021). Quando abbiamo fatto l’esercitazione solo Chrome le supportava.
Per questo motivo, quando ho riproposto la stessa attività al CoderDojo l’ho semplificata invitando a usare solo tag p e span, quindi ad usare il seguente CSS 👇
p {
background-color: #000;
}
span {
background-color: #fff;
}Code language: CSS (css)
La versione web di questa attività, oltre a permette di ottenere qualcosa di creativo con pochi tag, può offrire diversi spunti di riflessione e discussione:
- permette di scoprire gli strumenti di “ispezione” del codice sorgente e quindi riflettere sulla differenza tra file online e file in locale.
- la prima volta un sacco di studenti si sono messi a creare notizie di giornale fake (“ah, prof, ma quindi possiamo modificare la homepage de Il Post?!”)
- permette di “leggere” codice HTML scritto da altri e farsi delle domande sulle funzioni di alcuni tag mai visti prima
In questa Collection su CodePen potete vedere le poesie dei ragazzə, mentre quello qui sotto è il mio esempio 👇
🗓 Calendario dell’avvento (pass it on)
Dopo aver visto un po’ di struttura della pagina, come inserire delle immagini e come creare dei link (la vera svolta del web, ricordatelo 😉), prima di tuffarci nei fogli di stile CSS, abbiamo sperimentato ancora una volta con dell’HTML di base.
“Pass it on” è il nome dato nella Creative Computing Guide di Scratch ad una attività in cui i partecipanti sono invitati a lavorare ad un proprio progetto per un certo tempo, per poi spostarsi e proseguire il progetto di qualcun’altro. Si tratta di un’esperienza potente, che a seconda delle esigenze permette di porre l’accento su aspetti diversi. Nella Computing Guide ad esempio si suggerisce di riflettere su come ci si sente ad essere remixati oppure a portare avanti il lavoro di qualcun’altro. Nel corso di Pensiero Computazionale la uso per riflettere sul potenziale creativo dei vincoli e della casualità.
In questo corso, per me, il valore dell’attività consiste:
- nello sforzarsi a leggere e capire il codice scritto da altri
- nel ripetere diverse volte la costruzione di nuove pagine e link ma cambiando ogni volta contenuti
L’attività consiste nel far creare ad ogni studente una pagina web principale molto semplice con tutti i giorni di Dicembre, quindi nel realizzare altre 3 pagine collegate ai primi 3 giorni. Ogni 20′ ci si sposta di computer per aggiungere altre 3 pagine al calendario del vicino.
I ragazzə hanno lavorato in coppia ed è stato molto divertente tornare poi al proprio computer per cliccare le caselle e scoprire cosa era stato realizzato dagli altri.
🗾 Selettori
Per imparare a usare i selettori CSS ho sempre proposto di giocare con CSS Diner. Spinto dall’amore per il sushi ho pensato però di partire giocando ad applicare un po’ di stile ad una pagina semplice pagina HTML (la definizione wikipedia di Sushi).
Abbiamo fatto un po’ di live coding e poi ho lasciato del tempo per un po’ di sperimentazione, con l’idea di applicare uno stile a:
- tutte le intestazioni
- gli elementi con classe
.kanji - gli elementi con classe
.section - l’elemento con id
page-wrap - l’elemento con id
elenco-sushi - gli elementi
emche compaiono appena dopo un elementoli - nascondere la classe
.deprecated
🔲 Mondrian
Questo è stato il primo esperimento a cui avevo pensato per il corso e mi sono divertito un sacco a farlo. La prima versione consiste solo di float e un mucchio di selettorinth-child, che non sono la cosa più moderna da imparare e di cui quindi mi vergogno moltissimo.
Alla fine, invece di replicare un Mondrian, si è trattato semplicemente di giocare con il posizionamento e lo z-index di una serie di div. In questo modo abbiamo approfondito un po’ il box model e i limiti del posizionamento assoluto.
In questa Collection su CodePen potete vedere i progetti dei ragazzə, mentre quello qui sotto è il mio esempio 👇
📐 Flexbox e CSS Grid
Per introdurre questi due strumenti super potenti le mie risorse preferite sono i giochi 🐸 flexbox froggy e 🥕 grid garden. Una volta completati, ho fornito alcuni HTML da “aggiustare” solamente modificando il codice CSS e usando appunto flexbox oppure CSS Grid.
Purtroppo questa volta c’è stata un’abbondanza di Lorem ipsum ma alla fine c’erano un sacco di esempi di layout diversi, utili come boilerplate per progetti più articolati. Le (mie) soluzioni e un paio di layout bonus si trovano in questa collezione su CodePen.
Twister
Crea un foglio di stile e usa flexbox e le sue proprietà per ottenere un tabellone per giocare a Twister a partire da questo codice HTML.
Holy Grail
/*
* Modifica questo foglio di stile utilizzando grid css e le sue proprietà
* per fare in modo che l'header occupi tutta la pagina e il footer sia
* sempre sul fondo della pagina.
* <nav> <main> e <aside> devono essere tre colonne e occupare l'altezza
* tra header e footer. La colonna centrale <main> deve essere più larga
* delle altre due.
*
* *----------------------*
* | header |
* *----------------------*
* | | | |
* | nav | main |aside|
* | | | |
* | | | |
* *----------------------*
* | footer |
* *----------------------*
*
*
*/Code language: CSS (css)Pagina HTML da utilizzare per la sfida Holy Grail 👆.
Hero Cover
/*
* Modifica questo foglio di stile utilizzando flexbox e le sue proprietà
* per fare in modo che l'immagine e il tag H1 siano sempre al centro
* della pagina (sia in orizzontale che in verticale) e il footer sia sempre
* sul fondo della pagina.
* Nel footer prova a creare un menu di navigazione orizzontale applicando
* gli stili corretti al tag <ul>
*
* *----------------------*
* | |
* | |
* | immagine |
* | titolo |
* | |
* | |
* *----------------------*
* | footer |
* *----------------------*
*
*
*/Code language: CSS (css)Pagina HTML da utilizzare per la sfida Hero Cover 👆.
Equal height columns
/*
* Modifica questo foglio di stile utilizzando flexbox e le sue proprietà
* per creare delle cards dove l'area occupata da immagini è
* della stessa altezza, ovvero l'inizio dei paragrafi è allineato
* in orizzontale tra cards diverse.
*
* *--------* *--------* *--------*
* | | | | | |
* | img | | img | | img |
* | | | | | |
* *--------* *--------* *--------*
* | title | | title | | title |
* | | | | | |
* | text | | text | | text |
* | | *--------* | |
* *--------* | |
* | |
* *--------*
*
*
*/Code language: CSS (css)Pagina HTML da utilizzare per la sfida Equal height columns 👆.
Backgammon con flexbox
L’esempio qui sotto non l’ho proposto agli studenti ma mi sono divertito un sacco a farlo 😁
🖼 Bootstrap, FIGMA e WordPress
Il secondo semestre è stato per certi versi “meno creativo” ma forse più aderente agli interessi degli studenti. Ad esempio, sono particolarmente orgoglioso di avergli fatto creare un account su FIGMA e di sapere che poi hanno continuato ad usarlo anche per altri progetti 😍.
Bootstrap
L’abbiamo usato per creare una landing page e poi simulare un processo di acquisto. L’idea non era tanto diventare fluenti con il tool ma riflettere sul concetto di libreria di componenti e misurarsi con l’uso di codice per la prototipazione di pagine web.
Moltə ragazzə l’hanno usato per replicare il proprio progetto finale del primo semestre. Per poter gestire più file, siamo passati da CodePen a Codesandbox oppure Glitch (a seconda dei gusti personali).
FIGMA
Esiste una meravigliosa offerta education free! La proposta è stata lavorare a coppie per creare una libreria di componenti. Potevano scegliere se farlo per un progetto già realizzato in passato (ad es. il proprio sito oppure un progetto fatto per un altro corso) oppure se farlo per un brand/sito/app esistente che gli piaceva.
Per i più curiosi, ho fornito una serie di link di approfondimento sui concetti di style guide, pattern library, design system:
⚡️ http://styleguides.io/ è un ottimo sito di riferimento che contiene sia articoli di approfondimento che una libreria di styleguide, pattern libraries ecc ecc. Tra tutti quelli presenti ho segnalato in particolare:
🌈 come creare una styleguide (2014)
🌈 styleguide best practices (2014)
⚡️ anche uxpin è un buon punto di riferimento. Segnalo:
🌈 la differenza tra design system, pattern library e styleguide (2019)
🌈 un repository interattivo di design systems
⚡️ su uxcollective ho trovato questo articolo molto carino con la recensione di alcune “styleguides” più recenti
WordPress
Farli lavorare sul CMS più diffuso al mondo è stato importante non solo per immaginare come può funzionare tecnicamente la pubblicazione di contenuti ma anche per addentrarsi nei meccanismi client/server.
Il progetto finale del primo semestre ci aveva già permesso di vedere il collegamento di un DB ad un sito in locale. Avendo già installato XAMPP o MAMP abbiamo provato a seguire la procedura base per l’installazione locale di WordPress, mentre a chi non riusciva, ho suggerito come alternative: LocalWP oppure InstantWP.
Per andare online ci siamo invece appoggiati a Netsons oppure Altervista, che offrono un piccolo virtual hosting gratuito con tanto di cPanel (o simili). Questo ci ha permesso di parlare anche di cose un po’ tecniche: dalla scelta dell’hosting alla gestione dei DNS.
🏁 Esame finale
Qui sotto trovate le domande che ho fatto come prova finale (scritta). Più che altro un modo per farli riflettere su come hanno affrontato il corso e cosa se ne faranno delle cose che abbiamo visto assieme.
🤩 Ripensa alle cose che hai imparato durante il corso (concetti, buone pratiche, prospettive, …). Prova a spiegare di seguito quali cose pensi siano più importanti per te e perché.
🕰 Ripensa a come affrontavi un progetto web prima del corso e come lo affronti adesso. È cambiato qualcosa? Che cosa?
⏱ Senti di aver dedicato tempo sufficiente a realizzare lavori di qualità durante il corso? Se no, perché?
🤝 Quando ti sei trovata in difficoltà che cosa hai fatto? Quali strategie hai adottato per affrontare un blocco? C’è qualcosa che avresti voluto chiedere durante il corso e NON hai chiesto? Che cosa? Allo stesso tempo, se ci sono state situazioni in cui hai aiutato qualcuno in qualche modo, cosa hai fatto?
😍 Ripensando agli esercizi svolti e ai progetti che hai realizzato, qual è la cosa che hai realizzato che ti rende più orgogliosa? Perché?
🔮 Cosa ti piacerebbe realizzare con le cose che hai imparato durante il corso? Di cosa hai bisogno per poterle realizzare? Ci sono degli ostacoli per realizzare quello che hai in mente?
🖼 Incolla qui sotto una GIF che riassuma la tua esperienza con questo corso
Siccome so che siete curiosi, ecco un MURAL con tutte le GIF usate 👇
Credits
Per i corsi su HTML e CSS il mio punto di riferimento è sempre stato l’iniziativa Web Literacy della Mozilla Foundation. Questo è uno snapshot che ho trovato sull’Internet Archive, perchè a quanto pare la Mozilla Foundation ha completamente ridisegnato e aggiornato i contenuti del dominio.
Nelle proposte ai centri estivi o al coderdojo c’erano bellissime attività unplugged come Ping Kong, Kraken The Code, Web Words Bingo, TAG maker oppure, appoggiandosi a Thimble (altro progetto dismesso), un generatore web di scuse casuale, webotron o font decoration. Scusate ma non trovo su github o internet archive i link 😥
Personalmente faccio fatica a consigliare libri stampati su questi temi. Tralascio il mitico “Designing With Web Standards” di Jeffrey Zeldman che è del 2003 (seppure riedito nel 2009). Per chi è proprio agli inizi suggerisco HTML&CSS di Jon Duckett che ha delle belle idee grafiche ed è scritto in grande. Però anche lui è del 2011, vedete voi.
Un’altra risorsa importante, soprattutto per quanto riguarda layout, sono stati i video del canale youtube Mozilla Developer, soprattutto quelli di Miriam Suzanne e Jen Simmons.
L’idea per Newspaper Blackout mi è venuta guardando questo video, mentre uno degli esercizi con CSS Grid è preso da questo video.
In generale, Jen Simmons è stata la mia principale fonte di ispirazione. Se non conoscete il suo lavoro vi consiglio il suo sito di esperimenti https://labs.jensimmons.com/ e questo bellissimo talk 👇
💪 La prossima volta (ora tocca a te)
Ripensando all’intero percorso sono sicuro che senza pandemia avremo potuto approfondire qualcosina in più il secondo semestre, da temi legati alla privacy e il diritto d’autore a questioni più tecniche legate ai servizi online (API, hosting, mail, ecc). Allo stesso tempo, il primo semestre, penso di aver approfondito poco alcuni interessanti questioni legate alla tipografia, ai menu di navigazione, alle media queries. Ma è la solita tensione tra quello che si vorrebbe mostrare, il tempo a disposizione, cosa interessa veramente i partecipantə.
Purtroppo questo non è un curriculum fatto e finito. Tra un’attività e l’altra c’erano dei momenti di spiegazione con delle slide (anche belline) che per ora non riesco a mettere online (sorry 🤷).
Per comodità ho messo su Github gli esercizi citati in questa pagina. Ci trovate anche una delle mie attività preferite: la sorgente 🏔. Si tratta di aprire questa pagina e iniziare una sorta di caccia al tesoro per scoprire come funziona l’HTML a partire proprio dal codice sorgente 🙃
P.S. Se deciderete di usare queste attività in un corso, fatemi sapere come va, sono convinto si possano migliorare 😉