HTML5 output in Action!

[rob hollinger]

Show off your HTML5 output and we will feature it on our Customer Samples page.

http://www.madcapsoftware.com/products/ ... mples.aspx

Do you have a Flare HTML5 site that is publicly viewable? Do you want to show off your Skills to your fellow Flare users? Is your Site the Envy of your Fellow Techwriters? Show us!

Here are a few examples:

http://webhelp.madcapsoftware.com/flare8/Default.htm
http://help.cymphonix.com/

Post your site and show it off.

[Jeff Lowe]

Hi,
The Dotnetnuke sample has buttons in the header and I would like to learn how to add buttons in my online help. Can you lead me in the right direction? Does it require javascript in the in the toolbar tab of the skin? Is the header backgroung image a image map?

Thanks.

[crdmerge]

In the Cymphonix User Guide Overview topic, first paragraph, line 1: "administrators who are support both appliances." needs fixing.

[jimg]

Maybe I'm missing something, but when I look at the DotNetNuke site and View Source, I don't see anything that looks like the Flare HTML5 output. What part of it was done by Flare?

The Cymphonix website is clearly the Flare HTML5 web app with modifications to the HTML5 skin. I don't see any modifications that couldn't be done by modifying the skin using the Flare skin editor. But the DotNetNuke site uses an ASPX page, and I don't see an iFrame for displaying content pages. Basically I don't see anything from Flare. If Flare is being used, then there must be a huge amount of post-publishing work being done.

What I would like to know is what types of modifications can be made to the HTML5 web app prior to publishing. For example, I would like to move the search bar down into the toolbar to free up more space in the header for a banner. I can edit the Default.htm in the output web app and simply move the entire div for the search bar to the div containing the buttons, and everything works fine. But when I try to modify the file in the C:\Program Files (x86)\MadCap Software\MadCap Flare V8\Flare.app\Resources\WebHelp2\Desktop folder so that my changes will be there whenever I build the web app, I get an error when I try to build the web app.

I would like to be able to make changes to Default.htm prior to publishing, but it seems that there are a lot of dependencies between the Flare build process and the HTML structure of Default.htm. Does anyone know if MadCap has any guidance about what types of modifications can be made?

[Dave Lee]

Maybe I'm missing something, but when I look at the DotNetNuke site and View Source, I don't see anything that looks like the Flare HTML5 output. What part of it was done by Flare?

Yep, I had a quick look at the code too, and I don't recognise anything from a Flare HTML5 output.

[markmetcalfemm]

HTML5 version.
http://documentation.ektron.com/cms400/ ... ceWeb.html

Ektron - Enterprise Web Content Management and Digital Experience Management Software

[3lliot]

The Zend one is producing some bizarre text effects in Chrome (screenie attached).

[jbkalla]

HTML5 version.
http://documentation.ektron.com/cms400/ ... ceWeb.html

Ektron - Enterprise Web Content Management and Digital Experience Management Software

oh, man. I would love to be able to get WebHelp to have tabs instead of the annoying accordion 'tabs'! Nice site.

[kwag_myers]

I'm curious to know how deep these developers go to customize these skins? What I mean is, do they simply alter existing skins or do they get into the scripts that generate the skins? I can see that some are obviously existing skins with custom color schemes, which has been my approach so far. But I've run into this a couple of times now, where I wanted to tweak the skin, such as adding a property, but was unable to achieve the desired results.

Example: Change font color for Favorites accordion menu? http://forums.madcapsoftware.com/viewtopic.php?f=9&t=16161

[Thomas Tregner]

Just switched some content from WebHelp to HTML5 today:
https://www.blackbaud.com/files/support/guides/infinitydevguide/infsdk-developer-help.htm

[heal]

Hi, when EPiServer 7 web platform was launched in October 2012, we published all online help files in HTML 5.
Here is one example for EPiServer 7 CMS: http://webhelp.episerver.com/CMS/7.0/EN/Default.htm

[subquark]

. . . do they simply alter existing skins or do they get into the scripts that generate the skins? I can see that some are obviously existing skins with custom color schemes, which has been my approach so far. But I've run into this a couple of times now, where I wanted to tweak the skin, such as adding a property, but was unable to achieve the desired results.[/url]

I would think they are doing lots of work on the output. I've done this to have Flare help look like an app we are working on. I've made extensive changes to three CSS files, added images (like a magnifying glass in a search box), and then also edited the HTML on all pages. It isn't ideal but I am new to Flare. Some changes, like to the CSS, should be possible to have become permanent in future builds. The aditional CSS classes are not visible but are still compiled for the final project. However, the HTML changes do not carry over.

[doc_guy]

Here is a site that I customized for HTML5 output:

http://help.zebrazapps.com/

