SlideShare a Scribd company logo
1 of 39
Download to read offline
Edizione 2013-14
Università degli Studi di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione
Corso di Strumenti e applicazioni del Web
6. Il browser
Roberto Polillo
Il browser
 E' lo strumento base per accedere al Web
 to browse: curiosare, sfogliare, dare una scorsa
 E' una macchina complessa, soggetta a continua
evoluzione
 Il progenitore: World Wide Web (poi chiamato Nexus) di
Tim Berners-Lee ( 1991)
 Ne esistono diversi, in continua competizione per
incrementare le loro quote di mercato
 L'esito delle "guerre dei browser" è fondamentale per il
posizionamento sul mercato di Internet
R.Polillo - Marzo 2014
4
Un rendering complesso…
R.Polillo - Marzo 2014
5
link
RENDERING
BROWSER
Architettura di un browser
R.Polillo - Marzo 2014
6
Da: Grosskurth, Godfrey, Architecture and evolution
of the modern web browser (in rete)
Browser
Architettura di un browser
R.Polillo - Marzo 2014
7
Da: Grosskurth, Godfrey, Architecture and evolution
of the modern web browser (in rete)
Store/retrieve
bookmarks,
cookies,
settings, …
Navigation
support
HTTP handling
Visual
representation
of a given URI
Toolbars, menu,
…
Mosaic
 Sviluppato a partire dalla fine 1992 al NCSA (National Center for
Supercomputing Applications) dell'Università dell'Illinois a Urbana-
Champaign, influenzò profondamente i browser successivi
 Marc Andreessen, il capo progetto, fondò poi Netscape
R.Polillo - Marzo 2014
8
Marc Andreesen (1971 -…)
R.Polillo - Marzo 2014
9
Andreesen – Horowitz: venture capital
con partecipazioni in Ning, Facebook,
Foursquare, Twitter, Skype, Pinterest,
Groupon, Zynga, ….
Browser timeline
R.Polillo - Marzo 2014
10
200
8
Chrome
Da:Grosskurth,Godfrey,Architectureandevolution
ofthemodernwebbrowser(inrete)
I
browser
war
II
broser
war
III
browser
war
Firefox
 Browser gratuito e open-source
 Sviluppato dalla Mozilla Foundation, dal 2004
 Versioni mobili da 2010-2011
 Ciclo di rilascio molto accelerato:
Nightly → Aurora → Beta
 Oggi: release 27
R.Polillo - Marzo 2014
13
Usage share, oggi
 La % di utenti che usano un certo browser
 A febbraio 2014 (fonte StatCounter, non mobile):
- Chrome: 43.9%
- Explorer: 22.6%
- Firefox: 19,2%
- Safari: 9.7%
- Altri: 4,6%
 NB: Le varie metodiche di misura determinano risultati
molto diversi: conviene utilizzare varie fonti e calcolarne
la mediana
 Fonte:
http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
R.Polillo - Marzo 2014
14
88.6
%
Browser user share (Italia, non
mobile)
R.Polillo - Marzo 2014
15
Fonte: StatCounter
Mobile browser (ultimi 5 anni)
R.Polillo - Marzo 2014
16
Fonte: StatCounter
Conformità agli standard
 La rapida evoluzione delle tecnologie Web (es.
HTML, XML, scripting languages), e la guerra dei
browser hanno generato una notevole varietà di
comportamenti nei browser
 Il W3C emette e aggiorna gli standard del Web
("Recommendations")
 Questi dovrebbero essere seguiti dagli sviluppatori
dei siti e dei browser, ma…
R.Polillo - Marzo 2014
17
HTML e CSS: evoluzione
R.Polillo - Marzo 2014
18
http://www.jasonspeaking.com/index.php/2010/04/the-evolution-of-html-css/
HTML5
CSS4 (?)
Standards: a moving target
R.Polillo - Marzo 2014
19
t
Definizione
della nuova
tecnologia
Standard 0 Standard 1
draft
draft
deprecated
Standard 2
features
stric
t
transition
al
prodotti
Test di conformità / compatibilità
Test di conformità dei browser:
Un servizio online gratuito per verificare la conformità dei browser con
HTML5: Provatelo sul vostro browser!
http://html5test.com/index.html
Test di compatibilità di un sito:
Vari servizi per vedere come una pagina Web viene visualizzata dai
diversi browser (in simulazione)
R.Polillo - Marzo 2014
20
Interfaccia utente: basics
R.Polillo - Marzo 2014
21
URL
Pagin
a web
Navigazion
e
•Indietro
•Avanti
•Refresh
•History
Mosaic
R.Polillo - Marzo 2014
22
Interfaccia utente
Necessità di operare contemporaneamente su più
pagine
R.Polillo - Marzo 2014
23
Modello desktop:
più browser attivi
in finestre differenti
(ogni finestra
ha una storia
separata)
Nuovo modello:
il browser gestisce
più
finestre
(con una cronologia
comune)
R.Polillo - Marzo 201424
Evoluzione del browser
R.Polillo - Marzo 2014
25
Mosai
c
Explorer
Firefox
Safari
Tabbed
browsin
g
Evoluzione del browser
R.Polillo - Marzo 2014
26
Mosai
c
Explorer
Firefox
Safari
Tabbed
browsin
g
Richiamo a
motore di
ricerca
Tabbed browsing: esempi
R.Polillo - Marzo 2014
27
Firefox
3.6
Explorer 8.0
Evoluzione del browser
R.Polillo - Marzo 2014
28
Mosai
c
Explorer
Firefox
Safari
Tabbed
browsin
g
Chrome
detac
h
Chrome
R.Polillo - Marzo 2014
29
http://www.youtube.com/watch?v=WoynSZNQxJs&feature=related (in
italiano)
Multi-tasking
R.Polillo - Marzo 2014
30
Il browser diviente una sorta di sistema operativo
(vedi Google Chrome OS – Chromium)
Processi separati, ma
con cronologia comune
Google Chrome Omnibox
31
Online browser support
32
HTTP
internet
Browser
Web
server
HTML
HTML
GOOGLE
Servizi online
al browser
Online browser support
33
HTTP
internet
Browser
Web
server
HTML
HTML
GOOGLE
Servizi online
al browser
Info inviate (se non disattivate):
 Info typed in omnibox → search engine
 Browser settings → google personal account
