SlideShare a Scribd company logo
1 of 55
Download to read offline
Hacking iBooks and EPUB
with JavaScript!
Jim McKeeth
jim@mckeeth.org
@JimMcKeeth
What 400 Level Means
• Assumed understanding of JavaScript and HTML5 web technologies.
• More examples and less explanation.
• Please ask questions as we go.
About Jim McKeeth
• Lead Developer Evangelist for EmbarcaderoTechnologies
• Delphi XE5 creates native iOS & Android apps from same code
• Improvisational performer with ComedySportz Boise
• Inventor of pattern and swipe to unlock
• US Patent #s 6,766,456 & 8,352,745 . . . (First patented in 2000)
• Used on iOS,Android and Windows 8
Why Put 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!
Overview
• JavaScript Interactive Widgets
• Dashcode
• Tumult Hype
• Creating Widgets from Scratch
• Creating ePub from Scratch
• Cracking ePub
More Information
• 4 Part Series on iBooks JavaScript Widgets
• http://sn.im/ibooksjs
iBooks Author 2
• 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
iBooks / ePub Technical Details
• Zip file of HTML5 content adhering to specific spec.
• 2 GB technical book size limit
• 200 MB recommended size
• iBooks IBA files encrypt the page content
• All resources must be included!
3D Models
• 20,000 to 50,000 moderately textured polygons
• Textures <= 1024x1024
• Use COLLADA (.dae) file format
• Specify a camera
• Simple lighting
• http://support.apple.com/kb/ht5093
3D Models
• Trimble SketchUp Make
• www.sketchup.com
• Free version creates .dae 3D models that
work in iBooks Author
• http://www.sketchup.com/products/3D-warehouse
3D Model Demo
Dashcode
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
Demo Dashcode
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.
Posting to Web Services
• External web services must implement CORS
• (Cross-Origin Resource Sharing) headers.
• enable-cors.org
• www.w3.org/TR/cors
Tumult Hype 2
• HTML5 & JavaScript Multimedia Studio
• Create JavaScript Powered Animations and Interactions
• Creates Widgets Directly
• Compatible with iBooks Author & the iPad
• $59.99 in Mac App Store (on sale $29.99 through Sept 10th)
Tumult Hype Demo
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.
http://support.apple.com/kb/HT5068
Required Properties
• CFBundleIdentifier - Unique identifier
• CFBundleName - Friendly name
• MainHTML -The main HTML file
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.360idev.gallery</string>
! <key>CFBundleName</key>
! <string>Gallery</string>
! <key>MainHTML</key>
! <string>index.html</string>
</dict>
</plist>
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.
Supported HTML5 Features
• localStorage (per book - between widgets)
• Geolocation (requests permission)
• Canvas
• CSS Animations
• Others . . .
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
From Scratch Demos
Things to Remember
1. Double clicking a widget on desktop deletes it
(installs it into the library).
2. The aspect ratio of your Default.png
determine the aspect ratio of your widget.
3. All JavaScript libraries must be referenced from
the Main HTML file, and in the package.
bookry.com
• Custom Sliding Puzzle
• LiveTwitter Feed
• InteractiveTimeline Images
• YouTubeVideo
• VimeoVideo
• 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.)
• Free license includes “branding”
See also ibooksgenerator.com
Live Twitter feed in iBooks
Live Google Maps in iBooks
Creating an ePub from Scratch
No iBooks Author, no Dashcode, just text editing!
Disclaimer
• So far I have been unable to access online content
without using iBooks Author.
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
Progressive Enhancements
& Fallbacks
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
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
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
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 
preventDefault
• Use to “override” the default behavior of the reading system.
• If you have a touch zone near the edge of the screen, this gives you
the touch event instead of turning the page.
• Turn off for whole document:
• document.addEventListener('touchmove', function (e) {e.preventDefault();},
false);
• In individual event handler:
• event.preventDefault();
ePub Samples
• Repository of ePub 3.0 sample documents
• http://code.google.com/p/epub-samples/
• See “Scripted Content Documents” under the “Feature Matrix”
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
• OPS
• content.opf
• content files
Automatically
added by iTunes
but not needed.
mimetype
• First file in zip - uncompressed
• No Unicode signature or byte order mark
• Only contain
• application/epub+zip
container.xml
<?xml version="1.0" encoding="UTF-8"?>
<container
xmlns="urn:oasis:names:tc:opendocument:xmlns:container"
version="1.0">
<rootfiles>
<rootfile
full-path="OPS/content.opf"
media-type="application/oebps-package+xml"/>
</rootfiles>
</container>
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>
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>
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="jq" href="jQuery.js" media-type="application/javascript"/>
</manifest>
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>
Zipping an ePub
• zip -X ../epubfile.epub mimetype
• zip ../epubfile.epub META-INF/*
• zip -r ../epubfile.epub OPS/*
• unzip -l ../epubfile.epub
http://idpf.org/epub/30/spec/epub30-ocf.html
mimetype must be the
first file (uncompressed).
Any folder(s) with
“content”
Lists the contents for
verification
ePubValidator
• EpubCheck
• validator.idpf.org (web based)
• code.google.com/p/epubcheck/ (download - Java)
Download and include call in
your script to zip your ePub!
iBooks Fixed Layout Format
• Use a separate XHTML document for each Fixed Layout page.
• Use CSS relative and/or absolute positioning to place text and images
on a page.
• Include the height and width of the page in a viewport meta tag in
the head of each XHTML document. (used for aspect ratio)
<head>  
        <title>Fixed Layout Example</title>
        <meta content="text/html; charset=UTF-8"/>
        <link href="css/stylesheet.css" type="text/css" rel="stylesheet"/>
        <meta name="viewport" content="width=575, height=432"/>
</head>
From Scratch ePub Demo
Cracking ePub
iBooks DRM Decrypt
• iTunes 10.5.3.3 x64 (as close as possible)
• http://www.oldversion.com/windows/itunes/
• Requiem 3.3.6
• https://tag3ulp55xczs3pn.onion.to/ (viaTor)
M
ustbe
these
versionsworkingtogether.
Run
itin
an
XPVirtualM
achine.
Other ePub Books
• Calibre
• http://calibre-ebook.com/ (eBook conversion and management)
• DeDRM plugins
• http://apprenticealf.wordpress.com/ 6.05 is latest
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.
More Information
• 4 Part Series on iBooks JavaScript Widgets
• http://sn.im/ibooksjs
• Might become an iBook
• jim@mckeeth.org or @JimMcKeeth

More Related Content

What's hot

cognitive stylistics
cognitive stylisticscognitive stylistics
cognitive stylisticsElia bhutto
 
Lesson plan 4 intermediate EFL
Lesson plan 4 intermediate EFLLesson plan 4 intermediate EFL
Lesson plan 4 intermediate EFLVeronica Herrera
 
Psycholinguistics : Discourse Comprehension and Memory
Psycholinguistics : Discourse Comprehension and MemoryPsycholinguistics : Discourse Comprehension and Memory
Psycholinguistics : Discourse Comprehension and Memorytranslatoran
 
Literacy practices in the classroom
Literacy practices in  the classroomLiteracy practices in  the classroom
Literacy practices in the classroomEsmeralda Sisa Nobsa
 
Evaluating an eTwinning project: the QL criteria, Irene Pateraki, GR NSS
Evaluating an eTwinning project: the QL criteria, Irene Pateraki, GR NSSEvaluating an eTwinning project: the QL criteria, Irene Pateraki, GR NSS
Evaluating an eTwinning project: the QL criteria, Irene Pateraki, GR NSSIrene Pateraki
 
Multiliteracies and TEFL
Multiliteracies and TEFLMultiliteracies and TEFL
Multiliteracies and TEFLDavid R Cole
 
Language universals
Language universalsLanguage universals
Language universalsMaryam Zahra
 
Characteristic of an emergent writer
Characteristic of an emergent writer  Characteristic of an emergent writer
Characteristic of an emergent writer Jerick Lagrimas
 
Introduction to CALL
Introduction to CALL Introduction to CALL
Introduction to CALL ICTesol
 
Lesson plan reading
Lesson plan readingLesson plan reading
Lesson plan readingmalimperman
 
Custom PDFs from the DITA OT
Custom PDFs from the DITA OTCustom PDFs from the DITA OT
Custom PDFs from the DITA OTLeigh White
 
A2 English Literature & Language - Practical & Stylistics
A2 English Literature & Language - Practical & StylisticsA2 English Literature & Language - Practical & Stylistics
A2 English Literature & Language - Practical & Stylisticsfoxfordmsc
 
FAIR Computational Workflows
FAIR Computational WorkflowsFAIR Computational Workflows
FAIR Computational Workflows Carole Goble
 

What's hot (20)

cognitive stylistics
cognitive stylisticscognitive stylistics
cognitive stylistics
 
Lesson plan 4 intermediate EFL
Lesson plan 4 intermediate EFLLesson plan 4 intermediate EFL
Lesson plan 4 intermediate EFL
 
COMPUTATIONAL LINGUISTICS.pptx
COMPUTATIONAL LINGUISTICS.pptxCOMPUTATIONAL LINGUISTICS.pptx
COMPUTATIONAL LINGUISTICS.pptx
 
CLIL lesson planning
CLIL lesson planningCLIL lesson planning
CLIL lesson planning
 
Psycholinguistics : Discourse Comprehension and Memory
Psycholinguistics : Discourse Comprehension and MemoryPsycholinguistics : Discourse Comprehension and Memory
Psycholinguistics : Discourse Comprehension and Memory
 
REALIA FIFTH SEMESTER
REALIA FIFTH SEMESTERREALIA FIFTH SEMESTER
REALIA FIFTH SEMESTER
 
Cognitive stylistics
Cognitive stylisticsCognitive stylistics
Cognitive stylistics
 
Literacy practices in the classroom
Literacy practices in  the classroomLiteracy practices in  the classroom
Literacy practices in the classroom
 
Evaluating an eTwinning project: the QL criteria, Irene Pateraki, GR NSS
Evaluating an eTwinning project: the QL criteria, Irene Pateraki, GR NSSEvaluating an eTwinning project: the QL criteria, Irene Pateraki, GR NSS
Evaluating an eTwinning project: the QL criteria, Irene Pateraki, GR NSS
 
Multiliteracies and TEFL
Multiliteracies and TEFLMultiliteracies and TEFL
Multiliteracies and TEFL
 
Multilingual brain
Multilingual brain Multilingual brain
Multilingual brain
 
Lia conference dc_colored
Lia conference dc_coloredLia conference dc_colored
Lia conference dc_colored
 
Language universals
Language universalsLanguage universals
Language universals
 
Characteristic of an emergent writer
Characteristic of an emergent writer  Characteristic of an emergent writer
Characteristic of an emergent writer
 
Technology in EFL - ESL
Technology in EFL - ESLTechnology in EFL - ESL
Technology in EFL - ESL
 
Introduction to CALL
Introduction to CALL Introduction to CALL
Introduction to CALL
 
Lesson plan reading
Lesson plan readingLesson plan reading
Lesson plan reading
 
Custom PDFs from the DITA OT
Custom PDFs from the DITA OTCustom PDFs from the DITA OT
Custom PDFs from the DITA OT
 
A2 English Literature & Language - Practical & Stylistics
A2 English Literature & Language - Practical & StylisticsA2 English Literature & Language - Practical & Stylistics
A2 English Literature & Language - Practical & Stylistics
 
FAIR Computational Workflows
FAIR Computational WorkflowsFAIR Computational Workflows
FAIR Computational Workflows
 

Viewers also liked

DITA, HTML5, and EPUB3 (Content Agility, June 2013)
DITA, HTML5, and EPUB3 (Content Agility, June 2013)DITA, HTML5, and EPUB3 (Content Agility, June 2013)
DITA, HTML5, and EPUB3 (Content Agility, June 2013)Contrext Solutions
 
EPUB3 Now! at IDPF 2013 Digital Book
EPUB3 Now! at IDPF 2013 Digital BookEPUB3 Now! at IDPF 2013 Digital Book
EPUB3 Now! at IDPF 2013 Digital Bookliz_castro
 
EPUB3で変わる電子書籍の表現力
EPUB3で変わる電子書籍の表現力 EPUB3で変わる電子書籍の表現力
EPUB3で変わる電子書籍の表現力 Youji Sakai
 
북페이스 사업계획서 20150708
북페이스 사업계획서 20150708북페이스 사업계획서 20150708
북페이스 사업계획서 20150708Abigail Hyome Choi
 
ePUB 3 and Publishing e-books
ePUB 3 and Publishing e-booksePUB 3 and Publishing e-books
ePUB 3 and Publishing e-booksKerem Karatal
 
세계 전자책 시장은 어떻게 움직이는가
세계 전자책 시장은 어떻게 움직이는가세계 전자책 시장은 어떻게 움직이는가
세계 전자책 시장은 어떻게 움직이는가Young Woong Ra
 
Getting started with Clojure
Getting started with ClojureGetting started with Clojure
Getting started with ClojureJohn Stevenson
 
進化するオープンソース・エンタープライズCMSがWeb戦略を変える
進化するオープンソース・エンタープライズCMSがWeb戦略を変える進化するオープンソース・エンタープライズCMSがWeb戦略を変える
進化するオープンソース・エンタープライズCMSがWeb戦略を変えるHishikawa Takuro
 
Powerpoint Egipto y MP
Powerpoint Egipto y MPPowerpoint Egipto y MP
Powerpoint Egipto y MPKata Nuñez
 
Timmy's Tea Shop Photo Essay
Timmy's Tea Shop Photo EssayTimmy's Tea Shop Photo Essay
Timmy's Tea Shop Photo EssayISYGrade6
 
Web conferencing
Web conferencingWeb conferencing
Web conferencingmazyooonah
 
Developer skills levels
Developer skills levelsDeveloper skills levels
Developer skills levelsFabio Arias
 
Be safe on Facebook
Be safe on FacebookBe safe on Facebook
Be safe on FacebookFollowSunday
 

Viewers also liked (20)

DITA, HTML5, and EPUB3 (Content Agility, June 2013)
DITA, HTML5, and EPUB3 (Content Agility, June 2013)DITA, HTML5, and EPUB3 (Content Agility, June 2013)
DITA, HTML5, and EPUB3 (Content Agility, June 2013)
 
EPUB3 Now! at IDPF 2013 Digital Book
EPUB3 Now! at IDPF 2013 Digital BookEPUB3 Now! at IDPF 2013 Digital Book
EPUB3 Now! at IDPF 2013 Digital Book
 
EPUB3で変わる電子書籍の表現力
EPUB3で変わる電子書籍の表現力 EPUB3で変わる電子書籍の表現力
EPUB3で変わる電子書籍の表現力
 
HTML5와 전자책, 융합 서비스로 발전 현황
HTML5와 전자책, 융합 서비스로 발전 현황HTML5와 전자책, 융합 서비스로 발전 현황
HTML5와 전자책, 융합 서비스로 발전 현황
 
북페이스 사업계획서 20150708
북페이스 사업계획서 20150708북페이스 사업계획서 20150708
북페이스 사업계획서 20150708
 
ePUB 3 and Publishing e-books
ePUB 3 and Publishing e-booksePUB 3 and Publishing e-books
ePUB 3 and Publishing e-books
 
세계 전자책 시장은 어떻게 움직이는가
세계 전자책 시장은 어떻게 움직이는가세계 전자책 시장은 어떻게 움직이는가
세계 전자책 시장은 어떻게 움직이는가
 
Getting started with Clojure
Getting started with ClojureGetting started with Clojure
Getting started with Clojure
 
Epub3 potential (dbw2013)
Epub3 potential (dbw2013)Epub3 potential (dbw2013)
Epub3 potential (dbw2013)
 
Quality limited
Quality limitedQuality limited
Quality limited
 
進化するオープンソース・エンタープライズCMSがWeb戦略を変える
進化するオープンソース・エンタープライズCMSがWeb戦略を変える進化するオープンソース・エンタープライズCMSがWeb戦略を変える
進化するオープンソース・エンタープライズCMSがWeb戦略を変える
 
Powerpoint Egipto y MP
Powerpoint Egipto y MPPowerpoint Egipto y MP
Powerpoint Egipto y MP
 
Timmy's Tea Shop Photo Essay
Timmy's Tea Shop Photo EssayTimmy's Tea Shop Photo Essay
Timmy's Tea Shop Photo Essay
 
Web conferencing
Web conferencingWeb conferencing
Web conferencing
 
Developer skills levels
Developer skills levelsDeveloper skills levels
Developer skills levels
 
CSRF
CSRFCSRF
CSRF
 
Be safe on Facebook
Be safe on FacebookBe safe on Facebook
Be safe on Facebook
 
Romer1986
Romer1986Romer1986
Romer1986
 
Presentacion tic 2
Presentacion tic 2Presentacion tic 2
Presentacion tic 2
 
Marco Talluri
Marco TalluriMarco Talluri
Marco Talluri
 

Similar to Hacking iBooks and ePub3 with JavaScript!

How to start developing apps for Firefox OS
How to start developing apps for Firefox OSHow to start developing apps for Firefox OS
How to start developing apps for Firefox OSbenko
 
Jetpack SDK: The new possibility of the extensions on browser
Jetpack SDK: The new possibility of the extensions on browserJetpack SDK: The new possibility of the extensions on browser
Jetpack SDK: The new possibility of the extensions on browserlittlebtc
 
MozTW Jetpack Workshop: Taichung
MozTW Jetpack Workshop: TaichungMozTW Jetpack Workshop: Taichung
MozTW Jetpack Workshop: Taichunglittlebtc
 
Front end for back end developers
Front end for back end developersFront end for back end developers
Front end for back end developersWojciech Bednarski
 
MozTW Jetpack Workshop: Taipei
MozTW Jetpack Workshop: TaipeiMozTW Jetpack Workshop: Taipei
MozTW Jetpack Workshop: Taipeilittlebtc
 
The Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has ArrivedThe Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has ArrivedGil Fink
 
Web Development with Delphi and React - ITDevCon 2016
Web Development with Delphi and React - ITDevCon 2016Web Development with Delphi and React - ITDevCon 2016
Web Development with Delphi and React - ITDevCon 2016Marco Breveglieri
 
Instagram filters (8 24)
Instagram filters (8 24)Instagram filters (8 24)
Instagram filters (8 24)Ivy Rueb
 
Mobile ECM with JavaScript - JSE 2011
Mobile ECM with JavaScript - JSE 2011Mobile ECM with JavaScript - JSE 2011
Mobile ECM with JavaScript - JSE 2011Nuxeo
 
Masterin Large Scale Java Script Applications
Masterin Large Scale Java Script ApplicationsMasterin Large Scale Java Script Applications
Masterin Large Scale Java Script ApplicationsFabian Jakobs
 
Instagram filters (8 24)
Instagram filters (8 24)Instagram filters (8 24)
Instagram filters (8 24)Ivy Rueb
 
Build Reusable Web Components using HTML5 Web cComponents
Build Reusable Web Components using HTML5 Web cComponentsBuild Reusable Web Components using HTML5 Web cComponents
Build Reusable Web Components using HTML5 Web cComponentsGil Fink
 
Make Mobile Apps Quickly
Make Mobile Apps QuicklyMake Mobile Apps Quickly
Make Mobile Apps QuicklyGil Irizarry
 
LEARNING  iPAD STORYBOARDS IN OBJ-­‐C LESSON 1
LEARNING	 iPAD STORYBOARDS IN OBJ-­‐C LESSON 1LEARNING	 iPAD STORYBOARDS IN OBJ-­‐C LESSON 1
LEARNING  iPAD STORYBOARDS IN OBJ-­‐C LESSON 1Rich Helton
 
Adobe phonegap-workshop-2013
Adobe phonegap-workshop-2013Adobe phonegap-workshop-2013
Adobe phonegap-workshop-2013Haig Armen
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven developmentGil Fink
 
BP-9 Share Customization Best Practices
BP-9 Share Customization Best PracticesBP-9 Share Customization Best Practices
BP-9 Share Customization Best PracticesAlfresco Software
 
Building mobile apps with PhoneGap and Backbone
Building mobile apps with PhoneGap and BackboneBuilding mobile apps with PhoneGap and Backbone
Building mobile apps with PhoneGap and BackboneTroy Miles
 

Similar to Hacking iBooks and ePub3 with JavaScript! (20)

How to start developing apps for Firefox OS
How to start developing apps for Firefox OSHow to start developing apps for Firefox OS
How to start developing apps for Firefox OS
 
Jetpack SDK: The new possibility of the extensions on browser
Jetpack SDK: The new possibility of the extensions on browserJetpack SDK: The new possibility of the extensions on browser
Jetpack SDK: The new possibility of the extensions on browser
 
MozTW Jetpack Workshop: Taichung
MozTW Jetpack Workshop: TaichungMozTW Jetpack Workshop: Taichung
MozTW Jetpack Workshop: Taichung
 
Front end for back end developers
Front end for back end developersFront end for back end developers
Front end for back end developers
 
MozTW Jetpack Workshop: Taipei
MozTW Jetpack Workshop: TaipeiMozTW Jetpack Workshop: Taipei
MozTW Jetpack Workshop: Taipei
 
The Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has ArrivedThe Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has Arrived
 
Web Development with Delphi and React - ITDevCon 2016
Web Development with Delphi and React - ITDevCon 2016Web Development with Delphi and React - ITDevCon 2016
Web Development with Delphi and React - ITDevCon 2016
 
Instagram filters (8 24)
Instagram filters (8 24)Instagram filters (8 24)
Instagram filters (8 24)
 
Mobile ECM with JavaScript - JSE 2011
Mobile ECM with JavaScript - JSE 2011Mobile ECM with JavaScript - JSE 2011
Mobile ECM with JavaScript - JSE 2011
 
Masterin Large Scale Java Script Applications
Masterin Large Scale Java Script ApplicationsMasterin Large Scale Java Script Applications
Masterin Large Scale Java Script Applications
 
Welcome to React.pptx
Welcome to React.pptxWelcome to React.pptx
Welcome to React.pptx
 
Instagram filters (8 24)
Instagram filters (8 24)Instagram filters (8 24)
Instagram filters (8 24)
 
Titanium Alloy Tutorial
Titanium Alloy TutorialTitanium Alloy Tutorial
Titanium Alloy Tutorial
 
Build Reusable Web Components using HTML5 Web cComponents
Build Reusable Web Components using HTML5 Web cComponentsBuild Reusable Web Components using HTML5 Web cComponents
Build Reusable Web Components using HTML5 Web cComponents
 
Make Mobile Apps Quickly
Make Mobile Apps QuicklyMake Mobile Apps Quickly
Make Mobile Apps Quickly
 
LEARNING  iPAD STORYBOARDS IN OBJ-­‐C LESSON 1
LEARNING	 iPAD STORYBOARDS IN OBJ-­‐C LESSON 1LEARNING	 iPAD STORYBOARDS IN OBJ-­‐C LESSON 1
LEARNING  iPAD STORYBOARDS IN OBJ-­‐C LESSON 1
 
Adobe phonegap-workshop-2013
Adobe phonegap-workshop-2013Adobe phonegap-workshop-2013
Adobe phonegap-workshop-2013
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven development
 
BP-9 Share Customization Best Practices
BP-9 Share Customization Best PracticesBP-9 Share Customization Best Practices
BP-9 Share Customization Best Practices
 
Building mobile apps with PhoneGap and Backbone
Building mobile apps with PhoneGap and BackboneBuilding mobile apps with PhoneGap and Backbone
Building mobile apps with PhoneGap and Backbone
 

More from Jim McKeeth

Announcing Codolex 2.0 from GDK Software
Announcing Codolex 2.0 from GDK SoftwareAnnouncing Codolex 2.0 from GDK Software
Announcing Codolex 2.0 from GDK SoftwareJim McKeeth
 
Smart Contracts - The Blockchain Beyond Bitcoin
Smart Contracts - The Blockchain Beyond BitcoinSmart Contracts - The Blockchain Beyond Bitcoin
Smart Contracts - The Blockchain Beyond BitcoinJim McKeeth
 
Rapid Prototyping Mobile IoT Projects with Arduino and Open Hardware
Rapid Prototyping Mobile IoT Projects with Arduino and Open HardwareRapid Prototyping Mobile IoT Projects with Arduino and Open Hardware
Rapid Prototyping Mobile IoT Projects with Arduino and Open HardwareJim McKeeth
 
Day 3 of C++ Boot Camp - C++11 Language Deep Dive
Day 3 of C++ Boot Camp - C++11 Language Deep DiveDay 3 of C++ Boot Camp - C++11 Language Deep Dive
Day 3 of C++ Boot Camp - C++11 Language Deep DiveJim McKeeth
 
Day 5 of C++ Boot Camp - Stepping Up to Mobile
Day 5 of C++ Boot Camp - Stepping Up to MobileDay 5 of C++ Boot Camp - Stepping Up to Mobile
Day 5 of C++ Boot Camp - Stepping Up to MobileJim McKeeth
 
Android Services Skill Sprint
Android Services Skill SprintAndroid Services Skill Sprint
Android Services Skill SprintJim McKeeth
 
Creating Android Services with Delphi and RAD Studio 10 Seattle
Creating Android Services with Delphi and RAD Studio 10 SeattleCreating Android Services with Delphi and RAD Studio 10 Seattle
Creating Android Services with Delphi and RAD Studio 10 SeattleJim McKeeth
 
Building a Thought Controlled Drone
Building a Thought Controlled DroneBuilding a Thought Controlled Drone
Building a Thought Controlled DroneJim McKeeth
 
Deep Dive into Futures and the Parallel Programming Library
Deep Dive into Futures and the Parallel Programming LibraryDeep Dive into Futures and the Parallel Programming Library
Deep Dive into Futures and the Parallel Programming LibraryJim McKeeth
 
Embarcadero's Connected Development
Embarcadero's Connected DevelopmentEmbarcadero's Connected Development
Embarcadero's Connected DevelopmentJim McKeeth
 
The Internet of Things and You - A Developers Guide to IoT
The Internet of Things and You - A Developers Guide to IoTThe Internet of Things and You - A Developers Guide to IoT
The Internet of Things and You - A Developers Guide to IoTJim McKeeth
 
Accessing REST & Backend as a Service (BaaS) - Developer Direct - Mobile Summ...
Accessing REST & Backend as a Service (BaaS) - Developer Direct - Mobile Summ...Accessing REST & Backend as a Service (BaaS) - Developer Direct - Mobile Summ...
Accessing REST & Backend as a Service (BaaS) - Developer Direct - Mobile Summ...Jim McKeeth
 
Android voice skill sprint
Android voice skill sprintAndroid voice skill sprint
Android voice skill sprintJim McKeeth
 
Exploring the Brain Computer Interface
Exploring the Brain Computer InterfaceExploring the Brain Computer Interface
Exploring the Brain Computer InterfaceJim McKeeth
 
Introduction to Android Development with Java
Introduction to Android Development with JavaIntroduction to Android Development with Java
Introduction to Android Development with JavaJim McKeeth
 
Inventing merit badge
Inventing merit badgeInventing merit badge
Inventing merit badgeJim McKeeth
 

More from Jim McKeeth (16)

Announcing Codolex 2.0 from GDK Software
Announcing Codolex 2.0 from GDK SoftwareAnnouncing Codolex 2.0 from GDK Software
Announcing Codolex 2.0 from GDK Software
 
Smart Contracts - The Blockchain Beyond Bitcoin
Smart Contracts - The Blockchain Beyond BitcoinSmart Contracts - The Blockchain Beyond Bitcoin
Smart Contracts - The Blockchain Beyond Bitcoin
 
Rapid Prototyping Mobile IoT Projects with Arduino and Open Hardware
Rapid Prototyping Mobile IoT Projects with Arduino and Open HardwareRapid Prototyping Mobile IoT Projects with Arduino and Open Hardware
Rapid Prototyping Mobile IoT Projects with Arduino and Open Hardware
 
Day 3 of C++ Boot Camp - C++11 Language Deep Dive
Day 3 of C++ Boot Camp - C++11 Language Deep DiveDay 3 of C++ Boot Camp - C++11 Language Deep Dive
Day 3 of C++ Boot Camp - C++11 Language Deep Dive
 
Day 5 of C++ Boot Camp - Stepping Up to Mobile
Day 5 of C++ Boot Camp - Stepping Up to MobileDay 5 of C++ Boot Camp - Stepping Up to Mobile
Day 5 of C++ Boot Camp - Stepping Up to Mobile
 
Android Services Skill Sprint
Android Services Skill SprintAndroid Services Skill Sprint
Android Services Skill Sprint
 
Creating Android Services with Delphi and RAD Studio 10 Seattle
Creating Android Services with Delphi and RAD Studio 10 SeattleCreating Android Services with Delphi and RAD Studio 10 Seattle
Creating Android Services with Delphi and RAD Studio 10 Seattle
 
Building a Thought Controlled Drone
Building a Thought Controlled DroneBuilding a Thought Controlled Drone
Building a Thought Controlled Drone
 
Deep Dive into Futures and the Parallel Programming Library
Deep Dive into Futures and the Parallel Programming LibraryDeep Dive into Futures and the Parallel Programming Library
Deep Dive into Futures and the Parallel Programming Library
 
Embarcadero's Connected Development
Embarcadero's Connected DevelopmentEmbarcadero's Connected Development
Embarcadero's Connected Development
 
The Internet of Things and You - A Developers Guide to IoT
The Internet of Things and You - A Developers Guide to IoTThe Internet of Things and You - A Developers Guide to IoT
The Internet of Things and You - A Developers Guide to IoT
 
Accessing REST & Backend as a Service (BaaS) - Developer Direct - Mobile Summ...
Accessing REST & Backend as a Service (BaaS) - Developer Direct - Mobile Summ...Accessing REST & Backend as a Service (BaaS) - Developer Direct - Mobile Summ...
Accessing REST & Backend as a Service (BaaS) - Developer Direct - Mobile Summ...
 
Android voice skill sprint
Android voice skill sprintAndroid voice skill sprint
Android voice skill sprint
 
Exploring the Brain Computer Interface
Exploring the Brain Computer InterfaceExploring the Brain Computer Interface
Exploring the Brain Computer Interface
 
Introduction to Android Development with Java
Introduction to Android Development with JavaIntroduction to Android Development with Java
Introduction to Android Development with Java
 
Inventing merit badge
Inventing merit badgeInventing merit badge
Inventing merit badge
 

Recently uploaded

Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftshyamraj55
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...FIDO Alliance
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIES VE
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...panagenda
 
Your enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4jYour enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4jNeo4j
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentationyogeshlabana357357
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxJennifer Lim
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FIDO Alliance
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...CzechDreamin
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfFIDO Alliance
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераMark Opanasiuk
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty SecureFemke de Vroome
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfSrushith Repakula
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceSamy Fodil
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfFIDO Alliance
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfFIDO Alliance
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyUXDXConf
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfFIDO Alliance
 

Recently uploaded (20)

Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and Planning
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
Your enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4jYour enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4j
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 

Hacking iBooks and ePub3 with JavaScript!

  • 1. Hacking iBooks and EPUB with JavaScript! Jim McKeeth jim@mckeeth.org @JimMcKeeth
  • 2. What 400 Level Means • Assumed understanding of JavaScript and HTML5 web technologies. • More examples and less explanation. • Please ask questions as we go.
  • 3. About Jim McKeeth • Lead Developer Evangelist for EmbarcaderoTechnologies • Delphi XE5 creates native iOS & Android apps from same code • Improvisational performer with ComedySportz Boise • Inventor of pattern and swipe to unlock • US Patent #s 6,766,456 & 8,352,745 . . . (First patented in 2000) • Used on iOS,Android and Windows 8
  • 4. Why Put 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. Overview • JavaScript Interactive Widgets • Dashcode • Tumult Hype • Creating Widgets from Scratch • Creating ePub from Scratch • Cracking ePub
  • 6. More Information • 4 Part Series on iBooks JavaScript Widgets • http://sn.im/ibooksjs
  • 7. iBooks Author 2 • 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. iBooks / ePub Technical Details • Zip file of HTML5 content adhering to specific spec. • 2 GB technical book size limit • 200 MB recommended size • iBooks IBA files encrypt the page content • All resources must be included!
  • 9. 3D Models • 20,000 to 50,000 moderately textured polygons • Textures <= 1024x1024 • Use COLLADA (.dae) file format • Specify a camera • Simple lighting • http://support.apple.com/kb/ht5093
  • 10. 3D Models • Trimble SketchUp Make • www.sketchup.com • Free version creates .dae 3D models that work in iBooks Author • http://www.sketchup.com/products/3D-warehouse
  • 13. 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
  • 15. 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.
  • 16. Posting to Web Services • External web services must implement CORS • (Cross-Origin Resource Sharing) headers. • enable-cors.org • www.w3.org/TR/cors
  • 17. Tumult Hype 2 • HTML5 & JavaScript Multimedia Studio • Create JavaScript Powered Animations and Interactions • Creates Widgets Directly • Compatible with iBooks Author & the iPad • $59.99 in Mac App Store (on sale $29.99 through Sept 10th)
  • 19. 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. http://support.apple.com/kb/HT5068
  • 20. Required Properties • CFBundleIdentifier - Unique identifier • CFBundleName - Friendly name • MainHTML -The main HTML file
  • 21. 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.360idev.gallery</string> ! <key>CFBundleName</key> ! <string>Gallery</string> ! <key>MainHTML</key> ! <string>index.html</string> </dict> </plist>
  • 22. 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.
  • 23. Supported HTML5 Features • localStorage (per book - between widgets) • Geolocation (requests permission) • Canvas • CSS Animations • Others . . .
  • 24. 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
  • 26. Things to Remember 1. Double clicking a widget on desktop deletes it (installs it into the library). 2. The aspect ratio of your Default.png determine the aspect ratio of your widget. 3. All JavaScript libraries must be referenced from the Main HTML file, and in the package.
  • 27. bookry.com • Custom Sliding Puzzle • LiveTwitter Feed • InteractiveTimeline Images • YouTubeVideo • VimeoVideo • 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.) • Free license includes “branding” See also ibooksgenerator.com
  • 28. Live Twitter feed in iBooks
  • 29. Live Google Maps in iBooks
  • 30. Creating an ePub from Scratch No iBooks Author, no Dashcode, just text editing!
  • 31. Disclaimer • So far I have been unable to access online content without using iBooks Author.
  • 32. 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
  • 34. 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
  • 35. 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
  • 36. 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
  • 37. 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 
  • 38. preventDefault • Use to “override” the default behavior of the reading system. • If you have a touch zone near the edge of the screen, this gives you the touch event instead of turning the page. • Turn off for whole document: • document.addEventListener('touchmove', function (e) {e.preventDefault();}, false); • In individual event handler: • event.preventDefault();
  • 39. ePub Samples • Repository of ePub 3.0 sample documents • http://code.google.com/p/epub-samples/ • See “Scripted Content Documents” under the “Feature Matrix”
  • 40. 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 • OPS • content.opf • content files Automatically added by iTunes but not needed.
  • 41. mimetype • First file in zip - uncompressed • No Unicode signature or byte order mark • Only contain • application/epub+zip
  • 43. 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>
  • 44. 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>
  • 45. 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="jq" href="jQuery.js" media-type="application/javascript"/> </manifest>
  • 46. 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>
  • 47. Zipping an ePub • zip -X ../epubfile.epub mimetype • zip ../epubfile.epub META-INF/* • zip -r ../epubfile.epub OPS/* • unzip -l ../epubfile.epub http://idpf.org/epub/30/spec/epub30-ocf.html mimetype must be the first file (uncompressed). Any folder(s) with “content” Lists the contents for verification
  • 48. ePubValidator • EpubCheck • validator.idpf.org (web based) • code.google.com/p/epubcheck/ (download - Java) Download and include call in your script to zip your ePub!
  • 49. iBooks Fixed Layout Format • Use a separate XHTML document for each Fixed Layout page. • Use CSS relative and/or absolute positioning to place text and images on a page. • Include the height and width of the page in a viewport meta tag in the head of each XHTML document. (used for aspect ratio) <head>           <title>Fixed Layout Example</title>         <meta content="text/html; charset=UTF-8"/>         <link href="css/stylesheet.css" type="text/css" rel="stylesheet"/>         <meta name="viewport" content="width=575, height=432"/> </head>
  • 52. iBooks DRM Decrypt • iTunes 10.5.3.3 x64 (as close as possible) • http://www.oldversion.com/windows/itunes/ • Requiem 3.3.6 • https://tag3ulp55xczs3pn.onion.to/ (viaTor) M ustbe these versionsworkingtogether. Run itin an XPVirtualM achine.
  • 53. Other ePub Books • Calibre • http://calibre-ebook.com/ (eBook conversion and management) • DeDRM plugins • http://apprenticealf.wordpress.com/ 6.05 is latest
  • 54. 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.
  • 55. More Information • 4 Part Series on iBooks JavaScript Widgets • http://sn.im/ibooksjs • Might become an iBook • jim@mckeeth.org or @JimMcKeeth