I am being handed down responsibility over a site. It has static content.

My goal: for the client to be able to edit their own text content at will- in already existing html pages.

This is a little different from simply seeking a good templating system, there will not be new pages, this is not really a "templating system" problem- which suggests many pages controlled via one template- this is about making static content editable, but keeping it static.

Here's what I've done in the past to solve this task:

I am thinking a good way to start planning for a project (after checking if it's already been done, and well)- is to plan how you want the users (webdesigner) to interact with the software.

Q:As a webmaster, How would I want to allow a client to edit already existing webpages?

A: What's easiest for me. I just want to grab their documents and where it says :

<h1>about us</h1> <p>This is the about us page. Welcome.</p>

I want to open it in vim and make it this:

<h1 class="_EDITABLE_">about us</h1> <p class="_EDITABLE_">This is the about us page. Welcome.</p>

or:

<div class="_EDITABLE_"> <h1>about us</h1> <p>This is the about us page. Welcome.</p> </div>

And let the backend software worry about it from there- Which I may end up coding, again. It's simple if you get your html encoding/char escaping right.

I've solved this kind of thing in the past by simply doing this to the above example:

<!--_START_EDITABLE_--> <h1>about us</h1> <p>This is the about us page. Welcome.</p> <!--_END_EDITABLE_-->

And then my backend software opens the stuff up with js htmlarea, etc, and lets user edit the text area. If no target was defined (by absence of _END_EDITABLE_ or whatever) then the page is inspected for js, if none is fount, then you can edit the whole body tag content. It worked well.

This kind of process has the advantage of keeping all the content in the html document. It would provide a webmaster with this: if you inherit a site, you just add class="YOURHOICE" to any elements you want the client to edit, and voila-done.
The other cool thing is that if you move the site to another host, your content is still valid static html.

HTML Template could possibly fit here.. It has the ability to define a "default" value.. so.. the above example could be turned to this:

<h1> <TMPL_VAR NAME=H1 DEFAULT="about us"> </h1> <p><TMPL_VAR NAME=P1 DEFAULT="This is the about us page. Welcome."></p +>

This is a potential pain in the @55 with multiple paragraphs, etc. Also, if you move the site to another host, not configured, the thing breaks.

Any suggestions about some modules, projects I should be looking at (that fall within my needs)?

Also.. What is a good way to target a html element without violating w3c guidelines? I thought adding a class name was alright, comments defining an excerpt of html might suck, because certain wysiwyg editors change them or take them out, not reliable. I want someone using dreamweaver, notepad, or frontpage (gag) to likely not mess up the target areas defined.

I've takena look at HTML::EasyTemplate, but I'm not sure this is a system via which I would still have valid html- and the content still reside in the document?


In reply to Making static html documents editable, but still static. by leocharre

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":



  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.