BigGiantCrayon Network

Getting to Grips with HTML5 – Part 3

David Turner — Fri, 09 Jul 2010 12:20:08 +0000

Well this article has been a while in coming. One of the side effects of freelancing is that, sometimes, you have to set aside some of your other projects to let yourself meet client deadlines. Fortunately I have been making progress with this article throughout this time, and I’m finally in a position to dedicate some time to getting this article live.

In case you haven’t been following the series, in Parts 1 & 2 I have been dealing with some of the basic aspects of HTML5, covering the aspects of HTML5 support in Part 1 and discussing the changes that exist between XHTML and HTML5. Today’s article focuses on what I believe to be an interesting topic, how to convert an already existing XHTML Site into an HTML5 design.

Quite some time ago now I asked on Twitter for suggestions about sites that I could use as the basis of this article. David Hatch, the person responsible for the hosting of this very site, suggested another of his sites as the basis of the article. MiniGameReviews is a web site that reviews games in 140 characters or less, rating them on a scale of 0 to 9.

Small Steps – Clean Slate

There are two ways to go about converting a site. You can either work through manually converting the existing code over, or you can recode things from scratch. Whilst it might seem odd to recode something that already exists, it is my experience that it’s generally less problematic in the long term, and can be much easier to develop quickly. It’s also the approach that I will be taking with this article.

Over Time I’ve put together a series of templates that I make use of for helping me develop sites. These templates cover elements of both HTML and CSS. Some aspects of the design are based on the 960 Grid System to help in terms of layout, as well as Eric Meyer’s CSS reset modified to handle the new HTML5 Elements. At this point we have two files, which look like the following:

HTML5 Template

This provides for the basic structure of a site’s design. It covers the HTML5 DOCTYPE as well as the majority of the head section of the site, with some added jQuery script capabilities added in just before the end of the site. This is done to ensure a quick loading time for the content of the site, which stands out to me as the most important aspect of any site.

CSS

 /******** GLOBAL RESET ********/
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,header,section,footer,aside,nav,article,figure {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}

body {line-height:1}

header,section,footer,aside,nav,article,figure {display:block}

ol,ul {list-style:none}

blockquote,q {quotes:none}

blockquote:before,blockquote:after,q:before,q:after {content:''}

/* remember to define focus styles! */
:focus {outline:0}

/* remember to highlight inserts somehow! */
ins {text-decoration:none}

del {text-decoration:line-through}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse:collapse;border-spacing:0}

/******** 960 GRID ********/

.container_12,.container_16 {margin-left:auto;margin-right:auto;width:960px;overflow:hidden}

.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16 {display:inline;float:left;margin-left:10px;margin-right:10px;width:auto}

.container_12 .grid_3,.container_16 .grid_4 {width:220px}

.container_12 .grid_6,.container_16 .grid_8 {width:460px}

.container_12 .grid_9,.container_16 .grid_12 {width:700px}

.container_12 .grid_12,.container_16 .grid_16 {width:940px}

.alpha {margin-left:0}

.omega {margin-right:0}

.container_12 .grid_1 {width:60px}

.container_12 .grid_2 {width:140px}

.container_12 .grid_4 {width:300px}

.container_12 .grid_5 {width:380px}

.container_12 .grid_7 {width:540px}

.container_12 .grid_8 {width:620px}

.container_12 .grid_10 {width:780px}

.container_12 .grid_11 {width:860px}

.container_16 .grid_1 {width:40px}

.container_16 .grid_2 {width:100px}

.container_16 .grid_3 {width:160px}

.container_16 .grid_5 {width:280px}

.container_16 .grid_6 {width:340px}

.container_16 .grid_7 {width:400px}

.container_16 .grid_9 {width:520px}

.container_16 .grid_10 {width:580px}

.container_16 .grid_11 {width:640px}

.container_16 .grid_13 {width:760px}

.container_16 .grid_14 {width:820px}

.container_16 .grid_15 {width:880px}

.container_12 .prefix_3,.container_16 .prefix_4 {padding-left:240px}

.container_12 .prefix_6,.container_16 .prefix_8 {padding-left:480px}

