HTML 5 Journey Part 1 – What is HTML 5 tutorial

I’ve always liked web development (from a gaming perspective), but not to the same extent as I have good old solid native development with C++. The main reason being “JavaScript”. To be honest, I did JavaScript years and years ago and it terrified me, I couldn’t get used to not having pointers and variables that have a set type amongst other things. The main problem however for me has always been speed, if I want to make a game I want to provide a good interactive experience without loads of lag, slow frame rates and dodgy access to things like audio playback and input. So, for years I avoided client side JavaScript and the DOM and went with Java Applets, which seemed great, nice and quick, good frame rates, can render 2D and 3D, access to I/O etc.., but if I remember correctly there were browser security issues, oh and it crashed (or refused to load) across different browser versions. After a while mucking around with applets I went to Microsoft Silverlight, followed it for a few years, made some nice things with it but then Microsoft dropped support for it in favour of HTML 5! (How can I ever forgive you Microsoft!) Now everyone and their grand mothers seem to be bending over backwards to support HTML5, so I feel like its time to finally take a good look at this newish technology and see what I can do with it.

This blog series is going to cover my noobish attempts to learn how to use HTML5 / JavaSctipt with possibly a little PHP back-end junk thrown in. At the end o the blog series I will probably revisit the series and tidy up so I can mislead as few developers as possible!

Right waffle over, on with something useful.

What is HTML5

Well, I’ve purchased various HTML5 books and started to read them, missing my C++ and the Marmalade SDK already. I’ve come to the conclusion that HTML5 is a bunch of things:

  • Well it uses HTML5 mark-up to begin with, but some new cool tags have been added to provide access to stuff like a drawing canvas and video playback
  • Cascading style sheets (CSS3), this is a language that you use to add style to the various HTML page elements
  • JavaScript, this is the language used to manipulate the HTML of the page and what not

How do I create an HTML 5 page?

Simple, create a text file using any old text editor (I use Notepad++ as it has syntax highlighting for HTML, CSS and JavaScript) and called it something,html. You can open this file in a browser to view the page which as Mrs Brown says is nice.

Here’s an example HTML5 page that does absolutely nothing useful:

