IntroductionPreviewing the final project| 00:04 | Hi! I'm Chris Converse, and this is a
course on taking an HTML5 project, and putting it
| | 00:07 | into a digital magazine.
| | 00:09 | Now, if you're a Premium Member of the lynda.
com online training library, you'll have access
| | 00:13 | to the exercise files.
| | 00:15 | If you don't have access to these files,
you can use any localized HTML project.
| | 00:20 | And inside of the B folder here, I have
two copies of previous lynda.com courses.
| | 00:25 | So if you've taken any of my previous
courses, you can use those projects as well.
| | 00:28 | I've included the Bar Chart
here, and the Interactive Map.
| | 00:32 | To preview these, I'll come down and double-
click on the HTML file for the Bar Chart.
| | 00:35 | So, inside of our browser, we can see that
each one of these bars animates, and we have
| | 00:39 | a label that animates on each one as well.
| | 00:42 | Let's come down and
click on the Interactive Map.
| | 00:45 | So, this map here has a dropdown menu that I can
come down, and I click on individual continents.
| | 00:51 | When I select a continent, all the
dots will hide except for that continent.
| | 00:54 | I can click on each one of these
and get more city detail information.
| | 00:58 | So again, this full interactive experience
inside of the browser, we want to capture
| | 01:01 | this, and encapsulate
that into a digital magazine.
| | 01:04 | So, let me close my web browsers here.
So, at this point, let me bring up my iPad.
| | 01:09 | So I'm going to be using the Adobe Digital
Publishing Suite, and so for my device, I'm
| | 01:14 | going to be using an app
called the Adobe Content Viewer.
| | 01:16 | You can search your App
Store for this particular app.
| | 01:19 | You can find this for iOS,
Android, and BlackBerry.
| | 01:24 | As you can see, I have this app in the
upper left-hand corner of my screen here.
| | 01:26 | So I'm going to come up here and
tap on this device to launch this.
| | 01:30 | Once the app launches, you're
going to sign in with your Adobe ID.
| | 01:33 | Then the app is going to check with the
Adobe Folio Producer which is an online tool to
| | 01:37 | see which magazines you
have access to, to preview.
| | 01:40 | So here I see, I have a magazine called
Codify Demo for lynda.com, and I see a little blue
| | 01:44 | label underneath that says Free.
| | 01:46 | I'm going to come up here and tap
Download to download a preview of this.
| | 01:53 | Once this downloads, that free label will go
away, and I'll see two buttons here Archive
| | 01:56 | and View, I'm going to
come up here and tap on View.
| | 02:00 | So here, I have a three article magazine,
the cover counts as the first article.
| | 02:03 | I am going to come up here
and swipe to the second page.
| | 02:06 | We can see the animation of the bar chart
taking place, and then if I swipe one more
| | 02:09 | time, we'll actually see the Interactive Map.
| | 02:12 | Now this map is fully interactive
just like we saw in the browser.
| | 02:15 | So I am going to come over here and tap on
a Country List, choose Australia, come up
| | 02:19 | here, and tap on Sydney, and then
I can see the city details come up.
| | 02:22 | Come up here and tap on Perth, go back to
the main menu, click on Show all continents
| | 02:29 | and then all the dots come back.
| | 02:31 | So again, we're seeing that exact same user
experience now in the magazine that we saw in the browser.
| | 02:36 | So, in this course, we're going to look at
taking an HTML experience and making it an
| | 02:39 | entire article like we see here.
| | 02:41 | On the second page, we're going to use a
feature in InDesign called the web View which means
| | 02:45 | we can have most of the screen be
InDesign but a part of it be HTML5.
| | 02:49 | We're going to lay out this content in InDesign.
| | 02:51 | We're going to use the Folio Builder to build
our magazine, push it up to the Folio Producer,
| | 02:56 | and then pull our final project back down using the
Adobe Content Viewer app that we just looked at.
| | 03:01 | So I hope this course sounds
interesting to you, and if so, let's get started.
| | 03:06 |
| | Collapse this transcript |
|
|
1. Getting StartedWhere to get the free Adobe Digital Publishing Suite (DPS) software| 00:00 | Now to use the Adobe Digital Publishing Suite,
you'll have to have InDesign CS5 or later,
| | 00:04 | and you can download the Producer
tools from the Adobe.com web site.
| | 00:09 | So if you go to adobe.com/downloads, over
in the right-hand side here, you'll see all
| | 00:13 | the latest Folio Producer tools.
| | 00:16 | This will give you two plug-ins inside of InDesign, one called the Folio Builder, and one called
| | 00:20 | the Overlay Creator.
| | 00:22 | Then on your device, you're going to
need a copy of the Adobe Content Viewer.
| | 00:26 | You can search your App Stores for these.
| | 00:28 | You can find a copy for iOS, Android, and
BlackBerry, and Adobe is constantly working
| | 00:32 | on new devices as well.
| | 00:34 | So you want to go and check on the adobe.com
web site for all of the latest apps and all
| | 00:38 | of the latest devices supported
with the Digital Publishing Suite.
| | 00:42 | So once you have all of the software
downloaded and installed for both InDesign and on your
| | 00:46 | device, we can start with the
next movie and create our project.
| | 00:51 |
| | Collapse this transcript |
| Using the exercise files| 00:00 | To begin our project, let's create a
folder on the desktop called myFolio.
| | 00:05 | Now if you already have InDesign files on
your hard-drive, you can use those instead
| | 00:08 | of working from the desktop here.
| | 00:11 | But for those of you following along with the
exercise files, create the folder on the desktop.
| | 00:16 | Then what we're going to do is come into the Folio
files in the exercise files, this is in folder A.
| | 00:21 | What we're going to do is copy all four of
these folders here into the myFolio folder
| | 00:27 | we just created on the desktop.
| | 00:29 | Now what's inside of these? Inside of Cover, we
have a horizontal and vertical version of the Cover.
| | 00:35 | Under Holiday Sales, we have the horizontal
and vertical version of the sales, and you
| | 00:40 | notice each one of these has an icon as well.
| | 00:42 | This is the icon that shows up in the table
of contents and then under Interactive Map,
| | 00:46 | we just have the simple icon here.
| | 00:49 | So now let's come back to the exercise files, and
what we're going to do now is add-in the HTML5 projects.
| | 00:55 | So inside of Bar Chart, let's select the index,
the includes, and the images, let's copy all
| | 01:00 | of these over into Holiday Sales,
let's come back to Interactive Map.
| | 01:05 | Let's grab index, includes, and images for
the Interactive Map, and drag these into the
| | 01:10 | Interactive Map folder.
| | 01:12 | Now some of the later versions of the
Digital Publishing Suite don't require you to be so
| | 01:15 | specific with where all of your files are,
but I like to keep every one of my articles
| | 01:20 | or stacks in an individual folder.
| | 01:22 | So here's Cover, Holiday Sales, and the
Interactive Map, and then Links has all of the graphics
| | 01:28 | that each one of the InDesign files in
Folder 1 and 2 are actually linking to.
| | 01:33 | So now that we have all of our files in place,
in the next movie, we'll start by creating
| | 01:36 | the web overlay in the Holiday Sales file.
| | 01:41 |
| | Collapse this transcript |
|
|
2. Creating Articles in InDesignUsing the Web Content feature of the Overlay Creator| 00:00 | Now the first project we're going to add is
going to be the Bar Chart, and we're going
| | 00:03 | to add that to the Holiday Sales file.
| | 00:05 | So let's come into the 02 Holiday Sales and
let's open both the horizontal and vertical
| | 00:10 | versions of those InDesign files up in InDesign.
| | 00:14 | So now in InDesign, we have both the portrait
and landscape versions of that particular page.
| | 00:17 | What we're going to do next
is open up the Overlay Creator.
| | 00:21 | Let's come down to the Window menu, let's
come down to Extensions, and we're going to
| | 00:26 | see the two plug-ins that were part of the download, so the Folio Builder and the Overlay Creator.
| | 00:30 | We're going to open up the Overlay Creator here.
| | 00:34 | Now, the Overlay Creator lets us lock on to
objects inside of InDesign, and either add
| | 00:39 | new interactive features or add on to
interactive features that exist for going out to things
| | 00:44 | like Flash or interactive PDF.
| | 00:46 | I'm going to move this over to the right here
a little bit, and what we want to do is create
| | 00:52 | a window where we can load our Bar Chart in.
So let's come over here to the toolbar.
| | 00:57 | Let's grab a Graphic Box.
| | 00:59 | Let's come in here and let's
draw out a Graphic Box.
| | 01:03 | Now, we need to measure this in pixels.
So let's come up to the ruler here.
| | 01:07 | Let's right-click and change this to pixels.
| | 01:09 | So make sure both the vertical and
horizontal rulers are set to pixels.
| | 01:15 | With this item selected, let's come up
here to the Control Bar, and let's set a Width
| | 01:19 | of 500 pixels, and a Height of 410.
| | 01:24 | So now that box is going to be positioned
exactly the size of the div containers from
| | 01:28 | that particular project when we
created this in the Bar Chart course.
| | 01:32 | So let's move this into place where we want it.
| | 01:36 | Now that we have that position properly, let's
come over to the Overlay Creator, and let's
| | 01:39 | come down and click on web Content.
| | 01:42 | What web Content lets us do is
load HTML into this container.
| | 01:47 | So let's come over here,
and click on the URL or file.
| | 01:50 | From the desktop, let's choose myFolio.
| | 01:52 | Let's go into Holiday Sales, and let's grab
this index.html file, and then let's click Open.
| | 02:01 | In the Overlay Creator let's click on Auto Play,
and let's also select Transparent Background.
| | 02:06 | That way, anything that's transparent in
the HTML file, the transparency will make its
| | 02:10 | way to be transparent in
the InDesign file as well.
| | 02:13 | Now, to get a rough idea of what this might look
like, let's come down here and click on Preview.
| | 02:17 | What this is going to do is load the
Desktop Viewer which mimics as closely as possible
| | 02:22 | the experience on a device right on our desktop.
| | 02:25 | So, we don't have to always push
everything to our BlackBerry or our iPad.
| | 02:30 | We can quickly get a sense of what this might
look like in the Adobe Content Desktop Viewer.
| | 02:34 | So I can see that the page is loaded up.
I can see all of the bar charts animated.
| | 02:37 | So I know that this is
actually working properly.
| | 02:40 | Let's come up here and close this.
| | 02:42 | Let's come back to InDesign, and a really great
feature here is I can select this web Overlay Object.
| | 02:47 | Let's go to the Edit menu
and choose Copy, save our file.
| | 02:53 | Let's come over to the Portrait version.
| | 02:55 | Let's hit Command or Ctrl+V to
paste, and let's move this into place.
| | 03:02 | With this selected, notice in the Overlay
Creator, all of the settings from the other
| | 03:06 | file are carried over here as well.
| | 03:07 | So it's pointing to the index.html file,
has Autoplay and Transparency turned on.
| | 03:13 | Let's come over here.
Let's choose File > Save.
| | 03:17 | Now, at this point, we've added the web Overlay to
both the portrait and landscape version of the sales page.
| | 03:23 | In the next movie, we'll add the Sales File
and the Interactive Map as articles to our
| | 03:26 | magazine using the Folio Builder.
| | 03:31 |
| | Collapse this transcript |
| Adding articles to your magazine with the Overlay Creator| 00:00 | Now, to assemble our magazine, we
need to bring up the Folio Builder.
| | 00:03 | We're going to come down to the Window menu
inside of InDesign, choose Extensions, and
| | 00:07 | then bring up Folio Builder.
| | 00:10 | Once you load this, you'll be
asked to sign in with your Adobe ID.
| | 00:13 | This will then hook you over to the Folio
Producer site which we'll talk about in a few minutes.
| | 00:17 | So what the Folio Builder lets us do is to find magazines
and then add articles to those individual magazines.
| | 00:23 | So you can see in the Folio Builder, I
actually have three magazines I'm working on.
| | 00:28 | To create a new magazine, you can
come down here, and click on New.
| | 00:31 | This will bring up a dialog box which will ask
you to define parameters about your magazine,
| | 00:35 | Name, Size, whether or not
it has multiple orientations.
| | 00:40 | Once you do that, you'll have
one of these icon items here.
| | 00:43 | So now notice each one of these
magazines has a little arrow here.
| | 00:45 | This allows us to drill
into that particular magazine.
| | 00:49 | So I'm going to go into Codify Design for lynda.com
and inside here, I simply just have a Cover.
| | 00:55 | So what we're going to do is create
two additional articles inside of here.
| | 00:58 | Now, while I'm in this particular magazine,
and I can see this here, let's come up to
| | 01:02 | the flyout menu, and I'm going to
come down here and choose Import.
| | 01:07 | Now, the first article I'm going to
create is going to be for the Sales Report.
| | 01:13 | So I'll put Sales Report as the title.
I'm going to come down here to Location.
| | 01:18 | Now, from the desktop, I'm
going to click on myFolio.
| | 01:21 | I'm going to select the Holiday
Sales folder and then click Open.
| | 01:26 | The Folio Builder is going to detect both InDesign
documents inside of this folder. Let's click OK.
| | 01:33 | We'll see that the Folio Builder is now
building that article, and it's uploading all of that
| | 01:37 | content up to the Folio
Producer that's up on acrobat.com.
| | 01:42 | Once this is loaded, I can see I
now have a Cover and a Sales Report.
| | 01:46 | To change the parameters of the Sales Report,
make sure it's selected, come up to the flyout
| | 01:50 | menu and come down to Properties.
| | 01:54 | In here, I can add all of the
additional data into this particular article.
| | 01:57 | So, I'm going to bring up a diagram here that's
going to show you how the information and
| | 02:01 | the article's properties match the layout of the
Adobe Digital Publishing Suite magazine framework.
| | 02:07 | So Title, Description, Byline, and Kicker are
going to show up in these corresponding spots.
| | 02:13 | And the screenshot we're looking at here is
actually in the Article/Stack View which again
| | 02:16 | is part of the framework for
the digital magazine platform.
| | 02:20 | So, if we come back to InDesign, I am
going to add a title of Sales Report.
| | 02:25 | For the Description, we'll just call this
Q3 Sales Chart, for the Byline, you can put
| | 02:35 | your name in here, and for the Kicker, I'm
going to put My course on lynda.com.
| | 02:42 | Now, I already have the Table of Contents
Preview icon set, but if you want to change
| | 02:47 | this, you can click on the folder, come out
here, and select the icon.jpg in that Article
| | 02:52 | Stack, then click OK.
| | 02:54 | Now, I'm going to click OK
for the Article Properties.
| | 02:57 | So, for the Sales Report article, we
actually had two InDesign documents inside of there.
| | 03:01 | For the next one, we're going to simply
point to the third folder which doesn't have any
| | 03:05 | InDesign documents at all, and
that will become a full HTML5 stack.
| | 03:09 | So in the Folio Builder,
let's add one more article.
| | 03:12 | Let's choose Import.
| | 03:15 | For Article Name, this is going to be
Interactive Map. Location, let's choose the 03 Interactive
| | 03:25 | Map, click Open, then choose OK.
| | 03:30 | So, this is where the Folio Builder
goes and looks at the content there.
| | 03:33 | It doesn't see in InDesign document, still
uploads all the HTML5 content, and again this
| | 03:38 | will turn into an HTML5 stack
in the Adobe Content Viewer.
| | 03:42 | So once this is done and uploaded, you'll see
that the Interactive Map is showing here in gray.
| | 03:46 | This lets us know that there are no InDesign
files associated to it, but it still is going
| | 03:50 | to be treated like an article like
every other article in our magazine.
| | 03:53 | Let's come up to the flyout menu.
Let's go to Properties.
| | 04:00 | We'll call this Interactive Map.
| | 04:09 | For the Description, I'll put in Find
a location near you, add in your name.
| | 04:18 | Let's click on this folder here to
change the icon for the table of contents.
| | 04:27 | Click Open and choose OK.
| | 04:30 | Now that the Interactive Map article is
complete, let's come down, and click Preview.
| | 04:35 | Look at this in the Adobe
Content Viewer desktop version.
| | 04:40 | Click on the menu, click
Australia, click on one of the dots.
| | 04:44 | So I can see this is fully functioning.
| | 04:45 | So, let's close out of the Desktop Content
Viewer, and now that we've added these two
| | 04:50 | articles that it contained HTML5 content to
our magazine, in the next movie, we'll load
| | 04:54 | this on our device and check it out.
| | 04:59 |
| | Collapse this transcript |
|
|
3. Previewing Your Digital Magazine on a TabletPreviewing your magazine with the Adobe Content Viewer| 00:01 | So now, as we're working with the Folio
Builder plug-in inside of InDesign, every change we
| | 00:05 | make, InDesign is pushing all of that
content up to the DPS Folio Producer.
| | 00:10 | This is actually one of the services inside
of acrobat.com, and this is where Adobe stores
| | 00:14 | all of the folios that you're
building from inside of InDesign.
| | 00:18 | And so in the screenshot here, you can see
that all of the three magazines we saw in
| | 00:21 | the Folio Builder also show up here under
Folio Name, and we can see more information
| | 00:25 | about each one of these as well.
| | 00:28 | Now, from the Folio Producer web site or the
Folio Builder plug-in inside of InDesign, we
| | 00:32 | can share this with other people as well so
that when they sign in to their Adobe Content
| | 00:36 | Viewer on their device, they will
be notified of any changes here.
| | 00:39 | So at this point, let's bring up the iPad,
and let's let the iPad tell us that we've
| | 00:43 | made modifications here, and
then pull this down, and test it.
| | 00:46 | So, on the iPad I'm going to come back
and go back into the Adobe Content Viewer.
| | 00:51 | We can see that library is being updated,
and we can see underneath the Codify Demo
| | 00:55 | for lynda.com, a little blue
flag that says Update Available.
| | 00:58 | Let's come up here, and click on View.
| | 01:00 | That's going to bring up this dialog box
here that tells me there's an update available
| | 01:04 | and asks me if I'd like to download it.
| | 01:06 | I'm going to tap on Yes, and now the Adobe
Content Viewer is going to go out to the Folio
| | 01:10 | Producer site, and pull down
the latest version of that folio.
| | 01:15 | Once that's available, I can come up here and
tap on View, and then we can see the updated
| | 01:19 | folio file inside of our iPad.
| | 01:22 | I can swipe over, see all of the content in
place here, and any additional articles I've
| | 01:27 | added inside of InDesign will then become
additional stacks inside of the DPS platform.
| | 01:32 | Now, that's how quickly you can add HTML5
content into a digital magazine, whether it's
| | 01:37 | in a web View or as an entire HTML stack.
| | 01:39 | In the next movie, we'll talk about where
you might want to go from here, especially
| | 01:43 | around setting up HTML
to work with touch devices.
| | 01:48 |
| | Collapse this transcript |
|
|
ConclusionWhere to go from here| 00:00 | Now, if you're new to HTML5 and CSS3, I would
recommend HTML5 First Look on lynda.com library
| | 00:06 | and CSS3 First Look.
| | 00:10 | Now, I have a whole series of courses on lynda.com
as well that relate to creating interactive
| | 00:14 | experiences with HTML5, CSS3, and JavaScript. And
one of my newer courses here is Create an iPad web App.
| | 00:21 | So, one interesting feature inside of this
particular course, if you scroll all the way
| | 00:25 | down through the content, there's an item
here in Chapter 9 called Switching from click
| | 00:30 | events to touch events.
| | 00:32 | Now, when we're working with touch-enabled
devices like iPads and BlackBerrys and Kindles,
| | 00:37 | these items will actually respond quicker to
touch events than they do with click events
| | 00:41 | because touch events are specifically geared
toward when a user touches the interface of
| | 00:45 | these particular devices.
| | 00:46 | So, you can watch this particular chapter here and
get more information about that technique as well.
| | 00:51 | So that concludes adding HTML5 content into a
digital magazine for Adobe Digital Publishing
| | 00:56 | Suite, and I really
appreciate you watching my course.
| | 01:01 |
| | Collapse this transcript |
|
|
