Good morning, everyone. Welcome to another great day of WWDC. And thanks for spending your morning with the books team. My name's Casey. I'm the engineering manager for the iBooksstore. And one of my jobs is to develop technology that will enable you to create books that people are going to just love to read. So to help you with that, today my colleagues and I are going to teach you how to create interactive books using EPUB 3 and JavaScript.

Before we jump into the technology behind EPUB and JavaScript though, I'm going to run through real quickly where we've been since last year. So first, I'll recap last year's iBook session, and then I'm going to explain to you and really share with you some of the cool new things we've added since last year.

So, at last year's iBook session, we showed you how to use EPUB 2 to create two different formats of books, flowing and fixed layout. And as a reminder, a flowing book is a book where the reader can resize the text. And in fact, the text in that document is one long document, kind of like a web page, that iBooks then neatly divides into individual pages. In contrast to that, a fixed layout book is used when you want a very precise design. It has full-bleed images and text that overlaps those images.

For both of these formats, you can embed audio and video using the HTML5 elements. And all of this was covered in last year's session. In addition to that, really my favorite moment from last year was when I got to introduce to you Read Aloud. Read Aloud is a technology that allows you to sync a narrator's voice with the text of your book so that individual words light up as that audio is read aloud. Now, if you missed last year's iBooks session, don't worry. It is available for download on the Apple Developer Center. And if you're new to EPUB, you can pick this technology up really quickly. And if you need more of a foundation, definitely download last year's session.

So since I last talked to you, since last year, iBooks has been really busy. We are the first reading system to support EPUB 3. And EPUB 3 support in itself, let me tell you, it made for a busy year. But Apple didn't stop there. In January of this year, Apple released iBooks Author.

iBooks Author is a free app available from the Mac App Store that makes it easy for anybody to make a book. It combines the simplicity of copy and paste and drag and drop, along with some really creative layout tools that makes it quick and easy to make some really beautiful books for the iPad.

So this year, iBooks brings you EPUB 3 and iBooks Author to give you some really great development tools for getting your books into the iBooks store. And I mean you in particular. So Apple developers, you are a unique group. You have a more technological background than just the average Joe.

And that puts you in an especially advantageous position for creating some really beautiful books. So yesterday, my colleague Charles demoed iBooks Author. Today, some more colleagues and I are going to show you how to put your technical skills to use to create some interactive, engaging books using EPUB 3.

And so you have options. When do you want to make an EPUB? Well, iBooks is actually a really incredible platform for EPUB, and that's because we support flowing and fixed layout, media like images, audio, and video. You can include your own fonts, and you can make an interactive book, which we'll show you today. You can also create a read aloud book to sync that audio with the text. And your single EPUB is supported on the iPad, the iPhone, and the iPod Touch. So that's millions of devices that are out there that are ready to read your book.

Also, EPUB uses standard technologies like HTML and CSS and JavaScript. So if you already have these skills, you are more than halfway there to making a book. And finally, EPUB is open standard, just like HTML and CSS, which means an EPUB can be read across multiple platforms. In other words, because EPUB uses web technologies, you can create a book that's customizable, adaptable, and open.

It gives you the ability to create a single book for nearly any type of book that can be read on many different devices. Now, this is a huge list of features. And like I said, we covered most of them last year. So today, we're going to focus on the new items we've added since we last talked to you.

I'm going to give you a foundation in EPUB 3, and then Jonathan's going to introduce you to iBook JavaScript Library that will let you easily incorporate some really great interaction into your book. And then finally, Alejandro is going to show you a development tool that will allow you to perfect your book and streamline your workflow. By the end of this session, you are going to be ready to make some of the best books in the iBookstore.

I actually saw that happen last year, so that means you guys, you've set a high bar for yourself, and I'm thoroughly expecting to see it again this year. So, are you ready to make an EPUB? Yeah? Okay. Great. Welcome to EPUB 3 Bootcamp. I'm going to get you up to date on the EPUB 3 anatomy, and then I'll show you how to use some EPUB technology to create pop-ups in iBooks.

