Shulou(Shulou.com)06/02 Report--

How to use HTML5 to build applications, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

HTML5 has been launched, Web is not immutable.

You must have heard this sentence or something like that before. I think when you hear this sentence, you may become very excited, roll your eyes, frown and question. It is also possible that you will have all three reactions.

I can understand these reactions very well. HTML5 is very commendable, and as we know, it may change Web, but its role has also been exaggerated. Moreover, its true meaning is still elusive. I have had each of the above reactions myself when building applications using HTML5. HTML5 is a broad topic, and it's hard to master, let alone know where to start using this exciting new set of technologies.

This article, the first in a series of articles in MSDN Magazine, aims to give you a comprehensive understanding of why the first sentence in this article is correct and important. In the coming months, I want to help you understand what HTML5 means to you, both as a Web developer and as a developer using Microsoft tools and technologies. I hope I can help you simplify some of the complexities of HTML5 and reveal exaggerated truths. I'll also introduce some of the HTML5 features that are now available, as well as some exciting technologies that deserve attention, although this is a little too far. Finally, I'll provide some tips to help you continue to use legacy browsers to provide a great experience for your users while adopting HTML5 technology immediately.

If you are excited about HTML5, I hope to help you turn that excitement into an idea that can be put into practice immediately. If you have any questions, I'd like to help you understand why HTML5 is so important. If you just don't know what HTML5 means, don't worry: this is the problem to be solved in the first stop of this series.

What is HTML5?

By now, you may find that HTML5 means different things to different people. For some people, it just means new tags such as and, as well as some new attributes that can be used in tags. For others, it means all the new and interesting features on Web, including technologies implemented in a single browser or other specifications that are not officially included in HTML5. Of course, understanding the true meaning of HTML5 is often the first obstacle that many people face.

Frankly speaking, it makes sense that there are various definitions. HTML5 is huge! HTML5 is formally defined by the World wide Web Consortium (W3C), an international standards body, and contains more than 100 specifications related to the next generation Web technology. If you collectively refer to all of these more than 100 specifications as HTML5, you might think that the W3C oversimplifies the definition of these specifications. HTML5 is so extensive that it is difficult to define it properly and clearly. I think the W3C defines the scope of this change by introducing HTML5 as a unified concept of Web change.

In fact, HTML5 is a generic term that describes a set of HTML, CSS, and JavaScript specifications designed to help developers build the next generation of websites and applications. This definition mainly consists of three parts: HTML, CSS and JavaScript. These three sections define how developers can use improved markup, richer styling capabilities, and the new JavaScript API to take full advantage of the new Web development capabilities. To put it simply, HTML5 = HTML + CSS + JavaScript.

okay. HTML5 is about changes to HTML, CSS, and JavaScript. These three terms describe the breadth and scope of HTML5, and you don't have to worry about all of these 100 + specifications. Or do you think it's a little simple? That may be true, but you will soon learn that a comprehensive definition of HTML5 is not as important as the technologies you choose to adopt, because they are worth your time and effort.

With some understanding of the definition, let's take a moment to talk about where Microsoft is involved in the HTML5 domain.

HTML5 and Internet Explorer

As I mentioned, the set of specifications that make up HTML5 is managed by the W3C. The W3C is made up of groups, organizations, and individuals dedicated to helping to promote and regulate the future of Web. WC3 is a consensus-based organization that usually operates by establishing committees (also known as working groups) and dividing areas of work according to relevant norms. Specifications can be issued by any member, and all norms (including those other than HTML5) are owned by the W3C and need to go through a five-stage process from initial drafting to formal recommendation.

Microsoft is a W3C member and plays an active role in the specification process of many HTML5 standards and working groups. Like all major browser vendors, Microsoft has invested heavily in HTML5, working with W3C and other vendors to ensure that developers can rely on HTML5 technology that is reliably implemented in an interoperable manner in all major browsers.

As far as browser provider Microsoft is concerned, there are four ways:

Provide the best HTML5 for the website through Internet Explorer 9.

Expose the upcoming features to developers through the Internet Explorer platform preview.

