阐述HTML5定义及IE浏览器的技术支持
作者：Brandon Satrom
“HTML5时代已经来临，网络不会一成不变。”
你可能早已经听过此类论断，我猜当你听到这种说法时，先时兴奋，继而翻翻白眼，口中喃喃自语：“为什么？”
若你出现上述反应也并不奇怪——我自己在制作HTML5应用时也曾经历过这一过程。
HTML5技术令人兴奋，并且有潜力改变我们所知的网络，但它仍然遭遇不少质疑。
更重要的是，其存在意义着实令人难以捉摸。这是一个广泛的话题，所以你很难一次把HTML5吃透，更何况是了解如何运用这种新技术开发内容。
如果你对HTML5感兴趣，或者有所怀疑和困惑，不妨先通过本文了解HTML5的意义。
HTML5是什么？
也许现在你已经发现，HTML5对不同的人而言自有不同意义。
对某些人来说，它仅仅意味着“页眉”和“页脚”之类的新标签，以及一系列出现于标记的新属性。对其他人而言，这意味着出现在网络上的新鲜有趣事物，其中包括植入单个浏览器或其他非HTML5规格的技术。
显然，了解HTML5的真正意义正是我们许多人所面临的第一个瓶颈。
坦白地讲，关于HTML5的定义真是太多了。
根据万维网联盟（W3C）的定义，HTML5包含超过100种与下一代网络技术有关的规格。不难发现，W3C通过将这100多个规模置于HTML5的名称之下，过于简化了实际情况。虽然我们难以将像HTML5这样广泛的事物，以模糊的方式对其定义，我还是相信W3C试图通过引进HTML5这个统一的概念来解释变化多端的网络环境。
事实上，HTML5是一个描述用于帮助开发者创建下一代网站和应用的HTML、CSS和JavaScript规格的涵盖性术语。这个定义中最显眼的三个部分是：HTML、CSS和JavaScript。他们定义了开发者如何使用优化标记，风格更丰富的性能，以及新JavaScript API来制作最新的网络开发功能。简单而言，HTML5=HTML+CSS+JavaScript。
HTML5主要关于HTML、CSS和JavaScript的变化。这三者描述了HTML5的宽度和范围，这样你就无需担忧关于100多种规格的问题。
还是觉得这有点简单化？有可能，但你很快就会看到，HTML5的广泛定义并没有像你选择的（值得投入时间和精力的）技术那么重要。
了解HTML5定义之后，让我们花些时间讨论微软在HTML5领域的作为。
HTML_5_in_Internet_Explorer(from splashnology)
HTML5和IE浏览器
正如我之前所言，构成HTML5的规格已经被W3C标准化。W3C的成员、组织和个人都投入精力帮助提升和定义未来的网络。W3C是一个基于一致性的组织，通常由工作组来执行相关技术标准的划分工作。任何成员都可以提出技术标准，这些标准均为W3C所有，从草案到正式推荐需要经历5个阶段的过程。
微软就是W3C成员之一，并在许多HTML5标准和工作组的标准化过程中发挥了积极作用。与所有的主流浏览器厂商一样，微软在HTML5中投入巨大，并持续与W3C及其他厂商合作确保开发者可在所有主流浏览器中部署HTML5技术。
作为浏览器厂商，微软战略分为4个环节：
1.通过IE9传递最佳现成网站HTML5技术；
2.通过IE平台预览向开发者展示新功能；
3.通过提交至W3C的测试，研究技术的互用性；
4.通过HTML5标签模拟不稳定的标准。
“现成网站HTML5”是微软用于描述你已经可以使用的HTML5技术的一个术语——它们已经获得了所有主流浏览器的广泛支持。像新HTML标签、Canvas、可伸缩矢量图形（SVG）、音频和视频、地理定位、网页存储以及许多新CSS3模块都已经植入IE9以及其他主流浏览器。
除此之外，微软还使用公共平台预览功能通知开发者即将面世的新版浏览器并征求反馈。对于IE9，微软每隔6至8周都会发布平台预览，每次都会宣布新的HTML5增强功能，以及性能优化以便开发者进行尝试和评估。IE9发布于3月份。截止7月初，微软已经为IE10发布了两次平台预览。作为开发者，你应该希望通过最新预览学习、测试并影响浏览器的发展。
为确保HTML5能够在所有浏览器上运行一致，微软在该技术的互用性上进行大量投入，向W3C创造并提交了与HTML5相关的最大测试用例。这个测试用例套件将首次被W3C用于每个浏览器HTML5技术“准备就绪”的权威来源。这样开发者就可以一次性采用并部署HTML5，并相信它们将在所有浏览器上保持一致。
虽然有些HTML5技术已经出现在IE9，但还有些技术仍然需通过IE平台预览宣布后才能面世，有些热门和最新规格仍需要W3C和浏览器厂商的进一步鉴定之后，才能植入我们的应用。
其中一个典型就是Web Sockets，这个规格可让开发者在后端服务器打开双向通信渠道，激活一种此前无法运用于网页应用的“实时”连接功能。作为开发者，你无疑可以想象无数次在应用中使用Web Sockets的情况。但Web Sockets的技术标准也迅速发生变化，因此当前所有浏览器都难以持续而可靠地提供这种功能。
针对Web Sockets这种不断变化的技术标准，微软创造了允许开发者试验这些技术的HTML5标签。该网站提供了允许下载并进行本地试用的原型，以及某些技术标准的托管样本。其目标是给你一个地方亲自尝试这些技术标准，让你针对这些技术标准给予微软和W3C一些反馈。
HTML5和微软开发者工具
除了微软对W3C的参与，以及在浏览器中对HTML5技术的支持，微软在HTML5技术方面还有另一项针对开发者的重要举措：微软的HTML5工具。
在2011年初，微软更新了其服务包中的两项开发工具：Visual Studio 2010和Expression Web 4。这些服务包提供了一个用于验证的HTML5文件类型，以及用于新HTML5标签和属性的IntelliSense。
如果你使用的是Visual Studio 2010 SPI，可点击Tools | Options | Text Editor | HTML | Validation启用HTML5方案，然后在Target下拉列表中选择HTML5选项（如图1）所示。你还可以通过任何HTML文件中的HTML Source Editing Toolbar将HTML5设置为默认方案（如图2）所示。
Options Dialog(from msdn)
（图1：通过选项对话框启用HTML5方案）
HTML source editing toolbar(from msdn)
（图2：在HTML Source Editing Toolbar设置HTML方案）
在你的默认方案设置完毕之后，IntelliSense以及新特定标签、全局属性将可运用于HTML中的28个新语义标签。
HTML5 IntelliSense(from gamasutra)
（图3：Visual Studio 2010 SPI中的HTML5 IntelliSense）
微软在2011年6月，通过发布针对Visual Studio 2010 SPI的Web Standards Update进一步更新了对HTML5的支持。这一扩展为Visual Studio增加了HTML5 IntelliSense和验证，其中包括针对Geolocation和DOM Storage等新浏览器性能的JavaScript IntelliSense，并提供了广泛的CSS3 IntelliSense和验证。
至于Expression Web 4 SPI，在Tools | Page Options之下设置HTML5方案也可以提供相同的IntelliSense，并为数种草拟CSS3模块提供了CSS3 IntelliSense。
如果你使用WebMatrix，你可能会注意到你所创造的包含类似下图中默认标记的全新.html, .cshtml, or .vbhtml文件。这是一个基础而有效的HTML5文件。最值得注意的是，其文档类型的元字符集标签已经丢失了许多不整齐的内容。使用这种简单的文档类型可在所有现代浏览器中触发HTML5模式，而WebMatrix则可通过提供默认的HTML5文档让你更轻松地执行操作。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title></title>
</head>
<body></body>
</html>
如果这些新HTML5工具对你来说还不够，可以看看4月份在MIX11中宣布整合到ASP.NET MVC 3 Tools Update中的ASP.NET MVC。这个更新版本为新项目提供了使用HTML5文档类型的选项，并在新应用的Scripts文件夹中植入了Modernizr 1.7。Modernizr是一个可以极大简便HTML5开发的JavaScript库。
这里的结论是，尽管HTML5才刚出现于我们的浏览器，官方工具也非常迅速地添加了对其的支持服务。微软甚至还添加了针对社区的库支持（例如Modernizr）。
让你的应用“采纳”HTML5
现在，你应该意识到HTML5并非一个你可以一下子采纳或转移的单个实体。采纳HTML5并非批量选择，而是依据技术进行技术评估、确定是否适合自己应用的选择。对于你所评估的每项HTML5技术，至少要考虑以下因素以便决定是否采用该技术：
1.该技术在所有主流浏览器中的运用是否普遍？
2.你该如何采纳这一技术，并“polyfill”无法支持该功能的浏览器？
若你考虑的是用户最常使用哪些浏览器，就很有必要考虑第一个因素。这可以帮你确定这100多项技术标准中哪些子集最值得评估，以确保它们足够稳定。
但即使是稳定的HTML5技术集合，你也不该忽视那些尚未转向新浏览器的用户。如果你高度参与网站的日常开发工作，你肯定就会大概了解用户通过特定浏览器访问你网站的比例。对我们多数人而言，大家很容易因为看到使用旧版浏览器的用户比例而得出结论，认为采用HTML5技术会对这些用户带来消极影响。
Paul Irish（游戏邦注：一名jQuery和Modernizr项目的开发者）将polyfill定义为“……模拟一个未来API，提供旧版浏览器撤退功能的垫片。”polyfill就像是网站的填泥料，它能决定某项HTML5功能是否适用于正在浏览你网站的用户，并提供一种“补充”这种支持的填料，或者一段能够让你的网站依旧完整运行的故障弱化。
与polyfill相关的最热门的库是Modernizr，也就是我之前提到的JavaScript库。Modernizr为主流HTML5技术提供了一些语义标记、功能检测的基本polyfill功能，以及基于已支持功能的条件式CSS支持。Modernizr将通过这个系列，以及其他多个polyfill库出色运行。欲了解更多详情，请通过modernizr.com下载Modernizr。
在决定选择哪些技术时，你的最终列表上可能会有一些广泛支持的技术标准，以及其他你需要为特定浏览器填充支持的技术标准。只有根据自己当前的需求和情况，你才会清楚自己的这个选择列表将包含哪些内容。
如果你想了解HTML5的情况，我建议你去阅读一些有关这个话题的书籍。我尤其推荐由Bruce Lawson和Remy Sharp所著的《Introducing HTML5》（New Riders,2010），以及由Mark Pilgrim推出的《HTML5 Up and Running》(O’Reilly Media, 2010)。请登陆W3C.org了解所有技术标准的更多新信息，并通过BuildMyPinnedSite.com和IETestDrive.com下载IE9和IE 10的平台预览内容，了解微软通过该浏览器传递的HTML5体验。（本文为游戏邦/gamerboom.com编译，拒绝任何不保留版权的转载，如需转载请联系：游戏邦）
Building Apps with HTML5: What You Need to Know
Brandon Satrom
“HTML5 is here, and the Web will never be the same.”
You’ve no doubt heard that before, or something like it. I’d guess that when you did, you got excited, rolled your eyes, or mouthed the word “why?” while furrowing your brow a bit. Perhaps your reaction was a mix of all three.
I don’t blame you for any one of those reactions—I’ve experienced them all myself when building HTML5 applications.
HTML5 is exciting, and it does have the potential to change the Web as we know it, but it also gets blown out of proportion.
What’s more, its true meaning can be elusive. It’s a broad topic, so it’s difficult to wrap your head around HTML5, much less know where to begin with this new set of technologies.
If you’re excited about HTML5, I want to help you turn that energy into ideas you can put into practice immediately.
If you’re skeptical, I want to help you understand just why HTML5 is important.
And if you’re just confused about what HTML5 even means, fear not: that’s our first stop.
What Is HTML5?
You’ve probably discovered by now that HTML5 means different things to different people.
To some, it just means new tags like <header> and <footer>, plus a handful of new attributes available in markup. To others, it means everything that’s new and interesting on the Web, including technologies implemented in a single browser or other specifications not officially part of HTML5.
Clearly, understanding the real meaning of HTML5 is often the first roadblock many of us face.
And honestly, there’s some justification for the wide variety of definitions. HTML5 is huge!
Formally defined by an international standards body known as the World Wide Web Consortium (W3C), HTML5 consists of more than 100 specifications that relate to the next generation of Web technologies. By putting all 100-plus of these specifications under the moniker HTML5, you could argue that the W3C oversimplified things. And while it’s hard to take something as broad as HTML5 and define it in an unambiguous way, I believe that the W3C was trying to address the scope of what’s changing on the Web by introducing HTML5 as a unifying concept for that change.
In fact, HTML5 is an umbrella term describing a set of HTML, CSS, and JavaScript specifications designed to enable developers to build the next generation of Web sites and applications. What’s notable in that definition is its three parts: HTML, CSS, and JavaScript. They define how developers use improved markup, richer style capabilities, and new JavaScript APIs to make the most of new Web development features. Simply put, HTML5 = HTML + CSS + JavaScript.
And that’s it. HTML5 is about changes to HTML, CSS, and JavaScript. Rather than worrying about all 100-plus specifications, those three terms describe the breadth and scope of HTML5.
Still think that’s a bit simplistic? It may be, but as you’ll soon see, a comprehensive definition of HTML5 doesn’t matter as much as the technologies you choose as worthy of your time and effort to adopt.
With a definition in hand, let’s spend a few moments talking about where Microsoft fits into the HTML5 space.
HTML5 and Internet Explorer
As I mentioned, the specifications that make up HTML5 are stewarded by the W3C. The W3C consists of staff, organizations, and individuals invested in helping to drive and define the future of the Web. The WC3 is a consensus-based organization, and typically operates by forming committees (called working groups) to divide up chunks of work on related specifications. Specifications can be proposed by any member, and all specifications owned by the W3C—more than the ones in HTML5—move through a five-stage process from first draft to official recommendation.
Microsoft is a member of the W3C and plays a very active role in the specification process for many HTML5 standards and working groups. Like all of the major browser vendors, Microsoft is heavily invested in HTML5 and is working with the W3C (and other vendors) to ensure that developers can count on HTML5 technologies being reliably implemented in an interoperable way on all major browsers.
Microsoft’s approach, as a browser vendor, is fourfold:
Deliver the best site-ready HTML5 today via Internet Explorer 9.
Expose upcoming features to developers via Internet Explorer Platform Previews.
Invest in interoperability through tests submitted to the W3C.
Prototype unstable standards via HTML5 labs.
Prototype unstable standards via HTML5 labs.
“Site-Ready HTML5” is the term Microsoft uses to describe HTML5 technologies that you can use today—they already have broad support across all major browsers. Technologies like the new HTML tags, Canvas, Scalable Vector Graphics, Audio and Video, Geolocation, Web Storage and many new CSS3 modules are all implemented in Internet Explorer 9 and the other mainstream browsers. I’ll spend a fair amount of time in this series discussing these technologies, as well as how you can adopt them today.
Beyond what’s available now, Microsoft is using public Platform Previews to inform developers of what’s coming in the next version of the browser and soliciting feedback. For Internet Explorer 9, Microsoft released Platform Previews every six to eight weeks, each time announcing new HTML5 enhancements, features, and performance improvements for developers to try out and evaluate. Internet Explorer 9 was released in March. As of early July, Microsoft released two Platform Previews for Internet Explorer 10, so it looks like previews will be regularly available. As a developer, you’ll want to take advantage of the latest previews to learn, test, and influence how the browsers evolve. You can download the latest Internet Explorer Platform Preview at IETestDrive.com.
To ensure that HTML5 works consistently across all browsers, Microsoft has invested heavily in interoperability, creating and submitting the single largest suite of test cases related to HTML5 to the W3C. For the first time, this suite of test cases will be used by the W3C as the authoritative source of HTML5 “readiness” in each browser. The end result for you and me as developers is that we can adopt and implement HTML5 technologies once, and trust that they’ll work consistently across all browsers. For more information on Microsoft’s work around interoperability, go to http://samples.msdn.microsoft.com/ietestcenter/.
While some HTML5 technologies already exist in Internet Explorer 9, and others are being announced via Internet Explorer Platform Previews, some popular and newsworthy specifications need a bit more work by the W3C and the browser vendors before they’ll be ready to implement in our applications.
One example is Web Sockets, an exciting specification that lets developers open bidirectional communication channels with back-end servers, enabling a level of “real-time” connectivity not previously available in Web applications. As a developer, you can no doubt imagine countless uses for Web Sockets in the applications you’re building right now. But the Web Sockets specification is still rapidly changing, with key aspects in flux and being discussed within the W3C. Given that situation, it would be difficult to provide this feature consistently and reliably across all browsers today.
For evolving specifications like Web Sockets (which I’ll cover in depth in a future article), Microsoft created HTML5 Labs where you can experiment with draft implementations of these technologies. The site provides prototypes you can download and try locally, along with hosted demos for some specs. The goal is to give you a place to try these specs out for yourself, and for you to give both Microsoft and the W3C feedback on these specs as they stabilize and near implementation in browsers. Try out the new technologies now at html5labs.com.
HTML5 and Microsoft Developer ToolsBeyond Microsoft’s involvement with the W3C and the HTML5 technologies supported in the browser, there’s another dimension to Microsoft’s approach to HTML5 that’s important for developers: its approach to HTML5 tooling.
In early 2011, Microsoft updated two of its development tools with service packs: Visual Studio 2010 and Expression Web 4. The service packs provided an HTML5 document type for validation, and IntelliSense for new HTML5 tags and attributes.
If you’re using Visual Studio 2010 SP1, enable the HTML5 Schema by clicking Tools | Options | Text Editor | HTML | Validation, and then selecting the HTML5 option in the Target drop-down list, as shown in Figure 1. You can also set HTML5 as the default schema from the HTML Source Editing Toolbar in any HTML file, as shown in Figure 2.
Figure 1: Enabling the HTML5 Schema via the Options Dialog
Figure 2: Setting the HTML5 Schema on the HTML Source Editing Toolbar
Once your default schema is set, IntelliSense will work for the 28 new semantic tags in HTML, as well as new tag-specific and global attributes.
Figure 3: HTML5 IntelliSense in Visual Studio 2010 SP1
Microsoft further updated its HTML5 support with its release of the Web Standards Update for Microsoft Visual Studio 2010 SP1 in June 2011. This extension adds further HTML5 IntelliSense and validation to Visual Studio, includes JavaScript IntelliSense for new browser capabilities like Geolocation and DOM Storage, and provides comprehensive CSS3 IntelliSense and validation. You can download this extension, which will be regularly updated, here: Web Standards Update.
For Expression Web 4 SP1, setting the HTML5 schema under Tools | Page Options offers the same IntelliSense, and provides CSS3 IntelliSense for several draft CSS3 modules like border-radius, box-shadow, transform, and more.
If you’re using WebMatrix (see WebMatrix), you may have noticed that all new .html, .cshtml, or .vbhtml documents you create contain default markup similar to what’s shown in Figure 4. As I’ll discuss in the next article in this series, this is a basic, valid HTML5 document. Most notably, the doctype and meta charset tags have lost a lot of cruft. Using this simple doctype triggers HTML5 mode across all modern browsers, and WebMatrix makes it easier for you by providing an HTML5 document by default.
Figure 4: A Default HTML Document in WebMatrix
If that’s not enough new HTML5 tooling for you—all since January 2011, by the way—ASP.NET MVC recently got in on the fun with the ASP.NET MVC 3 Tools Update announced at MIX11 in April. This update provides the option to use the HTML5 doctype for new projects and ships Modernizr 1.7 in the Scripts folder of new applications. Modernizr is a JavaScript library that greatly eases HTML5 development; again, I’ll cover it in depth in a future article.
The takeaway here is that even though HTML5 is just emerging in our browsers, official tool support is quickly being added. Microsoft is even adding support for libraries (like Modernizr) from the community. You can target HTML5 with some help from Microsoft tools today, and expect that HTML5 support will continue to grow and improve over time.
‘Adopting’ HTML5 in Your Applications
By now, you should realize that HTML5 isn’t a single entity that you can adopt or migrate to in one fell swoop. Adopting HTML5, rather than being a wholesale choice, is about making a technology-by-technology evaluation and determining which are right for your application. For each HTML5 technology you evaluate, look at (at least) the following factors to decide if it’s ready for you to adopt:
How widely implemented across all major browsers is the technology?
How would you adopt this technology and “polyfill” support for browsers that don’t support a given feature?
The first factor is the most important as long as you take into account which browsers your users are most active in. This should help you decide which subsets of the 100-plus specifications are worth evaluating, to make sure they’re stable enough to reliably adopt today.
However, even with that stable set of HTML5 technologies, you shouldn’t ignore your users who haven’t moved to a newer browser. If you’re heavily involved in the day-to-day development of your site, you no doubt have some rough idea of the percentages of users visiting your site with a given browser. For most of us, it would be easy to look at the percentage of users visiting with an older browser and come to the conclusion that adopting any HTML5 technologies would negatively affect those users. Luckily there’s “polyfilling” to save us from waiting until some foggy date in the future to adopt HTML5.
Paul Irish (a developer on the jQuery and Modernizr projects) defines a polyfill as “… a shim that mimics a future API, providing fallback functionality to older browsers.” A polyfill is like spackle for your Web sites; it’s a way to determine if a given HTML5 feature is available to the user currently browsing your site, and to provide either a shim that “fills in” that support or a course of graceful degradation that enables your site to still function fully.
The most popular library associated with polyfilling is Modernizr, the JavaScript library I mentioned earlier. Modernizr provides some basic polyfills for semantic markup, feature detection for major HTML5 technologies, and support for conditional CSS based on supported features. Modernizr will feature prominently throughout this series, along with many other polyfilling libraries. To learn more, download Modernizr at modernizr.com.
When it comes to choosing which technologies to adopt, your final list may be a combination of widely supported specifications and other specifications that you’ll have to polyfill support for
certain browsers. Only you will know the exact makeup of that list based on your current needs and context.
In the coming months, I’ll discuss several notable specifications, from Geolocation and Forms and Canvas, to Web Workers, Web Sockets and IndexedDB. Some of these are widely supported and “site-ready,” and some, like Web Sockets, are too groundbreaking to ignore, regardless of where they stand today. With each specification, I’ll discuss current and known future support, some basics about how you can implement the specification’s features on your sites, and how to polyfill support for browsers that don’t support a given feature.
If you want to dig more into HTML5 today, I suggest you pick up a couple of books on the subject. In particular, I recommend “ Introducing HTML5” (New Riders, 2010) by Bruce Lawson and Remy Sharp and “ HTML5 Up and Running” (O’Reilly Media, 2010) by Mark Pilgrim. Also, be sure to visit W3C.org for up-to-date information on all specifications, as well as BuildMyPinnedSite.com and IETestDrive.com to download Internet Explorer 9 and the Internet Explorer 10 Platform Preview, and to learn more about the great HTML5 experiences Microsoft is delivering through the browser.（source：msdn.microsoft）
下一篇:点评4种玩家类型的个性及其对立面
闽公网安备35020302001549号