WA1925 Enterprise Web Development using HTML5 Web Age Solutions Inc. USA: 1-877-517-6540 Canada: 1-866-206-4644 Web: http://www.webagesolutions.com
The following terms are trademarks of other companies: Java and all Java-based trademarks and logos are trademarks or registered trademarks of Sun Microsystems, Inc. in the United States, other countries, or both. Microsoft, Windows, Windows NT, and the Windows logo are trademarks of Microsoft Corporation in the United States, other countries, or both. UNIX is a registered trademark of The Open Group in the United States and other countries. Linux is a trademark of Linus Torvalds in the United States, other countries, or both. IBM, WebSphere, DB2 and Tivoli are trademarks of the International Business Machines Corporation in the United States, other countries, or both. Other company, product, and service names may be trademarks or service marks of others. For customizations of this book or other sales inquiries, please contact us at: USA: 1-877-517-6540, email: getinfousa@webagesolutions.com Canada: 1-866-206-4644 toll free, email: getinfo@webagesolutions.com Copyright 2013 Web Age Solutions Inc. This publication is protected by the copyright laws of Canada, United States and any other country where this book is sold. Unauthorized use of this material, including but not limited to, reproduction of the whole or part of the content, re-sale or transmission through fax, photocopy or e-mail is prohibited. To obtain authorization for any such activities, please write to: Web Age Solutions Inc. 439 University Ave Suite 820 Toronto Ontario, M5G 1Y8
Table of Contents Chapter 1 - Introduction to HTML5...7 1.1 History of HTML5...7 1.2 HTML5 Standards Body...8 1.3 New Features of HTML5 1/3...8 1.4 New Features of HTML5 2/3...9 1.5 New Features of HTML5 3/3...9 1.6 Current Browser Support for HTML5...10 1.7 Detecting Support for HTML5...10 1.8 Detecting Support for HTML5...10 1.9 HTML5 vs. Flash...12 1.10 HTML5 vs. Flash...12 1.11 Replacing Flash with HTML5...13 1.12 Summary...14 Chapter 2 - The Basics...15 2.1 What Is HTML5...15 2.2 HTML5 Goals...15 2.3 HTML Specs, Past and Present...16 2.4 How Is HTML5 Different From HTML4?...16 2.5 HTML5 Is Not Based On SGML...17 2.6 More Differences...18 2.7 HTML5 Defines Required Processing For Invalid Documents...19 2.8 The Doctype Declaration...19 2.9 Semantic Elements...20 2.10 The <aside> Element...20 2.11 Browser Support For HTML5...20 2.12 Summary...21 Chapter 3 - New Semantic Elements...23 3.1 Function over Form...23 3.2 HTML4 Layouts...24 3.3 HTML5 Semantic Layouts...25 3.4 Nesting Semantics...25 3.5 Other New Semantic Elements...26 3.6 The <time> Element...26 3.7 WAI-ARIA...27 3.8 The <ruby> and <rt> Elements...27 3.9 The <rp> Element...28 3.10 The <keygen> Element...28 3.11 Summary...29 Chapter 4 - Forms...31 4.1 The form Attribute...31 4.2 The placeholder Attribute...31 4.3 Form Field Types...32 4.4 Forms and Validation...33 4.5 The required Attribute...33
4.6 The number input type...34 4.7 The pattern Attribute...34 4.8 The range and date input types...34 4.9 The <datalist> Element...35 4.10 The autofocus and oninput Attributes...36 4.11 HTML5 CSS Pseudo-Classes...37 4.12 Summary...37 Chapter 5 - Canvas...39 5.1 The <canvas> Element...39 5.2 <canvas> vs. <svg>...40 5.3 Browser Support for <canvas>...41 5.4 Creating the Canvas...41 5.5 Using the Context...42 5.6 Using Color...42 5.7 Painting Gradients...43 5.8 Drawing Paths...43 5.9 Painting Patterns...44 5.10 Transformers...45 5.11 Summary...45 Chapter 6 - Video and Audio...47 6.1 HTML5 Video/Audio Overview...47 6.2 New Elements for Video/Audio...47 6.3 Using the <audio> Element...48 6.4 The <video> Element...48 6.5 Specifying More Than One Audio or Video File...49 6.6 The poster Attribute...49 6.7 Other <audio> and <video> Attributes...50 6.8 JavaScript and Media Elements...50 6.9 Summary...50 Chapter 7 - Geolocation...53 7.1 Geolocation Concepts...53 7.2 Geolocation API...53 7.3 Functions and Options...54 7.4 Example...54 7.5 Example(cont'd)...55 7.6 Success Function...55 7.7 Error Function...55 7.8 Options...56 7.9 Users Need to Agree!...56 7.10 watchposition API...57 7.11 How does it work?...57 7.12 Summary...57 Chapter 8 - Web Storage and Web SQL...59 8.1 Data Storage...59 8.2 Data Storage Options...59 8.3 Web Storage...60
8.4 Programming Interface Storage/Retrieval...60 8.5 Programming Interface Enumerating the Values...61 8.6 Programming Interface Removing Items...61 8.7 Example Storing a value...61 8.8 Example Retrieving a value...61 8.9 Example Listing all the keys...62 8.10 Expandos...62 8.11 Storing JavaScript Objects...62 8.12 Retrieving JavaScript Objects...63 8.13 Web SQL Databases...63 8.14 Using a Web SQL Database...63 8.15 Running Queries...64 8.16 Running Queries (cont'd)...64 8.17 Reading Values...64 8.18 IndexedDB...65 8.19 IndexedDB Terminology...65 8.20 IndexedDB Terminology...66 8.21 IndexedDB Terminology...66 8.22 IndexedDB Terminology...67 8.23 Opening a Database...67 8.24 Opening a Database...68 8.25 Creating an Object Store...69 8.26 Creating an Object Store...69 8.27 Loading the Store Shelves...70 8.28 Loading the Store Shelves...70 8.29 Browsing the Shelves...71 8.30 Browsing the Shelves...71 8.31 Browsing the Shelves...72 8.32 Browsing the Shelves...72 8.33 Browsing the Shelves...73 8.34 Storage Considerations...73 8.35 Summary...74 Chapter 9 - Offline Processing...75 9.1 Offline Concepts...75 9.2 The Cache Manifest File...75 9.3 Contents of the Cache Manifest...75 9.4 Contents of the Cache Manifest (cont'd)...76 9.5 Serving the Cache Manifest...76 9.6 applicationcache...76 9.7 Conclusion...77 Chapter 10 - Drag and Drop...79 10.1 Drag and Drop...79 10.2 Drag and Drop Events...79 10.3 Some Example Code...80 10.4 Discussion of Sample Code...80 10.5 Preparing Data to be Dragged...81
10.6 Conclusion...81 Chapter 11 - Messages, Workers and Web Sockets...83 11.1 Communicating Between Components...83 11.2 WebWorkers for MultiThreading...83 11.3 Using a Worker...84 11.4 Sending Data to the Worker...84 11.5 Receiving Data from the Worker...84 11.6 What the Worker Can Do...85 11.7 Using Scripts inside a Worker...85 11.8 SharedWorker...85 11.9 SharedWorkers Client Side...86 11.10 SharedWorkers Server Side...86 11.11 Web Sockets...86 11.12 Web Socket Usage...87 11.13 Some Considerations...87 11.14 Conclusion...88
Chapter 1 - Introduction to HTML5 Objectives Key objectives of this chapter History of HTML5 HTML5 Standards Body Summary of New Features Current Browser Support for HTML 5 Detecting Support for HTML 5 HTML 5 vs. Flash the right tool for the right job 1.1 History of HTML5 1998 - W3C decided not to evolve HTML beyond v4.01 They believed the future was XHTML, which was an XML compliant version of HTML 2003 - A small group at Opera, who were not convinced that XML would be adopted by all web developers, developed Web Forms 2.0, which became part of HTML5 2004 - Individuals from Apple and Mozilla joined the team which was led by Ian Hickson. The team came to be known as WHATWG (Web Hypertext Application Technology Working Group). Began working on the HTML5 spec which was then called Web Applications 1.0. 2005 - Hickson moved from Opera to Google and continued working on HTML5. 2006 W3C decided to continue working on evolving HTML. Decided to work with WHATWG group on the Web Applications specification, which they renamed to HTML5. 2009 W3C stopped work on XHTML 2.0 and focused on HTML5 development 2011 HTML5 is still a working draft and is still being revised (mainly bug fixes)
Chapter 1 - Introduction to HTML5 However, many parts of the spec are stable and have been implemented in major browsers. 1.2 HTML5 Standards Body The W3C resurrected the HTML Working Group (HTML WG) to work on the HTML5 specification in conjunction with WHATWG The same spec is simultaneously being developed by both groups W3C version http://www.w3.org/tr/html5 WHATWG version - http://whatwg.org/html5 WHATWG is more open that the W3C and maintains a mailing list that anyone can join. Hence anyone can contribute to the HTML5 spec. Ian Hickson and the WHATWG read the e-mails submitted and use them to make bug fixes and implement certain ideas The HTML WG consists of members of the major browser vendors Ian Hickson, who edits the spec, ruled that if any of the major browser vendors were unwilling to implement a part of the spec, then the feature would be dropped from the spec e.g., Microsoft chose not to implement <dialog> and Mozilla chose not to implement <bb> Canvas 1.3 New Features of HTML5 1/3 Currently supports 2D graphics. 3D graphics coming soon. Used mainly for interactive drawing and rendering dynamic data driven charts Audio and Video Used for playing sounds and movies without a browser plug-in Browser side data storage Web Storage stores small amounts of data using an easy name 8
Chapter 1 - Introduction to HTML5 value pair based API IndexedDB stores large amounts of structured (table and column oriented) data. No SQL. Web SQL Database SQL-oriented. May lose out to IndexedDB. Used for offline applications and caching Ajax pulled data to improve performance. 1.4 New Features of HTML5 2/3 Offline Applications Allows user to be productive when not online Examples: E-mail program that allows sending an e-mail while offline Employee contact app that works when the browser is offline Key strategies to build offline app: Use a data storage mechanism to retain data locally. Sync local data with server when online. Cache static files (e.g., CSS, HTML, JavaScript) in the browser. New input types Includes e-mail, date, time, datetime, number, url, search and range Contains built-in validation logic which eliminates the need for JavaScript code 1.5 New Features of HTML5 3/3 Web Workers Allows an application to perform background work in a different thread Takes advantage of multi-core machines Main GUI thread and the background thread communicate through the messaging API 9
Chapter 1 - Introduction to HTML5 WebSocket API Allows the client and the server to push messages to each other at any given time Serves as an alternative to AJAX, which only allows a client to send a message to a server, not vice versa 1.6 Current Browser Support for HTML5 The level of support for HTML5 varies based on the browser and is continually evolving As of July 2012, Safari 5, Chrome 20, Firefox 13, and Opera 12 provide good support for HTML5 IE9 provides support for HTML5, but does not run on Windows XP IE8 provides limited support for HTML5 in the area of web storage However, many users still use IE7, which provides no support for HTML5 Test your browser: html5test.com html5demos.com 1.7 Detecting Support for HTML5 www.findmebyip.com/litmus JavaScript library to test for HTML5 features: www.modernizr.com 1.8 Detecting Support for HTML5 Example of running html5test.com in Chrome 10 (Spring 2011) 10
Chapter 1 - Introduction to HTML5 Example of running html5test.com in Chrome 20 (Summer 2012) 11
Chapter 1 - Introduction to HTML5 1.9 HTML5 vs. Flash HTML5 and Adobe Flash can both play audio and video They can also both use SVG (Scalable Vector Graphics) Flash Pros: Adobe Flash Player can be installed on most browsers and devices, having achieved 98% market penetration as of March 2010 Constructing Flash web sites using Adobe tools is easier than using HTML5, CSS, and JavaScript Flash can create crisper, more visually appealing web sites, since you can specify measurements in sub-pixel increments Flash offers webcam support Flash offers robust video streaming Flash provides content protection to ensure that videos are not redistributed Flash allows you to combine application code and the video resources into a package and embed it in websites Flash provides fullscreen video Flash provide camera and microphone access, while HTML5 is just getting started 1.10 HTML5 vs. Flash Flash Cons: Adobe tools can be expensive to develop with. Adobe Flash is a closed standard. Flash is not supported in some mobile devices like iphone, ipads, and some Android phones. HTML5 Pros: 12
Chapter 1 - Introduction to HTML5 Open standard Does not require any plug-ins to play an audio or video file HTML5 Cons: Not fully supported by all browsers. No standardized video format. Lack of Digital Rights Management. HTML5 vs. Flash The lack of support for Flash in many mobile devices is the biggest problem with Flash today. Apple does not support Adobe Flash in mobile platforms (ios devices) for several reasons. See the following article for more details: http://www.apple.com/hotnews/thoughts-on-flash/ Technically, Android has no such policy banning Flash. But, due to the variation in hardware platforms, Flash needs to be specifically compiled for each device type. That means, Flash may not always be available in all Android devices. YouTube supports both HTML5 and Flash, but continues to primarily use Flash for technology reasons: http://apiblog.youtube.com/2010/06/flash-and-html5-tag.html Commercial video providers like Hulu and Netflix do not currently support HTML5. The main reasons are: Quality of service monitoring (e.g., detecting playback glitches) Advertisement playback and reporting so that the view rate of an ad can be monitored Secure content delivery through digital rights management (DRM) 1.11 Replacing Flash with HTML5 Wherever prudent, you can start to replace Flash with HTML5 with the goal to reach the largest customer base, specifically mobile devices. Animation: Many animation effects can be achieved using CSS3, SVG, Canvas and JavaScript. Video/Audio playback: For non-commercial use, start using HTML5 video with Flash fallback. 13
Chapter 1 - Introduction to HTML5 Data storage and offline: HTML5 can replace Flash (and Google Gears) when it comes to browser side data storage and offline support. Replacing Flash with HTML5 There are many uses of Flash that can not be done easily using HTML5. Complex games are good examples of that. But, there are many features that can be achieved using HTML5, CSS3 and JavaScript. You have to be really careful about using Flash since you run the risk of alienating many mobile users. One of the most common uses of Flash is video. For non-commercial usage, where DRM and advertisement reporting is not a requirement, you can start using HTML5 video. As you will learn in the video chapter, you can provide a flash fallback option. If a browser does not support HTML5 video, it will resort to using a Flash player. Flash is also used for simple animation effects. This is no longer necessary. You can do a lot using CSS3, Canvas and JavaScript. Toolkits like jquery have good support for animation. 1.12 Summary Development of HTML5 began back in 2003 and is currently being maintained by the HTML WG of the W3C and the WHATWG group HTML5 is still a working draft, but is fairly stable HTML5 introduced many new features, including drawing support, audio/video support, browser side data storage, offline application support, new input types, multi-threading support, and push support Most new versions of browsers today provide good support for HTML5 There are various websites and JavaScript tools that can be used to test the level of HTML5 support by a particular browser HTML5 and Adobe Flash Player both support audio and video playback, but if your video needs are more than simply pointing to a video and playing it, then Adobe Flash Player is still your better option 14
Chapter 2 - The Basics Objectives Key objectives of this chapter Explain What HTML5 Is State the HTML5 Goals List Some HTML Specifications State Differences Between HTML5 and HTML 4 Explain How HTML5 is Not Based on SGML Explain the Importance of HTML5 Required Processing for Invalid Markup Use the DOCTYPE Declaration List HTML5 Semantic Elements Describe Current Browser Support for HTML5 2.1 What Is HTML5 A single markup language that can be written in either HTML or XHTML syntax An attempt to unify XHTML 1.1 HTML 4.01 DOM2HTML, in particular, JavaScript Implemented by browsers and other "user agents" 2.2 HTML5 Goals Unify the standards for HTML, XHTML, JavaScript Support multimedia in a standard way Without requiring proprietary plugins/apis
Chapter 2 - The Basics Support graphical content in a standard way Again, without requiring proprietary plugins/apis Encourage more interoperable/consistent implementations by providing detailed processing models Maintain the human readability HTML already has Deal with the many errors in existing web documents Add APIs for "complex web applications" 2.3 HTML Specs, Past and Present HTML5 History HTML 1990 HTML4 standardized HTML in 1997 HTML5 immediate predecessors HTML 4.01 Published as a W3C recommendation in Dec 1999 XHTML 1.1 The W3C's HTML working group was focused here in the 2000's HTML5 defined in two documents WHAT WG HTML WG (W3C) 2.4 How Is HTML5 Different From HTML4? New attributes added Some elements and attributes changed or removed Notes How Is HTML5 Different From HTML4? A complete list of new elements: 16
Chapter 2 - The Basics 1 article 2 aside 3 audio 4 bdo 5 canvas 6 command 7 datalist 8 details 9 embed 10 figcaption 11 figure 12 footer 13 header 14 hgroup 15 keygen 16 mark 17 meter 18 nav 19 output 20 progress 21 rp 22 rt 23 ruby 24 section 25 source 26 summary 27 time 28 video 29 wbr 2.5 HTML5 Is Not Based On SGML HTML5 is not case-sensitive Example: <HTML>, <html> and <html> are all the same start tag The HTML5 convention is to use lowercase In XHTML element names are lowercase Lowercase is easier to read 17
Chapter 2 - The Basics Many HTML editors insert elements as lowercase by default Quotation marks are not required around attribute values If you omit the quotation marks, attribute values cannot contain any unescaped Double and single quote mark Space Equal sign Greater-than Notes HTML5 Is Not Based On SGML Example Correct HTML 5 attribute values <p class=onetwo> <p class="one two"> <p class=one=two> Example Incorrect HTML 5 attribute values <p class=one two> User agent would interpret two as an empty attribute <p class=one=two> The DOCTYPE Declaration <!DOCTYPE html> <html>... </html> 2.6 More Differences Don't need to self-close empty elements Attribute minimization controls rather than controls="controls" <html> <head> and <body> are optional 18
Chapter 2 - The Basics 2.7 HTML5 Defines Required Processing For Invalid Documents How deal with invalid markup In the past, different browsers converted invalid markup to DOM differently This is a problem because CSS depends on the DOM Also JavaScript depends on the DOM Thus invalid pages could end up looking very different on different browsers The Doctype Declaration <!DOCTYPE html> On first line Case-insensitive 2.8 The Doctype Declaration Triggers "standards mode" in all modern browsers, meaning that the browser Will render the page according to the HTML5 and CSS standards. Without it the browser may operate in "Quirks mode", meaning it will try to maintain backward compatibility with legacy pages created for older browser versions. This is not an XML DOCTYPE declaration; HTML5 is not XML! Notes The Doctype Declaration You can validate your pages at http://html5.validator.nu 19
Chapter 2 - The Basics 2.9 Semantic Elements Semantic elements in HTML 4 div span New in HTML5 header footer section article <article> Reusable content <section> Not meant to be reusable Can have header Can be used as the parts of an article or page 2.10 The <aside> Element Use for a "Pull quote" Sidebar May contain <nav> 2.11 Browser Support For HTML5 Point a browser at html5test.com to see how well that browser supports HTML5 Good support from 20
Chapter 2 - The Basics Chrome Safari Firefox Opera Blackberry Playbook Limited support from IE 2.12 Summary We have discussed What is HTML5 HTML5 Goals HTML Specifications Differences from HTML4 HTML5 is Not XML (not based on SGML) Required Processing for Invalid Markup The DOCTYPE Declaration Semantic Elements Browser Support 21
Chapter 3 - New Semantic Elements Objectives Key objectives of this chapter Understand the philosophical shift in HTML5 toward semantics and away from HTML inline styling Be able to add semantic information appropriately using <header> <footer> <article> <section> The <time> element WAI-ARIA <ruby> and related elements Use the <keygen> element 3.1 Function over Form Many of the old faithful means of structuring pages have been removed Frames / Framesets Table sizing and content alignment Similarly, many of the style-oriented HTML elements have been removed <font> <center> Table styling / formatting attributes What's the message? HTML is for CONTENT CSS is for STYLE NOTES Elements that won't validate in HTML5 <applet>
Chapter 3 - New Semantic Elements Use <embed> <big> <blink> <center> <font> <marquee> <frame> / <frameset> 3.2 HTML4 Layouts Traditionally, we relied upon <div> tags to organize content and manage page flow. This had several problems: We typically re-created the wheel each time, defining very predictable divs EVERY time (i.e. header, footer, nav, content, etc.) These <div> tags are indistinguishable from each other from a programmatic / robotic perspective (i.e. content assistance devices, bots, crawlers, etc.) Traditional div-centric layout for HTML4 Pages 24
Chapter 3 - New Semantic Elements 3.3 HTML5 Semantic Layouts With HTML5, new tags have been introduced to provide clarity, consistency, and semantically rich structure to pages. NOTES While the spec does promote the use of these new tags for organizing content, this should not be interpreted as a replacement for the <div> tag. There are still plenty of viable uses for <div>. The primary purpose is to support styling and layout. Although the new elements appear to merely be replacing the role of the <div> tag, they are actually different. They are focused on identifying the nature of the CONTENT. And while it is possible to style them, their primary purpose is semantics. So for scenarios where you need to define style / layout for a chunk of the page, your primary tool will still be CSS + <div>. 3.4 Nesting Semantics At first glance, you might assume that you can only have one <header> per page, one <nav>, and so on. In reality, you can combine and nest these elements as you see fit to represent more complex content structures. 25
Chapter 3 - New Semantic Elements 3.5 Other New Semantic Elements HTML5 supports the addition of less common, but equally important semantic information as well: The <time> element WAI-ARIA <ruby> and related elements 3.6 The <time> Element Add semantic information for machine readability 26
Chapter 3 - New Semantic Elements <p>the class starts at <time>09:00</time>.</p> The user may be shown a more human-readable form <p>the <time datetime="2011-09-28t23:00-05:00">next evening</time>, she found out why.</p> The datetime value is in ISO 8601 format. 3.7 WAI-ARIA Web Accessibility Initiative - Accessible Rich Internet Applications) A w3c spec Specifies how to improve the accessibility of dynamic content (Ajax, JavaScript) What is a Rich Internet Application (the "RIA" in "ARIA")? Client-side scripts create custom controls Client-side scripts update page locally rather than request new page from server Result can be web pages that are not usable by those with disabilities-- using screen reader and not mouse Example: a list of links can be identified as a menu and its state: expanded or collapsed ARIA attribute example... aria-disabled="false" 3.8 The <ruby> and <rt> Elements These elements support adding annotations such as pronunciation to text, typically Asian languages Example 27
Chapter 3 - New Semantic Elements The technique of providing a pronunciation (or similar information) above text is called "ruby" in English, from the name of a small font sometimes used for such annotations. The above example was produced from the following markup: <ruby lang="zh-cn"> 王菲 <rt lang="en-us">wong Faye</rt> </ruby> In this example 王菲 is the base text and WONG Faye is the annotation 3.9 The <rp> Element A nonconforming browser would display the previous HTML all one one line rather than placing the annotation (the contents of <rt>) above the base text. To distinguish between the actual text and the annotation, the <rp> ("Ruby parentheses") element may be used. Conforming user agents ignore the contents of <rp> elements whereas nonconforming user agents will display the contents. Thus we can add parentheses to the output of nonconforming user agents like this: <ruby lang="zh-cn">?? <rp>(</rp><rt lang="en-us">wong Faye</rt><rp>)</rp> </ruby> 3.10 The <keygen> Element For client-side authentication The <keygen> element creates public/private key pair and then sends a certificate request to "a certificate authority" the CA sends the certificate back to the browser 28
Chapter 3 - New Semantic Elements Example: <form> <keygen name="pubkey" challenge="randomchars"> <input type="submit" name="createcert" value="generate"> </form> The user is presented with a dropdown list with the browsers supported keylength and a "Generate" submit box on the right. When the user clicks Generate the browser will Generate a keypair Send the public key back to the browser in the $_POST['pubkey'] or $_GET['pubkey'] variables. Currently, all the major browser support this attribute except Internet Explorer See http://support.microsoft.com/kb/190282 We have discussed 3.11 Summary Adding semantic information using The <time> element WAI-ARIA <ruby> and related elements The <keygen> element HTML 4 elements that have been removed from HTML5 29