Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

What would be a recommended tool (works on Linux) for managing included HTML fragments like shared footers, in a directory of static HTML serving as a clickable UI prototype?

I want to be able to serve the prototype from a web directory of static content (without server-side dynamism), while easily managing the shared elements of navigation, headers, footer. Maybe even handle boilerplate page layout.

Inspiration: this question was inspired by my experience trying out the Handcraft prototyping webapp. It's HCML templating language that permit reuse of HTML with "parts" (includes) and "layouts" (masters).

Basically, something like the Dreamweaver "library segments. Something that inserts snippets (like Komodo) is not sufficient - unless it has the power to simultaneously update all files where that snippet was previously inserted.

I'm imagining something like this in my static HTML:

<html><body><div id="include_footer">The Footer</div></body></html>

And when I edit "The Footer" to read "The Better Footer" and run this tool, then other files containing a div of id="include_footer" will be updated to the latest footer.

share|improve this question
    
Consider using a JS based include system. It allows you to pull in the fragments via JS rather than having to rely server-side. jQuery has a few plugins just for that. –  DA01 Dec 12 '11 at 18:11
1  
Like ScatterJS? Maybe that would be sufficient. I'll give it a try. –  Graham Dec 13 '11 at 8:52
    
Does it have to be truly static HTML? Or can you allow client-side templating? (javascript?) –  peteorpeter Dec 16 '11 at 18:09
    
Well, I'm building a prototype as static HTML - adding templating languages, even evaluated by JavaScript, would detract from the clarity of plain HTML. –  Graham Dec 19 '11 at 11:07
    
Ahh, I see. I almost never view the plain HTML source - 99.9% of the time I inspect the rendered code in webkit inspector or Firebug - but I could see that being important in some development processes. –  peteorpeter Dec 21 '11 at 16:32

3 Answers 3

up vote 3 down vote accepted

I'm now using Jekyll. It does exactly what I asked for in the question. Basically, it compiles my prototype from reusable parts into a serve-able static HTML form.

Jekyll supports both includes ("snippets") and layouts ("masters").

And it compiles the templated files to complete HTML files for serving up as a static prototype under Apache or even just from filesystem. Anything that's not templated is copied over unchanged.

It will even re-compile parts of the prototype as I make changes to it, eliminating the manual re-compile to preview.

share|improve this answer

Use an HTML editor like Komodo that supports Snippets. I've got Komodo set up to allow me to insert snippets based on the Foundation Framework. So instead of having to type out Div/container, div/row, div/four columns, etc., I can just double-click a snippet, possibly enter variables if I've set up the snippet that way, and boom.

Also, I'm assuming since you reference includes that you're building PHP pages. Install MAMP (or LAMP or WAMP, whatever OS you're using), and make sure you're saving your pages to your *AMP htdocs space. Since you've now got a local server implemented, you can use that to 'load' the end PHP page that is generated based on your code.

share|improve this answer
    
Komodo will insert snippets, but if you change the snippet it won't change all the pages that use it. That's the idea of an include - it enables you to reuse a footer or other element and make changes to it in one place instead of every file. –  Graham Dec 13 '11 at 16:45
    
So I'm running MAMP. I coded a page, took a section of it out and replaced it with <?php include("header.php");?>. Created the appropriate heaader PHP file and opened the index.php page in Chrome (it's hosted on my MAMP localhost server). It's displaying the includes as expected. So probably I'm confused about what you're trying to do... –  Mike Earley Dec 13 '11 at 19:10
    
I'll rewrite the question in the morning to make it clearer. The issue is that <?php include("header.php");?> isn't valid HTML. Prototype needs to be .html not .php. Tool would need to manage shared snippets of HTML across multiple pages. –  Graham Dec 14 '11 at 19:30

If I understand what you are trying to do, you might look at a template system like Moustache. What's great about it is you can start with client-side templates, then migrate the same templates to the server-side if and when you actually implement the protoype.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.