Post on 07-Jan-2017
Università degli Studi di Milano BicoccaDipartimento di Informatica, Sistemistica e ComunicazioneCorso di Strumenti e applicazioni del Web
6. Il browserGiuseppe Vizzari
Edizione 2016-17
Queste slideQueste slide fanno parte del corso “Strumenti e applicazioni del Web”. Il sito del corso, con il materiale completo, si trova in strumentiapplicazioniweb.wordpress.com. 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.
Riassunto della puntata precedente• Web = Internet + Ipertesti + HTTP + HTML + URI +
Browser + Web server• 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)
3
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
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
In sintesi…
6
link
BROWSER
File HTML
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
• Guardate http://www.w3.org
7
Embedding
8
<html><body>
embed code
</body></html>
oggetto attivo
disponibile sulla rete
"Widgets": esempi
9
Creazione di un widget: esempio
10
Twitter:
(segue)
11
<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.id=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
Analogamente…
Virtualizzazone / globalizzazione della rete13
Da dove provengono i servizi?
Architettura di un browser
14Da: Grosskurth, Godfrey, Architecture and evolution of the modern web browser (in rete)
Browser
Architettura di un browser
15Da: Grosskurth, Godfrey, Architecture and evolution of the modern web browser (in rete)
Store/retrievebookmarks, cookies, settings, …
Navigation support
HTTP handling
Visual representation of a given URI
Toolbars, menu, …
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
Marc Andreesen (1971 -…)
17
Andreesen – Horowitz: venture capital con partecipazioni in Ning, Facebook, Foursquare, Twitter, Skype, Pinterest, Groupon, Zynga, ….
Browser timeline
18
200
8
Chrome
Da: G
ross
kurth
, God
frey,
Arc
hite
ctur
e an
d ev
olut
ion
of th
e m
oder
n we
b br
owse
r (in
rete
)
I browser war
II broser war
III browser war
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 Explorer3) (2008 - …) Chrome vs Firefox/Edge/Safari4) (2007 - …) Mobile browsershttp://en.wikipedia.org/wiki/Browser_wars
19
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…)
20
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 49.0.1
21
Usage share, oggi
• La % di utenti che usano un certo browser • A febbraio 2015 (fonte StatCounter, non mobile):- Chrome: 49%- Explorer: 19%- Firefox: 17%- Safari: 10%- Altri: 5%
• 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
22
95%
Mobile browser (ultimi 6 anni)
23Fonte: StatCounter
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…
24
HTML e CSS: evoluzione
25http://www.jasonspeaking.com/index.php/2010/04/the-evolution-of-html-css/
HTML5
CSS4 (?)
Recommendation W3C
Ott 2014
Standard: a moving target
26
tDefinizionedella nuovatecnologia
Standard 0 Standard 1
draft
draft
deprecated
Standard 2
feat
ures
stricttransitional
prodotti
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)
27
Interfaccia utente: basics
28
URL
Pagina web
Navigazione• Indietro• Avanti• Refresh• History
Mosaic
Interfaccia utenteNecessità di operare contemporaneamente su più pagine
30
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)
Evoluzione del browser
31
MosaicExplorerFirefoxSafari
Tabbed browsing
Evoluzione del browser
32
MosaicExplorerFirefoxSafari
Tabbed browsing
Richiamo a motore di ricerca
Tabbed browsing: esempi
33
Firefox 3.6
Explorer 8.0
Evoluzione del browser
34
MosaicExplorerFirefoxSafari
Tabbed browsing
Chrome
detach
Chrome
35
http://www.youtube.com/watch?v=WoynSZNQxJs&feature=related (in italiano)
Multi-tasking
36
Il browser diviente una sorta di sistema operativo (vedi Google Chrome OS – Chromium)
Processi separati, ma con cronologia
comune
Google Chrome Omnibox
37
Online browser support
38
HTTPinternetBrowser
Web server
HTML
HTML
GOOGLEServizi
online al browser
Online browser support
39
HTTPinternetBrowser
Web server
HTML
HTML
GOOGLEServizi
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 databaseshttp://www.google.com/chrome/intl/en/privacy.html
Privacy?
Chrome: impostazioni di sincronizzazione
40
Versione 41
Bookmarks• Bookmarks (preferiti, favorites, hot lists,…):
URL memorizzati nel browser per rapido accessoVengono memorizzati localmente (se non sincronizzati)
• Social bookmarking: servizi online, mettono in comune bookmarks di più utenti
• Es.: www.delicious.comFondato 2003, comprato da Yahoo! 2005, venduto ai fondatori di YouTube 2011 poi a Science (2014)
41
Social bookmarking services
42
HTTPinternetBrowser
Web server
HTML
HTML
GOOGLEServizi
online al browser
Browser
Boomarks db
www.delicious.com
www.delicious.com• 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
43
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
Estensioni: esempi• Yoono (Firefox)
Interazione con Facebook, Twitter e Linkedin durante la navigazionehttp://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 twittahttp://www.youtube.com/watch?v=as1JdLpbBHc (1:06)
Thks A.Testa, V.Gennari, S.Antognazza per le demo video http://bit.ly/YEfY4L
45
Privacy ?
46
Servizi attivati
dalle estensioni del browser
Sito visitato
Internet
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
47