<!DOCTYPE html>

<html lang="en-us">
 <head>
  <meta charset=UTF-8>
  <meta content="width=device-width" name="viewport">
  <title>%%Title%%</title>
  <meta name=description content="Slides template for W3C's TPAC 2022">
  <link rel="stylesheet" href="../Templates/TPAC-2022-slides.css">
  <!-- To use the b6+ framework, include this: -->
  <script src="../Templates/b6plus.js"></script>
  <!-- To use the Shower framework, remove b6plus above and add these two: -->
  <!--   <script src="../Templates/shower.js"></script>         -->
  <!--   <script src="../Templates/iframe-fixup.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/2022/09/TPAC/">TPAC 2022</a>.</p>

   <p><strong>To write slides,</strong> look at the example slides in
   this template or read the <a href="Overview.html#manual" >user
   manual</a> at the end of this template for full details.</p>

   <p><strong>To start the slide show:</strong></p>

   <p>If you are using b6+, press ‘A’. Return to the index by pressing
   ‘A’ or ‘Esc’. On a touch screen, use a 3-finger touch. You can also
   double click to open a specific slide. In slide mode, press ‘?’
   (question mark) to get a list of available commands.</p>

   <p>If you are using Shower, press Shift+F5 (Command+Enter on Mac).
   Return to the index by pressing ‘Esc’. You can also click to open a
   specific slide.</p>

   <p><strong>If it doesn't work:</strong> Slide mode requires a
   recent browser with JavaScript. If you are using the <a
   href="https://noscript.net/" >‘NoScript’</a> add-on (Firefox or the
   Tor Browser), or changed the <a
   href="https://support.google.com/chrome/answer/114662?hl=en&amp;co=GENIE.Platform=Desktop"
   >‘site settings’</a> (Chrome, Vivaldi, Opera, Brave and some other
   browsers), or the ‘permissions for this site’ (Edge), you may have
   to explicitly allow JavaScript on these slides. Internet Explorer
   is not supported.</p>
  </section>

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

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

  <div role=region aria-live=assertive>
    <!-- What a screen reader should say on leaving slide mode,
	 instead of the default ‘Stopped.’ -->
    Leaving slide mode.
  </div>

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

  <section class="slide" id="lists">
   <h2>Lists</h2>
   <h3>This is an H3</h3>
   <ol>
    <li>Potatoes</li>
    <li>Onions and olives</li>
   </ol>
   <h3>Another H3</h3>
   <ul>
    <li>North pole</li>
    <li>East pole</li>
   </ul>
  </section>

  <section class="slide" id="elements">
   <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>This link goes to <a href="#lists">slide 2</a></p>
   <p class="note">This is an example of a note, in a smaller font</p>
  </section>

  <section class="slide move-up" id="incremental1">
   <h2>Incremental display (1/3)</h2>
   <div class=columns>
    <div>
     <p>Unfold (default style)</p>
     <ul>
      <li>This item is shown right away</li>
      <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>This item is shown right away</li>
      <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 move-up" id="incremental2">
   <h2>Incremental display (2/3)</h2>
   <div class=columns>
    <div>
     <p>Quick<br> (<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>
     <p>Fade in + red items<br> (<code>class="emerge strong"</code>)</p>
     <ul class="emerge 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>
  </section>

  <section class="slide move-up" id="incremental3">
   <h2>Incremental display (3/3)</h2>
   <div class=columns>
    <div>
     <p>Quick + greeked<br> (<code>class="quick greeked"</code>)</p>
     <ul class="quick greeked">
      <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 + red + dim (<code>class= "emerge strong dim"</code>)</p>
     <ul class="emerge strong dim">
      <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">
   <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">
   <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">
   <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">
   <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">
   <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">
   <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">
   <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">
   <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>
   <p class=note>Hint: Add class=clear on the slide to omit the banner
   and slide number.</p>
  </section>

  <section class="slide" id="figures">
   <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:</p>
    <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">
   <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>
    <section>
     <h3>Etc.</h3>
    </section>
   </div>
  </section>

  <section class="slide" id="place">
   <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">
   <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">
    <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">
   <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="gutenberg_f9f9f9.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">
   <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="gutenberg_f9f9f9.jpg"
	alt="Image: Statue of Gutenberg"
	class="fit">
   <p class="place l">Careful, some images make the text
   hard to read!</p>
  </section>


  <section class="slide white" id="white">
    <h2>White text</h2>
    <img width=505 height=353
	 src="https://www.w3.org/2020/Talks/ac-slides/template/coast"
	 class="cover" style="object-position: 94% 100%"
	 alt="[photo with a 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" >‘Surfer and
    the stormy sea’</a> by <a href="https://unsplash.com/@xavifuji"
    >Xavier Nohet</a>)</p>
  </section>


  <section class="slide" id="grow">
   <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">
   <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" id="PDF">
   <h2>Convert to PDF</h2>

   <div class="columns">
    <div>
     <p>Print in <em>portrait mode</em> to get:
     <ul>
      <li>multiple slides per page
      <li>notes between the slides
     </ul>
     <div style="border: thin solid; padding: 0.6em 0.6em 0">
      <p>📃︎ Try it! [W3C team only]</p>
      <p><a href="Overview.html,pdf" title="slides + notes"
      >A4</a>
      or <a href="Overview.html,pdfl" title="slides + nodes"
      >Letter</a></p>
     </div>
    </div>
    <div>
     <p>Print in <em>landscape mode</em> to get:</p>
     <ul>
      <li>one slide = one page
      <li>no notes
     </ul>
     <div style="border: thin solid; padding: 0.6em 0.6em 0">
      <p>📃︎  Try it [W3C team only]</p>
      <p><a href="Overview.html,pdf?size=A4+landscape" >PDF
      slides</a></p>
     </div>
    </div>
   </div>
  </section>


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


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

  <section class="long 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/2022/09/TPAC/" >TPAC 2022</a>. It uses either
   the <a href="http://shwr.me/" >Shower</a> script (version 3.2) 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
   2022 visual style. (To enable Shower, uncomment the
   <strong>script</strong> tag in the HTML source.)</p>

   <p>All slides for TPAC 2022 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/2022/Talks/TPAC/"
   >https://www.w3.org/2022/Talks/TPAC/</a>. Copy the <a
   href="https://www.w3.org/2022/Talks/TPAC/Templates/Overview.html"
   >Overview.html</a> from <a
   href="https://www.w3.org/2022/Talks/TPAC/Templates/"
   >https://www.w3.org/2022/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/2022/Talks/TPAC/Templates/TPAC-2022-slides-template.zip"
   >zip file</a>. Unpacking it creates the following directories and
   files:</p>

   <ul class="tree">
     <li><code><strong>TPAC-2022/</strong></code><br />
      │</li>
     <li> └─ <code><strong>Templates/</strong></code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2022/Talks/TPAC/Templates/Overview.html"
     >Overview.html</a> (this file)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2022/Talks/TPAC/Templates/shower.js"
     >shower.js</a> (a JavaScript file)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2022/Talks/TPAC/Templates/iframe-fixup.js"
     >iframe-fixup.js</a> (a JavaScript file)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2022/Talks/TPAC/Templates/b6plus.js"
     >b6plus.js</a> (a JavaScript file)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2022/Talks/TPAC/Templates/TPAC-2022-slides.css"
     >TPAC-2022-slides.css</a> (a CSS file)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2022/Talks/TPAC/Templates/TPAC-2022-banner.svg"
     >TPAC-2022-banner.svg</a> (an SVG image)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2022/Talks/TPAC/Templates/linen.png"
     >linen.png</a> (a PNG image)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2022/Talks/TPAC/Templates/TPAC-2022-cover.svg"
     >TPAC-2022-cover.svg</a> (an SVG image)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2022/Talks/TPAC/Templates/TPAC-2022-final.svg"
     >TPAC-2022-final.svg</a> (an SVG image)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2022/Talks/TPAC/Templates/gutenberg_f9f9f9.jpg"
     >gutenberg_f9f9f9.jpg</a> (a JPEG image)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2022/Talks/TPAC/Templates/piechart.png"
     >piechart.png</a> (a PNG image)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2022/Talks/TPAC/Templates/Lato-Bold.woff"
     >Lato-Bold.woff</a> (a Web font)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2022/Talks/TPAC/Templates/Lato-BoldItalic.woff"
     >Lato-BoldItalic.woff</a> (a Web font)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2022/Talks/TPAC/Templates/Lato-Italic.woff"
     >Lato-Italic.woff</a> (a Web font)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2022/Talks/TPAC/Templates/Lato-Regular.woff"
     >Lato-Regular.woff</a> (a Web font)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2022/Talks/TPAC/Templates/Montserrat-Bold.woff"
     >Montserrat-Bold.woff</a> (a Web font)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2022/Talks/TPAC/Templates/Montserrat-BoldItalic.woff"
     >Montserrat-BoldItalic.woff</a> (a Web font)</code><br />
          │</li>
     <li>     ├─ <code><a
     href="https://www.w3.org/2022/Talks/TPAC/Templates/Montserrat-Black.woff"
     >Montserrat-Black.woff</a> (a Web font)</code><br />
          │</li>
     <li>     └─ <code><a
     href="https://www.w3.org/2022/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-2022</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/2022/Talks/TPAC/"
   >https://www.w3.org/2022/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>Speaker notes or comments</h3>

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

   <pre>&lt;section class="comment">
  ... text here...
