• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Interactive Vector-Graphics in the Browser
 

Interactive Vector-Graphics in the Browser

on

  • 9,350 views

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? ...

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/

Statistics

Views

Total Views
9,350
Views on SlideShare
9,327
Embed Views
23

Actions

Likes
0
Downloads
48
Comments
0

4 Embeds 23

http://www.slideshare.net 19
http://hi.chibaole.com 2
http://rapidrabb.it 1
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

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

Interactive Vector-Graphics in the Browser Interactive Vector-Graphics in the Browser Presentation Transcript

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