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:
Live Demo
[sociallocker]
download in package
[/sociallocker]
So, download the example files and lets start coding !
Step 1. HTML
index.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>
Thats all
Step 2. CSS
css/style.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
js/script.js
This file big enough too (330 lines). Hope that this is ok if it will available in package too.
Live Demo
Conclusion
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
Hello sfimedia,
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?
Hello Serge,
please read here:
http://stackoverflow.com/questions/1657170/detecting-support-for-specific-html-5-features-via-jquery
and
http://pietschsoft.com/post/2010/11/16/HTML5-Day-3-Detecting-HTML5-Support-via-JavaScript.aspx
about html5 support detection
Is it possible to modify “Creating an Attractive Presentation with HTML5” for IE8, I want to give support for IE8
Hello Jaydeep,
Unfortunately this will be pretty difficult, because we are using several HTML5-only properties in our JS code. Plus, IE8 don’t support transitions.
HI
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??
Hi voyager,
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?
Thanks, Andrew!
Could this be set up to work on an iPad?
Hello Jacky
I hope that yes, I can’t answer 100%, because I haven’t tested it in iPad yet.