This is a template for slides using the b6+ JavaScript framework with a W3C style. For usage instructions, see at the end.

To start the slide show, turn on JavaScript and press ‘A’. Return to the index by pressing ‘A’ or ‘Esc’. On a touch screen, use a 3-finger touch. Double click to open a specific slide. In slide mode, use ‘?’ to get a list of available commands.

Leaving presentation mode.

# The W3C slide style

… for the b6+ framework

## Lists

An example of a numbered list:

1. Potatoes
2. Onions and olives

An example of an unordered list:

- North pole
- East pole

## Some elements

Words can be given a strong emphasis, which makes them appear in bold

The normal emphasis has a highlighter effect.

Code looks like this: `if (a) return b;`

This link goes to slide 2

This is an example of a note, in a smaller font

## Incremental display

- This item is shown right away
- This one appears on a key press
- The second key press reveals this

## An image on the side

It seems the famous ‘lorem ipsum’ is based on a text by Cicero, but with the lines mixed up. On a Cicero by the text, it seems the ‘ipsum lorem’ is famous based with lines but mixed up.

## An image on the side

And again, with class `slide side right`.

It seems the famous ‘lorem ipsum’ is based on a text by Cicero, but with the lines mixed up. On a Cicero by the text, it seems the ‘ipsum lorem’ is famous based with lines but mixed up.

## A big image on the side

It seems the famous ‘lorem ipsum’ is based on a text by Cicero, but with the lines mixed up. On a Cicero by the text, it seems the ‘ipsum lorem’ is famous based with lines but mixed up.

## A big image on the side

And again, with class ‘slide side right big’.

It seems the famous ‘lorem ipsum’ is based on a text by Cicero, but with the lines mixed up. On a Cicero by the text, it seems the ‘ipsum lorem’ is famous based with lines but mixed up.

## In columns

### Title

Children of an element with a class of `columns` are distributed over two columns

### Title

This is the second child, which goes into the right column

### Title

And this is the third one. Left column again.

Etc.

place t l
place t
place t r
Here is something for the left side, with class place l
class place puts an element centered in a 3×3 grid
place r
place b l
place b
combine place with top (or t), right (or r), bottom (or b) and left (or l)

## Numbered lines of code

    Lines in a PRE can be numbered
                           (automatically)
      * Give the PRE a class of "numbered"
      * Works for up to 20 lines
                           (depending on font size)
      six
       seven
       eight
        nine
        ten
      eleven

## Striped tables

row 1 | has no background
row 2 | has a light gray background
row 3 | has no background
row 4 | has a light gray background
etc. |
etc. |

## Image overlay: cover

Careful, some images make the text hard to read!

## Image overlay: fit

Careful, some images make the text hard to read!

## White text

- Use a class of `slide white` for white-on-black
- Useful for text on a dark background

(Photo ‘Surfer and the stormy sea’ by Xavier Nohet)

## Shout and grow!

Shout:

Takahashi method!

Shout & Grow:

Animated

Grow: Don't use this too often!

## Slide transitions

The style sheet predefines several transitions: fade-in, slide-in, move-left, etc.

A transition can be set globally, applying to all slides; or locally, applying only to the transition between this slide and the next.

## Convert to PDF

Print in portrait mode to get:

- multiple slides per page
- notes between the slides

📃︎ Try it! [W3C team only]

A4 or Letter

Print in landscape mode to get:

- one slide = one page
- no notes

📃︎ Try it [W3C team only]

PDF slides

## Conclusion

1. Making slides is easy
2. Questions?

## User manual

This is a template for slides using the b6+ framework with a W3C style. The b6+ JavaScript code manages the slide progression, while the style sheet provides the W3C look and some useful predefined layout styles.

If you write slides with this style, you can either put them online or download a zip with everything needed to present offline, as explained below.

Note: The same slides and the same style can also be used with the Shower framework. Look in the HTML source for how to change the script.

### Developing slides online

If you develop your slides on the W3C web site (with HTTP PUT, WebDav or CVS), then make a directory under https://www.w3.org/Talks/2021/ or https://www.w3.org/2021/Talks/ (or whatever the current year is). The former will be public, the latter requires setting an ACL. Copy b6plus.html (this file) from https://www.w3.org/Talks/Tools/ into your directory and edit the content, or just use it as an example.

### Developing slides offline

If you develop your slides offline (or plan to present them without a network), then download this zip file. Unpacking it creates the following directories and files:

