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.