From 5a774ef6f3b38b19b26913a34b1388530c72334e Mon Sep 17 00:00:00 2001 From: Christian Franke Date: Tue, 9 Apr 2013 14:31:22 +0200 Subject: Initial Commit --- deck.js/samples/circle.svg | 167 +++++++++++++++ deck.js/samples/deck-anim.html | 182 +++++++++++++++++ deck.js/samples/deck-clone.html | 195 ++++++++++++++++++ deck.js/samples/deck-fit.html | 229 +++++++++++++++++++++ deck.js/samples/deck-simplemath.html | 151 ++++++++++++++ deck.js/samples/deck-smartsyntax.html | 191 ++++++++++++++++++ deck.js/samples/deck-step.html | 174 ++++++++++++++++ deck.js/samples/deck-svg.html | 368 ++++++++++++++++++++++++++++++++++ deck.js/samples/rectangle.png | Bin 0 -> 216 bytes deck.js/samples/simple.ogv | Bin 0 -> 237046 bytes deck.js/samples/smiley.svg | 272 +++++++++++++++++++++++++ 11 files changed, 1929 insertions(+) create mode 100755 deck.js/samples/circle.svg create mode 100644 deck.js/samples/deck-anim.html create mode 100644 deck.js/samples/deck-clone.html create mode 100644 deck.js/samples/deck-fit.html create mode 100644 deck.js/samples/deck-simplemath.html create mode 100644 deck.js/samples/deck-smartsyntax.html create mode 100644 deck.js/samples/deck-step.html create mode 100644 deck.js/samples/deck-svg.html create mode 100644 deck.js/samples/rectangle.png create mode 100644 deck.js/samples/simple.ogv create mode 100755 deck.js/samples/smiley.svg (limited to 'deck.js/samples') diff --git a/deck.js/samples/circle.svg b/deck.js/samples/circle.svg new file mode 100755 index 0000000..b003203 --- /dev/null +++ b/deck.js/samples/circle.svg @@ -0,0 +1,167 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + cool + + + + NB: for convenience weuse a layer (hidden) for boxesthat we will be using for zoomHit ctrl+shift+L for layer control (in inkscape) + + + diff --git a/deck.js/samples/deck-anim.html b/deck.js/samples/deck-anim.html new file mode 100644 index 0000000..8a87db0 --- /dev/null +++ b/deck.js/samples/deck-anim.html @@ -0,0 +1,182 @@ + + + + + + + + + + deck.anim.js test/demo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +This page surely has a purpose.
+Use left/right arrow keys to browse the presentation.
+ + +
+ + +
+

Getting started with deck.js:
anim extension +
use right arrow to move on +

+
+ +
+

Nested deck.js slides

+
    +
  • Not an extension (in core deck.js)
    • +
  • Just have an element with the “slide” class…
    • +
  • … and it will appear (hit the right arrow now)
    • +
  • Hey! I appeared! (go on)
    • +
  • The gray-ish style is part of the theme
    • +
+
+
+

Show/Hide Elements

+
    +
  • Go beyond sequential appearance … like this!
    • +
  • … for example
    • +
    +
  • Or hide stuff
    • +
    +
  • Let's get the title back, slowly :)
    • +
+
+
+

Add/Remove Classes

+
    +
  • We can also add/remove classes: like the “highlight”
    • +
  • This is highlight by default (styled with css)
    • +
  • We can add a class
    • +
    +
  • And remove it
    • +
    +
+
+
+

Attribute Animations

+
    +
  • We can animate any attribute, like the color
    • +
  • Let's try
    • +
    +
    +
    +
  • Or the size
    • +
    +
  • Or play multiple animations
    • +
    +
    +
    +
+
+
+

Video Control

+ +
    +
  • Starts paused
    • +
  • Plays on "next"
    • +
  • Then pauses on "next"
    • +
  • Then next slide
    • +
+
+
+
+
+

The “anim” extension

+
    +
  • Works in conjunction with
    • +
      +
    • “events”: extension that triggers events
         (notify the slide when it becomes current)
      • +
    • “step”: extension that also trigger init events
         (knowing about toplevel vs nested slides)
      • +
    +
  • Uses open attributes "data-*" (see source)
    • +
  • Adds animation classes
    • +
      +
    • anim-show/hide, anim-addclass/removeclass,
      • +
    • anim-attribute, anim-play, anim-pause, …
      • +
    +
+
+
+

Browser support

+
    +
  • Should be ok
    • +
+
+ + + + + + + + + + +# + + + +
+ + diff --git a/deck.js/samples/deck-clone.html b/deck.js/samples/deck-clone.html new file mode 100644 index 0000000..e4b77a2 --- /dev/null +++ b/deck.js/samples/deck-clone.html @@ -0,0 +1,195 @@ + + + + + + + + + + deck.clone.js test/demo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +This page surely has a purpose.
+Use left/right arrow keys to browse the presentation.
+ + +
+ + +
+

