put up FOSDEM 2022 on main page
[slides.git] / de-community-2010 / index.html
CommitLineData
f305fb6d 1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <!--
6
7 ***************************************************
8 * *
9 * DZ-Slides: HTML Template for your presentations *
10 * *
11 ***************************************************
12 More information: http://paulrouget.com/dzslides
13
14
15 Author: @paulrouget <paul@mozilla.com>
16
17 Contributor(s):
18 - Anthony Ricaud <rik24d@gmail.com>
19 - Louis-Rémi Babé <lrbabe@gmail.com>
20
21
22 LICENSE:
23 DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
24 Version 2, December 2004
25
26 Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
27
28 Everyone is permitted to copy and distribute verbatim or modified
29 copies of this license document, and changing it is allowed as long
30 as the name is changed.
31
32 DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
33 TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
34
35 0. You just DO WHAT THE FUCK YOU WANT TO.
36
37
38 -->
39
40
41
42 <title>SeaMonkey 2.1 und DACH</title>
43
44 <!--
45 ************************************
46 * *
47 * CSS *
48 * *
49 ************************************
50 -->
51
52
53 <style>
54 /*
55 ************************************
56 * CSS CORE: *
57 * YOU DON'T WANT TO EDIT THIS *
58 * (but you can) *
59 ************************************
60 */
61
62 html { overflow: hidden; }
63 body, html { height: 100%; padding: 0px; }
64 body { margin: auto; position: relative; }
65 img, video { vertical-align: middle; }
66 /* FIXME : Mandatory for flex box model, Firefox bug */
67 /* See JS hack */
68 section > div { width: 100%; display: -moz-box; -moz-box-orient : vertical; -moz-box-pack : center; -moz-box-align : center; }
69 section > div { width: 100%; display: -webkit-box; -webkit-box-orient : vertical; -webkit-box-pack : center; -webkit-box-align : center; }
70 footer { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; position: absolute; bottom: 0; padding: 1em; width: 100%; }
71 .flex-wrapper { display: -moz-box; display: -webkit-box; -moz-box-orient: horizontal; -webkit-box-orient: horizontal; width: 100%; }
72 footer .flex-space { -moz-box-flex: 1; -webkit-box-flex: 1; }
73 section { -moz-transition-property: -moz-transform, opacity; -moz-transition-duration: 1s, 1s; pointer-events: none; display: block; width: 100%; margin: auto; position: absolute; padding: 0 10px; opacity: 0; -moz-box-sizing: border-box; }
74 section { -webkit-transition-property: -webkit-transform, opacity; -webkit-transition-duration: 1s, 1s; pointer-events: none; -webkit-box-sizing: border-box; }
75 section h1, section h2, section h3, section p { text-align: center; margin: .3em; margin: 0; padding: 0; }
76 section[aria-selected] { opacity: 1; pointer-events: auto; -moz-transition-delay: 1s, 1s; -webkit-transition-delay: 1s, 1s; }
77 pre { font-size: 35px; border-left: 6px solid white; padding-left: 10px; white-space: pre-wrap; /* css-3 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ line-height: 1.3em; }
78 a { color: white!important; text-decoration: none; }
79
80 /*
81 ************************************
82 * CSS OPTIONS: *
83 * YOU WANT TO EDIT THIS *
84 * *
85 ************************************
86 */
87
88 /* Want your own font? Use font-face */
89 @font-face {
90 /* Uncomment and add your own font file
91 font-family: fface;
92 src: url(myfont.ttf);
93 */
94 }
95
96 /* The backgrounds of all your slides */
97 body {
98 /* Could be an image, a color, a gradient */
99 background-image: -moz-radial-gradient( 50% 30% 90deg, circle, #000089 0%, #0582fe 600px);
100 background-image: -webkit-gradient(radial, 50% 30%, 0, 50% 30%, 600, from(#000089), to(#0582fe));
101 background-color: #000089;
102 }
103
104 /* This is the style of a slide */
105 section {
106 font-family:"Linux Libertine", Arial, sans-serif;
107 font-weight: bold;
108 font-size: 60px;
109 text-shadow: 0px -2px 0px #188bfe;
110 color: white;
111 /*
112 Your own font?
113 font-family: fface;
114 */
115 }
116
117 /* This part define the transitions between the slides
118 Here I propose 3 differents effect:
119 Default translation (classic "sliding" effect)
120 Rotation (a bit dizzy... "DZ"? You get it? \o/)
121 Nothing (just a fadein/fadeout)
122 With the CSS3 transformations, you can create your own.
123 */
124
125
126 /* Let me describe how the slides work:
127 A slide can be:
128 - the current slide
129 - A upcoming slide (from the "future")
130 - A slide already seen (from the "past")
131 With CSS, you describe where are those slide,
132 in the space. Then, a transition will animate
133 this.
134 */
135
136
137
138 /* "PAST" ******************************/
139 section {
140
141 /* The sliding effect
142 -moz-transform: translate(-100%, 0);
143 -webkit-transform: translate(-100%, 0); */
144
145 /* The rotating effect */
146 -moz-transform: scale(0.3) rotate(180deg);
147 -webkit-transform: scale(0.3) rotate(180deg);
148
149 /* The nothing effect */
150 /* Well, just comment out the rotating and sliding effect*/
151
152 }
153
154 /* The footer with the title + the current slide number */
155 #footer {
156 display: block;
157 color: white;
158 opacity: 0.5;
159
160 /*
161 display: none;
162 */
163 }
164
165
166 /* "PRESENT" ****************************/
167 /* Current slide */
168 section[aria-selected] {
169 -moz-transform: scale(1.0) translate(0, 0);
170 -webkit-transform: scale(1.0) translate(0, 0);
171 }
172
173 /* "FUTURE" *****************************/
174 /* Selector not yet supported by Webkit :( */
175 section[aria-selected] ~ section {
176
177 /* The sliding effect
178 -moz-transform: translate(100%, 0);
179 -webkit-transform: translate(100%, 0); */
180
181 /* The rotating effect */
182 -moz-transform: scale(5) rotate(-180deg);
183 -webkit-transform: scale(5) rotate(-180deg);
184
185 /* The nothing effect */
186 /* Well, just comment the rotating and sliding effect*/
187
188
189 }
190
191 </style>
192 </head>
193
194 <!--
195 ************************************
196 * *
197 * HTML: YOUR SLIDES *
198 * *
199 ************************************
200 -->
201
202 <section>
203 <h1>SeaMonkey 2.1 und DACH</h1>
204 <img src="seamonkey-with-font2-web_r.png" style="height: auto;max-width: 200px;-moz-box-flex:none;margin:auto;">
205 </section>
206
207 <section>
208 <h1>SM 2.1 - gleiche Basis wie FF 4.0</h1>
209 </section>
210
211 <section>
212 <h2>Plattform</h2>
213 <ul>
214 <li>CSS Transitions</li>
215 <li>WebSockets</li>
216 <li>...</li>
217 </ul>
218 </section>
219
220 <section data-onload="playVideo"
221 data-onunload="stopVideo">
222 <script>
223 // |section| referes to this section element
224 function playVideo(section) {
225 section.querySelector("video").play();
226 }
227 function stopVideo(section) {
228 section.querySelector("video").pause();
229 }
230 </script>
231 <h1>HTML5 Video</h1>
232 <video controls autobuffer preload src="http://demos.hacks.mozilla.org/openweb/LONDONPROJECT/fight.ogv"></video>
233 </section>
234
235 <section>
236 <h1>DACH-Region</h1>
237 <p>ca. 25% aller SeaMonkey-Benutzer</p>
238 </section>
239
240 <section>
241 <p>the end :)</p>
242 </section>
243
244
245 <script>
246
247 /*
248 ************************************
249 * *
250 * JAVASCRIPT *
251 * (You don't have to read this) *
252 ************************************
253 */
254
255 function init() {
256 var firstFrame = window.location.hash? parseInt(window.location.hash.split("#")[1], 10) : 1;
257 var title = document.querySelector("title").textContent;
258 var slides = document.querySelectorAll("body > section");
259 for (var i = 1, il = slides.length; i <= il; i++) {
260 // FIXME : Mandatory for flex box model for vertical align
261 // Firefox bug :(
262 slides[i - 1].innerHTML = "<div>" + slides[i - 1].innerHTML + "</div>";
263 window.history[(i == 1? 'replace' : 'push') + 'State'](i, title + " ("+ i +"/"+ il +")", "#"+i);
264 }
265
266 var footer = document.createElement("footer");
267 footer.id = "footer";
268 footer.innerHTML =
269 '<div class="flex-wrapper"><p>' + title + '</p>' +
270 '<p class="flex-space"></p>' +
271 '<p id="index"><span class="pagenumber"></span> / ' + il +'</p>';
272 document.body.appendChild(footer);
273 history.go(- slides.length + firstFrame);
274
275
276 window.addEventListener("popstate", function(e) {
277 if(e.state) {
278 var old = document.querySelector("section[aria-selected]");
279 var next = document.querySelector("section:nth-of-type("+ e.state +")");
280
281 if (old) {
282 old.removeAttribute("aria-selected");
283 if (old.hasAttribute("data-onunload")) {
284 window[old.getAttribute("data-onunload")].call(window, old);
285 }
286 }
287
288 if (next) {
289 next.setAttribute("aria-selected", "true");
290 if (next.hasAttribute("data-onload")) {
291 window[next.getAttribute("data-onload")].call(window, next);
292 }
293 }
294
295
296 var index = document.querySelector("#index .pagenumber");
297 index.innerHTML = e.state;
298 }
299 }, true);
300 }
301
302 function resize() {
303 var style = document.getElementById("resizeStyle");
304 if (!style) {
305 style = document.createElement("style");
306 style.id = "resizeStyle";
307 document.head.appendChild(style);
308 }
309 style.textContent = "body>section>div {height: "+ window.innerHeight +"px}";
310 }
311
312 window.addEventListener("resize", resize, true);
313 window.addEventListener("load", resize, true);
314 window.addEventListener("load", init, true);
315
316 // Webkit bug
317 // window.addEventListener("hashchange", init, true); // FIXME Webkit fires hashchange when it shouldn't
318 window.addEventListener("keydown", function(e) {
319 // Don't intercept keyboard shortcuts
320 if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
321 return;
322 }
323 if ( e.keyCode == 80 // p
324 || e.keyCode == 66 // b
325 || e.keyCode == 37 // left arrow
326 || e.keyCode == 33 // page up
327 ) {
328 e.preventDefault();
329 history.back();
330 }
331 if ( e.keyCode == 78 // n
332 || e.keyCode == 32 // space
333 || e.keyCode == 39 // right arrow
334 || e.keyCode == 34 // page down
335 ) {
336 e.preventDefault();
337 history.forward();
338 }
339 }, true);
340 </script>
341 </body>
342</html>