1505 HTML5 developers cookbook

473 131 0
1505 HTML5 developers cookbook

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Thông tin tài liệu

www.it-ebooks.info HTML5 Developer’s Cookbook www.it-ebooks.info Developer’s Library Series Visit developers-library.com for a complete list of available products T he Developer’s Library Series from Addison-Wesley provides practicing programmers with unique, high-quality references and tutorials on the latest programming languages and technologies they use in their daily work All books in the Developer’s Library are written by expert technology practitioners who are exceptionally skilled at organizing and presenting information in a way that’s useful for other programmers Developer’s Library books cover a wide range of topics, from opensource programming languages and databases, Linux programming, Microsoft, and Java, to Web development, social networking platforms, Mac/iPhone programming, and Android programming www.it-ebooks.info HTML5 Developer’s Cookbook Chuck Hudson Tom Leadbetter Upper Saddle River, NJ • Boston • Indianapolis • San Francisco New York • Toronto • Montreal • London • Munich • Paris • Madrid Capetown • Sydney • Tokyo • Singapore • Mexico City www.it-ebooks.info Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks Where those designations appear in this book, and the publisher was aware of a trademark claim, the designations have been printed with initial capital letters or in all capitals The authors and publisher have taken care in the preparation of this book, but make no expressed or implied warranty of any kind and assume no responsibility for errors or omissions No liability is assumed for incidental or consequential damages in connection with or arising out of the use of the information or programs contained herein The publisher offers excellent discounts on this book when ordered in quantity for bulk purchases or special sales, which may include electronic versions and/or custom covers and content particular to your business, training goals, marketing focus, and branding interests For more information, please contact: U.S Corporate and Government Sales (800) 382-3419 corpsales@pearsontechgroup.com For sales outside the United States, please contact: International Sales international@pearson.com Visit us on the Web: informit.com/aw Library of Congress Cataloging-in-Publication Data Hudson, Chuck, 1969– HTML5 developer’s cookbook / Chuck Hudson, Tom Leadbetter p cm Includes index ISBN 978-0-321-76938-1 (pbk : alk paper) HTML (Document markup language) Internet programming Web site development I Leadbetter, Tom, 1983– II Title QA76.76.H94H836 2012 006.7’4—dc23 2011040007 Copyright © 2012 Pearson Education, Inc All rights reserved Printed in the United States of America This publication is protected by copyright, and permission must be obtained from the publisher prior to any prohibited reproduction, storage in a retrieval system, or transmission in any form or by any means, electronic, mechanical, photocopying, recording, or likewise To obtain permission to use material from this work, please submit a written request to Pearson Education, Inc., Permissions Department, One Lake Street, Upper Saddle River, New Jersey 07458, or you may fax your request to (201) 236-3290 ISBN-13: 978-0-321-76938-1 ISBN-10: 0-321-76938-4 Text printed in the United States on recycled paper at RR Donnelley in Crawfordsville, Indiana First printing, December 2011 www.it-ebooks.info Editor-in-Chief Mark Taub Senior Acquisitions Editor Trina MacDonald Development Editor Michael Thurston Managing Editor John Fuller Project Editor Anna Popick Copy Editor Kim Wimpsett Indexer Jack Lewis Proofreader Lori Newhouse Technical Reviewers Evan Burchard Siddharth Ram Tim Wright Publishing Coordinator Olivia Basegio Cover Designer Gary Adair Compositor Rob Mauhar ❖ To Alex, my grandfather, thank you for sharing your love of life and books —Chuck To Lucy, thanks for being you —Tom ❖ www.it-ebooks.info This page intentionally left blank www.it-ebooks.info Contents at a Glance Introduction xix Acknowledgments xxvii About the Authors xxix New Structural Elements in HTML5 Grouping, Text-Level, and Redefined Semantics 31 Browser Handling in HTML5 55 New Layout and Style Techniques with CSS3 HTML5 Web Forms 95 Drawing with Canvas 127 Embedding Video with HTML5 163 Embedding Audio with HTML5 187 Changing Browser History 207 10 Location Awareness with the Geolocation API 11 Client-Side Storage 259 12 Communication and Threading 297 13 Browser Experience in HTML5 319 14 Working with Local Files 15 Integrating Device Data Recipes Index 69 411 415 www.it-ebooks.info 359 389 231 This page intentionally left blank www.it-ebooks.info Contents Introduction xix Acknowledgments xxvii About the Authors xxix New Structural Elements in HTML5 BEGINNER RECIPE: Building an HTML5 Starter Document 2 doctype Character Encoding JavaScript and CSS Links Syntax Writing Style 3 Where Do All the New Elements Come From? BEGINNER RECIPE: Using the header Element to Create a Site Header BEGINNER RECIPE: Using the hgroup Element to Group Headings BEGINNER RECIPE: Creating Navigation with the nav Element INTERMEDIATE RECIPE: Using the New article Element 11 INTERMEDIATE RECIPE: Grouping Content with the section Element 12 Which Should You Use: article or section? BEGINNER RECIPE: Creating a Sidebar with the aside Element BEGINNER RECIPE: Using the footer Element 14 15 17 INTERMEDIATE RECIPE: Using the HTML5 Outliner to Ensure the Correct Structure 19 ADVANCED RECIPE: Using All the New Elements to Build a News Page 21 ADVANCED RECIPE: Using All the New Elements to Build a Search Results Page 25 Summary 30 www.it-ebooks.info ... www.it-ebooks.info When Will HTML5 Be Ready for Use? HTML5DevelopersCookbook.com By nature, a cookbook of this type is full of code listings that support the recipes Because of how fast the HTML5 technology... to work fine in HTML5 Using HTML5 means you can continue to code in the style that you have used previously We will cover this more in Chapter 1, but HTML5 has been written with developers in mind,... browser, and it is all standard www.it-ebooks.info The Cookbook Style Does HTML5 Have a Logo? Yes, HTML5 sure does have a logo In years gone by, web developers and site owners have put icons on their