As I mentioned, EPUB is really just web technology. HTML, CSS, JavaScript. And then we're bundling it together and zipping it up and giving it an extension of .epub. I actually think it's easiest to think of a book as a website. But then you need to ask, okay, well, what's the difference between a website and a book? And there's a lot of different answers out there for it, but I'm going to give you a technical explanation. And to do that, I'm going to show you an EPUB.

So here's our EPUB, and I'm going to unzip it. And inside, there are two folders, the OEBPS and the MetaINF. We're only going to worry about the OEBPS folder today, because that is the folder that contains all of the content of your book. So inside of it is all that web technology I told you about. Your XHTML, that's the main content of your book. Your text. It also includes your styling, so your CSS and your fonts. And your media, so your images, audio, video.

This is all the standard web content, but in addition to that, there's also two EPUB-specific files, and this is what's making it a book. There is the OPF file and the NAV document. Now, the OPF file is a carryover from EPUB 2. The NAV document is an entirely new document in EPUB 3, so we'll spend most of our time on that. First, though, let's look at the OPF.

Casey Dougherty, Jonathan Ng, Alejandro Rodriguez The OPF contains all of the information about your book, including your package version, that's which version of EPUB you're using. It also includes the metadata for your book, a manifest which lists all of the files in your book, and a spine which defines the linear reading order of your book.

So first of all, because we're making EPUB 3 today, we need to update our package version. So this is the package element, the version set to 2.0, we have to make it a 3.0. Are you ready? 3.0, okay, really hard, right? All right, but that does set us up for needing to make some other adjustments and other changes, starting with the metadata.

So in EPUB 2, you are required to provide three metadata items, the title, the language, and the ID. But in EPUB 3, you're also required to provide the date modified. So to run through the metadata element for this book, The Hobbit, we have the titles, The Hobbit. We have the ID for the book, which is usually the ISBN number, the language the book is written in, in this case, English, and our new item, DC terms modified.

This is the date your book was last modified, and it's really important that you include it so that You have an idea of version control, so that whether it's you with the book with multiple versions or if you've given someone else multiple versions, we have a sense of which one is the most up to date and then therefore probably the most correct.

And The Hobbit's a really good example of this. The Hobbit was written in 1937, and since then, it has undergone many revisions and additions. So it's really important as you're moving into the digital world that you include that date modified so that I can tell and the iBooksor can tell what the most recent version is.

So metadata, much the same as it was in EPUB 2, but be sure you include your DC terms modified. Next is the manifest. Again, the manifest, mostly unchanged since EPUB 2. And this looks like a lot of text up there, but really all it is is a listing of all the files that make up your book. That's your XHTML, your CSS, your fonts, all of that content we were discussing earlier.

In EPUB 3, though, we now have something called the properties attribute. The properties attribute allows you to further identify key files in your manifest. And I have two really good examples of that here. One is for the navigation document. The navigation document is a vital file in your book, and so you need to call that out as being special. So to do that, you add the properties attribute and give it a value of nav. Another example is for the cover image.

In EPUB 2, the cover image was defined in the metadata, but in EPUB 3, all you need to do is add the properties attribute with the value of cover image on the actual cover in the manifest. So manifest largely unchanged in EPUB 3, just be sure you use the properties attribute where required.

And finally, the spine. The spine is unchanged in EPUB 3, but it is a very, very important part of the OPF file, so I'm going to cover it here. It lists the linear reading order of your book. That's all of the content documents of your book, and it's defining the order and literally binding it together, much like the spine of a physical book.

And the markup for the spine is essentially a list. So now we have the spine element and we have chapter 1, chapter 2, chapter 3. It's very simple but very important. And that's the OPF file in EPUB 3. So we've updated the version number, we added modified date to the metadata, we added the properties attribute to the manifest, and we provided a spine.

Now I know there's at least a few EPUB veterans out there, and you may have noticed that I didn't mention the guide element. The guide element is actually deprecated in EPUB 2, but it has a replacement in EPUB 3's navigation document. The navigation document replaces EPUB 2's NCX file.

