<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta charset="UTF-8" />
  <meta content="width=device-width" name="viewport" />
  <title>%%Title%%</title>
  <link rel="stylesheet" href="../Templates/TPAC-2021-slides.css" />
  <!-- To use the Shower framework, include the following two scripts: -->
  <script src="../Templates/shower.js"></script>
  <script src="../Templates/iframe-fixup.js"></script>
  <!-- To use the b6+ framework, remove the two scripts above and use this: -->
  <!--
  <script src="../Templates/b6plus.js"></script>
  -->
 </head>
 <body class="shower fade-in">

  <section class="comment">
   <p>This is a template for slides for <a
   href="https://www.w3.org/2021/10/TPAC/">TPAC 2021</a>. <strong>To start
   the slide show, click on a slide or press Shift+F5 (Shower); or
   double click or press ‘A’ (b6+).</strong> For <a
   href="Overview.html#manual" >usage instructions</a>, see at the
   end.</p>
  </section>

  <!--=============================================================
			    Example slides
  ==============================================================-->

  <div class="progress">
   <!-- Remove this element if you don't want a progress bar -->
  </div>

  <section class="slide cover clear" id="start" aria-label="slide">
   <h1>%%Title%%</h1>
   <address>%%Author%%</address>
  </section>

  <section class="slide" id="lists" aria-label="slide">
   <h2>Lists</h2>
   <h3>An example of a numbered list</h3>
   <ol>
    <li>Potatoes</li>
    <li>Onions and olives</li>
   </ol>
   <h3>An example of an unordered list</h3>
   <ul>
    <li>North pole</li>
    <li>East pole</li>
   </ul>
  </section>

  <section class="slide" id="elements" aria-label="slide">
   <h2>Some elements</h2>
   <p>Words can be given a <strong>strong emphasis</strong>, which
   makes them appear in bold</p>
   <p>The <em>normal emphasis</em> has a highlighter effect.</p>
   <p>Code looks like this: <code>if (a) return b;</code></p>
   <p class="note">This is an example of a note, in a smaller font</p>
  </section>

  <section class="slide" id="incremental1" aria-label="slide">
   <h2>Incremental display (1/2)</h2>
   <div class=columns>
    <div>
     <p>Unfold (default style)</p>
     <ul>
      <li class="next">This one appears on a key press</li>
      <li class="next">The second key press reveals this</li>
      <li class="next">And then this</li>
     </ul>
    </div>
    <div>
     <p>Fade in (<code>class=emerge</code>)</p>
     <ul class=emerge>
      <li class="next">This one appears on a key press</li>
      <li class="next">The second key press reveals this</li>
      <li class="next">And then this</li>
     </ul>
    </div>
   </div>
  </section>

  <section class="slide" id="incremental2" aria-label="slide">
   <h2>Incremental display (2/2)</h2>
   <div class=columns>
    <div>
     <p>Red items (<code>class=strong</code>)</p>
     <ul class=strong>
      <li class="next">This one appears on a key press</li>
      <li class="next">The second key press reveals this</li>
      <li class="next">And then this</li>
     </ul>
    </div>
    <div>
     <p>Quick (<code>class=quick</code>)</p>
     <ul class=quick>
      <li class="next">This one appears on a key press</li>
      <li class="next">The second key press reveals this</li>
      <li class="next">And then this</li>
     </ul>
    </div>
   </div>
  </section>

  <section class="slide side" id="side" aria-label="slide">
   <h2>An image on the side</h2>
   <img class="side" width=498 height=575
	src="https://www.w3.org/Talks/2017/0520-CSS-Sud-Web/CSS_color_tree3t"
	alt="[Picture of a stylized tree with colorful, square leaves]" />
   <p>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.</p>
  </section>

  <section class="slide side r" id="right-side" aria-label="slide">
   <h2>An image on the side</h2>
   <img class="side" width=498 height=575
	src="https://www.w3.org/Talks/2017/0520-CSS-Sud-Web/CSS_color_tree3t"
	alt="[Picture of a stylized tree with colorful, square
	     leaves]" />
   <p>And again, with class <code>slide side right</code>.</p>
   <p>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.</p>
  </section>

  <section class="slide side" id="side-cover" aria-label="slide">
   <h2>A ‘bleeding’ image</h2>
   <img class="side cover" width=550 height=451
	src="https://www.w3.org/2018/Talks/TPAC-2018/ceo-update/diversity.jpg"
	alt="[Top view of four pairs of hand holding each other crosswise]" />
   <p>Adding class <code>cover</code> to the image makes it stretch to
   the edges of the slide.</p>
  </section>

  <section class="slide side right" id="r-side-cover" aria-label="slide">
   <h2>A ‘bleeding’ image</h2>
   <img class="side cover" width=550 height=451
	src="https://www.w3.org/2018/Talks/TPAC-2018/ceo-update/diversity.jpg"
	alt="[Top view of four pairs of hand holding each other crosswise]" />
   <p>And also on the right side…</p>
   <p class=note>Hint: Add class=clear on the slide to omit the banner
   and slide number.</p>
  </section>

  <section class="slide side big" id="bigside1" aria-label="slide">
   <h2>A big image on the side</h2>
   <img class="side" width=498 height=575
	src="https://www.w3.org/Talks/2017/0520-CSS-Sud-Web/CSS_color_tree3t"
	alt="[Picture of a stylized tree with colorful, square leaves]" />
   <p>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.</p>
  </section>

  <section class="slide side right big" id="bigside2" aria-label="slide">
   <h2>A big image on the side</h2>
   <img class="side" width=498 height=575
	src="https://www.w3.org/Talks/2017/0520-CSS-Sud-Web/CSS_color_tree3t"
	alt="[Picture of a stylized tree with colorful, square leaves]" />
   <p>And on the right side…</p>
  </section>

  <section class="slide side big" id="bigside3" aria-label="slide">
   <h2>A big, ‘bleeding’ image</h2>
   <img class="side cover" width=550 height=451
	src="https://www.w3.org/2018/Talks/TPAC-2018/ceo-update/diversity.jpg"
	alt="[Top view of four pairs of hand holding each other crosswise]" />
   <p>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.</p>
  </section>

  <section class="slide side right big" id="bigside4" aria-label="slide">
   <h2>A big, ‘bleeding’ image</h2>
   <img class="side cover" width=550 height=451
	src="https://www.w3.org/2018/Talks/TPAC-2018/ceo-update/diversity.jpg"
	alt="[Top view of four pairs of hand holding each other crosswise]" />
   <p>And on the right side…</p>
  </section>

  <section class="slide" id="figures" aria-label="slide">
   <h2>A figure</h2>
   <details>
    <summary>
     <img src="piechart.png" alt="pie chart" height=405>
    </summary>
    <p>The description of the pie chart, here as a table:
    <table class=striped>
     <thead>
      <tr><th>Name <th>Percentage
     <tbody>
      <tr><td>Andy <td>16%
      <tr><td>Chloe <td>21%
      <tr><td>Daniel <td>13%
      <tr><td>Grace <td>20%
      <tr><td>Sophia <td>30%
    </table>
   </details>
  </section>

  <section class="slide" id="columns" aria-label="slide">
   <h2>In columns</h2>
   <div class="columns">
    <section>
     <h3>Title</h3>
     <p>Children of an element with a class of <code>columns</code> are
      distributed over two columns</p>
    </section>
    <section>
     <h3>Title</h3>
     <p>This is the second child, which goes into the right
      column</p>
    </section>
    <section>
     <h3>Title</h3>
     <p>And this is the third one. Left column again.</p>
    </section>
    <p>Etc.</p>
   </div>
  </section>

  <section class="slide" id="place" aria-label="slide">
   <div class="place t l"><code>place t l</code></div>
   <div class="place t"><code>place t</code></div>
   <div class="place t r"><code>place t r</code></div>
   <div class="place l">Here is something for the left
   side, with class <code>place l</code></div>
   <div class="place">class <code>place</code> puts an element
   centered in a 3×3 grid</div>
   <div class="place r"><code>place r</code></div>
   <div class="place b l"><code>place b l</code></div>
   <div class="place b"><code>place b</code></div>
   <div class="place b r">combine <code>place</code> with
   <code>top</code> (or <code>t</code>),
   <code>right</code> (or <code>r</code>),
   <code>bottom</code> (or <code>b</code>) and
   <code>left</code> (or <code>l</code>)</div>
  </section>

  <section class="slide" id="numbered" aria-label="slide">
   <h2>Numbered lines of code</h2>
   <pre class="numbered">
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</pre>
  </section>

  <section class="slide" id="striped" aria-label="slide">
    <h2>Striped tables</h2>
    <table class="striped">
      <tr><td>row 1</td><td>has no background</td></tr>
      <tr><td>row 2</td><td>has a light gray background</td></tr>
      <tr><td>row 3</td><td>has no background</td></tr>
      <tr><td>row 4</td><td>has a light gray background</td></tr>
      <tr><td>etc.</td><td></td></tr>
      <tr><td>etc.</td><td></td></tr>
    </table>
  </section>

  <section class="slide" id="image-cover" aria-label="slide">
   <h2>Image overlay: cover</h2>
   <!-- Photo by AleRimoldi, source: https://commons.wikimedia.org/wiki/File:Statue_de_Gutenberg_%C3%A0_Strasbourg.jpg -->
   <img width=500 height=667
	src="https://www.w3.org/Talks/2013/0628-CSS-Strasbourg/Statue_de_Gutenberg_a_Strasbourg.jpg"
	alt="Image: Statue of Gutenberg"
	class="cover" />
   <p class="place bottom right">Careful, some images make the text hard to
   read!</p>
  </section>

  <section class="slide" id="image-fit" aria-label="slide">
   <h2>Image overlay: fit</h2>
   <!-- Photo by AleRimoldi, source: https://commons.wikimedia.org/wiki/File:Statue_de_Gutenberg_%C3%A0_Strasbourg.jpg -->
   <img width=500 height=667
	src="https://www.w3.org/Talks/2013/0628-CSS-Strasbourg/Statue_de_Gutenberg_a_Strasbourg.jpg"
	alt="Image: Statue of Gutenberg"
	class="fit" />
   <p class="place">Careful, some images make the text
   hard to read!</p>
  </section>


  <section class="slide white" id="white" aria-label="slide">
    <h2>White text</h2>
    <img width=505 height=353
	 src="https://www.w3.org/2020/Talks/ac-slides/template/coast.jpg"
	 class="cover" style="object-position: 94% 100%"
	 alt="[image: beach, cliffs, buildings, dark clouds and a surfer]" />
    <ul>
      <li>Use a class of <code>slide white</code> for
      white-on-black</li>
      <li>Useful for text on a dark background</li>
    </ul>
    <p class="note">(Photo <a
    href="https://unsplash.com/photos/XBbX5PYOvC0/info" >‘Surfer and
    the stormy sea’</a> by <a href="https://unsplash.com/@xavifuji"
    >Xavier Nohet</a>)</p>
  </section>


  <section class="slide" id="grow" aria-label="slide">
   <h2>Shout and grow!</h2>
   <p>Shout:</p>
   <p class="shout">Takahashi method!</p>
   <p>Shout &amp; Grow:</p>
   <p class="shout grow">Animated</p>
   <p class="grow">Grow: Don't use this too often!</p>
  </section>


  <section class="slide" id="transitions" aria-label="slide">
   <h2>Slide transitions</h2>
   <p>The style sheet predefines several transitions: fade-in, slide-in,
   move-left, etc.</p>
   <p>A transition can be set globally, applying to all slides; or
   locally, applying only to the transition between this slide and the
   next.</p>
  </section>


  <section class="slide final clear" id="end" aria-label="slide">
   <h2>Conclusion</h2>
   <ol>
    <li>Making slides is easy</li>
    <li>Questions?</li>
   </ol>
  </section>

  <!--=============================================================
			     User manual
  ==============================================================-->

  <section class="comment" id="manual">
   <h2>User manual</h2>

   <p>This manual contains three sections: <a
   href="#setting-up">creating a slide set</a>, <a
   href="#features">writing slides</a> and <a
   href="#presenting">presenting</a>.</p>

   <h2 id=setting-up>Setting up your slides</h2>

   <p>This is a template for slides for <a
   href="https://www.w3.org/2021/10/TPAC/" >TPAC 2021</a>. It uses either
   the <a href="http://shwr.me/" >Shower</a> script (version 3.1) or
   the <a href="https://www.w3.org/Talks/Tools/b6plus/" >b6+</a>
   script for the presentation and has a style sheet based on the TPAC
   2021 visual style. (To enable b6+, uncomment the
   <strong>script</strong> tag in the HTML source.)</p>

   <p>All slides for TPAC 2021 have to be online. If you cannot put them
   online yourself, you can download a zip (see below) with everything
   needed to develop slides offline and ask <a
   href="mailto:coralie@w3.org">Coralie</a> for help uploading the
   slides once they are ready.</p>

   <h3>Developing slides online</h3>

   <p>If you develop your slides <strong>online</strong> (or in CVS),
   then make a directory under <a
   href="https://www.w3.org/2021/Talks/TPAC/"
   >https://www.w3.org/2021/Talks/TPAC/</a>. Copy the <a
   href="https://www.w3.org/2021/Talks/TPAC/Templates/Overview.html"
   >Overview.html</a> from <a
   href="https://www.w3.org/2021/Talks/TPAC/Templates/"
   >https://www.w3.org/2021/Talks/TPAC/Templates/</a> into your
   directory and edit the content, or just use it as an example.</p>

   <h3>Developing slides offline</h3>

   <p>If you develop your slides <strong>offline</strong> (or plan to
   present them without a network), then download this <a
   href="https://www.w3.org/2021/Talks/TPAC/Templates/TPAC-2021-slides-template.zip"
   >zip file</a>. Unpacking it creates the following directories and
   files:</p>

   <ul class="tree">
     <li><code><strong>TPAC-2021/</strong></code><br />
      │</li>
     <li> └─ <code><strong>Templates/</strong></code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2021/Talks/TPAC/Templates/Overview.html"
     >Overview.html</a> (this file)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2021/Talks/TPAC/Templates/shower.js"
     >shower.js</a> (a JavaScript file)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2021/Talks/TPAC/Templates/iframe-fixup.js"
     >iframe-fixup.js</a> (a JavaScript file)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2021/Talks/TPAC/Templates/b6plus.js"
     >b6plus.js</a> (an alternative JavaScript file)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2021/Talks/TPAC/Templates/TPAC-2021-slides.css"
     >TPAC-2021-slides.css</a> (a CSS file)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2021/Talks/TPAC/Templates/TPAC-2021-slides-banner.svg"
     >TPAC-2021-slides-banner.svg</a> (an SVG image)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2021/Talks/TPAC/Templates/linen.png"
     >linen.png</a> (a PNG image)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2021/Talks/TPAC/Templates/people-icons-round.jpg"
     >people-icons-round.jpg</a> (a JPEG image)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2021/Talks/TPAC/Templates/piechart.png"
     >piechart.png</a> (a PNG image)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2021/Talks/TPAC/Templates/Lato-Bold.woff"
     >Lato-Bold.woff</a> (a Web font)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2021/Talks/TPAC/Templates/Lato-BoldItalic.woff"
     >Lato-BoldItalic.woff</a> (a Web font)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2021/Talks/TPAC/Templates/Lato-LightItalic.woff"
     >Lato-LightItalic.woff</a> (a Web font)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2021/Talks/TPAC/Templates/Lato-Light.woff"
     >Lato-Light.woff</a> (a Web font)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2021/Talks/TPAC/Templates/Montserrat-Black.woff"
     >Montserrat-Black.woff</a> (a Web font)</code><br />
          │</li>
     <li>     └─ <code><a
     href="https://www.w3.org/2021/Talks/TPAC/Templates/Montserrat-BlackItalic.woff"
     >Montserrat-BlackItalic.woff</a> (a Web font)</code></li>
   </ul>

   <p>Make a directory for your own slides under
   <strong>TPAC-2021</strong>. You can copy the
   <strong>Overview.html</strong> 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.</p>

   <p>If you are able to upload your slides, put your directory with
   all that it contains under <a
   href="https://www.w3.org/2021/Talks/TPAC/"
   >https://www.w3.org/2021/Talks/TPAC/</a>. There is no need to
   upload the <strong>Templates</strong> directory. It is is already
   there.</p>

   <h2 id=features>Writing slides</h2>

   <h3>Slides</h3>

   <p>Each slide is a <strong>section</strong> element with a class of
   <strong>slide</strong>:</p>

   <pre>&lt;section class="slide">
  ... slide content here...
