Your SlideShare is downloading. ×
  • Like
4. I browser
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

4. I browser

  • 856 views
Published

Slides dalle lezioni del corso "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 "Strumenti e applicazioni del Web" per il corso di laurea magistrale in Teoria e tecnologia della comunicazione - Università di Milano Bicocca - Prof.R.Polillo - A.A.2012-13
Lezione 4 del 12 e 13 marzo 2013

Published in Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
856
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
46
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

Transcript

  • 1. Università degli Studi di Milano BicoccaDipartimento di Informatica, Sistemistica e ComunicazioneCorso di Strumenti e applicazioni del Web4. Il browserRoberto Polillo Edizione 2012-13
  • 2. Il browser4  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  Lesito delle "guerre dei browser" è fondamentale per il posizionamento sul mercato di Internet R.Polillo - Marzo 2013
  • 3. Architettura di un browser6 Browser Da: Grosskurth, Godfrey, Architecture and evolution of the modern web browser (in rete) R.Polillo - Marzo 2013
  • 4. Architettura di un browser7 Navigation Toolbars, menu, Store/retrieve support … bookmarks, cookies, Visual settings, … representation of a given URI HTTP handling Da: Grosskurth, Godfrey, Architecture and evolution of the modern web browser (in rete) R.Polillo - Marzo 2013
  • 5. Mosaic8  Sviluppato a partire dalla fine 1992 al NCSA (National Center for Supercomputing Applications) dellUniversità dellIllinois a Urbana- Champaign, influenzò profondamente i browser successivi  Marc Andreessen, il capo progetto, fondò poi Netscape R.Polillo - Marzo 2013
  • 6. Marc Andreesen9 R.Polillo - Marzo 2013
  • 7. 10 Da: Grosskurth, Godfrey, Architecture and evolution of the modern web browser (in rete) I war browser Browser timeline II war broser III 200 war 8 browser ChromeR.Polillo - Marzo 2013
  • 8. Browser user share (World)13 Fonte: StatCounter: http://bit.ly/113rJDe R.Polillo - Marzo 2013
  • 9. Usage share, oggi14  La % di utenti che usano un certo browser  A gennaio 2013 (fonte StatCounter): - Chrome: 36.5% - Explorer: 30.7% 88.6 - Firefox: 21.4% % - Safari: 8.3% - Altri: 3,1%  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 2013
  • 10. Browser user share (Italia)15 Fonte: StatCounter http://bit.ly/113rJDe R.Polillo - Marzo 2013
  • 11. Mobile browser (ultimi 4 anni)16 Fonte: StatCounter http://bit.ly/X7RGcv R.Polillo - Marzo 2013
  • 12. Conformità agli standard17  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 (www.w3c.org : World Wide Web Consortium, fondato da Tim Berners Lee nel 1994) emette e aggiorna gli standard del Web ("Recommendations")  Questi dovrebbero essere seguiti dagli sviluppatori dei siti e dei browser, ma… R.Polillo - Marzo 2013
  • 13. HTML e CSS: evoluzione18 HTML5 CSS4 (?)http://www.jasonspeaking.com/index.php/2010/04/the-evolution-of-html-css/ R.Polillo - Marzo 2013
  • 14. Standards: a moving target19 Standard 0 Standard 1 Standard 2 features draft stric t transition draft al deprecated t Definizione della nuova tecnologia prodotti R.Polillo - Marzo 2013
  • 15. Test di conformità / compatibilità20 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: Un servizio online gratuito per vedere come una pagina Web viene visualizzata dai diversi browser http://browserlab.adobe.com R.Polillo - Marzo 2013
  • 16. Interfaccia utente: basics21 Navigazion URL e •Indietro •Avanti •Home Pagin •Refresh a web •History R.Polillo - Marzo 2013
  • 17. Mosaic22 R.Polillo - Marzo 2013
  • 18. Interfaccia utente23 Necessità di operare contemporaneamente su più pagine Modello desktop: Nuovo modello: più browser attivi il browser gestisce in finestre differenti più (ogni finestra finestre ha una storia (con una cronologia separata) comune) R.Polillo - Marzo 2013
  • 19. 24 R.Polillo - Marzo 2013
  • 20. Evoluzione del browser25 Tabbed browsin g Mosai c Explorer Firefox Safari R.Polillo - Marzo 2013
  • 21. Evoluzione del browser26 Richiamo a motore di ricerca Tabbed browsin g Mosai c Explorer Firefox Safari R.Polillo - Marzo 2013
  • 22. Tabbed browsing: esempi27 Explorer 8.0 Firefox 3.6 R.Polillo - Marzo 2013
  • 23. Evoluzione del browser28 Tabbed browsin g Mosai detac h c Explorer Firefox Safari Chrome R.Polillo - Marzo 2013
  • 24. Chrome29 http://www.youtube.com/watch?v=WoynSZNQxJs&feature=related (in italiano) R.Polillo - Marzo 2013
  • 25. Multi-tasking30 Processi separati, ma con cronologia comune Il browser diviente una sorta di sistema operativo (vedi Google Chrome OS – Chromium) R.Polillo - Marzo 2013
  • 26. Google Chrome Omnibox31
  • 27. Online browser support32 GOOGLE Servizi online al browser HTML Browser internet HTTP Web server HTML
  • 28. Online browser support Privacy33 Info inviate (se non disattivate):  Info typed in omnibox → search engine ?  Browser settings → google personal account GOOGLE (preferences, bookmarks, stored passwords, …) Servizi online  Testi da tradurre → google translate al browser  Usage statistics → google databases http://www.google.com/chrome/intl/en/privacy.html HTML Browser internet HTTP Web server HTML
  • 29. Chrome: impostazioni di sincronizzazione34 R.Polillo - Marzo 2013
  • 30. Bookmarks35  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 2013
  • 31. Social bookmarking services36 Boomarks db GOOGLE Servizi online www.delicious.com al browser HTML Browser internet HTTP Web Browser server HTML
  • 32. www.delicious.com37  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 2013
  • 33. Estensioni al browser38  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 2013
  • 34. Estensioni: esempi39  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 unimmagine 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 2013
  • 35. Esensioni: Hyperwords40  http://www.hyperwords.net/index.html http://www.youtube.com/watch? v=p6B9ZNI4vY0&feature=player_embedded R.Polillo - Marzo 2013
  • 36. Privacy ?41 Servizi attivati dalle estensioni del browser Internet Sito visitato R.Polillo - Marzo 2013
  • 37. Sintesi della lezione42  I browser sono macchine complesse  Avere il monopolio dei browser dà un forte vantaggio competitivo sul mercato Internet  Guerra dei browser vs evoluzione degli standard  Convergenza dei browser e 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 2013
  • 38. Lavoro individuale43  È ora di scegliere consapevolmente il vostro browser. "Esplorate" con attenzione quello che usate, e confrontatelo con una alternativa possibile (attenzione: usate lultima 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 2013