CENTRO DI FORMAZIONE PROFESSIONALE GALDUS

Corso “Operatore elettronico” ID: 110608

TESI TECNICA

“BOOTSTRAP”

Relatore: Prof.ssa Marzia Marinelli Docente tecnico di riferimento: Prof. Massimiliano Acquati

Allievo: Federico Stefanelli

ANNO SCOLASTICO 2014/2015

INDICE

Capitolo 1

Introduzione_____________________________________pag. 3

Capitolo 2

Cos’è Bootstrap?__________________________________pag. 4

Capitolo 3

Utilizzi e funzionalità_________________________________pag. 5

Capitolo 4

Elementi di Bootstrap

4.1 Dropdown Button_______________________________pag. 8

4.2 Navbar_____________________________pag. 8

Capitolo 5

Il mio progetto stage

5.1 Raccolta esempi globali_______________________________pag. 10

5.2 Raccolta esempi oggetti specifici______________________pag. 10

5.3 Disegno___________________________pag. 11

5.4 Sviluppo_______________________________pag. 11

5.5 Debug_______________________pag. 11

Capitolo 6

Responsive Design_______________________pag. 12

Capitolo 7

Conclusioni_______________________pag. 14

Sitografia_______________________pag. 15

3

CAPITOLO 1

Introduzione

Nato come un progetto interno a Twitter ad opera degli sviluppatori Mark Otto e

Jacob Thornton ed oggi indipendente, Bootstrap può a buon diritto considerarsi

il re dei framework per lo sviluppo di interfacce web. A confermare questo,

ecco una serie di dati:

secondo recenti statistiche tracce del codice di questo framework si ritrovano sull’1%

dei siti web;

gode di un supporto nella community degli sviluppatori che non ha pari rispetto

agli front-end framework;

chi lo usa può contare su una mole enorme di risorse e ausili di ogni tipo;

è diventato una sorta di standard come punto di partenza in ambiti come la creazione

di template HTML preconfezionati e temi per i principali CMS, soprattutto in

un’ottica responsiva.

L’uscita della versione 3.0, con tutte le migliorie che porta con sé, non potrà che

rafforzare questo scenario.

Tanta popolarità non significa, automaticamente, che Bootstrap sia la soluzione

giusta in ogni contesto e in ogni progetto.

Se si perde di vista questa idea di fondo, si rischia di considerare un tool come

Bootstrap come la soluzione definitiva in fatto di web design. È invece solo un

tool per gestire al meglio la fase di avvio di un progetto, un modo per poter

contare su una serie di componenti riusabili e personalizzabili, comunque adattabili

in termini stilistici ed estetici alle richieste del progetto e alla creatività di chi

4

concepisce il sito. Una gabbia, dirà qualcuno, ma che può avere una sua funzione e

una sua utilità per non dover ricominciare ogni volta da zero.

Ho deciso di approfondire questo argomento perché mi ha colpito molto

nell’ambito del mio ultimo stage. In particolare ho trovato molto interessante la

semplicità e la completezza con la quale accedi alle risorse di Bootstrap.

Dopo una descrizione generale dell’argomento, analizzerò utilizzi e funzionalità e,

nel capitolo 5, descriverò il mio progetto, realizzato durante il tirocinio di

quest’anno presso l’azienda Gestinfo.

CAPITOLO 2

Cos’è Bootstrap?

Prima di addentrarci nei dettagli di Bootstrap, cerchiamo di capire che cosa è, cosa

possiamo aspettarci da esso e come può facilitare il nostro lavoro di sviluppo per il

web.

Rispondiamo, innanzi tutto, alla prima domanda: Cosa è Bootstrap? Bootstrap è un

insieme di elementi grafici, stilistici, di impaginazione e Javascript pronti all’uso, nati

in seno a Twitter. Oggi Bootstrap è un progetto indipendente ed è stato messo a

disposizione degli sviluppatori di tutto il mondo che sono liberi di utilizzare