And if any of you have ever written an NCX file by hand, you can rejoice now. You don't have to do it again. Yes, I knew there would be a couple. Okay. And the navigation document provides all of the information about your book, or about how to navigate your book, including the table of contents, landmarks, and a page list. And those are the three we'll cover today.

All of these, the table, contents, landmarks, and page lists, are created using an HTML5 nav element. The nav element allows you to actually define an order for a list. So here we have the nav element. Inside of it is our ordered list, and then we have individual list items.

Note that each list item has both text and a link for that text. Now because you're using this nav structure for all three, your table of contents, your landmarks, and your page list, you also need to provide a way to differentiate between those. And you do that using the epub type attribute.

The EPUB type attribute is a new attribute in EPUB 3, and it provides additional semantic meaning to any element it's on in your book. There's a whole variety of pre-existing values for this, but for today, when we're discussing the navigation document, we'll focus on table of contents, landmarks, and page list.

And we add it directly to the nav element. So here's our nav element with the EPUB type of TOC for table of contents added in there. So let's go ahead and make a real table of contents. This is a table of contents in iBooks. So you have chapter one. On page 3, nested under it is figure 1, and back out again is chapter 2. Now your job is to provide the text for this table of contents and to provide the structure for it. iBooks' job is to provide the page numbers for you.

So to create this structure, you're going to use that nav element. And you're going to give it an EPUB type of TOC, for table of contents. And inside of that, you have the ordered list with your list items. So the first list item is chapter 1, and it has a link associated with it for chapter1.xhtml, so that when the reader touches chapter 1 in the table of contents, they'll be taken to the chapter 1 content document.

Now, I didn't close out the list item for this, because instead, I'm nesting under it a new ordered list for figure 1. And that figure 1 has a link that points to chapter 1.xhtml with a fragment identifier of figure 1. And that's because our figure 1 exists within the chapter 1 document. So this link will then go and reference a figure 1 ID within that document. So that is the basic structure. So you have your table of contents, it's HTML list with the HTML5 nav element. And you use this same nav structure to create landmarks.

A landmarks replaces EPUB 2's guide, and its job is to identify key files within your book. So it is essentially providing a map to the structure of your book. And the iBooksStore will reference the landmarks when we're cutting the sample for your book. So as a reminder, that sample is the free sample that our customers download when they're deciding whether or not to buy your book. And that means you want that sample to be really good, right? So to do that, you need to provide a thorough landmarks.

Landmarks can also be used for defining the start page of your book. So this is the first page the reader sees the first time they open your book. If you want, that can be the cover page, that can be chapter one, it's up to you. And again, landmarks uses the nav element. So we have added the EPUB type landmarks to our nav, but now we're also using EPUB type attributes in each of our list items.

This way, no matter what you've named your XHTML document as, you have a set value or a set tag for what that content document's job is. So for our first example, we have coverpg.xhtml. It has an EPUB type of cover, so that's telling the iBookstor this is my cover. That means I could name this fish.xhtml. It doesn't matter. It will be the cover as far as the iBookstor is concerned. So that's landmarks, very important for you to add, and I suggest you just make that as thorough as possible.

Next is the page list. Page list allows you to define custom page numbers for your book. When do you want to define custom page numbers? Well, there's a few reasons. One, in flowing books, the number of perceived pages for your book depends on a few different factors. For one, the device size. Another, the font size.

In this example, we have the same book on both the iPad and on the iPhone. But on the iPad, you have 398 pages, and on the iPhone, you have 1,900 pages. So this can pose a particular problem if you're trying to send someone to a very specific location in your book, because everyone's going to have a different concept of the paging.

For instance, let's say you're in a classroom and the teacher says, "Class, turn to page 82 of White Fang." Now all of the students who are reading digital readers are going to have a different concept of what that page 82 is. But they're going to be fine if you provide a page list. Because your page list is going to set a standard paging, sets demarcations, and it will also provide custom page numbers if you like. So the best way to show this is to look at the table of contents in iBooks.

