Visualizing data on web

1,318
-1

Published on

What technologies to use when visualizing data on web.

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,318
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Predstaviti želim katere tehnologije so na voljo za prikaz naprednih grafik, animacij in interakcij v brskalniku ter katere so njihove pogoste značilnosti.
  • - Najstarejši način je z uporabo vtičnikov ali po slovensko plug-inov.
    - To so zunanje binarne komponente, ki razširjajo zmogljivosti brskalnika.
    - Za razliko od razširitev ne spreminjajo krame, ampak vplivajo predvsem na večpredstavnost in prikazovanje strani.
  • - Že od leta 1995, ko je nastala Java.
    - Na voljo so v obliki bytecode in tečejo v brskalniku z uporabo JVM.
    - Počasni, ker se mora zagnati še JRE.
  • - Zakonsko zaščitena programska oprema (proprietary).
    - Zadolžen za 50% sesutij Firefoxa.
    - Porabi veliko sistemskih virov.
  • - Microsoftov odgovor na Flash, podobne prednosti in slabosti.
  • Za vse naštete plugine velja:
    - Closed source != hackable != open web != innovation.
  • Kaj ponujajo brskalniki out-of-the-box?
    - W3C standardi kot nadomestek za plugine.
  • - vektorska grafika, dve specifikaciji, ki temeljita na XML:
    + VML: poslan na W3C leta 1998, razvoj ustavljen leta 1998, podprt v IE5+.
    + SVG: v razvoju od leta 1999, podpirajo vsi brskalniki razen IE9-, tudi rasterska grafika in tekst.
    - rasterska grafika: canvas: v brskalnikih od leta 2009, del HTML5, ni podprt v IE.
  • - SVG: vsak lik se shrani kot objekt v DOM in s spreminjanjem atributov dosežemo samodejen ponovni izris grafike, ki ga zazna brskalnik.
    - canvas: lik se samo izriše in ko spreminjamo npr. položaj, moramo ponovno izrisati celotno sceno.
    EVENTS: v SVG lahko dogodke obesimo na objekte (like), pri canvas pa moramo uporabiti koordinate.
  • Poglejmo si nekaj knjižnic v JavaScriptu za delo s SVG.
    - jQuery SVG uporablja sintaksto jQuery za delo s SVG (SVG je XML).
    - Ne pomaga nam v IE, kjer SVG ni podprt.
    - Ima razširitev za risanje grafov.
    - Zelo grdi primeri.
  • - SVG Web je izdelal Google.
    - Kjer je mogoče, uporablja SVG, sicer pa Flash.
    - Torej v IE in tudi v drugih brskalnikih, če je njihova podpora za SVG manj zmogljiva kot v SVG web.
  • - Raphaël uporablja SVG in VML: to pomeni da podpira IE.
    - Pregleden in dobro dokumentiran API + aktiven razvoj.
    - Veliko zelo lepih primerov in demonstracij.
    - Odličen za animacije in uporabo dogodkov.
    - Plugin za risanje grafov gRaphaël.
  • Katere knjižnice lahko uporabimo za lažje delo z elementom canvas?
  • - Knjižnica za risanje grafov s pomočjo jQueryja.
    - Dela v vseh brskalnikih, ki podpirajo canvas (v IE se poslužuje emulacije excanvas v Javascriptu).
    - Preprosta uporaba (vse nastavitve so izbirne).
    - Interakcija (povečava in dogodki miške).

  • - Processing je jezik za vizualizacijo podatkov, napisan v Javi: objekti, dedovanje...
    - Processing.js je implementacija Processinga v JS z uporabo canvasa, avtorja Johna Resiga.
    - Processing.js je kul, ampak le za demo bleeding-edge tehnologij, ker ne deluje v IE.


  • Visualizing data on web

    1. 1. Visualizing data on web Matjaž Horvat, Marand Lab
    2. 2. Plug-ins
    3. 3. Java applets Butt-ugly. Assassinated by the usual suspect.
    4. 4. Flash Beautiful nightmare.
    5. 5. Silverlight Beautiful nightmare. Made by the usual suspect.
    6. 6. Plug-ins Java Applet Flash Silverlight
    7. 7. W3C standards Plug-ins Java Applet Flash Silverlight
    8. 8. W3C standards Vector: VML and SVG Bitmap: canvas Plug-ins Java Applet Flash Silverlight
    9. 9. SVG Canvas High level Low level Shape as DOM object Drawn and forgotten Tree of objects Pixels Object events Coordinates Medium animation High animation Data stores Games 20% faster
    10. 10. jQuery SVG A jQuery plugin that lets you manipulate the SVG from JavaScript. Doesn’t work in the usual suspect’s browser.
    11. 11. SVG Web Scalable Vector Graphics for Web Browsers using Flash? -Nein, danke.
    12. 12. Raphaël SVG W3C Recommendation and VML as a base for creating graphics. Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
    13. 13. W3C standards Vector: VML and SVG jQuery SVG SVG web Raphäel Bitmap: canvas Plug-ins Java Applet Flash Silverlight
    14. 14. Flot The focus is on simple usage, attractive looks and interactive features. Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
    15. 15. Processing.js For people who want to program images, animation, and interactions. Doesn’t work in the usual suspect’s browser.
    16. 16. W3C standards Vector: VML and SVG jQuery SVG SVG web Raphäel Bitmap: canvas Flot Processing.js Plug-ins Java Applet Flash Silverlight
    17. 17. Image sources http://www.flickr.com/photos/ecpica/3406645502/sizes/l/ http://www.skinz.org/celebrity/britney-spears/britney-spears-wallpapers-3.jpg http://www.wayfarergallery.net/hot-images/wp-content/uploads/2010/01/Paris-paris-hilton-214326_1024_768.jpg http://www.flickr.com/photos/ecpica/4333020308/sizes/l/ http://www.flickr.com/photos/stuckincustoms/4323977677/sizes/l/ http://en.wikipedia.org/wiki/File:Sanzio_01.jpg http://www.psdgraphics.com/file/red-business-graph.jpg http://www.flickr.com/photos/14722619@N07/4156422776/sizes/o/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×