W3C

Bert Bos | How to use b6?

How to use the b6 slide style?

Bert Bos (W3C) <bert@w3.org>

September 2012

B6 provides a style sheet for slide presentations based on a style made for some W3C brochures. It also provides a small script in JavaScript to help with presentations on browsers that do not support the projection media type. (Currently, 2012, only Opera's full-screen mode correctly selects the projection style sheets. On other browsers, you can emulate that mode by turning JavaScript on and pressing the A key to start the b6 script.)

What is b6?

b6 is

  1. A small JavaScript script that emulates projection mode on browsers that do not support it natively, and
  2. A particular style sheet for (W3C) slide presentations.

Slide sets based on b6 allow multiple slides in a single HTML file. Each slide starts with an H1 and the b6 style sheet (or the b6 JavaScript, on certain browsers) makes sure that only a single slide is shown at a time.

When the slides are not being projected, i.e., they rendered in screen, print or some other mode, all the slides are shown on a single page.

How do you use b6?

Include this code before the first slide:

<link href="../Tools/b6/b6.css" media=projection
 rel=stylesheet>
<script src="../Tools/b6/b6.js"
 type="text/javascript"></script>

<p class=letterhead><a href="http://www.w3.org/"
 ><img alt="W3C" src="../Icons/w3c_home.png"></a>

And mark-up every slide as

<div class=slide>
<h1>Title of the slide</h1>
...
</div>

Extras

Optionally, you can also

Special classes (1/3)

b6 predefines a few classes:

comment
Use <div class=comment><…</div> after a slide to add comments that will be visible in screen mode or when printed, but not during a presentation.
callout
Call out something important: <div class=callout>…</div>

This is a callout!

Special classes (2/3)

sidebar
A note on the right side:
<div class=sidebar>…</div>
col
Put two things next to each other:
<div class=col>…</div>
<div class=col>…</div>

Something on the left.

Something on the right.

Special classes (3/3)

hide
Things that should not be projected.
veryshort, short, long, verylong
Takahashi Method: slides with one or two words (<p class=veryshort) or a bit more (<p class=verylong).
keyword, comment, string, dim
Colors for code examples: <pre>... <span class=keyword>...
extensive
If a code example is big: <pre class=extensive>

Useful tools

Show a progress bar cum navigation bar:

  1. Include <!--minitoc--><!--/minitoc--> just after every H1
  2. Run the following (where Overview.html is the file with your slides):
    ../Tools/mkminitoc Overview.html

If necessary, remove it again with

../Tools/rmminitoc Overview.html

Useful snippets

You might want to include Bernard's advertisement. (See also French and Dutch on the next slides):

W3C

To Lead the Web to its full potential

To Anticipate the Trends

To Increase your company value

Join W3C

http://www.w3.org/Consortium/join

or contact: Bernard Gidon <bgidon@w3.org>

Useful snippets (French)

W3C

Pour Développer le potentiel du Web

Pour Anticiper les évolutions technologiques

Pour Augmenter la valeur et visibilité de votre organisation

Rejoigner le W3C

http://www.w3.org/Consortium/join

ou contacter : Bernard Gidon <bgidon@w3.org>

Useful snippets (Dutch)

W3C

Om het volle potentieel van het Web te ontwikkelen

Om de trends voor te zijn

Om de waarde van uw bedrijf te vergroten

Word lid van W3C

http://www.w3.org/Consortium/join

of neem contact op: Bernard Gidon <bgidon@w3.org>

Examples