So this is the table of contents we just made. Chapter 1 is on page 3, figure 1 is on page 6, and chapter 2 is on page 9. When you apply the page list to this, you can make these page numbers whatever you need them to be. Now this example is a little zany, but it gives you an idea of what you can do. Chapter 1 is page 1, figure 1 is intro, chapter 2 is Roman numeral 4. So it's up to you.

Now, in fixed layout books, the pagination is different. People experience the exact same number of pages, no matter what their device, no matter what their orientation, but there still may be a time when you want to define custom page numbers. And an example of this is, let's say you have an existing print book, and you want the digital book, its page numbering to match up with the print book. To do that, you would provide a page list.

So now, you know, normally in iBooks, the cover page by default would be page one, but your print book, it's not going to have the cover page number one. So by adding a page list to this, I now can have my last page be Roman numeral seven. And this means that the reader can scrub that thumbnail nav along the bottom and see the pages that they want and navigate to it that way.

Creating a page list for both flowing and fixed layout books, again, we're using that nav element. We're setting an EPUB type of page list, and now all of the text that's in our list items defines the text for our page numbers. So in this case, we have intro for the first item, we have the next page unnumbered, and then we start a numbering of 1, 2, and 3.

Now, your linking structure is going to change a little bit between a flowing book and a fixed layout book. And that's because in a fixed layout book, you have one content document per page. So when you're linking to that, you're just going to be linking to page 1x HTML, page 2x HTML, and so on. But in a flowing book, you have one XHTML document per chapter, and you're going to have many pages within that chapter. So you need to provide markers within it, and really IDs within that to mark the start of each page. And it looks like this.

So here's my HTML document. I have a paragraph in there, and I've added the ID of P1 for page 1. And that references, then, the chapter 1 XHTML with a fragment ID of P1. So that is PageList. It's easy to create, and it can be very useful. And that wraps up the navigation document EPUB 3. I showed you how to create a table of contents, landmarks, and page lists. All of them use the HTML5 nav element and the EPUB 3 EPUB type attribute. But we're not done with the EPUB type yet. It has a few more tricks up its sleeve.

If you remember way back when I was first explaining EPUB type, EPUB type can be added to any element in your book, not just in the navigation document. And it will add additional meaning to any of the elements you add it on. And one really cool way of using EPUB type is to create pop-ups in iBooks.

Popups and iBooks work on the iPad, the iPhone, and the iPod Touch, and they're really easy to make. It looks like this. So I have in there some superscripts for footnotes. When the reader touches that superscript, there's a link on it, and it triggers the popup. So on the iPhone, we're overlaying the popup full screen, and on the iPad, we're insetting the popup. And to create these, you don't need to know any scripting at all. You just need to use two EPUB type attributes. Here's the markup.

So now I have my superscript 1, and that number 1 has an anchor element. In that anchor elements, there's two very important attributes. We have our href for our link that's pointing to the location of our pop-up text, and we have the epub type attribute noteref because we're referencing a note that's elsewhere.

And that note is in the aside element. So this aside element contains the text that will appear in the pop-up, and that aside element also has two important attributes. It has the ID so that our link can reference it, and it has the EPUB type of footnote because this is the note for our book. That's all you need.

That concludes the EPUB 3 Boot Camp. I showed you the building blocks of EPUB. It's really just web technology. We also covered the structure in EPUB, including the OPF and the nav. And I showed you how you can start to incorporate a bit more interactivity into your books by using pop-ups using EPUB type.

But don't stop there. Next, Jonathan is going to show you how you can use the iBook JavaScript library to easily incorporate some really impressive interactions into your books. Jonathan? Thanks, Casey. How's everybody today? Great. Great. So what is interactivity? Well, let's travel back in time. When I was younger, I loved storybooks. I mean, I really liked them.

