zeroth review presentation
Post on 20-Aug-2015
3.373 Views
Preview:
TRANSCRIPT
Canvas Based Presentation
Using SVG and Javascript Zeroth Review
01-12-2011
S.Srikrishnan , V.Vishal Gautham
Final Year, CSE „B‟
Guided by
R. S. Milton, Ph.D.
Presentation Paradigms
• Information is organized into slides.
• Each slide typically consists of a list of bulleted points.
• Eg., Microsoft PowerPoint, OpenOffice Impress etc.,
Slide Based
• The material to be presented is laid out in a large canvas without any page (slide) boundaries.
• View can change orientation to suit the information to be presented.
Canvas Based
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.
Edward Tufte’s Views
• Slide-ware reduces the analytical quality of presentations.
• Bullets are just raw facts listed point-wise.
• Abuse of graphical technique.
• Suggests the use of web browser as a presentation tool.
He is noted for his writings
on information design and as a
pioneer in the field of data
visualization.
Edward Tufte
Why Canvas Based Paradigm?
• Reflects the presenter‟s flow of thought process.
• Emphasis more on the central idea.
• Audience concentrate better
• Animations and other rich form of multimedia
• Presentation never seems monotonous
• Tweaked to the level of detail the presenter wants to express
Flexibility Attractive
Flow Focus
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.
LandScape – Our Canvas
Presentation Tool
SVG
• Animates the presentation elements.
• Open standard
• Supported by modern browsers.
JavaScript • Programmatically manipulate the
components of the presentation.
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
“Vector graphics is more flexible
than raster graphics”
Web Browsers
Inkscape
Batik Squiggle
Applications
SVG Viewers
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
Features and Drawbacks of
JessyInk
(a) Create both slide-based as well as canvas-based presentations.
(b) Light-weight extension to Inkscape
(a) Limited set of features with respect to animation, transition effects etc.,
(b) Poor performance in most browsers.
(c) Not suitable for the common man to create.
LandScape User Interface
Creating/ Editing the presentation
Raphaël.js
Raphaël is a small JavaScript library that should simplify
your work with vector graphics on the web
Apache Batik
Java-based toolkit for applications or applets that want to use images
in the SVG format for various purposes, such as display,
generation or manipulation
Plugin for Inkscape
Integrating a plugin using Python
Features
Features
Dynamic control of
Presentation
Pan, zoom and rotate
Motion path for
transitions
Exporting
Exporting as SVG
Export as PDF
Text outline as notes for presenter
Importing multiple media
formats
Templates Multi-
Platform support
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.
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
top related