Build your slides in HTML5 and CSS3 with DZSlides.

HTML5 and CSS3?

What are slides made of?

Text
Images
Videos

HTML5 can do that.

How slides behave?

Transitions
Resolution independent

◰

CSS3 can do that.

What is DZSlides?

One single HTML file.

A HTML template.

That brings all the needed features to transform a simple HTML5 page into a presentation.

    <!DOCTYPE html>

    <meta charset="utf-8">
    <title>The Title Of Your Presentation</title>

    <!-- Your Slides (one slide == one section) -->

    <section>
        <h1>My presentation</h1>
    </section>

    <section>
        <h2>Will blow your mind.</h2>
        <p>And this is why:</p>
    </section>

    <!-- Your Style -->

    <style>
    section {
        background: black;
        color: white;
    }
    h1 {
        color: yellow;
    }
    </style>

    <!-- CORE v2.0b:  -->
    <!-- Some Code You Don't Have To Look At -->
         ...

Pros and Cons

Pros

Simple
Hackable
Accessible
Standalone
Easy to share
Easy to build on top of
It's cooler than keynote

Cons

No authoring tool
Some browsers don't like it

The shells

Because I want to keep the whole mechanism in one single web page, the features are quite limited.

A Shell is an extension for DZSlides.

A Shell is a web page that embeds a presentation and adds a feature to it.

The Shell and the Presentation communicate with postMessage.

Examples

embedder.html

adds controls (back, forward), and a slide count. Useful if you want to embed the slides in a blog post.

onstage.html

Show the current slide, the next slide, a clock and controls another opened presentation (fullscreen). Also displays the hidden notes from the slides (in the <details> tag). Perfect for a live presentation.

How to start

Read the source

Download the template, read it. Look at the examples. There's no "rules".

It's as unlimited as the web is.