questo framework come base per i propri progetti web.

Ad oggi Bootstrap può vantare un successo davvero planetario, forte di una platea di

utilizzatori in rapida espansione.

Questo porta subito a rispondere alla seconda domanda: cosa ci possiamo aspettare da

Bootstrap? La risposta è semplice: questo framework ci offre i mattoni con cui

5

costruire pagine web HTML5, completamente responsive, coerenti e funzionali.

L’utilità di Bootstrap è immediatamente evidente, soprattutto nella situazione attuale

in cui le pagine web possono essere fruite su una miriade di dispositivi con

caratteristiche diverse.

Sarà Bootstrap ad occuparsi di mettervi a disposizione elementi di stile che

permettono alla pagina di adattarsi al dispositivo utilizzando, al contempo, elementi di

interfaccia comuni ai siti moderni, quelli cioè che l’utente si aspetta e di cui conosce

comportamento e significato.

CAPITOLO 3

Utilizzi e funzionalità

In parole semplici, Bootstrap è una serie di elementi e funzioni per il web-design

personalizzabili raccolti in un unico strumento. Quando progettano un sito web con

Bootstrap, gli sviluppatori possono scegliere quali elementi utilizzare.

Cosa ancora più importante, gli sviluppatori possono avere la certezza che gli elementi

scelti non saranno in conflitto tra di loro. È come avere un puzzle in cui tutti i pezzi si

incastrano perfettamente, a prescindere da quello scelto.

Gli elementi personalizzabili contenuti in Bootstrap sono una combinazione di HTML,

CSS e JavaScript. Grazie alla comodità dell’open-source, Bootstrap viene migliorato

continuamente. Nel tempo è stata aggiunta una varietà di ottime funzioni, come il

100% di reattività mobile e le ricche selezioni plug-in jQuery. Una delle critiche

maggiori rivolte a Bootstrap e agli altri framework della stessa categoria, è che i siti

con essi realizzati sembrano tutti uguali; oppure che un sito fatto con Bootstrap ‘si

vede subito che è fatto con Bootstrap’.

6

Bootstrap 3.0 vede l’introduzione di significative novità rispetto alle precedenti

versioni.

La principale è senza dubbio rappresentata dal fatto che ora il framework è concepito

nativamente come uno strumento adatto alla realizzazione di siti responsivi. Possiamo

così sintetizzare: se prima le funzionalità responsive erano opzionali, ora si è

abbracciato l’approccio mobile first. Una pagina basata su Bootstrap è di default

adattabile ad una gamma ampia di device, dagli smartphone a crescere fino ai desktop

ad altissima risoluzione.

In questo scenario, il componente che ha subito le modifiche più radicali è la griglia. In

Bootstrap 3.0 il layout è di default fluido, con larghezze espresse in percentuale, e

pertanto maggiormente adattabile a differenti risoluzioni di schermo.

Altre novità:

1. Le icone che è possibile associare al design dell’interfaccia sono sempre quelle di

Glyphicons, ma invece che essere rappresentate da immagini sono ora distribuite

sotto forma di icon font.

2. È stato completamente riscritto il componente Navbar.

3. Sono stati introdotti nuovi componenti estremamente flessibili come i pannelli e i list

groups. Altri componenti sono stati eliminati, altri ancora ridefiniti nell’aspetto

visuale.

4. Si presenta nel suo look predefinito con una veste estetica più semplificata.

5. Sul versante Javascript, è praticamente invariato il set di componenti disponibili. I

plugin sono però stati riscritti per ottimizzare ulteriormente le prestazioni, per

evitare conflitti tra script, per adeguare alcuni componenti al nuovo contesto

responsivo.

7

CAPITOLO 4

Elementi di Bootstrap

La documentazione di Bootstrap è suddivisa in tre sezioni:

1. CSS: comprende gli stili di base globali, le regole per la tipografia e quelle per la

