Lessons
Lesson 1: Introduction to HTML5, the file struction, and basic syntax comparison
05/01/13 16:24
Hello,
This is my first lesson on converting your Codea applications to HTML5 code. In this lesson, we will talk about HTML5, why converting your Codea apps to HTML5 is a good idea, and the basic file structure of an HTML5 application. Let’s get started.
HTML5 is the latest version of HTML (HyperText Markup Language) which added lots more interactivity in websites than HTML4. Some people call HTML5 the “Flash killer”. Which is true. When Android Jelly Bean was released, Adobe decided to drop support for Flash on Android. We can now start saying goodbye to Flash and say hello the the new HTML5. Anyways, that’s HTML5 for you.
As I implied before, HTML5 is great for making games. It may sound hard converting your entire program to HTML5, but it is actually surprisingly easy and much faster than rewriting your code for Android, Windows, Mac, and any other platforms you want to run your code on. We will be using JavaScript and the Canvas. The API (Application Programming Interface) for JavaScript and the Canvas is amazingly similar to Codea’s. Along with that, HTML5 apps don’t have to be run in the devices primary browser. You can use a utility like PhoneGap to package your HTML5 app into a native looking application for almost any mobile platform you can think of.
The best solution by far, is Google Chrome. Another great browser is FireFox. Internet Explorer 9+ works fine, Safari for Mac works great, and Safari for iOS hold one of the highest speed performances of all the browsers. As for Opera, it works, but various standards are different from W3C’s (the group that sets the standards for the web).
Of corse, there is the commonly used Adobe Dreamweaver. My favorite editors for Mac are Espresso and Coda 2. If you are cheap, and would prefer a free solution, the best solution is Brackets. For Windows, I highly suggest Notepad++, which is even free. If you want to code on an iPhone or iPad, I suggest Textastic. Other iPad HTML editor are not as nearly as complete at Textastic. Finally, if you prefer coding website right on the web, the best solutions are JSFiddle, JS Bin, Dabblet, or Codeanywhere, which are all free and have about the same power.
Download the ZIP file of the canvas template by clicking here. Then open the HTML
Let’s look at what you need to know in the HTML page first:
Between the heading (<head> ) tags, you will find a tag called <title> . Inside that tag, you will find the title of the page. Set that to whatever you like.
Next, let’s look at the display for your application:
To display our apps, we will be using an HTML5 element called the canvas. Why is the canvas good for making games? Think of the canvas as an image. Images don’t track every object on them, all they know is what colors are at what pixels. That means you can draw millions of object on a canvas, and there won’t be a giant speed difference.
To create a canvas, we use the<canvas> tag. Imagine that…
We use thewidth and height attributes to set the width and the height of the canvas. Later in the lessons, I will show you how to change the canvas size through JavaScript.
Note: Do not set the width and the height of a canvas though CSS. That will stretch the canvas like an image
Next, let’s look at the CSS (Cascading Style Sheet) file:
There, we simply set the canvas to be center on the page, and give it a shadow to show where the edge of the canvas is. We don’t need to worry about that.
Finally, let’s look at the brains behind the canvas: the JavaScript.
Let’s start with the part of the code that happens before you start drawing on the canvas:
Ignore this, and I highly suggest you don’t touch it. This creates the global variables for the canvas and the canvas context (what we draw into) and creates the function for updating the frame.
Next, let’s look at the setup:
All you need to know about this is this acts like the setup() function in Codea. Don’t touch anything in here exempt before the
Note: If you write anything after the
Finally, the draw statement:
In the draw() loop, you will write your code right after the comment. You can see I put some styling and code in the draw loop already. I will show you how to do this kind of thing later in the lessons.
Note: If you write anything after the
Let’s start with comments:
In Codea, you write comments with
Printing statements:
In Codea, you can use the
Chrome:
Safari:
FireFox
iOS:
You can’t without a special app.
Thanks,
Zoyt
Keep an eye out for later posts!
This is my first lesson on converting your Codea applications to HTML5 code. In this lesson, we will talk about HTML5, why converting your Codea apps to HTML5 is a good idea, and the basic file structure of an HTML5 application. Let’s get started.
What is HTML5?
HTML5 is the latest version of HTML (HyperText Markup Language) which added lots more interactivity in websites than HTML4. Some people call HTML5 the “Flash killer”. Which is true. When Android Jelly Bean was released, Adobe decided to drop support for Flash on Android. We can now start saying goodbye to Flash and say hello the the new HTML5. Anyways, that’s HTML5 for you.
Why should I convert my Codea app to HTML5?
As I implied before, HTML5 is great for making games. It may sound hard converting your entire program to HTML5, but it is actually surprisingly easy and much faster than rewriting your code for Android, Windows, Mac, and any other platforms you want to run your code on. We will be using JavaScript and the Canvas. The API (Application Programming Interface) for JavaScript and the Canvas is amazingly similar to Codea’s. Along with that, HTML5 apps don’t have to be run in the devices primary browser. You can use a utility like PhoneGap to package your HTML5 app into a native looking application for almost any mobile platform you can think of.
What browser should I be using?
The best solution by far, is Google Chrome. Another great browser is FireFox. Internet Explorer 9+ works fine, Safari for Mac works great, and Safari for iOS hold one of the highest speed performances of all the browsers. As for Opera, it works, but various standards are different from W3C’s (the group that sets the standards for the web).
What editor should I use to edit code?
Of corse, there is the commonly used Adobe Dreamweaver. My favorite editors for Mac are Espresso and Coda 2. If you are cheap, and would prefer a free solution, the best solution is Brackets. For Windows, I highly suggest Notepad++, which is even free. If you want to code on an iPhone or iPad, I suggest Textastic. Other iPad HTML editor are not as nearly as complete at Textastic. Finally, if you prefer coding website right on the web, the best solutions are JSFiddle, JS Bin, Dabblet, or Codeanywhere, which are all free and have about the same power.
Let’s get started with the file template:
Download the ZIP file of the canvas template by clicking here. Then open the HTML
Let’s look at what you need to know in the HTML page first:
Between the heading (
Next, let’s look at the display for your application:
To display our apps, we will be using an HTML5 element called the canvas. Why is the canvas good for making games? Think of the canvas as an image. Images don’t track every object on them, all they know is what colors are at what pixels. That means you can draw millions of object on a canvas, and there won’t be a giant speed difference.
To create a canvas, we use the
We use the
Note: Do not set the width and the height of a canvas though CSS. That will stretch the canvas like an image
Next, let’s look at the CSS (Cascading Style Sheet) file:
canvas {
margin: auto;
display: block;
-moz-box-shadow: 0 0 10px black;
-webkit-box-shadow: 0 0 10px black;
box-shadow: 0 0 10px black;
border-width: 1px;
border-color: #000000;
}
There, we simply set the canvas to be center on the page, and give it a shadow to show where the edge of the canvas is. We don’t need to worry about that.
Finally, let’s look at the brains behind the canvas: the JavaScript.
Let’s start with the part of the code that happens before you start drawing on the canvas:
// Ignore this code following:
window.addEventListener("load", setup(), false);
var canvas, context;
if ( !window.requestAnimationFrame ) {
window.requestAnimationFrame = ( function() {
return window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
window.setTimeout( callback, 1000 / 60 );
};
} )();
}
Ignore this, and I highly suggest you don’t touch it. This creates the global variables for the canvas and the canvas context (what we draw into) and creates the function for updating the frame.
Next, let’s look at the setup:
function setup() {
canvas = document.getElementById('codeaApp'), context = canvas.getContext('2d'); // Ignore
// Use this function to perform your initial setup:
console.log("Hello World!");
draw() //Igrnore
}
All you need to know about this is this acts like the setup() function in Codea. Don’t touch anything in here exempt before the
draw() function and after the first comment. That’s where you will be putting your setup code. I put a console.log() statement, which acts like a print() statement in Codea. I’ll talk a little more about that later.Note: If you write anything after the
draw() function code, that code will be executed after the first drawFinally, the draw statement:
function draw() {
// Do your drawing here:
context.fillStyle = 'green';
context.font = '45px Palatino';
context.fillText("Hello, and welcome to the canvas!",30,325);
window.requestAnimationFrame(draw()); //Ignore
}
In the draw() loop, you will write your code right after the comment. You can see I put some styling and code in the draw loop already. I will show you how to do this kind of thing later in the lessons.
Note: If you write anything after the
window.requestAnimationFrame(draw()); function code, that code will probably not be executed, unless there is a delay in the system.Things to know:
Let’s start with comments:
In Codea, you write comments with
-- Blah blah blah. In JavaScript, you use two forward slashes instead of two dashes.Printing statements:
In Codea, you can use the
print() statement to print to the console. In JavaScript, you use something called console.log(). But there is not box that displays the console. To bring up the console, read the following instructions:Chrome:
- Control+click anywhere on the page
- Click on the tab that says “Console”
Safari:
- Go to Safari > Preferences
- Click on “Advanced”
- Check “Show Develop menu in menu bar”
- Go to Develop > Show Error Console
FireFox
- Go to Tools > Web Developer > Error Console
iOS:
You can’t without a special app.
Thanks,
Zoyt
Keep an eye out for later posts!
Comments