Contents

Creation guidelines

General guidelines

Creating content in HTML5 requires a new dedicated directory for each separate HTML5 feature or widget e.g. "/myHTMLwidget/". Each HTML5 feature can contain several pages. 

The HTML pages must exist in the root of the directory. Files, such as CSS, JavaScript, and other assets can be placed within sub-directories if desired.

Naming conventions

All landscape and portrait pages must be prefixed with "landscape" and "portrait" respectively and numbered sequentially from 1 upwards as follows:

• myHTMLwidget/
  • landscape1.html
  • landscape2.html
  • portrait1.html
  • portrait2.html
  • assets/
    • etc

All responsive pages must be prefixed with "responsive" and numbered sequentially from 1 upwards as
follows:

• myHTMLwidget/
  • responsive1.html
  • responsive2.html
  • assets/
    • etc

Page dimensions

Page dimensions and margins are as follows:

• Landscape: 1024px x 768px
• Portrait: 768px x 1024px
• Responsive: No limitation
• Margin/Guide (for both orientations): top = 64px. This margin represent the area that will covered when the nav bar is showing. Images and non-vital content should not be bled into this margin.

Responsive HTML Content

You can upload Responsive HTML content that fits to many device screens without any page boundaries or limitations. Once you upload the Responsive HTML content, you can simulate preview for various device screen sizes in both orientations.

JavaScript requirements

You should use our widgets library when creating your own HTML content. Please contact us so we can supply you with the JavaScript library. You can find a link to the documentation for it here: http://distro.appstudio.net/com.quark.appstudio.widgets/docs/index.html

App Studio reserved function names

Pages in App Studio are pre-loaded before they are visible on screen, and therefore, on load events may cause undesirable effects. The App Studio application expects the following functions within the JavaScript to handle certain events:

• onScreen() - This is called by the app once the page is visible
• offScreen() - This is called by the app once the page is on longer visible
• isOnline(bool) - This is called by the app when the page loads and the online status changes. A boolean of true/false is passed in, true meaning online and false meaning offline.

A good example of what the above functions should be used for are for video:

• onScreen() - Start a video to play automatically (replaces the autoplay attribute on a video tag as the user wouldn't want a video to play when the page isn't visible yet).
• offScreen() - Stop a video that is currently playing.
• isOnline(bool) - Update content from a live feed.

Other App Studio specific JavaScript

When using videos within App Studio, please contact support@quark.com if you wish to be able to see analytics for the video, and some JavaScript will be supplied to do this.

Uploading HTML5 content

To upload HTML5 content into App Studio:

• Login to my.appstudio.com
• Go to your publication and then go into your issue.
• When you're in the flatplan for your issue, you will see a 'Add content' button. Click this button.
• Now click the upload link on the add content popup (located at the top right hand side).
• Source your file. Ensure this is a zip file (with all the elements in this zip). Click on image to enlarge.   

• Once uploaded, press the compile button.
• From here you can preview and push to test so you can then view your content on device.
• To view your content on device, after pushing to test, login to the App Studio app (available from the App Store) and select your publication via the issues screen.

Preview thumbnails for the app

You can create a thumbnail preview image for each HTML page which will get displayed in the scrubber bar in the app reader.

You must create your own thumbnails as the following sizes:

• landscape: 164 × 120
• portrait: 125 × 163

For each file named <orientation><idx>.html e.g. portrait1.html, you can provide a screenshot named <orientation><idx>.jpg e.g. portrait1.jpg and a thumbnail named <orientation><idx>_thumb.jpg e.g. portrait1_thumb.jpg

For responsive files, e.g. responsive1.html the user could optionally provide two screenshots and two thumbnails for each orientation, e.g.

• responsive1_landscape.jpg
• responsive1_landscape_thumb.jpg
• responsive1_portrait.jpg
• responsive1_portrait_thumb.jpg

When the user does not provide page screenshots and uploads HTML zip packages with filenames starting with the string responsive_ (e.g. responsive1.html, responsive2.html, …) then the system automatically starts generating responsive screenshots.

Correspondingly for responsive content, the App Studio Apps now have the capability of picking images closest to the device size on which the content is being viewed. If you want the app to use the best possible device size, you need to provide device specific sizes using the following format: responsive<idx><landscape | portrait><width in pixels><height in pixels>.jpg_, e.g.

• responsive1_landscape_360_640.jpg
• responsive1_landscape_thumb_360_640.jpg
• responsive1_portrait_360_640.jpg
• responsive1_portrait_thumb_360_640.jpg

Define preferred devices for your publication

There are device settings available under the Publication settings:

• Device Name – The name of the device, this will also show up in the Issue Previewer drop-down.
  Width x Height – These are the actual width and heights at which the AppStudio server will take the screenshots
• Orientation – Depending upon selection, it will make screenshots for each orientation per HTML file. So, for Apple iPad, it would take screenshots once with Width – 768, Height – 1024, and the second screenshot at Width – 1024, Height – 768
• Set as Default – This affects the default selected device in the Issue Previewer drop-down, as well as uses this width and height for the Issue Cover for responsive issues

Preview for various device screen sizes

Responsive HTML pages are designed in such a way, that they look different on different screen sizes. For example, CSS controls the way a website will look on a large monitor, a tablet, or a device. Based on this premise, App Studio now has a capability of simulating the preview of responsive pages on different screen sizes and in both orientations

By default, App Studio gives default device sizes based on which the server will generate screenshots, but a publication administrator has the ability to override the default device set and make his own, e.g.:

Useful links

• Default iPad fonts: [AppStudio:Typography]