&lt;/section></pre>

    <p>Inside the slides, use normal HTML elements (<strong>p, ul,
    em,</strong> etc.).</p>

    <h3>Slide numbers</h3>

    <p>If a slide should <em>not</em> have a slide number and a logo,
    add the class <strong>clear</strong>:</p>

    <pre>&lt;section class="slide clear">
  ... slide content here...
&lt;/section></pre>

    <p>On <a href="#title-slides">title slides</a>
    and <a href="#final-slides">final slides</a> (see below), this
    only removes the number, not the logo.</p>

    <h3 id="title-slides">Title slides (cover slides)</h3>

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

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

    <h3 id="final-slides">Final slide</h3>

    <p>The class <strong>final</strong> is meant for a last slide,
    e.g., for conclusions or thanks (but it may be used elsewhere,
    too):</p>

    <pre>&lt;section class="slide final clear">
  &lt;h2>Conclusions&lt;h2>
  …
&lt;/section></pre>

    <h3>Illustrations on the left or right</h3>

    <p>Slides with narrower text and an illustration on the left or
    right can be made by adding the class <strong>side</strong> to the
    slide. Inside the slide there should be exactly one element that
    also has a class of <strong>side</strong> (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).</p>

    <p>To put an image on the left:</p>

    <pre>&lt;section class="slide side">
  &lt;img src="..." alt="..." class="side">
  ... slide content here...
