Add introduction to org-reveal.
[worg.git] / org-tutorials / non-beamer-presentations.org
1 #+TITLE:     Writing Non-Beamer presentations in org-mode
2 #+AUTHOR:    Eric Schulte
3 #+DATE:      <2011-06-02 Thu>
4 #+DESCRIPTION: 
5 #+KEYWORDS: 
6 #+LANGUAGE:  en
7 #+OPTIONS:    H:3 num:nil toc:t \n:nil ::t |:t ^:t -:t f:t *:t tex:t d:(HIDE) tags:not-in-toc
8 #+INFOJS_OPT: view:nil toc:nil ltoc:t mouse:underline buttons:0 path:http://orgmode.org/org-info.js
9 #+SELECT_TAGS: export
10 #+EXCLUDE_TAGS: noexport
11 #+LINK_UP:   
12 #+LINK_HOME: 
13
14 * Introduction
15
16 While [[file:org-beamer/tutorial.org][Beamer]] is a great option for generating high-quality
17 presentations from Org-mode documents, sometimes a lighter-weight
18 simpler option is desirable.  This page presents the alternative
19 options for giving quick slide-show presentations from Org-mode
20 documents.
21
22 - [[Epresent]] :: is an Emacs minor mode for giving presentations.  The
23      Emacs editor is used in a full-screen mode as the presentation
24      engine, and headings of the Org-mode buffer are presented
25      directly (with a few nice bells and whistles).
26
27 - [[S5]] :: is a standards-based suite for writing slide-show
28      presentations in html web pages.  The browser is used as the
29      presentation engine, and a slightly altered form of Org-mode's
30      HTML export serves as the base of the presentation.
31
32 - org-html5presentation :: Is an Exporter of Org-mode documents to
33      HTML5 slide show presentations.
34      (see [[https://gist.github.com/509761][gist.github.com/509761]] for code and usage information)
35
36 - [[org-tree-slide]] :: is a simple tool to treat a tree of an org buffer as
37      a single slide. Since each slide is displayed by simple narrowing,
38      an editable presentation is easily achieved without restricting
39      the functionality of Org-mode. And usage of org-tree-slide is not
40      limited to a presentation. Three profiles are predefined for
41      different scenarios.
42
43 - [[org-reveal]] :: is an Org-mode extension that exports Org documents
44                 into Reveal.js presentations. Reveal.js is a web-based
45                 presentation framework with 3-D effects, customizable
46                 themes and animations, powered by the latest HTML5
47                 technologies. For details, please check the [[org-reveal]]
48                 section below.
49
50 * Epresent
51   :PROPERTIES:
52   :CUSTOM_ID: Epresent
53   :END:
54
55 Epresent was originally developed on top of outline mode by Tom
56 Tromey.  Eric Schulte then adopted it for work with Org-mode.  The
57 code for using Org-mode with epresent is available at
58 https://github.com/eschulte/epresent.
59
60 Epresent leverages existing Org-mode features like inline image
61 display, inline latex fragments, and in-buffer code fontification to
62 generate very nice (if somewhat nerdy) looking presentations directly
63 from within Emacs.  This has the nice benefit that during-presentation
64 editing and code evaluation is possible.
65
66 The README file in the epresent repository has instillation
67 instructions, however usage is as simple as...
68 1. =M-x load-file epresent.el=
69 2. open the example =present.org= file located in the repository
70 3. call =M-x epresent-run=
71 4. press "=t=" to view the top level of the presentation
72 5. navigate the presentation with "=n=", "=p=", "=t=" and quit with "=q="
73
74 * S5
75   :PROPERTIES:
76   :CUSTOM_ID: S5
77   :END:
78
79 [[http://meyerweb.com/eric/tools/s5/][S5]] is a "/Simple Standards-Based Slide Show System/" implemented using
80 HTML, CSS and Javascript.
81
82 Two S5 options exist for Org-mode.
83
84 1. Yann Hodique has developed a javascript based option which works
85    directly with Org-mode's existing html export.
86
87    This technique is described on Yann's blog
88    [[http://www.hodique.info/blog/2009/11/14/s5_presentation_from_org-mode][s5 presentation from org-mode]].
89
90 2. There is also code implementing an altered version of Org-mode's
91    existing html export tailored to generating static S5
92    presentations.
93
94   This second technique is described below.
95
96 ** Code and usage for =org-export-as-s5=.
97 - The emacs-lisp code available [[https://github.com/eschulte/org-S5/blob/master/org-export-as-s5.el][here]] defines a single function
98   (=org-export-as-s5=) as a simple wrapper around Org-mode's existing
99   html export.  This function is based heavily on Pierre de Buyl's
100   [[http://thread.gmane.org/gmane.emacs.orgmode/33143/match=s5][very thorough S5 export instructions]] posted to the Org-mode mailing
101   list.
102
103 - Simply evaluate this code, or add it to your =.emacs=, then call
104   =M-x org-export-as-s5= from within an Org-mode buffer. *Note*: the
105   [[http://gitweb.adaptive.cs.unm.edu/org-S5.git/tree/HEAD:/ui][ui]] directory holding S5 support files must be located in the same
106   directory as the exported html.
107
108 - Currently there are three themes which can be set with the
109   following.
110   #+begin_src emacs-lisp
111     (setq org-s5-theme "railscast")   ; based off `color-theme-railscasts'
112     (setq org-s5-theme "default")     ; the default S5 theme
113     (setq org-s5-theme "i18n")        ; the i18n theme by the author of S5
114   #+end_src
115
116 - This entire directory is available as a [[https://github.com/eschulte/org-S5/blob/master/org-export-as-s5.el][git repository]]
117
118 - For two examples of org-S5 in action see [[http://eschulte.github.com/org-S5/][here]]
119
120 * org-tree-slide
121   :PROPERTIES:
122   :CUSTOM_ID: org-tree-slide
123   :END:
124
125 org-tree-slide is an Emacs minor mode for org-mode. Once you toggle
126 =M-x org-tree-slie-mode=, just type =<left>= and =<right>= to move between 
127 slides. To show CONTENT, type =C-x s c=. When you exit this minor mode,
128 the slideshow will be finished.
129
130 The code is available at [[https://github.com/takaxp/org-tree-slide][Github]]. Please read [[https://github.com/takaxp/org-tree-slide/blob/master/README.org][README.org]] and check user
131 variables for flexible control.
132
133 Download org-tree-slide from the following direct link:
134 [[https://raw.github.com/takaxp/org-tree-slide/master/org-tree-slide.el]]
135
136 ** Recommended key bindings and profiles
137
138 #+begin_src emacs-lisp
139 (global-set-key (kbd "<f8>") 'org-tree-slide-mode)
140 (global-set-key (kbd "S-<f8>") 'org-tree-slide-skip-done-toggle)
141 #+end_src
142
143 Preset profiles are defined in org-tree-slide.
144 1. =M-x org-tree-slide-simple-profile=            ; Simple use
145 2. =M-x org-tree-slide-presentation-profile=      ; Presentation use
146 3. =M-x org-tree-slide-narrowing-control-profile= ; TODO Pursuit with narrowing
147 These functions set user variables for each using scenario.
148 You can find more detail in [[https://github.com/takaxp/org-tree-slide/blob/master/README.org][README.org]]. 
149 * orgmode-slideshow
150
151 Sander Boer created orgmode-slideshow -- see his message:
152
153 I hacked together a javascript and a css that transforms the default html
154 export of my org file to a slide show:
155
156 - http://www.mauc.nl/presentations/test.html
157   
158 Here's the org-file:
159
160 - http://www.mauc.nl/presentations/test.org
161   
162 Here's the rest (depends on jQuery)
163
164 - http://www.mauc.nl/assets/css/orgmode-slideshow.css
165 - http://www.mauc.nl/assets/js/orgmode-slideshow.js
166
167 * org-reveal
168
169   Reveal.js is a web-based presentation framework, with attracting
170   features like:
171   - 3-D slide transition effect.
172   - 2-D slide arrangement.
173   - Fragmented items.
174   - Navigation control.
175   - Slide thumbnail.
176   - Customizable themes.
177
178   An [[http://lab.hakim.se/reveal-js/][example of Reveal.js]] is available online.
179
180   Org-reveal is an Org-mode extension that exports Org-mode documents
181   into Reveal.js presentations. With org-reveal, you can easily
182   organize Reveal.js presentations without knowing the detail of HTML,
183   AND with some extra benifits:
184   - Highlighted source codes.
185   - Neat math equations.
186
187   An [[http://naga-eda.org/home/yujie/org-reveal/#/][example]] of presentation generated by org-reveal is available
188   online, together with the [[http://naga-eda.org/home/yujie/org-reveal/index.org][original Org document]].
189
190 ** Sources
191
192    Both Reveal.js and org-reveal are hosted on GitHub.
193    * Reveal.js :: [[https://github.com/hakimel/reveal.js/]]
194    * Org-reveal :: [[https://github.com/yjwen/org-reveal/]]
195
196 ** Usage
197
198    See org-reveal's [[https://github.com/yjwen/org-reveal/blob/master/Readme.org][Readme.org]] for detail instruction about installing
199    Reveal.js/org-reveal and the setting ups.
200
201    Though you can read it online, it is recommended to download the
202    projects and read it in your Emacs, so that you can try exporting
203    it to Reveal.js presentation while reading.
204
205
206
207