This discussion is for kicking around some ideas for Moodle 2.0 skins.
The plans so far ...
In 2.0, all the web interface will be defined as XHTML fragments in separate templates. There will only be one standard set of templates in the distribution, but this set will be as flexible as possible. I'm planning to make it XHTML Transitional 1.0, so that it has best compatibility across browsers, while being well-formed XML.
There may be a few tables in it but as few as possible. There will be NO old-style FONT tags and so on - every single thing that can be styled will have CSS tags.
As a result, "themes" or "skins" as we know them will include no HTML whatsoever - they will be completely defined by a CSS file and a directory of images. The CSS file will be editable via the web, and may include PHP variables if wanted.
These themes can be set for the site, for the course and for each user. The admin and teacher will be able to "force" a style for a particular site or course, if they want to, otherwise the user's preference is used.
Most people will never need to change the template set. The main reason for having the template set is to provide opportunities for making a version for Palm Pilot screens, or a version that caters explicitly for the blind, or for someone that wants very different layout, and so on.
Some stuff that needs thinking about ...
The template is like a skeleton upon which we will hang many different pretty clothes. What are some cool "bones" that should be in the default template set?
Here are some slick themes I saw recently that may spark some ideas ... this is the same software in both cases (e107).
http://www.e107.org/news.php
http://skywaysun.xs4all.nl/news.php
I guess I'd probably want to determine my target audience and the equipment that they may be using to access a Moodle based course. I'm a strong believer in not making content that, due to it's size, is inaccessible to an unknown number of users. These limitations definitely take some of the fun out of web development but if ignored can mean certain failure depending on the intended audience. On the other hand course registrants are a somewhat "captive audience".
This can be difficult to quantify but some feedback from this community may help to determine the needs of the educators using this great CMS.
Just my 2C
This can be difficult to quantify but some feedback from this community may help to determine the needs of the educators using this great CMS.
Just my 2C
The idea with using XHTML transitional and some tables instead of pure XHTML is exactly to retain this backward compatability. In future, if necessary, it will also be relatively easy to upgrade the templates to full XHTML.
BTW, e107 is very slick looking. I see they prefer Grey Matter for blogging. I also use Grey Matter, it is very easy to customize if you know a little HTML. Just edit a particular component template and change is made.
Actually, the second example I had has changed so it's no longer the "Bluesteel" theme I wanted to show.
Still worth a look, sort of a cool layout on the http://skywaysun.xs4all.nl/news.php
site currently. e107 stats page is worth a look too for browser stats, screen res stats and many others...
site currently. e107 stats page is worth a look too for browser stats, screen res stats and many others...
One thing I was thinking of was to make the headers of boxes (ie all the things that have the rounded graphic on this site) be made up of a 3x3 structure:
+-----+----------+-----+
|-----+----------+-----|
|-----+----------+-----|
+-----+----------+-----+
to allow lots of fancy graphics in there.
+-----+----------+-----+
|-----+----------+-----|
|-----+----------+-----|
+-----+----------+-----+
to allow lots of fancy graphics in there.
Great idea!
So basically to create your own theme you would just have swap or add your own images and edit the CSS.
Sounds Great !!
We could even write a little screen to change the theme or edit the css as a user.
Sounds Great !!
We could even write a little screen to change the theme or edit the css as a user.
I have another question..
Is it possible to give users the ability to rearrange the position of the "windows" in the template.
Like lets say.. move the News window from the left column to the center column. Add/remove windows from the portal. ect..
Is it possible to give users the ability to rearrange the position of the "windows" in the template.
Like lets say.. move the News window from the left column to the center column. Add/remove windows from the portal. ect..
Yes, absolutely!
You couldn't do this with CSS, though - you would need to duplicate the tree of template files and edit the XHTML in those.
You couldn't do this with CSS, though - you would need to duplicate the tree of template files and edit the XHTML in those.
I'm sorry, but I disagree. You can do this with CSS, if the template is modern, without tables for layout.
If you arrange all content in divs you only change the CSS and get a completely different look.
The biggest project showing this is zen-garden: http://www.csszengarden.com/
One of the most fascinating projects in modern web design I know. There is one (X)html-file and one basic CSS-file. The aim is, that each designer changes the CSS-file the way he wants and creates a completely different design of the site. youst browse through the over 100 designs: http://www.mezzoblue.com/zengarden/alldesigns/
Perhaps you should contact Dave Shea, Jeffrey Zeldman and Bob Sawyer. They are always looking for possibilities to show what modern Webdesign can do. They have already started some competitions in finding a layout for other project. Perhaps they would help mooddle.org. The latest is a competition for useit.com: http://www.builtforthefuture.com/reuseit/index.php
If they cannot do it themselves, they have the contact to many people who would look forward to having a bigger project like moodle in their references.
There are two lines in CSS-Layout. The hardliners claim, that old browsers, especially Netscape 4.7+ shall no longer be supported, as everyone has the possibility to install a modern browser. They claim, that all supporting old browsers will slow down the developement in Webdesign. In this case people using old fashioned browsers see the content, but no layout. e.g. People using an old Browser see zengraden like this: http://www.csszengarden.com/?cssfile=none
The other side tries to use a tableless layout that support Netscape 4.7+, too. But then a lot of nice little things are not possible.
Greetings from Bavaria,
Susanne
If you arrange all content in divs you only change the CSS and get a completely different look.
The biggest project showing this is zen-garden: http://www.csszengarden.com/
One of the most fascinating projects in modern web design I know. There is one (X)html-file and one basic CSS-file. The aim is, that each designer changes the CSS-file the way he wants and creates a completely different design of the site. youst browse through the over 100 designs: http://www.mezzoblue.com/zengarden/alldesigns/
Perhaps you should contact Dave Shea, Jeffrey Zeldman and Bob Sawyer. They are always looking for possibilities to show what modern Webdesign can do. They have already started some competitions in finding a layout for other project. Perhaps they would help mooddle.org. The latest is a competition for useit.com: http://www.builtforthefuture.com/reuseit/index.php
If they cannot do it themselves, they have the contact to many people who would look forward to having a bigger project like moodle in their references.
There are two lines in CSS-Layout. The hardliners claim, that old browsers, especially Netscape 4.7+ shall no longer be supported, as everyone has the possibility to install a modern browser. They claim, that all supporting old browsers will slow down the developement in Webdesign. In this case people using old fashioned browsers see the content, but no layout. e.g. People using an old Browser see zengraden like this: http://www.csszengarden.com/?cssfile=none
The other side tries to use a tableless layout that support Netscape 4.7+, too. But then a lot of nice little things are not possible.
Greetings from Bavaria,
Susanne
Thanks for the reponse. I'm familiar with CSS positioning, and I'm familiar with zengarden. In an ideal designer's world I agree they are very nice.
However, I did a lot of looking at table-less sites (a few months ago), and they almost all gave me problems when I did things like change the font size, window size and so on. It still feels too "new" to me - I found CSS positioning to be very fiddly, error-prone and slow. A look around many big, popular sites seems to confirm that they still use tables, possibly for similar reasons. I think most people who casually modify layouts still find tables easier than CSS.
Finally it simply isn't true that everyone can upgrade to new browsers (and HTML mail programs!), and I don't think a site for educational purposes should require it.
As a result, I still think there is a place for a few basic tables and this is why I'm planning the DEFAULT template set will include them. However, these will be bare minimum tables (no style information). Altering these tables (for the few who will want to do it) will be very easy, and it will also be fairly easy to upgrade these templates with CSS positioning (or make an alternate set) if someone wants to do this.
If you really disagree with this, though, I'm willing to be convinced!
However, I did a lot of looking at table-less sites (a few months ago), and they almost all gave me problems when I did things like change the font size, window size and so on. It still feels too "new" to me - I found CSS positioning to be very fiddly, error-prone and slow. A look around many big, popular sites seems to confirm that they still use tables, possibly for similar reasons. I think most people who casually modify layouts still find tables easier than CSS.
Finally it simply isn't true that everyone can upgrade to new browsers (and HTML mail programs!), and I don't think a site for educational purposes should require it.
As a result, I still think there is a place for a few basic tables and this is why I'm planning the DEFAULT template set will include them. However, these will be bare minimum tables (no style information). Altering these tables (for the few who will want to do it) will be very easy, and it will also be fairly easy to upgrade these templates with CSS positioning (or make an alternate set) if someone wants to do this.
If you really disagree with this, though, I'm willing to be convinced!
I accept your opinion.
Some months ago I really fought with the new way of building Websites. The main thing is to loose the thought of giving everything an exact size. The new way means giving everything a relative size and lets float everything. Then there is no problem in changing font-sizes, etc.
The advatnage ist, that in this way you allow handicapped people to easily participate on your website.
I do not know how this is in USA or other countries, but in Germany there is a law that soon all offical institution Sites, e.g. from Government, universities etc. have to build such sites, that they are easy to use for handicapped people.
I understood that the step to moodle 2.0 will be the step to future, a kind of major step. So I just thought of having a completely modern template for moodle and I know, that a lot of people doings such sites, like the big ones I named before are very interested in helping people to change to complete tableless layout.
I cannot offer myself, because I'm still in a process of learning this new method.
I just want to show you some big sites using this tableless layouts:
German Post http://www.deutschepost.de/ they have still some exact sizes, but tableless
http://www.uscho.com/ a site that works completely skalable, you can use big font size and it still works fine.
http://www.stern.de a really big German magazine
http://msn.espn.go.com/ they have still some fixed sizes, but tableless
Really funny to me ist lycos. Lycos Germany ist tableless: http://www.lycos.de whereas http://www.lycos.com still uses tables.
Theses shall only be some hints. I love moodle and adore your work. And even if the next version will be completely made of tables, I would use it. It was just my thought why not asking some people for help and get a template that will really be modern for some years.
Some months ago I really fought with the new way of building Websites. The main thing is to loose the thought of giving everything an exact size. The new way means giving everything a relative size and lets float everything. Then there is no problem in changing font-sizes, etc.
The advatnage ist, that in this way you allow handicapped people to easily participate on your website.
I do not know how this is in USA or other countries, but in Germany there is a law that soon all offical institution Sites, e.g. from Government, universities etc. have to build such sites, that they are easy to use for handicapped people.
I understood that the step to moodle 2.0 will be the step to future, a kind of major step. So I just thought of having a completely modern template for moodle and I know, that a lot of people doings such sites, like the big ones I named before are very interested in helping people to change to complete tableless layout.
I cannot offer myself, because I'm still in a process of learning this new method.
I just want to show you some big sites using this tableless layouts:
German Post http://www.deutschepost.de/ they have still some exact sizes, but tableless
http://www.uscho.com/ a site that works completely skalable, you can use big font size and it still works fine.
http://www.stern.de a really big German magazine
http://msn.espn.go.com/ they have still some fixed sizes, but tableless
Really funny to me ist lycos. Lycos Germany ist tableless: http://www.lycos.de whereas http://www.lycos.com still uses tables.
Theses shall only be some hints. I love moodle and adore your work. And even if the next version will be completely made of tables, I would use it. It was just my thought why not asking some people for help and get a template that will really be modern for some years.
I am a big fan of CSS positioning too. They are so graceful, and I would have thought, faster since they require less code. I first saw them at
http://glish.com/css/
But one of the universities at which I teach is still using Netscape 4, and I am in affluent, high tech Japan. Perhpas this is one for Moodle 3.0?
Anyhow, going to templates and XHTML Transitional is the big thing which needs to be done first anyway.
Going from XHTML Transitional to pure XHTML will be much easier after that. It WILL all happen - I'm in this for the long haul!
Going from XHTML Transitional to pure XHTML will be much easier after that. It WILL all happen - I'm in this for the long haul!
Thanks for the links and info Susanne.
There is some very good information available at www.csszengarden.com mentioned by S. Fieler for those interested in CSS. I think it's important to read all the information provided by the authors as they themselves point to some of the drawbacks of using CSS positioning. Someday CSS will be more useful, but that's the future.
I've done a 180 degree reversal on this subject. I no longer think that it's okay to force users to get the latest equipment in order to use my sites effectively. Building a site and then placing it on the far side of a tunnel that only a few users have the ability to travel to is a waste of time, money and is a needless frustration for users.
The rest of the world is just beginning to become aware of the possibilities. Most of these people can't access the newest technology. Most of them won't have this option for some time.
As Martin points out above educational tools should not be exclusionary in their construction.
Everything in it's time...
There is some very good information available at www.csszengarden.com mentioned by S. Fieler for those interested in CSS. I think it's important to read all the information provided by the authors as they themselves point to some of the drawbacks of using CSS positioning. Someday CSS will be more useful, but that's the future.
I've done a 180 degree reversal on this subject. I no longer think that it's okay to force users to get the latest equipment in order to use my sites effectively. Building a site and then placing it on the far side of a tunnel that only a few users have the ability to travel to is a waste of time, money and is a needless frustration for users.
The rest of the world is just beginning to become aware of the possibilities. Most of these people can't access the newest technology. Most of them won't have this option for some time.
As Martin points out above educational tools should not be exclusionary in their construction.
Everything in it's time...
I'm completely new to moodle. In fact I haven't still made up my mind about using it and one of the main reasons for it is its look. 
.
This is just a personal feeling but I think a learning environment has to bo receptive and make students (and teachers) feel confortable and moodle right now is so square ...!
But, if as it seems, we will be able to soften some edges I guess I'll be here for a while. I think that changing the themes systems as posted above will be great.
OK, well this is an interesting little line of thought which I'd like to hear about ... what are some cool CSS tricks for making round corners and curvy lines ... and more to the point, what sort of skeleton (tables and divs) do we need in place to allow this to happen?
One method I see around is the little 3x3 box I mentioned above, but this may be overly complex.
One method I see around is the little 3x3 box I mentioned above, but this may be overly complex.
Hello Martin,
as far as I know round corners for divs are planned for CSS3 or they are already in CSS2.1. I saw something about it a little time ago. It might even be, that Mozilla was already able to display them - unfortunately I cannot remember and I do not find it anymore.
There ist one possibility to display curves by using many divs:
eric meyer shows this:
http://www.meyerweb.com/eric/css/edge/curvelicious/demo.html
for a cury line you really would need a lot of those divs:
http://www.meyerweb.com/eric/css/edge/raggedfloat/demo.html
http://www.meyerweb.com/eric/css/edge/slantastic/demo.html
And here you see the disadvantages in the last example:
As the box models from IE and Netscape/Opera differs, you would have to work with one of Tanteks solutions (hacks).
This works then, when you look at this example:
http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm
But on the other side, the modern way of writing websites means a lean code, and empty divs are not what was intented.
Just hav in mind people who hve difficulties in seeing things. When a reader reads them the page, very often he will read an empty div and I don't think you want to do a extra CSS for people who are handicapped with their eyes.
Perhaps this could be a compromise:
a slantwise line made by one empty div. The technique behind that, you can see here:
http://www.infimum.dk/HTML/slantinfo.html
as far as I know round corners for divs are planned for CSS3 or they are already in CSS2.1. I saw something about it a little time ago. It might even be, that Mozilla was already able to display them - unfortunately I cannot remember and I do not find it anymore.
There ist one possibility to display curves by using many divs:
eric meyer shows this:
http://www.meyerweb.com/eric/css/edge/curvelicious/demo.html
for a cury line you really would need a lot of those divs:
http://www.meyerweb.com/eric/css/edge/raggedfloat/demo.html
http://www.meyerweb.com/eric/css/edge/slantastic/demo.html
And here you see the disadvantages in the last example:
As the box models from IE and Netscape/Opera differs, you would have to work with one of Tanteks solutions (hacks).
This works then, when you look at this example:
http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm
But on the other side, the modern way of writing websites means a lean code, and empty divs are not what was intented.
Just hav in mind people who hve difficulties in seeing things. When a reader reads them the page, very often he will read an empty div and I don't think you want to do a extra CSS for people who are handicapped with their eyes.
Perhaps this could be a compromise:
a slantwise line made by one empty div. The technique behind that, you can see here:
http://www.infimum.dk/HTML/slantinfo.html
Thanks for those very interesting links ... I can see the disadvantages, though ... with all the empty divs and hacks one might as well use tables. 
Round corners seem possible currently on Mozilla only eg http://www.blooberry.com/indexdot/css/properties/extensions/nsextensions.htm
But it can look very nice! eg http://dynarch.com/mishoo/home.epl
Round corners seem possible currently on Mozilla only eg http://www.blooberry.com/indexdot/css/properties/extensions/nsextensions.htm
But it can look very nice! eg http://dynarch.com/mishoo/home.epl
The new look is great when viewing with Mozilla! What a difference a rounded corner makes. Screenshot is for those without Mozilla.
Thanks - I'm pretty happy with it too. Now if only IE would catch up. (And CSS3 would come out!)
Here is another technique for creating rounded corners using CSS with good cross-browser support:
http://www.albin.net/CSS/roundedCorners/
Here are some other discussions/info on the topic:
http://www.alistapart.com/articles/customcorners/
http://www.virtuelvis.com/gallery/css/rounded/
http://www.andreas-kalt.de/roundedbox/
http://kalsey.com/2003/07/rounded_corners_in_css/
http://www.redmelon.net/tstme/4corners/
http://www.vertexwerks.com/tests/sidebox/
http://www.albin.net/CSS/roundedCorners/
Here are some other discussions/info on the topic:
http://www.alistapart.com/articles/customcorners/
http://www.virtuelvis.com/gallery/css/rounded/
http://www.andreas-kalt.de/roundedbox/
http://kalsey.com/2003/07/rounded_corners_in_css/
http://www.redmelon.net/tstme/4corners/
http://www.vertexwerks.com/tests/sidebox/
Thank you very much Christopher!
Martin and others,
You may want to check out the CMS site I'm doing for Earlham College
http://www.earlham.edu/~markp/cms/ . It's inspired by Moodle - as if you could'nt tell. If you view this site in Mozilla (on any platform) you get the cool round corners, if you use IE or Safari the corners are square. It's totally without tables and does validate for XHTML. I still have not written the "how did I do it" page but if there's interest I will.
Mark
You may want to check out the CMS site I'm doing for Earlham College
http://www.earlham.edu/~markp/cms/ . It's inspired by Moodle - as if you could'nt tell.
Mark
I found this site tonight and thought about this discussion. I have not looked at the code but the layout and capabilities really looks good.
The frames can be closed, rearranged and sized. It does not appear to save the settings since a refresh will bring it back to default.
Maybe you can get some ideas!
Jenny
Well I needed a mental break from course development so I spent the day hacking Moodle and the JavaScript off the site I referenced and this is what I came up with:
http://66.25.38.140/moodle/course/view.php?id=2&username=guest
It is not perfect or well-tested, but I thought it was cool!
There is actually very little code added to Moodle to make it work and as I have it, it could easily be a user option.
The script author says it works in IE4 + and NS4+ as well as Opera, but that was before I rewrote some of it, so no telling.
This is the arrangement I would probably use most:
Jenny
Very cool Jenny! Hey, take a break from course dev more often. Looks great , works great.You know something about this.
PS. I couldn't use Mozilla 1.5 to view your example but it works great with IE6.
PS. I couldn't use Mozilla 1.5 to view your example but it works great with IE6.
Too cool for school! 
This would make a great alternate template design, it's quite good fun (not sure about the difference in day-to-day use though - maybe you can report back on that)
(Just as an aside: none of the floating boxes are showing up for me in Mozilla 1.6 but it looks good in IE)
This would make a great alternate template design, it's quite good fun (not sure about the difference in day-to-day use though - maybe you can report back on that)
(Just as an aside: none of the floating boxes are showing up for me in Mozilla 1.6 but it looks good in IE)
Yep, as suspected, I broke something! 
I was trying to add fancy borders. Will have to figure out what I did wrong.
As a note: The <!DOCTYPE> matters for this. Without just the right one, it does not work. Something to file away if you get into some serious DHTML coding.
http://66.25.38.140/moodle/course/view.php?id=2&username=guest
It works in Mozilla and it works in Opera.
I need to work out some of the bugs in the min/max/restore options and then I may try it out in my classroom. I have just a few students right now that will give me honest opinions. I like being able to maximize just one window and focus on that. I also need to perfect the save arrangement and set it so it can be turned on and off as desired.
If anyone wants copies of the code, let me know. It is just a few files that have been modified. I will clean it up and then post it.
Whew!
I think I need a break! Back to course development! 
Great! 
A very interesting work!
My compliments for your personalizations, Jenny! 
I'm writing in this forum also to ask help from your, theme gurus! 
I need to personalize other parts of my moodle and not only headers and footers.
In particular I need to put graphic on the right side and left side of the page. (logos, link, menu bars and so on).
Which file control this informations??
Where I have to work??
A big thanks to all of you!!
The best spot is probably to do it in the header and footer.
Basically you want to create a table for the middle section:
Put in header:
<table>
<tr><td>Put your left column graphics here</td>
<td>
Put in footer:
</td><td>Right column stuff here</td></tr></table>
See if that will do what you want!
Thanks for the comments on the layout!
Jenny
I am not sure if this is germaine, but please take a look at http://spidean.mckenzies.net/PostWrap+index-page-at1pndocs.phtml regarding theme creation. I use this with my PostNuke site and I am very pleased. As a matter of fact, it is one of the few PostNuke modules I have actually purchased. This might help with this discussion.
joining this discussion late...Another nice example of pure div/css is the new redhat site for fedora (http://fedora.redhat.com/).
However, they achieved rounded corners with images
John
However, they achieved rounded corners with images
John
Hmm! I couldn't break it with ie6 or moz. What browser did you use for that?
John
John
I was using Mozilla 1.6 beta (2003120808). By the way, the new Mozilla pages are also pretty nice.
Yes the new Mozilla pages are looking pretty nice, they've come along nicely in the past couple of months.
Or did they?
Or did they?
Sidenote- The new Mozilla pages are a great example of table-less design to produce a great looking site. If anyone is interested, there is a great interview with Dave Shea who was involved in the redesign. Good stuff.
I'm very interested in this topic and I thank you for the link. It was a great article!
Hi John,
That is a nice example although I'm still not sure about the corners, can you explain or illustrate how. Their site does look equally great in Moz & IE6 though.
That is a nice example although I'm still not sure about the corners, can you explain or illustrate how. Their site does look equally great in Moz & IE6 though.
I couldn't get it to display incorrectly as Martin did in the above screenshot. It always displayed correctly for me, although there was a very slight artifact in IE6 on the lower right and lower left rounded corners.
Here is an excerpt from the fedora css file where they set the rounded corners:
John
Here is an excerpt from the fedora css file where they set the rounded corners:
html>body .fedora-corner-tl { background: #d9d9d9 url("/images/corner-tl.png") no-repeat left top; }
html>body .fedora-corner-tr { background: #d9d9d9 url("/images/corner-tr.png") no-repeat right top; }
html>body .fedora-corner-bl { background: #d9d9d9 url("/images/corner-bl.png") no-repeat left bottom; }
html>body .fedora-corner-br { background: #d9d9d9 url("/images/corner-br.png") no-repeat right bottom; }regards,John
Thanks John,
I wasn't quite sure but your reply and this screenshot with images off in Mozilla proves you're right.
I wasn't quite sure but your reply and this screenshot with images off in Mozilla proves you're right.
one thing i've noticed, is that for this to become a larger tool .. even possibly at the enterprise level, we need to have every peice custom
a start of my own mods is here http://www.oursaviorsschool.com/moodle/ which could work well with CSS positioning but still needs to work everywhere, since some private schools are still using realllllllllllly old hardware .. that has to be on older IE's and such. and lets not forget the macs, some schools get free computers from apple so which of all your comments works on everything for the most part. basically ... to make it administratable from the point where you're on netscape 4.1 and up and on IE whatever, we need simple to edit layouts.
ex.
if someone now wants to put the HOME > PAGE > PART area someplace other than the place where the login link appears .. they'd have to know PHP very well .. since they currently are located in one variable.
this is the basis for my ideas... and i'm sorry to all the CSS'ers out there but chill out on css pos stuff for now, schools and many home users aren't there yet. so how can it look good everywhere, you might ask. it can't we just need to be able to choose a theme and use it.
schools want to look classy ... who knows why, but they do. right now the way i've laid out my site above, i can use it for an entire school system. but i'm still making mods to the arrangement of the theme. one thing the administration wants, is to have color bg's set on each page... that'd be fine.. except they want multiple colors on differnent pages. (yea yea i know .. aCK) but that's the style the school wants. so integrating that will be this week...
it's not a long process, but what we need is a list of things that can/will appear on a page, and then allow them to move around each object freely. NOTE: i'm not looking for a nuke system. this can be edited in source. but the whole Xanthia system coming out in .8 is amazing. so waht parts of this system can we use in moodle? thats my question to you.
Hi Dan,
You have put together a very nice looking site! Congratulations! Very nice.
I'm a strong believer in CSS and the more sites that use it the more support it will receive until critical mass develops and we can really start to see what this technology can do. Usability and universality are both important, why not seek both simultaneously?
My guess is that the adoption and support of standards, including CSS, is what will move the technology into a true archiving tool and will allow us to use the documents we're creating today well into the future. There are already many documents and much data that are lost due to the lack of standards support. We shouldn't repeat the acid-based paper scenario.
Furthermore the use of dial-up to deliver data will continue for the forseeable future and standards adoption presents an opportunity to optimize for dial-up delivery. This is, in my opinion, the real critical issue. We need to find new ways to minimize page-load times in order to allow the vast majority of the population to share what we create.
All the best,
John
You have put together a very nice looking site! Congratulations! Very nice.
I'm a strong believer in CSS and the more sites that use it the more support it will receive until critical mass develops and we can really start to see what this technology can do. Usability and universality are both important, why not seek both simultaneously?
My guess is that the adoption and support of standards, including CSS, is what will move the technology into a true archiving tool and will allow us to use the documents we're creating today well into the future. There are already many documents and much data that are lost due to the lack of standards support. We shouldn't repeat the acid-based paper scenario.
Furthermore the use of dial-up to deliver data will continue for the forseeable future and standards adoption presents an opportunity to optimize for dial-up delivery. This is, in my opinion, the real critical issue. We need to find new ways to minimize page-load times in order to allow the vast majority of the population to share what we create.
All the best,
John
Hi everyone,
I am *new* to moodle. I think that it looks very promising!
One concern I have is the ability to customize layout, look and feel etc...
I came across this site http://www.knowingpower.com/ which is based on moodle.
Is this sort of customization easy to do?
I have an idea that I've wanted to try out for long time. If one was not conscerned with cross-platform compatibilty (IE6 vs Moz) one could construct a Moodle theme based on Mozilla XUL (XML User-Interface Language) for a truely unique implementation of a moodle user interface.
With XUL one could add new elements such as menues, sidebars, pop-up windows and more with XML code that maintains the tag-based codeing paradigm that makes HTML so easy.
And XUL tags are the tip of the iceberg. XUL can be combined with Javascript to provide active content. The language that governs the display of XUL is essentially CSS. And XUL can be extended by XBL (the XML Binding language).
So if one wanted to make an icredibly robust and professional moodle theme they could leverage XUL to create a windows-like environment that could trick users into thinking they just opened an application instead of a website. Now if only I could teach myself XUL.
With XUL one could add new elements such as menues, sidebars, pop-up windows and more with XML code that maintains the tag-based codeing paradigm that makes HTML so easy.
And XUL tags are the tip of the iceberg. XUL can be combined with Javascript to provide active content. The language that governs the display of XUL is essentially CSS. And XUL can be extended by XBL (the XML Binding language).
So if one wanted to make an icredibly robust and professional moodle theme they could leverage XUL to create a windows-like environment that could trick users into thinking they just opened an application instead of a website. Now if only I could teach myself XUL.
Well, let us know when you have something - it sounds insanely complicated!
My dream is a completely Flash-based interface.
My dream is a completely Flash-based interface.
Martin that site is incredible. I agree, that would be the ultimate in themes. Even though XUL is non-proprietary, I imagine that Flash has greater market penetration at the moment. To offer you an example of what XUL can do, just look at mozilla.org's many browsers, mail and chat programs. The user interface for those apps are all written in XUL.
Actually, I'm afraid I disagree with including any Flash or other proprietary technology within Moodle. I hope that the direction of the markup will be towards XHTML and CSS that validates with the W3C standard and that is 'accessible' (perhaps section 508?). This would have the added benefit of making the code 'cleaner' and faster to load and display.
Don't panic - the default set of templates is definitely going to be doing all these good things. But there's no reason why someone couldn't come up with alternate sets of templates for other reasons.
Yes and more yes. Why not have the whole of Moodle as an XUL app executable from the web but actually running on the local machine. It would enable some user interface features that are just impossible with a web app - drag & drop for example.
Maybe this is a direction for Moodle v3 ?
Are there any online tutorials for getting started with XUL? Mozilla calendar is a great example but I'd like a 'first steps' tutorial if possible.
Mark
Maybe this is a direction for Moodle v3
Are there any online tutorials for getting started with XUL? Mozilla calendar is a great example but I'd like a 'first steps' tutorial if possible.
Mark
Yup Moz calendar is way hard place to start, plus it uses some platform dependent native code. Could be some ideas for integrating the Moodle calendar with ical export.
Have you taken a look at www.xulplanet.com for tutorials, also
the entire text of one of the bookk (by Oreilly) is available somewhere online. And if you want to spend money, there is a book with called Rapid Application Development with Mozilla that looks quite good (based on hanging around at Borders browsing through it anyway.
If anyone was considering creating moz specific bits of interface it might be sense to start on the admin bits.
BTW, I have found this thread very interesting indeed, I wish I had more time to mess with some of the ideas.
Marcus
Have you taken a look at www.xulplanet.com for tutorials, also
the entire text of one of the bookk (by Oreilly) is available somewhere online. And if you want to spend money, there is a book with called Rapid Application Development with Mozilla that looks quite good (based on hanging around at Borders browsing through it anyway.
If anyone was considering creating moz specific bits of interface it might be sense to start on the admin bits.
BTW, I have found this thread very interesting indeed, I wish I had more time to mess with some of the ideas.
Marcus
I would strongly recommend a look at the CSS work done for version 2 of the Plone CMS which you can see in action at http://plone.org/ (Note the clickable letter A's in the top-right corner that alter text size, one of many nice touches achieved with CSS).
They have not only created a default look that I find visually pleasing they have used valid and semantically correct XHTML and CSS ( this short article partly explains the difference ). This forward planning approach allowed them to achieve great accessablity in combination with very flexible skinning through only CSS changes.
You can see a Plone 2.0 site altered purely through CSS here: http://www.tyrell.com/
The main CSS guy from Plone lays out his approach in a talk which you can read the slides of here: http://plone.org/events/conferences/1/archive/customizingplone
Accessability has been a focus for Plone, at a recent conference in Europe they had a demo of a blind Austrian grandmother entering content into Plone through a braille interface after only a brief introduction to the system ( see photos here )
Hi David,
Check out Section508 (http://www.section508.gov/). There is a drop down list in the upper right side of the site homepage. At allows a vistor to adjust not only the font size (by number) but also the font style.
Would this be possible in Moodle via CSS??
WP1
Check out Section508 (http://www.section508.gov/). There is a drop down list in the upper right side of the site homepage. At allows a vistor to adjust not only the font size (by number) but also the font style.
Would this be possible in Moodle via CSS??
WP1
This would be possible. And even more:
You can create your own standard CSS for your browser. So you can see sites using CSS in the way you want to.
Especially handicapped people use this option.
I think with using moodle in schools and university, this option should be in mind.
Using CSS does not mean that everything is ok for handicapped people.
I know that transferring a project to Xhtml and even more, having WAI in mind (http://www.w3.org/WAI and http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505) is a long way to go.
So going step by step:
1. separating layout and content in code - this ist the hardest step.
2. transferring to Xhtml transistorial
3. transferring to a Xhtml strict version
5. have a glance at WAI
I started using moodle about a year ago. And I have seen how much it developed in that time, mainly with modules. I think it should be time now to change to Xhtml, because the more moodle grows, the more will have to be done.
I suggest that there should be a kind of guideline for new modules and modules in developement, that these should be already have an Xhtml-output or at least the possibility to switch to it in an easy way.
I'm no developer and as everything is done voluntarily and with great enthusiasm of people, I do not know whether this is possible. But it would make an emigration to Xhtml much easier.
To suggestions with flash, etc.
I think, when moodle is transferred to XHTML, it is very easy to do such things. Then you can open a Thema database, and new themes can be created easily.
But in my opinion the basic themes of moodle, the ones included in downloading moodle, should be plain.
The internet is still a platform for information. And even here in Germany, where broadband access to web is relatively wide spread, many users, especially students at schools, do not have a broadband acccess. Therefore everything increasing the download rate without any use should be avoided. In Germany there ist no affordable flatrate for modem users, only for broadband users.
So features without reason cause costs, not only for the users but also for the owner of the website, as server traffic counts, too.
Many of my collegues like to put flash, javascript and even worse java applets in there websites. I have my own theory about that: As the web is basically static, it is fascinating for people giving movement and tv-like features to it. As long as there is a good reason for it, why not. But only for having a design element on a site, only for showing that you can do it, no. A good design can be done in other ways.
David's hint to plone is excellent. I like it very much, because it is plain and nevertheless looks really good. Here the design supports the aim of the site. And this is professional.
Greetings from Bavaria
Susanne
You can create your own standard CSS for your browser. So you can see sites using CSS in the way you want to.
Especially handicapped people use this option.
I think with using moodle in schools and university, this option should be in mind.
Using CSS does not mean that everything is ok for handicapped people.
I know that transferring a project to Xhtml and even more, having WAI in mind (http://www.w3.org/WAI and http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505) is a long way to go.
So going step by step:
1. separating layout and content in code - this ist the hardest step.
2. transferring to Xhtml transistorial
3. transferring to a Xhtml strict version
5. have a glance at WAI
I started using moodle about a year ago. And I have seen how much it developed in that time, mainly with modules. I think it should be time now to change to Xhtml, because the more moodle grows, the more will have to be done.
I suggest that there should be a kind of guideline for new modules and modules in developement, that these should be already have an Xhtml-output or at least the possibility to switch to it in an easy way.
I'm no developer and as everything is done voluntarily and with great enthusiasm of people, I do not know whether this is possible. But it would make an emigration to Xhtml much easier.
To suggestions with flash, etc.
I think, when moodle is transferred to XHTML, it is very easy to do such things. Then you can open a Thema database, and new themes can be created easily.
But in my opinion the basic themes of moodle, the ones included in downloading moodle, should be plain.
The internet is still a platform for information. And even here in Germany, where broadband access to web is relatively wide spread, many users, especially students at schools, do not have a broadband acccess. Therefore everything increasing the download rate without any use should be avoided. In Germany there ist no affordable flatrate for modem users, only for broadband users.
So features without reason cause costs, not only for the users but also for the owner of the website, as server traffic counts, too.
Many of my collegues like to put flash, javascript and even worse java applets in there websites. I have my own theory about that: As the web is basically static, it is fascinating for people giving movement and tv-like features to it. As long as there is a good reason for it, why not. But only for having a design element on a site, only for showing that you can do it, no. A good design can be done in other ways.
David's hint to plone is excellent. I like it very much, because it is plain and nevertheless looks really good. Here the design supports the aim of the site. And this is professional.
Greetings from Bavaria
Susanne
Well how about just the header in Flash
Juan,
Very impressive, you should write up how this is done, as I can see how I could customise the page of a local school if this were - say - Frontpage, but I have no clue being a 'newbie' PHP user.
Following on from a previous post, I'd agree with the comment that schools really would like to preserve their identity, and the ability to adjust the theme is a vehicle to provide that common look and feel between the LMS (VLC) and the school Website for example.
Any suggestions - tutorials - working examples?