&lt;/section></pre>

    <p>To put the image on the right, add class <strong>right</strong>
    (which may be abbreviated to <strong>r</strong>):</p>

    <pre>&lt;section class="slide side <b>r</b>">
  &lt;img src="..." alt="..." class="side">
  ... slide content here...
&lt;/section></pre>

    <p>Add class <strong>big</strong> to the slide for a bigger image.
    To put the image on the left:</p>

    <pre>&lt;section class="slide side <b>big</b>">
  &lt;img src="..." alt="..." class="side">
  ... slide content here...
&lt;/section></pre>

    <p>And on the right:</p>

    <pre>&lt;section class="slide side <b>r</b> big">
  &lt;img src="..." alt="..." class="side">
  ... slide content here...
&lt;/section></pre>

    <p>The image can be stretched to the edges of the slide by adding
    a class <strong>cover</strong>. The image is not deformed. It is
    scaled to be big enough to cover the image area and then either
    the sides are cropped (if it is too wide) or the top and
    bottom<sup><a href="#note2">*</a></sup>.</p>

    <pre>&lt;section class="slide side big">
  &lt;img src="..." alt="..." class="side <b>cover</b>">
  ... slide content here...
&lt;/section></pre>

    <p class="note" id="note2">*) Note for advanced users: It is
    possible to indicate which sides should be cropped: add an
    attribute like <strong>style="object-position: 20% 60%"</strong>
    to indicate that, of the amount to be cropped from the sides, 20%
    should be cropped on the left and the remaining 80% on the right;
    and of the amount to be cropped from the top and bottom, 60%
    should come from the top and the remaining 40% from the bottom.
    Thus, e.g., ‘0% 100%’ says never to crop anything from the left
    (0%) if the image is too wide, and only to crop from the top
    (100%) if the image is too tall. (The default corresponds to ‘50%
    50%’, i.e., crop equal amounts from both sides.)</p>

   <h3>Figures</h3>

   <p>When information is in the form of an image (a diagram, a chart,
    a screenshot, etc.), put it inside a <strong>figure</strong>
    element. Add a <strong>figcaption</strong> if needed.</p>

   <pre>&lt;figure&gt;&lt;img src="..." alt="..."&gt;&lt;figure&gt;</pre>

   <p>If the image is not accessible, use a
    <strong>details</strong> element instead and add a description,
    like this:</p>

   <pre>&lt;details&gt;
 &lt;summary&gt;&lt;img src="..." alt="..."&gt;&lt;/summary&gt;
 ... the same data as in the image, but as text...
