www.it-ebooks.info HTML5 Web Application Development By Example Beginner's guide Learn how to build rich, interacve web applicaons 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 transmied in any form or by any means, without the prior wrien permission of the publisher, except in the case of brief quotaons embedded in crical arcles or reviews. Every eort has been made in the preparaon of this book to ensure the accuracy of the informaon presented. However, the informaon 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 informaon about all of the companies and products menoned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this informaon. First published: June 2013 Producon 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 Faohi (faizfattohi@gmail.com) www.it-ebooks.info Credits Author J.M. Gustafson Reviewers Chad Adams Dale Cruse Acquision Editor Marn 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 Producon Coordinator Melwyn D'sa Cover Work Melwyn D'sa www.it-ebooks.info About the Author J.M. Gustafson is a professional soware 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 wring enterprise applicaons for nearly his enre career. Currently, he spends most of his me wring web apps and services in C# and JavaScript. In his free me he enjoys spending me with his family, playing music, wring, and the outdoors. When he's not doing any of that, you can nd him doing (what else?) more programming. These days he is parcularly interested in wring 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 wring 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 publicaon. www.it-ebooks.info About the Reviewer Dale Cruse is the author of HTML5 Mulmedia 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 Twier 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 oers 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 entled 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 collecon of free technical arcles, sign up for a range of free newsleers and receive exclusive discounts and oers on Packt books and eBooks. http://PacktLib.PacktPub.com Do you need instant soluons to your IT quesons? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's enre 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 enrely free books. Simply use your login credenals for immediate access. www.it-ebooks.info Table of Contents Preface 1 Chapter 1: The Task at Hand 7 The components of an HTML5 applicaon 8 Time for acon – creang the HTML le 10 Time for acon – creang the CSS le 12 Time for acon – creang the JavaScript le 13 The dollar sign idener 16 Creang our rst applicaon 17 Time for acon – creang a tasklist 18 Time for acon – removing a task from the list 22 Time for acon – moving tasks within the list 22 HTML templates 23 Time for acon – implemenng a template 23 Time for acon – eding a task in the list 26 Saving the state of the applicaon 28 Time for acon – creang a localStorage wrapper 30 Time for acon – storing the tasklist 33 Time for acon – 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 acon – styles in acon 44 Backgrounds 46 Linear gradients 47 Radial gradients 48 Background images 48 CSS sprites 49 Time for acon – adding a gradient and buon images 51 Transions 53 Transforms 54 Time for acon – eects in acon 55 Dynamic stylesheets 58 Time for acon – adding a theme selector 58 Filling the window 61 Time for acon – expanding the applicaon 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 acon – adding task details 69 Time for acon – hiding task details 72 Custom data aributes 75 Data binding with custom aributes 76 Time for acon – building a data model 76 Time for acon – implemenng the bindings 80 Time for acon – loading the task list 83 Queuing up changes 84 Time for acon – delaying the saves 84 Summary 86 www.it-ebooks.info Table of Contents [ iii ] Chapter 4: A Blank Canvas 87 HTML5 canvas 87 Geng a context 88 Canvas basics 88 Clearing the canvas 89 Context properes 89 Canvas pad 90 Time for acon – creang a canvas pad 90 Time for acon – showing the coordinates 91 Drawing lines 93 Paths and strokes 93 Time for acon – using the mouse to draw 95 Changing context properes 99 Time for acon – adding context properes 99 Creang a toolbar 100 Time for acon – creang a toolbar 100 Time for acon – implemenng a reusable toolbar 104 Adding a toolbar 107 Time for acon – adding the toolbar object 107 Time for acon – inializing menu items 108 Adding drawing acons 109 Time for acon – creang drawing acons 110 Time for acon – saving and restoring 112 Adding drawing tools 113 Time for acon – adding a line tool 113 Drawing rectangles 116 Time for acon – adding a rectangle tool 116 Arcs and circles 119 Time for acon – adding a circle tool 121 Summary 123 Chapter 5: Not So Blank Canvas 125 Drawing text 126 Time for acon – adding a text tool 126 Transformaons 129 Time for acon – adding an Ellipse tool 130 Time for acon – exporng an image 131 Handling touch events 132 Time for acon – 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, interacve web applicaons from the ground up using HTML5, CSS3, and jQuery J.M out. The future of HTML5 web applicaon development looks bright. All of the big hiers in the world of web browser development are pung 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.