formattazione degli elementi HTML fondamentali.

2. Components: comprende esempi e codice di base per tutti i componenti di interfaccia

predefiniti del framework.

3. Javascript: è la sezione dedicata ai plugin jQuery che forniscono la base per la

realizzazione di componenti interattivi.

Se si

volesse

parlare

di tutti

gli

elementi

di

Bootstr

ap non

mi

bastere

bbe una

vita,

ecco perché ho deciso di voler parlare di solo 3 elementi, semplici ma molto utili per i

programmatori:

- Dropdown Button

- Navbar

- Responsive Image

8

4.1 Dropdown Button

Nelle barre di navigazione possono essere inseriti elementi più complessi rispetto a

dei semplici collegamenti. Uno degli elementi più comuni sono i cosiddetti menu a

discesa (o menu dropdown) i quali consentono di raggruppare più opzioni di menu sotto

una unica voce creando, di fatto, un menu multi-livello.

Il menu a discesa si crea con il componente Bootstrap dropdown che si implementa

mediante un elemento div a cui va assegnata la classe dropdown. All’interno di questo

div, va inserita una lista non ordinata con classe dropdown-menu. Ogni elemento della

lista costituirà una voce del nostro menu a discesa.

Per inserire un separatore fra voci di menu di ambito diverso è possibile aggiungere un

elemento <li> vuoto con classe divider.

È necessario aggiungere anche un pulsante di classe btn-default dropdown-toggle da

usare per aprire (e chiudere) il menu a discesa. Il pulsante deve essere “associato” al

menu a discesa, racchiudendoli entrambi in un div di classe btn-group.

4.2 Navbar

Uno degli elementi comuni a tutti i siti web è la barra di navigazione (o navbar). La

navbar è l'elemento strutturale che contiene i link che consentono di muoversi tra le

varie sezioni del sito web: in poche parole è l'area della pagina che ospita il menu ed

altre utilità di navigazione come, ad esempio, un motore di ricerca interna.

Bootstrap propone diverse navbar e offre la possibilità di inserirvi molti elementi

oltre ai collegamenti verso altre pagine: è possibile inserire un campo di ricerca, un

elenco a discesa e molti altri elementi…. Le barre di navigazione di Bootstrap

sono responsive per impostazione predefinita: quando la finestra del browser diventa

piccola, gli elementi della barra vengono nascosti e, al loro posto, viene visualizzato un

pulsante che permette di ri-visualizzarli in pila, quindi non più in orizzontale.

9

La barra di navigazione è predisposta per contenere un logo che rimane sempre visibile

anche quando la barra è minimizzata.

CAPITOLO 5

Il Mio Progetto Stage

Sono venuto a conoscenza del framework Bootstrap durante il mio ultimo stage che ho

svolto alla Gestinfo. Il progetto prevedeva la realizzazione di un template da

utilizzare per le applicazioni web già esistenti di GESTINFO SRL. Lo sviluppo del

template prevedeva un codice finale in HTML/CSS. Le applicazioni sono state

sviluppate in php ma è stata Gestinfo, alla fine del progetto, ad effettuare la

conversione da HTML a PHP.

Questo progetto aveva dei requisiti:

Responsive: Il template doveva essere adattivo, ovvero visualizzabile per le almeno 8

seguenti dimensioni: Smart Phone veriticale, Smart Phone orizzontale, Tablet

verticale, Tablet orizzontale, Monitor 800 px, Monitor 1024px, Monitor 1280px,

Monitor 1300px.

Cross Browser: Il template doveva essere compatibile con i principali browser in

circolazione, Internet Explorer, Firefox, Chrome ed Opera ed in tutte le loro versioni

ad eccezione di quelle appartenenti a sistemi operativi non più monitorati dagli

aggiornamenti della rispettiva casa madre. Il template necessitava della stessa

compatibilità anche in caso di utilizzo di script in JQuery e Javascript.

