Studio e sviluppo di un sito web responsive attraverso Bootstrap

!!!!!!!!

UNIVERSITÀ DEGLI STUDI DI TRIESTE !!

DIPARTIMENTO DI INGEGNERIA E ARCHITETTURA

!CORSO DI LAUREA TRIENNALE IN INGEGNERIA

DELL’INFORMAZIONE

!!

STUDIO E SVILUPPO DI UN SITO WEB RESPONSIVE ATTRAVERSO BOOTSTRAP

!! Laureando: Relatore: Davide Polotto Chiar.mo Prof. Maurizio Fermeglia

!!

Anno Accademico 2014/2015

!

INDICE !!INTRODUZIONE…………………………………………………….3

1. ANALISI DI BOOTSTRAP………………………………………6

1.1 Vantaggi………………………………………………………6

1.2 Il sistema a griglia……………………………………………7

1.3 Confronto con altri framework………………………………8

!2. PROGETTO………………………………………………………9

2.1 Richieste del cliente…………………………………………9

2.2 Download del framework e scelte iniziali………………….9

2.3 Codice di partenza………………………………………….11

2.4 One page navigation (Scrollspy-Bootstrap)……………..13

2.4.1 La navbar……………………………………………..13

2.4.2 Problemi riscontrati con la navbar………………….15

2.5 Carousel……………………………………………………..17

2.6 Le immagini………………………………………………….20

2.7 Galleria Video………………………………………………..21

2.8 Altri componenti……………………………………………..27

2.8.1 Citazioni………………………………………………..27

2.8.2 Indirizzi…………………………………………………27

2.8.3 Chiusura automatica del menù………………………29

!3. CONCLUSIONI………………………………………………….29

!4.BIBLIOGRAFIA………………………………………………….30

INTRODUZIONE !Il progetto consiste nella realizzazione di un sito web per uno studio di produzioni

audiovisivi.

Il sito rappresenta una vetrina per l’attività nel web, di conseguenza è importante che

risulti tra le prime posizioni quando si utilizza un motore di ricerca.

Dallo scorso 21 aprile Google penalizza tutti quei siti che non sono ottimizzati per i

dispositivi mobile.

La scelta di Google, legata al mobile friendly è giustificata dal fatto che il mobile ha un

ruolo sempre più importante nel mondo della navigazione web.

Per rendere un sito “mobile friendly” le strade sono due:

!-Responsive Design: si ha un unico sito per servire sia i dispositivi desktop che quelli

mobile, di conseguenza l’indirizzo della pagina sarà lo stesso per ogni dispositivo così

come il codice html;

!-Versione mobile del sito: si ha un sito mobile distinto da quello del desktop,

di conseguenza saranno diversi sia l’indirizzo delle pagine che il codice html.

!In questo progetto si è optato per la prima soluzione utilizzando Bootstrap.

!Bootstrap è un framework front-end per lo sviluppo di siti web responsive.

Esso adotta l’approccio del mobile first.

!Prima di proseguire è opportuno definire cosa voglia dire responsive e cosa sia un

framework front-end.

Dire che un sito web è responsive significa che esso ha la caratteristica di adattarsi in

maniera automatica ad ogni dispositivo e ad ogni risoluzione.

I due concetti alla base della tecnologia responsive sono i breakpoint e le media query.

!�3

I framework front-end sono veri e propri kit di progettazione dedicati al web che

permettono di avviare un progetto in modo rapido ed efficiente.

Essi consentono di configurare l’interfaccia di un sito o di una applicazione, dalla

tipografia alla navigazione fino alle interazioni Javascript.

!Allo stato attuale, parlando di framework per la creazione dell’interfaccia utente, si

intende un sistema completo che abbia le seguenti caratteristiche:

-deve fornire le basi per la costruzione di layout a griglia;

-deve fornire un CSS strutturato e modulare per la formattazione dei principali elementi

dell’interfaccia attraverso l’utilizzo di classi standardizzate nel codice HTML;