- slides/
  - Icons/
    - W3C-circle.svg (an SVG image)
    - W3C-circle.png (a PNG image)
    - linen.png (a PNG image)
    - ramp.png (a PNG image)
  - Tools/
    - b6plus.html (alternative slide template)
    - b6plus-humaaans.html (this file)
    - shower3-2.html (slide template using Shower)
    - shower3-2-humaaans.html (slide template using Shower)
    - b6plus/
      - b6plus.js (a JavaScript file)
    - Shower3-2/
      - Gill_Sans_Italic.woff (a Web font)
      - Gill_Sans.woff (a Web font)
      - Gill_Sans_Bold.woff (a Web font)
      - Gill_Sans_Italic.woff (a Web font)
      - League_Gothic-webfont.woff (a Web font)
      - Lato-Regular.woff (a Web font)
      - Lato-Bold.woff (a Web font)
      - Lato-BoldItalic.woff (a Web font)
      - Lato-Italic.woff (a Web font)
      - Montserrat-Black.woff (a Web font)
      - Montserrat-BlackItalic.woff (a Web font)
      - Montserrat-Bold.woff (a Web font)
      - Montserrat-BoldItalic.woff (a Web font)
      - humaaans-cover.svg (an image)
      - humaaans-banner.svg (an image)
      - shower.js (an alternative JavaScript file)
      - humaaans2.css (a CSS file)
      - slides.css (a CSS file)

Make a directory for your own slides under slides. (A good name is MMDD-Theme, where MM is the month in which you give the talk, DD the date and Theme the topic, e.g., ‘Legal’, ‘W3C’ or ‘SVG’.) You can copy the b6plus.html file there as a starting point, or just use it as an example. If you make any images, put them in that directory as well.

If you are able to upload your slides, put your directory with all that it contains under https://www.w3.org/Talks/2021/ or https://www.w3.org/2021/Talks/ (replace 2021 by the current year). There is no need to upload the Tools directory. It is is already there.

(Uploading requires HTTP PUT, WebDav or CVS. To set an ACL, you will need ,access.)

## Writing slides

### Slides

Each slide is a section element* with a class of slide:

    <section class="slide">
      ... slide content here...
    </section>

Inside the slides, use normal HTML elements (p, ul, em, etc.).

*) Note for advanced users: Although not shown in this template, it is in fact possible to use other elements than section. One common choice is div.

### Speaker notes or comments

You can add additional text, such as speaker notes or explanations, between the slides. They will be visible in index mode but not in presentation mode. Use elements with a class of comment:

    <section class="comment">
      ... text here...
    </section>

### Slide numbers

If a slide should not show the slide number, add the class clear:

    <section class="slide clear">
      ... slide content here...
    </section>

### Title slides (cover slides)

For cover slides (the title slide or separator slides between parts of a presentation), add a class cover. You can combine cover and clear. E.g.:

    <section class="slide cover clear">
      <h1>My presentations<h1>
      <address>Peter W. Slidemaker</address>
    </section>

### Illustrations on the left or right

Slides with narrower text and an illustration on the left or right can be made by adding the class side to the slide. Inside the slide there should be exactly one element that also has a class of side (an image or some other element). Two sizes are possible: normal (about 1/3 of the slide) and big (about 2/3 of the slide).

To put an image on the left:

    <section class="slide side">
      <img src="..." alt="..." class="side">
      ... slide content here...
    </section>

To put the image on the right, add class right (which may be abbreviated to r):

    <section class="slide side r">
      <img src="..." alt="..." class="side">
      ... slide content here...
    </section>

Add class big to the slide for a bigger image. To put the image on the left:

    <section class="slide side big">
      <img src="..." alt="..." class="side">
      ... slide content here...
    </section>

And on the right:

    <section class="slide side r big">
      <img src="..." alt="..." class="side">
      ... slide content here...
    </section>

### Automatic slide shows

Slides can be made to advance automatically after a given time, by setting a data-timing attribute on them with a value of MM:SS (minutes and seconds). E.g.,

    <section class="slide" data-timing="1:03">

This slide will remain on screen no longer than 1 minute and 3 seconds, after which the next slide will be shown.

### Progress bar

If you want a progress bar during the slide presentation, add an empty div with a class of progress. It can be put before the first slide or after the last, but there should be at most one such element in the file:

    <div class="progress"></div>

The progress bar will show as a thin red line along the top of the slides. Its length increases from zero on the first slide to 100% on the last.

### Incremental display

To progressively reveal elements on a slide, put a class of next on all elements that should not be visible right away. They will become visible one by one as you press the space bar or an arrow key. E.g.:

    <ul>
      <li>This item is visible when the slide appears
      <li class="next">This item is not immediately visible
      <li class="next">This is the third item to appear
    </ul>
    <p class="next">This is the last element to appear

### Two columns

To put elements side by side in two columns, make an element (a div, ul or any other element) with class columns. The first child of that element will be put in the left column, the second child in the right column. If there are more children, the third will be in the left column again, the fourth in the right, etc.

    <ul class="columns">
      <li>First goes on the left</li>
      <li>Second goes on the right</li>
    </ul>

### Small text

Less important text can be shown in a smaller font by giving it a class of note:

    <p class="note">Note that this is harder to read</p>

### Automatic line numbering

Pre-formatted text (in a pre) can be given line numbers by adding the class numbered:

    <pre class="numbered">

No more than 20 lines will be numbered. (In the normal font size, a slide fits 13 lines.)

### 3×3 Grid

