In Part 2 we start with the some coding. To start the Football Boss project I use the Html 5 Boilerplate project with is available at http://html5boilerplate.com/. Please go and have a look at the site and especially the code. There are a few very interesting bits that developers forget to put into their web projects.
Anyway, back to Football Boss. Just for interest, I’m using Notepad++ on Windows 7 to code Football Boss. So, you can use your favourite text editor to follow.
In the default boilerplate code of the index.html page you will see the div with an id of container. This is where we will put our code for the page design.
<div id="container"><header></header><div id="main"></div><footer></footer></div> <!-- end of #container –>
Immediately you will see that we use some new Html 5 tags namely <header> and <footer>.
I quickly want to take you to the top of the page. Do you spot something different? In the Html 5 specification they have made the DOCTYPE short. <!doctype html> This short DOCTYPE indicate that the html should be parsed as Html 5. No version is specified so that the DOCTYPE will remain usable for future revisions of Html. Usually if you use XHMTL Transitional or Strict you would have to put this long DOCTYPE at the top of your page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Here are some additional changes that Html 5 brings:
- Attribute for language – <html lang=”en”> is all what is required for Html 5. xmlns or xml:lang is not required anymore.
- Attribute for Character Set – Define character encoding using the new charset attribute in meta tag: <meta charset=”utf-8” />
- Trailing slashes are not required – Void elements (e.g. br, img and input) don’t require a trailing slash.
- Deprecated elements: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u> and <xmp>
In part 1 I drawn a wireframe of what content I want and how the layout of the content should be on the page. For the initial design I hard code certain content that might be dynamic at a later stage and use dummy data that will be replaced with real data later on.
Firstly in the <header> tag I create a hgroup and h1 tag for specifying my page title. After that I add a paragraph with some text to check if JavaScript is enabled in the browser. If JavaScript is enabled then the JavaScript code will hide the paragraph.
<hgroup> = Group a set of h1-h6 elements.
1: <header>2: <hgroup>3: <h1>Football Boss - Choose a Team and let's play!</h1>4: </hgroup>5: <p id="jsnotice">6: Javascript is currently disabled.7: This site requires Javascript to function correctly.8:9: Please <a href="http://enable-javascript.com/" target="_blank"> enable Javascript in your browser</a>!10:11: </p>12:13: </header>
After header I define the page menu inside a <nav> tag that is new to Html 5.
<nav> = Specify navigation links.
1: <nav>2: <ul>3: <li>Home</li>4: <li>Contact</li>5: </ul>6: </nav>
After the navigation menu is the main div. Inside the main div I define two main sections namely football and instructions. If you look at the wireframe you see that we need two team tables and a field canvas. In the football section I define two sections and inside each section I define two tables to list the starting team players and reserves. In between the two team sections I define a canvas tag. On the canvas tag we will create the football match simulation.
In the instruction section I define a article tag with a header and paragraph that will explain to the user how to play Football Boss. As a extra bonus I added the new video tag to also show a video to the user on how to play the game.
1: <div id="main">2: <section id="foolball">3: <section id="team1">4: <table id="team1Table">5: <caption>Red Team</caption>6: <thead>7: <tr>8: <td>#</td>9: <td>Player Name</td>10: <td>Position</td>11: <td>Fitness</td>12: </tr>13: </thead>14: <tbody>15: <tr>16: <td>1</td>17: <td>Red Player 1</td>18: <td>GK</td>19: <td>100</td>20: </tr>21: </tbody>22: </table>23: <table id="reserve1Table">24: <caption>Red Team Reserve</caption>25: <thead>26: <tr>27: <td>#</td>28: <td>Player Name</td>29: <td>Position</td>30: <td>Fitness</td>31: </tr>32: </thead>33: <tbody>34: <tr>35: <td>14</td>36: <td>Red Player 2</td>37: <td>GK</td>38: <td>100</td>39: </tr>40: </tbody>41: </table>42: </section>43: <canvas id="fieldCanvas"></canvas>44: <section id="team2">45: <table id="team2Table">46: <caption>Blue Team</caption>47: <thead>48: <tr>49: <td>#</td>50: <td>Player Name</td>51: <td>Position</td>52: <td>Fitness</td>53: </tr>54: </thead>55: <tbody>56: <tr>57: <td>1</td>58: <td>Blue Player 1</td>59: <td>GK</td>60: <td>100</td>61: </tr>62: </tbody>63: </table>64: <table id="reserve2Table">65: <caption>Blue Team Reserve</caption>66: <thead>67: <tr>68: <td>#</td>69: <td>Player Name</td>70: <td>Position</td>71: <td>Fitness</td>72: </tr>73: </thead>74: <tbody>75: <tr>76: <td>14</td>77: <td>Blue Player 2</td>78: <td>GK</td>79: <td>100</td>80: </tr>81: </tbody>82: </table>83: </section>84: </section>85:86: <section id="instructions">87: <article>88: <header>89: <h2>How to play:</h2>90: </header>91: <p>92: Select a team and click Play!93: </p>94: <video>95: <source src="video/demo.mp4" />96: </video>97: </article>98: </section>99: </div>
As you can see it is allot of code. The following tags are all new Html 5 tags:
- <section> = define a section in the document.
- <canvas> = draw graphics with JavaScript on canvas.
- <article> = define unique article content.
- <video> = natively play video content.
- <source> = define media resources. Used between video and audio tags.
There are more new semantic tag from Html 5 spec:
After the main div we define the page footer. In the footer tag we add copyright content and later social icons or mailto link.
1: <footer>2: Copyright @ 2010 by Cecildt3: </footer>
That is the basic layout of Football Boss main page. Note that this is the initial design and some small changes to the semantics might change. If you open the index.html page in your favourite browser you would see the dummy content on the page, but the content has no styling yet.
In the follow up posts we will start to style each section with CSS 3.0. With the styling post I will go deeper into the new Html 5 tags and their attributes that is available. I will try to keep the styling post nice and short for each section.
I hope you see how Html 5 improves the semantics of the content on the page and that you enjoyed this post. Any suggestions and feedback are welcome!
Side note: Mozilla has started their GameOn competition. I will enter this Football Boss application, when I finish it, as my entry into the competition. For this reason I will provide the full source for the application to the public, but I keep the sole right to provide this application into any competition.
Cheerio!
Follow me on twitter: @cecildt