(preferences, bookmarks, stored passwords, …)
 Testi da tradurre → google translate
 Usage statistics → google databases
http://www.google.com/chrome/intl/en/privacy.html
Privacy
?
Chrome: impostazioni di sincronizzazione
R.Polillo - Marzo 2014
34
Bookmarks
 Bookmarks (preferiti, favorites, hot lists,…):
URL memorizzati nel browser per rapido accesso
Vengono memorizzati localmente
(se non sincronizzati), a meno che…
 Social bookmarking: servizi online, mettono in
comune bookmarks di più utenti
 Es.: www.delicious.com
Fondato 2003, comprato da Yahoo! 2005, venduto
ai fondatori di YouTube 2011 (Avos)
R.Polillo - Marzo 2014
35
Social bookmarking services
36
HTTP
internet
Browser
Web
server
HTML
HTML
GOOGLE
Servizi online
al browser
Browser
Boomarks db
www.delicious.com
www.delicious.com
37
 Inizialmente www.del.icio.us
 Il sito che ha inventato il social bookmarking, fondato nel
2003, acquisito da Yahoo! nel 2005, venduto ai fondatori
di YouTube nel 2011 (Avos)
 Permette di salvare, taggare e condividere bookmarks
(che per default sono pubblici), gratuitamente
 Bottoni per bookmarking installabili sul proprio browser
 Accesso rapido: www.delicious.com/tag/<tag>
 http://en.wikipedia.org/wiki/Del.icio.us
R.Polillo - Marzo 2014
Estensioni al browser
 Componenti aggiuntivi che possono essere
installati sul browser per fornire specifiche
funzionalità (chiamati anche "add-on", "plugin",…)
 Realizzati da terze parti, che utilizzano le interfacce
programmative (API) del browser
 Esempi:
 Chrome: https://chrome.google.com/webstore?hl=it
 Firefox: https://addons.mozilla.org/it/firefox/
R.Polillo - Marzo 2014
38
Estensioni: esempi
 Yoono (Firefox)
Interazione con Facebook, Twitter e Linkedin durante la navigazione
http://www.youtube.com/watch?v=BLPTQULcC6o (1:34)
 ImTranslator (Firefox)
Traduzione in tempo reale nella lingua scelta (0:44)
http://www.youtube.com/watch?v=O436cvXPnzU
 InvisibleHand (Firefox)
Propone il prezzo migliore di un prodotto/servizio selezionato
(1:26)
http://www.youtube.com/watch?v=ThFZeRYf_J8
 GooEdit (Chrome)
modifica un'immagine su una pagina Web, la salva e la twitta
http://www.youtube.com/watch?v=as1JdLpbBHc (1:06)
Thks A.Testa, V.Gennari, S.Antognazza per le demo video http://bit.ly/YEfY4L
R.Polillo - Marzo 2014
39
Esensioni: Liquid
(Precedentemente: Hyperwords)
http://www.liquid.info (video 2'19")
R.Polillo - Marzo 2014
40
Privacy ?
R.Polillo - Marzo 2014
41
Servizi attivati
dalle
estensioni del
browser
Sito
visitato
Internet
Sintesi della lezione
 I browser sono macchine complesse
 Avere il monopolio dei browser dà un forte
vantaggio competitivo sul mercato Internet
 I browser inglobano funzioni degli OS
 Le API pubbliche ne fanno macchine estensibili
 Supporto online delle funzioni del browser e delle
estensioni: il problema della privacy
R.Polillo - Marzo 2014
42
Lavoro individuale
 È ora di scegliere consapevolmente il vostro browser. "Esplorate"
con attenzione quello che usate, e confrontatelo con una alternativa
possibile (attenzione: usate l'ultima versione!), sperimentando
anche le funzioni nascoste e verificando la compatibilità HTML5
(es. con http://html5test.com/index.html
 Quando lo avete scelto, cercate le estensioni per voi più interessanti,
installatele e provatele
 Verificate il livello di privacy che avete ottenuto
 Confrontate le funzionalità del browser scelto con la sua versione
mobile
 PS Questo lavoro è molto importante, dedicate il tempo necessario
R.Polillo - Marzo 2014
43

More Related Content

What's hot

19. Le organnizzazioni sul web e segg
19. Le organnizzazioni sul web e segg19. Le organnizzazioni sul web e segg
19. Le organnizzazioni sul web e seggRoberto Polillo
 
17. Web feed e aggregatori
17. Web feed e aggregatori17. Web feed e aggregatori
17. Web feed e aggregatoriRoberto Polillo
 
22. Conclusioni del corso
22. Conclusioni del corso22. Conclusioni del corso
22. Conclusioni del corsoRoberto Polillo
 
Slides delle lezioni del corso di Strumenti e applicazioni del Web per il cor...
Slides delle lezioni del corso di Strumenti e applicazioni del Web per il cor...Slides delle lezioni del corso di Strumenti e applicazioni del Web per il cor...
Slides delle lezioni del corso di Strumenti e applicazioni del Web per il cor...Roberto Polillo
 
10. Ricercare nel web (Parte II)
10. Ricercare nel web (Parte II)10. Ricercare nel web (Parte II)
10. Ricercare nel web (Parte II)Roberto Polillo
 
Editoria e industria dei media di fronte alla rivoluzione digitale
Editoria e industria dei media di fronte alla rivoluzione digitaleEditoria e industria dei media di fronte alla rivoluzione digitale
Editoria e industria dei media di fronte alla rivoluzione digitaleRoberto Polillo
 
8. Valutare la usabilita'
8. Valutare la usabilita'8. Valutare la usabilita'
8. Valutare la usabilita'Roberto Polillo
 
9. Ricercare nel web (Parte I)
9. Ricercare nel web (Parte I)9. Ricercare nel web (Parte I)
9. Ricercare nel web (Parte I)Roberto Polillo
 
15. Ancora sulla grafica
15. Ancora sulla grafica15. Ancora sulla grafica
15. Ancora sulla graficaRoberto Polillo
 
Collaborative Editing
Collaborative EditingCollaborative Editing
Collaborative EditingLorenzo Spini
 
20. Principi e linee guida (I)
20. Principi e linee guida (I)20. Principi e linee guida (I)
20. Principi e linee guida (I)Roberto Polillo
 
5. Introduzione al web (ii)
5. Introduzione al web (ii)5. Introduzione al web (ii)
5. Introduzione al web (ii)Roberto Polillo
 
9. Come trovare l'informazione (I)
9. Come trovare l'informazione (I)9. Come trovare l'informazione (I)
9. Come trovare l'informazione (I)Roberto Polillo
 
13. Content sharing sites (i)
13. Content sharing sites (i)13. Content sharing sites (i)
13. Content sharing sites (i)Roberto Polillo
 
15. La forma breve e il microblogging
15. La forma  breve e il microblogging15. La forma  breve e il microblogging
15. La forma breve e il microbloggingRoberto Polillo
 

What's hot (20)

19. Le organnizzazioni sul web e segg
19. Le organnizzazioni sul web e segg19. Le organnizzazioni sul web e segg
19. Le organnizzazioni sul web e segg
 
9. Mobile design
9. Mobile design9. Mobile design
9. Mobile design
 
8. Il vostro blog
8. Il vostro blog8. Il vostro blog
8. Il vostro blog
 
17. Web feed e aggregatori
17. Web feed e aggregatori17. Web feed e aggregatori
17. Web feed e aggregatori
 
22. Conclusioni del corso
22. Conclusioni del corso22. Conclusioni del corso
22. Conclusioni del corso
 
Slides delle lezioni del corso di Strumenti e applicazioni del Web per il cor...
Slides delle lezioni del corso di Strumenti e applicazioni del Web per il cor...Slides delle lezioni del corso di Strumenti e applicazioni del Web per il cor...
Slides delle lezioni del corso di Strumenti e applicazioni del Web per il cor...
 
10. Ricercare nel web (Parte II)
10. Ricercare nel web (Parte II)10. Ricercare nel web (Parte II)
10. Ricercare nel web (Parte II)
 
Editoria e industria dei media di fronte alla rivoluzione digitale
Editoria e industria dei media di fronte alla rivoluzione digitaleEditoria e industria dei media di fronte alla rivoluzione digitale
Editoria e industria dei media di fronte alla rivoluzione digitale
 
8. Valutare la usabilita'
8. Valutare la usabilita'8. Valutare la usabilita'
8. Valutare la usabilita'
 
9. Ricercare nel web (Parte I)
9. Ricercare nel web (Parte I)9. Ricercare nel web (Parte I)
9. Ricercare nel web (Parte I)
 
15. Ancora sulla grafica
15. Ancora sulla grafica15. Ancora sulla grafica
15. Ancora sulla grafica
 
12. Mobile web
12. Mobile web12. Mobile web
12. Mobile web
 
9. Mobile design
9. Mobile design9. Mobile design
9. Mobile design
 
Collaborative Editing
Collaborative EditingCollaborative Editing
Collaborative Editing
 
20. Principi e linee guida (I)
20. Principi e linee guida (I)20. Principi e linee guida (I)
20. Principi e linee guida (I)
 
6. Il browser
6. Il browser6. Il browser
6. Il browser
 
5. Introduzione al web (ii)
5. Introduzione al web (ii)5. Introduzione al web (ii)
5. Introduzione al web (ii)
 
9. Come trovare l'informazione (I)
9. Come trovare l'informazione (I)9. Come trovare l'informazione (I)
9. Come trovare l'informazione (I)
 
13. Content sharing sites (i)
13. Content sharing sites (i)13. Content sharing sites (i)
13. Content sharing sites (i)
 
15. La forma breve e il microblogging
15. La forma  breve e il microblogging15. La forma  breve e il microblogging
15. La forma breve e il microblogging
 

Viewers also liked

5. Pprogettare per l'utente (i)
5. Pprogettare per l'utente (i)5. Pprogettare per l'utente (i)
5. Pprogettare per l'utente (i)Roberto Polillo
 
21. Evoluzione dei paradigmi di interazione (III)
21. Evoluzione dei paradigmi di interazione (III) 21. Evoluzione dei paradigmi di interazione (III)
21. Evoluzione dei paradigmi di interazione (III) Roberto Polillo
 
Diventare ricchi con Python
Diventare ricchi con PythonDiventare ricchi con Python
Diventare ricchi con Pythonantonio.cangiano
 
11. Conoscere l'utente (ii): la visione
11. Conoscere l'utente (ii): la visione11. Conoscere l'utente (ii): la visione
11. Conoscere l'utente (ii): la visioneRoberto Polillo
 
Come diventare data scientist - Paolo Pellegrini
Come diventare data scientist - Paolo PellegriniCome diventare data scientist - Paolo Pellegrini
Come diventare data scientist - Paolo PellegriniDonatella Cambosu
 
5. Introduzione al web (Parte II)
5. Introduzione al web (Parte II)5. Introduzione al web (Parte II)
5. Introduzione al web (Parte II)Roberto Polillo
 
3. L' ecosistema di Internet e la neutralità della rete
3. L' ecosistema di Internet e la neutralità della rete3. L' ecosistema di Internet e la neutralità della rete
3. L' ecosistema di Internet e la neutralità della reteRoberto Polillo
 
4. Introduzione al web (Parte I)
4. Introduzione al web (Parte I)4. Introduzione al web (Parte I)
4. Introduzione al web (Parte I)Roberto Polillo
 
8. Il vostro blog: come farlo e come farlo bene
8. Il vostro blog: come farlo e come farlo bene  8. Il vostro blog: come farlo e come farlo bene
8. Il vostro blog: come farlo e come farlo bene Roberto Polillo
 
11. Evoluzione del web: dal Web 1.0 al Web 2.0
11. Evoluzione del web: dal Web 1.0 al Web 2.011. Evoluzione del web: dal Web 1.0 al Web 2.0
11. Evoluzione del web: dal Web 1.0 al Web 2.0Roberto Polillo
 
Corso completo di web marketing (1108 slides), di Roberto Ghislandi con contr...
Corso completo di web marketing (1108 slides), di Roberto Ghislandi con contr...Corso completo di web marketing (1108 slides), di Roberto Ghislandi con contr...
Corso completo di web marketing (1108 slides), di Roberto Ghislandi con contr...Web Marketing Garden
 
14. La forma breve e il microblogging
14. La forma breve e il microblogging14. La forma breve e il microblogging
14. La forma breve e il microbloggingRoberto Polillo
 
Facile da usare - Una moderna introduzione all'ingegneria dell'usabilità
Facile da usare - Una moderna introduzione all'ingegneria dell'usabilitàFacile da usare - Una moderna introduzione all'ingegneria dell'usabilità
Facile da usare - Una moderna introduzione all'ingegneria dell'usabilitàRoberto Polillo
 
iPhone Apps Marketing
iPhone Apps MarketingiPhone Apps Marketing
iPhone Apps MarketingDML Srl
 
17. Principi e linee guida (ii)
17. Principi e linee guida (ii)17. Principi e linee guida (ii)
17. Principi e linee guida (ii)Roberto Polillo
 

Viewers also liked (20)

5. Pprogettare per l'utente (i)
5. Pprogettare per l'utente (i)5. Pprogettare per l'utente (i)
5. Pprogettare per l'utente (i)
 
21. Evoluzione dei paradigmi di interazione (III)
21. Evoluzione dei paradigmi di interazione (III) 21. Evoluzione dei paradigmi di interazione (III)
21. Evoluzione dei paradigmi di interazione (III)
 
Diventare ricchi con Python
Diventare ricchi con PythonDiventare ricchi con Python
Diventare ricchi con Python
 
4. Usabilita
4. Usabilita4. Usabilita
4. Usabilita
 
11. Conoscere l'utente (ii): la visione
11. Conoscere l'utente (ii): la visione11. Conoscere l'utente (ii): la visione
11. Conoscere l'utente (ii): la visione
 
Come diventare data scientist - Paolo Pellegrini
Come diventare data scientist - Paolo PellegriniCome diventare data scientist - Paolo Pellegrini
Come diventare data scientist - Paolo Pellegrini
 
5. Introduzione al web (Parte II)
5. Introduzione al web (Parte II)5. Introduzione al web (Parte II)
5. Introduzione al web (Parte II)
 
3. L' ecosistema di Internet e la neutralità della rete
3. L' ecosistema di Internet e la neutralità della rete3. L' ecosistema di Internet e la neutralità della rete
3. L' ecosistema di Internet e la neutralità della rete
 
13. I blog
13. I blog13. I blog
13. I blog
 
4. Introduzione al web (Parte I)
4. Introduzione al web (Parte I)4. Introduzione al web (Parte I)
4. Introduzione al web (Parte I)
 
8. Il vostro blog: come farlo e come farlo bene
8. Il vostro blog: come farlo e come farlo bene  8. Il vostro blog: come farlo e come farlo bene
8. Il vostro blog: come farlo e come farlo bene
 
11. Evoluzione del web: dal Web 1.0 al Web 2.0
11. Evoluzione del web: dal Web 1.0 al Web 2.011. Evoluzione del web: dal Web 1.0 al Web 2.0
11. Evoluzione del web: dal Web 1.0 al Web 2.0
 
Corso completo di web marketing (1108 slides), di Roberto Ghislandi con contr...
Corso completo di web marketing (1108 slides), di Roberto Ghislandi con contr...Corso completo di web marketing (1108 slides), di Roberto Ghislandi con contr...
Corso completo di web marketing (1108 slides), di Roberto Ghislandi con contr...
 
14. La forma breve e il microblogging
14. La forma breve e il microblogging14. La forma breve e il microblogging
14. La forma breve e il microblogging
 
Come si costruisce un piano di marketing
Come si costruisce un piano di marketingCome si costruisce un piano di marketing
Come si costruisce un piano di marketing
 
Facile da usare - Una moderna introduzione all'ingegneria dell'usabilità
Facile da usare - Una moderna introduzione all'ingegneria dell'usabilitàFacile da usare - Una moderna introduzione all'ingegneria dell'usabilità
Facile da usare - Una moderna introduzione all'ingegneria dell'usabilità
 
3. Il progetto di esame
3. Il progetto di esame3. Il progetto di esame
3. Il progetto di esame
 
Article Marketig
Article MarketigArticle Marketig
Article Marketig
 
iPhone Apps Marketing
iPhone Apps MarketingiPhone Apps Marketing
iPhone Apps Marketing
 
17. Principi e linee guida (ii)
17. Principi e linee guida (ii)17. Principi e linee guida (ii)
17. Principi e linee guida (ii)
 

Similar to 6. Il browser

Open Source per Donne / Girl Geek
Open Source per Donne / Girl GeekOpen Source per Donne / Girl Geek
Open Source per Donne / Girl GeekSara Rosso
 
11. Evoluzione del Web (I)
11. Evoluzione del Web (I)11. Evoluzione del Web (I)
11. Evoluzione del Web (I)Roberto Polillo
 
18. Siti di condivisione dei contenuti
18. Siti di condivisione dei contenuti18. Siti di condivisione dei contenuti
18. Siti di condivisione dei contenutiRoberto Polillo
 
7. Applicazioni web e CMS
7. Applicazioni web e CMS7. Applicazioni web e CMS
7. Applicazioni web e CMSRoberto Polillo
 
Lezione 4: Web feed e aggregatori
Lezione 4: Web feed e aggregatoriLezione 4: Web feed e aggregatori
Lezione 4: Web feed e aggregatoriRoberto Polillo
 
WEB 2.0, COMUNICAZIONE, MARKETING, ENTERPRISE 2.0 NEL NUOVO INTERNET
WEB 2.0, COMUNICAZIONE, MARKETING, ENTERPRISE 2.0 NEL NUOVO INTERNETWEB 2.0, COMUNICAZIONE, MARKETING, ENTERPRISE 2.0 NEL NUOVO INTERNET
WEB 2.0, COMUNICAZIONE, MARKETING, ENTERPRISE 2.0 NEL NUOVO INTERNETCommVill
 
17. Web feed e aggregatori
17. Web feed e aggregatori17. Web feed e aggregatori
17. Web feed e aggregatoriRoberto Polillo
 
Corso Web 2.0: Web feed e aggregatori
Corso Web 2.0: Web feed e aggregatoriCorso Web 2.0: Web feed e aggregatori
Corso Web 2.0: Web feed e aggregatoriRoberto Polillo
 

Similar to 6. Il browser (20)

7. Il browser
7. Il browser7. Il browser
7. Il browser
 
4. I browser
4. I browser4. I browser
4. I browser
 
6 - Il browser - 17/18
6 - Il browser - 17/186 - Il browser - 17/18
6 - Il browser - 17/18
 
Il browser
Il browserIl browser
Il browser
 
8 - Il browser
8 - Il browser8 - Il browser
8 - Il browser
 
6 - Il browser - 16/17
6 - Il browser - 16/176 - Il browser - 16/17
6 - Il browser - 16/17
 
06 - Il browser
06 - Il browser06 - Il browser
06 - Il browser
 
Open Source e le Girl Geek
Open Source e le Girl GeekOpen Source e le Girl Geek
Open Source e le Girl Geek
 
Open Source per Donne / Girl Geek
Open Source per Donne / Girl GeekOpen Source per Donne / Girl Geek
Open Source per Donne / Girl Geek
 
11. Evoluzione del Web (I)
11. Evoluzione del Web (I)11. Evoluzione del Web (I)
11. Evoluzione del Web (I)
 
18. Siti di condivisione dei contenuti
18. Siti di condivisione dei contenuti18. Siti di condivisione dei contenuti
18. Siti di condivisione dei contenuti
 
7. Applicazioni web e CMS
7. Applicazioni web e CMS7. Applicazioni web e CMS
7. Applicazioni web e CMS
 
Web 2.0, comunicazione e marketing
Web 2.0, comunicazione e marketingWeb 2.0, comunicazione e marketing
Web 2.0, comunicazione e marketing
 
7. Mashup
7. Mashup7. Mashup
7. Mashup
 
Lezione 4: Web feed e aggregatori
Lezione 4: Web feed e aggregatoriLezione 4: Web feed e aggregatori
Lezione 4: Web feed e aggregatori
 
WEB 2.0, COMUNICAZIONE, MARKETING, ENTERPRISE 2.0 NEL NUOVO INTERNET
WEB 2.0, COMUNICAZIONE, MARKETING, ENTERPRISE 2.0 NEL NUOVO INTERNETWEB 2.0, COMUNICAZIONE, MARKETING, ENTERPRISE 2.0 NEL NUOVO INTERNET
WEB 2.0, COMUNICAZIONE, MARKETING, ENTERPRISE 2.0 NEL NUOVO INTERNET
 
Lezione 7: Mashup
Lezione 7: MashupLezione 7: Mashup
Lezione 7: Mashup
 
17. Web feed e aggregatori
17. Web feed e aggregatori17. Web feed e aggregatori
17. Web feed e aggregatori
 
3. Site builders 2.0
3. Site builders 2.03. Site builders 2.0
3. Site builders 2.0
 
Corso Web 2.0: Web feed e aggregatori
Corso Web 2.0: Web feed e aggregatoriCorso Web 2.0: Web feed e aggregatori
Corso Web 2.0: Web feed e aggregatori
 

More from Roberto Polillo

Future City, Ipotesi sulla città del futuro
Future City, Ipotesi sulla città del futuroFuture City, Ipotesi sulla città del futuro
Future City, Ipotesi sulla città del futuroRoberto Polillo
 
Teaching HCI to computing students: some considerations
Teaching HCI to computing students: some considerationsTeaching HCI to computing students: some considerations
Teaching HCI to computing students: some considerationsRoberto Polillo
 
ICT e sviluppo sociale: alcune riflessioni
ICT e sviluppo sociale: alcune riflessioniICT e sviluppo sociale: alcune riflessioni
ICT e sviluppo sociale: alcune riflessioniRoberto Polillo
 
21. Progettare per l'errore
21. Progettare per l'errore21. Progettare per l'errore
21. Progettare per l'erroreRoberto Polillo
 
20. Principi e linee guida (II)
20. Principi e linee guida (II)20. Principi e linee guida (II)
20. Principi e linee guida (II)Roberto Polillo
 
18. Paradigmi di interazione uomo macchina (III)
18. Paradigmi di interazione uomo macchina (III)18. Paradigmi di interazione uomo macchina (III)
18. Paradigmi di interazione uomo macchina (III)Roberto Polillo
 
16. Evoluzione dei paradigmi di interazione uomo macchina (I)
16. Evoluzione dei paradigmi di interazione uomo macchina (I)16. Evoluzione dei paradigmi di interazione uomo macchina (I)
16. Evoluzione dei paradigmi di interazione uomo macchina (I)Roberto Polillo
 
18. Content sharing sites
18. Content sharing sites18. Content sharing sites
18. Content sharing sitesRoberto Polillo
 
13. Conoscere l'utente: il sistema motorio
13. Conoscere l'utente: il sistema motorio13. Conoscere l'utente: il sistema motorio
13. Conoscere l'utente: il sistema motorioRoberto Polillo
 
13. Internet business models
13. Internet business models13. Internet business models
13. Internet business modelsRoberto Polillo
 
Internet and sustainable telemedicine: an introduction
Internet and sustainable telemedicine: an introductionInternet and sustainable telemedicine: an introduction
Internet and sustainable telemedicine: an introductionRoberto Polillo
 
12.Visione e progettazione grafica (I)
12.Visione e progettazione grafica (I)12.Visione e progettazione grafica (I)
12.Visione e progettazione grafica (I)Roberto Polillo
 
11. Conoscere l'utente (II)
11. Conoscere l'utente (II)11. Conoscere l'utente (II)
11. Conoscere l'utente (II)Roberto Polillo
 

More from Roberto Polillo (20)

Future City, Ipotesi sulla città del futuro
Future City, Ipotesi sulla città del futuroFuture City, Ipotesi sulla città del futuro
Future City, Ipotesi sulla città del futuro
 
Teaching HCI to computing students: some considerations
Teaching HCI to computing students: some considerationsTeaching HCI to computing students: some considerations
Teaching HCI to computing students: some considerations
 
Conclusioni del corso
Conclusioni del corsoConclusioni del corso
Conclusioni del corso
 
ICT e sviluppo sociale: alcune riflessioni
ICT e sviluppo sociale: alcune riflessioniICT e sviluppo sociale: alcune riflessioni
ICT e sviluppo sociale: alcune riflessioni
 
21. Progettare per l'errore
21. Progettare per l'errore21. Progettare per l'errore
21. Progettare per l'errore
 
20. Principi e linee guida (II)
20. Principi e linee guida (II)20. Principi e linee guida (II)
20. Principi e linee guida (II)
 
18. Paradigmi di interazione uomo macchina (III)
18. Paradigmi di interazione uomo macchina (III)18. Paradigmi di interazione uomo macchina (III)
18. Paradigmi di interazione uomo macchina (III)
 
Wikipedia
WikipediaWikipedia
Wikipedia
 
Open internet
Open internetOpen internet
Open internet
 
16. Evoluzione dei paradigmi di interazione uomo macchina (I)
16. Evoluzione dei paradigmi di interazione uomo macchina (I)16. Evoluzione dei paradigmi di interazione uomo macchina (I)
16. Evoluzione dei paradigmi di interazione uomo macchina (I)
 
20. Social networks
20. Social networks20. Social networks
20. Social networks
 
18. Content sharing sites
18. Content sharing sites18. Content sharing sites
18. Content sharing sites
 
16. Social media
16. Social media16. Social media
16. Social media
 
14. Progettare il testo
14. Progettare il testo14. Progettare il testo
14. Progettare il testo
 
13. Conoscere l'utente: il sistema motorio
13. Conoscere l'utente: il sistema motorio13. Conoscere l'utente: il sistema motorio
13. Conoscere l'utente: il sistema motorio
 
14. I blog
14. I blog14. I blog
14. I blog
 
13. Internet business models
13. Internet business models13. Internet business models
13. Internet business models
 
Internet and sustainable telemedicine: an introduction
Internet and sustainable telemedicine: an introductionInternet and sustainable telemedicine: an introduction
Internet and sustainable telemedicine: an introduction
 
12.Visione e progettazione grafica (I)
12.Visione e progettazione grafica (I)12.Visione e progettazione grafica (I)
12.Visione e progettazione grafica (I)
 
11. Conoscere l'utente (II)
11. Conoscere l'utente (II)11. Conoscere l'utente (II)
11. Conoscere l'utente (II)
 

Recently uploaded

25 ĐỀ THAM KHẢO THI TUYỂN SINH VÀO LỚP 10 THPT MÔN TIẾNG ANH NĂM HỌC 2024 - 2...
25 ĐỀ THAM KHẢO THI TUYỂN SINH VÀO LỚP 10 THPT MÔN TIẾNG ANH NĂM HỌC 2024 - 2...25 ĐỀ THAM KHẢO THI TUYỂN SINH VÀO LỚP 10 THPT MÔN TIẾNG ANH NĂM HỌC 2024 - 2...
25 ĐỀ THAM KHẢO THI TUYỂN SINH VÀO LỚP 10 THPT MÔN TIẾNG ANH NĂM HỌC 2024 - 2...Nguyen Thanh Tu Collection
 
15 Consoli Castellana Grotte - Lavorare per vivere.pdf
15 Consoli Castellana Grotte - Lavorare per vivere.pdf15 Consoli Castellana Grotte - Lavorare per vivere.pdf
15 Consoli Castellana Grotte - Lavorare per vivere.pdfdalpalcoscenicoallaprevenzione
 
AI nel mondo delle scuole. Formazione docente per creare un ponte con gli stu...
AI nel mondo delle scuole. Formazione docente per creare un ponte con gli stu...AI nel mondo delle scuole. Formazione docente per creare un ponte con gli stu...
AI nel mondo delle scuole. Formazione docente per creare un ponte con gli stu...Human Singularity
 
educazione civica storia Martina fellone.pptx
educazione civica storia Martina fellone.pptxeducazione civica storia Martina fellone.pptx
educazione civica storia Martina fellone.pptxPatrickVervenna1
 
BATTERIE A LITIO Martina Fellon 5F A.S. 23/24
BATTERIE A LITIO  Martina Fellon 5F A.S. 23/24BATTERIE A LITIO  Martina Fellon 5F A.S. 23/24
BATTERIE A LITIO Martina Fellon 5F A.S. 23/24PatrickVervenna1
 
1 Liceo Simone Morea Conversano - Ci vediamo stasera.pdf
1 Liceo Simone Morea Conversano - Ci vediamo stasera.pdf1 Liceo Simone Morea Conversano - Ci vediamo stasera.pdf
1 Liceo Simone Morea Conversano - Ci vediamo stasera.pdfdalpalcoscenicoallaprevenzione
 

Recently uploaded (11)

11 Modugno Conversano - Per chi resta.pdf
11 Modugno Conversano - Per chi resta.pdf11 Modugno Conversano - Per chi resta.pdf
11 Modugno Conversano - Per chi resta.pdf
 
25 ĐỀ THAM KHẢO THI TUYỂN SINH VÀO LỚP 10 THPT MÔN TIẾNG ANH NĂM HỌC 2024 - 2...
25 ĐỀ THAM KHẢO THI TUYỂN SINH VÀO LỚP 10 THPT MÔN TIẾNG ANH NĂM HỌC 2024 - 2...25 ĐỀ THAM KHẢO THI TUYỂN SINH VÀO LỚP 10 THPT MÔN TIẾNG ANH NĂM HỌC 2024 - 2...
25 ĐỀ THAM KHẢO THI TUYỂN SINH VÀO LỚP 10 THPT MÔN TIẾNG ANH NĂM HỌC 2024 - 2...
 
15 Consoli Castellana Grotte - Lavorare per vivere.pdf
15 Consoli Castellana Grotte - Lavorare per vivere.pdf15 Consoli Castellana Grotte - Lavorare per vivere.pdf
15 Consoli Castellana Grotte - Lavorare per vivere.pdf
 
AI nel mondo delle scuole. Formazione docente per creare un ponte con gli stu...
AI nel mondo delle scuole. Formazione docente per creare un ponte con gli stu...AI nel mondo delle scuole. Formazione docente per creare un ponte con gli stu...
AI nel mondo delle scuole. Formazione docente per creare un ponte con gli stu...
 
educazione civica storia Martina fellone.pptx
educazione civica storia Martina fellone.pptxeducazione civica storia Martina fellone.pptx
educazione civica storia Martina fellone.pptx
 
16 Calasso Lecce - Ricordi di lavoro.pdf
16 Calasso Lecce - Ricordi di lavoro.pdf16 Calasso Lecce - Ricordi di lavoro.pdf
16 Calasso Lecce - Ricordi di lavoro.pdf
 
2 Padre A. M. Tannoia Corato - L'ultimo giorno.pdf
2 Padre A. M. Tannoia Corato - L'ultimo giorno.pdf2 Padre A. M. Tannoia Corato - L'ultimo giorno.pdf
2 Padre A. M. Tannoia Corato - L'ultimo giorno.pdf
 
BATTERIE A LITIO Martina Fellon 5F A.S. 23/24
BATTERIE A LITIO  Martina Fellon 5F A.S. 23/24BATTERIE A LITIO  Martina Fellon 5F A.S. 23/24
BATTERIE A LITIO Martina Fellon 5F A.S. 23/24
 
13 Consoli Castellana grotte - La caduta.pdf
13 Consoli Castellana grotte - La caduta.pdf13 Consoli Castellana grotte - La caduta.pdf
13 Consoli Castellana grotte - La caduta.pdf
 
1 Liceo Simone Morea Conversano - Ci vediamo stasera.pdf
1 Liceo Simone Morea Conversano - Ci vediamo stasera.pdf1 Liceo Simone Morea Conversano - Ci vediamo stasera.pdf
1 Liceo Simone Morea Conversano - Ci vediamo stasera.pdf
 
14 Galileo Galilei Bitonto - Rosso latte.pdf
14 Galileo Galilei Bitonto - Rosso latte.pdf14 Galileo Galilei Bitonto - Rosso latte.pdf
14 Galileo Galilei Bitonto - Rosso latte.pdf
 

6. Il browser

  • 1. Edizione 2013-14 Università degli Studi di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione Corso di Strumenti e applicazioni del Web 6. Il browser Roberto Polillo
  • 2. Il browser  E' lo strumento base per accedere al Web  to browse: curiosare, sfogliare, dare una scorsa  E' una macchina complessa, soggetta a continua evoluzione  Il progenitore: World Wide Web (poi chiamato Nexus) di Tim Berners-Lee ( 1991)  Ne esistono diversi, in continua competizione per incrementare le loro quote di mercato  L'esito delle "guerre dei browser" è fondamentale per il posizionamento sul mercato di Internet R.Polillo - Marzo 2014 4
  • 3. Un rendering complesso… R.Polillo - Marzo 2014 5 link RENDERING BROWSER
  • 4. Architettura di un browser R.Polillo - Marzo 2014 6 Da: Grosskurth, Godfrey, Architecture and evolution of the modern web browser (in rete) Browser
  • 5. Architettura di un browser R.Polillo - Marzo 2014 7 Da: Grosskurth, Godfrey, Architecture and evolution of the modern web browser (in rete) Store/retrieve bookmarks, cookies, settings, … Navigation support HTTP handling Visual representation of a given URI Toolbars, menu, …
  • 6. Mosaic  Sviluppato a partire dalla fine 1992 al NCSA (National Center for Supercomputing Applications) dell'Università dell'Illinois a Urbana- Champaign, influenzò profondamente i browser successivi  Marc Andreessen, il capo progetto, fondò poi Netscape R.Polillo - Marzo 2014 8
  • 7. Marc Andreesen (1971 -…) R.Polillo - Marzo 2014 9 Andreesen – Horowitz: venture capital con partecipazioni in Ning, Facebook, Foursquare, Twitter, Skype, Pinterest, Groupon, Zynga, ….
  • 8. Browser timeline R.Polillo - Marzo 2014 10 200 8 Chrome Da:Grosskurth,Godfrey,Architectureandevolution ofthemodernwebbrowser(inrete) I browser war II broser war III browser war
  • 9. Firefox  Browser gratuito e open-source  Sviluppato dalla Mozilla Foundation, dal 2004  Versioni mobili da 2010-2011  Ciclo di rilascio molto accelerato: Nightly → Aurora → Beta  Oggi: release 27 R.Polillo - Marzo 2014 13
  • 10. Usage share, oggi  La % di utenti che usano un certo browser  A febbraio 2014 (fonte StatCounter, non mobile): - Chrome: 43.9% - Explorer: 22.6% - Firefox: 19,2% - Safari: 9.7% - Altri: 4,6%  NB: Le varie metodiche di misura determinano risultati molto diversi: conviene utilizzare varie fonti e calcolarne la mediana  Fonte: http://en.wikipedia.org/wiki/Usage_share_of_web_browsers R.Polillo - Marzo 2014 14 88.6 %
  • 11. Browser user share (Italia, non mobile) R.Polillo - Marzo 2014 15 Fonte: StatCounter
  • 12. Mobile browser (ultimi 5 anni) R.Polillo - Marzo 2014 16 Fonte: StatCounter
  • 13. Conformità agli standard  La rapida evoluzione delle tecnologie Web (es. HTML, XML, scripting languages), e la guerra dei browser hanno generato una notevole varietà di comportamenti nei browser  Il W3C emette e aggiorna gli standard del Web ("Recommendations")  Questi dovrebbero essere seguiti dagli sviluppatori dei siti e dei browser, ma… R.Polillo - Marzo 2014 17
  • 14. HTML e CSS: evoluzione R.Polillo - Marzo 2014 18 http://www.jasonspeaking.com/index.php/2010/04/the-evolution-of-html-css/ HTML5 CSS4 (?)
  • 15. Standards: a moving target R.Polillo - Marzo 2014 19 t Definizione della nuova tecnologia Standard 0 Standard 1 draft draft deprecated Standard 2 features stric t transition al prodotti
  • 16. Test di conformità / compatibilità Test di conformità dei browser: Un servizio online gratuito per verificare la conformità dei browser con HTML5: Provatelo sul vostro browser! http://html5test.com/index.html Test di compatibilità di un sito: Vari servizi per vedere come una pagina Web viene visualizzata dai diversi browser (in simulazione) R.Polillo - Marzo 2014 20
  • 17. Interfaccia utente: basics R.Polillo - Marzo 2014 21 URL Pagin a web Navigazion e •Indietro •Avanti •Refresh •History
  • 19. Interfaccia utente Necessità di operare contemporaneamente su più pagine R.Polillo - Marzo 2014 23 Modello desktop: più browser attivi in finestre differenti (ogni finestra ha una storia separata) Nuovo modello: il browser gestisce più finestre (con una cronologia comune)
  • 21. Evoluzione del browser R.Polillo - Marzo 2014 25 Mosai c Explorer Firefox Safari Tabbed browsin g
  • 22. Evoluzione del browser R.Polillo - Marzo 2014 26 Mosai c Explorer Firefox Safari Tabbed browsin g Richiamo a motore di ricerca
  • 23. Tabbed browsing: esempi R.Polillo - Marzo 2014 27 Firefox 3.6 Explorer 8.0
  • 24. Evoluzione del browser R.Polillo - Marzo 2014 28 Mosai c Explorer Firefox Safari Tabbed browsin g Chrome detac h
  • 25. Chrome R.Polillo - Marzo 2014 29 http://www.youtube.com/watch?v=WoynSZNQxJs&feature=related (in italiano)
  • 26. Multi-tasking R.Polillo - Marzo 2014 30 Il browser diviente una sorta di sistema operativo (vedi Google Chrome OS – Chromium) Processi separati, ma con cronologia comune
  • 29. Online browser support 33 HTTP internet Browser Web server HTML HTML GOOGLE Servizi online al browser Info inviate (se non disattivate):  Info typed in omnibox → search engine  Browser settings → google personal account (preferences, bookmarks, stored passwords, …)  Testi da tradurre → google translate  Usage statistics → google databases http://www.google.com/chrome/intl/en/privacy.html Privacy ?
  • 30. Chrome: impostazioni di sincronizzazione R.Polillo - Marzo 2014 34
  • 31. Bookmarks  Bookmarks (preferiti, favorites, hot lists,…): URL memorizzati nel browser per rapido accesso Vengono memorizzati localmente (se non sincronizzati), a meno che…  Social bookmarking: servizi online, mettono in comune bookmarks di più utenti  Es.: www.delicious.com Fondato 2003, comprato da Yahoo! 2005, venduto ai fondatori di YouTube 2011 (Avos) R.Polillo - Marzo 2014 35
  • 32. Social bookmarking services 36 HTTP internet Browser Web server HTML HTML GOOGLE Servizi online al browser Browser Boomarks db www.delicious.com
  • 33. www.delicious.com 37  Inizialmente www.del.icio.us  Il sito che ha inventato il social bookmarking, fondato nel 2003, acquisito da Yahoo! nel 2005, venduto ai fondatori di YouTube nel 2011 (Avos)  Permette di salvare, taggare e condividere bookmarks (che per default sono pubblici), gratuitamente  Bottoni per bookmarking installabili sul proprio browser  Accesso rapido: www.delicious.com/tag/<tag>  http://en.wikipedia.org/wiki/Del.icio.us R.Polillo - Marzo 2014
  • 34. Estensioni al browser  Componenti aggiuntivi che possono essere installati sul browser per fornire specifiche funzionalità (chiamati anche "add-on", "plugin",…)  Realizzati da terze parti, che utilizzano le interfacce programmative (API) del browser  Esempi:  Chrome: https://chrome.google.com/webstore?hl=it  Firefox: https://addons.mozilla.org/it/firefox/ R.Polillo - Marzo 2014 38
  • 35. Estensioni: esempi  Yoono (Firefox) Interazione con Facebook, Twitter e Linkedin durante la navigazione http://www.youtube.com/watch?v=BLPTQULcC6o (1:34)  ImTranslator (Firefox) Traduzione in tempo reale nella lingua scelta (0:44) http://www.youtube.com/watch?v=O436cvXPnzU  InvisibleHand (Firefox) Propone il prezzo migliore di un prodotto/servizio selezionato (1:26) http://www.youtube.com/watch?v=ThFZeRYf_J8  GooEdit (Chrome) modifica un'immagine su una pagina Web, la salva e la twitta http://www.youtube.com/watch?v=as1JdLpbBHc (1:06) Thks A.Testa, V.Gennari, S.Antognazza per le demo video http://bit.ly/YEfY4L R.Polillo - Marzo 2014 39
  • 37. Privacy ? R.Polillo - Marzo 2014 41 Servizi attivati dalle estensioni del browser Sito visitato Internet
  • 38. Sintesi della lezione  I browser sono macchine complesse  Avere il monopolio dei browser dà un forte vantaggio competitivo sul mercato Internet  I browser inglobano funzioni degli OS  Le API pubbliche ne fanno macchine estensibili  Supporto online delle funzioni del browser e delle estensioni: il problema della privacy R.Polillo - Marzo 2014 42
  • 39. Lavoro individuale  È ora di scegliere consapevolmente il vostro browser. "Esplorate" con attenzione quello che usate, e confrontatelo con una alternativa possibile (attenzione: usate l'ultima versione!), sperimentando anche le funzioni nascoste e verificando la compatibilità HTML5 (es. con http://html5test.com/index.html  Quando lo avete scelto, cercate le estensioni per voi più interessanti, installatele e provatele  Verificate il livello di privacy che avete ottenuto  Confrontate le funzionalità del browser scelto con la sua versione mobile  PS Questo lavoro è molto importante, dedicate il tempo necessario R.Polillo - Marzo 2014 43

Editor's Notes

  1. A World-Wide-Web scenario is introduced in this exampl. Reading a WWW page, the user would like to trace a hyperlink expression. He or she glances at the word of interest and the new web page will appear, showing a spatial link to the previous page. The current page starts to move a bit away from the user (until the user decides not to follow this link, what will cause the new page to disappear). In that way the user can create a 3-D tree with web pages, read and - at the same time - get an overview of the history. Older pages can be addressed by the eyes and the whole tree moves, so that the text on this page becomes readable. Obviously, this arrangement contains many occlusions and, in fact, its 2-D representation will look confusing. A much better result is obtained, when this scene is shown on a 3-D display with motion parallax. Then, the user can move his or her head in order to look at previously occluded pages. Robert Skerjanc and Siegmund Pastoor, New generation of 3-D desktop computer interfaces , Electronic Imaging 1997, IEEE&amp;SPIE, San Jose. http://atwww.hhi.de/~blick/Papers/New_generation_of_3-D_desktop_/new_generation_of_3-d_desktop_.html