whiteboard-app
Version:
Whiteboard - a slide-based activity presentation system
427 lines (372 loc) • 16.3 kB
HTML
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Whiteboard</title>
<meta name="description" content="Free desktop application that lets you create activity-based presentations that combine coding and demonstrations." />
<meta name="HandheldFriendly" content="True"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
-->
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item whiteboard-logo" href="http://whiteboard.michaelb.org/">
<img src="images/icon_256.png" alt="Whiteboard logo" width="28" height="28">
Whiteboard
</a>
<a class="navbar-item is-hidden-desktop" href="index.html">
<i class="fa fa-lg fa-home"></i>
</a>
<a class="navbar-item is-hidden-desktop" href="tutorial.html">
<i class="fa fa-lg fa-question"></i>
</a>
<a class="navbar-item is-hidden-desktop" href="downloads.html">
<i class="fa fa-lg fa-download"></i>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="index.html">
About
</a>
<a class="navbar-item" href="tutorial.html">
Getting started
</a>
<a class="navbar-item" href="downloads.html">
Downloads
</a>
</div>
<div class="navbar-end">
<a class="navbar-item" href="https://github.com/michaelpb/whiteboard/" target="_blank">
<span class="icon" style="color: #333;">
<i class="fa fa-lg fa-github"></i>
</span>
</a>
</div>
</div>
</div>
</nav>
<div id="background_container">
</div>
<section class="hero has-text-centered is-medium" >
<div class="hero-body">
<div class="container">
<img src="images/icon_256.png" />
<h1 class="title">
Whiteboard
</h1>
<h2 class="subtitle">
v0.0.47
</h2>
<h2 class="subtitle">
Create activity-based presentations that combine coding and
demonstrations.
</h2>
<div class="block">
<script>
(function () {
var icon = '';
var href = "#all_download_links";
var v = navigator.appVersion;
if (v.indexOf("Win") !== -1) {
icon = ' <i class="fa fa-windows"></i>';
href = "https://github.com/michaelpb/whiteboard/releases/download/v0.0.47/whiteboard-app-setup-0.0.47.exe";
} else if (v.indexOf("Mac") !== -1) {
icon = ' <i class="fa fa-apple"></i>';
href = "https://github.com/michaelpb/whiteboard/releases/download/v0.0.47/Whiteboard-0.0.47.dmg";
} else if (v.indexOf("X11") !== -1 || v.indexOf("Linux") !== -1) {
icon = ' <i class="fa fa-linux"></i>';
href = "https://github.com/michaelpb/whiteboard/releases/download/v0.0.47/whiteboard-app-0.0.47_amd64.deb";
}
var code = [
'<a href="',
href,
'"',
'class="button is-large is-primary">',
'Download',
icon,
'</a>'].join('');
document.write(code);
})();
</script>
<br />
<a href="downloads.html" class="button is-link">
All download links for v0.0.47
</a>
<div class="block">
<p>
<big>
Whiteboard is slideshow application for
<strong>teaching programming</strong>. It embeds a code
editor, terminal, and web browser into a slide-show
like interface to <strong>eliminate
context-switches</strong> and dead-space, while
enabling more content content to be set-up ahead of
time. It's great for guiding code-heavy classroom
lectures, tutorials, workshops, and
<strong>webinars</strong>.
</big>
</p>
</div>
</div>
</div>
</div>
</section>
<div class="container">
<div class="notification is-warning">
<strong>Alpha Release: v0.0.47</strong> - Whiteboard is still being
developed! There might still be a few bugs here and there, so help
development by <a target="_blank" href="https://github.com/michaelpb/whiteboard/issues/">reporting them</a>.
</div>
<hr />
</div>
<section class="hero is-bold">
<div class="container">
<div>
<div class="carousel-cell">
<div class="columns">
<div class="box column">
<img src="images/panes/editor_context_menu.png" />
</div>
<div class="column content">
<h3>Code editor</h3>
<ul>
<li>Save tab layouts of multiple files for your presentations</li>
<li>Based on ACE Editor</li>
<li>Syntax highlighting for 100+ languages</li>
</ul>
</div>
</div>
</div>
<div class="carousel-cell">
<div class="columns">
<div class="column content">
<h3>Web Browser</h3>
<ul>
<li>Have fully-functioning websites embedded in your slides</li>
<li>Uses Chromium-based WebView, for full support for all sites no matter how complex</li>
<li>Use to demonstrate websites as you build them</li>
<li>Useful for webinar tutorials</li>
</ul>
</div>
<div class="box column">
<img src="images/panes/browser.png" />
</div>
</div>
</div>
<div class="carousel-cell">
<div class="columns">
<div class="box column">
<img src="images/panes/terminal.png" />
</div>
<div class="column content">
<h3>Terminal</h3>
<ul>
<li>Save a terminal to start at a working directory</li>
<li>Useful for running example code as you write it</li>
<li>Full color and cursor support, e.g. vim works</li>
<li>Based on the same library (xterm.js) as VSCode</li>
</ul>
</div>
</div>
</div>
<div class="carousel-cell">
<div class="columns">
<div class="column content">
<h3>Markdown</h3>
<ul>
<li>Easily add rich text with Markdown</li>
<li>Useful for content-only slides</li>
<li>Can be mixed with other panes to add instructions or context</li>
</ul>
</div>
<div class="box column">
<img src="images/panes/markdown.png" />
</div>
</div>
</div>
<div class="carousel-cell">
<div class="columns">
<div class="box column">
<img src="images/panes/slides.png" />
</div>
<div class="column content">
<h3>Save and edit slide decks</h3>
<ul>
<li>By saving preset combinations of the above
activities, craft a slide deck that guides the
presentation through a set of activities
</li>
<li>Slides can be added, deleted, and re-arranged</li>
<li>Supports different layouts and themes</li>
<li>Uses a human-friendly plain-text format, so you can also
create decks using your favorite text editor</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!--
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script>
var flkty = new Flickity( '.main-carousel', {
});
</script>
-->
<section class="hero is-dark is-bold">
<div class="hero-body">
<div class="container">
<nav class="columns">
<div class="column has-text-centered">
<span class="icon is-large" style="margin-right: -15px;">
<i class="fa fa-linux"></i>
</span>
<span class="icon is-large">
<i class="fa fa-apple"></i>
</span>
<span class="icon is-large" style="margin-right: 10px;">
<i class="fa fa-windows"></i>
</span>
<p class="title is-4"><strong>Cross Platform</strong></p>
<p class="subtitle">Designed for <strong>all</strong> desktops</p>
</div>
<div class="column has-text-centered">
<span class="icon is-large">
<i class="fa fa-podcast"></i>
</span>
<p class="title is-4"><strong>Powerful</strong></p>
<p class="subtitle">
Built with the same libraries as Atom and VSCode
</p>
</div>
<div class="column has-text-centered">
<span class="icon is-large">
<i class="fa fa-check"></i>
</span>
<p class="title is-4"><strong>Easy</strong></p>
<p class="subtitle">
Everything is a right-click away
</p>
</div>
<div class="column has-text-centered">
<span class="icon is-large">
<i class="fa fa-code-fork"></i>
</span>
<p class="title is-4"><strong>Free</strong></p>
<p class="subtitle">Free/libre (GPL 3.0)</p>
</div>
</nav>
</div>
</div>
</section>
<div class="container">
</div>
<footer class="footer">
<div class="container">
<div class="columns">
<div class="column">
<h3 class="has-text-weight-bold">Whiteboard</h3>
<ul>
<li>
<a href="index.html">About</a>
</li>
<li>
<a href="downloads.html">Downloads</a>
</li>
<li>
<a href="tutorial.html">Getting started</a>
</li>
</ul>
</div>
<div class="column">
<h3 class="has-text-weight-bold">Contribute</h3>
<ul>
<li>
<a href="https://github.com/michaelpb/whiteboard/issues/">Issues</a>
</li>
<li>
<a href="http://github.com/michaelpb/whiteboard">Source</a>
</li>
<li>
<a href="https://github.com/michaelpb/whiteboard/blob/master/CONDUCT.md">Code of conduct</a>
</li>
<li>
<a href="https://github.com/michaelpb/whiteboard/blob/master/DEVELOPMENT.md">Contribution guide</a>
</li>
</ul>
</div>
<div class="column">
<h3 class="has-text-weight-bold">Powered by</h3>
<ul>
<li>
<a target="_blank" href="https://electron.atom.io/">Electron</a>
</li>
<!--
<li>
<a target="_blank" href="http://riotjs.com/">Riot.js</a>
</li>
-->
<li>
<a target="_blank" title="Backgrounds were generated with Colorful Background" href="http://www.webcore-it.com/colorful-background/">Bulma</a>
</li>
<li>
<a target="_blank" href="https://xel-toolkit.org/">Xel</a>
</li>
<li>
<a target="_blank" title="Site & layout thanks to Bulma" href="http://bulma.io/">Bulma</a>
</li>
<li>
<a target="_blank" href="https://github.com/michaelpb/whiteboard/blob/master/package.json#L69">More...</a>
</li>
</ul>
</div>
<div class="column">
<h3 class="has-text-weight-bold">Share</h3>
<ul>
<li>
<a class="button"
title="Tweet about whiteboard!"
data-social-network="Twitter"
data-social-action="tweet"
data-social-target="http://whiteboard.michaelb.org/"
target="_blank"
href="https://twitter.com/intent/tweet?text=Whiteboard: Slideshow for coding demonstrations&hashtags=whiteboard&url=http://whiteboard.michaelb.org&via=mbgamedev">
<span class="icon">
<i class="fa fa-twitter"></i>
</span>
Tweet
</a>
</li>
<li>
<iframe src="https://ghbtns.com/github-btn.html?user=michaelpb&repo=whiteboard&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
</li>
</ul>
</div>
</div>
<div class="content has-text-centered black-links">
<p>
© <a href="http://michaelb.org/">Michael Bethencourt</a> 2019
<a href="https://www.gnu.org/licenses/gpl-3.0.en.html">GPL 3.0</a>
- <a href="contact.html">Contact</a>
</p>
</div>
</div>
</footer>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-105834983-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>