Now, They were great. The stories were great, but there was always something missing. And then one day I was introduced to something, and it blew my mind. With just a little bit of interactivity, I was re-engaged. So that's cool. But what does that have to do with EPUB? I think it's easier for me to show you something than it is for me to tell you.

So let's take a quick break and let's watch a little video. Now, it's important to note that this video, it's a trailer, but everything you see can be done in an EPUB. Hey Ringo, I've just had the strangest dream. ♪ ♪ Where'd you start this thing? Perhaps this is it. Groovy.

So what did we just see aside from everything? So there was user interaction that fired animations, played audio, played video, allowed people to drag things and move things and interact. This is interactivity. It's fusing user interaction with feedback. How do we do this? How did all of this happen? Behind the scenes, it was JavaScript.

Since iBooks 1.5, we've supported this, and now it's officially supported in EPUB 3. Now that we have JavaScript, what do we do with this? Well, there's components of interactivity. We take user interaction, and then we take audio, video, CSS animations, and we put it together so the users have a more engaging experience.

I talk about CSS. Let's talk and show a little bit about that. So on screen, I have Clarisse, our dog cow, and I have a CSS animation. CSS animations fire by themselves without any user interaction. They look like this. But let's say we want something to happen with user interaction. So when the user taps on Clarisse, she rotates.

We do this with JavaScript. And animations are the core of interactivity. We control everything with JavaScript, and we can link animations together to create more complex and engaging interactions. Using JavaScript, we add class names or modify them, and then we respond to these with CSS. So I showed you the user tapping on Claris and the rotation happening. So let me walk you through what actually happens in the background, because I'm sure you're curious. So just follow along.

So you're going to create an element. You're going to have to add a class name to it. And then you add an event listener with JavaScript. With JavaScript, you're going to have to listen for touch. Touch is going to have a touch start, a touch move, and a touch end. Not all touch is the same. Once you find that correct touch event, you've got to make sure it's the right one.

So then you need to check for a tap threshold. All that's fun. It's OK. So now we're going to check the class on the element. Is it OK if it's OK? We'll toggle it. If it's not, we'll toggle it again. So that was fun. But I don't think you came here today so I could tell your life is going to be more difficult. So you could do all of this.

Or you could do this. iBook.js is JavaScript interactivity simplified. And what is it other than awesome? So it's Apple's framework. It's our library. It's available now. It's on iTunes Connect. It's for all of you. You can download it. It simplifies a lot of common tasks that publishers have requested, takes all this crazy stuff, and bundles it into a nice little package.

It's unobfuscated, so you can look what we're doing under the hood. You can make sure you're following our best practices. And it doesn't matter if you're a beginner. It doesn't matter if you're a veteran. It's optional. Use it as a base. Use it standalone. Use it as a foundation. So now that I've already sold you on this, let me show you what it actually does.

So the first thing you might want is an animation to fire when the DOM loads. So I have Claris off screen right now. Let's say the DOM is loaded. iBook.js will append build in to the body class. That's great, but maybe you want to delay something. You don't want your animation to fire immediately. We can use a deferred event to accomplish this.

With a deferred event, we simply add iBooks deferred event to an element. And by default, one second later, we'll append an active class, and an animation will fire. You can adjust this delay with data iBooks deferred event delay as an HTML attribute. So those are event timing things. Let's talk about touch. Your book lives inside of touch.

So it makes sense to use it, right? Simple toggling of an element. This is what I showed you with all that code. Instead of doing that, just append iBooks Togglable, and we'll add an active class when the user taps on it. So we can toggle something. Let's drag something. Using iBooks Dragable, we can leverage touch so all elements can be dragged around on the device.

It was really easy, but it was a lot of work. So we've toggled things, and what did we do? We toggled things and we've dragged things. Now we're going to duplicate and create something. So if we look at the iPad, we have some beautiful hills. We can append an iBooks stampable class to the parent container. And on touch, we'll add an empty div with the class stamp. Why would you want to do this? Well, as we touch the hills, let's add some dog cows.

