Hi. Welcome to session 503, Building Books with iBooks Author. My name is Charles Migos. I've been the lead designer on the iBooks project since the very beginning, and it's my pleasure to be here today to teach you a little bit about iBooks Author and hopefully leave you guys with some new skills and tricks and techniques to get the most out of your own book-building experience. So first I want to answer the question, why did we build iBooks Author? Of course, we did it for the children.

We had a vision that the iPad would be a great platform for delivering a new kind of educational material, one that would kind of transcend the limitations of their known counterparts. You know, you think that textbooks, they're great at what they do. They have densely packed information captured in text, and they're richly illustrated a lot of the time. They've evolved over hundreds, if not thousands of years at this point. They're great at what they do. And digital publishers have been excellent at supplying ancillary or secondary materials for those textbooks, and they can be found on the web or as standalone applications in various forms.

But the problem with the systems that exist today is that when you're taking your attention away from the book, it's a very fragile moment in terms of the students understanding the concept that he or she is trying to learn. So every time you make that mode shift away from a textbook to your computer, let's say, to your laptop, or to some location on the web, your connection to what you were trying to learn is that much further away from you.

So what the iPad does so well is it ties all these different types of applications together. So what the iPad does so well is it ties all these different types of applications together. With iBooks multi-touch experience and the -- an iBooks author that enables you to create them, we supply the best of what textbooks have today plus the best of iPad interactivity and touch experiences coupled with the other things the iPad does really well. Provides access to the web, provides access to other applications from third-party developers, and it's really a combination that can't be beat.

And the tool that we created for all this lovely stuff is iBooks Author. And when we were creating this tool, we were trying to satisfy a couple of very tough audiences. We had to make sure that the third grade school teacher that wanted to supply custom class materials to his or her class could walk up and use this product.

At the same time, it had to have sufficient depth to allow professional publishers to bring their content to life on the iPad. We think we struck kind of the right balance. But as we were designing the product, we knew we were designing it for more than just textbooks.

We were designing it for all kinds of books that are somewhat visual in nature. So here I have three examples. First is Michelle Obama's American Grown, which is kind of a slash lifestyle cookbook and gardening book all in one. Chock full of great interactive experiences. The next is kind of a how-to book, Learn Guitar.

It's a great book, has a lot of video course material to help you learn how to play the guitar. And the last is The Getty You're in Focus, which is a photographic anthology book. So these are all great examples of those books that aren't well served. by traditional EPUB today.

But you're a highly technical crowd. What might iBooks Author have for you? What can it offer you? Well, many of you out there -- I don't want to paint with too broad a brush -- many of you out there are developers. You're developing apps like this one, which is Apple's iPhoto app for iOS. You didn't develop that one. Maybe some of you did.

And recently what was published was this multi-touch book, Hello iPhoto, which is an excellent companion to this app. This app is very deep. It's a powerful photo editing tool. This book helps you kind of learn all of the in-depth secrets and the techniques that you need to kind of get the most out of it. It was published by a third-party developer, not by Apple, of course.

In addition to that, you might be a game developer. Up here I have an example of the Diablo III Gaming Guide published by DK Publishing. Who knows your game better than you? If you work directly with a writer, with a designer, you could develop your own gaming walkthrough book or your overall guide.

Or if you're one of those brilliant Renaissance types, I know you're out there too, you could do it all yourself. And lastly, we have an example of a technical journal, Test Driving iOS Development with Kiwi from Dan Steinberg. If you have domain knowledge and expertise in a given area that you want to make available to the world, iBooks Author is a great way for you to communicate it.

And lastly, you might be thinking about an iBook, an iBooks multi-touch book, as an alternative to apps themselves. So here we have Cleaning Mona Lisa. The author here is Lee Stansted. This was developed by Tappity. They developed all the interactive content for this book. And Jeremy Olson from Tappity had this to say. He said, Olson suggests, well actually, sorry, this is him being quoted.

He guesses that using iBooks Author offered them a factor of five, six, or even seven times improvement in man hours versus traditional app development. That's really telling of what you can do with iBooks Author, and the kind of experiences you can get with iBooks multi-touch books. And this quote comes courtesy of tuaw.com.

So what are we going to learn today? Well, first I'm going to give you a demo of the iBooks multi-touch experience. This will be familiar to many of you, but I'm going to touch on aspects of the experience that we'll showcase again in iBooks Author. So we're going to get an overview of the basics of the interface, the iBooks Author interface, and its features, and then I'm going to give you some kind of more in-depth knowledge so you can really just give you some tools and techniques that will help you differentiate your content from the rest of the books on the iBookstore.

All right, so let's take a look at iBooks. All right, so as I launch iBooks, this is the bookshelf that we've come to know and love. On it, I have a selection of books. Most of them are multi-touch. A couple of them are traditional ePubs. I'm going to go ahead and launch one of them.

