forked from Seldaek/slippy
/
2010-05-30 Example.html
164 lines (156 loc) · 7.68 KB
/
2010-05-30 Example.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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- Slide meta data, remove/edit as you see fit -->
<title>Slippy Documentation</title>
<meta name="generator" content="Organic" />
<meta name="author" content="Jordi Boggiano" />
<meta name="company" content="Liip AG" />
<meta name="email" content="j.boggiano@seld.be" />
<meta name="date" content="2010-05-30" />
<meta name="venue" content="The Internets" />
<!-- Slippy core file and dependencies -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.history.js"></script>
<script type="text/javascript" src="slippy-0.9.0.js"></script>
<!-- Slippy structural styles -->
<link type="text/css" rel="stylesheet" href="slippy-0.9.0.css"/>
<!-- Slippy theme -->
<link type="text/css" rel="stylesheet" href="slippy-dark.css"/>
<!-- Syntax highlighting core file -->
<script type="text/javascript" src="highlighter/shCore.js"></script>
<!-- Syntax highlighting brushes, remove those you don't need -->
<script type="text/javascript" src="highlighter/shBrushBash.js"></script>
<script type="text/javascript" src="highlighter/shBrushCpp.js"></script>
<script type="text/javascript" src="highlighter/shBrushCSharp.js"></script>
<script type="text/javascript" src="highlighter/shBrushCss.js"></script>
<script type="text/javascript" src="highlighter/shBrushDelphi.js"></script>
<script type="text/javascript" src="highlighter/shBrushDiff.js"></script>
<script type="text/javascript" src="highlighter/shBrushGroovy.js"></script>
<script type="text/javascript" src="highlighter/shBrushJava.js"></script>
<script type="text/javascript" src="highlighter/shBrushJScript.js"></script>
<script type="text/javascript" src="highlighter/shBrushPhp.js"></script>
<script type="text/javascript" src="highlighter/shBrushPlain.js"></script>
<script type="text/javascript" src="highlighter/shBrushPython.js"></script>
<script type="text/javascript" src="highlighter/shBrushRuby.js"></script>
<script type="text/javascript" src="highlighter/shBrushScala.js"></script>
<script type="text/javascript" src="highlighter/shBrushSql.js"></script>
<script type="text/javascript" src="highlighter/shBrushVb.js"></script>
<script type="text/javascript" src="highlighter/shBrushXml.js"></script>
<!-- Syntax highlighting styles-->
<link type="text/css" rel="stylesheet" href="highlighter/shCore.css"/>
<link type="text/css" rel="stylesheet" href="highlighter/shThemeEclipse.css"/>
<!-- Slippy init code -->
<script type="text/javascript">
$(function() {
$(".slide").slippy({
// settings go here
// possible values are:
// - animLen, duration for default animations (0 = disabled)
// - animInForward, receives a slide and animates it
// - animInRewind, receives a slide and animates it
// - animOutForward, receives a slide and animates it
// - animOutRewind, receives a slide and animates it
// - baseWidth, defines the base for img resizing, if you don't want only
// full-width images, specify this as the pixel width of a slide so that
// images are scaled properly (default is 620px wide)
// - ratio, defines the width/height ratio of the slides, defaults to 1.3 (620x476)
});
SyntaxHighlighter.all();
});
</script>
<!-- Custom style for this deck -->
<style type="text/css">
.slide.nochrome {
border: 0;
background: 0;
}
</style>
</head>
<body>
<div class="slide">
<h1>Welcome to Slippy</h1>
<h2>Usage</h2>
<ul>
<li>Navigation: [Left]/[Right] arrows to move, [Space] or [Double Click] to go to next slide</li>
<li>Overview: [ESC]/[Del]/[Tab] to view, [Click] to pick one slide</li>
<li>Jump: Press [0-9] keys followed by [Enter] to go straight to one slide</li>
</ul>
</div>
<div class="slide">
<h1>H1's are centered by default</h1>
<div class="vcenter">
<h2>The class "vcenter" on anything</h2>
<ul>
<li>centers it</li>
<li>vertically</li>
</ul>
</div>
</div>
<div class="slide" layout="alt">
<h1>Layouts</h1>
<h2>This slide uses the "alt" layout</h2>
<p>It inherits the class "nochrome" of the layout, which allows you to style it differently, and it doesn't have the footer div that the default layout has for example</p>
<p>By default, all slides use the default layout if it's present</p>
<p>Layouts must have a <content></content> tag that will be replaced by each slide's content</p>
<pre class="brush: html">
<div class="slide" layout="alt">
Foo
</div>
<div class="layout" name="default">
<h1>Some title</h1>
<content></content>
<div class="footer">
Footer content
</div>
</div>
<div class="layout nochrome" name="alt">
<content></content>
</div>
</pre>
</div>
<div class="slide">
<h1>Syntax Highlighting</h1>
<p>Code is just pre tags with class="brush: <language>"</p>
<p>The eval class combined with the js brush makes that Execute link appear on the right</p>
<pre class="brush: js eval">
// in eval'd block, slide is the current slide
$(slide).css('background', '#533');
// and node is the code block
$(node).css('opacity', '.1');
</pre>
<p>Nifty feature for JS devs doing presentations</p>
<br />
<p>Also if you use alert() in your code, it's piped into those nicer boxes</p>
<pre class="brush: js eval">
alert('test');
</pre>
<p>This is really great to provide interaction during a presentation</p>
</div>
<div class="slide">
<h1>Syntax Highlighting</h1>
<pre class="brush: php">
function foo($var) {
// this is some php code as an example
$foo = new Class("meh");
$foo->bar();
}
</pre>
<p>That's it for now, enjoy!</p>
</div>
<div class="layout" name="default">
<content></content>
<div class="footer">
<span class="left">Jordi Boggiano</span>
<span class="right">Slippy on <a href="http://github.com/Seldaek/slippy/">github</a></span>
<span class="left">Blog <a href="http://seld.be/">seld.be</a></span>
<span class="right">Twitter <a href="http://twitter.com/seldaek">@seldaek</a></span>
<hr class="defloat" />
</div>
</div>
<div class="layout nochrome" name="alt">
<content></content>
</div>
</body>
</html>