&lt;/section></pre>

   <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 id=side-image>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>How big should images be? It actually depends on the size of the
   screen on which the slide is displayed. An image with too few
   pixels becomes blurry, but a big image takes long to load. It is
   actually possible to make images in several sizes and let the
   browser download the best one for the current screen, but that is
   too long to explain here. (Check out the <strong>picture</strong>
   element of HTML.) As a compromise, let's assume the slides are
   displayed full-screen on an <abbr title="High Definition">HD</abbr>
   projector (or an HDTV).</p>

   <p>An HD projector has 1920×1080 pixels. A side image on such a
   screen occupies a space of 982 pixels high and 463 pixels wide (or
   986 pixels wide with class <b>big</b>). So that leads to the
   following cases:</p>

   <ol>
     <li>A normal side image (without <b>big</b> and
     without <b>cover</b>): Make an image that is 463 pixels wide and
     no more than 982 pixels high; or an image that is 982 pixels high
     and no more than 463 pixels wide.</li>

     <li>A <b>big</b> side image (without <b>cover</b>): Make an image
     that is 986 pixels wide and no more than 982 pixels high; or an
     image that is 982 pixels high and no more than 986 pixels
     wide.</li>

     <li>A normal side image with <b>cover</b> (without <b>big</b>):
     Make an image that is exactly 463×982 pixels.</li>

     <li>A <b>big</b> side image with <b>cover</b>: Make an image that
     is exactly 986×982 pixels.</li>
   </ol>

   <p>But note that for many non-critical images, especially photos,
   it doesn't matter if they are a bit blurry. You can often make
   images half as wide and half as high without ill effects.</p>

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

   <h3>Automatic slide shows</h3>

   <p><em>This feature is only available with the Shower script, not with
   b6+.</em></p>

   <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
   space bar 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. Two alternative animations are
   available: <strong>emerge</strong> makes the elements fade in
   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>

   <p>Three optional modifiers change how elements look before, after
   or while they are the currently active
   element: <strong>Strong</strong> makes the currently active element
   red. <strong>Greeked</strong> replaces the elements that are not
   yet visible by a gray bar. (Useful to show how many elements are
   still invisible.) And <strong>dim</strong> grays out the elements
   that are no longer the active element.</p>

   <p>Like the animation, these modifiers can be set on the
   incremental element itself or on an ancestor. The modifiers can
   also be combined, e.g.:</p>

   <pre>&lt;ul class="emerge strong dim">
  &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>Extra big text: shout</h3>

   <p>To make text extra big, give it a class
   of <strong>shout</strong>, e.g.:</p>

   <pre>&lt;p class=shout>Hurray!</pre>

   <p>(Sometimes this is referred to as
   the <a href="https://en.wikipedia.org/wiki/Takahashi_method"
   >‘Takahashi method’</a>: Instead of sentences or graphics, a slide
   only contains one or two keywords. The narrative comes from the
   speaker.)</p>

   <h3>Animated text: grow</h3>

   <p>To draw extra attention to some text or an image, it can be
   animated. Adding a class of <strong>grow</strong> to it will make
   it appear slowly. It will start small and one seconds after the
   slide appears it will begin to grow and reach its normal size three
   seconds later.</p>

   <pre>&lt;p class=grow&gt;See?</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>

   <p>As explained above (see <a href="#side-image">‘Illustrations on
   the left or right’</a>), the optimal size of an image depends on
   the screen the slide is shown on. But as a compromise, you can
   assume the common case of an HD projector, i.e., 1920×1080
   pixels. The optimal image for <strong>cover</strong> is an image of
   exactly that size. The optimal image for <strong>fit</strong> is an
   image that is either 1920 pixels wide and at most 1080 pixels high,
   or an image that is exactly 1080 pixels high and at most 1920
   pixels wide.</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>

   <p>To make <em>all</em> slides white on black, set the
   class <strong>white</strong> on the <strong>body</strong> element.
   In that case you can use the class <strong>black</strong> on
   individual slides to give them black-on-white text.</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>slide-out</dt>
     <dd>The current slide moves out to the left, revealing the new
     slide.</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>

   <h3>Watermark overlay</h3>

   <p>You can make a ‘watermark’, a text or an image that is overlaid
   on every slide, by making an element with a class
   of <strong>watermark</strong>. It can be placed before or after the
   slides.</p>

   <pre>&lt;p class=watermark&gt;&lt;strong&gt;DRAFT!&lt;/strong&gt;</pre>

   <p>By default, the watermark is slightly rotated and placed in the
   center of each slide. Any text will be red.</p>

   <h3>Accessibility</h3>

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

   <p>When you leave slide 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.:</p>

   <pre>&lt;div role="region" aria-live="assertive"&gt;
  <span lang=fr>Terminé.</span>
