IntroductionPreviewing the final iBook with video| 00:03 | Hi! I am Chris Converse, and in this course,
we are going to be adding a video into an
| | 00:06 | iBook and then playing it back on our iPad.
| | 00:09 | So I want to start by showing the Final Project.
| | 00:11 | We are actually going to be starting from
an ePUB document, which is really just a zip
| | 00:14 | file that contains HTML and CSS.
That's what an ePUB consists of.
| | 00:18 | And we're going to be safely cracking this
open, adding our video, modifying some CSS,
| | 00:23 | repackaging it, and then
playing this back on our iPad.
| | 00:26 | So let me bring up my iPad here so we
can take a look at the Final Project.
| | 00:30 | So here on the iPad I am
going to open up iBooks.
| | 00:32 | Our ePUB is in the top left corner here.
We are going to tap this to open it up.
| | 00:36 | So what we are going to be doing is taking
this ePUB file and on the Introduction page,
| | 00:40 | which I'll flip over to here is
where we are going to place our video.
| | 00:43 | So we can see the video in
the upper right-hand corner.
| | 00:45 | We're also going to be modifying some of
the CSS, so we can take the video element and
| | 00:49 | in Portrait View we can set a float property,
so that we can allow the text to run around
| | 00:53 | on the left-hand side.
| | 00:54 | Now back in Landscape View here, I am
going to tap on the video to begin to play it.
| | 00:58 | Now as the video is playing, I can hit the
full-screen button, or I can simply pinch
| | 01:02 | on the video and actually
go into full-screen view.
| | 01:05 | When I exit full-screen view, the video will
shrink down and go back into playing in line.
| | 01:09 | Now this technique will work in other e-readers
as well, such as the Kindle Fire, the Nook
| | 01:13 | Color, and the Nook Tablet.
| | 01:14 | And as more e-readers start to support the
ePUB 3 format which calls for things like
| | 01:18 | video, audio, math markup language, and
JavaScript, we'll be able to use these same techniques
| | 01:22 | on a larger number of devices in the future.
| | 01:25 | So I hope this course sounds
interesting to you, and if so, let's get started.
| | Collapse this transcript |
| Using the exercise files| 00:00 | Now if you are a Premium Member of the lynda.com
online training library, you'll have access
| | 00:03 | to the exercise files.
| | 00:05 | If you don't have access to these files, you
can use any standard ePUB file to follow along.
| | 00:10 | Inside of the exercise files,
there are three folders.
| | 00:11 | In folder 1, there is a Sample ePUB that you
can actually use to unzip and follow along.
| | 00:17 | In the second folder is a copy of a video and a
JPEG file that we are going to use as the poster frame.
| | 00:21 | And then lastly under Final Project,
there's an OEBPS folder which has all of the final
| | 00:27 | changes we're going to be making
and a copy of the final ePUB as well.
| | 00:30 | So you can take this final ePUB file, move
this over to your iPad or Kindle Fire, Nook
| | 00:35 | Color, or Nook Tablet and
actually preview the Final Project.
| | 00:39 | Now there is two additional ways
you can get a copy of this ePUB.
| | 00:42 | You can scan the QR code that's up on the screen right
now and actually download it from our web server.
| | 00:46 | And the other way is to find a preview link on the
lynda.com online training library for this course.
| | 00:51 | So now that we are familiar with the exercise
files, in the next movie let's start cracking
| | 00:55 | open this ePUB file.
| | Collapse this transcript |
|
|
2. Safely Opening an EPUB FileExploring tools and techniques for Macintosh and Windows| 00:00 | Now to be able to make changes into an ePUB, we
are going to need to open up the ePUB file format.
| | 00:04 | So in the exercise files, I am going
to come over here to the .ePUB file.
| | 00:08 | So as I mentioned before, this is really
just a zip file, and inside we'll find HTML,
| | 00:12 | CSS, some XML, and we can add and
modify the files inside of here.
| | 00:16 | The challenge that we'll have is opening up this
ePUB file can actually damage it if we're not careful.
| | 00:21 | If you're on the Windows platform, we
can open this like any other ZIP archive.
| | 00:24 | So I'm bringing up my Windows machine here, and
I want to show you what that workflow looks like.
| | 00:29 | So inside of Windows here, I am going to come
over to Sample ePUB from the exercise files,
| | 00:33 | and I am going to take this ePUB
and just copy it to the Desktop.
| | 00:37 | Once it's on the Desktop, what I am going to
do here is right-click, come over to Rename,
| | 00:40 | and I am going to change the
extension from .ePUB to .zip.
| | 00:47 | Now you might need to change the View in your
Control panel to make sure that Windows will
| | 00:51 | show you the extension for known files.
| | 00:54 | Once you hit Return to change this, Windows will ask
if you want change the file extension, you click Yes.
| | 00:58 | Once we do that, we'll see
that this turns into a zip folder.
| | 01:02 | Double clicking on this will give me access
to all of the items inside, and here's the
| | 01:05 | OEBPS folder that we are
going to be working with.
| | 01:07 | So on Windows, you can take this file, drag it to
your Desktop, and continue on in the Windows platform.
| | 01:12 | Now back on the Mac platform, if we were to
rename the ePUB.zip, we could still extract
| | 01:17 | and get the files out, but we wouldn't be
able to rezip the archive without ruining it.
| | 01:21 | So we have two options on the Mac platform.
| | 01:23 | We have an application called Springy
and another application called BetterZip.
| | 01:28 | Both of these applications will safely open
up the zip archive, allow us to pull out that
| | 01:32 | OEBPS folder, make our modifications, then
overwrite that file back in the zip archive
| | 01:37 | and keep the integrity of the ePUB file.
| | 01:40 | Now for more information on safely cracking
open an ePUB file, or to see alternative workflows
| | 01:45 | to the one I am going to do here in this course,
there is a great article on InDesignSecrets
| | 01:48 | by Anne-Marie Concepcion, and she actually
talks to a couple of different people who
| | 01:52 | have different methods for
doing this exact process.
| | 01:55 | To find the link to this article, you can go
into the FAQ section of the lynda.com online
| | 01:58 | training library for this course.
| | Collapse this transcript |
|
|
3. Extracting and Accessing the OEBPS FilesAdding video to an HTML file| 00:00 | Now I am going to be using Springy on the
Macintosh platform to open up this ePUB file.
| | 00:05 | So once the ePUB file is open, what we are
going to be doing is grabbing that OEBPS folder.
| | 00:11 | Now with the archive open, let's grab
this folder and drag it to the Desktop.
| | 00:16 | This name actually stands for Open eBook
Publication Structure, and inside it contains all of the
| | 00:21 | files that are necessary for our ePUB.
| | 00:24 | Now with this folder open, I
am going to move this over.
| | 00:27 | And inside this folder let's create a
folder called video. I'll toggle this open.
| | 00:34 | Let's go back to the exercise files.
| | 00:38 | Let's open the Video folder, and let's copy the
JPEG and the MP4 over into that video directory.
| | 00:43 | Now with those assets added,
let's open Tea for Two-1.html.
| | 00:46 | Let's open this up in a text editor.
| | 00:49 | Now I am going to use Aptana Studio for
this course, but you can use Dreamweaver or any
| | 00:53 | other web editing tool as long as
you can actually see the HTML code.
| | 00:56 | And what we are going to do here is let's
come down to right before the last paragraph
| | 01:00 | tag let's hit a few Returns, and we are
going to come in here and add the video tag.
| | 01:05 | We'll type video, space, we are going
to add a CSS class to this called intro.
| | 01:14 | Outside of that attribute hit a space.
Let's type width=320, space, height=240.
| | 01:27 | Now the iPad screen is a 4:3 ratio, so as
long as we put a height and width with the
| | 01:31 | same proportions, we'll get the scaled-
down version of the video playing in line, and
| | 01:35 | then when we go to full screen mode, we'll
take full use of the overall iPad screen.
| | 01:40 | After the height, let's hit a space, type
poster equals two quotes, now we are going to target
| | 01:46 | that video directory we just created.
So I'll type video/teapots.jpg.
| | 01:58 | Next, we'll type src="video/teapots.mp4",
and then lastly, we'll
| | 02:12 | type controls=", put controls
inside of there, then we'll end the video tag.
| | 02:20 | So that's all we need to do to
add video into this HTML page.
| | 02:23 | In the next movie, we'll modify the CSS.
| | Collapse this transcript |
| Styling the video element with CSS| 00:00 | Now to modify this CSS file,
let's come back to our OEBPS folder.
| | 00:04 | Let's take template.css and
open that up in our Web editor.
| | 00:07 | Now in here you'll see I have some
overrides at the bottom of the file.
| | 00:11 | One that's worth mentioning is in an iBook
you simply can't specify an anchor link and
| | 00:15 | change the color using the standard color,
but you can use -webkit-text-fill-color, and
| | 00:20 | this will actually work in the iBook format.
| | 00:23 | So let's come in here and add another custom
element, video.intro, so we are going to target
| | 00:29 | that video element with the intro class.
| | 00:32 | Inside of the brackets, we're going to
set a float, set that to right, hit space, and
| | 00:36 | let's set the margins.
| | 00:38 | So the text wrap that goes around the left-
hand side, margin, colon, space, we are going to use
| | 00:42 | shorthand format here.
| | 00:44 | So zero pixels for the top, zero for the
right, zero for the bottom, and 20 pixels on the left.
| | 00:50 | So now when the iBook opens this file, it
will see the video tag, look at this CSS file,
| | 00:55 | see all of our overrides, and also see
the new video element override as well.
| | 00:59 | And now as we looked that in the introduction
video, when we are in Landscape View in iBooks,
| | 01:03 | we have two columns.
| | 01:05 | And since the width is 320,
that's most of the column.
| | 01:07 | But in Portrait View where we have upwards of 500
pixels across, we'll actually see the text wrap.
| | 01:13 | So at this point make sure all of
your files are saved, let's close them.
| | 01:17 | Now back in the operating
system let's close that OEBPS folder.
| | 01:21 | And what I am going to do here, since I am
in Springy is I am going to have Springy in
| | 01:24 | the forefront here, I am going to take
this folder and just drag it and overwrite the
| | 01:30 | OEBPS folder that's still
inside of the ZIP archive.
| | 01:33 | And again, follow that same workflow on
Windows by just replacing that ZIP folder inside,
| | 01:38 | and then on the Windows platform make
sure you rename the ZIP folder .ePUB.
| | 01:42 | Inside of Springy, I am just
going to close this archive now.
| | 01:46 | And now this particular file here inside of
the sample ePUB directory where I actually
| | 01:50 | open this from, now has all of that new
multimedia inside of that ePUB format.
| | 01:55 | So in the next movie, we'll talk about
how to get this over to your iPad to check it out.
| | Collapse this transcript |
|
|
4. Loading an EPUB onto your iPadDownloading an EPUB from a web site| 00:01 | So now that we have our modified ePUB file,
there is a few ways we can get this to our iPad.
| | 00:04 | One is to drag it into the Books section of
your iTunes Library, and then sync it over.
| | 00:08 | The second option is we can actually take
the ePUB file, put it up on a web server, and
| | 00:12 | point to it with a web browser.
| | 00:15 | Now one thing worth mentioning before we
continue, make sure your web server has the MIME type
| | 00:19 | setting for an ePUB.
| | 00:21 | This is something that you can do in the
Control panel of a lot of web posting companies, or
| | 00:25 | you can ask your web developer or your web hosting
company to make sure that ePUB is actually set up.
| | 00:30 | So what you want to do is make sure that the .ePUB
extension has a MIME type set to application/ePUB+zip.
| | 00:37 | Again, this will tell the web server how to
transfer the data over to the web browser,
| | 00:41 | so the browser knows what to do with it.
| | 00:44 | So I am going to bring up my iPad here,
and let's go visit this with Mobile Safari.
| | 00:48 | So on the iPad, let's come into our running
applications. I am going to move over to Safari.
| | 00:53 | So inside of Safari, I am pointing at the
actual web page where we see here we just
| | 00:56 | have a graphic that's
actually linked to the ePUB file.
| | 00:59 | When I tap on this hyperlink, what Mobile
Safari is going to do is realize that this
| | 01:03 | is an ePUB file and realize that we have
multiple ways to read an ePUB on our iPad.
| | 01:07 | So if we hit Open in, this will actually
bring up all of the applications that I have that
| | 01:12 | can open in ePUB, or I can
simply click on the Open in iBooks.
| | 01:18 | What that's going to do is take the ePUB,
pull it right from the server, put it right
| | 01:21 | in the library, and then open it up so the
user can start going through our publication
| | 01:24 | and seeing all the changes that we just made by
opening up the ePUB file and adding in our multimedia.
| | 01:30 | So now on the iPad platform, there are tons
of other things we can do inside of an ePUB.
| | 01:34 | Again they're supporting much more
JavaScript and CSS than some of the other e-readers,
| | 01:38 | but a lot of the other ones
are starting to catch up as well.
| | 01:40 | So we'll talk about where you might
want to go from here in the next movie.
| | Collapse this transcript |
|
|
Where to go from hereFinding more HTML5 and CSS3 resources on lynda.com| 00:00 | So as I mentioned earlier, the ePUB format is
really just a zip that contains HTML and CSS.
| | 00:05 | And the ePUB 3 specification is calling for the
same standards that we would typically use on web sites.
| | 00:10 | So in the lynda.com library, there's a
few courses you might want to look at.
| | 00:14 | HTML5: Video and Audio in Depth, this will
give you more information about the HTML5
| | 00:18 | video specification which is
supported inside of iBooks for the iPad.
| | 00:23 | And if you are not too familiar with HTML5
or CSS3 yet, I'd recommended HTML5 First Look
| | 00:27 | by James Williamson and also CSS3 First Look.
| | 00:32 | Not everything in the HTML5 and CSS3
specification are supported on iBooks, but a good number
| | 00:37 | of them are supported.
| | 00:38 | So you can certainly open these up, try
them out, and then bring them over to your iPad
| | 00:41 | and see what's actually working.
| | 00:44 | And with that, I wish you all the luck in the
cool things you're going to add into your ePUB files.
| | 00:47 | And I really appreciate you watching my course.
| | Collapse this transcript |
|
|
