bzg
/
worg


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456
							<!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: "&lt;link rel=\"stylesheet\" \
#                type=\"text/css\" href=\"slides.css\" /&gt;"
# 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">&lt;sebastian_rose@gmx.de&gt;</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>