Tuesday, November 16, 2010

Reading Library Ebooks on iPad with Bluefire, the Easy Way

There were a couple of people who thought that the instructions I posted for reading library ebooks on the iPad (and similar devices) with Bluefire Reader were a bit complicated, and didn't want to have to download in one place, upload in another, and transfer things around. Bluefire's Micah Bowers offered some help for creating a direct link in the comments, and another reader, Greg from Oregon, wrote a script to make that new link practically create itself.

I'm going to finish off the job by explaining step-by-step how to make a bookmarklet out of Greg's script, following Greg's instructions as well as a process I learned from installing Instapaper (a wonderful, but unrelated app). Don't you love the internet!

1. Open up your iPad (iPod Touch or iPhone) and come back to this page. Remember, the address is http://www.pigsgourdsandwikis.com.

2. Follow this link to jump to a page that contains the script that you'll have to add as a bookmark. (The whole point of this part is to save you the trouble of typing in the script, but feel free if you're so inclined.)

3. You will find a bit of explanation and a block of code. Press in the white space until the Copy command appears. Drag the upper blue dot so that only the red code is selected. Choose Copy.

Copy code for bookmark

4. Click the big plus sign in Safari's toolbar and then choose Add Bookmark from the pop-down menu in order to create a bookmark. Of course, you don't really want a bookmark to the instruction page, but we can't copy in the code until the bookmark itself exists. Click Save.

Choose Add BookmarkSave bookmark

5. Once the bookmark exists, click the Bookmarks icon (next to the Plus sign), and click Edit. Then click the name “Overdrive bookmark” to open up the bookmark we just created.

6. Erase the old link by holding down your finger over the address (the part that starts http://www.elizabethcastro...) and then choosing Select All and finally Cut.

Erase old linkLink erased

7. Press in the link space one more time until the Paste button appears. Choose it! The script is copied to the bookmark. You can click anywhere in the page to close the Editing window. (You don't have to save.)

Script copied in

The bookmarklet is installed and you never have to look at the code again! Now you're ready to go to your library and find a book. Follow the regular procedure (see Borrowing Library ebooks with a Nook if you need help). Once you've checked out your book and are ready to download, instead of clicking the Download button, click the Overdrive Bookmark we just created.

Click Overdrive bookmark link

Rather magically, a new page will appear with a much better link:


And when you click the link, you jump to Bluefire Reader and it downloads your book, verifies your authorization code as normal, and then wonderfully asks you if you'd like to Read it later or Read it NOW!

Download successful

Ah, you may scoff, that's even worse that what I told you the other day. Perhaps. But once that bookmarklet is installed (it's OK to get someone else to do it for you! or for you to install it for your parents or your kids), reading library ebooks on the iPad is a veritable breeze.

Thank you Micah, Greg, and the guy from Instapaper for working this all out!

And a couple of notes. I haven't tested trying to download multiple titles at once. I suspect it won't work. Just download them one at a time. And I haven't been able to get it to work for PDF ebooks. Not sure why not. Maybe you know?

And finally, this does not remove or bypass DRM at all, since Bluefire requires your iPad or similar to be authorized with your Adobe account. Further, I didn't find any information on Overdrive's site that would indicate they care what device or software you use to read their books, as long as you're not trying to override their protection.

One more finally. I was curious if you could get the book back out, say to read on your computer or copy to another authorized device, and indeed you can. Just go to iTunes, click on the Apps tab, click on Bluefire to see the books it contains, and drag the desired book back out to your computer. Works fine.

Thursday, November 11, 2010

Bluefire Lets You Read Library Books on the iPad

Woke up to a lovely morning tweet: "@lizcastro Done.  Update available now in App Store that supports library books." from @micahsb, a developer and entrepreneur. He was referring to the fact that the new version of their Bluefire Reader app for the iPad can display Adobe DRM'd EPUB format ebooks that you've taken out of the library.

And it works! I connected to my library, and quickly did a search for Adobe ePUB, “took out” and then downloaded The Mysterious Benedict Society, which we're in the process of reading, and clicked OK when I was asked if I wanted to open the file in Adobe Digital Editions. This converts the download file into a Bluefire-compatible Adobe DRM'd EPUB file and places it in the Digital Editions folder, within the Documents folder (or My Documents folder on a PC).

Download for ADE

Next, I opened iTunes, connected and selected my iPad, chose the App panel, selected Bluefire at the bottom of the window in the File Sharing section, clicked Add..., chose the book file from where it was copied—in the Digital Editions folder within the (My) Documents folder—, and then clicked Sync.


I then opened Bluefire Reader on my iPad, and there was my book! Absolutely lovely.

Monday, November 8, 2010

EPUB Webinar Wednesday, Nov 17 (and more!)

There are a lot of things that have changed about me since I was 15, but wanting to be a teacher has remained constant. OK, it's true I didn't enjoy teaching high-school Spanish (at Princeton Day School in 1986!), but I have always loved explaining thing and feel lucky that I figured out a way to make a living at it.

There is one thing that has eluded me since my days teaching Spanish though: standing up in front of a live audience. I've dabbled with a screencast here and there, but though I've been invited to talk at several different conferences, I've always shied away from to speaking in public. Until now.

David Blatner and Anne-Marie Concepción, InDesign Gurus extraordinaire have invited me to do two EPUB related webinars for InDesign Secrets. The first, InDesign to EPUB with Liz Castro, on November 17 at 10am PT, will be a 75 minute survey course, explaining how to go from InDesign CS4 or CS5 to validated EPUB. I'll show you both how to go from an existing InDesign document originally created for print, as well as what you need to keep in mind in order to create InDesign documents that can be leveraged for both print and digital editions of your books.

Early Bird Tickets are available until Wednesday, November 10th (acks, that's the day after tomorrow!). You can get an extra 10% off just because you read my blog (or follow me on Twitter) by using the discount code GOURDS. (You gotta love David's sense of humor :)

On Wednesday, December 1, also at 10am Pacific (which is 1pm on the East Coast and 7pm here in Central Europe), I'll be doing the second EPUB Webinar: Advanced EPUB Formatting with Liz Castro. In that class, which also lasts 75 minutes, I'll show you how to crack open your EPUB document and add and adjust formatting by hand, including special fonts, keeping elements together, text wrapped around images, and much more.

You can take advantage of early bird pricing by buying your ticket to the second webinar by November 24. And don't forget to get your extra 10% discount by using the GOURDS code!

Ah, you say, that's not standing in front of a live audience! Well, I'm getting there :) For those of you on this side of the pond, I will be giving a talk (in Spanish) in Santiago de Compostela—which many say is the most beautiful city in Spain—on EPUB and how we got here on November 25th at the Trends & Creativity [GL] conference put on by the Clúster do Produto Gráfico e do Libro Galego [GL]. Many thanks to my Twitter friend Tati Mancebo for connecting me up with those folks.

