Download as KEY, PPTX
Uploaded byMatjaž Horvat
Visualizing data on web
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.
Visualizing data on web
- 1. Visualizing data onweb Matjaž Horvat, Marand Lab
- 2.
- 3. Java applets Butt-ugly. Assassinated by the usual suspect.
- 4. Flash Beautiful nightmare.
- 5. Silverlight Beautiful nightmare. Made by the usual suspect.
- 6. Plug-ins Java Applet Flash Silverlight
- 7. W3C standards Plug-ins JavaApplet Flash Silverlight
- 8. W3C standards Vector: VML and SVG Bitmap: canvas Plug-ins Java Applet Flash Silverlight
- 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 SVGW3C 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 Thefocus 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 Forpeople who want to program images, animation, and interactions. Doesn’t work in the usual suspect’s browser.
- 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.
Editor's Notes
- #2 Predstaviti želim katere tehnologije so na voljo za prikaz naprednih grafik, animacij in interakcij v brskalniku ter katere so njihove pogoste značilnosti.
- #3 - 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.
- #4 - Ž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.
- #5 - Zakonsko zaščitena programska oprema (proprietary). - Zadolžen za 50% sesutij Firefoxa. - Porabi veliko sistemskih virov.
- #6 - Microsoftov odgovor na Flash, podobne prednosti in slabosti.
- #7 Za vse naštete plugine velja: - Closed source != hackable != open web != innovation.
- #8 Kaj ponujajo brskalniki out-of-the-box? - W3C standardi kot nadomestek za plugine.
- #9 - 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.
- #10 - 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.
- #11 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.
- #12 - 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.
- #13 - 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.
- #14 Katere knjižnice lahko uporabimo za lažje delo z elementom canvas?
- #15 - 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).
- #16 - 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.