CENTRO DI FORMAZIONE PROFESSIONALE GALDUS Corso Operatore elettronico ID: TESI TECNICA BOOTSTRAP

Transcript

1 CENTRO DI FORMAZIONE PROFESSIONALE GALDUS Corso Operatore elettronico ID: TESI TECNICA BOOTSTRAP Relatore: Prof.ssa Marzia Marinelli Docente tecnico di riferimento: Prof. Massimiliano Acquati Allievo: Federico Stefanelli ANNO SCOLASTICO 2014/2015

2 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 Navbar pag. 8 Capitolo 5 Il mio progetto stage 5.1 Raccolta esempi globali pag Raccolta esempi oggetti specifici pag Disegno pag Sviluppo pag 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 3

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 4

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. 5

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. 6

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 7

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. 8

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. 9

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. 10

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. 11

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 12

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 13

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. 14

15 Sitografia