Search icon Close icon
Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Checkout

Change country

Modal Close icon
Country selected Country selected
country flag United States
Country selected
country flag Great Britain
Country selected
country flag India
Country selected
country flag Germany
Country selected
country flag France
Country selected
country flag Canada
Country selected
country flag Russia
Country selected
country flag Spain
Country selected
country flag Brazil
Country selected
country flag Australia
Country selected
country flag Singapore
Country selected
country flag Hungary
Country selected
country flag Ukraine
Country selected
country flag Luxembourg
Country selected
country flag Estonia
Country selected
country flag Lithuania
Country selected
country flag South Korea
Country selected
country flag Turkey
Country selected
country flag Switzerland
Country selected
country flag Colombia
Country selected
country flag Taiwan
Country selected
country flag Chile
Country selected
country flag Norway
Country selected
country flag Ecuador
Country selected
country flag Indonesia
Country selected
country flag New Zealand
Country selected
country flag Cyprus
Country selected
country flag Denmark
Country selected
country flag Finland
Country selected
country flag Poland
Country selected
country flag Malta
Country selected
country flag Czechia
Country selected
country flag Austria
Country selected
country flag Sweden
Country selected
country flag Italy
Country selected
country flag Egypt
Country selected
country flag Belgium
Country selected
country flag Portugal
Country selected
country flag Slovenia
Country selected
country flag Ireland
Country selected
country flag Romania
Country selected
country flag Greece
Country selected
country flag Argentina
Country selected
country flag Netherlands
Country selected
country flag Bulgaria
Country selected
country flag Latvia
Country selected
country flag South Africa
Country selected
country flag Malaysia
Country selected
country flag Japan
Country selected
country flag Slovakia
Country selected
country flag Philippines
Country selected
country flag Mexico
Country selected
country flag Thailand
Country selected
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Home > Web Development > Front End Web Development > HTML5 Web Application Development By Example : Beginner's guide
HTML5 Web Application Development By Example : Beginner's guide
HTML5 Web Application Development By Example : Beginner's guide

HTML5 Web Application Development By Example : Beginner's guide: 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.

Arrow left icon
Profile Icon Jody Gustafson
Arrow right icon
€36.99
Full star icon Full star icon Full star icon Full star icon Half star icon 4.3 (4 Ratings)
Paperback Jun 2013 276 pages 1st Edition
eBook
€26.98 €29.99
Paperback
€36.99
Subscription
Free Trial
Renews at $19.99p/m
Arrow left icon
Profile Icon Jody Gustafson
Arrow right icon
€36.99
Full star icon Full star icon Full star icon Full star icon Half star icon 4.3 (4 Ratings)
Paperback Jun 2013 276 pages 1st Edition
eBook
€26.98 €29.99
Paperback
€36.99
Subscription
Free Trial
Renews at $19.99p/m
eBook
€26.98 €29.99
Paperback
€36.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with Print?

Product feature icon Instant access to your digital copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Redeem a companion digital copy on all Print orders
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR

Contact Details

Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Table of content icon View table of contents Preview book icon Preview Book

HTML5 Web Application Development By Example : Beginner's guide

Chapter 2. Let's Get Stylish

"In matters of style, swim with the current; in matters of principle, stand like a rock." – Thomas Jefferson

In this chapter, we will put on our graphic designer hats and do some styling. Right now our task list application that we created in the first chapter works but it looks like something from 2005. We will bring it up to the present and into the future using CSS3 to give it a clean, modern look. We will add rounded corners, shadows, gradients, and transitions using the latest CSS3 features. We will also use CSS sprites to add some images to the task list buttons.

In this chapter we will learn:

  • New ways to specify colors in CSS3 and set transparencies
  • How to add rounded corners to elements
  • How to add shadows to elements and text
  • How to draw gradients in element backgrounds
  • New CSS3 background properties
  • How to use CSS sprites in your applications
  • How to use transitions and transforms to add effects to the user interface
  • How to dynamically...

CSS3 overview

CSS3 is not part of the HTML5 specification, but it is an integral part of writing HTML5 applications. CSS3 is being developed in tandem with HTML5 and provides many new styles to make web pages look and function better than ever. Things that were once the realm of Photoshop, such as gradients and shadows, are now easily added via styling. Using these new graphics features will make your applications look modern and add character to your applications.

