Permalink
Browse files

added ffsync talk

  • Loading branch information...
1 parent 5248fda commit 4f95167154373e59793bd5e44ed61a303f636cb1 @benadida committed Mar 12, 2012
View
@@ -1 +1,2 @@
*~
+.DS_Store
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,395 @@
+<!DOCTYPE html>
+
+<meta charset="utf-8">
+<title>Firefox Sync without the Sync Key - 2012-03-12</title>
+
+<!-- Your Slides -->
+<!-- One section is one slide -->
+
+<section>
+ <!-- This is the first slide -->
+ <br />
+ <div align="center"><img src="" width="80%" /></div>
+ <h1>Firefox Sync<br />without the Sync Key</h1>
+ <br />
+ <h5 align="center">Ben Adida</h5>
+ <footer>13 March 2012</footer>
+</section>
+
+<section>
+<br /><br /><br />
+<ul>
+<li> assumption</li>
+<li> UX goal</li>
+<li> Persona key wrapping</li>
+<li> need key recovery?</li>
+</ul>
+</section>
+
+<section>
+<h2>Firefox Sync</h2>
+diagram of sync between two devices
+</section>
+
+<section>
+<h2>Assumption:<br />Firefox Sync is not usable</h2>
+<br/>
+<ul>
+<li> 1.5M ADUs, (0.9%) &mdash; 50+% single device</li>
+<li> old device needed to set up new device</li>
+<li> <em>not</em> a backup service</li>
+<li> "I’d save that and put it on my Dropbox"</li>
+</ul>
+</section>
+
+<section>
+<h2>Alternative UX</h2>
+
+<div style="padding: 20px;" align="center">
+<img width="60%" src="chrome-desktop-signin.png" />
+</div>
+</section>
+
+<section>
+<h2>Alternative UX</h2>
+
+<div style="padding: 20px;" align="center">
+<img width="30%" src="chrome-mobile-signin.png" style="border: 1px solid black" />
+<img width="30%" src="chrome-mobile-pickemail.png" style="border: 1px solid black" />
+<img width="30%" src="chrome-mobile-signedin.png" style="border: 1px solid black" />
+</div>
+</section>
+
+<section>
+<h2>Persona: we have accounts</h2>
+<br />
+<div align="center"><img width="60%" src="browserid.png" /></div>
+</section>
+
+<section>
+<h2>Persona authentication</h2>
+<br />
+<ul>
+<li> use Persona account system</li>
+<li> store data in plaintext</li>
+<li> fulfill the ideal UX</li>
+<li> can we do better?</li>
+</section>
+
+<section>
+<h2>Persona key wrapping</h2>
+<br />
+<ul>
+<li> use the Persona password to encrypt data</li>
+<li> server breach: data is still encrypted</li>
+<li> indirection to allow password changing</li>
+<li> no new assumptions of Sync server</li>
+</ul>
+</section>
+
+<section>
+<h2>Persona key wrapping</h2>
+<br />
+<img src="keywrapping.png" />
+</section>
+
+<section>
+<h2>Enough? Backups...</h2>
+</section>
+
+<section>
+<h2>Key Recovery</h2>
+</section>
+
+<section>
+<h2>Threats</h2>
+</section>
+
+<section>
+ <h2>Summary</h2>
+ <br />
+ <ul>
+ <li> user benefit</li>
+ </ul>
+</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: }}} -->
Oops, something went wrong.

0 comments on commit 4f95167

Please sign in to comment.