Saturday, November 6, 2010

Drumbeat Open Video Lab - Day 2

So I have to preface my take on Day 2 at Drumbeat in Barcelona with a little background. About ten years ago, I dared to write a book on programming, on Perl and CGI in particular. And although I think one of my strengths as a technical writer is bringing a fresh perspective to complicated topics, and indeed the book was quite successful and helped a lot of people add interactivity to their web sites, it was not well received by Perl purists who painted me as an interloper, a gasp!, non-programmer.

Of course, it was and is true that I am not a programmer. Indeed, my angle, if you can call it that, has always been to make technology more accessible for regular people, people who may not code for a living, but who are willing to roll up their sleeves and dip into the underpinnings of a project and not just accept what commercial software allows them to do.

I'm inspired by the spirit of The Macintosh Bible, one of my first publishing projects ever (in particular the Spanish version of the 3rd edition) in which Arthur Naiman made it clear that “easy is hard” and that if you dug a little, you could find a million tricks that would make your computing life that much easier. The Maker phenomenon is a newer reincarnation of this same spirit: that we don't have to settle for what they give us, we can open it up, and build a better version. I love that.

At the same time, I have a hard time shaking off the feeling that I'm just an outsider looking in, not a real programmer, not a real hacker.

So, I'll admit it was with some trepidation that I returned to the Open Video Lab yesterday morning, knowing that they wanted us to build a real project, and that they were going to depend a lot on Javascript and the popcorn.js library that they had built previously. Even their focus on HTML5, which was a big part of why I showed up, was a little daunting. (Does everyone imagine that everyone else knows ten times more than they do?)

I found the whole process fascinating. I'm used to working completely alone, in my own office, doing every bit of my projects, from concept to outline to examples to illustrations to layout to copyediting alone. When I don't know something, I go quietly searching for information, without having to tell everyone I work with what it is that I don't know.

