html5 iphone web application development

HTML5 iPhone Web Application

Development

An introduction to web-application development for

mobile within the iOS Safari browser

Alvin Crespo

BIRMINGHAM - MUMBAI

HTML5 iPhone Web Application Development

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: May 2013

Production Reference: 1170513

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-84969-102-4

www.packtpub.com

Cover Image by Asher Wishkerman ([email protected])

Credits

Author

Alvin Crespo

Reviewers

Dale Cruse

Faraz K. Kelhini

Acquisition Editor

Joanne Fitzpatrick

Lead Technical Editor

Neeshma Ramakrishnan

Technical Editors

Amit Ramadas

Neha Shanbhag

Project Coordinator

Arshad Sopariwala

Proofreaders

Paul Hindle

Chris Smith

Indexer

Rekha Nair

Graphics

Ronak Dhruv

Production Coordinator

Conidon Miranda

Cover Work

Conidon Miranda

About the Author

Alvin Crespo is a creative technologist strongly focused on delivering compelling

user experiences through the use of frontend technologies. Utilizing the latest industry

standards, he strives to move the Web forward promoting open source technologies.

Having worked in startup and agency environments, he has helped build and architect

complex applications for both medium and large-sized companies.

First and foremost, I would like to thank my lovely wife, Janice

Smith, for helping me produce this book. This has only been possible

through the love and support you have given me. To my friends and

family who have been there throughout the process, my love and

endless thanks cannot express how awesome you all are.

About the Reviewers

Dale Cruse is the co-author of HTML5 Multimedia Development Cookbook by Packt

Publishing and the technical editor of several other HTML5 books. He started his

career in 1995 as a U.S. Army photojournalist. Since making the switch 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.

Faraz K. Kelhini has more than a decade of software development experience in

a broad range of disciplines. His core expertise and interest lies in web technologies,

including PHP (as well as frameworks like Symfony and Zend framework), Python,

HTML5, CSS3, JavaScript (as well as frameworks like jQuery and MooTools), and

Linux/Unix operating systems. He is a professional consultant, editor, and writer

who specializes in technical presentations, workshops, online content publishing, and

knowledge transfer. Faraz has more than 100 articles to his credit within prominent

publications such as Developer.com, .net magazine, and Smashing Magazine.

When not pursuing a new technology or idea, Faraz loves practicing his DSLR

photography skills. More information on his related writings, presentations,

and useful tools can be found at http://eloux.com.

I would like to thank you, the reader; I hope that you enjoy this book

and produce a fantastic HTML5 iPhone App of your own. I look

forward to hearing your feedback and seeing what you come up

with! My thanks also go to my entire friends and family.

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 service@

packtpub.com 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.

TM

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.

Table of Contents

Preface 1

Chapter 1: Application Architecture 7

Implementing the HTML5 Mobile Boilerplate 8

Downloading and installing the HTML5 Mobile Boilerplate 8

Integrating the build script 9

Creating our application framework 9

Modifying the boilerplate 10

Customizing our markup 10

Customizing our framework 14

Creating semantic markup 18

Creating the header 18

Creating the footer 19

Clearing up section 20

Structuring our stylesheets 20

Global styling 21

Defining our global fonts 21

Our page layout 22

Using content with :before and :after 23

Styling our navigation 23

Responsive design principles 25

Media queries to the rescue 25

Responsive images 26

Fluid images 26

Establishing our JavaScript architecture 27

Structuring our app functionality 28

Namespacing our application 28

Immediately Invoked Function Expressions 28

Table of Contents

[ ii

]

Use strict 29

Default options 29

Defining the constructor 30

The prototype 30

Defining public methods 32

Returning our constructor/function 33

Integrating a custom module template 34

Including our scripts 35

Initializing our framework 35

Routing to a mobile site 36

Redirecting via PHP 37

Redirecting via htaccess 37

Home screen icons 37

Introducing our build script 38

Configuring our build script 38

Minifying and concatenating scripts 38

Minifying and concatenating styles 39

Creating multiple environments 39

Navigating our directories 40

Building our project 40

Summary 42

Chapter 2: Integrating HTML5 Video 43

Configuring the server 43

Video formats 44

Video format directives 44

A simple HTML5 video 44

Single video format 45

Supporting multiple formats 45

Listening to HTML5 video events 46

Video markup review 47

Attaching video events 47

Initializing our video 51

Creating a JavaScript video library 52

Centralizing our events 53

Scope in JavaScript 54

Exposing functionality 55

Integrating callbacks 57

Extending callbacks 59

Using callbacks 59

Tying it all up 61

Customizing HTML5 video controls 64

Summary 70

Table of Contents

[ iii ]

Chapter 3: HTML5 Audio 71

Server configuration 71

Audio formats 72

Audio format directives 72

Simple HTML5 audio integration 73

MediaElement abstraction 74

Creating App.MediaElement.js 74

Initializing App.MediaElement.js 76

Extending the MediaElement API for audio 77

The base template 77

Creating an instance of MediaElement 78

Finding and caching an audio element 78

Initializing MediaElement 78

