Downloaded 75 times
![(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](https://image.slidesharecdn.com/20161017-ilbrowser-161011075101/75/6-Il-browser-16-17-11-2048.jpg)
Uploaded byGiuseppe Vizzari
6 - Il browser - 16/17
Il documento fornisce una panoramica del corso 'strumenti e applicazioni del web' all'Università degli Studi di Milano-Bicocca, con un focus sui browser web, la loro evoluzione e architettura. Si tratta di un aggiornamento annuale sul tema, coprendo le guerre dei browser e l'importanza della conformità agli standard W3C. Viene inoltre discusso l'impatto delle estensioni dei browser e le questioni di privacy associate all'uso di tali strumenti.
More Related Content
Similar to 6 - Il browser - 16/17
More from Giuseppe Vizzari
6 - Il browser - 16/17
- 1. Università degli Studidi 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 slidefanno 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 HOSTHOSTROUTER ROUTER Web server Trasporto Internet Network Internet Network Internet Network Browser Trasporto Internet Network Protocollo HTTP TCP: Transmission Control Protocol IP: Internet Protocol
- 6.
- 7. W3C: World WideWeb 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
- 8.
- 9.
- 10. Creazione di unwidget: esempio 10 Twitter:
- 11. (segue) 11 <a class="twitter-timeline" href="https://twitter.com/VizzariG" data-widget- id="657943005760987136">Tweetsby @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
- 12.
- 13. Virtualizzazone / globalizzazionedella rete 13 Da dove provengono i servizi?
- 14. Architettura di unbrowser 14 Da: Grosskurth, Godfrey, Architecture and evolution of the modern web browser (in rete) Browser
- 15. Architettura di unbrowser 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 apartire 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, ….
- 18.
- 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 • ”Anon-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 gratuitoe 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%
- 23. Mobile browser (ultimi6 anni) 23 Fonte: StatCounter
- 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 movingtarget 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
- 28. Interfaccia utente: basics 28 URL Pagina web Navigazione •Indietro • Avanti • Refresh • History
- 29.
- 30. Interfaccia utente Necessità dioperare 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)
- 31.
- 32.
- 33. Tabbed browsing: esempi 33 Firefox3.6 Explorer 8.0
- 34.
- 35.
- 36. Multi-tasking 36 Il browser divienteuna sorta di sistema operativo (vedi Google Chrome OS – Chromium) Processi separati, ma con cronologia comune
- 37.
- 38.
- 39. Online browser support 39 HTTP internet Browser Web server HTML HTML GOOGLE Servizi onlineal 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?
- 40.
- 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
- 42. Social bookmarking services 42 HTTP internet Browser Web server HTML HTML GOOGLE Servizi onlineal browser Browser Boomarks db www.delicious.com
- 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
- 46. Privacy ? 46 Servizi attivati dalleestensioni del browser Sito visitato Internet
- 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