• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Visualizing data on web
 

Visualizing data on web

on

  • 1,644 views

What technologies to use when visualizing data on web.

What technologies to use when visualizing data on web.

Statistics

Views

Total Views
1,644
Views on SlideShare
1,360
Embed Views
284

Actions

Likes
0
Downloads
16
Comments
0

3 Embeds 284

http://lab.marand.com 270
http://www.slideshare.net 13
http://webcache.googleusercontent.com 1

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

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

Visualizing data on web Visualizing data on web Presentation Transcript

  • Visualizing data on web Matjaž Horvat, Marand Lab
  • Plug-ins
  • Java applets Butt-ugly. Assassinated by the usual suspect.
  • Flash Beautiful nightmare.
  • Silverlight Beautiful nightmare. Made by the usual suspect.
  • Plug-ins Java Applet Flash Silverlight
  • W3C standards Plug-ins Java Applet Flash Silverlight
  • W3C standards Vector: VML and SVG Bitmap: canvas Plug-ins Java Applet Flash Silverlight
  • 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
  • jQuery SVG A jQuery plugin that lets you manipulate the SVG from JavaScript. Doesn’t work in the usual suspect’s browser.
  • SVG Web Scalable Vector Graphics for Web Browsers using Flash? -Nein, danke.
  • 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+.
  • W3C standards Vector: VML and SVG jQuery SVG SVG web Raphäel Bitmap: canvas Plug-ins Java Applet Flash Silverlight
  • 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+.
  • Processing.js For people who want to program images, animation, and interactions. Doesn’t work in the usual suspect’s browser.
  • W3C standards Vector: VML and SVG jQuery SVG SVG web Raphäel Bitmap: canvas Flot Processing.js Plug-ins Java Applet Flash Silverlight
  • 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/