Creating an 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
download in package
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
download in package
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!
Related Articles
Creating an Attractive HTML CSS Anime Theme Website Layout
Creating an Unbelievable HTML5 Canvas App for Online Image Enhancements
Creating a HTML5 & CSS3 Single Page Web Layout
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.