.container_12 .prefix_9,.container_16 .prefix_12 {padding-left:720px}

.container_12 .prefix_1 {padding-left:80px}

.container_12 .prefix_2 {padding-left:160px}

.container_12 .prefix_4 {padding-left:320px}

.container_12 .prefix_5 {padding-left:400px}

.container_12 .prefix_7 {padding-left:560px}

.container_12 .prefix_8 {padding-left:640px}

.container_12 .prefix_10 {padding-left:800px}

.container_12 .prefix_11 {padding-left:880px}

.container_16 .prefix_1 {padding-left:60px}

.container_16 .prefix_2 {padding-left:120px}

.container_16 .prefix_3 {padding-left:180px}

.container_16 .prefix_5 {padding-left:300px}

.container_16 .prefix_6 {padding-left:360px}

.container_16 .prefix_7 {padding-left:420px}

.container_16 .prefix_9 {padding-left:540px}

.container_16 .prefix_10 {padding-left:600px}

.container_16 .prefix_11 {padding-left:660px}

.container_16 .prefix_13 {padding-left:780px}

.container_16 .prefix_14 {padding-left:840px}

.container_16 .prefix_15 {padding-left:900px}

.container_12 .suffix_3,.container_16 .suffix_4 {padding-right:240px}

.container_12 .suffix_6,.container_16 .suffix_8 {padding-right:480px}

.container_12 .suffix_9,.container_16 .suffix_12 {padding-right:720px}

.container_12 .suffix_1 {padding-right:80px}

.container_12 .suffix_2 {padding-right:160px}

.container_12 .suffix_4 {padding-right:320px}

.container_12 .suffix_5 {padding-right:400px}

.container_12 .suffix_7 {padding-right:560px}

.container_12 .suffix_8 {padding-right:640px}

.container_12 .suffix_10 {padding-right:800px}

.container_12 .suffix_11 {padding-right:880px}

.container_16 .suffix_1 {padding-right:60px}

.container_16 .suffix_2 {padding-right:120px}

.container_16 .suffix_3 {padding-right:180px}

.container_16 .suffix_5 {padding-right:300px}

.container_16 .suffix_6 {padding-right:360px}

.container_16 .suffix_7 {padding-right:420px}

.container_16 .suffix_9 {padding-right:540px}

.container_16 .suffix_10 {padding-right:600px}

.container_16 .suffix_11 {padding-right:660px}

.container_16 .suffix_13 {padding-right:780px}

.container_16 .suffix_14 {padding-right:840px}

.container_16 .suffix_15 {padding-right:900px}

At this point there’s no content and a rather excessive amount of CSS code to handle all of it. CSS Frameworks tend to result in a lot of excessive code but this is something to deal with later, by removing any unnecessary code from the CSS after the project is completed.

Why after? Whilst you may think that you know what you want to use in your design, things may change, or evolve, over the course of the design. It’s better to not need something and have it than need something and for it to not be there.

Adding Structure & Content

Now that we have the basic elements of the site in place, we can start to add in some actual structure and content into the design. One of the nice things about making the move from XHTML to HTML5 is that, for the most part, the content of the site can be easily reused, which very little effort required. This is exactly the case with this site, converting a few div elements into headers, sections asides and articles and the vast majority of the HTML layout is complete. At this point, even without styling, you can see the comparisons between the shapes and layout of the site.

From this point, all that remains is the CSS styling to provide the look and feel to the site, making it look like the original design. For the most part this is the same as with the HTML elements of the site, changing a few divs into other elements to ensure they are styling the right elements as well as, in this case, adjusting some numbers to match with the changes I made to the layout, making use elements fit together properly. With that, the process is pretty much complete. The current version of the site is available to be viewed here and the HTML5 version of the site can be found here.

Conclusions

On the whole there’s not a great amount of difference between a site coded using XHTML and a site produced using HTML5. There are a few differences, mainly with the elements used for site structure. Whilst there are other advances made with HTML5, such as audio and video elements, they aren’t used in this particular design.

360 #StarTrek Legacy The Ships…

udoh — Mon, 28 Jun 2010 11:23:53 +0000