Just like that. Now, you don't want everything to be tappable, so we need to define some type of hit area. We do this using SVG. HTML doesn't have a hill element, so we use SVG. It's a format for 2D vector graphics, and it's especially useful for irregular shapes like the hill. Now, in yellow is our hit area. It was just defined in SVG. So any touch outside of that hit area, nothing's going to happen. But if we touch inside of this hit area, magic.

This is touch. Let's talk about audio. Using iBooks Media Audio and setting a source with Data iBooks Audio Source, we can play audio with elements. You might be wondering, well, there's an audio tag in HTML. Why would I use this? Well, you can still use the audio tag, but there's a few things you're going to have to do.

You're going to have to create an element. You're going to have to add JavaScript to listen for that. You're going to have to do some action. When the user taps on it, and then you're going to have to play audio and then manage that playback later. Or you could just do this. Now, Claris is on screen.

and Claris Plays Audio. So that's pretty cool. Now, not everybody wants audio to resume from where it was last paused. And by default, when you play audio, it will pause. So you can configure this playback with Data Audio, iBooks, Reset On Play. And by doing this, the play head will reset every time the user taps on the element.

I told you this is easy, and I said you can add interactivity really easily. Let's see how easy it is. There's three things we're going to do. The first thing, we're going to include it like any script tag, any library in the head of your document. Two, Find the behavior you want and add it to the class. And then three, optionally, configure that behavior. Now, it really is that easy.

So to summarize really quickly, all of this is available on iTunes Connect. I showed you how to pair audio to DOM load events, to deferred events. I showed you the leverage touch, tappables, stampables, draggables, and how to control audio simply. So now what? Maybe this is just the beginning.

With advanced JavaScript, you can do almost anything. First thing I would suggest, look in iBooks. Look in iBook.js, look at what we do, customize some things, build some extra things out. Next, as you're building more interactivity, you're probably going to run into an issue with the default UI. Because your book lives inside of a touch environment, we leverage touch for UI. So if I were to tap on Sonnet, the menu bar is going to pop down from the top.

Could be a dialog box if it's text. Now, this is great for UI because it's consistent. But when you're building interactive books, you may not want that. It may detract from what you're trying to accomplish. JavaScript provides a default binding, prevent default, which will prevent this behavior. So if we were to reset this and tap again, it's going to pop up.

Nothing's going to happen except what you tell it to do. So that's great. What else can I do? Because everything in iBooks renders with WebKit, you can leverage WebKit too. So almost anything you do with mobile WebKit, you can do on the phone or in this iBook. Now, you can access hardware sensors. You don't need an iOS app to do that. Accelerometers, gyroscopes, magnetometers, why would you want to do that? Maybe you've written a book on home improvement, and you're showing people how to hang posters or pictures.

You can tell them how to do that with content, and then you can include some widgets So you can actually hang your paintings and keep them level all without leaving your book. Use location services for real time GPS location, and then compare it to some predefined data so you can show people how far things are from them. Move beyond just taps and drags and include gestures.

And finally, Test, test, test. Because as you build more complex interactions, things are going to break. And your book is only going to be as good as the time you put into it. So test it. If your animations are slow, accelerate them. Optimize your JavaScript, and make sure the book goes from good to great. So next, we'll have Alejandro talk you through some of the things I've showed you, and he'll tell you how to test your books.

Thanks. Thanks, Jon. Now picture this. You have an idea for a book, a deep, engaging book for your users. You have an idea for a book about a flower, red flower. spinning Red Flower. Now you know exactly how to do this. You're going to make it spin using iBook.js. Jon taught you that. And you're going to distribute it using EPUB 3, just like Casey taught you.

What they haven't talked to you about, and what I will talk to you about, is how to test it. How to go from writing your code on your computer using HTML5 and then testing it on your device where your users are actually going to use it. With this in mind, let's test your book. There are six easy steps you have to follow.

Step 1, edit and save your document. Step 2, export it as an EPUB. Step 3, sync it to your device. 4, open it in iBooks. 5, turn to the relevant chapter. And 6, test your book. It's that simple. It's really easy. You know how to do it. It's a piece of cake.