And at outset, you can see that this is a vastly different experience from traditional ePubs. We're trying to set the tone at book launch that this is about rich media. It's a multimedia experience. And if you want to take the time to create high production video intro to your book, you can do that, and this is what you'll see. As that video plays through, we are brought to the table of contents view for the landscape orientation. A couple things about it. If I swipe in the upper region, I move through the chapters of the book.

And if I swipe down here in the thumbnail track, I'm able to scan the pages of any given chapter visually. Tap to bring one to the foreground. I can pinch back to the table of contents view. I also have this scrubber which will allow me to zap to a far location in the book.

This is a fairly short book, so I don't really need that. And when I land on a given chapter, we have here a list of the sections within that chapter that function as a set of hyperlinks. I can tap on one and be brought to that location in the book.

So this is the second page we've seen in this book. You look at this, and it should feel like a real book, right? There's real graphic design happening here. There's control over the typographic elements. There is imagery, and it overall feels like not something that -- it feels like something that you would find in a traditional textbook.

So what you just saw, believe it or not, was a widget. Even a simple diagram is -- we refer to it as a widget. A widget is any interactive component that you have within an iBooks multi-touch experience. The next widget, up a level in terms of sophistication, is the media widget. So here I have a movie, which I can play in place, or again, bring it to full screen. I can tap to reveal the transport controls. I can move around within the movie.

and then pinch it back when I'm done. Next on this page I have another movie, but it's kind of wrapped in a special way. This movie is exhibiting the full-screen only feature. So, I have an icon of Sir Paul Nurse, a noted Nobel laureate and cellular biologist. I can tap on him - All living things reproduce. - and I'll become his movie. - And cells reproduce as well. He will espouse some brilliance - They do that through a process - but we will put him back because we have much to cover today. Although he's got some smart stuff to say.

Next up we have the gallery. And in the gallery you can see one of the tenets of the design, which was that things should be interactive on the page, and they should be interactive in full screen. Each of those experiences should offer something different, but you shouldn't have to kind of switch modes too heavily between the two. So here I can browse that gallery. If there's something that piques my interest, I can bring it to full screen and continue to swipe through the images.

And again, pinch when I'm done. Next up we have the Keynote widget. I work within the iWork team, and we thought as the developers of Keynote that it would make an excellent tool for creating animated diagrams. So here I have an example of stem cell differentiation, which is just a deck of slides that are being animated using a simple magic move transition. So you can see here that just through the use of Keynote, you can create kind of rich interactive experiences without any code being required.

On to the next section. And here is a 3D widget. Why? Because it's very cool. So I can interact with this thing on the page, or as you guessed it, bring it to full screen and look at it in all its glory. I like to stare death straight in the eye.

And I can pitch back when I'm done, double tap to reset the view. Next up is the interactive image, which looks like a traditional annotated diagram that you might find in any given textbook, but this is a lot more. Here I can tap on one of these interactive callouts to reveal additional information about a feature in the underlying image. And you'll notice that we kind of zoomed the frame up to kind of put emphasis on that feature.

Do you think I can go to full screen? You know I can. And when I'm in there, I can continue to zoom around, tap on these things, tap to put it away, and I'm done. Next in the roster is the HTML widget, and this is your go-to widget when you want to create truly custom interactive experiences.

One thing to note with the HTML widget is that it only exists in kind of a full-screen only guise. It can't be interactive on the page. So here we have a thumbnail representing the full-screen experience. We tap on it. After a short loading cycle, you'll see the thing is fully interactive. So I can strum over the different organ systems of the human body, or tap through them, of course.

And then finally we have the review widget. As we were designing textbooks, we thought-- or designing a tool for the creation of textbooks-- we thought it would make sense to provide a widget that would allow authors to create end-of-lesson or end-of-chapter reviews very easily. So here we have an example of that.

Exoskeletons provide select all that apply, support, armor, muscle attachment points. Don't be impressed. I've done this before. I'm going to say two here. This is an interesting question. It's the drag-to-target question type. So here I can grab one of these little text placards and pull them to a location. You should make note of this. There will be a test later on.

Tendons Connect. Anyone? Muscle to Bone. Good answer. Finally, at the end of the review, I have a little summary slate that lets me know how I did on this particular test. The results of that session are persisted until you reset the quiz, which I can do by hitting the start over button.

So that's the widget tour, the tour of all the interactive elements that you have within the iBooks multi-touch experience. So I pointed out that we have kind of a rich layout. Typography is important to us. Graphic design is very important to us. And we thought that's great for landscape, but what can we do in portrait that makes sense? We didn't want the authors of the book, the designers of the book, to have to lay out their book twice. So what we did is we decided to derive a view for them. So as I changed the orientation of my device, we go to the portrait flow mode.

And here you probably guessed, we've taken all the textual content from the book, we've put it into this river of text at right, and then we've taken all the visual elements, turned them into thumbnails, and put them in a gutter at left. Everything here is still available on demand.

