7. Il browser

2,736 views
2,666 views

Published on

Slides dal corso “Strumenti e applicazioni del Web”, di R.Polillo, Università di Milano Bicocca, ottobre 2011

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,736
On SlideShare
0
From Embeds
0
Number of Embeds
317
Actions
Shares
0
Downloads
71
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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. Robert Skerjanc and Siegmund Pastoor, New generation of 3-D desktop computer interfaces , Electronic Imaging 1997, IEEE&SPIE, San Jose. http://atwww.hhi.de/~blick/Papers/New_generation_of_3-D_desktop_/new_generation_of_3-d_desktop_.html
  • WebBook (Xerox Parc)
  • 7. Il browser

    1. 1. Edizione 2011-12 Università degli Studi di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione Corso di Strumenti e applicazioni del Web 7. Il browser Roberto Polillo
    2. 2. Queste slides <ul><li>Queste slides fanno parte del corso “Strumenti e applicazioni del Web”. Il sito del corso, con il materiale completo, si trova in www.corsow.wordpress.com . Data la rapida evoluzione della rete, il corso viene aggiornato ogni anno. </li></ul><ul><li>Il presente materiale è pubblicato con licenza Creative Commons “Attribuzione - Non commerciale - Condividi allo stesso modo - 2.5 Italia”: </li></ul><ul><li>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. Il corso è la estensione di un mio corso precedente, denominato &quot;Design dell'Interazione&quot;, tenuto a partire dal 2008, la cui prima edizione era basata su un corso tenuto da Carlo Vaccari all’Università di Camerino nel 2007. </li></ul>R.Polillo - Ottobre 2011
    3. 3. Riassunto della lezione precedente <ul><li>Web = Internet + Ipertesti + HTTP + HTML + URI </li></ul>R.Polillo - Ottobre 2011
    4. 4. Il browser <ul><li>E' lo strumento base per accedere al Web </li></ul><ul><li>to browse : curiosare, sfogliare, dare una scorsa </li></ul><ul><li>E' una macchina complessa, soggetta a continua evoluzione </li></ul><ul><li>Ne esistono diversi, in continua competizione per incrementare le loro quote di mercato </li></ul><ul><li>Il progenitore: World Wide Web (poi chiamato Nexus) di Tim Berners-Lee ( 1991) </li></ul><ul><li>L'esito della &quot;guerra dei browser&quot; è fondamentale per il posizionamento sul mercato di Internet http://en.wikipedia.org/wiki/Browser_wars </li></ul>R.Polillo - Ottobre 2011
    5. 5. Il browser Internet PC R.Polillo - Ottobre 2011 Host web server File (HTML) browser
    6. 6. Un rendering complesso… R.Polillo - Ottobre 2011 link CLIENT
    7. 7. Mosaic <ul><li>Sviluppato a partire dalla fine 1992 al NCSA (National Center for Supercomputing Applications) dell'Università dell'Illinois a Urbana-Champaign, da Marc Andreessen e altri, influenzò profondamente i browser successivi </li></ul>R.Polillo - Ottobre 2011
    8. 8. Browser timeline R.Polillo - Ottobre 2011 2008 Chrome Da: Grosskurth, Godfrey, Architecture and evolution of the modern web browser (in rete)
    9. 9. Le &quot;browser wars&quot; <ul><li>Il controllo del browser leader di mercato fornisce un vantaggio competitivo molto forte </li></ul><ul><li>Per vincere: </li></ul><ul><ul><li>Gratuità </li></ul></ul><ul><ul><li>New [proprietary] features -> indebolimento degli standard </li></ul></ul><ul><li>Le tre guerre: </li></ul><ul><ul><li>(1995-1998) Explorer vs Netscape </li></ul></ul><ul><ul><li>(2004- ) Firefox vs Explorer </li></ul></ul><ul><ul><li>(2008 - ) Chrome vs Firefox/Explorer </li></ul></ul>R.Polillo - Ottobre 2011
    10. 10. Browser wars R.Polillo - Ottobre 2011 Fonte: http://en.wikipedia.org/wiki/Browser_wars Mozilla foundation Rilascio di Safari Rislascio di Firefox Rislascio di Chrome Rilascio di Explorer US vs MS trial
    11. 11. Usage share <ul><li>La % di utenti che usano un certo browser </li></ul><ul><li>Le varie metodiche di misura determinano risultati molto diversi: conviene utilizzare varie fonti e calcolarne la mediana </li></ul><ul><li>A agosto 2011: - Internet Explorer: 38.9% - Firefox: 25.5% - Google Chrome: 20.2% - Safari: 7.7% - Mobile browsers: 7.1% </li></ul><ul><li>( Fonte: http://en.wikipedia.org/wiki/Usage_share_of_web_browsers ) </li></ul>R.Polillo - Ottobre 2011 84.6%
    12. 12. Evoluzione recente della user share R.Polillo - Ottobre 2011 http://gs.statcounter.com/#browser-ww-yearly-2008-2011 (widget embeddable)
    13. 13. … e in Europa R.Polillo - Ottobre 2011 http://gs.statcounter.com/#browser-eu-yearly-2008-2011 (embeddable widget)
    14. 14. Conformità agli standard <ul><li>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 </li></ul><ul><li>Il W3C emette e aggiorna gli standard del Web (&quot;Recommendations&quot;) che dovrebbero essere seguiti dagli sviluppatori dei siti e dei browser </li></ul><ul><li>Ma… </li></ul>R.Polillo - Ottobre 2011
    15. 15. HTML e CSS: evoluzione R.Polillo - Ottobre 2011 http://www.jasonspeaking.com/index.php/2010/04/the-evolution-of-html-css /
    16. 16. Standards: a moving target R.Polillo - Ottobre 2011 t Definizione della nuova tecnologia Standard 0 Standard 1 draft draft deprecated Standard 2 features strict transitional prodotti
    17. 17. Acid tests <ul><li>Rapidi test di conformità dei browser agli standard W3C </li></ul><ul><li>Sviluppati dal WaSP http://en.wikipedia.org/wiki/Web_Standards_Project </li></ul><ul><li>Provali e vedi risultati in http://www.sciactive.com/main/acid-test-results </li></ul>R.Polillo - Ottobre 2011 Acid1 Acid2 Acid3
    18. 18. Esempio: IE 6 R.Polillo - Ottobre 2011
    19. 19. Architettura di un browser R.Polillo - Ottobre 2011 Da: Grosskurth, Godfrey, Architecture and evolution of the modern web browser (in rete) Browser
    20. 20. Architettura di un browser R.Polillo - Ottobre 2011 Da: Grosskurth, Godfrey, Architecture and evolution of the modern web browser (in rete) Store/retrieve bookmarks, cookies, settings, … HTTP handling Visual representation of a given URI Navigation support Toolbars, menu, …
    21. 21. Complessità dei browser R.Polillo - Ottobre 2011 Da: Grosskurth, Godfrey, Architecture and evolution of the modern web browser (in rete)
    22. 22. Interfaccia utente: basics R.Polillo - Ottobre 2011 URL Pagina web <ul><li>Navigazione </li></ul><ul><li>Indietro </li></ul><ul><li>Avanti </li></ul><ul><li>Home </li></ul><ul><li>Refresh </li></ul><ul><li>History </li></ul>
    23. 23. Mosaic R.Polillo - Ottobre 2011
    24. 24. Interfaccia utente <ul><li>Necessità di operare contemporaneamente su più pagine </li></ul>R.Polillo - Ottobre 2011 Modello desktop : più browser attivi in finestre differenti (ma ogni finestra ha una storia separata) Oppure sostituisco il modello del desktop con modelli differenti…
    25. 25. R.Polillo - Ottobre 2011
    26. 26. Il bookcase per i WebBook R.Polillo - Ottobre 2011
    27. 27. WebBook link esterni al WebBook (chiude il libro e ne apre un altro) link interni al WebBook (sfoglia il libro) R.Polillo - Ottobre 2011
    28. 28. Sfogliare le pagine di un WebBook R.Polillo - Ottobre 2011
    29. 29. Web Forager Livello 1: Focus Place per interazione diretta con il contenuto Livello 2: Immediate Memory Place per il materiale in uso (spostamento in 3D) Livello 3: Tertiary Storage per WebBooks usati di recente R.Polillo - Ottobre 2011
    30. 30. Evoluzione del browser R.Polillo - Ottobre 2011 Mosaic Explorer Firefox Safari Tabbed browsing
    31. 31. Evoluzione del browser R.Polillo - Ottobre 2011 Mosaic Explorer Firefox Safari Tabbed browsing Richiamo a motore di ricerca
    32. 32. Tabbed browsing: esempi R.Polillo - Ottobre 2011 Firefox 3.6 Explorer 8.0
    33. 33. Evoluzione del browser R.Polillo - Ottobre 2011 Mosaic Explorer Firefox Safari Tabbed browsing Chrome detach
    34. 34. Multi-tasking R.Polillo - Ottobre 2011 Il browser diviente una sorta di sistema operativo Processi separati, ma con cronologia comune
    35. 35. Chrome R.Polillo - Ottobre 2011 http://www.youtube.com/watch?v=WoynSZNQxJs&feature=related
    36. 36. Google Chrome OS <ul><li>Linux-based OS per cloud computers sviluppati da parteners di Google </li></ul><ul><li>Annunciato nel 2009, open source </li></ul><ul><li>Chromebook, shipping mid 2011 </li></ul>R.Polillo - Ottobre 2011
    37. 37. Google Chrome Omnibox R.Polillo - Ottobre 2011 Internet Client Online browser support
    38. 38. Evoluzione di Firefox (mockup FF 10) R.Polillo - Ottobre 2011
    39. 39. Online browser support: privacy? R.Polillo - Ottobre 2011 <ul><li>Info inviate (se non disattivate): </li></ul><ul><li>Info typed in omnibox -> search engine </li></ul><ul><li>Browser settings -> google personal account (preferences, bookmarks, stored passwords, …) </li></ul><ul><li>Testi da tradurre -> google translate </li></ul><ul><li>Usage statistics -> google databases </li></ul><ul><li>http://www.google.com/chrome/intl/en/privacy.html </li></ul> Internet Client Online browser support
    40. 40. Chrome: sync feature R.Polillo - Ottobre 2011
    41. 41. Bookmarks <ul><li>Bookmarks (preferiti, favorites, hot lists,…): URL memorizzati nel browser per rapido accesso (a partire da Mosaic) </li></ul><ul><li>Vengono memorizzati localmente (se non sincronizzati: Chrome), a meno che… </li></ul><ul><li>Social bookmarking : servizi online, mettono in comune bookmarks di più utenti </li></ul>R.Polillo - Ottobre 2011
    42. 42. Social bookmarking R.Polillo - Ottobre 2011 Social bookmarking service Bookmarks Esempio : www.delicious.com
    43. 43. www.delicious.com <ul><li>Fondato nel 2003, acquisito da Yahoo! Nel 2005, venduto ai fondatori di YouTube (Avos Systems) nel 2011 (nuova versione in beta) </li></ul><ul><li>Tags, stacks </li></ul>R.Polillo - Ottobre 2011
    44. 44. Social browsers <ul><li>Esempio: www.rockmelt.com </li></ul><ul><li>&quot;Not your mom's browser&quot; </li></ul><ul><li>http://www.youtube.com/watch?v=bAPKPhoTqFY&feature=player_embedded# ! </li></ul>R.Polillo - Ottobre 2011
    45. 45. Estensioni (add-on, plugin, …) <ul><li>Componenti aggiuntivi che possono essere installati sul browser per fornire specifiche funzionalità </li></ul><ul><li>Esempi: </li></ul><ul><ul><li>Chrome: https://chrome.google.com/webstore?hl=it </li></ul></ul><ul><ul><li>Firefox: https://addons.mozilla.org/it/firefox/ </li></ul></ul>R.Polillo - Ottobre 2011
    46. 46. Esempio <ul><li>Hyperwords </li></ul><ul><li>http://www.hyperwords.net/index.html </li></ul>R.Polillo - Ottobre 2011
    47. 47. Privacy ? R.Polillo - Ottobre 2011 Servizi attivati dalle estensioni del browser Sito visitato Internet
    48. 48. Lavoro individuale <ul><li>&quot;Esplorate&quot; il vostro browser (attenzione: usate l'ultima versione!), sperimentando le funzioni che non usate mai </li></ul><ul><li>Cercate le estensioni per voi più interessanti, ed installatele </li></ul><ul><li>Segnalatele nel WikiBook </li></ul>R.Polillo - Ottobre 2011

    ×