Quark App Studio: Building a Dynamic News Reader (Newsletter) App

This tutorial will give an overview of how to use Quark App Studio to build a news reader App similar to the USAToday App, CNN App, BBC App, etc. This is really just a proof of concept App and is not a full blow finished and polished piece of work but by the end of the tutorial you’ll be able to complete the App by following the same pattern of what we have done up to that point.

Here is a screen grab of my finished App in the iPad simulator.

A Dynamic News Reader App Made Using Quark App Studio.

As you can see the design of the interface is very similar to what you would typically see in a news reading App. There are three tabs that break the content down into the sections Headlines, World News, and Technology. Touching any of these tabs will take you to news which falls under that topic. The App opens to the Headlines section. All three sections follow the same format where there is a large ‘top story’ that spans the full width of the screen and six sub-stories that fill out the bottom of the screen. For this tutorial I have only built the portrait orientation of the App if this were to go into final production I would certainly build the landscape orientation as well.

The key to an App like this is that ALL of the news elements (images and text content) are located on a web server. Only the very base interface elements are built in Quark App Studio, the headline, subhead and three tabs. All of the rest of this screen is loaded from remote URL’s on my web server. With all of your news content being served from a remote web server all you have to do is update that content and it is reflected in the news app when it is refreshed. So if you wanted to post new news once a month, once a week or daily all you have to do is update the content that is on the web server and the readers of your app will see the new content when it’s changed on the server and you don’t have to do an update to the Quark App Studio App!

Let’s take a look at my file in Quark Xpress:

Basic App Layout Within App Studio

This screen shows the exact same screen as above but in Quark Xpress. I’ve also shown the ‘page layout’ and ‘layers’ pallets. The page layout pallet shows only six pages right now. There is one page for each section tab (Headlines, World News, and Technology), there are two pages for two of the text stories I have linked up and one page for the video story I linked. All of this can be seen working in the video I have linked at the bottom of this tutorial. You will need one page per screen in your final news app, whether it’s a main interface screen (headlines, world news, and technology), or a story screen.

In the layers pallet you can see that I have a few layers built, this is just my personal working style but I think it helps keep things organized. The ‘default’ layer contains most all of my base Quark interface elements, the headline and tabs for example. The ‘web elements’ layer contains all of the items that are loaded in from the remote web server. You can see these indicated by the pink boxes that contain the Quark App Studio web element icon in the screen shot. The ‘interactive’ layer contains all of my buttons that load the appropriate web content when a story is touched, these are indicated by the green boxes with the button icon in the upper right corner. And the ‘rule’ layer simply contains a rule that I wanted to make sure is on top of everything else.

So lets build the headlines page, here is a screen shot of my rough layout. Note that I put in empty boxes on the default layer to indicate where all of my elements will go. This just helps me visualize the page and makes it easy to copy and paste all the base elements as needed to other layers and pages.

News Reader App Headlines Page.

The box I’ve titled “Main news story box…” is what I will build first. This name is just for your reference and not in or used by my final app.

First I will duplicate the base blue picture box and paste it into my ‘web elements’ layer. This gives me picture box at exactly the size and location I need. Once I add the box to the web elements layer, the outline shows as pink since it is placed directly on top of the ‘default’ layer. Before I do anything with this box in Quark App Studio I need to create the image that will be loaded into it. I used Photoshop to create a graphic that is 696 pixels wide by 418 pixels deep since that is the exact measurements of the picture box in App Studio. I like to save my images as .png files but App Studio does support other formats as well. I saved the image into a folder named ‘images’ and keep it in the same folder with my App Studio files. This ‘images’ folder will be uploaded to my web server along with the other folders and files I’ll need for the news stories. I’ll be placing all of my images and html files in the public folder of my dropbox for easy access.

Top Story Graphic for the Headlines Screen.

the image on the left is the graphic I created for my top story.

Now that I’ve created the image I can place it in App Studio. To do this I activate the main story picture box and open the App Studio palette. From the palette I choose the ‘HTML Page’ option and fill in the URL. I Also make sure the ‘online’ check box is checked and I uncheck all the other boxes (transparent background, interaction, scrollable, and allow zoom). Here is a screen grab of what the App Studio palette looks like:

Quark App Studio Palette.

Next I made the six sub story images and placed them in their pictures boxes in exactly this same manner as the main story graphic. Once that is complete I duplicated all seven of the picture boxes and placed them on the ‘interactive’ layer of my document. Working on the ‘interactive’ layer (you may want to deactivate the other layers of your document so you don’t get confused or click the wrong picture box) I select the ‘main story’ picture box and and delete the current ‘HTML Page’ option by clicking the trash can in the upper right corner of the App Studio palette, this deletes the current action applied to the picture box. Now I click the ‘button’ action and from the drop down menu at the bottom of the palette choose ‘go to page’ and click create. I’m going to make page two of my document the page that will display the main news story so I put a number 2 in the box. Below is a screen grab of what page two of my document looks like, I picked up most of the interface from page one, deleting the news story boxes and adding one large box where the news story will be displayed. I’ve also added a ‘done’ button that will take the user back to the Headlines section of the App.

The Empty Story Screen in App Studio.

The pink box in the screen shot to the right is located on the web elements layer of my document and is the picture box that the remote webpage will be loaded into for display in the App. This box is set up just like the main news story box on the previous page except it is going to load in a fully styled HTML page instead of just an image. Quark App Studio renders its HTML using the iPads built in web kit browser so everything renders beautifully to the screen. Since the content of this box is going to be essentially a live webpage  I’ve now checked all of the available check boxes in the App Studio HTML elements palette. This will allow the users to scroll and zoom the news story as needed and also allows the white of my background box to show. You could uncheck the ‘transparent background’ option to control the background color in your HTML document. Below is a screen grab of the top story content in the iPad simulator.

The News Story Screen with a Story Displayed.

The rest of the Apps development follows this same procedure. There is a separate page for each news story which calls in its content from the web server. Below is a screen grab of the files I upload to my dropbox, you’ll note it has a pretty standard web site format to it. There is a .css file and separate folders for the images and stories and movies.

This is a very workable and flexible technique for building a news app in App Studio. There are a couple issues that I came across though. The first and probably the most critical is that there is no way I can find to notify the users if they don’t have a network connection. If the iPad is offline then nothing loads in the boxes you have set up, just the shell interface will display. It would be wonderful if there was a way to test for a network connection and pop up a box so the user is altered if the connection does not exist.

Directory of Files Uploaded to the Web Server.

Also the default function of App Studio is to generate ‘page thumbnails’ for each page of your document which is great for a print style app but that really has no purpose here in a news reader app since all of the information is dynamic. It would be great if there was an option to turn off the ‘page thumbnails’ on export. I was able to eliminate the icons display in the app by setting the Height, Page Gap, and Article Gap to 0 when I export my App. But I’d really like a way to turn off the functionality all together.

Update: Matthias from Quark let me know that the ‘page thumbnail’ buttons mentioned above can be turned off by following the procedure outlined here. I’ve tried it and it works great!

You can see this App in action in the video below.

Leave a comment


Email(will not be published)*


Your comment*

Submit Comment

© Copyright Mostly Creative - Theme by Pexeto