Table Of Content>
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
