HTML5 output in Action!

This forum is for all Flare issues related to getting started and installing the application.
rob hollinger
Propellus Maximus
Posts: 661
Joined: Mon Mar 17, 2008 8:40 am

HTML5 output in Action!

Post 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.
Rob Hollinger
MadCap Software
Jeff Lowe
Propeller Head
Posts: 11
Joined: Tue Jun 27, 2006 1:55 pm
Location: Glendora, CA

Re: HTML5 output in Action!

Post 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.
crdmerge
Sr. Propeller Head
Posts: 248
Joined: Tue Dec 16, 2008 5:37 am

Re: HTML5 output in Action!

Post by crdmerge »

In the Cymphonix User Guide Overview topic, first paragraph, line 1: "administrators who are support both appliances." needs fixing.
jimg
Jr. Propeller Head
Posts: 5
Joined: Tue May 22, 2012 11:16 am

Re: HTML5 output in Action!

Post 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?
NorthEast
Master Propellus Maximus
Posts: 6354
Joined: Mon Mar 05, 2007 8:33 am

Re: HTML5 output in Action!

Post by NorthEast »

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.
markmetcalfemm
Propeller Head
Posts: 14
Joined: Fri May 18, 2012 8:48 am

Re: HTML5 output in Action!

Post by markmetcalfemm »

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

Ektron - Enterprise Web Content Management and Digital Experience Management Software
3lliot
Sr. Propeller Head
Posts: 105
Joined: Wed Mar 23, 2011 8:45 pm

Re: HTML5 output in Action!

Post by 3lliot »

The Zend one is producing some bizarre text effects in Chrome (screenie attached).
You do not have the required permissions to view the files attached to this post.
jbkalla
Propeller Head
Posts: 57
Joined: Tue Nov 06, 2012 11:53 am
Location: Denver, CO, USA
Contact:

Re: HTML5 output in Action!

Post 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.
kwag_myers
Propellus Maximus
Posts: 810
Joined: Wed Jul 25, 2012 11:36 am
Location: Ann Arbor, MI

Re: HTML5 output in Action!

Post 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/viewto ... =9&t=16161
"I'm tryin' to think, but nothin' happens!" - Curly Joe Howard
Thomas Tregner
Propeller Head
Posts: 56
Joined: Mon Apr 05, 2010 6:51 pm
Location: Charleston
Contact:

Re: HTML5 output in Action!

Post by Thomas Tregner »

Just switched some content from WebHelp to HTML5 today:
https://www.blackbaud.com/files/support ... r-help.htm
heal
Propeller Head
Posts: 44
Joined: Thu Oct 14, 2010 6:07 am
Location: Stockholm, Sweden
Contact:

Re: HTML5 output in Action!

Post 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
subquark
Propeller Head
Posts: 21
Joined: Mon Mar 18, 2013 1:11 pm
Location: Portsmouth, NH
Contact:

Re: HTML5 output in Action!

Post 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.
You do not have the required permissions to view the files attached to this post.
doc_guy
Propellus Maximus
Posts: 1979
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West
Contact:

Re: HTML5 output in Action!

Post 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").
Paul Pehrson
My Blog

Image
jcatlin
Propeller Head
Posts: 10
Joined: Mon Aug 23, 2010 7:21 am
Location: Waltham, MA
Contact:

Re: HTML5 output in Action!

Post 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.
“It’s not what you achieve in life that matters most, but who you become in the process of those achievements.” ~ Curtis Martin
Be well. Be grateful. Be positive.
jbkalla
Propeller Head
Posts: 57
Joined: Tue Nov 06, 2012 11:53 am
Location: Denver, CO, USA
Contact:

Re: HTML5 output in Action!

Post 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?
Ineffable
Sr. Propeller Head
Posts: 148
Joined: Mon Jan 15, 2007 3:08 pm
Location: Bay Area, CA

Re: HTML5 output in Action!

Post by Ineffable »

Thomas Tregner wrote:Just switched some content from WebHelp to HTML5 today:
https://www.blackbaud.com/files/support ... r-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.
NorthEast
Master Propellus Maximus
Posts: 6354
Joined: Mon Mar 05, 2007 8:33 am

Re: HTML5 output in Action!

Post by NorthEast »

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
Jr. Propeller Head
Posts: 1
Joined: Fri Oct 11, 2013 6:26 am

Re: HTML5 output in Action!

Post by luciagarcia »

This is my company's recent work in HTML5: http://documentacao.senior.com.br/.
Last edited by luciagarcia on Fri Sep 26, 2014 4:57 am, edited 1 time in total.
erinep23
Sr. Propeller Head
Posts: 124
Joined: Fri Jun 01, 2012 2:54 pm
Location: Austin, Texas
Contact:

Re: HTML5 output in Action!

Post by erinep23 »

Pamb10
Sr. Propeller Head
Posts: 126
Joined: Wed Feb 01, 2006 2:08 pm
Location: Florida
Contact:

Re: HTML5 output in Action!

Post by Pamb10 »

Does anyone have any examples of a help page that is integrated into a web app?
elizabethdot
Jr. Propeller Head
Posts: 1
Joined: Wed Aug 05, 2015 3:56 am

Re: HTML5 output in Action!

Post 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!
NorthEast
Master Propellus Maximus
Posts: 6354
Joined: Mon Mar 05, 2007 8:33 am

Re: HTML5 output in Action!

Post by NorthEast »

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.
moshe
Propeller Head
Posts: 45
Joined: Tue Apr 05, 2016 10:10 pm
Location: Jerusalem, Israel

Re: HTML5 output in Action!

Post 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 ... les|_____3 to move the search bar into the toolbar - it worked beautifully! Thanks alot, Dave!
Moshe Davis
Jerusalem, Israel
NorthEast
Master Propellus Maximus
Posts: 6354
Joined: Mon Mar 05, 2007 8:33 am

Re: HTML5 output in Action!

Post by NorthEast »

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 ... les|_____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.
moshe
Propeller Head
Posts: 45
Joined: Tue Apr 05, 2016 10:10 pm
Location: Jerusalem, Israel

Re: HTML5 output in Action!

Post by moshe »

Dave Lee wrote:
moshe wrote:
elizabethdot 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 ... les|_____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.

You are correct, Dave I missed that the request was for Top Nav, and I was working in Tripane.
It is too bad that there is no search bar proxy in Tripane. It would make Tripane search bar placement easier/more flexible.
Moshe Davis
Jerusalem, Israel
Post Reply