Download - 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
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)
R.Polillo - Marzo 2015
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
R.Polillo - Marzo 2015
4
Il protocollo HTTP
R.Polillo - Marzo 2015
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
R.Polillo - Marzo 2015
6
HTTPinternet
Browser
Web
server
HTML
GET (URL)
HTMLPUT
Protocollo stateless
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
R.Polillo - Marzo 2015
8
Embedding
R.Polillo - Marzo 2015
9
<html>
<body>
embed code
</body>
</html>
oggetto attivo
disponibile sulla rete
(segue)
R.Polillo - Marzo 2015
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?
R.Polillo - Marzo 2015
Architettura di un browser
R.Polillo - Marzo 2015
14
Da: Grosskurth, Godfrey, Architecture and evolution
of the modern web browser (in rete)
Browser
Architettura di un browser
R.Polillo - Marzo 2015
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
R.Polillo - Marzo 2015
16
Marc Andreesen (1971 -…)
R.Polillo - Marzo 2015
17
Andreesen – Horowitz: venture capital con partecipazioni in Ning, Facebook, Foursquare, Twitter, Skype, Pinterest, Groupon, Zynga, ….
Browser timeline
R.Polillo - Marzo 2015
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
R.Polillo - Marzo 2015
19
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)
R.Polillo - Marzo 2015
20
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 2015
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
R.Polillo - Marzo 2015
22
93%
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 2015
24
HTML e CSS: evoluzione
R.Polillo - Marzo 2015
25
http://www.jasonspeaking.com/index.php/2010/04/the-evolution-of-html-css/
HTML5
CSS4 (?)
RecommendationW3C
Ott 2014
Standards: a moving target
R.Polillo - Marzo 2015
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)
R.Polillo - Marzo 2015
27
Interfaccia utente: basics
R.Polillo - Marzo 2015
28
URL
Pagina
web
Navigazione
•Indietro
•Avanti
•Refresh
•History
Interfaccia utente
Necessità di operare contemporaneamente su più pagine
R.Polillo - Marzo 2015
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
R.Polillo - Marzo 2015
33
Mosaic
Explorer
Firefox
Safari
Tabbed
browsing
Richiamo a
motore di ricerca
Evoluzione del browser
R.Polillo - Marzo 2015
35
Mosaic
Explorer
Firefox
Safari
Tabbed
browsing
Chrome
detach
Chrome
R.Polillo - Marzo 2015
36
http://www.youtube.com/watch?v=WoynSZNQxJs&feature=related (in italiano)
Multi-tasking
R.Polillo - Marzo 2015
37
Il browser diviente una sorta di sistema operativo
(vedi Google Chrome OS – Chromium)
Processi separati, ma con cronologia comune
Online browser support40
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?
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)
R.Polillo - Marzo 2015
42
Social bookmarking services43
HTTPinternet
Browser
Web
server
HTML
HTML
GOOGLEServizi online
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
R.Polillo - Marzo 2015
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 2015
45
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 2015
46
Esensioni: Liquid
(Precedentemente: Hyperwords)
http://www.liquid.info (video 2'19")
R.Polillo - Marzo 2015
47
Privacy ?
R.Polillo - Marzo 2015
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
R.Polillo - Marzo 2015
49