The document discusses various options for visualizing data on the web, including plugins like Java applets and Flash, as well as W3C standards like SVG, Canvas, jQuery SVG, Raphaël, Flot and Processing.js. It notes that plugins are generally not as standards compliant as W3C options and may not work across all browsers. The W3C options provide both vector and bitmap capabilities for visualizing data on the web.
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. jQuery SVG
A jQuery plugin that lets you manipulate the SVG from JavaScript.
Doesn’t work in the usual suspect’s browser.
11. SVG Web
Scalable Vector Graphics for Web Browsers using Flash?
-Nein, danke.
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. W3C standards
Vector: VML and SVG
jQuery SVG
SVG web
Raphäel
Bitmap: canvas
Plug-ins
Java Applet
Flash
Silverlight
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. Processing.js
For people who want to program images, animation, and interactions.
Doesn’t work in the usual suspect’s browser.
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.