Reveal.js - maak je eigen HTML presentatie

Ingediend door Dirk Hornstra op 31-oct-2022 20:43

Als developer probeer ik "bij te blijven" met zaken die in mijn werkgebied spelen. Dus als er ergens een evenement is met één of meerdere goede sprekers met interessante onderwerpen, dan probeer ik daar bij te zijn. Wat ik in het verleden vaak deed, was dat ik een notitieblokje mee nam en daarin aantekeningen noteerde. Dat heb ik een paar weken geleden bij Techorama ook gedaan. Maar nu gebruik ik dat voornamelijk om zaken die genoemd worden, maar niet in de presentatie getoond worden te noteren, zodat ik het later nog terug kan vinden.

Want ik kan geen steno "schrijven", dus als je "normaal" schrijft loop je heel snel achter (veel sprekers hebben veel onderwerpen die ze in korte tijd behandelen) of je noteert zaken zo beknopt dat je later denkt "wat bedoelde ik hier ook alweer mee"?

Daarom heb je een mobiele telefoon mee. Je kunt de spreker volgen en snel wat foto's maken. Die gebruik je later om een samenvatting uit te werken.

Die samenvatting deel ik vaak met mijn collega's. Maar goed, dat zijn dan wel de punten die ik eruit pak. En misschien zijn er nog wat andere zaken genoemd die mijn collega's interessant vinden. Dus... zou ik ook gewoon die foto's kunnen delen?

Een tijdje geleden bezig met mijn hostingpakketten en daarbij zag ik dat mijn solution4u.nl-domein best veel vrije ruimte had. Dus een https://slides.solution4u.nl/ subdomein toevoegen is zomaar klaar. In mijn wordontwikkelaar.nl-omgeving (nog een project waar ik meer mee moet doen) kwam ik bij "open source projecten" het project Reveal.js tegen, hier op Github te vinden: link en ook nog op een eigen site: link.

Ik wilde "iets makkelijks", dus niet dat ik een volledige wordpress of iets dergelijks hiervoor op moest tuigen. En geen uitgebreide jQuery met plug-ins of iets dergelijks. Want dat moet je onderhouden/upgraden, ik wil "gewoon" een simpele site met online presentaties. In dit geval heb ik nu zelf voor 11 oktober een PHP pagina gemaakt en ook één voor 12 oktober.

Je kunt op de GITHUB-locatie een ZIP-bestand downloaden (groene knop code, Download ZIP) en daar heb ik uit de map dist de bestanden reveal.css en reveal.js gekopieerd en in slides.solution4u.nl op een centrale plek neergezet.

Per sessie heb ik een sub-folder gemaakt met de naam 01, 02, 03, etc. en daar de foto's in gezet die bij die sessie hoorden (geresized naar een breedte van 2048 pixels, zodat ze niet "te groot" zijn, maar wel goed leesbaar, ongeveer 250-300 kB per stuk).

Hierna per sessie in de HTML een eigen sectie met in de H2 datum, tijdstip, zaal, spreker en onderwerp. Daaronder de secties met de afbeeldingen. Omdat ze via javascript ingeladen worden, worden ze pas geladen als je naar de slide gaat (daarom is ie snel). Met het pijltje naar links en rechts blader je door de sessies, met pijltje naar beneden en naar boven blader je door de foto's van die sessie. Het enige wat ik nog even moest doen is de tag data-background-size op "contain" zetten. Standaard staat die op "cover", maar dan wordt je afbeelding te groot en mis je delen.

Nu was het "even snel" de HTML opzetten en de boel via de FTP over zetten, op een later tijdstip wil ik nog wel iets doen met het onderhoudbaar maken van de pagina's, maar ik ben hiermee al zeer tevreden!

Voor de volledigheid de code zoals die de slides toont voor de eerste dag van Techorama:


<!doctype html>
<html lang="nl">
<?php
    function RenderSlides($folder)
    {
        $pics = scandir($folder);
        foreach($pics as $pic)
        {
            if (substr($pic, 0, 1) == ".")
            {
                continue;
            }
            ?>
                        <section data-background-transition="slide" data-background="<?php echo $folder;?>/<?php echo $pic;?>" data-background-size="contain">
                            &nbsp;
                        </section>
            <?php
        }
    }
    $sessions = [
    "11 oktober, 10:00 - 11:00, room 2, John Craddock, Lifting the covers on Azure AD Authentication and Conditional Access",
    "11 oktober, 11:30 - 12:30, room 8, Loek Duys, Five things every developer should know about modern identity platforms",
    "11 oktober, 13:45 - 14:45, room 11, Mark Heath, HyperLINQ -  take your LINQ skills to the next level",
    "11 oktober, 13:45 - 14:45, room 12, Rob Richardson, Minimal API's with ASP.NET 6.0",
    "11 oktober, 15:00 - 16:00, room 12, Sander Hoogendoorn, The Zen of Programming. A personal journey towards writing beautiful code",
    "11 oktober, 16:30 - 17:30, room 9, Erik Darling, Defeating Parameter Sniffing With Dynamic SQL",
    "11 oktober, 17:45 - 18:45, room 12, Bart de Smet, What's new in C# 11.0?"
    ];
?>
    <head>
        <meta charset="utf-8">
        <title>Techorama - dag 1, 11 oktober 2022</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <link rel="stylesheet" href="/css/reveal.css">
        <style>
            html, body {font-family: "Open Sans", sans-serif; }
            h2 {line-height: 30px;}
        </style>
    </head>
    <body>
        <div class="reveal">
            <div class="slides">
            <?php
                $cnt = 1;
                foreach($sessions as $session)
                {
            ?>
                <section>
                    <section data-background="#888888">
                        <h2><?php echo $session;?></h2>
                    </section>
                    <?php RenderSlides("./0".$cnt++);?>
                </section>            
            <?php                    
                }
            ?>                                                             
            </div>
        </div>
        <script src="/js/reveal.js"></script>
        <script>
            Reveal.initialize({
                center: true,
                transition: 'linear',
            });
        </script>
    </body>
</html>