资料文本课件成果it18掌html5in action

1、IN ACTIONRob Crowther Joe Lennon Ash Blue Greg WanishFOREWORD BY Christian HeilmannM A N N I N G HTML5 in ActionROB CROWTHER JOE LENNON ASH BLUE GREG WANISHMANNING SHELTER ISLANDFor online information and ordering of this and other Manning books, please visit. The publisher offers discounts on this

2、book when ordered in qu For more information, please contactSpecial Sales Department Manning Publications Co. 20 Baldwin RoadPO Box 261Shelter Island, NY 11964: ordersty.©2014 by Manning Publications Co.No part of this publication may be reproduced, stored in a retrieval system, or transmitted,

3、 in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher.Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning

4、Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps.Recognizing the importance of preserving what has been written, it is Mannings policy to havethe books we publish printed on acid-paper, and we exert our best efforts to that end.Recognizing a

5、lso our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15 percent recycled and processed without the use of elemental chlorine.Manning Publications Co. 20 Baldwin RoadPO Box 261Shelter Island, NY 11964Development editor:Copyeditor:Renae Gr

6、egoire Tiffany Taylor Elizabeth Martin Dennis Dalinnik Marija TudorProofer:Typesetter:Cover designer:ISBN: 9781617290497Printed in the United States of America1 2 3 4 5 6 7 8 9 10 MAL 19 18 17 16 15 14brief contentsPART 1INTRODUCTION11 HTML5: from documents to applications3PART 2BROWSER-BASED APPS35

7、 Form creation: input widgets, data binding, and data validation37 File editing and management: rich formatting, file storage, drag and drop71 Messaging: communicating to and from scripts in HTML51012345 Mobile applications:storage and offline execution131PART 3INTERACTIVE GRAPHICS, MEDIA, AND GA.16

8、3 2D Canvas: low-level, 2D graphics rendering165 SVG: responsive in-browser graphics1996789and audio: playing media in the browser237 WebGL: 3D application development267iiicontentsforeword xi preface xiiiacknowledgments xv about this book xviiPART 11INTRODUCTION1HTML5: from documents to application

9、s31.1Exploring the markup: a whirlwind tour of HTML54Creating the basic structure of an HTML5 document 5Using the new semelements 6Enhng accessibilityusing ARIA roles 9Enabling support in Internet Explorerversions 6 to 810Introducing HTML5s newform features11Progress bars, meters,and collapsible con

10、tent131.2Beyond the markup: additional web standards15Microdata 16CSS318JavaScript and the DOM191.3The HTML5 DOM APIs20Canvas21Audio and21Drag and drop 22Cross-document messaging, server-sent events, and WebSockets23vviCONTENTSDocument editing 25Web storage 26Offline web applications271.4Additional

11、APIs and specifications28Geolocation API29Indexed database (IndexedDB API)29File, Fileer, File Writer, and File System APIs30Scalable Vector Graphics 31Web Graphics Library331.5Summary33PART 22BROWSER-BASED APPS35Form creation: input widgets, data binding,and data validation372.1Previewing the form

12、and gathering prerequisites38Gathering the application prerequisites39Building a forms user interface40Defining a forms basic HTML document structure402.2Using the form input typesand tel and the input attributesautofocus, required, and placeholder41Using the form inputattribute required44Building a

13、 calculator-style form usingthe input type number, the input attributes min/max and data-*,and the element <output>45Using the form input type monthand input attribute pattern49Allowing users to choose whetherto save or submit a form: using the input attributes formnovalidate and formaction 51

14、Calculating totals and displaying form output532.3Building calculation functions53 HTML5 data-* attributes 55Accessing values from2.4Checking form input data with the Constraint Validation API58Creating custom validation tests and error messages with the setCustomValidity method and the validationMe

15、ssageproperty 59Detecting a failed form validation withthe invalid event60Styling invalid elements usingCSS3 pseudo-classes61Providing fallbacks for unsupported browsers62Detecting features and loading resources with Modernizr:2.5an overview 63Using polyfills and Modernizr to plugthe gaps 64Perforva

16、lidation without the ConstraintValidation API652.6Summary68CONTENTSvii3File editing and management: rich formatting, file storage,drag and drop713.1The Super HTML5 Editor: application overview, prerequisites, and first steps72Defining the HTML document structure74Implementing navigation and state ma

17、nagement in JavaScript76Rich-text editing and geolocation78Using designMode to make an HTML document editable 793.2Providing rich-text editing controls with execd81Mapa users current location with the Geolocation API 823.3Managing files locally: the File System, Quota Management, File, and File Writ

18、er APIs84Creating an application filesystem86Getting a list of filesfrom the filesystem 87 and deleting files89Loading, viewing, editing,Creating new files 91Saving files using the File Writer API 943.4Adding drag-and-drop interactivity96Dragging files into an application for import 97 Dragging file