Drumbeat, in contrast, was all laid wide open. About 10 of us returned from the previous day, along with two or three new folks. Dave Humphrey got us thinking about the projects we had talked about on Thursday and helped us both focus on what the projects consisted and what we were trying to solve, as well as what skill sets the members of the group had to offer. There were a lot of Javascript and HTML coders as well as a few designers and video production people. I was totally intimidated by the idea of writing actual code with these guys, and at the same time didn't want to lose the opportunity of learning what they knew. I was also unsure I had enough to offer myself, though thankfully I wasn't the only one to say this.

We ended up dividing into two groups. The first, led by Brett Gaylor, wanted to create a jazzier, prettier demo of popcorn.js, a Javascript library that allows you to line up data to particular points on a video timeline, and thus create mashups like the one they showed the day before in which people in the video tell where they're from and this information is used to trigger Google Maps and Wikipedia giving more information on that location.

A Javascript library is a bunch of code written in such a way that it can be used not just for the original project for which it was conceived, but also easily leveraged for other projects. It's an integral element of the programming community that attempts to highlight and save the best code so that people don't have to continually reinvent the wheel.

The second group, which I was a part of, wanted to figure out a way to expose existing metadata, like the title, creator, or date a video was produced, that was associated with a video either right in the page (with RDFa), or with an external XML file, so that people watching the video could actually see information about the video with a single click.

We then spent about half an hour, with Dave Humphrey's helpful facilitation and focus, discussing the different parts of the project: where we would get the metadata, how we would parse that data once we had it, how users would reveal the data, and then what the data would look like once revealed. The most curious part for me, was then dividing up into the groups that would work on each section of the project.

One group took on the task of figuring out how to pull the metadata out of the HTML file. Although I didn't follow them as closely, I'm pretty sure they used some existing RDFa Javascript libraries. The second worked on writing the code that would make a button appear and disappear when the user clicked. They too were working mostly in Javascript. I was in the third group that worked on displaying the found information right on top of the video. We were writing a combination of Javascript (both with Jquery, a larger web-page related library and without), HTML, and CSS.

I think the part that most surprised me is how small the individual pieces of the project seemed at first, and how much they all realized that they weren't really that small, and would take the better part of the day to create, even divided up between the participants as they were. It was also interesting seeing how they wrote the code in a way that they could test it separately, but that it could later fit together with the other pieces. I loved how they really drew on the different strengths of this randomly assembled group of people and made it possible to all work together. There was really good energy in the room.

We broke for lunch and I was lucky enough to go off with Mark Boas, who is a web developer who has written a popular Javascript plug-in for dealing with audio called jPlayer. He is based in Italy but also has a Catalan connection, and it was great to talk to him and hear what he's working on.

Back at Drumbeat, we all mostly finished up our individual modules, and then began joining them together. Curiously, that was mostly done via USB stick, as the wifi was intermittent at best. Each time the code was joined, we had to test to make sure that what worked separately now would play nicely with the other person's code. The use of jQuery as well as straight Javascrit was problematic, but not crippling.

Once all the code was together, they connected the last computer to a projector so that we could all see and debug the final project together. At this point, the designer folks jumped in and offered suggestions about positioning and font size. What a collaboration!

There were a few hours left before the Drumbeat-wide presentation of projects at 6pm, so I wandered off to find Nicholas Reville who was talking up Universal Subtitles, which is a great collaborative way to add subtitles to videos to make them more accessible to the hearing impaired and to those who don't speak a given language.

And I also found fellow locals Patrick Davenne and Chris Pinchen who offered me beer and conversation, and we lamented the complete disconnect between the festival and Barcelona itself, among other things.

Then back up to the video lab. Our metadata project was finished but the folks doing the popcorn.js demo were still working furiously. They had taken a video of folks at the conference in five languages, edited and compressed it, translated and added English subtitles with the previously mentioned Universal Subtitles, and then used popcorn.js (I think) to pull in and display tweets from the conference on the page as the video plays. The problematic wifi connection had made it hard for them to stream the video in order to synchronize the subtitles, and I was happy to be useful for a few minutes interpreting so that we could finish up the timing.

Perhaps my favorite moment was when about ten of us were hovering over the person doing the final screencast, trying to figure out why the timecodes were appearing on screen. It was crowd-debugging, and we found the extra space and got it out just in time to finish the capture, and run down to the presentation with USB stick in hand. [link coming soon]

So, I'm still not a programmer, but Drumbeat—and the generous, smart people within—let me have a peek into their world that made it feel that much less intimidating. Sometimes when you don't know how something works you imagine it ten times harder and more complicated than it really is. It's probably time for me to work on sharing that idea—particularly with respect to Javascript—with my readers.

