Permalink
Browse files

First commit

  • Loading branch information...
0 parents commit 34ba587166f7225ac127a7dcddca9183791a5ae1 @TrevorBurnham committed Feb 1, 2012
Showing with 168 additions and 0 deletions.
  1. BIN Default.png
  2. +21 −0 Info.plist
  3. +33 −0 README.mdown
  4. +1 −0 js/script.js
  5. +28 −0 main.html
  6. +69 −0 main.js
  7. +16 −0 style.css
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+ <!-- Modify these properties as desired -->
+ <key>Width</key>
+ <integer>1024</integer>
+ <key>Height</key>
+ <integer>768</integer>
+ <key>MainHTML</key>
+ <string>main.html</string>
+
+ <!-- These are required, but have no user-facing effect -->
+ <key>CFBundleDevelopmentRegion</key>
+ <string>English</string>
+ <key>CFBundleIdentifier</key>
+ <string>com.trevorburnham.widgetboilerplate</string>
+ <key>CFBundleName</key>
+ <string>iBooks HTML Widget Boilerplate</string>
+</dict>
+</plist>
@@ -0,0 +1,33 @@
+# iBooks HTML Widget Boilerplate
+
+This is a minimal project for an HTML Widget that can be embedded in an iBook with iBooks Author.
+
+Created by the author of *[CoffeeScript: An Interactive Reference](http://click.linksynergy.com/fs-bin/stat?id=j5lGZbrn4Rg&offerid=243958&type=3&subid=0&tmpid=1826&RD_PARM1=http%253A%252F%252Fitunes.apple.com%252Fus%252Fbook%252Fcoffeescript%252Fid498532763%253Fmt%253D11%2526uo%253D4%2526partnerId%253D30)*, now available in the iBooks store.
+
+# Why?
+
+Because the recommended approach for creating an HTML widget for iBooks Author is currently to create a Dashboard widget in Dashcode. This adds a lot of distracting cruft, and things that work fine in Dashcode have a tendency to stop working in iBooks. In short, it's better to treat an iBooks widget as a web page rather than as a Dashboard widget.
+
+# Usage
+
+Clone this git repo as a directory with a `.wdgt` extension. Modify the HTML, CSS, and JavaScript with the tools of your choice, just as you would any other web page.
+
+Click-and-drag the `.wdgt` file into iBooks Author. And that's it!
+
+## Preview image
+
+Notice, however, that when you drag the `.wdgt` into iBooks Author, you just get an image that says "Preview." iBooks doesn't load anything from your HTML widget other than `Default.png` until the user taps it.
+
+If you just delete `Default.png`, iBooks Author will generate a preview automatically, but it probably won't have the proportions that you want, and some of the content may overflow. I recommend replacing `Default.png` with a nice screenshot of the widget, and cropped and scaled to the right dimensions. You should probably make this the last step in your book production process, and do without `Default.png` until then.
+
+## Widget dimensions
+
+Open up `Info.plist` to set the appropriate width and height for your widget. When opened on the iPad, the widget will be scaled to fit the screen but will maintain the correct width/height proportion. Also note that 1px in your markup refers to 1px according to the `Info.plist` dimensions, *not* the actual pixels on the device screen.
+
+Currently, HTML widgets can only be viewed in landscape orientation, so you'll probably want a size of 1024x768 adjusted slightly for the title, caption, and background margin that you can customize from the Widget inspector in iBooks Author like so:
+
+![Widget layout settings in iBooks Author](http://cl.ly/2t0u1A1o1N0Y1z2O3b44/Screen%20Shot%202012-01-30%20at%203.56.03%20PM.png)
+
+# License
+
+http://trevorburnham.mit-license.org/
@@ -0,0 +1 @@
+// Put your code here
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+ <!-- Replace this with your own markup -->
+ <h1>iBooks HTML Widget Boilerplate</h1>
+ <p>
+ This boilerplate was developed by
+ <a href="http://trevorburnham.com">Trevor Burnham</a> and is open-sourced
+ under the MIT License.
+ </p>
+
+ <p>
+ If you’ve found this project useful, please consider buying some of
+ Trevor's books: <em><a
+ href="http://pragprog.com/book/tbcoffee/coffeescript">CoffeeScript:
+ Accelerated JavaScript Development</a></em>, published by PragProg, and
+ <em><a href="http://click.linksynergy.com/fs-bin/stat?id=j5lGZbrn4Rg&offerid=243958&type=3&subid=0&tmpid=1826&RD_PARM1=http%253A%252F%252Fitunes.apple.com%252Fus%252Fbook%252Fcoffeescript%252Fid498532763%253Fmt%253D11%2526uo%253D4%2526partnerId%253D30">CoffeeScript: An interactive Reference</a></em> for
+ the iPad.
+ </p>
+
+ <script type="text/javascript" src="js/script.js" charset="utf-8"></script>
+</body>
+</html>
69 main.js
@@ -0,0 +1,69 @@
+/*
+ This file was generated by Dashcode.
+ You may edit this file to customize your widget or web page
+ according to the license.txt file included in the project.
+ */
+
+//
+// Function: load()
+// Called by HTML body element's onload event when the widget is ready to start
+//
+function load()
+{
+ window.console = {};
+ var consoleVal = '';
+ window.log = console.log = function() {
+ var args = Array.prototype.slice.call(arguments);
+ if (consoleVal !== '') consoleVal += '\n';
+ consoleVal += '> ' + args.join(' ');
+ $('#console')
+ .val(consoleVal)
+ .prop({scrollTop: $('#console').prop('scrollHeight') - $('#console').height()});
+ };
+
+ compile();
+ run();
+
+ $('#coffeeCode')
+ .keyup(compile)
+ .blur(run);
+
+ $('#run')
+ .mousedown(function() {
+ if ($('#coffeeCode').is(':focus')) return; // the blur will trigger run anyway
+ run();
+ });
+
+ var originalCoffee = $('#coffeeCode').val();
+ $('#reset')
+ .mousedown(function() {
+ $('#coffeeCode').val(originalCoffee);
+ compile();
+ });
+}
+
+var coffee, js;
+function compile()
+{
+ coffee = $('#coffeeCode').val();
+ try {
+ js = CoffeeScript.compile(coffee, {bare: true});
+ if (js[0] === '\n') js = js.slice(1)
+ $('#jsCode').val(js);
+ } catch (e) {
+ js = null;
+ var errString = e.toString().slice(7);
+ var colonIndex = errString.indexOf(':');
+ errString = errString.slice(0, colonIndex + 1) + '\n' + errString.slice(colonIndex + 2);
+ $('#jsCode').val(errString);
+ }
+}
+
+function run()
+{
+ try {
+ if (js) eval(js);
+ } catch (e) {
+ log(e);
+ }
+}
@@ -0,0 +1,16 @@
+/* Put your styles here */
+
+body {
+ background: #333;
+ color: #fff;
+ font-size: 1.5em;
+ padding: 50px;
+}
+
+h1 {
+ text-align: center;
+}
+
+a, a:active, a:visited {
+ color: #99f;
+}

0 comments on commit 34ba587

Please sign in to comment.