Mick Redman

Monday 21 January 2013

Combining Twitter Bootstrap with Moodle

Moodle is an excellent LMS and Twitter Bootstrap an excellent page design framework so why not put them both together. Here's how.

Create a new theme location on your moodle installation by following these instructions. http://docs.moodle.org/24/en/Themes_FAQ#Why_is_the_new_theme_I_uploaded_not_showing_up_in_Theme_Selector.3F
You may suffer your new theme appearing with the name [[pluginname]]. If so, follow these instructions http://docs.moodle.org/dev/Themes#Getting_Your_Theme_to_Appear_Correctly_in_Theme_Selector
Download the Twitter Bootstrap theme from http://theming.sonsbeekmedia.nl/
Copy the contents of your downloaded theme into this directory.
Finally, you want to be in a situation where you can make your own small tweaks.
Open /theme/bootstrap/config.php
Add 'user_styles' to the end of the '$THEME->sheets' array.
Now create a file called /theme/bootstrap/style/user_styles.css. You can now put your tweaks in there such as:

p
{
font-family:Georgia,Serif;
}

Install and use LESSCSS on your ubuntu server

LESSCSS is an excellent progression in the development of stylesheets, but how do you install and use it on your ubuntu server?
The first thing we do is to install node-less. To do this through the terminal, use the command:
sudo apt-get install node-less
Right, that's the installation done. Yes, that easy.
Now let's create our LESSCSS stylesheet. Here is my simple example, which we'll put into a file named styles.less:

@blue:#00c;
@white:#FFFFFF;
body
{
background:@blue;
color:@white;
}

There are two ways of using LESSCSS.
The first way is to download, the less.js library from http://lesscss.org/, then simply refer to a LESSCSS stylesheet we created and subsequently call the library thus:.

<!DOCTYPE html>
<html lang="en">
<head>
<title>less test</title>
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
The second way is to compile our LESSCSS stylesheet into a normal CSS. To do this, again go to the terminal, change to the directory containing your page e.g.
cd /var/www/test/less
Then compile the LESSCSS stylesheet into a normal CSS like this:
lessc styles.less > mystyle.css
Now you can just call your newly created CSS in your page, but this time without the need for the less.js library thus:

<!DOCTYPE html>
<html lang="en">
<head>
<title>less test</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<p>Hello World!</p>
</body>
</html>

Thursday 6 December 2012

A Christmas Gift

Merry Christmas everyone! To celebrate, I have decided to give the second edition of my recipe book away for free. No catch. No asking for retweets. Links below:
Big Mick's Recipe Book epub
Big Mick's Recipe Book pdf

Tuesday 4 December 2012

Fullscreen presentations using twitter bootstrap and the HTML5 API

I can't take all the credit for this. I have to acknowledge the great work done by HTML5 Demos. What I did was, simplify some of the JavaScript and CSS. I then used Twitter Bootstrap as a template, so to make this work, you'll have to make that download. I also made use of the carousel library which came with Twitter Bootstrap. You'll also have to download jQuery and refer to it as I have.

Here's how it works. You load put the page in your browser. When loaded, you press the 'f' jey to make the page full screen. Press the 'enter' key to move forward through the slideshow. Press the backspace key to move back. Press the 'Esc' key when you've done.

I've tested it on Chrome and Firefox. I believe there's another popular browser, but it's not installed on my computer.

Anyway. Here's the code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fullscreen demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">

<style>
::-webkit-scrollbar
{
width:15px;
background:white;
}
::-webkit-scrollbar-thumb
{
box-shadow:inset 0 0 99px rgba(0,0,0,.2);
border:solid transparent;
border-width:6px 4px;
}
html, body
{
height:100%;
background:white;
overflow-y:auto;
overflow-x:hidden;
}
:-webkit-full-screen-document
{

}
:-webkit-full-screen:not(:root)
{
width:100% !important;
float:none !important;
}
:-moz-full-screen:not(:root)
{
width:100% !important;
float:none !important;
}
#fs:-webkit-full-screen
{
width:98%;
height:98%;
background-color:white;
}
.carousel-inner .item
{
margin-left:80px;
}
</style>


