# 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>
<div id="footer">
<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

## 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
• $\mathrm{sin}\left({x}^{4}\right)$
• 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

• 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