Bootstrap framework: il vestito giusto per ogni occasione

Vestiti per tutti i gusti

 

Questo slideshow richiede JavaScript.

All’ indirizzo https://getbootstrap.com/ possiamo scaricare il framework del momento, voci maligne di corridoio suggeriscono che nella versione 4 che guardiamo qui, è l’ultima volta che assisteremo al supporto per JQuery (ma sarà vero o siamo di fronte all’ ennesimo fake?) nella versione 5. Ma se abbiamo un progetto abbastanza corposo e una libreria leggera non basta come BULMA allora questo sistema a dodici colonne va studiato (e non giocato perchè non siamo alla SNAI) e soprattutto APPLICATO per i nostri progetti. Quindi per poter stare dietro alla libreria stilosa del momento, con i suoi colori tipici che tutti abbiamo imparato a riconoscere (sfido chiunque a provare differenza di fronte a un primary o a un success button) necessitano conoscenze di base di HTML5, CSS4 e JavaScript. Poi servirà una innata capacità di risolvere i problemi (Salve sono WOLF e risolvo i problemi, ci riferiamo alla trasposizione cinematografica di PULP FINCTION per web design, ossia https://stackoverflow.com/, dove chiedi se qualcosa non quadra) e anche la capacità di approvvigionarci nelle nostre info, per esempio https://developer.mozilla.org/en-US/ o ancora il dono di cercare la trasversalità di tutte le nostre tecniche di sviluppo sui vari browser con siti come https://caniuse.com/ . Per seguire questo tutorial serve solo un Computer con un moderno editor, maggari carta e penna e soprattutto costanza applicativa o attitudine al lavoro duro. Bootstrap è supportato da tutte le moderne aziende e ha migliaia di seguaci ovunque sul pianeta. I vantaggi del framework sono legati al fatto che le classi bisogna impararle e quindi ci disabitua a pensare alle tematiche legate alla User Interface. Si consiglia l’uso massivo di https://developer.mozilla.org/en-US/ in quanto si possono fare ricerche mirate che portano a esempi concreti. Ad esempio non mi ricordo che cosa fa la proprietà flex-shrink in Flex? Consulto e seguo le dimostrazioni. Andando all’ indirizzo https://stackshare.io/ posso vedere le tecnologie usate nei progetti di grandi aziende internazionali e vediamo che la B di bootsrap compare spesso! Ci conviene installare GUL sulla nostra macchina con il comando npm install gulp-cli -g dalla nostra finestra window. Gulp viene definito dal sito del produttore  “is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something”. Siamo nel campo dell’ oscurità totale quindi cerchiamo in rete e all’ indirizzo https://www.riccardotartaglia.it/coding/cos-e-gulpjs-primi-passi/ troviamo una spiegazione meglio definita:

Gulp è di fatto un task manager che si appoggia a Node JS, una piattaforma basata sul runtime javascript di Chrome (V8) che ci permette di utilizzare il linguaggio anche al di fuori di un web browser. Uno dei principali vantaggi di Gulp rispetto ad altri tool simili (vedi GruntJs), è il fatto di utilizzare gli streams per gestire il flusso dei files su cui effettuare le operazioni, garantendo una maggiore velocità e flessibilità (ad esempio non sarà necessario scrivere dei files temporanei durante le elaborazioni richieste).

Istruzioni per l’uso

Conviene dare un occhiatina anche a https://en.bem.info/ che è una sorta di galateo per la scrittura di buon codice CSS e sta per Block – Element – Modifier il tutto per i profani è spiegato bene all’ indirizzo http://www.giuneco.tech/bem-tiriamo-le-fila-nel-mondo-anarchico-del-web-design/ . Infine dobbiamo abituarci all’ idea di avere personalizzazioni nostre che qualche volta sovrascrivono il foglio stile di default di bootstrap, per cui il famoso style.css che riprende il nome delle classi del framework modificate è di prassi nelle tecniche di base. Bootstrap si può installare internamente o esternamente usando un CDN. Dovremmo andare a dormire preoccupati la sera e chiederci ma che cosa é un framework? E una libreria? Che cosa dobbiamo aspettarci da questa biblioteca di alessandria alternativa? (risposta già implicita nella domanda, di trovare tutto quello che serve per far funzionare la veste grafica, ndr). Per installare Bootstrap internamente a un progetto andare su https://getbootstrap.com/, scaricare, scompattare posizionare nella cartella progetto e mettere nella root una pagina html template.

