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

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:info@claudiopolotto.com”>
info@claudiopolotto.com</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

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

Studio e sviluppo di un sito web responsive attraverso Bootstrap

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (8)

Similar a Studio e sviluppo di un sito web responsive attraverso Bootstrap

Similar a Studio e sviluppo di un sito web responsive attraverso Bootstrap (20)

Studio e sviluppo di un sito web responsive attraverso Bootstrap