Edizione 2015-16 Risorse di Rete e Web 2.0 per il lavoro Sociale Corso di Studio in Servizio Sociale A.A. 2015-2016 5. Il browser Antonio Capodieci.

Presentazione sul tema: "Edizione 2015-16 Risorse di Rete e Web 2.0 per il lavoro Sociale Corso di Studio in Servizio Sociale A.A. 2015-2016 5. Il browser Antonio Capodieci."— Transcript della presentazione:

1 Edizione 2015-16 Risorse di Rete e Web 2.0 per il lavoro Sociale Corso di Studio in Servizio Sociale A.A. 2015-2016 5. Il browser Antonio Capodieci

2 Queste slides… 2 Queste slides fanno parte del corso “Risore di Rete per il Web 2.0”. Il presente materiale è pubblicato con licenza Creative Commons “Attribuzione - Non commerciale - Condividi allo stesso modo - 2.5 Italia”: NOTA: Al materiale hanno contribuito in molti, studenti, amici e la rete. Ove possibile ne ho indicato la fonte; segnalatemi eventuali dimenticanze, sarò lieto di correggerle appena possibile. Molte slide sono tratte dal materiale didattico del Prof. Roberto Polillo dell’Università Milano Bicocca, pubblicato secondo analoga licenza.

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)  La proliferazione dei device e delle app native 3

4 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 4

5 Un rendering complesso… 5 link RENDERING BROWSER

6 Architettura di un browser 6 Da: Grosskurth, Godfrey, Architecture and evolution of the modern web browser (in rete) Browser

7 Architettura di un browser 7 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, …

8 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 8

9 Marc Andreesen (1971 -…) 9 Andreesen – Horowitz: venture capital con partecipazioni in Ning, Facebook, Foursquare, Twitter, Skype, Pinterest, Groupon, Zynga, ….

10 Browser timeline 10 2008 Chrome Da: Grosskurth, Godfrey, Architecture and evolution of the modern web browser (in rete) I browser war II broser war III browser war

11 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 11

12 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 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) 12

13 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 42 13

14 Usage share, oggi  La % di utenti che usano un certo browser  A febbraio 2014 (fonte StatCounter, non mobile): - Chrome:43.9% - Explorer:22.6% - Firefox:19,2% - Safari: 9.7% - Altri: 4,6%  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_browsershttp://en.wikipedia.org/wiki/Usage_share_of_web_browsers 14 88.6%

15 Browser user share (Italia, non mobile) 15 Fonte: StatCounter

16 Mobile browser (ultimi 5 anni) 16 Fonte: StatCounter

17 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… 17

18 HTML e CSS: evoluzione 18 http://www.jasonspeaking.com/index.php/2010/04/the-evolution-of-html-css / HTML5 CSS4 (?)

19 Standards: a moving target 19 t Definizione della nuova tecnologia Standard 0Standard 1 draft deprecated Standard 2 features strict transitional prodotti

20 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) 20

21 Interfaccia utente: basics 21 URL Pagina web Navigazione Indietro Avanti Refresh History

22 Mosaic 22

23 Interfaccia utente Necessità di operare contemporaneamente su più pagine 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)

24 Evoluzione del browser 24 Mosaic Explorer Firefox Safari Tabbed browsing

25 Evoluzione del browser 25 Mosaic Explorer Firefox Safari Tabbed browsing Richiamo a motore di ricerca

26 Tabbed browsing: esempi 26 Firefox 3.6 Explorer 8.0

27 Evoluzione del browser 27 Mosaic Explorer Firefox Safari Tabbed browsing Chrome detach

28 Chrome 28

29 Multi-tasking 29 Il browser diviente una sorta di sistema operativo (vedi Google Chrome OS – Chromium) Processi separati, ma con cronologia comune

30 Google Chrome Omnibox 30 Utente del blog

31 Online browser support 31 Utente del blog HTTP internet Browser Web server HTML GOOGLE Servizi online al browser

32 Online browser support 32 Utente del blog HTTP internet Browser Web server 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?

33 Chrome: impostazioni di sincronizzazione 33

34 Bookmarks  Bookmarks (preferiti, favorites, hot lists,…): URL memorizzati nel browser per rapido accesso Vengono memorizzati localmente (se non sincronizzati), a meno che…  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 (Avos)www.delicious.com 34

35 Social bookmarking services 35 Utente del blog HTTP internet Browser Web server HTML GOOGLE Servizi online al browser Browser Boomarks db www.delicious.com

36 36  Inizialmente www.del.icio.uswww.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/ www.delicious.com/tag/<tag  http://en.wikipedia.org/wiki/Del.icio.us http://en.wikipedia.org/wiki/Del.icio.us

37 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=ithttps://chrome.google.com/webstore?hl=it  Firefox: https://addons.mozilla.org/it/firefox/https://addons.mozilla.org/it/firefox/ 37

38 Estensioni: esempi  Yoono (Firefox) Interazione con Facebook, Twitter e Linkedin durante la navigazione http://www.youtube.com/watch?v=BLPTQULcC6o (1:34) http://www.youtube.com/watch?v=BLPTQULcC6o  ImTranslator (Firefox) Traduzione in tempo reale nella lingua scelta (0:44) http://www.youtube.com/watch?v=O436cvXPnzU http://www.youtube.com/watch?v=O436cvXPnzU  GooEdit (Chrome) modifica un'immagine su una pagina Web, la salva e la twitta http://www.youtube.com/watch?v=as1JdLpbBHc (1:06) http://www.youtube.com/watch?v=as1JdLpbBHc 38

39 Estensioni: Liquid (Precedentemente: Hyperwords) http://www.liquid.infohttp://www.liquid.info (video 2'19") 39

40 Privacy ? 40 Servizi attivati dalle estensioni del browser Sito visitato Internet

41 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 41

42 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.htmlhttp://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 42

43 Buon lavoro! 43