19、s out of an application for export98Summary993.54Messaging: communicating to and from scriptsin HTML51014.1Server-sent events (SSE)102A simple SSE chat application 102When to use SSE1124.2Using WebSockets to build a real-time messaging web app112Application overview and prerequisites113 Creating a W

20、ebSocket with Node.js115 Building the planner application1174.3Messaging on theside125Communicating across domains with postMessage126 Joining the applications with cross-document messaging127Summary1294.4viiiCONTENTS5Mobile applications:storage and offline execution1315.1My Tasks: application overv

21、iew, prerequisites, and first steps132Defining the HTML document structure 135 Controlling visibility of views using CSS 137 Implementing navigation with JavaScript 137Managing data with the Web Storage API1395.2ing data from localStorage140Saving datato localStorage 141Deleting data from localStora

22、ge1415.3Managing data using IndexedDB143Detecting database support on a browser 144Creating orconnecting to an IndexedDB database, creating an object storeand index 145Develoa dynamic list with HTMLand JavaScript148Searching an IndexedDB database150Adding data to a database using IndexedDB or Web SQ

23、L152Updating and deleting data from an IndexedDB database 154Dropa database using IndexedDB 1555.4Creating a web application that works offline: using the application cache manifest156Configuring a web server for an application cache manifestsMIME type 157Creating a cache manifest file158Automating

24、application updates1605.5Summary162PART 36INTERACTIVE GRAPHICS, MEDIA, AND GA.1632D Canvas: low-level, 2D graphics rendering1656.1Canvas basics166Setting the Canvas context 166 Generating a Canvas context 169Creating a Canvas game170Creating the main engine components 1716.2Creating dynamicrectangle

25、s 175Creating arcs and circles178Using paths tocreate complex shapes 1796.3Breathing life into Canvas elements181Animating game elements 181Detecting overlap 183Creating keyboard, mouse, and touch controls 185 Control input considerations188CONTENTSix6.4Polishing Canvas gamesTracking score and level

26、s189189Adding opening andclosing screens 193Getting help from cibraries1956.5Summary1967SVG: responsive in-browser graphics1997.17.2How bitmap and vector graphics compare200Starting SVG Aliens with XML202Setting up SVG inside HTML 204Programsimple shapesand text206Using XLink and advanced shapes 208

27、7.3Adding JavaScript for interactivity212Game engine essentials and using screens dynamic object creation, and input 216214Design patterns,Creating andorganizing complex shapes 221Maintaining a complexSVG group 227SVG vs. Canvas 2327.4Summary2358and audio: playing media in the browser2378.1Playingwi

28、th HTML5238Application preview and prerequisites238Building the basicjukebox framework240Using theelement to addsto wges2418.2Controlling interfaces with the HTMLMediaElement2438.3Specifying multiple formats with the <source> element248Discovering whichis playing with .currentSrc 249Converting

29、 between media formats2528.4Combining user input withto build a telestrator252Playingthrough the <canvas> element253Creating custom Manipulatingplayback controls255 as its playing257Building the telestrator features2628.5Summary2659WebGL: 3D application development2679.1Building a WebGL engine

30、269Setting up the engines layout 271Tools to create, alter,and delete objects277xCONTENTS9.2Communicating with a graphics card282Graphics cards: a quick primer283Creating shadersfor 3D data 284Creating buffers for shape, color,and dimension 287Displaying shape data on a screen 2889.3Putting it all t

31、ogether: creating Geometry Destroyer293Creating a game interface and control objects293Creating 2Dshapes in 3D 296Summary309Creating 3D shapes and particles3009.4appendix A appendix B appendix C appendix D appendix E appendix F appendix G appendix H appendix I appendix JHTML5 and related specificati

32、ons310 HTML5 API reference317Installing PHP and MySQL336 Computer networking primer354Setting up Node.js Channel messaging Tools and libraries364373378Encoding with FFmpeg385 HTML next390Links and references425index429forewordExplaining what HTML5 is can be a very daunting task. Ive been doing this

33、since itsinception, and Im stilzed by how many myths abound and how much confusionthere is on the topic. With HTML5, we rebooted web development. The world of HTML4 and the nonstarter XHTML stranded those who wanted to use the web as a platform for applications. HTML4 was meant for linked documents,

34、 and XHTML was far too strict for its own good and lacked real support in browsers.HTML5 started with a clean slate. We analyzed what was used on the web and added a lot of features we didnt have before, like Canvas for creating visuals on thefly or accessing images ands on a pixel level, native aud

35、io andwithoutthe need for plug-ins, and forms that validate in the browser without our having to write extra JavaScript. We also started muddying the waters by merging HTML and JavaScript functionalitya lot of HTML5 wont do anything without accessing the elements via a JavaScript API. This confuses

36、many people. We moved on from a document-based web, and in that process we needed more technical expertise. And this meant we needed to rethink a few of our “best practices,” which can annoy peo-ple so that they spnasty rumors about the viability of HTML5 as a choice for pro-fessional development.HT

