dkeats.com

A sample personal canvas for #Chisimba Tweet
101 days ago

Here is a nice example of how to distribute personal canvases. Download my simple green canvas from http://www.dkeats.com/usrfiles/users/1563080430/canvases/green.zip and then upload it to your canvases directory using file manager. Click on the uploaded file, and then unzip it on the server. Set your personal canvas to green as explained in my previous post, and you will have this canvas as your default except in places where personal canvases are disallowed, where you select an alternative canvas from the querystring, or a canvas is set programmatically.

See www.dkeats.com for more.

---

The new Chisimba canvas: phase 1 complete Tweet
101 days ago

In keeping with my previous post on the idea of a Chisimba canvas, I have committed the first skin that starts to implement the canvas proposal. It still needs quite a bit of work, but it is good enough to give the basic idea of the canvas. So far, it only implements the most trivial features.

To test it, make sure that your core is up to date, install the canvas module. Select the skin 'Chisimba canvas POC' from
the dropdown or from the system configuration parameter. Then open your site as follows:

http://localhost/pathtochisimba/index.php?canvas=yellow
http://localhost/pathtochisimba/index.php?canvas=blue
http://localhost/pathtochisimba/index.php?canvas=red
http://localhost/pathtochisimba/index.php?canvas=_default

where pathtochisimba is the path to wherever your Chisimba install is located. Notice how the width changes in the blue one, and the layout changes in the red one. Notice the use of different images in the yellow one. Blue is a fixed width canvas within the canvas skin, and it is achieved by doing:
  .Canvas

within the stylesheet.css inside the blue canvas.


These are just skins within a skin right now, until the canvas code is more fully developed. However, you can get a feeling for the basic power of the canvas approach by creating a personal canvas.

To create a personal canvas, go to file manager in your Chisimba instance, and create a directory (folder) called canvases. Then, inside that directory, create two more directories to represent two canvases that you are going to test. Let's call them purple and green. On your computer, create a file called stylesheet.css and inside it, add  the following:

html, body

Upload it to the green canvas directory that you created above. Then change it to:

html, body

and upload it to the purple directory. Then, open your site as follows:

http://localhost/pathtochisimba/index.php?canvastype=user&canvasdir=purple

and then

http://localhost/pathtochisimba/index.php?canvastype=user&canvasdir=green

See what happens? OK, that is not very permanant. To select one of them to replace the default skin, select 'User' from the menu, and then 'User Configuration'.  Add a parameter called 'canvas' and enter its value as 'green' (or purple) and save. Now, browse to any place within your site, and as long as you are using the canvas skin, your site will display with your preferred personal skin.

Of course, your personal canvas doesn't have to just contain the body modifications, you can make it a full Chisimba skin with all the bells and whistles. Store your images in subdirectories off the canvases/canvasname directory, and use normal CSS to include them in your skin.

In the canvas, you have some layers that wrap the page, and that can be styled before and after the content container. They are:
.Canvas {
}

#Canvas_Content {
}

#Canvas_BeforeContainer {
}

#Canvas_AfterContainer {
}

In addition, the footer is wrapped in a layer with the id 'Canvas_AfterContainer'. Other container elements are still under development.

---

Using PodderLive! with #Chisimba Tweet
109 days ago

This is the last of my three posts about PodderLive! PodderLive! is designed for use in the classroom, but it can also be used to quickly and easily create podcasts from your desktop and publish them to a Chisimba server for example a Chisimba blog server such as http://www.dkeats.com or an eLearning server such as https://elearn.wits.ac.za/ or http://philippines.chisimba.com.
 
Podcasting with PodderLive! consists of a very simple process:

1. Set up your server connection details
2. Record
3. Add a title and tag
4. Publish

Unlike other tools for recording podcasts, there is no separation of recording, editing and uploading. This makes it ideal for classroom podcasting because the recorded lecture is available almost immediately to students.

In the instructions below, the steps refer to the numbers in the following image.

STEP 1: Set up your server connection details

Click the left-most icon or select configure from the menu. In the window that pops up, enter the URL for the server to which your podcast will be posted, as well as your username and password for that server. Note that if your Chisimba installation is in a subdirectory (something after the URL), it must be included and there must be a trailing slash. Without the trailing slash it will not work.