So if I want to review that HTML widget, I can bring it up and pinch it back. 3D, of course. You get the idea. Also in this view, I have some control as the user over the font size, which is important for the lifelong learners out there like myself.

or of course the visually impaired. And you can see that we've maintained all the typographic styling. So the character of the book, the brand of the book if you will, is still maintained throughout. And you can do things like customize the headers of the book so it still feels like a design-managed view.

So that's the flow mode. We knew that students using these new textbook experiences would want a way to mark them up very easily to create highlights and notes for future reference for studying purposes. We have the standard method of I can create a selection range, then by the edit menu hit highlight, and voila, I have a highlight. We get the little contextual highlighting toolbar that you will be familiar from iBooks, or should be familiar with from iBooks. I can change the color, add my note.

And we thought that's all well and good, but it's not a really fluid method for creating highlights. We thought we could do one better. So we decided to kind of preload your finger. And any time you want to create a highlighted range, you can just put your finger on some text and draw out a highlight.

Same rules apply. Tap to reveal the context menu, change your color, add a note. I'll very creatively call this a new note. and tap to put it away. That note is available now. I can reveal it by tapping its icon in the margin. So great, we've made it very efficient and fluid to kind of create these notes and highlights. We wanted to give you a proper environment, too, for consuming your notes and highlights.

And that environment is the Notes View. So if I tap to reveal the toolbar for iBooks, third button over is the Notes View button. I'll tap on it, and in will come my notes for the book. I have only three. So these are the notes, the highlights and notes that we just created in that chapter. Wherever there is a note present with a highlight, it's beneath the highlight.

And we're like, "Okay, this is great. This supports, you know, studying tasks fairly well, but we thought we could do it one better, too." So in the top left-hand corner, we have the Study Cards button. If I tap it, I'm brought into the Study Cards view. And what we do here is we take your notes and your highlights and we map them to Study Cards for you. So here I have my highlight on the front and my note on the back to put this on the crib sheet. I can simply swipe through the Study Cards.

And interspersed with my notes are these guys. Now, I didn't highlight this. This is a glossary term found in the chapter that I'm currently in. Anytime an author, you as an author, define a glossary term within iBooks Author, this is how the end user will benefit. We can do things like create custom study cards using those glossary terms. So what I can do here, if I want to cram for my midterm, which is coming up tomorrow, I can turn off my highlights and notes, hit the shuffle button, and now I can sit down for a dedicated study and review session.

All right. And that's the iBooks multi-touch experience. Like I said, it was plenty of review probably for you at this point, but let's see how we actually create that stuff over in iBooks Author. All right, so let's take a look at the document that we just reviewed in iBooks. This is what it looks like. This application is going to be familiar to you if you've spent any time with Keynote, Pages, or Numbers, the iWork family of tools.

If you don't use these tools, you definitely should. You should primarily because they're great at what they do, but they also allow you -- any skills that you develop within them can be used directly within iBooks Author. And moreover, any elements that you create within those apps can be brought into iBooks Author and made use of in your multi-touch books.

So the framework here is kind of standard iWork stuff. We have a toolbar up top which houses all my create tools, my major view switch tools. So if I wanted to add pages to this document, I would pop this button. Here are my selection of layouts for this particular book.

widgets, which we'll see a lot of in a second, and my preview and publish buttons. Finally over here we have a set of panel toggles. I'm going to turn on the inspector since we're going to need it very soon. Here we have the sidebar. It looks a lot like the pages sidebar. I have thumbnails representing all the pages of my book.

I can move through the sidebar using the keyboard, just the arrow keys on the keyboard, or I can swipe directly in the Canvas view, and you can see that we've maintained the horizontal scrolling paradigm from iBooks directly, so it's very much a WYSIWYG experience. In keeping with that, we have maintained interactivity wherever we can. So if you want to preview a movie, you can do so simply by clicking on the movie in place. You can also cycle through the images in your gallery. Keynote, unfortunately, cannot be previewed here, but can be previewed directly within Keynote or on the iPad.

Next section here. 3D widget, same as the keynote, can't be previewed there, but the interactive image definitely can. So you get the idea. It's a WYSIWYG environment. You get a great sense of what your final book is going to be like just within it, but previewing is the way to go to get the full depth and breadth of the experience.

So now I will hit the orientation switch. And here in this view, you can see a couple things have happened. We've switched to the flow mode. This looks a lot like the flow mode that we saw on the iPad. Here in the sidebar we've switched from a thumbnail view to a text outline view. And it's down to the level of topic or subject within the sections. So we have chapters, sections, and then topics within those sections kind of outlined here. So this gives you a great kind of comprehensive view of all of your book's content in a textual form.

All right, so now let's really create some stuff. I'm going to ask iBooks Author for a new document. When I do that, up comes the template chooser, which again is a standard element with the iWork suite. In it are a selection of professionally designed and lovingly crafted templates. I'm going to choose this guy.

