Latest blog post: 10 Epic Dribblers That You Should Be Following →

Archive for the ‘Uncategorized’ Category

Create and convert an epub formatted book for iBooks, Amazon, etc..

by
Ericon November 10, 2011  :  Leave a Comment

Girl holding Kindle

I recently began working on an e-book of my own and quickly realized that this space has a lot of room for innovation and reform. First off, I had a hard time even figuring out how the EPUB format works and what it takes to create it. Hopefully this will clear some things up for you.

How does epub format work?

An ePub document is really a collection of XHTML files, stylesheets and images which are all contained together in ZIP format. It is basically like a little self contained website. This format tells the e-reader how to display the book to the user.

Here’s an example of an EPUB .xhtml file skeleton:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <title>Pride and Prejudice</title>
    <link rel="stylesheet" href="css/main.css" type="text/css" />
  </head>
  <body>
    ...
  </body>
</html>

Each .xhtml file represents a chapter of the book. You can embed images, styles, etc in the document just like you would a standard XHTML document. If you’re familiar at all with HTML this won’t come as too much of a shock. If you’re not familiar with HTML then you’re in luck! There are some tools out there which help you organize your ebook visually. Be forewarned, however, they are not easy to use.

Sigil – This is a multi-platform EPUB editor that is very simple and very small. The overall user experience (as with many ebook editors) is pretty bad though. It took me an hour or so to figure out how to use it but it works well overall. The main thing I liked about Sigil is that it gives you pretty deep control over the styling and organization of the ebook. You’ll need to understand HTML and CSS at least a little bit though since you must use it for styling.

epubbud – While the user experience may be pretty rough, epubbud is one of the only websites I could find that actually had decent EPUB editing functionality. The main issue I ran into here was that their text editor would constantly mess up my formatting. It made it nearly impossible to format the book the way that I wanted to.

Calibre – I used Calibre for about an hour and then gave up. It definitely works and comes pretty highly recommended but I just didn’t have luck with it, maybe you will though!

Table of contents

The table of contents for an EPUB book is stored in a .ncx file. This file must conform to a specific format and must reference chapter files exactly.

Here’s an example of a .ncx skeleton file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ncx PUBLIC "-//NISO//DTD ncx 2005-1//EN"
"http://www.daisy.org/z3986/2005/ncx-2005-1.dtd">
 
<ncx version="2005-1" xml:lang="en" xmlns="http://www.daisy.org/z3986/2005/ncx/">
 
  <head>
<!-- The following four metadata items are required for all NCX documents,
including those conforming to the relaxed constraints of OPS 2.0 -->
 
    <meta name="dtb:uid" content="123456789X"/> <!-- same as in .opf -->
    <meta name="dtb:depth" content="1"/> <!-- 1 or higher -->
    <meta name="dtb:totalPageCount" content="0"/> <!-- must be 0 -->
    <meta name="dtb:maxPageNumber" content="0"/> <!-- must be 0 -->
  </head>
 
  <docTitle>
    <text>Pride and Prejudice</text>
  </docTitle>
 
  <docAuthor>
    <text>Austen, Jane</text>
  </docAuthor>
 
  <navMap>
    <navPoint class="chapter" id="chapter1" playOrder="1">
      <navLabel><text>Chapter 1</text></navLabel>
      <content src="chapter1.xhtml"/>
    </navPoint>
  </navMap>
 
</ncx>

Defining components of your ebook

The .opf file defines the different components of an ebook like metadata, file manifest and linear reading order. There are a lot of important sections to a .opf document.

Here’s a sample skeleton to help you understand how it works:

<?xml version="1.0"?>
<package version="2.0" xmlns="http://www.idpf.org/2007/opf" unique-identifier="BookId">
 
  <metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:opf="http://www.idpf.org/2007/opf">
    <dc:title>Pride and Prejudice</dc:title>
    <dc:language>en</dc:language>
    <dc:identifier id="BookId" opf:scheme="ISBN">123456789X</dc:identifier>
    <dc:creator opf:file-as="Austen, Jane" opf:role="aut">Jane Austen</dc:creator>
  </metadata>
 
  <manifest>
    <item id="chapter1" href="chapter1.xhtml" media-type="application/xhtml+xml"/>
    <item id="stylesheet" href="style.css" media-type="text/css"/>
    <item id="ch1-pic" href="ch1-pic.png" media-type="image/png"/>
    <item id="myfont" href="css/myfont.otf" media-type="application/x-font-opentype"/>
    <item id="ncx" href="book.ncx" media-type="application/x-dtbncx+xml"/>
  </manifest>
 
  <spine toc="ncx">
    <itemref idref="chapter1" />
  </spine>
 
  <guide>
    <reference type="loi" title="List Of Illustrations" href="appendix.html#figures" />
  </guide>
 
</package>

Writing it yourself

There is always the option of writing an ebook yourself, though I don’t necessarily recommend it. Before you decide to go down this road I would encourage you to checkout some of the EPUB management apps mentioned above. If you do end up creating your own files manually, Calibre has a nice conversion feature to get your files into the proper EPUB format. I haven’t used it personally so I’m not sure how well it actually work.

The EPUB specification is actually pretty descriptive and well written so I’d certainly recommend checking that out if you are looking to write your own EPUB book manually.

Please let me know if you have any questions or other issues in the comments section below and I will try to help you out as best as I can. Thanks for reading!

What makes Virgin Airlines better than all the rest

by
Ericon September 12, 2011  :  Leave a Comment

I recently had the pleasure of flying Virgin America for the first time from San Francisco to Las Vegas. I was so impressed and intrigued by this airline that I was compelled to share my experience. So here’s what I thought of Virgin Airlines.

