Creating an Attractive Presentation with HTML5

Creating an Attractive Presentation with HTML5

11 126755
Creating an Attractive Presentation with HTML5

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">&lt;-</button>
      <button title="Jump to slide" id="slide-no">3</button>
      <button title="Next" id="nav-next" class="nav-next">-&gt;</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">&rarr;</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">&larr;</span> and <span class="key">&rarr;</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>&larr;&nbsp;&rarr;</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!

SIMILAR ARTICLES

Understanding Closures

0 24640

11 COMMENTS

    • 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.

  1. 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

  2. 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.

  3. 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?

Leave a Reply