Il Template da usare nei nostri progetti

<!–<!doctype html>
<html lang=”en”>
<head>
<!– Required meta tags –>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>

<!– Bootstrap CSS –>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css&#8221; integrity=”sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk” crossorigin=”anonymous”>

<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>

<!– Optional JavaScript –>
<!– jQuery first, then Popper.js, then Bootstrap JS –>
https://code.jquery.com/jquery-3.5.1.slim.min.js
https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js
https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js
</body>
</html>–>

Il Quiz

Si noti la sottigliezza tattica di inserire la parte degli script alla fine prima della chiusura del body, in modo da non turbare il caricamento iniziale della pagina con blocchi o malfunzionamenti della nostra pagina principale. In questo caso il template page punta agli script tramite CDN, ma volendo sappiamo come andare a puntare a linkare sulle cartelle locali e modificare il target delle risorse. Il sito ha una nutrita documentazione che ci conviene sempre spulciare e punto di riferimento per la nostra curiosità di implementatori. Abbiamo direttamente il codice di esempio da cercare per tutti i componenti che utilizzeremo nelle nostre pagine così da ricreare gli effetti bootstrap sulla pagina direttamente senza dover ricordare a memoria il nome delle classi. Siti di riferimento esterno per questa fase di sviluppo possono essere https://cdnjs.com/ o https://daneden.github.io/animate.css/ o anche http://ianlunn.github.io/Hover/ che rispettivamente forniscono CDN per tutti i gusti (content delivery network, contenuti spediti tramite rete) e librerie per animazione o per gli stili hover, ossia l’evento del mouse che si scatena sopra un elemento (per esempio un link). A questo punto siamo tuttologi e possiamo dare delle risposte come Quora. Alla domanda quale è la differenza tra framework e libreria tu cosa rispondi? Verrebbe da dire il framework è composto da più librerie, può bastare? Non è esatto! La risposta giusta  accademica invece é l’inclusione della libreria nel nostro progetto non influenza il suo funzionamento a meno che non venga specificato mentre il framework è più vincolante perchè cambiera i tuoi contenuti in base alle sue specificità! Perchè dovresto usare SCSS o SASS ( https://sass-lang.com/ ) per l’overloading in style.css delle classi del framework? Risposta: perché SASS ti segue con maggiori frecce al tuo arco per settare al meglio bootstrap nativo come meglio ti piace! Ok vediamo la terza: è importante leggere la documentazione di bootstrap quando di fatto posso fare copia e incolla del codice dei componenti? Certo che si perchè sviluppa un attitudine a leggere la documentazione, esercizio fondamentale per acquisire la forma mentis di un web developer. Quando è più indicato l’uso dei CDN? Quando parliamo di utenti che sono dislocati in tutto il mondo! Mi conviene usare Bootstrap per una singola pagina? No perchè un caricamento aggiuntivo di risorse non indispensabili pregiudica le performances delle richieste http. Il framework è ottimizzato nell’ uso per siti massicci che hanno decine di pagine, tutte diverse per stili, componenti e contenuto.

CONCLUSIONI

Bootstrap è un sarto che modella i vestiti con un certo stile seguendo le linee guide per coprire ogni circostanza, che tu voglia qualcosa di classico piuttosto che invece qualcosa di più sportivo. E’ qualcosa da usare nella pratica quotidiana che finisce per creare dipendenza!

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...