Export One HTML File Per Page with in5

Justin | design,extensions,HTML5,InDesign,tips | Thursday, July 2nd, 2015

By default, in5 will export all pages in your InDesign document into a single HTML file. But there are a couple of reasons why you might want an HTML file generated for each page in the InDesign document:

  1. Each page will have it’s own URL (so you can easily link to a page)
  2. Loading only one page at time decreases load time in the browser, especially for long documents

The ability to export a document as multiple HTML files actually already exists within in5, though we haven’t done a great job of advertising it.

Both the Baker Framework (HPUB) and the Liquid State Publishing System Output options will export one HTML file per page.

in5_multifile_output

Both outputs can be used directly on the web, though the Liquid State Publishing System option will probably be slightly better because the index.html file redirects to the first page (whereas in Baker the index file contains the page thumbnails).

One thing that is lost when switching to a multi-file format is the animated transition between pages. If you want to keep that transition, but also be able to link to individual pages, check out this solution on the Answer Exchange.

Smart Image Exporting from InDesign to HTML and EPUB

Justin | design,HTML5,InDesign,tips | Tuesday, June 23rd, 2015

The standard image format when export HTML or EPUB from InDesign in PNG because the PNG file format supports transparency (and more colors than a GIF).

The Problem

In some cases (e.g., photographic images), PNG can produce larger files, especially if you choose the High Definition (HD) option when exporting from the in5 dialog.

So, what if you know your images don’t have transparency and you want them to be HD…but you also want to try and keep the file sizes smaller?

In that case, you can use the Object Export Options (found in the Object menu of InDesign) to add custom settings to any given image. Great so far.

But now, what if you have a lot of images? It can take a long time to open the Object Export Options for each one, navigate to the EPUB and HTML tab, and select from the drop down menus.

The Solution

You can create an Object Style (Window > Styles) that only applies Export Options. And you can even narrow that to just the image type and quality.

Note how every checkbox for attributes in the image below has a minus sign (-), except the EPUB and HTML options. This means the style will let the object itself control those “pass through” settings. So only the image export settings are applied.

hd_jpg_object_class

Now you can simply select the images in your layout that you’d like to render as HD JPEGs (or any other type that you’d like to create an Object Style for), and it’s one click to apply the Object Style.

If you’re targeting an EPUB, you’re set to export. If you’re exporting HTML5 with in5, just make sure you choose Use Object Export Settings from the Advanced section of the in5 dialog.

in5_image_object_export

Here’s an IDML file with the style already created that can you can use to import the style into your own documents.

How to Create Mobile Apps as a Non-Developer

Justin | design,HTML5,iOS,tips | Wednesday, July 23rd, 2014

So you want to create a mobile app. Who doesn’t these days, right? But you’re not a hardcore programmer, and maybe your budget won’t allow you to hire one.

So how do you create an app for one or more of these platforms?

  • iOS
  • Android
  • Windows Phone
  • Blackberry
  • webOS

Each one of these operating systems uses a different programming language, and each one is reasonably complex.

Is There Some Universal Language I Can Use?

Short answer: yes. It’s HTML, the language of the web.

HTML can easily be packaged into a mobile app for many platforms. One way to package HTML into an app is using the PhoneGap code library.

PhoneGap Build

PhoneGap BuildbotIf the idea of a “code library” sends shivers down your spine, fret not, because there is a web service called PhoneGap Build. PhoneGap Build has a friendly user interface and does most of the work on the server translating your content into apps, so you don’t have worry about “compiling” or other such developer activities. And, it’s affordable!

Getting Started

Lynda.com has two courses in their video library featuring PhoneGap Build.

Up and Running with PhoneGap Build

Watch the Up and Running with PhoneGap Build course on Lynda >>

Creating an iPad App with HTML5 and PhoneGap Build

Watch the Creating an iPad App with HTML5 and PhoneGap Build course on Lynda >>

Don’t have a Lynda.com account? Get 7 days of free unlimited access.

The Best Part of Using HTML: You Don’t Have to Know HTML

You don’t have to know how to code HTML (or JavaScript, or CSS) to create HTML content. You can use a visual tool like Adobe Dreamweaver or Adobe InDesign in conjunction with our InDesign to HTML5 exporter.

Bonus Tip

If you’re looking for a way create an app for an Amazon Kindle Fire, you don’t even need PhoneGap Build. You can submit your HTML content directly to Amazon and they’ll do the packaging for you.

DropBox as a Web Server in 3 Easy Steps

Justin | tips | Wednesday, June 25th, 2014

So you’ve got some web content, now what do you do with it? Typically, this is where you’d upload your content to a web server.

Maybe you’re new to creating web content and the idea of signing up with a web host is daunting. Perhaps you’re dipping your toe in the water, and you don’t yet need your own domain name. You just need a place to post your files so that others can view them.

Fortunately, there’s a cheap (in most cases free) and easy solution. You can use Dropbox to host web sites.

Step 1: Copy your site into the Public folder within your Dropbox Directory

You may want to create a subfolder, so that you can house multiple sites in your Public folder.

dropbox_public

Important note: If your Dropbox account was created before Oct. 4, 2012, you will automatically have a Public folder. If your account is newer, you may have to request a public folder. (This may now require a paid account)

Step 2: Right-click and choose Copy Public Link

dropbox_copylink

You can create a shareable link from any Dropbox file or folder, but if your file has dependencies (images, CSS files, JavaScript files, etc) the Public folder has an easier time linking to those files.

Step 3: Paste the link in your browser to test, or paste into an email to send

dropbox_paste

You now have a link to your site. Here’s a sample site I created using in5.

Optional: You can use a link shortener to create a more memorable URL.

Strengths of Using Dropbox as a Web Server

  • Cheap/Free
  • Fast
  • Easy
  • Built-in version control
  • Doesn’t require an File Transfer Protocol (FTP) application. Files can be managed from the desktop.

Weaknesses of Using Dropbox as a Web Server

  • No server-side scripts
  • URL is generic

Helpful links

New to Dropbox? It’s a very useful service. Check out Keith Gilbert’s Up and Running with Dropbox course on Lynda.com to learn more about what you can do with Dropbox.

Need a Dropbox account? You can create one for free.

See also 4 Ways to Host Your Website on Dropbox.

in5 and InDesign CC 2014

Justin | extensions,HTML5,InDesign,tips | Monday, June 23rd, 2014

With the CC (2014) release of InDesign, Adobe has decided to rename InDesign to mark a new version and to archive the previous version of InDesign CC.

The InDesign team wrote a nice mechanism to copy preferences from the previous version of CC, which even copies extensions used in CC over to CC 2014.

Existing in5 users will notice that in5 appears in CC 2014 as a trial version, even if it had been licensed in CC.

Fortunately, you can still use the previous version of InDesign CC, and your activated license will remain intact. In some cases, you may need to reinstall in5 in CC, because of the transfer mechanism which moves/copies it to CC 2014. Alternatively, you can choose to activate a new seat of in5 within InDesign CC 2014.

We recognize that this is non-optimal and totally frustrating.

We’re investigating ways that our licensing might better mirror Adobe’s licensing and trying to figure out what might be best for our customers. You can provide feedback to us by answering the poll below.

How would you prefer to license in5?

View Results

Loading ... Loading ...
Page 1 of 612345...Last »