</head>
<body>
<div id="fs">
<div class="container">
<div class="page-header">
<h1>f for full screen, Esc for quit.</h1>
</div>
<div id="myCarousel" class="carousel slide">

<div class="carousel-inner">
<div class="active item">
<ul>
<li>First bullet</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>
<div class="item">
<ul>
<li>Fourth bullet</li>
<li>Fifth</li>
<li>Sixth</li>
</ul>
</div>
<div class="item">
<ul>
<li>Seventh bullet</li>
<li>Eighth</li>
<li>Ninth</li>
</ul>
</div>
</div>

<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
</div>
</div>


<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).keyup(function(event)
{
$('.carousel').carousel('pause');
if (event.keyCode === 13)
{
$('a.carousel-control.right').trigger('click');
}
if (event.keyCode === 8)
{
$('a.carousel-control.left').trigger('click');
}
});

var elem = document.querySelector(document.webkitExitFullscreen ? '#fs' : 'body');
document.addEventListener('keydown', function(e)
{
switch (e.keyCode)
{
case 70:
enterFullscreen();
break;
}
}, false);

function enterFullscreen()
{
if (elem.webkitRequestFullscreen)
{
elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
else
{
if (elem.mozRequestFullScreen)
{
elem.mozRequestFullScreen();
}
else
{
elem.requestFullscreen();
}
}
}
</script>
</body>
</html>

Wednesday 28 November 2012

Quick tip Replacing characters with a new line in Sublime Text 2

I use Sublime Text 2 all the time. I'm also give files all the time which need tweaking before they can be used. Yesterday someone sent me a bunch of e-mail addresses separated by semi-colons, but I needed the content instead to be separated by new line characters. Here's how I did it.
Open the file
Choose Find->Replace.
Then select the 'Regular Expression' button at the bottom left of the screen.
In the 'Find What:' field type your character. In my case it was the semi-colon.
In the 'Replace With:' field type \n
The click the 'Replace All' button.
Hey presto!

Tuesday 2 October 2012

Presenting MySQL table data through PHP, JSON and jQuery

This may seem like a long way round to do something, but believe me, it has its benefits if you are trying to deliver an open systems approach to your development framework.

Let's say I have a MySQL database with table called chat. The chat table has 3 fields; userid, entry and datesaved.

I create a PHP script called jsonout.php which returns all rows of the chat table, thus:

<?php
$con = mysql_connect('localhost','root','');
mysql_select_db('test', $con);
$result = mysql_query('SELECT * FROM `chat`');
while($rows[] = mysql_fetch_assoc($result));
array_pop($rows);
mysql_close($con);
echo json_encode($rows);
?>

Notice the final line (in red) where I return a JSON encoded version of the resulting array.

Now my HTML page (below) can collect the JSON through jQuery and present the results on the page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple JSON retrieval through jQuery</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font:10px/15px Sans-serif;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
</head>
<body>
<script>
(function()
{
$.getJSON('jsonout.php', function(data)
{
$.each(data, function(i, items)
{
$('body').append('<p>'+items.userid+'</p>'+items.entry+'<p>'+items.datesaved+'</p>');
});
});
})();
</script>
</body>
</html>

Monday 1 October 2012

Simple JSON retrieval through jQuery

This page explains how to retrieve some simple JSON data and append it to a page. First the JSON through a script called jsonout.php

{
"one": "Singular sensation",
"two": "Beady little eyes",
"three": "Little birds pitch by my doorstep"
}

Now the HTML with jQuery to retrieve and display it within the page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple JSON retrieval through jQuery</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font:10px/15px Sans-serif;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
</head>
<body>
<script>
(function()
{
$.getJSON('jsonout.php', function(data)
{
$.each(data, function(key, val)
{
$('body').append('<p>'+key+':'+val+'</p>');
});
});
})();
</script>
</body>
</html>