And as that template comes forward, you see we try and put you in a good place for beginning your authoring. And if I want to, if I have everything captured in my head because I am one of those brilliant Renaissance types, I can start typing. And in that fashion, I can continue to build upon my book organically, kind of work in a very

and bring in the text for those sections of that chapter.

So here I've got a pages document. Once I bring it into iBooks Author, iBooks Author asks me, "What template would you like for this thing?" That will tell iBooks Author what kind of pages to create for this stuff, but it also tells iBooks Author what level this content should live at.

So I know that these are sections. I'm going to choose this section layout. And I want you to pay attention to this checkbox down here. So the incoming document actually has some paragraph styles. If you have taken the time and energy to craft a style sheet for your document that you want to have preserved, you should check this box. For the purposes of this demo, I won't do that, since I want the text to conform to the style of the template. But just know that you can do that, and your paragraph styles and formatting will be preserved.

The other thing that we were smart enough to do is maintain the section structure of that document. So I had that document broken into three sections, and now I have three sections here within iBooks Author. And I've created a run of pages based on the text of that book.

You'll notice that there are some natural page breaks in here. That's because the document that came in also made use of what are known as page breaks, or section breaks as the case may be. So here's one. I can reveal it by selecting it. If I delete that, you'll see the text collapses around that.

If I wanted to introduce one, I would leave my cursor wherever I wanted it, and I could go Insert, Page Break. And you can see that content now lives in its own page happily. That's cool. So what's the next thing that we would want to do? I'm going to name my book. I'm going to call it My Book because I'm vain like that.

No, no it's not. It's muscle. Pay careful attention to that blue outline. That is a telling thing. This lets you know that you're dealing with something we call the Smart Field in iBooks Author. Specifically, it's the Section Title Smart Field, and that Smart Field is used to name things within your book. When you apply that Section Title Smart Field to something, a chapter or a section, you can name that chapter or section, and that name will appear in things like the Table of Contents automatically, which is definitely what you want.

So as I commit that change by clicking off, you can see that here in the sidebar, the title has been updated, and if I go to the Table of Contents, the title has been updated there as well. And here are the three sections that were created when we brought in or imported that document.

All right, what next? Let's start making this thing our own. I'm going to drag in... This chapter splash image. I'm going to add one here for skeleton and support. Add one finally over here for muscles. Actually, I want this guy to be cells, and I want this guy to be skeletons.

Alright, I know you want me to, so I'm going to make that one muscles. Great, so we've customized this book a little bit. It's starting to feel like my book and less like a vanilla template. If I go to the table of contents now, you can see that we took that splash image that was used in the chapter head page, and we've made it the background for the table of contents view.

I can override this and make this something different, but that's what we do by default, and I'll show you how to set that up in a little bit. Alright, next let's name our sections. Again, this is a smart field, so we'll call this one "Cells are the Unit of Life." And this one's Kilton Support.

All right, you'll notice that when I double-click this, a little HUD popped up. When I triple-clicked it, that little HUD popped up. And that HUD tells me what level that this smart field is currently pointing at. Right now, it's titling the current section. If I wanted the chapter to be named Skeleton Support, I'd select that. And you can see that now it's updated with the current title of that chapter, which I could change.

You get the idea. Remember the smart fields. You will love them and hate them over time. And I want that change, and we'll leave that right there. All right, let's get to the good stuff. Let's start -- well, actually, before we get to the good stuff, I'm going to point out something else that you need to do typically, which is give a style to your headings, right, which is important for creating some visual hierarchy on your page. So here, via the format bar, I have a little pop-up menu that shows me all of the defined styles for this template. I'm going to choose Heading 1. Cool. There's one over here too, and one over here as well.

I'll give that the heading 1 style. Great. So I've started to differentiate things on the page, but I'm actually doing a lot more than that. I'm starting to define the document structure. If I go to the portrait view over here, you'll see in the sidebar that those things we just defined with those paragraph styles are now present in the sidebar.

That's because we use special semantic paragraph styles to build out our table of contents. If at any time you want to survey or change those paragraph styles, you can do that here in the document tab, sub tab TOC, where we list all of the things that the table of contents knows to pay attention to when it builds itself.

And we are going to leave that alone. All right, now we get to build some cool stuff. So here I've got a two-column layout. I have a sense of what I want to create next. It's my demo, after all. So I'm going to choose three-column layout via this conveniently located pop-up menu down here. So it's a little graphical menu. It allows me to choose from the defined page layouts.

So if I want to create variants in my document, I can do that. I don't like where this is breaking, so I'm going to insert another page break. Cool. Now let's bring in a couple of visual elements. The first one I'm going to bring in is purely ornamental in nature.

has this lousy line on it. I'm going to remove that. And you can see that great wrapping behavior that we showcase all the time in iWork demos. That's cool. And then I've got another slightly more fancy illustration that I've done in something like Photoshop or Illustrator, and I just drag that in.

