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

   1 #+STARTUP: align fold nodlcheck hidestars oddeven lognotestate
   2 #+TITLE: Slides with Org-Mode and JavaScript
   3 #+AUTHOR: Sebastian Rose
   4 #+EMAIL: sebastian_rose@gmx.de
   5 #+LANGUAGE: en
   6 #+OPTIONS:   H:3 num:nil toc:nil \n:nil @:t ::t |:t ^:t -:t f:t *:t TeX:t LaTeX:nil skip:nil d:t tags:not-in-toc
   7 #+INFOJS_OPT: path:../org-info.js
   8 #+INFOJS_OPT: toc:nil ltoc:nil view:slide mouse:underline
   9 #+INFOJS_OPT: up:http://orgmode.org/worg/
  10 #+INFOJS_OPT: home:http://orgmode.org buttons:nil
  11
  12
  13 * Welcome to Org-mode and Slides
  14
  15   + Navigate back and and forth on doubleclick and click.
  16   + Use all the navigation and text facilities of org-info.js in your
  17     presentations.
  18   + Remove warnings on click.
  19   + No warnings when navigating with the mouse.
  20   + Simple lists are shown item by item automatically.
  21
  22 * Overview
  23
  24   + Create the Org-mode file
  25   + Export the Org-mode file to XHTML
  26   + Create a stylesheet for slides
  27
  28 * Create the Org-mode file
  29
  30   *Structure for slides*
  31
  32   : * Overview
  33   :
  34   :   + Create the Org-mode file
  35   :
  36   : * Overview
  37   :
  38   :   + Create the Org-mode file
  39   :   + Export the Org-mode file to XHTML
  40
  41 * Export the Org-mode file to XHTML
  42
  43   =view:slide=
  44
  45   :#+INFOJS_OPT: toc:nil ltoc:nil view:slide mouse:underline
  46   :
  47   :
  48   :* COMMENT html style specifications
  49   :# Local Variables:
  50   :# org-export-html-style: "<link rel=\"stylesheet\" \
  51   :#                type=\"text/css\" href=\"slides.css\" />"
  52   :# End:
  53
  54
  55 * Create a stylesheet for slides
  56
  57   + Stylesheets for slides are different.
  58   + The body uses the whole width.
  59   + Use the same style for all headlines.
  60   + The postamble will be hidden automatically.
  61   + Position org-info.js's window.
  62
  63 ** CSS - body
  64
  65    Choose a big font!
  66
  67    :body
  68    :{
  69    :  width:100%;
  70    :  padding:0px 0px 0px 0px;
  71    :  margin:0px 0px 0px 0px;
  72    :  background-image:url(img/bg.gif);
  73    :  background-attachment:fixed;
  74    :  background-repeat:repeat-x;
  75    :  /* ... etc. */
  76    :}
  77
  78 ** CSS - headlines
  79
  80    Set all headlines to the same size:
  81
  82    :h1,h2,h3,h4,h5,h6
  83    :{
  84    :  font-size: 18pt;
  85    :  font-weight:bold;
  86    :  color:#104d8c;
  87    :  /* ... etc. */
  88    :}
  89
  90 ** CSS - org-info-js
  91
  92    Position the org-info.js window.
  93
  94    :#org-info-js-window
  95    :{
  96    :  position:absolute;
  97    :  top:140px;
  98    :  left:20%;
  99    :}
 100
 101
 102 * TODOS
 103
 104 **** TODO More features.
 105 **** TODO Load stylsheets dynamically.
 106 **** TODO Drop lot's of mails with bugs and wishes.
 107
 108      ------
 109
 110 **** TODO Have Fun with Org-mode and all the tools around.
 111
 112 * DONE
 113
 114   That's all folks.
 115
 116 * COMMENT html style specifications
 117 # Local Variables:
 118 # org-export-html-style: "<link rel=\"stylesheet\" type=\"text/css\" href=\"slides.css\" />"
 119 # End: