A framework for making presentation slides using HTML, JavaScript and CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
pix
LICENSE
README
adding-notes.html
blank.html
clicktitle.html
conclusion.html
cssclasses.html
download.html
draw-on.html
eachslide.html
eachslide2.html
html.html
ignite.html
img.html
index.html
lists-how.html
lists-how2.html
lists-nobullets.html
lists.html
navigate.js
navigation.html
navspan.html
navspan2.html
navspan3.html
notes.html
notes.js
settingup.html
settingup2.html
slides.css
slides.js
tips.html
what.html

README

This is a template to help you write presentation slides in HTML,
so they can be displayed on the web as well as a live projector.
It uses Javascript to advance to the next slide.

It has lots of handy features for presentations:
- write in HTML and CSS, so you only need the same skills you'd need
for web design
- bulleted lists that show one item at a time
- an easy way to show fullscreen images -- you don't need to make a slide for
each image
- a drawing option, so you can sketch with the mouse on top of any slide
- an optional timer for Ignite or Pecha Kucha shows
- notes on the right part of a wide-screen laptop
- minor features like screen blanking and table-of-contents

This repository is itself a self-documenting presentation:
check it out, then load index.html in a browser (with javascript enabled)
and run through the slides.

Since you can't do that without checking it out first,
you can see a live, self-documenting example on the web at:
http://shallowsky.com/software/presentation/

# How to Present

You can use any browser to present the slides -- though as of
Firefox Quantum, Mozilla seems to have made it impossible to do
javascript on local file: URLs, so you might have to run a local web server.
F11 in Firefox and probably most browsers gives full-screen mode.

I give my own presentations using a minimal presentation script I wrote
that uses python and webkit, in two versions:

https://github.com/akkana/scripts/blob/master/qpreso

Use qpreso on modern Linux distributions. It uses Qt5WebEngine which is
based on Blink, the same rendering engine Google Chrome users.

Very old Linux distros may not have QtWebEngine and may need to use
gpreso, based on python-webkit-gtk.

https://github.com/akkana/scripts/blob/master/gpreso

Most distros either have python-webkit-gtk or Qt5WebEngine but not both.
I don't know which of these works better on Mac or Windows: let me know.

# PDF and Printing

If you need to make a PDF version of your slides, for printing or
because a conference wants a downloadable version and doesn't grok a
tarball or zip file, you can try qhtmlprint:
https://github.com/akkana/scripts/blob/master/qhtmlprint
though it's somewhat brittle -- PDF export/print from Python web
libraries isn't very well supported or documented, and doesn't always work.
Of course, PDF will not preserve effects like one-at-a-time bullets
or auto-advance.