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.
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.
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.
Careful, some images make the text hard to read!
Careful, some images make the text hard to read!
This is a template for slides for TPAC 2018. It uses the Shower framework (version 2.1.0) for the presentation and has a style sheet based on the TPAC 2018 visual style.
If you write slides for TPAC 2018, please, do one of the following:
If you develop your slides online (or in CVS), then make a directory under https://www.w3.org/2018/Talks/TPAC-2018/. Copy the Overview.html from https://www.w3.org/2018/Talks/TPAC-2018/Templates/ into your directory and edit it to replace the slides with your own.
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:
Rename or copy the Templates directory and edit the Overview.html file to replace the sample slides with your own. If you make any images, add them to that directory as well.
If you are able to upload your slides, put your directory, with the Overview.html file and any images, as a new directory under https://www.w3.org/2018/Talks/TPAC-2018/. There is no need to upload the aux-files directory. It is is already there.
Each slide is a div element* with a class of slide:
<div class="slide"> ... slide content here... </div>
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 div. One common choice is section.
If a slide should not show the slide number, add the class clear:
<div class="slide clear"> ... slide content here... </div>
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.:
<div class="slide cover clear"> <h1>My presentations<h1> <address>Peter W. Slidemaker</address> </div>
Slides with narrower text and an illustration on the left 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):
<div class="slide side"> <img src="..." alt="..." class="side"> ... slide content here... </div>
The side element will occupy the left 1/3 of the slide and the rest of the content the right 2/3.
To put the image on the right instead, add class right (which may be abbreviated to r):
<div class="slide side r"> <img src="..." alt="..." class="side"> ... slide content here... </div>
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.,
<div 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.
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.
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 spacebar or an arrow key. E.g.:
<ul> <li>This item is visible when the slide appears</li> <li class="next">This item is not immediately visible</li> <li class="next">This is the third item to appear</li> </ul> <p class="next">This is the last element to appear</p>
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>
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>
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.)
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 corner</div>
The direction classes can also be abbreviated to t, r, b and l.
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.
To present the slides, load them into a browser that supports JavaScript and CSS and then click on the first slide.
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.
To exit the presentation, press the Esc key.
The complete list of key strokes is in the Shower documentation.
This is a template for slides for TPAC 2018. For usage instructions, see at the end.