1.Web Presentations, deck.js and Extensions Rmi Emonet SoftShake 2013 2013-10-25 This presentation has been edited for reading. Press 'v' to remove comments if desired. Comments appear like this (on yellowish background)00:07

2. We are (almost) all Presenters we are all making some kind of presentations00:09 3. 00:11 4. Today's Topic00:13 5. Introduction A story about web presentations the past the presentdeck.js Basics Extensions for deck.js Wrap up00:14 6. 00:18 7. A story about web presentations00:21 8. 2004 Powerpoint/OpenOffice/ Inconsistent styleno easy way to enforce constant position, scale etcPortability issueseven in 2011 and with latest versions!VCS :(git svn etc... :(Lock-innot easy to reuse outsideMedia :(will the video play properly?00:25 9. 2005 Latex Beamermay look like a good idea if you use latex for papersAIt's L TEX :)VCS math, latex skills, etc full programming languageIt's LATEX :(how to style? how to include (SVG) graphics? need compilation produces static pdfs00:26 10. 2005 Web Pages Generation more as an experimental idea00:30 11. 2005 Eric Meyer's S5 click itI used S5, many persons too. Browser limitations at the time: SVG (printing), fittingS5: An really animated not Introductionno fitting to window limited SVG support from browsersEric A. MeyerComplex Spiral ConsultingWhat Is S5? It's a Simple Standards-based Slide Show System One XHTML document provides all of the slide show's content CSS handles the layout and look of the slides JavaScript handles the dynamic aspects of the show That's all there is to it!Operatic Origins Opera 4 introduced Opera Show, a projection-mode style sheet technology Allows a single XHTML document to be turned into a PowerPoint-like slide show Adding screen and print style sheets allows for multi-medium views of a single document00:32 12. 2006-2012 Hacked S5 probably as everybody, I customized S5Operational Feature rich: SVG, animations, ... presenter view, fitting, ... (better than any alternative)But, used by me only Some limitationscompiled technically tricky (to code and for browser) injection of style and js in SVG Video format or MIME type is not supported. Video format or MIME type is not supported. 0:0000:39 13. 2012 The Questioning00:41 14. A story about web presentations (back to the present) 00:43 15. 00:48 16. 00:51 17. deck.js Basics00:54 18. deck.js Architecture Designed to be modular/extendedimports js imports css adapts html snippets...yours.htmldeck.js/ core deck.core.js deck.core.css extensions goto deck.goto.html deck.goto.js deck.goto.css menu deck.menu.js deck.menu.css ... step deck.step.js style-chunks jquery-1.7.2.min.js libs ... modernizr.custom.js themes style neon.css ... web-2.0.scss transition ... vertical-slide.css 00:58 19. deck.js Example click to try view frame source if interested (not critical for the rest)http://imakewebthings.com/deck.js/introduction/01:02 20. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33deck.js: Include Coreinclude libs,core,style /// call deck potentially with an option object

SoftShake is Amazing

01:04 21. Extensions for deck.js01:06 22. 01:12 23. 01:14 24. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31deck.js ext: included onesdefault ext (the verbose way): css + js + html snippet /// try 'g' and 'm'