-deve essere responsive;

-deve fornire una serie di plugin Javascript con widget e componenti di interfaccia come

slideshow, tooltip, box modali ecc.

!Bootstrap soddisfa tutti questi requisiti.

!Lo studio di produzioni audiovisivi per cui è stato costruito il sito, in precedenza, aveva

un sito web sviluppato con l’ausilio di Wordpress che non si adattava ai dispositivi

mobile.

Il sito era stato costruito nel 2013 e ciò mostra come il web e le tecnologie abbiano

subito un rapido cambiamento.

L’obiettivo è fornire a questo studio un sito che abbia la capacità di adattarsi a qualsiasi

dispositivo.

!Si consideri che il progetto è stato interamente ideato dal candidato e tutto il lavoro

svolto è a suo carico.

!!!!

�4

Si presenta un riassunto dei capitoli seguenti:

!-il primo riguarda un’analisi relativa al framework utilizzato, esaminando i vantaggi che

comporta utilizzarlo e studiando come funziona il sistema a griglia sul quale esso si

basa. Vengono inoltre elencati altri framework simili sintetizzando le caratteristiche di

ognuno;

!-il secondo riguarda la progettazione vera e propria del sito, analizzando in primis le

richieste del cliente. Successivamente vengono spiegate le modalità di download del

framework e il suo utilizzo per questo progetto con un’attenzione particolare al codice

di partenza, alla barra di navigazione, alle immagini, al carousel, alla tipografia e

soprattutto alla realizzazione della galleria video con tutti i problemi riscontrati e le

rispettive soluzioni;

!-il terzo capitolo riguarda le considerazioni finali sul progetto, quantificando il lavoro

svolto.

!!!

!!!!!!!

!!!�5

1. ANALISI DI BOOTSTRAP !1.1 Vantaggi !Bootstrap permette di sviluppare pagine web e layout grazie all’integrazione di un set di

elementi grafici, stilistici e Javascript.

I benefici di Bootstrap riguardano per lo più i siti che devono essere creati da zero.

Bootstrap rappresenta solo un punto di partenza per la realizzazione di un sito.

Esso infatti non richiede né un linguaggio di programmazione server side, né un

database.

Dopo aver impostato la struttura base è possibile personalizzare gli elementi di

interesse, eventualmente aggiungendo funzionalità dinamiche come quelle offerte da

PHP. Questa è una scelta flessibile, infatti dal momento in cui alcune pagine di un sito

realizzato con Bootstrap vengono modificate con l’introduzione di un linguaggio come

PHP, ASP o JSP, di fatto vengono cambiate solo le modalità di creazione delle pagine

front-end.

In questo modo esso risulta più leggero rispetto all’utilizzo di un CMS come Wordpress

o Joomla.

!I vantaggi sono legati alla facilità di implementazione di Bootstrap all’interno del

proprio sito e agli elementi che esso offre:

-elementi CSS base: set di elementi indispensabili per chi realizza un sito (bottoni, form,

stili per la tipografia, icone,immagini, ecc);

-Javascript: nei file js di Bootstrap si trovano una serie di plugin jQuery;

-elementi di interazione con l’utente: dropdown menu, etichette, alerts, ecc;

-grid system: offre la possibilità di organizzare i contenuti web all’interno di una griglia

fissa fluida, in modo da suddividere la pagina attraverso l’uso di colonne.

!!!

�6

1.2 Il sistema a griglia !La griglia di Bootstrap è predisposta per la creazione di layout fluidi e si basa su 12

colonne.

La larghezza delle colonne è espressa in percentuale, di conseguenza il meccanismo di

calcolo risulta intuitivo:12 colonne equivalgono al 100% dello spazio disponibile nella

riga, 6 colonne corrispondono al 50%, 3 colonne al 25% e così via.

Lo spazio tra ogni colonna è di 30px.

La somma delle colonne inserite in una riga non può essere superiore a 12.

Un esempio di markup HTML per la costruzione della griglia è il seguente:

