Expo, an HTML based presentation tool

Two years ago I had to do a lecture about programming. To prepare it I've used a home made tool, Expo, which I've cleaned up and will introduce in this article.

True to myself, why use an existing tool made by someone else while less than 300 lines of code written in a few hours can give all that's needed ? Expo is a single HTML page with a bit of CSS and JavaScript. Copy it, edit your presentation with a text editor, and run it by opening it in a web browser. No need for a particular OS, or to install anything. You can share the presentation simply by sharing a single file (well, except if you included images of course). As it's purely text it's easy to version control. It's ready to use as it is, and you have control on absolutely everything at the same time. In the other hand you'll have to know a little of HTML and CSS to use it.

In term of features, the presentation is divided into pages which can be grouped into chapters. The user can navigate through pages and chapters with cursor keys or by clicking buttons at the bottom of the pages. A table of content is automatically generated, with links toward each page for quick navigation. Links can also be used as reference to access a given page automatically. A demo is available here. I've used it in Chrome, the quirks of web technos being what they are I can't guarantee it works in all browsers. Still, there is really nothing fancy here and one should expect no particular problem.

How to use it:

Download the template here. Edit the style section to change the look of your presentation or leave the default one. Edit the title section with the title of your presentation. Edit the #header div with some content that will be displayed above all pages, and/or the #footer div (at the end of the body) with content displayed below all pages.

Now you're ready to add the content of the presentation. To add a page, add a new div into the #pages div.

class="page" indicates it's a page. data-title="A new page" is the title of the page as displayed in the ToC. Pages are ordered as they are in index.html.

To group pages into chapters, add a new chapter div into the #pages div.

Same as for pages, class="chapter" indicates it's a chapter. data-title="A new chapter" is the title of the chapter as displayed in the ToC. Chapters are ordered as they are in index.html.

Then add pages to that chapter's div just as you've added pages previously.

You can add as many pages, chapters, page per chapter as you wish, but a chapter cannot contain a sub-chapter. Pages can contain whatever you're able to code in HTML and CSS: image, link, video, formatted text, tables, etc... You can also make them interactive/dynamic with some JavaScript. It's all up to you now ! Any question or comment ? Send me an email.

2022-08-30
in All, Web app,
277 views
Copyright 2021-2024 Baillehache Pascal