Introduction

PubCoder HTML5 export allows to output your project as folder containing all the necessary files to put your publication online on the web, either embedded on your website as an iframe element or as a standalone website, including a web-based reader that allows end users to navigate through the pages.

HTML5-specific features

PubCoder offers some features that are specific for HTML5 exports. To see those options in the interface, be sure to switch to the HTML5 format in the export control.

Project Properties

Swipe to Navigate Enable to allow end user to switch pages by swiping left or right on the page itself
Show Navigation Controls Enable to allow end user to switch pages by tapping left/right arrows that will be displayed on the edges of the page
Auto Play When enabled, your publication will immediately started on the browser. When disabled, instead, a play button will be displayed, and the end user must click/tap it to load the publication (similarly to what happens with embedded YouTube videos)
Web App Content Size One between Auto and Fixed. The first will zoom your publication automatically basing on the window/iframe size on the browser, while the latest will display the publication always at its original size
Tap to Open App Menu When enabled, any tap on non-interactive areas on the screen will show the reader menu
App Menu ▹ Page Number in Thumbnails If enabled, displays the page number in the thumbnails of the publication pages, in the reader menu
Links to Stores The properties in this section allow to display a Buy Now button (the label of the button is editable) in the web-reader interface, that will open a popup with links to various app/ebook stores. This is really useful if you want to publish a proof/demo of your publication on your website for marketing purposes, prompting end user to buy the full version on a store

Project Settings

You can find some additional HTML5-specific project settings in the homonym window. To access them, click Settings in your project window toolbar, then click on the HTML5 tab.

Allow Sharing on Social Networks Enable to display Share buttons in the web-reader interface
Allow Embedding Enable to display an Embed button in the web-reader interface, which will allow end user to get code to embed the publication on other websites

Page Properties

PubCoder offers one specific page property, which you can find in the page inspector, and that’s Ask Audio Permission. When enabled, a popup will be displayed when the page loads on the web-reader, asking user for permission to play audio. This is a workaround for a security feature of some browsers that will prevent audio tracks from playing without a user gesture. The reason for doing this, generally, is to prevent banners and ads on the web from playing audio on their own, but it can be a problem for digital publications.

If you find issues with audio playback on some browsers, enable this option, so that an initial user gesture will allow every subsequent audio playback on the page.

Actions

Open App Menu Opens the navigation menu of the web-reader, allowing the user to modify reader settings
Open Localizations Menu Opens a menu that allows the user to switch language, choosing from the different language renditions included in your exports

Export Destinations

The export control offers various possible destinations for the export

Export Menu Web Folder

Wi-Fi

This option will export your project as HTML5 and share it over your local network: at the end of the process, a window will appear with the address where the file is shared; just open that address on a web browser on a mobile devices on the same Wi-Fi network to display your publication on the device. You can even scan a QR code to avoid to type the address manually.

Browsers

This is actually very similar to the Wi-Fi sharing, but instead of showing the address where the publication is available, it will automatically open that address in one of the browsers installed on your computer.

Folder

Use the Folder export to publish your publication on your website. PubCoder will export a folder containing the following files:

  • index.html
  • content.html
  • readme.html

And the following sub-directories:

  • js
  • css
  • images
  • BookPayload

Make sure all of these files and directories are present, otherwise the content will not be viewed correctly.

Upload this directory in any position under the root of your website - using a FTP client or the File Manager in your website control panel -, for instance:

yourroot/webapp

Once your webapp folder is uploaded, you can make it available on your website in two different modes.

Full View mode

Your publication can be viewed accessing the following URL:

http(s)://yourwebsite.com/webapp

If you inspect the code you will see that an iframe is included. If in PubCoder you selected “auto” the iframe will adapt to the window browser’s sizes, otherwise it will respect the sizes specified in your workspace. You may change those sizes according to your wishes.

Embedded mode

Your publication can be embedded in an iframe of any of your html pages by including the following code:

<iframe src="http(s)://yourwebsite.com/webapp/content.html" width="%width%" height="%height%" frameBorder="0" scrolling="no" allowfullscreen></iframe>

Where yourwebsite is the name of the website url, %width% and %height% are respectively the iframe width and height in pixels.