HTML5 Web Application Development By Example : Beginner's guide
| Learn |
|
|---|---|
| About | 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. |
| Features |
|
| Page Count | 276 |
| Course Length | 8 hours 16 minutes |
| ISBN | 9781849695947 |
| Date Of Publication | 24 Jun 2013 |
| The components of an HTML5 application |
| Time for action – creating the HTML file |
| Time for action – creating the CSS file |
| Time for action – creating the JavaScript file |
| Creating our first application |
| Time for action – creating a tasklist |
| Time for action – removing a task from the list |
| Time for action – moving tasks within the list |
| HTML templates |
| Time for action – implementing a template |
| Time for action – editing a task in the list |
| Saving the state of the application |
| Time for action – creating a localStorage wrapper |
| Time for action – storing the tasklist |
| Time for action – loading the tasklist |
| Summary |
| CSS3 overview |
| Rounded corners |
| Shadows |
| Time for action – styles in action |
| Backgrounds |
| Time for action – adding a gradient and button images |
| Transitions |
| Transforms |
| Time for action – effects in action |
| Dynamic stylesheets |
| Time for action – adding a theme selector |
| Filling the window |
| Time for action – expanding the application |
| Summary |
| HTML5 input types |
| Task details |
| Time for action – adding task details |
| Time for action – hiding task details |
| Custom data attributes |
| Data binding with custom attributes |
| Time for action – building a data model |
| Time for action – implementing the bindings |
| Time for action – loading the task list |
| Queuing up changes |
| Time for action – delaying the saves |
| Summary |
| HTML5 canvas |
| Getting a context |
| Canvas basics |
| Canvas pad |
| Time for action – creating a canvas pad |
| Time for action – showing the coordinates |
| Drawing lines |
| Time for action – using the mouse to draw |
| Changing context properties |
| Time for action – adding context properties |
| Creating a toolbar |
| Time for action – creating a toolbar |
| Time for action – implementing a reusable toolbar |
| Adding a toolbar |
| Time for action – adding the toolbar object |
| Time for action – initializing menu items |
| Adding drawing actions |
| Time for action – creating drawing actions |
| Time for action – saving and restoring |
| Adding drawing tools |
| Time for action – adding a line tool |
| Time for action – adding a rectangle tool |
| Time for action – adding a circle tool |
| Summary |
| Drawing text |
| Time for action – adding a text tool |
| Transformations |
| Time for action – adding an Ellipse tool |
| Time for action – exporting an image |
| Handling touch events |
| Time for action – adding touch event handlers |
| Photo Pad |
| Time for action – creating Photo Pad |
| The File API |
| Time for action – loading an image file |
| Adding effects |
| Time for action – the imageEffects object |
| Time for action – black and white |
| Time for action – sepia |
| Image distortion |
| Time for action – making waves |
| Summary |
| HTML5 audio overview |
| Loading audio files |
| Time for action – creating an AudioManager object |
| HTML5 piano application |
| Time for action – creating a virtual piano |
| Time for action – loading the notes |
| Time for action – playing the notes |
| Keyboard events |
| Time for action – adding keyboard events |
| Volume and sustain controls |
| Time for action – adding a sustain control |
| Time for action – adding a volume control |
| Audio tools |
| Summary |
| Creating Piano Hero |
| Time for action – creating the splash panel |
| Time for action – creating the game panel |
| Time for action – creating the controller |
| Creating an audio sequencer |
| Time for action – creating AudioSequencer |
| Playing a song |
| Time for action – adding the audio sequencer |
| Creating animated notes |
| Time for action – adding notes |
| Time for action – animating the notes |
| Handling user input |
| Time for action – checking the notes |
| Ending the game |
| Time for action – creating the results panel |
| Summary |
| Introduction to Ajax |
| Time for action – creating a weather widget |
| Time for action – getting XML data |
| Time for action – getting JSON data |
| HTML5 Geolocation API |
| Time for action – getting geolocation data |
| Using web services |
| Time for action – calling the weather service |
| Summary |
| Web workers |
| Time for action – using a web worker |
| The Mandelbrot set |
| Time for action – implementing the algorithm |
| Creating a Mandelbrot application |
| Time for action – creating a Mandelbrot application |
| Time for action – Mandelbrot using a web worker |
| Debugging web workers |
| Summary |
| Combining and compressing JavaScript |
| Time for action – creating a release script |
| HTML5 Application Cache |
| Time for action – creating a cache manifest |
| Summary |

Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.