I set a bunch of style settings in the skin editor, but then to move the search box and modify the corners and add some extra text, I ended up modifying the default.htm file in the output. I was able to modify the necessary styles and objects in the default.htm file, so that was the only one I had to replace after each build. In fact, I stored the modified file in a separate directory (so it wouldn't get written over), then I created a bat script (Pretty easy, something you can do in Notepad) to copy the modified file to the output directory. Then I'd run a build and double click the bat file on my desktop and you have that particular output.

The style was created by the client; one of their main requirements was that it look decent on a small screen, but they didn't want to use the mobile skin.

If you look at the source of the default.htm page you can see all the edits I made post processing. (I also stripped a bunch of code out of this file that isn't needed if you aren't using a left-side menu.)


*Edited 4/3/13 to fix minor error in last paragraph ("right-side" changed to "left-side").

[jcatlin]

Our company is now officially making the transition from "documentation" to "information delivery" by producing WebHelp and Mobile help.

Our site isn't large or robust . . . yet. We decided to begin with our smallest project, then add from there. Our help system will grow tremendously, as our payroll system is already large and integrated with a web front-end. We are adding another system to the mix, too, to create one all-encompassing HCMS. Since all of our products are tightly integrated, we have chosen to create one (eventually huge) WebHelp site so that the myriad of cross-references will work flawlessly. Here is the link to our site:

http://www.mpay.com/webhelp/

We are already listed on MadCap's Customer Samples page.

One note you may find interesting: I figured out how to incorporate a fade-in/fade-out arrow that appears/disappears in the bottom right-hand corner to help the reader return to the top of the page. Check it out.

[jbkalla]

I've never gotten HTML5 (of either Google video or H264) to work. Whenever I try to build the video, I get an error something ike, "Missing file 'pthreadGC2.dll'. Please reinstall and try again."
Anybody ever heard of this?

[Ineffable]

Just switched some content from WebHelp to HTML5 today:
https://www.blackbaud.com/files/support/guides/infinitydevguide/infsdk-developer-help.htm

I like this. I notice you used an image for the box shadow. Why not use the box-shadow CSS spec? It's an HTML5 output anyway, so browser compatibility shouldn't be an issue. I think.

[Dave Lee]

This is an example of one of our current HTML5 projects:
http://desktophelp.sage.co.uk/sage200/2014/help.htm

The HTML5 skin includes a jQuery script to tweak the output (e.g. add the title in the header area, and add the page margins), but no post-processing is involved.

[luciagarcia]

This is my company's recent work in HTML5: http://documentacao.senior.com.br/.

[erinep23]

http://docs.acornsys.com/PA5G/2014.1/

[Dave Lee]

I've produced the template for this help, using the new HTML5 top nav and skin components.
The layout is handled using Foundation grids, so it's responsive and mobile friendly.

http://desktophelp.sage.co.uk/sage200/s ... d/help.htm

home-page.png

normal-topic.png

search-results.png

[Pamb10]

Does anyone have any examples of a help page that is integrated into a web app?

[elizabethdot]

[quote="Dave Lee"]I've produced the template for this help, using the new HTML5 top nav and skin components.
The layout is handled using Foundation grids, so it's responsive and mobile friendly."

- Hi Dave - I just wanted to say how well I think the site looks and thanks for sharing. I'm working on a site using the HTML 5 top nav so it's helpful to see some non-MadCap default styles out there.

Personally I'm currently just trying to figure out how to get the Search Bar out of its default place, which so far has been a bit of a rabbit hole for me!

[Dave Lee]

- Hi Dave - I just wanted to say how well I think the site looks and thanks for sharing. I'm working on a site using the HTML 5 top nav so it's helpful to see some non-MadCap default styles out there.

Personally I'm currently just trying to figure out how to get the Search Bar out of its default place, which so far has been a bit of a rabbit hole for me!

Thanks.

On that site, the search bar in the header is a search bar proxy (search skin component) on my master page - I've switched off the search bar in the top nav skin.

In fact, the only part of the top nav skin that is visible is the drop-down menu.

[moshe]

Personally I'm currently just trying to figure out how to get the Search Bar out of its default place, which so far has been a bit of a rabbit hole for me!

I used Dave Lee's instructions http://ukauthor.esy.es/SkinMods/Default.htm#Move-Search.htm%3FTocPath%3DCustomising%2520the%2520HTML5%2520skin|Examples|_____3 to move the search bar into the toolbar - it worked beautifully! Thanks alot, Dave!

[Dave Lee]

Personally I'm currently just trying to figure out how to get the Search Bar out of its default place, which so far has been a bit of a rabbit hole for me!

I used Dave Lee's instructions http://ukauthor.esy.es/SkinMods/Default.htm#Move-Search.htm%3FTocPath%3DCustomising%2520the%2520HTML5%2520skin|Examples|_____3 to move the search bar into the toolbar - it worked beautifully! Thanks alot, Dave!

Thanks!

That will work for the tripane skin.

If you're using top nav (as asked above), I just use the search bar proxy and switch off the search in the top nav skin.