Invest in interoperability through tests submitted to the W3C.

The prototype of unstable standard is proposed through HTML5 laboratory.

"HTML5 for a website" is a term used by Microsoft to describe the HTML5 technologies available today, which are widely supported by all major browsers. We will spend a lot of time in this series discussing these technologies and how they are currently being adopted.

In addition to the methods currently provided, Microsoft uses a public platform preview to inform developers of the upcoming features of the next version of the browser and collect feedback from them. For Internet Explorer 9, Microsoft releases a platform preview every six to eight weeks, each time announcing new HTML5 enhancements, features, and performance improvements for developers to try and evaluate. Internet Explorer 9 was released in March, and as of early June, Microsoft has released two platform previews of Internet Explorer 10, which shows that Microsoft has been releasing Internet previews on a regular basis. As a developer, you will need to use the latest preview to understand, test, and influence browser development. You can download the latest preview of the Internet Explorer platform at IETestDrive.com.

To ensure that HTML5 works consistently in all browsers, Microsoft has invested heavily in interoperability, creating a single maximum set of test cases related to HTML5 and submitting it to the W3C. For the first time in history, the W3C uses this test case group as an authoritative source of HTML5's "readiness" in each browser. As a developer, the end result for me and everyone is that HTML5 technologies can be adopted and implemented at once and are confident that they will work consistently in all browsers. For more information about Microsoft resolving interoperability issues, visit bit.ly/dxB12S.

Although Internet Explorer 9 has adopted some HTML5 technologies and announced through the Internet Explorer platform preview that Internet Explorer 10 will adopt other HTML5 technologies, some commonly used and published specifications require some more work from W3C and browser vendors before they can be implemented in applications. One example is the Web socket, an exciting specification that allows developers to expose two-way communication channels with back-end servers to achieve a certain "real-time" connection, which was previously impossible in Web applications. As a developer, you will want to use a lot of Web suite words in the applications you build right away. However, the Web socket specification is still changing rapidly, and the W3C is still discussing the main aspects of the specification, which has not yet been finalized. In this case, it is now difficult to provide this feature reliably and consistently in all browsers.

