Wrong confirmation ID

Email
Favorite
Favorited ×
Download
Embed
Private Content
Copy and paste this code into your blog or website Copy Customize… Close
We have emailed the verification/download link to "".
Login to your email and click the link to download the file directly.

To request the link at a different email address, update it here. Close
Validation messages. Success message. Fail message.

Check your bulk/spam folders if you can't find our mail.

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

+ Follow

Visualizing data on web

by Matjaž Horvat on Jun 01, 2010

1,022 views

What technologies to use when visualizing data on web.

More…

What technologies to use when visualizing data on web.

Less

3 Embeds 186

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

Statistics

Favorites: 0
Downloads: 10
Comments: 0
Embed Views: 186
Views on SlideShare: 836
Total Views: 1,022

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 — 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/

Visualizing data on web

by Matjaž Horvat on Jun 01, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 186

Statistics

Visualizing data on web — Presentation Transcript