Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Il browser

503 views

Published on

Slide lezione "Il browser" - 18/29

Published in: Education
  • Be the first to comment

  • Be the first to like this

Il browser

  1. 1. Università degli Studi di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione Corso di Strumenti e applicazioni del Web 8. Il browser Giuseppe Vizzari Edizione 2018-19
  2. 2. Queste slides Queste slides fanno parte del corso “Strumenti e applicazioni del Web”. Il sito del corso, con il materiale completo, si trova in https://gvizzari.hopto.org/wp/. 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. 3. Riassunto della puntata precedente • Web = • Internet + Ipertesti (concettualmente) • HTTP + HTML + URI + Browser + Web server + protocolli pre-esistenti (tecnicamente) • 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) • CMS  lato server • … e il lato client? 3
  4. 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. 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
  6. 6. In sintesi… 6 BROWSER File HTML
  7. 7. Embedding 7 <html> <body> embed code </body> </html> oggetto attivo disponibile sulla rete
  8. 8. "Widgets": esempi 8
  9. 9. Creazione di un widget: esempio 9 Twitter:
  10. 10. (segue) 10 <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.location) ?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.i d=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode .insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> Il codice generato, da copiare nella propria pagina Web
  11. 11. Analogamente…
  12. 12. Virtualizzazone / globalizzazione della rete 12 Da dove provengono i servizi?
  13. 13. Architettura di un browser 13 Da: Grosskurth, Godfrey, Architecture and evolution of the modern web browser (in rete) Browser
  14. 14. Architettura di un browser 14 Da: Grosskurth, Godfrey, Architecture and evolution of the modern web browser (https://plg.uwaterloo.ca/~migod/papers/2006/jss-browserRefArch.pdf) Store/retrieve bookmarks, cookies, settings, … Navigation support HTTP handling Visual representation of a given URI Toolbars, menu, …
  15. 15. Browser e risorse…
  16. 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. 17. Marc Andreesen (1971 -…) 17 Andreesen – Horowitz: venture capital con partecipazioni in Ning, Facebook, Foursquare, Twitter, Skype, Pinterest, Groupon, Zynga, ….
  18. 18. Browser timeline (early days…) 18 2008 Chrome Da:Grosskurth,Godfrey,Architectureandevolution ofthemodernwebbrowser(https://plg.uwaterloo.ca/~migod/papers/2006/jss-browserRefArch.pdf) I browser war II broser war III browser war
  19. 19. 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 • Vita abbastanza difficile, almeno inizialmente, dato l’evidente interesse e rilevanza commerciale comparata alla iniziale immaturità delle tecnologie… • Guardate http://www.w3.org 19
  20. 20. 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 5) (2016 - …) “Ad-free” browsers? (Safari 11, Brave, … ?) http://en.wikipedia.org/wiki/Browser_wars 20
  21. 21. 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…) 21
  22. 22. 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 ~62 22
  23. 23. Usage share, oggi • La % di utenti che usano un certo browser • A febbraio 2015 (fonte StatCounter): - Chrome: 61% - Safari: 15% - UC*: 5% - Firefox: 5% - Altri: 14% (IE ed Edge stanno qui!) • 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 * UC Browser is a web browser developed by the Chinese mobile Internet company UCWeb, which is in turn owned by the Alibaba Group. 23 86%
  24. 24. Browser market share (2008 – 2018) 24
  25. 25. Mobile browser market share (2008 – 2018) 25
  26. 26. 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… 26
  27. 27. HTML e CSS: evoluzione 27 http://www.jasonspeaking.com/index.php/2010/04/the-evolution-of-html-css/ HTML5 CSS4 (?) Recommendation W3C Ott 2014
  28. 28. Standard: a moving target 28 t Definizione della nuova tecnologia Standard 0 Standard 1 draft draft deprecated Standard 2 features strict transitional prodotti
  29. 29. 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) 29
  30. 30. Interfaccia utente: basics 30 URL Pagina web Navigazione • Indietro • Avanti • Refresh • History
  31. 31. Mosaic
  32. 32. Interfaccia utente Necessità di operare contemporaneamente su più pagine 32 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)
  33. 33. Evoluzione del browser 33 Mosaic Explorer Firefox Safari Tabbed browsing
  34. 34. Evoluzione del browser 34 Mosaic Explorer Firefox Safari Tabbed browsing Richiamo a motore di ricerca
  35. 35. Tabbed browsing: esempi 35 Firefox 3.6 Explorer 8.0
  36. 36. Evoluzione del browser 36 Mosaic Explorer Firefox Safari Tabbed browsing Chrome detach
  37. 37. Chrome 37 http://www.youtube.com/watch?v=WoynSZNQxJs&feature=related (in italiano)
  38. 38. Multi-tasking 38 Il browser diviente una sorta di sistema operativo (vedi Google Chrome OS – Chromium) Processi separati, ma con cronologia comune
  39. 39. Google Chrome Omnibox 39
  40. 40. Online browser support 40 HTTP internet Browser Web server HTML HTML GOOGLE Servizi online al browser
  41. 41. Online browser support 41 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?
  42. 42. Chrome: impostazioni di sincronizzazione 42 Versione 41
  43. 43. 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, a volte categorizzati in modi differenti… • Es.: www.delicious.com Fondato 2003, comprato da Yahoo! 2005 (costo tra i 15 e i 30 milioni di dollari), poi altri passaggi societari fino al recente acquisto da parte di Pinboard per 35 mila dollari... • Esempio più recente, vivo e apparentemente economicamente sostenibile: Pinterest (https://www.pinterest.com/) Fondato a fine 2009, oggi valutata intorno ai 12 miliardi di dollari, ma ancora non si parla di una collocazione in borsa… 43
  44. 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. 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. 46. Privacy ? 46 Servizi attivati dalle estensioni del browser Sito visitato Internet
  47. 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

×