Fixing Chisimba for skinning, with a particular focus on eLearning modules
Tweet
141 days ago
GENERAL CONSIDERATIONS
Please view the eLearning module using the Metallic-elearn skin. If you see things that could benefit from having a better location, or mor appropriate style, please add the element to the code, and add the style to the stylesheet in the metallic-elearn skin. Please send the modified styles to the mailing list, and DO NOT COMMIT YOUR SKIN CHANGES. You should, however, commit your code changes. Some of the obvious things to fix:
two elements in an interface touch one another such that the effect is extremely ugly and unprofessional in appearance
the colour of elements do not match the overall theme
elements that do not have a style that should have one
sexybuttons are not used, or are used but do not have the images.
In the case of sexybuttons, you need to set an icon as follows:
$this->objButton->setIconClass("save");
$this->objButton->setIconClass("edit");
etc. See the sexybuttons code for icons that you can use.
There are no hard and fast rules. We can discuss things on the list. I will monitor the list as best I can for the next few days and answer questions where I can. But please do add to the ideas proposed here. This is just a start, I have more ideas, but I am out of time, and I want to give developers enough to get going.
COURSE AND CHAPTER TITLES
Please wrap them in a span where they should be displayed in a consistant colour, which is almost always, with the class .coursetitle or .chaptertitle as in the example below:
<h1>Worksheets in <span class="coursetitle">Biology of mutton</span></h1>
WARNING, ERROR, SUCCESS and HIGHLIGHTED
Whenever you have an item that produces a warning, error or success result, and you want them highlighted as such, please use the DIV or SPAN classes warning, error, success or highlighted. Do not use these classes for anything else. If you find code that uses any of these classes for any other purpose (for example, I have found code that used the error class for success, or just to highlight a title. This should be fixed. Change highlight use of these classes to highlighted. They should be used as follows (Note that the HTML tag should be written in lower case as 'div', not 'DIV'):
<SPAN class="warning">Your account is almost out of space</SPAN>
<SPAN class="error">Your upload failed</SPAN>
<SPAN class="success">Your exam was submitted to the teacher</SPAN>
<SPAN clas="highlighted">There is a full moon tomorrow</SPAN>
Please check all code for incorrect use of these classes and fix it.
MODULE LINKS
When ever you have an add / edit / delete link that is TEXT ONLY (does not apply where you are using icons), make use of two divs as follows:
echo "<div class='adminadd'></div><div class='adminaddlink'>"
. $addLink->show()
. "</div>";
The following classes should be used:
A link that will add an item: adminadd, adminaddlink
A link that will edit an item: adminedit, admineditlink
A link that will delete an item: admindel, admindellink
Where a link is an administrative link, please use the class adminicon and adminiconlink, as follows:
echo "<div class='adminicon'></div><div class='adminiconlink'>"
. $listAllModulesLink->show()
. "</div>";
Where the link is to the module home, use modulehome and modulehomelink as follows:
echo "<div class='modulehome'></div><div class='modulehomelink'>"
. $thisModuleHomeLink->show()
. "</div>";
WRAPPERS
When you have things that should be wrapped in outer and/or inner areas for rendering (see Metalic skin and below for examples) please use the DIVs called innerwrapper and outerwrapper accordingly. This may be used, for example, where there are inner and outer areas of differing transparency such as we have in the metallic and derived skins, as well as on the http://www.chisimba.com site. To achieve this, use:
<div class='outerwrapper'>
Some rendered text, images, etc.
<div class='innerwrapper'>
Some inner wrapper rendering.
</div>
</div>
Avoid using innerwrapper and outerwrapper for anything else or any other purpose.
If you want to alter this somehow, you can use fake selectors
<div class='innerwrapper mymodifications'> and
<div class='outerwrapper mymodifications'>
to achieve derived classes.
Please give some thought style when developing new modules, please use these things where suitable and verify against the metallic skin. Indeed, right now, anyone doing development should test your code against the Metallic skin. If you want to see the effect, look at a typical module using an old skin, and then look at it with Metallic. Even oldies like module catalogue look much better when they have style.
chisimba
|
Trackback URL No trackbacks were found for this post | 
|
Software developers who refuse to accept design is part of their job should go back to the 20th Century (#Chisimba)
Tweet
144 days ago
Chisimba developers must be designers. This is an absolute truth.
Chisimba is an awesome framework for development, and an awesome set Web 2.0 applications. Like the Borg in Star Trek, anything can be assimilated in Chisimba, which gives it one of its strengths. But the ease of developing new functionality is also a weakness - developers don't always apply their minds fully to all dimensions of the task.
On the developer list for Chisimba, I have sounded like a broken record for the past few months (years?) calling for:
- A stronger sense of community among the participants
- More attention to coding standards and well designed MVC code with reusable objects in all layers
- More attention to detail about layout.
It is this last item that I want to focus on here.
Some developers have said 'we need designers, we developers cannot do design'. To which I throw my worst insult 'That's so 20th Century".
Yes, of course developers are not advance graphic designers, and I don't mean you have to be super hot designers capable of creating new innovative layouts that stun and amaze the world. That's 'oh duh' stuff.
But as a developer building applications with which users interact, you do not have the luxury to ignore design, any more than you have a right to ignore spelling and grammar on your interfaces. Simple things like what I call the 'flaw of abutment'. This is when two elements in an interface touch one another such that the effect is extremely ugly and unprofessional in appearance. Yet developers commit the crime of the 'flaw of abutment' on a daily basis. How hard is this to see?
Yes, you could leave it to the 'skin designers' to fix, but as someone who is trying to design one decent skin, I do not have the thousands of hours that would be needed to inspect each and every interface element for this and other simple flaws. Developers HAVE to do this themselves, and they have to learn to see the issues, rather than leave them to the chance that someone else will notice and have the time to uncommit the developer's crime.
Yes, it should be a crime in our community. Doing development and totally ignoring the design aspects of it is an insult to yourself, it is a deep insult to your users, and if people pay for your skills, it is a deep insult to them and their wallets. Most importantly, it is a deep and lasting insult to those who want to work to make Chisimba, and your work on it, look good.
But there is more to design than that. Even if you are not going to design something yourself, you should write code that can be subjected to design.
Consider this.
That is fine HTML wise, but is completely unable
to be subjected to design. Now, consider this:
for example, we can now do things like
With that simple thing, every element in the table is accessible to styling without having an influence on anything else.
This is the most basic of things that we should know, and I doubt any developer is not smart enough to think of this. But for some reason we don't. We need to change this. We need to take care and pride in our work. Of course, we shouldn't over-design either, but right now we are so underdesigned that this is not a worry.
There are plenty of articles about good design. Anyone who can develop a Chisimba module can read up on the basics of design for developres. If you are not willing to learn a little design to improve the quality and usefulness of your work, then you should choose a different career. There is no place in the 20th Century for developers who believe that they don't need to understand design, except perhaps building embedded systems that do not interact with users. Certinaly, there is no place in an application like Chisimba for such retro thinking.
chisimba design
|
|
Trackback URL No trackbacks were found for this post |
|
