Il documento discute l'evoluzione e l'importanza dei browser web, descrivendo il loro ruolo fondamentale nell'accesso a Internet e le 'guerre dei browser' per il mercato. Si sottolinea come i browser moderni, influenzati da importanti sviluppi come Firefox e Chrome, abbiano integrato funzionalità complesse e siano diventati essenziali anche per la navigazione multi-tasking. Infine, il documento invita gli utenti a esplorare e scegliere consapevolmente i browser e le relative estensioni, prestando attenzione alla privacy.

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

18. Mosaic
R.Polillo - Marzo 2014
22

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)

20. R.Polillo - Marzo 201424

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

27. Google Chrome Omnibox
31

28. Online browser support
32
HTTP
internet
Browser
Web
server
HTML
HTML
GOOGLE
Servizi online
al browser

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

36. Esensioni: Liquid
(Precedentemente: Hyperwords)
http://www.liquid.info (video 2'19")
R.Polillo - Marzo 2014
40

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