slide: / Go to slide: 01:16 25. deck.js ext.: includedeckThe amazing loader (cleans presentation file, shortens boilerplate code)01:18 26. 01:20 27. deck.js extensions: fitproper fitting using CSS3, click inside to give focushttp://home.heeere.com/data/deck-js-demo-2/samples/deck-fit.html01:22 28. deck.js extensions: clone to have presenter tools around the presentationclone, comments, stopwatch/timerwhen you press 'c' you get a clone window you show the second window on the projector you keep the first on your screen (with notes) control the first window get a "copy" of your cursor on the second also a timer to know how fast you go and a stopwatch when rehearsing (move the mouse to the right edge of the window) (logs are saved in html5 localStorage)01:24 29. deck.js extensions: step, anim http://home.heeere.com/data/deck-js-demo-2/samples/deck-anim.html01:27 30. deck.js extensions: simplemath simple script that produces mathml (out-of-the-box support in firefox) can use mathjax also (but needs heavy install for offline use)Latex notation for equations, etc powerful notation for equations, etc.e = mc x2 3 y 2 n 2 f (n ) = (n + 1) 2 a2 + x 2 4 3 x if n is even if n is odd1 a2 +1a2 +1 a 2 + b 01:29 31. deck.js extensions: svgVector graphics (12k for the smiley) /// give focus to see presentationhttp://home.heeere.com/data/deck-js-demo-2/samples/deck-svg.html01:31 32. deck.js ext.: smartsyntaxshorter way of writing slides, knows about extensions (e.g., anim)Markdow inspired syntaxbut markdown is limited (no easy way for adding classes and ids)Adds some features 1. easy slide block creation2. easy addition of classes and ids 3. extension specific tags =deck.js extensions: smartsyntax=[e]#smartdemo * Markdow inspired syntax * Adds some features *# easy slide block creation *# easy addition of classes and ids[inred] *# extension specific tags01:33 33. deck.js ext.: smartsyntaxeasily animate any html or svg element + play/pause videos (even with a remote control) (even with some clones)=deck.js extensions: smartsyntax=[e] * Example[inred] @CSS!: .inred {color: red;} @SVG:myclass,floatright media/smiley.svg 300px 300px @anim-appear:400: #innerEye1ExampleVideo format or MIME type Video format or MIME type 0:00 is not supported. is not supported.01:40 34. deck.js ext.: smartsyntaxeasily animate any html or svg element + play/pause videos (even with a remote control) (even with some clones)=deck.js extensions: smartsyntax=[e] * Example[inred] @CSS!: .inred {color: red;} @SVG:myclass,floatright media/smiley.svg 300px 300px @anim-appear:400: #innerEye1 | #innerEye2 | -#innerEye1 + -#innerEye2 @anim-appear:1000: #innerEye1 + #innerEye2 + #shadow @anim-play: .myvideo @anim-pause: .myvideoExampleVideo format or MIME type Video format or MIME type 0:00 is not supported. is not supported.01:44 35. deck.js extensions: short list Basestatus, navigation menu, gotoMineincludedeck, fit, clone, "comments", timer maths, SVG, step, anim, autoshow autoshow == the loopy thing on the first page smartsyntaxOthercodemirror, blank, search, automatic, annotate, lazyload, 01:48 36. deck.js extensions: how to Get included by the userdo initialization on DOM ready deck.js ready: $(document).bind('deck.init', function() {})Add and use options $.extend(true, $[deck].defaults, {} ); var opts = $[deck]('getOptions');Interact with deck.js (and your DOM)listen to events: $(document).bind('deck.change', ) act on deck.js: $[deck]('getSlides') $[deck]('next') 01:50 37. Wrap up01:53 38. Summary, Discussion Why web presentations?portable (need a decent browser) tuning friendly (reuse web skills, if any) BUT do not need to know web at all (not even html...) git friendly (plain text) modern looking (media, animations, styles) ! no visual editor (yet) some actually starting to appear (slid.es, dahu screencast)01:55 39. Summary, Discussion Why deck.js?stable and used clear extension policy lot of amazing extensions production ready, scaling, ... dizziness freedo funky transitions and funky 3D cssimpress.js) the (vs prezi (flash), transforms but it is not deck.js can norm and reuse is easier when no absolute layout01:56 40. Take-Home Message Use a web presentation framework Preferably deck.js :) Use and write extensions we all gain by sharingClone from github or get a bundle01:58 41. Attributions CC Images02:00 42. Links The landscape of frameworks slide Death by powerpoint: metrics on presentations, how to avoid boring ones Authoring Slides using HTML: my comparison of some frameworks deck.js, list of extensions, and examples of my extensions (with zip)02:04 43. Thank you for your attention@remiemonet remi@heeere.comWeb Presentations, deck.js and Extensions 02:10