We’ve launched a new initiative here at Aptoma, and we have given it the mundane name of ‘Aptoma Monday School’ (AMS). We could have been cool and written “Skool” or something like that, but we didn’t.
AMS is basically an intense hour each Monday @ 0900 hours which we dedicate to educate ourselves through presenting and discussing topics of particular interest. We have a business to run, so the topics has to be of practical use as well as educational value. We will try to identify the sweet-spot of balance between learning something fun and inspiring and creating something tangible of value for our customers.
We have decided to share our lecture notes on the Select *-blog (RSS). The theme of choice for now has been the field of “HTML5“. And we have chosen three topics this week : The <video>-element, the <canvas>-element and local storage.
The video-element will start to finally integrate videos fully into the web-page. This means that plugin-technologies such as Adobe Flash or Windows Media Player will no longer be required for video. (yes!)
<video width=”854″ height=”480″ autobuffer controls>
<source src=”big_buck_bunny_480p_stereo.ogx” type=”video/ogg”>
<!– Proceed to define any available fallback formats –>
Your browser does not support the <code>video</code> element.
The video-element will now work as a normal element, providing you with the full power of CSS: You can set the css-attribute opacity to 0.5, and it does what you think it will do. If you have been working with any of the plugin-technologies, you’ll know that this is a giant leap forward for video.
See it in action!
Youtube has made an example of use of HTML5/video-element. In this example even animated thumbnails are video-elements displaying how low the resource cost ist. If you did this with Adobe Flash would probably require moarhardware.com to keep all the elements on one page together like that.
A few more details for the very interested reader :
- <video> might just allow us to do more hardware acceleration and the client computer, and hence have a much smaller toll on system resources than today’s solution.
- Safari supports H.264/AAC, Chrome supports H.264/AAC and OGG/Theora/Vorbis while Firefox and Opera just support the latter.
- <video> is supported in Safari, Firefox 3.5, Chrome and a special build of Opera, so we’re not quite there, yet. But we’re getting closer!
Canvas is another exciting technology which is finally mature for use in most modern web-browsers. Canvas let’s you do pixel by pixel manipulations on images.
Canvas will be a nice replacement for the most server-side generated images as well as for some Flash graphics. Due to the fact that canvas is rendered by the browser and not as a plugin it can be handled as (almost) as all the other HTML elements .
We’ll let this example speak for itself : Remove redeye.
You define a canvas like this
<canvas id=”myCanvas” width=’172′ height=’172′></canvas>
And you will run commands on it like this, to do the funky stuff (presented without any particular context)
var canvas = document.getElementById(“myCanvas”);
var context = canvas.getContext(“2d”); // 3d not yet supported
context.drawImage (sechand, -4, -52, 8, 57);
// Rendring text:
context.font = ‘italic 50px sans-serif';
context.textBaseline = ‘top';
context.fillText (‘Hello world!’, 0, 0);
context.font = ‘bold 30px sans-serif';
context.strokeText(‘Hello world!’, 0, 50);
If you want to dig deeper, try these:
3. Local storage
Local storage is what you’d think it is. It might be seen as a sophistication of the good ol’ cookie. It solves a couple of it’s problems, as well. a) You can store more data in local storage. b) You can use the same local storage between browser tabs and windows c) It will be cache-safe, which means that it will not break all your front-end caches (such as Varnish) if used. This is a major improvement for anyone creating high-traffic sites.
The most important functions are
- localStorage.setItem(key, value)
- localStorage.clear() // Use with caution, it will clear all storage.
Future topics for AMS
We maintain this wish-list of topics. We provide no guarantees that we’ll follow the list, but these are the suggested topics as of today.
- Canvas / SVG
- Video / Audio
- Local Storage
- Worker threads
- Offline work
- Caching strategies (Memcache, Varnish, Varnish ESI, etc)
We’d love to hear any suggestion you might have for topics in the comments below.