For unstable or evolving specifications such as Web sockets (which we'll cover in more detail in a future article), Microsoft created the HTML5 Lab, a website for developers to experiment with the initial implementation of these technologies. This site provides downloadable and local trial prototypes, as well as hosted demo versions of some specifications. The purpose of this site is to provide you with a place to try these specifications yourself so that you can give relevant feedback to Microsoft and the W3C when the specifications become stable in the browser and are about to be implemented. For more information about HTML5 Labs, visit html5labs.com.

HTML5 and Microsoft development tools

In addition to participating in the W3C and supporting HTML5 technology in browsers, Microsoft is also involved in another aspect of HTML5, which is very important to developers: participation in HTML5 tools.

In early 2011, Microsoft updated Service Pack:Visual Studio 2010 and Expression Web 4 for two development tools. The Service Pack of both tools provides the type of HTML5 document for validation and the IntelliSense for new HTML5 tags and attributes. If you are using Visual Studio 2010 SP1, you can 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 in any HTML file through the HTML source editing toolbar, as shown in figure 2.

Figure 1 enables the HTML5 schema through the options dialog box

Figure 2 setting the HTML5 schema on the HTML source editing toolbar

After you set up the default schema, you will get IntelliSense support for 28 new semantic tags in HTML and tag-specific new and new global attributes in Visual Studio, as shown in figure 3.

Figure 3 HTML5 IntelliSense in Visual Studio 2010 SP1

In June 2011, Microsoft further updated its support for HTML5 with the release of Web Standards Update for Microsoft Visual Studio 2010 SP1. This extension applies to all versions of Visual Studio 2010, enhances HTML5 IntelliSense and authentication in Visual Studio, provides JavaScript IntelliSense for new browser features such as geolocation and DOM storage, and provides comprehensive CSS3 IntelliSense and validation. This extension can be downloaded from bit.ly/m7OB13 and will be updated periodically to provide enhanced tools for HTML5 development.

For Expression Web 4 SP1, setting the HTML5 schema under tools | Page options provides the same IntelliSense, and the tool also provides CSS3 IntelliSense for several draft CSS3 modules such as border-radius, box-shadow, and transform.

If you are using WebMatrix (visit web.ms/WebMatrix), you may find that all newly created .html, .cshtml, or .vbhtml documents contain default tags similar to those shown in figure 4. As I will discuss in the next article in this series, this is a valid basic HTML5 document. Most notably, document types and metadata character set tags are much more streamlined. Using this simple document type triggers the HTML5 schema in all browsers today, and by default, using WebMatrix makes it easier to provide HTML5 documents.

Figure 4 default HTML document in WebMatrix

By the way, if these aren't enough new HTML5 tools for you (all launched since January 2011), you can recently experience the fun of using ASP.NET MVC with the ASP.NET MVC 3 Tools Update released in MIX11 in April. In addition to many other new tool features, ASP.NET MVC 3 Tools Update provides the option to use HTML5 document types for new projects and comes with Modernizr 1.7 in the Scripts folder of the new application. Modernizr is a JavaScript library that significantly simplifies HTML5 development, which I will discuss in depth in a future article.

The key here is that even HTML5, which is just used in browsers, will quickly increase formal tool support, and Microsoft will even increase support for libraries (such as Modernizr) through the community. Today, when facing HTML5, you can get some help through the tools in Microsoft, and HTML5 support is expected to evolve and improve over time.

"adopt" HTML5 in an application

By now, you should realize that HTML5 is not a single entity that can be adopted or migrated to at once. To adopt HTML5 instead of using it on a large scale is to conduct a technology-by-technology assessment to determine which technologies are right for your application. For each HTML5 technology evaluated, consider (at least) the following factors when determining whether the technology is available:

What is the implementation breadth of this technology in all major browsers?

How to adopt this technology and provide "fill code" support for browsers that do not support a given feature?

The first factor is the most important, and coupled with your understanding of the browsers commonly used by website visitors, you will know which part of the more than 100 specifications is worthy of further evaluation. This section should contain a set of stability specifications that you can currently reliably adopt for your users.

However, even with this stable set of HTML5 technologies, users who have not yet switched to newer browsers should not be ignored. If you are heavily involved in the day-to-day development of the site, you must have a general idea of the percentage of users who visit the site using a given browser. For most of us, it is easy to look at the percentage of users accessing using older browsers, which leads to the conclusion that no matter what HTML5 technology is used, it will have a negative impact on these users. Fortunately, with the "fill code", our adoption of HTML5 will not be a long way off.

Paul Irish (the developer of the jQuery and Modernizr projects) defines the fill code as "…" Simulate future API fillers "to provide backup functions for older browsers." The fill code is like a patch for a website; this method determines whether a given HTML5 function is applicable to the user currently browsing the site, and accordingly provides a "fill in" filler or a series of proper downgrades so that the site can still be fully functional.

The most common library associated with populating code is Modernizr, the JavaScript library I mentioned earlier. Modernizr provides some basic populating code for semantic markup, functional testing for major HTML5 technologies, and conditional CSS based on supporting functionality. As mentioned earlier, Modernizr will be the subject of the next article; it, along with many other populated code bases, forms the core of this series. For more information, download Modernizr from modernizr.com.

When it comes to choosing which technologies to use, the final list may be both widely supported specifications and other specifications that must be populated for some browsers. You only need to know the components of the list according to your current needs and actual situation.

In the coming months, I'll introduce several important specifications, from geographic locations, forms, and canvases to Web worker threads, Web sockets, and IndexedDB. Some of these specifications are widely supported and "site-friendly", such as Web sockets, which are innovative and cannot be ignored no matter where they are used. For each specification, I will introduce existing support, known future support, some basic knowledge about the functionality of the specification that can be implemented in a Web site, and how to provide populated code support for browsers that do not support a given function.

Most importantly, start adopting HTML5 immediately. In fact, Web doesn't stop changing, and you can promote the development of Web by using HTML5 to build great next-generation Web applications.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.