Edizione 2013-14

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

Corso di Strumenti e applicazioni del Web

6. Il browser

Roberto Polillo

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

R.Polillo - Marzo 2014

4

Un rendering complesso…

R.Polillo - Marzo 2014

5

link

RENDERING

BROWSER

Architettura di un browser

R.Polillo - Marzo 2014

6

Da: Grosskurth, Godfrey, Architecture and evolution of the modern web browser (in rete)

Browser

Architettura di un browser

R.Polillo - Marzo 2014

7

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

R.Polillo - Marzo 2014

8

Marc Andreesen (1971 -…)

R.Polillo - Marzo 2014

9

Andreesen – Horowitz: venture capital con partecipazioni in Ning, Facebook, Foursquare, Twitter, Skype, Pinterest, Groupon, Zynga, ….

Browser timeline

R.Polillo - Marzo 2014

10

20

08

Chrome

Da:

Gro

sskurt

h, G

odfr

ey, A

rchit

ect

ure

and e

volu

tion

of

the m

odern

web b

row

ser

(in

rete

)

I browser war

II broser war

III browser war

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

R.Polillo - Marzo 2014

13

Usage share, oggi

La % di utenti che usano un certo browser A febbraio 2014 (fonte StatCounter, non mobile):

- Chrome: 43.9%- Explorer: 22.6%- Firefox: 19,2%- Safari: 9.7%- Altri: 4,6%

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 2014

14

88.6%

Browser user share (Italia, non mobile)

R.Polillo - Marzo 2014

15

Fonte: StatCounter

Mobile browser (ultimi 5 anni)

R.Polillo - Marzo 2014

16

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…

R.Polillo - Marzo 2014

17

HTML e CSS: evoluzione

R.Polillo - Marzo 2014

18

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

HTML5

CSS4 (?)

Standards: a moving target

R.Polillo - Marzo 2014

19

tDefinizionedella nuovatecnologia

Standard 0 Standard 1

draft

draft

deprecated

Standard 2

featu

res

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)

R.Polillo - Marzo 2014

20

Interfaccia utente: basics

R.Polillo - Marzo 2014

21

URL

Pagina web

Navigazione•Indietro•Avanti•Refresh•History

Mosaic

R.Polillo - Marzo 2014

22

Interfaccia utente

Necessità di operare contemporaneamente su più pagine

R.Polillo - Marzo 2014

23

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)

R.Polillo - Marzo 201424

Evoluzione del browser

R.Polillo - Marzo 2014

25

Mosaic

ExplorerFirefoxSafari

Tabbed browsing

Evoluzione del browser

R.Polillo - Marzo 2014

26

Mosaic

ExplorerFirefoxSafari

Tabbed browsing

Richiamo a motore di ricerca

Tabbed browsing: esempi

R.Polillo - Marzo 2014

27

Firefox 3.6

Explorer 8.0

Evoluzione del browser

R.Polillo - Marzo 2014

28

Mosaic

ExplorerFirefoxSafari

Tabbed browsing

Chrome

detach

Chrome

R.Polillo - Marzo 2014

29

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

Multi-tasking

R.Polillo - Marzo 2014

30

Il browser diviente una sorta di sistema operativo (vedi Google Chrome OS – Chromium)

Processi separati, ma con cronologia comune

Google Chrome Omnibox31

Online browser support32

HTTPinternet

Browser

Web server

HTML

HTML

GOOGLEServizi online

al browser

Online browser support33

HTTPinternet

Browser

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 databases

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

Privacy?

Chrome: impostazioni di sincronizzazione

R.Polillo - Marzo 2014

34

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 (Avos)

R.Polillo - Marzo 2014

35

Social bookmarking services36

HTTPinternet

Browser

Web server

HTML

HTML

GOOGLEServizi online

al browser

Browser

Boomarks db

www.delicious.com

www.delicious.com37

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 2014

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/

R.Polillo - Marzo 2014

38

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

R.Polillo - Marzo 2014

39

Esensioni: Liquid

(Precedentemente: Hyperwords)

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

R.Polillo - Marzo 2014

40

Privacy ?

R.Polillo - Marzo 2014

41

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

R.Polillo - Marzo 2014

42

Lavoro individuale

È 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 2014

43