Wednesday 18 January 2012

Good Looking Content on Blackboard

Good Looking Content on Blackboard Learn 




Trying to make good looking content on a VLE is a difficult thing to do. On Blackboard Learn the HTML is strange because Blackboard replaces your text with, so called, smart text. The CSS is completely crazy and relies on in line CSS that doesn't always work. I managed to get a table cell to be yellow but when I tried it with a div it just didn't work.


So what are we to do about this?


Well the first thing I did was to take a step backwards and work purely with tables. In the good old days of web design we didn't have CSS. I agree that CSS is amazing and totally allows speedy web design. But I also know that the staff I work with as E-Learning Developer just wouldn't understand CSS. But we all work with tables in Microsoft Word.


It is therefore much more likely that the staff in my institution will understand the use of tables more than designing divs using CSS. It makes more sense to a teacher's mind to  use a table to position elements on a page. Although even this can be beyond some less IT literate members of staff.


I found that the best approach for me was to use a different table for each row that I wanted different cell divisions in. For example:

<table><tbody>
   <tr>
      <td>Header</td>
   </tr></tbody></table>
<table><tbody>
   <tr>
      <td>Picture</td>
      <td>Text</td>
   </tr></tbody></table>

I prefer this approach as it allows me to create table templates for staff to use within their design on the VLE. I realise that a member of staff could use the add table function of the Blackboard text editor but this is very difficult to use when you have no table borders as it is invisible.

Using my approach, a teacher could copy the code from notepad and paste it into the HTML editor on Blackboard. They can then go back to the standard text editor and highlight the text to replace. So to add a picture they highlight the Picture text and click "add picture" on the text editor.

This template based approach should make it easier for staff as long as they are taught how to use it properly.

Using this approach it is possible to begin to make good looking VLE elements. However, the difficulty comes from background images and textures. This is a real problem and does require CSS. My advice regarding this would be to create template styles and include the necessary CSS within the template.

The only way to get a consistent image throughout is to use a nested table but this causes some issues when making a template. The example would be:
   
<table><tbody><tr>
  <td style="background-image:url(https://yourbackgroundurl.jpg);">
      
<table><tbody>
   <tr>
      <td>Header</td>
   </tr></tbody></table>
<table><tbody>
   <tr>
      <td>Picture</td>
      <td>Text</td>
   </tr></tbody></table>

</td>
</tr>
</tbody></table>

As you can see, making this as an easy to use template for teachers is a difficult problem as they have to paste the template elements inside the encompassing table. This, again, would require training to enable the teacher to know where to paste which element within the HTML editor.

Lets not forget that the HTML editor on Blackboard is a difficult beast in itself. Once the teacher has pasted the templates and pressed submit, the whole HTML code will be made into single line code.
This means that editing an item can become a nightmare once it has been submitted. I am still considering how to deal with this issue. One consideration is to create the content layout within the HTML editor, add the images and text using the text editor, then go back to the HTML editor to copy and paste the results into N

No comments:

Post a Comment