These new, lower prices for MadCap training make onsite and web-based Flare training even more affordable for you and your organization, and are clearer and easier to understand.

For example, previously, for a 3 day online training course for three people, the cost would have been $4950.00. Now the same 3-day online training course for three people would have a total cost of $3150, a reduction of more than 30%!

The new pricing structure also makes it easier to compare prices with my competitors, and I think you’ll see that I provide phenomenal training for unbelievably low rates.

People who have taken my courses love how I provide real-world knowledge of working with Flare on actual projects, so I have the skills and experience to help you make the best of your training experience.

Visit my training page to see the new price structure and to request more information.

Please join me on Thursday, May 16, 2013 for “Picture This: Optimizing Images with MadCap Flare and Capture,” a free webinar from MadCap. I will be giving a slightly adapted version of my popular MadWorld 2013 presentation. I received a lot of great feedback on this presentation, and I think this will be a popular webinar.

Register by visiting MadCap’s Live Webinar site.

If you have specific questions you’d like to see answered in the webinar, please leave a message in the comments.

Watch for an upcoming announcement about another free webinar I’ll be giving in June on content reuse — one of my favorite topics.

This post includes links to the slides, videos, and source code that I used in this presentation. This is meant both for conference participants as well as all blog readers, giving you a flavor of what was presented today at MadWorld.

Here is a link to the PowerPoint Presentation itself (10MB).

The Content

Now, for an abbreviated version of the presentation.

When trying to take all the information that is available about styling Flare output and distilling it into a 50 minute presentation, I decided to focus on four key areas:

• Modifying the HTML 5 skin
• Using webfonts
• Brief introduction to responsive layout
• Making dramatic changes to Flare output

Let’s start with modifying the HTML 5 skin file

Because this is a presentation rated for beginners and intermediate Flare users, I want to discuss each of the tabs in the skin editor. In Flare, the skin file is the bread and butter of how the webpage is construted. The skin file controls most aspects of the framework that displays your help content. It controls the logo, the icons in the toolbars, which tabs display, the colors of the tabs and icons, etc.

Open an HTML 5 skin in Flare, and you see the skin editor which has several tabs.

I won’t discuss each tab in great detail for three reasons:

1. This is pretty basic stuff and is covered extensively in the Flare help system.
2. Recent versions of Flare give you a lot of contextual help in the skin editor.
3. I want to spend the bulk of our time on some of the non-standard changes you can make.

The General tab

On this tab, I just want to point out that the term “Caption” means “HTML frame set page title.” In HTML 5 this isn’t used because instead the page title in the browser is the same as the topic that is being displayed. In standard WebHelp, this Caption is how you get a title on the frames et. In HTML 5 you can leave this field blank, and nobody will ever notice.

Flare 9 includes an option to keep or remove unreferenced images. This is because the skin file is one of the few binary files in Flare. When you add an icon (like a book icon, or a print icon, etc.) to Flare, the skin file stores the binary of the image in the skin file itself, rather than referencing the image from another location. If you add an image to the skin file, and later replace it, this option tells the skin file whether to keep the unreferenced, old image, or to delete it when you save the skin.

The Size tab

You can ignore this tab. Let your developers have control over how the help system looks when they call it.

The Setup tab

Two important things to note here. First, the Pane Position and Size options. Please choose either a left or right pane position. Nobody wants to see your tabs on the top or bottom of their help system.  The pane size is the width of the left navigation pane when it opens. Users can drag this to make it wider or narrower.

The Toolbar Tab

This tab lets you select which icons appear on the toolbar above the topic. If you aren’t connected to Feedback or Pulse, your only real options are Print, Expand All, and Remove Highlight. However, if you want you can add custom Javascript. Note, this isn’t for a specific button. This is for the toolbar page, so this javascript is loaded each time the toolbar is loaded. I haven’t found this useful yet, but if somebody uses it, I’d love to hear about it.

Also, you can click the new toolbar button button to add a new button to the toolbar. Clear as mud? I’ll show you how this works in just a minute.

The UI Text tab

Let’s jump down to the UI Text tab. This tab lets you modify the actual text that is displayed in the user interface. So, if you don’t want it to say “TOC”, you can easily change it to something else here, like “Contents”.

The Styles tab

Here is the meat of where you set up how your HTML 5 output looks.

This should feel familiar to those of you who use the advanced version of the CSS editor in Flare. This works the same way. Pick the item you want to style from the column on the left, and use the properties on the right to change the settings.

The top of this list is full of Feedback settings. I wish they were grouped together into a single top-level entry for those of us who don’t use Feedback, but just scroll down past them.

On this screen note that if you select Logo, you can use your own company logo instead of the default MadCap logo. Expand the Background section, and edit the BackgroundImage property.

Sometimes people ask whether or not they need to use an icon here. In HTML5, there is no Home button on the toolbar, so if you don’t include a logo, the users have no way of going back to your output’s start page. For this reason, I recommend you include something.

Look how items are grouped in the Styles list. Lots of the individual settings you want to create are hiding in these groups.

When I first started working in Flare, I didn’t realize that I can make settings for ALL THE ITEMS IN THE GROUP by making those settings on the parent node. I was opening each of these items and changing all the settings, trying to make them all identical. That is not necessary. Set the global properties on the parent node, and then just set the unique settings on the child nodes.

Let’s talk about editing the toolbar icons. First, note that in HTML5 there is only one image: “BackgroundImage”. In WebHelp, there were three different images, one for normal, one for hover, and one for click. HTML5 is MUCH simpler. You only have one image because there are no “hover” or “click” effects.

Ok, remember how we wanted to add a custom button? Let’s say I added a custom button to link to my Facebook page.

Notice that my custom buttons show up in the styles list, so I can add my own settings.

You need to set two things for custom buttons: (1) the BackgroundImage, and (2) the Click event. The background image is the button icon. The click event is javaScript code that is executed when users click on the button.

So that is your whirlwind overview of customizing the skin file itself. Lets move on to Webfonts.

Webfonts

What are webfonts, you ask? Webfonts are font files stored on a webserver, and they are called and used like any other online resource. They allow you to use non-web-standard fonts, with a reasonable assumption that most internet-connected users will be able to see the content in that non-standard font.

If a user loads a webpage using a webfont while not connected to the Internet (think government contractors, for example) the computer would be unable to locate the font resource, so it would fall back on the next font defined in the style sheet.

