manifest and rough draft finished

subelsky · Apr 15, 2011 · 26341e4 · 26341e4
1 parent c3ae4bb
commit 26341e4
Show file tree

Hide file tree

Showing 13 changed files with 9,519 additions and 0 deletions.
diff --git a/README.markdown b/README.markdown
@@ -420,3 +420,63 @@ Or just use a different browser.
 3. You should see the worker immediately post a response to the console. Try increasing the size of the number you pass to worker.postMessage until you get something that takes awhile to run. Notice
 that your web page continues to be responsive even as this task runs in the background.
 
+# EXERCISE TWELVE
+## Offline Apps
+
+1. Examine the `index.html` file in the `manifest` directory. This is a stripped-down version of the exercise 11 solution. Check out the `<html>` tag which now includes a reference to `demo.manifest.`
+
+2. Examine `demo.manifest`.
+
+3. If you have a packet sniffer, start it sniffing on port 80. Otherwise, make sure your JavaScript console is recording network traffic.
+
+4. Now visit [http://files.subelsky.com/manifestdemo/index.html](http://files.subelsky.com/manifestdemo/index.html) where this example is uploaded.
+
+5. In your packet sniffer or JavaScript console, note that all files are being downloaded, and note the MIME type of the `demo.manifest` file (`text/cache-manifest`).
+
+6. Now reload the page. If all goes well, the only traffic you'll see moving along the wire is a request to check the demo.manifest file, which doesn't even get downloaded since it is unchanged 
+(because of the `304` HTTP response status code). *Actually you may also see a request for a favicon.ico file. If we had one, we could add it to the demo.manifest file as well and then this request would be supressed as well.*
+
+This is the same technique you can use to make an HTML5 app "installable" on a smart phone. Unfortunately when I tried this on iOS, it does not store the audio files offline, so the demo is less impressive.
+
+## Extra Credit
+
+Get `manifest/index.html` running on your dev machine. All you need to do is serve up the directory from the webserver (vs. from `file://`), and make sure the manifest file has the right MIME type. In Apache,
+I added this directive:
+
+    AddType text/cache-manifest .manifest
+
+# STUFF THAT DID NOT FIT
+
+Here are some other "HTML5-ish" features that you should be aware of that didn't fit into this tutorial or are too bleeding-edge to be used reliably:
+
+* [Microdata](http://diveintohtml5.org/extensibility.html)
+
+* [WebGL](http://www.queness.com/post/7459/8-stunning-javascript-webgl-demonstrations)
+
+* [HTML5 History API](http://html5demos.com/history/)
+
+* [Alternatives to websockets](http://html5doctor.com/methods-of-communication/)
+
+* [Polyfills to get HTML5 features working across browsers](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills) and also [Uber](http://html5doctor.com/how-to-get-all-the-browsers-playing-ball/)
+
+# USEFUL URLs
+
+* [Dive Into HTML5](http://diveintohtml5.org/)
+
+* [HTML5 Doctor](http://html5doctor.com/)
+
+* [HTML5 Demos](http://html5demos.com/)
+
+* [HTML5 Rocks](http://www.html5rocks.com/)
+
+* [Mozilla Canvas Tutorials](https://developer.mozilla.org/en/Canvas_tutorial)
+
+* [WHATWG Living Standard](http://www.whatwg.org/specs/web-apps/current-work/multipage/)
+
+# KEEP IN TOUCH
+
+Thanks for coming to my tutorial! I hope it was helpful. You can reach me at [mike@subelsky.com](mailto:mike@subelsky.com), or follow me on [twitter](http://twitter.com/subelsky).
+
+# SHAMELESS PLUG
+
+I'm building a game for programmers using much of the technology discussed here. If you'd like to signup for the beta, I'd love to get your feedback. Visit [###](http://example.com) to signup for the beta.
diff --git a/manifest/demo.manifest b/manifest/demo.manifest
@@ -0,0 +1,12 @@
+CACHE MANIFEST
+index.html
+js/libs/modernizr-1.7.js
+js/libs/jquery-1.5.2.js
+js/tutorial.js
+media/characters.gif
+media/bubble.ogg
+media/bubble.mp3
+media/bubble.wav
+media/ray_gun.ogg
+media/ray_gun.mp3
+media/ray_gun.wav
diff --git a/manifest/index.html b/manifest/index.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html class="no-js" lang="en" manifest="demo.manifest">
+<head>
+  <meta charset="utf-8">
+  <title>HTML5 Beyond the Buzzwords</title>
+  <script src="js/libs/modernizr-1.7.js"></script>
+  <style>
+    canvas { 
+      background-color: black;
+    }
+
+    input { display: block; }
+  </style>
+</head>
+
+<body>
+  <div id="container">
+    <header>
+    <h1>Manifest Demo</h1>
+    </header>
+    <input id="username" placeholder="Your name">
+
+    <ul>
+      <li><a href="#" data-soundname='bubble'>Play Bubble</a></li>
+      <li><a href="#" data-soundname='ray_gun'>Play Ray Gun</a></li>
+    </ul>
+
+    <canvas id="main" width="800" height="800"></canvas>
+    <footer>
+
+    </footer>
+  </div>
+  <script src="js/libs/jquery-1.5.2.js"></script>
+  <script src="js/tutorial.js"></script>
+
+  <div>
+    <audio id="bubble" preload controls>
+      <source src="media/bubble.ogg">
+      <source src="media/bubble.mp3">
+      <source src="media/bubble.wav">
+    </audio>
+    <audio id="ray_gun" preload controls>
+      <source src="media/ray_gun.ogg">
+      <source src="media/ray_gun.mp3">
+      <source src="media/ray_gun.wav">
+    </audio>
+  </div>
+
+</body>
+</html>