Attractive Presentation with HTML5. Today we will prepare something new – presentation. And we will using all interesting what can give us HTML5. Presentation itself will contain 5 easy slides. We will able to use navigation arrow keys for sliding, spacebar, display notes, sidebar with some custom content. Here are new html5 tags which we going to use: nav, menu, section, aside, header and hgroup. Sure, that now is time to check our demo.
Here are links to demo and downloadable package:
download in package
So, download the example files and lets start coding !
Step 1. HTML
All layout consist of 4 main sections: header, floating help navigation, main slides area and sidebar. Here are code for header area:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Presentation demo | Script tutorials</title> <!-- Linking styles --> <link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> </head>
Next – floating help navigation (in document body)
<nav id="helpers"><!-- Defining the floating helpers of the page --> <button title="Previous" id="nav-prev" class="nav-prev"><-</button> <button title="Jump to slide" id="slide-no">3</button> <button title="Next" id="nav-next" class="nav-next">-></button> <menu> <button type="checkbox" data-command="notes" title="View Notes">Notes</button> <button type="checkbox" data-command="help" title="View Help">Help</button> <button type="checkbox" data-command="back" title="Back to tutorial">Back</button> </menu> </nav>
Here, we predefined several action buttons for future. Now, here are code for presentation slides:
<div class="presentation"><!-- Defining the main presentation --> <div id="presentation-counter">Loading...</div> <div class="slides"><!-- Defining slides --> <div class="slide" id="slide1"><!-- Defining single slide --> <section class="middle"> <p>HTML5 Presentation demo</p> <p>Press <span id="left-init-key" class="key">→</span> key to continue.</p> </section> <aside class="note"><!-- hidden notes of slide --> <section> Notes for first slide </section> </aside> </div> <div class="slide" id="slide2"> <header>Slides controls</header> <section> <ul> <li><span class="key">←</span> and <span class="key">→</span> to move forward/back.</li> <li><span class="key">spacebar</span> to move forward.</li> <li><span class="key">N</span> to toggle hidden notes.</li> <li><span class="key">H</span> to toggle help.</li> </ul> </section> <aside class="note"> <section> Notes for second slide </section> </aside> </div> <div class="slide" id="slide3"> <section class="middle"> <hgroup> <h1> Slide3 </h1> <h2> Slide Title #3 </h2> </hgroup> <p>text of slide, text of slide, text of slide, text of slide</p> </section> </div> <div class="slide" id="slide4"> ... code for slide 4 .. </div> <div class="slide" id="slide5"> ... code for slide 5 .. </div> </div>
You can add more and more slides in end by same rules. And now – code for sidebar:
<div id="hidden-note" class="invisible" style="display: none;"> </div> <!-- hidden note --> <aside id="help" class="sidebar invisible" style="display: hidden;"><!-- Defining sidebar help --> <table> <caption>Help</caption> <tr> <th>Move forward/back</th> <td>← →</td> </tr> <tr> <th>Move forward</th> <td>spacebar</td> </tr> <tr> <th>Hidden Notes</th> <td>N</td> </tr> <tr> <th>Help</th> <td>H</td> </tr> </table> </aside>
Step 2. CSS
Resulting file of our demo is pretty big. So I decided not publish all this code here. But you always can download this in our package.
Step 3. JS
This file big enough too (330 lines). Hope that this is ok if it will available in package too.
I hope that today you were impressed and you like presentation. As you can see – all pretty customizable. I wish you luck in creating own presentations!
Doesn’t work on Safari
Sorry for long response, but are you sure that this don’t work in Safari? I have tested it in FF and Chrome browsers – and it works here.
Thanks man! Nice tutorials you have here , very useful . Oh and HTML5 rocks :)
Very good tutorials, but please tell me, can I display a message box, if this tutorials will be read incorrectly or not read at all?
please read here:
about html5 support detection
Is it possible to modify “Creating an Attractive Presentation with HTML5” for IE8, I want to give support for IE8
Unfortunately this will be pretty difficult, because we are using several HTML5-only properties in our JS code. Plus, IE8 don’t support transitions.
Well done have a question do, trying to imbed an audio element into the slides but it wont play. I can see the controls any ides why so??
Why it don`t play? In case of correct adding JS code to work with audio – it will possible. How you have added your code? Similar as I did for my recent game-related tutorials?
Could this be set up to work on an iPad?
I hope that yes, I can’t answer 100%, because I haven’t tested it in iPad yet.