4. I browser
-
Upload
roberto-polillo -
Category
Education
-
view
1.099 -
download
4
description
Transcript of 4. I browser
![Page 1: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/1.jpg)
Edizione 2012-13
Università degli Studi di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione
Corso di Strumenti e applicazioni del Web
4. Il browserRoberto Polillo
![Page 2: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/2.jpg)
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 2013
4
![Page 3: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/3.jpg)
Architettura di un browser
R.Polillo - Marzo 2013
6
Da: Grosskurth, Godfrey, Architecture and evolution of the modern web browser (in rete)
Browser
![Page 4: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/4.jpg)
Architettura di un browser
R.Polillo - Marzo 2013
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, …
![Page 5: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/5.jpg)
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 2013
8
![Page 6: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/6.jpg)
Marc Andreesen
R.Polillo - Marzo 2013
9
![Page 7: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/7.jpg)
Browser timeline
R.Polillo - Marzo 2013
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
![Page 8: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/8.jpg)
Browser user share (World)
R.Polillo - Marzo 2013
13
Fonte: StatCounter: http://bit.ly/113rJDe
![Page 9: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/9.jpg)
Usage share, oggi
La % di utenti che usano un certo browser A gennaio 2013 (fonte StatCounter):
- Chrome: 36.5%- Explorer: 30.7%- Firefox: 21.4%- Safari: 8.3%- Altri: 3,1%
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 2013
14
88.6%
![Page 10: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/10.jpg)
Browser user share (Italia)
R.Polillo - Marzo 2013
15
Fonte: StatCounter http://bit.ly/113rJDe
![Page 11: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/11.jpg)
Mobile browser (ultimi 4 anni)
R.Polillo - Marzo 2013
16
Fonte: StatCounter http://bit.ly/X7RGcv
![Page 12: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/12.jpg)
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 (www.w3c.org : World Wide Web Consortium, fondato da Tim Berners Lee nel 1994) emette e aggiorna gli standard del Web ("Recommendations")
Questi dovrebbero essere seguiti dagli sviluppatori dei siti e dei browser, ma…
R.Polillo - Marzo 2013
17
![Page 13: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/13.jpg)
HTML e CSS: evoluzione
R.Polillo - Marzo 2013
18
http://www.jasonspeaking.com/index.php/2010/04/the-evolution-of-html-css/
HTML5
CSS4 (?)
![Page 14: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/14.jpg)
Standards: a moving target
R.Polillo - Marzo 2013
19
tDefinizionedella nuovatecnologia
Standard 0 Standard 1
draft
draft
deprecated
Standard 2
featu
res
stricttransitional
prodotti
![Page 15: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/15.jpg)
Test di conformità / compatibilità
Test di conformità dei browser:Un servizio online gratuito per verificare la conformità dei browser con HTML5Provatelo sul vostro browser!http://html5test.com/index.html
Test di compatibilità di un sito:Un servizio online gratuito per vedere come una pagina Web viene visualizzata dai diversi browserhttp://browserlab.adobe.com
R.Polillo - Marzo 2013
20
![Page 16: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/16.jpg)
Interfaccia utente: basics
R.Polillo - Marzo 2013
21
URL
Pagina web
Navigazione•Indietro•Avanti•Home•Refresh•History
![Page 17: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/17.jpg)
Mosaic
R.Polillo - Marzo 2013
22
![Page 18: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/18.jpg)
Interfaccia utente
Necessità di operare contemporaneamente su più pagine
R.Polillo - Marzo 2013
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)
![Page 19: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/19.jpg)
R.Polillo - Marzo 201324
![Page 20: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/20.jpg)
Evoluzione del browser
R.Polillo - Marzo 2013
25
Mosaic
ExplorerFirefoxSafari
Tabbed browsing
![Page 21: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/21.jpg)
Evoluzione del browser
R.Polillo - Marzo 2013
26
Mosaic
ExplorerFirefoxSafari
Tabbed browsing
Richiamo a motore di ricerca
![Page 22: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/22.jpg)
Tabbed browsing: esempi
R.Polillo - Marzo 2013
27
Firefox 3.6
Explorer 8.0
![Page 23: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/23.jpg)
Evoluzione del browser
R.Polillo - Marzo 2013
28
Mosaic
ExplorerFirefoxSafari
Tabbed browsing
Chrome
detach
![Page 24: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/24.jpg)
Chrome
R.Polillo - Marzo 2013
29
http://www.youtube.com/watch?v=WoynSZNQxJs&feature=related (in italiano)
![Page 25: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/25.jpg)
Multi-tasking
R.Polillo - Marzo 2013
30
Il browser diviente una sorta di sistema operativo (vedi Google Chrome OS – Chromium)
Processi separati, ma con cronologia comune
![Page 26: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/26.jpg)
Google Chrome Omnibox31
![Page 27: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/27.jpg)
Online browser support32
HTTPinternet
Browser
Web server
HTML
HTML
GOOGLEServizi online
al browser
![Page 28: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/28.jpg)
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?
![Page 29: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/29.jpg)
Chrome: impostazioni di sincronizzazione
R.Polillo - Marzo 2013
34
![Page 30: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/30.jpg)
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 2013
35
![Page 31: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/31.jpg)
Social bookmarking services36
HTTPinternet
Browser
Web server
HTML
HTML
GOOGLEServizi online
al browser
Browser
Boomarks db
www.delicious.com
![Page 32: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/32.jpg)
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 2013
![Page 33: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/33.jpg)
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 2013
38
![Page 34: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/34.jpg)
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 2013
39
![Page 35: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/35.jpg)
Esensioni: Hyperwords
http://www.hyperwords.net/index.html
http://www.youtube.com/watch?v=p6B9ZNI4vY0&feature=player_embedded
R.Polillo - Marzo 2013
40
![Page 36: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/36.jpg)
Privacy ?
R.Polillo - Marzo 2013
41
Servizi attivati
dalle estensioni del browser
Sito visitato
Internet
![Page 37: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/37.jpg)
Sintesi della lezione
I browser sono macchine complesse Avere il monopolio dei browser dà un forte
vantaggio competitivo sul mercato Internet Guerra dei browser vs evoluzione degli standard Convergenza dei browser e 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 2013
42
![Page 38: 4. I browser](https://reader033.fdocument.pub/reader033/viewer/2022061206/5481b1f6b4af9f70638b4893/html5/thumbnails/38.jpg)
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 2013
43