App-SlideServer
7 results

 view release on metacpan or  search on metacpan

example/Introduction/slides.md  view on Meta::CPAN 

<style>
div.slide { min-width: 900px; }
</style>


<h1 style="font-family: monospace; padding-top:2em;">App::SlideServer</span></h1>

<br>

<div style="text-align:left; margin: 2em;">
  Follow Along at:<br>
  <a href="https://nrdvana.net/slides/app-slideserver">nrdvana.net/slides/app-slideserver</a><br>
  <br>
  Source:<br>
  <a href="https://github.com/nrdvana/perl-App-SlideServer" target="_blank">github.com/nrdvana/perl-App-SlideServer</a><br>
</div>

<center>
Michael Conrad<br>
mike@nrdvana.net<br>
CPAN: NERDVANA
</center>

## Features

  * Write markdown, present as a slide show
  * Multiple connections, synchronized
  * Multiple control connections
  * Run locally or from Internet
  * Live updates as you edit
  * Simple design
  * Slides can operate without server

<pre class=notes>
  If all you know is markdown, that's enough

  Cool presentation mode
  Multiple device control, like Keynote

  low complexity, high flexibility
  easy to publish slides without a server
</pre>

## Design

  * Tech Stack - Mojo, jQuery, HTML, CSS
  * Single Perl Module, easy to subclass
  * ES5 JavaScript, no tooling needed
  * Perl backend serves slides
  * JavaScript frontend renders slides

## Design, Backend

  * Commandline "bin/slide-server"
  * Mojolicious App::SlideServer
    * Load slides.md or slides.html
    * Fix sloppy html shorthands
    * Serve page and slides to frontend
    * Relay websocket events

## Design, Frontend

  * Page initiates websocket
  * Presenter navigation relays messages through websocket
  * Viewers receive events from presenter
  * Viewers load slide HTML
  * Viewers resize the HTML to fit the viewport

## HTML Structure

```
<body>
  <div class="slides">
    <div class="slide">
      <ul class="auto-step">
        <li>...
        <li>...
      </ul>
      <pre class="notes"> ... </pre>
    </div>
  </div>
</body>
```

## Markdown Structure

<div style="padding: 0 20%; font-size: 150%">



( run in 0.900 second using v1.01-cache-2.11-cpan-39bf76dae61 )