Charset: Le applicazioni erano multilingua e per questo il template necessitava della

compatibilità di caratteri misti: Russo, Cinese, Ascii, etc.

10

Cache: Attraverso l’utilizzo dei meta dovevamo trovare degli attributi che impedivano

al client di memorizzarsi i file Js e Css in Cache.

5.1 Raccolta esempi globali

La realizzazione del template non prevedeva uno strumento già deciso, ed era dunque

aperta a qualsiasi strada, purché si rispettassero i requisiti e le caratteristiche

richieste, ed il risultato fosse facilmente modificabile in qualsiasi momento. Per

questo motivo, prima di scegliere la strada da seguire fu effettuata una ricerca delle

seguenti alternative: Foundation, Bootstrap, Wordpress (o cms simili), Template nel

web, Software per la generazione dei template.

Inoltre i modelli descritti ed il template saranno implementati e modificati prima

attraverso software grafici come Gimp o Photoshop, e poi sviluppati.

5.2 Raccolta esempi oggetti specifici

Dopo aver raccolto degli esempi generali, e aver preso spunto dai vari siti

visitati, ci siamo addentrati nella raccolta di esempi specifici per ogni elemento

del sito.

Navigando su internet e cercando qualche metodo alternativo, siamo giunti alla

conclusione, ovvero quello di utlizzare Bootstrap per poter creare le diverse

parti del sito, essendo molto semplice e intuitivo siamo riusciti a creare tutti i

diversi modelli per ogni elemento e anche qualche esempio di sito completo.

11

5.3 Disegno

Ovviamente prima di esserci cimentati con il framework, per poter fare degli

esempi senza dover scrivere linee di codice, abbiamo utilizzato dei software

grafici, per poter disegnare, copiare o incollare i diversi elementi che

caratterizzavano il restyling grafico delle web app.

Elementi nuovi e vecchi, grazie a Gimp o Photoshop, assemblati in una pagina di

prova, ci hanno dato la possibilità di vedere come sarebbe uscito il restyling

grafico, prima di iniziare lo sviluppo.

5.4 Sviluppo

Dopo aver raccolto molti esempi di oggetti in particolare, e di siti completi, e

dopo aver ricevuto il via libera dal capo, siamo partiti con lo sviluppo dei vari

templates per i clienti dell’azienda.

Utilizzando il codice HTML e CSS e grazie all’ausilio di Bootstrap siamo partiti

con lo sviluppo, riscontrando non poche difficoltà e qualche incongruenza, siamo

comunque riusciti a portare a termine il progetto.

5.5 Debug

Prima di poter lanciare il nuovo progetto on-line, abbiamo provato una delle

caratteristiche fondamentali che avrebbe dovuto avere il template, ovvero il

cross browser; cioè che l’applicazione doveva essere compatibile con i browser

più utilizzati, ovviamente non subito siamo riusciti a far entrare tutti gli

elementi all’interno della pagina, ma con molto tempo e molte correzioni di

errori e qualche piccola variazione siamo riusciti ad arrivare al progetto

completo e concluso.

12

CAPITOLO 6

Responsive Design

La lingua inglese designa genericamente con l’aggettivo “responsive” tutto ciò

che “reagisce risponde rapidamente e in modo appropriato ad uno stimolo”.

Il Responsive Web Design (RWD) è una tecnica per la realizzazione di siti Web in

grado di adattarsi graficamente in modo automatico alle diverse dimensioni dei dispositivi

impiegati (come ad esempio quelle di Smartphone o Tablet), riducendo al minimo

la necessità per l'utente di ridimensionamento e scorrimento dei contenuti. I

formati utilizzati da tali dispositivi sono molteplici ed in continua evoluzione,

quindi, è fondamentale creare un sito capace di adattarsi a qualsiasi formato

futuro.

Ora possiamo anche passare a specificare cosa non è il responsive design:

