First beta HTML5 output is landing!

First beta HTML5 output is landing!
16/07/2015
By Paolo Albert posted in Tech

We are very excited to announce the upcoming release of our first beta HTML5 output. 

Next week we will issue a new Mac version of PubCoder with the new HTML5 output! As for the Windows version, don't worry! The Windows users will have their own very soon!

Here is a brief overview of the features you will find and a list of known issues.

What is the HTML5 output

The HTML5 output is conceived as a viewer/widget of one or more pages of your PubCoder project. Once exported you can publish this viewer/widget both as an embedded content into an iframe in your website and/or in fullscreen mode. You can use this widget to publish your entire work or to preview and promote a portion of it, and send your website users to the bookstore(s) where the final content is available.

Technical requirements

The HTML5 output works only behind a webserver, as it requires data transmission between iframes, which violates some browsers’ local rules, in particular cross-domain violations. To view your content on a local browser we recommend to export your content as EPUB and read it through the Readium plug-in for Chrome, available for both Mac and Windows. The output will contain both a index.html for fullscreen view and a content.html for embedded view, and a markdown file with the instructions on how to use them in your website.

What you will find in the Beta

Here is a list of features already available:

- package multiple workspaces in one single HTML5 widget. This means you can have an optimized output for desktops and an optimized output for smarthphones, for instance. Please note that the output is not responsive (a part from the actual reader - I will talk about this later) as your content will respect the fixed-layout ratio defined in your workspace. Sizes of your content will adapt either to the iframe container, when embedded, or to the window, when in fullscreen. Just like the native App outputs, the user will be presented with the corresponding content you have determined according to the device, screensize, orientation and language set in the browser. 

- insert links to where your content is available for sale/download: links to App Stores (App Store and Google Play Store) and Book Stores (iBookStore, Google Play Books,   Barnes & Nobles, Kobo) are available

- activate social sharing buttons to let your users share your content through major social networks (Facebook, Twitter, Google Plus, LinkedIn) and/or embed your content into their website through an iframe

- make a sample of your content available through a direct download button to a sample EPUB

- activate the interface menu where all of these features are available: a top bar will contain links to chapters, links to your bookstores, download an EPUB sample, language choice menu, a button link to your content's general informations, a button to activate/disactivate read aloud, a button to activate/disactivate the soundtrack, and buttons for social sharing. A bottom bar will contain image thumbnails with direct links to single pages of your content. The interface menu is responsive to different screen ratios, as it exploits bootstrap stylesheets and javascript. 

- exploit the default swipe to navigate option for a great User Experience on tablets and smartphones. You can also activate the show arrows option, or create customized arrows of your own, to let your user move from one page to another easily also on Desktop.

The list of known issues

The Beta is the first step of an ongoing work of R&D. What follows is a list of the challenges our dev team is tackling: 

- the content may take a while to load the first time is viewed. After that it will be cached and it will be as fast as hell. We are working on a special buffer, in order to have more pages preloaded, but even in this case first load will take a while. Like any other website, file size matters. We will do anything to lower a page’s size - minification of files, reduction of code redundancy, etc. - on your side please, please, please pay attention to your asset files. For instance: you canoptimize your image files in the assets management, or you may select the 1x Pixel Density in General Settings for your HTML5 workspace, and so on. 

- audio and video files that are intended to play automatically will not work on tablets and smarthpones. This is due to a Safari for iOS and Chrome for Android limitation that prevents heavy preloading on your users’ network devices, and forces the user to trigger manually multimedia resources. I am sure this matches your experience - but we are aware this may undermine severely your content. We are working to make sure that at least soundtracks and read-aloud will be fully working also on mobile devices.

- cross browser support to multimedia files: PubCoder currently does not create an additional audio/video file to mp3 or mp4, therefore Firefox will be unable to play those files. If you try to attach an .ogg file instead, same thing will happen on Safari - will fix this.

Documentation

There is no official documentation yet on our website, but please refer to this page to see how to package a multi-workspace App and to this page to have a taste of what the HTML5 Viewer’s UI/UX will look like. Please refer to our Forum’s dedicated channel here to point out any questions/issues.

Paolo Albert

Paolo is responsible for the overall development workflow and roadmap, ebooks and product specifications as well as coding the HTML5, javascript, CSS and iOS exports. Prior to PubCoder, Paolo founded an IT company and spent 15 years helping publishers to develop their own digital products. He is an expert in development and project management on open source projects (PHP based websites and applications), on iOS and based Applications and frameworks. He does R&D in EPUB3 cross-platform development and in HTML5/CSS3 front end web and mobile design and is a speaker at various conferences worldwide dedicated to publishing.