Dynamic audio player 79

The select element 79

Switching audio tracks 81

The change event listener 81

The change event handler 82

Refactoring our code 84

Initializing our Audio class 85

Customizing HTML5 audio controls 86

Creating custom media controls 86

Adding interactivity to our customized controls 88

Sequential playback 88

The markup 89

The JavaScript 90

iOS considerations 93

Volume 93

Autoplay 93

Simultaneous playback 94

Summary 95

Chapter 4: Touch and Gestures 97

Simplifying the navigation 98

Navigation markup and styling 98

The basic template 98

Styling a select component 99

Navigation interactivity 99

The basic template 100

Caching our navigation 100

Listening and handling the change event 100

Initializing the navigation 101

Table of Contents

[ iv

]

Touch and Gesture events 102

Touch events 102

On scroll 103

On touch and hold 103

On double-tap zoom 103

Supported touch events and how they work 103

Gestures 104

Creating a responsive photo gallery 105

Gallery markup and styling 106

The basic gallery slide list 106

Adding simple gallery controls 107

Making images responsive 107

Styling our gallery 108

Using CSS3 transitions 110

Gallery interactivity 111

The basic template 112

Caching the gallery 112

Connecting our controls 114

Gallery responsiveness 118

Extending the gallery for touch 123

The basic template 123

Default options and modularizing swipe events 124

Listening to touch events 125

Handling touch events 125

Putting it all together 127

The JavaScript 128

The markup 130

Summary 131

Chapter 5: Understanding HTML5 Forms 133

HTML5 input types 134

HTML5 attributes for forms 135

Form layout for iPhone 136

Sample HTML5 forms 137

Setup work 138

Including our forms styling 138

Updating the navigation 138

Including our navigation and forms scripts 139

The forms 139

The login form 139

The registration form 141

The profile form 144

Form validation 150

The basic template 150

Initializing our forms 151

Table of Contents

[ v ]

Attaching events 152

Event handlers 152

Validating our input 153

Form styling for iOS 156

Basic styling 156

Custom styling 157

Summary 161

Chapter 6: Location-aware Applications 163

Geolocation specification 163

Implementation 164

Scope, security, and privacy 164

API descriptions 165

The Geolocation interface 166

The PositionOptions interface 167

The Position interface 169

The Coordinates interface 169

The PositionError interface 170

Use cases 171

Points of interest 172

Route navigation 172

Latest information 172

Google Maps API 173

The API(s) 173

Obtaining an API key 173

Activating the service 173

Retrieving the key 174

Geolocation and Google Maps 176

Markup preparation 176

The Geolocation wrapper 180

Geolocation with Google Maps 184

Summary 188

Chapter 7: One-page Applications 189

Model-View-Controller or MVC 189

Models 190

Views 190

Controllers 190

Relationships 190

Introduction to Underscore.js 191

Implementation 191

_.extend 192

_.each 193

_.template 194

Table of Contents

[ vi ]

Introduction to Backbone.js 196

MVC and Backbone.js 196

Backbone models 196

Backbone views 199

Backbone collections 201

Server-side interactions 203

Our sample application 204

Application architecture 204

Basic sample architecture 205

Application markup 206

Application scripts 212

Summary 238

Chapter 8: Offline Applications 239

Application Cache 239

The manifest file 240

Manifest implementation 241

A simple example 241

The markup 242

The JavaScript 243

Debugging the cache manifest 245

Debugging in the browser 246

Debugging using JavaScript 248

Handling offline applications 249

A simple use case 249

Detecting network connectivity 250

The localStorage API 251

Summary 252

Chapter 9: Principles of Clean and Optimized Code 253

Optimizing stylesheets 254

Validating our CSS 254

W3C CSS Validator 254

Customizable options 256

Validating a successful example 257

Validating an unsuccessful example 258

CSS Lint 260

Customizable options 261

Profiling our CSS 265

Optimizing our CSS 267

Avoid universal rules 267

Don't qualify ID or Class rules 268

Never use !important 268

Modularize styles 268

Table of Contents

[ vii ]

Optimizing JavaScript 269

Validating JavaScript using JSLint 270

Validating a successful example using JSLint 271

Validating an unsuccessful example 272

Customizable options 274

Integrating JSLint 274

Profiling our JavaScript 275

Optimizing our JavaScript 277

Avoid globals 277

Leave the DOM alone 278

Use literals 278

Modularize functionality 279

Summary 280

Chapter 10: Creating a Native iPhone Web Application 281

Setting up the development environment 282

Getting started with Xcode 282

Installing Xcode 282

Xcode IDE overview – the basics 282

Setting up PhoneGap 289

Installing PhoneGap 290

Creating a PhoneGap project 291

The PhoneGap license 292

Configuring our project 293

Transferring a web application 294

Transferring our assets 295

Including our markup 295

Incorporating our styles 298

Inserting our scripts 299

Debugging our application 303

Logging out our code 303

Using the Safari developer tools 304

Extending our application with native functionality 305

Configuring our application 306

Setting up our contacts functionality 306

Summary 311

Index 313