Moved to Google Chrome

Google Chrome

Well, the day has finally come. I have moved over to using the Google Chrome web browser. What made the difference I hear you ask? The extensions became good enough and the devleoper tools are as good as firebug.

Tonight I will move my macbook over.

End of story.

First blog entry using OpenOffice

Yes. Here it is. My first blog entry using OpenOffice. It's using an OpenOffice Extension from Oracle/Sun found here http://extensions.services.openoffice.org/project/swp

Log directly into a moodle course from an external domain

I have been searching the moodle forums for this for about 2 months now. Sometimes I would find a nice short answer like "it cant be done". Sometimes there would be a fairly complicated solution, and sometimes a nice easy one, but in either case it didn't work on my, fairly vanilla installation.

The problem I was trying to overcome was this. I wanted to create an external for to my moodle course. Once the user has filled in the form, they should be taken straight to the course, not to be given another link to the course.

Here is how to do it, simply.
The login page should have something like this in it.

<form action="http://yoursite.com/exactLocationYouWantTheUserToArriveAt" method="post">
<fieldset>
<label for="username">Username:</label>
<input id="username" name="username" type="text" />
<label for="password">Password:</label>
<input id="password" name="password" type="password" />
</fieldset>
<fieldset><input type="submit" value="Login" /></fieldset>
</form>

Then you want to look for the directory of the theme you are using for your moodle course. In there you will find a file called header.html which you need to edit.
As the first item of JavaScript, just below the meta tags, you need to apply code like the one below.
<script type="text/javascript">
var str = document.referrer;
if(str.substring(7,25)=="domainOfTheExternalForm.com")
{
window.location = "/exactLocationYouWantTheUserToArriveAt";
}
</script>

This should take you from a form on an external to the course of your choice.

Moodle changes

Performance Improvements

Variable	From	To
upload_max_filesize	2M	20M
max_execution_time	30	600
post_max_size	8M	20M

Change made to /usr/moodle/moodle-one/lib/htaccess

uncommented php_value upload_max_filesize 2M

and set it to

php_value upload_max_filesize 20M

Style changes

For most things
/usr/moodle/streamer/theme/STREAM-IDC/user_styles.css

For the input tinyMCE boxes:
/usr/moodle/streamer/lib/editor/htmlarea/htmlarea.css

For the questionnaire
/usr/moodle/streamer/mod/questionnaire/css/default.css

Using jQuery to overcome IE deficiencies

OK. Here is my attempt to add some code to the blog.
I recently faced a problem that IE doesn't really support the visibility style properly. Now you can't really have conditions in your CSS code. I have always found a problem with using those awful !IE comments in the HTML head.

What you can do is add CSS elements to your page using jQuery. You can therefore put conditions in your jQuery and apply one type of style to IE and another to browsers which are prepared to work within W3C standards.

if($.browser.msie)
{
$("#myID").css("display","none");
}
else
{
$("#myID").css("visibility","collapse");
}

Lessons Learned Creating a Browser Test Using XHTML, PHP and JavaScript

You're going to need information delivered by the client useragent going into PHP. To do this add the following code
$cua = $_SERVER['HTTP_USER_AGENT'];
You then need to strip out the various parts you're going to need. See image below.


For example, I stripped out the items between the brackets and added them to an array.
using things like stripos($ua, '(');
Here we start to find a few Windows issues.
If you also need to know what Window version your are using you will need to take the Platform token and interpret it. Eg
'Windows NT 6.1' = 'Windows 7'
'Windows NT 6.0' = 'Windows Vista'
'Windows NT 5.2' = 'Windows Server 2003 or Windows XP x64 Edition'
'Windows NT 5.1' = 'Windows XP'

Another Windows problem. If you put your browser test on a server IE version 8.0 can report itself as IE 7.0. So you need to pick out the word 'trident' from your user agent and force it to appear the browser such as this JavaScript which you can change for PHP:
string browserType = Request.Browser.Type;
// IE8 is not reported in browser type but it can be detected
// by word "Trident" in the user agent if (Request.UserAgent.ToUpper().Contains("TRIDENT")) browserType = browserType.Replace("IE7", "IE8");

That's all for now.

How to create a semi-transparent png for your web page

Things you'll need

• A proper graphics editor link GIMP.
• A proper web browser like Mozilla Firefox.
• A proper text editor like gedit.

Graphics Steps

1. Open up GIMP.
2. Create a new image. When you do this you are offered size etc, but there is also an advanced section which you need to open. Choose to have a transparent background.
3. Add a new layer to your image.
4. Now, on the new layer add a shape. First choose the colour you want your shape to be. Then choose the shape. Create the shape on your image.
5. In the layer window you should now be able to change the opacity of your layer. Move it down to about 50%.
6. Save you image as a png.

The HTML Steps

1. Create a simple HTML page.
2. Create a div and give it an id.
3. Create a reference in your HTML Head to a style sheet.

The CSS Steps

1. Create a .css file with the same name as you referred to in your HTML page.
2. In your css file create an entry for the body of your page and add a coloured background. Just so that you can see the semi-transparency.
3. Now create a reference to the div you created in your HTML page.
4. In the reference for your div add a reference to the background image you created in your image editor.

Review
Now save everything and preview it in your web browser.
For a further test add some text your your div.

Done.