Studio e sviluppo di un sito web responsive attraverso Bootstrap

UNIVERSITÁ DEGLI STUDI DI TRIESTE

DIPARTIMENTO DI INGEGNERIA E ARCHITETTURA

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

Introduzione

Obiettivo: realizzazione di un sito web per uno studio di

produzioni audiovisivi.

Richieste del cliente:

-adattamento automatico del sito ad ogni dispositivo

-layout semplice

-valorizzazione del prodotto(video)

L’importanza di avere un sito che si adatti ad ogni dispositivo

-Innovazione tecnologica rapida

-Navigazione attraverso dispositivi mobile sempre più

frequente

-Gli algoritmi Google privilegiano i siti Mobile Friendly

Come adeguarsi?

Le possibilità sono due:

1.Responsive Design:

-un solo sito per più dispositivi

2.Versione Mobile del sito:

-sito mobile e Desktop distinti

-indirizzo delle pagine e codice html differenti

Soluzione adottata e motivi della scelta

Soluzione adottata: RESPONSIVE DESIGN

Motivi della scelta:

-Google preferisce i siti responsive

-contenuti su un solo indirizzo più fruibili e condivisibili

dagli utenti

-gestione del sito più semplice

Tool utilizzato: Bootstrap

Che cos’è Boostrap?

Bootstrap è un framework front-end per lo sviluppo di

siti/applicazioni web responsive.

Responsive: il sito si adatta automaticamente ad ogni

dispositivo(PC,smartphone,tablet,..) su cui

viene visualizzato.

Framework front-end

Kit di progettazione che permette di avviare un progetto

in modo rapido.

Consente di configurare l’interfaccia di un sito:

-tipografia

-navigazione

-interazioni Javascript

-ecc.

Caratteristiche di un framework front-end

Un framework front-end deve fornire:

-le basi per un layout a griglia

-CSS strutturato per la formattazione dei principali

elementi dell’interfaccia attraverso classi standardizzate

-una serie di componenti Javascript

-deve essere responsive

Bootstrap soddisfa tutte queste caratteristiche

Cosa NON è Boostrap

Bootstrap non deve essere visto come la soluzione

definitiva in fatto di realizzazione di un sito.

Bootstrap deve essere considerato un tool per la fase di

avvio di un progetto.

-Non prevede linguaggi di programmazione server side né

database.

Perché Bootstrap?

Altri framework front-end:

-CSS Pure

-Foundation

-ecc..

• Bootstrap gode di grande supporto da parte della community dei sviluppatori web.

• Documentazione ufficiale chiara.

Gliphicons

Bootstrap include un set di icone di Glyphicons.

-Si possono usare in modo semplice scrivendo ad esempio:

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

Richiedono una classe base e una individuale.

Supporto dei browser

Bootstrap supporta le ultime versioni di:

• Chrome

• Safari

• Firefox

• Opera

• Internet Explorer

-IE8 ha bisogno dello script Respond.js

-IE7 e Firefox 3.6 sono abbandonate al loro destino

Conclusioni

Studi preliminari per la realizzazione del progetto:

• HTML5

• CSS3

• Javascript

• Less

Studi ausiliari: tecniche SEO

Propositi futuri: rendere il sito multilingua utilizzando PHP

www.claudiopolotto.com