Based on this presentation by Marcin Wichary | mirror
Click here, Press → key to advance.
This is one of the really exciting parts!
Using the Canvas element, vector graphics (AI!)
can be rendered online.
Much like Flash but no proprietary software.
Graphics are created using JavaScript
More later on.
| Tag | Description |
|---|---|
| <datalist> | A list of input value options |
| <keygen> | Generate authentication keys |
| <output> | For different types of output, such as output written by a script |
Currently users are doing this:
<div id=“nav”> (user’s nav code) </div>
In HTML5 it’s simpler:
<nav> (user’s nav code) </nav>
Same for Footer
Different method for embedding each of these:
<video width="320" height="240"
controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag. </video>
There’s also a TRACK tag for media players.
That’s IT.
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element. </audio>
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript”>
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
</body>
</html>
There’s an add-on for Adobe Illustrator
so you can save directly into an HTML5 Canvas.
You can also get one for CS4.
AI2Canvas