HTML5: Designing Rich Internet Applications (Visualizing the Web)

implement The Powerful New Multimedia And Interactive Capabilities Offered By Html5, Including Style Control Tools, Illustration Tools, Video, Audio, And Rich Media Solutions. Understand How Html5 Is Changing The Web Development Game With This Full-color, Project-based Treatment That Shows You—not Just Tells You—what Html5 Can Do For Your Web Sites. Reinforce Your Practical Understanding Of The New Standard With Demo Applications And Tutorials, So That Execution Is One Short Step Away. the Companion Website, visualizetheweb.com , Is Packed Full Of Extra Information, Online Code Libraries, And A User Forum, Offering Even More Opportunity To Learn New Skills, Practice Your Coding And Interact With Other Users. with Html5, You’ll: * Learn How To Create Images With Svg And Canvas * Optimize Your Html5 Web Site’s Appearance On The Latest Web Browsers, Including Chrome 5, Safari 4, Internet Explorer 9, And Firefox 3.6 * Embed Video And Audio Into Your Web Page * Enhance Your Javascript Knowledge With Jquery Ajax Library * Control Your Page Layout And Design With Css3, Embedded Fonts, Animation, Transformation, 3d, And Rounded Borders * Leverage The New Html5 Elements, Such As Article, Section, Footer, Header, And Aside * Extend Your Web Applications To Mobile Devices Such As The Iphone, Android, And Webos Mobile Phones With Html5 Forms 2.0 * Implement The Geolocation Api In Your Web Applications * Apply Sql-like Local Data Storage To Your Web Solutions Cover Page 1 Front matter 2 Copyright 4 Praise for the Book 5 Dedication 6 Preface 7 HTML5 Tag Structure 9 Where HTML Code Can Be Found 9 The Evolution of the Web 10 The Rocky Road from HTML4 to HTML5 12 Web 2.0 Applications and Solutions 13 What Is Included in HTML5 14 Enhancements to Core Tag Language 14 New Elements Are Introduced to HTML5 15 Blocking Content on the Page 16 Modifications to Content Sections 18 Making DOC Type Easier to Work With 19 Organizing Code Using Blocking Elements 19 Using the SECTION Element 21 Using the ARTICLE Element 22 Using the HEADER and FOOTER Elements 22 Using the ASIDE Element 24 Using the DIALOG Element 25 Using the FIGURE Element 26 Using the NAV Element 27 Text-Level Semantic Additions and Changes 27 Using the MARK Element 28 Using the TIME Element for Measurement 28 Using the METER Element 28 Using the PROGRESS Element 29 Applying HTML5 to Make HTML Code Easier to Read 29 Working with HTML5 Forms 33 What Has Changed in HTML Forms 2.0 33 Inserting the Cursor Automatically into a Specified Field 35 Making an INPUT Field Required 35 Adding the Placeholder Text 35 Controlling Data with HTML5 37 Extending the Functionality of HTML5 37 Displaying Data in HTML5 38 Storing Data Locally Using Web Storage 39 New HTML5 Attributes 41 What Is Not Being Supported in HTML5 41 How to Gracefully Migrate Sites to Work with the New HTML5 Standard 43 What You Have Learned 44 Project 1: Building a Web Site Using HTML5 Blocking Elements 45 Creating a Template for Your Web Site 45 Customizing the HEADER Element 47 Customizing the NAVIGATION Element 48 Customizing the Main SECTION Element 49 Customizing the FOOTER Element 50 Creating the Site’s Home Page 51 Adding a Product Page That Uses the MARK Element 53 Adding a News Page That Uses the TIME and ASIDE Elements 54 Creating a Contact Us Page That Uses the New Form INPUT Attributes 56 Summary 63 Picture CSS3 64 CSS as a Designer’s Tools 64 Cascading Your Designs 66 The Format of CSS 70 Modifying Elements with CSS 70 Creating Class Styles 73 Using Pseudo Class Styles 75 Using Pseudo Elements 76 Designing Your Web Page with CSS 77 Controlling Font Display with CSS 77 Embedding Fonts Using CSS3 79 Sizing Fonts with CSS Units of Measurement 81 Color Control for Fonts 83 Adding Drop Shadow Text Effects 84 Additional Font Definitions 85 Working with Columns in CSS3 86 Using CSS3 to Control Visual Display 88 Positioning Design Elements with CSS 88 Increase Control over Color 90 Multiple Background Objects 91 Adding Rounded Corners to Layers 93 Dazzling Your Audience with CSS3 Animation 96 Using Transitions in CSS 96 Creating Animation with CSS3 98 Delivering Solutions for the Mobile Market 99 What You Have Learned 101 Project 2: Applying CSS3 to Your Web Design 102 Linking to a Single CSS Document 103 Embedding Fonts 104 Default Styles for Content 105 Applying Styles to Main Sections of Content 108 Applying Styles to the Navigation Elements 111 Applying Styles to the Form Elements 112 Additional Styles 114 Advanced CSS Execution 115 Creating a Menu with CSS 117 Designing with CSS3 123 Summary 130 HTML5 Rich Media Foundation 131 Working with VIDEO and AUDIO Tags 131 Using HTML5 Rich Media Tags 134 Controlling Video with VIDEO Tags 134 Controlling Audio with AUDIO Tags 140 Encoding Video and Audio for Delivery over the Web 143 Creating Video in Ogg Theora Format 144 Creating Video in H.264 Format 148 Creating Audio That Plays Back through Your Web Browser 148 Ensuring That Your Video and Audio Play Back 149 Serving Video from Your Servers 150 What You Have Learned 150 Project 4: Creating SVG Logos and CANVAS Charts 152 Creating an SVG Logo 152 Inserting a CANVAS-Driven Dynamic Chart 156 Summary 159 HTML5 JavaScript Model 160 Understanding JavaScript 161 JavaScript as Programming Language 163 Working with Variables 168 Using Math in Your Scripts 168 Assessing Values Using Operators 170 Controlling Outcomes with If/Else and Switch Statements 170 Specific Objects You Can Use in JavaScript 173 Developing JavaScript for HTML5 173 Using Web Workers 173 Storing Data with LocalStorage 175 Controlling Geolocation Devices with JavaScript 178 Integrating JavaScript with HTML5 181 Taking JavaScript to the Next Level with Ajax 184 Using Ajax in Your Work 185 Popular Ajax Libraries 188 Adobe’s Spry Framework 188 YUI: Yahoo Interface Library 189 Controlling Forms with wForms 189 Animation Control with $fx() 190 Visualizing Data with JSCharts 190 What You Have Learned 191 Project 5: Working with JavaScript 192 Working with jQuery 192 Developing a Lightbox Image Management Tool 193 Creating the Images 193 Working with JavaScript 195 Stitching It All Together in HTML 202 Controlling Forms with jQuery 203 Inserting a Tabbed Interface to Build on Top of Your Existing jQuery Projects 212 Using Additional Ajax Libraries: Working with Adobe’s Spry Framework 215 Working with Additional Ajax Libraries: Using Yahoo’s YUI Framework 220 Linking to Content Hosted on Different Web Sites 223 Summary 224 Index 225 A 225 B 225 C 226 D 227 E 227 F 228 G 229 H 229 I 229 J 230 K 230 L 230 M 231 N 231 O 231 P 231 Q 232 R 232 S 232 T 233 U 234 V 234 W 234 X 235 Y 235 Z 235 Implement the powerful new multimedia and interactive capabilities offered by HTML5, including style control tools, illustration tools, video, audio, and rich media solutions. Understand how HTML5 is changing the Web development game with this full-color, project-based treatment that shows you-not just tells you-what HTML5 can do for your Web sites. Reinforce your practical understanding of the new standard with demo applications and tutorials, so that execution is one short step away. The companion website, visualizetheweb.com, is packed full of extra information, online code libraries, and a user forum, offering even more opportunity to learn new skills, practice your coding and interact with other users.nbsp, * Learn how to create images with SVG and Canvas * Optimize your HTML5 Web site's appearance on the latest Web browsers, including Chrome 5, Safari 4, Internet Explorer 9, and FireFox 3.6 * Embed video and audio into your Web page * Enhance your JavaScript knowledge with jQuery Ajax library * Control your page layout and design with CSS3, embedded fonts, animation, transformation, 3D, and rounded borders * Leverage the new HTML5 elements, such as ARTICLE, SECTION, FOOTER, HEADER, and ASIDE * Extend your Web applications to mobile devices such as the iPhone, Android, and WebOS mobile phones with HTML5 FORMs 2.0 * Implement the Geolocation API in your Web applications * Apply SQL-like local data storage to your Web solutions Implement the powerful new multimedia and interactive capabilities offered by HTML5, including style control tools, illustration tools, video, audio, and rich media solutions. Reinforce your practical understanding of the new standard with demo applications and tutorials, so that execution is one short step away. Understand how HTML5 is changing the Web development game with HTML5: Designing Rich Internet Applications; the book gives you a full-color, project-based treatment that will show you-not just tell you-what HTML5 can do for your Web sites. With HTML5, you'll: * Learn how to create images with SVG and Canvas * Optimize your HTML5 Web site's appearance on the latest Web browsers, including Chrome 5, Safari 4, Internet Explorer 9, and FireFox 3.6 * Embed video and audio into your Web page * Enhance your JavaScript knowledge with jQuery Ajax library * Control your page layout and design with CSS3, embedded fonts, animation, transformation, 3D, and rounded borders * Leverage the new HTML5 elements, such as ARTICLE, SECTION, FOOTER, HEADER, and ASIDE * Extend your Web applications to mobile devices such as the iPhone, Android, and WebOS mobile phones with HTML5 FORMs 2.0 * Implement the Geolocation API in your Web applications * Apply SQL-like local data storage to your Web solutions Implement the powerful new multimedia and interactive capabilities offered by HTML5, including style control tools, illustration tools, video, audio, and rich media solutions. Understand how HTML5 is changing the Web development game with this full-color, project-based treatment that shows you-not just tells you-what HTML5 can do for your Web sites. Reinforce your practical understanding of the new standard with demo applications and tutorials, so that execution is one short step away. The companion website, __**visualizetheweb.com**__, is packed full of extra information, online code libraries, and a user forum, offering even more opportunity to learn new skills, practice your coding and interact with other users.