HTML5 Web Application Development By Example: Learn how to build rich, interactive web applications from the ground up using HTML5, CSS3, and jQuery

277 Pages·2013·3.333 MB·English

by  J.M. Gustafson

www.it-ebooks.info
HTML5 Web Application
Development By Example
Beginner's guide
Learn how to build rich, interactive web applications
from the ground up using HTML5, CSS3, and jQuery
J.M. Gustafson
BIRMINGHAM - MUMBAI
www.it-ebooks.info
HTML5 Web Application Development By Example
Beginner's guide
Copyright © 2013 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system,
or transmitted in any form or by any means, without the prior written permission of the
publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the
information presented. However, the information contained in this book is sold without
warranty, either express or implied. Neither the author, nor Packt Publishing, and its
dealers and distributors will be held liable for any damages caused or alleged to be
caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the
companies and products mentioned in this book by the appropriate use of capitals.
However, Packt Publishing cannot guarantee the accuracy of this information.
First published: June 2013
Production Reference: 1170613
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-84969-594-7
www.packtpub.com
Cover Image by Faiz Fattohi ([email protected])
www.it-ebooks.info
Credits
Author Project Coordinator
J.M. Gustafson Rahul Dixit
Reviewers Proofreader
Chad Adams Samantha Lyon
Dale Cruse
Indexer
Acquisition Editor Hemangini Bari
Martin Bell
Graphics
Lead Technical Editor Ronak Dhruv
Anila Vincent
Production Coordinator
Technical Editors Melwyn D'sa
Dominic Pereira
Madhuri Das Cover Work
Melwyn D'sa
Kirti Pujari
Joyslita D'souza
Veronica Fernandes
www.it-ebooks.info
About the Author
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.
I would like to thank my good friends Pat Calahan and Thomas Fonseca for
reviewing my chapters and giving me great feedback and encouragement.
Thanks to my family for giving me the time to spend writing this book.
Thanks also to the editors at Packt for giving me the opportunity to write
this book and guiding me along the path to publication.
www.it-ebooks.info
About the Reviewer
Dale Cruse is the author of HTML5 Multimedia Development Cookbook (Packt Publishing)
and a technical editor of several other HTML5 books. He started his career in 1995 as a U.S.
Army photojournalist. Since switching to purely digital at CBSNews.com, he's created web
and mobile experiences for some of the most well known clients in the world, including 20th
Century Fox, Bloomingdale's, and MINI Cooper. Currently, he juggles being both a senior
developer at Allen & Gerritsen and being a New York Yankees fan in South Boston.
An in-demand speaker, you can't get him to shut up on Twitter at @dalecruse.
www.it-ebooks.info
www.PacktPub.com
Support files, eBooks, discount offers and more
You might want to visit www.PacktPub.com for support files and downloads related
to your book.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub
files available? You can upgrade to the eBook version at www.PacktPub.com and as
a print book customer, you are entitled to a discount on the eBook copy. Get in touch with
us at [email protected] for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a
range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
http://PacktLib.PacktPub.com
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library.
Here, you can access, read and search across Packt's entire library of books.
Why Subscribe?
‹ Fully searchable across every book published by Packt
‹ Copy and paste, print and bookmark content
‹ On demand and accessible via web browser
Free Access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib
today and view nine entirely free books. Simply use your login credentials for immediate access.
www.it-ebooks.info
Table of Contents
Preface 1
Chapter 1: The Task at Hand 7
The components of an HTML5 application 8
Time for action – creating the HTML file 10
Time for action – creating the CSS file 12
Time for action – creating the JavaScript file 13
The dollar sign identifier 16
Creating our first application 17
Time for action – creating a tasklist 18
Time for action – removing a task from the list 22
Time for action – moving tasks within the list 22
HTML templates 23
Time for action – implementing a template 23
Time for action – editing a task in the list 26
Saving the state of the application 28
Time for action – creating a localStorage wrapper 30
Time for action – storing the tasklist 33
Time for action – loading the tasklist 35
Summary 37
Chapter 2: Let's Get Stylish 39
CSS3 overview 40
CSS3 colors 40
Rounded corners 41
Shadows 42
Box shadows 43
Text shadows 44
www.it-ebooks.info
Table of Contents
Time for action – styles in action 44
Backgrounds 46
Linear gradients 47
Radial gradients 48
Background images 48
CSS sprites 49
Time for action – adding a gradient and button images 51
Transitions 53
Transforms 54
Time for action – effects in action 55
Dynamic stylesheets 58
Time for action – adding a theme selector 58
Filling the window 61
Time for action – expanding the application 61
Summary 63
Chapter 3: The Devil is in the Details 65
HTML5 input types 66
Color 66
Date 66
Email 67
Number 67
Range 68
Time 68
URL 68
Datalist 68
Autofocus 69
Task details 69
Time for action – adding task details 69
Time for action – hiding task details 72
Custom data attributes 75
Data binding with custom attributes 76
Time for action – building a data model 76
Time for action – implementing the bindings 80
Time for action – loading the task list 83
Queuing up changes 84
Time for action – delaying the saves 84
Summary 86
[ ii ]
www.it-ebooks.info
Table of Contents
Chapter 4: A Blank Canvas 87
HTML5 canvas 87
Getting a context 88
Canvas basics 88
Clearing the canvas 89
Context properties 89
Canvas pad 90
Time for action – creating a canvas pad 90
Time for action – showing the coordinates 91
Drawing lines 93
Paths and strokes 93
Time for action – using the mouse to draw 95
Changing context properties 99
Time for action – adding context properties 99
Creating a toolbar 100
Time for action – creating a toolbar 100
Time for action – implementing a reusable toolbar 104
Adding a toolbar 107
Time for action – adding the toolbar object 107
Time for action – initializing menu items 108
Adding drawing actions 109
Time for action – creating drawing actions 110
Time for action – saving and restoring 112
Adding drawing tools 113
Time for action – adding a line tool 113
Drawing rectangles 116
Time for action – adding a rectangle tool 116
Arcs and circles 119
Time for action – adding a circle tool 121
Summary 123
Chapter 5: Not So Blank Canvas 125
Drawing text 126
Time for action – adding a text tool 126
Transformations 129
Time for action – adding an Ellipse tool 130
Time for action – exporting an image 131
Handling touch events 132
Time for action – adding touch event handlers 133
[ iii ]
www.it-ebooks.info