Presentation History: a list of places this presentation has been given, including relevant Joind.in links.A call-to-action to “View Slides”: a link to the GitHub Pages version of the presentation. The presentation abstract: a paragraph or two summarizing what the presentation is about – this is the same abstract that I send to conference organizers when I submit the talk. In general, my presentations’ README files tend to follow a common pattern: I’ve found that the repository README file can be a great way to provide background information about the slide deck, including links to additional resources (including relevant posts on your own blog, if you’re like me and tend to create talks around things you’ve already written). Once the presentation is ready to be shared, simply run grunt deploy to push the current master branch of your presentation to GitHub pages, available at giving you an easily-sharable URL! The importance of a README file The Reveal.js Yeoman generator makes this even easier: during the presentation’s initial generation (or by editing the ffee file), users are able to specify the GitHub username and repository name that will host the presentation. One of the reasons I’ve stuck with Reveal.js over the past few years has been how easy it is to publish my presentations to GitHub pages, giving me a URL that I can easily share without relying on services like SlideShare. HTML and Markdown are both simply ways to structure your content, so use whichever works best for you. Sure, we could simply write the list in HTML and avoid the comments, but I personally find it easier to formulate my thoughts in Markdown, then apply classnames like. In regular markup, we accomplish this by adding the class of fragment to an element: This can be used to reveal new information as you present without overwhelming the audience with a wall of text up-front. Reveal.js has ways to define many of these behaviors, but using them with the Yeoman generator – especially with Markdown – is sometimes less than obvious.Ī popular Reveal.js feature is “Fragments” – the ability to show/hide text after the initial display of the slide. Fragments, background images, and moreĪs I’m building out my slide deck, I often find myself wanting more dynamic slides – a background image, different transitions, etc. If I know I’m doing a more complicated slide where Markdown might not be a good fit, I can omit the -markdown option to generate slides/this-is-my-slide-title.html instead Reveal.js can handle both HTML and Markdown together, seamlessly. That command will automatically create the slides/this-is-my-slide-title.md Markdown file and append it to slides/list.json, then refresh my presentation. $ yo reveal : slide "This is my slide title" - markdown The second window is where I generate new slides, using the commands built into the Yeoman generator: When I’m building my slide deck, I keep two terminal windows open: the first is just running grunt, which automatically opens and re-loads a browser tab with my slides. The “resources” directory contains any graphics or other media used in my presentation, while the “slides” directory contains a single markdown file for each slide in my deck, along with a list.json file that puts the slides in order (including vertical nesting). You’ll notice that there isn’t even an index.html file in my deck, as this file is dynamically generated by Grunt. The generator gives me a Grunt file, allowing me to have automatic recompilation and live reloading when changes are made.Īs an example, take a peak at my Professional Development for Professional Developers slide deck on GitHub: It worked well enough, but my Git history (I knew early on I wanted to be able to host my presentations on GitHub Pages) would always be cluttered with commits to the core framework.Īfter a few presentations, I found the generator-reveal Yeoman generator from Sebastian Lara Menares, and it completely changed my approach to building presentations with Reveal.js instead of having to manually edit the index.html file, I could instead use the generator to create new slides – as individual HTML or Markdown files – and populate slides/list.json. Having given a fair number of presentations using the framework over the last few years, I thought it might be useful for speakers who haven’t yet tried (or found their footing with) Reveal.js if I laid out my preparation workflow.Įarly on, I was manually creating presentations based on the framework’s “Full Setup” instructions: clone the repo, run npm install, then start editing the index.html file. As I mentioned in my Exporting Reveal.js Slides to PDF Using Decktape post last week, I tend to use Reveal.js – a HTML- and JavaScript-powered presentation framework – for most of my conference talks.
0 Comments
Leave a Reply. |