Proseguiamo alla scoperta di Brackets e delle funzioni che permettono a Web designer e sviluppatori di lavorare al meglio.
Come abbiamo visto nelle precedenti lezioni, Brackets, permette di lavorare ottimizzando tempo e risorse, infatti grazie alle centinaia di estensioni presenti all'interno del repository possiamo effettuare operazioni anche molto complesse e onerose in termini di ore di lavoro, in maniera semplice e rapida.
All'interno della lezione precedente abbiamo imparato in particolare a creare un documento HTML base con Brackets utilizzando tutti i tag, quindi gli elementi necessari per costruire una struttura in linea con le richieste del World Wide Web, ed in seguito abbiamo ottimizzato la procedura sfruttando al meglio un'estensione chiamata "HTML Skeleton" che permette di inserire in maniera automatica, rapida e corretta i tag che stanno alla base della struttura di tutte le pagine HTML.
In questa lezione voglio quindi proseguire nella stessa direzione ottimizzando ulteriormente la scrittura del codice e creando non solo la struttura base che troviamo all'interno delle pagine HTML ma anche la griglia che permette agli elementi di disporsi all'interno della pagine.
A prescindere dal code editor che si utilizza e dalle estensioni che decidiamo di installare, esistono diversi modi per realizzare pagine Web, l'obiettivo però rimane comune: realizzare nel minor tempo possibile e con la massima comodità, pagine Web in linea con gli standard odierni.
A questo punto direi di non dilungarsi troppo e parlare del protagonista di questa lezione, Bootstrap.
Cos'è Bootstrap?
Bootstrap è un framework HTML/CSS ovvero un insieme di classi, funzioni e direttive che consentono di realizzare applicazioni in modo più efficiente.
Come tutti i framework anche Bootstrap fornisce un set di regole che semplificano il processo di sviluppo e garantiscono una maggiore coerenza tra le diverse parti di un'applicazione.
Infatti possiamo dire che Bootstrap è un insieme di regole che permettono di gestire in maniera estremamente rapida la dimensione ed il posizionamento degli elementi all'interno di un file HTML.
Perché usare Bootstrap?
Questo framework semplifica la creazione delle strutture che compongono le pagine Web e permette, attraverso regole prestabilite, di assegnare una dimensione agli elementi componendo in questo modo la griglia contenitore.
Soprattutto con esso potremo gestire l'ordinamento degli elementi in tutte le modalità di visualizzazione delle pagine, il cosiddetto responsive design.
Cosa vuol dire responsive?
Con il termine "responsive" nel Web design si intende un approccio per la progettazione di siti Internet che si concentra sulla creazione di un'esperienza utente ottimale su tutti i dispositivi.
In altre parole, responsive design significa che un sito Web si adatta automaticamente alle dimensioni dello schermo di un dispositivo, offrendo agli utenti un'esperienza di navigazione ottimale.
Insomma grazie a Bootstrap non dovremo scrivere ogni volta il codice della pagina ma potremo sfruttare le regole fornite per creare una struttura elastica che si adatterà ad ogni risoluzione e dimensione di schermo.
Come funziona Bootstrap?
Come ogni framework che si rispetti, anche Bootstrap ha un sito web ufficiale, Getbootstrap.com.
All'interno del sito possiamo trovare le istruzioni per scaricare il framework ed agganciare correttamente le librerie all'interno dei nostri file HTML. La procedura è piuttosto semplice, basta includere il file CSS ed il file JavaScript in una pagina e saremo pronti per utilizzare le istruzioni fornite da Bootstrap.
All'interno della sezione Docs, è infatti possibile trovare l'elenco delle regole che serviranno per richiamare le istruzioni.
Bootstrap e struttura delle pagine HTML
Vediamo quindi le regole che consentono di creare la struttura delle pagine HTML, clicchiamo sulla voce chiamata "Grid" all'interno del menu di sinistra e analizziamo il contenuto testuale che spiega come realizzare una griglia strutturale.
Come leggiamo all'interno della sezione, seguendo il costrutto di codice evidenziato possiamo creare in maniera rapida una struttura di pagina divisa in 3 colonne.
Prima di parlare dell'estensione dedicata per Brackets e di come richiamare le regole attraverso apposite espressioni, spendiamo qualche minuto per capire il funzionamento base di Bootstrap.
Bootstrap, come abbiamo detto in apertura, permette di creare strutture a griglia che si adattano ad ogni tipologia di schermo. Prima di vedere la struttura di default è doveroso capire la logica, e per farlo voglio renderti semplice l'apprendimento, ti basterà pensare al numero 6.
Il numero 6 è infatti al centro del funzionamento di bootstrap in quanto la griglia che caratteristica il framework ragiona per colonne da 6.
In parole semplice, per avere una griglia di 2 elementi al 50% dovrò utilizzare la regola/classe CSS chiamata col-6, assegnando la classe .col-6 a due elementi div avremo un risultato di questo tipo:
Mentre invece se volessimo avere un elemento di sinistra più grande di quello di destra potremo usare le seguenti classi:
Fino a questo punto è tutto piuttosto semplice, ma come facciamo a gestire la visualizzazione su tutti i dispositivi, ad esempio gli smartphone dove per forza di cose la dimensione dello schermo è più piccola rispetto ad un monitor di PC?
Entrano in campo le regole responsive di Bootstrap.
Regole Responsive di Bootstrap
Grazie alle regole del responsive design è possibile gestire le dimensioni degli elementi a seconda della grandezza dello schermo o della finestra con la quale si visualizza la pagina Web.
Le regole responsive sono chiamate anche Grd options e caratterizzano la dimensione dell'elemento al quale sono assegnate entro specifiche misure:
Ad esempio, ipotizziamo di voler creare due elementi HTML con una dimensione del 50% che quando visti attraverso un dispositivo smartphone siano in grado di cambiare dimensione ed abbiano entrambi una dimensione del 100%.
Possiamo realizzare quanto appena detto attraverso le seguenti regole:
Insomma, grazie a Bootstrap possiamo creare strutture fluide e responsive attraverso semplici regole.
Brackets e Bootstrap
Passiamo quindi a Brackets, andiamo diretti all'interno della sezione dedicata alle "Estensioni" e cerchiamo "Bootstrap".
Come starai notando, esistono parecchie estensioni che permettono di integrare il Bootstrap in Brackets, quella sulla quale ci soffermeremo si chiama ACB Bootstrap Snippets, procediamo quindi all'installazione e passiamo al funzionamento.
Prima dell'installazione, o anche in seguito, possiamo andare sulla pagina dedicata al funzionamento dell'estensione in maniera da capirne il corretto funzionamento, clicchiamo quindi sulla voce "Più info…"
All'interno del sito di riferimento possiamo trovare tutte le scorciatoie che ci consentiranno di creare in maniera estremamente rapida la struttura di Bootstrap all'interno delle pagine Web.
Scendiamo fino alle istruzioni che abbiamo descritto poco fa, ovvero quelle chiamate Grid System.
Attraverso tali scorciatoie possiamo creare ogni elemento di Bootstrap, procediamo quindi a realizzare la stessa struttura proposta in precedenza.
Partiamo dal div più esterno, rappresentato dalla classe .container, digitiamo la scorciatoia "bs3container" e clicchiamo il tasto Invio.
Noteremo che dal momento in cui inizieremo a digitare comparirà l'elenco delle istruzioni disponibili.
Grazie a questa prima selezione abbiamo creato il seguente elemento contenitore:
Proseguiamo nella creazione e digitiamo il seguente shortcode per creare il div interno: "bs3row".
Infine possiamo creare i div interni utilizzando le seguenti regole: "bs3col6".
La scorciatoia in automatico inserisce tutte le regole responsive che determinano la scalabilità degli elementi, non ci resta quindi che decidere quali dimensioni assegnare ai nostri elementi.