Now, as you get to understand your book better and you use it, you realize that it's not very obvious that it's interactive. So you decide to put a background behind it so that it's obvious to the users that it's like a button. And of course, it still spins. It's the spinning red flower, after all.

Now, something has changed. Now the book is in iBooks, so you have to deal with caching. What this is, is that iBooks is really, really smart about the work it does and it doesn't do. So if it thinks that your book is already in the device, it's not going to sync it again. That's to make sync faster.

So, to get around it, you're going to modify the modification date in the OPF, just like Casey pointed out. With this in mind, let's go through the steps again. You know how to do it. It's really easy, okay? Seven steps this time. One, edit and save your document. Two, bump the modification date. Three, export it as an EPUB, sync it to your device, open an iBooks, turn to the relevant chapter, and test your book. It's really that easy. You know how to do it. It's a piece of cake.

Okay? Now, you have an epiphany as you're doing all this work. It's no longer the spinning red flower. It's the spinning red flowers. And I have great news for you. The steps to test it are exactly the same as before. Let's go ahead and test your book. Okay? Step one, edit and save your document.

Does it feel like I'm repeating myself? Well, that's because I am. And if you're going through this process, then you're repeating yourself as well. You don't care about these things. They have nothing to do with the story you're trying to tell. All you really care about is making an edit and testing your content. Well, I'm very pleased to tell you That's why I'm here today, to talk to you about a tool that will take this overwhelming process, turn it into this.

BookProver. BookProver is an OS X app that you can download from iTunes Connect for free today. It will help you be more productive by laying on top of a couple of cornerstones that I will walk you through. The first one is instantaneous feedback. When you're building your content, you're going to want to change positions, colors, velocities, all these variables until your book feels balanced. And for that, you need fast, strong support from your tools. And BookProofer provides that with instantaneous feedback.

Automatic Sync. This is all about focus. You don't want to leave your IDE. If you're focusing on your code, you should be able to change it and save it and see the results on your device immediately without having to leave your tool of choice. BookProofer is also tool independent.

This means that you can stay as productive as you have been all these years. You can use your image editor of choice. You can use your HTML editor of choice. What BookProofer does is that it creates a link between the app and the files, and as you save them, it will update automatically.

Also, it supports multiple devices simultaneously. So as you make changes and you can see them on your high resolution iPad and on your iPhone or your iPad touch all at the same time, this will ensure that you provide a premium experience for all of your users and all of their devices.

Last, BookProofer is extremely, extremely, extremely well integrated with iBooks. It will show things like a ribbon on your iBooks shelf to let you know which books you're working on currently. You don't have to do things like turning to the relevant chapter. It knows what chapter you're on. It will remember these things. Well, I'm sure you all want to see it working, so let me go ahead and show you.

I have an EPUB here, and I have a flower that will become relevant later. If we go into the EPUB folder, you'll see familiar files like the Meta-INF and the OEBPF that Casey told you about. If we go in here, we find my XHTML documents, we find iBook.js, and a couple of other things.

Now that we have that, let me go ahead and open BookProofer, walk you through the interface. Here we have the work area. This is where you drag your EPUB. And it will create a link between the EPUB and Bookproofer. Down here is the device list. As you add more devices, they will appear on the list.

And you can check which ones you want to be syncing, which one you want syncing enabled for. Let me go ahead and drag this folder. I don't even have to compress it into a zip file. And now these guys are just linked together. And if I check the iPad, see how it syncs over.

I have to have iBooks open, of course. So as I check the iPad, it will sync it over to the device. Let me show you what that looks like. So you can see there, you see the proof in ribbon to show you that I'm working on this book. When I open it, I see my pretty flowers.

I have my cover right here. And as I come here, I realize I'm missing one of the flowers. Well, this is where that other flower comes from, where it becomes important. I'm just going to drag and drop it into my images folder, and I'm going to leave it there so that you see how it updates the book immediately. I'm just going to drop it, not touch anything, not say sync or anything like that, and it will just update.

