Mick Redman: January 2011

Monday 31 January 2011

Smooth fonts. No really! Just use Cufón.

There is a little pain in this exercise, but it genuinely works. It's worth it.

You see, when I'm at my day job, I have to use Windows. It's rubbish. And particularly rubbish is the way it handles fonts through a web browser. Even IE! Knowing that lots of other poor people have to use Windows, it's important to me to try and make the fonts of my site nice and smooth. I've done quite a bit of surfing on this, but I believe I've currently got the answer. Use Cufón. Available from http://cufon.shoqolate.com.

Step 1:
Find a TTF or OTF copy if the font you would like in your page. Yes, the file.
Step 2:
Go to http://cufon.shoqolate.com and get the latest version of the JavaScript file.
Step 3:
After the style references in your web page, add a reference to the newly downloaded JavaScript file thus:
<script type="text/javascript" src="cufon-yui.js"></script>

Step 4:

Convert your font by posting it up to http://cufon.shoqolate.com, remembering to check the boxes saying "The EULAs of these fonts allow Web Embedding" and "I acknowledge and accept these terms". Completing this process gives you a .js file for your font.

Step 5:

Add a reference to the .js file you got from http://cufon.shoqolate.com thus:

Step 6:

Add the necessary conversions to your page thus:

Cufon.replace('h1', { fontFamily: 'myNewFont' });

</script>

Step 7:

Below the body tag of your page, add the line:
<script type="text/javascript">Cufon.now();</script>

This is for IE. I know!

Behold! Smooth fonts for your website. Even in Windows!

Tuesday 25 January 2011

ccrypt to encrypt files

If you need to encrypt a file which contains personal data, you can use ccrypt. It's not installed by default on ubuntu so you'll have to do a:

sudo apt-get install ccrypt
but once done you can encrypt your file using

ccrypt -e filename
and decrypt using

ccrypt -d filename

How much RAM do I have on my GNU/Linux machine?

free -m
For a result like this
total used free shared buffers cached
Mem: 1899 1273 626 0 17 858
-/+ buffers/cache: 397 1502
Swap: 5561 23 5538

From gtk-recordmydesktop to youtube in one line

It's good to be back to being a GNU/Linux and in particular Ubuntu, home user.

When you record your screencast using gtk-recordmydesktop the ouput is an ogg file. Your file still needs to meet the needs of youtube if you are to vodcast. For this you will need a line like this....

mencoder oo1.ogg -oac mp3lame -ovc lavc -ofps 30 -vf scale=320:240 -o oo1.mpg

If you don't have mencoder, then you can install it using:

sudo apt-get install mencoder

Monday 24 January 2011

Four cornered web page

How do you add four different backgrounds as corners to your web page?
The answer is below. It even work in IE. You will have to create your own corner images.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4 corners</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
#topLeft, #topRight, #bottomLeft, #bottomRight
{
position:absolute;
width:100%;
height:100%;
}
#topLeft
{
background:url(topLeftCorner.png) no-repeat left top;
z-index:-10;
}
#topRight
{
background:url(topRightCorner.png) no-repeat right top;
z-index:-9;
}
#bottomLeft
{
background:url(bottomLeftCorner.png) no-repeat left bottom;
z-index:-8;
}
#bottomRight
{
background:url(bottomRightCorner.png) no-repeat right bottom;
z-index:-7;
}
#mainContent, h1
{
padding:2em;
}
</style>
</head>
<body>
<section id="topLeft"></section>
<section id="topRight"></section>
<section id="bottomLeft"></section>
<section id="bottomRight"></section>
<section id="mainContent">
<h1>Hello World!</h1>
</section>
</body>
</html>

Friday 21 January 2011

No I'm not going to title this post less is more

I have started to use less. No, I'm not completely useless. Less from lesscss.org "extends CSS with dynamic behavior such asvariables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js."

So below is an example of how to get started. First, you need to download less.js from lesscss.org. Let's say that we are going to put this .js file, our HTML file and our css file all in the same folder.

Once downloaded, I tend to rename the file less.js.

We then need to create our stylesheet. Our stylesheet can be named however we like but it must have the .less extension, so let's call it style.less. Once created we'll add the following lines:
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }

You can see from the lines above, that we have created a variable called @nice-blue and assigned it a value of #5B83AD. We have then created another variable called @light-blue and assigned it the value of @nice-blue + #111. We have then assigned the variable colour of @light-blue to the property color for the selector #header, which we will be using in our HTML page.

As you can imagine, once you've declared your variables this way, it's easier to use them over and over again. An this is just the start. You can also use 'mixins' such as two or more css classes being combined into one greater class. You can add 'Parametric Mixins', allowing you to pass parameters to css classes. There is so much more so go to the website and have a look.

We are now about to create our HTML page. At this stage, I should warn you that it's very important what order you declare the stylesheet and the script tag, otherwise it won't work, so please follow the example.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Less example</title>
<link rel="stylesheet/less" type="text/css" href="style.less" />

</head>
<body>
<p id="header">This should now be a nice light blue.</p>
</body>
</html>

Tuesday 18 January 2011

Using jQuery to create a dynamic Wordle button

Wordle is a great tool for creating interesting tag clouds. The example below contains a bunch of Lorem ipsum just so that there is some content to feed Wordle. This is followed by a button which creates a Wordle from the content. The jQuery takes the page content and applies it to the text field required by the Wordle service.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery","1");
google.load("jqueryui","1");
</script>
<script>
$(document).ready(function()
{
$('#wordleParam').text($('#mainContent').text());
});
</script>
</head>
<body>
   <section id="mainContent">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>

   <form action="http://www.wordle.net/advanced" method="POST">
   <textarea name="text" id="wordleParam" style="display:none;">
   </textarea>
   <input type="submit" value="Submit content to Wordle">
</form>
   </section>
</body>
</html>

Wednesday 12 January 2011

Semi-liquid Layout

The layout below offers 2 things. A liquid layout for the main content and a sticky header and footer. It works well across multiple screen resolutions including phones.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semi-liquid Layout</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
border:0;
}
body
{
background:#C23F67;
color:#FFFFFF;
}
hgroup, nav, footer
{
font-family:Helvetica, Verdana, Arial, sans-serif;
}
h1,h2
{
font-weight:lighter;
margin-left:0.2em;
}
h1
{
font-size:4em;
margin-top:0.5em;
}
h2
{
font-size:3em;
}
nav
{
   text-transform:lowercase;
   text-align:right;
border-bottom:0.1em solid #FFFFFF;
   position:fixed;
   right:0;
   top:0;
   width: 100%;
   _position: absolute;
   height:2em;
background:#000000;
}
nav a
{
   margin-left:0.25em;
   margin-right:0.25em;
   text-decoration:none;
}
#mainContent
{
   height:auto;
   padding-bottom:2em;
   clear:both;
}
#mainContent p
{
font-family: 'Droid Serif', arial, serif;
font-size:0.95em;
line-spacing:0.5em;
padding:0.5em;
text-align:justify;
}
img
{
margin:0.5em;
width:11em;
min-height:11em;
border-top:0.1em solid #FFFFFF;
float:right;
}
footer
{
   border-top:0.1em solid #FFFFFF;
   position:fixed;
   right:0;
   bottom:0;
   width: 100%;
   _position: absolute;
   height:2em;
background:#000000;
}
nav p, footer p
{
margin:0.25em;
}
</style>
</head>
<body>
<section id="container">
<nav>
<p>
<a>Home</a>
<a>Help</a>
<a>About</a>
</p>
</nav>
   <hgroup>
<h1 >header</h1>
   <h2>sub-header</h2>
</hgroup>
<section id="mainContent"><img />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</section>
</section>
<footer><p>Contact information</p></footer>
</body>
</html>

Smartphone and upwards

This layout works on the basis that smartphones have a minimum width of 480px or 30em. And so, this layout will happily work on anything greater than that. The result, no need to check which device is accessing it.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Smartphone and upwards</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
border:0;
}
body
{
background:#C23F67;
color:#FFFFFF;
}
#mainContent, hgroup, footer p, nav p
{
margin:0 auto;
width:30em;
}
hgroup, nav, footer
{
font-family:Helvetica, Verdana, Arial, sans-serif;
}
h1,h2
{
font-weight:lighter;
}
h1
{
font-size:4em;
margin-top:0.5em;
}
h2
{
font-size:3em;
}
nav
{
   text-transform:lowercase;
   text-align:right;
border-bottom:0.1em solid #FFFFFF;
   position:fixed;
   right:0;
   top:0;
   width: 100%;
   _position: absolute;
   height:2em;
background:#000000;
}
nav a
{
   margin-left:0.25em;
   margin-right:0.25em;
   text-decoration:none;
}
#mainContent
{
   height:auto;
   padding-bottom:2em;
   clear:both;
}
#mainContent p
{
width:18.5em;
float:left;
font-family: 'Droid Serif', arial, serif;
font-size:0.95em;
line-spacing:0.5em;
padding:0.5em;
text-align:justify;
}
img
{
margin-top:0.5em;
width:11em;
min-height:11em;
border-top:0.1em solid #FFFFFF;
}
footer
{
   border-top:0.1em solid #FFFFFF;
   position:fixed;
   right:0;
   bottom:0;
   width: 100%;
   _position: absolute;
   height:2em;
background:#000000;
}
nav p, footer p
{
margin-top:0.25em;
}
</style>
</head>
<body>
<section id="container">
<nav>
<p>
<a>Home</a>
<a>Help</a>
<a>About</a>
</p>
</nav>
   <hgroup>
<h1 >header</h1>
   <h2>sub-header</h2>
</hgroup>
<section id="mainContent">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<img />
</section>
</section>
<footer><p>Contact information</p></footer>
</body>
</html>

Monday 10 January 2011

jQuery Radio Buttons

Happy New Year!
It took me about 20 minutes to work out how to use radio buttons with jQuery. The examples I found were a bit rubbish, so I thought I would share this code with you to save everyone the time.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Radio Buttons</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(function ()
{
$("input[name='radioTest']").change(
function()
{
if($(this).val()=='yes')
{
alert('Yes');
}
else
{
alert('No');
}
});
});
</script>
</head>
<body>
Try this radio button<br />
Yes<input name="radioTest" type="radio" value="yes">
No<input name="radioTest" type="radio" value="no">
</body>
</html>