il responsive web design per le organizzazioni non profit (discussione)
DESCRIPTION
Tesi di laurea in Informatica, Università degli Studi di Milano-Bicocca, AA 2012-2013. Slide preparate per la discussione.TRANSCRIPT
![Page 1: Il Responsive Web Design per le organizzazioni non profit (Discussione)](https://reader033.vdocuments.mx/reader033/viewer/2022042700/5593045d1a28ab5d768b4660/html5/thumbnails/1.jpg)
Il responsive web design per le organizzazioni non profitFrancesco VITALE, matricola 726886Relatore: prof. Roberto POLILLOCorrelatore: prof. Flavio DE PAOLI
Corso di laurea in Informatica, A.A. 2012-2013, Università degli Studi di Milano-Bicocca
![Page 2: Il Responsive Web Design per le organizzazioni non profit (Discussione)](https://reader033.vdocuments.mx/reader033/viewer/2022042700/5593045d1a28ab5d768b4660/html5/thumbnails/2.jpg)
Proiezioni in milioni di unità (Canalys 2013)
Smartphone
700
1.400
2012 2016
+93%
Tablet
200
400
2012 2016
+233%
Il web mobileCome cambia il mercato di Internet
![Page 3: Il Responsive Web Design per le organizzazioni non profit (Discussione)](https://reader033.vdocuments.mx/reader033/viewer/2022042700/5593045d1a28ab5d768b4660/html5/thumbnails/3.jpg)
Percentuale sul totale di utenti Internet (On Device Research 2010)
Mobile-onlyUtenti che usano in prevalenza dispositivi mobile per accedere a Internet
Russia19%
USA25%
India59%
Sud Africa57%
Egitto70%
Cina30%
![Page 4: Il Responsive Web Design per le organizzazioni non profit (Discussione)](https://reader033.vdocuments.mx/reader033/viewer/2022042700/5593045d1a28ab5d768b4660/html5/thumbnails/4.jpg)
Strumenti: griglie fluide, immagini e media flessibili, media queries
Responsive Web DesignTecniche sperimentali per creare siti reattivi
![Page 5: Il Responsive Web Design per le organizzazioni non profit (Discussione)](https://reader033.vdocuments.mx/reader033/viewer/2022042700/5593045d1a28ab5d768b4660/html5/thumbnails/5.jpg)
✤ Studiare lo stato dell’arte del responsive web design
✤ Individuare pattern e fattori critici in ambito non profit
✤ Sintetizzare alcune linee guida per creare siti responsive in ambito non profit
Obiettivi del progetto
![Page 6: Il Responsive Web Design per le organizzazioni non profit (Discussione)](https://reader033.vdocuments.mx/reader033/viewer/2022042700/5593045d1a28ab5d768b4660/html5/thumbnails/6.jpg)
✤ Analisi di casi di studio
✤ Catalogazione di pattern
✤ Prototipo HTML: WordPress + Foundation
Sviluppo del lavoro
![Page 7: Il Responsive Web Design per le organizzazioni non profit (Discussione)](https://reader033.vdocuments.mx/reader033/viewer/2022042700/5593045d1a28ab5d768b4660/html5/thumbnails/7.jpg)
✤ WWF
✤ Barack Obama
✤ JDRF
✤ Malaria No More
✤ Boot Campaign
✤ Unicef Svezia
Casi di studio
![Page 8: Il Responsive Web Design per le organizzazioni non profit (Discussione)](https://reader033.vdocuments.mx/reader033/viewer/2022042700/5593045d1a28ab5d768b4660/html5/thumbnails/8.jpg)
Alcuni pattern (in ordine orario): menu a comparsa con griglia, menu a comparsa, menu con icone, menu ancora
Come adattare il menu principale di navigazione
Pattern di navigazione
![Page 9: Il Responsive Web Design per le organizzazioni non profit (Discussione)](https://reader033.vdocuments.mx/reader033/viewer/2022042700/5593045d1a28ab5d768b4660/html5/thumbnails/9.jpg)
Pattern (in ordine orario): layout fluido, layout column drop, layout off canvas, layout shifter
Come adattare il layout delle pagine
Pattern di layout
![Page 10: Il Responsive Web Design per le organizzazioni non profit (Discussione)](https://reader033.vdocuments.mx/reader033/viewer/2022042700/5593045d1a28ab5d768b4660/html5/thumbnails/10.jpg)
✤ Organizzazioni estere, medio-grandi
✤ Struttura: “chi siamo”, “cosa facciamo”, “cosa puoi fare tu”
✤ Layout fluidi, menu a comparsa
✤ Prestazioni non eccellenti
✤ Problemi: donazioni, immagini
Stato dell’arte
![Page 11: Il Responsive Web Design per le organizzazioni non profit (Discussione)](https://reader033.vdocuments.mx/reader033/viewer/2022042700/5593045d1a28ab5d768b4660/html5/thumbnails/11.jpg)
Layout fluido sviluppato su più colonne
Contenuti in primo piano + contenuti dinamici (foto, video, eventi)
Il prototipo: homepage
![Page 12: Il Responsive Web Design per le organizzazioni non profit (Discussione)](https://reader033.vdocuments.mx/reader033/viewer/2022042700/5593045d1a28ab5d768b4660/html5/thumbnails/12.jpg)
Menu a comparsa, a due livelli
Chi siamo, dove siamo, cosa facciamo, cosa puoi fare tu, sostienici, novità
Il prototipo: navigazione
![Page 13: Il Responsive Web Design per le organizzazioni non profit (Discussione)](https://reader033.vdocuments.mx/reader033/viewer/2022042700/5593045d1a28ab5d768b4660/html5/thumbnails/13.jpg)
Tipi di input: email, tel, number, url, range, date, time, color, ecc.
I nuovi form di HTML5
Il prototipo: donazioni
![Page 14: Il Responsive Web Design per le organizzazioni non profit (Discussione)](https://reader033.vdocuments.mx/reader033/viewer/2022042700/5593045d1a28ab5d768b4660/html5/thumbnails/14.jpg)
Tipi di input: email, tel, number, url, range, date, time, color, ecc.
I nuovi form di HTML5
Il prototipo: donazioni
![Page 15: Il Responsive Web Design per le organizzazioni non profit (Discussione)](https://reader033.vdocuments.mx/reader033/viewer/2022042700/5593045d1a28ab5d768b4660/html5/thumbnails/15.jpg)
✤ Linee guida sul responsive web design
✤ Prototipo flessibile e veloce
✤ Modello di sviluppo flessibile
Risultati
![Page 16: Il Responsive Web Design per le organizzazioni non profit (Discussione)](https://reader033.vdocuments.mx/reader033/viewer/2022042700/5593045d1a28ab5d768b4660/html5/thumbnails/16.jpg)
✤ Semplificazione dell’esperienza utente
✤ Evoluzione di HTML5 e CSS
✤ API per i contenuti
Conclusioni e sviluppi futuri
![Page 17: Il Responsive Web Design per le organizzazioni non profit (Discussione)](https://reader033.vdocuments.mx/reader033/viewer/2022042700/5593045d1a28ab5d768b4660/html5/thumbnails/17.jpg)
Grazie
Immagini: Free PSD Files (3), John Polacek (4), Luke Wroblewski (9), Wikimedia (16)
![Page 18: Il Responsive Web Design per le organizzazioni non profit (Discussione)](https://reader033.vdocuments.mx/reader033/viewer/2022042700/5593045d1a28ab5d768b4660/html5/thumbnails/18.jpg)
Domande
![Page 19: Il Responsive Web Design per le organizzazioni non profit (Discussione)](https://reader033.vdocuments.mx/reader033/viewer/2022042700/5593045d1a28ab5d768b4660/html5/thumbnails/19.jpg)
✤ Esperienza utente unica e distribuita (no curva di apprendimento)
✤ Un unico sito da aggiornare e modificare
✤ Indipendenza da piattaforme di terze parti
✤ Flessibilità, velocità, semplicità
✤ Un sito pronto per i dispositivi futuri (se ben fatto)
Perché il responsive web design
![Page 20: Il Responsive Web Design per le organizzazioni non profit (Discussione)](https://reader033.vdocuments.mx/reader033/viewer/2022042700/5593045d1a28ab5d768b4660/html5/thumbnails/20.jpg)
Specifica di CSS3
Le media queries
@media screen and (max-width:400px) {.pippo { width: 80%; }
}@media screen and (min-resolution:300dpi) {
.pluto { background: url(http://sito.com/hq.jpg);
}}
Parametri: width, height, resolution, orientation, aspect ratio, color, ecc.
![Page 21: Il Responsive Web Design per le organizzazioni non profit (Discussione)](https://reader033.vdocuments.mx/reader033/viewer/2022042700/5593045d1a28ab5d768b4660/html5/thumbnails/21.jpg)
Il web mobile non esiste
Web unico
Web unico vuol dire fornire le stesse informazioni e gli stessi servizi agli utenti, indipendentemente dal dispositivo che stanno usando, nei limiti ragionevoli. Tuttavia, non vuol dire che le stesse informazioni sono rappresentate nello stesso identico modo in dispositivi diversi.
Definizione del W3C
“ ”
![Page 22: Il Responsive Web Design per le organizzazioni non profit (Discussione)](https://reader033.vdocuments.mx/reader033/viewer/2022042700/5593045d1a28ab5d768b4660/html5/thumbnails/22.jpg)
✤ Donazioni
✤ Immagini responsive
✤ Codice JavaScript
Fattori critici
![Page 23: Il Responsive Web Design per le organizzazioni non profit (Discussione)](https://reader033.vdocuments.mx/reader033/viewer/2022042700/5593045d1a28ab5d768b4660/html5/thumbnails/23.jpg)
Bozza in HTML5
L’elemento <picture>
Immagini responsive
<picture width="500" height="500"><source media="(min-width: 45em)" src="large.jpg"> <source media="(min-width: 18em)" src="med.jpg"> <source src="small.jpg"><img src="small.jpg" alt="Alt text"><p>Accessible text</p>
</picture>
![Page 24: Il Responsive Web Design per le organizzazioni non profit (Discussione)](https://reader033.vdocuments.mx/reader033/viewer/2022042700/5593045d1a28ab5d768b4660/html5/thumbnails/24.jpg)
PB Responsive Images = SLIR (Smart Lencioni Image Resizer) + HTML
Una tecnica ibrida client-server in WordPress
Immagini responsive
../w300/img.jpg
15 KB
../w450/img.jpg
26 KB
../w700/img.jpg
59 KB
File originale: 796 KB
![Page 25: Il Responsive Web Design per le organizzazioni non profit (Discussione)](https://reader033.vdocuments.mx/reader033/viewer/2022042700/5593045d1a28ab5d768b4660/html5/thumbnails/25.jpg)
Strumenti: Conditional Tag e formati dei post in WordPress
Ottimizzare le prestazioni: le librerie JavaScript sono caricate solo quando necessario
Conditional JavaScript
function conditional_script_loading() { if ( has_post_format( 'gallery' ) ) {
...}
}add_action('wp_enqueue_scripts', 'conditional_script_loading');
- 40% KB