[slides.git] / de-community-2010 / index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!--

    ***************************************************
    *                                                 *
    * DZ-Slides: HTML Template for your presentations *
    *                                                 *
    ***************************************************
      More information: http://paulrouget.com/dzslides


    Author: @paulrouget <paul@mozilla.com>

    Contributor(s):
      - Anthony Ricaud <rik24d@gmail.com>
      - Louis-Rémi Babé <lrbabe@gmail.com>


    LICENSE:
      DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
      Version 2, December 2004

      Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>

      Everyone is permitted to copy and distribute verbatim or modified
      copies of this license document, and changing it is allowed as long
      as the name is changed.

      DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
      TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

      0. You just DO WHAT THE FUCK YOU WANT TO.


    -->


    <title>SeaMonkey 2.1 und DACH</title>

        <!--
        ************************************
        *                                  *
        *               CSS                *
        *                                  *
        ************************************
        -->


      <style>
        /*
        ************************************
        *    CSS CORE:                     *
        *    YOU DON'T WANT TO EDIT THIS   *
        *    (but you can)                 *
        ************************************
        */

        html { overflow: hidden; }
        body, html { height: 100%; padding: 0px; }
        body { margin: auto; position: relative; }
        img, video { vertical-align: middle; }
        /* FIXME : Mandatory for flex box model, Firefox bug */
        /* See JS hack */
        section > div { width: 100%; display: -moz-box; -moz-box-orient : vertical; -moz-box-pack : center; -moz-box-align : center; }
        section > div { width: 100%; display: -webkit-box; -webkit-box-orient : vertical; -webkit-box-pack : center; -webkit-box-align : center; }
        footer { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; position: absolute; bottom: 0; padding: 1em; width: 100%; }
        .flex-wrapper { display: -moz-box; display: -webkit-box; -moz-box-orient: horizontal; -webkit-box-orient: horizontal; width: 100%; }
        footer .flex-space { -moz-box-flex: 1; -webkit-box-flex: 1; }
        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; }
        section { -webkit-transition-property: -webkit-transform, opacity; -webkit-transition-duration: 1s, 1s; pointer-events: none; -webkit-box-sizing: border-box; }
        section h1, section h2, section h3, section p { text-align: center; margin: .3em; margin: 0; padding: 0; }
        section[aria-selected] { opacity: 1; pointer-events: auto; -moz-transition-delay: 1s, 1s; -webkit-transition-delay: 1s, 1s; }
        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; } 
        a { color: white!important; text-decoration: none; }

        /*
        ************************************
        *    CSS OPTIONS:                  *
        *    YOU WANT TO EDIT THIS         *
        *                                  *
        ************************************
        */

        /* Want your own font? Use font-face */
        @font-face  {
          /* Uncomment and add your own font file
          font-family: fface;
          src: url(myfont.ttf);
          */
        }

        /* The backgrounds of all your slides */
        body {
          /* Could be an image, a color, a gradient */
          background-image: -moz-radial-gradient( 50% 30% 90deg, circle, #000089 0%, #0582fe 600px);
          background-image: -webkit-gradient(radial, 50% 30%, 0, 50% 30%, 600, from(#000089), to(#0582fe));
          background-color: #000089;
        }

        /* This is the style of a slide */
        section {
          font-family:"Linux Libertine", Arial, sans-serif;
          font-weight: bold;
          font-size: 60px;
          text-shadow: 0px -2px 0px #188bfe;
          color: white;
          /*
          Your own font?
          font-family: fface;
          */
        }

        /* This part define the transitions between the slides
           Here I propose 3 differents effect:
             Default translation (classic "sliding" effect)
             Rotation (a bit dizzy... "DZ"? You get it? \o/)
             Nothing (just a fadein/fadeout)
           With the CSS3 transformations, you can create your own.
         */


        /* Let me describe how the slides work:
           A slide can be:
           - the current slide
           - A upcoming slide (from the "future")
           - A slide already seen (from the "past")
           With CSS, you describe where are those slide,
           in the space. Then, a transition will animate
           this.
        */


        /* "PAST" ******************************/
        section {

          /* The sliding effect
          -moz-transform: translate(-100%, 0);
          -webkit-transform: translate(-100%, 0); */

          /* The rotating effect */
          -moz-transform: scale(0.3) rotate(180deg);
          -webkit-transform: scale(0.3) rotate(180deg);

          /* The nothing effect */
          /* Well, just comment out the rotating and sliding effect*/

        }

        /* The footer with the title + the current slide number */
        #footer {
          display: block;
          color: white;
          opacity: 0.5;

          /*
          display: none;
          */
        }


        /* "PRESENT" ****************************/
        /* Current slide */
        section[aria-selected] {
          -moz-transform: scale(1.0) translate(0, 0);
          -webkit-transform: scale(1.0) translate(0, 0);
        }

        /* "FUTURE" *****************************/
        /* Selector not yet supported by Webkit :( */
        section[aria-selected] ~ section {

          /* The sliding effect
          -moz-transform: translate(100%, 0);
          -webkit-transform: translate(100%, 0); */

          /* The rotating effect */
          -moz-transform: scale(5) rotate(-180deg);
          -webkit-transform: scale(5) rotate(-180deg);

          /* The nothing effect */
          /* Well, just comment the rotating and sliding effect*/


        }

      </style>
    </head>

        <!--
        ************************************
        *                                  *
        *        HTML: YOUR SLIDES         *
        *                                  *
        ************************************
        -->

      <section>
        <h1>SeaMonkey 2.1 und DACH</h1>
        <img src="seamonkey-with-font2-web_r.png" style="height: auto;max-width: 200px;-moz-box-flex:none;margin:auto;">
      </section>

      <section>
        <h1>SM 2.1 - gleiche Basis wie FF 4.0</h1>
      </section>

      <section>
        <h2>Plattform</h2>
        <ul>
          <li>CSS Transitions</li>
          <li>WebSockets</li>
          <li>...</li>
        </ul>
      </section>

      <section data-onload="playVideo"
               data-onunload="stopVideo">
        <script>
          // |section| referes to this section element
          function playVideo(section) {
            section.querySelector("video").play();
          }
          function stopVideo(section) {
            section.querySelector("video").pause();
          }
        </script>
        <h1>HTML5 Video</h1>
        <video controls autobuffer preload src="http://demos.hacks.mozilla.org/openweb/LONDONPROJECT/fight.ogv"></video>
      </section>

      <section>
        <h1>DACH-Region</h1>
        <p>ca. 25% aller SeaMonkey-Benutzer</p>
      </section>

      <section>
        <p>the end :)</p>
      </section>


    <script>

      /*
      ************************************
      *                                  *
      *            JAVASCRIPT            *
      *  (You don't have to read this)   *
      ************************************
      */

      function init() {
        var firstFrame = window.location.hash? parseInt(window.location.hash.split("#")[1], 10) : 1;
        var title = document.querySelector("title").textContent;
        var slides = document.querySelectorAll("body > section");
        for (var i = 1, il = slides.length; i <= il; i++) {
          // FIXME : Mandatory for flex box model for vertical align
          // Firefox bug :(
          slides[i - 1].innerHTML = "<div>" + slides[i - 1].innerHTML + "</div>";
          window.history[(i == 1? 'replace' : 'push') + 'State'](i, title + " ("+ i +"/"+ il +")", "#"+i);
        }

        var footer = document.createElement("footer");
        footer.id = "footer";
        footer.innerHTML = 
          '<div class="flex-wrapper"><p>' + title + '</p>' +
          '<p class="flex-space"></p>' + 
          '<p id="index"><span class="pagenumber"></span> / ' + il +'</p>';
        document.body.appendChild(footer);
        history.go(- slides.length + firstFrame);


        window.addEventListener("popstate", function(e) {
          if(e.state) {
            var old = document.querySelector("section[aria-selected]");
            var next = document.querySelector("section:nth-of-type("+ e.state +")");

            if (old) {
              old.removeAttribute("aria-selected");
              if (old.hasAttribute("data-onunload")) {
                window[old.getAttribute("data-onunload")].call(window, old);
              }
            }

            if (next) {
              next.setAttribute("aria-selected", "true");
              if (next.hasAttribute("data-onload")) {
                window[next.getAttribute("data-onload")].call(window, next);
              }
            }


            var index = document.querySelector("#index .pagenumber");
            index.innerHTML = e.state;
          }
        }, true); 
      }

      function resize() {
        var style = document.getElementById("resizeStyle");
        if (!style) {
          style = document.createElement("style");
          style.id = "resizeStyle";
          document.head.appendChild(style);
        }
        style.textContent = "body>section>div {height: "+ window.innerHeight +"px}";
      }

      window.addEventListener("resize", resize, true);
      window.addEventListener("load", resize, true);
      window.addEventListener("load", init, true);

      // Webkit bug
      // window.addEventListener("hashchange", init, true); // FIXME Webkit fires hashchange when it shouldn't
      window.addEventListener("keydown", function(e) {
        // Don't intercept keyboard shortcuts
        if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
          return;
        }
        if (   e.keyCode == 80 // p
            || e.keyCode == 66 // b
            || e.keyCode == 37 // left arrow
            || e.keyCode == 33 // page up
        ) {
          e.preventDefault();
          history.back();
        }
        if (   e.keyCode == 78 // n
            || e.keyCode == 32 // space
            || e.keyCode == 39 // right arrow
            || e.keyCode == 34 // page down
        ) {
          e.preventDefault();
          history.forward();
        }
      }, true);
    </script>
  </body>
</html>
Commit	Line	Data
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>