put up FOSDEM 2022 on main page
[slides.git] / sm-dev-mtg-2010 / index.html
... / ...
CommitLineData
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 Future</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, #4040AA 0%, #80CCFF 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: -2px 2px 5px #000089;
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: #000089;
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 Future</h1>
204 <img src="seamonkey-with-font2-web_r.png">
205 </section>
206
207 <section>
208 <h2>Your Thoughts</h2>
209 <ul>
210 <li>What do you like?</li>
211 <li>What differentiates us?</li>
212 <li>What do you want to see?</li>
213 </ul>
214 </section>
215
216 <section>
217 <h2>Thunderbird Future</h2>
218 <ul>
219 <li>Mostly unclear vision</li>
220 <li>More web integration</li>
221 </ul>
222 </section>
223
224 <section>
225 <h1>Firefox Present</h1>
226 <img src="firefox-present.png">
227 </section>
228
229 <section>
230 <h1>Firefox Future</h1>
231 <img src="firefox-future.png">
232 </section>
233
234 <section>
235 <h2>SeaMonkey Option 1</h2>
236 <ul>
237 <li>Split off into own organization</li>
238 <li>Mostly independent</li>
239 <li>Details on funding, infrascture, etc. still need to be defined</li>
240 <li>May enable very few full-time jobs</li>
241 </ul>
242 </section>
243
244 <section>
245 <h2>SeaMonkey Option 2</h2>
246 <ul>
247 <li>Obsolete separate product</li>
248 <li>Integrate into Firefox community</li>
249 <li>Provide extended features as add-on collection</li>
250 <li>Possibly Firefox distribution</li>
251 </ul>
252 </section>
253
254 <section>
255 <h2>SeaMonkey Option 3</h2>
256 <ul>
257 <li>Predefined budget within Mozilla for limited time</li>
258 <li>No/unclear long-term perspective</li>
259 <li>No improvements on work force</li>
260 </ul>
261 </section>
262
263 <section>
264 <h2>Think About It!</h2>
265 <ul>
266 <li>No decision made yet</li>
267 <li>All options will be discussed further</li>
268 <li>Pros and cons exist for all of them</li>
269 <li>Keep long-term possibilities in mind</li>
270 </ul>
271 </section>
272
273
274 <script>
275
276 /*
277 ************************************
278 * *
279 * JAVASCRIPT *
280 * (You don't have to read this) *
281 ************************************
282 */
283
284 function init() {
285 var firstFrame = window.location.hash? parseInt(window.location.hash.split("#")[1], 10) : 1;
286 var title = document.querySelector("title").textContent;
287 var slides = document.querySelectorAll("body > section");
288 for (var i = 1, il = slides.length; i <= il; i++) {
289 // FIXME : Mandatory for flex box model for vertical align
290 // Firefox bug :(
291 slides[i - 1].innerHTML = "<div>" + slides[i - 1].innerHTML + "</div>";
292 window.history[(i == 1? 'replace' : 'push') + 'State'](i, title + " ("+ i +"/"+ il +")", "#"+i);
293 }
294
295 var footer = document.createElement("footer");
296 footer.id = "footer";
297 footer.innerHTML =
298 '<div class="flex-wrapper"><p>' + title + '</p>' +
299 '<p class="flex-space"></p>' +
300 '<p id="index"><span class="pagenumber"></span> / ' + il +'</p>';
301 document.body.appendChild(footer);
302 history.go(- slides.length + firstFrame);
303
304
305 window.addEventListener("popstate", function(e) {
306 if(e.state) {
307 var old = document.querySelector("section[aria-selected]");
308 var next = document.querySelector("section:nth-of-type("+ e.state +")");
309
310 if (old) {
311 old.removeAttribute("aria-selected");
312 if (old.hasAttribute("data-onunload")) {
313 window[old.getAttribute("data-onunload")].call(window, old);
314 }
315 }
316
317 if (next) {
318 next.setAttribute("aria-selected", "true");
319 if (next.hasAttribute("data-onload")) {
320 window[next.getAttribute("data-onload")].call(window, next);
321 }
322 }
323
324
325 var index = document.querySelector("#index .pagenumber");
326 index.innerHTML = e.state;
327 }
328 }, true);
329 }
330
331 function resize() {
332 var style = document.getElementById("resizeStyle");
333 if (!style) {
334 style = document.createElement("style");
335 style.id = "resizeStyle";
336 document.head.appendChild(style);
337 }
338 style.textContent = "body>section>div {height: "+ window.innerHeight +"px}";
339 }
340
341 window.addEventListener("resize", resize, true);
342 window.addEventListener("load", resize, true);
343 window.addEventListener("load", init, true);
344
345 // Webkit bug
346 // window.addEventListener("hashchange", init, true); // FIXME Webkit fires hashchange when it shouldn't
347 window.addEventListener("keydown", function(e) {
348 // Don't intercept keyboard shortcuts
349 if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
350 return;
351 }
352 if ( e.keyCode == 80 // p
353 || e.keyCode == 66 // b
354 || e.keyCode == 37 // left arrow
355 || e.keyCode == 33 // page up
356 ) {
357 e.preventDefault();
358 history.back();
359 }
360 if ( e.keyCode == 78 // n
361 || e.keyCode == 32 // space
362 || e.keyCode == 39 // right arrow
363 || e.keyCode == 34 // page down
364 ) {
365 e.preventDefault();
366 history.forward();
367 }
368 }, true);
369 </script>
370 </body>
371</html>