Una breve introduzione ad Elsa Morante, vita e opere
6 - Il browser - 16/17
1. Università degli Studi di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione
Corso di Strumenti e applicazioni del Web
6. Il browser
Giuseppe Vizzari
Edizione 2016-17
2. Queste slide
Queste slide fanno parte del corso “Strumenti e applicazioni del Web”. Il sito del corso,
con il materiale completo, si trova in strumentiapplicazioniweb.wordpress.com. Data la
rapida evoluzione della rete, il corso viene 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 e alle screen shot, i
cui diritti restano in capo ai rispettivi proprietari, che, ove possibile, sono stati
indicati. L'autore si scusa per eventuali omissioni, e resta a disposizione per
correggerle.
3. 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
4. Il browser
• È lo strumento base per accedere al Web
• to browse: curiosare, sfogliare, dare una scorsa
• È 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" è (stato?)
fondamentale per il posizionamento sul mercato di
Internet
5. 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 Protocol
IP: Internet Protocol
7. 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 Recommendation, che sono considerate gli
standard del Web
• Guardate http://www.w3.org
7
11. (segue)
11
<a class="twitter-timeline"
href="https://twitter.com/VizzariG" data-widget-
id="657943005760987136">Tweets by @VizzariG</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
14. Architettura di un browser
14
Da: Grosskurth, Godfrey, Architecture and evolution
of the modern web browser (in rete)
Browser
15. Architettura di un browser
15
Da: Grosskurth, Godfrey, Architecture and evolution
of the modern web browser (in rete)
Store/retrieve
bookmarks,
cookies,
settings, …
Navigation
support
HTTP handling
Visual
representation
of a given URI
Toolbars, menu,
…
16. 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
17. Marc Andreesen (1971 -…)
17
Andreesen – Horowitz: venture capital
con partecipazioni in Ning, Facebook,
Foursquare, Twitter, Skype, Pinterest,
Groupon, Zynga, ….
19. Le "browser wars"
• Il controllo del browser leader di mercato fornisce un vantaggio
competitivo molto forte
• Per vincere:
• Gratuità
• Funzionalità avanzate e qualità del software
• Perché cercare di vincere “regalando” software?
• Funzionalità proprietarie → indebolimento degli standard oppure: controllo
degli standard (prime fasi)
• Possibilità di acquisire dati sull’utilizzo del browser e della rete da parte degli
utenti (attualmente)
• Le guerre dei browser:
1) (1995-1998) Explorer vs Netscape
2) (2004- 2015) Firefox vs Explorer
3) (2008 - …) Chrome vs Firefox/Edge/Safari
4) (2007 - …) Mobile browsers
http://en.wikipedia.org/wiki/Browser_wars
19
20. 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 del 2014 proviene da
Google, in cambio Firefox usa Google come motore di ricerca di
default (il contratto è stato rinnovato fino a novembre 2014)…
• … nel 2014 Mozilla ha firmato un contratto quinquennale con
Yahoo, per averlo come motore di ricerca predefinito nel Nord
America (ma Yahoo Search è sostanzialmente un front-end per
Bing…)
20
21. Firefox
• Browser gratuito e open-source
• Sviluppato dalla Mozilla Foundation, dal 2004
• Versioni mobili da 2010-2011
• Ciclo di rilascio molto accelerato (dopo l’arrivo di Chrome):
Nightly → Aurora → Beta
• Oggi: release 49.0.1
21
22. Usage share, oggi
• La % di utenti che usano un certo browser
• A febbraio 2015 (fonte StatCounter, non mobile):
- Chrome: 49%
- Explorer: 19%
- Firefox: 17%
- Safari: 10%
- Altri: 5%
• 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
95%
24. 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
25. HTML e CSS: evoluzione
25
http://www.jasonspeaking.com/index.php/2010/04/the-evolution-of-html-css/
HTML5
CSS4 (?)
Recommendation
W3C
Ott 2014
26. Standard: a moving target
26
t
Definizione
della nuova
tecnologia
Standard 0 Standard 1
draft
draft
deprecated
Standard 2
features
strict
transitional
prodotti
27. 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
30. 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)
39. Online browser support
39
HTTP
internet
Browser
Web
server
HTML
HTML
GOOGLE
Servizi
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?
41. Bookmarks
• Bookmarks (preferiti, favorites, hot lists,…):
URL memorizzati nel browser per rapido accesso
Vengono memorizzati localmente (se non sincronizzati)
• Social bookmarking: servizi online, mettono in comune
bookmarks di più utenti
• Es.: www.delicious.com
Fondato 2003, comprato da Yahoo! 2005, venduto ai fondatori
di YouTube 2011 poi a Science (2014)
41
43. www.delicious.com
• 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
43
44. 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/
44
45. Estensioni: esempi
• Yoono (Firefox)
Interazione con Facebook, Twitter e Linkedin durante la
navigazione
http://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 twitta
http://www.youtube.com/watch?v=as1JdLpbBHc (1:06)
Thks A.Testa, V.Gennari, S.Antognazza per le demo video http://bit.ly/YEfY4L
45
47. 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
47