HTML5 web application development by example : beginner's guide

Learn how to build rich, interactive web applications from the ground up using HTML5, CSS3, and jQuery **Overview** * Packed with example applications that show you how to create rich, interactive applications and games. * Shows you how to use the most popular and widely supported features of HTML5. * Full of tips and tricks for writing more efficient and robust code while avoiding some of the pitfalls inherent to JavaScript. * Learn how to create professional looking applications using new CSS3 styles and responsive design. * Learn how to compress, package, and distribute your web applications on the Internet for fun or for profit. **In Detail** HTML5's new features have made it a real application development platform with widespread adoption throughout the industry for this purpose. Being able to create one application that can run on virtually any device from phone to desktop has made it the first choice among developers. Although JavaScript has been around for a while now, it wasn’t until the introduction of HTML5 that we have been able to create dynamic, feature-rich applications rivaling those written for the desktop. HTML5 Web Application Development by Example will give you the knowledge you need to build rich, interactive web applications from the ground up, incorporating the most popular HTML5 and CSS3 features available right now. This book is full of tips, tools, and example applications that will get you started writing your own applications today. HTML5 Web Application Development by Example shows you how to write web applications using the most popular HTML5 and CSS3 features. This book is a practical, hands-on guide with numerous real-world and relevant examples. You will learn how to use local storage to save an application’s state and incorporate CSS3 to make it look great. You will also learn how to use custom data attributes to implement data binding. We’ll use the new Canvas API to create a drawing application, then use the Audio API to create a virtual piano, before turning it all into a game. The time to start using HTML5 is now. And HTML5 Web Application Development by Example will give you the tips and know-how to get started. **What you will learn from this book** * Build your first HTML5 application in next to no time * Develop fun applications and games * Learn about UI and UX using the new features in CSS3 * Create dynamic, responsive applications that will work on any device * Use the top features in HTML5 to create fun, useful applications **Approach** The best way to learn anything is by doing. The author uses a friendly tone and fun examples to ensure that you learn the basics of application development. Once you have read this book, you should have the necessary skills to build your own applications. **Who this book is written for** If you have no experience but want to learn how to create applications in HTML5, this book is the only help you'll need. Using practical examples, HTML5 Web Application Development by Example will develop your knowledge and confidence in application development. Cover 1 Copyright 3 Credits 4 About the Author 5 About the Reviewer 6 www.PacktPub.com 7 Table of Contents 8 Preface 14 Chapter 1: The Task at Hand 20 The components of an HTML5 application 21 Time for action – creating the HTML file 23 Time for action – creating the CSS file 25 Time for action – creating the JavaScript file 26 The dollar sign identifier 29 Creating our first application 30 Time for action – creating a tasklist 31 Time for action – removing a task from the list 35 Time for action – moving tasks within the list 35 HTML templates 36 Time for action – implementing a template 36 Time for action – editing a task in the list 39 Saving the state of the application 41 Time for action – creating a localStorage wrapper 43 Time for action – storing the tasklist 46 Time for action – loading the tasklist 48 Summary 50 Chapter 2: Let's Get Stylish 52 CSS3 overview 53 CSS3 colors 53 Rounded corners 54 Shadows 55 Box shadows 56 Text shadows 57 Time for action – styles in action 57 Backgrounds 59 Linear gradients 60 Radial gradients 61 Background images 61 CSS sprites 62 Time for action – adding a gradient and button images 64 Transitions 66 Transforms 67 Time for action – effects in action 68 Dynamic stylesheets 71 Time for action – adding a theme selector 71 Filling the window 74 Time for action – expanding the application 74 Summary 76 Chapter 3: The Devil is in the Details 78 HTML5 input types 79 Color 79 Date 79 Email 80 Number 80 Range 81 Time 81 URL 81 Datalist 81 Autofocus 82 Task details 82 Time for action – adding task details 82 Time for action – hiding task details 85 Custom data attributes 88 Data binding with custom attributes 89 Time for action – building a data model 89 Time for action – implementing the bindings 93 Time for action – loading the task list 96 Queuing up changes 97 Time for action – delaying the saves 97 Summary 99 Chapter 4: A Blank Canvas 100 HTML5 canvas 100 Getting a context 101 Canvas basics 101 Clearing the canvas 102 Context properties 102 Canvas pad 103 Time for action – creating a canvas pad 103 Time for action – showing the coordinates 104 Drawing lines 106 Paths and strokes 106 Time for action – using the mouse to draw 108 Changing context properties 112 Time for action – adding context properties 112 Creating a toolbar 113 Time for action – creating a toolbar 113 Time for action – implementing a reusable toolbar 117 Adding a toolbar 120 Time for action – adding the toolbar object 120 Time for action – initializing menu items 121 Adding drawing actions 122 Time for action – creating drawing actions 123 Time for action – saving and restoring 125 Adding drawing tools 126 Time for action – adding a line tool 126 Drawing rectangles 129 Time for action – adding a rectangle tool 129 Arcs and circles 132 Time for action – adding a circle tool 134 Summary 136 Chapter 5: Not So Blank Canvas 138 Drawing text 139 Time for action – adding a text tool 139 Transformations 142 Time for action – adding an Ellipse tool 143 Time for action – exporting an image 144 Handling touch events 145 Time for action – adding touch event handlers 146 Photo Pad 149 Time for action – creating Photo Pad 149 The File API 151 Time for action – loading an image file 151 Adding effects 154 Time for action – the imageEffects object 154 Time for action – black and white 157 Time for action – sepia 158 Image distortion 160 Time for action – making waves 160 Summary 163 Chapter 6: Piano Man 164 HTML5 audio overview 164 The HTML5 element 165 The HTML5 Audio API 166 Loading audio files 167 Time for action – creating an AudioManager object 167 HTML5 piano application 170 Time for action – creating a virtual piano 170 Time for action – loading the notes 174 Time for action – playing the notes 176 Keyboard events 179 Time for action – adding keyboard events 180 Volume and sustain controls 182 Time for action – adding a sustain control 182 Time for action – adding a volume control 184 Audio tools 187 FreeSound.org 187 Audacity 187 Summary 187 Chapter 7: Piano Hero 190 Creating Piano Hero 190 Time for action – creating the splash panel 191 Time for action – creating the game panel 196 Time for action – creating the controller 198 Creating an audio sequencer 200 Time for action – creating AudioSequencer 201 Playing a song 205 Time for action – adding the audio sequencer 205 Creating animated notes 207 Time for action – adding notes 208 Time for action – animating the notes 210 Handling user input 212 Time for action – checking the notes 212 Ending the game 213 Time for action – creating the results panel 213 Summary 215 Chapter 8: A Change in the Weather 216 Introduction to Ajax 217 Making Ajax requests 217 Time for action – creating a weather widget 218 Time for action – getting XML data 220 Time for action – getting JSON data 222 HTML5 Geolocation API 224 Time for action – getting geolocation data 226 Using web services 227 Weather Underground 228 Cross-site scripting and JSONP 228 Time for action – calling the weather service 229 Summary 233 Chapter 9: Web Workers Unite 234 Web workers 234 Spawning a web worker 235 Implementing a web worker 236 Time for action – using a web worker 237 The Mandelbrot set 238 Time for action – implementing the algorithm 239 Creating a Mandelbrot application 242 Time for action – creating a Mandelbrot application 242 Time for action – Mandelbrot using a web worker 245 Debugging web workers 248 Summary 250 Chapter 10: Releasing an App into the Wild 252 Combining and compressing JavaScript 252 Time for action – creating a release script 253 HTML5 Application Cache 255 Time for action – creating a cache manifest 256 Summary 260 Appendix: Pop Quiz Answers 262 Chapter 1, The Task at Hand 262 Chapter 2, Let's Get Stylish 262 Chapter 3, The Devil is in the details 262 Chapter 4, A Blank Canvas 263 Chapter 5, Not So Blank Canvas 263 Chapter 6, Piano Man 263 Chapter 7, Piano Hero 263 Chapter 8, A Change in the Weather 264 Chapter 9, Web Workers Unite 264 Chapter 10, Releasing an App into the Wild 264 Index 266 Learn how to write rich, interactive web applications using HTML5 and CSS3 through real-world examples. In a world of proliferating platforms and devices, being able to create your own go-anywhere applications gives you a significant advantage. Overview In Detail HTML5's new features have made it a real application development platform with widespread adoption throughout the industry for this purpose. Being able to create one application that can run on virtually any device from phone to desktop has made it the first choice among developers. Although JavaScript has been around for a while now, it wasnt until the introduction of HTML5 that we have been able to create dynamic, feature-rich applications rivaling those written for the desktop. HTML5 Web Application Development by Example will give you the knowledge you need to build rich, interactive web applications from the ground up, incorporating the most popular HTML5 and CSS3 features available right now. This book is full of tips, tools, and example applications that will get you started writing your own applications today. HTML5 Web Application Development by Example shows you how to write web applications using the most popular HTML5 and CSS3 features. This book is a practical, hands-on guide with numerous real-world and relevant examples. You will learn how to use local storage to save an applications state and incorporate CSS3 to make it look great. You will also learn how to use custom data attributes to implement data binding. Well use the new Canvas API to create a drawing application, then use the Audio API to create a virtual piano, before turning it all into a game. The time to start using HTML5 is now. And HTML5 Web Application Development by Example will give you the tips and know-how to get started. What you will learn from this book Approach The best way to learn anything is by doing. The author uses a friendly tone and fun examples to ensure that you learn the basics of application development. Once you have read this book, you should have the necessary skills to build your own applications. Who this book is written for If you have no experience but want to learn how to create applications in HTML5, this book is the only help you'll need. Using practical examples, HTML5 Web Application Development by Example will develop your knowledge and confidence in application development. Learn how to write rich, interactive web applications using HTML5 and CSS3 through real-world examples. In a world of proliferating platforms and devices, being able to create your own "go-anywhere" applications gives you a significant advantage. Packed with example applications that show you how to create rich, interactive applications and games. Shows you how to use the most popular and widely supported features of HTML5. Full of tips and tricks for writing more efficient and robust code while avoiding some of the pitfalls inherent to JavaScript. Learn how to create professional looking applications using new CSS3 styles and responsive design. Learn how to compress, package, and distribute your web applications on the Internet for fun or for profit. In Detail HTML5's new features have made it a real application development platform with widespread adoption throughout the industry for this purpose. Being able to create one application that can run on virtually any device from phone to desktop has made it the first choice among developers. Although JavaScript has been around for a while now, it wasn't until the introduction of HTML5 that we have been able to create dynamic, feature-rich applications rivaling those written for the desktop. HTML5 Web Application Development by Example will give you the knowledge you need to build rich, interactive web applications from the ground up, incorporating the most popular HTML5 and CSS3 features available right now. This book is full of tips, tools, and example applications that will get you started writing your own applications today. HTML5 Web Application Development by Example shows you how to write web applications using the most popular HTML5 and CSS3 features. This book is a practical, hands-on guide with numerous real-world and relevant examples. You will learn how to use local storage to save an application's state and incorporate CSS3 to make it look great. You will also learn how to use custom data attributes to implement data binding. We'll use the new Canvas API to create a drawing application, then use the Audio API to create a virtual piano, before turning it all into a game. The time to start using HTML5 is now. And HTML5 Web Application Development by Example will give you the tips and know-how to get started