The Terminal

Apparently Virgin America had been stationed in the SFO international terminal while preparations were being made for them to switch over to the domestic terminal. Luckily the terminal was ready to go when I flew out last week. Upon entering I was immediately impressed. The terminal had that modern, un-cluttered feel. The furniture and seating areas were all modern and colorful. There was even a cool looking station where you could borrow a Chrome Book for your flight and drop it off at your destination.

Uniforms

As if Virgin didn’t stand out enough, their entire crew wore a sleek and seemingly comfortable black uniform. This may seem like a small detail but I think it’s marketing genius. In the back of your mind you will always remember Virgin for all the reasons they stood out, unique uniforms included. All of these little enhancements support your overall impression of the airline and help you remember your experience.

The Aircraft

The first thing I felt once aboard was excitement. I was immediately greeted by smiling crew members who seemed excited and happy. The vibe of the aircraft is electric. Unlike other aircrafts, Virgin is modern and sexy. Purple and blue lights line the top of the cabin above sleek leather seats. In the background you can hear an upbeat techno soundtrack that’s just faint enough to support the whole vibe of the aircraft. Once you sit down you are greeted by Virgin’s interactive screen on the back of the seat in front of you. I’ll go into more detail about that next.

Virgin Airlines Cabin

Inflight Entertainment

Virgin’s inflight entertainment is second to none. Among other features you can use your display to order food/drinks, play video games, watch satellite TV, and even chat with the other passengers on the plane! The system also provides a remote that doubles as a video game controller and has a full size keyboard on the back side.

Virgin interactive screen

Conclusion

I’m excited that there’s an airline out there that is actually trying to push the industry by raising the bar on technology and service while keeping prices competitive. It shows that Virgin’s competitors are making a choice to provide a worse experience, though that won’t work for long. Once Virgin expands to more locations they will begin to rival even the largest airlines thanks to their amazing service and dedication to technology and experience. What do you think about Virgin airlines? Was your experience as good as mine or worse? Let me know in the comments below and thanks for reading!

Creating scalable vector graphics in Photoshop

by
Ericon September 2, 2011  :  3 Comments

Lately I’ve been noticing that many designers are creating complex graphics and interfaces in Photoshop but aren’t putting any thought into scalability. So what is scalability and how does it apply to graphic design? Nowadays it’s common to port interfaces to a higher resolution, especially on mobile. This means that you can usually rest assured that whatever interface or design you create has huge potential to be scaled up in the future.

The problem

You create this amazing design for an Android app but three months down the road, you want to port it over to iPhone with support for Retina display. You have two options. Let the hardware scale up the graphics, resulting in some extremely blurry sprites or remake the app from the ground up at a higher resolution.

The solution

I thought it was more common knowledge among the design community but I’m noticing more and more that it actually isn’t. Photosho has some very good support for shapes using paths. This isn’t really true vector since the shapes are still sitting on pixels but the shapes are scalable.

Not sure what I mean? Here’s a fancy graphic:

Vector graphics example

You’ll notice that the first circle was rasterized and then scaled up, resulting in blurry edges. The second circle was kept vector and scaled up, resulting in smooth edges. Now imagine this was a sprite for an original iPhone game that you are now porting to Retina. Instead of recreating the sprite you can simply scale it up without losing any quality.

Scalable layer styles

All too often I see a designer using a rasterized layer in place of a layer style. One important thing to understand about layer styles is that they are scalable. Shadows, gradients, strokes, etc. can all be scaled up without any quality loss.

Here’s another fancy graphic showing what I mean:

Scalable layer style

Notice that the top example, which uses rasterized layers for the effects, looks more pixellated the larger you make it while the bottom example, which uses layer styles for it’s effects, is completely scalable.

Conclusion

I understand that sometimes it is necessary to use rasterized layer styles for those nice subtleties and effects. But it really is to your advantage to use layer styles and vector shapes when at all possible. You never know when you might need a higher resolution version of your graphic or interface and it’s nice to be able to easily scale up a few shapes and call it done.

What do you think? Have you ever needed to scale up a design that was completely made up of rasterized shapes? Or is it not worth the extra work to use layer styles and shapes? Let me know in the comments section below. Thanks for reading!

Stuck on a programming or design problem? Take a bath.

by
Ericon September 1, 2011  :  Leave a Comment

Ever heard the story of Archimedes and King Heiro II? Well the king tasked Archimedes with figuring out if his crown was real gold without damaging it. After many sleepless nights and much mental anguish, Archimedes’ wife instructs him to take a bath to relax. In doing so he notices the displacement of the water, which he could invariable use to determine the purity of the crown based on weight/volume.

The moral of the story is clear. Sometimes the most valuable work you do is done while relaxing and turning your brain off.

I cannot count the times that I’ve been glaring at my screen for hours trying to solve some seemingly simple programming issue or design problem. I eventually, reluctantly, pull myself away from the problem out of frustration, usually to sleep, eat, or just turn my brain off. And, like clock work, once I give it another go the problem is usually solved within 5-10 minutes. The important thing I take away from this is that some of our most valuable work happens while we’re not even at the computer. Sometimes we are more constructive eating dinner or taking a shower than we are toiling away at a computer.

So the next time you find yourself up against a wall when faced with a coding or design problem (or any other problem, really) take a bath, go out, take a nap, eat some dinner. For every problem there is at least one solution and sometimes the easiest way to find the solution is to stop looking.

Get Adobe Flash playerPlugin by wpburn.com wordpress themes

The best way to contact me is through one of the networks on the left or by emailing me at
ericbieller [at] gmail [dot] com.