Circa una settimana fa uscì l’introduzione del corso Bootstrap, creato in collaborazione tra Falco96 e WorldTecno. Visto il gran numero di feedback positivi che è stato riscontrato dall’inizio di questo corso, eccoci qui a portarvi la prima e vera lezione! Dopo la parte di introduzione, in questa nuova lezione si inizia veramente a toccare con mano il framework Bootstrap e tutte le sue caratteristiche e particolarità che lo compongono e lo distinguono da altri framework!
Premessa
Prima di iniziare con questa lezione, è bene introdurre qualche concetto fondamentale, che ci tornerà di grande aiuto nelle prossime lezioni del corso, in quanto ci aiuterà a comprendere meglio la struttura del framework che stiamo insegnandovi ad utilizzare. Nella scorsa puntata, abbiamo accennato al fatto che per poter usufruire al meglio di tutte le potenzialità di Bootstrap sarebbe bene conoscere, per lo meno in modo base, il CSS, l’HTML e il JavaScript, che per altro sono i linguaggi che costituiscono Bootstrap stesso. Quindi per chi non li conosce per nulla è bene studiarsi prima questi linguaggi, mentre chi già padroneggia o quasi questi 3 linguaggi nel seguito del corso se non è in grado di gestire un qualche problema non esiti a chiedere che noi daremo i giusti riferimenti a chiunque per poter ripassare anche le cose più avanzate della programmazione web! E ora iniziamo per davvero!
Partiamo dal CSS
Qual’è il concetto delle classi in CSS?
Questo è il primo quesito che bisogna porsi prima di buttarsi nella programmazione web con Bootstrap, dal momento in cui sappiamo che Bootstrap è un framework basato quasi al 100% molto sul linguaggio CSS. Infatti potremo vedere, anche nel corso di questa lezione, che ci sono tantissime classi CSS che il framework mette a disposizione. Ma cosa sono le classi?
Le classi sono delle sezioni di codice, scritti in file CSS(in questo particolare caso nei file CSS del framework Bootstrap), che ci permettono di impostare tutta una serie di personalizzazioni grafiche che poi potranno essere applicate a diversi elementi realizzati in html. Eccovi un esempio:
supponiamo di voler creare delle pagine in html, dove tutti i <div> hanno un’altezza pari a 800px, una larghezza pari a 200px e un determinato colore di sfondo. Infine supponiamo che questo tipo di personalizzazione sia applicabile anche ad altri elementi, come i paragrafi. Come è possibile fare ciò?
Semplice! Tramite l’utilizzo di un file CSS creato appositamente da noi, quindi andiamo a realizzare una classe CSS, che andremo a chiamare personalizzazione:
- Una classe in un file CSS, si implementa mettendo un punto, seguito dal nome della classe (possiamo assegnare un nome che vogliamo). E tra le parentesi graffe, ci dovranno essere tutte le personalizzazioni da applicare.
.personalizzazione {
//corpo della classe con parametri di personalizzazione
}
- Per richiamare la classe attraverso il file HTML nel quale si vogliono includere le personalizzazioni, è una cosa molto semplice. Infatti basta semplicemente richiamare il percorso del file CSS attraverso il tag <link rel=”stylesheet” type=”text/css” href=”nome_file.css”/>, dopodiché sarè solamente necessario usare l’attributo class all’interno di ogni tag element del corpo HTML, e quindi successivamente specificare tra i doppi apici il nome della classe(“nome_classe”) che è stata implementata all’interno del file CSS. La Stessa cosa che accade anche con Bootstrap, infatti questo framework ci mette a disposizione tantissime classi, che noi possiamo richiamare senza problemi.
E se una classe avesse bisogno di essere personalizzata?
Ci potrebbero essere molti casi in cui una classe fornita da Bootstrap abbia bisogno di piccole personalizzazioni, per adeguare l’aspetto di quest’ultima con le proprie esigenze. Ma come si fa a modificare una determinata classe? Beh semplicemente è necessario riassegnare un nome alla classe utilizzando come target un ID quindi oltre all’attributo class va utilizzato quello id, e poi nel proprio file CSS, scrivere il nome ID assegnato all’elemento, preceduto dal simbolo #, seguito poi dalle modifiche personali che si vogliono applicare alla classe standard del framework. Tutto ciò che voi non inserite all’interno della classe personalizzata, verrà lasciato negli standard di Bootstrap! Si sa che questo concetto potrebbe non essere semplice per tutti, ma e per questo motivo che vi consigliamo, di guardare il nostro video che posteremo anche in fondo a questo articolo. All’interno della video lezione, verranno spiegati e trattati tutti questi concetti in modo molto più semplice e sicuramente più approfondito!
Passiamo al Javascript
Concetto alla base delle animazioni in Javascript:
Un altro concetto che bisogna assolutamente approfondire è tutta la parte sul Javascript! In particolare modo tutta la parte sulle animazioni gestite dai file javascript di Bootstrap applicate agli elementi realizzati attraverso le classi CSS descritte inizialmente. Il Javascript è un linguaggio di scripting web (cioè che permette di inserire istruzioni simili a quelle di un linguaggio di programmazione ad alto livello) che viene eseguito dal vostro computer (nonchè dal lato client, infatti questo linguaggio è anche elencato nei linguaggi lato client). Questo linguaggio quindi si occupa di gestire in modo più dinamico tutta la parte di interazione con l’utente(come ad esempio l’input e l’output delle periferiche di un sistema di elaborazione, o ad esempio le animazioni di alcuni elementi di una web app o di un sito web). Detto meglio si occupa della gestione dinamica dell’interfaccia grafica di un’applicazione o di un sito web attraverso degli script che permettono di applicare oltre che delle animazioni anche una logica di programmazione di un qualche elemento presente nel sito web o nell’applicazione web, e per logica di programmazione si intende la possibilità di impartire dei comandi su dei componenti attraverso delle operazioni matematiche o grafiche.
Come vedremo anche nel video, in Bootstrap, il linguaggio Javascript inoltre copre un ruolo fondamentale per gestire le animazioni delle navbar, dei footer, dei pulsanti, e copre un ruolo fondamentale per rendere tutte le pagine completamente responsive, ovvero pagine che si adattano automaticamente, senza la necessità che il programmatore intervenga manualmente per migliorare la visione di un applicazione su dispositivi mobili, piuttosto che computer o, per chi ad esempio utilizza schermi ancora più grandi, come le smart TV o monitor di grandi dimensioni.
Per altro abbiamo già spiegato, anche nell’introduzione, che Bootstrap ha un grande punto di forza, che è proprio quello di essere un framework del tutto responsive e quindi permette agli sviluppatori di potere realizzare progetti veramente fatti bene graficamente e che funzionano bene su qualsiasi dispositivo che l’utente utilizza! Tutto questo è dovuto anche grazie all’utilizzo di due sistemi di layout. Infatti questo framework fa uso di due schemi di layout differenti fra di loro e ben definiti. Uno detto “Grid System“, il quale permette di suddividere lo schermo di un dispositivo in una “griglia“, dove è possibile andare a posizionare i vari elementi in differenti modi in base alle proprie esigenze di progettazione del sistema che si vuole realizzare. Mentre il secondo sistema prende il nome di “fluid layout“, e questo perché esso richiama un impostazione di layout predefinita, realizzata attraverso dei parametri CSS e che viene gestita in modo totalmente automatico da Bootstrap, che va quindi ad impostare la posizione dei vari elementi sulla pagina dell’applicazione o del sito web che si sta realizzando.
Osservazione: Per gli utenti più geek e smanettoni(quindi anche più esperti), ci teniamo a sottolineare per quelli non informati o poco informati, che il fluid layout non viene quasi più usato nella versione 4 di Bootstrap, in quanto viene visto come il layout standard del framework, quindi viene consigliato l’utilizzo del sistema a griglia dalla versione 4 di Boostrap per via dei vari miglioramenti apportati al sistema!
Tuttavia come nel caso precedente, in cui ti abbiamo parlato delle classi CSS, ti consigliamo di guardare il video postato sotto, per capire meglio anche quest’altro concetto che magari per alcuni non è poi così facile da capire, e che inoltre è di fondamentale importanza come tutti il resto di questo articolo! Infatti, nella video lezione, vengono spiegati veramente bene l’importanza della conoscenza del linguaggio JavaScript e dei due sistemi di layout appena citati.
Il Sistema di layout a griglia di Bootstrap
Andiamo ora a vedere più da vicino, e con un piccolo esempio, il “grid system” già descritto.
Grid System
Ecco un esempio del layout a griglia
Ecco quindi come si vede
Ora vediamo un confronto con il layout fluid
Come potete vedere dall’immagini appena qui sopra che dal punto di vista dell’implementazione del fluid layout, nel codice HTML basterà aggiungere fluid dopo la parola container all’interno del attributo class, per poter applicare questo tipo di layout ai vari elementi della pagina!
Ed infine vediamo quindi come si vede anche quest’altro layout
Come potrete notare dall’immagine sopra, la piccola lista ordinata che abbiamo creato, si è auto adattata alla pagina allineandosi al bordo dello schermo senza alcuna modifica ulteriore da noi apportata nel codice sorgente della pagina!
Passiamo ora ad introdurre qualche componente della famiglia di Bootstrap
Alcuni elementi di base del framework
Dagli screen che abbiamo appena visto, è possibile intravedere già alcuni elementi di base di questo framework, che possiamo andare ad utilizzare tramite il richiamo di alcune classi del framework Bootstrap, e quindi possiamo dire che questo framework mette a disposizione dello sviluppatore svariati componenti realizzati per l’utilizzo standard del framework e diciamo standard perchè come già detto nell’introduzione a tale corso, Bootstrap è un framework totalmente open source e quindi è possibile contribuire al progetto estendendo o realizzando nuove funzionalità, nuovi elementi, nuove animazioni, ecc.. da parte di qualunque sviluppatore singolo o team di developer che sia!
Uno degli elementi che compaiono nei nostri screen è la navbar, ovvero la nota barra di navigazione, dove vengono posizionate tutte le pagine principali di un sito web o altri elementi utili e che devono essere facilmente visibili dall’utente finale, vediamola di nuovo
L’altro elemento è il footer, anche esso molto importante in quanto in esso spesso si inseriscono i link ai social network in cui per esempio è possibile seguire il progetto di un qualche blog, oppure è possibile inserire il copyright del sito web. Insomma in tale sezione è possibile inserire una serie di informazioni utili e aggiuntive o altro ancora, in modo da rispecchiare ancora meglio la figura del sistema realizzato, vediamo quindi di nuovo anche quest’ultimo elemento descritto
Nel video troverete accenni ad altri elementi, i quali saranno comunque presentati e descritti più dettagliatamente e accuratamente, come anche i due introdotti in questa lezione, nei prossimi video e quindi nelle prossime puntate di questo corso!
Per concludere
Vi consigliamo vivamente e ancora una volta di guardare interamente tutto il video, che posteremo anche qui sotto all’articolo, per comprende al meglio e in modo più approfondito i vari argomenti trattati in questa lezione, e inoltre per poter vedere molto meglio anche gli esempi pratici fatti! Sperando che questa nuova lezione di questo corso vi sia piaciuta, vi salutiamo augurandovi un buon proseguimento ed una buona programmazione! Noi vi rimandiamo e vi aspettiamo alla prossima lezione, ciao! 😉