It really is that easy. That's all there is to BookProofer. With that in mind, let's go ahead and do some interaction like Jon taught you about. Let me walk you through that. So I'm going to get my white flower and my red flower, which are the ones on screen, and I'm going to just drop them on my text editor of choice, which in this case is VI.

You all know I'm really good at following steps, so I'm going to follow the steps that Jon taught us about a few minutes ago. First, I'm going to add the script tag on my head. So it's just script, and the source is iBook.js. Next, I'm going to add the iBooksTalkable class.

So, that will just add an active class to my image element when we tap the flower. We can access that active tag on CSS. So, I'm going to add some CSS here to do that. So, I'm doing it inline so it's easier for all of you to see, but this behaves just like a linked style sheet. So, it's a CSS style. It will look for my flower right here. You see it's a flower class. And when it's active, it's going to execute the code that's below.

So when it's active, it's going to apply a transform that will rotate my flower by 360 degrees. Now, I don't want to bore you talking too much, so let me just save it. Switch to my device, and without doing anything else, my flower now spins. We have a spinning red flower.

There's something else I want to call your attention on. Notice that when I tap it, the toolbar doesn't come down. But when I tap this flower, it does. That's the prevent defaults that John was talking about a few minutes ago. And you don't want things to distract your users when they are tapping things around. So that's what it did. Now, let me just go ahead and show you something else. Let's make the white flower interactive.

And you will notice how incredibly easy it is. Only two steps. I'll go ahead and add my script tag, same as before. It just points to iBook.js. It's on the head of the document. And then I'm going to make it iBooks draggable. Okay? That's it. I save it.

Switch to my device. And this is incredible. Look at this. My flower just moves around. I can rotate, I can move, I can do both at the same time. Now, you have just seen how easy it is to make great interactive books using EPUB, iBook.js, and then BookProofer to test it. Casey will come up on stage to tell you where you can learn more. Thank you.

Thanks Alejandro. You know what Alejandro showed you today? It only scratches the surface of what's possible in iBooks today. JavaScript has opened the doors for so many creative opportunities, and it will allow you to create a book that is both inspiring and engaging. EPUB combines with HTML and CSS to give you the possibility of creating any type of book. You could create a basic flowing novel or A high-design picture book with interactivity and embedded audio. The choice is yours.

Now, my colleagues and I today talked a lot about the technology used to create books. But one of the most important takeaways is any of you can create a book. Any one of you can publish in iBooks. So iBooks this year gives you, iBooks author, and EPUB 3 in the hopes that we can help you take your story from imagination to reality.

And to help you out, if you need any more information along your way, you can contact your Safari evangelist, Vicki Murley. Also, I suggest you check out the Apple Developer Forms. We have a new iBooks community there, and it's a great place to both post your questions and help other people out with their questions.

Also, if you haven't already signed up for iTunes Connect, do so. Once you sign up to sell your books on iTunes Connect, you will have access to the iBooks Store Asset Guide. That guide will help you create books and will explain to you not only how to construct your books, but how to deliver to the store.

Also, once you've signed up to sell your books, you have access to our two example EPUBs. We give you both a flowing EPUB and a fixed layout EPUB. And the fixed layout EPUB contains the iBook JavaScript library that John showed you today. Also, if you have any more questions on EPUB 3, visit idpf.org. The IDPF is the standards committee for EPUB 3. We had a number of sessions for you this week.

Publishing at the iBooks Store already happened, so if you missed it, definitely check it out when we posted the videos after WWDC. Also, Building Books with iBooks Author was this Tuesday. I think that they're going to do a rerun for that later this week. And then this afternoon, definitely check out the HTML, CSS, and DOM for authors.

Ted has some really good tips and tricks in there for you. And finally, improving accessibility in books is also tomorrow. iBooks is the most accessible reading system, so it's really important you make your books accessible. So please attend that. Thank you for coming to WWDC. Enjoy the rest of your time.