Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Working.

  • Loading branch information...
commit 47d3a1583c9bb2734718a8f03002e8e809eb4a1c 1 parent f9df530
@mikewest authored
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/chromeandroid.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/droidcon12-whats-new-in-android-the-web/images/funnygraph.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/droidcon12-whats-new-in-android-the-web/images/googleplay.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/droidcon12-whats-new-in-android-the-web/images/graphics.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/droidcon12-whats-new-in-android-the-web/images/html5rocks.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/droidcon12-whats-new-in-android-the-web/images/html5test.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/droidcon12-whats-new-in-android-the-web/images/mobile-internet-usage.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/droidcon12-whats-new-in-android-the-web/images/offline.jpeg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/visualtools.jpeg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
419 presentations/droidcon12-whats-new-in-android-the-web/index.html
@@ -6,275 +6,249 @@
<link rel="stylesheet" href="./static/slides.css">
</head>
<body>
- <!-- <a id="deck" href="https://mkw.st/+">mkw.st/p/leweb11-growing-your-business</a> -->
+ <a id="deck" href="https://mkw.st/+">+Mike West (mkw.st/+), @mikewest</a>
<article id="slides">
- <header>
- <h1>
- What's new in Android?
- </h1>
- <address><a href="http://mkw.st/+">+Mike West (<em>mkw.st/+</em>)</a>, <a href="mailto:mkwst@google.com">mkwst@google.com</a></address>
- </header>
-
- <figure>
- <img src="./static/logo/bugdroid.png" class="flat" alt="I work for Chrome in Munich." width="500">
+ <figure class="dark overlay">
+ <img src="./static/logo/bugdroid.png" class="flat" alt="" width="500">
+ <img src="./static/logo/chrome.png" class="build" alt="" width="200" style="position: absolute; left: 400px; top: 286px; background: rgba(255,255,255,0.4); border-radius: 125px;">
+ <h1>What's new, Android?</h1>
</figure>
<figure>
<img src="./static/logo/bavarian_chrome.png" class="flat" alt="I work for Chrome in Munich." width="600">
</figure>
- <section>
- <ul class="blocklist">
- <li>Step 1: Build a <em>brilliant</em> app.</li>
- <li>
- Step 2: ????
- <img src="./static/logo/chromewebstore.png"
- width="300"
- class="flat build"
- style="margin-left:-140px;"></li>
- <li>Step 3: Profit!</li>
- </ul>
- </section>
-
- <figure>
- <img src="./static/logo/chromewebstore.png" class="flat" alt="Chrome Web Store">
- </figure>
-
- <figure class="dark overlay">
- <img src="./images/webstore.jpg" width="1000" height="700">
- <h2>Distribution</h2>
- </figure>
- <section>
- <h1 style="margin-bottom: -100px;">Chrome Users ↗</h1>
- <img src="./images/chromeusers.png" width="1000" height="650" class="flat">
- </section>
- <section>
- <img src="./images/ntp.png" class="flat">
+ <section id="intro">
<style>
- section > em, figure > em {
- border-radius: 18px;
- border: 5px solid red;
- height: 100px;
- left: 142px;
- overflow: hidden;
- position: absolute;
- text-indent: -100em;
- top: 205px;
- width: 111px;
- }
- section > em.built, figure > em.built {
- -webkit-animation: pulse 1.5s ease-out;
- -webkit-animation-iteration-count: infinite;
- }
- @-webkit-keyframes pulse {
- 0% { -webkit-transform: scale(1, 1); opacity: 1; }
- 50% { -webkit-transform: scale(1.2, 1.2); border-color: rgba(255,0,0,0.2); border-radius: 30px; }
- 100% { -webkit-transform: scale(1, 1); opacity: 1; }
- }
- </style>
- <em class="outline build">Chrome Web Store, on the new tab page</em>
- </section>
- <section>
- <img src="./static/logo/chromewebstore.png" class="flat">
- <ul class="overlay">
- <li>One-time $5 registration</li>
- <li>Multiple monetization models</li>
- <li>No pre-approval process</li>
- </ul>
- </section>
- <section class="overlay">
- <img src="./images/casestudy-psycho-background.jpg" width="1000" height="700">
- <div class="overlay build" style="width:680px; top:99px;left: 160px; padding: 1em;">
- <img src="./images/casestudy-psycho-logo.jpg" width="500" style="background: #FFF;padding: 10px 90px;">
- <p><em>33%</em> of users come from CWS, driving a <em>700%</em> increase in total traffic</p>
- <p class="casestudy"><a href="http://goo.gl/cksw5">goo.gl/cksw5</a></p>
- </div>
- </section>
- <section class="overlay">
- <img src="./images/casestudy-spring-background.png" class="1000" height="700">
- <div class="overlay build" style="width: 75%; left: 12.5%; top: 45%; padding: 1em;">
- <img src="./images/casestudy-spring-logo.png" width="730" style="background: #FFF;padding: 10px;">
- <p><em>100%</em> more engagement</p>
- <p class="casestudy"><a href="http://goo.gl/NKpE0">goo.gl/NKpE0</a></p>
- </div>
- </section>
- <section class="overlay">
- <img src="./images/casestudy-wgt-background.jpg" width="1000" height="700">
- <div class="overlay build" style="width: 75%; left: 12.5%; top: 18%; padding: 1em;">
- <img src="./images/casestudy-wgt-logo.png" width="750">
- <p>Chrome users play <em>23%</em> more, spending <em>147%</em> more</p>
- <p class="casestudy"><a href="http://goo.gl/yKImD">goo.gl/yKImD</a></p>
- </div>
- </section>
+ @-webkit-keyframes spin {
+ from {
+ -webkit-transform: rotate(0deg);
+ }
+ to {
+ -webkit-transform: rotate(-3600deg);
+ }
+ }
- <section class="overlay">
- <img src="./images/webstore.jpg" width="1000" height="700">
- <style>
- section > em.size {
- background: rgba(255, 255, 255, 0.8);
- color: #111;
- position: absolute;
- text-indent: 0;
- font: 3em 'Open Sans';
- -webkit-animation: none;
- border-radius: 0;
- vertical-align: middle;
- text-align: center;
- font-weight: 700;
+ @-moz-keyframes spin {
+ from {
+ -moz-transform: rotate(0deg);
+ }
+ to {
+ -moz-transform: rotate(-3600deg);
+ }
}
- section > em span {
+ #intro .droid {
position: absolute;
- left: -999em;
+ left: 50px;
+ top: 200px;
+ z-index: 2;
}
- section > em.small {
- left: 803px;
- top: 453px;
- width: 183px;
- height: 116px;
- line-height: 116px;
+ #intro.fully-built .droid {
+ left: 180px;
}
- section > em.large {
- left: 203px;
- top: 286px;
- width: 383px;
- height: 283px;
- line-height: 283px;
+ #intro .cloud {
+ position: absolute;
+ right: 0;
+ top: 225px;
+ z-index: 2;
}
- section > em.marquee {
- left: 302px;
- top: 35px;
- width: 584px;
- height: 234px;
- line-height: 234px;
+ #intro.fully-built .cloud {
+ right: 86px;
}
- </style>
- <em class="size small build"><span>Small promo images are </span>440x280</em>
- <em class="size large build"><span>Large promo images are </span>920x680</em>
- <em class="size marquee build"><span>Marquee promo images are </span>1400x560</em>
- </section>
- <section class="overlay">
- <style>
- section > em.screenshot {
- left: 66px;
- top: 183px;
- width: 613px;
- height: 383px;
- line-height: 383px;
+ #intro.fully-built .chrome {
+ opacity: 0.5;
+ z-index: 1;
+ -webkit-animation: spin 4s linear infinite
}
</style>
- <img src="./images/direct-purchase.jpg">
- <em class="size screenshot build"><span>Screenshot images are </span>1280x800</em>
+ <img src="./static/logo/bugdroid.png"
+ class="flat build droid"
+ alt="I'd like to talk a little about Android, "
+ width="250">
+ <img src="./static/logo/cloud.png"
+ class="flat build cloud"
+ alt="a little about the web, "
+ width="350">
+ <img src="./static/logo/chrome.png"
+ class="flat build chrome"
+ alt="and a lot about how we're bringing them closer together with Chrome."
+ width="400">
+ <span class="build" style="position: absolute;left: 444px; z-index: 10; top: 269px; font-size: 150px; color: #206dda; text-shadow: 0 0 14px rgba(255, 255, 255, 0.5);">♥</span>
</section>
-
- <style>
- pre.overlay {
- background: rgba(220,220,220,0.9);
- left: 2.5%;
- top:2%;
- width: 95%;
- }
- pre.overlay code {
- font-size: 2.2em;
- }
- </style>
- <section class="overlay code">
- <img src="./images/code.jpg" width="1000">
- <pre class="overlay build"><code>// manifest.json:
-
-{
- "app": {
- "launch": {
- "urls": ["https://mkw.st/p/leweb11-growing-your-business/"],
- "web_url": "https://mkw.st/p/leweb11-growing-your-business/",
- "container": "tab"
- }
- },
- "permissions": [
- // Optional stuff: desktop notifications, geolocation,
- // unlimitedStorage, etc.
- ],
- "icons": {
- "16": "16.png", "128": "128.png" <img src="./images/assets-icon16.png" class="flat"> <img src="./images/assets-icon128.png" class="flat" width="64">
- },
- "name": "Growing Your Business: Distribution and Monetization",
- "description": "Discover great apps, games, extensions and...",
- "version": "0.1"
-}</code></pre>
+ <section style="overflow:hidden;">
+ <img src="./static/logo/bugdroid.png"
+ class="flat"
+ alt=""
+ width="700"
+ style="opacity: 0.3; top: 225px; position: absolute;">
+ <h1 style="position:relative;z-index:5;"><a href="http://goo.gl/GdMjs">850,000 device<br> activations daily</a></h1>
+ <!--
+ <img src="./images/funnygraph.png" alt="That means we'll be activating one device per person per day in 2023. Ish."
+ class="build" style="position: absolute;z-index: 2;left: 195px;">
+ -->
</section>
-
- <section>
- <img src="./images/workflow-zip.jpg" class="flat" alt="Zip the manifest and icons, and off you go.">
+ <section style="overflow:hidden;">
+ <img src="./static/logo/bugdroid.png"
+ class="flat"
+ alt=""
+ width="700"
+ style="opacity: 0.3; top: 225px; position: absolute;">
+ <h1 style="position:relative;z-index:5;"><img src="./images/googleplay.png" alt="Google Play" class="flat"> offers<br><a href="http://goo.gl/GdMjs">450,000 apps</a></h1>
+ <h1 style="position:relative;z-index:5; margin-top:1em;">1 billion monthly downloads</h1>
</section>
- <section>
- <img src="./images/workflow-appmator.png" alt="If zipping things is too much work, Appmator!">
+ <section style="overflow:hidden;" id="gateway">
+ <style>
+ #gateway img.droid {
+ -webkit-transition: all 3s ease;
+ -moz-transition: all 3s ease;
+ top: 261px;
+ left: 100px;
+ position: absolute;
+ }
+ #gateway[aria-hidden=false] img.droid {
+ top: 125px;
+ }
+ </style>
+ <img src="./static/logo/bugdroid.png"
+ class="flat droid"
+ alt=""
+ width="300">
+ <img src="./static/logo/cloud.png"
+ class="flat"
+ alt=""
+ width="700"
+ style="top: 225px; position: absolute;">
</section>
- <section class="dark overlay">
- <img src="./images/inline-install-1.png" style="position:absolute;" class="flat" alt="Install the app without redirecting users to the store.">
- <img src="./images/inline-install-2.png" style="position:absolute;" class="flat build" alt="The inline-install mechanism is straightforward.">
- <img src="./images/inline-install-3.png" style="position:absolute;" class="flat build" alt="And leaves the user right where she started.">
- <h2 class="build"><a href="http://code.google.com/chrome/webstore/docs/inline_installation.html" style="color:#FFF;">goo.gl/qUH4M</a></h2>
+ <section style="overflow:hidden;">
+ <img src="./static/logo/cloud.png"
+ class="flat"
+ alt=""
+ width="700"
+ style="opacity: 0.3; top: 225px; position: absolute;">
+ <img src="./images/mobile-internet-usage.png" alt="That's up from about 2% in 2010."
+ style="margin-top: 1em; z-index: 5; position: relative;">
</section>
-<!-- Profit! -->
- <figure class="dark overlay">
- <img src="./images/scrooge_mcduck.jpg" width="1000" height="700">
- <h2>Profit!</h2>
+ <figure>
+ <img src="./images/chromeandroid.png" alt="Mobile is the future. Our goal is to be a shining example to pull the web forward, so Chrome has to be on mobile devices.">
</figure>
- <figure class="dark overlay">
- <img src="./images/direct-purchase.jpg" class="flat">
- <h2>Direct Purchase</h2>
- <em class="outline build" style="top: 25px; left: 724px; width: 212px; height: 80px;">One-time payment, subscriptions, etc. are available in X countries.</em>
+ <figure>
+ <img src="./images/html5test.png" alt="Chrome brings serious HTML5 chops." width="900">
</figure>
-
- <figure class="dark overlay">
- <img src="./images/afg-video.png" class="flat inline">
- <img src="./images/afg-loader.png" class="flat inline" width="400" style="margin-left: 1em;">
- <h2>AdSense for Games</h2>
+
+ <figure>
+ <a href="http://html5rocks.com/"><img src="./images/html5rocks.png" class="flat" width="676" alt="HTML5Rocks has all the details on the APIs I'm going to mention going forward."></a>
</figure>
- <section class="dark overlay">
- <img src="./images/afg-publishers.png" class="flat">
- <h2 class="build"><a href="http://goo.gl/sNo4n" style="color:#FFF;">goo.gl/sNo4n</a></h2>
+
+ <figure class="overlay dark">
+ <a href="http://goo.gl/RnlTU"><img src="./images/visualtools.jpeg" width="1000" height="700"></a>
+ <h2>Visuals</h2>
+ </figure>
+
+ <section>
+ <ul class="blocklist">
+ <li><code>position: fixed;</code></li>
+ <li>Hardware accelerated canvas</li>
+ <li>3D CSS Transforms/Transitions</li>
+ <li><code>requestAnimationFrame</code></li>
+ <li>(Early) camera API via<br> <code>&lt;input accept=""&gt;</code></li>
+ </ul>
</section>
- <h2>
- <img src="./images/inapp-intro.png" alt="In-app Payments: It's all in the app.">
- </h2>
- <section class="dark overlay">
- <img src="./images/inapp-workflow-api.png" class="flat" width="1000">
- <h2 class="build"><a href="http://goo.gl/18ida" style="color: #FFF;">goo.gl/18ida</a></h2>
+ <figure class="overlay dark">
+ <a href="http://goo.gl/KLWzX"><img src="./images/offline.jpeg" width="1000" height="700"></a>
+ <h2>Offline Support</h2>
+ </figure>
+
+ <section>
+ <h1><code><a href="http://www.html5rocks.com/en/tutorials/appcache/beginner/">Appcache</a></code></h1>
+ <pre><code>
+CACHE MANIFEST
+index.html
+stylesheet.css
+images/logo.png
+scripts/main.js
+ </code></pre>
</section>
+
<section>
- <img src="./images/inapp-workflow-1.png">
+ <h1><code>localStorage</code></h1>
+ <pre><code>
+window.localStorage['key'] = 'string value';
+ </code></pre>
</section>
<section>
- <img src="./images/inapp-workflow-2.png">
+ <h1><code><a href="http://www.html5rocks.com/en/tutorials/webdatabase/todo/">WebSQL</a></code></h1>
+ <pre><code>
+var db = openDatabase('todo', '1.0', 5 * 1024 * 1024);
+db.transaction(function(tx){
+ tx.executeSql(
+ <strong>"INSERT INTO todo(todo, added_on) VALUES (?,?)",
+ ["Talk about Chrome.", new Date()],</strong>
+ onSuccessHandler,
+ onErrorHandler);
+ });
+ </code></pre>
</section>
<section>
- <img src="./images/inapp-workflow-3.png">
+ <h1><code><a href="http://www.html5rocks.com/en/tutorials/indexeddb/todo/">IndexedDB</a></code></h1>
+ <pre><code>
+var request = indexedDB.open("todo");
+request.onsuccess = function(e) {
+ var db = e.target.result;
+ var trans = db.transaction(["todo"],
+ IDBTransaction.READ_WRITE, 0);
+ <strong>var req = trans.objectStore("todo").put({
+ "text": todoText,
+ "timeStamp" : new Date().getTime()
+ });</strong>
+
+ req.onsuccess = onSuccessHandler;
+ req.onerror = onErrorHandler;
+};
+ </code></pre>
</section>
<section>
- <img src="./images/inapp-workflow-4.png">
+ <h1><code><a href="http://www.html5rocks.com/en/tutorials/file/filesystem/">Filesystem APIs</a></code></h1>
+ <pre><code>
+var fs = window.requestFileSystem(window.TEMPORARY,
+ 5*1024*1024, onInitFs, errorHandler);
+function onInitFs() {
+ fs.root.getFile(
+ 'log.txt',
+ {create: true, exclusive: true},
+ function(fileEntry) {
+ // fileEntry.isFile === true
+ // fileEntry.name == 'log.txt'
+ // fileEntry.fullPath == '/log.txt'
+ }, errorHandler);
+}
+ </code></pre>
</section>
+
<section>
- <h1 style="font-size:1em;">5%</h1>
+ <h1>Remote Debugging</h1>
+ <iframe width="853" height="480" src="https://www.youtube-nocookie.com/embed/s4zpL4VBbuU?rel=0" frameborder="0" allowfullscreen></iframe>
</section>
<section>
- <img src="./images/inapp-angrybirds.jpg" class="flat">
+ <ul class="blocklist">
+ <li>GPU diagnostics:<br><a href="chrome://gpu-internals">chrome://gpu-internals</a></li>
+ <li>AppCache debugging:<br><a href="chrome://appcache-internals">chrome://appcache-internals</a></li>
+ <li>Net stack debugging:<br><a href="chrome://net-internals">chrome://net-internals</a></li>
+ <li>Full list at <a href="about:about">about:about</a></li>
+ </ul>
</section>
+
<section>
- <img src="./static/logo/chromewebstore.png" class="flat">
- <ul class="overlay build" style="color: #111; font-weight: 700; top: 17%; left: 14%;width:72%;">
- <li>Getting Started with the Web Store: <a href="http://code.google.com/chrome/webstore/docs/get_started_simple.html">goo.gl/bok5J</a></li>
- <li>In-app Payment API: <a href="http://goo.gl/18ida">goo.gl/18ida</a></li>
- <li>Inline Install: <a href="http://goo.gl/qUH4M">goo.gl/qUH4M</a></li>
- <li>IAP Tutorial: <a href="http://code.google.com/apis/inapppayments/docs/tutorial.html">goo.gl/RFKeE</a></li>
- <li>AdSense for Games: <a href="http://goo.gl/sNo4n">goo.gl/sNo4n</a></li>
- <li><a href="http://html5rocks.com/">html5rocks.com</a></li>
+ <h1>We need your help!</h1>
+ <ul>
+ <li>Hammer on the beta, and file<br>bugs via <a href="http://new.mcrbug.com/">new.mcrbug.com</a></li>
+ <li style="margin-top:0.5em">Help us triage by starring<br>bugs at <a href="http://mcrbug.com/">mcrbug.com</a></li>
</ul>
</section>
@@ -282,7 +256,6 @@ <h1 style="font-size:1em;">5%</h1>
<h1 style="font-size:40em;line-height:1;">?</h1>
<p style="color: #666; font-weight: 700;">+Mike West (mkw.st/+) mkwst@google.com</p>
</section>
-
</article>
<script src="./static/slide_controller.js"></script>
<script>
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/static/logo/cloud.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
3  presentations/droidcon12-whats-new-in-android-the-web/static/slide_controller.js
@@ -245,6 +245,9 @@ SlideController.prototype = {
if (b) {
b.classList.remove('to-build');
b.classList.add('built');
+ if (!this.slides_[this.current].querySelector('.to-build')) {
+ this.slides_[this.current].classList.add('fully-built');
+ }
return b;
}
return null;
View
17 presentations/droidcon12-whats-new-in-android-the-web/static/slides.css
@@ -210,6 +210,11 @@ h1 {
color: #007DD6
}
+h1 a,
+h1 a:visited{
+ color: #007DD6
+}
+
img {
vertical-align: middle;
}
@@ -263,6 +268,7 @@ img.flat {
border-radius: 10px 10px 0 0;
}
+.overlay h1,
.overlay h2 {
background: rgba(255, 255, 255, 0.75);
bottom: 1em;
@@ -276,6 +282,7 @@ img.flat {
width: 920px;
}
+.dark.overlay h1,
.dark.overlay h2 {
background: rgba(0,0,0,0.75);
color: #EEE;
@@ -417,8 +424,6 @@ section blockquote + * {
.blocklist li {
text-align: left;
- font-size: 4rem;
- line-height: 150px;
}
.build {
@@ -426,13 +431,13 @@ section blockquote + * {
}
.to-build {
opacity: 0;
- -webkit-transition: opacity 0.25s ease-in-out 0.2s;
- transition: opacity 0.5s ease-in-out 0.2s;
+ -webkit-transition: all 0.25s ease-in-out 0.2s;
+ transition: all 0.5s ease-in-out 0.2s;
}
.built {
opacity: 1;
- -webkit-transition: opacity 0.25s ease-in-out 0.2s;
- transition: opacity 0.5s ease-in-out 0.2s;
+ -webkit-transition: all 0.25s ease-in-out 0.2s;
+ transition: all 0.5s ease-in-out 0.2s;
}
@media print {
Please sign in to comment.
Something went wrong with that request. Please try again.