www.it-ebooks.info HTML5 iPhone Web Application Development An introduction to web-application development for mobile within the iOS Safari browser Alvin Crespo BIRMINGHAM - MUMBAI www.it-ebooks.info 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 (wishkerman@hotmail.com) www.it-ebooks.info 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 www.it-ebooks.info 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. www.it-ebooks.info 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.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 offers 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 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. www.it-ebooks.info 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 Dening 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 www.it-ebooks.info Table of Contents [ ii ] Use strict 29 Default options 29 Dening the constructor 30 The prototype 30 Dening 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 Conguring 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 Conguring 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 www.it-ebooks.info Table of Contents [ iii ] Chapter 3: HTML5 Audio 71 Server conguration 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 www.it-ebooks.info [...]... architecture for iPhone web application development We will customize the standard HTML5 Mobile Boilerplate for our needs throughout the book Chapter 2, Integrating HTML5 Video, helps you to learn the basics of implementing an HTML5 video player within your web application We'll review the specification and implement an exposed API to tap into Chapter 3, HTML5 Audio, explains an implementation of the HTML5 Audio... www.it-ebooks.info Application Architecture In this chapter, we will create a standard architecture for our iPhone application We will base it on the HTML5 Mobile Boilerplate and customize it for the needs of the several projects in this book From marking up our content in HTML5 to creating a JavaScript framework, we'll create static pages that help us focus on the foundations of iPhone Web Application development. .. identifies components of your application In this section, let's structure our applications, beginning with our Video application Creating the header First, let's start by giving our main index page a title and a header that describes the page we are on Let's open the main index.html file in our application at /index.html Find the tag and enter it in iPhone Web Application Development – Home Note... offline applications [2] www.it-ebooks.info Preface Chapter 9, Principles of Clean and Optimized Code, will have us sidestepping the development process to refine our craftsmanship We'll go over best practices, industry supported techniques, and ways to improve our code for the overall benefit of our applications Chapter 10, Creating a Native iPhone Web Application, reviews how we can create the native application. .. testing your applications in the most modern web browsers, including Safari Who this book is for This book is intended for beginner to intermediate level developers who are diving into web application development specifically for iOS This book begins with introductory level material, with each chapter advancing over each topic The topics covered will give you a good idea on how to approach the development. .. importantly, the specification to properly integrate our application' s user experience Chapter 5, Understanding HTML5 Forms, explains the new features in HTML5 forms, ultimately understanding its uses for our iOS web applications We'll review the new inputs, their interactions, and the behaviors expected from the iOS operating system Chapter 6, Location-aware Applications, will have Geolocation as the key point,... customize it for the needs of the projects in this book Customizing our markup First, open up the application in your favorite text editor Once we've opened up the application in the editor of our choice, let's look at index.html The index file needs to be cleaned up in order to focus on iPhone Web Application development, and also unused items such as Google Analytics need to be removed So let's remove... the files that are critical to the applications we will build The first application will be based on the HTML5 Video specification (http://dev w3.org /html5/ spec-author-view/video.html) In that application we'll create a specific functionality for our video player that includes play, pause, and fullscreen functionalities So let's create a directory specific to this application; we'll call this directory... href=" /index.html" >Application Architecture HTML5 Video HTML5 Audio Touch and Gesture Events HTML5 Forms Location Aware Applications [ 17 ] www.it-ebooks.info Application Architecture... 278 279 Summary Chapter 10: Creating a Native iPhone Web Application Setting up the development environment Getting started with Xcode Installing Xcode Xcode IDE overview – the basics Setting up PhoneGap 280 281 282 282 282 282 289 Installing PhoneGap Creating a PhoneGap project The PhoneGap license 290 291 292 Configuring our project Transferring a web application Transferring our assets 293 294 295 . www.it-ebooks.info HTML5 iPhone Web Application Development An introduction to web- application development for mobile within the iOS Safari browser Alvin Crespo BIRMINGHAM - MUMBAI www.it-ebooks.info HTML5 iPhone. 203 Our sample application 204 Application architecture 204 Basic sample architecture 205 Application markup 206 Application scripts 212 Summary 238 Chapter 8: Ofine Applications 239 Application. standard architecture for iPhone web application development. We will customize the standard HTML5 Mobile Boilerplate for our needs throughout the book. Chapter 2, Integrating HTML5 Video, helps you