- Non è una metodologia per creare versioni dei siti ‘ottimizzate’ e specifiche

per il mobile: un principio cardine del responsive design è che il web è uno e

unico, non c’è pertanto necessità di versioni diverse per un singolo sito; quello

che progetto e realizzo deve essere auto-adattante rispetto all’enorme e

crescente varietà di dispositivi con cui viene (e verrà) visualizzato.

- Non prevede l’introduzione di nuove tecniche: non dobbiamo imparare nuovi

linguaggi o complesse tecnologie, ma soltanto applicare in un nuovo

contesto e guidati da un diverso approccio tutto quello che conosciamo e

applichiamo da tempo in fatto di markup (HTML), presentazione e layout

(CSS), scripting (Javascript, Ajax, PHP, etc).

La necessità di adattare l'impaginazione alle diverse dimensioni e risoluzioni degli

schermi, ha introdotto il concetto di "Resolution breakpoint" (punti di interruzione

13

della risoluzione), in modo da stabilire delle soglie alle quali modificare la

presentazione grafica in funzione della larghezza del dispositivo.

Tali soglie sono generalmente espresse in pixel, anche se l'aumento della densità dei

pixel nelle nuove generazioni di dispositivi comporta che non si possa considerare

l'area di visualizzazione solo in termini di pixel, senza considerarne l'effettiva

dimensione.

Generalmente si identificano sei diversi resolution breakpoint:

320 pixel per dispositivi con schermi piccoli, come cellulari, con orientamento

verticale (portrait)

480 pixel per dispositivi con schermi piccoli, come cellulari, con orientamento

orizzontale (landscape)

600 pixel piccoli tablet, come Kindle di Amazon (600x800) e Nook di

Barnes&Noble (600x1024), con orientamento verticale

768 pixel tablet da 10 pollici, come l'iPad (768x1024), con orientamento verticale

1024 pixel computer da scrivania, fissi o portatili e tablet come l'iPad (1024x768),

con orientamento orizzontale

1200 pixel computer con schermi larghi, tipicamente fissi ma anche alcuni portatili

Tali tipologie possono essere più genericamente

ricondotte a quattro principali:

Mobile: per cellulari

Narrow: per tablet

Normal: computer fisso o portatile

Wide: schermi di grandi dimensioni

14

Un Sito Web Responsive Design ha un User Experience migliore, infatti, tramite

questa tecnologia viene offerta all’utente un’esperienza di navigazione funzionale,

semplice ed efficace, la quale porta ad un maggior numero di visite e di conversioni.

Ma il vantaggio più importante di un Sito Web Responsive Design è il migliore

posizionamento organico del sito tra i risultati di ricerca di Google.

In sostanza i siti web facilmente fruibili tramite smartphone e tablet sono

considerati maggiormente Google-Friendly dal celebre motore di ricerca.

CAPITOLO 7

Conclusioni

Scrivendo questa tesi ho trovato alcune piccole difficoltà, soprattutto per quanto

riguarda la terminologia tecnica.

Non ho avuto altre tipologie di difficoltà più che altro perché avevo affrontato questo

tema durante il tirocinio formativo di quest’anno alla Gestinfo, grazie alle ricerche sul

Web e a qualche dritta del mio tutor aziendale sono riuscito a scrivere questa tesi

inglobando pareri diversi.

Navigando su internet devo dire che ho imparato molto di più di quanto sapevo,

sommando il lavoro che ho svolto in stage, e quello che non sapevo, ora posso dire di

conoscerlo abbastanza bene.

Devo ringraziare la professoressa Marzia Marinelli per la sua pazienza e cortesia e

l’azienda Gestinfo, in particolare Angelo Forte che mi ha proposto il progetto e mi ha

inviato il materiale da cui ho potuto prendere spunto per la mia tesi.

15

Sitografia

1. www.hackerstribe.com/guide/IT-bootstrap-3.1.1

2. www.html.it

3. www.mrwebmaster.it