Bootstrap – Introduzione al corso

 

 

 

 

 

 

 

 

 

 

 

 

 

Ciao a tutti utenti di Falco96 e WorldTecno, oggi siamo qui, con questo articolo, ad annunciarvi l’uscita di un nuovo corso, nato dalla collaborazione tra i due blog! Entrambi i blog trattano argomenti strettamente inerenti al tema informatico e tecnologico di qualsiasi tipo! Questa unione è stata decisa proprio dai creatori dei due siti in questione, che essendo due programmatori informatici appassionati e piuttosto accaniti, oltre che grandi amici nella vita reale e colleghi nel mondo del lavoro, hanno voluto iniziare a collaborare per portare ad ogni utente, tra cui i principianti del settore informatico un corso puramente mirato alla programmazione di web app e sviluppo di siti internet dinamici attraverso il oramai famoso e amato framework boostrap! Ultima nota introduttiva da parte nostra per gli utenti che già ci seguono ma anche per chi speriamo ci inizi a seguire, questo nuovo corso sarà correlato in parallelo con i due corso trattati separatamente dai due creatori di WorldTecno e Falco96, ovvero il corso Javascript di WorldTecno e quello di PHP, realizzato invece da Falco96. Dopo questa lunga prefazione del corso e di questo primo articolo dedicato alla sua introduzione, vediamo subito di entrare nel vivo dell’argomento di oggi!

Che cos’è Bootstrap?

Per prima cosa è indispensabile, per chiunque non lo sapesse, presentare il protagonista di questa serie di articoli, nonché  Bootstrap, un framework che si basa sui vari linguaggi web: CSS, HTML e Javascript. Questo framework è stato realizzato da Mark Otto e Jacob Thornton, due Developer del famoso social Twitter, esso doveva servire a realizzare e successivamente a gestire tutta l’interfaccia grafica del social network. Boostrap, si è subito dimostrato un framework davvero molto valido per realizzare applicazioni web o siti web con dei layout totalmente responsive, e cioè adattabili sia ai dispositivi mobile (come smartphone e tablet), fino ad arrivare agli schermi più grandi, quali, per esempio, le smart TV. L’interfaccia grafica che si riesce a realizzare con questo framework, infatti, riesce ad auto adattarsi a seconda della grandezza dello schermo con cui un utente sta visualizzando l’applicazione o il sito web. E tutto questo senza che il programmatore, che realizza il progetto, debba scrivere molte righe di codice in più per consentire questa scalabilità.

Nel 2011 Twitter, visto l’andamento che il framework stava intraprendendo, decise di rilasciare questa tecnologia in licenza gratuita agli sviluppatori di tutto il mondo, sotto forma di progetto open source, quindi non solo lo rese gratuito ma rese anche libero il sorgente per tutti coloro che volessero sviluppare altrettanti progetti basandosi su Boostrap. Attualmente è presente la versione 3.3.7 stable di questo framework,scaricabile tramite questo link, ma è disponibile l’ultima versione 4.0.0,  anche se ancora in fase di sviluppo (sviluppo quasi terminato), ed è scaricabile tramite quest’altro link. Oltre alla versione core del progetto, che come dicevamo è totalmente gratuito, sono disponibili tutta una serie di strumenti che la community mette a disposizione, alcuni totalmente gratuiti mentre altri sono a pagamento,di tutti gli utenti che utilizzano questo framework, come per esempio dei template, anche molto professionali, che potrete trovare qui. Ovviamente i template a pagamento servono per permettere a Twitter, di portare avanti questo progetto e di mantenerlo gratuito e open per tutti!

Come funziona Bootstrap?

Bootstrap si presenta come un’insieme di file css e javascript racchiusi in determinate cartelle. All’interno della cartella css, troverete tutti i fogli di stile che compongono la struttura grafica di bootstrap, che vedremo nel corso di questa serie di tutorial, mentre all’interno della cartella javascript troverete tutti gli script che servono al framework per gestire i vari effetti e le varie animazioni degli elementi composti dalle classi css e dai tag HTML, come per esempio, le animazioni del menu di navigazione!  A livello base per poter usare il framework, dovrete importare, tramite il tag <link href=”…”>  di html, il file bootstrap.min.css, questo discorso vale sia per quanto riguarda la versione 3.3.7, che per la versione 4.0.0, c’è da dire che esiste anche un altra modalità più semplice e veloce per i meno esperti di programmazione web, ovvero la CDN (Content Delivery Management) che trovate sulla wiki del sito Boostrap nella sezione “getting started“, la quale permette attraverso il richiamo di directory(cartelle) situate su dei serve MaxCDN vanno ad inserire direttamente nel documento HTML tutto ciò che serve per poter utilizzare Bootstrap!

I punti di forza di Bootstrap

Elenchiamo ora invece i principali punti di forza di questo framework, che come dicevamo anche all’inizio, sono:

• La possibilità di realizzare applicazioni mobile e anche siti web, del tutto responsive, cioè adattabili a tutti i tipi di dispositivi portatili e non;
• Poter realizzare applicazioni graficamente leggere, ma ricche di stili grafici e animazioni di qualsiasi tipo in modo da rendere l’applicazione o il sito più dinamici!
• Permette di scrivere il minor numero di righe di codice possibile, rendendo quindi il sorgente molto più pulito e riducendo sensibilmente il lavoro a carico dello sviluppatore.
• Creare progetti compatibili con tutti i browser e i sistemi operativi oggi esistenti, ovviamente quelli più recenti, e che cioè sono in grado di supportare i vari linguaggi di cui Boostrap è composto!

Per concludere

Quindi il nostro ultimatum per chiudere questa prima lezione introduttiva, è quello di incitarvi a seguire questo corso nel quale vogliamo farvi strada nella comprensione e l’utilizzo di questo potente strumento, al quale vale davvero la pena dedicare del tempo perché se imparato a maneggiare a dovere permette di realizzare cose davvero molto belle ma anche funzionanti al 100%! Per il momento questo è tutto, questa prima lezione finisce qui!

Prima di lasciarti, ecco il nostro video corso, fatto in live hangout, che potrai guardare qui sotto.

Speriamo di averti trasmesso interesse e che quindi proseguirai questo percorso! Se così sarà, ci farà molto piacere! Noi ti lasciamo qui per ora, ciao e alla prossima!