Basic usage
DZSlides is a one-file HTML template to build slides in HTML5 and CSS3.
template.html is the only file you need. Edit the file, add your content, change the style, and you're done. To see the slides in action, just load
the file in your browser.
Features
- Slides can include any HTML5 content (text, image, video, iframes, …);
- Slides transitions are animated with CSS3 (sliding by default);
- Resolution independent (slides are scaled according to the size of the browser. The virtual dimension is 800x600);
- Fullscreen presentation (HTML5 FullScreen API supported) - press
fto go fullscreen; - Incremental content;
- Mobile Friendly (supports touch events);
- Printing to PDF
Shells
The features of DZSlides are intentionally limited to keep the template light
and simple to understand. Shells are extensions that bring new features
to your slides. Here, you'll find 2 shells:
shells/embedder.htmlto embed a presentation in a web pageshells/onstage.htmlto show your slides with a control panel
To use them, just load the file in your browser, and follow the instructions.
Specifications
When you press the left and right keys, you go forward and go back in your slides.
But the slides can also respond to external messages. Messages can be sent through postMessage.
So another web page can control the slides.
Protocol
A cursor is a string of this form: 3.5. The first number represent the current slide index. The second number represent the current sub-item index.
Parameters must be escaped.
Messages a DZSlides page can receive:
REGISTERregister the source of the message as a target to notify for any events;FORWARDmove forward in the slides;BACKmove back in the slides;STARTmove to the first slide;ENDmove to the last slide;SET_CURSOR cursorjump to the cursor;GET_CURSORnotify the source of the message of the current cursor;TOGGLE_CONTENTtoggle the current slide content;GET_NOTES cursornotify the source of the message of the current notes content.
Messages a DZSlides page can send:
CURSOR cursorsent to one target as a response toGET_CURSOR, and sent to all the registered target when updated;REGISTERED slides_title slides_countsent to one target as a response toREGISTER;NOTES html_contentsent to one target as a response toGET_NOTES.
Hash parameters
url¶1=va1
Parameters a DZSlides page can have:
autoplay(integer, values :0/1, default :1) sets whether multimedia contents (audio, video) should be played automatically.
License
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.
Todo ideas
- Allow many elements to have the same
next-ordernumber — and activate them all at the same time. - 2D presentation structure as in flowtime.js or reveal.js. Many presentations fit naturally into it, even in this
template.htmlslides could be arranged in a 2D grid (in the overview) where every Part starts a new row of slides.