Here’s a great HTML5 essentials web slideshow written by Marc Grabanski depicting the key elements to HTML5 development on the web.
Author Archive
‘Virtual human’ Milo comes out to play at TED in Oxford
None
Jul
14
The BBC have recently posted a really interesting article about Milo the “Virtual Human”. Milo responds to human interaction through voice, emotions and body movements using the Kinect Xbox motion controller.
Milo first came to the public’s attention in 2009 at the E3 expo. Since then it’s been pretty quiet with many people stating the technology didn’t work or it was a trick.
The latest BBC article show’s that Milo is back and that the technology is very real…
Check out the latest article, it’s pretty amazing: ‘Virtual human’ Milo comes out to play at TED in Oxford
or watch the video below:
HTML Character Reference
None
Jun
07
This is more for personal reference, but I thought I would share this site with the world.
Google Wave
15
Jun
09
I’ve just seen the keynote speach for Google Wave and I have to say it looks very powerfull. I’m definitely going to keep a close I on this project.
Flash Movies as Backgrounds
20
Oct
13
Ever wondered how to set a flash movie as your website background? Well here’s a simple approach that can be used.
The following tutorial will guide you through the process of “layering” a page in a way to give the appearance of a flash background.
The are however a couple of points that are worth noting. These include:
- Absolute positioning is used to add content above the flash movie. This therefore mean that the content is taken out of the flow of the document and when resizing the page content may be cut off unless a good workaround is used.
- UFO (Unobtrusive Flash Objects) is used to embed the flash background although you could, and probably should, use SWFObject instead.
flash background HTML
The HTML below provides a simple structure and can be broken in to two sections, a div with id “flash-background” (used to house the flash background) and a second div with an id of “website” (contains your site content).
<div id=”flash-background”></div>
<div id=”website”>
<div class=”text-content”>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras porta sem et ligula. Nunc nec neque. Ut nec justo non lorem porttitor dictum. Etiam nec dui et odio egestas ornare. Quisque magna augue, tristique vel, egestas ac, lacinia et, purus. Curabitur varius. Sed tempor. Integer bibendum leo at urna. Ut tortor. Cras lobortis justo non lacus.</p>
<div id=”website”>
<div class=”text-content”>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras porta sem et ligula. Nunc nec neque. Ut nec justo non lorem porttitor dictum. Etiam nec dui et odio egestas ornare. Quisque magna augue, tristique vel, egestas ac, lacinia et, purus. Curabitur varius. Sed tempor. Integer bibendum leo at urna. Ut tortor. Cras lobortis justo non lacus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras porta sem et ligula. Nunc nec neque. Ut nec justo non lorem porttitor dictum. Etiam nec dui et odio egestas ornare. Quisque magna augue, tristique vel, egestas ac, lacinia et, purus. Curabitur varius. Sed tempor. Integer bibendum leo at urna. Ut tortor. Cras lobortis justo non lacus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras porta sem et ligula. Nunc nec neque. Ut nec justo non lorem porttitor dictum. Etiam nec dui et odio egestas ornare. Quisque magna augue, tristique vel, egestas ac, lacinia et, purus. Curabitur varius. Sed tempor. Integer bibendum leo at urna. Ut tortor. Cras lobortis justo non lacus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras porta sem et ligula. Nunc nec neque. Ut nec justo non lorem porttitor dictum. Etiam nec dui et odio egestas ornare. Quisque magna augue, tristique vel, egestas ac, lacinia et, purus. Curabitur varius. Sed tempor. Integer bibendum leo at urna. Ut tortor. Cras lobortis justo non lacus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras porta sem et ligula. Nunc nec neque. Ut nec justo non lorem porttitor dictum. Etiam nec dui et odio egestas ornare. Quisque magna augue, tristique vel, egestas ac, lacinia et, purus. Curabitur varius. Sed tempor. Integer bibendum leo at urna. Ut tortor. Cras lobortis justo non lacus.</p>
</div>
</div>
flash background CSS
The CSS below is not very complex. Set your default styling on the body I.e. font size, colour etc. The flash background div is positioned absolutely in the centre of the page with a z-index of 0 and website div is also positioned in the centre of the page with a z-index of 10000 (obviously doesn’t have to be that high I just wanted to show that it was larger 
). CSS wise that is it, not very difficult at all.
body{
margin:0px;
padding:0px;
background-color:#666666;
font-family:arial;
font-size:80%;
color:#333333;
overflow:hidden;
}
#flash-background{
width:1014px;
height:960px;
text-align:left;
margin:0px auto;
position:absolute;
top:0px;
left:50%;
margin-left:-507px;
z-index:0;
}
margin:0px;
padding:0px;
background-color:#666666;
font-family:arial;
font-size:80%;
color:#333333;
overflow:hidden;
}
#flash-background{
width:1014px;
height:960px;
text-align:left;
margin:0px auto;
position:absolute;
top:0px;
left:50%;
margin-left:-507px;
z-index:0;
}
#website{
width:800px;
height:400px;
text-align:left;
margin:30px auto;
position:relative;
z-index:10000;
background-image:url(images/overlay.png);
background-repeat:no-repeat;
}
.text-content{
padding:15px;
}
JavaScript
Finally we need to embed the flash movie into the page, in the example below I have used UFO, however, I would strongly advise you to use SWFObject 2.0 as this is currently the best solution in the market.
var FO = { movie:"flash/background.swf", width:"1014", height:"960", majorversion:"8", build:"0", xi:"true", wmode:"transparent" };
UFO.create(FO, "flash-background");