Some of the most exciting additions to CSS are the ability to add gradients and shadows to elements. Rounded corners, a feature that everyone wanted in their web pages, and which were once the realm of many HTML hacks, are now simple to add. It has never been easier to make web pages and applications look good without having to download extra images and code to support them.

You can see examples of all the following CSS3 styles in chapter2/css3-examples/css3-examples.html.

CSS3 colors

Before we get started with the new effects,...

Rounded corners

The first CSS3 effect that we'll look at is rounded corners, since that was such a sought-after feature before CSS3. In the past, if you wanted rounded corners, there were only a few non-optimal solutions available. You could load four images, one for each corner, and add some extra markup to get them to line up (and try to make it work in all browsers). Or implement some kind of hack using multiple div tags to "draw" a rounded border. Or one of a half a dozen other ways. In the end none of them were great solutions. So why did we go to such lengths to make rounded corners work before CSS3? Because people are attracted to them and they just seem to make your design look more natural.

Rounded corners are ridiculously easy to add to elements using CSS3's new border-radius property. If you want each corner to have the same border radius, just give it one value, like this:

border-radius: 0.5em;

If you want to set each corner of the border to a different radius...

Shadows

Adding shadows to elements and text is simple in CSS3. Use shadows to make certain elements really stand out and give a more natural look to your UI. There are many options for adding shadows, such as size, position, and color. Shadows don't always have to be behind elements and text; they can frame, highlight, and add effects to them too.

Box shadows

In addition to rounded corners, you can add shadows to elements using the new CSS3 box-shadow property. The box-shadow property takes a number of parameters that tells it how to draw the shadow:

box-shadow: h-offset v-offset blur-radius spread-radius color;

Here is an explanation of the parameters:

  • h-offset: The horizontal offset of the shadow. Negative values put the shadow to the left of the element.
  • v-offset: The vertical offset of the shadow. Negative values put the shadow above the element.
  • blur-radius: Determines the blur amount; the higher the number, the more blur (optional).
  • spread-radius: The size of the shadow. If zero, it...

Time for action – styles in action

Let's put the border-radius and box-shadow effects to good use in our task list application. First, we will center the task list on the page. Then we'll put a box around each task with rounded corners and a shadow. Let's open taskAtHand.css and make some changes. You can find the code for this section in chapter2/example2.1.

First, we'll change the style for the <div id="main"> element which contains the task-name text field and task list. Let's give this section a minimum width of 9em and a maximum width of 25em. We don't want the task list to get too wide or too small to make it easier to read. This will give us the beginnings of a reactive layout. We will also set the top and bottom margins to 1em, and the left and right margins to auto to center it on the page.

Note

A reactive layout is one that reacts to its environment by adjusting its layout to fit the device it is displayed on. By using reactive...

Backgrounds

There are a number of new styles for setting the background styles of elements. You can now easily draw gradients without using images. You can change the size and origin of background images, and even use multiple images in backgrounds.

Gradients draw a background for an element that fades from one color to one or more other colors. They give depth to your pages and add a more natural look. You can specify two different types of gradients in CSS3: linear and radial. Linear gradients are, well, linear. They flow from one color to another in a straight line. Radial gradients spread out from a central point in a radial fashion.

Linear gradients

Linear gradients are defined using the linear-gradient specifier on a background property. For the simplest form, you specify a start and end color using any of the color specifiers we discussed earlier in the section on colors, and it will draw the gradient from the top to the bottom of the element. The following fades from red to blue:

background...

Time for action – adding a gradient and button images

Let's use what we learned about gradients and background images to make our application look more interesting. First, we'll add a gradient to the background of our task list application. We will add a linear gradient to the <div id="app"> element. It will start with our previous background color at the top and fade into a dark blue color at the bottom. Notice how we keep the old background color as a fallback for browsers that don't support gradients:

