Exporting to HTML5 from InDesign pt2

0800 156 0777

Exporting to HTML5 from InDesign pt2

In a previous post I talked about a lovely new InDesign extension called in5. It exported to html5 beautifully. But I had only tried it with simple layout and colours. Now I am going to follow on from that example but I am going to export 5 pages instead, and I am going to add some content. First off here is my original sample from previously…

 

Simple InDesign layout

Simple InDesign layout

 

I am now going to change the main content from one column to two, the top three boxes I will merge into one, and then duplicate the page 4 times, so I end up with 5 pages total. Within each main content box I will place a picture, and place a title at the top, indeed you could use InDesign's Live Caption featured here to get your titles automatically placed. Also using the Live Caption feature means that the title will then update when you place a new picture into the same box as the previous picture. So we now have this…

 

html5 slides

html5 slides

 

With several pages now, we can use the Export html5 with in5 command to see what get when we have this sort of setup. Selecting this command and looking in the Basic options notice that we can set the Page format (currently set to Slider - Fade in). We can also enable swipe navigation (for tablets, etc). 

 

indesign export to html5 with in5

indesign export to html5 with in5

 

So when I now click on OK my web pages becomes…

 

html5 slides

html5 slides

 

…making sure that I set up my output to Web. Nice and easy. I get buttons on the left and right to click on, can change the Page format to these… 

Continuous scroll (Vertical/Horizontal)
Liquid
Slider (Vertical/Horizontal/Fade In) 

…and re-export in just a few seconds. Very nice. But what about the other choices of exporting? Well we have two more - iPad Web App and Baker framework (HPUB). The latter I will not cover in this post but we will now have a look at the former. If I change my output to iPad Web App and click on OK what do I get? Well a new folder, containing my output. But when I open up the index.html so generated, this message appears…

 

in5 message

in5 message

 

Firstly we get a nice link that we can use to send an email to our iPad. So we can easily test this on our tablet - but you must make sure that you have uploaded your files to a web server, as emailing a link to a file on our desktop computer will not work. A tablet cannot just look at such a file, it must have a proper url. However this is easy to do and very easy to test. Just upload the folder called html5_output onto your web server and open up the index.html file generated by the export. Click on the link, send an email to yourself and voilá. A nice set pages that swipe on your tablet. 

A word of warning, do not connect to an address with localhost in the name - it seems that the browser within an iPad does like that and you will get a connexion error. Just replace the words localhost with the actual ip address of the machine, e.g. 

192.168.15.15:8888/html5_output/ 

Refresh the page if necessary and you have a lovely little web-based app that swipes beautifully. Anyway, that's it for now, and I will blog another time about something that I spotted when outputting to a web-based app and also about the Baker ebook framework output option as well.