Canvas Based Presentation - Zeroth Review


Published on

The introduction to Canvas Based Presentation and its features compared to Slide-ware presentations

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Canvas Based Presentation - Zeroth Review

  1. 1. Canvas Based Presentation Using SVG and Javascript S.Srikrishnan Final Year, CSE ‘B’ V.Vishal Gautham Final Year, CSE ‘B’ (Arvind Krishnaa J) (Final Year CSE ‘A’) Guided by R. S. Milton, Ph.D.
  2. 2. Presentation ParadigmsSlide • Information is organized into slides. • Each slide typically consists of a list of bulleted points.Based • Eg., Microsoft PowerPoint, OpenOffice Impress etc.,Canvas • The material to be presented is laid out in a large canvas without any page (slide) boundaries.Based • View can change orientation to suit the information to be presented.
  3. 3. Why not the Slide Based Paradigm?• Features can be complicated to use.• Tendency to skip slides – leads to distract the audience.• Single pre-set path.• Presence of content creator is not critical during the presentation.
  4. 4. Edward Tufte’s ViewsEdward Tufte • Slide-ware reduces the analytical quality of presentations. • Bullets are just raw facts listed point-wise. • Abuse of graphical technique.He is noted for his writings • Suggests the use of webon information design and as a browser as apioneer in the field of data presentation tool.visualization.
  5. 5. Why Canvas Based Paradigm?• Tweaked to the • Animations and other level of detail the rich form of presenter wants multimedia to express • Presentation never Flexibility Attractive seems monotonous Focus Flow• Emphasis more on • Reflects the the central idea. presenter’s flow of• Audience thought process. concentrate better
  6. 6. Prezi – A Canvas Presentation Tool• Canvas based presentation software developed using Flash™.• Ideas explored on a virtual canvas.• Zooming in and out of presentation media (ZUI).• Text, images, videos can be grouped together as frames.
  7. 7. LandScape – Our Canvas Presentation Tool • Animates the presentation elements. SVG • Open standard • Supported by modern browsers. • Programmatically manipulate the JavaScript components of the presentation.
  8. 8. Scalable Vector Graphics (SVG) • Language for describing two- dimensional graphics in XML. • Three types of graphic objects – Vector graphic shapes – Images – Text • Objects can be grouped, styled, transformed and composited SVG Viewers Web Applications Browsers Inkscape“Vector graphics is more flexible Batik Squiggle than raster graphics”
  9. 9. Inkscape – An SVG Editor • Allows drag and drop creation of SVG. • Full fledged editor with advanced image processing support. • Animation toolbox allows individual elements to be animated. • JessyInk extension to Inkscape allows the creation of basic canvas presentations
  10. 10. Features and Drawbacks of JessyInk(a) Create both slide- (a) Limited set ofbased as well as canvas- features with respect tobased presentations. animation, transition(b) Light-weight effects etc.,extension to Inkscape (b) Poor performance in most browsers. (c) Not suitable for the common man to create.
  11. 11. LandScape User Interface Plugin for Inkscape Integrating a plugin using Python Raphaël.js Apache Batik Raphaël is a small JavaScript Creating/ Java-based toolkit for applications or library that should simplifyyour work with vector graphics Editing the applets that want to use images in the SVG format for various purposes, on the web presentation such as display, generation or manipulation
  12. 12. Features Features Dynamic Importing Multi- control of multiple Exporting Templates Platform Presentati media support on formats Text MotionPan, zoom Exporting Export as outline as path forand rotate as SVG PDF notes for transitions presenter
  13. 13. Scope and Goal • Will be used to create attractive canvas based presentations. • Requires some level of expertise to create content. • May not have all features of commercially available software. • Useful for teacher to create lecture slides. • Presentation not too dependent on features of the viewer. • Browser requirements are quite nominal. • Integration of JavaScript layer over SVG.
  14. 14. References*1+ Edward R. Tufte, “The Visual Display of Quantitative Information”,Second Edition, Graphics Press LLC, 2001.*2+ W3C Recommendations, “Scalable Vector Graphics (SVG) 1.1”(Second Edition)[3] Raphael.js, a cross-browser JavaScript library for drawing vectorgraphics on websites[4] Apache Batik, Java classes for manipulating SVG[5] Prezi, a cloud based SaaS presentation software[6] Taymjong Bah, “Inkscape guide to a vector drawing program”, ThirdEdition, Prentice Hall