Canvas Based Presentation - Zeroth Review

Canvas Based Presentation - Zeroth Review

• 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.
  Presentation Paradigms Slide • 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.
  Why not theSlide 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.
  Edward Tufte’s Views EdwardTufte • 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 web on information design and as a browser as a pioneer in the field of data presentation tool. visualization.
• 5.
  Why Canvas BasedParadigm? • 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.
  Prezi – ACanvas 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.
  LandScape – OurCanvas Presentation Tool • Animates the presentation elements. SVG • Open standard • Supported by modern browsers. • Programmatically manipulate the JavaScript components of the presentation.
• 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.
  Inkscape – AnSVG 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.
  Features and Drawbacksof JessyInk (a) Create both slide- (a) Limited set of based as well as canvas- features with respect to based 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.
  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 simplify your 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.
  Features Features Dynamic Importing Multi- control of multiple Exporting Templates Platform Presentati media support on formats Text Motion Pan, zoom Exporting Export as outline as path for and rotate as SVG PDF notes for transitions presenter
• 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.
  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) http://www.w3.org/TR/SVG/ [3] Raphael.js, a cross-browser JavaScript library for drawing vector graphics on websites http://www.raphaeljs.com [4] Apache Batik, Java classes for manipulating SVG http://xmlgraphics.apache.org/batik/javadoc/ [5] Prezi, a cloud based SaaS presentation software http://www.prezi.com [6] Taymjong Bah, “Inkscape guide to a vector drawing program”, Third Edition, Prentice Hall