javascript presentation frameworks and libraries
TRANSCRIPT
![Page 1: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/1.jpg)
JavaScript Presentation Frameworks and Libraries
_by Oleksii Prohonnyi
![Page 2: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/2.jpg)
MOTIVATION
![Page 3: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/3.jpg)
Pros
It’s quicker to add a few HTML tags than use a WYSIWYG interface.
You can update a presentation using a basic text editor on any device.
Files can be hosted on the web; you need never lose a PPT again.
You can easily distribute a presentation without viewing software.
It’s not PowerPoint and your audience will be amazed by your technical prowess.
![Page 4: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/4.jpg)
Cons
You require web coding skills.
Positioning, effects and transitions are more limited.
Few systems offer slide notes (it’s a little awkward to show them separately).
It’s more difficult to print handouts.
![Page 5: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/5.jpg)
REVEAL.JS
![Page 6: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/6.jpg)
Reveal.js: About
reveal.js comes with a broad range of features including nested slides, Markdown contents, PDF export, speaker notes and a JavaScript API. It's best viewed in a modern browser but fallbacks are available to make sure your presentation can still be viewed elsewhere.
Website: http://lab.hakim.se/reveal-js/#/
Online editor: http://slides.com/
See more: https://github.com/hakimel/reveal.js
![Page 7: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/7.jpg)
Reveal.js: Installation
The basic setup is for authoring presentations only. The full setup gives you access to all reveal.js features and plugins such as speaker notes as well as the development tasks needed to make changes to the source.
1. Download the latest version of reveal.js from https://github.com/hakimel/reveal.js/releases.
2. Unzip and replace the example contents in index.html with your own.
3. Open index.html in a browser to view it.
See more: https://github.com/hakimel/reveal.js#installation
![Page 8: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/8.jpg)
Reveal.js: Features
Markup/Markdown syntax
Configuration
JS events
Auto-sliding
Keyboard/Touch navigation
Assets lazy loading
API
Parallax background
Transitions and fragments
PDF export
Code highlighting
Theming
Speakers notes
Multiplex plugin
MathJax plugin
![Page 9: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/9.jpg)
Reveal.js: Browser support
1st tier: Chrome, Safari, Firefox, Opera and IE10-11.
2nd tier: IE9, Firefox 3.6.
3rd tier: IE8.
See more: https://github.com/hakimel/reveal.js/wiki/Browser-Support
![Page 11: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/11.jpg)
IMPRESS.JS
![Page 12: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/12.jpg)
Impress.js: About
It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.
Website: http://impress.github.io/impress.js/#/
Tutorials: https://github.com/impress/impress.js/wiki/impress.js-tutorials-and-other-learning-resources
See more: https://github.com/impress/impress.js/
![Page 13: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/13.jpg)
Impress.js: Installation
1. Create your own HTML page.
2. Include impress.js library before the end of the body.
3. Create wrapper for slideshow (#impress).
4. Create slides.
See more: http://www.cubewebsites.com/blog/guides/how-to-use-impress-js/
![Page 14: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/14.jpg)
Impress.js: Features
Markup syntax
Canvas visualization
3D visualization
Elements positioning
Keyboard/Touch navigation
CSS3 transitions and transforms
![Page 15: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/15.jpg)
Impress.js: Browser support
1st tier: Chrome/Chromium, Safari 5.1 and Firefox 10.
2nd tier (polyfills): Internet Explorer 10, 11 and Edge.
See more: https://github.com/impress/impress.js/#browser-support
![Page 16: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/16.jpg)
Impress.js demo
![Page 17: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/17.jpg)
GOOGLE SLIDES TEMPLATE
![Page 18: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/18.jpg)
GST: About
Google’s presentation engines which is used for presentations in Google Docs.
Website: https://code.google.com/archive/p/io-2012-slides/
Readme: http://io-2012-slides.googlecode.com/git/README.html
![Page 19: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/19.jpg)
GST: Installation
1. Get this template: https://code.google.com/archive/p/io-2012-slides/downloads and copy/paste it to a new file on your local computer.
2. Install Compass.
3. Update slide_config.js.
4. Edit at will. Copy the code for the sample slides and fill it out with the content you want.
See more: http://io-2012-slides.googlecode.com/git/README.html
![Page 20: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/20.jpg)
GST: Features
Markup/Markdown syntax
Canvas visualization
Code highlighting
Theming
Speaker mode
Keyboard/Touch navigation
CSS3 transitions and animations
![Page 21: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/21.jpg)
GST: Browser support
Chrome
Firefox
Safari 5.1+
iOS 4.3+
Chrome for Android
See more: https://code.google.com/archive/p/io-2012-slides/
![Page 23: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/23.jpg)
DECK.JS
![Page 24: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/24.jpg)
Deck.js: About
A JavaScript library for building modern HTML presentations. deck.js is flexible enough to let advanced CSS and JavaScript authors craft highly customized decks, but also provides templates and themes for the HTML novice to build a standard slideshow.
Dependencies: jQuery, Modernizr
Website: http://imakewebthings.com/deck.js/
See more: https://github.com/imakewebthings/deck.js
![Page 25: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/25.jpg)
Deck.js: Installation
When you download deck.js, it will include a file named boilerplate.html. You can immediately start editing slides in this page and viewing them in your web browser.
1. Write slides.
2. Choose themes.
3. Include extensions.
See more: http://imakewebthings.com/deck.js/introduction/
![Page 26: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/26.jpg)
Deck.js: Features
Markup syntax
Configuration
Keyboard navigation
API
Fragments
PDF export
Theming
Extensions
![Page 28: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/28.jpg)
SHOWER
![Page 29: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/29.jpg)
Shower: About
Shower Presentation Template.
Shower ['ʃəuə] noun. A person or thing that shows.
Website: http://shwr.me/#
See more: https://github.com/shower/shower
![Page 30: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/30.jpg)
Shower: Installation
Download and unzip template archive.
Open index.html and start creating your presentation.
If you’re familiar with npm you can install Shower’s core and themes manually: npm install shower-core shower-ribbon. The same packages available in bower.
See more: https://github.com/shower/shower#quick-start
![Page 31: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/31.jpg)
Shower: Features
Markup syntax
Theming
Keyboard/Touch navigation
PDF export
Code highlighting
Fragments
Animations
![Page 32: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/32.jpg)
Shower: Browser support
Latest stable versions of Chrome, Internet Explorer, Firefox, Opera and Safari are supported.
See more: https://github.com/shower/shower#browser-support
![Page 34: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/34.jpg)
SUMMARY
![Page 35: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/35.jpg)
Comparison
ENGINE NAME CSS TRANSITIONS
BROWSER SUPPORT
EXTENSIONS PDF EXPORT
Reveal.js + + + +
Impress.js + + - -
GST - + - -
Deck.js - ? + +
Shower - + - +
![Page 36: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/36.jpg)
THANK YOUFOR ATTENTION
![Page 37: JavaScript Presentation Frameworks and Libraries](https://reader030.vdocuments.net/reader030/viewer/2022021506/589e55ee1a28ab16348b4655/html5/thumbnails/37.jpg)
Oleksii Prohonnyi
facebook.com/oprohonnyi
linkedin.com/in/oprohonnyi