Your SlideShare is downloading. ×
0
Interactive Vector Graphics in the Browser
<ul><ul><li>Without Plugin </li></ul></ul><ul><ul><li>HTML, VML, SVG, Canvas </li></ul></ul><ul><ul><li>With Plugin  </li>...
Without Plugin <ul><li>HTML-“hacking“ </li></ul><ul><ul><li><div> with CSS, images </li></ul></ul><ul><li>Mark-up language...
Graphics using HTML <ul><li><div> , CSS und  position:absolute; </li></ul><ul><ul><li>Walter Zorn  http://www.walterzorn.d...
Graphics using HTML <ul><li>Combinations with server-side graphics </li></ul><ul><ul><li>http://thinkature.com/   </li></u...
VML <ul><li>Vector Markup Language </li></ul><ul><li>by Microsoft and Macromedia </li></ul><ul><li>Internet Explorer </li>...
VML code example <ul><ul><li><html xmlns:v=&quot;urn:schemas-microsoft-com:vml&quot;> </li></ul></ul><ul><ul><li><body> </...
VML example <ul><li>Google Maps drawings in IE </li></ul><ul><ul><li>http://maps.google.com/maps?f=d&saddr=M%C3%BCnchen&da...
SVG <ul><li>Scalable Vector Graphics </li></ul><ul><li>specified by W3C  (VML- and PGML-Authors involved) </li></ul><ul><l...
SVG code example <ul><li><?xml version=&quot;1.0&quot;?> </li></ul><ul><li><!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1/...
SVG examples <ul><li>Google Maps in all „other“ browsers </li></ul><ul><ul><li>http://maps.google.com/maps?f=d&saddr=M%C3%...
Canvas <ul><li>Originally by Apple, now in HTML 5 </li></ul><ul><li>Firefox, Opera, Safari, etc. </li></ul><ul><ul><li>Plu...
<ul><li>var canvas = document.getElementById('tutorial'); </li></ul><ul><li>var ctx = canvas.getContext('2d'); </li></ul><...
Canvas <ul><li>Problems, e.g.:  </li></ul><ul><ul><li>Developed for static images  </li></ul></ul><ul><ul><li>Animations t...
Canvas Examples <ul><li>3D movie  </li></ul><ul><ul><li>http://antisocial.demozoo.org/ </li></ul></ul><ul><li>Ego shooter ...
Cross-browser JavaScript Libs <ul><li>svg2vml  http://code.google.com/p/svg2vml/ </li></ul><ul><li>ExtJS Extension http://...
With Plugin <ul><li>Flash </li></ul><ul><ul><li>Standard Flash and others </li></ul></ul><ul><ul><li>Flex  http://www.adob...
Silverlight <ul><li>Plugin by Microsoft </li></ul><ul><ul><li>Win and Mac, moonlight for Linux </li></ul></ul><ul><ul><li>...
Further Sources <ul><li>VML and SVG code examples:  http://de.wikipedia.org/wiki/Vector_Markup_Language </li></ul><ul><li>...
Upcoming SlideShare
Loading in...5
×

Interactive Vector-Graphics in the Browser

6,097

Published on

How do google maps' or yahoo pipes' interactive browser graphics work? What can I use to code something similiar without having to use browser plugins?
An overview and link-collection about client side generated vector graphics in the browser.

Presentation was given at Barcamp Berlin 2008.