Ngày đăng: 06/03/2019, 15:19

Mục lục

  • Contents

  • Introduction

  • Acknowledgments

  • About the Authors

  • 1 New Structural Elements in HTML5

    • BEGINNER RECIPE: Building an HTML5 Starter Document

      • Doctype

      • Character Encoding

      • JavaScript and CSS Links

      • Syntax Writing Style

    • Where Do All the New Elements Come From?

    • BEGINNER RECIPE: Using the header Element to Create a Site Header

    • BEGINNER RECIPE: Using the hgroup Element to Group Headings

    • BEGINNER RECIPE: Creating Navigation with the nav Element

    • INTERMEDIATE RECIPE: Using the New article Element

    • INTERMEDIATE RECIPE: Grouping Content with the section Element

      • Which Should You Use: article or section?

    • BEGINNER RECIPE: Creating a Sidebar with the aside Element

    • BEGINNER RECIPE: Using the footer Element

    • INTERMEDIATE RECIPE: Using the HTML5 Outliner to Ensure the Correct Structure

    • ADVANCED RECIPE: Using All the New Elements to Build a News Page

    • ADVANCED RECIPE: Using All the New Elements to Build a Search Results Page

    • Summary

  • 2 Grouping, Text-Level, and Redefined Semantics

    • BEGINNER RECIPE: Marking Up Figures and Captions with the figure and figcaption Elements

    • BEGINNER RECIPE: Marking Up the Date and Time with the time Element

    • BEGINNER RECIPE: Making a Native Toggle Widget with the details Element

    • BEGINNER RECIPE: Using the address Element for Contact Information

    • BEGINNER RECIPE: Highlighting Text with the mark Element

    • BEGINNER RECIPE: Using the s Element to Show Inaccurate or Irrelevant Content

    • Changes to Existing Elements

      • The cite Element

      • The ol Element

      • The dl Element

      • The small Element

      • The b and strong Elements

      • The i and em Elements

      • The abbr Element

      • The hr Element

      • Elements That Are No More

    • BEGINNER RECIPE: Wrapping Links Around Elements

    • INTERMEDIATE RECIPE: Adding Semantic Information with Microdata

    • INTERMEDIATE RECIPE: Using WAI-ARIA with HTML5

    • ADVANCED RECIPE: Marking Up an Article Page with Comments

    • Summary

  • 3 Browser Handling in HTML5

    • BEGINNER RECIPE: Dealing with Internet Explorer

      • Using JavaScript to Make HTML5 Compatible

      • Making CSS Compatible

    • Boilerplates

    • BEGINNER RECIPE: Testing for HTML5 Features

    • INTERMEDIATE RECIPE: Leveraging jQuery to Replace a Calendar

    • INTERMEDIATE RECIPE: Using Modernizr to Detect Features

    • Polyfilling

    • Useful HTML5 Verification Sites

    • Summary

  • 4 New Layout and Style Techniques with CSS3

    • INTERMEDIATE RECIPE: Creating a Responsive Design with CSS3 Media Queries

      • Sensible Usage

      • Targeting the iPhone and Android Devices

    • BEGINNER RECIPE: Using Custom Fonts with @font-face

      • File Formats and the Cross-Browser Fix

      • Type Services

    • INTERMEDIATE RECIPE: Making Buttons with CSS Gradients and Multiple Backgrounds

    • INTERMEDIATE RECIPE: Enhancing a Site with Transformations and Transitions

    • ADVANCED RECIPE: Creating Animations with CSS

    • Summary

  • 5 HTML5 Web Forms

    • Validation

    • HTML 4 Input Types

    • BEGINNER RECIPE: Creating a Form to Collect Contact Information

      • Input type="email"

      • Input type="tel"

      • Input type="url"

    • BEGINNER RECIPE: Creating a Search Form with input type="search"

    • BEGINNER RECIPE: Creating Calendar and Time Controls

      • Input type="datetime"

      • Input type="datetime-local"

      • Input type="date"

      • Input type="time"

      • Input type="month"

      • Input type="week"

      • Placing Restrictions on Dates and Times

    • BEGINNER RECIPE: Creating a Number Picker

    • BEGINNER RECIPE: Creating a Slider (Without the Need for JavaScript)

    • BEGINNER RECIPE: Creating a Color Picker

    • BEGINNER RECIPE: Displaying Results with the output Element

    • BEGINNER RECIPE: Using Form Placeholder Text

    • BEGINNER RECIPE: Creating an Autocomplete Feature with list and datalist

    • BEGINNER RECIPE: Tracking the Completion of a Task with the progress Element

    • BEGINNER RECIPE: Measuring with the meter Element

    • BEGINNER RECIPE: Jumping to a form Element When the Page Loads

    • BEGINNER RECIPE: Allowing Multiple Entries

    • BEGINNER RECIPE: Basic Validation with the required Attribute

    • INTERMEDIATE RECIPE: Writing Your Own Validation Rule

    • BEGINNER RECIPE: Limiting User Input

      • Step

      • Min, max

      • Formnovalidate, novalidate

    • INTERMEDIATE RECIPE: Customizing and Styling the Form

    • Error Messages

    • ADVANCED RECIPE: Putting It All Together to Make a Sign-Up Form

    • Summary

  • 6 Drawing with Canvas

    • Canvas Overview

      • Getting Started

      • X and Y Coordinates

    • BEGINNER RECIPE: Laying a Grid on the Canvas

    • Canvas Tools

    • BEGINNER RECIPE: Making Simple Shapes and Lines

      • Drawing and Styling a Rectangle or Square

      • Applying Gradients to Shapes

      • Drawing Lines and Paths

    • INTERMEDIATE RECIPE: Drawing Polygons with a Path

    • INTERMEDIATE RECIPE: Drawing Arcs and Circles

      • Drawing Curves

    • BEGINNER RECIPE: Adding Text

    • BEGINNER RECIPE: Drawing an Image

    • INTERMEDIATE RECIPE: Cropping an Image

    • INTERMEDIATE RECIPE: Animating a Sprite Map

    • Canvas Transformations

    • ADVANCED RECIPE: Animating an Image

    • ADVANCED RECIPE: Animating a Vertical Bar Chart

    • Summary

  • 7 Embedding Video with HTML5

    • BEGINNER RECIPE: Including Video with the video Element

      • Browser and Device Support

      • HTML5 and Video Codecs

      • Why Should You Care About Codecs?

    • INTERMEDIATE RECIPE: Enabling Video for All Browsers

      • Adding Fallback Content for Older Browsers

      • New Video Attributes

    • INTERMEDIATE RECIPE: Creating a Video with Subtitles and Captions

      • Other Subtitle Styling Options

    • The Media API

    • ADVANCED RECIPE: Making Your Own Custom Controls

    • Summary

  • 8 Embedding Audio with HTML5

    • BEGINNER RECIPE: Including Audio with the audio Element

    • INTERMEDIATE RECIPE: Enabling Audio for All Browsers

      • Adding Fallback Content for Older Browsers

    • New Audio Attributes

      • The src Attribute

      • The preload Attribute

      • The loop Attribute

      • The autoplay Attribute

      • The controls Attribute

    • The Media API

    • INTERMEDIATE RECIPE: Creating a Beat Mixer

    • ADVANCED RECIPE: Adding Streaming Radio

    • Summary

  • 9 Changing Browser History

    • History Basics

      • Browser Compatibility

    • BEGINNER RECIPE: Adding to History with pushState

    • BEGINNER RECIPE: Creating an Image Viewer

    • INTERMEDIATE RECIPE: Popping State in the Image Viewer

    • BEGINNER RECIPE: Changing History with replaceState

    • INTERMEDIATE RECIPE: Changing the Page History

    • ADVANCED RECIPE: Using Advanced State Data Objects to Pass Information Across Pages

    • INTERMEDIATE RECIPE: Testing History Security

    • Helpful Libraries

    • Summary

  • 10 Location Awareness with the Geolocation API

    • Geolocation Overview

      • Browser Compatibility

      • Where in the World: getCurrentPosition

    • BEGINNER RECIPE: Determining Your Location with a Simple getCurrentPosition

      • Location Privacy

    • INTERMEDIATE RECIPE: Mapping a Location with getCurrentPosition

    • INTERMEDIATE RECIPE: Determining Distance with PositionOptions

    • ADVANCED RECIPE: Following a Moving Location with watchPosition

    • Summary

  • 11 Client-Side Storage

    • Client-Side Storage Overview

      • Data Security

      • Keys and Values: sessionStorage and localStorage

    • BEGINNER RECIPE: Getting and Setting Session Storage

      • Chrome Developer Tools for Viewing Storage

    • BEGINNER RECIPE: Styling from Session Storage

    • INTERMEDIATE RECIPE: Storing Forms with Local Storage

    • ADVANCED RECIPE: Catching Events in Local Storage

    • Web SQL Database API

    • ADVANCED RECIPE: Using a Web Database for a Grocery List

    • Summary

  • 12 Communication and Threading

    • WebSocket API Overview

    • BEGINNER RECIPE: Talking Through Web Sockets

    • Threading Through Web Workers

    • BEGINNER RECIPE: Creating a Web Worker

    • INTERMEDIATE RECIPE: Adding Two-Way Communication

    • ADVANCED RECIPE: Leveraging a Shared Web Worker

    • Summary

  • 13 Browser Experience in HTML5

    • Drag and Drop API

    • BEGINNER RECIPE: Dragging and Dropping Across divs

    • ADVANCED RECIPE: Leveraging Events and dataTransfer

    • Application Cache and API

      • Browser Cache Security

      • Referencing a Manifest File

    • BEGINNER RECIPE: Creating a Manifest File

      • CACHE

      • FALLBACK

      • NETWORK

      • Updating the Cache via the Manifest

    • BEGINNER RECIPE: Using Web Pages Offline

    • Application Cache API

    • Notification API

      • Notification Permissions

      • Browser Compatibility

    • BEGINNER RECIPE: Displaying a Simple Notification

    • ADVANCED RECIPE: Creating a Tweet Notification Page

    • Summary

  • 14 Working with Local Files

    • File API Overview

      • File API Security

    • BEGINNER RECIPE: Getting File Attributes

    • BEGINNER RECIPE: Processing Multiple Files with Drag and Drop

    • The FileReader Interface

    • INTERMEDIATE RECIPE: Previewing Images Through readAsDataURL

    • ADVANCED RECIPE: Parsing a CSV File with readAsText

    • File API Extended Specifications

    • ADVANCED RECIPE: Creating a Local File

    • Summary

  • 15 Integrating Device Data

    • Brief Device APIs History

    • Contacts API

    • BEGINNER RECIPE: Retrieving All Contacts and Mobile Numbers

    • Messaging API

    • Network Information API

    • Battery Status Events

    • HTML Media Capture

    • INTERMEDIATE RECIPE: Capturing Pictures with File Input

    • Device Orientation and Motion Events

    • INTERMEDIATE RECIPE: Creating a Bubble Level

    • Summary

  • Recipes

  • Index

    • A

    • B

    • C

    • D

    • E

    • F

    • G

    • H

    • I

    • J

    • K

    • L

    • M

    • N

    • O

    • P

    • Q

    • R

    • S

    • T

    • U

    • V

    • W

    • X

    • Y

    • Z

Tài liệu cùng người dùng

  • Đang cập nhật ...

Tài liệu liên quan