I'm going to turn off its ugly line, too. Great. That's sort of kind of nice. I need to do something to it. I think what it needs are some labels. To add labels to this beastie, I can just insert a text box, do the cell, A little bit smaller. Drag out a copy. Tissue.

Any guesses? Nicely done. I know you know the next one too, but I'm going to leave that alone for just a second, and I'll show you why. All right, so I'm going to group that thing. No biggie. You've seen groups before. Come on. I can resize that, of course.

These guys are all too huge. Great, so I have a diagram that's important. I expect the student to absorb something from this diagram. But right now, iBooks Author doesn't know that this is a special thing, and therefore it's not going to be interactive. And the way to verify that is by clicking back to the portrait view, and you can see in our gutter thumbnail track, there are no thumbnails for that content that we've just created.

Charles, you ask, "Why is that so?" I'll tell you. It's so because the way in which you tell iBooks Author that this is a special image element is you give it a title or a caption. Textbooks are full of illustrations. Most of them have at least a caption to tell you what content is in the frame, and that's why we applied that logic here.

So here, I've turned on the title and the caption for this illustration. I have a selection of layouts, default-defined layouts that I can choose from. I'm gonna choose bottom for this guy. I'm also gonna turn on a label. Let's call that a figure. Okay, that looks like something meaningful, and iBooks Author agrees. Here it is.

It's in kind of a funny place, though. I sort of want it up here, or at least here, and it's not. How do I control where it lives in the portrait flow mode? I can do one of two things. I can simply, you know, translate it up, just offset its position, drag it to where I need it, but that's cheating. What I really should do is anchor this to text.

If I go here to the object placement, it's actually the wrap tab. You can't tell that because there's no label here. And here in the object placement settings, I have it currently set to floating. If I switch this to anchored, I'll see this little blue dot appear somewhere in the text. So now this is the text that this image will forever be associated with until I drag it to a new location.

What we did with this in the design of the system, one of the tenets of the design was make sure the content adapts smartly to changes whenever those changes may occur in your creative process. So I'll show you an example of how anchoring helps you do that. I'm just going to copy this block of text, or I can just actually pound out some carriage returns. So I'm pounding out my carriage returns, and the text is going down and down and down and down.

Watch what happens when life as chemistry leaves the frame, or leaves the page. That image went with it. And if we go over here, we can see that this is the text's new home. The image has maintained its layout relative position. So it's still appearing in the same place, but living on the page with the text that it is anchored to.

So in that way, you're able to make changes late in the game, make changes upstream in your text flow, and those changes will ripple through smartly. One other thing to remember about that behavior is it always ends at your current section level. So you'll never ripple beyond your current section. You'll only make -- you'll only have effect within the section that you made that change in. All right, cool. That's anchoring. Let's get rid of that guy. Put our paragraph style back for this one. No, that's not what I wanted.

That's what I wanted. All right, what do we got next? Well, for some of the media types, we actually know that they're special kind of straightaway, so we don't bother you with having to give them a title or a caption. I need some wrapping behavior here, so I'm going to delete that guy, too.

with no effect. Thanks, Charles. You're welcome, Charles. So I drag in this movie, and it comes pre-wrapped in a frame. So I don't need to do anything special to a movie. This layout sucks for that movie, so we'll switch it to two column. That is much happier. All right, so this movie has come in. It's got its title and label lockup. It's got its caption. I can go ahead and name this thing, Cellular Vision.

And it's got this label here. That's cool. Well, someone in my branding or marketing department wants a bit more of an energetic name, let's say. So they want me to change this label to something custom. They want it to read "Biocinema." In order to do that, I go over here to the widget tab again, and beneath title, when I pop that label menu, I see all of the predefined labels I can choose from. If I select "Edit Label Styles," I can make my own.

So I'll hit plus. I'll call this Bio Cinema. That sounds marketing cool. "I'm going to create it. I can choose a label format. I actually want the section So we'll leave that alone. I'll hit done. We weren't smart enough to apply it, but I can apply it there. Now I have BioCinema 1.1. Okay, that's kind of cool. It gets better. All right, something, something, something, something.

as seen in -- The next thing I'm going to show you is something called a figure reference link. If you want to refer back to an image that's somewhere in your book from a location within text, you can do that by creating a figure reference link. And you create those over here in the hyperlink tab.

So I have a cursor position. I'm going to select enable as hyperlink. If I had a text range selected and I hit that checkbox, that text would become the link itself. But if nothing is selected, we provide one for you. I'm going to point at that movie. It correctly refers to it as bio cinema 1.1. That's pretty cool, but the fun does not stop there. Let me bring in a second movie.

Sir Paul Nurse, exuding brilliance. Great. So it's come in with that new label style that we created, and it's come in properly incremented. But as I mentioned before, we wanted the system to be as adaptive as possible. We want you to make changes whenever you want to. That includes being smart about the relative position and ordering of things.

