www.it-ebooks.info HTML5 Web Application Development By Example Beginner's guide Learn how to build rich, interacve web applicaons 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 transmied in any form or by any means, without the prior wrien permission of the publisher, except in the case of brief quotaons embedded in crical arcles or reviews. Every eort has been made in the preparaon of this book to ensure the accuracy of the informaon presented. However, the informaon 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 informaon about all of the companies and products menoned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this informaon. First published: June 2013 Producon 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 Faohi (faizfattohi@gmail.com) www.it-ebooks.info Credits Author J.M. Gustafson Reviewers Chad Adams Dale Cruse Acquision Editor Marn Bell Lead Technical Editor Anila Vincent Technical Editors Dominic Pereira Madhuri Das Kir Pujari Joyslita D'souza Veronica Fernandes Project Coordinator Rahul Dixit Proofreader Samantha Lyon Indexer Hemangini Bari Graphics Ronak Dhruv Producon Coordinator Melwyn D'sa Cover Work Melwyn D'sa www.it-ebooks.info About the Author J.M. Gustafson is a professional soware 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 wring enterprise applicaons for nearly his enre career. Currently, he spends most of his me wring web apps and services in C# and JavaScript. In his free me he enjoys spending me with his family, playing music, wring, and the outdoors. When he's not doing any of that, you can nd him doing (what else?) more programming. These days he is parcularly interested in wring games using HTML5 and JavaScript, many of which you can nd 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 me to spend wring 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 publicaon. www.it-ebooks.info About the Reviewer Dale Cruse is the author of HTML5 Mulmedia 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 Twier at @dalecruse. www.it-ebooks.info www.PacktPub.com Support les, eBooks, discount offers and more You might want to visit www.PacktPub.com for support les and downloads related to your book. Did you know that Packt oers eBook versions of every book published, with PDF and ePub les available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entled to a discount on the eBook copy. Get in touch with us at service@packtpub.com for more details. At www.PacktPub.com, you can also read a collecon of free technical arcles, sign up for a range of free newsleers and receive exclusive discounts and oers on Packt books and eBooks. http://PacktLib.PacktPub.com Do you need instant soluons to your IT quesons? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's enre 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 enrely free books. Simply use your login credenals for immediate access. www.it-ebooks.info Table of Contents Preface 1 Chapter 1: The Task at Hand 7 The components of an HTML5 applicaon 8 Time for acon – creang the HTML le 10 Time for acon – creang the CSS le 12 Time for acon – creang the JavaScript le 13 The dollar sign idener 16 Creang our rst applicaon 17 Time for acon – creang a tasklist 18 Time for acon – removing a task from the list 22 Time for acon – moving tasks within the list 22 HTML templates 23 Time for acon – implemenng a template 23 Time for acon – eding a task in the list 26 Saving the state of the applicaon 28 Time for acon – creang a localStorage wrapper 30 Time for acon – storing the tasklist 33 Time for acon – 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 [ ii ] Time for acon – styles in acon 44 Backgrounds 46 Linear gradients 47 Radial gradients 48 Background images 48 CSS sprites 49 Time for acon – adding a gradient and buon images 51 Transions 53 Transforms 54 Time for acon – eects in acon 55 Dynamic stylesheets 58 Time for acon – adding a theme selector 58 Filling the window 61 Time for acon – expanding the applicaon 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 acon – adding task details 69 Time for acon – hiding task details 72 Custom data aributes 75 Data binding with custom aributes 76 Time for acon – building a data model 76 Time for acon – implemenng the bindings 80 Time for acon – loading the task list 83 Queuing up changes 84 Time for acon – delaying the saves 84 Summary 86 www.it-ebooks.info Table of Contents [ iii ] Chapter 4: A Blank Canvas 87 HTML5 canvas 87 Geng a context 88 Canvas basics 88 Clearing the canvas 89 Context properes 89 Canvas pad 90 Time for acon – creang a canvas pad 90 Time for acon – showing the coordinates 91 Drawing lines 93 Paths and strokes 93 Time for acon – using the mouse to draw 95 Changing context properes 99 Time for acon – adding context properes 99 Creang a toolbar 100 Time for acon – creang a toolbar 100 Time for acon – implemenng a reusable toolbar 104 Adding a toolbar 107 Time for acon – adding the toolbar object 107 Time for acon – inializing menu items 108 Adding drawing acons 109 Time for acon – creang drawing acons 110 Time for acon – saving and restoring 112 Adding drawing tools 113 Time for acon – adding a line tool 113 Drawing rectangles 116 Time for acon – adding a rectangle tool 116 Arcs and circles 119 Time for acon – adding a circle tool 121 Summary 123 Chapter 5: Not So Blank Canvas 125 Drawing text 126 Time for acon – adding a text tool 126 Transformaons 129 Time for acon – adding an Ellipse tool 130 Time for acon – exporng an image 131 Handling touch events 132 Time for acon – adding touch event handlers 133 www.it-ebooks.info [...]... started out The future of HTML5 web application development looks bright All of the big hitters in the world of web browser development are putting their full support behind HTML5 and JavaScript HTML5 is the future of web application development! www.it-ebooks.info Preface What this book covers Chapter 1, The Task at Hand, will teach you the basic components of a JavaScript application by building a template... Task at Hand The components of an HTML5 application Before we get started building our first application, we need to learn some HTML5 application basics HTML5 applications are like applications written in any other programming language There is a certain amount of infrastructure and plumbing that needs to be put in place before we can start working on the fun part Web applications are pretty good when... supported by nearly every modern browser running on devices, from desktops to tablets to smartphones That means you can write an application once and have it run on nearly any device If you are looking to start writing HTML5 web applications but don't know where to start, then this book is for you We will start with the basics of building a web application and then learn about HTML5, CSS3, and JavaScript by. .. support all of the HTML5 features we will be learning and the developer tools are not as good as the others, so I would stay away from using it for development The one other thing you may need is a web server such as IIS or Apache Most of the time you can open your web application right from the filesystem when in development However, some HTML5 features will only work through a web server I have noted... creating an HTML5 application We will create an application template to be used as a starting point for building new applications quickly and with minimal effort Then, we'll use that template to create a simple tasklist application Along the way we will discover how to interact with the user and manipulate the application' s user interface We will also learn about our first new HTML5 feature, the Web Storage... 8, A Change in the Weather Chapter 9, Web Workers Unite Chapter 10, Releasing an App into the Wild Index 249 249 249 250 250 250 250 251 251 251 253 [ vi ] www.it-ebooks.info Preface The time to start using HTML5 is now HTML5 provides a complete application development framework for writing full featured applications that run in the web browser Even though the HTML5 specification hasn't been fully... interpretation of an HTML5 application and its components Our application is built upon HTML, CSS, and JavaScript Those in turn are built on top of CSS3 and the HTML5 framework, which consists of new markup elements and JavaScript APIs [8] www.it-ebooks.info Chapter 1 HTML5 Application JavaScript HTML CSS HTML5 APIs Markup CSS3 Transforms Canvas DOCTYPE Multimedia Color Web Storage ... action – getting JSON data HTML5 Geolocation API Time for action – getting geolocation data Using web services Weather Underground Cross-site scripting and JSONP Time for action – calling the weather service Summary Chapter 9: Web Workers Unite 204 204 205 207 209 211 213 214 215 215 216 220 221 Web workers Spawning a web worker Implementing a web worker Time for action – using a web worker The Mandelbrot... building a template that can be used to start writing new applications Then we will create a tasklist application where we will learn how to manipulate the DOM and how to use HTML5 Web Storage to save the state of the application Chapter 2, Let's Get Stylish, will show how to use the new CSS3 features to add professional-looking styles to your web applications including rounded corners, shadows, and gradients... servers and talk to web services using Ajax We will build a weather widget that gets the user's location using the Geolocation API and displays their local weather report with data from a web service Chapter 9, Web Workers Unite, will teach you how to use HTML5 web workers to perform long running processes in a separate thread to make your applications more responsive We will create an application that . www.it-ebooks.info HTML5 Web Application Development By Example Beginner's guide Learn how to build rich, interacve web applicaons from the ground up using HTML5, CSS3, and jQuery J.M out. The future of HTML5 web applicaon development looks bright. All of the big hiers in the world of web browser development are pung their full support behind HTML5 and JavaScript. HTML5 is the. 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.