1. Università degli Studi di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione
Corso di Strumenti e applicazioni del Web
8. Il browser
Giuseppe Vizzari
Edizione 2019-20
2. Queste slides
Queste slides fanno parte del corso “Strumenti e applicazioni del Web”. Il sito del corso,
con il materiale completo, si trova in https://gvizzari.hopto.org/wp/. Data la rapida
evoluzione della rete, il corso viene aggiornato ogni anno.
Il presente materiale è pubblicato con licenza Creative Commons “Attribuzione -
Non commerciale - Condividi allo stesso modo – 3.0”
(http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it ):
La licenza non si estende alle immagini provenienti da altre fonti e alle screen shot, i
cui diritti restano in capo ai rispettivi proprietari, che, ove possibile, sono stati
indicati. L'autore si scusa per eventuali omissioni, e resta a disposizione per
correggerle.
3. Riassunto della puntata
precedente
• Web =
• Internet + Ipertesti (concettualmente)
• HTTP + HTML + URI + Browser + Web server + protocolli pre-esistenti
(tecnicamente)
• Quali informazioni su di noi il browser invia al web server
• Una pagina web aggrega oggetti provenienti da fonti anche
molto diverse
• Scripting (client side e server side)
• CMS lato server
• … e il lato client?
3
4. Il browser
• È lo strumento base per accedere al Web
• “to browse”: curiosare, sfogliare, dare una scorsa
• È 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" è (stato?)
fondamentale per il posizionamento sul mercato di
Internet
5. Il protocollo HTTP
5
HOST HOSTROUTER ROUTER
Web server
Trasporto
Internet
Network
Internet
Network
Internet
Network
Browser
Trasporto
Internet
Network
Protocollo HTTP
TCP: Transmission Control Protocol
IP: Internet Protocol
10. (segue)
10
<a class="twitter-timeline" href="https://twitter.com/VizzariG"
data-widget-id="657943005760987136">Tweets by
@VizzariG</a> <script>!function(d,s,id){var
js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)
?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.i
d=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode
.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Il codice generato, da
copiare nella propria
pagina Web
13. Architettura di un browser
13
Da: Grosskurth, Godfrey, Architecture and evolution
of the modern web browser (in rete)
Browser
14. Architettura di un browser
14
Da: Grosskurth, Godfrey, Architecture and evolution of the modern web browser
(https://plg.uwaterloo.ca/~migod/papers/2006/jss-browserRefArch.pdf)
Store/retrieve
bookmarks,
cookies,
settings, …
Navigation
support
HTTP handling
Visual
representation
of a given URI
Toolbars, menu,
…
16. 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
16
17. Marc Andreesen (1971 -…)
17
Andreesen – Horowitz: venture capital
con partecipazioni in Ning, Facebook,
Foursquare, Twitter, Skype, Pinterest,
Groupon, Zynga, ….
18. Browser timeline (early days…)
18
2008
Chrome
Da:Grosskurth,Godfrey,Architectureandevolution
ofthemodernwebbrowser(https://plg.uwaterloo.ca/~migod/papers/2006/jss-browserRefArch.pdf)
I browser
war
II broser
war
III
browser
war
19. W3C: World Wide Web
Consortium
• Fondato nel 1994 da Tim Berners-Lee
• "The W3C mission is to lead the World Wide Web to
its full potential by developing protocols and
guidelines that ensure the long-term growth of the
Web"
• Emette delle Recommendation, che sono considerate gli
standard del Web
• Vita abbastanza difficile, almeno inizialmente, dato l’evidente
interesse e rilevanza commerciale comparata alla iniziale
immaturità delle tecnologie…
• Guardate http://www.w3.org
19
20. Le "browser wars"
• Il controllo del browser leader di mercato fornisce un vantaggio
competitivo molto forte
• Per vincere:
• Gratuità
• Funzionalità avanzate e qualità del software
• Perché cercare di vincere “regalando” software?
• Funzionalità proprietarie → indebolimento degli standard oppure: controllo
degli standard (prime fasi)
• Possibilità di acquisire dati sull’utilizzo del browser e della rete da parte degli
utenti (attualmente)
• Le guerre dei browser:
1) (1995-1998) Explorer vs Netscape
2) (2004- 2015) Firefox vs Explorer
3) (2008 - …) Chrome vs Firefox/Edge/Safari
4) (2007 - …) Mobile browsers
5) (2016 - …) “Ad-free”, privacy-oriented browsers? (Safari 11, Brave, Firefox, …
?)
http://en.wikipedia.org/wiki/Browser_wars
20
21. Mozilla Foundation
• ”A non-profit organization that promotes openness, innovation
and participation on the Internet.”
• Gestisce Firefox, open-source, dal 2003
• Mozilla Manifesto:
https://www.mozilla.org/about/manifesto.it.html
• L'85% (=300 ml $ annui) dei finanziamenti del 2014 proviene da
Google, in cambio Firefox usa Google come motore di ricerca di
default (il contratto è stato rinnovato fino a novembre 2014)…
• … nel 2014 Mozilla ha firmato un contratto quinquennale con
Yahoo, per averlo come motore di ricerca predefinito nel Nord
America (ma Yahoo Search è sostanzialmente un front-end per
Bing…)
21
22. Firefox
• Browser gratuito e open-source
• Sviluppato dalla Mozilla Foundation, dal 2004
• Versioni mobili da 2010-2011
• Ciclo di rilascio molto accelerato (dopo l’arrivo di Chrome):
Nightly → Aurora → Beta
• Oggi: release ~69
22
23. Usage share, oggi
• La % di utenti che usano un certo browser
• A febbraio 2015 (fonte StatCounter):
- Chrome: 64%
- Safari: 15%
- Firefox: 4,6%
- UC*: 3,2%
- Altri: 13% (IE ed Edge stanno qui!)
• 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
* UC Browser is a web browser developed by the Chinese mobile
Internet company UCWeb, which is in turn owned by the Alibaba Group.
23
87%
26. 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…
26
27. HTML e CSS: evoluzione
27
http://www.jasonspeaking.com/index.php/2010/04/the-evolution-of-html-css/
HTML5
CSS4 (?)
Recommendation
W3C
Ott 2014
28. Standard: a moving target
28
t
Definizione
della nuova
tecnologia
Standard 0 Standard 1
draft
draft
deprecated
Standard 2
features
strict
transitional
prodotti
29. 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)
29
32. Interfaccia utente
Necessità di operare contemporaneamente su più pagine
32
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)
41. Online browser support
41
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?
Domanda per gli utenti Mac: secondo voi
Spotlight fa una cosa diversa?
43. Bookmarks
• Bookmarks (preferiti, favorites, hot lists,…):
URL memorizzati nel browser per rapido accesso
Vengono memorizzati localmente (se non sincronizzati)
• Social bookmarking: servizi online, mettono in comune
bookmarks di più utenti, a volte categorizzati in modi differenti…
• Es.: www.delicious.com
Fondato 2003, comprato da Yahoo! 2005 (costo tra i 15 e i 30
milioni di dollari), poi altri passaggi societari fino al recente
acquisto da parte di Pinboard per 35 mila dollari...
• Esempio più recente, vivo e apparentemente economicamente
sostenibile: Pinterest (https://www.pinterest.com/)
Fondato a fine 2009, oggi valutata intorno ai 12 miliardi di
dollari, ma ancora non si parla di una collocazione in borsa…
43
44. 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/
44
46. 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
46