STEP 2: Record

Guess which button is the record button? Yes, you got it, the red one. When you click it, you will be asked for the location and filename to save. You can save it anywhere, but remember where you put it because you will need to browse to it in order to complete the last step.

STEP 3. Add a title and tag

Click the icon with the letter "a" on it, to get a popup window to add various metadata. At least you should add a title. Click OK to save it.

STEP 4. Publish

Click the icon with the up-arrow on it to publish your podcast.

Then you are done, and the podcast will appear on your server. You can also add it to your class, but you will need to do that from the Chisimba web interface for podcasts, as the uploader does not know about courses on the Chisimba site.

---

Next step in #Chisimba podcasting: installing #PodderLive! Tweet
117 days ago

Yesterday I wrote about a netbook-based podcasting system that can post easily to a Chisimba based server. It made use of the desktop client for Chisimba that we call PodderLive! Here I give a little more information about PodderLive! and show you how to download it and get it working on an Ubuntu machine. There is a Windows version, but I don't know anything about it, so I am not going to try to include it here.

PodderLive! is a Python application so it doesn't really need any installation, but it does need python and wxpython for it to work. You can install them from the Synaptic package manager or using the simpler command line:

      apt-get install python python-wxversion

Download PodderLive! from http://www.chisimba.com/usrfiles/users/9448100319/downloads/podderlive-3.1.1.tar.gz and save it somewhere, for example in your home directory. Using the command line, this will be:

      cd ~
      wget http://www.chisimba.com/usrfiles/users/9448100319/downloads/podderlive-3.1.1.tar.gz

Using file manager, move the file into your bin directory within your home directory. If you have no bin directory, make one. Using the command line, this would be:

      mkdir bin
      cp podderlive-3.1.1.tar.gz ~/bin/

Using file manager, right click on ~/bin/podderlive-3.1.1.tar.gz and choose 'Extract here' or use the command line:

      tar -xvzf podderlive-3.1.1.tar.gz

Now you can delete podderlive-3.1.1.tar.gz unless you want to keep it.

Next download http://www.chisimba.com/usrfiles/users/9448100319/downloads/podder and save it into you bin directory. Using the command line this will be:

      cd ~/bin
      wget http://www.chisimba.com/usrfiles/users/9448100319/downloads/podder

You can start it from a terminal by typing podder at the command prompt. Alternatively, you can add it to your menu. You can grab an icon to use for it as follows:

cd ~/bin
mkdir podder-icon
cd podder-icon
wget http://www.chisimba.com/usrfiles/users/9448100319/downloads/podcast-icon.png

Go to your menu editor, and add the programme /home/$USER/bin/podder
and use /home/$USER/bin/podder-icon/podcast-icon.png as the icon.

Thats it, now you are ready to use PodderLive! I will write some more about using it in my next blog post.

---

A portable classroom podcast system with #Chisimba and #PodderLive! Tweet
118 days ago

 

---

Proposal for a #Chisimba canvas Tweet
120 days ago

Currently in Chisimba, the model-view-controller architecture has been perverted from its original design. With the idea of a Chisimba canvas, I am proposing bringing back the sorts of ideas that were in the original design of Chisimba as conceived by Sean Legassick back when it was still called KINKY (Kinky Is Not KEWL Yet).

Apologies for the bullet points. Please note that this is a first stab, not a finished design.

The ideas presented here will mean that there is one way to interact with the Chisimba interface, and that it is consistant across all modules. It will mean quite a lot of work on modules that do not currently use this approach, but because the ideas are already implemented in some modules, it can be done initially as a dirty hack for some of them. Aside from functional improvements, this will make it a lot easier to make Chisimba skins, and to make flexible skins.

I have not elaborated on the idea of dynamic templates, but those would be templates where the design can change according to circumstances such as context, individual preference, etc. Dynamic templates would be saved in XML or database format.

---

Avoid bullet points Tweet
120 days ago

I try to avoid bullet points if at all possible. Here's why:

---

Fixing Chisimba for skinning, with a particular focus on eLearning modules Tweet
142 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.

---

Software developers who refuse to accept design is part of their job should go back to the 20th Century (#Chisimba) Tweet
145 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.

---