Upload
davide-polotto
View
587
Download
4
Embed Size (px)
Citation preview
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