|
@@ -0,0 +1,456 @@
|
|
|
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
|
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
|
+<html xmlns="http://www.w3.org/1999/xhtml"
|
|
|
+lang="en" xml:lang="en">
|
|
|
+<head>
|
|
|
+<title>Slides with Org-Mode and JavaScript</title>
|
|
|
+<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
|
|
|
+<meta name="generator" content="Org-mode"/>
|
|
|
+<meta name="generated" content="2008-08-28 00:06:02 CEST"/>
|
|
|
+<meta name="author" content="Sebastian Rose"/>
|
|
|
+<style type="text/css">
|
|
|
+ html { font-family: Times, serif; font-size: 12pt; }
|
|
|
+ .title { text-align: center; }
|
|
|
+ .todo { color: red; }
|
|
|
+ .done { color: green; }
|
|
|
+ .tag { background-color:lightblue; font-weight:normal }
|
|
|
+ .target { }
|
|
|
+ .timestamp { color: grey }
|
|
|
+ .timestamp-kwd { color: CadetBlue }
|
|
|
+ p.verse { margin-left: 3% }
|
|
|
+ pre {
|
|
|
+ border: 1pt solid #AEBDCC;
|
|
|
+ background-color: #F3F5F7;
|
|
|
+ padding: 5pt;
|
|
|
+ font-family: courier, monospace;
|
|
|
+ font-size: 90%;
|
|
|
+ overflow:auto;
|
|
|
+ }
|
|
|
+ table { border-collapse: collapse; }
|
|
|
+ td, th { vertical-align: top; }
|
|
|
+ dt { font-weight: bold; }
|
|
|
+
|
|
|
+ .org-info-js_info-navigation { border-style:none; }
|
|
|
+ #org-info-js_console-label { font-size:10px; font-weight:bold;
|
|
|
+ white-space:nowrap; }
|
|
|
+ .org-info-js_search-highlight {background-color:#ffff00; color:#000000;
|
|
|
+ font-weight:bold; }
|
|
|
+
|
|
|
+</style><link rel="stylesheet" type="text/css" href="slides.css" />
|
|
|
+<script type="text/javascript" language="JavaScript" src="org-info.js"></script>
|
|
|
+<script type="text/javascript" language="JavaScript">
|
|
|
+/* <![CDATA[ */
|
|
|
+org_html_manager.set("TOC_DEPTH", "3");
|
|
|
+org_html_manager.set("LINK_HOME", "http://orgmode.org");
|
|
|
+org_html_manager.set("LINK_UP", "http://orgmode.org/worg/");
|
|
|
+org_html_manager.set("LOCAL_TOC", "0");
|
|
|
+org_html_manager.set("VIEW_BUTTONS", "0");
|
|
|
+org_html_manager.set("MOUSE_HINT", "underline");
|
|
|
+org_html_manager.set("FIXED_TOC", "0");
|
|
|
+org_html_manager.set("TOC", "0");
|
|
|
+org_html_manager.set("VIEW", "slide");
|
|
|
+org_html_manager.setup(); // activate after the parameterd are set
|
|
|
+/* ]]> */
|
|
|
+</script>
|
|
|
+</head><body>
|
|
|
+<h1 id="title">Slides with Org-Mode and JavaScript</h1>
|
|
|
+
|
|
|
+
|
|
|
+<div id="table-of-contents">
|
|
|
+<h2>Table of Contents</h2>
|
|
|
+<div id="text-table-of-contents">
|
|
|
+<ul>
|
|
|
+<li><a href="#sec-1">Welcome to Org-mode and Slides</a></li>
|
|
|
+<li><a href="#sec-2">Overview</a></li>
|
|
|
+<li><a href="#sec-3">Overview</a></li>
|
|
|
+<li><a href="#sec-4">Overview</a></li>
|
|
|
+<li><a href="#sec-5">Create the Org-mode file</a></li>
|
|
|
+<li><a href="#sec-6">Export the Org-mode file to XHTML</a></li>
|
|
|
+<li><a href="#sec-7">Create a stylesheet for slides</a></li>
|
|
|
+<li><a href="#sec-8">Create a stylesheet for slides</a></li>
|
|
|
+<li><a href="#sec-9">Create a stylesheet for slides</a></li>
|
|
|
+<li><a href="#sec-10">Create a stylesheet for slides</a></li>
|
|
|
+<li><a href="#sec-11">Create a stylesheet for slides</a>
|
|
|
+<ul>
|
|
|
+<li><a href="#sec-11.1">CSS - body</a></li>
|
|
|
+<li><a href="#sec-11.2">CSS - headlines</a></li>
|
|
|
+<li><a href="#sec-11.3">CSS - org-info-js</a></li>
|
|
|
+</ul>
|
|
|
+</li>
|
|
|
+<li><a href="#sec-12">TODOS</a></li>
|
|
|
+<li><a href="#sec-13">TODOS</a></li>
|
|
|
+<li><a href="#sec-14">TODOS</a></li>
|
|
|
+</ul>
|
|
|
+</div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<div id="outline-container-1" class="outline-2">
|
|
|
+<h2 id="sec-1">Welcome to Org-mode and Slides</h2>
|
|
|
+<div id="text-1">
|
|
|
+
|
|
|
+
|
|
|
+<ul>
|
|
|
+<li>
|
|
|
+Navigate back and and forth on doubleclick and click.
|
|
|
+</li>
|
|
|
+<li>
|
|
|
+Turn around from last to first section.
|
|
|
+</li>
|
|
|
+<li>
|
|
|
+Turn around from first to last section.
|
|
|
+</li>
|
|
|
+</ul>
|
|
|
+
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+<div id="outline-container-2" class="outline-2">
|
|
|
+<h2 id="sec-2">Overview</h2>
|
|
|
+<div id="text-2">
|
|
|
+
|
|
|
+
|
|
|
+<ul>
|
|
|
+<li>
|
|
|
+Create the Org-mode file
|
|
|
+</li>
|
|
|
+</ul>
|
|
|
+
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+<div id="outline-container-3" class="outline-2">
|
|
|
+<h2 id="sec-3">Overview</h2>
|
|
|
+<div id="text-3">
|
|
|
+
|
|
|
+
|
|
|
+<ul>
|
|
|
+<li>
|
|
|
+Create the Org-mode file
|
|
|
+</li>
|
|
|
+<li>
|
|
|
+Export the Org-mode file to XHTML
|
|
|
+</li>
|
|
|
+</ul>
|
|
|
+
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+<div id="outline-container-4" class="outline-2">
|
|
|
+<h2 id="sec-4">Overview</h2>
|
|
|
+<div id="text-4">
|
|
|
+
|
|
|
+
|
|
|
+<ul>
|
|
|
+<li>
|
|
|
+Create the Org-mode file
|
|
|
+</li>
|
|
|
+<li>
|
|
|
+Export the Org-mode file to XHTML
|
|
|
+</li>
|
|
|
+<li>
|
|
|
+Create a stylesheet for slides
|
|
|
+</li>
|
|
|
+</ul>
|
|
|
+
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+<div id="outline-container-5" class="outline-2">
|
|
|
+<h2 id="sec-5">Create the Org-mode file</h2>
|
|
|
+<div id="text-5">
|
|
|
+
|
|
|
+
|
|
|
+<p>
|
|
|
+<b>Structure for slides</b>
|
|
|
+</p>
|
|
|
+<p>
|
|
|
+<pre class="example">
|
|
|
+ * Overview
|
|
|
+
|
|
|
+ + Create the Org-mode file
|
|
|
+
|
|
|
+ * Overview
|
|
|
+
|
|
|
+ + Create the Org-mode file
|
|
|
+ + Export the Org-mode file to XHTML
|
|
|
+</pre>
|
|
|
+</p>
|
|
|
+</div>
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+<div id="outline-container-6" class="outline-2">
|
|
|
+<h2 id="sec-6">Export the Org-mode file to XHTML</h2>
|
|
|
+<div id="text-6">
|
|
|
+
|
|
|
+
|
|
|
+<p>
|
|
|
+<code>view:slide</code>
|
|
|
+</p>
|
|
|
+<p>
|
|
|
+<pre class="example">
|
|
|
+#+INFOJS_OPT: toc:nil ltoc:nil view:slide mouse:underline
|
|
|
+
|
|
|
+
|
|
|
+* COMMENT html style specifications
|
|
|
+# Local Variables:
|
|
|
+# org-export-html-style: "<link rel=\"stylesheet\" \
|
|
|
+# type=\"text/css\" href=\"slides.css\" />"
|
|
|
+# End:
|
|
|
+</pre>
|
|
|
+</p>
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+<div id="outline-container-7" class="outline-2">
|
|
|
+<h2 id="sec-7">Create a stylesheet for slides</h2>
|
|
|
+<div id="text-7">
|
|
|
+
|
|
|
+
|
|
|
+<ul>
|
|
|
+<li>
|
|
|
+Stylesheets for slides are different.
|
|
|
+</li>
|
|
|
+</ul>
|
|
|
+
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+<div id="outline-container-8" class="outline-2">
|
|
|
+<h2 id="sec-8">Create a stylesheet for slides</h2>
|
|
|
+<div id="text-8">
|
|
|
+
|
|
|
+
|
|
|
+<ul>
|
|
|
+<li>
|
|
|
+Stylesheets for slides are different.
|
|
|
+</li>
|
|
|
+<li>
|
|
|
+The body uses the whole width.
|
|
|
+</li>
|
|
|
+</ul>
|
|
|
+
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+<div id="outline-container-9" class="outline-2">
|
|
|
+<h2 id="sec-9">Create a stylesheet for slides</h2>
|
|
|
+<div id="text-9">
|
|
|
+
|
|
|
+
|
|
|
+<ul>
|
|
|
+<li>
|
|
|
+Stylesheets for slides are different.
|
|
|
+</li>
|
|
|
+<li>
|
|
|
+The body uses the whole width.
|
|
|
+</li>
|
|
|
+<li>
|
|
|
+Use the same style for all headlines.
|
|
|
+</li>
|
|
|
+</ul>
|
|
|
+
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+<div id="outline-container-10" class="outline-2">
|
|
|
+<h2 id="sec-10">Create a stylesheet for slides</h2>
|
|
|
+<div id="text-10">
|
|
|
+
|
|
|
+
|
|
|
+<ul>
|
|
|
+<li>
|
|
|
+Stylesheets for slides are different.
|
|
|
+</li>
|
|
|
+<li>
|
|
|
+The body uses the whole width.
|
|
|
+</li>
|
|
|
+<li>
|
|
|
+Use the same style for all headlines.
|
|
|
+</li>
|
|
|
+<li>
|
|
|
+The postamble will be hidden automatically.
|
|
|
+</li>
|
|
|
+</ul>
|
|
|
+
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+<div id="outline-container-11" class="outline-2">
|
|
|
+<h2 id="sec-11">Create a stylesheet for slides</h2>
|
|
|
+<div id="text-11">
|
|
|
+
|
|
|
+
|
|
|
+<ul>
|
|
|
+<li>
|
|
|
+Stylesheets for slides are different.
|
|
|
+</li>
|
|
|
+<li>
|
|
|
+The body uses the whole width.
|
|
|
+</li>
|
|
|
+<li>
|
|
|
+Use the same style for all headlines.
|
|
|
+</li>
|
|
|
+<li>
|
|
|
+The postamble will be hidden automatically.
|
|
|
+</li>
|
|
|
+<li>
|
|
|
+Position org-info.js's window.
|
|
|
+</li>
|
|
|
+</ul>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+<div id="outline-container-11.1" class="outline-3">
|
|
|
+<h3 id="sec-11.1">CSS - body</h3>
|
|
|
+<div id="text-11.1">
|
|
|
+
|
|
|
+
|
|
|
+<p>
|
|
|
+Choose a big font!
|
|
|
+</p>
|
|
|
+<p>
|
|
|
+<pre class="example">
|
|
|
+body
|
|
|
+{
|
|
|
+ width:100%;
|
|
|
+ padding:0px 0px 0px 0px;
|
|
|
+ margin:0px 0px 0px 0px;
|
|
|
+ background-image:url(img/bg.gif);
|
|
|
+ background-attachment:fixed;
|
|
|
+ background-repeat:repeat-x;
|
|
|
+ /* ... etc. */
|
|
|
+}
|
|
|
+</pre>
|
|
|
+</p>
|
|
|
+</div>
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+<div id="outline-container-11.2" class="outline-3">
|
|
|
+<h3 id="sec-11.2">CSS - headlines</h3>
|
|
|
+<div id="text-11.2">
|
|
|
+
|
|
|
+
|
|
|
+<p>
|
|
|
+Set all headlines to the same size:
|
|
|
+</p>
|
|
|
+<p>
|
|
|
+<pre class="example">
|
|
|
+h1,h2,h3,h4,h5,h6
|
|
|
+{
|
|
|
+ font-size: 18pt;
|
|
|
+ font-weight:bold;
|
|
|
+ color:#104d8c;
|
|
|
+ /* ... etc. */
|
|
|
+}
|
|
|
+</pre>
|
|
|
+</p>
|
|
|
+</div>
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+<div id="outline-container-11.3" class="outline-3">
|
|
|
+<h3 id="sec-11.3">CSS - org-info-js</h3>
|
|
|
+<div id="text-11.3">
|
|
|
+
|
|
|
+
|
|
|
+<p>
|
|
|
+Position the org-info.js window.
|
|
|
+</p>
|
|
|
+<p>
|
|
|
+<pre class="example">
|
|
|
+#org-info-js-window
|
|
|
+{
|
|
|
+ position:absolute;
|
|
|
+ top:140px;
|
|
|
+ left:20%;
|
|
|
+}
|
|
|
+</pre>
|
|
|
+</p>
|
|
|
+
|
|
|
+</div>
|
|
|
+</div>
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+<div id="outline-container-12" class="outline-2">
|
|
|
+<h2 id="sec-12">TODOS</h2>
|
|
|
+<div id="text-12">
|
|
|
+
|
|
|
+
|
|
|
+<ul>
|
|
|
+<li id="sec-12.1"><span class="todo">TODO</span> Load stylsheets dynamically.<br/>
|
|
|
+
|
|
|
+</li>
|
|
|
+</ul>
|
|
|
+</div>
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+<div id="outline-container-13" class="outline-2">
|
|
|
+<h2 id="sec-13">TODOS</h2>
|
|
|
+<div id="text-13">
|
|
|
+
|
|
|
+
|
|
|
+<ul>
|
|
|
+<li id="sec-13.1"><span class="todo">TODO</span> Load stylsheets dynamically.<br/>
|
|
|
+</li>
|
|
|
+<li id="sec-13.2"><span class="todo">TODO</span> Drop lot's of mails with bugs and wishes.<br/>
|
|
|
+
|
|
|
+</li>
|
|
|
+</ul>
|
|
|
+</div>
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+<div id="outline-container-14" class="outline-2">
|
|
|
+<h2 id="sec-14">TODOS</h2>
|
|
|
+<div id="text-14">
|
|
|
+
|
|
|
+
|
|
|
+<ul>
|
|
|
+<li id="sec-14.1"><span class="todo">TODO</span> Load stylsheets dynamically.<br/>
|
|
|
+</li>
|
|
|
+<li id="sec-14.2"><span class="todo">TODO</span> Drop lot's of mails with bugs and wishes.<br/>
|
|
|
+
|
|
|
+<p>
|
|
|
+
|
|
|
+<hr/>
|
|
|
+</p>
|
|
|
+</li>
|
|
|
+<li id="sec-14.3"><span class="todo">TODO</span> Have Fun with Org-mode and all the tools around.<br/>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+</li>
|
|
|
+</ul>
|
|
|
+</div>
|
|
|
+</div>
|
|
|
+<div id="postamble"><p class="author"> Author: Sebastian Rose
|
|
|
+<a href="mailto:sebastian_rose@gmx.de"><sebastian_rose@gmx.de></a>
|
|
|
+</p>
|
|
|
+<p class="date"> Date: 2008-08-28 00:06:02 CEST</p>
|
|
|
+<p>HTML generated by org-mode 6.06b in emacs 23<p>
|
|
|
+</div></body>
|
|
|
+</html>
|