(cc) by Silvan T. Golega
http://creativecommons.org/licenses/by/3.0/de/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
6,097
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
50
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Transcript of "Interactive Vector-Graphics in the Browser"

    1. 1. Interactive Vector Graphics in the Browser
    2. 2. <ul><ul><li>Without Plugin </li></ul></ul><ul><ul><li>HTML, VML, SVG, Canvas </li></ul></ul><ul><ul><li>With Plugin </li></ul></ul><ul><ul><li>Flash, Java, Silverlight </li></ul></ul>
    3. 3. Without Plugin <ul><li>HTML-“hacking“ </li></ul><ul><ul><li><div> with CSS, images </li></ul></ul><ul><li>Mark-up languages </li></ul><ul><ul><li>VML and SVG </li></ul></ul><ul><li>Instruction-oriented </li></ul><ul><ul><li>Canvas, dojo.gfx, and others </li></ul></ul>
    4. 4. Graphics using HTML <ul><li><div> , CSS und position:absolute; </li></ul><ul><ul><li>Walter Zorn http://www.walterzorn.de/jsgraphics/jsgraphics.htm </li></ul></ul>
    5. 5. Graphics using HTML <ul><li>Combinations with server-side graphics </li></ul><ul><ul><li>http://thinkature.com/ </li></ul></ul>
    6. 6. VML <ul><li>Vector Markup Language </li></ul><ul><li>by Microsoft and Macromedia </li></ul><ul><li>Internet Explorer </li></ul><ul><li>embedded in HTML </li></ul>
    7. 7. VML code example <ul><ul><li><html xmlns:v=&quot;urn:schemas-microsoft-com:vml&quot;> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li><v:oval style=&quot;position: absolute; left: 0; top: 0; </li></ul></ul><ul><ul><li>width: 100px; height: 50px; </li></ul></ul><ul><ul><li>behavior: url(#default#VML);&quot; </li></ul></ul><ul><ul><li>fillcolor=&quot;blue&quot; stroked=&quot;false&quot;> </li></ul></ul><ul><ul><li></v:oval> </li></ul></ul><ul><ul><li></body> </li></ul></ul><ul><ul><li></html> </li></ul></ul>
    8. 8. VML example <ul><li>Google Maps drawings in IE </li></ul><ul><ul><li>http://maps.google.com/maps?f=d&saddr=M%C3%BCnchen&daddr=Berlin&hl=de&geocode=&mra=ls&sll=50.247205,12.304688&sspn=5.178193,11.206055&ie=UTF8&ll=50.34546,12.304688&spn=5.167523,11.206055&z=7 </li></ul></ul>
    9. 9. SVG <ul><li>Scalable Vector Graphics </li></ul><ul><li>specified by W3C (VML- and PGML-Authors involved) </li></ul><ul><li>Native in FireFox, Opera, Safari, etc. </li></ul><ul><li>Plugin for IE by Adobe </li></ul>
    10. 10. SVG code example <ul><li><?xml version=&quot;1.0&quot;?> </li></ul><ul><li><!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot; </li></ul><ul><li>&quot;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&quot;> </li></ul><ul><li><svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;100&quot; height=&quot;50&quot;> </li></ul><ul><li><ellipse cx=&quot;50&quot; cy=&quot;25&quot; rx=&quot;50&quot; ry=&quot;25&quot; style=&quot;fill: blue;&quot; /> </li></ul><ul><li></svg> </li></ul>
    11. 11. SVG examples <ul><li>Google Maps in all „other“ browsers </li></ul><ul><ul><li>http://maps.google.com/maps?f=d&saddr=M%C3%BCnchen&daddr=Berlin&hl=de&geocode=&mra=ls&sll=50.247205,12.304688&sspn=5.178193,11.206055&ie=UTF8&ll=50.34546,12.304688&spn=5.167523,11.206055&z=7 </li></ul></ul><ul><li>RapidRabb.it prototype editor </li></ul><ul><ul><li>http://rapidrabb.it/preview </li></ul></ul>
    12. 12. Canvas <ul><li>Originally by Apple, now in HTML 5 </li></ul><ul><li>Firefox, Opera, Safari, etc. </li></ul><ul><ul><li>Plugin for IE by Novell </li></ul></ul><ul><ul><li>Canvas to VML using JavaScript by Google </li></ul></ul><ul><li>Canvas drawing instructions, no DOM API </li></ul>
    13. 13. <ul><li>var canvas = document.getElementById('tutorial'); </li></ul><ul><li>var ctx = canvas.getContext('2d'); </li></ul><ul><li>ctx.beginPath(); </li></ul><ul><li>ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle </li></ul><ul><li>ctx.moveTo(110,75); </li></ul><ul><li>ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise) </li></ul><ul><li>ctx.moveTo(65,65); </li></ul><ul><li>ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye </li></ul><ul><li>ctx.moveTo(95,65); </li></ul><ul><li>ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye </li></ul><ul><li>ctx.stroke(); </li></ul>(Sample from mozilla.org)
    14. 14. Canvas <ul><li>Problems, e.g.: </li></ul><ul><ul><li>Developed for static images </li></ul></ul><ul><ul><li>Animations through frames </li></ul></ul><ul><ul><li>Catching events e.g. clicks </li></ul></ul><ul><li>Strengths </li></ul><ul><ul><li>Fast </li></ul></ul><ul><ul><li>Extensions (3D, ...) </li></ul></ul>
    15. 15. Canvas Examples <ul><li>3D movie </li></ul><ul><ul><li>http://antisocial.demozoo.org/ </li></ul></ul><ul><li>Ego shooter </li></ul><ul><ul><li>http://www.abrahamjoffe.com.au/ben/canvascape/textures.htm </li></ul></ul><ul><li>Mind mapping </li></ul><ul><ul><li>http://mindmeister.de </li></ul></ul><ul><li>Yahoo Pipes </li></ul><ul><ul><li>http://pipes.yahoo.com/ </li></ul></ul>
    16. 16. Cross-browser JavaScript Libs <ul><li>svg2vml http://code.google.com/p/svg2vml/ </li></ul><ul><li>ExtJS Extension http://code.google.com/p/vector-graphics-ext </li></ul><ul><li>Dojo GFX http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/drawing-gfx </li></ul><ul><li>gwt-canvas http://code.google.com/p/gwt-canvas/ </li></ul>
    17. 17. With Plugin <ul><li>Flash </li></ul><ul><ul><li>Standard Flash and others </li></ul></ul><ul><ul><li>Flex http://www.adobe.com/products/flex/ </li></ul></ul><ul><ul><li>OpenLazlo http://www.openlaszlo.org/ </li></ul></ul><ul><li>Java </li></ul><ul><ul><li>Standard-Java, Java with OpenGL, </li></ul></ul><ul><ul><li>JavaFX http://javafx.com/ </li></ul></ul><ul><li>Silverlight </li></ul>
    18. 18. Silverlight <ul><li>Plugin by Microsoft </li></ul><ul><ul><li>Win and Mac, moonlight for Linux </li></ul></ul><ul><ul><li>IE, Firefox und Safari, Opera announced </li></ul></ul><ul><li>XAML for vector graphics and control elements </li></ul><ul><ul><li>similiar to SVG </li></ul></ul><ul><ul><li>supports parts of Windows Presentation Foundation </li></ul></ul><ul><li>IDE for distinct roles in development </li></ul>
    19. 19. Further Sources <ul><li>VML and SVG code examples: http://de.wikipedia.org/wiki/Vector_Markup_Language </li></ul><ul><li>Canvas code example:  http://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes </li></ul>
    1. A particular slide catching your eye?

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

    ×