Ben's Hobbyhoekje -- Presenteren met HTML en Reveal.js

Presenteren met HTML en Reveal.js

Als je iets moet presenteren voor een zaal met mensen, is een diashow een handig hulpmiddel om te verduidelijken wat je vertelt. Een beeld zegt immers meer dan woorden. Vaak zul je dat aanpakken met Microsoft PowerPoint, Prezi of iets dergelijks.
Je kunt dit soort presentaties ook beschikbaar stellen op je website, zodat je bezoekers ze online kunnen bekijken. Het downloaden van dergelijke bestanden kan echter lang duren en dat kan nog worden vertraagd door je anti-virus software, die het bestand eerst wil scannen.

Het ligt niet voor de hand om hier HTML, CSS en JavaScript in te zetten (zowel online als 'lokaal') en de presentatie te bekijken in de browser. Het kán wel, zeker als je daar Reveal.js bij gebruikt.

De beoogde toepassing is gericht op gebruik van een volledig scherm. Dat past niet goed in een site met frames, zoals deze. Daarom wordt het voorbeeld getoond op een apart tabblad. het voorbeeld is reclame voor mijn foto-site.
Op deze bladzijde wordt uitgelegd hoe je het aanpakt om een presentatie te maken, die zowel online als lokaal bekeken kan worden. De code van het voorbeeld kun je downloaden (zonder de plaatjes) om zelf te gebruiken.

Dit is een bewerking van een item dat ik aantrof op GitHub. Het is ook beschreven in Webdesigner 61, 2013, pag 72 e.v.

Besproken wordt:
1. De oorsprong van het script.
2. De opbouw van de code.
3. Zelf een presentatie maken.
De oorsprong van het script
Reveal.js is gemaakt door Hakim El Hattab, een front-end developer uit Zweden.
Voor de zoom-effecten wordt gebruik gemaakt van zoom.js, van dezelfde auteur.
De opbouw van de code
De hele presentatie bestaat uit één HTML-bestand. Zoals altijd is er een <head> en een <body>.
In de <head> staan alleen links naar de gebruikte style-sheet en webfonts.
De <body> bestaat uit één <div>-tag met class reveal. Dit is de wrapper voor de hele presentatie.
Elke dia staat in een <section>-tag. De dia's liggen naast elkaar.
Elke <section> kan meerdere <section>s bevatten. Die dia's staan dan boven elkaar.
De <section>-tags (lees: dia's) worden bij elkaar gehouden in een <div>-tag met class slides.
De navigatie-knoppen staan in <aside>-tags.
Er is ook een progress-bar, helemaal onderaan de pagina. Die werkt op het aantal i><section>s op het hoogste niveau. Een serie boven elkaar liggende dia's wordt dus geteld als één.
De progress-bar wordt gemaakt door reveal.js en staat in een <div>-tag met class progress. Hier staat alleen een lege <span>-tag in. Je kunt er geen tekst of plaatjes in kwijt, die worden genegeerd.
Onderaan in de <body> (en dus niet in de <head>!) worden de JavaScripts ingeladen: reveal.js en zoom.js. Dit laatste script regelt de zoom-effecten binnen de presentatie.
Tenslotte is er nog een JavaScript waar je het gedrag van je presentatie mee kunt beïnvloeden. Zo is het mogelijk om de presentatie vanzelf opnieuw te laten beginnen als die voorbij het laatste dia wordt genavigeerd en om de manier van beeld-wisselen te veranderen. Het is een kwestie van een beetje daarmee spelen om de beste instelling van je presentatie te vinden.
De structuur van de <body> staat hieronder.
Er mag niet van worden afgeweken, anders werkt het niet.
<body>  <div class="reveal">  <div class="slides"> <section> <h3>DEMO</h3> <p>HTML presentatie,<br>gemaakt met de bibliotheek reveal.js</p> <p>NAVIGEER MET DE PIJLTJESTOETSEN<br> <small>Rechtsonder op het scherm. De muis werkt ook</small></p> .... </section> <section> <section> <h3>Spijkenisse</h3> <img src="../images/stapeltje_0.jpg"> <p>Gemaal "De Leeuw van Putten"<br> <small>Vóór de verhoging van de molen</small></p> </section> <section> .... </section> </section> <section> <section> .... </section> <section> .... </section> </section> <section> <h3>PRESENTATIE</h3> <ul> <li class="fragment">Maak de presentatie presenteerbaar</li> .... </ul> </section> <section> .... </section> <section> .... </section> </div>   <aside class="controls"> <a class="left" href="#">◄</a> <a class="right" href="#">►</a> <a class="up" href="#">▲</a> <a class="down" href="#">▼</a> </aside>  <div class="progress"><span></span></div> </div>  <script src="reveal.min.js"></script> <script src="zoom.min.js"></script> <script> .... // Instellen van het gedrag van de presentatie: uiterlijk, overgangen, enz </script> </body>
Zelf een presentatie maken
Download Reveal.js van GitHub. Klik op de groene download-knop en haal de .ZIP-file op. Daar zitten alle benodigde bestanden in.
Voor het voorbeeld op deze site wordt een verkleinde versie van reveal.js gebruikt, die vind je in de downloadfile. Om mee te beginnen is dat praktischer.
In de head link je de de style-sheets reset.css en main.css, in deze volgorde.
reset.css zet alle default-instellingen van de browser op nul, main.css maakt de instellingen voor de presentatie.
In het voorbeeld heten die bestanden reset-114.css resp. main-114.css. Dit is gedaan omdat ze voor deze toepassing zijn aangepast.
main-114.css bevat nog veel -inmiddels overbodige- vendor prefixes. Die staan er nog omdat ze ook in de oorspronkelijke code staan.
Bouw de code van de <body> op, zoals hierboven is aangegeven, zie ook de download file. Het JavaScript aan het einde van de <body> moet je ongewijzigd overnemen.
Tenslotte
Het voorbeeld geeft maar een beperkt overzicht van wat reveal.js kan. Zie de handleiding op GitHub voor meer informatie.
Je kunt de presentatie voor iedereen toegankelijk maken door hem op een webserver te installeren, eventueel als onderdeel van een website. Je kunt de presentatie ook lokaal bekijken op je PC, laptop of tablet. Daarvoor open je het HTML-bestand in je favoriete browser.

Downloaden:

Druk op de knop: File: voorb114.zip, 16 485 bytes.

Opmerking:

De presentaties die je maakt met reveal.js lijken op die van Microsoft PowerPoint. Er bestaat ook een "Prezi-variant": impress.js.