#app
{
    margin: 4px;
    background-color: #bbc;
    background: -webkit-linear-gradient(top, #bbc, #558);
    background: -moz-linear-gradient(top, #bbc, #558);
    background: -ms-linear-gradient(top, #bbc, #558);
    background: linear-gradient(top, #bbc, #558);
}

This is how it would look:

Time for action – adding a gradient and button images

Now let's use CSS sprites to add images to the buttons in our task list application. We need images for delete, move up, and move down. Our buttons will...

CSS3 overview

CSS3 is not part of the HTML5 specification, but it is an integral part of writing HTML5 applications. CSS3 is being developed in tandem with HTML5 and provides many new styles to make web pages look and function better than ever. Things that were once the realm of Photoshop, such as gradients and shadows, are now easily added via styling. Using these new graphics features will make your applications look modern and add character to your applications.

Some of the most exciting additions to CSS are the ability to add gradients and shadows to elements. Rounded corners, a feature that everyone wanted in their web pages, and which were once the realm of many HTML hacks, are now simple to add. It has never been easier to make web pages and applications look good without having to download extra images and code to support them.

You can see examples of all the following CSS3 styles in chapter2/css3-examples/css3-examples.html.

CSS3 colors

Before we get started with the new effects, let...

Rounded corners

The first CSS3 effect that we'll look at is rounded corners, since that was such a sought-after feature before CSS3. In the past, if you wanted rounded corners, there were only a few non-optimal solutions available. You could load four images, one for each corner, and add some extra markup to get them to line up (and try to make it work in all browsers). Or implement some kind of hack using multiple div tags to "draw" a rounded border. Or one of a half a dozen other ways. In the end none of them were great solutions. So why did we go to such lengths to make rounded corners work before CSS3? Because people are attracted to them and they just seem to make your design look more natural.

Rounded corners are ridiculously easy to add to elements using CSS3's new border-radius property. If you want each corner to have the same border radius, just give it one value, like this:

border-radius: 0.5em;

If you want to set each corner of the border to a different radius, you can do that too...

Shadows

Adding shadows to elements and text is simple in CSS3. Use shadows to make certain elements really stand out and give a more natural look to your UI. There are many options for adding shadows, such as size, position, and color. Shadows don't always have to be behind elements and text; they can frame, highlight, and add effects to them too.

Box shadows

In addition to rounded corners, you can add shadows to elements using the new CSS3 box-shadow property. The box-shadow property takes a number of parameters that tells it how to draw the shadow:

box-shadow: h-offset v-offset blur-radius spread-radius color;

Here is an explanation of the parameters:

  • h-offset: The horizontal offset of the shadow. Negative values put the shadow to the left of the element.

  • v-offset: The vertical offset of the shadow. Negative values put the shadow above the element.

  • blur-radius: Determines the blur amount; the higher the number, the more blur (optional).

  • spread-radius: The size of the shadow. If zero, it's...

Time for action – styles in action

Let's put the border-radius and box-shadow effects to good use in our task list application. First, we will center the task list on the page. Then we'll put a box around each task with rounded corners and a shadow. Let's open taskAtHand.css and make some changes. You can find the code for this section in chapter2/example2.1.

First, we'll change the style for the <div id="main"> element which contains the task-name text field and task list. Let's give this section a minimum width of 9em and a maximum width of 25em. We don't want the task list to get too wide or too small to make it easier to read. This will give us the beginnings of a reactive layout. We will also set the top and bottom margins to 1em, and the left and right margins to auto to center it on the page.

Note

A reactive layout is one that reacts to its environment by adjusting its layout to fit the device it is displayed on. By using reactive layouts, you can ensure that your application works...

Backgrounds

There are a number of new styles for setting the background styles of elements. You can now easily draw gradients without using images. You can change the size and origin of background images, and even use multiple images in backgrounds.

Gradients draw a background for an element that fades from one color to one or more other colors. They give depth to your pages and add a more natural look. You can specify two different types of gradients in CSS3: linear and radial. Linear gradients are, well, linear. They flow from one color to another in a straight line. Radial gradients spread out from a central point in a radial fashion.

Linear gradients

Linear gradients are defined using the linear-gradient specifier on a background property. For the simplest form, you specify a start and end color using any of the color specifiers we discussed earlier in the section on colors, and it will draw the gradient from the top to the bottom of the element. The following fades from red to blue:

background...

Time for action – adding a gradient and button images

Let's use what we learned about gradients and background images to make our application look more interesting. First, we'll add a gradient to the background of our task list application. We will add a linear gradient to the <div id="app"> element. It will start with our previous background color at the top and fade into a dark blue color at the bottom. Notice how we keep the old background color as a fallback for browsers that don't support gradients:

#app
{
    margin: 4px;
    background-color: #bbc;
    background: -webkit-linear-gradient(top, #bbc, #558);
    background: -moz-linear-gradient(top, #bbc, #558);
    background: -ms-linear-gradient(top, #bbc, #558);
    background: linear-gradient(top, #bbc, #558);
}

This is how it would look:

Now let's use CSS sprites to add images to the buttons in our task list application. We need images for delete, move up, and move down. Our buttons will be 16x16 pixels, so our images will need...

Transitions

We have a pretty good looking UI now, but we can make it even better with some transitions. CSS3 transitions add animation effects to elements when their styles change. For example, if we change the size of an element, it will gradually change from smaller size to a larger size thereby providing visual feedback to the user. When things change gradually, it catches our eye more than something that just appears suddenly on the page.

The CSS3 transition property allows us to specify transitions on elements. It has the following format:

transition: property duration timing-function delay

Here is an explanation of the parameters:

  • property: The CSS property to add a transition to. For example, width or color. Use all to apply transitions to all the properties.

  • duration: The length of time the transition takes. For example, 0.5s takes half a second to complete the transition.

  • timing-function: Determines how the transition progresses over the duration:

    • linear: The same speed from beginning...

Transforms

CSS3 transforms provide even more sophisticated effects. There are 2D and 3D transformations available. We will discuss some of the 2D transformations here. Transforms can be used with transitions to provide some interesting effects. Here is the basic form of the transform property:

transform: function();

There are a few different 2D transform functions. The first we'll look at is translate(). It moves an element from its current position to a new position. It takes x and y positions as parameters. You can use negative values to move up and to the left. The following would move an element 10 pixels right and 25 pixels up:

transform: translate(10px, -25px);

The rotate() function rotates an element by a given amount. The rotation amount can be specified in degrees or radians. Use negative values to rotate counter clockwise, positive for clockwise:

transform: rotate(45deg);

The scale() function adjusts the size of an element by some factor. It takes one or two parameters. If only one...

Left arrow icon

Page 1 of 15

Right arrow icon

Key benefits

  • 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.

Description

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.

Who is this book 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.

What you will learn

  • 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
Estimated delivery fee Deliver to Sweden

Premium delivery 7 - 10 business days

€17.95
(Includes tracking information)

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Jun 25, 2013
Length: 276 pages
Edition : 1st
Language : English
ISBN-13 : 9781849695947
Vendor :
Microsoft
Category :
Web Development
Languages :
HTML
Concepts :
Front End Web Development
Tools :
IIS

What do you get with Print?

Product feature icon Instant access to your digital copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Redeem a companion digital copy on all Print orders
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR

Contact Details

Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Estimated delivery fee Deliver to Sweden

Premium delivery 7 - 10 business days

€17.95
(Includes tracking information)

Product Details

Publication date : Jun 25, 2013
Length: 276 pages
Edition : 1st
Language : English
ISBN-13 : 9781849695947
Vendor :
Microsoft
Category :
Web Development
Languages :
HTML
Concepts :
Front End Web Development
Tools :
IIS

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
START FREE TRIAL
BUY NOW
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW

Frequently bought together

HTML5 Web Application Development By Example : Beginner's guide
HTML5 Web Application Development By Example : Beginner's guide
Read more
Jun 2013 276 pages
Full star icon 4.3 (4)
eBook
eBook
  • eBook eBook €26.98
  • Paperback Paperback €36.99
€26.98 €29.99
€36.99
HTML5 Data and Services Cookbook
HTML5 Data and Services Cookbook
Read more
Sep 2013 480 pages
Full star icon 4.3 (7)
eBook
eBook
  • eBook eBook €32.99
  • Paperback Paperback €45.99
€32.99 €36.99
€45.99
Learn HTML5 by Creating Fun Games
Learn HTML5 by Creating Fun Games
Read more
Jun 2013 374 pages
Full star icon 5 (1)
eBook
eBook
  • eBook eBook €28.99
  • Paperback Paperback €41.99
€28.99 €32.99
€41.99
Stars icon
Total € 124.97
HTML5 Web Application Development By Example : Beginner's guide
€36.99
HTML5 Data and Services Cookbook
€45.99
Learn HTML5 by Creating Fun Games
€41.99
Total € 124.97 Stars icon

Table of Contents

12 Chapters
1. The Task at Hand Chevron down icon Chevron up icon
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 Chevron down icon Chevron up icon
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 Chevron down icon Chevron up icon
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 Chevron down icon Chevron up icon
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 Chevron down icon Chevron up icon
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 Chevron down icon Chevron up icon
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 Chevron down icon Chevron up icon
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 Chevron down icon Chevron up icon
8. A Change in the Weather
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
9. Web Workers Unite Chevron down icon Chevron up icon
9. Web Workers Unite
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
10. Releasing an App into the Wild Chevron down icon Chevron up icon
10. Releasing an App into the Wild
Combining and compressing JavaScript
Time for action – creating a release script
HTML5 Application Cache
Time for action – creating a cache manifest
Summary
A. Pop Quiz Answers Chevron down icon Chevron up icon
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 Chevron down icon Chevron up icon
Index

Recommendations for you

Left arrow icon
Full-Stack Flask and React
Full-Stack Flask and React
Read more
Oct 2023 408 pages
Full star icon 4.3 (4)
eBook
eBook
  • eBook eBook €20.99
  • Paperback Paperback €29.99
€20.99 €23.99
€29.99
C# 13 and .NET 9 – Modern Cross-Platform Development Fundamentals
C# 13 and .NET 9 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2024 828 pages
Full star icon 4.4 (5)
eBook
eBook
  • eBook eBook €26.98
  • Paperback Paperback €37.99
€26.98 €29.99
€37.99
Real-World Web Development with .NET 9
Real-World Web Development with .NET 9
Read more
Dec 2024 578 pages
Full star icon 4.3 (3)
eBook
eBook
  • eBook eBook €26.98
  • Paperback Paperback €37.99
€26.98 €29.99
€37.99
Django 5 By Example
Django 5 By Example
Read more
Apr 2024 820 pages
Full star icon 4.6 (38)
eBook
eBook
  • eBook eBook €26.98
  • Paperback Paperback €37.99
€26.98 €29.99
€37.99
React and React Native
React and React Native
Read more
Apr 2024 508 pages
Full star icon 4.3 (10)
eBook
eBook
  • eBook eBook €23.99
  • Paperback Paperback €32.99
€23.99 €26.99
€32.99
Scalable Application Development with NestJS
Scalable Application Development with NestJS
Read more
Jan 2025 612 pages
Full star icon 4.8 (5)
eBook
eBook
  • eBook eBook €20.99
  • Paperback Paperback €29.99
€20.99 €23.99
€29.99
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2023 828 pages
Full star icon 4.4 (74)
eBook
eBook
  • eBook eBook €31.99
  • Paperback Paperback €44.99
€31.99 €35.99
€44.99
Responsive Web Design with HTML5 and CSS
Responsive Web Design with HTML5 and CSS
Read more
Sep 2022 498 pages
Full star icon 4.5 (57)
eBook
eBook
  • eBook eBook €23.99
  • Paperback Paperback €33.99
€23.99 €26.99
€33.99
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Jun 2024 506 pages
Full star icon 5 (8)
eBook
eBook
  • eBook eBook €23.99
  • Paperback Paperback €33.99
€23.99 €26.99
€33.99
Learning Angular
Learning Angular
Read more
Jan 2025 486 pages
Full star icon 4 (6)
eBook
eBook
  • eBook eBook €22.99
  • Paperback Paperback €31.99
€22.99 €25.99
€31.99
Right arrow icon

Customer reviews

Rating distribution
Full star icon Full star icon Full star icon Full star icon Half star icon 4.3
(4 Ratings)
5 star 75%
4 star 0%
3 star 0%
2 star 25%
1 star 0%
Arun Mahendrakar Nov 22, 2013
Full star icon Full star icon Full star icon Full star icon Full star icon 5
I have seen a few other books on this topic, but this one starts from the very basics and takes the reader through some of the very advanced concepts.The first three chapters work on improving the user-experience and the feature set of a 'to-do' list. The author's style of explanation is quite lucid and easily understandable.The next two chapters throw light on HTML5 Canvas, showing a glimpse of the power that the Canvas holds.Chapters 6 and 7 show the HTML5 Audio element. At then end of these chapters, you will have become a piano-man!Chapter 8 talks about making server calls using jQuery Ajax. This chapter could have been a bit more elaborate with code samples for making post and delete calls on the server (although the challenge there is to have a server-side component for the application).The information provided regarding Web Workers is also very nice.The highlights of the book are:* The piano game in chapter 7* The photo pad app in chapter 5* The working details of Web Worker in chapter 9All-in-all, if you're new to the subject and want to learn a good deal on this topic, this is a good book.
Amazon Verified review Amazon
Amazon Customer Nov 15, 2013
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Are you looking for a book to know more about HTML5? Do you get bored reading tons of theory and not many "hand on lab"?Then don't search more and read this book.It teach you what HTML5 brings driven by examples. You'll find out how to build classical 'todo list' from scratch, following an incremental development to enhance it with more and more features and also making it beautiful with the new CSS3 properties.But it isn't all, you will be instructed with the HTML5 canvas and APIs (File, Audio, ...) and how to make it available offline, so it allows you to craft web applications close to desktop ones.
Amazon Verified review Amazon
SuJo Oct 09, 2013
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This book really had me thinking about HTML5 in a whole new way. First I respect any coder who uses UML or Flowcharts to delegate the thinking process involved in organized code. I really like the Pop Quiz exercises to test my new found knowledge, the applications in the book are usable and not very difficult to follow.Having knowledge of JavaScript(jQuery), HTML, and CSS will help you with HTML5.A few things to mention:I really liked the photo manipulation, black and white, sepia, etc.The basic drawing application is really great, it shows you how things work and what you can expect.Canvas is really powerful, it's not limited to what this book shows it's uses. You can use it to make HTML5 Games!Don't skip anything and start from page 1, the author builds on the knowledge you learn from the start. Excellent book at a reasonable price to get you started.[...]
Amazon Verified review Amazon
E. Powell Feb 14, 2015
Full star icon Full star icon Empty star icon Empty star icon Empty star icon 2
Ordered this because it's advertised for beginners. It's not. You have to have a strong foundation in HTML and CSS to jump into this book.
Amazon Verified review Amazon

People who bought this also bought

Left arrow icon
C# 11 and .NET 7 – Modern Cross-Platform Development Fundamentals
C# 11 and .NET 7 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2022 818 pages
Full star icon 4.1 (54)
eBook
eBook
  • eBook eBook €26.98
  • Paperback Paperback €37.99
€26.98 €29.99
€37.99
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2023 828 pages
Full star icon 4.4 (74)
eBook
eBook
  • eBook eBook €31.99
  • Paperback Paperback €44.99
€31.99 €35.99
€44.99
Responsive Web Design with HTML5 and CSS
Responsive Web Design with HTML5 and CSS
Read more
Sep 2022 498 pages
Full star icon 4.5 (57)
eBook
eBook
  • eBook eBook €23.99
  • Paperback Paperback €33.99
€23.99 €26.99
€33.99
React and React Native
React and React Native
Read more
May 2022 606 pages
Full star icon 4.6 (17)
eBook
eBook
  • eBook eBook €26.98
  • Paperback Paperback €37.99
€26.98 €29.99
€37.99
Building Python Microservices with FastAPI
Building Python Microservices with FastAPI
Read more
Aug 2022 420 pages
Full star icon 3.9 (9)
eBook
eBook
  • eBook eBook €25.99
  • Paperback Paperback €35.99
€25.99 €28.99
€35.99
Right arrow icon

About the author

Profile icon Jody Gustafson
Jody Gustafson
J.M. Gustafson is a professional software engineer who started programming on a VIC-20 in the 80s and hasn't stopped since. He has a degree in Computer Science and has been working with web technologies writing enterprise applications for nearly his entire career. Currently, he spends most of his time writing web apps and services in C# and JavaScript. In his free time he enjoys spending time with his family, playing music, writing, and the outdoors. When he's not doing any of that, you can find him doing (what else?) more programming. These days he is particularly interested in writing games using HTML5 and JavaScript, many of which you can find on his website at WorldTreeSoftware.com.
Read more
See other products by Jody Gustafson
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is the digital copy I get with my Print order? Chevron down icon Chevron up icon

When you buy any Print edition of our Books, you can redeem (for free) the eBook edition of the Print Book you’ve purchased. This gives you instant access to your book when you make an order via PDF, EPUB or our online Reader experience.

What is the delivery time and cost of print book? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela
What is custom duty/charge? Chevron down icon Chevron up icon

Customs duty are charges levied on goods when they cross international borders. It is a tax that is imposed on imported goods. These duties are charged by special authorities and bodies created by local governments and are meant to protect local industries, economies, and businesses.

Do I have to pay customs charges for the print book order? Chevron down icon Chevron up icon

The orders shipped to the countries that are listed under EU27 will not bear custom charges. They are paid by Packt as part of the order.

List of EU27 countries: www.gov.uk/eu-eea:

A custom duty or localized taxes may be applicable on the shipment and would be charged by the recipient country outside of the EU27 which should be paid by the customer and these duties are not included in the shipping charges been charged on the order.

How do I know my custom duty charges? Chevron down icon Chevron up icon

The amount of duty payable varies greatly depending on the imported goods, the country of origin and several other factors like the total invoice amount or dimensions like weight, and other such criteria applicable in your country.

For example:

  • If you live in Mexico, and the declared value of your ordered items is over $ 50, for you to receive a package, you will have to pay additional import tax of 19% which will be $ 9.50 to the courier service.
  • Whereas if you live in Turkey, and the declared value of your ordered items is over € 22, for you to receive a package, you will have to pay additional import tax of 18% which will be € 3.96 to the courier service.
How can I cancel my order? Chevron down icon Chevron up icon

Cancellation Policy for Published Printed Books:

You can cancel any order within 1 hour of placing the order. Simply contact customercare@packt.com with your order details or payment transaction id. If your order has already started the shipment process, we will do our best to stop it. However, if it is already on the way to you then when you receive it, you can contact us at customercare@packt.com using the returns and refund process.

Please understand that Packt Publishing cannot provide refunds or cancel any order except for the cases described in our Return Policy (i.e. Packt Publishing agrees to replace your printed book because it arrives damaged or material defect in book), Packt Publishing will not accept returns.

What is your returns and refunds policy? Chevron down icon Chevron up icon

Return Policy:

We want you to be happy with your purchase from Packtpub.com. We will not hassle you with returning print books to us. If the print book you receive from us is incorrect, damaged, doesn't work or is unacceptably late, please contact Customer Relations Team on customercare@packt.com with the order number and issue details as explained below:

  1. If you ordered (eBook, Video or Print Book) incorrectly or accidentally, please contact Customer Relations Team on customercare@packt.com within one hour of placing the order and we will replace/refund you the item cost.
  2. Sadly, if your eBook or Video file is faulty or a fault occurs during the eBook or Video being made available to you, i.e. during download then you should contact Customer Relations Team within 14 days of purchase on customercare@packt.com who will be able to resolve this issue for you.
  3. You will have a choice of replacement or refund of the problem items.(damaged, defective or incorrect)
  4. Once Customer Care Team confirms that you will be refunded, you should receive the refund within 10 to 12 working days.
  5. If you are only requesting a refund of one book from a multiple order, then we will refund you the appropriate single item.
  6. Where the items were shipped under a free shipping offer, there will be no shipping costs to refund.

On the off chance your printed book arrives damaged, with book material defect, contact our Customer Relation Team on customercare@packt.com within 14 days of receipt of the book with appropriate evidence of damage and we will work with you to secure a replacement copy, if necessary. Please note that each printed book you order from us is individually made by Packt's professional book-printing partner which is on a print-on-demand basis.

What tax is charged? Chevron down icon Chevron up icon

Currently, no tax is charged on the purchase of any print book (subject to change based on the laws and regulations). A localized VAT fee is charged only to our European and UK customers on eBooks, Video and subscriptions that they buy. GST is charged to Indian customers for eBooks and video purchases.

What payment methods can I use? Chevron down icon Chevron up icon

You can pay with the following card types:

  1. Visa Debit
  2. Visa Credit
  3. MasterCard
  4. PayPal
What is the delivery time and cost of print books? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela