Slides dalle lezioni del corso "Strumenti e applicazioni del Web" per il corso di laurea magistrale in Teoria e tecnologia della comunicazione - Università di Milano Bicocca - Prof.R.Polillo - A.A.2012-13 Lezione 4 del 12 e 13 marzo 2013

1. Università degli Studi di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione
Corso di Strumenti e applicazioni del Web
4. Il browser
Roberto Polillo
Edizione 2012-13

2. Il browser
4
 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 2013

3. Architettura di un browser
6
Browser
Da: Grosskurth, Godfrey, Architecture and evolution
of the modern web browser (in rete)
R.Polillo - Marzo 2013

4. Architettura di un browser
7
Navigation Toolbars, menu, Store/retrieve
support … bookmarks,
cookies,
Visual settings, …
representation
of a given URI
HTTP handling
Da: Grosskurth, Godfrey, Architecture and evolution
of the modern web browser (in rete)
R.Polillo - Marzo 2013

5. Mosaic
8
 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 2013

6. Marc Andreesen
9
R.Polillo - Marzo 2013

7. 10
Da: Grosskurth, Godfrey, Architecture and evolution
of the modern web browser (in rete)
I
war
browser
Browser timeline
II
war
broser
III
200
war
8
browser
Chrome
R.Polillo - Marzo 2013

8. Browser user share (World)
13
Fonte: StatCounter: http://bit.ly/113rJDe R.Polillo - Marzo 2013

9. Usage share, oggi
14
 La % di utenti che usano un certo browser
 A gennaio 2013 (fonte StatCounter):
- Chrome: 36.5%
- Explorer: 30.7% 88.6
- Firefox: 21.4% %
- Safari: 8.3%
- Altri: 3,1%
 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 2013

10. Browser user share (Italia)
15
Fonte: StatCounter http://bit.ly/113rJDe
R.Polillo - Marzo 2013

11. Mobile browser (ultimi 4 anni)
16
Fonte: StatCounter http://bit.ly/X7RGcv
R.Polillo - Marzo 2013

12. Conformità agli standard
17
 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 (www.w3c.org : World Wide Web
Consortium, fondato da Tim Berners Lee nel 1994)
emette e aggiorna gli standard del Web
("Recommendations")
 Questi dovrebbero essere seguiti dagli sviluppatori
dei siti e dei browser, ma…
R.Polillo - Marzo 2013

13. HTML e CSS: evoluzione
18
HTML5
CSS4 (?)
http://www.jasonspeaking.com/index.php/2010/04/the-evolution-of-html-css/ R.Polillo - Marzo 2013

14. Standards: a moving target
19
Standard 0 Standard 1 Standard 2
features
draft
stric
t
transition
draft al
deprecated
t
Definizione
della nuova
tecnologia
prodotti
R.Polillo - Marzo 2013

15. Test di conformità / compatibilità
20
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:
Un servizio online gratuito per vedere come una pagina Web viene
visualizzata dai diversi browser
http://browserlab.adobe.com
R.Polillo - Marzo 2013

16. Interfaccia utente: basics
21
Navigazion URL
e
•Indietro
•Avanti
•Home Pagin
•Refresh a web
•History
R.Polillo - Marzo 2013

17. Mosaic
22
R.Polillo - Marzo 2013

18. Interfaccia utente
23
Necessità di operare contemporaneamente su più
pagine
Modello desktop: Nuovo modello:
più browser attivi il browser gestisce
in finestre differenti più
(ogni finestra finestre
ha una storia (con una cronologia
separata) comune)
R.Polillo - Marzo 2013

19. 24 R.Polillo - Marzo 2013

20. Evoluzione del browser
25
Tabbed
browsin
g
Mosai
c
Explorer
Firefox
Safari
R.Polillo - Marzo 2013

21. Evoluzione del browser
26
Richiamo a
motore di
ricerca
Tabbed
browsin
g
Mosai
c
Explorer
Firefox
Safari
R.Polillo - Marzo 2013

22. Tabbed browsing: esempi
27
Explorer 8.0
Firefox
3.6
R.Polillo - Marzo 2013

23. Evoluzione del browser
28
Tabbed
browsin
g
Mosai detac
h
c
Explorer
Firefox
Safari
Chrome
R.Polillo - Marzo 2013

24. Chrome
29
http://www.youtube.com/watch?v=WoynSZNQxJs&feature=related (in
italiano)
R.Polillo - Marzo 2013

25. Multi-tasking
30
Processi separati, ma
con cronologia comune
Il browser diviente una sorta di sistema operativo
(vedi Google Chrome OS – Chromium)
R.Polillo - Marzo 2013

26. Google Chrome Omnibox
31

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

28. Online browser support Privacy
33 Info inviate (se non disattivate):
 Info typed in omnibox → search engine ?
 Browser settings → google personal account GOOGLE
(preferences, bookmarks, stored passwords, …) Servizi online
 Testi da tradurre → google translate al browser
 Usage statistics → google databases
http://www.google.com/chrome/intl/en/privacy.html
HTML
Browser
internet
HTTP
Web
server HTML

29. Chrome: impostazioni di sincronizzazione
34
R.Polillo - Marzo 2013

30. Bookmarks
35
 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 2013

31. Social bookmarking services
36
Boomarks db GOOGLE
Servizi online
www.delicious.com al browser
HTML
Browser
internet
HTTP
Web Browser
server HTML

32. 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 2013

33. Estensioni al browser
38
 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 2013

34. Estensioni: esempi
39
 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 2013

35. Esensioni: Hyperwords
40
 http://www.hyperwords.net/index.html
http://www.youtube.com/watch?
v=p6B9ZNI4vY0&feature=player_embedded
R.Polillo - Marzo 2013

36. Privacy ?
41
Servizi attivati
dalle
estensioni del
browser
Internet
Sito
visitato
R.Polillo - Marzo 2013

37. Sintesi della lezione
42
 I browser sono macchine complesse
 Avere il monopolio dei browser dà un forte
vantaggio competitivo sul mercato Internet
 Guerra dei browser vs evoluzione degli standard
 Convergenza dei browser e 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 2013

38. Lavoro individuale
43
 È 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 2013