So if I take Sir Paul Nurse and I put him over here in front of the biocinema, the cellular division video, you'll see that the numbers have exchanged. And also the figure reference link down here has been updated to correctly match the movie it refers to. So that's what we... Thank you.

So that's what we mean by an adaptive system. All right, you'll remember that this guy, Sir Paul Nurse, let's not forget, was represented by an image of himself within iBooks. So let's show you how to do that. You should note a couple of things about this widget's configuration. I can set the poster frame here. I can dial one in. I can set a looping option for this movie if I desire. I'm going to leave it alone.

And up here at the top, I have a full-screen-only checkbox. When I check that, iBooks Author turns the content into a thumbnail for me based on the frame that I defined as my poster frame. But I don't want that image. It's a rather unfortunate image of Sir Paul Nurse, anyway. I'm just going to drag in a replacement thumbnail.

Cool. Now that title and caption aren't in a happy place, I'm going to change my layout to free form, and then get there somewhere where it makes more sense. It's tedious, I know, bear with me. And then drag that out so it feels like something a little bit better. Great, there's Sir Paul Nurse.

Great. Now finally, I think we don't have enough text for one new page, so I'm just going to go ahead and create a blank page. I'm going to bring in the Keynote widget, and I'm in finally for this section. So after a brief kind of transcoding process, Keynote actually fires up in the background to make a lightweight, portable version of that Keynote directory, of that Keynote presentation.

It will behave just like the keynote presentation you created when you created it. I'm going to make it really large on the page, too, because one thing that not a lot of people know is if you make something very big on the page, big enough that it approaches kind of full-screen size, it will restrict you from actually going to full screen. So things will kind of only remain interactive on the page, and they won't go to full screen. They're still present and can be called upon when you're in the portrait flow mode, but they won't be there.

Oh, I'm also going to do the same thing for a gallery. I'm short on text, and I have no idea why. So to create a gallery, you could do the boring thing of going widgets, gallery, insert it. Or you can do the cool thing of just dragging in a set of images, and you create a gallery automatically.

If you need to remask something, you can. I'm going to scale this up so it too is large. I'm going to choose a better layout for this guy, the default layout for this view. Same rules apply here. This gallery probably won't go full screen because it's big enough to break that threshold, and will just remain on the page. Cool. On to the next section.

So for 3D, just like the other elements, you drag in the 3D element. This 3D model is in the Collada format, which is in a file format that is open source and widely known and widely written to by all the 3D authoring packages that you know and love.

Next up, let's do the interactive image. Now with it, I definitely have to go to the widgets popover. I'll choose interactive image. Give myself sufficient area to kind of work with.

Alright, so as that image settles in, you'll see that we provided two call-outs for you to work with kind of straight away, since we're nice like that. This guy is, no, the collateral ligament. So we kind of zoomed in. You can see that that callout had a zoom setting by default.

If I want to change that, I can. I've got a little heads-up display here. I'm going to zoom it up, get a tighter shot of the collateral ligament, and then hit this set view button. The set view button is your friend. You don't want to forget to hit that button, or you'll be very frustrated by the experience. Next, we'll work on this call-out, which again has a Zoom setting. We'll make this one patella. It's not a tiny bit.

You'll notice there's something going on here with the background. My image ends here, and the background for this view is kind of a subtle gray gradient. If I want to get rid of that, I can do that. Here in the Graphics tab, we can edit, The graphic settings for this view. So right now it's set to gradient fill. I can make that a color fill. I can make that transparent if I want.

said it to White, so now when we go to Patella, what did I forget to do? Set the view. God, you'd think the designer would know. Very annoying. Great. So the view is now set. We've got a nice, harmonious background happening. Finally, we'll add one more callout using that handy-dandy plus button on the HUD.

And this guy we'll label Niscus. Set the view, and we're done. So you can see the interactive image is powerful for creating the annotated diagrams, but it has a couple of configuration options that give it extra life. And if you vary these within your book, it's for great interactive effect. So let me show you a couple of those options right now.

Up top you can see we have the show transport controls checkbox. So if I wanted a kind of a guided path structure, I wanted to lead the user through a bunch of set landmarks within my image, I could do that by enabling the transport controls. So if I have this large sweeping panorama that I want to use as the basis, I could do that.

Next up we have the sidebar option. So if this interactive image were more horizontal in nature, let's just make it quickly more horizontal in nature. I could have show descriptions in sidebar, and then now when I activate one of the callouts, you can see that there's an area left reserved for the actual description of this feature.

Let's put that back there. Cool. All right, so next up, let us do the HTML widget. The thing to know about the HTML widget is it's HTML5 as you know and love it, but it needs to be wrapped as a dash code widget, which is easy enough to do.

As I mentioned, they're not interactive on the page, but you can actually preview the HTML here. So we have an unfortunately named edit HTML button here in this HUD. Unfortunately named since you can't actually edit the HTML in here. You can, however, preview it. And you can click on it here.

