6 - Il browser - 17/18

transcript

Università degli Studi di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione

Corso di Strumenti e applicazioni del Web

6. Il browser

Giuseppe Vizzari

Edizione 2017-18

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 rapidaevoluzione 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, icui diritti restano in capo ai rispettivi proprietari, che, ove possibile, sono statiindicati. L'autore si scusa per eventuali omissioni, e resta a disposizione percorreggerle.

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)

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

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…

6BROWSER

File HTML

Embedding

<html>

<body>

embed code

</body>

</html>

oggetto attivo

disponibile sulla rete

"Widgets": esempi

Creazione di un widget: esempio

Twitter:

(segue)

<a class="twitter-timeline"

href="https://twitter.com/VizzariG" data-widget-

id="657943005760987136">Tweets by @VizzariG</a>

js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.lo

cation)?'http':'https';if(!d.getElementById(id)){js=d.create

Element(s);js.id=id;js.src=p+"://platform.twitter.com/widg

ets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"s

cript","twitter-wjs");</script>

Il codice generato, da

copiare nella propria

pagina Web

Analogamente…

Virtualizzazone / globalizzazione della rete

Da dove provengono i servizi?

Architettura di un browser

Da: Grosskurth, Godfrey, Architecture and evolution

of the modern web browser (in rete)

Browser

Architettura di un browser

Da: Grosskurth, Godfrey, Architecture and evolution of the modern web browser

(https://plg.uwaterloo.ca/~migod/papers/2006/jss-browserRefArch.pdf)

Store/retrievebookmarks, cookies, settings, …

Navigation support

HTTP handling

Visual representation of a given URI

Toolbars, menu, …

Browser e risorse…

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

Marc Andreesen (1971 -…)

Andreesen – Horowitz: venture capital

con partecipazioni in Ning, Facebook,

Foursquare, Twitter, Skype, Pinterest,

Groupon, Zynga, ….

Browser timeline

Chrome

rossku

lution

igod/p

/jss-b

I browser

II broser

browser

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

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” browsers? (Safari 11, Brave, … ?)

http://en.wikipedia.org/wiki/Browser_wars

Mozilla Foundation

• ”A non-profit organization that promotes openness, innovationand 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…)

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 56.0

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

Mobile browser (ultimi 6 anni)

24Fonte: 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…

HTML e CSS: evoluzione

26http://www.jasonspeaking.com/index.php/2010/04/the-evolution-of-html-css/

CSS4 (?)

RecommendationW3C

Ott 2014

Standard: a moving target

tDefinizione

della nuova

tecnologia

Standard 0 Standard 1

deprecated

Standard 2

strict

transitional

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)

Interfaccia utente: basics

Pagina

Navigazione

• Indietro

• Avanti

• Refresh

• History

Mosaic

Interfaccia utente

Necessità di operare contemporaneamente su più pagine

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

Mosaic

Explorer

Firefox

Safari

Tabbed

browsing

Mosaic

Explorer

Firefox

Safari

Tabbed

browsing

Richiamo a

motore di ricerca

Tabbed browsing: esempi

Firefox 3.6

Explorer 8.0

Mosaic

Explorer

Firefox

Safari

Tabbed

browsing

Chrome

detach

Chrome

http://www.youtube.com/watch?v=WoynSZNQxJs&feature=related (in italiano)

Multi-tasking

Il browser diviente una sorta di sistema operativo

(vedi Google Chrome OS – Chromium)

Processi separati, ma

con cronologia

comune

Google Chrome Omnibox

Online browser support

HTTPinternet

Browser

server

GOOGLE

Servizi

online al

browser

Online browser support

HTTPinternet

Browser

server

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 databaseshttp://www.google.com/chrome/intl/en/privacy.html

Privacy?

Chrome: impostazioni di sincronizzazione

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, a volte categorizzati in modi differenti…

• Es.: www.delicious.comFondato 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…

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/

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

Privacy ?

Servizi attivati

dalle estensioni

del browser

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

6 - Il browser - 17/18

Education