Page 1 of 2

HTML5 output in Action!

PostPosted: Mon Apr 16, 2012 4:20 pm
by 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.

Re: HTML5 output in Action!

PostPosted: Wed Jul 25, 2012 8:34 am
by 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.

Re: HTML5 output in Action!

PostPosted: Wed Jul 25, 2012 9:26 am
by crdmerge
In the Cymphonix User Guide Overview topic, first paragraph, line 1: "administrators who are support both appliances." needs fixing.

Re: HTML5 output in Action!

PostPosted: Wed Jul 25, 2012 11:57 am
by 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?

Re: HTML5 output in Action!

PostPosted: Thu Jul 26, 2012 12:27 am
by Dave Lee
jimg wrote: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.

Re: HTML5 output in Action!

PostPosted: Thu Sep 13, 2012 10:51 am
by markmetcalfemm
HTML5 version.
http://documentation.ektron.com/cms400/ ... ceWeb.html

Ektron - Enterprise Web Content Management and Digital Experience Management Software

Re: HTML5 output in Action!

PostPosted: Thu Oct 18, 2012 8:59 pm
by 3lliot
The Zend one is producing some bizarre text effects in Chrome (screenie attached).

Re: HTML5 output in Action!

PostPosted: Wed Dec 05, 2012 6:34 am
by jbkalla
markmetcalfemm wrote: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.

Re: HTML5 output in Action!

PostPosted: Thu Dec 06, 2012 7:34 am
by 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

Re: HTML5 output in Action!

PostPosted: Fri Jan 04, 2013 10:29 am
by Thomas Tregner

Re: HTML5 output in Action!

PostPosted: Tue Feb 05, 2013 5:07 am
by 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

Re: HTML5 output in Action!

PostPosted: Thu Mar 28, 2013 1:57 pm
by subquark
kwag_myers wrote:. . . 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.

Re: HTML5 output in Action!

PostPosted: Tue Apr 02, 2013 8:48 am
by 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").

Re: HTML5 output in Action!

PostPosted: Wed May 08, 2013 8:09 am
by 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.

Re: HTML5 output in Action!

PostPosted: Tue Sep 10, 2013 8:51 am
by 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?

Re: HTML5 output in Action!

PostPosted: Thu Feb 13, 2014 3:58 pm
by Ineffable
Thomas Tregner wrote: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.

Re: HTML5 output in Action!

PostPosted: Fri Apr 25, 2014 3:46 am
by 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.

Re: HTML5 output in Action!

PostPosted: Mon May 19, 2014 11:43 am
by luciagarcia
This is my company's recent work in HTML5: http://documentacao.senior.com.br/.

Re: HTML5 output in Action!

PostPosted: Fri Aug 29, 2014 1:06 pm
by erinep23

Re: HTML5 output in Action!

PostPosted: Thu Aug 13, 2015 8:28 am
by 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

Re: HTML5 output in Action!

PostPosted: Wed Nov 04, 2015 6:23 am
by Pamb10
Does anyone have any examples of a help page that is integrated into a web app?

Re: HTML5 output in Action!

PostPosted: Fri Mar 18, 2016 3:39 am
by 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!

Re: HTML5 output in Action!

PostPosted: Fri Mar 18, 2016 7:36 am
by Dave Lee
elizabethdot wrote:- 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.

Re: HTML5 output in Action!

PostPosted: Wed Apr 13, 2016 2:06 am
by moshe
elizabethdot wrote:
Dave Lee wrote: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!

Re: HTML5 output in Action!

PostPosted: Wed Apr 13, 2016 7:52 am
by Dave Lee
moshe wrote:
elizabethdot wrote:
Dave Lee wrote: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.