Pro HTML5 Programming, 2nd Edition.pdf

所需积分/C币:10 2019-07-25 18:06:13 8.53MB PDF
收藏 收藏

HTML5 is brand new. Indeed, it isn’t even completely finished yet. And if you listen to some ornery pundits, they’ll tell you that HTML5 won’t be ready for ten years or more! Why, then, would anyone think that now’s the time for a book called Pro HTML5 Programming? That’s easy. Because for anyone who’s looking for an extra edge to make your web application stand above the rest, the time for HTML5 is right now. The authors of this book have been working with, developing, and teaching HTML5 technologies for more than two years now and can claim with certainty that adoption of the new standards is accelerating at dizzying speeds. Even over the course of writing this book, we’ve been forced to continually update chapters and reevaluate our assumptions about what is ready to use. Most users don’t really understand the power that’s available in the browsers they are now using. Yes, they might notice some minor interface enhancement after their favorite browser has automatically updated. But they might have no idea that this new browser version just introduced a free-form drawing canvas or real-time network communication, or any number of other potential upgrades. With this book, we aim to help you unlock the power HTML5.
Contents at a glance Forewordummmmm xv About the authors About the technical reviewer XV Acknowledgments XVI Introduction…ung uuauuXDX Chapter 1: Overview of HTML5 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ Chapter 2: Using the Canvas APl ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■a■■a■ 23 Chapter 3: Working with Scalable Vector Graphics mmmammma mma 63 Chapter 4: Working with Audio and video m mmmm IRaRIRaIaIIa 83 Chapter 5: Using the Geolocation APlmamaaam EIIR 107 Chapter 6: Using the Communication APIs ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 135 Chapter 7: Using the WebSocket APl ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■口■■■ 159 Chapter 8: Using the Forms APl ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■口■■■ 193 Chapter 9: Working with Drag-and-Drop ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■口■■■■■ 217 Chapter 10: Using the Web Workers APl 241 Chapter 11: Using the Storage APIs. RRNa a263 Chapter 12: Creating Offline Web Applications. mn 1■■■■■■■■■■■ ■■■■ 295 Chapter 13: The Future of HTML5 313 Index…323 Overview of html5 This book is about HTML5 Programming. Before you can understand hTML5 programming, however, you need to take a step back and understand what HTML5 is, a bit of the history behind it, and the differences between html 4 and html5 In this chapter, we get right to the practical questions to which everyone wants answers. Why HTML5, and why all the excitement just now? What are the new design principles that make html5 truly revolutionary--but also highly accommodating What are the implications of a plugin-free paradigm; what's in and what's out? What's new in HTML, and how does this kick off a whole new era for web developers Let's get to it The Story So Far-The History of HTMl5 HtML goes back a long way. It was first published as an Internet draft in 1993. The 90s saw an enormous amount of activity around hTMl, with version 2.0, versions 3. 2, and 4.0 (in the same year! and finally, in 1999, version 4.01. In the course of its development, the World Wide Web Consortium (W3C)assumed control of the specification After the rapid delivery of these four versions though, html was widely considered a dead -end; the focus of web standards shifted to XML and XHTML, and hTML was put on the back burner In the meantime, HTML refused to die, and the majority of content on the web continued to be served as HTML. To enable new web applications and address HTML's shortcomings, new features and specifications were needed for HTML. Wanting to take the web platform to a new level, a small group of people started the Web hypertext working on new features specifically geared to web applications-the area they felt was most lacking i? pplication Working group whatwg)in 2004. They created the hTML5 specification. They also began was around this time that the term Web 2.0 was coined and it really was like a second new web, as static web sites gave way to more dynamic and social sites that required more features-a lot more features The W3C became involved with HTML again in 2006 and published the first working draft for HTML5 in 2008, and the XHTML 2 working group stopped in 2009. Another two years passed, and that is where we stand today. Because HTML5 solves very practical problems(as you will see later), browser vendors are feverishly implementing its new features, even though the specification has not been completely locked down. Experimentation by the browsers feeds back into and improves the specification. HTML5 is rapidly evolving to address real and practical improvements to the web platform Brian says: Hi, l'm brian and l' m an hTML curmudgeon CHAPTER 1 OVERVIEW OF HTML authored my first home page back in 1995. At the time a 'home page was something you created to talk about yourself. It usually consisted of badly scanned pictures, < blink> tags, information about where you lived and what you were reading, and which computer-related project you were currently working on Myself and most of my fellow"World Wide Web developers' were attending or employed by universities At the time, HTML was primitive and tools were unavailable. Web applications hardly existed, other than a few primitive text-processing scripts. Pages were coded by hand using your favorite text editor. They were updated every few weeks or months, if ever We' ve come a long way in fifteen years Today, it isn't uncommon for users to update their online profiles many times a day this type of interaction wouldn' t have been possible if not for the steady lurching advances in online tools that built on each previous generation Keep this in mind as you read this book The examples we show here may seem simplistic at times, but the potential is limitless. Those of us who first used <img> tags in the mid-1990s probably had no idea that within ten years, many people would be storing and editing their photos online, but we should have predicted it We hope the examples we present in this book will inspire you beyond the basics and to create the new foundation of the web for the next decade The myth of 2022 and Why lt Doesn't Matter The hTML5 specification that we see today has been published as a working draft--it is not yet final. So when does it get cast in stone? Here are the key dates that you need to know. The first is 2012, which is the target date for the candidate recommendation. The second date is 2022, which is the proposed recommendation Wait! Not so fast! Dont close this book to set it aside for ten years before you consider what these two dates actually mean The first and nearest date is arguably the most important one, because once we reach that stage, HTML5 will be complete. That's just around the corner. The significance of the proposed recommendation(which we can all agree is a bit distant) is that there will then be two interoperable implementations In other words, two browsers equipped with completely interoperable implementations of the entire specifications--a lofty goal that actually makes the 2022 deadline seem ambitious. After all, we haven't even achieved that in HTMLA and only recently for CSS2 What is important, right now, is that browser vendors are actively adding support for many very cool new features, and some of those are already in the Final Call for comments phase. Depending on your audience, you can start using many of these features today. Sure, any number of minor changes will need to be made down the road, but that 's a small price to pay for enjoying the benefits of living on the cutting edge. Of course, if your audience uses Internet Explorer 6.0, many of the new features won 't work and will require emulation-but that's still not a good reason to dismiss HTML5. After all, those users too, will eventually be jumping to a later version. Many of them will probably move to Internet Explorer 9.0 right away, and that version of ie supports many more hTML5 features. In practice, the combination of new browsers and improving emulation techniques means you can use many HTML5 features today or in the very near future 2 CHAPTER 1 OVERVIEW OF HTML5 Who Is developing html5? We all know that a certain degree of structure is needed, and somebody clearly needs to be in charge of the specification of HTML5. That challenge is the job of three important organizations Web Hypertext Application Technology Working Group WHATWG): Founded in 2004 by individuals working for browser vendors Apple, Mozilla, Google, and Opera, WHATWG develops hTml and aPIs for web application development and provides open collaboration of browser vendors and other interested parties World wide web Consortium(W3C): The W3C contains the HTML working group that is currently charged with delivering their htMl5 specification Internet Engineering Task Force (IETF): This task force contains the groups responsibleforInternetprotocolssuchashttphtml5definesanew Web Socket API that relies on a new Web Socket protocol, which is under development in an IETF working group A New vision HTML5 is based on various design principles, spelled out in the WHATWG specification, that truly embody a new vision of possibility and practicality Compatibility Utili Interoperable ● Universal access Compatibility and paving the Cow paths Dont worry; hTML5 is not an upsetting kind of revolution. In fact, one of its core principles is to keep everything working smoothly If HTML5 features are not supported, the behavior must degrade gracefully. In addition, since there is about 20 years of HTML content out there, supporting all that existing content is important. Alot of effort has been put into researching common behavior. For example, Google analyzed millions of pages to discover the common ID and Class names for DIV tags and found a huge amount of repetition. For example, many people used DIv id="header" to mark up header content. HTML5 is all about solving real problems, right? So why not simply create a <header>element? Although some features of the HTML5 standard are quite revolutionary, the name of the game is evolution not revolution. After all, why reinvent the wheel?(Or, if you must, then at least make a better one!) Utility and the Priority of Constituencies The HTML5 specification is written based upon a definite Priority of Constituencies. And as priorities go the user is king. " This means, when in doubt, the specification values users over authors, over implementers(browsers), over specifiers(W3C/WHATWG), and over theoretical purity. As a result, hTML5 is overwhelmingly practical, though in some cases, less than perfect CHAPTER 1 OVERVIEW OF HTML Consider this example. The following code snippets are all equally valid in hTML5 id="prohtm15 id=prohtml5 ID="prohtm15 Sure, some will object to this relaxed syntax, but the bottom line is that the end user doesnt really care. We're not suggesting that you start writing sloppy code, but ultimately, it's the end user who suffers when any of the preceding examples generates errors and doesnt render the rest of the page HTML5 has also spawned the creation of XhTML5 to enable XML tool chains to generate valid HTML5 code. The serializations of the html or the Xhtml version should produce the same dOM trees with minimal differences Obviously the xhtml syntax is a lot stricter, and the code in the last two examples would not be valid Secure by design Alot of emphasis has been given to making HTML5 secure right out of the starting gate. Each part of the specification has sections on security considerations, and security has been considered up front. HTML5 introduces a new origin-based security model that is not only easy to use but is also used consistently by different APIs. This security model allows us to do things in ways that used to be impossible. For example, it allows us to communicate securely across domains without having to revert to all kinds of clever, creative, but ultimately Non-secure hacks. In that respect, we definitely will not be looking back to the good old days Separation of Presentation and content hTML5 takes a giant step toward the clean separation of presentation and content. htML5 strives to create this separation wherever possible, and it does so using CSs. In fact, most of the presentational features of earlier versions of HTMl are no longer supported but will still work, thanks to the compatibility design principle mentioned earlier. This idea is not entirely new, though; it was already in the works in HTML4 Transitional and XHTMLl 1 Web designers have been using this as a best practice for a long time, but now, it is even more important to cleanly separate the two. The problems with presentational markup are Poor accessibility Unnecessary complexity (it's harder to read your code with all the inline styling Larger document size (due to repetition of style content), which translates into slower-loading pages Interoperability Simplification HTML5 is all about simplification and avoiding needless complexity. The HTML5 mantra? "Simple is better Simplify wherever possible. Here are some examples of this Native browser ability instead of complex JavaScript code A new simplified DOCTYPE A new, simplified character set declaration CHAPTER 1 OVERVIEW OF HTML5 Powerful yet simple hTmL5 APIs We'l say more about some of these later To achieve all this simplicity, the specification has become much bigger, because it needs to be much more precise--far more precise, in fact, than any previous version of the HTML specification. It Vagueness simply will not make that happel, ef specifies a legion of well-defined behaviors in an effort to achieve true browser interoperability by 2022 The hTML5 specification is also more detailed than previous ones to prevent misinterpretation. It aims to define things thoroughly, especially web applications. Small wonder, then, that the specification is over 900 pages long HTML5 is also designed to handle errors well, with a variety of improved and ambitious error- handling plans Quite practically, it prefers graceful error recovery to hard failure, again giving A-l top priority to the interest of the end user. For example, errors in documents will not result in catastrophic failures in which pages do not display. Instead, error recovery is precisely defined so browsers can display "broken"markup in a standard way. Universal access This principle is divided into three concept Accessibility. To support users with disabilities, HTML5 works closely with a related standard called Web accessibility Initiative(WAD) Accessible Rich Internet Applications (ArIA). WAI-ARIA roles, which are supported by screen readers,can be already be added to your hTML elements Media Independence: htmL5 functionality should work across all different devices and platforms if at all possible Support for all world languages: For example, the new <ruby> element supports the Ruby annotations that are used in East Asian typography A Plugin-Free Paradigm htML5 provides native support for many features that used to be possible only with plugins or complex hacks(a native drawing API, native video, native sockets, and so on Plugins, of course, present many problems Plugins cannot always be installed Plugins can be disabled or blocked (for example, the Apple iPad does not ship with a Flash plugin Plugins are a separate attack vector. Plugins are difficult to integrate with the rest of an htMl document(because of plugin boundaries, clipping, and transparency issues Although some plugins have high install rates(Adobe Flash, for example), they are often blocked in controlled corporate environments. In addition, some users choose to disable these plugins due to the unwelcome advertising displays that they empower. However, if users disable your plugin, they also disable the very program you' re relying on to display your content Plugins also often have difficulty integrating their displays with the rest of the browser content, which causes clipping or transparency issues with certain site designs. Because plugins use a self CHAPTER 1 OVERVIEW OF HTML contained rendering model that is different from that of the base web page, developers face difficulties if pop-up menus or other visual elements need to cross the plugin boundaries on a page. This is where HTML5 comes on the scene, smiles, and waves its magic wand of native functionality. You can style elements with CSS and script with JavaScript. In fact, this is where hTML5 flexes its biggest muscle showing us a power that just didnt exist in previous versions of HTML It's not just that the new elements provide new functionality. It,'s also the added native interaction with scripting and styling that enables us to do much more than we could ever do before Take the new canvas element, for example. It enables us to do some pretty fundamental things that were not possible before(try drawing a diagonal line in a web page in HTML 4). However, what's most interesting is the power that we can unlock with the APis and the styling we can apply with just a few lines of CSs code. Like well-behaved children, the htMl5 elements also play nicely together. For example, you can grab a frame from a video element and display it on a canvas, and the user can just click the canvas to play back the video from the frame you just showed. This is just one example of what a native code has to offer over a plugin. In fact, virtually everything becomes easier when you're not working with a black box. What this all adds up to is a truly powerful new medium, which is why we decided to write a book about htML5 programming, and not just about the new elements What's in and what's out? So, what really is part of HTML5? If you read the specification carefully, you might not find all of the features we describe in this book. For example, you will not find Geolocation and Web Workers in there So are we just making this stuff up? Is it all hype? No, not at all! Many pieces of the HTML5 effort were originally part of the HTML5 specification and were then moved to separate standards documents to keep the specification focused It was considered smarter to discuss and edit some of these features on a separate track before making them into official specifications. This way, one small contentious markup issue wouldnt hold up the show of the entire specification Experts in specific areas can come together on mailing lists to discuss a given feature without the crossfire of too much chatter. The industry still refers to the original set of features, including Geolocation and so on as html5. Think of html5 then as an umbrella term that covers the core markup, as well as many cool new APIs. At the time of this writing, these features are part of hTmL5 · Canvas(2Dand3D) Cross-document messaging g Geolocation Audio and video Forms ● MathML Microdata Server-Sent events Scalable Vector Graphics(SVG) WebSocket API and protocol · Web origin concep 6 CHAPTER 1 OVERVIEW OF HTML5 Web storage Indexed database Application Cache(Offline Web Apps) Web Workers Drag and Drop XmlhTtprequEst Level 2 As you can see, a lot of the apis we cover in this book are on this list. How did we choose which aPIs to cover We chose to cover features that were at least somewhat baked Translation They 're available in some form in more than one browser. Other (less-baked) features may only work in one special beta version of a browser, while others are still just ideas at this point As far as browser support goes, there are some excellent online resources that you can use to check current(andfuture)browsersupportThesitewww.caniuse.comprovidesanexhaustivelistoffeatures andbrowsersupportbrokendownbybrowserversionandthesitewww.htmlstest.comchecksthe support for html5 features in the browser you use to access it Furthermore, this book does not focus on providing you with the emulation workarounds to make your HTML5 applications run seamlessly on antique browsers. Instead, we will focus primarily on the specification of HTML5 and how to use it. That said, for each of the APIs we do provide some example code that you can use to detect its availability. Rather than using user agent detection, which is often unreliable, we use feature detection. For that, you can also use Modernizra JavaScript library that provides very advanced html5 and css3 feature detection. We highly recommend you use Modernizr in your applications, because it is hands-down the best tool for this Frank says: Hi, Im frank, and sometimes paint One of the first hTml canvas demonstrations I saw was a basic painting application that mimicked the user interface of Microsoft Paint. Although it was decades behind the state of the art in digital painting and at the time ran in only a fraction of existing browsers it got me thinking about the possibilities it represented When I paint digitally, I typically use locally installed desktop software. While some of these programs are excellent, they lack the characteristics that make web applications so great. In short, they are disconnected. Sharing digital paintings has, to date, involved exporting an image from a painting application and uploading it to the Web collaboration or critiques on a live canvas are out of the question HTML5 applications can short-circuit the export cycle and make the creative process fit into the online world along with finished images The number of applications that cannot be implemented with html5 is dwindling. For text, the Web is already the ultimate two-way communication medium. Text-based applications are available in entirely web-based forms. Their graphical counterparts, like painting, video editing and 3D modeling software, are just arriving now

试读 127P Pro HTML5 Programming, 2nd Edition.pdf
立即下载 身份认证后 购VIP低至7折
关注 私信
Pro HTML5 Programming, 2nd Edition.pdf 10积分/C币 立即下载
Pro HTML5 Programming, 2nd Edition.pdf第1页
Pro HTML5 Programming, 2nd Edition.pdf第2页
Pro HTML5 Programming, 2nd Edition.pdf第3页
Pro HTML5 Programming, 2nd Edition.pdf第4页
Pro HTML5 Programming, 2nd Edition.pdf第5页
Pro HTML5 Programming, 2nd Edition.pdf第6页
Pro HTML5 Programming, 2nd Edition.pdf第7页
Pro HTML5 Programming, 2nd Edition.pdf第8页
Pro HTML5 Programming, 2nd Edition.pdf第9页
Pro HTML5 Programming, 2nd Edition.pdf第10页
Pro HTML5 Programming, 2nd Edition.pdf第11页
Pro HTML5 Programming, 2nd Edition.pdf第12页
Pro HTML5 Programming, 2nd Edition.pdf第13页
Pro HTML5 Programming, 2nd Edition.pdf第14页
Pro HTML5 Programming, 2nd Edition.pdf第15页
Pro HTML5 Programming, 2nd Edition.pdf第16页
Pro HTML5 Programming, 2nd Edition.pdf第17页
Pro HTML5 Programming, 2nd Edition.pdf第18页
Pro HTML5 Programming, 2nd Edition.pdf第19页
Pro HTML5 Programming, 2nd Edition.pdf第20页

试读结束, 可继续阅读

10积分/C币 立即下载