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
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
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
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
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
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
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
Notas do Editor
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