If you have a secure site, you will need to load your webfonts from a secure server, or users will get an error that some elements on the page are not secure. This is outside the scope of this particular discussion, but I wanted to point it out and let you know I found the solution by googling it.

Please be aware that you need to be very careful about posting fonts on a web server. Most fonts on your computer are covered by intellectual property laws, and you are bound by the terms of the license agreement. Most font license agreements do not permit you to post the font on a webserver. To be safe, I use fonts from a trusted source: Google Web Fonts, which can be found at google.com/fonts.

So, how do you use Google web fonts? First, visit their site, pick the font you want to use, and then review your collection. Then you add the proper code to either your CSS style sheet or your Flare MasterPage. I recommend using the CSS method, but you can do whatever works for you. Google gives pretty good directions on its site.

Once you have the URL, you paste it into the top of your CSS stylesheet.

Now, just use the proper name of the font in the “font-family” declaration. In my site, I set the font family for my heading 1 to be “Permanent Marker,” and the font-family of the body tag to “Noto Sans.”  Note that I used the body element, so that I didn’t have to add it to every individual child element. If I hadn’t done it in Body, I’d have to do it separately in <p>, <li>, <table>, <heading(s)>, as well as the MadCap-specific elements like drop-down text. When it is in <body> it is automatically inherited by all of <body>’s child elements.

The image on the right shows the rendered result.

So, there are a couple of caveats. Webfonts work best on, you guessed it, the web. Webfonts do NOT work in PDF targets. You need to use a local font for PDF targets. (You can set this either in the Print section of the style sheet, or you can use a standard font as part of the cascade in the font-family declaration.)

You can also try downloading the font from Google. (The fonts are free.) Install the font in Windows, and then open Flare and see if you can access the font in the CSS editor. (If Flare is open when you add the font to Windows, Flare won’t be able to use it until you restart Flare.) Due to limitations of the .NET framework that Flare uses, Flare is not able to recognize all fonts on your system, so this process may be hit or miss.

Ok. Let’s talk responsive layout, then.

Responsive Layout

First, I know that there is a technical difference between responsive layout and adaptive layout. Since this is a pretty basic introduction to the concept I use the term responsive, even though it might not be the most correct term for a more technical audience.

Websites that are responsive use specific sections of the CSS style sheet depending on the conditions of the viewport. This isn’t new to Flare users, since you’ve been using the Print section of the style sheet. This is just another section of the stylesheet, but rather than being based on media type (print versus online), these styles are used based on other properties.

Here is an example of a responsive website. Open the window full screen, then reduce the size of the browser. Watch how, as you drag, the elements on the page change. Some content disappears, some of it moves to a different location. This is responsive design in action.

Responsive layouts are supported by all current browser versions, though IE has only had support since IE9. All in all, about 86% of users world-wide are using browsers that support responsive layouts. But don’t worry. The responsive section of  the CSS is just ignored by those browsers, but all your standard settings will still work — it will be no different than they get today. And since responsive design is really geared for mobile users, or users of tablets and smaller devices, you don’t need to worry too much about the older IE support.

So, how does it work?

In your style sheet, add the following code:

For example:

There are a lot of properties you can pick from including min-width, max-width, device orientation (portrait vs. landscape), screen resolution, etc.

Here is a link to a site that gives you a good starting point for what types of queries you could use depending on devices you were targeting. Here is an abbreviated version of the CSS I used in my Flare project to move the content from two columns to one, depending on the viewport size.

