JavaScript Interactive Widgets for iBooks Author and the iPad

How to embed JavaScript in Interactive Widgets in iBooks Author for use on the iPad. Also looks at embedded JavaScript in the page when creating ePub files from scratch. Uses DashCode, Tumult Hype, Data Abstract, or your favorite text editor. Visit http://blogs.remobjects.com/?p=3862 for more information

Transcript

1. JavaScript Interactive Widgets for iBooks Author and the iPad Jim McKeeth RemObjects Software jim@remobjects.com @JimMcKeeth
2. Overview • iBooks Author Overview • JavaScript Interactive Widgets • Dashcode • Tumult Hype • Creating Widgets from Scratch • Hacking ePub
3. • Cross platform infrastructure tools • Data Abstract - Multi-tier database framework • RemObjects SDK - Remoting framework • Oxygene - Programming language for .NET, Java (Android) & Coming Soon: Cocoa & Cocoa Touch
4. Why Put CSS & JavaScript in a Book? • Provide updated data to go along with book topic • Allow real time collaboration between readers / students • Create interactive story books • Customize story to the reader • Collect quiz responses • Interesting animation effects • Add games & bonuses • Engage your readers • Track readers • Gather feedback • Sky’s the limit!
5. More Information • 4 Part Series on iBooks JavaScript Widgets • http://blogs.remobjects.com/?p=3862 • http://sn.im/ibooksjs • Possible 5th article in the future • Might become an iBook
6. iBooks Author
7. iBooks Author • Free in the Mac App Store • Extension on ePub 3 standard (non-compatible) • DRM and license only for iBooks on the iPad • Nice powerful and easy interface for building books • Be aware of orientations
8. Demo iBooks Author
9. Other Resources • Trimble SketchUp • www.sketchup.com • Free version creates .dae 3D models that work in iBooks Author
10. Dashcode
11. Dashcode • JavaScript, HTML and CSS Editor from Apple • For creating Dashboard widgets • Part of Xcode until Xcode 4.3 • Now a separate download: http://bit.ly/Dashcode Latest: “Late July” for Aug 7, 2012 - 3.0.5
12. Get Dashcode From Xcode Xcode / Open Developer Tool / More Developer Tools. . .
13. Demo Dashcode
14. Things to Remember 1. Backwards compatibility on, or parts disappear. 2. The back of the widget never gets displayed. 3. Text doesn’t show up in the default image unless you change the option in the inspector. 4. Dashcode text parts layout odd on the iPad. 5. Java and other plugins don’t work on the iPad.
15. Posting to Web Services • External web services must implement CORS • (Cross-Origin Resource Sharing) headers. • enable-cors.org • www.w3.org/TR/cors
16. Tumult Hype • HTML5 & JavaScript Multimedia Studio • Create JavaScript Powered Animations and Interactions • Creates Widgets Directly • Compatible with iBooks Author & the iPad • $49.99 in Mac App Store
17. Tumult Hype Demo
18. Creating from Scratch • Required files: • Main.html - Main HTML file (any name will work). • Default.png – Preview image and place holder. • Info.plist – Property list describing widget. References main HTML.
19. Required Properties • CFBundleIdentifier - Unique identifier • CFBundleName - Friendly name • MainHTML - The main HTML file
20. Info.plist <?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> ! <key>CFBundleIdentifier</key> ! <string>com.remobjects.da.gallery</string> ! <key>CFBundleName</key> ! <string>DA-Gallery</string> ! <key>MainHTML</key> ! <string>index.html</string> </dict> </plist>
21. Making a Package • Put all files in a directory - Subdirectories are OK (use relative paths for references). • Rename root directory .wdgt • Don’t Install Package! It gets deleted. Use Duplicate to test. • Context / Show Package Contents to edit.
22. Supported HTML5 Features • localStorage (per book - between widgets) • Geolocation (requests permission) • Canvas • CSS Animations • Others . . .
23. Prevent Flicker 1. Add a IBNotifiesOnReady item set to true in the Dashboard widget's info.plist file, so iBooks knows this Dashboard widget will tell it when to switch to displaying the running HTML widget. 2. Set your Dashboard widget to load the Apple javascript library. 3. In javascript call widget.notifyContentIsReady() to notify iBooks it can switch from showing the Default.png file to displaying the running HTML widget. http://support.apple.com/kb/HT5068
24. From Scratch Demos
25. Things to Remember 1. No JavaScript alert statements. 2. Double clicking a widget on desktop deletes it (installs it into the library). 3. The dimensions of your Default.png determine the dimensions of your widget. 4. All JavaScript libraries must be referenced from the Main HTML file, and in the package.
26. www.classwidgets.com • Custom Sliding Puzzle • Live Twitter Feed • Interactive Timeline Images • YouTube Video • Vimeo Video • Google Maps • Live Polling • More to come . . . • Auto-generated customized widgets ready to add to iBooks (or look at the code to figure out how they did it.) • Widgets are licensed under a Creative Commons Attribution- Noncommercial 3.0 Unported licensed. See also ibooksgenerator.com
27. Live Twitter feed in iBooks
28. Live Google Maps in iBooks
29. Creating an ePub from Scratch No iBooks Author, no Dashcode, just text editing!
30. International Digital Publishing Forum • Develops and maintains the EPUB content publication standard • idpf.org/epub • ePub 3.0 is current standard • October 2011 • Official support for JavaScript
31. 2.4.1 Scripting Contexts • container-constrained • An instance of the [HTML5] script element included in an EPUB Content Document that is embedded in a parent Content Document using one of the [HTML5] object, iframe or embed elements. • spine-level • An instance of the [HTML5] script element included in a Top-level Content Document. • JavaScript on the page itself! iBooks Author widgets are container-constrained
32. 2.4.2 Content Conformance • A container-constrained script must not contain instructions to: • modify the DOM of the parent Content Document • modify other contents in the Publication • manipulate the size of its containing rectangle • Container-constrained scripts
33. 2.4.2 Content Conformance • EPUB Content Documents that include spine-level scripting must utilize the progressive enhancement technique: • When rendered without scripting support document must retain its integrity, remaining consumable by the User without any information loss or other significant deterioration. • Use fallbacks! • iBooks doesn’t seem to allow network communications at spine-level • Spine-level scripts
34. The JavaScript epubReadingSystem Object • Syntax: • ReadingSystem = navigator.epubReadingSystem; • Properties: name, version, layoutStyle • Method: hasFeature(feature) • dom-manipulation, layout-changes, touch- events, mouse-events, keyboard-events, spine-scripting Appendix B
35. ePub Samples • Repository of ePub 3.0 sample documents • http://code.google.com/p/epub-samples/ • See “Scripted Content Documents” under the “Feature Matrix”
36. ePub Format • A zip file with epub extension • mimetype must be the first file in the zip • Container.xml references the opf file (which can be named anything) • All content files must be listed in the opf file • mimetype • iTunesMetadata.plist • META-INF • container.xml • EPUB • content.opf • content files Automatically added by iTunes
37. Content OPF <?xml version="1.0" encoding="UTF-8"?> <package xmlns="http://www.idpf.org/2007/opf" version="3.0" xml:lang="en" unique-identifier="uid" prefix="rendition: http://www.idpf.org/vocab/rendition/# cc: http://creativecommons.org/ns#"> <metadata xmlns:dc="http://purl.org/dc/elements/1.1/"> <dc:xxx>. . .</dc:xxx> </metadata> <manifest> <item>. . .</item> </manifest> <spine> <itemref ... /> </spine> </package>
38. Content OPF metadata •The metadata section describes the book <metadata xmlns:dc="http://purl.org/dc/elements/1.1/"> <dc:title id="title">JavaScript Test Book</dc:title> <dc:description>Test of spine-level scripting</dc:description> <dc:creator>Jim McKeeth</dc:creator> <dc:identifier id="uid">8181AEF2-CD21-4FE6-9AE8-9A83572FF4D</dc:identifier> <dc:language>en-US</dc:language> <meta property="dcterms:modified">2012-09-11T12:47:00Z</meta> <dc:rights>Licensed under a Creative Commons Attribution 3.0 License.</dc:rights> <link rel="cc:license" href="http://creativecommons.org/licenses/by-sa/3.0/"/> </metadata>
39. Content OPF manifest •The manifest section must list all other files in the ePub. •There must be exactly one with property “nav” and up to one “cover-image” •The “scripted” property indicates the page executes JavaScript. <manifest> <item id="i" href="main.xhtml" media-type="application/xhtml+xml" properties="scripted"/> <item id="nav" href="nav.xhtml" media-type="application/xhtml+xml" properties="nav"/> <item id="prt" href="default.png" media-type="image/png" properties="cover-image"/> <item id="first" href="first.jpg" media-type="image/jpeg"/> <item id="css" href="ro.css" media-type="text/css"/> <item id="scrpt" href="main.js" media-type="application/javascript"/> <item id="scrpt-da" href="DataAbstract.js" media-type="application/javascript"/> <item id="scrpt-da-intf" href="DataAbstract4_intf.js" media-type="application/javascript"/> <item id="scrpt-ro" href="RemObjectsSDK.js" media-type="application/javascript"/> </manifest>
40. Content OPF spine •Must list all “sections” on the spine. Includes chapters, preface, glossary, etc. •The idref value is defined in the manifest section <spine> <itemref idref="i" properties="rendition:layout-reflowable rendition:spread-auto"/> </spine>
41. Zipping an ePub • zip -X ../epubfile.epub mimetype • zip ../epubfile.epub META-INF/* • zip -r ../epubfile.epub EPUB/* • unzip -l ../epubfile.epub http://idpf.org/epub/30/spec/epub30-ocf.html mimetype must be the first file. Any folder(s) with “content” Lists the contents for verification
42. ePub Validator • EpubCheck • validator.idpf.org (web based) • code.google.com/p/epubcheck/ (download - Java) Download and include call in your script to zip your ePub!
43. From Scratch ePub Demo
44. Other Possible Resources • Threepress Consulting Blog • http://blog.threepress.org/ • ePub Straight to the Point by Elizabeth Castro • http://www.elizabethcastro.com/epub/ Have not read, but was recommended.
45. Other Possible Tools • ePub Compiler - New • https://github.com/minimalprocedure/epub-compiler • Sigil - WYSIWYG ePub editor • http://code.google.com/p/sigil/ • eCub - ePub editor • http://www.juliansmart.com/ecub Don’t handle JavaScript
46. More Information • 4 Part Series on iBooks JavaScript Widgets • http://sn.im/ibooksjs • Possible 5th article in the future • Might become an iBook • jim@remobjects.com or @JimMcKeeth