6. Il browser

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…


5

link

RENDERING

BROWSER

Architettura di un browser


6

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

Browser

Architettura di un browser


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


8

Marc Andreesen (1971 -…)


9

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

Browser timeline


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


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


14

88.6%

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

Browser user share (Italia, non mobile)


15

Fonte: StatCounter

Mobile browser (ultimi 5 anni)


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…


17

HTML e CSS: evoluzione


18

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

HTML5

CSS4 (?)



Standards: a moving target


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)


20

http://html5test.com/index.html

Interfaccia utente: basics


21

URL

Pagina web

Navigazione•Indietro•Avanti•Refresh•History

Mosaic


22

Interfaccia utente

Necessità di operare contemporaneamente su più pagine


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)

Evoluzione del browser


25

Mosaic

ExplorerFirefoxSafari

Tabbed browsing



26

Mosaic


Tabbed browsing

Richiamo a motore di ricerca

Tabbed browsing: esempi


27

Firefox 3.6

Explorer 8.0



28

Mosaic


Tabbed browsing

Chrome

detach

Chrome


29

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

Multi-tasking


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


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


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)


35

Social bookmarking services36

HTTPinternet

Browser

Web server

HTML

HTML


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


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/


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


39

Esensioni: Liquid

(Precedentemente: Hyperwords)

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


40

Privacy ?


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


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


43

6. Il browser

Education

Transcript of 6. Il browser