Last night my photography ebook, “Barcelona Beyond Gaudí” was accepted into the iBookstore. While I'm personally very excited, I'm also professionally excited (!), since this means that Apple accepts Javascript in EPUB files for iBooks.
There is so much that Javascript will let us do in ebooks. Walrus Studio in Paris has an intriguing demo video showing text that can be revealed and blurred, and game points being added, erased, and tallied.
My own example is extremely simple and just uses Javascript to switch the stacking order of various elements so that full-page images can be either viewed on their own or with captions that contain descriptive information.
But the possibilities are endless. And the fact that Apple accepts them opens a very large door. It also gives EPUBs on iBooks another competitive advantage over EPUBs on other devices and Kindle books.
At first, I would think that this only affects non-fiction, but imagine if Cortázar had been able to write a Javascript-enabled novel!
(And a tiny aside. I was a bit worried about the accent in the title of my book—Yes, it's "gow-DEE" not "GOW-dy"—but, thankfully, searching on both Gaudí and Gaudi in the iBookstore and iTunes brings up my book.)
Friday, June 17, 2011
Thursday, June 9, 2011
Apple adds Read Aloud capability to iBooks 1.3
One of the very interesting new features that Apple has added to iBooks 1.3 is support for Media Overlays as specified in the EPUB3 spec. According to Lawrence Furnival, it works with Fixed Layout EPUBs using SMIL files that link the audio to the text, using a timeline and CSS to highlight particular words as they are spoken. It's pretty exciting.
I haven't figure out how to do it yet, but as soon as I do, you'll be the first to know.
Meanwhile, here's a sample. (I've been hearing that some people are having trouble getting it to work. I didn't.)
Sample Read Aloud book “Splat the Cat” from Liz Castro on Vimeo.
It looks like there are 42 titles available immediately. I found a link to “Read and Listen” on the Featured page of the iBookstore:
I haven't figure out how to do it yet, but as soon as I do, you'll be the first to know.
Meanwhile, here's a sample. (I've been hearing that some people are having trouble getting it to work. I didn't.)
Sample Read Aloud book “Splat the Cat” from Liz Castro on Vimeo.
It looks like there are 42 titles available immediately. I found a link to “Read and Listen” on the Featured page of the iBookstore:
Wednesday, June 8, 2011
Visual TOC for Fixed Layout EPUBs
Last night, Anne-Marie Concepción took a look at my new Fixed Layout EPUB book, “Barcelona Beyond Gaudí” and pointed out that the navigational TOC was made out of thumbnails of the individual pages instead of text descriptions.
I wish I could say I had done that on purpose, but although I noticed in Apple's new iBookstore Asset Guide (4.7 rev2) that they had mentioned how to create such a thumbnail-based TOC, I was so focused on the Javascript and geolocation parts of the project that I didn't even notice the TOC until Anne-Marie pointed it out.
But actually, it's a bit more complicated (or simple) than that. It turns out that iBooks creates visual “Thumbnail TOCs” for Fixed Layout books by default. You don't have to do anything special. When a visitor clicks the TOC button, the Thumbnail TOC is what appears by default, along with two buttons that let you switch between the Thumbnail and Text TOCs:
Frankly, the Thumbnail TOC is pretty perfect for a fixed layout ebook that's based on photos like this one. It makes much more sense to be able to jump to the desired image than to try to figure out which one is which from an abbreviated bit of text in a text-based TOC.
But, if your visitor wants the text TOC, all they have to do is click the List icon at the right of the screen (next to the Bookmark icon).
The instructions in the iBookstore Asset Guide shows you not how to create the Thumbnail TOC but how to get rid of the Text TOC. Not sure why you'd want to, as it's not harming anyone back there and is pretty hidden as it is, but to get rid of it, simply specify a single navPoint in your toc.ncx file:
Now when your reader views the TOC, they'll see only the thumbnail one, with no List button to switch to Text view.
If you'd like to buy this first book in my Barcelona Beyond Gaudí series, it's available right now from my own site, and has no DRM so that you can look inside. It should be up any day now (come, on Apple!) on the iBookstore in the US, UK, France, Germany, Australia, and New Zealand. (I'd do more if there were more!) If you want more information about creating Fixed Layout EPUBs, you might be interested in buying my miniguide to Fixed Layout EPUB.
I wish I could say I had done that on purpose, but although I noticed in Apple's new iBookstore Asset Guide (4.7 rev2) that they had mentioned how to create such a thumbnail-based TOC, I was so focused on the Javascript and geolocation parts of the project that I didn't even notice the TOC until Anne-Marie pointed it out.
But actually, it's a bit more complicated (or simple) than that. It turns out that iBooks creates visual “Thumbnail TOCs” for Fixed Layout books by default. You don't have to do anything special. When a visitor clicks the TOC button, the Thumbnail TOC is what appears by default, along with two buttons that let you switch between the Thumbnail and Text TOCs:
Frankly, the Thumbnail TOC is pretty perfect for a fixed layout ebook that's based on photos like this one. It makes much more sense to be able to jump to the desired image than to try to figure out which one is which from an abbreviated bit of text in a text-based TOC.
But, if your visitor wants the text TOC, all they have to do is click the List icon at the right of the screen (next to the Bookmark icon).
The instructions in the iBookstore Asset Guide shows you not how to create the Thumbnail TOC but how to get rid of the Text TOC. Not sure why you'd want to, as it's not harming anyone back there and is pretty hidden as it is, but to get rid of it, simply specify a single navPoint in your toc.ncx file:
<docTitle>
<text>Barcelona Beyond Gaudí</text>
</docTitle>
<navMap>
<navPoint id="p3" playOrder="3">
<navLabel>
<text>Barcelona Beyond Gaudí</text>
</navLabel>
<content src="page06.xhtml" />
</navPoint>
</navMap> Now when your reader views the TOC, they'll see only the thumbnail one, with no List button to switch to Text view.
If you'd like to buy this first book in my Barcelona Beyond Gaudí series, it's available right now from my own site, and has no DRM so that you can look inside. It should be up any day now (come, on Apple!) on the iBookstore in the US, UK, France, Germany, Australia, and New Zealand. (I'd do more if there were more!) If you want more information about creating Fixed Layout EPUBs, you might be interested in buying my miniguide to Fixed Layout EPUB.
Blogger offers new mobile templates
Have you looked at your blog on your phone lately? Mine's pretty illegible, I'm afraid to say.
I discovered this morning that Blogger has added some nice new mobile templates to its settings. They make your blog look a lot better—if also simpler and easier to read—on iPhones and other mobile devices. (Note that the regular version will be used on iPad, which I think makes sense.) And it's super easy to set up.
Go to the Email & Mobile tab of the Settings section of your blog in Blogger:
In the Show mobile template section at the top of the tab, click Yes. Click the blue Mobile Preview button to get a sample of what your blog will look like in mobile browsers:
Don't forget to click Save Settings at the bottom of the tab.
And then go check your blog in some mobile devices (sorry, mine are all iOS):
Did I mention I wrote a pretty good book on customizing Blogger? It's called Publishing a Blog with Blogger: Visual QuickProject Guide. You can buy it on Amazon
and elsewhere.
I discovered this morning that Blogger has added some nice new mobile templates to its settings. They make your blog look a lot better—if also simpler and easier to read—on iPhones and other mobile devices. (Note that the regular version will be used on iPad, which I think makes sense.) And it's super easy to set up.
Go to the Email & Mobile tab of the Settings section of your blog in Blogger:
In the Show mobile template section at the top of the tab, click Yes. Click the blue Mobile Preview button to get a sample of what your blog will look like in mobile browsers:
Don't forget to click Save Settings at the bottom of the tab.
And then go check your blog in some mobile devices (sorry, mine are all iOS):
Did I mention I wrote a pretty good book on customizing Blogger? It's called Publishing a Blog with Blogger: Visual QuickProject Guide. You can buy it on Amazon
and elsewhere.
Thursday, June 2, 2011
Javascript and geolocation in Fixed Layout ebooks on iPad/iPhone
(Updated again on 17 June 2011 since Apple has approved the book and listed it in the iBookstore.)
(Updated with new discount on Friday morning.)
Rick Gordon sent a link to an interesting photo book the other day: it's a collection of photographs of San Francisco, set in fixed layout format as if it were a coffee table book. The photographs are lovely but I have to admit the whole thing just made me want to create my own. I have thousands of pictures of Barcelona and there is so much that I'd love to share about this place. I was totally inspired. Here's what I came up with:
Barcelona Beyond Gaudí Demo: Interactive Fixed Layout ebook from Liz Castro on Vimeo. ($1.99 from iBookstore. Or $2.99 with $1 discount to any of my other EPUB titles* if you buy it directly from me.) It is a DRM-free EPUB file with Javascript that passes EpubCheck, and has been approved and accepted by Apple iBookstore. It is compatible with iPad, iPhone, and iPod touch.
The hardest part of the project, of course, was choosing the photographs. I decided to focus this first collection on architectural details of lesser known buildings. Tourists and Barcelonians alike are more than familiar with Antoni Gaudí and his Sagrada Família and Dragon House, so I decided to avoid his admitted gorgeous buildings altogether in order to highlight something new. I chose 50 landscape oriented photos to keep my layout simple and straightforward.
I wanted to display information about the photos but I also wanted to use as much of the screen as possible. I tried lots of different systems for adding captions—below and above the photos—but then I thought how nice it would be to add a caption right on top of a photo and then hide it when the reader was done. I'm no Javascript expert, but I was able to carve out a very simple script that changed the stacking order of my photographs depending on what was clicked. At first, I used an info button that a user could click to make the information appear. But it was too big on the iPad and too small on the iPhone. Then it occurred to me that I could use the whole image as a link, at least the left half of it: a user can click anywhere on the left page to make the caption appear. Then a click in the caption makes the caption disappear so that the entire photo can be viewed without distraction. I think it's very cool :)
Since iBooks already reacts to a user's clicks by showing and hiding the navigation system across the bottom and top, the user has to press a little longer than necessary to get the caption to show. In addition, the user has to avoid turning the page by clicking too close to the left margin. Finally, I decided to display the caption at the bottom of the page, but not too close so that it wouldn't be obscured by the navigation system.
The more I thought about the caption, the more I wanted to add location information so that if a reader wanted to visit one of these special buildings, they could find just where they were, and even chart a course. Since the book works fine on iPhone, readers could take a tour while they were walking about Barcelona. I learned how to create links to Google Maps using decimal coordinates for the buildings in question, and then I added a Maps icon with a link and made it appear along with the caption. When a reader clicks the Maps icon, they can choose to leave iBooks and view the location of the building in the Maps app. They can click the left Street View button to view the building right in the context of its own street, or click the Directions buttons to see how to get there from where they are that minute. It's pretty fun to play with. The only downside is that there is no quick way to return to iBooks once the reader is done looking at the map, short of clicking out of Maps and then clicking into iBooks again.
I was careful to write the Javascript in such a way that the EPUB file validated perfectly both in EpubCheck and in iTunes Producer.I am still not sure that Apple will approveApple has approved the file, thoughsince there's nothing in the specifications that says you can't have Javascript or link to Google Maps. But who knows.. Here is the link to the US iBookstore. At any rate, you can buy the Barcelona Beyond Gaudí EPUB file directly from my site as usual. It's only $2.99 $1.99* (after discount). As usual, it has no DRM so that you can unzip it and look at my code.
It's probably time I learned a bit more Javascript. There are just so many possibilities. This is just the tiniest tip of the iceberg. But boy it's exciting up here!
You'll note that Barcelona Beyond Gaudí costs $1.99 on the Apple iBookstore, but $2.99 on my own site. That's because my shopping cart (Kagi) won't let me make the price any lower. So, if you buy it directly from me, I'll include a coupon for $1 off any EPUB related title that I sell to make up the difference.
(Updated with new discount on Friday morning.)
Rick Gordon sent a link to an interesting photo book the other day: it's a collection of photographs of San Francisco, set in fixed layout format as if it were a coffee table book. The photographs are lovely but I have to admit the whole thing just made me want to create my own. I have thousands of pictures of Barcelona and there is so much that I'd love to share about this place. I was totally inspired. Here's what I came up with:
Barcelona Beyond Gaudí Demo: Interactive Fixed Layout ebook from Liz Castro on Vimeo. ($1.99 from iBookstore. Or $2.99 with $1 discount to any of my other EPUB titles* if you buy it directly from me.) It is a DRM-free EPUB file with Javascript that passes EpubCheck, and has been approved and accepted by Apple iBookstore. It is compatible with iPad, iPhone, and iPod touch.
The hardest part of the project, of course, was choosing the photographs. I decided to focus this first collection on architectural details of lesser known buildings. Tourists and Barcelonians alike are more than familiar with Antoni Gaudí and his Sagrada Família and Dragon House, so I decided to avoid his admitted gorgeous buildings altogether in order to highlight something new. I chose 50 landscape oriented photos to keep my layout simple and straightforward.
I wanted to display information about the photos but I also wanted to use as much of the screen as possible. I tried lots of different systems for adding captions—below and above the photos—but then I thought how nice it would be to add a caption right on top of a photo and then hide it when the reader was done. I'm no Javascript expert, but I was able to carve out a very simple script that changed the stacking order of my photographs depending on what was clicked. At first, I used an info button that a user could click to make the information appear. But it was too big on the iPad and too small on the iPhone. Then it occurred to me that I could use the whole image as a link, at least the left half of it: a user can click anywhere on the left page to make the caption appear. Then a click in the caption makes the caption disappear so that the entire photo can be viewed without distraction. I think it's very cool :)
Since iBooks already reacts to a user's clicks by showing and hiding the navigation system across the bottom and top, the user has to press a little longer than necessary to get the caption to show. In addition, the user has to avoid turning the page by clicking too close to the left margin. Finally, I decided to display the caption at the bottom of the page, but not too close so that it wouldn't be obscured by the navigation system.
The more I thought about the caption, the more I wanted to add location information so that if a reader wanted to visit one of these special buildings, they could find just where they were, and even chart a course. Since the book works fine on iPhone, readers could take a tour while they were walking about Barcelona. I learned how to create links to Google Maps using decimal coordinates for the buildings in question, and then I added a Maps icon with a link and made it appear along with the caption. When a reader clicks the Maps icon, they can choose to leave iBooks and view the location of the building in the Maps app. They can click the left Street View button to view the building right in the context of its own street, or click the Directions buttons to see how to get there from where they are that minute. It's pretty fun to play with. The only downside is that there is no quick way to return to iBooks once the reader is done looking at the map, short of clicking out of Maps and then clicking into iBooks again.
I was careful to write the Javascript in such a way that the EPUB file validated perfectly both in EpubCheck and in iTunes Producer.
It's probably time I learned a bit more Javascript. There are just so many possibilities. This is just the tiniest tip of the iceberg. But boy it's exciting up here!
You'll note that Barcelona Beyond Gaudí costs $1.99 on the Apple iBookstore, but $2.99 on my own site. That's because my shopping cart (Kagi) won't let me make the price any lower. So, if you buy it directly from me, I'll include a coupon for $1 off any EPUB related title that I sell to make up the difference.
Subscribe to:
Posts (Atom)