37、ML5 is built on the robustness principle, which means that a browser will make a lot of educated guesses as to what you might have meant when you make a syntax error instead of simply giving up and showing an error. This gives it backward compat- ibility, and we can show pages developed for a never-

38、to-arrive XHTML world in brows- ers these days. A large part of the standard is just that: it tells you how to write axixiiFOREWORDbrowser that renders HTML5 rather than using it as a web developer. Again, this angers some people, and they shout about the verbosity of the standard.HTML5 is also the

39、new hotness. Much of the advertising talk, shiny demos, and prom- ises of fidelity that matches native apps on phones makes us cynical, battle-hardened web developers think back on Java, Flash, and Silverlight and their promises, and sigh. Theres a lot of buzz about HTML5, and many things that arent

40、 part of the standard are simply declared part of it, because it makes a good punch line.When it comes to extending the language and bringing new features into it, were running wild right now. Every browser maker and web company comes up with great new concepts on almost a weekly level. That can be

41、frustrating for developers who want only to get a job done. Can we rely on the functionality thats currently devel- oped, or will the standard be changed later on? Were pushing browsers further into the OS and allowing them to access hardware directly, which comes with security and robustness issues

42、 that need to be fixed by trial and error. Can you take that risk with uswhen it comes tivering your product?These are exciting times, and when you want to be part of the ride, you can help forge the future development environment for all of us. If you dont have the time to follow the discussions on

43、 mailing lists, do a lot of browser testing in previews, and pro- pose your own ideas, you can be left quite confused.And this is where a book like HTML5 in Action comes in. Instead of promising a cor- nucopia of functionality that will soon be available, you get examples that work right now, based

44、on examples that worked in the past. Instead of getting experimental demos, youll learn how to build production code based on proven ideas, using the features in modern browsers that make it easier for developers and much more enjoy- able for end users. All the examples come with a legend telling yo

45、u which browsers support the features, and youll learn how not to give features to old browsers that will choke on them.Youll learn how to use HTML5 now, using secure and intelligent solutions like Modernizr and HTML5 Boilerplate, and youll come out at the end understanding how to write things in HT

46、ML5 that currently work. This will make you a part of themovement to get HTML5 production-y for all of us.Those who live on the bleeding edge of defining the next browser and language features need implementations in the wildright now. Were past the “show-and-tell” stage, and we need to get to “deli

47、ver and enhance.” And you can become an integral part of this process by following the advice and applying the examples you find here. Go forth and deliver.CHRISTIAN HEILMANN PRINCIPAL EVANGELIST HTML5, MOZILLAprefaceWriting a book about all things HTML5 is more difficult than it sounds. Primarily b

48、ecause of browser and specification changes, it seemed that no matter how much we wrote every six months, browsers would adjust an implementation enough to break a few chapters. This pushed progress back and forth, making chapter revisions a con- stant fear, especially after we had seen so many book

49、s released on HTML5 that wereoutdated months later. Aftering the tides of change, we eventually nailed downsolid app techniques that were resistant to change. These apps should continue to work as HTML5 continues past this books release date.To add to our books track record of chaos, it originally s

50、tarted with just RobertCrowther (who was aly writing another book) and Joe Lennon. Robs death-defyingstunt while writing the book was that he somehow managed to write another book called Hello! HTML5 and CSS3 (Manning, 2012) at the same time. If that werent enough, he reviewed chapters from his coau

51、thors and provided helpful feedback (still wonder- ing when he finds time to sleep).Joe Lennon wrote about forms, about file storage, appendices, and an awesome general overview of the HTML5 specification. Greg Wanish (originally our editor) worked with Joe on his sections. The two tackled some of t

52、he most difficult and vola- tile specifications that are still being implemented in most browsers. Ash Blue came on board to tackle HTML5s massive APIs for interactive visual data.Greg and Ash are from the United States, while Joe lives in Ireland and Rob inLondon. Our teams geographical makeupmeeti

53、ng as a group very difficult. Atalmost every meeting, somebody was missing. If youve ever worked on a group project,xiiixivPREFACEthen you know how essential meetings for something like this book can be. Even withall four of us dedicating much of ourtime to work on the book, it took much lon-ger tha

54、n expected. The delay was partially because we wanted to keep the book up to date with the latest techniques and specification changes. Another time-consutask was integrating feedback from our MEAPon how to improve the book.ers, who gave us great informationThe true lesson we learned from writing HT

55、ML5 in Action is that you should never write on an experimental subjectjust kidding! But in all honesty, HTML5s volatile state did make things both difficult and rewarding. Our hope is that our long nights of handcrafting every letter of this book will make learning HTML5 much easier for you. acknow

56、ledgmentsWed like to thank our editor at Manning, Renae Gregoire, for putting up with us in general. Without her reviewing our thousands and thousands of lines of text, sending weekly status reports, and organizing meetings, this book would never have hap- pened. She was dropped into our book halfway