Getting started with deck.js:
clone extension +
use right arrow to move on +

+
+ +
+

“clone”: What?

+
    +
  • Duplicate your window
    • +
  • Forwards events to all clones
    • +
  • Replicates mouse pointer
    • +
  • Usage +
      +
    • put a second view on a second screen
      • +
    • view next slide on your view (theme)
      • +
    • view notes on your view (extension)
      • +
    +
    • +
+
+ +
+

“clone”: let's get cloned

+
+ With firefox and "file://..." URLs (local files), the popup might be blocked, refusing to be shown. + To fix that: +
    +
  • on the bar that pops up, click on Preferences>Edit Pop-Up Blocker Preferences…
    • +
  • type “<file>” (without the quotes, with the brackets)
    • +
  • click allow
    • +
  • click close
    • +
  • close the poped-up bar and hit 'c' again
    • +
+
+
    +
  • Clone your view! +
      +
    • NB: the browser will probably open a new tab
      • +
    • clone your view by typing 'c' +
      (in local, show how to tell firefox to not block the popup) +
      • +
    • detach your tab (drag it out of the browser)
      • +
    • go to the main view and hit the right arrow
      • +
    +
    • +
+
+ + +
+

“clone”: Propagation

+
    +
  • Slide events are propagated to clone(s) +
      +
    • from master to clone(s)
      • +
    • try left/right arrows
      • +
    • try up arrow (with the “step” extension)
      • +
    +
    • +
  • Mouse pointer is replicated +
      +
    • try to move your mouse (on the master)
      • +
    • custom style using HTML+CSS
      • +
    • examples: red box, centered green box, …
      • +
    +
    • +
+
+ +
+

“clone”: Styling

+
    +
  • Master view styling +
      +
    • adds the “has-clones” class when cloned
      • +
    • in this deck: gray background
      • +
    • allow for a presenter view (next slide, notes, …)
      • +
    +
    • +
+
+ +
+

Browser support

+
    +
  • Should be ok
    • +
+
+ + + + + + + + + +
+ +
+ + +# + + + +
+ + diff --git a/deck.js/samples/deck-fit.html b/deck.js/samples/deck-fit.html new file mode 100644 index 0000000..b69bff4 --- /dev/null +++ b/deck.js/samples/deck-fit.html @@ -0,0 +1,229 @@ + + + + + + + + + + deck.fit.js test/demo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +This page demonstrates the use of the "fit" extension for deck.js.
+Use left/right arrow keys to browse the presentation.
+ + +
+
+ + +
+

Getting started with deck.js:
fit extension +
use right arrow to move on +

+
+ +
+

“fit”: What It Does

+
    +
  • +

    Before anything

    please resize the slides by dragging the bottom right corner of the dark-red frame +
    • +
  • + More on the next slide +
    • +
+
+
+

Designing for “fit”

+
    +
  • You decide on a design dimension
    (default: 800x600)
    • +
  • You write all your slides
    as if they were exactly of this size
    • +
    +
  • You put your slides in a container of any size
    • +
  • You decide how they should adapt (e.g., center)
    • +
    +
  • And “fit” handles it!
    • +
+
+
+

Playing with “fit” demo

+
    +
  • Resize the red box
    • +
  • Change the “fitMode”
    with the select on the top-right of this page
    • +
  • Press the 's' key to make the slides fit to the window
    • +
+
+
+

Browser support

+
    +
  • Did it work for you? :)
    • +
  • Should be ok on good browsers
    • +
+
+
+

Notes about the demo

+
    +
  • The 8 yellow boxes are to test background elements. You may use them into your slides, e.g., for footer, logos, …
    • +
  • The red border just helps understanding where the “deck-container” is
    • +
  • The white border just helps understanding where each “slide” is
    • +
  • The white border also illustrates the “fitMarginX” and “fitMarginY” options that can be used for adding a margin around the slides
    • +
+
+ + + + + + + + + + +# + + + + + + + + +
+
+ + diff --git a/deck.js/samples/deck-simplemath.html b/deck.js/samples/deck-simplemath.html new file mode 100644 index 0000000..9e7693a --- /dev/null +++ b/deck.js/samples/deck-simplemath.html @@ -0,0 +1,151 @@ + + + + + + + + + + deck.simplemath.js test/demo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +This page surely has a purpose.
+Use left/right arrow keys to browse the presentation.
+ + +
+ + +
+

Getting started with deck.js:
simplemath extension +
use right arrow to move on +

+
+ +
+

“simplemath”: What?

