Pulling HAT Content Into Native Apps

Who Am I?

Neil Perlin - Hyper/Word Services.– Internationally recognized content consultant.

– Help clients create effective, efficient, flexible content in anything from hard-copy to mobile.

– STC’s lead W3C rep – ’02 – ‘05.

– Certified – Flare, Mimic, Viziapps, RoboHelp in process of renewal.

The Issue

Fairly easy to single source HAT content to mobile – to a web app.

But can we feed HAT content to a native app – use Flare, RH, or others as content portals to native apps?

In other words, extend help single sourcing to “true” mobile?

Contents Overview of “Mobile” Help vs. Mobile – Design Differences Help-to-Mobile – Content Conversion

Overview of Mobile

Basic Terminology

App – Short for application, usually used now re mobile devices – “iPhone app”.– Highly focused – “micro-tasking” – compared

to PC-style applications.» Native apps – Follow a specific platform standard,

can run on-device resources – e.g. iPhone app.

» Web apps – Run in a browser on any device but can’t run on-device resources, may be mobile-optimized – e.g. WebHelp vs. WebHelp Mobile.

» Hybrid – Mix of native and web – “next big thing”. Based on HTML5 and CSS3.

Why Terminology Matters

Affects choice of hardware and software-related delivery “mechanisms”.

Terminology mixups can spell disaster.– Just saying “mobile” is an invitation to buy the

wrong tools or hire the wrong developer.

– Like not being clear about WebHelp vs. Web Help or HTML help vs. HTML Help.

Authoring Tools

In tech comm…– Flare 6+ – Web apps, ebooks.

– RoboHelp 8+ – Web apps, ebooks, native apps with some content and vendor-approval issues.

Outside tech comm…– ViziApps – IMO, offers the best data handling

of any tool in this space.» I’m also certified in it...

– Others like appmakr, IBuildApp, Google App Inventor, appMobi, etc.

Why Use GUI Tools?

You may know the tool, so you only have to learn a few new features.

Keep you out of the code. Set technical boundaries for you.

Plan To…

Develop a content strategy, standards: – A few high-level suggestions:

» Define how mobile effort solves business problem.

» Define your terms.

» Identify the content sources, how to support them.

» Implement a consistent tool set in the company.

» Support those tools with templates and training!

» Select external/internal standards and adherence.

» Think inside the box – no tool hacks.

Help vs. Mobile – Design Differences Affecting Data Conversion

Text-Heaviness

Help usually text-heavy, apps not.

Text-Heaviness

Though there are exceptions, sort of…

Control Types and Locations Usually at top and left in help…

Control Types and Locations But at bottom in apps – less dangerously

tappable…

Orientation Landscape in help, portrait in apps (unless

screen rotation enabled)

Design Conclusions Help converted to mobile is unlikely to

look like an app. Must plan for mobile before starting a help

project whose outputs include acting as a data portal to an app.

More than just outputting a help project to “mobile”.

Given these issues, how do we get HAT content into an app?

Help to Mobile – Content Conversion

High-Level Considerations What must be done to the content? Where?

– Is the HAT content the app or is it feeding into an app?

» HAT content is the app, you have RH10 or Flare 8 – use the HTML5 or mobile outputs.

» HAT content is the app, you have another HAT – keep going.

» HAT content is feeding an app – keep going.

– Then…

High-Level Considerations

– Do general clean-up:» Convert SWFs to MP4 or HTML5 for iOS.

» Replace fixed CSS size units with variable.

» Evaluate if resized images still work – if not, can we remove them – if so, what effect on content?

» Evaluate meshing of HAT and app dev tool.

– Conditionalize the content to isolate the app-applicable content.

– Get app-applicable content into app database – how?

Content Import Details The following discussion uses ViziApps

Studio (www.viziapps.com).– Supports use of web services, SQL databases,

and Google Docs/Drive as app databases.

– Principles should be portable to other such tools.

Content Import Options We can either:

– Copy and paste the content by hand from our HAT to the database.

– Export conditionalized output to WebHelp or HTML5, then import the HTM files to Google Docs/Drive’s spreadsheet.

» But there’s no inherent structure for the import.

» Lots of HTM files…

– Export conditionalized output to Word, then import into Google Docs/Drive’s spreadsheet.

» Better since it has structure, one file...

The Process Looks complex but is surprisingly simple:

1. Create HAT template that mirrors structure of DB with hard returns after each template field and build tags as needed.

2. Create the topics using HAT template.

3. Output to Word.

4. Save as “web page, filtered” to remove excess Word codes, then rename as <file>_filtered.

The Process …

5. Select all and convert to table, using as many columns as in DB, select autofit to content and separate text at paragraphs.

6. Save, then close Word.

7. Open in Excel, save as CSV (MS-DOS), and rename as <file>_csv.

8. Open GDocs spreadsheet worksheet.

The Process …

9. Put pointer on 1st cell of 1st blank row where you want to start inserting the imported content.

10.Select File>Import, select the file, select Append Rows to Current Sheet, the Automatic separator character, and go.

Example – Starting Point

New Content In Flare Showing build tags.

In Word Output to Word, saved as “web page,

filtered” with hard returns after each field, and converted to a table.

In Excel Saved as CSV (MS-DOS).

Setting Up In GDocs The File Import dialog box settings.

Added to the Database In the GDocs spreadsheet.

And In the App

What About Graphics? Like this in the HAT content…

…Graphics? Not directly through an import because the

GDocs database doesn’t store the image directly.

Instead, image is uploaded to the cloud via Amazon S3, and the database stores the image URL – e.g. it’s a different process.

Tables? Here’s the progression…

Tables? … the progression…

Initial Assessment What will work:

– Text – Flows to meet the screen size.

– Variables – Because they’re text-only.

What will cause trouble:– Need to trim info.

– Items that are too wide or big:

– Items that use different controls in mobile vs. in a HAT – images, tables (lists in mobile), links.

Initial Assessment …will cause trouble:

– Items with no equivalent controls in mobile, like Flare togglers.

– SWFs – Must be inserted as images to get URL to Amazon S3.

– Snippets – Anything other than text will break.

Conclusions Using a HAT as a data portal to an app will

work with small amounts of text with no formatting.

Anything else is iffy – may not convert.– Or may not mesh with the associated object in

the app – e.g. use of image field to insert image rather than inserting it in a text paragraph.

Test and plan before you start…

Hyper/Word Services Offers…

Training • Consulting • DevelopmentFlare • RoboHelpViziapps • Flare/RoboHelp Mobile XMLSingle sourcing • Structured authoring

Thank you... Questions?

Hyper/Word Services978-657-5464

nperlin@concentric.netwww.hyperword.com