--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <meta name="Author" content="KaiRo - Robert Kaiser">
+ <title>MaKey MaKey - "Tastatur"-Kreativität</title>
+ <link rel="stylesheet" type="text/css" href="slides.css">
+ <script type="text/javascript" src="slides.js"></script>
+ <link rel="contents" href="#index" title="Overview">
+ <link rel="index" id="link-toc" href="#toc" title="Inhalt">
+ <link rel="start" id="link-start" href="#index" title="Start">
+</head>
+<body onload="docLoaded();">
+<header id="header"><div id="header-text">MaKey MaKey</div>
+ <div id="subheader-text"></div>
+ <a id="headerlogo" href="#index" title="Startseite">KaiRo.at</a>
+</header>
+<nav id="slidenav">
+ <a href="#toc" id="nav-toc" accesskey="t">Inhalt</a> ||
+ <a href="#index" id="nav-start" accesskey="s">Start</a> ||
+ <a href="#" id="nav-prev" accesskey="p" hidden>< zurück</a>
+ <span id="nav-prev-nolink" class="nolink">< zurück</span> |
+ <a href="#" id="nav-next" id="goNext" accesskey="n" hidden>weiter ></a>
+ <span id="nav-next-nolink" class="nolink">weiter ></span>
+</nav>
+
+<article id="toc" title="Inhalt">
+<h1>Inhalt</h1>
+<h2>MaKey MaKey - "Tastatur"-Kreativität</h2>
+
+<div class="captionedbox">
+<p class="captionedbox-caption">Folgende Folien sind in dieser Präsentation enthalten:</p>
+<div class="captionedbox-content">
+<ul id="toc-list">
+</ul>
+</article>
+
+<article id="index" title="Startseite">
+<h1>MaKey MaKey - "Tastatur"-Kreativität</h1>
+<h2>Ein Erfindungs-Bausatz für Jedermann</h2>
+
+<div class="simplebox">
+<mark><a href="http://home.kairo.at/">Robert Kaiser</a></mark>,
+"KaiRo" <kairo@kairo.at>
+<br><small>Mozilla-Stabilitäts-Manager</small>
+</div>
+
+<div class="captionedbox">
+<p class="captionedbox-caption">Folien:
+ <a href="http://slides.kairo.at/linuxwochen2013-makey/">http://slides.kairo.at/linuxwochen2013-makey/</a></p>
+<div class="captionedbox-content small">
+<ul class="small">
+ <li>Erstellt für
+ <a href="https://cfp.linuxwochen.at/de/lww2013/public/events/22">Vortrag</a>
+ auf den <a href="http://www.linuxwochen.at/">Linuxwochen 2013</a> in Wien.</li>
+ <li>Geschrieben in HTML 5 mit CSS 3 und JavaScript.</li>
+ <li>Navigation mit Links auf allen Folien, mit Accesskeys
+ (e.g. "n"/Alt+Shift+N für "next"/weiter) oder vor/zurück-Pfeilasten</li>
+ <li><a href="#toc">Inhalt</a></li>
+ <li><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/at/"><img
+ alt="Lizenziert unter CC-BY-SA," style="border-width:0;vertical-align:bottom;"
+ src="cc-by-sa-80x15.png"></a> 04/2013 Robert Kaiser</li>
+</ul>
+</div>
+</div>
+</article>
+
+<article id="makeymakey" title="MaKey MaKey">
+<h1>Was ist "MaKey MaKey"?</h1>
+
+<div class="simplebox">
+<ul>
+ <li>Entwicklung von 2 MIT-Studenten</li>
+ <li></li>
+ <li></li>
+</ul>
+</div>
+</article>
+
+<article id="demo" title="Demo">
+<h1>Demo</h1>
+
+<div class="simplebox">
+<ul>
+ <li>Piano: <a href="http://piano.kairo.at/">piano.kairo.at</a></li>
+ <li>Fotoautomat: <a href="https://github.com/codepo8/interaction-cam">github.com/codepo8/interaction-cam</a></li>
+ <li>Lantea Maps: <a href="http://lantea.kairo.at/">lantea.kairo.at</a></li>
+ <li>BananaBread: <a href="https://developer.mozilla.org/en-US/demos/detail/bananabread">mzl.la/O6LKMP</a></li>
+</ul>
+</div>
+</article>
+
+</body>
+</html>
--- /dev/null
+/**************************
+ * styles for talk slides *
+ * by Robert Kaiser *
+ * <kairo@kairo.at> *
+ * (for Linuxwochen 2013) *
+ **************************/
+
+
+/***** base style *****/
+
+@font-face {
+ font-family: 'Liberation Sans';
+ src: url('template/LiberationSans-Regular-webfont.woff') format('woff');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Liberation Sans';
+ src: url('template/LiberationSans-Italic-webfont.woff') format('woff');
+ font-weight: normal;
+ font-style: italic;
+}
+
+@font-face {
+ font-family: 'Liberation Sans';
+ src: url('template/LiberationSans-Bold-webfont.woff') format('woff');
+ font-weight: bold;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Liberation Sans';
+ src: url('template/LiberationSans-BoldItalic-webfont.woff') format('woff');
+ font-weight: bold;
+ font-style: italic;
+}
+
+html {
+ overflow: hidden; /* to make translations not paint scrollbars */
+ background: #FFFFEE;
+ height: 100%;
+}
+
+body {
+ margin: 0px;
+ padding: 0px;
+ border: 0px;
+ font-family: "Liberation Sans", sans-serif;
+ font-size: 2em;
+ color: #336699;
+ background: url("template/page-background-top.png") top left repeat-x;
+ height: 100%;
+}
+
+ul {
+ padding-left: 1.2em;
+ margin-bottom: 0.5em;
+}
+
+ul:first-child,
+ul:last-child {
+ margin-top: 0;
+}
+
+#header {
+ height: 40px;
+ position: relative;
+ border-top: 1px solid white;
+}
+
+#headerlogo {
+ position: absolute;
+ display: block;
+ right: 25px;
+ top: 3px;
+ text-indent: -2000px;
+ font-size: 1px;
+ overflow: hidden;
+ height: 37px;
+ width: 60px;
+ background: url("template/kairologo60.png") no-repeat;
+}
+
+#header-text {
+ position: relative;
+ top: 5px;
+ left: 25px;
+ font-size: 20px;
+ font-weight: bold;
+ color: #336699;
+}
+
+#header-text.neartime {
+ color: #80AACC;
+}
+
+#header-text.ontime {
+ color: #80CC80;
+}
+
+#header-text.overtime {
+ color: #FF8080;
+}
+
+#subheader-text {
+ color: #336699;
+ position: relative;
+ top: 3px;
+ left: 25px;
+ font-size: 10px;
+}
+
+#slidenav {
+ position: absolute;
+ right: 110px;
+ top: 15px;
+ font-size: 10px;
+}
+
+#slidenav a:link,
+#slidenav a:visited {
+ color: #669999;
+}
+
+#slidenav a:hover,
+#slidenav a:active {
+ color: #88BBBB;
+}
+
+#slidenav .nolink {
+ color: #A0A0A0;
+}
+
+article {
+ position: absolute;
+ width: 100%;
+ /* header is 40px, 7px to have a bit of distance,
+ * 3px height-reducing on the bottom for safety */
+ top: 47px;
+ height: calc(100% - 50px);
+ overflow: auto;
+
+ transition-property: transform, opacity;
+ transition-duration: 3s;
+ transition-timing-function: ease;
+ transform-origin: center 5em;
+
+ opacity: 0;
+/*
+ transform: translate(-100%, 0);
+*/
+/*
+ transform: scale(0.1) rotate(360deg);
+*/
+ transform: scale(0.1) rotate(360deg) translate(-200%, 0);
+}
+
+article[aria-selected="true"] {
+ opacity: 1;
+ transform: scale(1) rotate(0deg) translate(0, 0);
+}
+
+article[aria-selected="true"] ~ article {
+ opacity: 0;
+/*
+ transform: translate(100%, 0);
+*/
+/*
+ transform: scale(0.1) rotate(-360deg);
+*/
+ transform: scale(0.1) rotate(-360deg) translate(200%, 0);
+}
+
+/***** headers *****/
+
+h1, h2, h3, h4 {
+ margin: 0.5em 0;
+ font-weight: bold;
+ color: #336699;
+ text-align: center;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: 1.7em;
+ text-shadow: #AAAA80 3px 3px 5px;
+}
+
+h2 {
+ font-size: 1.3em;
+ text-shadow: #AAAA80 2px 2px 3px;
+}
+
+h3 {
+ font-size: 1.1em;
+}
+
+h4 {
+ font-size: 1em;
+ text-align: left;
+}
+
+/***** boxes *****/
+
+.simplebox {
+ padding: 0.5em;
+}
+
+.captionedbox {
+ padding: 0px;
+}
+
+.simplebox,
+.captionedbox {
+ margin: 1em;
+ box-shadow: 0 0 0 1px #fff inset;
+ background: #fff;
+ background-image: radial-gradient(center 45px, ellipse farthest-corner, #FFFFEE 0, #fff 100%);
+ border: 1px solid #336699;
+ border-radius: .5em;
+ box-shadow: #AAAA80 1px 1px 3px 2px;
+}
+
+.captionedbox-content {
+ margin: 0;
+ padding: 0.5em;
+ border: 0px;
+ border-top: 1px solid #89AACC;
+ border-radius: 0 0 .5em .5em;
+}
+
+.captionedbox-caption {
+ margin: 0;
+ padding: 0.5em;
+ font-weight: bold;
+ text-shadow: #AAAA80 1px 1px 2px;
+}
+
+/***** misc formatting *****/
+
+mark {
+ font-weight: bold;
+ color: #FF6600;
+ background-color: transparent;
+ text-shadow: #AAAA80 2px 2px 3px;
+}
+
+.border {
+ border: 1px solid #336699;
+ padding: 0.5em;
+}
+
+.sshot {
+ box-shadow: #6d7581 1px 1px 3px 2px;
+}
+
+ul > li {
+ margin: 0.5em 0;
+}
+
+.cent {
+ text-align: center;
+}
+
+.topmargin {
+ margin-top: 0.5em;
+}
+
+.akey {
+ text-decoration: underline;
+}
+
+a:link, a:visited { color: #669999; text-decoration: none; }
+a:hover, a:active { color: #88BBBB; text-decoration: underline; }
+
+mark a:link, mark a:visited { color: #FF6600; }
+mark a:hover, mark a:active { color: #FF6600; }
+
+/***** small stuff *****/
+
+.small,
+.small {
+ font-size: 0.75em;
+}
+
+ul.small,
+.small ul {
+ padding: 0px;
+ border: 0px;
+ margin: 0px 0px 0px 1em;
+}
+
+ul.small > li
+.small ul > li {
+ margin: 0px;
+ padding: 0px;
+ border: 0px;
+}
+
+/***** specific slides *****/
+
--- /dev/null
+/******************************
+ * JavaScript for talk slides *
+ * by Robert Kaiser *
+ * <kairo@kairo.at> *
+ * (for FOSDEM 2011) *
+ ******************************/
+
+var slides = {};
+var articleNodes;
+var currentSlide;
+var currentIdx;
+var defaultIdx = 1; // set to slide index to show by default
+var firstIdx = 2; // set no value if to use first available
+var lastIdx; // set no value if to use first available
+
+var pageTitle, headerText, subHeaderText;
+var navPrev, navNext, navPrevNolink, navNextNolink;
+
+// Slide timer - color variation of headerText
+var slideSeconds = 3 * 60;
+
+// Called when the document has been loaded.
+function docLoaded() {
+ pageTitle = document.getElementsByTagName("title")[0];
+ headerText = document.getElementById("header-text");
+ subHeaderText = document.getElementById("subheader-text");
+ navPrev = document.getElementById("nav-prev");
+ navNext = document.getElementById("nav-next");
+ navPrevNolink = document.getElementById("nav-prev-nolink");
+ navNextNolink = document.getElementById("nav-next-nolink");
+ articleNodes = document.getElementsByTagName("article");
+
+ if (!firstIdx)
+ firstIdx = 0;
+ if (!lastIdx)
+ lastIdx = articleNodes.length - 1;
+
+ // Get a list of all slides (articles).
+ subHeaderText.textContent = articleNodes.length + " slides...";
+ for (var i = 0; i < articleNodes.length; ++i) {
+ subHeaderText.textContent = "Indexing slide " + i + " / " + articleNodes.length;
+ if (!articleNodes[i].id)
+ articleNodes[i].id = "slide_" + i;
+
+ slides[articleNodes[i].id] =
+ {"idx": i,
+ "name": articleNodes[i].id,
+ "title": articleNodes[i].title ? articleNodes[i].title : articleNodes[i].id,
+ "obj": articleNodes[i]};
+
+ if (location.hash.length &&
+ (location.hash == "#" + articleNodes[i].id || location.hash == "#" + i)) {
+ articleNodes[i].setAttribute("aria-selected", "true");
+ currentSlide = slides[articleNodes[i].id];
+ currentIdx = i;
+ }
+ }
+
+ if (!currentSlide) {
+ currentIdx = defaultIdx;
+ currentSlide = slides[articleNodes[currentIdx].id];
+ currentSlide.obj.setAttribute("aria-selected", "true");
+ location.hash = "#" + currentSlide.name;
+ }
+ updateDisplay();
+}
+
+// Called when the hash part of the location changes.
+function locationHashChanged() {
+ if (location.hash.length > 1) {
+ var hashtag = location.hash.substring(1);
+ // If not a number, treat as ID
+ if (isNaN(hashtag) && slides[hashtag]) {
+ currentSlide.obj.removeAttribute("aria-selected");
+ currentSlide = slides[hashtag];
+ currentIdx = currentSlide.idx;
+ currentSlide.obj.setAttribute("aria-selected", "true");
+ updateDisplay();
+ }
+ else if (articleNodes[hashtag]) {
+ currentSlide.obj.removeAttribute("aria-selected");
+ currentIdx = hashtag;
+ currentSlide = slides[articleNodes[currentIdx].id];
+ currentSlide.obj.setAttribute("aria-selected", "true");
+ updateDisplay();
+ }
+ }
+}
+window.onhashchange = locationHashChanged;
+
+// Update the display after we updated what slide is shown.
+function updateDisplay() {
+ if (currentIdx >= firstIdx && currentIdx <= lastIdx &&
+ currentSlide.name != "toc")
+ subHeaderText.textContent = (currentIdx - firstIdx + 1) + "/" +
+ (lastIdx - firstIdx + 1) + " - " +
+ currentSlide.title;
+ else
+ subHeaderText.textContent = currentSlide.title;
+ pageTitle.textContent = headerText.textContent + ": " + currentSlide.title;
+ if (currentIdx > firstIdx && currentSlide.name != "toc") {
+ navPrev.hidden = false;
+ navPrev.href = "#" + articleNodes[currentIdx - 1].id;
+ navPrevNolink.hidden = true;
+ }
+ else {
+ navPrev.hidden = true;
+ navPrevNolink.hidden = false;
+ }
+ if (currentIdx < lastIdx && currentSlide.name != "toc") {
+ navNext.hidden = false;
+ navNext.href = "#" + articleNodes[currentIdx + 1].id;
+ navNextNolink.hidden = true;
+ }
+ else {
+ navNext.hidden = true;
+ navNextNolink.hidden = false;
+ }
+ headerText.className = "";
+ slideStart = new Date();
+ if (currentSlide.name == "toc")
+ createTOC();
+ else
+ setTimeout("timerFired()", timerMSec);
+}
+
+// Create TOC list.
+function createTOC() {
+ var list = document.getElementById("toc-list");
+ if (!list.getElementsByTagName("li").length) {
+ for (var slide in slides) {
+ if (slide != "toc") {
+ var item = document.createElement("li");
+ var link = document.createElement("a");
+ var slideHeaders = slides[slide].obj.getElementsByTagName("h1");
+ if (slideHeaders.length)
+ link.textContent = slideHeaders[0].textContent;
+ else
+ link.textContent = slides[slide].title;
+ link.href = "#" + slides[slide].name;
+ item.appendChild(link);
+ list.appendChild(item);
+ }
+ }
+ }
+}
+
+// Do timed color variation on slides.
+function timerFired() {
+ var slideCurrent = new Date();
+ var secondsDiff = Math.round((slideCurrent.getTime() - slideStart.getTime()) / 1000);
+ if (secondsDiff >= slideSeconds) {
+ headerText.className = "overtime";
+ }
+ else if (secondsDiff >= Math.round(2 * slideSeconds / 3)) {
+ headerText.className = "ontime";
+ setTimeout("timerFired()", timerMSec);
+ }
+ else if (secondsDiff >= Math.round(slideSeconds / 3)) {
+ headerText.className = "neartime";
+ setTimeout("timerFired()", timerMSec);
+ }
+ else {
+ // We should never come here, but if we do, go into a 100ms loop until we get over the upcoming step.
+ setTimeout("timerFired()", 100);
+ }
+}
+var slideStart = new Date();
+var timerMSec = 1000 * (slideSeconds / 3);
+setTimeout("timerFired()", timerMSec);
+
+// Keyboard/click nav functionality, mostly inherited from FOSDEM 2007.
+(function() {
+ function go(where) {
+ where = where || "next";
+ var navElem = document.getElementById("nav-" + where);
+ if (!navElem.hidden)
+ window.location.href = navElem.href;
+ }
+
+ function handleClick(e) {
+ e = e || event;
+ var target = (window.event) ? e.srcElement : e.target;
+ if (e.which == 1 && target.nodeName != "A" && target.nodeName != "VIDEO")
+ go("next");
+ }
+
+ function handleKeyPress(e) {
+ e = e || event;
+ switch (e.keyCode) {
+ case e.DOM_VK_LEFT:
+ go("prev"); break;
+ case e.DOM_VK_RIGHT:
+ go("next"); break;
+ }
+ }
+
+ window.onclick = handleClick;
+ window.onkeypress = handleKeyPress;
+})();
--- /dev/null
+LICENSE AGREEMENT AND LIMITED PRODUCT WARRANTY LIBERATION FONT SOFTWARE
+This agreement governs the use of the Software and any updates to the
+Software, regardless of the delivery mechanism. Subject to the following
+terms, Red Hat, Inc. ("Red Hat") grants to the user ("Client") a license to
+this collective work pursuant to the GNU General Public License v.2 with the
+exceptions set forth below and such other terms as our set forth in this End
+User License Agreement.
+1. The Software and License Exception. LIBERATION font software (the
+"Software") consists of TrueType-OpenType formatted font software for
+rendering LIBERATION typefaces in sans serif, serif, and monospaced character
+styles. You are licensed to use, modify, copy, and distribute the Software
+pursuant to the GNU General Public License v.2 with the following exceptions:
+1) As a special exception, if you create a document which uses this font, and
+embed this font or unaltered portions of this font into the document, this
+font does not by itself cause the resulting document to be covered by the GNU
+General Public License. This exception does not however invalidate any other
+reasons why the document might be covered by the GNU General Public License.
+If you modify this font, you may extend this exception to your version of the
+font, but you are not obligated to do so. If you do not wish to do so, delete
+this exception statement from your version.
+
+2) As a further exception, any distribution of the object code of the Software
+in a physical product must provide you the right to access and modify the
+source code for the Software and to reinstall that modified version of the
+Software in object code form on the same physical product on which you
+received it.
+2. Intellectual Property Rights. The Software and each of its components,
+including the source code, documentation, appearance, structure and
+organization are owned by Red Hat and others and are protected under copyright
+and other laws. Title to the Software and any component, or to any copy,
+modification, or merged portion shall remain with the aforementioned, subject
+to the applicable license. The "LIBERATION" trademark is a trademark of Red
+Hat, Inc. in the U.S. and other countries. This agreement does not permit
+Client to distribute modified versions of the Software using Red Hat's
+trademarks. If Client makes a redistribution of a modified version of the
+Software, then Client must modify the files names to remove any reference to
+the Red Hat trademarks and must not use the Red Hat trademarks in any way to
+reference or promote the modified Software.
+3. Limited Warranty. To the maximum extent permitted under applicable law, the
+Software is provided and licensed "as is" without warranty of any kind,
+expressed or implied, including the implied warranties of merchantability,
+non-infringement or fitness for a particular purpose. Red Hat does not warrant
+that the functions contained in the Software will meet Client's requirements
+or that the operation of the Software will be entirely error free or appear
+precisely as described in the accompanying documentation.
+4. Limitation of Remedies and Liability. To the maximum extent permitted by
+applicable law, Red Hat or any Red Hat authorized dealer will not be liable to
+Client for any incidental or consequential damages, including lost profits or
+lost savings arising out of the use or inability to use the Software, even if
+Red Hat or such dealer has been advised of the possibility of such damages.
+5. Export Control. As required by U.S. law, Client represents and warrants
+that it: (a) understands that the Software is subject to export controls under
+the U.S. Commerce Department's Export Administration Regulations ("EAR"); (b)
+is not located in a prohibited destination country under the EAR or U.S.
+sanctions regulations (currently Cuba, Iran, Iraq, Libya, North Korea, Sudan
+and Syria); (c) will not export, re-export, or transfer the Software to any
+prohibited destination, entity, or individual without the necessary export
+license(s) or authorizations(s) from the U.S. Government; (d) will not use or
+transfer the Software for use in any sensitive nuclear, chemical or biological
+weapons, or missile technology end-uses unless authorized by the U.S.
+Government by regulation or specific license; (e) understands and agrees that
+if it is in the United States and exports or transfers the Software to
+eligible end users, it will, as required by EAR Section 740.17(e), submit
+semi-annual reports to the Commerce Department's Bureau of Industry & Security
+(BIS), which include the name and address (including country) of each
+transferee; and (f) understands that countries other than the United States
+may restrict the import, use, or export of encryption products and that it
+shall be solely responsible for compliance with any such import, use, or
+export restrictions.
+6. General. If any provision of this agreement is held to be unenforceable,
+that shall not affect the enforceability of the remaining provisions. This
+agreement shall be governed by the laws of the State of North Carolina and of
+the United States, without regard to any conflict of laws provisions, except
+that the United Nations Convention on the International Sale of Goods shall
+not apply.
+Copyright © 2007 Red Hat, Inc. All rights reserved. LIBERATION is a trademark
+of Red Hat, Inc.
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <meta name="Author" content="KaiRo - Robert Kaiser">
+ <title>Mozilla - Das Web ist die Plattform</title>
+ <link rel="stylesheet" type="text/css" href="slides.css">
+ <script type="text/javascript" src="slides.js"></script>
+ <link rel="contents" href="#index" title="Overview">
+ <link rel="index" id="link-toc" href="#toc" title="Inhalt">
+ <link rel="start" id="link-start" href="#index" title="Start">
+</head>
+<body onload="docLoaded();">
+<header id="header"><div id="header-text">Aktuelle Entwicklungen</div>
+ <div id="subheader-text"></div>
+ <a id="headerlogo" href="#index" title="Startseite">Mozilla</a>
+</header>
+<nav id="slidenav">
+ <a href="#toc" id="nav-toc" accesskey="t">Inhalt</a> ||
+ <a href="#index" id="nav-start" accesskey="s">Start</a> ||
+ <a href="#" id="nav-prev" accesskey="p" hidden>< zurück</a>
+ <span id="nav-prev-nolink" class="nolink">< zurück</span> |
+ <a href="#" id="nav-next" id="goNext" accesskey="n" hidden>weiter ></a>
+ <span id="nav-next-nolink" class="nolink">weiter ></span>
+</nav>
+
+<article id="toc" title="Inhalt">
+<h1>Inhalt</h1>
+<h2>Mozilla - Das Web ist die Plattform</h2>
+
+<div class="captionedbox">
+<p class="captionedbox-caption">Folgende Folien sind in dieser Präsentation enthalten:</p>
+<div class="captionedbox-content">
+<ul id="toc-list">
+</ul>
+</article>
+
+<article id="index" title="Startseite">
+<h1>Mozilla - Das Web ist die Plattform</h1>
+<h2>Aktuelle Entwicklungen im Mozilla-Projekt</h2>
+
+<div class="simplebox">
+<mark><a href="http://home.kairo.at/">Robert Kaiser</a></mark>,
+"KaiRo" <kairo@kairo.at>
+<br><small>Mozilla-Stabilitäts-Manager</small>
+</div>
+
+<div class="captionedbox">
+<p class="captionedbox-caption">Folien:
+ <a href="http://slides.kairo.at/linuxwochen2013-mozilla/">http://slides.kairo.at/linuxwochen2013-mozilla/</a></p>
+<div class="captionedbox-content small">
+<ul class="small">
+ <li>Erstellt für einen
+ <a href="https://cfp.linuxwochen.at/de/lww2013/public/events/59">Vortrag</a>
+ auf den <a href="http://www.linuxwochen.at/">Linuxwochen 2013</a> in Wien.</li>
+ <li>Geschrieben in HTML 5 mit CSS 3 und JavaScript.</li>
+ <li>Navigation mit Links auf allen Folien, mit Accesskeys
+ (e.g. "n"/Alt+Shift+N für "next"/weiter) oder vor/zurück-Pfeilasten</li>
+ <li><a href="#toc">Inhalt</a></li>
+ <li><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/at/"><img
+ alt="Lizenziert unter CC-BY-SA," style="border-width:0;vertical-align:bottom;"
+ src="cc-by-sa-80x15.png"></a> 04/2013 Robert Kaiser</li>
+</ul>
+</div>
+</div>
+</article>
+
+<article id="history" title="Geschichte">
+<h1>15 Jahre Mozilla-Geschichte</h1>
+
+<div class="simplebox">
+<ul>
+ <li>Freigabe des Netscape-Quellcodes am 31. März 1998</li>
+ <li>Unter dem langjährigen Netscape-Codenamen "Mozilla"</li>
+ <li>Firefox 1.0 im November 2004</li>
+</ul>
+</div>
+</article>
+
+<article id="links" title="Links">
+<h1>Weitere Infos</h1>
+
+<div class="simplebox">
+<ul>
+ <li>Mozilla Hacks: <a href="https://hacks.mozilla.org/">hacks.mozilla.org</a></li>
+ <li>Mozilla Research: <a href="http://www.mozilla.org/research/">mozilla.org/research</a></li>
+ <li>Firefox Aurora: <a href="http://www.mozilla.org/firefox/aurora/">mozilla.org/firefox/aurora</a></li>
+</ul>
+</div>
+</article>
+
+</body>
+</html>
--- /dev/null
+/**************************
+ * styles for talk slides *
+ * by Robert Kaiser *
+ * <kairo@kairo.at> *
+ * (for FOSDEM 2013) *
+ **************************/
+
+
+/***** base style *****/
+
+@font-face {
+ font-family: 'Open Sans';
+ src: url('template/OpenSans-Regular-webfont.woff');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Open Sans';
+ src: url('template/OpenSans-Semibold-webfont.woff');
+ font-weight: bold;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Open Sans';
+ src: url('template/OpenSans-Italic-webfont.woff');
+ font-weight: normal;
+ font-style: italic;
+}
+
+html {
+ overflow: hidden; /* to make translations not paint scrollbars */
+ background: #f5f1e8 url("template/page-background.png") top left repeat;
+ height: 100%;
+}
+
+body {
+ margin: 0px;
+ padding: 0px;
+ border: 0px;
+ font-family: "Open Sans", sans-serif;
+ font-size: 2em;
+ color: #333333;
+ background: url("template/page-background-top.png") top left repeat-x;
+ height: 100%;
+}
+
+ul {
+ padding-left: 1.2em;
+ margin-bottom: 0.5em;
+}
+
+ul:first-child,
+ul:last-child {
+ margin-top: 0;
+}
+
+#header {
+ height: 40px;
+ position: relative;
+ border-top: 1px solid white;
+}
+
+#headerlogo {
+ position: absolute;
+ display: block;
+ right: 20px;
+ top: 0;
+ text-indent: -2000px;
+ font-size: 1px;
+ overflow: hidden;
+ height: 41px;
+ width: 148px;
+ background: url("template/mozilla-tab.png") no-repeat;
+}
+
+#header-text {
+ position: relative;
+ top: 5px;
+ left: 25px;
+ font-size: 20px;
+ font-weight: bold;
+ color: #808080;
+}
+
+#header-text.neartime {
+ color: #80AACC;
+}
+
+#header-text.ontime {
+ color: #80CC80;
+}
+
+#header-text.overtime {
+ color: #FF8080;
+}
+
+#subheader-text {
+ color: #808080;
+ position: relative;
+ top: 3px;
+ left: 25px;
+ font-size: 10px;
+}
+
+#slidenav {
+ position: absolute;
+ right: 200px;
+ top: 15px;
+ font-size: 10px;
+}
+
+#slidenav a:link,
+#slidenav a:visited {
+ color: #484848;
+}
+
+#slidenav a:hover,
+#slidenav a:active {
+ color: #0073aa;
+}
+
+#slidenav .nolink {
+ color: #A0A0A0;
+}
+
+article {
+ position: absolute;
+ width: 100%;
+ /* header is 40px, 7px to have a bit of distance,
+ * 3px height-reducing on the bottom for safety */
+ top: 47px;
+ height: calc(100% - 50px);
+ overflow: auto;
+
+ transition-property: transform, opacity;
+ transition-duration: 3s;
+ transition-timing-function: ease;
+ transform-origin: center 5em;
+
+ opacity: 0;
+/*
+ transform: translate(-100%, 0);
+*/
+/*
+ transform: scale(0.1) rotate(360deg);
+*/
+ transform: scale(0.1) rotate(360deg) translate(-200%, 0);
+}
+
+article[aria-selected="true"] {
+ opacity: 1;
+ transform: scale(1) rotate(0deg) translate(0, 0);
+}
+
+article[aria-selected="true"] ~ article {
+ opacity: 0;
+/*
+ transform: translate(100%, 0);
+*/
+/*
+ transform: scale(0.1) rotate(-360deg);
+*/
+ transform: scale(0.1) rotate(-360deg) translate(200%, 0);
+}
+
+/***** headers *****/
+
+h1, h2, h3, h4 {
+ margin: 0.5em 0;
+ font-weight: bold;
+ color: #484848;
+ text-align: center;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: 1.7em;
+ text-shadow: #AAAA80 3px 3px 5px;
+}
+
+h2 {
+ font-size: 1.3em;
+ text-shadow: #AAAA80 2px 2px 3px;
+}
+
+h3 {
+ font-size: 1.1em;
+}
+
+h4 {
+ font-size: 1em;
+ text-align: left;
+}
+
+/***** boxes *****/
+
+.simplebox {
+ padding: 0.5em;
+}
+
+.captionedbox {
+ padding: 0px;
+}
+
+.simplebox,
+.captionedbox {
+ margin: 1em;
+ box-shadow: 0 0 0 1px #fff inset;
+ background: #fff;
+ background-image: radial-gradient(center 45px, ellipse farthest-corner, #f5f1e8 0, #fff 100%);
+ border-bottom: 1px solid #ddd;
+}
+
+.captionedbox-content {
+ margin: 0;
+ padding: 0.5em;
+ border: 0px;
+ border-top: 1px solid #d6d6d6;
+}
+
+.captionedbox-caption {
+ margin: 0;
+ padding: 0.5em;
+ font-weight: bold;
+ text-shadow: #AAAA80 1px 1px 2px;
+}
+
+/***** misc formatting *****/
+
+mark {
+ font-weight: bold;
+ color: #FF6600;
+ background-color: transparent;
+ text-shadow: #AAAA80 2px 2px 3px;
+}
+
+.border {
+ border: 1px solid #6d7581;
+ padding: 0.5em;
+}
+
+.sshot {
+ box-shadow: #6d7581 1px 1px 3px 2px;
+}
+
+ul > li {
+ margin: 0.5em 0;
+}
+
+.cent {
+ text-align: center;
+}
+
+.topmargin {
+ margin-top: 0.5em;
+}
+
+.akey {
+ text-decoration: underline;
+}
+
+a:link, a:visited { color: #0096dd; text-decoration: none; }
+a:hover, a:active { color: #FF6600; text-decoration: underline; }
+
+mark a:link, mark a:visited { color: #FF6600; }
+mark a:hover, mark a:active { color: #FF6600; }
+
+/***** small stuff *****/
+
+.small,
+.small {
+ font-size: 0.75em;
+}
+
+ul.small,
+.small ul {
+ padding: 0px;
+ border: 0px;
+ margin: 0px 0px 0px 1em;
+}
+
+ul.small > li
+.small ul > li {
+ margin: 0px;
+ padding: 0px;
+ border: 0px;
+}
+
+/***** specific slides *****/
+
--- /dev/null
+/******************************
+ * JavaScript for talk slides *
+ * by Robert Kaiser *
+ * <kairo@kairo.at> *
+ * (for FOSDEM 2011) *
+ ******************************/
+
+var slides = {};
+var articleNodes;
+var currentSlide;
+var currentIdx;
+var defaultIdx = 1; // set to slide index to show by default
+var firstIdx = 2; // set no value if to use first available
+var lastIdx; // set no value if to use first available
+
+var pageTitle, headerText, subHeaderText;
+var navPrev, navNext, navPrevNolink, navNextNolink;
+
+// Slide timer - color variation of headerText
+var slideSeconds = 3 * 60;
+
+// Called when the document has been loaded.
+function docLoaded() {
+ pageTitle = document.getElementsByTagName("title")[0];
+ headerText = document.getElementById("header-text");
+ subHeaderText = document.getElementById("subheader-text");
+ navPrev = document.getElementById("nav-prev");
+ navNext = document.getElementById("nav-next");
+ navPrevNolink = document.getElementById("nav-prev-nolink");
+ navNextNolink = document.getElementById("nav-next-nolink");
+ articleNodes = document.getElementsByTagName("article");
+
+ if (!firstIdx)
+ firstIdx = 0;
+ if (!lastIdx)
+ lastIdx = articleNodes.length - 1;
+
+ // Get a list of all slides (articles).
+ subHeaderText.textContent = articleNodes.length + " slides...";
+ for (var i = 0; i < articleNodes.length; ++i) {
+ subHeaderText.textContent = "Indexing slide " + i + " / " + articleNodes.length;
+ if (!articleNodes[i].id)
+ articleNodes[i].id = "slide_" + i;
+
+ slides[articleNodes[i].id] =
+ {"idx": i,
+ "name": articleNodes[i].id,
+ "title": articleNodes[i].title ? articleNodes[i].title : articleNodes[i].id,
+ "obj": articleNodes[i]};
+
+ if (location.hash.length &&
+ (location.hash == "#" + articleNodes[i].id || location.hash == "#" + i)) {
+ articleNodes[i].setAttribute("aria-selected", "true");
+ currentSlide = slides[articleNodes[i].id];
+ currentIdx = i;
+ }
+ }
+
+ if (!currentSlide) {
+ currentIdx = defaultIdx;
+ currentSlide = slides[articleNodes[currentIdx].id];
+ currentSlide.obj.setAttribute("aria-selected", "true");
+ location.hash = "#" + currentSlide.name;
+ }
+ updateDisplay();
+}
+
+// Called when the hash part of the location changes.
+function locationHashChanged() {
+ if (location.hash.length > 1) {
+ var hashtag = location.hash.substring(1);
+ // If not a number, treat as ID
+ if (isNaN(hashtag) && slides[hashtag]) {
+ currentSlide.obj.removeAttribute("aria-selected");
+ currentSlide = slides[hashtag];
+ currentIdx = currentSlide.idx;
+ currentSlide.obj.setAttribute("aria-selected", "true");
+ updateDisplay();
+ }
+ else if (articleNodes[hashtag]) {
+ currentSlide.obj.removeAttribute("aria-selected");
+ currentIdx = hashtag;
+ currentSlide = slides[articleNodes[currentIdx].id];
+ currentSlide.obj.setAttribute("aria-selected", "true");
+ updateDisplay();
+ }
+ }
+}
+window.onhashchange = locationHashChanged;
+
+// Update the display after we updated what slide is shown.
+function updateDisplay() {
+ if (currentIdx >= firstIdx && currentIdx <= lastIdx &&
+ currentSlide.name != "toc")
+ subHeaderText.textContent = (currentIdx - firstIdx + 1) + "/" +
+ (lastIdx - firstIdx + 1) + " - " +
+ currentSlide.title;
+ else
+ subHeaderText.textContent = currentSlide.title;
+ pageTitle.textContent = headerText.textContent + ": " + currentSlide.title;
+ if (currentIdx > firstIdx && currentSlide.name != "toc") {
+ navPrev.hidden = false;
+ navPrev.href = "#" + articleNodes[currentIdx - 1].id;
+ navPrevNolink.hidden = true;
+ }
+ else {
+ navPrev.hidden = true;
+ navPrevNolink.hidden = false;
+ }
+ if (currentIdx < lastIdx && currentSlide.name != "toc") {
+ navNext.hidden = false;
+ navNext.href = "#" + articleNodes[currentIdx + 1].id;
+ navNextNolink.hidden = true;
+ }
+ else {
+ navNext.hidden = true;
+ navNextNolink.hidden = false;
+ }
+ headerText.className = "";
+ slideStart = new Date();
+ if (currentSlide.name == "toc")
+ createTOC();
+ else
+ setTimeout("timerFired()", timerMSec);
+}
+
+// Create TOC list.
+function createTOC() {
+ var list = document.getElementById("toc-list");
+ if (!list.getElementsByTagName("li").length) {
+ for (var slide in slides) {
+ if (slide != "toc") {
+ var item = document.createElement("li");
+ var link = document.createElement("a");
+ var slideHeaders = slides[slide].obj.getElementsByTagName("h1");
+ if (slideHeaders.length)
+ link.textContent = slideHeaders[0].textContent;
+ else
+ link.textContent = slides[slide].title;
+ link.href = "#" + slides[slide].name;
+ item.appendChild(link);
+ list.appendChild(item);
+ }
+ }
+ }
+}
+
+// Do timed color variation on slides.
+function timerFired() {
+ var slideCurrent = new Date();
+ var secondsDiff = Math.round((slideCurrent.getTime() - slideStart.getTime()) / 1000);
+ if (secondsDiff >= slideSeconds) {
+ headerText.className = "overtime";
+ }
+ else if (secondsDiff >= Math.round(2 * slideSeconds / 3)) {
+ headerText.className = "ontime";
+ setTimeout("timerFired()", timerMSec);
+ }
+ else if (secondsDiff >= Math.round(slideSeconds / 3)) {
+ headerText.className = "neartime";
+ setTimeout("timerFired()", timerMSec);
+ }
+ else {
+ // We should never come here, but if we do, go into a 100ms loop until we get over the upcoming step.
+ setTimeout("timerFired()", 100);
+ }
+}
+var slideStart = new Date();
+var timerMSec = 1000 * (slideSeconds / 3);
+setTimeout("timerFired()", timerMSec);
+
+// Keyboard/click nav functionality, mostly inherited from FOSDEM 2007.
+(function() {
+ function go(where) {
+ where = where || "next";
+ var navElem = document.getElementById("nav-" + where);
+ if (!navElem.hidden)
+ window.location.href = navElem.href;
+ }
+
+ function handleClick(e) {
+ e = e || event;
+ var target = (window.event) ? e.srcElement : e.target;
+ if (e.which == 1 && target.nodeName != "A" && target.nodeName != "VIDEO")
+ go("next");
+ }
+
+ function handleKeyPress(e) {
+ e = e || event;
+ switch (e.keyCode) {
+ case e.DOM_VK_LEFT:
+ go("prev"); break;
+ case e.DOM_VK_RIGHT:
+ go("next"); break;
+ }
+ }
+
+ window.onclick = handleClick;
+ window.onkeypress = handleKeyPress;
+})();
projects / slides.git / commitdiff
