Add Your jQuery Project to a Digital Magazine

with Chris Converse
please wait ...
Add Your jQuery Project to a Digital Magazine
Video duration: 0s 16m 43s Intermediate

Viewers:

This short, project-based course combines the use of Adobe InDesign and the Digital Publishing Suite plug-in to add an interactive web experience to your digital magazine. Author Chris Converse reveals how to download Digital Publishing Suite, how to create articles and add them to a magazine with the Overlay Creator, and how to preview the finished magazine on a mobile device such as an Apple iPad or Android tablet.

Subjects:
Design Web
Software:
jQuery
Author:

Previewing the final project

- [Voiceover] Hi, I'm Chris Converse, and this is a course on taking and HTML5 project, and putting it into a digital magazine. Now, if you're a premium member of the Lynda.com online training library, you'll have access to the exercise files. If you don't have access to these files, you can use any localized HTML project. And, inside of the "B" folder, here, I have two copies of previous Lynda.com courses, so if you've taken any of my previous courses, you can use those projects, as well. I've included the bar chart, here, and the interactive map. To preview these, I'll come down, and double-click on the HTML file for the bar chart.

So, inside of our browser, we can see that each one of these bars animate, and we have a label that animates on each one, as well. And let's come down and click on the interactive map. So, this map here has a drop-down menu, that I can come down and click on individual continents. When I select the continent, all the dots will hide except for that continent. I can click on each one of these, and get more city detail information. So again, this full interactive experience inside of the browser, we want to capture this, and encapsulate that inside a digital magazine. So, let me close my web browsers, here.

So at this point, let me bring up my iPad. So, I'm going to be using the Adobe Digital Publishing Suite. And so, for my device, I'm going to be using an app called, "The Adobe Content Viewer." You can search your App Store for this particular app. You can find this for iOS, Android, and Blackberry. And as you can see, I have this app in the upper-left hand corner of my screen here. So I'm going to come up here and tap on this device to launch this. Once the app launches, you're going to sign in with your Adobe ID. Then, the app is going to check with the "Adobe Folio Producer," which is an online tool, to see which magazines you have access to to preview.

So here I see I have a magazine called, "Codify Demo for Lynda.com," and I see a little blue label underneath that says, "free." I'm going to come up here and tap "Download," to download a preview of this. Once this downloads, that "free" label will go away, and I'll see two buttons here: "Archive" and "View." I'm going to come up here and tap on "View." So here I have a three-article magazine, the cover counts as the first article. I'm going to come up here and swipe to the second page. We can see the animation on the bar chart taking place, and if I swipe one more time, we'll actually see the interactive map.

Now, this map is fully interactive, just like we saw in the browser. So, I come over here and tap on a country list, choose Australia, come up here and tap on Sydney, and then I can see the city details come up. Come up here and tap on Perth, or back to the main menu, click on "Show all continents," and then all of the dots will come back. So again, we're seeing that exact same user experience now in the magazine that we saw in the browser. So, in this course we're going to look at taking an HTML experience, and making it an entire article, like we see here. On the second page, we're going to use a feature in InDesign called, a "Webview," which mean we can have most of the screen by InDesign, but a part of it be HTML5.

We're going to lay out this content in InDesign. We're going to use the Folio Builder to build our magazine, push it up to the Folio Producer, and then pull our final project back down, using the Adobe Content Viewer app that we just looked at. So I hope this course sounds interesting to you, and if so, let's get started.

please wait ...