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');
font-weight: normal;
font-style: normal;
}
.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.