&lt;/details&gt;</pre>

   <p>The description becomes visible when the user clicks on the
    image. (The <a href="#figures">slide above</a> shows an image of a
    pie chart that is described by a table with the same data.)

    <h3>Automatic slide shows</h3>

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

    <pre>&lt;section class="slide" data-timing="1:03"></pre>

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

    <h3>Progress bar</h3>

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

    <pre>&lt;div class="progress">&lt;/div></pre>

    <p>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.</p>

    <h3>Incremental display</h3>

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

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

   <p>By default, each new element appears with a short animation as
   if it unfolds from left to right. Three alternative styles are
   available: <strong>emerge</strong> makes the elements fade
   in, <strong>strong</strong> makes the most recent element red,
   and <strong>quick</strong> omits the animation. The class can be
   set on each incremental element:</p>

   <pre>&lt;li class="next emerge">...</pre>

   <p>or on an ancestor, e.g.:</p>

   <pre>&lt;ul class="emerge">
  &lt;li class="next">...</pre>

    <h3>Two columns</h3>

    <p>To put elements side by side in two columns, make an element (a
    <strong>div, ul</strong> or any other element) with class
    <strong>columns</strong>. 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.</p>

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

    <h3>Small text</h3>

    <p>Less important text can be shown in a smaller font by giving it
    a class of <strong>note</strong>:</p>

    <pre>&lt;p class="note">Note that this is harder to read&lt;/p></pre>

    <h3>Automatic line numbering</h3>

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

    <pre>&lt;pre class="numbered"></pre>

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

    <h3>3×3 Grid</h3>

    <p>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 <strong>place</strong>. On its own,
    <strong>place</strong> puts the element in the center. By adding
    classes <strong>top, right, bottom</strong> and
    <strong>left</strong> the element can be placed in one of the
    eight other positions.</p>

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

    <p>The direction classes can also be abbreviated to <strong>t, r,
    b</strong> and <strong>l</strong>.</p>

    <h3>Image overlays (background images)</h3>

    <p>To put an image behind the text of a slide, use an
    <strong>img</strong> with a class of <strong>cover</strong>:</p>

    <pre>&lt;img class="cover" src="..." alt="..."></pre>

    <p>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.</p>

    <p>With a class of <strong>fit</strong> instead of
    <strong>cover</strong>, 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.</p>

    <pre>&lt;img class="fit" src="..." alt="..."></pre>

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

    <h3>White text</h3>

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

    <pre>&lt;section class="slide white"></pre>

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

    <h3>Slide transitions</h3>

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

    <pre>&lt;body class="shower fade-in"&gt;</pre>

    <p>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
    <em>disappears.</em>)</p>

    <pre>&lt;section class="slide wipe-left"&gt;</pre>

    <p>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.</p>

    <dl>
     <dt>fade-in</dt>
     <dd>The new slide appears faint at first and gets more opaque
     until it completely obscures the previous slide.</dd>

     <dt>slide-in</dt>
     <dd>The new slide moves in from the left, while the previous
     slide moves back to the left.</dd>

     <dt>move-left</dt>
     <dd>The new slides move in from the right while the old slide
     moves out to the left.</dd>

     <dt>move-up</dt>
     <dd>The old slide moves up and the new slide moves in from the
     bottom.</dd>

     <dt>flip-up</dt>
     <dd>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.</dd>

     <dt>flip-left</dt>
     <dd>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.</dd>

     <dt>center-out</dt>
     <dd>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.</dd>

     <dt>wipe-left</dt>
     <dd>The new slide moves in from the right, until it covers the
     old slide.</dd>

     <dt>zigzag-left</dt>
     <dd>A zigzag pattern moves in from the right. To the left is the
     old slide, to the right the new one.</dd>

     <dt>zigzag-right</dt>
     <dd>A zigzag pattern moves in from the left. To the left is the
     new slide, to the right the old one.</dd>

     <dt>cut-in</dt>
     <dd>The new slide moves in from the top left and covers the old
     slide.</dd>
    </dl>

    <h2 id=presenting>Presenting</h2>

    <h3>Mouse gestures and keystrokes</h3>

    <p>To present the slides, load them into a browser that supports
    JavaScript and CSS and then click on the first slide. (If you are
    using b6+ instead of Shower, double-click or press the ‘A’ key to
    start the slide show.)</p>

    <p>Navigate though the slides by pressing the spacebar, the arrow
    keys or Page-up/Page-Down. The Home and End keys jump to the
    first, resp. last slide.</p>

    <p>To exit the presentation, press the Esc key.</p>

    <p>The complete <a
    href="https://github.com/shower/shower/blob/master/docs/shortcuts.md"
    >list of key strokes</a> is in the Shower documentation. (For b6+,
    see the <a
    href="https://www.w3.org/Talks/Tools/b6plus/#navigation" >b6+
    navigation keys &amp; gestures</a>.)</p>

    <h3>Exporting to PDF</h3>

    <p>The slides can be exported to PDF (or printed) in two ways:
    multiple slides per page with comments interleaved, or one slide
    per page without any comments. The latter may be useful to create
    a PDF suitable for presenting, when it is not possible to use an
    HTML browser.

    <dl>
      <dt>portrait <dd>When printing in portrait mode, the output will
      contain as many slides per page as will fit and the comments are
      printed between the slides. This corresponds to viewing the
      slides in index mode.

      <dt>landscape <dd>When the output is in landscape mode, each
      page consists of one slide, without page margins, and without
      the comments between the slides.
     </dl>

     <p>Note: In landscape mode, the style sheet tries to set the size
     of the output page to exactly the size of a slide, but not all
     user agents that produce PDF respect that. (And, obviously, a
     printer is limited to the available paper.) There may be some
     black margin to the right and below each slide. Prince does
     respect the size. W3C team can also use the ",pdfui" tool online.

    <h3>Speaking guidelines</h2>

    <p>The W3C's global audience is thankful to speakers for following
    the essential guidelines:</p>

    <ul>
     <li>Your slides must be ready no later than <strong>28
     September 2021</strong> [?].</li>

     <li>Please use this <a
     href="https://www.w3.org/2021/Talks/TPAC/Templates/" >TPAC
     2021 HTML slide template.</a> <sup>(<a
     href="#footnote-2">*</a>)</sup></li>

     <li>Make your slides accessible. There is <a
     href="https://www.w3.org/WAI/teach-advocate/accessible-presentations/"
     >information from the W3C</a> to help you do that.</li>

     <li>Make text and illustration big enough that they're readable.</li>

     <li>State the objective of your presentation.</li>

     <li>Speak closely and directly into your microphone.</li>

     <li>Face the audience and speak into the microphone.</li>

     <li>Speak clearly.</li>

     <li>Speak at a rate that people can follow easily.</li>

     <li>Use simple language.</li>

     <li>Expand acronyms.</li>

     <li>Explain any necessary slang, jargon and idioms; avoid
     superfluous ones.</li>

     <li>State each slide number as you advance slides.</li>

     <li>State a conclusion or wrap up with proposed next steps.</li>
    </ul>

    <p>These guidelines are crucial because they transcend language
    barriers, foster comprehension, provide people the time to get
    acquainted with the subject by reading the slides in advance, and
    in some cases translate them into other languages, in other cases
    share and discuss them with colleagues before traveling to the
    meeting. You can read them in full in the <a
    href="https://www.w3.org/wiki/Speaker_Resources" >Speaker
    Resources W3C public wiki.</a></p>

    <p id="footnote-2">*) Please, ask <a
    href="mailto:coralie@w3.org">Coralie</a> for help, including
    putting your slides on the Web.</p>
  </section>

  <section class="comment">
   <address>Created 25 June 2021 by <a
   href="mailto:bert@w3.org">Bert Bos</a>.
   Last modified
   $Date: 2021/10/06 13:19:33 $ by $Author: bbos $.</address>
  </section>
 </body>
</html>
