HTML5 output in Action!

This Forum is for general issues about MadCap Lingo

HTML5 output in Action!

Postby rob hollinger on Mon Apr 16, 2012 4:20 pm

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
rob hollinger
Propellus Maximus
 
Posts: 659
Joined: Mon Mar 17, 2008 8:40 am

Re: HTML5 output in Action!

Postby Jeff Lowe on Wed Jul 25, 2012 8:34 am

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

Re: HTML5 output in Action!

Postby crdmerge on Wed Jul 25, 2012 9:26 am

In the Cymphonix User Guide Overview topic, first paragraph, line 1: "administrators who are support both appliances." needs fixing.
crdmerge
Sr. Propeller Head
 
Posts: 248
Joined: Tue Dec 16, 2008 5:37 am

Re: HTML5 output in Action!

Postby jimg on Wed Jul 25, 2012 11:57 am

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?
jimg
Jr. Propeller Head
 
Posts: 5
Joined: Tue May 22, 2012 11:16 am

Re: HTML5 output in Action!

Postby Dave Lee on Thu Jul 26, 2012 12:27 am

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5034
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: HTML5 output in Action!

Postby markmetcalfemm on Thu Sep 13, 2012 10:51 am

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

Ektron - Enterprise Web Content Management and Digital Experience Management Software
markmetcalfemm
Propeller Head
 
Posts: 14
Joined: Fri May 18, 2012 8:48 am

Re: HTML5 output in Action!

Postby 3lliot on Thu Oct 18, 2012 8:59 pm

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.
3lliot
Propeller Head
 
Posts: 88
Joined: Wed Mar 23, 2011 8:45 pm

Re: HTML5 output in Action!

Postby jbkalla on Wed Dec 05, 2012 6:34 am

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.
User avatar
jbkalla
Propeller Head
 
Posts: 40
Joined: Tue Nov 06, 2012 11:53 am
Location: Denver, CO, USA

Re: HTML5 output in Action!

Postby kwag_myers on Thu Dec 06, 2012 7:34 am

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
"I'm tryin' to think, but nothin' happens!" - Curly Joe Howard
kwag_myers
Propellus Maximus
 
Posts: 808
Joined: Wed Jul 25, 2012 11:36 am
Location: Ann Arbor, MI

Re: HTML5 output in Action!

Postby Thomas Tregner on Fri Jan 04, 2013 10:29 am

Thomas Tregner
Propeller Head
 
Posts: 56
Joined: Mon Apr 05, 2010 6:51 pm
Location: Charleston

Re: HTML5 output in Action!

Postby heal on Tue Feb 05, 2013 5:07 am

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
heal
Propeller Head
 
Posts: 44
Joined: Thu Oct 14, 2010 6:07 am
Location: Stockholm, Sweden

Re: HTML5 output in Action!

Postby subquark on Thu Mar 28, 2013 1:57 pm

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.
subquark
Propeller Head
 
Posts: 15
Joined: Mon Mar 18, 2013 1:11 pm

Re: HTML5 output in Action!

Postby doc_guy on Tue Apr 02, 2013 8:48 am

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").
User avatar
doc_guy
Propellus Maximus
 
Posts: 1778
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West

Re: HTML5 output in Action!

Postby jcatlin on Wed May 08, 2013 8:09 am

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.
User avatar
jcatlin
Propeller Head
 
Posts: 10
Joined: Mon Aug 23, 2010 7:21 am
Location: Waltham, MA

Re: HTML5 output in Action!

Postby jbkalla on Tue Sep 10, 2013 8:51 am

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?
User avatar
jbkalla
Propeller Head
 
Posts: 40
Joined: Tue Nov 06, 2012 11:53 am
Location: Denver, CO, USA

Re: HTML5 output in Action!

Postby Ineffable on Thu Feb 13, 2014 3:58 pm

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.
Ineffable
Sr. Propeller Head
 
Posts: 145
Joined: Mon Jan 15, 2007 3:08 pm
Location: morgan hill, ca

Re: HTML5 output in Action!

Postby Dave Lee on Fri Apr 25, 2014 3:46 am

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5034
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: HTML5 output in Action!

Postby luciagarcia on Mon May 19, 2014 11:43 am

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

Re: HTML5 output in Action!

Postby erinep23 on Fri Aug 29, 2014 1:06 pm

www.erinpassons.com
erinep23
Sr. Propeller Head
 
Posts: 120
Joined: Fri Jun 01, 2012 2:54 pm
Location: Austin, Texas

Re: HTML5 output in Action!

Postby Dave Lee on Thu Aug 13, 2015 8:28 am

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
You do not have the required permissions to view the files attached to this post.
Dave Lee
Master Propellus Maximus
 
Posts: 5034
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: HTML5 output in Action!

Postby Pamb10 on Wed Nov 04, 2015 6:23 am

Does anyone have any examples of a help page that is integrated into a web app?
User avatar
Pamb10
Sr. Propeller Head
 
Posts: 125
Joined: Wed Feb 01, 2006 2:08 pm
Location: Florida

Re: HTML5 output in Action!

Postby elizabethdot on Fri Mar 18, 2016 3:39 am

[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!
elizabethdot
Jr. Propeller Head
 
Posts: 1
Joined: Wed Aug 05, 2015 3:56 am

Re: HTML5 output in Action!

Postby Dave Lee on Fri Mar 18, 2016 7:36 am

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5034
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: HTML5 output in Action!

Postby moshe on Wed Apr 13, 2016 2:06 am

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

Re: HTML5 output in Action!

Postby Dave Lee on Wed Apr 13, 2016 7:52 am

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5034
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Next

Return to MadCap Lingo General Discussion

Who is online

Users browsing this forum: No registered users and 2 guests

cron