Amazon is now accepting HTML5 apps into their AppStore. From the press release:
Developers can now submit URLs for their HTML5 web apps and mobile websites and have Amazon offer that content to millions of Kindle Fire and Amazon Appstore customers in the same, convenient way as native apps. Developers can submit and distribute mobile web content without using third party software or doing any native app development, and they can take advantage of Amazon’s In-App Purchasing API for JavaScript, which provides them the option to build sales of digital goods into their apps.
This is huge news those of you who are using in5 to generate HTML5 from InDesign. You just got a new distribution channel, and a much larger audience!
Thanks to Keith Gilbert for bringing this news to our attention.
In conjunction with one of my recent Lynda.com courses, HTML5 Projects: Creating an Advanced Responsive Presentation, I created this simple utility to take care of an otherwise tedious and unforgiving* task: generating an Application Cache Manifest file.
CacheMan not only generates the manifest file, it also attaches the manifest to the target HTML files. This attached manifest file will tell the user’s browser to cache the listed files so that they can be viewed offline.
*In many cases, a site will fail to cache if there’s a single typo in the manifest file.
Usage
The Main HTML field is where you assign the primary HTML file(s) that will trigger the Application Cache.
The Dependent Files are the files (or their parent folders) that will be added to the cache. If the Auto Detect Dependent Files box is checked, CacheMan will search any files added to the Main HTML category for dependent files (CSS, JavaScript, images, video, audio, etc).
For both the Dependent Files and Main HTML fields, files can be added using the plus (+) button, or by simply dragging and dropping files (as shown in the video demo below).
Files can be omitted from the manifest, or treated as network files (not cached, but pulled from the server) by using the Ignore File Extensions and Network File Extensions, respectively.
Demo
Tips
Make sure that you add the .appcache mime-type to your server:
Note: The application is self-signed, so you can ignore the installation warning about the publisher being “unknown.”
Update 2019:It appears that the certificate inside the app has expired and you may receive a message.
SOLUTION: Because of the Certificate you may need to change the system clock prior to October 1, 2017 before installation. You can change the clock back to the correct date after that.
CacheMan is available at no cost, but donations are welcome.
Version 1.5 is one of our biggest updates so far, with a heavy focus on text rendering and extensibility. What do these two things have in common? You’ll see in the video below. in5 also now has greater support for Overlays.
You can now do more with a trial copy of in5 (details below). Interested? Try it out.
If you want more details on this update, read on.
Extensibility
A new Resources section makes in5 extensible by allowing the addition of custom CSS, JavaScript, HTML, and other assets.
You don’t have to know CSS or JavaScript to take advantage of this feature, which can also be used to add Google Analytics tracking or to dynamically embed fonts from TypeKit or Google Fonts, as shown in this video:
When you attach resources, in5 also adds metadata attributes (data-bookmarks, data-section, data-section-marker) to help you control appearance and functionality. The following video shows how the resources can be used to create a custom menu and alter the appearance of the output:
We’ve also added things like “newPage” events to the JavaScript to help your custom code respond to your in5 output.
To download the view the output from the videos above, download the source files, or see more videos, check out the in5 demos page.
SVG
There’s a new text rendering option for in5. SVG (Scalable Vector Graphics) preserves appearance and scalability, which is great for HD (retina) displays. SVG has been around for a long time and is compatible with most browsers.
Overlays*
We’re excited to support even more of the popular DPS Overlays–adding more interactive possibilities to your HTML5 output. in5 now supports all Overlays available in InDesign CS6, except the Panorama. In version 1.5, we’ve added support for the following Overlays:
Web Content Overlay (URLs and local HTML files). Automatically grabs the dependent files when an Edge Animate HTML file is detected!
Image Sequence Overlay. Great for controlled animations!
Pan and Zoom Overlay. Highly requested!
*The support for Overlays was created to work starting with CS6. The overlays generated by the Overlay Creator panel from CS5.5 may not be supported, since they relied on different code. However, if there’s an Overlay you’d really like to see supported with InDesign CS5.5, let us know.
Custom Page Ranges
When both David Blatner and Keith Gilbert tell you that your product would be better if…it behooves you to listen. So we did! Now you can choose which pages (or Alternate Layouts) you’d like to export with in5.
The export range allows you to choose All Pages, a single alternate layout (if any are present), or a Custom range. When Custom is selected, a text input appears. This field is quite smart and supports the common
InDesign print/export conventions. For alternate layouts, type the layout name followed by a colon, and then the page number(s), e.g., “iPad V:1”. If using section numbering, type the section prefix in front of the number(s), e.g., “a1”. You can also type a plus sign (+) followed by the absolute page number. This is useful when your document doesn’t start with page 1. In addition to these conventions, you can also type “last” or “end” to represent the last page in the document, e.g., “+2-end”.
I was sitting in Colin Fleming‘s One Design, Multiple Devices: Adaptive Design in Digital Publishing Suite lab at Adobe MAX, when someone mentioned that it would be useful to split Alternate Layouts into individual documents when building Folios. Many of our in5 customers are working with Alternate Layouts as well, so I’ve included a script with the latest update of in5. The script is available to use at no charge for in5 and DPS users alike.
Usage
Just double-click on the script in the Scripts panel:
Download
The script is installed free with in5. A license is required to use the full edition of in5, but this script will work even if you don’t have an in5 license. So, head over to the in5 download page and get the latest version (which includes this script).
Version 1.4 of in5, our InDesign to HTML5 conversion tool, introduces several highly requested new features.
Slideshow Overlay
The Slideshow option in the Folio Overlays panel of InDesign makes it possible to create an interactive slideshow from a Multi-State Object and export it to a Digital Publishing Suite (DPS) app. With in5 v1.4, you can now export that same slideshow directly to HTML.
HTML Embedding for CS4, CS5, and CS5.5
InDesign CS6 introduced a fantastic new feature that made it possible to insert HTML into an InDesign document. You could even copy embed code (from YouTube, Vimeo, Google Maps, etc) and paste it into InDesign. InDesign would recognize that the incoming text was HTML and automatically generate a box with the right dimensions. in5 has supported the use of the embedded HTML feature since version 1.0. In version 1.4, we duplicated this ability to insert/paste/edit HTML code for anyone using InDesign versions prior to CS6 (CS4, CS5, and CS5.5).
My throat is still recovering from a cold and the visuals were enough to show the features, so don’t adjust your speakers, there’s no narration is this video.
Animated GIFs
Animated GIFs used to be all the rage on the web. As Flash introduced more sophisticated animation, animated GIFs fell out of fashion. Since Steve Jobs’ Thoughts on Flash, and the increasing popularity of mobile devices that do not support the Flash Player, animated GIFs have made a comeback. And now they’re supported by in5!
Any .gif file that is imported into InDesign and not cropped will be preserved by in5 by duplicating the original .gif file (rather than rendering a new image).
Hyphenation
Hyphenation is an important element in design, as it allows the lines of a paragraph to be broken up in a less ragged fashion, creating a smoother visual flow of text. Hyphenation is just now beginning to be supported on the web. Even though it will only appear in a few browsers at the moment, we’ve added support for those browsers because hyphenation is such an important design feature.
Additional Support for WAV and MP3 Audio
in5 has supported .wav and .mp3 files as a primary audio format since version 1.0. Since different HTML5 browsers support different audio formats, in5 also has a fallback mechanism that checks for audio files with the same name but a different extension to include as alternate sources. Previously, in5 would only search for an OGG file as a fallback. In v1.4, in5 also does an additional search for MP3 and WAV files as fallbacks. So, for example, if you place intro.mp3 into an InDesign document, in5 will search for intro.ogg and intro.wav (in the same folder) to use as alternate sources for browsers that support those formats.
Dialog Loading Time
Before displaying the export dialog, in5 collects information about document swatches to use as options in the dialog. A user discovered that having hundreds of swatches in their document could cause a significant delay before the in5 dialog appeared. We’ve added a time limit to swatch collection in v1.4 to help remove this delay.
