Cleaning up the HTML code in Moodle 1.5

Cleaning up the HTML code in Moodle 1.5

από Martin Dougiamas -
Αριθμός απαντήσεων: 29
Φωτογραφία Core developers Φωτογραφία Documentation writers Φωτογραφία Moodle HQ Φωτογραφία Particularly helpful Moodlers Φωτογραφία Plugin developers Φωτογραφία Testers
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.
Μέσος όρος βαθμολογίας: -
Σε απάντηση σε Martin Dougiamas

Re: Cleaning up the HTML code in Moodle 1.5

από John Papaioannou -
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
Σε απάντηση σε John Papaioannou

Re: Cleaning up the HTML code in Moodle 1.5

από Andrea Bicciolo -

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?

Σε απάντηση σε Andrea Bicciolo

Re: Cleaning up the HTML code in Moodle 1.5

από John Papaioannou -
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
Σε απάντηση σε John Papaioannou

Re: Cleaning up the HTML code in Moodle 1.5

από Samuli Karevaara -
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.
Σε απάντηση σε Samuli Karevaara

Re: Cleaning up the HTML code in Moodle 1.5

από John Papaioannou -
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)
Συνημμένο classid.png
Σε απάντηση σε John Papaioannou

Re: Cleaning up the HTML code in Moodle 1.5

από Samuli Karevaara -
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 smile ), 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.
Σε απάντηση σε Samuli Karevaara

Re: Cleaning up the HTML code in Moodle 1.5

από David Scotson -

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.

Σε απάντηση σε Martin Dougiamas

Re: Cleaning up the HTML code in Moodle 1.5

από Samuli Karevaara -
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?
Σε απάντηση σε Martin Dougiamas

Re: Cleaning up the HTML code in Moodle 1.5

από David Scotson -
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.

Σε απάντηση σε Martin Dougiamas

Re: Cleaning up the HTML code in Moodle 1.5

από Gustav W Delius -
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!
Σε απάντηση σε Gustav W Delius

Re: Cleaning up the HTML code in Moodle 1.5

από Martin Dougiamas -
Φωτογραφία Core developers Φωτογραφία Documentation writers Φωτογραφία Moodle HQ Φωτογραφία Particularly helpful Moodlers Φωτογραφία Plugin developers Φωτογραφία Testers
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.

Σε απάντηση σε Martin Dougiamas

Re: Cleaning up the HTML code in Moodle 1.5

από Mike Churchward -
Φωτογραφία Core developers Φωτογραφία Plugin developers Φωτογραφία Testers
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
Σε απάντηση σε Mike Churchward

Re: Cleaning up the HTML code in Moodle 1.5

από Gustav W Delius -
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?
Σε απάντηση σε Gustav W Delius

Re: Cleaning up the HTML code in Moodle 1.5

από Antti Boman -
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/
Σε απάντηση σε Antti Boman

Re: Cleaning up the HTML code in Moodle 1.5

από Hannes Gassert -
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.
Σε απάντηση σε Gustav W Delius

Re: Cleaning up the HTML code in Moodle 1.5

από Mike Churchward -
Φωτογραφία Core developers Φωτογραφία Plugin developers Φωτογραφία Testers
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
Σε απάντηση σε Mike Churchward

Re: Cleaning up the HTML code in Moodle 1.5

από Hannes Gassert -
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.
Σε απάντηση σε Hannes Gassert

Re: Cleaning up the HTML code in Moodle 1.5

από Hannes Gassert -
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
Σε απάντηση σε Hannes Gassert

Re: Cleaning up the HTML code in Moodle 1.5

από Hannes Gassert -
Quickly built a little filter, too, and filed a bug for this issue, see http://moodle.org/bugs/bug.php?op=show&bugid=1989.
Σε απάντηση σε Martin Dougiamas

Re: Cleaning up the HTML code in Moodle 1.5

από David Scotson -
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.
Σε απάντηση σε Martin Dougiamas

Re: Cleaning up the HTML code in Moodle 1.5

από Ray Kingdon -
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.



Σε απάντηση σε Martin Dougiamas

Re: Cleaning up the HTML code in Moodle 1.5

από Dan Marsden -
Φωτογραφία Core developers Φωτογραφία Particularly helpful Moodlers Φωτογραφία Peer reviewers Φωτογραφία Plugin developers Φωτογραφία Plugins guardians Φωτογραφία Testers Φωτογραφία Translators
Hi All,

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

Σε απάντηση σε Dan Marsden

Re: Cleaning up the HTML code in Moodle 1.5

από Gustav W Delius -
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.
Σε απάντηση σε Gustav W Delius

Re: Cleaning up the HTML code in Moodle 1.5

από Ray Kingdon -
Heroic work, Gustav. Now wished I waited a day or so before looking at the Dialogue code...big grin
Great job,
Ray