Moodle in English: Cleaning up the HTML code in Moodle 1.5

Cleaning up the HTML code in Moodle 1.5

由Martin Dougiamas發表於2004年 09月 7日(週二) 18:12

OK, so I'm getting serious about this display stuff now.

The first step on the way to templates will be to clean up the existing code in-place, making it valid XHTML as much as possible.

I've put some tools in CVS that will help us work on this.

The first is a new template called "standardxhtml". This theme sets the doctype to XHTML transitional, and also includes some useful links in the footer (to validate the current page).

The second change is a modification to lib/setup.php that will allow the above-mentioned validation services to have access to your site. By default it will allow them in as guest, but if you create a new user with the username 'w3cvalidator' then they will be logged in as that user. Obviously you can give that user any privileges you like to access any pages.

So, if you have access to CVS, please find a page that needs looking at, fix any bodgy old HTML tags in there and check it in. Please work on one file at a time to minimise conflicts, since there will be several people (myself included) climbing all over this thing. Also, please avoid the temptation to add new features along the way, this is just a clean up.

I will write separately about some guidelines for the actual tags to use.

評比平均分數： -

Re: Cleaning up the HTML code in Moodle 1.5

由John Papaioannou發表於2004年 09月 7日(週二) 18:24

Suggestions for the guidelines (some of the things I say may be already stated in the XHTML specs; I don't know if they are should-do or must-do, I just do wink

Never use <b> and <i>, use <strong> and <em> instead
Include at least a <tbody> tag in each table
If you 're going to be putting header columns in tables, also use a <thead> tag
Always use alt="" in <img /> tags
Don't forget to properly slash-terminate tags like <br />, <hr />, <input ... />
Always put attributes in quotes (id="someid", not id=someid)

Jon

評比平均分數：Useful (1)

Re: Cleaning up the HTML code in Moodle 1.5

由Andrea Bicciolo發表於2004年 09月 7日(週二) 19:15

Hi, could it be the occasion to eliminate the few <font> tag still in the code?

And what is your opinion about the optimization of the actual styles.php theme files, for instance drastically reducing the number of style definitions?

評比平均分數： -

Re: Cleaning up the HTML code in Moodle 1.5

由John Papaioannou發表於2004年 09月 7日(週二) 19:47

The font tags are the most prominent example of what will surely be removed, as they are not XHTML compliant.

I believe optimizing the styles would fall into the "don't insert new stuff" category as Martin puts it. It might be better to just achieve XHTML compliance without touching the CSS, and only when the move to templates is made rewrite the XHTML and the corresponding CSS to be more "slick".

Of course I 'm all for them being slick. wink

評比平均分數： -

Re: Cleaning up the HTML code in Moodle 1.5

由Samuli Karevaara發表於2004年 09月 7日(週二) 20:26

Are you thinking of just removing the font tags, while breaking nothing still switching some (quite many, in fact) text elements to a different look?

Or are you thinking of inserting the font tag customizations in a style="" parameter to achieve XHTML compliance while not changing the look of some text elements?

As for the styles: there is so many of them, that it's a pain to figure out what shows where. A screenshot of some of the more complex screen with text overlays and arrows saying "this is the style names xyz" would be a killer! At least when thinking over the minimal set of styles to achieve the same (and better, without the font tags) level of customizability, a visual guide of this sort would be nice.

評比平均分數： -

Re: Cleaning up the HTML code in Moodle 1.5

由John Papaioannou發表於2004年 09月 7日(週二) 21:18

I don't know what Martin is thinking, and he said he will publish some more detailed guidelines, so let's wait for that.

Personally I think both ideas have merits (leaving the text unstyled is a very good visual reminder you need to style it, and making the decision how to style it may be better left for when we have accumulated more data), but since there are people using 1.5 development on live sites I guess it will go the other way around.

As for the screenshot you mention. Search the forums for "chris pederick web developer toolbar" to find out how you can get this for free any time you like! wink

(tip: IMHO, switching to Firefox is a no-brainer if you are a web developer)

評比平均分數： -

Re: Cleaning up the HTML code in Moodle 1.5

由Martin Dougiamas發表於2004年 09月 7日(週二) 21:32

Anyone using the 1.5 version for production sites during this transitional period would be very foolhardy! We will have to be quite ruthless in ripping out the weeds so expect the unexpected.

評比平均分數： -

Re: Cleaning up the HTML code in Moodle 1.5

由Samuli Karevaara發表於2004年 09月 8日(週三) 15:18

So cool, thanks for the tip! I'm constantly amazed of what Firefox can do for a developer. Previously I've been using "View Selection Source" from the context menu, which is also very handy. Combined with ctrl+click to select a table cell and then viewing the selection source gives out details nicely too.

One thing that the Display ID & Class Details misses is the font tags (because they are not id or class

), so getting rid of them is very helpful. Using the Web Developer plug-in tool CSS > View Style Information gives a full path of html elements leading to the element under the pointer. This way I can spot if the style is inside a UL for example, where it can behave differently than elsewhere.

You've maybe seen this, but if not, check out http://texturizer.net/firefox/tips.html.

評比平均分數： -

Re: Cleaning up the HTML code in Moodle 1.5

由Dennis Daniels發表於2004年 09月 13日(週一) 07:49

Copy paste via the keyboard works with Firefox .93! whhooot!

Dennis

評比平均分數： -

Re: Cleaning up the HTML code in Moodle 1.5

由David Scotson發表於2004年 09月 7日(週二) 21:23

If you install Firefox and its Web Developer Extension then I believe you can do this yourself.

It has an option called Display ID & Class Details that will show you that information for whatever web page you are viewing.

This page has a screenshot that shows you the effect.

評比平均分數： -

Re: Cleaning up the HTML code in Moodle 1.5

由Samuli Karevaara發表於2004年 09月 7日(週二) 19:06

How about removing all the font tags? They are quite "in the way" when building custom themes. At least I don't know a way to override them from CSS.

I can volunteer to do some of this kind of clean up, but as removing the font tags changes the look of the sites, should some, if all, of those tags be replaced with css styles/classes? If so, then maybe there should be some discussion of what and where?

評比平均分數： -

Re: Cleaning up the HTML code in Moodle 1.5

由David Scotson發表於2004年 09月 7日(週二) 20:16

It would be good to try to follow the guidelines for HTML compatible XHTML given here:

http://www.w3.org/TR/2000/REC-xhtml1-20000126/#guidelines

I think they are given roughly in order of importance, though C.12 (unencoded ampersands) always seems to trip people up.

評比平均分數：Useful (1)

Re: Cleaning up the HTML code in Moodle 1.5

由Gustav W Delius發表於2004年 09月 9日(週四) 01:19

Martin, you suggest: "Please work on one file at a time to minimise conflicts". That appears to be a very inefficient way of getting rid of the glaring problems like upper case tag names which occur in almost 2300 files! Working on 2300 files individually is going to take ages!

評比平均分數：Useful (1)

Re: Cleaning up the HTML code in Moodle 1.5

由koen roggemans發表於2004年 09月 9日(週四) 07:20

Does this cleanup includes languagefiles too? (there are already 450 files in Dutch alone)

評比平均分數： -

Re: Cleaning up the HTML code in Moodle 1.5

由Martin Dougiamas發表於2004年 09月 9日(週四) 17:55

What I really meant by that is to work on things quickly and then check them straight in, rather than work on a whole lot of stuff for a week and then try to check it in.

What I'm mostly talking about here are the files with HTML mixed among PHP files - these are much fewer than 2300.

Most of the files you counted are language files. These will have to be fixed, but it makes sense to use search and replace to fix those more quickly, perhaps one language at a time.

I know I said I'd post some guidelines and I will, I've just been snowed under. The list David pointed to is a good start, but there's more. Hopefully tonight.

評比平均分數： -

Re: Cleaning up the HTML code in Moodle 1.5

由Mike Churchward發表於2004年 09月 9日(週四) 05:41

Wow. That's painful.

I think I beat 'course/category.php' (and all asociated lib functions) to death. The only elements that weren't coming up compliant were user entered elements (course summaries, etc.).

mike

評比平均分數： -

Re: Cleaning up the HTML code in Moodle 1.5

由Gustav W Delius發表於2004年 09月 9日(週四) 16:15

We will have to have a textfilter that filters HTML to XHTML in order to deal with the user entered HTML in the database. Does anyone know the perfect filter for this purpose?

評比平均分數： -

Re: Cleaning up the HTML code in Moodle 1.5

由Antti Boman發表於2004年 09月 9日(週四) 17:58

I don't know about perfect filters, but W3C's HTMLTidy ( http://www.w3.org/People/Raggett/tidy/ ) should do the trick. There's also a project to make it a library, which then could be used in PHP, so check out http://tidy.sourceforge.net/

評比平均分數： -

Re: Cleaning up the HTML code in Moodle 1.5

由Hannes Gassert發表於2004年 09月 9日(週四) 20:22

Tidy could not only potentially be used in PHP some day, it already is.
See http://pecl.php.net/ and http://www.coggeshall.org/oss/tidy/, it's already in productive use in some CMS.

But what's Moodle's policy about relying on such non-standard extensions?

Another possibility would be to use DOMDocument::loadHTML somehow.. but that probably wouldn't be too reliable.

評比平均分數： -

Re: Cleaning up the HTML code in Moodle 1.5

由Mike Churchward發表於2004年 09月 9日(週四) 20:23

Its even a little more complicated than that. The user-entered HTML could be XHTML compliant when entered, but end up non-compliant where its inserted. For example, in the category page where the courses are listed, the summaries are listed between <p></p> tags. If the summary starts with a <table> tag, this will be non-compliant (tables tags can't be between <p> tags).

We will have to redesign what goes around potential user code as well.

mike

評比平均分數： -

Re: Cleaning up the HTML code in Moodle 1.5

由Hannes Gassert發表於2004年 09月 9日(週四) 21:09

Full redesign is certainly necessary, and running the final output through a (caching) Tidy filter should guarantee XHTML compliance even in the most unpredictable cases.

評比平均分數： -

Re: Cleaning up the HTML code in Moodle 1.5

由Hannes Gassert發表於2004年 09月 23日(週四) 07:02

I hacked up a little 'tidy-on-write' filter that runs everything from the user that goes into the database through tidy first, see http://moodle.org/bugs/bug.php?op=show&bugid=1971 (or here)
I'd be glad if somebody could test & give feedback on this, it's clearly rather experimental atm, but I'd very much like to see this become mature.

Regards,
Hannes

評比平均分數： -

Re: Cleaning up the HTML code in Moodle 1.5

由Hannes Gassert發表於2004年 09月 23日(週四) 20:19

Quickly built a little filter, too, and filed a bug for this issue, see http://moodle.org/bugs/bug.php?op=show&bugid=1989.

評比平均分數： -

Re: Cleaning up the HTML code in Moodle 1.5

由Martin Dougiamas發表於2004年 09月 23日(週四) 21:01

I've already put this in CVS, thank you, because this is the way to go in my opinion.

評比平均分數： -

Re: Cleaning up the HTML code in Moodle 1.5

由David Scotson發表於2004年 09月 10日(週五) 17:09

A related task that could be usefully carried out at the same time is to set all the colors in config.php to 'green'. All the areas that aren't overridden in the CSS file will show through as deep forest green and can easily be spotted.

I've done this before and many of the green areas can be easily fixed by specifying the color in the CSS with the appropriate class selector, as CSS will trump the HTML written out based on the config file. However, there are some areas that don't have a suitable id or class, and one would need to be added to allow CSS to target them. If these were fixed then it would be possible to entirely switch themes via CSS and use config.php only to support older browsers.

This will A) allow for making the themes better and more accessible and B) also allow user selectable themes.

評比平均分數： -

Re: Cleaning up the HTML code in Moodle 1.5

由Ray Kingdon發表於2004年 09月 12日(週日) 04:06

I've just put an xhtml version of the dialogue module in CVS. Well, actually my first stab at it wink

. I'm using the (wonderful) Web Developer Toolbar in Firefox. The option I'm using is Validation|Validate Local HTML. (I'm running a development system on localhost using the xhtml theme.) This works well and comes back really quickly.

(I started with Dialogue as it's small and written fairly recently when xhtml was in the wind.)

However, I'm just getting loads of moans from the standard moodle calls which makes spotting the moans about my code kinda hard. I'm not moaning but perhaps suggesting which bits of code need to be xhtml'ed first big grin

評比平均分數： -

Re: Cleaning up the HTML code in Moodle 1.5

由Dan Marsden發表於2004年 09月 13日(週一) 10:26

Hi All,

Am I right in assuming that the following:
<FORM TYPE=""....>
is incorrect XHTML, and in fact XHTML is all in lower case?

評比平均分數： -

Re: Cleaning up the HTML code in Moodle 1.5

由Gustav W Delius發表於2004年 09月 13日(週一) 14:29

That is correct, see http://www.w3.org/TR/2000/REC-xhtml1-20000126/#diffs. I converted a large part of Moodle to this convention already over the weekend and also put in some of the required quotes around attribute values and supplied the end / for empty elements. This amounted to thousands of replacements, don't be surprised if I made a mistake somewhere.

評比平均分數： -

Re: Cleaning up the HTML code in Moodle 1.5

由Ray Kingdon發表於2004年 09月 13日(週一) 15:55

Heroic work, Gustav. Now wished I waited a day or so before looking at the Dialogue code... big grin

Great job,
Ray

評比平均分數： -

Re: Cleaning up the HTML code in Moodle 1.5

由Gustav W Delius發表於2004年 09月 13日(週一) 17:14

Hi Ray, the work you did on the Dialogue module was much more thorough than what I did.
But yes, testing pages should be much easier now because there will be fewer trivial problems.

評比平均分數： -