0d9da9aad51cc73b3aa2eadc4dc006520bdce7c4
[slides.git] / sm-dev-mtg-2010 / index.html
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>