Thursday, November 4, 2010

Drumbeat Barcelona - Open Video Lab - Day 1

Thanks to @pdavenne and @cataspanglish and their Barcelona Social Media camp, I happened to meet hear Enric Senabre (@esenabre) give a talk on Mozilla's Drumbeat Festival, held this week in Barcelona. Drumbeat is the Mozilla's foundation to go beyond an open source browser and try to find other parts of life that can be enhanced with open source software. The theme of this week's festival is open education and how to facilitate it with open source software. There are 400 attendees, about 75% of which are from out of the country.

Which means I spent the day in San Francisco, practically, complete with a talk by Aza Raskin, but I'll get to that. It was pretty surreal being surrounded by Americans and English speaking Europeans right in the center of Barcelona.

I opted to spend the day in the Open Video Lab. I wasn't quite sure what that was going to mean, and I think a lot of the people, including the organizers, Brett Gaylor, Dave Humphreys and Ben Moskowitz might not have either. That didn't stop them from skillfully guiding and coaching the group to figure out some hands-on projects to work on.

First, they had us go around the room explaining where we came from and what we were working on. There were a fair number of video producers, web designers, educators, and also some coders. I jotted down a few of the topics that people were either working on or interested in: subtitling videos, teaching digital video, knowledge mapping, video production with minority youth, putting videos online, linking existing metadata with video, management consulting, teaching with video, designing and developing video, screen casting, mixing video with education, producing documentaries, video literacy, jplayer javascript library, media studies, documenting systems, figuring out how things relate, web video projects.

They/We came from the UK, Germany, Minnesota, Barcelona, France, Brazil, Galicia, and Madrid, to name just a few.

Brett and Dave began the workshop by asking us "what is possible with open video" and then showing us a few demos that took advantage of HTML5. There was a page with a video of a whale with an overlaid canvas element that mapped the audio to a visual representation. There was a kung fu video that used the browser to add a shading effect in real time. There were even video games, that mixed 3d, Flickr, Twitter, and rendered right in the browser.

Then they talked about popcorn.js, a Javascript library that Brett (I think) and a crew of students from Canada put together in a week to deal with video with HTML5. They showed us a sample that they had created that day with a video from Drumbeat conference attendees saying where they were from, superimposed on a window that was half Google Maps, half Wikipedia entry for that location.

Then Wendy from Bay Area Video Coalition showed us some of the videos that they're producing, with an eye towards promoting social justice.

Ben Moskowitz showed us a demo of MediaThread, a project at Columbia that allows professors and students to reference, annotate, and cite videos available through YouTube or other sources. It looked really valuable. The code is open-source, but the working project is unfortunately available only to folks associated with Columbia University.

Ben also showed us Pad.ma, an Indian site that catalogs videos with all sorts of different kinds of metadata, including name, title, keywords, and words in the transcript, and then lets visitors search through the metadata for particular videos.

Then it was time for the hands-on section. They showed us the example they had pulled together that morning, referenced above, using the popcorn.js library.

But before we got to the code itself, we talked a little about codecs and video editing tools. There was general consensus that despite the existence of some tools, none really offered the same capabilities as Final Cut.

As for codecs, Ben told us that Theora and webM were both open-source, as opposed to the most prevalent codec, H.264, which required paying licensing fees. He said that in about a year we would all be using webM, a standard developed by Google from vp8, and for which Google had paid the licensing fees for everyone (could that be right?), but that it was not yet well supported, and so recommended using Theora, at least for now.

Theora, though, doesn't work in Safari, so you really have to make more than one video source file available in order to be compatible with Apple-based browsers (including on the iPad).

Then he showed us the HTML5 video tag:

<video id="video" src="..." controls data-timeline-sources="locations.xml">

He said you could use HTML and CSS to format the controls, or use the controls attribute. And that attributes that begin with data- are recognized as extensions to HTML5 and thus will not keep the document from validating.  It works because of the popscript.js script being called. He unfortunately did not get to showing us the locations.xml tag.

He then quickly showed us a little tool that he said he had written in a few hours to gather latitude and longitude coordinates from Google Maps that he could then feed into the mashup.

But then we broke up into small groups and we didn't delve further into the code. I hope we get there tomorrow.

In our breakout group, we talked about metadata, and also touched on individuals' particular issues.

We talked about how there are two different classes of metadata... what I like to call formal (dublin core structured) and informal (tags, keywords, made up by individuals), and how they have different purposes (the former for finding the video itself, the latter for pinpointing bits within the video).