360 #StarTrek Legacy The Ships look, play, sound like they should, it’s flawed but for a Star Trek fan, worth playing if you get it cheap. 4

XBLA #DefenseGrid WANTED: Alie…

udoh — Tue, 22 Jun 2010 14:41:45 +0000

XBLA #DefenseGrid WANTED: Aliens to run & die in wave after wave. Will Supply own towers to slow your progress. Awesome and cheap game. 9

XBLA #ShadowComplex It’s much …

udoh — Thu, 17 Jun 2010 14:07:03 +0000

XBLA #ShadowComplex It’s much more than a 2D platform shooter. It has more features, powerups & a better story than most full price games. 8

Google Foo

Simon Fraser — Wed, 09 Jun 2010 09:20:11 +0000

Google announced some quite amazing technology upgrades yesterday, introducing a new search indexer called “Caffeine”. Googles Indexer is the way in which they find and organize the entire Internet into the list we are used to seeing on Google.

To everyone that uses Google on a daily basis, and lets face it that IS Everyone, this means the results will be more on topic and apparently up to 50% faster.

There reasoning behind building the whole system behind Google again was down to the web “blossoming” and growing, this means they can now keep on top of things and even search in real time.

“To keep up with the evolution of the web and to meet rising user expectations, we’ve built Caffeine. The image below illustrates how our old indexing system worked compared to Caffeine:”

Google continues to grow in every way and are not only set on their new products and services but are determined to stay the Internet search engine of choice and make things better for everyone.

The scary thing about what Google said is about the amount of data they index and process each day, “If this were a pile of paper it would grow three miles taller every second” or “You would need 625,000 of the largest iPods to store that much information; if these were stacked end-to-end they would go for more than 40 miles”
So apparently Google have some unused iPods going now, who would like one?..

The Official Release

360 #Forza2 A very good Racing…

udoh — Mon, 07 Jun 2010 10:47:32 +0000

360 #Forza2 A very good Racing Sim, but not as good as #Forza3 If you are on a budget, this is the one too go for. Loads of Cars on offer 6

360 #RedDeadRedemption MP Conn…

udoh — Wed, 02 Jun 2010 09:24:39 +0000

360 #RedDeadRedemption MP Connection issues at the moment, lets down a fantastic MP experience,riding around as a Posse is just great fun. 5

Getting to Grips with HTML5 – Part 2

David Turner — Tue, 01 Jun 2010 10:53:45 +0000

In my previous article I covered the support the most common browsers have when it comes to HTML5, and how to work around some of the biggest problems you’re likely to encounter with some browsers. Today we’ll be taking a closer look at the actual changes HTML5 will bring to coding websites, and how easy it is to prepare to use HTML5 in your current and upcoming projects.

HTML5 – What’s New?

HTML5 introduces, changes and, in some cases, removes things. It streamlines some old elements and expands into new, more semantic areas. As I mentioned in the last article, there are new elements to help you set up basic areas of the site, such as the header, navigation, sidebars, content articles and footers. But there is a great deal more available. Let’s take a look, shall we?

Back to Basics – DOCTYPE

Some of the following may look familiar to you:

What’s that? They do? Any web designer who knows anything about coding understands the necessity of having a DOCTYPE declared for a web site. It helps to ensure things work properly in browsers, and lets them know what’s coming up in the code. HTML5 has a DOCTYPE too, though I’m sure this doesn’t shock you in the slightest. But things have changed. Things have improved. Want to see the HTML5 DOCTYPE? Here it is:

Complicated, isn’t it? All it does is tell the browser that it’s viewing an HTML document, and you’re golden.

Letting things go to your

The head section of the site is an important one. It contains a great deal of information about the site, including information about the character set that your site is using. It also contains some important information that is useful for helping identify & display your site, covering things such as your title, your style sheets, favicon and information about the content of the site, in the form of meta tags and descriptions. Some people, though not all, use it as an area to place their JavaScript.

HTML5 helps strip away some elements from this section, and helps streamline others. Below is an example of the code for a pretty standard XHTML Site:



	
		
		Page Title

Let’s compare that to how the template for my own site demos looks, just for comparison purposes, shall we?



	
		
		Page Title

