Slides dalle lezioni del corso di Strumenti e applicazioni del Web per il corso di laurea magistrale in Teoria e tecnologia della comunicazione - Università di Milano Bicocca (prof. R.Polillo) - lezione del 18 marzo 2014
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
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
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
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)
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
?
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
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
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&SPIE, San Jose.
http://atwww.hhi.de/~blick/Papers/New_generation_of_3-D_desktop_/new_generation_of_3-d_desktop_.html