Autograph on WordPress.com

Woody — Mon, 14 Feb 2011 10:40:51 +0000

http://dl.dropbox.com/u/9236380/sine.agg

HTML5: A Summary

Woody — Wed, 03 Feb 2010 12:10:03 +0000

There is a lot of buzz about HTML5 right now, with lots of people confident that it will be the way most applications will go over the next few years. Flash and Silverlight are expected to become sidelined by this new technology. Personally I would love to do away with installers so the idea of web applications of comparable power to desktop applications is very appealing. This article is simply here to summarise my understanding of HTML5.

1 .SVG

You can now draw directly within HTML using the SVG tag. The SVG tag is just like any other HTML tag, so you can apply a class (for CSS) and an id (for javascript). SVG is good for interactive mouse driven things.

x="50px" y="50px" width="100px" height="100px" fill="blue" stroke="red" stroke-width="5px" rx="8" ry="8" id="myRect" />

Properties:

Higher Level (Retains Mode API)
Import/Export
Easy UIs
Interactive
Medium Animation
Tree of Objects (So easy to do hit detection)

Examples:
German Election Results

2. Canvas

The Canvas is described as a “scriptable image tag”, if SVG gives you a direct way of drawing with HTML, then the Canvas gives you a direct way of drawing with JavaScript.

var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d');

ctx.fillStyle = “rgb(200, 0, 0)”;

ctx.fillRect(10, 10, 55, 50);

Properties:

Lower Level
No Mouse Interaction
High Animation
JS Centric
More Bookkeeping is Required
Pixels

Examples:
First Person Gifter
Bespin

3. When to use SVG and when to use Canvas

The Mozilla Download Page is a fantastic example for the appropriate use of SVG and Canvas. SVG is used for drawing graphical assets and interactivity (in this case a map of the world) and Canvas is perfect when you want to put drawings on top (in this case lights pop up where Firefox was last downloaded). Canvas is good for games that are keyboard driven.

4. Video

HTML5 gives you a video tag which works just like the image tag.

Default text if video not supported here.

var v = document.getElementsByTagName("video")[0]; v.play();

Example:
YouTube (you may need to go to TestTube to set YouTube to use HTML5 video tag)

5. Geolocation

Browsers are now location-enabled. You can find location and more detailed information such as how accurate the position calculation is.

navigator.geolocation.getCurrentPosition( function(position){ var lat = position.coords.latitude; var lon = position.coords.longitude; showLocation(lat, lon); } );

Example:
Google Maps (Prototype uses this API)

6. App Cache

You need to be able to use web applications offline.

CACHE MANIFEST /static/stickies.html /media/deleteButton.png /media/deleteButtonPressed.png /css/stickies.css /js/stickies.js

Example:

Post-it Note Application

7. Database

Another aspect of the HTML5 offline abilities.

var db = windowOpenDatabase("NoteTest", "1.0", "Example DB", 200000);


function saveMe(id, text, timestamp, left, top, zIndex){
db.transaction(
function(tx){
tx.executeSql(
"INSERT INTO ...."
)
}
);

}

8. Web Workers

Javascript runs in the same thread as the interface of the browser so as it is running the browser will not respond. As things get more powerful we could end up hosing the browsers. Web Workers allow us to run JavaScript in the background. Finding prime numbers is traditionally very computer intensive, and would certainly freeze your browser (see Bad Primes below) but using Web Workers the application runs smoothly without affecting browser performance (see Good Primes below).

All workers go in a separate file, they cannot access the screen, they just do work you pass then data and they send data back.

var worker = new Worker('worker.js"); worker.onmessage = function (event){ console.log('Results: ' + event.data); };

Example:
Bad Primes
Good Primes
Advanced HTML5 Application

Mathematics Curriculum in the UK

Woody — Tue, 31 Mar 2009 10:40:43 +0000

The Qualifications and Curriculum Authority (QCA) are responsible for developing the national curriculum which defines what is taught from KS1 to KS4. They also provide GCSE criteria that are used by Ofqual to regulate GCSE qualifications. The secondary strategy defines how everything should be taught.

For A-level there is no national curriculum but there are A-level criteria that are used by Ofqual to regulate A-level qualifications.

Functional mathematics skills standards are embedded in programs of study (national curriculum) for mathematics at KS3 and KS4. The aim is to get students not just learning mathematics but using it to solve increasingly complex problems.

The extended project is a level 3 qualification that is equivalent to half an A-level and gives students the chance to do an investigative project of their choosing.

Maths Gymnasium

Autograph on WordPress.com

HTML5: A Summary

Mathematics Curriculum in the UK