and see exactly what we saw within iBooks, and that's great. So this view is the dedicated full-screen only view which allows you to see the content that will be live in full screen within iBooks. And lastly here, I'm going to create a review widget. To do that, I insert one. We have A multiple choice question provided by default for your editing pleasure.

No, no, no, let's make it, no, let's make it not. All right, so if there are more than one correct answer that applies here, I can hold down the command button and select all that apply. If I need to change the number of available answers for the end user, I can do that via this menu here in the widget tab.

I'm going to go ahead and set that to three. I want to do that change because I actually want four. And since this question has a metaphysical bent, I'm going to go ahead and select that guy too. When I want to add a new question, I do that via this popover menu here. I'm going to select the visual multiple choice question. And just use the images that we had in our gallery. That guy, and that guy, this guy, and this guy, and ask the question.

I'm going to say this guy because it's a virus that's way scary. If I want to reframe this, I can simply resize this. There you go. Get it exactly where I want it and leave it alone. And that's my question. Let's add one more question type quickly, and then I'm going to show you some tips around working with layouts. So the last question I'm going to do is the drag label to target. Audience participation is expected here because I told you there would be a quiz. And here's the quiz. So to do that, we're going to need this knee.

What is this feature of the human knee? Anyone? Collateral ligament. That's correct. And this? Patella. Awesome. This is a smart crowd. What do I need to do with this guy? I'm going to zoom him up a tight bit. I'll give myself some room to work. Edit Mask allows me to edit the constraints of that mask.

So if I hit Edit Mask, you'll see that that image becomes open to panning and scaling within that view. When I hit Edit Mask for any masked image within the system, it's a slightly different effect. I can toggle between editing the perimeter of the mask or editing the image itself directly.

Probably more of an answer than you wanted, but you know, I don't want to be complete. And then I'll add a third one here, and this last one. Nice job. And we're done. We've successfully recreated the content that we saw within iBooks. That's great. Why did it go so smoothly? Couple of answers. First, I'm the designer on the product, and I'm very familiar with the demo content.

But more importantly, we had a game plan, right? Like, we came in knowing what template we wanted to use. We had the text for our chapter pre-built in a document. We flowed that document into our template. It created pages for us. And then we had all of our assets for the interactive content kind of ready to go. So we were able to populate things very, very quickly.

Key to all of that working well for you is the template. If you want, you can use the templates that we've provided, and you can't go wrong, but you're not going to differentiate yourself very much from the other books that have used that template that you'll find in the iBookstore. So how do you customize these things and kind of make them your own? Well, first, what is a template? A template is the following. It's a selection of layouts, and it's a style sheet for your document, a paragraph style sheet and a character style sheet.

And it is a set of object style attributes all collected in one place. If you want to see your style sheet, your paragraph style sheet, you can hit this little button in the format bar or go view, show styles drawer, and out it will pop. I'm going to turn off these guys.

Now, these are all the paragraph styles that you saw me use earlier in the other pop-up menu. If I want to see my layouts, I can go to that View menu again and hit Show Layouts, or I can just grab this little bar and split it down and reveal the layouts for this book.

So here I have, I can see that I have two layouts defined for my chapters, five layouts defined for section, and a number of individual page layouts. The first difference between the page layouts and the chapter and section layouts, well, it's probably obvious enough, the chapter and section ones have two pages associated with them.

The first is the head page, so whenever you introduce a new chapter or a section, that is the thing that you'll see that identifies the incoming chapter. The second is the default body page, which is the page that gets used to create pages when you flow in text into your document. You can override that at any time, but this is the standard page that will be used when you create a chapter or a section.

So if I want this to be splashier, this looks great in all, Apple, thank you very much, but I want it to have more presence. What can I do? Well, I can go to that layout. I know it's this layout because it has the checkbox beside it, and say, "Okay, bigger is better." So a couple things happened here. Well, this is not in a happy place just yet. I knocked away that text that was beneath it because my image wrap is enabled.

I can defeat it by pushing that image all the way into the background. So the Z-ordering affects the way things are -- the way text is wrapped in the system. Just FYI. I can then select these text boxes, go to the text inspector, and choose a new color. I'm going to make these all white so I can see them. I'm going to do the same thing for this line.

All right, we've got something that looks a little bit different. It's got more presence. It's making good use of that imagery. To see its effect, I can hit the Supply Changes button, which appears any time I change the layout. And you can see that those changes have been inherited by the page that was using this layout.

So it's just that easy to make sweeping changes in your document. If I'd made overrides on this page, I'd edit things locally, change the size of the image, change the size of the text boxes, it would have left those things alone and only pushed changes through to those elements I hadn't touched. If at any point I decide that I want the thing to inherit all the changes, I'll just undo what I did. And via this contextual menu, I can select Reapply Layout to Chapter. And this will reset everything to conform to what's defined in the layout.

