-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
261 lines (210 loc) · 8.63 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TODO: deck.js StarterKit template</title>
<meta name="author" content="TODO: Rémi Bob Emonet">
<meta name="venue" content="TODO:">
<meta name="date" content="TODO: 2017-08-23">
<style type="text/css">
/* custom css can be written here, some examples provided */
.helparea { background: #FFFFFFBA; }
/* for the base demo */
.in-red {color: red !important; text-decoration: underline;}
/* for the svg demo */
svg .in-red {fill: darkred; fill-opacity: .5; stroke: white;}
.dense {font-size: 66%;}
/* a few nicer slides */
.blackbg {background: black !important;}
.title-slide ul li { list-style: none; }
.title-slide ul {
font-size: 20px; color: darkgrey;
text-align: center;
position: absolute; bottom: 50px; left:0; right: 0;
}
/* for the container styling demo */
.bgred {background: #FAA !important;}
.zoomed-out {
transform: rotate(45deg) scale(0.5, 0.5);
transition: 1s transform;
}
/* show last sub slide */
.deck-container.lastsubslide:not(.no-status)::after {
position: absolute;
right: 0; bottom: 0;
content: "⛶";
color: grey;
font-size: 40px;
}
</style>
<script src="deck-packed.js"></script>
<script>
var cssAndJs = ["light-red-dense.css"]; // include the theme (can add any css or js to the list)
var options = {}; // to override default deck.js options
includedeck(cssAndJs, options);
</script>
</head>
<body>
<div class="deck-container">
<!-- splash screen when loading -->
<div class="deck-loading-splash" style="background: black; color: chartreuse;">
<span class="vcenter" style="font-size: 30px; font-family: Arial; ">Please wait, while the deck is loading…</span>
</div>
<!-- --------------------------- -->
<!-- slides in extended markdown -->
<section class="smart">
## In this presentation, you'll find
- An example title slide
- Examples of section slides (#) and normal slides (##)
- Examples of custom classes and how to put them on some element
- Examples of incremental apparition of bullet points
- **NB: Use left/right arrows to navigate**
# <span class="var-title-br"></span> {*no-status title-slide} // comment
- <span class="var-author"></span>
- <span class="var-date"></span>
## Overview {#the-overview}
- we could have written something
- in this overview
- but the goal is to illustrate the fact that
- you can:
1. give an identifier to any element (or a slide)
1. easily copy a slide with `@copy` (this will be illustrated at the end)
## One can type slides in markdown
- Most of this demo is like that that
## You can use HTML too, if you need very specific things
<div>
<div style="width: 45%; float: left; border: 1px solid black;"> this is a two-column layout (that could be achieved with some classes and css styles also) </div>
<div style="width: 45%; float: right; border: 1px solid black;"> lorem ipsum … </div>
</div>
## You can mix HTML + MD too
<div markdown="true">
* this is **interpreted** (standard div with the markdown attribute)
`<div markdown="true">...</div>`
</div>
<hr/>
<mdiv>
* this is **interpreted** (custom mdiv element)
</mdiv>
<mdiv>
* this is **interpreted** (custom mdiv again)
</mdiv>
<hr/>
<div>
* this is **not** interpreted (plain elements) <br/>
<code>\<div>...\</div></code>
</div>
<hr/>
<mdiv>
<mdiv style="width: 45%; float: left; border: 1px solid black;">(no 4-space indent) two column, **interpreted** </mdiv>
<mdiv style="width: 45%; float: right; border: 1px solid black;"> lorem ~~ipsum~~ … </mdiv>
</mdiv>
## Adding classes and incremental display
- This has a css class that makes it hightlighted in red {in-red}
- This is normal
- this is nested
- also this one in highlighted {in-red}
- The `slide` class can be added to make incremental display
- This one should only appear later {slide}
- this one appears with its parent
- and later {slide}
- and later {slide}
- This one is there from the beginning
## Adding images etc {imgInline}
<style>
.imgInline img {display: inline-block !important;}
</style>
- One can use plain html or markdown
- As here: <img src="https://placeimg.com/96/139/nature" alt="nice!"/>
or (md) 
or (sized) 
- Or there:
<img src="http://placeimg.com/200/139/nature" alt="nice!"/>
NB: these ones are online but you can use local images as well
## Including SVG images
@svg: Test.svg 700 200
- One can use the special `@svg` annotation
- SVG images loaded this way can be styled and animated
- For this, one can use the `@anim` annotation (see next slide)
## Animating SVG images
- 1<sup>st</sup>: make something appear, with @`anim: #use47`
- @anim: #use47
- 3 next steps: with @`anim: #use49 | #use51 | #use53`
- @anim: #use49 | #use51 | #use53
- disappearing and doing multiple things per step, with <br/> @`anim: -#use49 | - #use51,#use53 | #use51,#use53 + #use49 + -#use47`
- @anim: -#use49 | - #use51,#use53 | #use51,#use53 + #use49 + -#use47
- adding a class (also works on non-SVG), with <br/> @`anim: %+class:in-red: #tspan3448`
- @anim: %+class:in-red: #tspan3448
@svg: Test.svg 700 200
## Global Effects
- One can also have effects that affects not only the slide but the container
- This can be done, e.g., in the next 4 steps with
- @`anim: %+class:/bgred`
- @`anim: %+class:/zoomed-out`
- @`anim: %-class:/bgred`
- @`anim: %-class:/zoomed-out`
- @anim: %+class:/bgred
- @anim: %+class:/zoomed-out
- @anim: %-class:/bgred
- @anim: %-class:/zoomed-out
## Useful [shortcuts](http://home.heeere.com/tech-deckjs-ext.html#keys)
- 'h' to toggle the help area
- 'g' to open the "goto slide" panel
- 'm' to view the slide selector
- 'c' to clone the view (the original becomes the presenter view)
- left/right to step forward and backward
- down/up to move slide by slide (when presenting, e.g., down will go to the beginning of the next slide, before any animation/incremental display takes place)
- 'z'/'a' to browse slide by slide (when browsing, e.g., 'z' will go the end of the next slide)
## Writing Maths
- One can write math equations using the latex syntax, opening and closing with a dollar sign
- Examples below
- $\left[\begin{array}{cc} \sqrt{x} & 2 \\\\ 3 & x^4 \end{array}\right]$ or $\left\(\frac{x^2}{y^3}\right\)$ is made of $x^2$ and $y^3$
- $\mathcal{L} = \sum_d \sum_w \sum_{t_a} n(w,t_a,d) log \sum_z \sum_{t_s} p(w,t_r|z) p(z,t_s|d)$ {center}
$a^2 + \frac{1}{\sqrt{a^2 + \frac{1}{\sqrt{a^2 + \frac{1}{\sqrt{a^2 + b^{\infty}}}}}}}$
*$a^2 + \frac{1}{\sqrt{a^2 + \frac{1}{\sqrt{a^2 + \frac{1}{\sqrt{a^2 + b^{\infty}}}}}}}$ {in-red}* (classy)
## Highlighting source code
- Some python
```python
def main():
a = 12
print(a+a)
return a+1
main()
```
- Some shell
```bash
echo "hello ${world}"
```
## Highlighting source code
- With the `dense` class (custom css for this page)
```python
def magic(a): return a*a+1
{dense}
```
- and more
```python
def magic(a):
return a*a+1
{dense}
```
# More stuff about different extensions at [http://home.heeere.com/tech-deckjs-ext.html](http://home.heeere.com/tech-deckjs-ext.html)
# That's it, let's bring back our overview
# @copy: #the-overview
# Once more our overview, with some "animation"
# @copy: #the-overview: %+class:in-red: ol
## random END image {/no-status /blackbg image-full bottom-right darkened}
<img src="http://picsum.photos/800/600?random"/>
# fake end (check the slide number and go to the next slide) {deck-status-fake-end}
## supplementary slides
- One can “hide” slides by putting them after a slide with class `deck-status-fake-end`
## more supplementary
## Obtaining a standalone file?
- click on **THAT{save-dom-button}** (anything with the `save-dom-button` class)
- or press 'd'
</section>
<!-- footer and other decorations -->
<p class="deck-status deck-progress-10">
<span class="deck-status-current"></span> / <span class="deck-status-total"></span> − <span class="var-author">automatically replaced by the author</span> − <span class="var-title">automatically replaced by the title</span>
</p>
</div>
</body>
</html>