6. il browser

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

Corso di Strumenti e applicazioni del Web

6. Il browser

Roberto Polillo

Edizione 2014-15

2

Queste slides fanno parte del corso “Strumenti e applicazioni del Web”. Ilsito del corso, con il materiale completo, si trova inwww.corsow.wordpress.com . Data la rapida evoluzione della rete, il corsoviene 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 ealle screen shots, i cui diritti restano in capo ai rispettivi proprietari,che, ove possibile, sono stati indicati. L'autore si scusa per eventualiomissioni, e resta a disposizione per correggerle.

R.Polillo - Marzo 2015

Queste slides

http://www.corsow.wordpress.com/

http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it

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

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


4

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 Protocolo

IP: Internet Protocolo

ClientServer

Il protocollo HTTP


6

HTTPinternet

Browser

Web

server

HTML

GET (URL)

HTMLPUT

Protocollo stateless

In sintesi…


7

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 Recommendations, che sono considerate gli standard del Web

Guardate http://www.w3.org


8

http://www.w3.org/

Embedding


9

<html>

<body>

embed code

</body>

</html>

oggetto attivo

disponibile sulla rete

"Widgets": esempi


10

Creazione di un widget: esempio


11

Twitter:

(segue)


12

<a class="twitter-timeline"

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

id="347305773128372225">Tweets by

@robertopolillo</a>

<script>!function(d,s,id){var

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

Virtualizzazone / globalizzazione della rete

13

Da dove provengono i servizi?


Architettura di un browser


14

Da: Grosskurth, Godfrey, Architecture and evolution

of the modern web browser (in rete)

Browser

Architettura di un browser


15

Da: 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

20

08

Chrome

Da

: G

rossku

rth, G

od

fre

y, A

rch

ite

ctu

re a

nd

evo

lutio

n

of th

e m

od

ern

we

b b

row

se

r (

in r

ete

) 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à proprietarie → indebolimento degli standard oppure: controllo degli standard

Le guerre dei browser:1. (1995-1998) Explorer vs Netscape

2. (2004- ) Firefox vs Explorer

3. (2008 - ) Chrome vs Firefox/Explorer

4. (2007 - ) Mobile browsers

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


19

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

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 proviene da Google, in cambio Firefox usa Google come motore di ricerca di default (il contratto è stato rinnovato fino a novembre 2014)


20

https://www.mozilla.org/about/manifesto.it.html

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


21

Usage share, oggi

La % di utenti che usano un certo browser

A dicembre2014 (fonte StatCounter, non mobile):- Chrome: 50%- Explorer: 25%- Firefox: 18%- Safari: 5%- Altri: 2%

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

93%

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

Mobile browser (ultimi 6 anni)


23

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


25

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

HTML5

CSS4 (?)

RecommendationW3C

Ott 2014

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

Standards: a moving target


26

tDefinizione

della nuova

tecnologia

Standard 0 Standard 1

draft

draft

deprecated

Standard 2

fea

ture

s

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)


27

http://html5test.com/index.html

Interfaccia utente: basics


28

URL

Pagina

web

Navigazione

•Indietro

•Avanti

•Refresh

•History

Mosaic


29

Interfaccia utente

Necessità 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


32

Mosaic

Explorer

Firefox

Safari

Tabbed

browsing



33

Mosaic

Explorer

Firefox

Safari

Tabbed

browsing

Richiamo a

motore di ricerca

Tabbed browsing: esempi


34

Firefox 3.6

Explorer 8.0



35

Mosaic

Explorer

Firefox

Safari

Tabbed

browsing

Chrome

detach

Chrome


36

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

http://www.youtube.com/watch?v=WoynSZNQxJs&feature=related

Multi-tasking


37

Il browser diviente una sorta di sistema operativo

(vedi Google Chrome OS – Chromium)

Processi separati, ma con cronologia comune

Google Chrome Omnibox38

Online browser support39

HTTPinternet

Browser

Web

server

HTML

HTML

GOOGLEServizi online

al browser

Online browser support40

HTTPinternet

Browser

Web

server

HTML

HTML


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?

http://www.google.com/chrome/intl/en/privacy.html

Chrome: impostazioni di sincronizzazione


41

Versione 41

Bookmarks

Bookmarks (preferiti, favorites, hot lists,…): URL memorizzati nel browser per rapido accessoVengono memorizzati localmente (se non sincronizzati), a meno che…

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)


42

http://www.delicious.com/

Social bookmarking services43

HTTPinternet

Browser

Web

server

HTML

HTML


al browser

Browser

Boomarks db

www.delicious.com


www.delicious.com44

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



http://www.del.icio.us/

http://www.delicious.com/tag/<tag

http://en.wikipedia.org/wiki/Del.icio.us

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/


45

https://chrome.google.com/webstore?hl=it

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


46

http://www.youtube.com/watch?v=BLPTQULcC6o

http://www.youtube.com/watch?v=O436cvXPnzU

http://www.youtube.com/watch?v=ThFZeRYf_J8

http://www.youtube.com/watch?v=as1JdLpbBHc

http://bit.ly/YEfY4L

Esensioni: Liquid

(Precedentemente: Hyperwords)

http://www.liquid.info (video 2'19")


47

http://www.liquid.info/

Privacy ?


48

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


49

6. il browser

Education