Lets take a look at some of those styles side by side. In the left column you see the standard settings set in the main section of the style sheet. These are the styles that will be used when one of the media types does not match. (In this case, anytime the viewport is 911 pixels or wider. In my case, I have a wrapper that has a nice border around it, and I specify a size setting for the wrapper.

When the viewport width is between 475 and 910 pixels, I allow the wrapper to reduce in size. When the viewport is narrower than 475 pixels I remove the drop shadow, remove the border, remove the margin, and set the width to 100% of the viewport width.

I also have a two column layout. The standard layout is to have two columns that float next to each other. However, when the window with is below 910 px, the second column drops below the first column, so the users don’t have to scroll horizontally. When the width drops below 475, I ensure the column gets 100% of the width to make it easy to see.

The second column works just like the first, but in the standard view, it floats right.

Finally, let me show you one site I worked on where I radically changed the way HTML5 output looks.

Dramatic Changes to HTML5 Output

You are not necessarily limited to what changes you can make in the HTML5 skin file in Flare. If you are willing to get your hands a little dirty in the code, and make some post-production changes, it isn’t too hard to radically alter the way the help system looks. I had a client who wanted to dramatically alter the way HTML5 output looked, because they wanted it to more-closely match their website’s UI. The image at right represents as close as I could get making the edits in the HTML5 skin editor. However, this wasn’t exactly what they were looking for.

They wanted the search box on the left side of the screen, and their logo on the right side of the screen. The wanted corners to be more round, and they wanted text in the toolbar that is above the topic. The left column was to be a single tab, not multiple tabs, and it needed to look like a column header, not a tab.

The trick to making these changes was opening the default.htm file that was generated in the Flare output, and then making changes to that file. The changes to the styles and such in that file override any styles set in the style sheet, so I was able to get a very granular-level of control over the output’s details.

Here is what I was able to create for them with those tweaks to the default.htm file. This change requires the client to copy over the modified “default.htm” file into the output after each build, but the look and feel to the client was more important than that minor detail. The changes I made were for Flare V8. If the client were to upgrade to Flare V9, they would need to make different changes, because in Flare V9, MadCap modified the default.htm file. I’ll post my code modifications so you can see what they did, but please note that if you are using Flare V9, these modifications are not correct. They were for Flare V8 only.

Here is a screen shot of the source code. I’ve highlighted the sections of the document that I changed. It is also worth noting that I removed a bunch of extra code that wasn’t needed. Some of it looked like commented code that wasn’t removed before V8 was released. Other parts were for websites where the navigation panel was in a different position. So this is a simplified default.htm that only included the parts that V8 needed to display the page based on the configuration the client had chosen.

If you want to see this customization live, you can visit help.zebrazapps.com.

I hope this has provided you with some ideas on how you can modify your HTML5 output to match your company’s style. If you have questions or want clarifications, please let me know in the comments below.

This post includes links to the slides, videos, and other content that I used in this presentation. This is meant both for the conference participants as well as all blog readers, giving you a flavor of my presentation today at MadWorld 2013.

Here is a link to the PowerPoint Presentation itself (20 MB, includes videos).

The Content

In this presentation, I covered the following topics:

• How Flare and Capture work together
• Capture Features that integrate with Flare, specifically showing you how you can save time and money and reuse content

Flare and Capture Integration

If you haven’t been using Capture as part of your MadCap Flare workflow, now is the time to begin. Starting with version 9 of Flare, Capture is a free download for Flare customers. I have a couple of screen capture tools that I use, depending on what programs I’m working in, but when I’m working in Flare, I always use Capture. Those times where I used a different tool, then came back and wanted to edit the images, I was disappointed because I had to re-do a bunch of work.

Flare makes it easy to initiate screen captures. Depending on your settings, you don’t even need to open Capture or edit the file in Capture. I’ll show you more about this a little later. Capture allows you to edit your images, and you can edit an image from Flare by right-clicking on an image in a topic and selecting “Edit with MadCap Capture.”

Capture also makes it easy to use conditions and variables from your Flare project in the call outs of your Capture images.

Capture Features

I want to focus on how Capture can save you time and money, and show you how you can maximize your content reuse in Flare.

First, Capture saves you time because you only have to do the hard work of image editing once. You can capture a full-screen image, and then crop it down to a single menu item for use in your Flare project. If you ever need to re-capture that button, Capture remembers where the screen was that you captured,what size the capture was, and how you cropped it. So you can go to the updated page, and take the full-screen screenshot again, and Capture correctly crops the image down to the single menu item (assuming, of course that it hasn’t moved.)

Cropping and Re-capturing

When you crop images in Capture, the original image is never deleted. It is stored in a properties folder next to the final image. So if you come back a month (or a year) later and want to change the way the image was cropped, you can open the image in Capture and click the Crop button. The original image is shown, allowing you to change the way you cropped the image.

I’ve worked with developers who decided a week before product launch to change the whole color scheme of the application. I had hundreds of pages of documentation with call-outs — the works, but my work to re-capture the application was minimal because Capture did most of the hard work for me.

Here is a demonstration video (no audio) of how this works.

First, I capture a screenshot, then I crop it.

Next, I modify the style of the interface I’m documenting.

Next, I come back to Capture and re-capture the image.

This works the same way whether you do it the same day, or at any point in the future.

Resizing Images

Let me show you how you can re-size images in Capture. (Again, no audio).

We start with creating a new capture from Flare and editing it in Capture. When you have a screen capture open, you right click on the image and select File Properties. On the Image Effects tab, change the background scale to change the size. 1.0 represents 100%.  Point 5 (.5) is 50%, etc.

Blurring Sensitive Information

Capture lets you blur information that you don’t want people to read. This is helpful if you are working with confidential production content. What’s great about this, is like other Capture features, if you re-capture the screen again later, the blurring will automatically occur in the same location.

From the image toolbar, click  the Effects button, then select Blur Inside Effect Mode. (If you just choose Blur Effect Mode, then everything BUT the image you draw will be blurred.)

Drag the box around the area to be blurred. Right-click on the blurred area to change the Properties.  (I make sure there is no border around the box, and I change the Image Effects tab to have a Blur Factor above 10.)

Image Classes

When you use images in Flare, be sure to create different CSS classes for different types of images. This allows you to have similar images appear in a similar way.

For example, in this image, I have the exact same image from my project, but with different image classes. One is called “thumbnail”, and one is an image with no image class.

For the thumbnail image, you can see that you get a small version of the image that has a red border around it. This is a visual cue to let the reader know that they can interact with this image. Images in general, with no class, don’t get the border, they don’t get down-sized, and they don’t have any interaction when you hover or click.

Examples I have of image classes are: (1)thumbnail, (2) border, (3) specific sizes.

Image Profiles

Capture introduces the idea of profiles, or commonly used settings, that make capturing images faster and more efficient. This helps you get uniform images quickly and easily, directly from Flare.

For example, let’s say I want all my screen captures to be resized to 300px wide, and have a 1px black border and a drop shadow. I can save all these settings in a profile, and they will be automatically used for all images captured with that profile. Observe:

How does Capture save me money?

First, remember that time is money. Every time-saving feature is a money-saving feature.

Next, like I mentioned before, Capture is a free download with Flare 9. You don’t necessarily need another screen capture tool, so that is more money saved.

Third, if your help files need to be translated, you probably don’t use too many image callouts, because you don’t want to have to re-do every image that has a callout. In Capture, the callout information is stored as XML in a properties file in the same directory as the Capture image. Since this information is in XML, it is easy for MadCap Lingo to package that text for translation. What’s awesome is that before Flare builds a target, it re-builds each image in Capture, so if you change a setting in the XML, that setting will be reflected in your documentation the next time you either open the image in Capture, or rebuild your Flare output.

Finally, Capture saves you money by making it easy to reuse and single-source content.

Tell me more about single-sourcing images

One of my favorite Capture features is the ability to use variables in your image call outs. Since Flare re-builds the Capture images at every build, you can use target-specific variables in your callouts.

Watch this video to see how I use a variable to show the product release number, and how when the variable definition changes, the image automatically updates.

You can do the same thing for conditions. Any box or object on the screen can be conditionalized to appear in some outputs, but not others. You can also apply snippet conditions so that different versions of a picture show depending on which topic the image is placed in.

What about using the same image for Print and Online?

Capture allows you to have different settings for a single image, depending on whether your target is online or print.

Here are the settings I typically use (set in a profile) to differentiate print versus online images:

• Image Effects tab:
  • Background scale: 0.7 (70% of captured size)
• Format tab:
  • Format: PNG (this is for Online output types)
• Flare Print Format tab:
  • Enable Print Format: [checked]
  • Format: TIFF
  • Print DPI: 150

Be aware that by increasing the DPI, the resulting image WILL LOOK SMALLER because you are condensing 92 pixels per inch into 150 pixels per inch. This is a good thing for print for a couple of reasons. First, it makes the printed image look crisper, and second, images on a printed page typically don’t need to be the same size as images on a webpage.  You may want to play around with this setting to get a number that works for you, but for me, this has been a good balance. Then I can change it for individual images, as needed, or if I want different settings for a different type of image, then I create a different profile.

Common Questions

Often people have questions about how to use Capture, so I’ve included some answers in this post.

How do I create image captions for my images?

This is technically a Flare question, not a Capture question, but it is still a good one.

I create a container DIV in my Flare project CSS file. I call it DIV.CAPTION

I use the following settings:

Next, I create a paragraph style to number and style my captions. I use this setting:

Watch how I apply this div and paragraph class.

But what if my image numbers need to include the chapter?

Especially for printed output, you might want to use the chapter number in your figures (Figure 4.3, for example). You can easily do this in the print section of your stylesheet by changing the style:

For online help, you can do this differently, because you can use the different media sections of the style sheet. Note, however, that if these are done differently, depending on the medium, then you will have a hard time referencing them directly in the help text.

I hope this post has given you some ideas on how you can integrate Capture into your Flare workflow. Do you have questions, or do you want to share your favorite Capture feature? Please share, in the comments below.

Flare 7 has an impressive list of new features; it seems that the folks at MadCap have had a busy year. In just less than a year since V6 was released they have released the following new features. This list is NOT comprehensive, and is roughly ranked in order of how excited I am about these features (mainly because of my project needs and constraints):

• SharePoint integration
• Subversion support (native)
• Alias Editor redesign
• External resources
• Enhanced reports
• Review and Contribution work flow changes and enhancements
• Auto Suggestion
• Accessibility Enhancements
• Equations & Vector graphics
• Other Minor Tweaks

Let’s tackle these one-by-one. (Or you can use the links above to skip to the corresponding section, below.)

SharePoint integration

If you work in a large organization that uses Microsoft SharePoint for team collaboration, then you are going to be very excited about version 7′s support for SharePoint. This truly allows you to do multi-author collaboration in a way that just works.

With SharePoint integration, you can store your project on a SharePoint site, and Flare can connect to the SharePoint site. Every author in your organization can connect to the same SharePoint source files, and they can check out and check in files as they are working on them. Or you can have a local copy of your Flare project and create mappings that synchronize the content on your machine with the content on the SharePoint site (nice for people who have the need to author content when they aren’t connected to the network).

SharePoint integration means you can publish your files directly to the SharePoint site. (Thus SharePoint will automatically index your help output so when users do a search in SharePoint they will find help content from your project!)

You can even store custom templates on a SharePoint site, so that newly created content in Flare projects can be based on the template. (Another great feature for multi-author environments.)

If you are already using Flare V7, from the View menu, select SharePoint Explorer to get started. You will need to connect to your company’s SharePoint server, then set up your project.

I use SharePoint daily at my work, and we’ve had several projects where we are working with multiple authors, so I’m thrilled to see native SharePoint integration. This makes mutli-author collaboration so much easier!

Subversion support (native)

If you don’t have access to SharePoint, you can still get the benefits of a source control tool. Previously, if you wanted to connect to a Subversion (SVN) repository, you had to purchase a third-party plug-in. Contributors to the Flare forums often complained that the process was clunky, or they couldn’t get it to work.

Say goodbye to the third party plug-ins, SVN users, because Flare will now connect to SVN natively. When you bind your Flare project to a repository,you can choose Subversion from the list of source control providers.

You then give Flare the server and project path, and you are ready to go. This makes working with SVN so much easier, and I know lots of people who are going to be cheering for this new feature.

Alias Editor redesign

If you’ve worked with Flare to create context-sensitive help, you’ve had to work with the alias editor. On a first pass through the project, the old alias editor wasn’t too bad. Where things got hard was on the second and subsequent iterations of a project when you had to go back and locate the new topics and figure out what topics didn’t have an alias added to them. Then you had to locate the topic by its name and assign an alias to it. This was a painful process if you worked in a medium-size project. It was an absolute nightmare for people who were working in very large projects.

Well, you can wake up from the nightmare, because Flare V7 introduces a completely re-designed alias editor. This feature alone would be enough for me to upgrade to Flare V7.

One of the best new features is the auto generator, which will identify the topics in your project without identifiers, and create them for you automatically. This feature will save me hours and hours of work on large projects I’m updating.

This makes creating context-sensitive help push-button easy. Where once the alias editor was deemed an “advanced” topic (for good reason), now it is easy for even novice users to create, update, and work with alias files.

External resources

Flare now supports external resources through a new External Resources panel.

External resources are groups of files that you can share among Flare projects. These files can be any files that you can access from your computer (network files, local files, etc.) When you bring a synchronized file into a Flare project, it creates a two-way mapping, so any updates are changed in both the current project and other Flare projects that share the synchronized file.

For example, you may have an image of your product’s logo that you expect may change over time. You can use that image as an external resource. Then when you change that image, all projects will automatically get that new image the next time they build their targets.

Enhanced reports

Flare V7 includes some new reporting tools that will help you find and fix problems in your projects. Several of these reports were previously available using the external Analyzer application. Now they are native to Flare itself.

When you open the Reports editor, you’ll notice that the report options are now categorized into groups of similar reports, rather than a single long list of reports (as in previous versions). This new organization makes it easier to find the reports you are interested in. (Note that several reports are available in more than one category; if the report is in two categories but has the same title, then you can know that it is the same report in two places.)

New reports include:

• Applied Conditions
• Broken Snippet Links
• Files With Annotations
• Files With Changes (includes annotations)
• Files With Concepts
• Files With Condition Tags
• Files With Equations
• Files With Glossary Term Links
• Files With Images
• Files With Keywords
• Files With Language Tags
• Files With Multimedia
• Files With QR Codes
• Files With Snippets
• Files With Variables
• Topics With Concept Links
• Topics With Concept Links Missing a Concept
• Unused Snippets

Review and Contribution work flow changes and enhancements

MadCap has added several new features to Flare and combined the X-Edit family of tools into a single tool called Contributor.

Now when you send topics for review, you can track changes, like you can in Microsoft Word. You can see all the changes that the reviewer made and you can choose to reject or approve the changes.

For this functionality to work, your reviewers will need to upgrade to MadCap Contributor, which is not a free tool (that is a major downside, unfortunately), as the X-Edit family of tools does not support track changes.

From a functionality standpoint, it might be interesting for you to know that track changes keeps all annotations and changes in the source code. So when a reviewer deletes text, it is still in the document’s source code, it just isn’t displayed in the text editor. Once you accept the change, however, the deleted text is removed from the source code.

Auto Suggestion

Prior versions of Flare had a feature called IntelliSense, which frankly I found annoying, so I turned it off. Apparently I wasn’t alone, because in Flare 7, MadCap has removed IntelliSense from the product and replaced it with Auto Suggestion.

Auto Suggestion is like an intelligent version of IntelliSense. Like IntelliSense, Auto Suggestion monitors what you type and tries to help you with suggestions you may find useful. However, with Auto Suggestion, you only see select suggestions. There are default suggestions (like date and time options, to help you be consistent in the ways you enter and use dates), but you can add to this list. For example, you can add your company and product names, words you commonly misspell, or specific terms from your company’s style guide. When you begin typing these terms, Auto Suggest will offer its help. (IntelliSense, on the other hand, used ALL TEXT from your project to offer help, which really wasn’t helpful.)

In addition, Auto Suggestion will offer variables and snippets from your project, helping you single-source your content. There are some important limitations, however. For example, matching a snippet file will only happen if (1) you turn on snippet matching in the Flare options dialog, and (2) you begin typing the text exactly as it is in the snippet file.  I hope to see this feature grow in future iterations, so that if you have a partial match to words in the snippet file, or if key words are there, but in a different order, it will still show you the suggested text in the snippet file.

For example, if your snippet is the text “Parts and labor are not included”, I want the Auto Suggestion to match even if I start typing “Labor and parts”. As it is currently implemented, Auto Suggestion will only match the snippet if I start typing “Parts and labor”. So while this feature is a promising look into what is possible, it isn’t quite as useful yet as I hoped it would be.

However this is a step in the right direction, and I’ve found it especially helpful when I’m using a product name as a variable, since when I type in the product name, Auto Suggest gives me the option to replace the product name with the variable, with very little additional work on my part.

Accessibility Enhancements

There are a bunch of enhancements related to section 508 compliance (regarding accessibility of web pages and PDF guides for vision-impaired customers). WebHelp is now section 508 compliant, but you may see errors when you generate your output (for example, if you didn’t include ALT text for a graphic you inserted into your project). The target editors now have a separate tab called Warnings that allows you to set which warnings you want to see when your target is compiled, so you don’t have to see warnings for “errors” you know about and are ignoring.

Probably the coolest new feature related to accessibility is that when you insert or edit an image, you can set an image’s ALT text and make that ALT text apply in every place in the project that the image is used. This single-sources the ALT text for a given image, making the output more consistent, 508 compliant, and cheaper to translate.

Equations & Vector graphics

Flare V7 now sports a new Equations editor, so you can include mathematical equations in your projects. These equations are stored in vector format in the project, so Flare now supports vector graphics natively in the application. Insert your EPS, PS, and SVG graphics directly into your topics. When you generate your online output (WebHelp, etc.), the images are automatically converted to PNG (rastor-based) for increased browser compatibility. However, since vector-based images are supported in PDF output, the native vector images are used for PDF targets.

Other Minor tweaks

There are several minor tweaks that provide a big bang-for-your-buck that I think you’re going to like. They include:

New Paste functionality

In early versions of Flare, when you pasted content into the editor, you simply got a block of inline text with no formatting, no line breaks, or anything. I converted an entire project copying content from the source material and pasting it into Flare. A couple of revisions ago, Flare introduced a new paste dialog that appeared every time you pasted content into the editor. This was a big improvement, because you could now paste inline text, formatted text (retaining any HTML properties, for example), or unformatted text that retained paragraph breaks. In version 7 Flare makes pasting text into a topic even easier.

Now when you paste text into a topic, the text just appears as unformatted text with paragraph breaks. At the end of the pasted content, a little paste icon appears (like you might expect in Microsoft Word). When you click that icon, you see a window that allows you to change the way the text will be inserted into your topic. If you tend to paste text of a certain type, you can even change the default behavior. If you have spent time pasting text into a Flare topic, you’ll understand how exciting this little change can be.

Another paste enhancement in Flare 7 is that you can now paste an image directly into a topic. If  the item on the clipboard is an image and you paste it into a topic, Flare opens a dialog that asks you where you want to save the image (with the Resources/Images folder selected by default). Save the image in the project, and the image is stored locally in the project, and it appears in the topic.

Our friends, the authors of “Five Steps to MadCap Flare” warn that if you are pasting a large image, you will probably want to continue copying the file manually into the project, as Window’s clipboard isn’t known for optimizing image sizes. (Stay tuned in the coming days for my review of the Version 7 Supplement to “Five Steps to MadCap Flare.” I’ve seen it, and it is fantastic. But more on that in a future post.)

Table changes

Table style sheets have been enhanced, which will be useful for those who use table style sheets. Flare now has the option to sort rows by a column. There is a new toolbar button for inserting a table. There is functionality that allows you to convert text to tables and tables to text. Additionally, you can now modify a cell’s background color. You can find detailed information about these and other table changes on MadCap’s website.

XML editor modifications

In Flare V7 you’ll notice several changes in the XML Editor. First, Flare has removed the table blocks (or structure bars) from the left and top of the XML editor. You now interact with table rows and columns using the standard XML structure bars. This is a good change; it increases screen real estate, simplifies the editor for users, and gives you more options for interacting with rows and columns without having to click inside the table first.

Next, you should note that in V7, the XML Editor has two new buttons on the editor’s tool bar: insert snippet and insert variable. This is a minor but welcome change for people who insert snippets and variables, as there is less mouse movement needed to add snippets and variables to a topic.

QR Code support

QR codes are those funny box bar codes that you see popping up on signs, billboards, websites, and business cards. They allow people with QR-code-reading software on their mobile phone to scan the QR code to get information. For example, a link to my blog is embedded in the QR code to the right. Somebody with QR software can scan the code and be taken directly to my blog’s website in their phone’s browser.

I’m not exactly sure what the use case is for adding this to Flare, but I’m guessing that you could, for example, use a QR code as a context-sensitive help link. Then when users wanted help on a specific feature, they could browse the answer on their mobile phone, while keeping the application open.

Or the reverse case is also possible, in each topic, you can enter a QR code that will take users to a particular place in your product, or to your website for more information. I think this feature strikes my fancy simply because I have a phone that reads QR codes, and I’m always looking for a QR code to scan.

Preview in any target

In prior versions of Flare, when you clicked the preview button in the XML editor for a topic, you saw the preview based on the default target. Thus, if your default target was a PDF document, you always saw all previews as PDFs.

Now in Flare 7 you can select what type of target you want to preview in. Simply click the down arrow next to the preview button, and select your target (it will only show you targets you have added to your project).

What is cool about this is that since you are previewing a specific target in your project, any conditions you have set for that target will be automatically taken into account in the preview. (Of course you can always edit the conditions using the expression editor above the preview window, like you are used to doing.)

View Output in any browser

When you clicked the View Output button in prior versions, Flare automatically launched the default web browser. Now there is a down arrow next to the View Output button that lets you select any installed browser on your system.

This option is nice, because it lets you pick the browser to check any cross-browser compatibility issues.

Chrome support

Flare now supports local viewing of projects in Google’s Chrome browser. In earlier versions of Flare, Chrome’s security settings wouldn’t let it display Flare’s WebHelp output if the output was stored locally on the machine. Now Flare V7 supports viewing of WebHelp output in Chrome for both local versions and remote versions.

(I’m including this one specifically because Google Chrome is my default web browser, and two weeks ago when I was at a client site giving Flare training, I kept having issues when I would view my local output, and Flare would automatically launch Chrome, which wouldn’t display the WebHelp output.)

Summary

Flare V7 is a fantastic iteration of my favorite authoring tool. I’ve been lucky enough to be a beta tester of Flare V7 for a couple of months, and I’m excited that it is now live and available.

If you are wondering if you should upgrade, I think this article has provided several specific features that will save you time and money as you work with Flare projects. (And when you are justifying a software upgrade, those are two key components for the holder of the purse strings: time and money.) For example, the new alias editor will save you hours of time each time you need to update your project. The accessibility enhancements make providing content to vision-impaired customers much easier. The new reporting tools will save you time as you QA your own projects to ensure links and other content are properly working in the project, and will deliver a higher-quality product to your customers with less work on your part. The Auto Suggestion tool, if used properly, can help save you time and effort and can improve accuracy by helping you re-use content already in your project. It will also save on localization costs as you only have to localize snippets one time. If you use SVN  or SharePoint there are project backup and versioning enhancements that will secure the content in case your local machine dies. SharePoint and SVN integration also enhance multi-author environments, making your team more productive. The list goes on and on. If you can, I highly recommend an upgrade to Flare 7, and that is speaking as a help author, not as a Flare trainer.

So what changes are you most excited about in Flare V7? Are there any enhancements you are looking forward to that I missed? Are you already using Flare V7? (It’s been out for about two weeks already!) If so, what do you think about it? Answer these questions, or share other thoughts and ideas in the comments thread below.

I’m still working on a post to give you the details to help you decide if you should upgrade your existing Flare project to V6 (which I’ve been previewing for about a month), but alas, with work deadlines that post will have to wait until tonight.

So check back tomorrow for my Flare V6 review and upgrade guide!

Several times every week, I will be working on documentation, and I’ll use a feature in Flare (for example, conditional snippets), and I stop and literally say, “Wow. I love Flare.”

Now, you might expect a MadCap MVP (i.e. volunteer forum moderator) and a MadSkills Certified Trainer (which isn’t my day job) to like the company that produces the software. I’ll admit I have a bias. But I became a MVP because I loved the software enough to contribute to the MadCap forums regularly. Then I was invited to join the MVP group. And I didn’t set out to be a Trainer. MadCap actually contacted me, because they know how much I know about and like Flare, to see if I could pick up a training session that the other trainers were unavailable to take.

In any case, when I see a blog entry like this, I have to be even more grateful for the fantastic people in MadCap’s support department. In the post, MK Anderson talks about an unresolved customer service incident with Adobe that has been going on since August (4+ months!). And we’re not talking a complex custom feature request. We’re talking about getting a valid product key, even for a newly upgraded product.

I compare that to the customer service I’ve personally received from MadCap software, and the comparison is stunning. I have bronze-level support from MadCap. Yet, several times, MadCap has CALLED ME on the phone to better understand a technical problem I’ve reported. All my support requests have been resolved within a few days (though some of the resolutions were “we’ve filed a bug” — which is all you an say for some issues). MadCap Support doesn’t give up on difficult to find issues; once there was a bug being reported by a couple of customers, but MadCap couldn’t track it down. They worked with the few customers reporting the issue until we discovered repeatable steps to encounter the issue, then they fixed it that same day. Try getting that kind of support from Adobe.

So here is a shout out to all the fabulous people at MadCap Support. Thanks guys for a job well done! You are a big, big part of what makes using MadCap software a great experience.

(I’m turning off comments here; please comment on the other post, if you have something to say.)

1. Direct to PDF Output

This feature, alone, is worth the price of the Flare upgrade; it is by far, my favorite feature in Flare 4. When you are creating a target, you can select PDF Output as your target type. When you build your target, Flare creates a PDF file directly. You don’t need Word, Acrobat, or Framemaker installed. When you have a PDF target as your primary target, even document previews build in a small, single-topic PDF file so you can see how your document will render in the PDF output.

When I heard Flare would include PDF Output, I was worried that it wouldn’t be helpful; after all, in Flare 3, when I built a Word target, there was a lot of post-processing that I had to do to my Word output file before I could consider it “finished.” (In fact, I did this so often, I kept a list pinned to my cubical wall. Since switching to Flare 4, I’ve removed the list from sight because I don’t need it anymore.)

PDF Output in Flare 4 utilizes the new Page Layout functionality that I’ll discuss later in this article. However, simply put, PDF output with page layouts creates beautiful outputs that are ready for distribution or press. It is that good.

2. Built-in Review Functionality

The latest generation of MadCap products (including Flare 4, Blaze, and I assume we’ll see the same thing in Press when it is available) includes integration with MadCap X-Edit, a product that at the simplest level (read “FREE to download”) allows you to send your documents out for review. The reviewer installs X-Edit Review, and can open your documents, make annotations, and can submit the document back to you. (Currently this works via email.)

X-Edit includes two additional levels of functionality: at the medium level (called X-Edit Contribute), you can create topics that will be used in a Flare or Blaze project. This is a fantastic option for a company where all the project-level work is done by a single user, with many people creating content. You might, for example, have three writers and one publications manager. The publications manager can manage the entire project in Flare (or Blaze), which includes creating and modifying the style sheet, creating and editing targets, and building the project. The individual writers can simply install X-Edit Contribute and they can contribute to the project by creating new topics in the project without requiring a full Flare license. (I don’t know how this will be priced, in comparison to Flare. It will be interesting to see how that comes out.)

At the advanced level, X-Edit becomes a word-processor where you can create content independent of a Flare or Blaze project. Documents created in X-Edit can be saved in the native X-Edit format, as a Flare/Blaze contribution file, as anXHTML document (.htm extension), or as an XPS file.

Integration with X-Edit will probably be most useful to you at either the Review level or at the Contribute level. The ability to send out files toSME’s for review is fantastic, and for the most part this feature works pretty well. One gripe is that you can’t send multiple topics at the same time; you have to open each topic to send it out for review. On one level, I can see why this is frustrating, but on another level, this will encourage writers to send topics for review AS THE TOPICS ARE COMPLETED, rather than waiting for the project to be completed. Consider your SME’s as well, and you can see how this will be a benefit: it’s much easier to find time to review a single topic and send it back; it takes much longer to find time to review a hundred pages of topics.

If you are looking for a way to review content in your Flare project, then this is another reason why Flare 4 is an essential upgrade.

3. Page Layouts

Flare 4 includes a new feature called page layouts. If you’ve used programs like QuarkXPress, Adobe InDesign, or Adobe FrameMaker, you’ll be familiar with the concept of designing page layouts with frames for different types of content.

In Flare 3 and earlier, you were limited in how you could lay out content on a page. You could use headers and footers, and you could modify your content using CSS and divs, but divs didn’t translate properly into Word, and so you were pretty much stuck with a bland page layout. Not in Flare 4, which integrates page layouts for several print-based output types (like XPS and PDF).

Here’s how it works: you define your page size, and then you add blocks to your page where you want content displayed. You can draw a block for where you want an image to always appear, or you can draw a block for a header, footer, or content. You can create all kinds of interesting page layouts with columns, colors (including gradients), and all kinds of eye-pleasing options.

I love page layouts in Flare 4. They aren’t perfect yet, but dog-gonnit, they are cool, and they are evidence that Flare is moving in the right direction as it seeks to compete with some of the more established tools. You’ll be amazed at how good your Flare output can look, right out of the target builder.

4. Enhanced Reports

I’m an active member of the MadCap forums, and when MadCap released Analyzer, the response for Analyzer was great; it’s a nifty tool, but the biggest complaint seemed to be: “Why aren’t these reports available directly in Flare?”

Now they are. Or many of them are. Flare 4 will generate reports on the following conditions (and more):

• Absolute links
• Assigned CSH IDs
• Broken Bookmarks
• Broken Links
• Concept Links
• Duplicate Map IDs
• Duplicate Styles
• Duplicate TOC Items
• External links
• Topics not in Index
• Topics not in any TOC
• Topics not linked
• Undefined condition tags
• Undefined glossary terms
• Undefined styles
• Undefined variables
• Unused conditions
• Unused images
• Unused styles
• Unused variables
• Used Images
• Used Style Sheets
• Used Variables
• Variable suggestions
• …. and more

The reports selected for inclusion in Flare are useful and will help you better manage your content and project. MadCap walked a fine line: you aren’t going to get all the features that are in Analyzer in Flare 4, but you will get some of the most useful reports to help you identify the problems in your Flare 4 project, but of course MadCap is hoping that you’ll want to buy Analyzer as an add-on to help you automate the process of solving the problems you encounter.

5. Global Project Linking

Here we have yet another feature that, in my opinion, makes the upgrade to Flare 4 an absolute must-have: global project linking. Flare has been encouraging writers to single-source content from the very beginning, and provided several tools to do so (snippets, conditions, etc.). Those tools worked great for re-using content within a single project. (I even did a series on content reuse in Flare on this blog.)

Now Flare 4 takes this to the next level by allowing you to re-use content across projects. This means you can have a single style sheet for all your Flare projects, and you can have a single skin file and a single glossary file and a single set of master pages and page layouts…. really any file you can have in a Flare project can be added to the globally-linked project and it can be imported into any other Flare project.

Basically you create a new Flare project, and copy the “master” content into the new project. You will then import the “master” project into all the projects you want to have the shared content. There is a setting where you can re-import the content before a target is built, so you can always have the most recent changes to the master project in your linked project.

Now you can reuse content from every file type used by Flare across as many projects as you want. Finally!

6. Enhanced Help (Guides)

Flare 4 includes several (nine, actually) new user guides to help you with various aspects in using Flare. Located in the Help menu, the following PDF guides are ready for printing:

• Quick Guide
• Getting Started Guide
• What’s New Guide
• Key Features Guide
• Transition from RoboHelp Guide
• Transition from FrameMaker Guide
• Styles Guide
• Printed Output Guide
• Shortcuts

I’m a print-it-out, read-it-in-print kind of person. I really like these guides, because they give me something to read that helps me understand the application better. For me, a printed guide is a friendly way to become acquainted with a product, and for that reason I think that these guides will help novice and advanced users alike explore what Flare has to offer. At least, I’m enjoying them.

7. Other Output types

I already talked about the PDF output. Really, PDF output deserved its own section because it is so cool, but there are several other new output types that you also get when you upgrade to Flare 4. These other output types are:

• WebHelp AIR (requires Adobe AIR on client machines)
• XHTML Book
• XPS

You don’t even need to have Adobe AIR installed to create WebHelp AIR output. The AIR output includes all the skin settings for your WebHelp skin, so whether you publish in AIR, WebHelp, or WebHelp Plus, you get a similar looking output.

XHTML Book output allows you to create a pure XHTML output, which might be useful if you are using your content in a home-grown help system for your product.

XPS output works basically like PDF output, and looks pretty much the same. If your deliverable is a Microsoft product, XPS might be the best tool for you. If you are trying to reach a more general audience, you probably should stick with PDF output. XPS is cool, and it has some nifty features for turning pages (like a book) but I haven’t used it much because PDF meets my needs. (Plus, I’m working in a Win-XP environment that doesn’t have support, by default, for XPS.)

8. Cut and Paste

Back when I was new to Flare, when I created my first Flare project I had to decide between importing a FrameMaker file, and creating the project from scratch. I decided that the best way to learn Flare was to create the project from scratch. I soon learned, however, that pasting content into Flare (versions 3 and earlier) wasn’t pleasant. No matter what line breaks existed in the source content, it all pasted into Flare as one long paragraph with no line breaks. I spent a lot of time re-entering paragraph breaks into all my copied content.

Flare 4 includes dramatic improvements for copy and paste. Now when you paste content into Flare, you get a dialog with several options; you can paste content as:

• Paragraphs
• Blocks of paragraphs (for example, in a <div> tag)
• Inline text (the Flare 3 method)
• Tables (to paste tabular content into a new Flare table)
• Lists (either numbered or bulleted)
• HTML (which retains HTML formatting; this is a good option if you are pasting from Word or another word processing tool)
  

This is a MAJOR improvement, and works really well. Some might complain about an extra step when pasting content in Flare, but I’d much rather have the option to determine how I want Flare to handle my pasted content. Give me a choice any day!

This is a simple thing, but it makes editing in Flare much easier and more enjoyable.

9. Floating Styles Picker

Of all the things I’ve discussed so far in this article, this next feature is the one I use every day. Multiple times. To select a style from the style sheet in Flare 3, I had to take my right hand off the keyboard, reach for the mouse, drag the cursor to the styles panel, find the style I wanted, and click on it. I got used it it, but I didn’t realize how annoying it was until I discovered a small feature in Flare 4 that is a major usability enhancement: the floating styles picker.

In Flare 4, when you are editing a topic, if you want to select a style, you can press Ctrl + Shift + H (who knows why the letter H, but I’m not arguing), and a floating style panel is displayed. Now you can either reach for your mouse to find your style, or—get this—you can just keep typing, and the style will be selected for you! Is that cool or what?

Say for example, you’re typing along, and you want to change the current paragraph to the h3 style with the class “example”. Your styles panel has an entry for h3.example. As you are typing, all you do is press Ctrl + Shift + H, then type h3.ex and the style is selected. You press Enter, and the style is applied, and you can keep typing. No need to pull your hands off the keyboard.

Again, this is a simple thing, but it really improves the user experience. You will wonder how you created content without it.

10. Mini TOCs for Print-Based Output

If you’ve created Mini-TOCs for online output, you know how it works. You may have a topic at the beginning of a section that gives an overview of that section. Then you could add a mini-TOC that gives a list of links to the child topics to that section (based on the TOC location of that section). In Flare 3, this only worked in online output. Flare 4 allows you to create mini TOCs for both online and print output. So, for example, now your printed outputs can include mini TOCs at the beginning of each chapter or section of content. This makes your output look more professional, and replaces a feature I miss from Framemaker.

Other Enhancements

I’ve only covered ten of my favorite features in Flare 4, but there are tons of others. The MadCap publication “What’s New Guide” (see item 6, above) is more than seventy pages long, and describes all the new features and enhancements in Flare 4. Some of these enhancements include:

• Context Sensitive Cross References. If the cross reference is to the previous page, instead of saying “page x” the cross reference says “on previous page”, or if its on a facing page, the cross reference says “on facing page”. These smart cross references are a great enhancement.
• Glossary Headings. You can now customize the headings in your glossary, and you can break up your glossary entries by letter. I think it looks a lot nicer, as well.
• Hyphenation. Flare 4 includes an option to automatically hyphenate at the end of lines for print-based output. This is another simple, but nifty feature that improves the professional feel of the output.
• Indexing page ranges. Now when your indexed content spans multiple pages, the page ranges are shown as a range (11-13) rather than a list (11, 12, 13).
• Heading Level Variables. Heading levels in Flare 4 can now be used as variables; this allows you to show the first H1, or h2 on a page (perfect for headers and footers).
• Additional Image Formats. Flare now supports more image formats, including vector-based formats. Flare now supports the following image types:BMP, EMF, EXPS, GIF, HDP, JPG, JPEG, PNG, SWF, TIF, TIFF, WDP, WMF, XAML, XPS.
• Disable Styles. If you don’t use all your styles very often, you can disable the styles that you don’t want to display in the style editor. This doesn’t remove them; it just hides them so your style sheet is less overwhelming.
• Zoom. People have been clamoring for a zoom feature for a long time. Flare 4 includes an option to “zoom” by scaling the font size that is displayed in the XML editor. 
  

Version 4 is a great improvement to the Flare product. There are a ton of new features that will help you become more productive and make your workflow better and faster.

Watch this blog in the coming days for more detailed information about the new features that I love, and advice for how to make use of these features in the best way. I’ll also be including topics on how to migrate from Flare 3 to Flare 4, so I hope you’ll find that useful as well.

See you soon!

If you’ve been following the industry buzz lately, you’ve probably heard about Blaze. Now you have a chance to look at a beta release of Blaze version 1.

To sign up for the beta, first check out the info on Blaze from MadCap’s website. Then go here to sign up for the beta. Fill out the form, and MadCap will contact you with information on participating in the beta.

I’m downloading my copy right now. I’ll let you know how it goes.

Here is the link to Tom’s podcast post. He’s allowed me to embed the podcast here on my website, so you can listen to it from here if you’d like.

From Tom’s site:

Topics Discussed in this Podcast

* Flare’s XML editor
* Integration of Flare with source control
* How Madcap addresses the entire writer’s workflow
* Generating quality printed output from Flare
* Cross-platform shortcomings
* Thorough integration of CSS standards in Flare
* Flare’s CSS editor
* Flare’s learning curve — how long it takes to learn Flare
* Variables and snippets
* Indexes and insertion of index keywords within topics
* Implementing variables across the entire workflow
* Rewards from being a forum volunteer and moderator
* Madcap Software’s family feel
* Relevance of company size and location
* Mike Hamilton, vice president of product management
* Lingo and the single sourcing of content across images, topics, and outputs
* Lingo’s efficiency with localization
* Madcap’s responsiveness to blog comments and feedback
* Feedback Server and topic-based comments
* Balancing complexity with usability
* Madcap Analzer and Feedback Server
* Product/company image generated by blogs and user forums
* The online help market in 5 years
* Reasons for Framemaker’s stagnation
* Qualities of companies that will succeed in the future
* The best way to learn Flare