!<div class=“row”>

<div class=“col-sm-6”>…</div>



</div>

!Nel foglio di stile di Bootstrap sono presenti quattro breakpoint fondamentali inseriti

ciascuno in una media query ad eccezione del primo.

A ciascun breakpoint è associato un prefisso specifico nella definizione delle classi per

la griglia:

-Primo breakpoint: schermi fino a 767px ;

Nessuna media query;

Classe: .col-xs-* (extra-small)

-Secondo breakpoint: schermi larghi da 768px in su;

@media (min-width: 768px) {…}

Classe: .col-sm-* (small)

-Terzo breakpoint: schermi larghi da 992px in su;


Classe: .col-md-* (medium)

�7

-Quarto breakpoint: schermi larghi da 1200px in su;


Classe: .col-lg-* (large)

!L’asterisco va sostituito con un numero da 1 a 12 che indica il numero di colonne

occupato.

Passando da un dispositivo ad un altro la griglia viene adeguata alla larghezza massima

del layout se esso è racchiuso in un elemento contenitore con classe .container e viene

adeguata la larghezza massima delle colonne.

!1.3 Confronto con altri framework Bootstrap non è l’unico framework front-end disponibile ma è sicuramente uno dei

progetti più popolari su GitHub e gode di grande supporto nella community degli

sviluppatori web.

Altri framework front-end sono:

-Pure CSS: progettato per essere estendibile e personalizzabile. Esso non comprende

file Javascript ma offre un kit CSS completo. Framework leggero.

-UI kit: molto simile a Bootstrap. Supporta i linguaggi diretti da destra verso sinistra.

-React: libreria Javascript dedicata alla creazione di interfaccia utente. Usa Javascript

per creare Markup.

-Groundwork CSS: costruito da zero con SASS. Questo framework offre avanzate

tecniche di layout reattive ed è dotato di un sistema di griglia molto sensibile. Esso è

open source e ospitato su GitHub.

-Foundation: Framework leggero. Usando la griglia è possibile costruire layout senza

scrivere una sola riga di codice CSS al di fuori di quello che Foundation offre.

!Altri framework front-end sono: Centurion, Topcoat, Cardinal e Workless.

!!!

�8

2. PROGETTO !

2.1 Richieste del cliente A seguito di una prima intervista col cliente, il primo dato ottenuto consiste nella

mancanza di un sito che si adatti automaticamente a qualsiasi dispositivo.

Le richieste sono:

-sito responsive

-layout semplice

-valorizzazione dei servizi che l’attività offre (video).

!2.2 Download del framework e scelte iniziali Per scaricare il framework è necessario collegarsi al sito getbootstrap.com e premere sul

pulsante “Download Bootstrap”.

Dopo di che si hanno tre possibilità di download:

-la versione compilata

-la versione compilata e personalizzata

-il codice sorgente.

!La versione compilata consiste in un file zip comprendente dei file CSS e Javascript

del framework, oltre che a diversi formati di font delle icone Glyphicons.

!La versione compilata e personalizzata contiene anch’essa file CSS e Javascript

compilati ma consente di avere un controllo più dettagliato rispetto al contenuto del file

grazie alla pagina Customize presente nella documentazione ufficiale che permette di

selezionare solo i componenti CSS e plugin Javascript (basati su jQuery) che si

intendono utilizzare.

Inoltre è possibile operare sui file LESS originali per mezzo di un’interfaccia grafica

semplificata.

Questa versione è utile a ridurre le dimensioni dei file compilati finali.

!�9

La terza opzione è per chi vuole lavorare con Bootstrap avendo a disposizione il codice

sorgente del framework.

!Per questo progetto si è deciso di utilizzare la prima versione, per valutare il framework

nel suo complesso, lavorando direttamente con file CSS invece che con il linguaggio

LESS (i file LESS per poter essere utilizzati devono essere compilati producendo il file

CSS corrispondente).

!Questo è il contenuto del file zip della versione compilata :

bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2 !Ora si procede con la realizzazione vera e propria del sito costruendo la pagina

index.html.

!!

�10

2.3 Codice di partenza Viene creata la pagina index.html.

Si può utilizzare un semplice editor di testo e salvare il file con nome index ed

estensione html, ma per questo progetto si è optato per l’utilizzo di Adobe

Dreamweaver CS6.

Il codice di partenza è:

<!DOCTYPE html>

<html lang="it">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Claudio Polotto</title>

<link href="css/bootstrap.min.css" rel=“stylesheet">

<link href=“ccs/custom.css” rel=“stylesheet”>







</head>

<body>

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">

</script>

<script src="js/bootstrap.min.js"></script>

</body>

</html>

!�11

Il DOCTYPE deve essere quello HTML5.

L’istruzione <meta http-equiv="X-UA-Compatible" content=“IE=edge"> forza

il browser di Microsoft a usare la modalità di rendering più avanzata.

Il meta tag <meta charset=“utf-8"> viene applicato per indicare il set di caratteri da

utilizzare.

Il meta tag viewport nell’intestazione head viene aggiunto per assicurare un rendering

appropriato e lo zoom al tocco:

<meta name="viewport" content="width=device-width, initial-scale=1”>.

Questo meta tag è fondamentale in quanto si lavora con un framework responsive.

<link href="css/bootstrap.min.css" rel=“stylesheet”> e <link href=“ccs/

custom.css” rel=“stylesheet”> sono i due fogli di stile a cui fa riferimento la

pagina. Il foglio di stile bootstrap.min.css è dato dal framework mentre custom.css è

stato creato in un secondo momento al fine di personalizzare il progetto.

Lo script Respond.js garantisce il supporto pieno di Bootstrap per Internet Explorer 8,

aggiungendo così a quel browser la capacità di gestire le media query.

Prima della chiusura del body viene inserito il collegamento a jQuery e al file con i

plugin Javascript bootstrap.min.js. É importante che jQuery sia inserito prima di

Bootstrap in quanto quest’ultimo utilizza jQuery per le sue funzioni interne e quindi si

aspetta che esista già un oggetto jQuery quando viene caricato.

!!!!!!!!!!

�12

2.4 One page navigation (Scrollspy-Bootstrap) !La strategia adottata è quella di realizzare un’unica pagina suddivisa in sezioni.

Per fare ciò viene usato il plugin di Bootstrap Scrollspy il quale consente di attivare

automaticamente i link sulla barra di navigazione quando si fa lo scroll della pagina, in

modo che la parte visualizzata corrisponda al link attivo sulla barra.

Per realizzare questo effetto, bisogna innanzitutto aggiungere l'attributo data-

spy="scroll" al body della pagina. É necessario inoltre aggiungere l'attributo data-target

il cui valore è costituito dall'ID della barra di navigazione che si deve aggiornare

quando viene effettuato lo scroll della pagina.

!2.4.1 La navbar

La navbar è un componente responsive che serve come metodo di navigazione

principale nelle applicazioni o nei siti web.

Il codice scritto per realizzare la navbar relativa a questo progetto è il seguente:

!<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">



<nav class="navbar navbar-default navbar-fixed-top" role="navigation" >

<div class="container-fluid">

<div class="navbar-header page-scroll">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-

target=".navbar-ex1-collapse">

<span class="icon-bar"></span>



</button>

<a class="navbar-brand page-scroll" href="#page-top"><img src="img/

logo.png"></a>

</div>

<div class="collapse navbar-collapse navbar-ex1-collapse>

�13

<ul class="nav navbar-nav navbar-center">



<li class="hidden">

<a class="page-scroll" href="#page-top"></a>

</li>

<li><a href="#about">About</a></li>

….

….

<li><a class="page-scroll" href="#contacts">Contacts</a></li>

</ul>

<ul class="nav navbar-nav navbar-right>

<li>

<a href="https://www.facebook.com/Claudiopolotto-Cinematography-

