Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying HTML5 Web Application Development By Example : Beginner's guide
  • Table Of Contents Toc
  • Feedback & Rating feedback
HTML5 Web Application Development By Example : Beginner's guide

HTML5 Web Application Development By Example : Beginner's guide

By : Jody Gustafson
4.3 (4)
Buy this Book
close
close
HTML5 Web Application Development By Example : Beginner's guide

HTML5 Web Application Development By Example : Beginner's guide

4.3 (4)
By: Jody Gustafson
Buy this Book

Overview of this book

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 (13 chapters)
close
close
close
Preface
Icon
Preface
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Conventions
Icon
Time for action – heading
Icon
Reader feedback
Icon
Customer support
Lock Free Chapter
1
1. The Task at Hand
chevron up
Icon
1. The Task at Hand
Icon
The components of an HTML5 application
Icon
Time for action – creating the HTML file
Icon
Time for action – creating the CSS file
Icon
Time for action – creating the JavaScript file
Icon
Creating our first application
Icon
Time for action – creating a tasklist
Icon
Time for action – removing a task from the list
Icon
Time for action – moving tasks within the list
Icon
HTML templates
Icon
Time for action – implementing a template
Icon
Time for action – editing a task in the list
Icon
Saving the state of the application
Icon
Time for action – creating a localStorage wrapper
Icon
Time for action – storing the tasklist
Icon
Time for action – loading the tasklist
Icon
Summary
2
2. Let's Get Stylish
Icon
2. Let's Get Stylish
Icon
CSS3 overview
Icon
Rounded corners
Icon
Shadows
Icon
Time for action – styles in action
Icon
Backgrounds
Icon
Time for action – adding a gradient and button images
Icon
Transitions
Icon
Transforms
Icon
Time for action – effects in action
Icon
Dynamic stylesheets
Icon
Time for action – adding a theme selector
Icon
Filling the window
Icon
Time for action – expanding the application
Icon
Summary
3
3. The Devil is in the Details
Icon
3. The Devil is in the Details
Icon
HTML5 input types
Icon
Task details
Icon
Time for action – adding task details
Icon
Time for action – hiding task details
Icon
Custom data attributes
Icon
Data binding with custom attributes
Icon
Time for action – building a data model
Icon
Time for action – implementing the bindings
Icon
Time for action – loading the task list
Icon
Queuing up changes
Icon
Time for action – delaying the saves
Icon
Summary
4
4. A Blank Canvas
Icon
4. A Blank Canvas
Icon
HTML5 canvas
Icon
Getting a context
Icon
Canvas basics
Icon
Canvas pad
Icon
Time for action – creating a canvas pad
Icon
Time for action – showing the coordinates
Icon
Drawing lines
Icon
Time for action – using the mouse to draw
Icon
Changing context properties
Icon
Time for action – adding context properties
Icon
Creating a toolbar
Icon
Time for action – creating a toolbar
Icon
Time for action – implementing a reusable toolbar
Icon
Adding a toolbar
Icon
Time for action – adding the toolbar object
Icon
Time for action – initializing menu items
Icon
Adding drawing actions
Icon
Time for action – creating drawing actions
Icon
Time for action – saving and restoring
Icon
Adding drawing tools
Icon
Time for action – adding a line tool
Icon
Time for action – adding a rectangle tool
Icon
Time for action – adding a circle tool
Icon
Summary
5
5. Not So Blank Canvas
Icon
5. Not So Blank Canvas
Icon
Drawing text
Icon
Time for action – adding a text tool
Icon
Transformations
Icon
Time for action – adding an Ellipse tool
Icon
Time for action – exporting an image
Icon
Handling touch events
Icon
Time for action – adding touch event handlers
Icon
Photo Pad
Icon
Time for action – creating Photo Pad
Icon
The File API
Icon
Time for action – loading an image file
Icon
Adding effects
Icon
Time for action – the imageEffects object
Icon
Time for action – black and white
Icon
Time for action – sepia
Icon
Image distortion
Icon
Time for action – making waves
Icon
Summary
6
6. Piano Man
Icon
6. Piano Man
Icon
HTML5 audio overview
Icon
Loading audio files
Icon
Time for action – creating an AudioManager object
Icon
HTML5 piano application
Icon
Time for action – creating a virtual piano
Icon
Time for action – loading the notes
Icon
Time for action – playing the notes
Icon
Keyboard events
Icon
Time for action – adding keyboard events
Icon
Volume and sustain controls
Icon
Time for action – adding a sustain control
Icon
Time for action – adding a volume control
Icon
Audio tools
Icon
Summary
7
7. Piano Hero
Icon
7. Piano Hero
Icon
Creating Piano Hero
Icon
Time for action – creating the splash panel
Icon
Time for action – creating the game panel
Icon
Time for action – creating the controller
Icon
Creating an audio sequencer
Icon
Time for action – creating AudioSequencer
Icon
Playing a song
Icon
Time for action – adding the audio sequencer
Icon
Creating animated notes
Icon
Time for action – adding notes
Icon
Time for action – animating the notes
Icon
Handling user input
Icon
Time for action – checking the notes
Icon
Ending the game
Icon
Time for action – creating the results panel
Icon
Summary
8
8. A Change in the Weather
Icon
8. A Change in the Weather
Icon
Introduction to Ajax
Icon
Time for action – creating a weather widget
Icon
Time for action – getting XML data
Icon
Time for action – getting JSON data
Icon
HTML5 Geolocation API
Icon
Time for action – getting geolocation data
Icon
Using web services
Icon
Time for action – calling the weather service
Icon
Summary
9
9. Web Workers Unite
Icon
9. Web Workers Unite
Icon
Web workers
Icon
Time for action – using a web worker
Icon
The Mandelbrot set
Icon
Time for action – implementing the algorithm
Icon
Creating a Mandelbrot application
Icon
Time for action – creating a Mandelbrot application
Icon
Time for action – Mandelbrot using a web worker
Icon
Debugging web workers
Icon
Summary
10
10. Releasing an App into the Wild
Icon
10. Releasing an App into the Wild
Icon
Combining and compressing JavaScript
Icon
Time for action – creating a release script
Icon
HTML5 Application Cache
Icon
Time for action – creating a cache manifest
Icon
Summary
11
A. Pop Quiz Answers
Icon
Chapter 1, The Task at Hand
Icon
Chapter 2, Let's Get Stylish
Icon
Chapter 3, The Devil is in the details
Icon
Chapter 4, A Blank Canvas
Icon
Chapter 5, Not So Blank Canvas
Icon
Chapter 6, Piano Man
Icon
Chapter 7, Piano Hero
Icon
Chapter 8, A Change in the Weather
Icon
Chapter 9, Web Workers Unite
Icon
Chapter 10, Releasing an App into the Wild
12
Index
Icon
Index

Time for action – creating the CSS file

Next we'll create our base CSS file named app.css. This will have all of the basic styling that will be used by our applications, such as the default font and colors. The first part of the CSS file contains some document-wide element styles that set the basic look and feel.

body
{
    font: 1em Verdana, Geneva, sans-serif;
    padding: 0;
    margin: 5px;
    color: Black;
    background-color: WhiteSmoke;
}
div
{
    padding: 0;
    margin: 0;
}
button
{
    cursor: pointer;
}
.hidden
{
    display: none;
}

First we set the style to be applied to the body, which will trickle down to the other elements. I like to set the font size to 1em instead of a fixed pixel size so that it uses the browser's default font size. Then you can base other measurements off of that using ems or percent to give you a more reactive layout and make it easier to change the look of your application later on. Constant pixel sizes are good when you always need something to be the same size no matter what, or for small values for borders and margins, and so on.

Note

Typically, 1em is the same as 16px by default in most browsers.

Next we make sure all padding and margins are removed from all the div elements, so we zero them out. It's also nice to have the cursor change to a pointer when the user hovers over a button, so we'll set that here too. Finally, there is a .hidden class selector that can be added to any element to hide it from being displayed.

We'll finish the CSS off with some styles for the app and main elements. All we're setting at this point are margins, padding, and colors:

#app
{
    margin: 4px;
    background-color: #bbc;
}
#app>header
{
    padding: 0 0.5em;
    font-size: 1.5em;
    color: WhiteSmoke;
    background-color: #006;
}
#app>footer
{
    padding: 0.25em;
    color: WhiteSmoke;
    background-color: #006;
}
#main
{
    margin: 1em;
}
Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
HTML5 Web Application Development By Example : Beginner's guide
End of Section 1
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon