Layout responsive e mobile-first con Bootstrap 4 per siti e web-app


Ciao ragazzi: benvenuti in una nuova puntata
della serie Pillole! Visto che l’esperimento lanciato qualche tempo
fa sembra esservi piaciuto, eccoci qui a parlare di un nuovo argomento con lo stesso approccio
decisamente verticale, senza troppi fronzoli a contorno. Nello scorso focus avevamo visto
un possibile modo per realizzare applicazioni Web real-time tramite l’utilizzo di node.js
e socket.io. Quello di cui non vi avevo parlato in quel video (che se ve lo foste perso lo
trovate linkato in descrizione e nelle schede di questo video) era come effettivamente realizzare
l’interfaccia grafica della applicazione stessa. Oggi, ampliando un pochino il discorso, volevo
mostrarvi come realizzare Layout per applicazioni Web responsive e mobile-first grazie all’utilizzo
di Bootstrap, in versione 4. Dall’arrivo degli smartphone e la loro capacità
di farci navigare sul web ovunque noi siamo, si è avviata una rivoluzione nel mondo dello
sviluppo dei siti web e degli applicativi. Inizialmente quella che era la procedura più
diffusa prevedeva la creazione di siti web funzionanti su PC e poi eventualmente la realizzazione
di varianti mobile dello stesso sito così da mettere un po’ una pezza all’eventualità
di utenti in navigazione tramite cellulare o tablet. In realtà la situazione si è fatta
ben presto molto più complicata: infinità di dimensioni differenti per gli schermi dei
cellulari, risoluzioni diverse, l’arrivo dei tablet, delle smart TV, l’aumento dei DPI
e via discorrendo. Tutto ciò ha creato da una parte l’esplosione del fenomeno delle
app, dall’altro la creazione di framework capaci di far costruire progetti in grado
di funzionare senza troppi intoppi su dimensioni di schermo differenti. Bootstrap è proprio uno di questi framework:
realizzato inizialmente da un designer e sviluppatore di Twitter, oggi è il secondo progetto con
più stelline su github. Probabilmente uno dei framework per la costruzione di front-end
più utilizzato al mondo. Bootstrap è chiaramente free e open-source
e contiene al suo interno template per elementi tipografici, form, bottoni, elementi di navigazione
e altri pezzetti per la costruzione di interfacce per siti e applicativi Web. Dalla versione
2 Bootstrap ha introdotto il supporto al responsive web design, diventato poi il default nella
versione 3 vista l’adozione della filosofia mobile-first. Con la versione 4 è stato aggiunto
il supporto a Sass e flexbox. Chiariamo subito i due concetti principali:
che cos’è il responsive web design e che cos’è la filosofia mobile-first. Dunque,
per mobile-first si intende fondamentalmente la volontà di pensare l’interfaccia del nostro
sito prima per l’utilizzo su dispositivi mobili e dopo su come renderla usabile su display
più grandi; il responsive web design permette proprio ciò: la capacità degli elementi
inseriti nel layout del sito di adattarsi automaticamente a dimensioni differenti dello
schermo, a risoluzioni diverse e a DPI maggiori o minori.
Come detto, Bootstrap fa proprio questo per noi fornendoci fondamentalmente classi CSS
e script JavaScript che adattano il contenuto al dispositivo in uso. Bootstrap si scarica dal sito ufficiale, getbootstrap.com,
e l’ultima versione è la da poco rilasciata 4.0. Questa versione ha troncato la compatibilità
con alcuni browser web meno recenti, ad esempio su PC Internet Explorer 9 (e per il 10 ci
sono alcuni limiti) e altre versioni non aggiornate dei browser di Apple, Google, Mozilla, etc…
Così come versioni di browser obsoleti su mobile. Chiaramente se avete la necessità
di realizzare un sito compatibile con questi browser meno recenti potete scaricare Bootstrap
3. Da notare che Boostrap dovrebbe funzionare
senza particolari problemi anche su Linux in Chrome, Firefox, etc anche se non sono ufficialmente
supportati. Io lo utilizzo da anni ormai senza problemi proprio su Linux, ma vi suggerisco comunque
di dare un’occhiata sulla documentazione ufficiale nell’apposita sezione in cui vengono riportati
i bug noti (il link lo trovate in descrizione). Detto ciò, una volta scaricato Bootstrap
e jQuery con Popper.js (che sono dipendenze richieste da alcune componenti, in caso vorreste
utilizzarle), come iniziare ad utilizzare questo framework? Bootstrap richiede l’utilizzo del doctype
HTML5, altrimenti si potrebbe incappare in funzionamenti non previsti. Quindi va inserita
l’apposita stringa che vedete a video all’inizio della pagina HTML che state realizzato per
il vostro sito. Si inseriscono quindi il taged i tag
e. Come detto Bootstrap è pensato per un mondo mobile first, quindi è importante
inserire il responsive meta tag “viewport” all’interno dell’head cosicché non ci siano
problemi di rendering e zoom col touch sui vari dispositivi che navigheranno sul sito. Sempre nell’head ha senso inserire il meta
tag che specifica il charset utilizzato e soprattutto indicare dove andare a recuperare
il CSS di bootstrap e quale è il titolo della pagina che stiamo
creando. All’interno delpossiamo inserire un
temporaneo tag HTML qualsiasi e alla fine dello stesso, prima della chiusura, inserire
in ordine: l’inclusione degli script jQuery, Popper.js e quello di Bootstrap.
Apro una piccola nota: si dà per scontanto che questo sito/app demo giri su Apache o
altro web server e che quindi esso sia correttamente installato e configurato. Non spiegherò in
questo video come tirar su un server web ed inoltre, per semplicità, ho posizionato i
file CSS e JS in questa semplice struttura che chiaramente per applicativi più complessi
potrebbe essere gestita diversamente (senza contare, poi, l’utilizzo di CMS veri e propri,
ma questo è un altro discorso che se foste interessati ho parzialmente trattato in un
video tutorial che trovate linkato qui nelle schede in alto e che magari –fatemelo sapere
nei commenti– potrebbe essere argomento di un futuro focus). Perfetto, a questo punto abbiamo creato la
nostra prima versione della pagina demo e andando sul browser, richiamandola, possiamo
vedere se essa venga caricata e andando a spiarne i sorgenti capire se c’è tutto ciò
che avevamo inserito. Bene! Ma come funziona Bootstrap?
Bootstrap basa tutta la sua logica su l’uso di un sistema a griglia. Ci sono 5 breakpoint
definiti sulla larghezza dello schermo e che sono: default (da 0px in su), small (da 576px
in su), medium (da 768px in su), large (da 992px in su) ed extra-large (da 1200px in
su). Questo sistema a griglia non è altro che
un insieme di contenitori, righe e colonne che consentono di inserire ed allineare i
contenuti nella pagina. Come detto con Bootstrap 4 il sistema è stato costruito con flexbox
ed è chiaramente completamente responsive. Un contenitore è il padre di una struttura
sottostante che può essere fisso o fluido, cioè occupare uno spazio fisso o andare a
riempire sempre e comunque il 100% dello spazio a disposizione (cioè essere fluido). Una
riga può essere suddivisa in colonne, colonne la cui somma in dimensione non può superare
le 12 unità: in pratica è possibile suddividere una riga fino a 12 colonne oppure a somme
di colonne che arrivino a 12 (tipo colonna 1 larga 1, colonna 2 larga 8 e colonna 3 larga
3; oppure colonna 1 larga 6 e colonna 2 larga 6; e così via: tutte le combinazioni del
caso). Proviamo quindi a creare un’area del nostro
sito composta da 4 colonne, quelle più esterne con grandezza metà di quelle interne. Sarà
sufficiente inserire un contenitore, al cui interno aggiungere una riga e suddividere
tale riga nel numero di colonne desiderato. La prima e l’ultima colonna saranno più piccole,
quindi lasciamo per ora una generica classe “col”, quelle centrali saranno più grandi,
quindi usiamo ad esempio una classe “col-5”. Salviamo e proviamo sul browser. Ispezionando
la pagina con uno dei tanti tool ad-hoc possiamo vedere come appunto siano state create le
aree da noi previste: il contenitore, la riga e le 4 colonne di dimensioni differenti a
coppie. Ma che cosa succede quando il sito viene visualizzato
su schermi di dimensioni inferiori o superiori a quelle di un PC? Qui entrano in gioco i
breakpoint che vi avevo anticipato (small, medium, large ed extra-large). Se volessimo
fare in modo che ad una certa dimensione di schermo le colonne non venissero più mostrate
una di fianco all’altra, ma ad esempio una sopra l’altra, possiamo sfruttare le classi
responsive che Bootstrap fornisce. La classe “col” che abbiamo utilizzato funziona indipendentemente dal breakpoint in uso;
Bootstrap fornisce i suffissi sm, md, lg e xl che combaciano
con i suddetti breakpoint e possono essere aggiunti alle col per far sì che la dimensione
delle col stesse rispettino il giusto breakpoint. Ad esempio se volessivo avere le 4 colonne
tutte di dimensione uguale su mobile, di 4 dimensioni differenti su tablet e differenti
a coppie su PC, potremmo aggiungere la classe col-12 ad ogni colonna cosicché in mobile
ognuna occupi tutte le 12 unità di riga; col-md-1, col-md-5, col-md-4, col-md-2 cosicché
su tablet ogni colonna abbia una dimensione diversa; e col-lg-2, col-lg-4, col-lg-4 e
col-lg-2 cosicché su PC si torni alla dimensioni differenti a coppie pensate ad inizio demo.
Aggiungiamo ad ogni colonna la classe “border” per aggiungere un bordo così da velocizzare
l’identificazione di ogni colonna. Per testare il funzionamento del comportamento
responsive e fluido possiamo aprire il browser e semplicemente ridimensionare la finestra
e vedere come le colonne vengano automaticamente posizionate proprio come abbiamo detto loro
di fare… E’ chiaro che è possibile a questo punto
fare un po’ di tutto giocando con righe e colonne, ma Bootstrap va oltre offrendo da
una parte diverse classi che consentono ad esempio di posizionare il testo in alto, in
basso, a sinistra, a destra e così via; ma soprattutto tutta una serie di costrutti che
se ricostruiti allo stesso modo forniranno rapidamente vere e proprie parti di pagina
che potrebbero tornare utili. Penso ad esempio a un elemento multimediale che ha un’immagine
a sinistra ed un titolo più del testo sulla destra; oppure form con tutti i campi già
organizzati e relative classi per gestire le fasi di errore, validazione e quant’altro;
blocchi di codice; gallerie di immagini; le tabelle; gli alert ed i badge; le briciole di pane;
bottoni e davvero chi più ne ha ne metta. Per completare la panoramica, proviamo a ricreare
quella che era la struttura della web app che avevo realizzato per il vecchio video
Pillole, cioè una chat con alcune aree ben precise: l’area con i messaggi, quella con
il listato degli utenti connessi, quella con l’input ed il bottone per inviare un nuovo
messaggio, e così via. In quel caso avevo utilizzato Bootstrap 3,
ma la struttura era talmente semplice che non ci dovrebbero essere intoppi nel portarlo
alla 4. Prima di procedere aggiungo una nota doverosa:
Bootstrap supporta i temi, ma molto più semplicemente trattandosi di stili CSS è chiaramente possibile
sovrascrivere alcune proprietà con nostre regole CSS custom. Ovviamente l’idea è quella
di non andare a modificare il comportamento generale del framework, quanto più ad esempio
cambiare colori o cose di questo tipo. In ogni caso, ovviamente, rimando alla documentazione
ufficiale per tutti i dettagli sulle componenti presenti, come utilizzarle, e così via: il
link è chiaramente in descrizione. OK. Come potete vedere io ho già riscritto
tutta la vecchia app. Ci sono delle considerazioni interessanti da fare: alcuni componenti presenti
in Bootstrap 3 non esistono più nella versione 4, ad esempio i panel, che io avevo adoperato
ampiamente nell’altra demo, qui li ho dovuti sostituire con le card. E allo stesso modo
gli input-group hanno ora una struttura differente che prevede l’indicazione della posizione
del bottone in prepend o append. O ancora ho utilizzato le nuove classi di utilità
bg e d per modificare lo sfondo dei box e per nascondere la lista degli utenti su schermi
di dimensione inferiore a quella desktop (large). Possiamo vedere sul browser come appaia e
come sia responsive questo layout… E questa era una piccola panoramica su Bootstrap
versione 4, su quale è la logica alla base di questo framework di successo per la creazione
di siti o applicativi Web che siano responsive e mobile-first. Spero che abbiate trovato
il video utile, in caso fatemelo sapere con un bel like e in caso non lo foste iscrivetevi
al canale attivando le notifiche per essere subito avvisati quando pubblicherò i futuri
focus. Vi aspetto qui sotto nei commenti, sul blog
o sui canali social (tutti linkati in descrizione) per sapere se avete tematiche inerenti a quella
odierna che volete che io approfondisca, o anche semplicemente per qualsiasi altra domanda
o commento vorrete lasciare. Ci sentiamo presto, alla prossima… Ciao!

5 Comments

Add a Comment

Your email address will not be published. Required fields are marked *