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
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
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
chevron up
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 – adding a text tool

Let's start by adding a new item to the Tool drop-down menu for the text tool:

<li data-value="text">Text</li>

Next, we'll add a drawText() method to the Canvas2D object. It will take the text to draw, a point from where to draw the text, and a Boolean value indicating whether to fill the text or just outline it. If fill is true, it uses fillText() to draw the text, otherwise it uses strokeText():

this.drawText = function(text, point, fill)
{
    if (fill)
    {
        context.fillText(text, point.x, point.y);
    }
    else
    {
        context.strokeText(text, point.x, point.y);
    }
};

Now we need a way to allow the user to enter the text that he/she wants to draw. We will need a text input field that we will keep hidden until the user wants to add some text. When the user selects the text tool and clicks on the canvas, we will position the text field where he/she clicked on and wait for him/her to enter the text...

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 5
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