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/deck-smartsyntax.html | 191 ++++++++++++++++++++++++++++++++++ 1 file changed, 191 insertions(+) create mode 100644 deck.js/samples/deck-smartsyntax.html (limited to 'deck.js/samples/deck-smartsyntax.html') 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] + +
+ + + + + + + + + + +# + + + +
+ + -- cgit v1.2.1