Archive for the ‘html5’ category

HTML5 Game Jam Workshop

December 19th, 2010

Back in the 80’s I started programming on the Commodore VIC-20. Playing games, but also programming.

But in 2010, how can you make high schoolers enthousiastic about programming? What’s a nice programming environment for high school students? Maybe just a browser and simple text editor? Yes, with HTML5 you can create nice small programs, for example games.

With this in mind I created a HTML5 Game Jam Workshop, a workshop for highschool students to learn the basics of HTML.

And last week I had my first try out, a high school in Zutphen, the Netherlands. Everything went very well and the children were very enthousiastic! Some of them had already experience with HTML and javascript. But there were also a few without any experience, but at the end of the afternoon they hacked a small game!!

HTML5 Game Jam Workshop

HTML5 Game Jam Workshop

(15.12.2010, 10 Photos)

No comments »

Posted in Javascript, html5

Presentation made in HTML5

April 11th, 2010

I would like to show you how to make a presentation just in HTML. With the tag ‘canvas’ you can create nice effects for texts. But also you can create effects for showing photos.

Here you can see the presentation.

First you have to define the slides:

var slide0 = function()
{
	initSlide(true);
	h2("Google Technology User Group");
	line("5 februari 2010")
};

A function for drawing some text on the canvas: 

function h2(text)
{
	var ctx = document.getElementById('canvas').getContext('2d');
	ctx.font = "40pt Arial";
	ctx.textAlign = "center";
	ctx.fillStyle = "black";
	lineY = 200;
	ctx.fillText(text,x, y + lineY);
	lineY = lineY + 150;
}

And an example for some effects :

function slideEffect(slide){
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.save();
  ctx.clearRect(0,0,width,height);
  slide();
  ctx.restore();
  if (y < 75)
  {
     y = y + 20;
  }
	else
  {
	clearInterval(intervalEffect);
  }

}

This way you can make your own presentation with animation just in HTML5!

Download : presentation.zip

3 comments »

Posted in html5

Tags: