Introduction
Reveal.js is a framework for easily creating beautiful presentations using HTML/Markdown. Check out the live demo.
Reveal.js comes with a broad range of features including nested slides, Markdown content, PDF export, speaker notes and a JavaScript API. It's best viewed in a modern browser but fall-backs are available to make sure your presentation can still be viewed elsewhere.
The Reveal.js framework is built around HTML, JavaScript, and CSS. But also has extensive support for Markdown. Reveal.js also supports LaTeX representation of mathematical equations using the MathJax plugin, enhancing its suitability in the academic domain. Slide decks in Reveal.js are cross platform compatible requiring only a browser to run, and can even be hosted online! Reveal.js presentations are text based so its files are relatively small, and readily version controllable! Overall, Reveal.js brings the beauty of web design, and the ease of markdown to presentation creation!
Getting Started
Software (Own Machine)
the necessities are a browser (recent versions of Firefox, Chrome, Safari recommended), and a text editor (for web programming we recommend Brackets for its live update feature). A zipped folder with all the neccessary files is available here, download and extract the files somewhere on your machine.
Virtual Machine
A VirtualBox virtual machine is available here, all the neccessary files and software are pre-loaded. Open the documents folder, enter the workshop folder and launch the presentation using brackets.
Files
Summary of files contained within:
- README.md: github README file to display markdown on page
- feeg6003_reveal_HTML.html: HTML version of the presentation
- feeg6003_reveal_MD.html: Markdown version of the presentation
- feeg6003_template_adv.html: A template with full reveal options
- feeg6003_template_basic.html: A template with cre reveal options
- img/: folder for images
- plotfile.js: File containing the JavaScript for the embedded plot
- reveal.js/: Folder containg the reveal.js files
- tutorial.pdf: Guide for the workshop lab
- tutorial_material/: Material for the lab
- uos-logo.css: CSS file to include the university logo in the corner of the presentation
Using Reveal.js Presentations
You can view a Reveal.js presentation in any JavaScript enabled browser.
Using generic software
Open the presentation/HTML file in your preferred text editor. Open the presentation/HTML file with your browser. When you make edits to the file, you then must refresh the presentation page in the broswer
Using Brackets
Open the presentation/HTML file you wish to edit in Brackets. Click the lightning bolt icon in the upper right corner, this should open a browser window and the lighning bolt should turn from grey to yellow. As you save your presentation, the changes will be reflected in the browser dynamically.
Controlling the presentation
If you wish to make the presentation full screen, then press the F key, or leave the window reduced if you want to just test the presentation. With the browser in focus, the presentation can be controlled using the arrow keys or spacebar.
Tutorial
For the tutorial page click here, if you would like it in PDF format click here. For the tutorial files click here