How to Create a HTML5 Web App From PDF using 3D Issue

post date

html5 web appToday this blog will focus on telling you step by step how to create a HTML5 web app from your digital edition using 3D Issue. Lets begin: Firstly if you open your PDF in the 3D Issue software and go to the output tab, there are various options here under Format to choose from – many ways to output your publication. So we choose the first option which is: Online flash / HTML5

We can create an online version which is viewable in flash or HTML5. Remember it will automatically detect which version would be most suitable for the user depending on their device. You do not have to worry about having 2 direct links – you just send them one direct link.

html5 app

In the menu at the top there is a tab called options. If you select Options from here then choose iPad/iPhone App Icon. You can create app icons; you can upload your own design – so that anyone on an iPad or iPhone can download your publication. You just click change the app icon and from here you can upload your design or logo of choice.  Those icons will then be saved with your publication. Anyone viewing your publication on an iPad or an iPhone can download that app icon directly to their home screen which then converts into a web app. This means that they can launch it from their home screen into a full screen version on their iPad or iPhone.

web apps

Then go to the Output tab, here we are going to create our version, select Online flash / HTML5 select Upload and click Build.  This takes a minute or two; it is creating the version HTML5 and Flash and uploading it directly to our site. Once it is uploaded we are ready to view online. Click View Online and you will see our version. It quickly checked the url – it decided if we needed a flash or HTML5 version, we were on a desktop so it showed us the Flash.  If we view that same url on an iPad we get to see the HTML5 version which looks exactly like the flash version.

download free trial of publishing software

It is still in the safari browser on the iPad, so now to transform it into the app: Click on the icon at the top left – just to the left of the url bar, this menu that then pops up shows a number of options, we want the Add to Home Screen option select it – your app icon then appears – and this will be the icon that will be displayed to your reader. You can select the text and change as you like. When you are ready select Add on the icon and this brings you to the iPad home screen. The app icon will be positioned  there along with any other apps you have, and it is converted into a HTML5 Web App. You can view a video tutorial of this process also here.

By Audrey Henry

 

Copyright © 3D Issue Ltd 2016. All rights reserved.