DZ Slides

HTML5 + CSS3 FTW!

tl;dr: This is a HTML5 template for presentation. Download the HTML template, edit, open with a modern browser, enjoy.

If you create a presentation, please let me know. Share your slides, impressions or tips: @paulrouget or firstname at mozilla.com.

Want to keep updated: follow me on twitter: @paulrouget, follow my blog or follow the project on bitbucket.

About

Hi. My name is Paul Rouget. I wrote a HTML5 Slides system. It's free, simple and sexy. DZ Slides is a single web page. Just one file. It includes some inline CSS and Javascript inside for the magic.

See the magic in action here:.

In this video, the topic is Firefox 4. But I use DZ Slides for the presentation.

DZ Slides hasn't been designed to create complex slides. A slide is a couple of words, an image, maybe a video. That's all. And trust me, usually, it's way enough (and please, avoid bullets points. It's boring.). But you're not limited, you can extend this code as much as you want.

To create DZ Slides, you need to understand the basis of HTML and CSS.

Download

http://bitbucket.org/paul/dzslides/

For now, this version works best with Firefox 4 (beta).

Documentation: "Use the source, Luke!".

Features

Get started

First, you want to play the slides. Open the HTML file in your favorite (modern) browser (see supported browsers below). Go fullscreen. Ajust the size of the slide with the zoom function of your browser (usually ctrl +/-). Press the left/right arrow keys to browse the slides. Easy.

How to edit the slides? There's no editor (yet). You have to edit the file yourself. DON'T RUN! It's easy. Take your favorite text editor and open the file. You see the source code of the file. You want to do two things: First, change the content of the slides, then, change the look of the slides.

To change the content: Edit the HTML. A slide is a <section> element. A <section> element is inside the <body> element. Add a <section> and you will have a new slide. Inside a <section> element, you can have any HTML content you want. This content is your slide. Add some <p>, <img>, <video>, etc.

To change the look: Edit the CSS. To change the background, change the style of body (background-image: ...;). To change to the style for the content, style the section element. The transitions between slides is done with CSS3 Transitions.

Once you feel confortable with the structure of the file, hack it to create your own crazy and dizzy effects. Let me know if you've created anything awesome

Bugs & requests

Please submit bugs here.

Browser support: