From Build to FOWA (Future of Web Apps) in London to TechEd China in Beijing: thank you all for your kind feedbacks! It’s great to see so much interest around HTML5, to meet amazing people and to hear so many great feedbacks about the work we are doing in Redmond.
For those of you that couldn’t make it this time, here are a few photos of what you missed.
Ryan Carson, kicking off FOWA London 2011
Giorgio Sardo, talking about HTML5 Games
Browsers Panel (Left to right: Giorgio Sardo, Patrick Lauke, Alex Russell, Christian Heilmann)
Keynote at Tech.Ed China 2011
Coming next: W3Conf on November 15-16. If you register quickly, you can watch it in person – follow the live streaming or download the recorded videos.
See you there!
Check your score at http://www.ie6countdown.com Time to move on...
Bing Maps is the first online service that provides geolocation support to all desktop and mobile browsers that support the new HTML5 Geolocation APIs. (*)
When you navigate to bing.com/maps, you will notice a new “viewfinder” icon in the top-left corner of the map. As you click it, the map will zoom automatically to your current location.
How does it work? The site implements the HTML5 Geolocation, which allow an User Agent, given the permission from the user, to query user’s location and receive her longitude and latitude coordinates.
The code that Bing used to implement this feature is really simple:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function (position) {
//TODO Center the map around
position.coords.latitude and position.coords.longitude
},
function (error) {
//TODO Handle errors
});
}
else {
//TODO Fallback to IP resolution
The control available on bing.com/maps is freely available to any web developers; you can find all the APIs and the documentation in the Ajax SDK for Bing Maps. Preview live here.
Today the Bing Maps geo-location service works already in Internet Explorer 9, Firefox 3.5+, Chrome 10+, Safari 5.0+ and Opera 10.6+. It works great even on my Windows Phone 7 (with the Mango update)!
Note that if your browser doesn’t support HTML5 Geolocation, Bing Maps will fallback to IP location resolution.
(*) Unfortunately this is not the case for Google Maps. Although Google deserve credit for being the first to introduce this feature, they still don’t provide the geolocation support to any Internet Explorer user (including IE9). In fact the Google Maps page uses the “IE7 Compatibility” mode, which forces IE8, IE9, and IE10 to render the page using the old IE7 engine, instead of the default standard compliant engine. In other words, even if you have IE9 or IE10 installed on your machine, you can’t benefit of HTML5 features when you are visiting Google Maps. Hopefully this is something Google is working on and we will see a fix soon.
Had a great time here at FOWA (Future of Web Applications) today. To those of you that asked – here’s a list of all the demo I showed today in my “Build with HTML5” session. Thanks to all the partners, developers, designers, pop idols that worked with us to make it possible.
Enjoy.
Giorgio Sardo | Sr. Technical Evangelist | HTML5 & Windows Evangelism
Link: http://www.xiconeditor.com
Link: http://www.endlessmural.com
Link: http://musiccanbefun.edankwan.com
Link: http://www.theshodo.com
Link: http://html5.cynergysystems.com
Link: http://agent8ball.com
Link: http://www.foursquareplayground.com
Link: http://joydefinesthefuture.com
Link: http://disneydigitalbooks.go.com/tron/
Link: http://jsdo.it/event/svggirl
Link: http://lostworldsfairs.com
Link: http://ie.microsoft.com/testdrive/HTML5/Griddle/Default.html
Link: http://www.thekillersmusic.com
Link: http://www.pirateslovedaisies.com
Link: http://www.worldsbiggestpacman.com
Want more? Check out www.beautyoftheweb.com
Try at: http://disneydigitalbooks.go.com/tron/
Thanks to the amazing teamwork of Disney and Vectorform, it took just about 1 month to build the new Disney TRON: Legacy Digital Book Site, an immersive HTML5 experience built on top of Internet Explorer 9 Hardware Accelerated HTML5. In this post I’d like to share some of the “behind the scenes” stories from the team involved in the project,
Full article at: http://windowsteamblog.com/ie/b/ie/archive/2011/06/03/behind-the-scenes-of-disney-tron-legacy-digital-book-site.aspx
Sounds form the background of our life. Today the HTML5 <audio> element enables Web developers to embed sounds in their applications. The flexibility of the control coupled with the integration with the rest of the platform allows several scenarios, from simple sound effects to background audio to gaming experiences to more sophisticated audio engines.
This blog post walks through some of the best practices for using the <audio> tag in your Web applications, and includes useful tips from real-world sites.
Full article at: http://blogs.msdn.com/b/ie/archive/2011/05/13/unlocking-the-power-of-html5-lt-audio-gt.aspx
I had the pleasure to work with some really bright web developer and designer in the last months, building some of the most exciting and inspiring HTML5 application. Thank you all!
Internet Explorer 9 Release Candidate is now available for download here.
There are many news, from new HTML5 features to enhanced performance, from state-of-the-art security to redesigned user experience. Here’s my TOP 5:
A page is now able to request the user location in a secure way using a few lines of code. The geo-location specification is now implemented by all major browsers! There’s no more reason for Google Maps to use browser detection code and block that feature to IE users…
if (navigator.geolocation != undefined)
navigator.geolocation.watchPosition(onPositionFound, onPositionError);
function onPositionFound(pos) {
Debug("Lat: " + pos.coords.latitude + ", Long: " + pos.coords.longitude);
IE9 has by far the cleanest UI of all browsers out there today. Huge step forward from IE8!
It’s fast. It’s smoking fast! You can measure it with synthetic benchmarks, you can run the demos on ietestdrive…but my advice is to run it with your favorite site. There’s no better benchmark than that!
I absolute love the ability to format the JavaScript code using the F12 Developer Tools (embedded in the browser, you don’t need to install addons).
As noted earlier, we have not been able to implement the remaining part of the <canvas> specification (globalCompositeOperation) in IE9 Beta due to still happening important conversation in W3C at that time. Since then we made a good progress and we are now happy to announce full support for the <canvas> spec in IE9 RC!
(Scratch-off demo by Beej Jorgensen)
Obviously there is much more…What are your TOP 5 features?
Good news for developers. If you are using an older version of the typeface library, you might have seen the text upside-down on IE9 Beta – due to some bug in the library itself.
The latest version (v0.15) include fixes to these bugs and now fully supports IE9 Standards Mode. Thanks David!
Download here: http://typeface.neocracy.org/download.html
Building a great browser is complex; this is valid for Internet Explorer, Firefox, Chrome, Opera, Safari and any other browser out there.
When we started the planning of IE9, we decided to offer more visibility to developers over the progress of the platform – releasing a Platform Preview every eight week. Thanks to your help, we collected thousands of feedbacks and lastly to make IE a better product. It’s been a great journey so far – the partnership IE Team-community has been working really well!
I just ran across an article from Mike Dewey. Forgetting for a moment about the “sensational title” (which btw is funny), I believe there are also a lot of interesting observations and feedbacks. I also like the approach of suggesting (for the time being) workarounds. Thanks Mike!
Lol. Do you have a repro test? Should we call the ghost-busters?
Seriously, let me explain what (probably) happened.
IE9 by default uses the IE9 Standards Engine, which supports all the great new HTML5 stuff. Thus, if you create a plain page with the correct doc-type and you publish it on your server, it will just work.
For compatibility reason, it also allow you to specify an older engine (IE8, IE7, IE Quirks) by using the X-UA-Compatible meta tag. Note that some website specify this rule “at a server level” by setting an HTTP header on all the pages. Bottom line: even in this case, you are in control of what engine you want to use.
As you noted, globalCompositeOperation is not supported in Platform Preview 7. Or, better, we support only the source-over state. We do care about supporting this property, but we also care about it being interoperable across all browsers.
At the time we announced and shipped support for the Canvas, the other browsers were supporting the globalCompositeOperation, but they didn’t have the same rendering behaviors – making developer life very complex. Chrome and Safari in fact implemented the drawing model differently from Opera and Firefox. You can still see this in action today. For instance, navigate to this site. Firefox 4.0b8 and Chrome Canary 10.0.638 are rendering different results. [We obviously looked at all other browsers, even if I don’t mention them in this post].
Given that evident interoperability challenge, we decided it was critical to have first that conversations with the HTML Working Group – before shipping something unreliable for end-users.
Since then, we believe we made good progress – you should expect to hear more from us soon.
Good catch! It looks like you are hitting an old bug that has already been fixed (fix to come in the next build). If you see similar issues in the future, I’d strongly suggest to file a bug to Connect. More on “why Connect” at the bottom of this post.
I admit this is weird, but I can’t repro on my machine. It’s possible that this falls in the same bucket of (3).
What I noticed instead is that different browsers render your code in a different way. I created this dummy page using the code on your site (let me know if I missed something) and here’s what I get.
Personally I believe Firefox is closest to the result I was expecting. What do you think?
As you know, we highly appreciate developer feedbacks and we encourage you to try (and try to break if you want) the Platform Previews of IE9.
Remember you can download the latest build from www.ietestdrive.com and you can file a bug on Microsoft Connect. This will ensure that:
Again, thanks Mike for your feedbacks. Looking forward to the next build!
I don’t know what language you talk today, but if you are looking for a simple and free tool to convert videos to H.264 (.mp4) or VP8 (.webm), here’s a quick tip.
Find more info about the <video> tag on my previous post.
As announced on the Windows blog this morning, today Pirates Love Daises - a new HTML5 tower defense game - has been released!
Grant Skinner, the leader of the team that built the game, reported his experience on his blog. He shared some interesting thought about the shift of paradigm for an experienced Flash developer approaching HTML5. He also described some of the unexpected (but pleasant) surprises and challenges he faced during the development phase.
In this post, I’d like to complement his comments with further lessons we’ve learned along the path.
Let’s start talking about Performance. We heard many times that IE9 is fast…but I think this is the first time IE9 has been defined “smoking fast”! Grant, you are a primer!
I like to think about this game as a real world performance benchmark. No secret functions, no ray-tracing algorithms, no synthetic tests. Just a well designed HTML5 game.
The best way to test the performance, it’s to try it on your machine with your browser. For those of you that don’t have 7+ browsers installed on your machine , I recorded a video where I play the game on all the latest browsers builds available today.
Based on my personal experience, I reported the results in the table below. The CPU and Memory (Private Working Set) values have been captured using the Windows Task Manager, after about 5 seconds playing in the easiest map. A better measurement should take count of an average over time, since the complexity of the app increase quickly during the game.
Firefox 3.6
According to Grant’s tests, the game runs on Mac and iOS as well, although with poor performance. I don’t have any of these machines, can any reader record and share a video of the game playing on a Mac or an iPad (or any other device with HTML5 support)?
As we stated many times, HTML5 is doing great progress and this game is yet another confirmation of its capabilities. Let’s see a few key learning we made along the path.
I hope Grant will share more insights into his development experience with the Canvas. It’s exciting what he achieved in terms of complexity – it almost doesn’t feel any more like HTML!
A common technique that he used for the game is called “sprite animation”: you build a large image (composed of many sub images) and then you draw only one part of it at a given time. If you need to do an animation, you can re-draw very quickly on the same location – and all the human eye will see is an animation!
For example, here’s the Kraken sprite:
If you are interested to build your own animation, have a look at the library used in the game and gently made available by Grant: http://easeljs.com/
One of the interesting questions we got was: what is the max size of an image that the <canvas> can handle? 1000, 2000, 4000 pixels width? More? In this case I think the answer is “it depends”. It depends probably on the browser architecture (not necessarily the browser itself!) as there is a tight dependency on the video card and the OS. Having a browser that supports hardware acceleration helps, but there are still technical boundaries that can’t be overcome. Based on empirical experiments, we found that ~4000pixels seems to be the current limit. I’d be interested to hear from other people what they experienced on their machines.
There are hundreds thousands of fonts available today. For this project, Grant’s team got one that fits perfectly within the game. During the development of the project, they started with the ttf (True Type Font) format. They realized however that it was better to use an open font format…and what better one than WOFF, the new standard submitted by Mozilla and Microsoft to W3C!
We used Font Squirrel to generate the @font-face Kit (also check out TypeKit) and we initially generated the compact CSS rule:
@font-face {
font-family: freeBooterFont;
src: url('../fonts/freebooterupdated.woff') format('woff');
font-weight: normal;
font-style: normal;
It was working fine on all browsers, except Safari (both on Windows and Mac). Looking at online resources, we realized that – although committed to – they don’t support WOFF yet in the current build. Interesting, since it’s already on Chrome WebKit (shouldn’t the code be the same/shared?). I’m sure it will be added soon…and in the meantime we adjusted the CSS syntax (luckily super easy to do!) to include a fallback format.
src: url('../fonts/freebooterupdated.woff') format('woff'), url("../fonts/FreebooterUpdated.ttf") format("truetype");
Having one <audio> element on a page playing without plugins is already awesome.
Having 40 of them playing together is an orchestra! There are topics however that the spec doesn’t cover (and I think shouldn’t cover) where IMHO a little more documentation should be given by browser vendors to developers (IE Team already took note). For example, what’s the best practice to pre-load multiple audio samples? How many audio files can the browser play at the same time? I’m planning to spend some time on this topic in a future post.
I didn’t build the game, but I was reviewing the interim builds using the Developer Tools in IE9. They come with the browser, no need to install anything special, you just press F12 and they fire up.
The feature that I love more than anything else and that was very helpful in this project is “Format JavaScript”. If you go to the site now, you’ll notice that the code has been compressed and crunched to optimize performance.
If you are like me and you want to understand what’s behind it…you can go to the Script tab and press the “Format JavaScript” button. The result? A nicely “reverse-engineered” formatted source code! (Sorry Grant, I hope you won’t be upset )
There is much more to cover and to explore, but I’ll let you play the game now.
Resources:
Enjoy!
Coming on Friday Dec 17 10AM PST…
http://www.pirateslovedaisies.com/
Based on an interesting script of David Flanagan to generate a snow flake using recursive JavaScript and HTML5 <canvas>, I had some fun during the weekend and added some snow to my blog.
David’s implementation is based on several canvas elements (one for each snow flake) added to the DOM tree and animated using CSS. I preferred to create only one Canvas and animate all the flakes inside it. To avoid the Canvas to block the interaction with the page I added it as an element with background priority.
(function () {
// Start Animation only if browser support <canvas>
if (document.createElement('canvas').getContext) {
if (document.readyState === 'complete')
Snow();
else
window.addEventListener('DOMContentLoaded', Snow, false);
var deg = Math.PI / 180; // For converting degrees to radians
var sqrt3_2 = Math.sqrt(3) / 2; // Height of an equilateral triangle
var flakes = []; // Things that are dropping
var scrollspeed = 64; // How often we animate things
var snowspeed = 500; // How often we add a new snowflake
var maxflakes = 20; // Max number of flakes to be added at the same time
var rand = function (n) { return Math.floor(n * Math.random()); }
var canvas, sky;
var snowingTimer;
var invalidateMeasure = false;
function Snow() {
canvas = document.createElement('canvas');
canvas.style.position = 'fixed';
canvas.style.top = '0px';
canvas.style.left = '0px';
canvas.style.zIndex = '0';
document.body.insertBefore(canvas, document.body.firstChild);
sky = canvas.getContext('2d');
ResetCanvas();
snowingTimer = setInterval(createSnowflake, snowspeed);
setInterval(moveSnowflakes, scrollspeed);
window.addEventListener('resize', ResetCanvas, false);
function ResetCanvas() {
invalidateMeasure = true;
canvas.width = document.body.offsetWidth;
canvas.height = window.innerHeight;
sky.strokeStyle = '#0066CC';
sky.fillStyle = 'white';
function drawFlake(x, y, size, order) {
sky.save();
sky.translate(x, y);
snowflake(order, 0, Math.floor(sqrt3_2 * y), size);
sky.fill();
sky.stroke();
sky.restore();
function snowflake(n, x, y, len) {
sky.save(); // Save current transformation
sky.beginPath();
sky.translate(x, y); // Translate to starting point
sky.moveTo(0, 0); // Begin a new subpath there
leg(n); // Draw the first leg of the fractal
sky.rotate(-120 * deg); // Rotate 120 degrees anticlockwise
leg(n); // Draw the second leg
sky.rotate(-120 * deg); // Rotate again.
leg(n); // Draw the final leg
sky.closePath(); // Close the subpath
sky.restore(); // Restore original transformation
// Draw a single leg of a level-n Koch snowflake.
// This function leaves the current point at the end of
// the leg it has drawn and translates the coordinate
// system so the current point is (0,0). This means you
// can easily call rotate() after drawing a leg.
function leg(n) {
sky.save(); // Save current transform
if (n == 0) { // Non-recursive case:
sky.lineTo(len, 0); // Just a horizontal line
else { // Recursive case: _ _
// draw 4 sub-legs like: \/
sky.scale(1 / 3, 1 / 3); // Sub-legs are 1/3rd size
leg(n - 1); // Draw the first sub-leg
sky.rotate(60 * deg); // Turn 60 degrees clockwise
leg(n - 1); // Draw the second sub-leg
sky.rotate(-120 * deg); // Rotate 120 degrees back
leg(n - 1); // Third sub-leg
sky.rotate(60 * deg); // Back to original heading
leg(n - 1); // Final sub-leg
sky.restore(); // Restore the transform
sky.translate(len, 0); // Translate to end of leg
function createSnowflake() {
var order = 2;
var size = 10 + rand(90);
var t = (document.body.offsetWidth - 964) / 2;
var x = (rand(2) == 0) ? rand(t) : t + 964 + rand(t); // Make it fit with my blog
var y = window.pageYOffset;
flakes.push({ x: x, y: y, vx: 0, vy: 3 + rand(3), size: size, order: order });
if (flakes.length > maxflakes) clearInterval(snowingTimer);
function moveSnowflakes() {
sky.clearRect(0, 0, canvas.width, canvas.height);
var maxy = canvas.height;
for (var i = 0; i < flakes.length; i++) {
var flake = flakes[i];
flake.y += flake.vy;
flake.x += flake.vx;
if (flake.y > maxy) flake.y = 0;
if (invalidateMeasure) {
var t = (canvas.width - 964) / 2;
flake.x = (rand(2) == 0) ? rand(t) : t + 964 + rand(t);
drawFlake(flake.x, flake.y, flake.size, flake.order);
// Sometimes change the sideways velocity
if (rand(4) == 1) flake.vx += (rand(11) - 5) / 10;
if (flake.vx > 2) flake.vx = 2;
if (flake.vx < -2) flake.vx = -2;
if (invalidateMeasure) invalidateMeasure = false;
} ());
I did a quick test check with performance, and it looks like IE9 perform better with CPU/Memory usage (IE9 Beta Refresh, Firefox 4 Beta7, Chrome 10 Canary, Opera 11Beta and Safari 5).
You can find the original script from David here, the script with my updates here.
Happy Holidays!
“HTML5” is huge. Different specifications are at different status: First Public Working Draft, Working Draft, Candidate Recommendation, Proposed Recommendation, and lastly Recommendation.
As we stated many times before, it’s important to make it right.
Browser makers have a big responsibility with developers: it’s wrong to claim “standard support” for a specification that is still changing. Or, at least, they should make clear it is still a work in progress (for example, by using vendor prefix extensions).
Rushing the implementation of a specific feature and call it “done deal” is dangerous and in some circumstance can bring to unpleasant results. Today we’ve seen an example of this with an important specification: Web Sockets.
Web Sockets enable Web applications to maintain bidirectional communications with server-side processes. The specification (from the WebApps WG) is currently in the “Working Draft” stage; there is also a dependency on the Web Sockets Protocol, discussed in the IETF hybi mailing list.
Chrome 4+ has been the first to implement it in a “final RTW build” at the end of 2009, followed by Safari 5.0.2. Instead Firefox was planning to support them in the version 4beta and Opera in version 11, but they never went in production (credits for monitoring its status before going live). IE doesn’t implement this spec in current build.
Over time the specification changed and each browser tried to adapt by releasing sequential implementation updates. Some developer even built “The Ultimate HTML5 Browser Support Test” based on specs like this that are still in Working Draft stage. A few users commented on IE Blog about IE being “the only browser” not supporting it yet.
On Nov 26th, Adam Barth shared the results of his experiments with IETF.
“The Upgrade-based handshake is vulnerable to attack in network configurations involving transparent (or intercepting) proxies.”
In other words, the current protocol used by Web Sockets might be unsecure and unstable.
Based on this discovery, Firefox and Opera promptly did the right thing, announcing they would disable Web Sockets in future releases – until a solution is found. At the time I’m writing this post, I haven’t seen any announcement made by Google or Apple yet, although I’m confident they will follow soon (as Mozilla developers do).
In developer language, this is what I call a “breaking change”. Changing (or even worst, removing) support for a feature from a version to the next one – possibly breaking all applications built by developers based on the assumption that the feature (a supposedly “web standard”) would have been supported moving forward.
After today announcements, I wonder how many apps using Web Sockets will need to be brought offline, or “freezed” or “re-written” – at least until the spec get more solid and secure? Did these developers use browser feature detection, or they just assumed that any version after (for example) Chrome 4 will support that feature the same way?
What about those existing enterprise solutions, for example Kaazing, that rely on the assumption that “most browsers” already support Web Sockets? Will they just use the Flash-based layer (as they do for IE today) for any browser?
Personally I like Web Sockets. I’m looking forward to seeing them available in all browsers. But I also do care about consistent implementations, that work the same (interoperable, secure, stable) way across any browser – over time. I don’t want to write some code today, falling in the “(non) Web Standard trap”, and then have to re-write my code in 1 year from now because that particular implementation wasn’t exactly ready for prime time yet and has been removed or changed.
I don’t want to see the “IE6 phenomenon” happening again to “Chrome4” or others. Do you?
Someone today was so disappointed that he created a short humoristic video…
Time to go back to W3C and IETF to discuss what went wrong and look at what we can do to accelerate the progress of this (and other) specs...
Leaving Seattle’s “snow and fun” behind, I will have the pleasure to visit China in the next few days. If you are attending TechEd Beijing, make sure to come saying nihao to myself and Vittorio!
Happy Thanksgiving!
How do I develop using Canvas, SVG, CSS3? What’s new in JavaScript? In this deep dive you will learn how to use HTML5 and how new web standards help solve existing challenges on the web. Expect a lot of code, demos, and best practices!
How do you start an HTML5 page? Actually HTML5 is evolutionary, not revolutionary. Any page built yesterday with HTML 4.1 will be an HTML5 page automatically tomorrow. However, the HTML5 specification provides a few optional changes that can simplify your markup. For example, the following code is what I use as a template for my new pages.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
HTML5 also provides a set of new tags (for example, <article>, <nav>, and <figcaption>) that adds more semantic meaning to the content, and helps accessibility tools (such as screen readers) and search engines to better understand the page.
The <video> tag is probably one of the most interesting (and most discussed) new tags in the HTML5 markup language. It allows you to embed a video on the page without using a plug-in. The samples I provide explain how to use its properties (for example, poster to define the initial frame, or controls to show the control buttons, or preload to set the pre-fetching rules). As we’ve seen, the current specification doesn’t allow the player to go full-screen. If you need this scenario, you can change the size of the control dynamically and bring it on top of the page using the zIndex. Through its events loadedmetadata, canplay, and timeupdate you can monitor when the video is ready to play and track its progress. Lastly, the canPlayType property allows you to test whether the UA supports a specific codec or container; remember, the return values are either “”, “maybe”, or “probably”.
Drawing on a page has never been so easy. You have a brush that you can move across the screen to draw images – that’s all you need in order to create amazing drawings or animations! If you are drawing an image, remember to wait for it to be loaded. When you develop an animation, you will need to decide the best strategy to serve your purpose. Use time-based animation if you need a precise, smooth, and predictable result. Use frame-based animation if you need to develop quickly and are comfortable with losing some cycles (timer resolution is not perfect!).
With a little bit of creativity, you can achieve quite interesting scenarios – for instance, drawing a video on a canvas and dynamically appending its mirrored shadow.
ctx.translate(0, 200);
ctx.scale(1, -1); // Flip video
// Prepare gradient
var gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, "rgba(255,255,255,255)");
gradient.addColorStop(1, "rgba(255,255,255,0)");
ctx.fillStyle = gradient;
myVideo.addEventListener('canplay', function () {
setInterval(function () {
ctx.drawImage(myVideo, 0, 0, 300, 200); // Draw video frame
ctx.fillRect(0, 0, 640, 360); // Draw fading
}, 60);
}, false);
If you are looking for a tool to design on canvas or to design prototype animations, check out the AI2Canvas Exporter plug-in built by our own Mike Swanson. You can achieve great results with it – for instance, take a look at what Joshua Davis did!
In this group of demos, you will also find a little game I built on the plane while I was flying to Berlin. I’ll get back to this in a future post.
SVG (Scalable Vector Graphics) adds even more capabilities to what you can achieve with the Canvas. This time you are dealing with objects, which have their own properties, events, and programmability. You can embed your SVG snippets inline in an HTML page (did you know Internet Explorer 9 is the first browser to support this?), or embed in an XHTML document, as well as standalone files or files that are referenced inside an <img> tag.
SVG is intrinsically designed to work with the rest of the standards. You can program it using JavaScript and the APIs that you already know; and you can style it using CSS!
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300">
<rect width="200" height="300" fill="#009246" />
<rect width="200" height="300" x="200" fill="#fff" />
<rect width="200" height="300" x="400" fill="#ce2b37" />
</svg>
The last demo (Gradients) is a prototype of SVG+CSS+HTML5+JavaScript in action. Using a few tricks, you can use SVG to build a color gradient dynamically and use CSS properties to apply it to any HTML element on the page. I had some interesting conversations with Jonathan and Robert about this approach – I think it might be interesting to explore it further. eCSStender from Aaron Gustafson seems to be the natural evolution of the prototype; please ping me if you are interested in further exploring this approach with me!
What about news for web designers? CSS3 brings a lot of new and interesting modules to the table. Of all of them, text/border shadows, colors (rgba, opacity), multiple backgrounds, border radius, media queries, and WOFF are the ones I believe to be the most stable today.
<style type="text/css" media="screen">
@font-face
{
font-family: '3DumbRegular';
src: local('☺'), url('WOFF/3Dumb-webfont.woff') format('woff');
.fontface
font: 60px/68px '3DumbRegular' , Arial, sans-serif;
letter-spacing: 0;
</style>
Run the demo, “1. Media Queries” to understand how CSS allows you to pick specific rules depending on the screen resolution. Plus, you can have some fun with my hand (seriously – that’s my hand, copyright at Giorgio Sardo ).
Last but not least, JavaScript has some very neat new features for developers! For example, it includes a native JSON object that allows you to accomplish serialization/deserialization operations very quickly, that in the past you probably did with external libraries.
var result;
var myArray = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
//NEW! forEach
var multiply = function (value, index, array) { array[index] = value * this };
/* No Return! */ myArray.forEach(multiply, 3);
//result= 3, 6, 9, 12, 15, 18, 21, 24, 27, 30
There are a lot of new Array methods that simplify common tasks such as looping through the Array and performing a particular operation. I personally love the ability to do “kind of lambda expression” using forEach().
The object model has also evolved. With the new syntax, Object.create can more easily define new and cleaner prototypes.
Lastly, you finally have access to some helper functions, such as Date.Parse() and String.Trim().
This is not an extensive coverage of all the new features of HTML5 and related web standards. There is much more in the pipeline (Robert talked more about this)! What I covered in this session is probably the most mature content in the specification. It is (or soon will be) available across all the major browsers. It’s interoperable and it doesn’t apply only to Internet Explorer 9…but to any browser. In other words, it’s ready!
You can download all the source code here. Please feel free to contact me if you have any feedback or questions – I’m sure somebody out there knows how to improve this!
This 30 minutes session (presented at the Professional Developer Conference) focuses on the “behind the scenes” aspects of HTML5 and the efforts that Microsoft is engaged in with the W3C Working Groups.
“HTML5” is used today as an umbrella term for anything that is related to “new web standards”. This is not correct, since technically HTML5 is a well-defined specification – and when used as an umbrella term “HTML5” covers a lot of other documents with their well-defined names. Although I don’t like this approach, I have to admit it’s quite convenient when we need to refer to the entire universe of web-related standards. The alternative would be to call it “HTML5 and Co.” or “HTML5 and SVG and CSS and Web Apps and – and –” or " HTML5 and everything that relates to it”. Or you can provide any other name you’d like. Personally, for brevity, I will use “HTML5” in quotation marks when I need to refer to the whole set of new standards and plain HTML5 to refer to only that specification.
The important point is not really the name, but the understanding that this is a large effort…and that there are many people and Working Groups working on several equally important specifications. The future of the Web is not just one of these documents; it’s all of them. Actually, it’s most of them cooperating together.
To me, the real beauty of these standards comes when you can apply CSS stylesheets to HTML5 elements using SVG markup serialized with WebApps API. (btw, we will see an example of this in a future post )
Microsoft is committed to “HTML5” as a whole: HTML5, CSS3, SVG, Web Apps, and ECMA Script 262. We are investing a lot of resources (budget, time, but most of all people) in W3C and are participating in several Working Groups (WGs), providing feedbacks across the board. For instance, Paul Cotton (chairman of the W3C HTML WG together with Sam Ruby from IBM and Maciej Stachowiak from Apple) and more than 15 of our own Program Managers discuss these important topics daily.
As a developer, I expect to be able to write my code once and get consistent results across all browsers: same markup, same code. If a browser fails to run that code, there is an interoperability issue that needs to be solved; it can be either a browser bug, or an interoperability challenge that needs to be discussed and fixed in one (or more) of the W3C WGs.
In the recent years, starting with Internet Explorer 8, the Internet Explorer team has been working with W3C to build comprehensive test cases, thousands of them! Our goal has always been the same: interoperable specifications and implementations; solving any misunderstanding or misalignment between implementations before they’re deployed; making sure that different User Agents treat the same markup the same way; letting web developers live the dream of writing once, running everywhere.
Given the nature and complexity of “HTML5” itself (there are thousands of pages just in the HTML5 specification!), testing is not binary. There are many factors involved! For instance, checking if a browser supports the <Canvas> tag doesn’t tell you if that browser implements correctly all of the Canvas features. Writing 100 tests that try to cover all of the “HTML5” standards (including those that are still Working Drafts and subject to change in the future) will not help developers, or browsers, or people writing the specifications. Giving “bonus points” will not prove how good or bad a browser is at supporting standards.
If you would like to help us and W3C move these specifications forward, I invite you to participate in one of the Working Groups. It’s just incredible what an impact you can have there!
There are many very interesting specifications. I’m looking forward to the day when a web app will be able to do “pretty much anything it wants”. In the meantime, it’s our responsibility as a browser provider to make sure that whatever standards we implement are solid. We don’t want to repeat mistakes made in the past; we don’t want to implement unstable specifications that might change in the future (thus breaking your sites). We don’t want to implement specs that don’t make a lot of sense (for example, SVG Fonts compared to CSS3 Fonts) just to score 100% on Acid3. We don’t want to support new APIs, until we nailed and solved any possible security and privacy issues. This is not a rush to support everything as soon as possible. It’s critical to make it right.
HTML5 made lot of progress in recent months, the HTML5 specification expected to go to Last Call (kind of feature complete) in the first 2-3 months of 2011. From there, the spec will move to Candidate Recommendation and there will be a call for implementers.
The other specifications are at different stages; some (for example ECMA Script 262 or SVG) are already Recommendations (with the capital R). Others (for example CSS3 Colors or Web Apps Selectors API) are in Last Call or CR. Others (for example IndexDB or File API) are still in Working Draft or First Public WD.
You! This is a great time to start learning and experimenting with some of the new capabilities. I’m amazed by the HTML5 websites that are already in production today. I hope they will inspire you to build the next amazing web application!
Feedback? Questions? Please let me know!
Back from my European tour: what a great time! I had the pleasure to present in 3 different countries in just 4 days, to meet old friends and to make new one.
We talked a lot about HTML5 and Web Standards, we learned about tools or techniques to improve websites performance, we looked at the most cool HTML5 sites in the world.
As promised, I will share in the coming days all the decks, demos, links. You should expect the following blog posts coming soon:
Forza HTML5 and IE9!
Update 11/22: Added link to second and third presentations.
At PDC we discussed the “behind the scenes” of the HTML5 specification, we talked about the importance of a fast browser to enable richer scenarios and we recommended best practices for cross-browser interoperability. It’s now time to get the hands dirty with some HTML5 code!
In a couple of weeks I will have the pleasure to talk about the “HTML5 Developer Story” at some very interesting venue. Expect a lot of code, demos and best practices!
More info: http://europe.msteched.com/Topic/List
More info: http://www.oredev.org/2010/scheduler
More info: http://codebits.eu/intra/s/session/137
Hope to see you there!
A short answer could be “the future of the Web”. Enough? No, especially if you are a developer.
I answered more in detail this question at PDC (links below). Here’s just one slide, where I tried to summarize what’s behind the “HTML5” term.
HTML5 is not only a marketing message, but also the bread that the developers will use for years and years. It is a critical component and as such, it’s very important to make it right. In the session I explained what “right” means for Microsoft and W3C and how we are working to move these specifications forward. Enjoy!
View session: watch the recording online
Download slides: “HTML5”: More Than Just HTML5
Btw, what do you think about HTML5? Are you ready to HTML5-fy your site?
Update 2:04pm: as Chris noted in the comments, David released their CSS 2.1 Report here. However, for some obscure reason (that I still ignore) that report is still not appearing on the designated directory which is here.
This is a great news – as it is another step forward for CSS 2.1. On top of this, Opera released their report as well a few hours ago. If my counts are correct, here’s the pass rate so far:
I can’t find Chrome’s report – anyone have seen it?
Along with all the other announcements, today I’m very happy to announce the X-Icon Editor, an HTML5 application that allows you to create high resolution icons. I’ll be honest: I love this tool. Let me show you why.
First of all, what is a high resolution icon? The ICO format supports multiple resolutions. In the past, websites usually implemented a 16x16 pixel icon. Today Internet Explorer 9 allows websites to specify crisper icons that will shine in the different parts of the UI (for example, navigation bar, taskbar, or new tab page).
The X-Icon Editor helps you build a high resolution icon that can include up to 4 sizes: 16x16, 24x24, 32x32 and 64x64 pixels.
Let’s get started. Open either Internet Explorer 9 and go to www.xiconeditor.com.
You can hand-draw your own icon or import an existing image: transparent png, gif, jpg, bmp, and ico formats are all supported. To have some fun, I’ll use my photo. After uploading the image, you can crop out just the area you are interested in working on.
From the panel on the right, you can select all the sizes that will apply to this image. In a different scenario, you might want to upload 4 different images (one for each size).
The editing tools are not super advanced, but they still allow you to be pretty flexible and creative. Let’s add some transparency to the background. In order to do this, I will use the Paint Bucket Tool to set the Alpha channel to 0 and change the Tolerance to 15%. When you click on the background, the tool will automatically detect the “adjacent area” and clear it. If you make a mistake, you can use the blue arrows to go back/go next.
Now that I’m happy with the icon at 64x64 pixels, I can click on the 32x32 box in the right panel and repeat the same Paint Bucket Tool operations. Or, after clicking the 32x32 pixel option, I can import my 64x64 pixel image and it will come in with all the same formatting, but at 32x32 pixels.. I repeat the same steps for the 24x24 and 16x16 sizes. At the end, this is what I get.
Before exporting the icon, I can preview how my icon will fit in the browser.
Moreover, since the new icon actually becomes the default icon for this page, I can do a live test and drag-and-drop my tab to the Windows 7 Taskbar.
It’s awesome--I always dreamed of being between IE9 and Visual Studio!!
I like my icon: the transparency is neat and the IE9 chrome picks up nice colors. When you click Export, the tool will generate only 1 icon, which embeds all the dimensions used (that is, where at least one pixel in the dimension is not transparent). You will also get some recommendations in regard to performance (for example, use max-age, expires date, and compress the icon using GZIP).
With the addition of one standard line, you can add it to your site…
<link rel="shortcut icon" href="favicon.ico"/>
…and you are ready to go!
Special thanks go to Gregor and the other folks at Avarice who built this awesome application. You guys rock!
Please let us know.
Quick tip: if you are using jQuery UI with IE9, you might hit an issue today. There is in fact a code bug (of the series “do feature, not browser detection”) in the jQuery.UI.Mouse module, which is used by the Slider control or by other drag&drop features.
The jQuery team already identified the issue and a workaround – they are currently working to fix this in the main branch.
You can track it here.
Did you know that you can now turn Facebook into a Windows application?
Using Internet Explorer 9, you can drag&drop any url to the Taskbar…and the site will become automatically a Windows application! The chrome of IE will adapt to the Facebook logo, you will be able to quickly jump to specific part of the sites and also receive notifications (through icon updates) when there are new messages on the site. Cool!
Site Mode:
Jump List:
Icon Overlay:
I think my productivity at work is going to improve now!
One of my favorite features of IE9 is the possibility to turn any web site into a Windows application and “pin” it to the Windows 7 Taskbar. To make it beautiful, you can also build high resolution fav icons (e.g. 64x64 pixels). How?
Some folk at Avarice just sent me a screenshot of a very promising application…in a few hours from the launch of IE9, they already have a prototype of an Online FavIcon Editor fully written in HTML5!
Very promising, I’m looking forward to seeing it live. Any feature request?