HTML5 Web Application Beginner's Guide - بهروز منصوری

PrefaceThe time to start using HTML5 is now. HTML5 provides a complete application developmentframework for writing full featured applications that run in the web browser. Even thoughthe HTML5 specification hasn't been fully completed yet, the most popular features arealready widely supported by nearly every modern browser running on devices, fromdesktops to tablets to smartphones. That means you can write an application onceand 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 thenlearn about HTML5, CSS3, and JavaScript by building real working applications. This is not areference book. We will keep the theory to a minimum and hands-on coding to a maximum.Just a few years ago, writing full-featured applications in the browser required othertechnologies such as Flash or Java Applets that ran as browser plugins. Like most people,I had only used JavaScript to write simple client validation scripts. I didn't even think it waspossible to write real applications using JavaScript. That all started to change when a coupleof things happened.Firstly, I discovered jQuery. Here was a library that made writing JavaScript a whole loteasier by abstracting away browser idiosyncrasies and making it very easy to manipulate theelements of a web page. Plus it could help us perform some cool actions, such as animatingelements. Then about three years ago I found out about HTML5 while looking for a way todraw graphics primitives directly onto a web page. Since then I've watched HTML5 developinto a complete framework, capable of being used to write real applications without plugins.This book is the culmination of those past three years of writing JavaScript nearly every day,learning what works and what doesn't. A technical brain dump, if you will. The objective wasto write the book that I would have liked to read when I started out.The future of HTML5 web application development looks bright. All of the big hitters inthe world of web browser development are putting their full support behind HTML5 andJavaScript. HTML5 is the future of web application development!

PrefaceWhat this book coversChapter 1, The Task at Hand, will teach you the basic components of a JavaScript applicationby building a template that can be used to start writing new applications. Then we willcreate a tasklist application where we will learn how to manipulate the DOM and howto 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 addprofessional-looking styles to your web applications including rounded corners,shadows, and gradients. We will also learn how to use CSS sprites to make loadingimages more efficient.Chapter 3, The Devil is in the Details, will teach you about the new HTML5 form input typesby adding a details section to the tasklist application. We will also learn about custom dataattributes and learn how to use them to bind data in the view to the model.Chapter 4, A Blank Canvas, will show how to use the new Canvas element and API to drawdirectly onto a web page by creating a drawing application. We will also learn how to handletouch events from touch-screen devices.Chapter 5, Not So Blank Canvas, will continue teaching about the canvas by showing you howto export images from a canvas and load images into a canvas using the new File API. Thenwe will get down to the pixel level and learn how to directly manipulate canvas image data.Chapter 6, Piano Man, will teach you how to use the Audio element and API to play soundsin a web page. We will create a virtual piano that plays sounds when the keys are clicked.Chapter 7, Piano Hero, will take the virtual piano from the previous chapter and turn it intoa game where the player must play the correct notes of a song at the correct time to getpoints. In the process we will learn about using JavaScript timers and animating elements.Chapter 8, A Change in the Weather, will show you how to get data from servers and talk toweb services using Ajax. We will build a weather widget that gets the user's location usingthe 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 performlong running processes in a separate thread to make your applications more responsive. Wewill create an application that draws Mandelbrot fractals onto a canvas using a web worker.Chapter 10, Releasing an App into the Wild, will teach you how to use a JavaScriptcompressor to combine and compress your application's JavaScript files before releasing it tothe world. We will also learn how to create applications that can be used offline by using theHTML5 Application Cache.[2]

PrefaceWhat you need for this bookThe great thing about HTML5 is that there is no cost to use it. You don't need any specialtools or licenses to develop web applications. However, using a good code editor willhelp you a lot, especially as you get started. There's nothing like autosuggest to help youremember JavaScript functions, element names, and styling options. And syntax highlightingis essential for making it easier to read code.That said, there are a few source code editors that I can suggest if you don't already haveone. Notepad is a free editor with JavaScript, HTML, and CSS syntax highlighting and somebasic autosuggest, without a lot of overhead. I used it to write all of the code in this book.On the higher end, Microsoft Visual Studio provides very good autosuggest features but withmore overhead than a basic text editor. Another great option is NetBeans, an open sourceIDE written in Java with good web development support.You will also need a web browser with good HTML5 support and developer tools. The latestversions of most browsers support the HTML5 features used in this book. The browser youuse should depend on which has the developer tools you like most. I use Chrome because ithas great developer tools built-in. Firefox with the Firebug plugin installed is also very good.For this book I use Chrome as the browser of choice. Internet Explorer 9 doesn't completelysupport all of the HTML5 features we will be learning and the developer tools are not asgood 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 timeyou 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 the places in thisbook where that is the case.Who this book is forThis book is for the programmer who has experience in other languages and wants to startwriting HTML5 web applications. You should have some basic knowledge of HTML, CSS, andJavaScript. For example, you should know how to write simple HTML documents. You shouldalso know the basics of using CSS selectors as they are important to using jQuery. You donot need to know how to use jQuery as this book will briefly cover the basics, but it wouldbe helpful. As long as you can understand and write simple JavaScript code, that should besufficient to get you going. We will start off with the basics and work our way up using lotsof examples.[3]

PrefaceConventionsIn this book, you will find several headings appearing frequently.To give clear instructions of how to complete a procedure or task, we use:Time for action – heading1.2.3.Action 1Action 2Action 3Instructions often need some extra explanation so that they make sense, so they arefollowed with:What just happened?This heading explains the working of tasks or instructions that you have just completed.You will also find some other learning aids in the book, including:Pop quiz – headingThese are short multiple-choice questions intended to help you test your own understanding.Have a go hero – headingThese practical challenges give you ideas for experimenting with what you have learned.You will also find a number of styles of text that distinguish between different kinds ofinformation. Here are some examples of these styles, and an explanation of their meaning.Code words in text, database table names, folder names, filenames, file extensions,pathnames, dummy URLs, user input, and Twitter handles are shown as follows:"Next, we'll add a drawText() method to the Canvas2D object."A block of code is set as follows:this.drawText function(text, point, fill){if (fill){context.fillText(text, point.x, point.y);}[4]

Prefaceelse{context.strokeText(text, point.x, point.y);}};When we wish to draw your attention to a particular part of a code block, the relevant linesor items are set in bold:switch (action.tool){// code not shown.case "text":canvas2d.drawText(action.text, action.points[0],action.fill);break;}New terms and important words are shown in bold. Words that you see on the screen, inmenus or dialog boxes for example, appear in the text like this: "When the Save button isclicked, it will get the data URL and then open it."Warnings or important notes appear in a box like this.Tips and tricks appear like this.Reader feedbackFeedback from our readers is always welcome. Let us know what you think about thisbook—what you liked or may have disliked. Reader feedback is important for us to developtitles that you really get the most out of.To send us general feedback, simply send an e-mail to feedback@packtpub.com,and mention the book title through the subject of your message.If there is a topic that you have expertise in and you are interested in either writingor contributing to a book, see our author guide on www.packtpub.com/authors.[5]

PrefaceCustomer supportNow that you are the proud owner of a Packt book, we have a number of things to help youto get the most from your purchase.Downloading the example codeYou can download the example code files for all Packt books you have purchased from youraccount at http://www.packtpub.com. If you purchased this book elsewhere, you canvisit http://www.packtpub.com/support and register to have the files e-mailed directlyto you.ErrataAlthough we have taken every care to ensure the accuracy of our content, mistakes dohappen. If you find a mistake in one of our books—maybe a mistake in the text or thecode—we would be grateful if you would report this to us. By doing so, you can save otherreaders from frustration and help us improve subsequent versions of this book. If you findany errata, please report them by visiting http://www.packtpub.com/submit-errata,selecting your book, clicking on the errata submission form link, and entering the details ofyour errata. Once your errata are verified, your submission will be accepted and the erratawill be uploaded to our website, or added to any list of existing errata, under the Erratasection of that title.PiracyPiracy of copyright material on the Internet is an ongoing problem across all media. At Packt,we take the protection of our copyright and licenses very seriously. If you come across anyillegal copies of our works, in any form, on the Internet, please provide us with the locationaddress or website name immediately so that we can pursue a remedy.Please contact us at copyright@packtpub.com with a link to the suspectedpirated material.We appreciate your help in protecting our authors, and our ability to bring youvaluable content.QuestionsYou can contact us at questions@packtpub.com if you are having a problem with anyaspect of the book, and we will do our best to address it.[6]

1The Task at Hand"I long to accomplish a great and noble task, but it is my chief duty to accomplishsmall tasks as if they were great and noble."– Helen KellerIn this first chapter we will learn the basics of creating an HTML5 application.We will create an application template to be used as a starting point forbuilding new applications quickly and with minimal effort. Then, we'll use thattemplate to create a simple tasklist application. Along the way we will discoverhow 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 API.In this chapter we will learn: The three basic components of an HTML5 application, HTML, CSS, and JavaScript Some jQuery basics for those of you unfamiliar with the JavaScript library How to initialize an application and handle user interactions How to manipulate the DOM to add, remove, change, and move elements How to create reusable HTML templates How to use the HTML5 Web Storage API to store and retrieve an application's state

The Task at HandThe components of an HTML5 applicationBefore we get started building our first application, we need to learn some HTML5 applicationbasics. 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 beforewe can start working on the fun part.Web applications are pretty good when it comes to scaffolding out a project. You could juststart from scratch every time you begin a new application. But as you write more and moreapplications, you begin to notice that you are doing the same basic things over and overevery time you get started, so it makes sense to create an application template to get startedup quickly without reinventing the wheel every time.To understand how HTML5 applications are built, we will start from scratch and build ourown application template which we can use when creating new applications. We will usethis template as a base for all of the applications that we build throughout this book.Every web application starts with three components: HTML, CSS, and JavaScript. You can putthem all in one file, and that might be acceptable for a very simple application, but we arelearning how to build real applications here. So we will start by creating three files, one foreach component, and placing them in a folder named template. They will be named app.html, app.css, and app.js.The following diagram is an interpretation of an HTML5 application and its components.Our application is built upon HTML, CSS, and JavaScript. Those in turn are built on topof CSS3 and the HTML5 framework, which consists of new markup elements andJavaScript APIs.[8]

Chapter 1HTML5 nsformsCanvasDOCTYPEMultimedia canvas ColorWeb Storage audio AnimationsText EffectsFileAPI video Drag-and-Drop section Web FontsApp Cache header Backgrounds footer Gradients article BordersGeolocationLet's look at the folder structure for our applications. We will put all of the files that wecreate at the root of our application's folder. We will also add a folder named lib whichcontains any third-party JavaScript libraries our application may need. Since we will alwaysuse the jQuery library, we will put a copy of it in there. If there are any other assets, such asimages or audio files, we will put them in the images and audio folders respectively:[9]

The Task at HandWe could just reference the jQuery library from an online content deliverynetwork (CDN), but that requires you to always have an Internet connection.Take it from me, you never know when you are going to end up some placewithout a connection and find out you can't get any work done.Time for action – creating the HTML fileThe first component we will build is our base HTML file, app.html. We will keep our HTMLas clean as possible. It should contain only markup. There should not be any styling orblocks of script mixed in it. Keeping markup, style, and behavior separated will make yourapplications easier to debug and maintain. For example, if there is a problem with the waysomething looks, we will know the problem is in the CSS file and not the JavaScript file.Another benefit is that you can completely restyle the user interface of your application bychanging the CSS without ever touching its functionality.Here is the markup for our base HTML file. All it does is include our CSS and JavaScript aswell as the jQuery library, and defines a simple body structure that most of our applicationswill use. It is a good place to start for the applications we will be writing. !DOCTYPE html html head title App /title link href "app.css" rel "StyleSheet" / script src "lib/jquery-1.8.1.min.js" /script script src "app.js" /script /head body div id "app" header App /header div id "main" /div footer /footer /div /body /html Downloading the example codeYou can download the example code files for all Packt books you havepurchased from your account at http://www.packtpub.com.If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-maileddirectly to you.[ 10 ]

Chapter 1One of the major differences between HTML5 markup and previous versions of HTML isthe document type declaration this has been greatly simplified. As you may recall, doctypesbefore HTML5 were very verbose and impossible for mere mortals to remember. Theylooked something like this: !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd" Now meet the new and improved HTML5 document type declaration. It's simple, it's elegant,and best of all it's easy to remember: !DOCTYPE html Another difference you may notice are the header and footer elements. These arenew semantic elements in HTML5 that are essentially the same as div elements. HTML5actually has a whole array of new semantic elements that are designed to give HTML markupmore meaning than just wrapping everything in a div tag.Since we are building applications here and not writing content pages, we won't be focusingon these semantic elements too much. Most of the time we will use the plain old div elements. But just to familiarize you with them, here is an overview of some of the mostuseful new semantic elements: article : Defines an article in the document aside : Defines content aside from the other page content footer : Defines the footer for a section in the document header : Defines the header for a section in the document nav : Contains page navigation links section : Defines a section in a documentA few elements and attributes that existed in previous versions of HTML are now notpresent in HTML5. These are mostly elements having to do with layout and fonts, including big , center , font , strike , and u . Obsolete elements such as frame and applet are also out.Now let's take a look at the contents of the body element in our markup. First there is a div id "app" element. This will wrap the application's entire markup. Other markup, suchas site navigation or anything else not related to the application, can go outside this element.[ 11 ]

The Task at HandInside the app element we have three more elements. Here we use a couple of the newsemantic elements. First we have a header element in our application that will containthe name of the application, such as a title bar (not to be confused with the title element in the document head section). The div id "main" element is where themarkup for the main part of the application will go. We add a footer element below itthat will be used like a status bar to display the status of the application.Time for action – creating the CSS fileNext we'll create our base CSS file named app.css. This will have all of the basic styling thatwill be used by our applications,

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 completed yet, the most popular features are already widely supported by nearly every modern browser running on devices, from