InDesign to HTML5 Nearing Release

Update (12/12/12): The product, now called in5 is now publicly available:
http://ajarproductions.com/pages/products/in5/

We’ve been adding features like crazy in the last few weeks. We’re on track to deliver the Kickstarter release by the end of November and public release in early December. Here’s a quick update on what we’ve added in the last 2 prerelease builds and what’s left.

Bonus Features

We tabulated the results for the (stretch goal) bonus features, and the 2 winning features are Lightbox for Images and Offline Storage. Offline Storage (caching) was implemented in build 7 and Lightbox for Images will be implemented soon. We also (already) implemented the following additional bonus features:

  • Embedded HTML (InDesign CS6)
  • Embedded Flash
  • Saved settings from last export

Build 7 Features Added

  • Mobile zoom (viewport setting).
  • SEO/Metadata: title, keywords, description, author can be set. These are automatically pulled from the InDesign file’s metadata (if there is any). There’s also a button to generate the most commonly used keywords automatically from the InDesign file.

Build 8 Features Added

  • Option to render individual items within groups or render groups as images (forces display fidelity for complex items, like items with blending modes).
  • Audio support (with or without controls). Poster image acts as a play/pause button when there are no controls. Include a Flash Player fallback for older browsers. Supports the looping option in the Media Palette.
  • Improved video embedding.
  • Application (offline) caching, including an options to store everything and everything except media files (audio/video). Allows the site/app to be reviewed when no internet connection is available (top-voted bonus feature).
  • Allow items to span across multiple pages (within a spread).
  • Two new Continuous scroll page formats added.
  • Ability to set Page Color and Background Color.

Roadmap

These are the remaining features we plan to tackle before release:

  • Rendering textframes as HTML text. (the last guaranteed version 1 feature yet to complete).
  • Render Rectangles as simple div tags (to save on file size).
  • Lightview – image gallery (top-voted bonus features).
  • Lightview – links.
  • Object states (primarily buttons–also highly requested, we’ll try to add this as another bonus if we have time before release).

For anyone who wasn’t able to back this project before it closed, our mailing list is the best way to stay up to date on the public release. We’re excited that we will be delivering InDesign to HTML5 to you in the very near future!

Screenshots from the Latest Build

Image-179663-full


Image-179664-full
Image-179665-full
Image-179666-full

(Reposted from our Kickstarter update)

InDesign to HTML5 Prelease Build 6 Features

Update (12/12/12): The product, now called in5 is now publicly available:
http://ajarproductions.com/pages/products/in5/

We’ve added several new features in the prerelease versions of the InDesign->HTML5 exporter since the build 4 preview. Here’s a brief list of features that have been built since then.

Build 5 Additions

Build 5 included the following features:

  • Video embedding. (MP4) Videos within the InDesign layout are now included with the export. The exporter automatically searches for .ogv and .webm videos with the same name and folder as the .mp4 video and includes them in the exported source files to ensure compatibility across browsers. If the browser does not support the HTML5 <video> tag, a Flash video player will be displayed as a fallback. FLV and and F4V videos are also supported, but will only be displayed with a Flash video player.
  • Flash embedding. Any SWF files in the InDesign layout are now be exported and included in the HTML. If you choose a poster image, it will be displayed when the Flash Player is not available. This way, Flash can be used to progressively enhance images by adding animations or demonstrations.
  • Advanced master page layering. Typically master page items are merged into the background of a page. If you put master page items in the top layer, they will be exported above other page items.

Build 6 Additions

Build 6 now has a user interface with export options.

Selecting a Page Format currently allows you to display your content using a horizontal slider (the default), a vertical slider, or a fade in transition. You can also enable/disable the default navigation arrows (if you’d like to use your own custom navigation, as shown in the build 4 preview) and the swipe navigation. All options are then retained with the document for future exports.

Now that the framework for the interface is built, I can continue adding options to it fairly quickly.

More Information

For anyone who wasn’t able to back this project before it closed, our mailing list is the best way to find out exactly when ID->HTML5 is released.

InDesign to HTML5 Video Preview

Update (12/12/12): The product, now called in5 is now publicly available:
http://ajarproductions.com/pages/products/in5/

Our InDesign to HTML5 prerelease is progressing nicely. I put a video preview together so that everyone outside the prerelease could see some of the features that we already have in place.

For anyone who wasn’t able to back this project before it closed, our mailing list is the best way to find out exactly when ID->HTML5 is released.

Update (10/23/2012): Build 5 & 6 features covered in next post.

Web App Awesomeness

For the last year or so, I had been looking for ways to create content that will be viewable across devices. At Pearson, the entire sales force is on iPads. To date, there hadn’t been a good HTML5 tool for designers. We’ve been looking at developing in Flash Pro, packaging for iOS, and exporting a SWF for the web. An Apple Enterprise Developer license would allow us to distribute internally without going through the app store (which is very slow and approval is not guaranteed).

This has proven cheaper than many other custom development options, but still more expensive than our clients can afford in many cases.