Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

added presentation for native prep

  • Loading branch information...
commit 1eac434dbb19a993157fce958ac0fb7717302f6f 1 parent 1f66c4b
@benadida authored
View
BIN  presentations/browserid-native-prep-2012-05-08/assertion.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/browserid-native-prep-2012-05-08/flow1.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/browserid-native-prep-2012-05-08/flow2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/browserid-native-prep-2012-05-08/ideal.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/browserid-native-prep-2012-05-08/idp-authenticate.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/browserid-native-prep-2012-05-08/idp-provision.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
372 presentations/browserid-native-prep-2012-05-08/index.html
@@ -0,0 +1,372 @@
+<!DOCTYPE html>
+
+<meta charset="utf-8">
+<title>BrowserID - 2012-02-08</title>
+
+<!-- Your Slides -->
+<!-- One section is one slide -->
+
+<section>
+ <!-- This is the first slide -->
+ <br />
+ <div align="center"><img src="persona.png" /></div>
+<h1 align="center">Native Implementation<br />Swarm</h1>
+ <br />
+ <footer>8 May 2012</footer>
+</section>
+
+<section>
+ <h2>JS RP API</h2>
+
+<br />
+<pre>
+// callbacks on session state change
+navigator.id.watch({
+ loggedInEmail: currentEmail,
+
+ onlogin: function(assertion) {...},
+
+ onlogout: function() {...},
+
+ onready: function() {...}
+});
+
+// prompt user for id
+navigator.id.request();
+</pre>
+</section>
+
+<section>
+ <h2>players</h2>
+
+ <div align="center">
+ <img src="ideal.png" width="700px" />
+ </div>
+</section>
+
+<section>
+ <h2>IdP vouches for user</h2>
+<br/>
+ <div align="center">
+ <img src="flow1.png" width="400px" />
+ </div>
+
+</section>
+
+<section>
+ <h2>User signs into web site</h2>
+<br />
+ <div align="center">
+ <img src="flow2.png" width="400px" />
+ </div>
+
+</section>
+
+<section>
+ <h2>What the site gets</h2>
+<br />
+<div align="center">
+<img src="assertion.png" width="700px" />
+</div>
+</section>
+
+<section>
+ <h2>IdP Protocol &mdash; Provision</h2>
+<div align="center">
+<img src="idp-provision.png" width="600px" />
+</div>
+</section>
+
+
+<section>
+ <h2>IdP Protocol &mdash; Authenticate</h2>
+<div align="center">
+<img src="idp-authenticate.png" width="600px" />
+</div>
+</section>
+
+<section>
+ <h2>Signin to Firefox</h2>
+<div align="center">
+<img src="sitf.png" width="700px" />
+</div>
+</section>
+
+
+<!-- Your Style -->
+<!-- Define the style of you presentation -->
+
+<!-- Maybe a font from http://www.google.com/webfonts ? -->
+<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'>
+<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
+<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800' rel='stylesheet' type='text/css'>
+
+<style>
+ html { background-color: black; }
+ body {background-color: white;}
+ /* A section is a slide. It's size is 800x600, and this will never change */
+ section {
+ /* The font from Google */
+ font-family: 'Open Sans', arial, serif;
+ font-size: 2em;
+ }
+ h1, h2, h3 {
+ margin-top: 30px;
+ text-align: center;
+ }
+ h4 {
+ margin-left: 50px;
+ }
+ ul {
+ margin-left: 120px;
+ }
+ li {
+ padding-bottom: 10px;
+ }
+ a { color: #FF0066; } a:hover {text-decoration: underline;}
+ footer { position: absolute; bottom: 50px; right: 50px; }
+
+ /* Transition effect */
+ /* Feel free to change the transition effect for original
+ animations. See here:
+ https://developer.mozilla.org/en/CSS/CSS_transitions
+ How to use CSS3 Transitions: */
+ section {
+ -moz-transition: left 400ms linear 0s;
+ -webkit-transition: left 400ms linear 0s;
+ -ms-transition: left 400ms linear 0s;
+ transition: left 400ms linear 0s;
+ }
+
+ /* Before */
+ section { left: -150%; }
+ /* Now */
+ section[aria-selected] { left: 0; }
+ /* After */
+ section[aria-selected] ~ section { left: +150% }
+</style>
+
+<style>
+pre {
+ font-family: Courier;
+ font-size: 0.9em;
+ margin-left:20px;
+ border: 2px solid #888;
+ background: lightyellow;
+ padding: 15px;
+ margin-right: 20px;
+}
+</style>
+
+
+<!-- {{{{ ***************** DZSlides CORE 2.0b1 *************************** -->
+<!-- *********************************************************************** -->
+<!-- *********************************************************************** -->
+<!-- *********************************************************************** -->
+<!-- *********************************************************************** -->
+
+<!-- This block of code is not supposed to be edited, but if you want to change the behavior of the slides, feel free to hack it ;) -->
+
+<!-- Default Style -->
+<style>
+ * { margin: 0; padding: 0; }
+ details {display: none;}
+ body {
+ width: 800px; height: 600px;
+ margin-left: -400px; margin-top: -300px;
+ position: absolute; top: 50%; left: 50%;
+ overflow: hidden;
+ }
+ html {
+ overflow: hidden;
+ }
+ section {
+ position: absolute;
+ pointer-events: none;
+ width: 100%; height: 100%;
+ }
+ section[aria-selected] { pointer-events: auto;}
+ body {display: none}
+ body.loaded {display: block}
+</style>
+
+<script>
+ var friendWindows = [];
+ var idx = 1;
+ var slides;
+
+ /* main() */
+
+ window.onload = function() {
+ slides = document.querySelectorAll("body > section");
+ onhashchange();
+ setSlide();
+ document.body.className = "loaded";
+ setupTouchEvents();
+ onresize();
+ }
+
+ /* Handle keys */
+
+ window.onkeydown = function(e) {
+ // Don't intercept keyboard shortcuts
+ if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
+ return;
+ }
+ if ( e.keyCode == 37 // left arrow
+ || e.keyCode == 38 // up arrow
+ || e.keyCode == 33 // page up
+ ) {
+ e.preventDefault();
+ back();
+ }
+ if ( e.keyCode == 39 // right arrow
+ || e.keyCode == 40 // down arrow
+ || e.keyCode == 34 // page down
+ ) {
+ e.preventDefault();
+ forward();
+ }
+
+ if ( e.keyCode == 32) { // space
+ e.preventDefault();
+ toggleContent();
+ }
+ }
+
+ /* Touch Events */
+
+ function setupTouchEvents() {
+ var orgX, newX;
+ var tracking = false;
+
+ var body = document.body;
+ body.addEventListener("touchstart", start, false);
+ body.addEventListener("touchmove", move, false);
+
+ function start(e) {
+ e.preventDefault();
+ tracking = true;
+ orgX = e.changedTouches[0].pageX;
+ }
+
+ function move(e) {
+ if (!tracking) return;
+ newX = e.changedTouches[0].pageX;
+ if (orgX - newX > 100) {
+ tracking = false;
+ forward();
+ } else {
+ if (orgX - newX < -100) {
+ tracking = false;
+ back();
+ }
+ }
+ }
+ }
+
+ /* Adapt the size of the slides to the window */
+
+ window.onresize = function() {
+ var sx = document.body.clientWidth / window.innerWidth;
+ var sy = document.body.clientHeight / window.innerHeight;
+ var transform = "scale(" + (1/Math.max(sx, sy)) + ")";
+ document.body.style.MozTransform = transform;
+ document.body.style.WebkitTransform = transform;
+ document.body.style.OTransform = transform;
+ document.body.style.msTransform = transform;
+ document.body.style.transform = transform;
+ }
+ function getDetails(idx) {
+ var s = document.querySelector("section:nth-of-type("+ idx +")");
+ var d = s.querySelector("details");
+ return d?d.innerHTML:"";
+ }
+ window.onmessage = function(e) {
+ msg = e.data;
+ win = e.source;
+ if (msg === "register") {
+ friendWindows.push(win);
+ win.postMessage(JSON.stringify({method: "registered", title: document.title, count: slides.length}), "*");
+ win.postMessage(JSON.stringify({method: "newslide", details: getDetails(idx), idx: idx}), "*");
+ return;
+ }
+ if (msg === "back") back();
+ if (msg === "forward") forward();
+ if (msg === "toggleContent") toggleContent();
+ // setSlide(42)
+ var r = /setSlide\((\d+)\)/.exec(msg);
+ if (r) {
+ idx = r[1];
+ setSlide();
+ }
+ }
+
+ /* If a Video is present in this new slide, play it.
+ If a Video is present in the previous slide, stop it. */
+
+ function toggleContent() {
+ var s = document.querySelector("section[aria-selected]");
+ if (s) {
+ var video = s.querySelector("video");
+ if (video) {
+ if (video.ended || video.paused) {
+ video.play();
+ } else {
+ video.pause();
+ }
+ }
+ }
+ }
+
+ /* If the user change the slide number in the URL bar, jump
+ to this slide. */
+
+ window.onhashchange = function(e) {
+ var newidx = ~~window.location.hash.split("#")[1];
+ if (!newidx) newidx = 1;
+ if (newidx == idx) return;
+ idx = newidx;
+ setSlide();
+ }
+
+ /* Slide controls */
+
+ function back() {
+ if (idx == 1) return;
+ idx--;
+ setSlide();
+ }
+ function forward() {
+ if (idx >= slides.length) return;
+ idx++;
+ setSlide();
+ }
+ function setSlide() {
+ var old = document.querySelector("section[aria-selected]");
+ var next = document.querySelector("section:nth-of-type("+ idx +")");
+ if (old) {
+ old.removeAttribute("aria-selected");
+ var video = old.querySelector("video");
+ if (video) { video.pause(); }
+ }
+ if (next) {
+ next.setAttribute("aria-selected", "true");
+ var video = next.querySelector("video");
+ if (video) { video.play(); }
+ } else {
+ console.warn("No such slide: " + idx);
+ idx = 0;
+ for (var i = 0; i < slides.length; i++) {
+ if (slides[i].hasAttribute("aria-selected")) {
+ idx = i + 1;
+ }
+ }
+ }
+ window.location.hash = idx;
+ for (var i = 0; i < friendWindows.length; i++) {
+ friendWindows[i].postMessage(JSON.stringify({method: "newslide", details: getDetails(idx), idx: idx}), "*");
+ }
+ }
+</script>
+<!-- vim: set fdm=marker: }}} -->
View
BIN  presentations/browserid-native-prep-2012-05-08/persona.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
172 presentations/browserid-native-prep-2012-05-08/shells/embedder.html
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<meta charset="utf8">
+<title>...</title>
+
+<script>
+ var view, url, idx = 1, count;
+ function $(query) { return document.querySelector(query)}
+
+ function getURL() {
+ var u = window.location.hash.split("#")[1];
+ if (!u) {
+ u = window.prompt("What is the URL of the slides?");
+ if (u) {
+ window.location.hash = u.split("#")[0];
+ return u;
+ }
+ u= "<style>body{background-color:white;color:black}</style>";
+ u+= "<strong>ERROR:</strong> No URL specified.<br>"
+ u+= "Try<em>: " + document.location + "#yourslides.html</em>"
+ u= "data:text/html," + encodeURIComponent(u);
+ }
+ return u;
+ }
+
+ window.onload = function() {
+ var iframe = $("iframe");
+ url = getURL();
+ iframe.src = url;
+ iframe.onload = function() {
+ view = iframe.contentWindow;
+ view.postMessage("register", "*");
+ }
+ }
+ window.onhashchange = window.onload;
+ window.onmessage = function(e) {
+ if (e.source === view) {
+ var args = JSON.parse(e.data);
+ if (args.method === "newslide") {
+ idx = ~~args.idx;
+ $("#slideidx").value = idx;
+ if (idx == 1) {
+ $("#back").disabled = true;
+ } else {
+ $("#back").disabled = false;
+ }
+ if (idx == count) {
+ $("#forward").disabled = true;
+ } else {
+ $("#forward").disabled = false;
+ }
+ }
+ if (args.method === "registered") {
+ count = args.count;
+ $("#slidecount").innerHTML = count;
+ $("#title").innerHTML = args.title;
+ document.title = args.title;
+ }
+ }
+ }
+ function back() { view.postMessage("back", "*"); }
+ function forward() { view.postMessage("forward", "*"); }
+ function setSlide(i) {view.postMessage("setSlide(" + i + ")", "*"); }
+
+ function popup() {
+ window.open(url + "#" + idx,'','width=800,height=600,personalbar=0,toolbar=0,scrollbars=1,resizable=1');
+ }
+ window.onkeydown = function(e) {
+ // Don't intercept keyboard shortcuts
+ if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
+ return;
+ }
+ if ( e.keyCode == 37 // left arrow
+ || e.keyCode == 33 // page up
+ ) {
+ console.log("back");
+ e.preventDefault();
+ back();
+ }
+ if ( e.keyCode == 39 // right arrow
+ || e.keyCode == 34 // page down
+ ) {
+ e.preventDefault();
+ forward();
+ }
+ if ( e.keyCode == 32) {
+ e.preventDefault();
+ toggleContent();
+ }
+
+ }
+
+</script>
+
+<style>
+ html { height: 100%;}
+ body {
+ margin: 0;
+ background-color: black;
+ height: 100%;
+ display: -moz-box;
+ display: -webkit-box;
+ display: box;
+ -moz-box-orient: vertical;
+ -webkit-box-orient: vertical;
+ box-orient: vertical;
+ width: 100%;
+ }
+ iframe {
+ -moz-box-flex : 1;
+ -webkit-box-flex : 1;
+ box-flex : 1;
+ background-color: white;
+ border: none;
+ width: 100%;
+ display: block;
+ /* For IE: */
+ height: 80%;
+ }
+
+ #title {
+ font-weight: normal;
+ font-family: monospace;
+ margin: 0px;
+ font-size: 19px;
+ text-align: left;
+ }
+ #title, #controls {
+ color: white;
+ padding: 5px;
+ position: relative;
+ }
+ #controls {
+ font-family: monospace;
+ font-size: 12px;
+ text-align: center;
+ }
+ #controls path { fill: white; }
+ #controls button[disabled] path {fill: #333;}
+ #forward {-moz-transform: scaleX(-1);-webkit-transform: scaleX(-1);-o-transform: scaleX(-1);-ms-transform: scaleX(-1);transform: scaleX(-1);}
+ button {
+ background-color: transparent;
+ border: none;
+ cursor: pointer;
+ }
+ #slideidx {
+ border: none;
+ background-color: rgba(255, 255, 255, 0.2);
+ color: white;
+ text-align: center;
+ }
+ #rightcontrols * { vertical-align: middle; }
+ #rightcontrols {
+ position: absolute;
+ top: -5px;
+ right: 10px;
+ }
+
+</style>
+
+<h1 id="title">...</h1>
+<iframe></iframe>
+<div id="controls">
+ <button title="prev" id="back" onclick="back()">
+ <svg width="15px" height="15px" viewBox="0 0 50 50"><path d="M46.686,2.632L23.694,25.624l22.992,22.993H27.183L4.189,25.624 L27.183,2.632H46.686z"/></svg>
+ </button>
+ <button title="next" id="forward" onclick="forward()">
+ <svg width="15px" height="15px" viewBox="0 0 50 50"><path d="M46.686,2.632L23.694,25.624l22.992,22.993H27.183L4.189,25.624 L27.183,2.632H46.686z"/></svg>
+ </button>
+ <p id="rightcontrols"><input onchange="setSlide(this.value)" size="2" id="slideidx" value="0"></input>/<span id="slidecount">...</span>
+ <button title="Open in a new window" id="popup" onclick="popup()"><svg width="15px" height="15px" viewBox="0 0 50 50"><path d="M10,0L10,40L50,40L50,0z M0,5L5,5L5,45L45,45L45,50L0,50Z"/></svg></button>
+ </p>
+</div>
View
282 presentations/browserid-native-prep-2012-05-08/shells/onstage.html
@@ -0,0 +1,282 @@
+<!DOCTYPE html>
+<meta charset="utf8">
+<title>DZSlides</title>
+
+<script>
+ function $(query) { return document.querySelector(query)}
+ function $$(query) { return document.querySelectorAll(query)}
+ NodeList.prototype.forEach = function(fun) {
+ if (typeof fun !== "function") throw new TypeError();
+ for (var i = 0; i < this.length; i++) {
+ fun.call(this, this[i]);
+ }
+ }
+ var views = {}, notes, url, idx = 1;
+
+ function getURL() {
+ var u = window.location.hash.split("#")[1];
+ if (!u) {
+ u = window.prompt("What is the URL of the slides?");
+ if (u) {
+ window.location.hash = u.split("#")[0];
+ return u;
+ }
+ u= "<style>body{background-color:white;color:black}</style>";
+ u+= "<strong>ERROR:</strong> No URL specified.<br>"
+ u+= "Try<em>: " + document.location + "#yourslides.html</em>"
+ u= "data:text/html," + encodeURIComponent(u);
+ }
+ return u;
+ }
+
+ window.onload = function() {
+ var iframes = $$("iframe");
+ var operationsCount = iframes.length;
+ url = getURL();
+ iframes.forEach(function(f) {
+ f.onload = function() {
+ operationsCount--;
+ if (operationsCount == 0) {
+ iframesLoaded();
+ }
+ }
+ f.src = url;
+ });
+ function iframesLoaded() {
+ views.present = $("#present > iframe").contentWindow;
+ views.future = $("#future > iframe").contentWindow;
+ views.present.postMessage("register", "*");
+ }
+ notes = $("#notes > #content");
+ startClock();
+ }
+ window.onhashchange = window.onload;
+
+ window.onmessage = function(e) {
+ if (e.source === views.present) {
+ var args = JSON.parse(e.data);
+ if (args.method === "newslide") {
+ idx = ~~args.idx;
+ notes.innerHTML = args.details
+ $$(".slideidx").forEach(function(p) {p.innerHTML = idx;});
+ $$(".nextslideidx").forEach(function(p) {p.innerHTML = idx + 1;});
+ views.future.postMessage("setSlide(" + (idx + 1) + ")", "*");
+ if (views.remote) views.remote.postMessage("setSlide(" + idx + ")", "*");
+ }
+ if (args.method === "registered") {
+ $$(".slidecount").forEach(function(p) {p.innerHTML = args.count;});
+ }
+ }
+ }
+
+ function back() {views.present.postMessage("back", "*"); }
+ function forward() {views.present.postMessage("forward", "*"); }
+ function setSlide(i) {views.present.postMessage("setSlide(" + i + ")", "*"); }
+
+ function toggleContent() {
+ views.present.postMessage("toggleContent", "*");
+ views.remote.postMessage("toggleContent", "*");
+ }
+
+ window.onkeydown = function(e) {
+ // Don't intercept keyboard shortcuts
+ if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
+ return;
+ }
+ if ( e.keyCode == 37 // left arrow
+ || e.keyCode == 33 // page up
+ ) {
+ e.preventDefault();
+ back();
+ }
+ if ( e.keyCode == 39 // right arrow
+ || e.keyCode == 34 // page down
+ ) {
+ e.preventDefault();
+ forward();
+ }
+ if ( e.keyCode == 32) {
+ e.preventDefault();
+ toggleContent();
+ }
+
+ }
+ function startClock() {
+ setInterval(function() {
+ var now = new Date();
+ var hoursElt = $("#hours");
+ var minutesElt = $("#minutes");
+ var secondsElt = $("#seconds");
+ hours = now.getHours();
+ minutes = now.getMinutes();
+ seconds = now.getSeconds();
+ if (hours < 10) hours = "0" + hours;
+ if (minutes < 10) minutes = "0" + minutes;
+ if (seconds < 10) seconds = "0" + seconds;
+ hoursElt.innerHTML = hours;
+ minutesElt.innerHTML = minutes;
+ secondsElt.innerHTML = seconds;
+ }, 1000);
+ }
+
+ function openSlides() {
+ var windowObjectReference;
+ document.body.classList.add("slidesopen");
+ var strWindowFeatures = "resizable=yes";
+ views.remote = window.open(url + "#" + idx, "slides", strWindowFeatures);
+ }
+</script>
+
+<link href='http://fonts.googleapis.com/css?family=Copse' rel='stylesheet' type='text/css'>
+
+<style>
+ html, body {
+ height: 100%;
+ color: white;
+ }
+
+ body {
+ font-family: sans-serif;
+ overflow: hidden;
+ }
+
+ #present, #future {
+ bottom: 234px;
+ position: absolute;
+ top: 0;
+ z-index: 5;
+ }
+
+ #present {
+ left: 0;
+ right: 50%;
+ border-right: 4px solid #555;
+ }
+
+ #future {
+ left: 50%;
+ right: 0;
+ border-left: 4px solid #555;
+ }
+
+ #notes {
+ background: #EEE;
+ border-top: 8px solid #555;
+ bottom: 0;
+ color: #444;
+ font-size: 30px;
+ height: 226px;
+ left: 0;
+ padding: 0 240px 0 20px;
+ position: absolute;
+ right: 0;
+ }
+
+ #time {
+ background: #888;
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+ bottom: 0;
+ font-size: 40px;
+ font-weight: bold;
+ height: 52px;
+ line-height: 52px;
+ right: 20px;
+ position: absolute;
+ text-align: center;
+ width: 200px;
+ }
+
+ iframe {
+ border: none;
+ height: 100%;
+ pointer-events: none;
+ width: 100%;
+ }
+
+ .slideidx,
+ .nextslideidx,
+ .slidecount {
+ background: #888;
+ font-size: 40px;
+ font-weight: bold;
+ height: 52px;
+ line-height: 52px;
+ margin: 0;
+ position: absolute;
+ text-align: center;
+ z-index: 10;
+ }
+
+ .slideidx,
+ .nextslideidx {
+ border-bottom: 4px solid #555;
+ bottom: 230px;
+ width: 80px;
+ }
+
+ .slideidx {
+ border-right: 4px solid #555;
+ border-top-left-radius: 10px;
+ cursor: pointer;
+ padding-left: 4px;
+ right: 50%;
+ }
+
+ .nextslideidx {
+ border-left: 4px solid #555;
+ border-top-right-radius: 10px;
+ left: 50%;
+ padding-right: 4px;
+ }
+
+ .slidecount {
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 10px;
+ border-top: 4px solid #555;
+ bottom: 174px;
+ width: 200px;
+ right: 20px;
+ }
+
+ #popup-button {
+ bottom: 88px;
+ background: #888;
+ border: none;
+ border-radius: 10px;
+ color: #FFF;
+ cursor: pointer;
+ height: 52px;
+ font-size: 30px;
+ font-weight: bold;
+ position: absolute;
+ right: 20px;
+ width: 200px;
+ z-index: 10;
+ }
+
+ .slidesopen #present button {
+ display: none;
+ }
+</style>
+<div id="present">
+ <iframe></iframe>
+</div>
+
+<div id="future">
+ <iframe></iframe>
+</div>
+
+<div class="slideidx" onclick="var gotoidx=prompt('Go to slide...','1');setSlide(gotoidx);">?</div>
+<div class="nextslideidx">?</div>
+
+<div id="notes">
+ <p id="content"></p>
+</div>
+
+<div class="slidecount">?</div>
+<button id="popup-button" onclick="openSlides()">Pop-up</button>
+
+<div id="time">
+ <span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds">00</span>
+</div>
View
BIN  presentations/browserid-native-prep-2012-05-08/sitf.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Please sign in to comment.
Something went wrong with that request. Please try again.