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

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

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

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

Un rendering complesso… 5 link RENDERING BROWSER

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

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

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

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

Browser timeline Chrome Da: Grosskurth, Godfrey, Architecture and evolution of the modern web browser (in rete) 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.( ) Explorer vs Netscape 2.(2004- ) Firefox vs Explorer 3.( ) Chrome vs Firefox/Explorer 4.( ) Mobile browsers 11

Mozilla Foundation  ”A non-profit organization that promotes openness, innovation and participation on the Internet.”  Gestisce Firefox, open-source, dal 2003  Mozilla Manifesto:  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

Firefox  Browser gratuito e open-source  Sviluppato dalla Mozilla Foundation, dal 2004  Versioni mobili da  Ciclo di rilascio molto accelerato: Nightly → Aurora → Beta  Oggi: release 42 13

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: %

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

Mobile browser (ultimi 5 anni) 16 Fonte: StatCounter

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

HTML e CSS: evoluzione 18 / HTML5 CSS4 (?)

Standards: a moving target 19 t Definizione della nuova tecnologia Standard 0Standard 1 draft deprecated Standard 2 features 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! Test di compatibilità di un sito: Vari servizi per vedere come una pagina Web viene visualizzata dai diversi browser (in simulazione) 20

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

Mosaic 22

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)

Evoluzione del browser 24 Mosaic Explorer Firefox Safari Tabbed browsing

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

Tabbed browsing: esempi 26 Firefox 3.6 Explorer 8.0

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

Chrome 28

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

Google Chrome Omnibox 30 Utente del blog

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

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 Privacy?

Chrome: impostazioni di sincronizzazione 33

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.: Fondato 2003, comprato da Yahoo! 2005, venduto ai fondatori di YouTube 2011 (Avos) 34

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

36  Inizialmente  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: 

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:  Firefox: 37

Estensioni: esempi  Yoono (Firefox) Interazione con Facebook, Twitter e Linkedin durante la navigazione (1:34)  ImTranslator (Firefox) Traduzione in tempo reale nella lingua scelta (0:44)  GooEdit (Chrome) modifica un'immagine su una pagina Web, la salva e la twitta (1:06) 38

Estensioni: Liquid (Precedentemente: Hyperwords) (video 2'19") 39

Privacy ? 40 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 41

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

Buon lavoro! 43