+
    +
  • Add math equations in your slides
    • +
  • Use latex syntax
    • +
  • Just wrap your maths in a "span" element
    • +
  • Wants to learn latex syntax?
    • + +
  • … examples on the next slide
    • +
+
+
+

“simplemath” in action

+
    +
  • + e=mc^2 +           (\frac{x^2}{y^3}) +           [\begin{array}{cc} \sqrt{x} & 2 \\ 3 & x^4 \end{array}] +
    • +
  • + f(n) = \left\{ + \begin{array}{l l} + n/2 & \mbox{if } n \mbox{ is even}\\ + -(n+1)/2 & \mbox{if } n \mbox{ is odd} + \end{array} +
    • +
  • a^2 + \frac{1}{\sqrt{a^2 + \frac{1}{\sqrt{a^2 + \frac{1}{\sqrt{a^2 + b^{\infty}}}}}}}
    • +
    +
+
+
+

Principle

+
    +
  • Written in Javascript
    • +
  • Interprets latex syntax
    • +
  • Generates MathML (web standard for maths)
    • +
  • Lets your browser render the MathML
    • +
    +
  • Works fully offline
    • +
      +
    • − depends on browser support for MathML
      • +
    • + works offline :)
      • + +
    +
+
+
+

Browser support

+ +
+ + + + + + + + + +# + + + +
+ + diff --git a/deck.js/samples/deck-smartsyntax.html b/deck.js/samples/deck-smartsyntax.html new file mode 100644 index 0000000..0fab88d --- /dev/null +++ b/deck.js/samples/deck-smartsyntax.html @@ -0,0 +1,191 @@ + + + + + + + + + + deck.smartsyntax.js test/demo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +This page surely has a purpose.
+Use left/right arrow keys to browse the presentation.
+ + +
+ +
+ ==Getting started with deck.js:
smartsyntax extension
use right arrow to move on==#title-slide + + =SmartSynt. ≃ Wiki Synt.= + * Easy bullet points (numbered or not) + * To learn smart syntax + ** Go through the current presentation
to get an idea of what is possible + ** View the source of this page (Ctrl+U) + + =SmartSynt. ≃ Wiki++= + * Easy class additions + *# on the slide itself (see next one) + *# on a bullet point (like this one who has a 'highlight' class)[highlight] + * Allow tags e.g. this is inside a <b> tag + * NB + ** <b> (bold) is styled in blue + ** 'highlight' class is styled in red + + =Styled Slide=[funny] + * In the "smart syntax" source + ** this slide has the custom 'funny' class + * In the css of this page + ** <b> tags within a 'funny' are styled in chartreuse (green) + ** (with .funny b {color: chartreuse}) + * and an example: chartreuse is great!, (learn more on chartreuse) + + =Deck.js Friendly= + * Friend with deck.js + ** creation of slides (<section> with a slide class) + * Friend with the theme conventions + ** title slides with a <h1> (using "==....==") + ** normal slides with a <h2> (using "=....=") + + =Deck.*.js Friendly= + @svg: svgThatFloatsRight smiley.svg 150px 150px + * Friend with some deck.js extensions + ** SVG inclusion
(smiley from inky2010) + ** Latex maths using a pair of $$ signs + *** $E = mc^2$ + *** $c = \sqrt{a^2+b^2}$ + *** (use two consecutive dollar signs to output a dollar)[smaller] + ** more on next slide + + =Animations Friendly= + * Progressive display: use the slide class + * This has both slide and highlight classes[slide][highlight] + * Next: more things[slide] + @svg: svg,floatright smiley.svg 150px 300px + + + @anim-appear:800: #bottom | #left + #right | .svg #reflect + -#bottom | @#zoom | @#far | #bottom + @anim-play: .myvid + @anim-pause: video + @anim-attribute:400: h2: font-size: .75em + @anim-attribute:400: h2: font-size: 2.5em +
+ + +
+

Browser support

+
    +
  • Should be ok
    • +
+
+ +
+ =Additional Notes= + * Case insensitive… @ANIM-… ≡ @aNiM-… ≡ @anim-… + @ANIM-APPEAR:600: .s1 + @aNiM-aPPear:600: .s2 + @anim-appear:600: .s3 + * No compilation phase[slide] + ** interpreted at loading time + ** faster development + * Backward compatible with old version[slide] + +
+ + + + + + + + + + +# + + + +
+ + diff --git a/deck.js/samples/deck-step.html b/deck.js/samples/deck-step.html new file mode 100644 index 0000000..36a84d0 --- /dev/null +++ b/deck.js/samples/deck-step.html @@ -0,0 +1,174 @@ + + + + + + + + + + deck.step.js test/demo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +This page surely has a purpose.
+Use left/right arrow keys to browse the presentation.
+ + +
+ + +
+

Getting started with deck.js:
step extension +
use right arrow to move on +

+
+ +
+

Nested deck.js slides

+
    +
  • Not an extension (in core deck.js)
    • +
  • Just have an element with the “slide” class…
    • +
  • … and it will appear (hit the right arrow now)
    • +
  • Hey! I appeared! (go on)
    • +
  • The gray-ish style is part of the theme
    • +
+
+
+

Why the step extension?

+
    +
  • + Nested slides + are cool + and useful +
    • +
  • But there is a problem
    • +
  • + Navigating + is + annoying + with + nesting + !!! +
    • +
  • Example:
     Try using the left arrow to go back to previous slide
    • +
  • Probably annoying!?
    • +
  • Now try hitting the up arrow
    • +
  • More on the next slide…
    • +
+
+
+

The “step” extension

+
+
    +
  • Adds new key shortcuts
    • +
      +
    • up arrow: previous top level slide
      • +
    • down arrow: next top level slide
      • +
    +
+
+ +
+

More “step” 

+
+
    +
  • Other stuff… not visible +
      +
    • Defaults to not counting nested slides
         (if you use the status extension)
      • +
    • Add notifications events to nested slides when the parent gets activated (for animations)
      • +
    • (The title ends in "21", see why in the source)
      • +
    +
    • + +
    +
    + + +
+
+
+

Browser support

+
    +
  • Should be ok
    • +
+
+ + + + + + + + + + +# + + + +
+ + diff --git a/deck.js/samples/deck-svg.html b/deck.js/samples/deck-svg.html new file mode 100644 index 0000000..ee98779 --- /dev/null +++ b/deck.js/samples/deck-svg.html @@ -0,0 +1,368 @@ + + + + + + + + + + deck.svg.js test/demo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +This page surely has a purpose.
+Use left/right arrow keys to browse the presentation.
+ + +
+ + +
+

Getting started with deck.js:
svg extension +
use right arrow to move on +
(Firefox may ask for a plugin: just close the message and click on the page to give the focus back) +

+
+ +
+

SVG Introduction

+
    +
  • Scalable Vector Graphics (SVG) +
      +
    • Standard format for the web (and more)
      • +
    • Vector graphics: arbitrary stretching, no pixels
      • +
    • Cool editors (e.g., Inkscape)
      • +
    • Lot of existing SVG (smiley by inky2010)
      • +
    +
    • + + + + + + + +
+
+
+

The “svg” extension

+
    +
  • Existing ways of integrating SVG in HTML +
      +
    • Inline: the SVG content must be in the HTML file
      • +
    • img tag: no interactivity support
      • +
    • iframe/object/embed tags: separate DOM tree (styling and manipulation made harder)
      • +
    +
    • +
  • Deck.svg.js extension +
      +
    • does “inline” inclusion of external SVG files
      • +
    • uses a custom "object" tag and jquery-svg
      • +
    +
    • +
+
+
+

Deck.svg.js: size

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

Deck.svg.js: autosize

+
  • Does not work in chrome?
    (should see two smileys below)
+ + + + + + + + +
+
+

Deck.svg.js: stretching

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

Deck.svg.js: CSS styling

+ + + + + + + + + + + + + + + +
    +
  • The same file is included three times using different styles (move your mouse on the yellow circle)
    • +
  • Needs for the SVG file to not contain the css attribute of interest
    (removed manually for the example)
    • +
+
+
+

svg+anim: show/hide

+ + + + + + + + + + + + + + + +
    +
  • Use normal “anim” extension
    • +
  • Smooth operation thanks to jquery-svg
    • +
  • Make stuff appear/disappear, …
    • +
+
+
+
+
+
+
+
+
+
+
+

svg+anim: svg attributes

+ + + + + + + + + + + + + + + +
+
+
+
  • The "view box" can be animate, and that's awesome
+ +
+ +
+ + +
+

Browser support

+
    +
  • Should be ok with a decent browser
    • +
  • Chrome problem when only width or height is specified
    • +
+
+ + + + + + + + + + +# + + + +
+ + diff --git a/deck.js/samples/rectangle.png b/deck.js/samples/rectangle.png new file mode 100644 index 0000000..bea0b6a Binary files /dev/null and b/deck.js/samples/rectangle.png differ diff --git a/deck.js/samples/simple.ogv b/deck.js/samples/simple.ogv new file mode 100644 index 0000000..70fc871 Binary files /dev/null and b/deck.js/samples/simple.ogv differ diff --git a/deck.js/samples/smiley.svg b/deck.js/samples/smiley.svg new file mode 100755 index 0000000..aeecf69 --- /dev/null +++ b/deck.js/samples/smiley.svg @@ -0,0 +1,272 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -- cgit v1.2.1