So that's our chapter layout which we edited. Let's take a look at our section layout. Alright, this is our section head page. This is the layout that's being used. Another thing you need to know about layouts is that for every layout that exists in landscape, there is a companion layout in the portrait universe.

We switch over to the portrait world, we can see that layout right here. This one doesn't really feel like the one we just left in the landscape world. For example, it's not making use of that imagery that we saw on the page. If you want the portrait layout to share elements with the landscape layout, you can do that very easily.

So if I switch back to landscape, and then in my inspector, go to the layout tab, I can see the attributes for any of the layout elements that I select. So here I have the section image layout object. It's flagged as editable on pages using this layout. What does that mean? It's obvious enough.

If I uncheck this box and hit apply changes, I can no longer affect this thing on that page. I can't select it, I can't edit it, I can't do anything to it, which is great when you're creating elements like this page number that you really don't want to select mistakenly. You don't want things to move around or shift as you're pouring content into your book. In this case, we do want that thing to update, so we're going to undo what I did.

So editable on pages using this layout, and then the second checkbox, shared with portrait layout, will do the obvious thing. It will now make this element, once I apply changes, available to the portrait layout. There it is. I can push it to the background, reveal the text, and do the same process that we just went through for the chapter head.

Apply Changes. Now when we look at our sections, you can see that they've inherited that new heading style. A couple of other things to note in your portrait layouts. You have this little blue splitter bar, which basically determines the proportion of head region to body flow region in your template. And the head region here, of course, corresponds to the head page in Landscape Land, and the body region, of course, corresponds to the body page layout. Some of the things that people don't really know you can do with the portrait layout.

If you have designed a template that you're going to use for a portion of your book that doesn't have any imagery, you can turn off the thumbnail track. And you can do that right here. So there's a show thumbnail track. If I disable that, you can see now my column of text goes full width across the view.

I'm going to leave that enabled. The other thing that you can do that's important to know is that you can change the numbering style for any section or chapter in your book. So here underneath the numbering tab, if I wanted to, I could set this to none, and when I set this to none, none of my sections are going to be numbered in my book. And if I switch over to the portrait table of contents view, I didn't even show you guys this way important stuff up here. Somebody remind me to do that. Table of contents, if I expand things in place now, you can see that these sections don't have numbers.

But if I set that back to relative to chapter, you can see that they will in fact have numbers. There you go. All right, now we should see the right thing. There we go. Know that section number, dot, Roman numeral, section number. That all makes sense. Kind of.

Great. So when all is said and done, we've got our book just the way you want it. You're going to need to preview it, so let's go and preview our masterpiece right now for completeness' sake. To do the previewing, you simply have to connect an iPad physically using the sync cable. Cool.

Actually, before I do that, nobody reminded me, but I'm going to show you this anyway. There are some special nodes up here in the sidebar that you should know about. First is your book cover. It's labeled by your book title, but here's where you will customize and create the cover that will be shown in the iBookstore when you're selling it, and will be shown on the bookshelf after someone has bought it. Here's the intramedia slot where you can drag in a piece of video or a static image to represent your book brand as the interior cover. This is the table of contents view for landscape. You saw the one for portrait.

Here's where you can style things and create a kind of custom table of contents experience. A quick example of that, I won't go into any too great a detail here, but if I wanted to center these things. This guy is not visible. I could do that. Also, I can customize the backsplash and do... Actually, I should have left that white. Shouldn't I have? Yes, I should have. Easy enough to do, right? And then finally, you have your glossary view.

So I can enable that here in the View button. You can see that in this text field, it's pre-populated with the word that I've selected. I can hit Add Term. And now when I go to the glossary view, you can see that that term has been added here. You can do a lot of great stuff here. You can add imagery to support your definitions for glossary term.

You can drag-and-drop to create cross-relationships between terms to this area. And you can also create a number of different index points for any given glossary term. And I apologize, I didn't show that to you earlier. So in order to preview it, I connect the iPad, I make sure iBooks is in the foreground, I hit the preview button. It will take just a moment to prepare the preview.

So once the preview is prepared on iBooks Author's side, it pushes over the content to iBooks. You can see it's updating there. Here's our book cover. We've opened to the same page that we've left focused here in iBooks Author.

So hopefully you've come away with the impression that you can create your own books, and that's exactly the impression we want to leave you with. And I didn't advance through these slides. I'm going to bypass this stuff.

So if you know the iWorks suite of tools, you know iBooks Author, you can get ready, you can use it straight away. Templates are your friend. You can customize them. If they don't give you everything you need, you can create your own templates really, really easily. Here are a bunch of points that I won't bother going through right now.

But for the friends at home, when you freeze frame the video from this session, here are all the special tips and tricks that I touched on. For more information, these are some valuable sources. Please take your snapshot. Allow this to absorb in your brain. Related sessions, Building Interactive Books with EPUB3, HTML, CSS, and DOM for book authors, so on and so forth.