|
0
|
1 <!DOCTYPE html>
|
|
|
2 <!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
|
|
|
3 <!--[if IE 7]> <html class="no-js ie7" lang="en"> <![endif]-->
|
|
|
4 <!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]-->
|
|
|
5 <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
|
|
6 <head>
|
|
|
7 <meta charset="utf-8">
|
|
|
8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
9
|
|
|
10 <title>Getting Started with deck.js</title>
|
|
|
11
|
|
|
12 <meta name="description" content="A jQuery library for modern HTML presentations">
|
|
|
13 <meta name="author" content="Caleb Troughton">
|
|
|
14 <meta name="viewport" content="width=1024, user-scalable=no">
|
|
|
15
|
|
|
16 <!-- Core and extension CSS files -->
|
|
|
17 <link rel="stylesheet" href="../core/deck.core.css">
|
|
|
18 <link rel="stylesheet" href="../extensions/goto/deck.goto.css">
|
|
|
19 <link rel="stylesheet" href="../extensions/menu/deck.menu.css">
|
|
|
20 <link rel="stylesheet" href="../extensions/navigation/deck.navigation.css">
|
|
|
21 <link rel="stylesheet" href="../extensions/status/deck.status.css">
|
|
|
22 <link rel="stylesheet" href="../extensions/hash/deck.hash.css">
|
|
|
23 <link rel="stylesheet" href="../extensions/scale/deck.scale.css">
|
|
|
24
|
|
|
25 <!-- Style theme. More available in /themes/style/ or create your own. -->
|
|
|
26 <link rel="stylesheet" href="../themes/style/swiss.css">
|
|
|
27
|
|
|
28 <!-- Transition theme. More available in /themes/transition/ or create your own. -->
|
|
|
29 <link rel="stylesheet" href="../themes/transition/horizontal-slide.css">
|
|
|
30
|
|
|
31 <script src="../modernizr.custom.js"></script>
|
|
|
32 </head>
|
|
|
33
|
|
|
34 <body class="deck-container">
|
|
|
35
|
|
|
36 <!-- Begin slides -->
|
|
|
37 <section class="slide" id="title-slide">
|
|
|
38 <h1>Getting Started with deck.js</h1>
|
|
|
39 </section>
|
|
|
40
|
|
|
41 <section class="slide" id="how-to-overview">
|
|
|
42 <h2>How to Make a Deck</h2>
|
|
|
43 <ol>
|
|
|
44 <li>
|
|
|
45 <h3>Write Slides</h3>
|
|
|
46 <p>Slide content is simple HTML.</p>
|
|
|
47 </li>
|
|
|
48 <li>
|
|
|
49 <h3>Choose Themes</h3>
|
|
|
50 <p>One for slide styles and one for deck transitions.</p>
|
|
|
51 </li>
|
|
|
52 <li>
|
|
|
53 <h3>Include Extensions</h3>
|
|
|
54 <p>Add extra functionality to your deck, or leave it stripped down.</p>
|
|
|
55 </li>
|
|
|
56 </ol>
|
|
|
57 </section>
|
|
|
58
|
|
|
59 <section class="slide" id="markup">
|
|
|
60 <h2>The Markup</h2>
|
|
|
61 <p>Slides are just HTML elements with a class of <code>slide</code>.</p>
|
|
|
62 <pre><code><section class="slide">
|
|
|
63 <h2>How to Make a Deck</h2>
|
|
|
64 <ol>
|
|
|
65 <li>
|
|
|
66 <h3>Write Slides</h3>
|
|
|
67 <p>Slide content is simple HTML.</p>
|
|
|
68 </li>
|
|
|
69 <li>
|
|
|
70 <h3>Choose Themes</h3>
|
|
|
71 <p>One for slide styles and one for deck transitions.</p>
|
|
|
72 </li>
|
|
|
73 …
|
|
|
74 </ol>
|
|
|
75 </section></code></pre>
|
|
|
76 </section>
|
|
|
77
|
|
|
78 <section class="slide" id="themes">
|
|
|
79 <h2>Style Themes</h2>
|
|
|
80 <p>Customizes the colors, typography, and layout of slide content.</p>
|
|
|
81 <pre><code><link rel="stylesheet" href="/path/to/css/style-theme.css"></code></pre>
|
|
|
82 <h2>Transition Themes</h2>
|
|
|
83 <p>Defines transitions between slides using CSS3 transitions. Less capable browsers fall back to cutaways. But <strong>you</strong> aren’t using <em>those</em> browsers to give your presentations, are you…</p>
|
|
|
84 <pre><code><link rel="stylesheet" href="/path/to/css/transition-theme.css"></code></pre>
|
|
|
85 </section>
|
|
|
86
|
|
|
87 <section class="slide" id="extensions">
|
|
|
88 <h2>Extensions</h2>
|
|
|
89 <p>Core gives you basic slide functionality with left and right arrow navigation, but you may want more. Here are the ones included in this deck:</p>
|
|
|
90
|
|
|
91 <ul>
|
|
|
92 <li class="slide" id="extensions-goto">
|
|
|
93 <strong>deck.goto</strong>: Adds a shortcut key to jump to any slide number. Hit g, type in the slide number, and hit enter.
|
|
|
94 </li>
|
|
|
95
|
|
|
96 <li class="slide" id="extensions-hash">
|
|
|
97 <strong>deck.hash</strong>: Enables internal linking within slides, deep linking to individual slides, and updates the address bar & a permalink anchor with each slide change.
|
|
|
98 </li>
|
|
|
99
|
|
|
100 <li class="slide" id="extensions-menu">
|
|
|
101 <strong>deck.menu</strong>: Adds a menu view, letting you see all slides in a grid. Hit m to toggle to menu view, continue navigating your deck, and hit m to return to normal view. Touch devices can double-tap the deck to switch between views.
|
|
|
102 </li>
|
|
|
103
|
|
|
104 <li class="slide" id="extensions-navigation">
|
|
|
105 <strong>deck.navigation</strong>: Adds clickable left and right buttons for the less keyboard inclined.
|
|
|
106 </li>
|
|
|
107
|
|
|
108 <li class="slide" id="extensions-status">
|
|
|
109 <strong>deck.status</strong>: Adds a page number indicator. (current/total)
|
|
|
110 </li>
|
|
|
111
|
|
|
112 <li class="slide" id="extensions-scale">
|
|
|
113 <strong>deck.scale</strong>: Scales each slide to fit within the deck container using CSS Transforms for those browsers that support them.
|
|
|
114 </li>
|
|
|
115 </ul>
|
|
|
116
|
|
|
117 <p class="slide" id="extension-folders">Each extension folder in the download package contains the necessary JavaScript, CSS, and HTML files. For a complete list of extension modules included in deck.js, check out the <a href="http://imakewebthings.github.com/deck.js/docs">documentation</a>.</p>
|
|
|
118 </section>
|
|
|
119
|
|
|
120 <section class="slide" id="nested">
|
|
|
121 <h2>Nested Slides</h2>
|
|
|
122 <p>That last slide had a few steps. To create substeps in slides, just nest them:</p>
|
|
|
123 <pre><code><section class="slide">
|
|
|
124 <h2>Extensions</h2>
|
|
|
125 <p>Core gives you basic slide functionality...</p>
|
|
|
126 <ul>
|
|
|
127 <li class="slide">
|
|
|
128 <h3>deck.goto</h3>
|
|
|
129 <p>Adds a shortcut key to jump to any slide number...</p>
|
|
|
130 </li>
|
|
|
131 <li class="slide">...</li>
|
|
|
132 <li class="slide">...</li>
|
|
|
133 <li class="slide">...</li>
|
|
|
134 </ul>
|
|
|
135 </section></code></pre>
|
|
|
136 </section>
|
|
|
137
|
|
|
138 <section class="slide" id="elements-images">
|
|
|
139 <h2>Other Elements: Images</h2>
|
|
|
140 <img src="http://placekitten.com/600/375" alt="Kitties">
|
|
|
141 <pre><code><img src="http://placekitten.com/600/375" alt="Kitties"></code></pre>
|
|
|
142 </section>
|
|
|
143
|
|
|
144 <section class="slide" id="elements-blockquotes">
|
|
|
145 <h2>Other Elements: Blockquotes</h2>
|
|
|
146 <blockquote cite="http://example.org">
|
|
|
147 <p>Food is an important part of a balanced diet.</p>
|
|
|
148 <p><cite>Fran Lebowitz</cite></p>
|
|
|
149 </blockquote>
|
|
|
150 <pre><code><blockquote cite="http://example.org">
|
|
|
151 <p>Food is an important part of a balanced diet.</p>
|
|
|
152 <p><cite>Fran Lebowitz</cite></p>
|
|
|
153 </blockquote></code></pre>
|
|
|
154 </section>
|
|
|
155
|
|
|
156
|
|
|
157 <section class="slide" id="elements-videos">
|
|
|
158 <h2>Other Elements: Video Embeds</h2>
|
|
|
159 <p>Embed videos from your favorite online video service or with an HTML5 video element.</p>
|
|
|
160
|
|
|
161 <iframe src="http://player.vimeo.com/video/1063136?title=0&byline=0&portrait=0" width="400" height="225" frameborder="0"></iframe>
|
|
|
162
|
|
|
163 <pre><code><iframe src="http://player.vimeo.com/video/1063136?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"></iframe></code></pre>
|
|
|
164 </section>
|
|
|
165
|
|
|
166 <section class="slide" id="digging-deeper">
|
|
|
167 <h2>Digging Deeper</h2>
|
|
|
168 <p>If you want to learn about making your own themes, extending deck.js, and more, check out the <a href="../docs/">documentation</a>.</p>
|
|
|
169 </section>
|
|
|
170
|
|
|
171 <!-- deck.navigation snippet -->
|
|
|
172 <a href="#" class="deck-prev-link" title="Previous">←</a>
|
|
|
173 <a href="#" class="deck-next-link" title="Next">→</a>
|
|
|
174
|
|
|
175 <!-- deck.status snippet -->
|
|
|
176 <p class="deck-status">
|
|
|
177 <span class="deck-status-current"></span>
|
|
|
178 /
|
|
|
179 <span class="deck-status-total"></span>
|
|
|
180 </p>
|
|
|
181
|
|
|
182 <!-- deck.goto snippet -->
|
|
|
183 <form action="." method="get" class="goto-form">
|
|
|
184 <label for="goto-slide">Go to slide:</label>
|
|
|
185 <input type="text" name="slidenum" id="goto-slide" list="goto-datalist">
|
|
|
186 <datalist id="goto-datalist"></datalist>
|
|
|
187 <input type="submit" value="Go">
|
|
|
188 </form>
|
|
|
189
|
|
|
190 <!-- deck.hash snippet -->
|
|
|
191 <a href="." title="Permalink to this slide" class="deck-permalink">#</a>
|
|
|
192
|
|
|
193
|
|
|
194 <!-- Grab CDN jQuery, with a protocol relative URL; fall back to local if offline -->
|
|
|
195 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
|
|
|
196 <script>window.jQuery || document.write('<script src="../jquery-1.7.2.min.js"><\/script>')</script>
|
|
|
197
|
|
|
198 <!-- Deck Core and extensions -->
|
|
|
199 <script src="../core/deck.core.js"></script>
|
|
|
200 <script src="../extensions/hash/deck.hash.js"></script>
|
|
|
201 <script src="../extensions/menu/deck.menu.js"></script>
|
|
|
202 <script src="../extensions/goto/deck.goto.js"></script>
|
|
|
203 <script src="../extensions/status/deck.status.js"></script>
|
|
|
204 <script src="../extensions/navigation/deck.navigation.js"></script>
|
|
|
205 <script src="../extensions/scale/deck.scale.js"></script>
|
|
|
206
|
|
|
207 <!-- Initialize the deck -->
|
|
|
208 <script>
|
|
|
209 $(function() {
|
|
|
210 $.deck('.slide');
|
|
|
211 });
|
|
|
212 </script>
|
|
|
213
|
|
|
214 </body>
|
|
|
215 </html>
|
