Book description
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.
Table of contents
-
HTML5 Web Application Development By Example Beginner's guide
- Table of Contents
- HTML5 Web Application Development By Example Beginner's guide
- Credits
- About the Author
- About the Reviewer
- www.PacktPub.com
- Preface
-
1. The Task at Hand
- 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
-
2. Let's Get Stylish
- 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
-
3. The Devil is in the Details
- 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
-
4. A Blank Canvas
- 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
-
5. Not So Blank Canvas
- 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
-
6. Piano Man
- 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
-
7. Piano Hero
- 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
- 8. A Change in the Weather
- 9. Web Workers Unite
- 10. Releasing an App into the Wild
-
A. Pop Quiz Answers
- Chapter 1, The Task at Hand
- Chapter 2, Let's Get Stylish
- Chapter 3, The Devil is in the details
- Chapter 4, A Blank Canvas
- Chapter 5, Not So Blank Canvas
- Chapter 6, Piano Man
- Chapter 7, Piano Hero
- Chapter 8, A Change in the Weather
- Chapter 9, Web Workers Unite
- Chapter 10, Releasing an App into the Wild
- Index
Product information
- Title: HTML5 Web Application Development By Example Beginner's guide
- Author(s):
- Release date: June 2013
- Publisher(s): Packt Publishing
- ISBN: 9781849695947
You might also like
book
Training Guide: Programming in HTML5 with JavaScript and CSS3
Designed to help experienced programmers develop real-world, job-role-specific skills—this Training Guide focuses on creating applications with …
book
HTML5 Unleashed
HTML5 Unleashed is the authoritative guide that covers the key web components driving the future of …
book
Xamarin: Cross-Platform Mobile Application Development
Master the skills required to develop cross-platform applications from drawing board to app store(s) using Xamarin …
book
Progressive Web Apps with Angular: Create Responsive, Fast and Reliable PWAs Using Angular
Harness the power of Angular to build fast, high performance progressive web apps that work offline. …