Photography-164965556848774/" target="_blank">

<img src="img/facebook-icon.png" alt="Claudio Polotto facebook"></a>

</li>

…

…

<li>

<a href="https://plus.google.com/+ClaudioPolotto/posts" target="_blank">

<img src="img/Google-Plus-icon.png" alt="Claudio Polotto google"></a>

</li>

</ul>

</div>

</nav>



!La navbar responsive richiede che venga incluso il plugin collapse.

É necessario aggiungere ad un elemento data-toggle="collapse" e data-target per

assegnargli il controllo di un elemento richiudibile. L'attributo data-target accetta un

selettore CSS per identificare l’elemento.

�14

2.4.2 Problemi riscontrati con la navbar

Verificando l’adattabilità del sito nei vari dispositivi è stata riscontrata un’anomalia per

quanto riguarda la navbar negli iPad.

Come si vede dalla seguente foto il contenuto della navbar non è esteso su una sola riga

come dovrebbe; ciò è dovuto al fatto che Bootstrap non sa quanto spazio occupa il

contenuto della navbar:

Per risolvere questo problema è stata aggiunta una media query personalizzata al file

custom.css:

@media (max-width: 1024px) {

.navbar-header {

float: none;

}

.navbar-left,.navbar-right {

float: none !important;

}

.navbar-toggle {

display: block;

}

�15

.navbar-collapse {

border-top: 1px solid transparent;

box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);

}

.navbar-fixed-top {

top: 0;

border-width: 0 0 1px;

}

.navbar-collapse.collapse {

display: none!important;

}

.navbar-nav {

float: none!important;

margin-top: 7.5px;

background:#FFF;

}

.navbar-nav>li {

float: none;

}

.navbar-nav>li>a {

padding-top: 10px;

padding-bottom: 10px;

}

.collapse.in{

display:block !important;

}

}

!!

�16

A questo punto, al posto della navbar estesa, appare un pulsante con il menu a tendina,

esattamente come per gli smartphone.

!2.5 Carousel !Come detto in precedenza il sito si sviluppa su un’unica pagina suddivisa in sezioni.

Nella prima sezione <header> è stata inserita una slideshow di foto che occupa l’intero

spazio della pagina.

Per costruire una slideshow, Bootstrap fornisce nella sezione Javascript della sua

documentazione ufficiale il codice necessario.



<header id="myCarousel" class="carousel slide">



<ol class="carousel-indicators">

<li data-target="#myCarousel" data-slide-to="0" class="active"></li>

<li data-target="#myCarousel" data-slide-to="1"></li>


….

…

�17


</ol>

Da notare come l’id dell’header corrisponda con il data-target dell’elenco di indicatori.

Gli indicatori sono i pallini che si trovano in basso.

Ogni pallino corrisponde a una foto e cliccando sopra è possibile selezionare la foto

corrispondente.

La seconda porzione di codice riguarda la composizione di ciascuna slide, ognuna

formata da un immagine di sfondo e da un bottone con collegamento alla sezione

successiva.



<div class="carousel-inner ">

<div class="item active">



<div class="fill" style="background-image:url('img/a.jpg');">

<div class="carousel-caption">

<a href="#about" class="btn btn-primary btn-lg page-scroll”>

See More</a>

</div>

</div>

</div>

….

….

</div>

La terza porzione di codice riguarda le frecce ai lati delle slide con le quali è possibile

selezionare manualmente la slide precedente o successiva.

!

<a class="left carousel-control" href="#myCarousel" data-slide="prev">

<span class="icon-prev"></span>

</a>

<a class="right carousel-control" href="#myCarousel" data-slide="next">

�18

<span class="icon-next"></span>

</a>

!Per far scorrere automaticamente le slide ogni tre secondi si è utilizzato il seguente

script:

! 

<script type="text/javascript">

$('.carousel').carousel({

interval: 3000 })

</script>

!Per fare in modo che la slideshow occupi l’intero spazio della pagina su ogni dispositivo

in cui viene visualizzato il sito, è stato personalizzato il css nel file custom.css.

Da notare che nel codice visto precedentemente per la costruzione di ogni slide ad ogni

div è stata assegnata la classe ‘fill’.

Nel css questa classe è stata personalizzata nel seguente modo:

.fill {

position:relative;

width: 100%;

height: 100%;

min-height:auto;

background-position: center;

-webkit-background-size: contain;

-moz-background-size: contain;

background-size: contain;

-o-background-size: contain;

background-color:#000;

background-repeat:no-repeat;

}

In questo modo abbiamo imposto che la slideshow occupi il 100% dell’area in larghezza e in altezza.

�19

Da notare però che su desktop e sugli smartphone non sono le foto di ciascuna slide ad

occupare l’intera area ma è la slideshow nel suo complesso. Ciò è dovuto a:

! -webkit-background-size: contain;

-moz-background-size: contain;

background-size: contain;

-o-background-size: contain;

!Se infatti al posto di ‘contain’ si fosse scritto ‘cover’ le foto avrebbero occupato l’intera

area, ma ciò avrebbe comportato un taglio su certi dispositivi.

!2.6 Le immagini !Le sezioni About, Services, Commercial Video, Wedding Video e Friends Link

contengono immagini.

La particolarità di Bootstrap è che le immagini possono diventare responsive

aggiungendo la classe .img-responsive. Questa applica all'immagine un max-width:

100%; e height: auto; .

Con Bootstrap è possibile anche dare automaticamente una forma arrotondata, circolare

o con una piccola cornice applicando rispettivamente le classi .img-rounded ,

.img-circle, .img-thumbnail.

Esempi:

<img class="img-responsive" src=“img/321action_logo.png">

<img src="img/claudio.jpg" class="img-circle" alt="Claudio Polotto”>

!!!!!!

�20

2.7 Galleria Video !Ciò che si vuole mettere più in evidenza nel sito è il servizio che l’attività offre, ovvero i

vari tipi di video.

É stato deciso di realizzare una galleria utilizzando una serie di immagini, ciascuna

corrispondente a un video.

Cliccando sopra ad un’immagine si apre un box modale contenente il video

corrispondente.

Il box modale è lo stesso per tutti i video.

Bootstrap fornisce il codice per costruire un box modale nella documentazione ufficiale.

É stato riscontrato un problema nell’incorporazione degli iframe di Youtube e di Vimeo

nel box: i video venivano caricati correttamente, ma alla chiusura del box l’audio del

video persisteva e all’apertura di un altro video le musiche si sovrapponevano.

É stato necessario implementare uno script Javascript supplementare:

!!!!

�21

<script>

function autoPlayYouTubeModal(){

var trigger = $("body").find('[data-toggle="modal"]');

trigger.click(function() {

var theModal = $(this).data( "target" ),

videoSRC = $(this).attr( "data-video" ),

videoSRCauto = videoSRC+"?autoplay=1" ;

$(theModal+' iframe').attr('src', videoSRCauto);

$(theModal+' button.close').click(function () {

$(theModal+' iframe').attr('src', videoSRC);

});

});

}

</script>

<script>

$(document).ready(function(){

autoPlayYouTubeModal();

});

</script>

!Ogni immagine funge da “bottone”. Ad esempio:

! <a class="thumbnail" data-video-id=“ “ href="#" data-toggle="modal" data-

target="#video-gallery" data-video="http://www.youtube.com/embed/uX-4i44vdik" data-caption="Commercial" data-title="Tangeroise">

<img src="img/tange.jpg" class=“img-responsive">

</a>

!Da notare che il link al video è stato scritto alla voce data-video con la forma

appropriata per l’incorporazione di iframe presi da Youtube.

�22

Infatti per incorporare iframe da Youtube o Vimeo non è sufficiente copiare l’url del

video corrispondente, ma c’è una modalità da seguire descritta nelle API delle due

piattaforme. Precedentemente è stato fatto l’esempio per un video preso da Youtube, di

seguito ne viene proposto uno per un video preso da Vimeo:

! <a class="thumbnail" data-video-id="" href="#" data-toggle="modal" data-

target="#video-gallery" data-video="http://player.vimeo.com/video/64211187"

data-title="Claudia and Andrea" data-caption="Wedding">

<img src="img/ca.jpg" class=“img-responsive">

</a>

!Come detto in precedenza al click di una di queste immagini si apre un box modale:

!<div class="modal fade"id="video-gallery" tabindex="-1" role="dialog" aria-

labelledby="myModalLabel" aria-hidden="true">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-

hidden="true">×</button>

<h4 class="modal-title" id="video-gallery-title"></h4>

</div>

<div class="modal-body">

<iframe id="video-gallery-video" width="100%" height="350px" src=""

allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">

</iframe>

</div>

<div class="modal-footer">

<div class="col-md-2">

<button type="button" class="btn btn-primary" id="show-previous-

video">Previous</button>

</div> �23

<div class="col-md-8 text-justify" id="video-gallery-caption">

This text will be overwritten by jQuery

</div>

<div class="col-md-2">

<button type="button" id="show-next-video" class="btn btn-

primary">Next</button>

</div>

</div>

</div>

</div>

</div>

!Da notare la corrispondenza tra le immagini e il box modale:

!il data-target delle immagini è uguale all’id del box modale, inoltre il box prende

automaticamente il titolo (attraverso data-title), la descrizione (attraverso data-caption) e

il link dell’iframe (attraverso data-video) da ogni immagine.

!Per far funzionare i bottoni “Previous” e “Next”, permettendo così di scorrere i video

direttamente nel box modale senza doverlo chiudere e riaprire ogni volta, è stato scritto

questo script:

!

<script>

$(document).ready(function(){

loadGallery(true, 'a.thumbnail');

//Questa funzione disabilita i bottoni quando è necessario

function disableButtons(counter_max, counter_current){

$('#show-previous-video, #show-next-video').show();

if(counter_max == counter_current){

�24

$('#show-next-video').hide();

} else if (counter_current == 1){

$('#show-previous-video').hide();

}

}

/**

*

* @param setIDs Sets IDs when DOM is loaded. If using a PHP counter,

set to false.

* @param setClickAttr Sets the attribute for the click handler.

*/

function loadGallery(setIDs, setClickAttr){

var current_image,

selector,

counter = 0;

$('#show-next-video, #show-previous-video').click(function(){

if($(this).attr('id') == 'show-previous-video'){

current_image--;

} else {

current_image++;

}

selector = $('[data-video-id="' + current_image + '"]');

updateGallery(selector);

});

function updateGallery(selector) {

var $sel = selector;

current_image = $sel.data('video-id');

$('#video-gallery-caption').text($sel.data('caption'));

$('#video-gallery-title').text($sel.data('title'));

$('#video-gallery-video').attr('src', $sel.data('video'));

disableButtons(counter, $sel.data('video-id'));

}

�25

if(setIDs == true){

$('[data-video-id]').each(function(){

counter++;

$(this).attr('data-video-id',counter);

});

}

$(setClickAttr).on('click',function(){

updateGallery($(this));

});

}

});

</script>

!!

!!!!

�26

2.8 Altri componenti !2.8.1. Citazioni

Bootstrap mette a disposizione nella sua documentazione delle classi CSS per ottenere

diversi stili per quanto riguarda la tipografia.

Uno di questi stili riguarda le citazioni.

!<blockquote>

<p>Working togherther is success</p>

<footer>Henry Ford</footer>

</blockquote>

2.8.2 Indirizzi !<address>

<h4><strong>Claudio Polotto</strong></h4><br>

via Garda 1,<br>San Donà di Piave 30027<br>

<span class="glyphicon glyphicon-earphone”></span>

<a href="tel:+39 0421 480162">+39 0421 480162</a><br>

<span class="glyphicon glyphicon-phone”></span>

<a href="tel:+39 338 2094727">+39 338 2094727</a><br>

!�27

<span class="glyphicon glyphicon-envelope"></span>

<a href=“mailto:[email protected]”>

[email protected]</a><br><br>

</address>

Da notare le icone a sinistra dei numeri di telefono e della mail.

Pure queste sono state ottenute tramite l’implementazione di una classe fornita da

Bootstrap. I nomi delle classi associate alle rispettive icone si trovano sulla

documentazione ufficiale.

Per ottenere un’icona si deve scrivere:

!<span class="glyphicon glyphicon-earphone”></span>

!<span class="glyphicon glyphicon-phone”></span>

!<span class="glyphicon glyphicon-envelope"></span>

!!!

�28

2.8.3 Chiusura automatica del menù

Di default, una volta premuto il bottone del menù nei dispositivi mobile e scelta la

sezione interessata, il menù non si richiudeva automaticamente ma bisognava agire

manualmente premendo nuovamente il bottone.

Attraverso il seguente codice è stato automatizzato il processo, così ogni volta che la

voce del menù di interesse viene selezionata il menù si richiude:

!

<script>

$('.navbar-collapse a').click(function(){

$(".navbar-collapse").collapse('hide');

});

</script>

!!

3. CONCLUSIONI !In questa tesi si è voluto dare risalto all’implementazione del layout di un sito attraverso

un framework front-end come Bootstrap.

Successivamente a uno studio individuale riguardante CSS3,LESS,HTML5 e Javascript

l’utilizzo di questo strumento si è rivelato comodo e veloce e ha permesso di soddisfare

tutte le esigenze del cliente.

Sono state scritte 663 righe di codice nella pagina index.html e 208 righe in custom.css.

Il sito realizzato per questo progetto non deve gestire dati, ma una possibile miglioria

per il futuro prossimo potrebbe essere la realizzazione di un sito multilingue attraverso

PHP.

Lo sviluppo di questo progetto ha portato anche allo studio di alcune tecniche SEO per

migliorare il ranking del sito nei motori di ricerca.

Il sito ora è online e si può visitare all’indirizzo www.claudiopolotto.com .

�29

http://www.claudiopolotto.com

Il candidato è soddisfatto del lavoro svolto e delle conoscenze acquisite e intende

proseguire con lo studio dello sviluppo web, approfondendo sia il lato client che il lato

server.

Visualizzazione di una pagina del sito attraverso tre diversi dispositivi: Laptop, Apple iPad e Samsung S3. !!4.BIBLIOGRAFIA

!1. http://getbootstrap.com/

2. http://www.html.it/guide/guida-bootstrap/

3. http://www.html.it/guide/guida-css3/

4. http://www.html.it/guide/guida-javascript-di-base/

5. http://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal

6. https://developers.google.com/youtube/player_parameters?hl=it

7. https://developer.vimeo.com/player

8. https://www.idearia.it/blog/10-migliori-framework-front-end/#.VitbwGThDow

9. http://stackoverflow.com/questions/31392219/navbar-not-collapse-on-ipad-

bootstrap-3

10. http://stackoverflow.com/questions/21203111/bootstrap-3-collapsed-menu-doesnt-

close-on-click

�30

http://getbootstrap.com/

http://www.html.it/guide/guida-bootstrap/

http://www.html.it/guide/guida-css3/

http://www.html.it/guide/guida-javascript-di-base/

http://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal

https://developers.google.com/youtube/player_parameters?hl=it

https://developer.vimeo.com/player

https://www.idearia.it/blog/10-migliori-framework-front-end/#.VitbwGThDow

http://stackoverflow.com/questions/31392219/navbar-not-collapse-on-ipad-bootstrap-3

http://stackoverflow.com/questions/21203111/bootstrap-3-collapsed-menu-doesnt-close-on-click

Engineering

Studio e sviluppo di un sito web responsive attraverso Bootstrap