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


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.

Design Web
InDesign jQuery iPad Digital Publishing Suite

Previewing the final project

Hi! I'm Chris Converse, and this is a course on taking an 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 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 animates, and we have a label that animates on each one as well. Let's come down and click on the Interactive Map. So, this map here has a dropdown menu that I can come down, and I click on individual continents. When I select a 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 into 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. 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, 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 am going to come up here and swipe to the second page. We can see the animation of the bar chart taking place, and then 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 am going to 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, go back to the main menu, click on Show all continents and then all the dots 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 the web View which means we can have most of the screen be 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.

There are currently no FAQs about Add Your jQuery Project to a Digital Magazine.

please wait ...