> m o ok.c o b e w o w w. w w < ok o B e w! o W m o d fr For your convenience Apress has placed some of the front a o nl matter material after the index. Please use the Bookmarks w o D and Contents at a Glance links to access them. Contents at a Glance n About the Author .................................................................................................................xv n About the Technical Reviewer ...........................................................................................xvi n Acknowledgments .............................................................................................................xvii n Introduction ......................................................................................................................xviii n Chapter 1: Overview of HTML5 and ASP.NET 4.5 ..................................................................1 n Chapter 2: Overview of jQuery ............................................................................................35 n Chapter 3: Working with Audio and Video ..........................................................................63 n Chapter 4: Drawing with the Canvas .................................................................................83 n Chapter 5: Working with Forms and Controls ..................................................................119 n Chapter 6: Using History API and Custom Data Attributes ..............................................165 n Chapter 7: Storing Data in Web Storage ...........................................................................183 n Chapter 8: Developing Offline Web Applications ..............................................................203 n Chapter 9: Dealing with Local Files Using the File API ....................................................223 n Chapter 10: Multithreading in Web Pages Using Web Workers .......................................255 n Chapter 11: Using the Communication API and Web Sockets .........................................277 n Chapter 12: Finding Location with the Geolocation API ..................................................305 n Chapter 13: Styling Web Forms and Views with CSS3 .....................................................323 n Appendix A: HTML5 Learning Resources .........................................................................351 n Index ..................................................................................................................................353 iv Introduction Welcome to the exciting world of HTML5! If you’re an ASP.NET developer looking to turbocharge your ASP.NET applications with HTML5 features, you’ve picked the right book. Compared to its successors, HTML5 offers a much richer and complex set of features. HTML5 isn’t just about additional markup tags— it’s about APIs that you can program using client-side script. On one hand, HTML5 simplifies tasks that weren’t possible previously; but at the same time, it calls for a detailed understanding of HTML5 features and ways to integrate those features into your applications. This is the reason you need a book that specifically talks about integrating HTML5 into your web development framework: ASP.NET. When ASP.NET was initially released, the core focus was on server-side programming. However, due to the popularity of Ajax, the client side became increasingly rich. Most professional web sites developed today tap the power of JavaScript and Ajax to provide a better user experience. Because many HTML5 features are programmable using JavaScript, the overall work done at the client side will continue to increase. ASP.NET, JavaScript, Ajax, and HTML5 may sound like independent pieces, but in reality they complement each other to form a complete picture of modern web application development. This book is intended to help you understand what this picture looks like and how to tap the full potential of HTML5 features in your ASP.NET web applications. Who Is This Book For? This book is for ASP.NET web developers who want to tap the power of HTML5 in their existing or new web applications. This book doesn’t teach about ASP.NET features as such. I assume you’re already comfortable working with ASP.NET and doing web application development in general. All the code samples discussed in this book use C# as the server-side programming language. So, you should also know C#. For the client-side code, the book uses jQuery—a JavaScript-based library. Although no prior knowledge of jQuery is expected, I assume you’re familiar with the basics of JavaScript. The examples illustrated throughout the book use SQL Server and Entity Framework. Although you need not have a detailed understanding of these, you should be familiar with them. Finally, the book uses Visual Studio as the development tool. You should know how to work with Visual Studio to perform basic tasks such as creating projects and debugging code. Web Forms or MVC ASP.NET offers two options for developing web applications: ASP.NET Web Forms and ASP.NET MVC. Using the HTML5 features discussed in this book is more or less the same whether you’re developing Web Forms–based applications or MVC-based applications. So, this book presents the code samples as a mix of xviii n introduction Web Forms and MVC applications. Where there is difference in the usage of HTML5 features, both options are covered. All the MVC applications use ASPX views. Software Required In order to work through the examples discusses in this book, you need the following software: • Visual Studio 2012 • SQL Server 2012 • Web browsers: Internet Explorer 9, Firefox, Chrome, Opera, and Safari Although I used Visual Studio Professional 2012 to develop the book’s examples, most of the examples can also be developed using Visual Studio Express 2012 for Web. All the data-driven examples were developed using SQL Server 2012 Express Edition. I use the Northwind sample database in many examples, and I suggest that you install it at your end. You can download the Northwind database and its script from the MSDN downloads web site. Some examples (especially those needing Web Socket protocol support) require Windows 8 in order to run successfully. HTML5 is an evolving specification. As of this writing, various browsers support HTML5 features to varying degrees. Throughout the book, I use different browsers (IE9, Firefox, Chrome, Opera, and Safari) to illustrate HTML5 features. When you’re developing a web application that uses HTML5 features, it’s recommended that you test the features in these browsers. So, you should install the latest versions of all these browsers on your development machine. Structure of This Book This book is organized in 13 chapters and 1 appendix. A quick overview follows: • Chapter 1 gives you a brief overview of the HTML5 features discussed in the book. Some Visual Studio 2012 features that are important from an HTML5 point of view are also discussed. • Many features of HTML5 can be programmed using JavaScript. Chapter 2 teaches you the basics of jQuery—a popular JavaScript library. You use jQuery throughout the book. If you’re unfamiliar with jQuery, this chapter gets you up and running. • Playing audio and video files is now easy because HTML5 provides native support for playing media files. Chapter 3 covers these two areas in detail. • Chapter 4 covers the HTML5 canvas, a feature that allows you to draw inside a browser window using JavaScript objects intended for that purpose. • If you develop data-driven web applications using ASP.NET, Chapter 5 is bound to catch your attention: it covers new HTML5 input types and enhancements to HTML forms. • Chapter 6 discusses the history API and custom data attributes (data-*). The history API lets you add entries to the browser history programmatically, and custom data attributes allow you to define metadata for an element. xix n introduction • HTML5 introduces a new type of client-side storage called web storage. Using web storage, you can store pieces of information as key-value pairs. Chapter 7 covers this useful topic. • Although most web applications require a live network connection in order to function properly, some applications can be developed to work offline. Chapter 8 discusses what offline web applications are and how to develop one. • Chapter 9 shows how you can use the file API to read file information and the content of files selected by the user. This chapter also teaches you to use HTML5 native drag-and-drop. • Web workers let you develop web pages such that JavaScript processing can be run in the background. This way, the user interface is responsive to user interactions processing logic behind the scenes. Chapter 10 covers this important and useful feature. • HTML5 has added new ways in which the client and server can communicate. They include the postMessage API, server-sent events, XMLHttpRequest (Level 2), and Web Sockets. All of them are the subject matter of Chapter 11. • As mobile devices become more and more popular, web applications that customize themselves according to the user’s current location are finding their way into handheld gadgets. Chapter 12 discusses geolocation—the feature that lets you develop location-aware web applications. • Chapter 13 covers some of the important enhancements to Cascading Style Sheets version 3 (CSS3). Using these features, you can add fancy frills to your HTML elements, such as web fonts, shadows, transparency, gradients, and borders with rounded corners. Appendix A lists some learning resources for HTML5. Downloading the Source Code The complete source code for the book is available for download at the book’s companion web site. Visit www.apress.com, and go to this book’s information page. You can then download the source code from the Source Code/Download section. Contacting the Author You can reach me via my web sites www.bipinjoshi.com and www.bipinjoshi.net. You can also follow me on popular social-networking web sites such as Facebook and Twitter (see the “Subscribe” section on my web sites for the links). xx chapter 1 n n n Overview of HTML5 and ASP.NET 4.5 Until recently, ASP.NET developers didn’t need to bother much about the version number of HTML—and now suddenly everybody is talking about HTML5! That’s the kind of impact the evolved HTML standards will have on the web pages we develop now and in the future. Of course, the old functionality provided by traditional HTML (such as HTML 4.01) isn’t going away. The previous version is an integral part of HTML5, but the new improvements offered by HTML5 are appealing to any ASP.NET developer. This chapter gives you a quick overview of HTML5 features. It also explains how HTML5 and ASP.NET fit into a web application. An overview of the ASP.NET web stack and step-by-step tour of project creation in Visual Studio give you a quick brush-up of your ASP.NET skills. This chapter specifically covers: • A brief history of HTML5 • HTML5 page layout • New markup tags • HTML5 programmable features • Where and how HTML5 fits in an ASP.NET application History of HTML5 To understand the magic behind the number 5, it would be worthwhile to peek into the history and inspiration behind the evolution of HTML standards over a decade. If you’ve been designing web pages since the early days of the Web, you’ll recollect that back then, a web page was basically a collection of static HTML elements. Web pages lacked the interactivity, responsiveness, and complexity you see today. The old HTML was merely a set of markup tags that web developers and designers used to create web pages. It was also careless about the strictness of the markup. After completing the majority of work on HTML 4, the World Wide Web Consortium (W3C) decided to develop a standard—XHTML—for HTML markup. The XHTML specifications introduced strict rules for HTML markup such as requiring that start tags have corresponding end tags, tags be properly nested, and so on. These rules were introduced with good intentions and were appreciated by the developer community. However, it became apparent that nobody wanted to give up web pages developed using the 1 chapter 1 n overview of htML5 and asp.net 4.5 old HTML that didn’t meet the rules enforced by XHTML. Neither web-page developers nor browser companies stopped their support for traditional HTML markup in favor of the new XHTML standards. As a result, web pages became a mix of old HTML and XHTML. There were efforts to evolve XHTML further, but the browser and developer community simply refused to give up support for plain old HTML markup. The XHTML rules, although good from a theoretical point of view, weren’t compelling enough to make the web community abandon support for traditional HTML. In 2004, a group of people, mostly from browser manufacturing companies (such as Apple, Mozilla, and Opera), formed the Web Hypertext Application Technology Working Group (WHATWG). The newly formed group began looking at HTML from a different perspective. Instead of talking in terms of rules, standards, and strictness, they brainstormed about features that, if added to HTML, would add value for web designers and developers. Traditional HTML (official version 4.01) coupled with these additional features became HTML5. This initiative got support from the community, developed momentum, and was taken over by W3C for standardization in 2007. In January 2008, W3C published a working draft of HTML5. In addition, XHTML5 (a set of standards for HTML5 documents) was introduced; it’s essentially an update to XHTML and is being defined alongside the HTML5 specifications. The past showed that it’s impossible to abandon HTML and replace it with something else. So, HTML is considered a current standard: although it’s called HTML5 to refer to its new capabilities, from the browser and specifications point of view it’s just HTML. The next section makes this clear when you learn the basic layout of an HTML5 page. n Note Although XHTML could never replace HTML, it had a positive impact on web developers and designers. Due to XHTML’s strict rules, web page developers and designers became more conscious of improving the structure of their web pages. The web-design tools also improved by highlighting markup-level errors caused by improper nesting and missing end tags. HTML5 Page Structure Now that you know the brief history of HTML5, let’s see a simple HTML5 web page in action. Open any text editor, such as Windows Notepad, TextPad, or Visual Studio’s default text editor, and key in the markup shown in Listing 1-1. Listing 1-1. A Simple HTML5 Page <!DOCTYPE html> <html> <head> <title>Welcome to HTML5</title> </head> <body> <h1>Hello HTML5!</h1> </body> </html> Save the file as Hello.htm, and double-click it to open in your default browser. Figure 1-1 shows a sample run of Hello.htm in Internet Explorer 9 (IE9). 2 chapter 1 n overview of htML5 and asp.net 4.5 Figure 1-1. A sample run of Hello.htm Although constructing this web page isn’t rocket science, it throws light on some interesting things. First, look at the <!DOCTYPE> declaration in Listing 1-1: it tells you that this document is an HTML document. Notice that there is no mention of the HTML version in the DOCTYPE. That means even if new features are added to HTML in the future (and they undoubtedly will be) the document is still an HTML document and not an HTML4 or HTML5 document. Compare this simple DOCTYPE declaration with the following pre-HTML5 declaration: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd”> The complex DOCTYPE declaration is reduced to a simple form in HTML5. Listing 1-1 includes properly nested markup tags such as <head>, <title>, and <h1>. However, HTML5 and web browsers forgive most nesting errors, just like old HTML. Of course, as a good practice you should follow the guidelines of well-formed and -structured markup. In the preceding example, you used a text editor to create Hello.htm. As an ASP.NET developer, you probably use Visual Studio or Visual Studio Express for Web to develop your web pages. Luckily, these tools understand and support HTML5 markup. Figure 1-2 shows the Options dialog in Visual Studio, where you can configure the relevant settings. Figure 1-2. Options dialog in Visual Studio 3 chapter 1 n overview of htML5 and asp.net 4.5 When you configure Visual Studio to use HTML5 (Visual Studio 2012 uses HTML5 by default), all the HTML pages and Web Forms you create use the HTML5 style of DOCTYPE declaration. The markup in Listing 1-2 shows the default web form markup created in an ASP.NET web site. Listing 1-2. Default Markup for a Web Form <%@ Page Language=”C#” %> <!DOCTYPE html> <script runat=”server”> </script> <html xmlns=”http://www.w3.org/1999/xhtml”> <head runat=”server”> <title></title> </head> <body> <form id=”form1” runat=”server”> <div> </div> </form> </body> </html> You can also see HTML5-specific markup tags in Visual Studio IntelliSense (Figure 1-3). Figure 1-3. HTML5-specific tags in Visual Studio IntelliSense Although HTML5 and web browsers forgive most markup errors, as a good developer you should ensure that your HTML5 page markup follows the recommended usage rules. To assist with this task, you can use the W3C Markup Validation Service: an online utility that validates your HTML and XHTML documents. Figure 1-4 shows this utility with Hello.htm as the input. 4