code/org-info-js/org-slides/slides.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   2                "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml"
   4 lang="en" xml:lang="en">
   5 <head>
   6 <title>Slides with Org-Mode and JavaScript</title>
   7 <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
   8 <meta name="generator" content="Org-mode"/>
   9 <meta name="generated" content="2008-09-06 15:58:41 CEST"/>
  10 <meta name="author" content="Sebastian Rose"/>
  11 <style type="text/css">
  12   html { font-family: Times, serif; font-size: 12pt; }
  13   .title  { text-align: center; }
  14   .todo   { color: red; }
  15   .done   { color: green; }
  16   .tag    { background-color:lightblue; font-weight:normal }
  17   .target { }
  18   .timestamp { color: grey }
  19   .timestamp-kwd { color: CadetBlue }
  20   p.verse { margin-left: 3% }
  21   pre {
  22     border: 1pt solid #AEBDCC;
  23     background-color: #F3F5F7;
  24     padding: 5pt;
  25     font-family: courier, monospace;
  26         font-size: 90%;
  27         overflow:auto;
  28   }
  29   table { border-collapse: collapse; }
  30   td, th { vertical-align: top; }
  31   dt { font-weight: bold; }
  32
  33   .org-info-js_info-navigation { border-style:none; }
  34   #org-info-js_console-label { font-size:10px; font-weight:bold;
  35                                white-space:nowrap; }
  36   .org-info-js_search-highlight {background-color:#ffff00; color:#000000;
  37                                  font-weight:bold; }
  38
  39 </style><link rel="stylesheet"                type="text/css" href="slides.css" />
  40 <script type="text/javascript" language="JavaScript" src="../org-info.js"></script>
  41 <script type="text/javascript" language="JavaScript">
  42 /* <![CDATA[ */
  43 org_html_manager.set("TOC_DEPTH", "3");
  44 org_html_manager.set("LINK_HOME", "http://orgmode.org");
  45 org_html_manager.set("LINK_UP", "http://orgmode.org/worg/");
  46 org_html_manager.set("LOCAL_TOC", "0");
  47 org_html_manager.set("VIEW_BUTTONS", "0");
  48 org_html_manager.set("MOUSE_HINT", "underline");
  49 org_html_manager.set("FIXED_TOC", "0");
  50 org_html_manager.set("TOC", "0");
  51 org_html_manager.set("VIEW", "slide");
  52 org_html_manager.setup();  // activate after the parameterd are set
  53 /* ]]> */
  54 </script>
  55 </head><body>
  56 <h1 id="title">Slides with Org-Mode and JavaScript</h1>
  57
  58 <div id="table-of-contents">
  59 <h2>Table of Contents</h2>
  60 <div id="text-table-of-contents">
  61 <ul>
  62 <li><a href="#sec-1">Welcome to Org-mode and Slides</a></li>
  63 <li><a href="#sec-2">Overview</a></li>
  64 <li><a href="#sec-3">Create the Org-mode file</a></li>
  65 <li><a href="#sec-4">Export the Org-mode file to XHTML</a></li>
  66 <li><a href="#sec-5">Create a stylesheet for slides</a>
  67 <ul>
  68 <li><a href="#sec-5.1">CSS - body</a></li>
  69 <li><a href="#sec-5.2">CSS - headlines</a></li>
  70 <li><a href="#sec-5.3">CSS - org-info-js</a></li>
  71 </ul>
  72 </li>
  73 <li><a href="#sec-6">TODOS</a></li>
  74 <li><a href="#sec-7"></a></li>
  75 </ul>
  76 </div>
  77 </div>
  78
  79 <div id="outline-container-1" class="outline-2">
  80 <h2 id="sec-1">Welcome to Org-mode and Slides</h2>
  81 <div id="text-1">
  82
  83
  84 <ul>
  85 <li>
  86 Navigate back and and forth on doubleclick and click.
  87 </li>
  88 <li>
  89 Use all the navigation and text facilities of org-info.js in your
  90 presentations.
  91 </li>
  92 <li>
  93 Remove warnings on click.
  94 </li>
  95 <li>
  96 No warnings when navigating with the mouse.
  97 </li>
  98 <li>
  99 Simple lists are shown item by item automatically.
 100 </li>
 101 </ul>
 102
 103
 104 </div>
 105
 106 </div>
 107
 108 <div id="outline-container-2" class="outline-2">
 109 <h2 id="sec-2">Overview</h2>
 110 <div id="text-2">
 111
 112
 113 <ul>
 114 <li>
 115 Create the Org-mode file
 116 </li>
 117 <li>
 118 Export the Org-mode file to XHTML
 119 </li>
 120 <li>
 121 Create a stylesheet for slides
 122 </li>
 123 </ul>
 124
 125
 126 </div>
 127
 128 </div>
 129
 130 <div id="outline-container-3" class="outline-2">
 131 <h2 id="sec-3">Create the Org-mode file</h2>
 132 <div id="text-3">
 133
 134
 135 <p>
 136 <b>Structure for slides</b>
 137 </p>
 138 <p>
 139 <pre class="example">
 140  * Overview
 141
 142    + Create the Org-mode file
 143
 144  * Overview
 145
 146    + Create the Org-mode file
 147    + Export the Org-mode file to XHTML
 148 </pre>
 149 </p>
 150 </div>
 151
 152 </div>
 153
 154 <div id="outline-container-4" class="outline-2">
 155 <h2 id="sec-4">Export the Org-mode file to XHTML</h2>
 156 <div id="text-4">
 157
 158
 159 <p>
 160 <code>view:slide</code>
 161 </p>
 162 <p>
 163 <pre class="example">
 164 #+INFOJS_OPT: toc:nil ltoc:nil view:slide mouse:underline
 165
 166
 167 * COMMENT html style specifications
 168 # Local Variables:
 169 # org-export-html-style: "&lt;link rel=\"stylesheet\" \
 170 #                type=\"text/css\" href=\"slides.css\" /&gt;"
 171 # End:
 172 </pre>
 173 </p>
 174
 175 </div>
 176
 177 </div>
 178
 179 <div id="outline-container-5" class="outline-2">
 180 <h2 id="sec-5">Create a stylesheet for slides</h2>
 181 <div id="text-5">
 182
 183
 184 <ul>
 185 <li>
 186 Stylesheets for slides are different.
 187 </li>
 188 <li>
 189 The body uses the whole width.
 190 </li>
 191 <li>
 192 Use the same style for all headlines.
 193 </li>
 194 <li>
 195 The postamble will be hidden automatically.
 196 </li>
 197 <li>
 198 Position org-info.js's window.
 199 </li>
 200 </ul>
 201
 202
 203
 204 </div>
 205
 206 <div id="outline-container-5.1" class="outline-3">
 207 <h3 id="sec-5.1">CSS - body</h3>
 208 <div id="text-5.1">
 209
 210
 211 <p>
 212 Choose a big font!
 213 </p>
 214 <p>
 215 <pre class="example">
 216 body
 217 {
 218   width:100%;
 219   padding:0px 0px 0px 0px;
 220   margin:0px 0px 0px 0px;
 221   background-image:url(img/bg.gif);
 222   background-attachment:fixed;
 223   background-repeat:repeat-x;
 224   /* ... etc. */
 225 }
 226 </pre>
 227 </p>
 228 </div>
 229
 230 </div>
 231
 232 <div id="outline-container-5.2" class="outline-3">
 233 <h3 id="sec-5.2">CSS - headlines</h3>
 234 <div id="text-5.2">
 235
 236
 237 <p>
 238 Set all headlines to the same size:
 239 </p>
 240 <p>
 241 <pre class="example">
 242 h1,h2,h3,h4,h5,h6
 243 {
 244   font-size: 18pt;
 245   font-weight:bold;
 246   color:#104d8c;
 247   /* ... etc. */
 248 }
 249 </pre>
 250 </p>
 251 </div>
 252
 253 </div>
 254
 255 <div id="outline-container-5.3" class="outline-3">
 256 <h3 id="sec-5.3">CSS - org-info-js</h3>
 257 <div id="text-5.3">
 258
 259
 260 <p>
 261 Position the org-info.js window.
 262 </p>
 263 <p>
 264 <pre class="example">
 265 #org-info-js-window
 266 {
 267   position:absolute;
 268   top:140px;
 269   left:20%;
 270 }
 271 </pre>
 272 </p>
 273
 274 </div>
 275 </div>
 276
 277 </div>
 278
 279 <div id="outline-container-6" class="outline-2">
 280 <h2 id="sec-6">TODOS</h2>
 281 <div id="text-6">
 282
 283
 284 <ul>
 285 <li id="sec-6.1"><span class="todo">TODO</span> More features.<br/>
 286 </li>
 287 <li id="sec-6.2"><span class="todo">TODO</span> Load stylsheets dynamically.<br/>
 288 </li>
 289 <li id="sec-6.3"><span class="todo">TODO</span> Drop lot's of mails with bugs and wishes.<br/>
 290
 291 <p>
 292
 293 <hr/>
 294 </p>
 295 </li>
 296 <li id="sec-6.4"><span class="todo">TODO</span> Have Fun with Org-mode and all the tools around.<br/>
 297
 298 </li>
 299 </ul>
 300 </div>
 301
 302 </div>
 303
 304 <div id="outline-container-7" class="outline-2">
 305 <h2 id="sec-7"><span class="done">DONE</span></h2>
 306 <div id="text-7">
 307
 308
 309 <p>
 310 That's all folks.
 311 </p>
 312
 313 </div>
 314 </div>
 315 <div id="postamble"><p class="author"> Author: Sebastian Rose
 316 <a href="mailto:sebastian_rose@gmx.de">&lt;sebastian_rose@gmx.de&gt;</a>
 317 </p>
 318 <p class="date"> Date: 2008-09-06 15:58:41 CEST</p>
 319 <p>HTML generated by org-mode 6.06b in emacs 23</p>
 320 </div></body>
 321 </html>