Introduction

PubCoder HTML5 export allows to output your project as a folder containing all the necessary files to put your publication online on the web, either as a standalone website or embedded on your website as an iframe element, 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 or using arrow keys
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, or using arrow keys
Facing Pages in Landscape PORTRAIT RENDITIONS ONLY Enable to display two facing portrait pages per screen when the end user device is in landscape orientation, similarly to a book. When the device orientation is portrait, one page at a time will be displayed.
Auto Play When enabled, your publication will be 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 Fit and Cover. Use the latter option to cover all space available on the display of the device, including notch and safe areas.
App Menu ▹ Tap to Open App Menu When enabled, any tap on non-interactive areas on the screen will show the reader menu
App Menu ▹ Page List & Thumbnails Defines if the reader menu should display the pages list and thumbnails or not, e.g. if you want to control the reading flow and prevent the end user to jump to a random page
App Menu ▹ Page Number in Thumbnails If enabled, displays the page number in the thumbnails of the publication pages, in the reader menu
App Menu ▹ Find Displays or hides the Find button in the reader menu, enabling or disabling the ability top search in the contents of your publication

Page Properties

Page Thumbnail Allows to define a custom thumbnail image that will appear as thumbnail for this page in the reader page switcher. If not specified, a screenshot of the page will be automatically rendered.

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.

App ID Optional, an identifier for the app that will be used as a prefix for local storage keys
Custom Reader URL Optional, usually used in combination with Shelf. Can be set to a URL containing reader sources to be used in place of the ones bundled with each publication. Useful to use a shared reader between all of your publications, allowing you to update/edit only one reader affecting all of your publications

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

Notes on Video and Audio Autoplay

Most modern browsers implement security features to prevent video and 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.

This behavior also affects HTML5 PubCoder publications, where audio or videos with audio cannot be played automatically or starting from Load or Show events. As a workaround, turn off the Autoplay option in the project inspector in PubCoder, thus forcing the user to do an initial tap/click to start the publication: this user action will then be enough for PubCoder to play all sounds using Play Audio File actions without further explicit user actions. Please note that this does not apply to Audio Objects or videos with audio track, which still require an explict user action to be played.

Optional URL Parameters

The web-based reader built into every PubCoder project exported in HTML5 supports some optional parameters that you can append to the URL to specify some settings when opening the reader:

startPage Optional, the number of the page to open (defaults to 1)
language Optional, the language code of the rendition to be opened, when multiple language renditions are exported with the project (defaults to browser language)

For example, if the url where your publication is located at https://yourwebsite.com/webapp/, you can use the following URL to specify starting page and language:

https://yourwebsite.com/webapp/?startPage=2&language=it

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
  • readme.html

And the following sub-directories:

  • js
  • css
  • images
  • Payload

Upload this folder (you can change the default webapp name to whatever you like) in any location under the public_html directory on your web server - using a FTP client or the File Manager in your website control panel - for instance:

/var/www/html/yourwebsite.com/public_html/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 URL directly, for example:

https://yourwebsite.com/webapp/
Embedded mode (iframe)

Your publication can be embedded in an iframe inside any other web page by including the following code:

<iframe src="https://yourwebsite.com/webapp/" 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.