de-community-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 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>