&lt;/div&gt;</pre>

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

   <dl>
    <dt>portrait</dt> <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.</dd>

    <dt>landscape</dt> <dd>When the output is in landscape mode, each
    page consists of one slide, without page margins, and without the
    comments between the slides.</dd>
   </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.</p>

   <h2 id="presenting">Presenting</h2>

   <h3 id="keystrokes">Mouse gestures and keystrokes</h3>

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

   <p>If you are using Shower instead of b6+, press
   <strong>Shift+F5</strong> (<strong>Command+Enter</strong> on Mac)
   or click on a slide.</p>

   <p>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. <strong>F1</strong> toggles full screen mode. The <strong>?
   (question mark)</strong> key shows a list of available
   commands.</p>

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

   <p>You can also see the b6+ documentation for <a
   href="https://www.w3.org/Talks/Tools/b6plus/#navigation"
   >navigation keys &amp; gestures</a>.)</p>

   <p>For Shower, the complete <a
   href="https://github.com/shower/shower/blob/master/docs/shortcuts.md"
   >list of key strokes</a> is in the Shower documentation.</p>

   <h3 id="second-window">Using two screens or two windows</h3>

   <p>b6+ (but not Shower) can open a second window to preview the
   current and next slides and show notes. 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.</p>

   <p>Open the second window by pressing the ‘2’ key while in slide
   mode. (If it creates a tab, drag it out of the tab bar to make it a
   window.) Every time you go to a new slide, this second window will
   scroll to show the same slide (with incremental elements already
   expanded). If you make the window large enough, you can also see
   the next slide, and any notes you put under the slides.</p>

   <p>Note: If you reload the slides, the script forgets that the
   second window exists and thus will not synchronize it. Just press
   ‘2’ again and it will reconnect to the second window.</p>

   <h3 id="full">Starting in slide mode</h3>

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

   <p>To open in slide mode at a specific slide, add ‘?full’ and the
   ID or the number of the slide,
   e.g., <a href="?full#place">Overview.html?full#place</a>
   or <a href="?full#place">Overview.html?full#25</a>.</p>

   <h3 id="hidemouse">Hiding the mouse pointer</h3>

   <p>When you don't want the mouse pointer to remain on the screen in
   slide mode, add the class <strong>hidemouse</strong> on
   the <strong>body</strong> 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.</p>

   <pre>&lt;body class="hidemouse"&gt;</pre>

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

   <pre>&lt;body class="hidemouse=1.5"&gt;</pre>

   <h3 id="noclick">Ignore mouse clicks</h3>

   <p>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 <strong>noclick</strong> on the <strong>body</strong>
   element.</p>

   <pre>&lt;body class="noclick"&gt;</pre>

   <p>The
   complete <a href="https://www.w3.org/Talks/Tools/b6plus/#navigation"
   >list of key strokes and gestures</a> is in
   the <a href="https://www.w3.org/Talks/Tools/b6plus/" >b6+
   documentation,</a> which also shows what else b6+ can do.</p>

   <h3>Speaking guidelines</h3>

   <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>[@@ 12 April
    2022 @@]</strong>.</li>

    <li>Please use this <a
    href="https://www.w3.org/2022/Talks/TPAC/Templates/" >TPAC 2022
    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>

  <footer class="long comment">
   <address>Created 21 July 2022 by <a
   href="mailto:bert@w3.org">Bert Bos</a>.
   Last modified
   $Date: 2022/07/22 20:54:33 $ by $Author: bbos $.</address>
  </footer>
 </body>
</html>
