centro di formazione professionale galdus corso … · tesi tecnica “bootstrap” ... components:...
TRANSCRIPT
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