6. Il browser
Upcoming SlideShare
Loading in...5
×
 

6. Il browser

on

  • 579 views

Slides dalle lezioni del corso di Strumenti e applicazioni del Web per il corso di laurea magistrale in Teoria e tecnologia della comunicazione - Università di Milano Bicocca (prof. R.Polillo) - ...

Slides dalle lezioni del corso di Strumenti e applicazioni del Web per il corso di laurea magistrale in Teoria e tecnologia della comunicazione - Università di Milano Bicocca (prof. R.Polillo) - lezione del 18 marzo 2014

Statistics

Views

Total Views
579
Views on SlideShare
292
Embed Views
287

Actions

Likes
1
Downloads
22
Comments
0

1 Embed 287

http://corsow.wordpress.com 287

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • A World-Wide-Web scenario is introduced in this exampl. Reading a WWW page, the user would like to trace a hyperlink expression. He or she glances at the word of interest and the new web page will appear, showing a spatial link to the previous page. The current page starts to move a bit away from the user (until the user decides not to follow this link, what will cause the new page to disappear). In that way the user can create a 3-D tree with web pages, read and - at the same time - get an overview of the history. Older pages can be addressed by the eyes and the whole tree moves, so that the text on this page becomes readable. Obviously, this arrangement contains many occlusions and, in fact, its 2-D representation will look confusing. A much better result is obtained, when this scene is shown on a 3-D display with motion parallax. Then, the user can move his or her head in order to look at previously occluded pages. <br /> Robert Skerjanc and Siegmund Pastoor, New generation of 3-D desktop computer interfaces , Electronic Imaging 1997, IEEE&SPIE, San Jose. <br /> http://atwww.hhi.de/~blick/Papers/New_generation_of_3-D_desktop_/new_generation_of_3-d_desktop_.html <br />

6. Il browser 6. Il browser Presentation Transcript

  • Edizione 2013-14 Università degli Studi di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione Corso di Strumenti e applicazioni del Web 6. Il browser Roberto Polillo
  • 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 R.Polillo - Marzo 2014 4
  • Un rendering complesso… R.Polillo - Marzo 2014 5 link RENDERING BROWSER
  • Architettura di un browser R.Polillo - Marzo 2014 6 Da: Grosskurth, Godfrey, Architecture and evolution of the modern web browser (in rete) Browser
  • Architettura di un browser R.Polillo - Marzo 2014 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 R.Polillo - Marzo 2014 8
  • Marc Andreesen (1971 -…) R.Polillo - Marzo 2014 9 Andreesen – Horowitz: venture capital con partecipazioni in Ning, Facebook, Foursquare, Twitter, Skype, Pinterest, Groupon, Zynga, ….
  • Browser timeline R.Polillo - Marzo 2014 10 200 8 Chrome Da:Grosskurth,Godfrey,Architectureandevolution ofthemodernwebbrowser(inrete) I browser war II broser war III browser war
  • 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 27 R.Polillo - Marzo 2014 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: http://en.wikipedia.org/wiki/Usage_share_of_web_browsers R.Polillo - Marzo 2014 14 88.6 %
  • Browser user share (Italia, non mobile) R.Polillo - Marzo 2014 15 Fonte: StatCounter
  • Mobile browser (ultimi 5 anni) R.Polillo - Marzo 2014 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… R.Polillo - Marzo 2014 17
  • HTML e CSS: evoluzione R.Polillo - Marzo 2014 18 http://www.jasonspeaking.com/index.php/2010/04/the-evolution-of-html-css/ HTML5 CSS4 (?)
  • Standards: a moving target R.Polillo - Marzo 2014 19 t Definizione della nuova tecnologia Standard 0 Standard 1 draft draft deprecated Standard 2 features stric t transition al 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! 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) R.Polillo - Marzo 2014 20
  • Interfaccia utente: basics R.Polillo - Marzo 2014 21 URL Pagin a web Navigazion e •Indietro •Avanti •Refresh •History
  • Mosaic R.Polillo - Marzo 2014 22
  • Interfaccia utente Necessità di operare contemporaneamente su più pagine R.Polillo - Marzo 2014 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)
  • R.Polillo - Marzo 201424
  • Evoluzione del browser R.Polillo - Marzo 2014 25 Mosai c Explorer Firefox Safari Tabbed browsin g
  • Evoluzione del browser R.Polillo - Marzo 2014 26 Mosai c Explorer Firefox Safari Tabbed browsin g Richiamo a motore di ricerca
  • Tabbed browsing: esempi R.Polillo - Marzo 2014 27 Firefox 3.6 Explorer 8.0
  • Evoluzione del browser R.Polillo - Marzo 2014 28 Mosai c Explorer Firefox Safari Tabbed browsin g Chrome detac h
  • Chrome R.Polillo - Marzo 2014 29 http://www.youtube.com/watch?v=WoynSZNQxJs&feature=related (in italiano)
  • Multi-tasking R.Polillo - Marzo 2014 30 Il browser diviente una sorta di sistema operativo (vedi Google Chrome OS – Chromium) Processi separati, ma con cronologia comune
  • Google Chrome Omnibox 31
  • Online browser support 32 HTTP internet Browser Web server HTML HTML GOOGLE Servizi online al browser
  • Online browser support 33 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 ?
  • Chrome: impostazioni di sincronizzazione R.Polillo - Marzo 2014 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) R.Polillo - Marzo 2014 35
  • Social bookmarking services 36 HTTP internet Browser Web server HTML HTML GOOGLE Servizi online al browser Browser Boomarks db www.delicious.com
  • www.delicious.com 37  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 R.Polillo - Marzo 2014
  • 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/ R.Polillo - Marzo 2014 38
  • 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 R.Polillo - Marzo 2014 39
  • Esensioni: Liquid (Precedentemente: Hyperwords) http://www.liquid.info (video 2'19") R.Polillo - Marzo 2014 40
  • Privacy ? R.Polillo - Marzo 2014 41 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 R.Polillo - Marzo 2014 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.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 R.Polillo - Marzo 2014 43