WebSlides

Thies Pfeiffer

AG Wissensbasierte Systeme, Technische Fakult�t, Universit�t Bielefeld

Overview

  • HTML Slides
  • Layouts
  • Support for maths
  • Embedding movies
  • Embedding 3D graphics

History

The slides are based on S5 with some extensions regarding

  • embedding of video and 3D graphics
  • layouts
  • blocks and frames

Basics

  • There is a basic structure you have to respect
  • There is a div class "layout" where header and footer can be defined
  • The presentation is enclosed by the div class "presentation" 
    
<body>
<div class="layout"></div>
<div class="presentation">
  <div class="slide">Slide 0</div>
  <div class="slide">Slide 1</div>
</div>
</body>
  • Individual slides are defined by the div class "slide"

Basics - Defining headers and footers

  • You can define headers and footers in one place
  • Just define a div class "layout" as follows:
    
<div class="layout">
  <div id="controls"><!-- DO NOT EDIT --></div>
  <div id="currentSlide"><!-- DO NOT EDIT --></div>
  <div id="header">
  </div>
  <div id="footer">
    <h1>Your Slide Title</h1>
    <h2>Put your name and date here</h2>
  </div>
</div>

Basics - Bullet-Lists

  • Typically a slide will have a list of bullets:
    
<div class="slide">
  <ul>
    <li>Bullet One</li>
    <li>Bullet Two</li>
  </ul>
</div>
  • You can also show individual bullets incrementally
  • Just add the class "incremental"

Blocks

Create block to emphasize your points

  • Use the class "block" to mark your blocks in a distinct DIV environment.

Even with extra titles using h2

But you could also use blocks without a title, as you will see in the remainder of this presentation.

Layouts

Two Column Layout

With extra titles

  • You might want to have a 2-column layout.
  • This is supported by the left-column and right-column CSS classes.

This is column two without title

Three Column Layout

This is column one

This is column two. Note that you can make a block just by adding the class "block"

This is column three

Maths

  • You can use MathML to typeset formulas
  • sin ⁡ ( x 4 )
  • But this is quite cumbersome. Thanks to Douglas R. Woodall you can also use Latex-Style formulas between \$s
    • \$sin(x^4)\$ $\to sin(x^4)$

Movies

Adding Videos

  • Simple since HTML 5
  • But keep an eye on the codecs used, this is currently still a mess!
  • <video controls>
  <source src="movie..mp4" 
    type="video/mp4">
  <source src="movie.webm" 
    type="video/webm">
</video>

3D Graphics

It is easy to add interactive 3D graphics with the X3DOM JavaScript library.

Summary

WebSlides
  • are an extended Version of S5 from Eric A. Meyer
  • are based on HTML an should run in most browsers (except for some features such as MathML or WebGL)
  • offer several features, from media support (video, images) to 3D graphics and math formulars.
  • have the additional eye candy (transitions)
  • can be easily used with versioning tools, such as SVN, CVS, etc.
  • are simple to customize, just HTML/JavaScript