[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 for absolute noobs (I appear in browser bar)</title>
</head>
<body>
<h1>HTML5 for absolute noobs header</h1>
<p>
HTML5 for absolute noobs paragraph
</p>
</body>
</html>
[/sourcecode]

What does all this junk mean? Lets take a look at it in sections.
Line 1 – This tells the browser that this is an HTML 5 document
Line 2 – The html tag tells the browser that the stuff in this section contains HTML
Line 3 – The head tag contains things like the page title, which scripts and style sheets to include
Line 4 – The meta tag describes metadata such as the character set that the document uses
Line 5 – The title tag is the title of the page, this is usually displayed in the browser title bar
Line 6 – Closes the head tag
Line 7 – The body tag contains the main body of the document, basically all of the text, images and so on
Line 8 – The h1 tag designates whatever is inside it as a level 1 header and will be styled as such, usually large and bold unless redefined with a style
Line 9 – The p tag begins a new paragraph on the page
Line 10 – Some content to display in the paragraph
Line 11 – Ends the paragraph
Line 12 – Ends the main body
Line 13 – Ends the html document

How do I add some style to my web page?

Well to begin with we will add some style to the previous example to make it look a little colourful. We will use what’s called inline styling. This is when you are too bone idle to create a style sheet and link it into your document. Lets take a look at an impossibly useless example:

[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 for absolute noobs (I appear in browser bar)</title>
</head>
<body>
<h1 style="color:green;">HTML5 for absolute noobs header</h1>
<p style="color:blue;">
HTML5 for absolute noobs paragraph
</p>
</body>
</html>
[/sourcecode]

if you are as observant as I then you may notice that two lines in the code have changed:
Line 8 – We have added an attribute called style then stuck some stuff into quotes. We basically tell the browser to change the colour of the text in the h1 tag to green
Line 9 – We have also added the style attribute here, but changed the text colour to blue instead

How do I style stuff using CSS instead of inline styles?

Most web developers prefer to use a style sheet to style elements of the web page, which I am guessing when my web page becomes bulky and very scarey will make it much easier for me to change the look of my web page without having to go through and change every single style that I set. A style sheet is basically a text file with the extension .css that you include in your html document. You include a style sheet like this:

[sourcecode language=”html”]
<head>
<meta charset="utf-8">
<title>HTML5 for absolute noobs (I appear in browser bar)</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
[/sourcecode]

Inside our header tag we have added a link to a style sheet called styles.css. When the page is loaded this style sheet will be loaded and all styles within it will be applied to elements of the page. If the style sheet does not contain styles for elements that are on the page then they will get the good old default ugly style. Lets take a look at an example style sheet:

[sourcecode language=”css”]
h1 {
color: green;
}
p {
color: blue;
}
[/sourcecode]

In the above style sheet we list the h1 tag and then place a bunch of attributes that we want to redefine along with their values separated by the colon character inside braces. The only problem with this is that it will change the colour of all h1 and p tag content that’s on the page, which is great if that’s what you want, but not so good if it isn’t.

To get around this you can name your elements and then simply define a style for the named element. Lets look at an example:

[sourcecode language=”html”]
<h1 id="header1">HTML5 for absolute noobs header</h1>
<h1>I refuse to have style!</h1>
[/sourcecode]

[sourcecode language=”css”]
#header1 {
color: blue;
}
[/sourcecode]

We have named the first h1 tag header1 using the id attribute. We can refer to this named element in the css file by placing a hash character in front of the name.

There’s a ton of other stuff that you can do with CSS from what I understand, but I’m not clever enough to go into that just yet, maybe in a later article.

How do I get some JavaScript code into my web page?

There are two ways, you can use inline JavaScript, this is code that you write directly into the html document, which can get rather messy. Theres also the much cleaner and user friendly way of including a JavaScript file into the document rather like we did with the style sheet. Lets take a look at inline JavaScript first. Run the following html:

[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 for absolute noobs (I appear in browser bar)</title>
</head>
<body>
<h1 id="header1">HTML5 for absolute noobs header</h1>
<p>
HTML5 for absolute noobs paragraph
</p>
<script>
document.getElementById("header1").style.color = "blue";
</script>
</body>
</html>
[/sourcecode]

At lines 12-14 we have inserted a script tag containing a single line of script. The script itself looks for an element called header1 then changes the color attribute of its style to blue.

Now lets take a look at an example where we use common sense and decide to put our code into a separate script file. Create the following two files (test.html and code.js) then open the html file in a browser:

[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 for absolute noobs (I appear in browser bar)</title>
</head>
<body>
<h1 id="header1">HTML5 for absolute noobs header</h1>
<p>
HTML5 for absolute noobs paragraph
</p>
<script type="text/javascript" src="code.js"></script>
</body>
</html>
[/sourcecode]

[sourcecode language=”html”]
document.getElementById("header1").style.color = "blue";
document.write("Hello World");
[/sourcecode]

At line 12 of the html file we have still got a script tag, but instead of placing our script inside the script tag, we have moved it out into its own file and included the script file into the html document.

Well, I’ve had enough for one evening, my feet ache. I stand at my desk instead of sitting because I’m into self punishment. I hope to cover something a little more interesting next time, maybe take a look at the DOM.

Oh, do I care about typos and bad spelling / grammar? No, if I did then I would have become an English teacher and not a programmer!

Goji Editor the game IDE update

Just a quick heads up on the direction of the Goji Editor. With the news of a free Marmalade SDK license becoming available, I am going to rework Goji to integrate much more tightly with the Marmalade SDK. This will include features such as:

  • Integration into the Marmalade build and deployment system, enabling deployment to all Marmalade supported platforms
  • Test / debug using the more capable Marmalade simulator
  • Development using C++ as well as Lua and XOML
  • Deployment to device from the editor
  • In depth publishing options which enable you to set up all of the different Marmalade deployment options more easily
  • Marmalade code snippets / help / tutorials to aid development
  • Code samples / tutorials section
  • EDK builder to assist in the creation of Marmalade extensions

Other game development systems such as Corona and Gideros will still be supported for now. If you strongly want to keep support for Corona / Gideros then let me know

ShinAnimals the Android, iPhone, iPad and iPod game lives!

And my latest creation is now live, ShinAnimals a fun Yorkshire themed arcade puzzle game made using AppEasy> (Powered under the hood by the Marmalade SDK) and the Goji Editor. You can download from Google Play at:

http://play.google.com/store/apps/details?id=com.drmop.shinanimals

http://play.google.com/store/apps/details?id=com.drmop.shinanimalssmooth

http://itunes.apple.com/app/shinanimals/id889729274

http://itunes.apple.com/us/app/shinanimals-smooth/id891885372?mt=8

Word of warning, this game is highly addictive and will put you on the edge of your seat!

Animals ShinAnimals, no longer content with grazing and lounging around all day the animals at the Yorkshire farm are bored to tears and have demanded that the farmer provide them some fun. The farmer has decided to arrange some mild entertainment by constructing 40 puzzles for the animals to crack. Can you help the animals crack all 40 puzzles?

The aim of the game is to crack each puzzle by stacking piles of animals ever higher, the higher the stack the more points the animals score. To beat a puzzle the farm animals must beat the target score set by the farmer. Puzzles start out simple, but soon become difficult including swinging crates, springy bridges, unstable constructions, traps, footballs and more.

Features include:

  • Normal and hard (Yorkshire) game modes
  • 40 unique levels
  • Hi-score tables
  • Pickups, traps and other dangers
  • Cheat system to help pass difficult levels
  • FREE to play
  • Can be enjoyed by kids and adults alike
  • Yorkshire sound effects!

Made in Yorkshire by Yorkshire people, absolutely no Yorkshire animals were harmed during its making.

Marmalade SDK now offering FREE License!

Yes you did read that right! The Marmalade SDK can be freely downloaded and used in all its flavours including:

  • C++ – Create native games and apps in blazing pedal to the metal C++
  • Juice – Easily port existing Objective-C based iOS games and apps to Android
  • Quick – Create games and apps rapidly using Lua
  • Web – Combine the power of C++ and HTML5

Sounds too good to be true? No, not at all. There are some restrictions such as:

  • Limited extensions, but most important ones included
  • Shows advert on boot
  • Shows a splash screen on boot

But hey, you get support for the following platforms out of the box:

  • iOS
  • Android
  • Windows Phone
  • Windows Store
  • BlackBerry 10
  • Tizen

Why am I so excited about the Marmalade SDK providing a free license? As most of you are aware I’ve been developing the open source AppEasy Core SDK which is a powerful game and app engine that makes creating games and apps super simple. This move by Marmalade will help to propagate its usage within the developer community. Not only that it opens the door for other developers to create extensions, middleware and tooling based on or around Marmalade.

Exciting times ahead is all I can say! Well done Marmalade.

What next? Well go and download your free copy of the Marmalade SDK right now.