Urs Hunkler

Hmm Tim - there is no need to rant.

Jamie wrote "I would really like to see it as an option in moodle"

He does nothing more than support my proposal that Moodle should support the choice of a JavaScript library. You answer to his posting as if he demanded to replace YUI with jQuery which he didn't do at all.

Following some very personal remarks which I need to make due to the experiences in discussions with you. I feel indirectly attacked by your answer.

You seam to react very sensible when somebody talks about flexibility. What makes you fear flexibility? Loose of control? I really don't understand your harsh reaction.

You mention logic.

I see you showing a very specific look on logic - I see your view on logic selective to those aspects that fit your view on Moodle and your view how Moodle has to be. Other approaches you try to goof on (that's the way I see your reactions).

I notice in the last few month that I make huge progress with Moodle related problem solving when I step out of the box and look at the issues from another point of view - like cleanly separating program logic from page view.

For your great engagement in the Moodle forums I highly regard you. You are sometimes the only one who engages in discussions. And you don't fear to engage in unpopular Moodle topics like templates.

Templates

A very old but nevertheless repeating discussion in the Moodle forums. Until now I have not read an argumentation that proves that the way Moodle is build is superior to clearly separating program logic and view and then use templates for the view. The answers look more like "What should templates be good for?" I read the logic behind such an argument as "The status quo is always better than a new approach."

In many Open Source projects the developers decided at some point of their way to switch from pure procedural or even "Spagetti" code to a consequently object oriented approach. Moodle uses objects in some parts. The fundamental switch seams not to be on the horizon. What are the reasons for this reluctance?

When you separate program logic from view there is no problem to add JavaScript or CSS to the header or footer at all. You first calculate and collect the page content. Then you know which page specific JS or CSS you need and you add it to the header or footer in the view. No programing acrobatic needed at all.

Hoping to make progress in our discussion how to make Moodle better.

I know two major reasons for templates:

1. Flexibility for the visual presentation

2. Much cleaner code which is easier to maintain

The first reason I am remembered on during my daily work. It always hurts when I need to explain a customer that I can't realize their need for a specific look coming from their corporate design or an individual learning situation because Moodle is not flexible enough.

About the second reason I learned reading the book PHP in Action. On the book's website they write: "This book takes on the most important challenges of web programming in PHP 5 using state-of-the art programming and software design techniques including unit testing, refactoring and design patterns. It provides the essential skills you need for developing or maintaining complex to moderately complex PHP web applications."

The authors show in several examples how to make code clearer and easier to understand by separating program logic from presentation with templates. This way code can be better maintained.

Equipped with the knowledge from the book, looking at Habari and Drupal and the urgent need to be able to work more flexible with Moodle I implemented a theme class in Moodle 1.9. The theme class is the adapter object for any theme engine. To check the functionality I implemented "pure PHP" templates and PHPTAL templates. About PHPTAL I learned in the book. This template engine convinced me that it's better to implement an adapter to be able to use any template engine.

The outcome you can see on my Lab site. You may log in as "student" with "stud123".

With templates I am for example able to change the XHMTL structure to create an accessible Accordion course format. Or I can create an accessibility friendly 2-1-3 column layout.

And with templates there is no need to wade through a mix of PHP and XHTML. With PHPTAL I am even able to create the page in a XHTML editor with good page preview functionality with XHTML and the PHPTAL tags. This means I can work as a designer to get a good layout and can preview the page in a browser with placeholder information and optimize it until all details are right. These pages I can then directly use as templates for Moodle without changes. Marvelous.

There is just going on a discussion about Moodle on the touch devices Iphone/iPod Touch app idea. The discussion is about creating special apps or how to optimize Moodle to get it working on the devices.

With templates anybody can change the page layout to make Moodle work on any device without hacking the code.

The layout "Flexible" on my Lab site is one approach to react flexible on different screen width. You may play with the width of the browser window to see the behavior. The content box is 480 px wide and fits on the touch screen without scaling when you hold the device in landscape orientation. Moodle with "Flexible" can be viewed on big screens and on small screens without much changes. No need for extra design work or development.

To implement the 2-1-3 column layout and the "Flexible" layout in Moodle core at the same time is impossible. They are too different. Every task needs it's special solution.

And when you want to visually integrate Mahara (which uses Smarty templates) and Moodle we add Smarty to the template engines and build the Smarty templates to use them in Mahara and in Moodle. You design once and use several times.

Drupal and Typo3 for example can also work with PHPTAL or with Smarty templates. Moodle could be much easier visually integrated into a wider software landscape with less work.

Moodle needs templates to become modular in it's visualization possibilities and to be more easily maintained.

@ Statements like "In my theme, I want to be able to control ...". Make the examples as specific as possible, and try to phrase them in terms of actual educational situations, where what you are asking to be able to do clearly makes a positive impact on the educational experience.

Tim, your question makes a real problem clear in the discussion about Moodle templates.

Nobody can seriously answer this kind of question. One major design task is to create the best possible positive impact within a certain task and context. There can't be a positive impact in general. And the solution must be different from task to task. If not design fails.

And "educational experience" does not demand a certain and specific look and feel. But the look and feel of the environment into which Moodle is integrated may demand a specific look and feel. And the presentation and form needs to be different for young learners and for adult learners.

A real life work example

Working on the moodle2 theme design I thought about how the forums may be presented to support the experience of one real discussion where people discuss together one topic. The research on forum types and looks showed up hundreds of different ways to present forum threads. For example a forum thread may be a collection of several individual expressions of personal opinions clearly separated. Or the look and organisation of the thread supports the experience of the thread as one discussion with different opinions from different persons belonging together. Two nearly opposite approaches.

I was able to realise some of the goals but I failed to implement the approach consequently. Why? The reason is that I was not able to change the content order of the relative huge personal information and repeating topic part of every posting. It separates every posting too much. If I would have access to the XHTML page structure I could have changed the content order and solve the issue.

This example shows that one can do a lot by changing the CSS. But for several essential tasks the XHTML structure needs to be changed.

Moodle theme changes with CSS are mostly like changing the wallpapers in a building. When you need a different experience you need to change the walls of the building. Multi functional buildings therefor offer "movable" walls.

Moodle is Open Source - just change core

Somebody may propose: change the Moodle forum thread content order in core when this order is better = hack Moodle core. If someone would do that the forum presentation is right for this one task but may be wrong within another context - for example when the individual posting plays the dominant role over the thread concept. So this hacking approach does not work.

Better use templates

Here templates come in handy. The program offers the content (the posting with the elements user, userimg, thread title, text etc.) in a structured way. This content is then placed into a XHTML page structure = the template. I as the web designer can rearrange the XHTML in the template and place the delivered content in the way needed for the given task. I don't hack Moodle and I don't touch content - I only arrange it to get the best user experience for the given task.

Separate content and form

The clue is to separate content and form. The program delivers structured content, the web designer delivers the XHTML form as a template and both are put together to produce the web page. It's work in two steps: First collect all content and then place it within the page. That's dead easy, isn't it?

Within Moodle the content collection and placement within the page structure is done in one go. Database calls, content preparation calculations and "echos" change evermore. Here we have the problem. Every time you want to change the form you need to change the programming too.

Separating content and form also supports two professions: (web) developers being best in handling and collecting content and (web) designers being best in creating functioning, usable and appealing web pages. Every profession can concentrate on what they can do best and co-operate in a superior user/learning experience.

In Moodle (web) developers need to deliver for both professions with very different success.

Is there any reason that CMSs and Moodle have different visualisation needs?

What I don't understand is your approach to declare information delivered with CMS systems is different in their presentation needs from information delivered by Moodle?

As you may see from my forum example above also forums and quizzes etc. never should be fixed in their visual form. You always need to see the context. And in my example the design needs to follow function and is not a candy visual effect.

The fixed form Moodle approach in the opposite is contra productive because it reduces the "positive impact on the educational experience" by reducing the impression of one closed discussion. Do you get the point?

And an important fact is, that no programmer ever will be able to create a page which fits every context. As you mentioned CMS developers solve this task by offering templates.

About templates

When I talk about templates I don't talk about template systems like for example "Smarty". I talk about XHTML include files with <?php echo $variable ?> and <?php foreach($group as $element) : ?> statements to place content within the page XHTML.

Figure out the following scenario:

• In Moodle content is collected into an associative array

• Import variables into the current symbol table from this array with "extract()"

• Include the XHTML template saved as a separate template file "templates/forum-thread-view.inc.php"

• "Echo" the variables in the symbol table within the XHTML page structure

• Flush the complete page to the browser

Designers write templates to realise the needed look and feel

How may this work?

• Moodle collects all template files in an array "$templates" (as a lookup table) during the setup process in "setup.php". Like Moodle collects the several CSS files now it can search the relevant places and build the table.

• Every template has a unique name like "forum-thread-view.inc.php", "sideblock-list.inc.php" or "header-home-inc.php" etc. Template files are placed within "templates" directories within the blocks, modules etc. directories.

• Designers can copy the template files they need to change into the "templates" directory in the "themes" directory and modify/rewrite them as needed.

• Moodle reads the "templates" in the theme directory last and therefore overwrites the existing "template" entries from core in the lookup table with the new "template" link with an identical name.

• Every page calls the needed "template" with for example include($templates['forum-thread-view']) and will get either the core template or the overwrite "template" written by the designer.

That's the basic templating principle many blog or CMS systems work with. I learned how those "pure PHP templating systems" work looking at Habari and Drupal.

Templates in Moodle 2.0

I will use such PHP templates in my Moodle design work in the future to provide a better positive impact on the educational experience and better integration in the visual needs for my clients.

It would be marvellous when such a simple templating system would be integrated into Moodle 2.0. Many more designers would be able to create a better learning experience with Moodle.

And HTML VALIDATOR is your friend to get/keep Moodle pages XHTML valid.

A green hook at the page bottom tells you "You did fine" - a red warning tells "You did wrong - go and rework the page". Clicking on the icon gives detailed "Tidy" information about the page.

In this thread you would be informed about an in XHTML illegal target="_blank" attribute