It is possible to treat the slide as a 3×3 grid and put elements in the four corners, in the middle of each edge, or in the center of the slide. This is done by giving the elements a class of place. On its own, place puts the element in the center. By adding classes top, right, bottom and left the element can be placed in one of the eight other positions.

    <div class="place">Put this in the center</div>
    <div class="place bottom">Put this bottom center</div>
    <div class="place top right">In the top right</div>

The direction classes can also be abbreviated to t, r, b and l.

### Image overlays (background images)

To put an image behind the text of a slide, use an img with a class of cover:

    <img class="cover" src="..." alt="...">

The image will be stretched to fill the whole of the text area. If the image doesn't fit exactly (wrong aspect ratio), the image will be cropped.

With a class of fit instead of cover, the image will be scaled but without cropping. Instead there may be white bands on the sides or above/below the image, if it doesn't fit exactly.

    <img class="fit" src="..." alt="...">

This works both for normal slides and title slides (slides with a class of cover). The logo on the right is not obscured by the image.

### White text

If the overlay image is dark, it may be better to use white text. That can be done by adding the class white to the slide:

    <section class="slide white">

Other colors (blue titles, list bullets, links, etc.) are also lighter on such slides.

To make all slides white on black, set the class white on the body element. In that case you can use the class black on individual slides to give them black-on-white text.

### Slide transitions

By default, each slide just replaces the previous one, but there are several predefined slide transitions. You can set a transition on the body element to apply it to all slides:

    <body class="fade-in">

Or you can set it on individual slides, to apply only to the transition between that slide and the next. (I.e., it doesn't determine how the slide appears, but how it disappears.)

    <section class="slide wipe-left">

You can set both a global transition and local ones. The global transition applies to slides that do not have an explicit transition set locally.

fade-in
  The new slide appears faint at first and gets more opaque until it completely obscures the previous slide.
slide-in
  The new slide moves in from the left, while the previous slide moves back to the left.
move-left
  The new slides move in from the right while the old slide moves out to the left.
move-up
  The old slide moves up and the new slide moves in from the bottom.
flip-up
  A 3D effect: the bottom of the old slide is lifted up and the slide is turned over to reveal the new slide on its back side.
flip-left
  Another 3D effect, but in this case the right side of the slide is lifted up and the slide is flipped over to the left, revealing the new slide on the back side.
center-out
  A small circle appears in the middle of the old slide that reveals the new slide. The circle grows until it covers the whole slide.
wipe-left
  The new slide moves in from the right, until it covers the old slide.
zigzag-left
  A zigzag pattern moves in from the right. To the left is the old slide, to the right the new one.
zigzag-right
  A zigzag pattern moves in from the left. To the left is the new slide, to the right the old one.
cut-in
  The new slide moves in from the top left and covers the old slide.

### Accessibility

When you present while using a screen reader, you cannot use the screen reader's usual keystrokes to navigate, only the keystrokes defined by the b6+ script. However, the screen reader will speak each slide as soon as it appears. The script creates an element with attributes role=region and aria-live=assertive for that purpose.

When you leave presentation mode, the screen reader will say ‘stopped’. To make it say something else (e.g., because you want a different language than English), create an element with role=region and aria-live=assertive yourself and put the text to speak in it. E.g.:

    <div role="region" aria-live="assertive">
      Terminé.
    </div>

## Presenting

### Mouse gestures and keystrokes

To present the slides, load them into a browser that supports JavaScript and CSS and then press the A key or double-click on a slide or touch the screen with three fingers (on certain devices).

Navigate though the slides by clicking the left mouse button, pressing the spacebar, the arrow keys or Page-up/Page-Down. The Home and End keys jump to the first, resp. last slide. F1 or F toggles full screen mode. The ? (question mark) key shows a list of available commands.

To exit the presentation, press the A key or the Esc key.

You can also see the b6+ documentation for navigation keys & gestures.)

### Using two screens or two windows

B6+ can show the slides in a second window. The first window can then be used to control the slide show and view notes and next slides. If you have two screens that can show different content (e.g., your computer's screen and a projector), you can thus present the slides on one screen, and see the current and next slides, and any notes, on the other.

Open the second window by pressing the 2 key or the ⧉ button in index mode.

### Clocks to show remaining time

### Starting in presentation mode

Add ‘?full’ at the end of the URL (but before any fragment ID) to open the slides in presentation mode instead of index mode.

To open in presentation mode at a specific slide, add ‘?full’ and the ID or the number of the slide, e.g., Overview.html?full#place or Overview.html?full#25.

### Hiding the mouse pointer

When you don't want the mouse pointer to remain on the screen in presentation mode, add the class hidemouse on the body element. If the mouse does not move for 5 seconds, the pointer is made invisible. It comes back as soon as the mouse is moved.

    <body class="hidemouse">

You can also set a different timeout in seconds. E.g, to set a short timeout of 1.5 seconds:

    <body class="hidemouse=1.5">

### Ignore mouse clicks

Normally, a mouse click anywhere on a slide (other than on a hyperlink or form element) has the effect of advancing to the next slide or incremental element. If you don't want that, add the class noclick on the body element.

    <body class="noclick">

The complete list of key strokes and gestures is in the b6+ documentation, which also shows what else b6+ can do.