There’s not a whole lot of difference between the two. The HTML5 declares the language is in and also specifies, in less space, the character set that will be used. The remaining content remains pretty much identical regardless. It should be noted, just for ease of use, I have continued using the self-closing / at the end of elements as was the norm with XHTML. This isn’t required with HTML5, it’s just something I have grown accustomed to over the years.

Wait… I spy JavaScript!

That’s correct, you do. I covered in the last post that Internet Explorer doesn’t currently support HTML5 in any version currently available. The workaround for it consists of some JavaScript which forces these browsers to recognise the elements. Support for HTML5 elements is a part of Internet Explorer 9 but, so far as I am aware, there is no release date set yet. This means that if you hate JavaScript, HTML5 is currently off limits to you.

Most people, however, are all about the

Cheap pun I know, but when it comes to web design it is almost all about the body. Your users don’t see your header. They don’t see your CSS or your JavaScript. What they do see, however, is the body content of your site and the effects of your styling and your JavaScript. So what has changed here?

In the grand scheme of things, not a whole hell of a lot. Everything you used before in creating a web site will work exactly the same in HTML5 as before. It’s part of the beauty of it all. You don’t need to learn anything new, but it adds a great deal of new tools to your set. Let’s take a look, shall we?

Out with the old (and in with the new)

HTML5 doesn’t change the game a whole lot with regards to layout and structure. It merely neatens things up and makes things more consistent. To do this there are several elements removed in the HTML5 specification but, to be honest, I’ve not encountered many of them at all in recent years and none are likely to be missed. The list of removed elements in HTML5 consist of:

basefont
big
center
font
s
strike
tt
u
frame
frameset
noframes
acronym
applet
isindex
dir

Honestly, I’m not going to be missing any of these elements as they have either been irrelevant for quite some time, courtesy of CSS, or superseded by newer technologies. As much as there has been stuff removed, there have also been some new elements added in that you are able to use. Some exist to make laying out your design more semantically, some exist to make your contents easier for search engines to understand and some, such as the video and audio tags, exist to make it easier for you to add multimedia to a page. The main new elements that you should concern yourself with, at this point, are:

section
article
aside
header
footer
nav
figure
figcaption
video
audio
time

Whilst there are several others, several of these aren’t currently supported enough to make them usable. I would expect this to change over the coming months. In addition to new elements there are also new attributes for elements. Whilst many of these aren’t supported yet, or are self explanatory, it is possible to make use of some of them to help future-proof your code.

This is especially true with form elements, as unsupported input types default to text inputs when they are unsupported in current browsers. It should be noted that this can cause problems with certain JavaScript Plugins from libraries such as jQuery and Mootools, as these often specify which elements they support.

New Ways to Embed

HTML has always provided way to provide various types of content. Images are as simple as using the img tag. HTML5 looks to expand beyond this introducing methods to embed both audio and video in web pages. This area of the HTML5 spec is currently undergoing some shifts and is a topic I intend to cover at a later date in more depth.

Coming Soon!

I had intended to cover the ins and outs of making the shift to HTML5 in this article. Clearly this hasn’t happened. In writing this article I believed that it was getting to be a bit unwieldy in terms of length and structure, covering too much in one go. As a result I will be covering shifting from XHTML to HTML5 in my next article, paying more attention to the code aspect rather than discussing what has changed.

References

Anne van Kesteren. 2010. HTML5 differences from HTML4. [ONLINE] Available at: http://www.w3.org/TR/html5-diff/#backwards-compatible. [Accessed 28 May 10].

360 #RedDeadRedemption SP Awes…

udoh — Tue, 01 Jun 2010 07:48:17 +0000

360 #RedDeadRedemption SP Awesome Wild West Free Roam with Gunplay and Horses. The same control flaws as GTA. Never feel part of the Story 8

360 #CallofDuty4 MP It’s like …

udoh — Fri, 28 May 2010 11:01:45 +0000

360 #CallofDuty4 MP It’s like the #WoW of FPS games. Fast paced, hard at the lower levels, but gets easier, Be prepared to die a lot. 8