Download
1 / 14
140 likes | 276 Views
MMDE5012. Interactive Media Practice Seminar 2 Week 2. Baker eBook Framework. http://www.bakerframework.com/. Introduction to Baker. Baker is an ebook framework that enables you to publish interactive books/magazines or ePubs on iPads and iPhones using simple HTML5 and CSS3 standards.
E N D
MMDE5012 • Interactive Media Practice Seminar 2 • Week 2
Baker eBook Framework • http://www.bakerframework.com/
Introduction to Baker • Baker is an ebook framework that enables you to publish interactive books/magazines or ePubs on iPads and iPhones using simple HTML5 and CSS3 standards. • This is great, because it uses the skills you already know! • You can develop pages as you normally would using a text/code editor (Dreamweaver, etc) and a browser (a webkit browser e.g. Chrome or Safari). Ideally you will also test it in Mobile Safari. • You can include all of HTML5’s elements e.g. video, audio and even HTML5 transitions and animations.
The Hpub Format • Baker uses a format called HPub 1.0. • A HPub publication is like an HTML5 microsite. • This means you are able to see/test your site in Safari / Mobile Safari. • To prepare a publication, simply create a single HTML file for each page in your ePub. • These files then need to be named sequentially (either numerically or alphabetically). • The exception to this is an ‘index.html’ which is employed by Baker when a user double-taps the screen (it appears as a quick reference index menu at the bottom of the screen).
The Baker File Package • Once you have developed your HTML pages, the files are then placed in a root directory (it is important to note all files/assets must be inside this root folder). You can also include sub-directories like ‘images’, ‘audio’, ‘video’ etc. • Along with your HTML files you also need to include a file called ‘book.json’. This file is known as the manifest, and includes all of the parameters required for Baker to display your file correctly. • FYI : JSON (JavaScript Object Notation) is a lightweight data-interchange format that is easy for humans to read and write while also being easy for machines to parse and generate. • There are also a few more advanced customisations that can be carried out, but essentially that is everything you need to create your publication!
Step1: Designing your ePub • To design for the Baker Framework you just have to build HTML5 pages with a fixed width of 768px. • You can also employ a few media queries if you want to design for a more responsive environment (e.g. for both iPhones and iPads). • That’s all. Use your favorite tools, test it on the iPad using Safari, and refine as much as you want. • P.S. Don’t forget about retina graphics @2X high pixel density devices.
Step 2: Put it all in a folder • Order all of your HTML files sequentially and put them along with associated files and sub-directories in a root folder. • Include your book.json file (with all the relevant details). • Add ‘Book Cover.html’, ‘Book Index.html’ and ‘index.html’ into the file (if desired).
Step 3: Newsstand vs Standalone • There are two types of Baker ePubs: Newsstand and Standalone. • Newsstand mode: This is for periodical magazines and publications. • Standalone mode: This is for single/one-off ePubs.
Step 3: continued • To publish in Standalone mode, follow the tutorial here: https://github.com/bakerframework/baker/wiki/Tutorial-for-Standalone-App
Step 4: Compile and Test • Once your standalone app is ready you can test it in the iOSsimulator (in Xcode).
Exercise • Download the example Baker Package and examine the folders contents. • Download the Baker Framework. • Open ‘Baker.xcodeproj’ in Xcode. • Follow the standalone app tutorial. • Test it in the iOS simulator.
