add slide talk streampunk
This commit is contained in:
parent
b0fc2f0c1b
commit
c0c3b9d152
8 changed files with 2896 additions and 0 deletions
|
|
@ -545,6 +545,8 @@ distribuito minimale, che funziona bene usando uno sputo di risorse. Per gli
|
|||
utenti il suo utilizzo è trasparente, comportandosi come un classico server
|
||||
Icecast.
|
||||
|
||||
[[Slide]]({filename}/talks/streampunk/Streampunk.htm)
|
||||
|
||||
<u><div id="sss">Tavola Rotonda: hack the difference</div></u>
|
||||
|
||||
Ragionamenti e discussione sulle differenze di genere e non solo nella cultura
|
||||
|
|
|
|||
440
content/talks/streampunk/Streampunk.htm
Normal file
440
content/talks/streampunk/Streampunk.htm
Normal file
|
|
@ -0,0 +1,440 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Streampunk</title>
|
||||
<meta charset="utf-8">
|
||||
<script src="Streampunk_files/slides.js"></script>
|
||||
<script>
|
||||
|
||||
if (window["location"] && window["location"]["hostname"] == "talks.golang.org") {
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(["_setAccount", "UA-11222381-6"]);
|
||||
_gaq.push(["b._setAccount", "UA-49880327-6"]);
|
||||
window.trackPageview = function() {
|
||||
_gaq.push(["_trackPageview", location.pathname+location.hash]);
|
||||
_gaq.push(["b._trackPageview", location.pathname+location.hash]);
|
||||
};
|
||||
window.trackPageview();
|
||||
window.trackEvent = function(category, action, opt_label, opt_value, opt_noninteraction) {
|
||||
_gaq.push(["_trackEvent", category, action, opt_label, opt_value, opt_noninteraction]);
|
||||
_gaq.push(["b._trackEvent", category, action, opt_label, opt_value, opt_noninteraction]);
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<link href="Streampunk_files/light.css" type="text/css" rel="stylesheet"><meta content="width=1100,height=750" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"></head>
|
||||
|
||||
<body class="loaded" style="display: none">
|
||||
|
||||
<section class="slides layout-widescreen">
|
||||
|
||||
<article class="current">
|
||||
<h1>Streampunk</h1>
|
||||
<h3>A minimal, distributed Icecast cluster</h3>
|
||||
<h3>25 January 2016</h3>
|
||||
|
||||
<div class="presenter">
|
||||
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<article class="next">
|
||||
|
||||
<h3>Streampunk</h3>
|
||||
|
||||
|
||||
<p>
|
||||
Streampunk.cc is a small, self-sustained organization providing Icecast streaming services to free radios.
|
||||
</p>
|
||||
|
||||
<p class="link"><a href="http://streampunk.cc/" target="_blank">streampunk.cc/</a></p>
|
||||
|
||||
<p>
|
||||
It is based on Autoradio, a software dedicated to these goals.
|
||||
</p>
|
||||
|
||||
<p class="link"><a href="https://git.autistici.org/ale/autoradio" target="_blank">git.autistici.org/ale/autoradio</a></p>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<article class="far-next">
|
||||
|
||||
<h3>Why offer a streaming service?</h3>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>communication is important, radios are nice, etc.</li>
|
||||
|
||||
<li>keeping up a single Icecast server is easy, keeping a reliable service is not</li>
|
||||
|
||||
<li>"aggregating" streams on a single platform makes economical sense</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<article>
|
||||
|
||||
<h3>Why new software?</h3>
|
||||
|
||||
|
||||
<p>
|
||||
A few reasons to build this software:
|
||||
</p>
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li>educational purpose (coordination primitives on etcd, traffic control)</li>
|
||||
|
||||
<li>scaling / management issues with existing radios (<a href="http://ondarossa.info/" target="_blank">Ondarossa</a>)</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<p>
|
||||
Radios often need to deal with large traffic spikes, for example when covering
|
||||
<br>
|
||||
|
||||
large demonstrations, and their utilization varies wildly.
|
||||
</p>
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li>keeping many machines always on is just too expensive; we want it to be easy to add new machines when we really need it</li>
|
||||
|
||||
<li>shit happens: the day of the big demo is the day your main Icecast server will go down</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<article>
|
||||
|
||||
<h3>Alternatives</h3>
|
||||
|
||||
|
||||
<p>
|
||||
What to do when one machine isn't enough anymore:
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
<i>1)</i> standard Icecast relay setup
|
||||
</p>
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li>no mechanism to route clients</li>
|
||||
|
||||
<li>master is SPOF</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<p>
|
||||
<i>2)</i> <a href="http://giss.tv/" target="_blank">giss.tv</a> Icecast patches (single traffic-controlling master)
|
||||
</p>
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li>master redirects clients to least-loaded relay</li>
|
||||
|
||||
<li>master is SPOF</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<p>
|
||||
Single points of failure are annoying because they add maintenance
|
||||
overhead. Prolonged master failures are bad because that's where all
|
||||
the sources are connected, so they make the rest of the network useless.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<article>
|
||||
|
||||
<h3>Distributed systems that scale down</h3>
|
||||
|
||||
|
||||
<p>
|
||||
We think that there is a somewhat unexplored niche in distributed
|
||||
systems in these times of big data: systems that are meant to <i>scale</i> <i>down</i> easily.
|
||||
</p>
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li>small, efficient (simplistic) codebase</li>
|
||||
|
||||
<li>designed to take advantage of tiny, low-power machines</li>
|
||||
|
||||
<li>all components of a "real" distributed system</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<p>
|
||||
This design can produce reliable services that are extremely cheap to run, both in terms of cost and administrator time.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<article>
|
||||
|
||||
<h3>Autoradio</h3>
|
||||
|
||||
|
||||
<p>
|
||||
<i>autoradio</i> can coordinate a bunch of machines into a
|
||||
fault-tolerant Icecast cluster. It removes the single point of failure
|
||||
by running a master-election protocol on top of a distributed database
|
||||
(etcd).
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
We use a few simple distributed primitives:
|
||||
</p>
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li>presence broadcasts (with utilization stats)</li>
|
||||
|
||||
<li>master-election (using CAS and heartbeats)</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<p>
|
||||
The cluster tolerates failure of <i>N/2-1</i> nodes. It can
|
||||
guarantee recovery from node failures (including the master) within the
|
||||
time constant of the master-election protocol, usually a few seconds.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
The service can easily scale horizontally by adding new machines with an automated procedure.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<article>
|
||||
|
||||
<h3>Autoradio : traffic flow</h3>
|
||||
|
||||
|
||||
<p>
|
||||
Traffic is controlled at the DNS and HTTP level. Sources are reverse
|
||||
proxied to the master, while clients are redirected to the appropriate
|
||||
relay. In more detail:
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
<i>1)</i> Client finds a server by using DNS. There is little control over this stage, client hopefully will get a working server.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
<i>2)</i> Client makes a HTTP request for the stream URL. Autoradio
|
||||
picks a server for the new connection, and sends back a redirect to a
|
||||
special "passthrough" URL on the chosen server.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
<i>3)</i> The client makes the final HTTP request on the desired
|
||||
backend, autoradio on that machine simply proxies the connection to the
|
||||
local Icecast daemon.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
Problems: some very old clients do not understand HTTP redirects.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<article>
|
||||
|
||||
<h3>Autoradio : traffic control</h3>
|
||||
|
||||
|
||||
<p>
|
||||
Autoradio implements a tiny programmable traffic control engine,
|
||||
with predictive estimates of backend utilization. What this means is
|
||||
that it can:
|
||||
</p>
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li>prevent individual servers from overloading</li>
|
||||
|
||||
<li>mitigates thundering herd effects in case of high connection rates</li>
|
||||
|
||||
<li>distribute load somewhat equally to minimize impact of single server loss</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<p>
|
||||
The server selection algorithm can be configured, for example:
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<div class="code"><pre>listeners_available,listeners_score,weighted</pre></div>
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
will distribute requests randomly, weighted by listener utilization,
|
||||
and will block requests to servers with utilization greater than 100%.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<article>
|
||||
|
||||
<h3>Autoradio : transcoding</h3>
|
||||
|
||||
|
||||
<p>
|
||||
Operators can create <i>transcoded</i> streams, providing a version of a stream automatically re-encoded with different parameters (codec, bitrate).
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
Autoradio uses <a href="http://liquidsoap.fm/" target="_blank">liquidsoap</a>
|
||||
to do this, running an instance for each transcoded stream, wrapped
|
||||
within a master-election protocol to guarantee global uniqueness.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<article>
|
||||
|
||||
<h3>Meanwhile, clients</h3>
|
||||
|
||||
|
||||
<p>
|
||||
we discovered that many clients don't really know HTTP: they work with Icecast,
|
||||
<br>
|
||||
|
||||
but not with a real HTTP server.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
<code>butt</code>, we're looking at you
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
Icecast doesn't really speak HTTP, either.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<article>
|
||||
|
||||
<h3>Questions?</h3>
|
||||
|
||||
<div class="background">
|
||||
<img src="Streampunk_files/streampunk.jpg">
|
||||
</div>
|
||||
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<article>
|
||||
<h3>Thank you</h3>
|
||||
|
||||
<div class="presenter">
|
||||
<p class="link"><a href="mailto:ale@incal.net" target="_blank">ale@incal.net</a></p><p class="link"><a href="http://streampunk.cc/" target="_blank">http://streampunk.cc/</a></p>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
<div id="prev-slide-area" class="slide-area"></div><div id="next-slide-area" class="slide-area"></div></section>
|
||||
|
||||
<div style="display: none;" id="help">
|
||||
Use the left and right arrow keys or click the left and right
|
||||
edges of the page to navigate between slides.<br>
|
||||
(Press 'H' or navigate to hide this message.)
|
||||
</div>
|
||||
|
||||
|
||||
<script src="Streampunk_files/play.js"></script>
|
||||
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
|
||||
if (window["location"] && window["location"]["hostname"] == "talks.golang.org") {
|
||||
var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
|
||||
ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
|
||||
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<div style="display: none;" id="ytCinemaMessage"></div><link href="Streampunk_files/css.css" type="text/css" rel="stylesheet"><link href="Streampunk_files/styles.css" type="text/css" rel="stylesheet"></body></html>
|
||||
232
content/talks/streampunk/Streampunk_files/css.css
Normal file
232
content/talks/streampunk/Streampunk_files/css.css
Normal file
|
|
@ -0,0 +1,232 @@
|
|||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Droid Sans Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Droid Sans Mono'), local('DroidSansMono'), url(https://fonts.gstatic.com/s/droidsansmono/v7/ns-m2xQYezAtqh7ai59hJYdJ2JT0J65PSe7wdxAnx_I.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/RjgO7rYTmqiVp7vzi-Q5URJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* greek-ext */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/LWCjsQkB6EMdfHrEVqA1KRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/xozscpT2726on7jbcb_pAhJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/59ZRklaO5bWGqF5A9baEERJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/u-WUoqrET9fUeobQW7jkRRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSq-j2U0lmluP9RWlSytm3ho.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSpX5f-9o1vgP2EXwfjgl7AY.woff2) format('woff2');
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* greek-ext */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNShWV49_lSm1NYrwo-zkhivY.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSqaRobkAwv3vxw3jMhVENGA.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSv8zf_FOSsgRmwsS7Aa9k2w.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSj0LW-43aMEzIO6XUTLjad8.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSugdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(https://fonts.gstatic.com/s/opensans/v13/xjAJXh38I15wypJXxuGMBjTOQ_MqJVwkKsUn0wKzc2I.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(https://fonts.gstatic.com/s/opensans/v13/xjAJXh38I15wypJXxuGMBjUj_cnvWIuuBMVgbX098Mw.woff2) format('woff2');
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* greek-ext */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(https://fonts.gstatic.com/s/opensans/v13/xjAJXh38I15wypJXxuGMBkbcKLIaa1LC45dFaAfauRA.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(https://fonts.gstatic.com/s/opensans/v13/xjAJXh38I15wypJXxuGMBmo_sUJ8uO4YLWRInS22T3Y.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(https://fonts.gstatic.com/s/opensans/v13/xjAJXh38I15wypJXxuGMBr6up8jxqWt8HVA3mDhkV_0.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(https://fonts.gstatic.com/s/opensans/v13/xjAJXh38I15wypJXxuGMBiYE0-AqJ3nfInTTiDXDjU4.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(https://fonts.gstatic.com/s/opensans/v13/xjAJXh38I15wypJXxuGMBo4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(https://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxmgpAmOCqD37_tyH_8Ri5MM.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(https://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxsPNMTLbnS9uQzHQlYieHUU.woff2) format('woff2');
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* greek-ext */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(https://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxgyhumQnPMBCoGYhRaNxyyY.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(https://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxhUVAXEdVvYDDqrz3aeR0Yc.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(https://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxlf4y_3s5bcYyyLIFUSWYUU.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(https://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxnywqdtBbUHn3VPgzuFrCy8.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(https://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxl2umOyRU7PgRiv8DXcgJjk.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
||||
}
|
||||
614
content/talks/streampunk/Streampunk_files/light.css
Normal file
614
content/talks/streampunk/Streampunk_files/light.css
Normal file
File diff suppressed because one or more lines are too long
544
content/talks/streampunk/Streampunk_files/play.js
Normal file
544
content/talks/streampunk/Streampunk_files/play.js
Normal file
File diff suppressed because one or more lines are too long
526
content/talks/streampunk/Streampunk_files/slides.js
Normal file
526
content/talks/streampunk/Streampunk_files/slides.js
Normal file
|
|
@ -0,0 +1,526 @@
|
|||
// Copyright 2012 The Go Authors. All rights reserved.
|
||||
// Use of this source code is governed by a BSD-style
|
||||
// license that can be found in the LICENSE file.
|
||||
|
||||
var PERMANENT_URL_PREFIX = '/static/';
|
||||
|
||||
var SLIDE_CLASSES = ['far-past', 'past', 'current', 'next', 'far-next'];
|
||||
|
||||
var PM_TOUCH_SENSITIVITY = 15;
|
||||
|
||||
var curSlide;
|
||||
|
||||
/* ---------------------------------------------------------------------- */
|
||||
/* classList polyfill by Eli Grey
|
||||
* (http://purl.eligrey.com/github/classList.js/blob/master/classList.js) */
|
||||
|
||||
if (typeof document !== "undefined" && !("classList" in document.createElement("a"))) {
|
||||
|
||||
(function (view) {
|
||||
|
||||
var
|
||||
classListProp = "classList"
|
||||
, protoProp = "prototype"
|
||||
, elemCtrProto = (view.HTMLElement || view.Element)[protoProp]
|
||||
, objCtr = Object
|
||||
strTrim = String[protoProp].trim || function () {
|
||||
return this.replace(/^\s+|\s+$/g, "");
|
||||
}
|
||||
, arrIndexOf = Array[protoProp].indexOf || function (item) {
|
||||
for (var i = 0, len = this.length; i < len; i++) {
|
||||
if (i in this && this[i] === item) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
// Vendors: please allow content code to instantiate DOMExceptions
|
||||
, DOMEx = function (type, message) {
|
||||
this.name = type;
|
||||
this.code = DOMException[type];
|
||||
this.message = message;
|
||||
}
|
||||
, checkTokenAndGetIndex = function (classList, token) {
|
||||
if (token === "") {
|
||||
throw new DOMEx(
|
||||
"SYNTAX_ERR"
|
||||
, "An invalid or illegal string was specified"
|
||||
);
|
||||
}
|
||||
if (/\s/.test(token)) {
|
||||
throw new DOMEx(
|
||||
"INVALID_CHARACTER_ERR"
|
||||
, "String contains an invalid character"
|
||||
);
|
||||
}
|
||||
return arrIndexOf.call(classList, token);
|
||||
}
|
||||
, ClassList = function (elem) {
|
||||
var
|
||||
trimmedClasses = strTrim.call(elem.className)
|
||||
, classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []
|
||||
;
|
||||
for (var i = 0, len = classes.length; i < len; i++) {
|
||||
this.push(classes[i]);
|
||||
}
|
||||
this._updateClassName = function () {
|
||||
elem.className = this.toString();
|
||||
};
|
||||
}
|
||||
, classListProto = ClassList[protoProp] = []
|
||||
, classListGetter = function () {
|
||||
return new ClassList(this);
|
||||
}
|
||||
;
|
||||
// Most DOMException implementations don't allow calling DOMException's toString()
|
||||
// on non-DOMExceptions. Error's toString() is sufficient here.
|
||||
DOMEx[protoProp] = Error[protoProp];
|
||||
classListProto.item = function (i) {
|
||||
return this[i] || null;
|
||||
};
|
||||
classListProto.contains = function (token) {
|
||||
token += "";
|
||||
return checkTokenAndGetIndex(this, token) !== -1;
|
||||
};
|
||||
classListProto.add = function (token) {
|
||||
token += "";
|
||||
if (checkTokenAndGetIndex(this, token) === -1) {
|
||||
this.push(token);
|
||||
this._updateClassName();
|
||||
}
|
||||
};
|
||||
classListProto.remove = function (token) {
|
||||
token += "";
|
||||
var index = checkTokenAndGetIndex(this, token);
|
||||
if (index !== -1) {
|
||||
this.splice(index, 1);
|
||||
this._updateClassName();
|
||||
}
|
||||
};
|
||||
classListProto.toggle = function (token) {
|
||||
token += "";
|
||||
if (checkTokenAndGetIndex(this, token) === -1) {
|
||||
this.add(token);
|
||||
} else {
|
||||
this.remove(token);
|
||||
}
|
||||
};
|
||||
classListProto.toString = function () {
|
||||
return this.join(" ");
|
||||
};
|
||||
|
||||
if (objCtr.defineProperty) {
|
||||
var classListPropDesc = {
|
||||
get: classListGetter
|
||||
, enumerable: true
|
||||
, configurable: true
|
||||
};
|
||||
try {
|
||||
objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
|
||||
} catch (ex) { // IE 8 doesn't support enumerable:true
|
||||
if (ex.number === -0x7FF5EC54) {
|
||||
classListPropDesc.enumerable = false;
|
||||
objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
|
||||
}
|
||||
}
|
||||
} else if (objCtr[protoProp].__defineGetter__) {
|
||||
elemCtrProto.__defineGetter__(classListProp, classListGetter);
|
||||
}
|
||||
|
||||
}(self));
|
||||
|
||||
}
|
||||
/* ---------------------------------------------------------------------- */
|
||||
|
||||
/* Slide movement */
|
||||
|
||||
function hideHelpText() {
|
||||
$('#help').hide();
|
||||
};
|
||||
|
||||
function getSlideEl(no) {
|
||||
if ((no < 0) || (no >= slideEls.length)) {
|
||||
return null;
|
||||
} else {
|
||||
return slideEls[no];
|
||||
}
|
||||
};
|
||||
|
||||
function updateSlideClass(slideNo, className) {
|
||||
var el = getSlideEl(slideNo);
|
||||
|
||||
if (!el) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (className) {
|
||||
el.classList.add(className);
|
||||
}
|
||||
|
||||
for (var i in SLIDE_CLASSES) {
|
||||
if (className != SLIDE_CLASSES[i]) {
|
||||
el.classList.remove(SLIDE_CLASSES[i]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function updateSlides() {
|
||||
if (window.trackPageview) window.trackPageview();
|
||||
|
||||
for (var i = 0; i < slideEls.length; i++) {
|
||||
switch (i) {
|
||||
case curSlide - 2:
|
||||
updateSlideClass(i, 'far-past');
|
||||
break;
|
||||
case curSlide - 1:
|
||||
updateSlideClass(i, 'past');
|
||||
break;
|
||||
case curSlide:
|
||||
updateSlideClass(i, 'current');
|
||||
break;
|
||||
case curSlide + 1:
|
||||
updateSlideClass(i, 'next');
|
||||
break;
|
||||
case curSlide + 2:
|
||||
updateSlideClass(i, 'far-next');
|
||||
break;
|
||||
default:
|
||||
updateSlideClass(i);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
triggerLeaveEvent(curSlide - 1);
|
||||
triggerEnterEvent(curSlide);
|
||||
|
||||
window.setTimeout(function() {
|
||||
// Hide after the slide
|
||||
disableSlideFrames(curSlide - 2);
|
||||
}, 301);
|
||||
|
||||
enableSlideFrames(curSlide - 1);
|
||||
enableSlideFrames(curSlide + 2);
|
||||
|
||||
updateHash();
|
||||
};
|
||||
|
||||
function prevSlide() {
|
||||
hideHelpText();
|
||||
if (curSlide > 0) {
|
||||
curSlide--;
|
||||
|
||||
updateSlides();
|
||||
}
|
||||
};
|
||||
|
||||
function nextSlide() {
|
||||
hideHelpText();
|
||||
if (curSlide < slideEls.length - 1) {
|
||||
curSlide++;
|
||||
|
||||
updateSlides();
|
||||
}
|
||||
};
|
||||
|
||||
/* Slide events */
|
||||
|
||||
function triggerEnterEvent(no) {
|
||||
var el = getSlideEl(no);
|
||||
if (!el) {
|
||||
return;
|
||||
}
|
||||
|
||||
var onEnter = el.getAttribute('onslideenter');
|
||||
if (onEnter) {
|
||||
new Function(onEnter).call(el);
|
||||
}
|
||||
|
||||
var evt = document.createEvent('Event');
|
||||
evt.initEvent('slideenter', true, true);
|
||||
evt.slideNumber = no + 1; // Make it readable
|
||||
|
||||
el.dispatchEvent(evt);
|
||||
};
|
||||
|
||||
function triggerLeaveEvent(no) {
|
||||
var el = getSlideEl(no);
|
||||
if (!el) {
|
||||
return;
|
||||
}
|
||||
|
||||
var onLeave = el.getAttribute('onslideleave');
|
||||
if (onLeave) {
|
||||
new Function(onLeave).call(el);
|
||||
}
|
||||
|
||||
var evt = document.createEvent('Event');
|
||||
evt.initEvent('slideleave', true, true);
|
||||
evt.slideNumber = no + 1; // Make it readable
|
||||
|
||||
el.dispatchEvent(evt);
|
||||
};
|
||||
|
||||
/* Touch events */
|
||||
|
||||
function handleTouchStart(event) {
|
||||
if (event.touches.length == 1) {
|
||||
touchDX = 0;
|
||||
touchDY = 0;
|
||||
|
||||
touchStartX = event.touches[0].pageX;
|
||||
touchStartY = event.touches[0].pageY;
|
||||
|
||||
document.body.addEventListener('touchmove', handleTouchMove, true);
|
||||
document.body.addEventListener('touchend', handleTouchEnd, true);
|
||||
}
|
||||
};
|
||||
|
||||
function handleTouchMove(event) {
|
||||
if (event.touches.length > 1) {
|
||||
cancelTouch();
|
||||
} else {
|
||||
touchDX = event.touches[0].pageX - touchStartX;
|
||||
touchDY = event.touches[0].pageY - touchStartY;
|
||||
event.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
function handleTouchEnd(event) {
|
||||
var dx = Math.abs(touchDX);
|
||||
var dy = Math.abs(touchDY);
|
||||
|
||||
if ((dx > PM_TOUCH_SENSITIVITY) && (dy < (dx * 2 / 3))) {
|
||||
if (touchDX > 0) {
|
||||
prevSlide();
|
||||
} else {
|
||||
nextSlide();
|
||||
}
|
||||
}
|
||||
|
||||
cancelTouch();
|
||||
};
|
||||
|
||||
function cancelTouch() {
|
||||
document.body.removeEventListener('touchmove', handleTouchMove, true);
|
||||
document.body.removeEventListener('touchend', handleTouchEnd, true);
|
||||
};
|
||||
|
||||
/* Preloading frames */
|
||||
|
||||
function disableSlideFrames(no) {
|
||||
var el = getSlideEl(no);
|
||||
if (!el) {
|
||||
return;
|
||||
}
|
||||
|
||||
var frames = el.getElementsByTagName('iframe');
|
||||
for (var i = 0, frame; frame = frames[i]; i++) {
|
||||
disableFrame(frame);
|
||||
}
|
||||
};
|
||||
|
||||
function enableSlideFrames(no) {
|
||||
var el = getSlideEl(no);
|
||||
if (!el) {
|
||||
return;
|
||||
}
|
||||
|
||||
var frames = el.getElementsByTagName('iframe');
|
||||
for (var i = 0, frame; frame = frames[i]; i++) {
|
||||
enableFrame(frame);
|
||||
}
|
||||
};
|
||||
|
||||
function disableFrame(frame) {
|
||||
frame.src = 'about:blank';
|
||||
};
|
||||
|
||||
function enableFrame(frame) {
|
||||
var src = frame._src;
|
||||
|
||||
if (frame.src != src && src != 'about:blank') {
|
||||
frame.src = src;
|
||||
}
|
||||
};
|
||||
|
||||
function setupFrames() {
|
||||
var frames = document.querySelectorAll('iframe');
|
||||
for (var i = 0, frame; frame = frames[i]; i++) {
|
||||
frame._src = frame.src;
|
||||
disableFrame(frame);
|
||||
}
|
||||
|
||||
enableSlideFrames(curSlide);
|
||||
enableSlideFrames(curSlide + 1);
|
||||
enableSlideFrames(curSlide + 2);
|
||||
};
|
||||
|
||||
function setupInteraction() {
|
||||
/* Clicking and tapping */
|
||||
|
||||
var el = document.createElement('div');
|
||||
el.className = 'slide-area';
|
||||
el.id = 'prev-slide-area';
|
||||
el.addEventListener('click', prevSlide, false);
|
||||
document.querySelector('section.slides').appendChild(el);
|
||||
|
||||
var el = document.createElement('div');
|
||||
el.className = 'slide-area';
|
||||
el.id = 'next-slide-area';
|
||||
el.addEventListener('click', nextSlide, false);
|
||||
document.querySelector('section.slides').appendChild(el);
|
||||
|
||||
/* Swiping */
|
||||
|
||||
document.body.addEventListener('touchstart', handleTouchStart, false);
|
||||
}
|
||||
|
||||
/* Hash functions */
|
||||
|
||||
function getCurSlideFromHash() {
|
||||
var slideNo = parseInt(location.hash.substr(1));
|
||||
|
||||
if (slideNo) {
|
||||
curSlide = slideNo - 1;
|
||||
} else {
|
||||
curSlide = 0;
|
||||
}
|
||||
};
|
||||
|
||||
function updateHash() {
|
||||
location.replace('#' + (curSlide + 1));
|
||||
};
|
||||
|
||||
/* Event listeners */
|
||||
|
||||
function handleBodyKeyDown(event) {
|
||||
// If we're in a code element, only handle pgup/down.
|
||||
var inCode = event.target.classList.contains("code");
|
||||
|
||||
switch (event.keyCode) {
|
||||
case 72: // 'H' hides the help text
|
||||
case 27: // escape key
|
||||
if (!inCode) hideHelpText();
|
||||
break;
|
||||
|
||||
case 39: // right arrow
|
||||
case 13: // Enter
|
||||
case 32: // space
|
||||
if (inCode) break;
|
||||
case 34: // PgDn
|
||||
nextSlide();
|
||||
event.preventDefault();
|
||||
break;
|
||||
|
||||
case 37: // left arrow
|
||||
case 8: // Backspace
|
||||
if (inCode) break;
|
||||
case 33: // PgUp
|
||||
prevSlide();
|
||||
event.preventDefault();
|
||||
break;
|
||||
|
||||
case 40: // down arrow
|
||||
if (inCode) break;
|
||||
nextSlide();
|
||||
event.preventDefault();
|
||||
break;
|
||||
|
||||
case 38: // up arrow
|
||||
if (inCode) break;
|
||||
prevSlide();
|
||||
event.preventDefault();
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
function addEventListeners() {
|
||||
document.addEventListener('keydown', handleBodyKeyDown, false);
|
||||
};
|
||||
|
||||
/* Initialization */
|
||||
|
||||
function addFontStyle() {
|
||||
var el = document.createElement('link');
|
||||
el.rel = 'stylesheet';
|
||||
el.type = 'text/css';
|
||||
el.href = '//fonts.googleapis.com/css?family=' +
|
||||
'Open+Sans:regular,semibold,italic,italicsemibold|Droid+Sans+Mono';
|
||||
|
||||
document.body.appendChild(el);
|
||||
};
|
||||
|
||||
function addGeneralStyle() {
|
||||
var el = document.createElement('link');
|
||||
el.rel = 'stylesheet';
|
||||
el.type = 'text/css';
|
||||
el.href = PERMANENT_URL_PREFIX + 'styles.css';
|
||||
document.body.appendChild(el);
|
||||
|
||||
var el = document.createElement('meta');
|
||||
el.name = 'viewport';
|
||||
el.content = 'width=1100,height=750';
|
||||
document.querySelector('head').appendChild(el);
|
||||
|
||||
var el = document.createElement('meta');
|
||||
el.name = 'apple-mobile-web-app-capable';
|
||||
el.content = 'yes';
|
||||
document.querySelector('head').appendChild(el);
|
||||
};
|
||||
|
||||
function showHelpText() {
|
||||
};
|
||||
|
||||
function handleDomLoaded() {
|
||||
slideEls = document.querySelectorAll('section.slides > article');
|
||||
|
||||
setupFrames();
|
||||
|
||||
addFontStyle();
|
||||
addGeneralStyle();
|
||||
addEventListeners();
|
||||
|
||||
updateSlides();
|
||||
|
||||
setupInteraction();
|
||||
|
||||
if (window.location.hostname == "localhost" || window.location.hostname == "127.0.0.1" || window.location.hostname == "::1") {
|
||||
hideHelpText();
|
||||
}
|
||||
|
||||
document.body.classList.add('loaded');
|
||||
};
|
||||
|
||||
function initialize() {
|
||||
getCurSlideFromHash();
|
||||
|
||||
if (window['_DEBUG']) {
|
||||
PERMANENT_URL_PREFIX = '../';
|
||||
}
|
||||
|
||||
if (window['_DCL']) {
|
||||
handleDomLoaded();
|
||||
} else {
|
||||
document.addEventListener('DOMContentLoaded', handleDomLoaded, false);
|
||||
}
|
||||
}
|
||||
|
||||
// If ?debug exists then load the script relative instead of absolute
|
||||
if (!window['_DEBUG'] && document.location.href.indexOf('?debug') !== -1) {
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Avoid missing the DomContentLoaded event
|
||||
window['_DCL'] = true
|
||||
}, false);
|
||||
|
||||
window['_DEBUG'] = true;
|
||||
var script = document.createElement('script');
|
||||
script.type = 'text/javascript';
|
||||
script.src = '../slides.js';
|
||||
var s = document.getElementsByTagName('script')[0];
|
||||
s.parentNode.insertBefore(script, s);
|
||||
|
||||
// Remove this script
|
||||
s.parentNode.removeChild(s);
|
||||
} else {
|
||||
initialize();
|
||||
}
|
||||
BIN
content/talks/streampunk/Streampunk_files/streampunk.jpg
Normal file
BIN
content/talks/streampunk/Streampunk_files/streampunk.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
538
content/talks/streampunk/Streampunk_files/styles.css
Normal file
538
content/talks/streampunk/Streampunk_files/styles.css
Normal file
|
|
@ -0,0 +1,538 @@
|
|||
@media screen {
|
||||
/* Framework */
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
display: block !important;
|
||||
|
||||
height: 100%;
|
||||
min-height: 740px;
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
background: rgb(215, 215, 215);
|
||||
background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
|
||||
background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
|
||||
background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
|
||||
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190)));
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.slides {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
position: absolute;
|
||||
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.slides > article {
|
||||
display: block;
|
||||
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
|
||||
width: 900px;
|
||||
height: 700px;
|
||||
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
|
||||
margin-left: -450px;
|
||||
margin-top: -350px;
|
||||
|
||||
padding: 40px 60px;
|
||||
|
||||
box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
|
||||
border-radius: 10px;
|
||||
-o-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
|
||||
background-color: white;
|
||||
|
||||
border: 1px solid rgba(0, 0, 0, .3);
|
||||
|
||||
transition: transform .3s ease-out;
|
||||
-o-transition: -o-transform .3s ease-out;
|
||||
-moz-transition: -moz-transform .3s ease-out;
|
||||
-webkit-transition: -webkit-transform .3s ease-out;
|
||||
}
|
||||
.slides.layout-widescreen > article {
|
||||
margin-left: -550px;
|
||||
width: 1100px;
|
||||
}
|
||||
.slides.layout-faux-widescreen > article {
|
||||
margin-left: -550px;
|
||||
width: 1100px;
|
||||
|
||||
padding: 40px 160px;
|
||||
}
|
||||
|
||||
.slides.layout-widescreen > article:not(.nobackground):not(.biglogo),
|
||||
.slides.layout-faux-widescreen > article:not(.nobackground):not(.biglogo) {
|
||||
background-position-x: 0, 840px;
|
||||
}
|
||||
|
||||
/* Clickable/tappable areas */
|
||||
|
||||
.slide-area {
|
||||
z-index: 1000;
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 150px;
|
||||
height: 700px;
|
||||
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
|
||||
cursor: pointer;
|
||||
margin-top: -350px;
|
||||
|
||||
tap-highlight-color: transparent;
|
||||
-o-tap-highlight-color: transparent;
|
||||
-moz-tap-highlight-color: transparent;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
#prev-slide-area {
|
||||
margin-left: -550px;
|
||||
}
|
||||
#next-slide-area {
|
||||
margin-left: 400px;
|
||||
}
|
||||
.slides.layout-widescreen #prev-slide-area,
|
||||
.slides.layout-faux-widescreen #prev-slide-area {
|
||||
margin-left: -650px;
|
||||
}
|
||||
.slides.layout-widescreen #next-slide-area,
|
||||
.slides.layout-faux-widescreen #next-slide-area {
|
||||
margin-left: 500px;
|
||||
}
|
||||
|
||||
/* Slides */
|
||||
|
||||
.slides > article {
|
||||
display: none;
|
||||
}
|
||||
.slides > article.far-past {
|
||||
display: block;
|
||||
transform: translate(-2040px);
|
||||
-o-transform: translate(-2040px);
|
||||
-moz-transform: translate(-2040px);
|
||||
-webkit-transform: translate3d(-2040px, 0, 0);
|
||||
}
|
||||
.slides > article.past {
|
||||
display: block;
|
||||
transform: translate(-1020px);
|
||||
-o-transform: translate(-1020px);
|
||||
-moz-transform: translate(-1020px);
|
||||
-webkit-transform: translate3d(-1020px, 0, 0);
|
||||
}
|
||||
.slides > article.current {
|
||||
display: block;
|
||||
transform: translate(0);
|
||||
-o-transform: translate(0);
|
||||
-moz-transform: translate(0);
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
}
|
||||
.slides > article.next {
|
||||
display: block;
|
||||
transform: translate(1020px);
|
||||
-o-transform: translate(1020px);
|
||||
-moz-transform: translate(1020px);
|
||||
-webkit-transform: translate3d(1020px, 0, 0);
|
||||
}
|
||||
.slides > article.far-next {
|
||||
display: block;
|
||||
transform: translate(2040px);
|
||||
-o-transform: translate(2040px);
|
||||
-moz-transform: translate(2040px);
|
||||
-webkit-transform: translate3d(2040px, 0, 0);
|
||||
}
|
||||
|
||||
.slides.layout-widescreen > article.far-past,
|
||||
.slides.layout-faux-widescreen > article.far-past {
|
||||
display: block;
|
||||
transform: translate(-2260px);
|
||||
-o-transform: translate(-2260px);
|
||||
-moz-transform: translate(-2260px);
|
||||
-webkit-transform: translate3d(-2260px, 0, 0);
|
||||
}
|
||||
.slides.layout-widescreen > article.past,
|
||||
.slides.layout-faux-widescreen > article.past {
|
||||
display: block;
|
||||
transform: translate(-1130px);
|
||||
-o-transform: translate(-1130px);
|
||||
-moz-transform: translate(-1130px);
|
||||
-webkit-transform: translate3d(-1130px, 0, 0);
|
||||
}
|
||||
.slides.layout-widescreen > article.current,
|
||||
.slides.layout-faux-widescreen > article.current {
|
||||
display: block;
|
||||
transform: translate(0);
|
||||
-o-transform: translate(0);
|
||||
-moz-transform: translate(0);
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
}
|
||||
.slides.layout-widescreen > article.next,
|
||||
.slides.layout-faux-widescreen > article.next {
|
||||
display: block;
|
||||
transform: translate(1130px);
|
||||
-o-transform: translate(1130px);
|
||||
-moz-transform: translate(1130px);
|
||||
-webkit-transform: translate3d(1130px, 0, 0);
|
||||
}
|
||||
.slides.layout-widescreen > article.far-next,
|
||||
.slides.layout-faux-widescreen > article.far-next {
|
||||
display: block;
|
||||
transform: translate(2260px);
|
||||
-o-transform: translate(2260px);
|
||||
-moz-transform: translate(2260px);
|
||||
-webkit-transform: translate3d(2260px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
/* Set page layout */
|
||||
@page {
|
||||
size: A4 landscape;
|
||||
}
|
||||
|
||||
body {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.slides > article {
|
||||
display: block;
|
||||
|
||||
position: relative;
|
||||
|
||||
page-break-inside: never;
|
||||
page-break-after: always;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: static !important;
|
||||
margin-top: 400px !important;
|
||||
margin-bottom: 100px !important;
|
||||
}
|
||||
|
||||
div.code {
|
||||
background: rgb(240, 240, 240);
|
||||
}
|
||||
|
||||
/* Add explicit links */
|
||||
a:link:after, a:visited:after {
|
||||
content: " (" attr(href) ") ";
|
||||
font-size: 50%;
|
||||
}
|
||||
|
||||
#help {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for slides */
|
||||
|
||||
.slides > article {
|
||||
font-family: 'Open Sans', Arial, sans-serif;
|
||||
|
||||
color: black;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
|
||||
|
||||
font-size: 26px;
|
||||
line-height: 36px;
|
||||
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
b {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgb(0, 102, 204);
|
||||
text-decoration: none;
|
||||
}
|
||||
a:visited {
|
||||
color: rgba(0, 102, 204, .75);
|
||||
}
|
||||
a:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
margin-top: 20px;
|
||||
}
|
||||
p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 60px;
|
||||
line-height: 60px;
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-top: 200px;
|
||||
margin-bottom: 5px;
|
||||
padding-right: 40px;
|
||||
|
||||
font-weight: 600;
|
||||
|
||||
letter-spacing: -3px;
|
||||
|
||||
color: rgb(51, 51, 51);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 45px;
|
||||
line-height: 45px;
|
||||
|
||||
position: absolute;
|
||||
bottom: 150px;
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding-right: 40px;
|
||||
|
||||
font-weight: 600;
|
||||
|
||||
letter-spacing: -2px;
|
||||
|
||||
color: rgb(51, 51, 51);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 30px;
|
||||
line-height: 36px;
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding-right: 40px;
|
||||
|
||||
font-weight: 600;
|
||||
|
||||
letter-spacing: -1px;
|
||||
|
||||
color: rgb(51, 51, 51);
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-top: 20px;
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
li {
|
||||
padding: 0;
|
||||
margin: 0 0 .5em 0;
|
||||
}
|
||||
|
||||
div.code {
|
||||
padding: 5px 10px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
|
||||
background: rgb(240, 240, 240);
|
||||
border: 1px solid rgb(224, 224, 224);
|
||||
}
|
||||
pre {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
font-family: 'Droid Sans Mono', 'Courier New', monospace;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
letter-spacing: -1px;
|
||||
|
||||
color: black;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 95%;
|
||||
font-family: 'Droid Sans Mono', 'Courier New', monospace;
|
||||
|
||||
color: black;
|
||||
}
|
||||
|
||||
article > .image,
|
||||
article > .video {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
article > .background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
article > .background > img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 40px;
|
||||
}
|
||||
th {
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
}
|
||||
td,
|
||||
th {
|
||||
border: 1px solid rgb(224, 224, 224);
|
||||
padding: 5px 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
p.link {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
/* Code */
|
||||
div.code {
|
||||
outline: 0px solid transparent;
|
||||
}
|
||||
div.playground {
|
||||
position: relative;
|
||||
}
|
||||
div.output {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
right: 40px;
|
||||
bottom: 40px;
|
||||
background: #202020;
|
||||
padding: 5px 10px;
|
||||
z-index: 2;
|
||||
|
||||
border-radius: 10px;
|
||||
-o-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
|
||||
}
|
||||
div.output pre {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
div.output .stdout, div.output pre {
|
||||
color: #e6e6e6;
|
||||
}
|
||||
div.output .stderr, div.output .error {
|
||||
color: rgb(255, 200, 200);
|
||||
}
|
||||
div.output .system, div.output .exit {
|
||||
color: rgb(255, 230, 120)
|
||||
}
|
||||
.buttons {
|
||||
position: relative;
|
||||
float: right;
|
||||
top: -60px;
|
||||
right: 10px;
|
||||
}
|
||||
div.output .buttons {
|
||||
position: absolute;
|
||||
float: none;
|
||||
top: auto;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
/* Presenter details */
|
||||
.presenter {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.presenter p,
|
||||
.presenter .link {
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
/* Output resize details */
|
||||
.ui-resizable-handle {
|
||||
position: absolute;
|
||||
}
|
||||
.ui-resizable-n {
|
||||
cursor: n-resize;
|
||||
height: 7px;
|
||||
width: 100%;
|
||||
top: -5px;
|
||||
left: 0;
|
||||
}
|
||||
.ui-resizable-w {
|
||||
cursor: w-resize;
|
||||
width: 7px;
|
||||
left: -5px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.ui-resizable-nw {
|
||||
cursor: nw-resize;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
left: -5px;
|
||||
top: -5px;
|
||||
}
|
||||
iframe {
|
||||
border: none;
|
||||
}
|
||||
figcaption {
|
||||
color: #666;
|
||||
text-align: center;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
#help {
|
||||
font-family: 'Open Sans', Arial, sans-serif;
|
||||
text-align: center;
|
||||
color: white;
|
||||
background: #000;
|
||||
opacity: 0.5;
|
||||
position: fixed;
|
||||
bottom: 25px;
|
||||
left: 50px;
|
||||
right: 50px;
|
||||
padding: 20px;
|
||||
|
||||
border-radius: 10px;
|
||||
-o-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
}
|
||||
Loading…
Reference in a new issue