Meanwhile, Dave kept helping us focus in on a particular problem... and we decided it was how to expose existing metadata that was already related to a video. There were a few people who had libraries of video as well as XML structured metadata and wanted to be able to overlay the metadata on the video so that the metadata was revealed in the browser.

The other breakout groups came back, and my very shorthand summaries of what they found were:

Students using video to learn, then go back and watch themselves is different than producing video itself (meta-cognitive)

Need one place to put all files, design matters, generational issue

Tools: learner and teacher tools not necessarily the same

Destroy those boundaries, teacher proposes, students remix and turn on head; said another way: teacher create lesson plan, students mess with it

Then we were treated to this great presentation by Aza Raskin on Prototyping.

How to think about Prototyping and why
Hardest part about software development is the people, convincing them to make something
Must build first 100 miles (prototype), then build resort at end (inspiration)
Value of idea is 0
Unless communicated
You want project to be touchable and feelable
Idea < writeup < mockups < prototype < video
Firefox Panorama, organizing tasks spatiallly
Goal of prototyping is to convince yourself of the idea
   0 You will be wrong first time
   1 Complete prototype in a single day
   2 Make a touchable sketch (don't do everything)
   3 Tight feedback loop (dogfood?!)
   4 iterating solution helps illuminate problem
   5 treat code as throwaway, be ready to refactor
   6 steal design, make beautiful


Pitch your prototype
How does it make THEIR life better?
Be dramatic.

Example: Twitter streamer

And then I went back out into Barcelona!

Tuesday, November 2, 2010

Editing EPUB files right in the iPad

Rick Gordon has long touted his method of editing EPUB files right in a jail-broken iPad. But I've been too chicken. But I am finally getting caught up with some reading I needed to do and found this great article by Keith Fahlgren over on the ThreePress blog (which you should definitely also follow, if you're into EPUB). The article explains how to use the iPhone Explorer program to access the XHTML and CSS files on your iPad to facilitate updating EPUBs. And it's awesome.

Digging around a bit, I found that Macroplant, the folks who wrote iPhone Explorer, also created a little program called Phone Disk, that usually costs $10 but is free until December 1. It's even better than iPhone Explorer. What it does is show you the contents of your iPad (or iPhone or iPod) as if it were any other external drive. Check this out:

Phone Disk

You'll notice that there is a Books folder inside the iPad (mine's ambitiously called, “Firstpad”) and that within the Books folder are a series of folders with cryptic names, all ending in .epub. Although you can open up the Books.list file to see which cryptic code is related to the book you're interested in, I find it faster to list the books by Date Modified. That way, the one that I'm working on is always at the very top.

According to Macroplant, you should be able to double-click on a file and open it, and that works for
me with XHTML and CSS with TextEdit, but curiously not with BBEdit, my editing tool of choice, which acts like it's hung before recovering and showing you the file, making it too slow to be useful.

Thankfully, the folks at Barebones gave me a solution. They say that BBEdit looks like it's hanging because it's checking for a few files, and that on a remote file system like the iPad, it takes a longer time. To fool BBEdit into not worrying about where it is, you have to create two empty text files, "bbedit.bbeditSettings" and "tags", and place them in the EPUB folder whose book you want to edit. Now when you click an XHTML or CSS file, it'll open right away in BBEdit.

Add BBEdit files

After you make and save changes in the XHTML file (or CSS), you'll need to close and reopen the book on the iPad to see how the changes look. But this is nothing compared to rezipping, dragging, waiting for it to sync, opening it back up again and so on. It will save you a lot of time.

When you're done testing and adjusting your EPUB file, you need a way to get it out of the iPad so you can distribute it. First, be sure to eliminate both of the BBEdit files that we added. I like to drag them out to the Books level so I'll have them for the next book I'm working on. Then, delete the iTunesMetadata.plist file (which Apple annoyingly adds to your EPUB) as well. It seems like you should then be able to sync the iPad with your Mac via iTunes and then drag the EPUB file out to your desktop but I haven't been able to get that to work (the newer EPUB from the iPad doesn't ever get to the iTunes library).

Instead, still using Phone Disk, drag the entire EPUB folder from the iPad out onto the desktop, and then zip it back up with Terminal. (You remembered to delete the special BBEdit files and the iTunes Metadata file, right?)

Being able to make edits directly to your EPUB on the iPad (or an iPhone) is a huge time saver. Thanks, Keith, for getting me started on this.

More of my books