Free Download PDF Books, Beginning iOS Application Development With HTML And JavaScript

Beginning iOS Application Development With HTML And JavaScript

HTML HTML Develope HTML JavaScript iOS JavaScript ReadOnline

Summary of Contents

  • Page 1

    III'..I"i:0"ViA-f.'iMe',1 1BeginningiOSApplicationDevelopmentwithHTML and JavaScript «Richard WagneractionURI(http://www.it-ebooks.info):http://freepdf-books.com

  • Page 2

    ffirs.indd ivffirs.indd iv12/21/11 2:29:58 PM12/21/11 2:29:58 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com

  • Page 3

    BEGINNING IOS APPLICATION DEVELOPMENT WITH HTML AND JAVASCRIPT®INTRODUCTION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiiiPART I GETTING STARTEDCHAPTER 1 Introducing iOS Development Using Web Technologies . . . . . . ...

  • Page 4

    PART V NEXT STEPS: DEVELOPING NATIVE IOS APPLICATIONS WITH HTML AND JAVASCRIPTCHAPTER 19 Preparing for Native iOS Development . . . . . . . . . . . . . . . . . . . . . . . . . . 333CHAPTER 20 PhoneGap: Native Apps from Your HTML, CSS, and JavaScript . . . . . . . . . . . . . . . . . . . . . . ....

  • Page 5

    BEGINNING iOS Application Development with HTML and JavaScript®ffirs.indd iiiffirs.indd iii12/21/11 2:29:58 PM12/21/11 2:29:58 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com

  • Page 6

    ffirs.indd ivffirs.indd iv12/21/11 2:29:58 PM12/21/11 2:29:58 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com

  • Page 7

    BEGINNING iOS Application Development with HTML and JavaScript®Richard WagnerJohn Wiley & Sons, Inc.ffirs.indd vffirs.indd v12/21/11 2:29:58 PM12/21/11 2:29:58 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http...

  • Page 8

    Beginning iOS Application Development with HTML and JavaScript®Published byJohn Wiley & Sons, Inc.10475 Crosspoint BoulevardIndianapolis, IN 46256actionURI(http://www.wiley.com):w actionURI(http://www.wiley.com):w actionURI(http://www.wiley.com):w.wiley.comCopyright © 2012 by John Wiley &am...

  • Page 9

    To KimmyWags and the J-Teamffirs.indd viiffirs.indd vii12/21/11 2:30:03 PM12/21/11 2:30:03 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com

  • Page 10

    ffirs.indd viiiffirs.indd viii12/21/11 2:30:04 PM12/21/11 2:30:04 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com

  • Page 11

    ABOUT THE AUTHORRICHARD WAGNER is Lead Product Architect of Mobile/Web at Maark, LLC. Previously, he was the head of engineering for the Web scripting company Nombas and VP of Product Development for NetObjects, where he was the chief architect of a CNET award-winning JavaScript tool named NetObj...

  • Page 12

    ffirs.indd xffirs.indd x12/21/11 2:30:04 PM12/21/11 2:30:04 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com

  • Page 13

    CREDITSEXECUTIVE EDITORCarol LongPROJECT EDITORKelly TalbotTECHNICAL EDITORMichael GilbertPRODUCTION EDITORKathleen WisorCOPY EDITORCharlotte KughenEDITORIAL MANAGERMary Beth Wakefi eld FREEL ANCER EDITORIAL MANAGERRosemarie GrahamASSOCIATE DIRECTOR OF MARKETINGDavid MayhewMARKETING MANAGERAshle...

  • Page 14

    ffirs.indd xiiffirs.indd xii12/21/11 2:30:05 PM12/21/11 2:30:05 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com

  • Page 15

    ACKNOWLEDGMENTSTHE IPHONE AND IPAD HAVE EMERGED as my favorite pieces of technology I have ever owned. As such, the topic of iOS application development has been a joy to write about. However, the book was also a joy because of the stellar team I had working with me on this book. First and foremo...

  • Page 16

    ffirs.indd xivffirs.indd xiv12/21/11 2:30:05 PM12/21/11 2:30:05 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com

  • Page 17

    CONTENTSINTRODUCTION xxiiiPART I: GETTING STARTEDCHAPTER 1: INTRODUCING IOS DEVELOPMENT USING WEB TECHNOLOGIES 3Discovering the Safari on iOS Platform 3Key Safari Features for Web Developers 6Four Ways to Develop Web Apps for iOS 7The Finger Is Not a Mouse 9Limitations and Constraints 10Settin...

  • Page 18

    xviCONTENTSAdding a Node to the DOM 55Creating Other Elements 57Setting a Value to an Attribute 59Moving a Node 60Cloning a Node 60Removing a Node from the DOM 61Removing an Attribute 62CHAPTER 4: WRITING YOUR FIRST HELLO WORLD APPLICATION 65Setting Up 66Creating Your Index Page 66Creating t...

  • Page 19

    xviiCONTENTSDesigning for Touch 109Working with Fonts 110Best Practices in iOS UI Design 111Adding Finishing Touches 112CHAPTER 7: DESIGNING FOR IPAD 117Special iPad Considerations 117Design Essentials 118Dealing with Scrolling 118Split View Design Pattern 119Designing a UI for iPad 120CHAPTER ...

  • Page 20

    xviiiCONTENTSScripting UI Behavior 178On Document Load 179Loading a Standard iUI Page 181Handling Link Clicks 183Loading a Dialog 184CHAPTER 10: HANDLING TOUCH INTERACTIONS AND EVENTS 189Three Types of Touch Events 189Mouse-Emulation Events 190Many Events Handled by Default 190Conditional Events ...

  • Page 21

    xixCONTENTSCHAPTER 13: PACKAGING APPS AS BOOKMARKS: BOOKMARKLETS AND DATA URLS 235Working with Bookmarklets 236Adding a Bookmarklet to Safari on iOS 236Exploring How Bookmarklets Can Be Used 237Storing an Application in a Data URL 239Constraints and Issues with Using Data URLs 239Developing a Da...

  • Page 22

    xxCONTENTSCHAPTER 16: BUILDING WITH WEB APP FRAMEWORKS 287Using jQuery Mobile 288Using iWebKit 293CHAPTER 17: BANDWIDTH AND PERFORMANCE OPTIMIZATIONS 303Optimization Strategies 303Best Practices to Minimize Bandwidth 304General 304Images 305CSS and JavaScript 305Compressing Your Application 306G...

  • Page 23

    xxiCONTENTSPART V: NEXT STEPS: DEVELOPING NATIVE IOS APPLICATIONS WITH HTML AND JAVASCRIPTCHAPTER 19: PREPARING FOR NATIVE IOS DEVELOPMENT 333Downloading Xcode 333Joining the iOS Developer Program 334Getting an iOS Developer Certifi cate 335Retrieving the Developer Certifi cate 337Adding a Dev...

  • Page 24

    flast.indd xxiiflast.indd xxii12/21/11 8:06:32 AM12/21/11 8:06:32 AMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com

  • Page 25

    INTRODUCTIONTHE AMAZING SUCCESS OF THE IPHONE and iPad over the past four years has proven that application developers are now smack deep in a brave new world of sophisticated, multifunctional mobile applications. No longer do applications and various media need to live in separate silos. Instead...

  • Page 26

    xxivINTRODUCTION 2. Working with Core Technologies. Provides an overview of some of the key technologies you’ll be working with as you develop iOS web apps. 3. The Document Object Model. Explores how you can work with an HTML page as a tree in order to navigate and control various parts in you...

  • Page 27

    INTRODUCTIONxxv 19. Preparing for Native iOS Development. Walks you through all of the steps needed to join the Apple Developer Program and obtaining necessary credentials for publishing to the App Store. 20. PhoneGap: Native Apps from Your HTML, CSS, and JavaScript. How do you know when you nee...

  • Page 28

    xxviINTRODUCTIONAs for styles in the text:We highlight new terms and important words when we introduce them.We show keyboard strokes like this: Ctrl+A.We show fi le names, URLs, and code within the text like so: persistence.properties. We present code in two different ways:We use a monofont type...

  • Page 29

    INTRODUCTIONxxviiErrata link. You will be taken to a page which lists all errata that has been submitted for the book and posted by Wrox editors. If you discover an issue that is not found on the Errata page, I would be grateful for you to let us know about it. To do so, go to www.wrox.com/contac...

  • Page 30

    flast.indd xxviiiflast.indd xxviii12/21/11 8:06:51 AM12/21/11 8:06:51 AMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com

  • Page 31

    BEGINNING iOS Application Development with HTML and JavaScript®flast.indd xxixflast.indd xxix12/21/11 8:06:51 AM12/21/11 8:06:51 AMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com

  • Page 32

    flast.indd xxxflast.indd xxx12/21/11 8:06:51 AM12/21/11 8:06:51 AMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com

  • Page 33

    PART IGetting StartedCHAPTER 1: Introducing iOS Development Using Web TechnologiesCHAPTER 2: Working with Core TechnologiesCHAPTER 3: The Document Object ModelCHAPTER 4: Writing Your First Hello World ApplicationCHAPTER 5: Enabling and Optimizing Web Sites for the iPhone and iPadc01.indd 1c01....

  • Page 34

    c01.indd 2c01.indd 212/22/11 8:48:52 AM12/22/11 8:48:52 AMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com

  • Page 35

    Introducing iOS Development Using Web TechnologiesWHAT YOU WILL LEARN IN THIS CHAPTER:Using Safari on iOS as a development environment Developing touch-oriented apps Setting up your development environment The introduction of the iPhone, and the subsequent unveilings of the iPod touch and iPad, r...

  • Page 36

    4 ❘ CHAPTER 1 INTRODUCING IOS DEVELOPMENT USING WEB TECHNOLOGIESJavaScript (ECMAScript 3 (ECMA 262), JavaScript 1.4)AJAX (for example, XMLHTTPRequest)SVG (Scalable Vector Graphics) 1.1HTML5 media tagsAncillary technologies (video and audio media, PDF, and so on)Safari on iOS (which I refer to...

  • Page 37

    Table 1-1 shows the bandwidth performance of Wi-Fi, 3G, and the older EDGE networks.Launching: Native applications are all launched from the main Home screen of the iOS device (see Figure 1-3). In the original iPhone OS release, Apple provided no way for web apps to be launched from here, which m...

  • Page 38

    6 ❘ CHAPTER 1 INTRODUCING IOS DEVELOPMENT USING WEB TECHNOLOGIESKEY SAFARI FEATURES FOR WEB DEVELOPERS There are several capabilities available to web app developers with the recent releases of iOS. These are highlighted in the following list.Geolocation: Safari on iOS supports HTML5 geolocat...

  • Page 39

    Google, for example, uses this capability with its Web-based Latitude service for sharing your location with your friends. HTML5 Media Tags: Safari on iOS supports HTML5 video and audio elements for embedding video and audio content in Web pages. These new elements eliminate the need for complica...

  • Page 40

    8 ❘ CHAPTER 1 INTRODUCING IOS DEVELOPMENT USING WEB TECHNOLOGIES(see Figure 1-10). These sites avoid using technologies that the Apple mobile devices do not support, including Flash, Java, and other plug-ins. The basic structure of the presentation layer also maximizes use of blocks and colum...

  • Page 41

    Level 4 — iOS web application: The fi nal approach is to provide a web application that is designed exclusively for iPhone and/or iPad and has a UI design that resembles a native app or one that takes full advantage of the capabilities of iOS devices (see Figure 1-13). One of the design goals ...

  • Page 42

    10 ❘ CHAPTER 1 INTRODUCING IOS DEVELOPMENT USING WEB TECHNOLOGIESLIMITATIONS AND CONSTRAINTSBecause iPhone, iPad, and iPod touch are mobile devices, they are obviously going to have resource constraints that you need to be fully aware of as you develop applications. Table 1-3 lists the resour...

  • Page 43

    SETTING UP YOUR DEVELOPMENT ENVIRONMENT ON A LOCAL NETWORKBecause iOS does not allow you to access the local fi le system, you cannot place your application directly onto the device itself. As a result, you need to access your web application through another computer. On a live application, you ...

  • Page 44

    12 ❘ CHAPTER 1 INTRODUCING IOS DEVELOPMENT USING WEB TECHNOLOGIESYou can add fi les either in the computer’s website directory (/Library/WebServer/Documents) or your personal website directory (/Users/YourName/Sites) and then access them from the URL bar on your iPhone or iPad (see Figure ...

  • Page 45

    EXERCISES 1. What’s the diff erence between a native iOS app and a web app? 2. Can a web app be placed on the Home screen alongside native apps? 3. Does fi nger input always correspond to mouse input?Answers to the Exercises can be found in Appendix A.Setting Up Your Development Environment o...

  • Page 46

    14 ❘ CHAPTER 1 INTRODUCING IOS DEVELOPMENT USING WEB TECHNOLOGIESWHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSKey Safari features for developersGeolocation support, HTML5 media tags, CSS animation and eff ects, and SVGSupporting mobile devices on your websiteLevel 1: Fully compatible webs...

  • Page 47

    Working with Core TechnologiesWHAT YOU WILL LEARN IN THIS CHAPTER:Adding video to your app Discovering basic JavaScript coding techniquesWorking with functions and arrays Although a native iPhone app is built entirely in Objective-C, an iPhone web app is composed of a variety of core technologies...

  • Page 48

    16 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESYou use the video element to defi ne a video clip or stream, much like an img tag defi nes an image on your page. The promise of the video tag is that it eliminates the complicated hoops that developers have to go through with embedded media cont...

  • Page 49

    Exploring HTML 5 Media Elements ❘ 17TRY IT OUT Adding a Video Adding a video into your app now becomes as easy as adding the video tag to your page. 1. Create the following HTML document in your text editor and then save the document as BIDHJ-Ch02-Ex1.html.<!DOCTYPE html PUBLIC “-//W3C//D...

  • Page 50

    18 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESSCRIPTING JAVASCRIPTThe scripting layer of your iOS web app is often the “brains behind the operation” — the place on the client-side in which you add your programming logic. That’s why as you begin to develop more and more sophisticated we...

  • Page 51

    Scripting JavaScript ❘ 19 { alert(message); } // Otherwise, show this message else alert(“I withhold all greetings.”);}// Call function showGreeting(true)</script>Notice a few aspects of the JavaScript syntax: Case sensitivity: JavaScript is a case-sensitive language. The...

  • Page 52

    20 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESVariablesA variable is an alias that stores another piece of data — a text string, a number, a true or false value, or whatever. Variables are core to programming because they eliminate the need for having everything known while you are developin...

  • Page 53

    Scripting JavaScript ❘ 21var element = document.getElementById(“container”); // Array item var item = myArray[0]; If you are coming from a Java, ActionScript, or other stronger typed language, you are probably wondering where you declare the type of data that can be stored by the variab...

  • Page 54

    22 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESvar mainWindow; // Invalidvar is; var default; var window; Accessing a Variable After you defi ne a variable and assign it a value, each time you reference it in your code, the variable represents the value that was last assigned to it. In the fol...

  • Page 55

    Scripting JavaScript ❘ 23The variable is created when the boldText() function runs, but it no longer exists after the function ends. However, if you defi ne the variable at the top level of the scripting block — in other words, outside of a function — then that variable (known as a global ...

  • Page 56

    24 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESWhen this function is executed the alert box displays the following text: Don’t hassle me, I’m a local variable, and you cannot stop me. Notice that the local variable msg took precedence over the global variable msg. However, after that functi...

  • Page 57

    Scripting JavaScript ❘ 25In this example, document is the DOM object name for the HTML document and is all in lowercase. The method getElementsByTagName() is a compound word, so that the fi rst letter of the additional words in the method are capitalized. My variable divElements uses lowerCame...

  • Page 58

    26 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESOperatorsAn operator is a no-frills symbol used to assign values, compare values, manipulate expressions, or connect pieces of code together. The equal sign is perhaps the most common operator and you use it to assign a value to an expression. For ...

  • Page 59

    Scripting JavaScript ❘ 27OPER ATOREX AMPLEDESCRIPTION===x===y Evaluates both for value and data type (for example, if x = “5” and y = 5, then x==y is true, but x===y is false) <x<yx is less than y <=x<=yx is less than or equal to y>x>yx is greater than y >=x>=yx is g...

  • Page 60

    28 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESTABLE 2-8: JavaScript Reserved Wordsabstractbooleanbreakbytecasecatchcharclassconstcontinuedebuggerdefaultdeletedodoubleelseenumexportextendsfalsefi nalfi nallyfl oatforfunctiongotoifimplementsimportininstanceofintinterfacelongnativenewnullpacka...

  • Page 61

    Scripting JavaScript ❘ 29A prompt box is displayed to the user. The typed response of the user is assigned to the response variable. The if statement then evaluates whether response is equal to “Jerry Monroe.” If so, then the alert box is displayed. Otherwise, if block is ignored. I mention...

  • Page 62

    30 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESif/else StatementsThe if/else statement extends the if statement so that you can also execute a specifi c block of code if the expression evaluates to true and a separate block if it is false. The basic structure is the following: if (condition) {...

  • Page 63

    Scripting JavaScript ❘ 31 break; case label2: //code to be executed if expression equals label2 break;case label3 : //code to be executed if expression equals label3 break;default: // code to be executed if expression is different // from both label1, label2, and label3}The switch ...

  • Page 64

    32 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIEScode until a condition changes. JavaScript provides two programming constructs for these purposes: for and while blocks. A for loop cycles through a block of code x number of times. A while loop executes a block of code as long as a specifi c cond...

  • Page 65

    Scripting JavaScript ❘ 33In this example, the code block loops as long as num is less than 100. However, suppose that num has the value of 101; the while code block is never executed. The do/while loop is similar except that the condition evaluates at the end of the loop instead of at the start...

  • Page 66

    34 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESUsing JSDoc Comments The Java world has a documentation generator called Javadoc, which is a tool that can generate HTML-based documentation from the comments a developer adds to the source code. JSDocToolkit is an open-source tool written in Perl ...

  • Page 67

    Scripting JavaScript ❘ 35FunctionsA function is the basic building block or organizing unit of JavaScript. A foundation of a house is composed of many building blocks. In the same way, a JavaScript script usually consists of a set of functions. These building blocks may be easy to take for gran...

  • Page 68

    36 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIES 2. Add the addAndDisplay() function inside the script element: function addAndDisplay(a,b){ var total = a + b; alert(total); }Code snippet BIDHJ-Ch02-Ex2.html 3. Inside the script element, add the following code just after the function you just ...

  • Page 69

    Scripting JavaScript ❘ 37function createProfile(el){ if (el == null) { alert(“Undefined DOM element. Cannot continue. :(“); return; } else { // do something really important to el } }In this example, the function checks to see if the el parameter is null. If so, then the...

  • Page 70

    38 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESHowever, suppose your needs change over time. Instead of two numbers, you now need to add three or four or fi ve numbers at a time. Instead of writing separate functions for each case, you could overload the add() function to do all of these summi...

  • Page 71

    Scripting JavaScript ❘ 39 } else return ”Unsupported data type”; }}The add() function examines the type of the fi rst parameter and assigns the result to argType. If the type is a number then the routine continues just like the earlier example. If the type is a string, howeve...

  • Page 72

    40 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESAlternatively, you can use the backslash character (\) to “escape” an apostrophe or quotation mark if the string is enclosed by the same type of mark. Here are a couple cases: var str2 = ‘I\’m happy, aren\’t I’; var el = “<div id=\...

  • Page 73

    Scripting JavaScript ❘ 41if (flagUser == true){ alert(“Hey User! You are hereby flagged.”);}The if statement displays the alert box if flagUser evaluates to true. Note that a Boolean value is not wrapped in quotation marks. So notice the difference: // Boolean var isABoolean = true;var isA...

  • Page 74

    42 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESArrays So far, I’ve been talking about variables as individuals. An array, in contrast, is a collection of values. They are grouped together and indexed so that you can access a specifi c item stored in the group. JavaScript stores arrays as Arr...

  • Page 75

    Scripting JavaScript ❘ 43Getting and Setting the Size of an ArrayYou can get the number of items in an array by accessing its length property. (Yes, an array is an object, so it has its own set of properties and methods.) For example: var primeNumbers = [1,3,5,7,11];alert(primeNumbers.length));...

  • Page 76

    44 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESNotice that the length property is assigned to a variable rather than being included directly inside the for loop like this: // Valid, but less efficient for(i=0; i<castMembers.length; i++){}Although that loop is perfectly valid, it is not as ef...

  • Page 77

    Scripting JavaScript ❘ 45string[Second pass]100truestringHowever, when you pass an object or a function into an array, the array stores a reference to those advanced data types rather than a copy of it. As a result, any changes you make to the object or function outside of the array are refl e...

  • Page 78

    46 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESWHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSEmbedding video or audio into your appAdd a video or audio element to your HTML fi le.VariablesA variable is an alias that stores another piece of data.Scope of variablesVariable scope refers to the...

  • Page 79

    The Document Object ModelWHAT YOU WILL LEARN IN THIS CHAPTER:Looking at your document as a treeAccessing the DOM from your codeEditing your document from the DOM A web page is an HTML document containing markup tags and content. But, as you develop web apps, you’ll fi nd it more helpful to thi...

  • Page 80

    48 ❘ CHAPTER 3 THE DOCUMENT OBJECT MODELLevel 2: Level 2 support extends DOM support to include new core functionality, event listeners, and CSS DOM. Safari and other browsers provide generally strong support for most aspects of DOM2. Level 3: Level 3 adds support for newer properties and met...

  • Page 81

    tree as well. The text content inside an element is a child node of the parent element. So, for example, Pretty lame paragraph is considered a child node of the p element that contains it. Attributes are also considered nodes, but are a bit of a special case. They don’t participate in the paren...

  • Page 82

    50 ❘ CHAPTER 3 THE DOCUMENT OBJECT MODELFIGURE 3-3documentchildNodeschildNodeschildNodeschildNodeschildNodesdocumentdocumentattributesattributesReally Awesome Web PagenoedType=Node.TEXT_NODEtitlenodeType=Node.ELEMENT_NODEheadnodeType=Node.ELEMENT_NODEbodynodeType=Node.ELEMENT_NODEid=“contai...

  • Page 83

    Node.DOCUMENT_NODENode.DOCUMENT_TYPE_NODE Node.DOCUMENT_FRAGMENT_NODE Node.NOTATION_NODEEach of the Node constants represent an unsigned short number. ELEMENT_NODE represents 1, ATTRIBUTE_NODE equals 2, and so on. ACCESSING THE DOM FROM JAVASCRIPT You access the document object through a named ob...

  • Page 84

    52 ❘ CHAPTER 3 THE DOCUMENT OBJECT MODELAccessing a Set of Elements In addition to accessing a specifi c element, you’ll also fi nd occasions in which you’ll want to access all element nodes of a given kind. You can also access a set of elements by using the document object’s getEleme...

  • Page 85

    Accessing Family MembersYou can access nodes related to other nodes through more “familial ways” through several node properties: parentNode returns the parent node of the current element.firstChild gets the fi rst child of a node. lastChild gets the last child of a node. previousSibling get...

  • Page 86

    54 ❘ CHAPTER 3 THE DOCUMENT OBJECT MODELdoing so because attributes are inextricably associated with an element. Not surprisingly, attributes are accessible through a DOM element by accessing its attributes property or by using one of three methods. Accessing All AttributesThe object that ret...

  • Page 87

    MANIPULATING THE DOM You can do more than use the DOM to look at a document. In fact, you can also manipulate it — creating nodes, adding them to the DOM tree, editing nodes, and removing parts of a document for which you have no more use. In the sections that follow, I show you how to add and ...

  • Page 88

    56 ❘ CHAPTER 3 THE DOCUMENT OBJECT MODEL<body><div id=”content”><h1 id=”header1”>Welcome to the World of Cinema</p><p id=”p1”>Favorite films are shown below:</p><ol id=”movieList”><li id=”film_30329”>The Shawshank Redemption&...

  • Page 89

    <li id=”film_20216”>Braveheart</li><li/><li id=”film_28337”>Groundhog Day</li><li/><ol>Creating Other Elements The document object contains methods for creating the rest of the common node types: attribute, text, comment, and document fragment. Ea...

  • Page 90

    58 ❘ CHAPTER 3 THE DOCUMENT OBJECT MODELdf.appendChild(e); }document.getElementById(“content”).appendChild(df); TRY IT OUT Adding a Complete NodeNow that you know how to create the other node types, I want to revisit the movie list example. Instead of adding empty li elements, add the att...

  • Page 91

    a = document.createAttribute(“id”, “film_29323”); t = document.createTextNode(“Amélie (Le Fabuleux destin d’Amélie Poulain)”); e.appendChild(a); e.appendChild(t); nd = document.getElementById(“film_30202”); document.getElementById(“movieList.).insertBef...

  • Page 92

    60 ❘ CHAPTER 3 THE DOCUMENT OBJECT MODELHere’s a little more detailed example of using setAtttribute() to clean up a document. Suppose you have an HTML document that has attributes with uppercase names. If you want to convert them to all lowercase, you could the following script: var all = ...

  • Page 93

    not part of the DOM. You can then add it wherever you want using the familiar appendChild() and insertBefore() methods. This method takes a single Boolean parameter: cloneNode(deepBoolean)If the parameter is set to true then all subnodes of the current node are copied along with it. When cloning ...

  • Page 94

    62 ❘ CHAPTER 3 THE DOCUMENT OBJECT MODELIn this routine, the while loop checks to see if there is a child node for the current node. If so, then the child node is removed using removeChild(). This process repeats until there no childNodes[0].Removing an AttributeSuppose you have had it with a...

  • Page 95

    WHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSAccessing elements from the DOMUse document.getElementById() or document.getElementsByTagName().Accessing attributesUse the attributes property of a node to get a list of attributes; use getAttribute() to get a specifi c attribute value. Adding to...

  • Page 96

    c03.indd 64c03.indd 6412/22/11 8:57:04 AM12/22/11 8:57:04 AMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com

  • Page 97

    Writing Your First Hello World ApplicationWHAT YOU WILL LEARN IN THIS CHAPTER:Creating your index page Adding styles Programming the UI with JavaScriptDeploying your app Okay, enough leg work. It’s time to start developing your fi rst app. In this chapter, I walk you through the full start-to-...

  • Page 98

    66 ❘ CHAPTER 4 WRITING YOUR FIRST HELLO WORLD APPLICATIONSETTING UP Before you can begin developing an application, you need to set up a place for your app on a remote web server or on a server on your development machine. Make sure the server can be accessed via Wi-Fi from an iOS device. TRY...

  • Page 99

    TRY IT OUT Creating the Index Page To create the basic shell of your app, follow these steps: 1. Create a new text fi le in your topfilmz folder and save it as index.html. 2. Enter the following HTML text: <!DOCTYPE html><html><head><title>Top Filmz</title></hea...

  • Page 100

    68 ❘ CHAPTER 4 WRITING YOUR FIRST HELLO WORLD APPLICATIONWithin an app, you can place anything that you want to on a page. However, a typical template that many apps use is a standard header-content-footer division. You can achieve this in jQuery Mobile by using the following code: <div da...

  • Page 101

    2. Inside the header div, add the app title: <div data-role=”header”> <h1>Top Filmz</h1> </div>Code snippet index.html 3. Inside the footer div, add a credit line: <div data-role=”footer”><h5>Hello World Apps</h5></div>Code snippe...

  • Page 102

    70 ❘ CHAPTER 4 WRITING YOUR FIRST HELLO WORLD APPLICATIONAlthough the app is not functional yet, go ahead and sneak a peek at the main screen by opening the page on your iPhone or other iOS device. You can do so by typing the URL of the app on your development server. In my case, I would ente...

  • Page 103

    href=”http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css” /> <script type=”text/javascript” src=”http://code.jquery.com/jquery-1.6.3.min.js”> </script> <script type=”text/javascript” src=”http://code.jquery.com/mobile/1.0b...

  • Page 104

    72 ❘ CHAPTER 4 WRITING YOUR FIRST HELLO WORLD APPLICATIONLISTING 4-1 (continued) src=”http://ecx.images-amazon.com/images/I/519NBNHX5BL._SL500_AA300_.jpg”/> <a href=”http://www.imdb.com/title/tt0111161/” data-role=”button”>Go to IMDB Page</a> <a hr...

  • Page 105

    <div data-role=”footer”> <h5>Hello World Apps</h5> </div></div><div data-role=”page” id=”groundhogDay”> <div data-role=”header”> <h1>Groundhog Day</h1> </div> <div data-role=”content” style=...

  • Page 106

    74 ❘ CHAPTER 4 WRITING YOUR FIRST HELLO WORLD APPLICATION <div data-role=”header”> <h1>Chariots of Fire</h1> </div> <div data-role=”content” style=”background-color:#ffffff”> <img class=”poster” src=”http://ecx.images-amaz...

  • Page 107

    FIGURE 4-2FIGURE 4-3That’s it! You have created your fi rst iPhone app. However, here’s an Easter egg bonus for what you already created. If you have an iPad, open the web app from the iPad version of Safari. Surprise! jQuery Mobile automatically displays the app in a customized manner suite...

  • Page 108

    76 ❘ CHAPTER 4 WRITING YOUR FIRST HELLO WORLD APPLICATIONEXERCISES 1. What are the benefi ts to using a mobile framework such as jQuery Mobile? 2. For a jQuery Mobile-based app, do all app pages need to be stored in separate fi les? 3. How do you link to another page that is stored in the s...

  • Page 109

    WHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSFind a location for your web appDetermine where you want to set up your developer server — either on a remote server or on a server running on your development machine. Use jQuery Mobile as a mobile app frameworkUse <!DOCTYPE html> and add ...

  • Page 110

    c04.indd 78c04.indd 7812/21/11 3:37:40 PM12/21/11 3:37:40 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com

  • Page 111

    Enabling and OptimizingWeb Sites for the iPhoneand iPadWHAT YOU WILL LEARN IN THIS CHAPTER:Making your website compatible with iOS devices Making your site easy to navigate from iPhone and iPad Adding custom style sheets for iOS devicesAlthough this book is focused on developing web apps for iOS ...

  • Page 112

    80 ❘ CHAPTER 5 ENABLING AND OPTIMIZING WEB SITES FOR THE IPHONE AND IPADto be expected for being on the cutting edge of technology. However, today, if you design or run a website, your visitors won’t be nearly as forgiving. In the past, you could design a minimalist, text-only style sheet f...

  • Page 113

    Tier 1: iOS Compatibility ❘ 81Therefore, if you plan on using Flash for an interactive portion of a page then you should also plan to degrade gracefully to a static graphic or alternative content. At a minimum, you should place a disclaimer over Flash content. It’s not ideal, but it is better...

  • Page 114

    82 ❘ CHAPTER 5 ENABLING AND OPTIMIZING WEB SITES FOR THE IPHONE AND IPAD<head><title>Company XY Home Page</title><meta name=“viewport” content=“width=780”><script type=“text/javascript” src=“swfobject.js”></script></head><body>&l...

  • Page 115

    Tier 2: Navigation-Friendly Websites ❘ 83it is loading as being 980 pixels in width, and then shrinks the page scaling so that the entire page width can fi t inside of the 320-pixel viewport (see Figure 5-3). Here is the default declaration:<meta name=“viewport” content=“width=980;use...

  • Page 116

    84 ❘ CHAPTER 5 ENABLING AND OPTIMIZING WEB SITES FOR THE IPHONE AND IPADIn addition to the width property, you can also programmatically control the scale of the viewport when the page initially loads through the initial-scale parameter. For example, if you want to set the initial scale to be...

  • Page 117

    Tier 2: Navigation-Friendly Websites ❘ 85PROPERT YDEFAULT VALUEMINIMUM VALUEMA XIMUM VALUEDESCRIPTIONminimum-scale0.25>010Use to set the lower end for scalingmaximum-scale1.6>010Use to set the higher end for scalingAlthough it’s not generally recommended, you can specify the width of th...

  • Page 118

    86 ❘ CHAPTER 5 ENABLING AND OPTIMIZING WEB SITES FOR THE IPHONE AND IPADTRY IT OUT Making a Web Page Easy to Navigate for iOS UsersWith a few simple tweaks, you can transform the page into something far easier for smaller devices (iPhone and iPod touch) to work with. Follow the instructions b...

  • Page 119

    Tier 3: Custom Styling ❘ 87Defi ning Multiple Columns (Future Use)The latest versions of WebKit (Safari) and Mozilla-based browsers provide support for new CSS3 properties that enable you to create newspaper-like, multicolumn layouts. For a content block, you can specify the number of columns,...

  • Page 120

    88 ❘ CHAPTER 5 ENABLING AND OPTIMIZING WEB SITES FOR THE IPHONE AND IPADprovide a richer, more tailored experience for Safari on iOS. The easiest way to do this is to create custom styles specifi cally for iPhone and iPad.Media QueriesIf you want to specify a style sheet for iOS usage, you c...

  • Page 121

    Tier 3: Custom Styling ❘ 89In general, for most website viewing, you will want to keep this property enabled. For iPhone-specifi c contexts in which you want more control over scaling and sizing, you need to disable this option.Case Study: Enabling an Existing Web SiteConsider a case study exa...

  • Page 122

    90 ❘ CHAPTER 5 ENABLING AND OPTIMIZING WEB SITES FOR THE IPHONE AND IPAD rel=”stylesheet” href=”iPhone.css” /><!-<![endif]-><link media=”screen and (min-device-width: 1025px)” href=”default.css” type=”text/css” rel=”stylesheet”/>Next, inside the HT...

  • Page 123

    Tier 3: Custom Styling ❘ 91}#pageheader { font-family:Helvetica,Arial,Verdana,Sans-serif; font-weight: bold; font-size: 2.2em; margin-bottom: 1px; margin-top: 3px;}The next issue is to shrink the size of the banner at the top of the page. Here’s the pre-iPhone style for the banner text:#...

  • Page 124

    92 ❘ CHAPTER 5 ENABLING AND OPTIMIZING WEB SITES FOR THE IPHONE AND IPADAs you can see, you can often transform your existing website into an iPhone-friendly site with a handful of well-thought-out style changes. TIER 4: PARALLEL SITESUnless you are creating an iPhone or iPod touch applicatio...

  • Page 125

    Tier 4: Parallel Sites ❘ 93 3. Add the following script to the document head: <script type=“application/x-javascript”>function isiPhone() { result ((navigator.platform.indexOf(“iPhone”) != -1) || (navigator.userAgent.indexOf(‘iPod’) != -1))}function isiPad() { resul...

  • Page 126

    94 ❘ CHAPTER 5 ENABLING AND OPTIMIZING WEB SITES FOR THE IPHONE AND IPADEXERCISES 1. Is Flash supported on iOS devices? 2. What is the purpose of a viewport meta tag? 3. What constant should you use to size the page to the width of the device’s viewport? 4. Why is it a good idea to make ...

  • Page 127

    Tier 4: Parallel Sites ❘ 95WHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSMaking your website compatible with iOS devicesAvoid using Adobe Flash media, Java applets, and Plug-ins. Also, avoid using the CSS property position:fixed. Making your site easy to navigate with iOS devicesAdd a viewpo...

  • Page 128

    c05.indd 96c05.indd 9612/21/11 3:43:13 PM12/21/11 3:43:13 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com

  • Page 129

    PART IIApplication DesignCHAPTER 6: Designing the iPhone UICHAPTER 7: Designing for iPadCHAPTER 8: Styling with CSSc06.indd 97c06.indd 9712/21/11 5:33:55 PM12/21/11 5:33:55 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.c...

  • Page 130

    c06.indd 98c06.indd 9812/21/11 5:33:59 PM12/21/11 5:33:59 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com

  • Page 131

    Designing the iPhone UIWHAT YOU WILL LEARN IN THIS CHAPTER:Understanding the iPhone viewportExploring iOS design patterns Designing for touchMore than anything else, the iPhone and iPad are known for their usability, intuitiveness, and overall positive user experience. The native iOS user interfa...

  • Page 132

    100 ❘ CHAPTER 6 DESIGNING THE IPHONE UIis no different. All of the innovations that have transpired — such as HTML5 and Ajax — have revolutionized the structure and composition of a website but not how users interact with it. Moreover, mobile and handheld devices offered a variety of new ...

  • Page 133

    Users can scroll around the viewport with their fi ngers. However, they cannot resize it. To use desktop lingo, an iOS application is always “full screen” and takes up all available space.If the on-screen keyboard is displayed, the visibility of the viewport is further restricted with the ke...

  • Page 134

    102 ❘ CHAPTER 6 DESIGNING THE IPHONE UIBecause users have a much smaller viewport than they are used to working with on their desktop, the iPhone viewport has a scale property that you can manipulate. When Safari on iOS loads a web page, it automatically defi nes the page width as 980 pixels...

  • Page 135

    Categorizing Apps To fully appreciate the design decisions that went into these applications, you need to understand the differences in the way in which users use iOS applications compared to their desktop counterparts. After all, consider the types of applications that you fi nd installed on yo...

  • Page 136

    104 ❘ CHAPTER 6 DESIGNING THE IPHONE UIThe document is the primary point of focus in a traditional desktop application, but it is not surprising for a document on an iOS device to be consumable and temporary. You have the Pages, Numbers, and Keynote applications for iOS, but many of the docum...

  • Page 137

    However, no matter the style of the navigation lists, they are each designed to quickly take you to a destination page in as few interactions as possible.What’s more, the top title bar of the app usually provides contextual information to help users understand where they are in the hierarchy of...

  • Page 138

    106 ❘ CHAPTER 6 DESIGNING THE IPHONE UITherefore, as you begin to examine how you should design the UI of your application, look to see what parallels there are with the built-in iPhone application design. Even if you don’t emulate its look and feel, you might want to have a consistent appr...

  • Page 139

    to the page and how to get back. If the page is at the top level of the application then there is no back button.Screen title: Each screen should have a title displayed in the center of the toolbar. The title of the page should be one word and appropriately describe the content of the current scr...

  • Page 140

    108 ❘ CHAPTER 6 DESIGNING THE IPHONE UITable 6-4 lists each of the specifi c metrics to emulate the same look and feel of the Apple design in edge-to-edge navigation lists. TABLE 6-4: Metrics for Apple’s Edge-to-Edge DesignITEMVALUECell height (including bottom line)44pxCell width320px (po...

  • Page 141

    DESIGNING FOR TOUCHOne of the most critical design considerations you need to take into account for iPhone interfaces in particular is that that you are designing an interface that interacts with a fi nger, not a mouse or other mechanical pointing device. A mouse pointer has a small point that...

  • Page 142

    110 ❘ CHAPTER 6 DESIGNING THE IPHONE UIIn addition to sizing and spacing issues, another important design decision is to minimize the need for text entry. Use select lists rather than input fi elds where possible. What’s more, use cookies to remember last values entered to prevent constant...

  • Page 143

    Safari on iOS automatically substitutes three unsupported fonts with their built-in counterparts. Courier New is substituted when Courier is specifi ed. Helvetica is substituted for Helvetica Neue, and Times New Roman is used in place of Times.BEST PRACTICES IN IOS UI DESIGNWhen you are designin...

  • Page 144

    112 ❘ CHAPTER 6 DESIGNING THE IPHONE UIPlace text entry fi elds at the top of the page. When your application requires data-entry fi elds, work to place these input fi elds as near to the top of the page as possible. Top positioning of text entry fi elds helps minimize the chances of the ...

  • Page 145

    6. Add the following link tags to the document head:<link rel=”apple-touch-icon” href=”icon.png”/><link rel=”apple-touch-icon” sizes=”72x72” href=”icon-ipad.png” /><link rel=”apple-touch-icon” sizes=”114x114” href=” icon-iphone4.png” /> 7. Save y...

  • Page 146

    114 ❘ CHAPTER 6 DESIGNING THE IPHONE UIEXERCISES 1. When would you use the edge-to-edge navigation list design pattern? 2. What is the minimum pixel size a button or other UI element should generally be for touch? 3. True or False? Comic Sans is a font available on iOS. 4. True or False? ...

  • Page 147

    WHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSViewportA viewport is a rectangular area of screen space within which an application is displayed. A user can manipulate what is seen inside of the viewport by resizing the window, scrolling its contents, and, in many cases, changing the zoom level...

  • Page 148

    c06.indd 116c06.indd 11612/21/11 5:34:21 PM12/21/11 5:34:21 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com

  • Page 149

    Designing for iPadWHAT YOU WILL LEARN IN THIS CHAPTER:Knowing special design considerations for iPadUnderstanding limitations of Safari on iPadCreating a Split View app The iPad is mobile, but it is not a phone device. That statement is a “no-brainer” obviously, but when designing for the iPa...

  • Page 150

    118 ❘ CHAPTER 7 DESIGNING FOR IPADAdding an iPad-specifi c media query: <link media=”only screen and (min-device-width: 768px) and (max-device-width: 1024px)” type=”text/css” rel=”stylesheet” href=”iPad.css” />Adding iPad-specifi c styles: @media only screen and ...

  • Page 151

    that users will be looking for in an app that targets the iPad device. You can download it at http://cubiq.org/iscroll-4. In addition to more native-like scrolling capabilities, iScroll 4 also provides several additional touch event capabilities including pinch/zoom of content, pull down to refre...

  • Page 152

    120 ❘ CHAPTER 7 DESIGNING FOR IPADDESIGNING A UI FOR IPADWhen you read Chapter 16 you fi nd out that you can create a web app for iPad using popular mobile frameworks, such as jQuery Mobile, and have it behave nicely within the Safari on iOS environment. However, because most of these framew...

  • Page 153

    World app I created in Chapter 5 is a perfect example of this technique. However, suppose you would like your web app to follow closely the native iOS UI guidelines, so that it has a basic “look and feel” that is similar to the native apps that users are familiar with. You can create this “...

  • Page 154

    122 ❘ CHAPTER 7 DESIGNING FOR IPAD 4. Add the main page content inside of the document body: <!-- Begin Page (shown in both landscape and portrait --> <div id=”main” class=”abs”> <!-- Begin Page Header --> <div class=”abs header_upper chrome_light”> ...

  • Page 155

    5. Add the following sidebar-related code after the previous content block inside the document body: <!-- Begin Sidebar (shown as sidebar in landscape, shown as popover in portrait --><div id=”sidebar” class=”abs”> <span id=”nav_arrow”></span> <!-- Ap...

  • Page 156

    124 ❘ CHAPTER 7 DESIGNING FOR IPADFIGURE 7-3FIGURE 7-4c07.indd 124c07.indd 12412/21/11 3:43:46 PM12/21/11 3:43:46 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com

  • Page 157

    As you can see from this simple example, Slablet offers you considerable functionality when you have correctly defi ned the right elements in your HTML fi le. Looking under the Slablet hood, there are a few key parts of the template that are worth looking at. First, the master.js fi le is used...

  • Page 158

    126 ❘ CHAPTER 7 DESIGNING FOR IPAD <!-- Main menu button - shown only in Portait mode displays popover menu when pressed --> <span class=”float_left button” id=”button_navigation”> Menu </span> ...

  • Page 159

    3. Replace the empty sidebar content so that it includes the following code: <!-- Begin Sidebar (shown as sidebar in landscape, shown as popover in portrait --><div id=”sidebar” class=”abs”> <span id=”nav_arrow”></span> <!-- App Name --> <di...

  • Page 160

    128 ❘ CHAPTER 7 DESIGNING FOR IPAD <a href=”#”>Kyle Exwhi</a> </li> <li> <a href=”#”>Jason Masters</a> </li> ...

  • Page 161

    9. Open 431.html in your editor. 10. Replace the code in the main_content_inner div with the following code: <div id=”main_content_inner”> <h1>Session 431: Distributing Your App</h1> <p>In this compellings session, Doug Majoring leads you through how to...

  • Page 162

    130 ❘ CHAPTER 7 DESIGNING FOR IPAD suscipit elit odio sed leo. Vivamus ut lobortis velit. Nam pretium vestibulum tellus non vehicula.</p> <p>Proin dolor diam, laoreet vel faucibus nec, malesuada sit amet purus. Proin turpis orci, ultrices at laoreet quis, v...

  • Page 163

    FIGURE 7-5FIGURE 7-6Designing a UI for iPad ❘ 131c07.indd 131c07.indd 13112/21/11 3:43:49 PM12/21/11 3:43:49 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com

  • Page 164

    132 ❘ CHAPTER 7 DESIGNING FOR IPADFigure 7-8 shows the example session page. However, what’s important to note about this page is that the content scrolls inside the page div using the popular iScroll.js library. FIGURE 7-7FIGURE 7-8c07.indd 132c07.indd 13212/21/11 3:43:50 PM12/21/11 ...

  • Page 165

    EXERCISES 1. True or False? Although the iPhone should use the viewport meta tag for web apps, the viewport tag is not needed for iPad web apps. 2. Is it better to design for landscape or portrait modes? 3. How can you overcome the limitation of being unable to scroll overfl owing content insid...

  • Page 166

    134 ❘ CHAPTER 7 DESIGNING FOR IPADWHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSKey meta tags to add for most every iPad web appViewport meta tag, apple-mobile-web-app-capable meta tagDesign for portrait and landscapeDesign your app to work at 1024 × 768 in landscape and 768 × 1024 in po...

  • Page 167

    Styling with CSSWHAT YOU WILL LEARN IN THIS CHAPTER:Working with text styles and shadows Styling block elements Creating CSS buttons Like its Mac and Windows cousins, the mobile version of Safari on iOS provides some of the best CSS support of all web browsers. As you develop iOS web applications...

  • Page 168

    136 ❘ CHAPTER 8 STYLING WITH CSSSafari provides support for, and Table 8-2 lists the set of pseudo-classes and pseudo-elements that Safari works with.Note that the following CSS3 selectors are not supported with Safari::last-child:only-childnth-child()nth-last-child()last-of-typeonly-of-type:...

  • Page 169

    TEXT STYLESWhen you are styling text inside your iOS web apps, keep in mind three text-related styles that are important to effective UI design: -webkit-text-size-adjust, text-overflow, and text-shadow. These properties are explained in this section.TABLE 8-2: Safari Pseudo-Classes and Pseudo-Ele...

  • Page 170

    138 ❘ CHAPTER 8 STYLING WITH CSSControlling Text Sizing with -webkit-text-size-adjustWhen a page is rendered, Safari on iOS automatically sizes the page’s text based on the width of the text block. However, by using the -webkit-text-size-adjust property, you can override this setting. The n...

  • Page 171

    Handling Overfl owed Text with text-overfl owBecause the width of the viewport in Safari on iPhone is either 320 (portrait) or 480 (landscape) pixels (and Safari on iPad is 768 (portrait) or 1024 (landscape), effectively managing the physical length of dynamic text on UI elements can be tricky....

  • Page 172

    140 ❘ CHAPTER 8 STYLING WITH CSSTRY IT OUT Creating Ellipsis TextTo demonstrate how to work with an ellipsis in text, follow these steps. 1. Create the following HTML document in your text editor and then save the document as BIDHJ-Ch8-Ex1.html. <html><meta name=“viewport” conte...

  • Page 173

    3. Add a class attribute to each of the three div elements, associating each with a corresponding style. <div class=“ellipsis”> this is a test this is a test this is a testthis is a test this is a test this is a testthis is a test </div><br><br><div class=“ellips...

  • Page 174

    142 ❘ CHAPTER 8 STYLING WITH CSSCreating Subtle Shadows with text-shadowIn the iOS UI, Apple makes subtle use of text shadows, particularly on buttons and larger heading text. In addition to aesthetics, text shadows are also useful in making text more readable by increasing its contrast with ...

  • Page 175

    If the image URL you provide cannot be located or the style is set to none then border-style properties are used instead.You can optionally specify one or two keywords at the end of the declaration. These determine how the images for the sides and the middle are scaled and tiled. The valid keywor...

  • Page 176

    144 ❘ CHAPTER 8 STYLING WITH CSSGradient Push Buttons with -webkit-appearanceThe -webkit-appearance property is designed to transform the appearance of an element into a variety of different controls. Safari on iOS supports just two of the possible values: push-button and button. But it is th...

  • Page 177

    You defi ne a set of background images by listing them in order after the background property name declaration. Images are rendered with the fi rst one declared on top, the second image behind the fi rst, and so on. You can also specify the background-repeat and background-position values for ...

  • Page 178

    146 ❘ CHAPTER 8 STYLING WITH CSS float: left; margin-bottom: 10px; font-family: Helvetica; font-size: 20px; text-align:center; color:white; text-shadow: rgba(0,0, 0, 0.7) 0 1px 0; line-height: 46px;}</style></head><body><div style=“margin...

  • Page 179

    CREATING CSS-BASED IOS BUTTONSUsing -webkit-border-image, you can create buttons that closely emulate Apple’s standard button design. This technique, inspired by developer Matthew Krivanek, involves using a pill-shaped button image (available for download aactionURI(http://www.wrox.com):t www.w...

  • Page 180

    148 ❘ CHAPTER 8 STYLING WITH CSS 3. Add an <a>link with a fullSizedButton class:<a href=“mailto:rich@company.com” class=“fullSizedButton”>Send to Client</a> 4. Save your document. 5. View it on your iPhone or iPod touch. How It WorksIn this example, the display prop...

  • Page 181

    text-fill-color-webkit-text-fill-color-website-appearance (push-button supported, but no other values are)EXERCISES 1. What experimental CSS extensions are supported by Safari on iOS? 2. For a website (not an app) would you typically use -webkit-text-size-adjust: auto or -webkit-text-size-adjust:...

  • Page 182

    150 ❘ CHAPTER 8 STYLING WITH CSSWHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSTransforming an element into a button using CSSThe -webkit-appearance property is designed to transform the appearance of an element into a button.Specify transparency in CSSUse the rgba() function, in which the ...

  • Page 183

    PART IIIApplication DevelopmentCHAPTER 9: Programming the InterfaceCHAPTER 10: Handling Touch Interactions and EventsCHAPTER 11: Special Eff ects and AnimationCHAPTER 12: Integrating with iOS ServicesCHAPTER 13: Packaging Apps as Bookmarks: Bookmarklets and Data URLsc09.indd 151c09.indd 1511...

  • Page 184

    c09.indd 152c09.indd 15212/21/11 3:44:25 PM12/21/11 3:44:25 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com

  • Page 185

    Programming the InterfaceWHAT YOU WILL LEARN IN THIS CHAPTER:Using iUI to program and style your iOS web app Developing a web app that closely resembles native iOS appsDiscovering how CSS and JavaScript can work together The previous two chapters surveyed the UI standards and guidelines that you ...

  • Page 186

    154 ❘ CHAPTER 9 PROGRAMMING THE INTERFACErelatively static, but the MLS listings need to be database-driven. Therefore, the app takes advantage of Ajax to seamlessly integrate listing data into the application.Here’s an overview of the technologies that are for iRealtor:XHTML/HTML and CSS f...

  • Page 187

    TRY IT OUT Creating the index.html of Your Web AppFollow the steps below to create the iUI-based shell for your web app. 1. Create a new blank document in your text editor. 2. Add the following HTML to your document: <!DOCTYPE html><html><head><title>iRealtor</title&g...

  • Page 188

    156 ❘ CHAPTER 9 PROGRAMMING THE INTERFACEThe iui.css adds additional styles, uses -webkit-user-select and -webkit-text-size-adjust to ensure that iRealtor behaves as an application rather than a web page. Here’s the defi nition in iui.css:body { overflow-x: hidden; -webkit-text-size-...

  • Page 189

    background-position: right center, left top; background-image: url(listArrowSel.png), url(selection.png);}ul > li > a[selected=”progress”] { background-image: url(loading.gif), url(selection.png);}The ul > li > a[selected=”progress”] style in default-theme.css is use...

  • Page 190

    158 ❘ CHAPTER 9 PROGRAMMING THE INTERFACE left: 6px; right: none;}#backButton { display: none;}The default-theme.css adds some iOS-specifi c styling: .toolbar { padding: 0 10px 10px 10px; height: 45px; background: url...

  • Page 191

    body[orient=”landscape”] .button { top: 3px; right: 3px; line-height: 26px;}#backButton { left: 6px; right: auto; padding: 0; max-width: 55px; border-width: 0 8px 0 14px; -webkit-border-image: url(backButton....

  • Page 192

    160 ❘ CHAPTER 9 PROGRAMMING THE INTERFACEThe styles for the list items and links are as follows in default-theme.css:body > ul > li { margin: 0; border-bottom: 1px solid #E0E0E0; padding: 8px 0 8px 10px; font-size: 20px; font-weight: bold; list-...

  • Page 193

    <p class=”normalText”>Lorem ipsum dolor sit amet, consect etuer adipis cing elit. Suspend isse nisl. Vivamus a ligula vel quam tinci dunt posuere. Integer venen atis blandit est. Phasel lus ac neque. Quisque at augue. Phasellus purus. Sed et risus. Suspe ndisse laoreet conse...

  • Page 194

    162 ❘ CHAPTER 9 PROGRAMMING THE INTERFACE width: auto; height: auto; padding: 12px; margin: 0; text-align: left;} }FIGURE 9-3FIGURE 9-4The panel class property displays the vertical pinstripes, which is a standard background for iOS applicati...

  • Page 195

    <li><a href=”#”>34 Main Ave, Newbury</a></li> <li><a href=”#”>33 Infinite Loop, Princeton</a></li> <li><a href=”#”>233 Melville Road, Rutland</a></li> <li><a href=”#”>320 Muffly, Slive...

  • Page 196

    164 ❘ CHAPTER 9 PROGRAMMING THE INTERFACEby providing an external URL. However, the document that is retrieved needs to be a document fragment, not a complete HTML page.iUI fully encapsulates XMLHttpRequest() for you. Therefore, when you supply an external URL in a link that does not have tar...

  • Page 197

    The design goal of the page is to provide a picture and summary details of the house listing. But, taking advantage of iPhone’s services, suppose you also want to add a button for looking up the address in the Map app and an external web link to a site providing town information. Figures 9-8 an...

  • Page 198

    166 ❘ CHAPTER 9 PROGRAMMING THE INTERFACEdata are contained in div elements with the row class. The set of div row elements is contained in a fieldset. Third, the button links to the map and external web page are assigned a whiteButton class. Figures 9-8 and 9-9 shows the page as it looks in ...

  • Page 199

    The styles for this page come from both iui.css and from a custom style I added to index.html. First, here are the row class and label styles in default-theme.css (if you recall, the fieldset is defi ned earlier in the chapter):fieldset > .row { min-height: 42px;}fieldset > .row >...

  • Page 200

    168 ❘ CHAPTER 9 PROGRAMMING THE INTERFACE -moz-border-radius: 6px; border-radius: 6px;}Code snippet index.htmlThis style rounds the corners of the image and adds a border around it, providing a much more pleasing iOS-looking effect. However, before leaving this page, notice...

  • Page 201

    search or submittal) or cancel out. Just as in any desktop environment, a dialog is ideal for form entry.iRealtor needs dialog boxes for two parts of the application—Search and the Mortgage Calculator. The user can access the Search dialog by tapping the Search button on the top toolbar. Here...

  • Page 202

    170 ❘ CHAPTER 9 PROGRAMMING THE INTERFACEThe dialog class indicates that the form is a dialog. The form elements are wrapped inside a fieldset. The action buttons for the dialog are actually defi ned as links. To be specifi c, the Cancel and Search links are defi ned as button leftButton a...

  • Page 203

    Consider the CSS styles that are used to display this dialog. From default-theme.css, there are several rules to pay attention to:body > .dialog,body[orient=”landscape”] > .dialog { top: 0px; z-index: 2; background: rgba(0, 0, 0, 0.8); padding: 0;}body > .dia...

  • Page 204

    172 ❘ CHAPTER 9 PROGRAMMING THE INTERFACEbody > .dialog > fieldset > div.row > label { position: absolute; margin: 0; padding: 10px 8px 10px 12px; font-weight: normal; line-height: 1em; font-size: 12px; color: #666;}bod...

  • Page 205

    onblur=”calc()”name=”termZip”/> </div> <div class=”row”> <label for=”payment”>Monthly payment</label> <input class=”calc” type=”text” readonly=”true” id=”payment”/> </div>...

  • Page 206

    174 ❘ CHAPTER 9 PROGRAMMING THE INTERFACEThis routine performs a standard mortgage calculation and returns the results to the payment and total input fi elds. Figures 9-16 and 9-17 show the calculator in action on iPhone.FIGURE 9-16FIGURE 9-17Listing 9-1 provides a full code view of the inde...

  • Page 207

    { total = total * (1 + ir); } var mp = amt * ir / ( 1 - (1/total)); document.getElementById(‘payment’).value = Math.round(mp*100)/100; document.getElementById(‘total’).value = Math.round(mp * term *100)/100 ;}</script><style>.panelImage{ border: ...

  • Page 208

    176 ❘ CHAPTER 9 PROGRAMMING THE INTERFACE <li><a href=”#”>1 One Road, Zooly</a></li></ul> <!-- Calculator --> <form id=”calculator” class=”dialog”> <div class=”toolbar”> <h1>Mortgage Calculator</h1> ...

  • Page 209

    Donec quis eros eu erat ullamc orper euismod. Nam aliquam turpis. Nunc convallis massa non sem. Donec non odio. Sed non lacus eget lacus hend rerit sodales.</p> </div> </fieldset></div> <!-- House Listing --> <div id=”406509171” title=”20 May L...

  • Page 210

    178 ❘ CHAPTER 9 PROGRAMMING THE INTERFACE class=”dialog” name=”searchForm” action=”search.php” method=”GET”> <div class=”toolbar”> <h1>Search Listings</h1> <a class=”button leftButton” type=”cancel”>Cancel</a> ...

  • Page 211

    The following example is iui.js. The iui.js consists of the object window.iui, three listeners for load and click events, and several supporting routines. All of the JavaScript code is enclosed in an anonymous function with several constants and variables defi ned:(function() {var slideSpeed = 2...

  • Page 212

    180 ❘ CHAPTER 9 PROGRAMMING THE INTERFACEThe getSelectedPage() method of the JSON object iui is called to get the selected page—the block element node that contains a selected=“true” attribute. This node is then passed to iui.showPage(), which is the core routine to display content.setT...

  • Page 213

    The currentDialog semi-global variable is evaluated to determine whether a dialog is already displayed. (currentDialog is set in the showDialog() function.) This variable would be null when the document initially loads because of the line var currentDialog = null; earlier in iui.js, which runs ev...

  • Page 214

    182 ❘ CHAPTER 9 PROGRAMMING THE INTERFACEThe updatePage() function is responsible for updating the pageHistory array, which is required for enabling the Safari Back button to work even in single-page web apps, such as iRealtor. The value of the node’s title attribute is then assigned to be ...

  • Page 215

    Handling Link ClicksBecause most of the user interaction with an iOS web app is tapping the interface to navigate the application, the event listener for link clicks is, in many ways, the “mission control center” for iui.jss. Check out the code:addEventListener(“click”, function(event){ ...

  • Page 216

    184 ❘ CHAPTER 9 PROGRAMMING THE INTERFACE followAjax(link, null); } else return; event.preventDefault(); } var div = findParent(event.target, “div”); if (div && hasClass(div, “toggle”)) { div...

  • Page 217

    submitForm(form); }; form.onclick = function(event) { if (event.target == form && hasClass(form, “dialog”)) cancelDialog(form); };}The showForm() function assigns event handlers to the onsubmit and onclick events of the form. When a form is su...

  • Page 218

    186 ❘ CHAPTER 9 PROGRAMMING THE INTERFACEEXERCISES 1. Using iUI, how do you defi ne multiple screens inside the same HTML page? 2. How do you defi ne a navigation list that is replaced by new data coming from an Ajax source? 3. When evaluating frameworks, such as iUI, how important is it t...

  • Page 219

    WHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSDefi ning a multi-screen, single page web appFrameworks like iUI and jQuery Mobile enable you to defi ne full apps inside a single HTML fi leUsing iUI frameworkCreating your UI and logic in HTML and linking in the framework’s CSS and JS fi le...

  • Page 220

    c09.indd 188c09.indd 18812/21/11 3:45:07 PM12/21/11 3:45:07 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com

  • Page 221

    Handling Touch Interactions and EventsWHAT YOU WILL LEARN IN THIS CHAPTER:How to respond to basic touch eventsHow to respond to orientation event changesHow to customize key eventsAn essential part of any web application is the ability to respond to events triggered by the user or by a condition ...

  • Page 222

    190 ❘ CHAPTER 10 HANDLING TOUCH INTERACTIONS AND EVENTSGesture events: Gesture events are combinations of touch events that also support scaling and rotation information. The mouse emulation events are the ones that you’ll likely be working with for most typical interactions inside your web...

  • Page 223

    Mouse-Emulation Events ❘ 191GESTUREEVENT(S) FIREDDESCRIPTIONDouble-tapNoneTapClickable element: mouseover, mousemove, mousedown, mouseup, clickNon-clickable element: NoneIf mouseover or mousemove changes page content then the remaining events in the sequence are canceled. TABLE 10-2: Two-Finger...

  • Page 224

    192 ❘ CHAPTER 10 HANDLING TOUCH INTERACTIONS AND EVENTSClick-Enabling ElementsIf the element you are working with is not considered “clickable” by Safari on iOS then all mouse-related events for it are ignored. However, there are certain situations in which this can be problematic, such a...

  • Page 225

    Mouse-Emulation Events ❘ 193becomes the active page, JavaScript events (including polling events created with setInterval()) are not fi red. However, the unload event of the window object is triggered when the user loads a new page in the current window.Table 10-4 lists the events that are ful...

  • Page 226

    194 ❘ CHAPTER 10 HANDLING TOUCH INTERACTIONS AND EVENTSTOUCH EVENTSIn addition to the mouse-emulation events, Safari on iOS also captures additional touch-related sequences of events for each fi nger that touches the screen surface. A touch event begins when a fi nger touches the screen sur...

  • Page 227

    Touch Events ❘ 195The items inside these arrays are Touch objects (shown in Table 10-7) that provide the information related to the touch events.TABLE 10-7: Touch Object PropertiesPROPERT YDESCRIPTIONclientXx coordinate of the object relative to the full viewport (not including scroll off set)c...

  • Page 228

    196 ❘ CHAPTER 10 HANDLING TOUCH INTERACTIONS AND EVENTS { // do something to begin } else if (event.type == “touchmove”) { // do something on move } else if (event.type == “touchend”) { // do something to end } else { // do ...

  • Page 229

    Detecting an Orientation Change ❘ 197TRY IT OUT Detecting an Orientation ChangeFor a demonstration of how to detect an orientation change in your app, follow the steps below. 1. Create the following HTML document in your text editor and then save the document as BIDHJ-Ch10-Ex2.html. <!DOCTY...

  • Page 230

    198 ❘ CHAPTER 10 HANDLING TOUCH INTERACTIONS AND EVENTS break; } document.getElementById(“mode”).innerHTML = str; }</script>Code snippet BIDHJ-Ch10-Ex2.htmlHow It WorksAn onorientationchange attribute is added to the body element and assigned the JavaScript fu...

  • Page 231

    Detecting an Orientation Change ❘ 199orientationChangeHandler() function by updating the orient attribute of the body element based on the current orientation and then updating the active CSS styles off of that attribute value.TRY IT OUT Changing a Style Sheet When Orientation ChangesFor a demo...

  • Page 232

    200 ❘ CHAPTER 10 HANDLING TOUCH INTERACTIONS AND EVENTS margin: 0; padding: 0; width: 320px; height: 416px; font-family: Helvetica; -webkit-user-select: none; cursor: default; -webkit-text-size-adjust: none; background: #000000; ...

  • Page 233

    Detecting an Orientation Change ❘ 201 text-align: center; line-height: 42px; } /* Styles adjusted based on orientation */ body[orient=’portrait’] .container { height: 436px; } body[orient=’landscape’] .container { height: 258px; ...

  • Page 234

    202 ❘ CHAPTER 10 HANDLING TOUCH INTERACTIONS AND EVENTS document.getElementById(‘bottomToolbar’).offsetTop +’px’; }, 100); setTimeout(function() { window.scrollTo(0, 1); }, 100); ...

  • Page 235

    Changing Element Positioning Based on Orientation Change ❘ 203CHANGING ELEMENT POSITIONING BASED ON ORIENTATION CHANGEWhen you begin to understand the basic interaction between an orientationChangeHandler() function and orientation-dependent styles, you can begin to dynamically position element...

  • Page 236

    204 ❘ CHAPTER 10 HANDLING TOUCH INTERACTIONS AND EVENTSTRAPPING FOR KEY EVENTS WITH THE ON-SCREEN KEYBOARDAs with an ordinary web page, you can validate keyboard input by trapping the keydown event. To illustrate, suppose you have an input fi eld in which you want to prevent the user from en...

  • Page 237

    Trapping for Key Events with the On-Screen Keyboard ❘ 205EXERCISES 1. What are the three major types of touch events? 2. Do you need to code all touch events in your web app? 3. What event do you trap to handle screen orientation changes?Answers to the Exercises can be found in the Appendix.c...

  • Page 238

    206 ❘ CHAPTER 10 HANDLING TOUCH INTERACTIONS AND EVENTSWHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSHandling mouse-like events No events trigger until the user’s fi nger leaves the touch screen.Design your app to respond to click events rather than the other mouse events.Responding to ...

  • Page 239

    Special Eff ects and AnimationWHAT YOU WILL LEARN IN THIS CHAPTER:Creating gradients using CSS and JavaScript Adding shadows and refl ectionsCreating animations with JavaScript The strengths of Safari on iOS as a development platform are evident when you begin to explore the capabilities you hav...

  • Page 240

    208 ❘ CHAPTER 11 SPECIAL EFFECTS AND ANIMATIONThe from() and to() functions indicate the starting and ending colors, and the color-stop() function defi nes a color at a particular point on the gradient.For example, the following style can be added to a div or other block element to create a ...

  • Page 241

    To create a radial gradient, you use the following syntax: -webkit-gradient(radial, innerCenter, innerRadius, outerCenter, outerRadius, from(color), color-stop(percent, color), to(color)); The innerCenter defi nes the x, y coordinate of the center of the inner circle that starts the gradient....

  • Page 242

    210 ❘ CHAPTER 11 SPECIAL EFFECTS AND ANIMATIONCreating Gradients with JavaScriptIf you prefer scripting, you can also create both linear and radial gradients by using the following methods of the context object:createLinearGradient(x1,y1,x2,y2) creates a gradient from the starting point (x1,y...

  • Page 243

    context.fillStyle = lg; context.strokeStyle=“#666666”; context.lineWidth=“.5”; context.fillRect(10,10,250,250); context.strokeRect(10,10,250,250);}</script>Code snippet BIDHJ-Ch11-Ex1.html 3. Add an onload event handler to the body tag and save the fi le: <body onload=”d...

  • Page 244

    212 ❘ CHAPTER 11 SPECIAL EFFECTS AND ANIMATIONFIGURE 11-6ADDING SHADOWS Shadow effects are a common visual technique you can use to enhance the look of your page element. Using JavaScript, the context object provides four properties that you can use for defi ning shadows on the canvas: shado...

  • Page 245

    img3.src = ‘images/nola.jpg’; img3.onload = function() { context.drawImage( img3, 20, 30 ); } }The four bold lines of code defi ne a blurred black shadow that is offset 5px from the canvas. Figure 11-7 shows the result. ADDING REFLECTIONS If you have used the CoverFlow view in th...

  • Page 246

    214 ❘ CHAPTER 11 SPECIAL EFFECTS AND ANIMATIONRefl ections on black backgrounds can be especially visually compelling on an iOS viewport. The following example shows a refl ection on black (see Figure 11-9): <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://w...

  • Page 247

    <body><img src=”images/nola.jpg” class=”reflectedImage”/></body></html>If you want to add refl ections using JavaScript, I recommend checking out several open source libraries that use canvas programming to create sophisticated charts and image effects, such as re...

  • Page 248

    216 ❘ CHAPTER 11 SPECIAL EFFECTS AND ANIMATIONYou are not limited to using a masked image, however. You can also use a -webkit-gradient() function to achieve a faded mask effect. For example, consider this style: .fadeToWhite { -webkit-mask-image:-webkit-gradient(linear, left top, ...

  • Page 249

    CREATING TRANSFORM EFFECTS You can use three methods of a canvas context object to transform the state of a canvas:translate(x, y) changes the origin coordinate (0, 0) of the canvas.rotate(angle) rotates the canvas around the current origin of a specifi ed number of radians.scale(x, y) adjusts t...

  • Page 250

    218 ❘ CHAPTER 11 SPECIAL EFFECTS AND ANIMATION context.rotate(.15*r); context.globalAlpha=i*.33; context.drawImage(img, 20, 20); r+=1; } }}Figure 11-14 shows the layered result. Note the difference in transparency of the bottommost image to the topmost.FIGURE 11-13FIGU...

  • Page 251

    can be ideal. However, any such excitement needs to be kept in check. Perhaps the chief shortcoming of canvas drawing in JavaScript is that you need to repaint the entire canvas for each frame of your animation. As a result, complex animations are at risk for being jerky on the mobile device. Tha...

  • Page 252

    220 ❘ CHAPTER 11 SPECIAL EFFECTS AND ANIMATION context.beginPath(); context.arc(50+p,50+p,30,0, 360, false); context.fill(); p+=1;}</script>Code snippet BIDHJ-Ch11-Ex2.html 3. Add an onload event handler to the body tag and save the fi le: onload=”init()”Code snippet BIDHJ-Ch...

  • Page 253

    EXERCISES 1. When you draw onto a canvas, what is the key object that you work with? 2. What CSS property do you use to create a refl ection? 3. What do the context object’s save() and restore() methods do? Answers to the Exercises can be found in the Appendix.Creating Animations ❘ 221c11...

  • Page 254

    222 ❘ CHAPTER 11 SPECIAL EFFECTS AND ANIMATIONWHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSCreating gradientsWith CSS, use –webkit-gradient() functionWith JavaScript, use createLinearGradient() or createRadialGradient()Adding shadowsUse the following context object properties: shadowCol...

  • Page 255

    Integrating with iOS ServicesWHAT YOU WILL LEARN IN THIS CHAPTER:Tapping into iOS services and built-in apps within your appSending email and SMS text messagesMapping href links to iOS servicesOne of the most intriguing ideas when creating a web app for iOS is integrating the application with cor...

  • Page 256

    224 ❘ CHAPTER 12 INTEGRATING WITH IOS SERVICESFIGURE 12-1PHONE NUMBERSTelephone links can go beyond ordinary numbers. iPhone provides partial support for the RFC 2086 protocol (www.ietf.org/rfc/rfc2806.txt), which enables you to develop some sophisticated telephone-based URLs. For example, th...

  • Page 257

    Making Phone Calls from Your App ❘ 225TRY IT OUT Creating a Call Link For a demonstration of how to call from inside of your web app, use the following steps. 1. Create the following HTML document in your text editor and then save the document as BIDHJ-Ch12-Ex1.html. <!DOCTYPE html PUBLIC ...

  • Page 258

    226 ❘ CHAPTER 12 INTEGRATING WITH IOS SERVICESFigure 12-2 shows the page that displays. How It WorksThe a links use the tel: protocol in the href value. To degrade gracefully when running on iPod touch or iPad, the onclick handler ensures that the link works only if running on iPhone by evalu...

  • Page 259

    Sending Emails ❘ 227If you’ve worked with HTML pages at all before, you are probably quite familiar with mail links. However, here’s what happens when an email link is clicked on an iOS device. When the user presses this link, Mail opens and a new message window is displayed, as shown in Fi...

  • Page 260

    228 ❘ CHAPTER 12 INTEGRATING WITH IOS SERVICESTRY IT OUT Creating a Preformatted Email For a demonstration of how to create your own predefi ned email in your web app, follow these steps. 1. Create the following HTML document in your text editor and then save the document as BIDHJ-Ch12-Ex2....

  • Page 261

    SENDING SMS MESSAGESYou can send SMS messages using the sms protocol in much the same way as you integrate email. For example, the following code launches the SMS application, addressing a text message to 765-545-1212: <a href=”sms:765-545-1212” onclick=”return (navigator.userA...

  • Page 262

    230 ❘ CHAPTER 12 INTEGRATING WITH IOS SERVICESNOTE You cannot specify whether to display the map in Map or Satellite view. The location you specify displays in the last selected view of the user.<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/...

  • Page 263

    Pointing on Google Maps ❘ 231Here’s the syntax used for a full street address:<a href=“http://maps.google.com/maps?q=1000+Massachusetts+Ave,+Boston,+MA”> Jack Armitage’s Office</a>TRY IT OUT Linking to the Maps App How about rolling up your sleeves and diving further into ...

  • Page 264

    232 ❘ CHAPTER 12 INTEGRATING WITH IOS SERVICESHow It WorksAs you can see, the example shows three different ways in which you can use Google Maps links in your web app. When the address shown previously is located in Google Maps, the marker is generically labeled 1000 Massachusetts Ave Boston...

  • Page 265

    Pointing on Google Maps ❘ 233EXERCISES 1. When creating a web app that accesses iOS services, why would you want to identify the type of iOS device that is running the app? 2. What URL protocols should you use for the following links: a phone number, email message, and SMS message? 3. Do iPhon...

  • Page 266

    234 ❘ CHAPTER 12 INTEGRATING WITH IOS SERVICESWHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSMaking phone calls from your appUse the tel: protocol for making phone calls.Sending emailsUse the mailto: protocol for creating an email message and displaying the Mail app.Add optional attributes ...

  • Page 267

    Packaging Apps as Bookmarks: Bookmarklets and Data URLsWHAT YOU WILL LEARN IN THIS CHAPTER:Discovering what bookmarklets areCreating offl ine apps using bookmarkletsEncoding your images and source codeBecause iOS web apps function inside the Safari environment, there are two seemingly obvious re...

  • Page 268

    236 ❘ CHAPTER 13 PACKAGING APPS AS BOOKMARKS: BOOKMARKLETS AND DATA URLSin offl ine mode. You probably won’t want to package heavy-duty enterprise-level apps in a bookmarklet, but for smaller apps, it could be something to consider. WORKING WITH BOOKMARKLETSA bookmarklet is JavaScript stor...

  • Page 269

    Working with Bookmarklets ❘ 237 2. When the functionality works as expected, drag the javascript: URL from your Address box onto your Bookmarks bar in Safari. If you are going to have a set of bookmarklets, you may wish to create a special Bookmarklets folder to store these scripts. Or, if your...

  • Page 270

    238 ❘ CHAPTER 13 PACKAGING APPS AS BOOKMARKS: BOOKMARKLETS AND DATA URLSWhen executed, the script adds a target=”_blank” attribute to all links on the page and adds a small “new window” icon after the link (see Figure 13-2).An iOS user can then use this self-contained “applet” on ...

  • Page 271

    Storing an Application in a Data URL ❘ 239</body></html>“);newDoc.close();var pre = newDoc.body.appendChild(newDoc.createElement(“pre”)); pre.appendChild(newDoc.createTextNode(document.documentElement.innerHTML));Code snippet ViewSource.jsFIGURE 13-3STORING AN APPLICATION IN A...

  • Page 272

    240 ❘ CHAPTER 13 PACKAGING APPS AS BOOKMARKS: BOOKMARKLETS AND DATA URLS(2) package up a snapshot of the data and put it in a form accessible from a client script. However, in most cases in which you need to use cached data, you should use HTML5 offl ine storage instead (see Chapter 15). The...

  • Page 273

    Developing a Data URL App ❘ 241<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html xmlns=“http://www.w3.org/1999/xhtml”><head><head><title>Tipster</title><meta name=“viewp...

  • Page 274

    242 ❘ CHAPTER 13 PACKAGING APPS AS BOOKMARKS: BOOKMARKLETS AND DATA URLS 2. Add the following JavaScript code in the page’s header: <script type=“application/x-javascript”>addEventListener(‘load’, function() { setTimeout(function() { window.scrollTo(0, 1); }, 100); }, ...

  • Page 275

    Developing a Data URL App ❘ 243 border-bottom: 1px solid #2d3642; border-top: 1px solid #6d84a2; padding: 10px; height: 45px; background: url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAArCAIAAAA2QHWOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUCNddjDEOg...

  • Page 276

    244 ❘ CHAPTER 13 PACKAGING APPS AS BOOKMARKS: BOOKMARKLETS AND DATA URLS 6. Upload BIDHJ-Ch13-Ex1.html and then click Generate to create an encoded URL, which is displayed in the URL box of Safari (see Figure 13-5). FIGURE 13-5 7. Drag the URL onto your Bookmarks bar. 8. Sync up with your iO...

  • Page 277

    Developing a Data URL App ❘ 245The fi nal steps involve getting the self-contained app into a form that is accessible when the browser is offl ine. In the example, I used the data: URI Kitchen to do the conversion, but there are several ways to automate this process for you:Url2iphone (www.so...

  • Page 278

    246 ❘ CHAPTER 13 PACKAGING APPS AS BOOKMARKS: BOOKMARKLETS AND DATA URLSThe following Perl syntax turns HTML into a data URL:perl -0777 -e ‘use MIME::Base64; $text = <>; $text = encode_base64($text); $text =~ s/\s+//g; print “data:text/html;charset=utf-8;base64,$text\n”;’In PH...

  • Page 279

    Developing a Data URL App ❘ 247WHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSWhat is a bookmarklet?A bookmarklet is JavaScript stored as a URL and saved as a bookmark in the browser.Storing an app in a data URLYou can store the contents of a page and its assets inside an encoded data URL.c13...

  • Page 280

    c13.indd 248c13.indd 24812/21/11 3:48:18 PM12/21/11 3:48:18 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com

  • Page 281

    PART IVAdvanced Programming TechniquesCHAPTER 14: Programming the CanvasCHAPTER 15: Offl ine ApplicationsCHAPTER 16: Building with Web App FrameworksCHAPTER 17: Bandwidth and Performance OptimizationsCHAPTER 18: Debug and Deployc14.indd 249c14.indd 24912/21/11 3:48:42 PM12/21/11 3:48:42 ...

  • Page 282

    c14.indd 250c14.indd 25012/21/11 3:48:45 PM12/21/11 3:48:45 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com

  • Page 283

    Programming the CanvasWHAT YOU WILL LEARN IN THIS CHAPTER:Identifying the iOS user agentDrawing rectangles and other shapesDrawing images onto a canvas The unique platform capabilities of the iOS enable developers to create innovative applications inside Safari that go beyond the normal “web ap...

  • Page 284

    252 ❘ CHAPTER 14 PROGRAMMING THE CANVASThe Safari user agent string for iPhone closely resembles the user agent for Safari on other platforms. However, it contains an iPhone platform name and the mobile version number. Depending on the version of Safari on iOS, it looks something like this:Mo...

  • Page 285

    Identifying the User Agent ❘ 253<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html xmlns=“http://www.w3.org/1999/xhtml”><head><title>User Agent Detection via WebKit Script</title>&l...

  • Page 286

    254 ❘ CHAPTER 14 PROGRAMMING THE CANVASThe switch statement then evaluates the mobile devices. If it is an iPhone, then it checks to see if minSupport is true. If it is true then a real application would begin here. If minSupport is false then the user is notifi ed to update his or her iPhon...

  • Page 287

    Getting a Context ❘ 255As the fi rst step in working with the canvas, you fi rst need to get a 2d context object. This object, which is responsible for managing the canvas’ graphics state, is obtained by calling the getContext() method of the canvas object:var canvas = document.GetElementBy...

  • Page 288

    256 ❘ CHAPTER 14 PROGRAMMING THE CANVASPROPERT YDESCRIPTIONshadowOffsetYSpecifi es the vertical distance of the shadow from the source.strokeStyleDefi nes the CSS color or style (gradient, pattern) when stroking paths.textAlignDetermines the text alignment.textBaselineSpecifi es the baseli...

  • Page 289

    Drawing Other Shapes ❘ 257The full page source is shown in the following code:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html xmlns=“http://www.w3.org/1999/xhtml”><head><title>Draw Box...

  • Page 290

    258 ❘ CHAPTER 14 PROGRAMMING THE CANVASstroke() draws a line along the current path.fill() closes the current path and paints the area within it. (Because fill() closes the path automatically, you don’t need to call closePath() when you use it.)lineTo(x,y) adds a line segment from the curre...

  • Page 291

    Drawing an Image ❘ 259arc(x, y, radius, startAngle, endAngle, clockwise) adds an arc to the current subpath using a radius and specifi ed angles (measured in radians).arcTo(x1, y1, x2, y2, radius) adds an arc of a circle to the current subpath by using a radius and tangent points.quadratricCur...

  • Page 292

    260 ❘ CHAPTER 14 PROGRAMMING THE CANVASThe second method enables you to specify the dimensions of the image with the w and h arguments:context.drawImage(image, x, y, width, height)TRY IT OUT Drawing an Image onto the CanvasTo draw an image onto the canvas, use the following steps. 1. Create ...

  • Page 293

    Drawing an Image ❘ 261How It WorksWhen the document is loaded, it calls the drawImg() function. In the function, context and img objects are created. However, the drawImage() method of the context object is not called until after the image is loaded. Figure 14-4 shows the image displayed inside...

  • Page 294

    262 ❘ CHAPTER 14 PROGRAMMING THE CANVAScoordinate (151, 63). You then paint the same sized rectangle at coordinate (10, 10) on the canvas. Here is the updated code:function drawImg(){ var canvas = document.getElementById(‘myCanvas’); var context = canvas.getContext(‘2d’); var img =...

  • Page 295

    Drawing an Image ❘ 263You can then integrate the outputted encoded string into the script code as the image object’s source (much of the encoded text for this example has been removed for space reasons):function drawImg(){var img_src = ‘data:image/jpeg;base64,’+‘/9j/4AAQSkZJRgABAgAAZABk...

  • Page 296

    264 ❘ CHAPTER 14 PROGRAMMING THE CANVAS‘w4l27YfQoySSTmTxS0XONXF1AKmtAKDwCTCq5TqDM0jm6SQRliATQDTnRABRKEqG2wwhF3euK5AAkJT7’+‘lyRACJOK4lCD5jjkgQYxNEkhp5R4pNWkVGaCpOJzKcBIuCRKkOaBirqmlOGdF1SuwSGenAp+U/IPco4K’+‘duHhls9xya0krZHP0Kbc7k9Nlow4yCslPw8vFdZQgDLioUTnTSumdm817hwVrbUHgsnlnVVbak6Bo...

  • Page 297

    Creating an Image Pattern ❘ 265context.arc(95,90,60,0, 2*pi, 0);context.fill();// Smaller circle—30% transparencycontext.fillStyle = “rgba(0,0,255, 0.3)”;context.beginPath();context.arc(135,120,40,0, 2*pi, 0);context.fill();}Alternatively, you can set the context.globalAlpha property to s...

  • Page 298

    266 ❘ CHAPTER 14 PROGRAMMING THE CANVAS var pImg = new Image(); pImg.src = ‘images/tech.jpg’; // call when image is fully loaded pImg.onload = function() { var pat = context.createPattern(pImg,’repeat’); context.fillStyle = pat; context.fillRect(0,0,300,300)...

  • Page 299

    Creating an Image Pattern ❘ 267EXERCISES 1. How can you identify the user agent of an iPad? 2. What is the diff erence between stroking and fi lling? 3. What is a drawing path composed of? 4. Why would you consider drawing an encoded image onto a canvas? Answers to the Exercises can be fou...

  • Page 300

    268 ❘ CHAPTER 14 PROGRAMMING THE CANVASWHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSIdentifying an iOS device in the user agent iOS devices have similar user agent strings, but distinctively identify whether it is an iPhone, iPad, or iPod touch.Creating a canvas on an HTML pageA canvas el...

  • Page 301

    Offl ine ApplicationsWHAT YOU WILL LEARN IN THIS CHAPTER:Storing fi les locally in an offl ine cache Storing data on the client using key-value storage Accessing a local SQL database with JavaScriptIn the past, one of the key differences between native iOS apps and web apps was the ability of ...

  • Page 302

    270 ❘ CHAPTER 15 OFFLINE APPLICATIONSto determine whether or not to update the cache, not its last-saved date or other fi le attribute.) However, if you want to force an update, you can do so programmatically through JavaScript. Create a Manifest FileTo enable the offl ine cache, you need to...

  • Page 303

    HTML 5 Offl ine Application Cache ❘ 271After you have created the manifest fi le, you need to save it with a .manifest extension. In order for offl ine cache to work correctly, you need to be sure that your web server serves up the manifest fi le correctly. Because HTML 5 offl ine cache is...

  • Page 304

    272 ❘ CHAPTER 15 OFFLINE APPLICATIONS}else if (window.applicationCache.status == window.applicationCache.IDLE){ alert(“No changes are necessary.”); }else { alert(“Let’s do something with the cache.”); }You can assign event handlers to the applicationCache object based on the re...

  • Page 305

    HTML 5 Offl ine Application Cache ❘ 273The update() method updates the cache and then swapUpdate() replaces the old cache with the new cache you successfully downloaded.Checking Connection StatusWhen you use application cache, you may have some online processing that you want to disable if you...

  • Page 306

    274 ❘ CHAPTER 15 OFFLINE APPLICATIONS localeCache.addEventListener(“progress”, cacheProgressHandler, false); // Swap cache localeCache.addEventListener(“updateready”, cacheUpdateReadyHandler, false); // Hide progress indicator localeCache.addEventListener(“cached”,...

  • Page 307

    HTML 5 Offl ine Application Cache ❘ 275 3. Add an onload event handler to the body tag: <body onload=”init()”>Code snippet BIDHJ-Ch15-Ex1.html 4. Add a manifest declaration to the HTML tag and then save the document: <html manifest=”BIDHJ-Ch15-Ex1.manifest” xmlns=”http://www...

  • Page 308

    276 ❘ CHAPTER 15 OFFLINE APPLICATIONSUSING KEY-VALUE STORAGE In addition to local cache, Safari on iOS also supports HTML 5 key-value storage as a way to provide persistent storage on the client either permanently or within a given browser session. Key-value storage bears several obvious simil...

  • Page 309

    Using Key-Value Storage ❘ 277Whenever you interact with the local storage database, a storage event is dispatched from the body object. Therefore, to handle this event, you can attach a listener to the body: document.body.addEventListener(“storage”, storageHandler, false);The event object t...

  • Page 310

    278 ❘ CHAPTER 15 OFFLINE APPLICATIONSIf the key value that you request is not located, then a null value is returned:if (sessionStorage.accessCode != null){ var valid = processCode(sessionStorage.accessCode); }Deleting Key-value DataYou can remove a specifi c key-value pair or clear all ke...

  • Page 311

    Using Key-Value Storage ❘ 279<option value=”RI”>Rhode Island</option><option value=”VT”>Vermont</option></select></div><p><button onclick=’clearAll()’>Clear All</button><br /></p><div id=”statusDiv”>Start se...

  • Page 312

    280 ❘ CHAPTER 15 OFFLINE APPLICATIONS { if (sessionStorage) { sessionStorage.setItem(value, document.getElementById(value).selectedIndex); setStatus(document.getElementById(value).id + “ saved as a session key....

  • Page 313

    Using Key-Value Storage ❘ 281 “url=” + event.url + “, “ + “key=” + event.key + “, “ + “new value=” + event.newValue + “, “ + “old value=” + event.oldValue + “, “ + ...

  • Page 314

    282 ❘ CHAPTER 15 OFFLINE APPLICATIONSFIGURE 15-6FIGURE 15-5FIGURE 15-4When you are working with key-value storage, I recommend using the Web Inspector that is provided with the Windows and Mac versions of Safari (you can fi nd it on the Develop menu). The Databases panel (see Figure 15-7) ena...

  • Page 315

    Going SQL with the JavaScript Database ❘ 283GOING SQL WITH THE JAVASCRIPT DATABASEWhen you begin to develop more substantial web applications, you may easily have local storage needs that go beyond simple caching and key-value pair persistence. Perhaps your app stores application data locally a...

  • Page 316

    284 ❘ CHAPTER 15 OFFLINE APPLICATIONS { for (var i=0; i<result.rows.length; i++) { var r = results.rows.item(i); alert(r[“first_name”] + “ was retrieved from the database.”); }}function errorHandler(error){ alert(“An error occurred...

  • Page 317

    Going SQL with the JavaScript Database ❘ 285WHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSEnabling offl ine cacheCreate a manifest fi le that lists the fi les you want to store offl ine.Loading local assets Access your offl ine cache using the window.applicationCache object. Saving and ...

  • Page 318

    c15.indd 286c15.indd 28612/22/11 8:58:00 AM12/22/11 8:58:00 AMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com

  • Page 319

    Building with Web App FrameworksWHAT YOU WILL LEARN IN THIS CHAPTER:Exploring the jQuery Mobile frameworksUsing iWebKit to create a web appWhen the iPhone was fi rst introduced, you had few options for creating web apps for Apple’s mobile device. You could use the original iUI .js library, or ...

  • Page 320

    288 ❘ CHAPTER 16 BUILDING WITH WEB APP FRAMEWORKSUSING jQUERY MOBILEIf you worked through the Hello World example in Chapter 5, you already have an introduction to jQuery Mobile. jQuery Mobile is built on the popular jQuery framework and makes heavy use of normal HTML mixed with CSS and JavaS...

  • Page 321

    </script></head> <body> <div data-role=”page”> <div data-role=”header”> <h1>Page Title</h1> </div><!-- /header --> <div data-role=”content”> <p>Page content goes here.</p> ...

  • Page 322

    290 ❘ CHAPTER 16 BUILDING WITH WEB APP FRAMEWORKS </div><!-- /header --> <div data-role=”content”> </div><!-- /content --> <div data-role=”footer”> <h4>Operation Classroom</h4> </div><!-- /footer -->...

  • Page 323

    <h2>Priorities</h2> <ul> <li>Renovate the boarding school for the Junior Secondary School. The boarding home will container 24 classrooms. This will enable the school to move to a single shift instead of a double shift ...

  • Page 324

    292 ❘ CHAPTER 16 BUILDING WITH WEB APP FRAMEWORKSFigures 16-1 and 16-2 show the results. FIGURE 16-1FIGURE 16-2Although the look of the app is perfectly acceptable, suppose you want your jQuery Mobile web app to emulate the native look and feel of iOS. Fortunately, there’s a Github-based jQ...

  • Page 325

    6. Add the following style sheet link below the jQuery Mobile style sheet link: <link rel=”stylesheet” href=”ios_inspired/styles.css” />Code snippet BIDHJ-Ch16-Ex2.html 7. Save the fi le. How It WorksIn this exercise, you add a link to the iOS Inspired style sheet, which trans...

  • Page 326

    294 ❘ CHAPTER 16 BUILDING WITH WEB APP FRAMEWORKSAn iWebKit web app begins with the following structure. Head: viewport meta tag and any other desired tags for mobile app development Links to the iWebKit CSS style sheet inside your folder structureLinks to the iWebKit JavaScript library, also...

  • Page 327

    </head><body><div id=”topbar”></div><div id=”content”></div><div id=”footer”> <!-- Support iWebKit by sending us traffic; please keep this footer on your page, consider it a thank you for my work :-) --> <a class=”noeffec...

  • Page 328

    296 ❘ CHAPTER 16 BUILDING WITH WEB APP FRAMEWORKS </div><div id=”content”></div><div id=”footer”> <!-- Support iWebKit by sending us traffic; please keep this footer on your page, consider it a thank you for my work :-) --> <a class=”noe...

  • Page 329

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”><head><meta content=”yes” name=”apple-mobile-web-app-capable” /><meta content=”index,follow...

  • Page 330

    298 ❘ CHAPTER 16 BUILDING WITH WEB APP FRAMEWORKS institutions of learning in Sierra Leone. Plans are to renovate the boarding house into classrooms for the Junior Secondary School.</p> <p> <img src=”http://www.gbgm-umc.org/operationclass...

  • Page 331

    FIGURE 16-8FIGURE 16-9FIGURE 16-10FIGURE 16-11Using iWebKit ❘ 299c16.indd 299c16.indd 29912/21/11 3:50:25 PM12/21/11 3:50:25 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com

  • Page 332

    300 ❘ CHAPTER 16 BUILDING WITH WEB APP FRAMEWORKSEXERCISES 1. Why is cross-platform support an important decision point in terms of which framework you might use? 2. Which of the frameworks enables you to contain multiple pages inside the same HTML fi le? Answers to the Exercises can be fo...

  • Page 333

    WHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSFeatures of jQuery MobileCross-platform support for iOS, Android, BlackBerry, Windows Phone 7, and moreBuilt-in support for touch events, page transitions, back button support, and themingFeatures of iWebKitDedicated to iOS look and feel Support fo...

  • Page 334

    c16.indd 302c16.indd 30212/21/11 3:50:26 PM12/21/11 3:50:26 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com

  • Page 335

    Bandwidth and Performance OptimizationsWHAT YOU WILL LEARN IN THIS CHAPTER:Shrinking the size of the assets of your appOptimizing performance of your JavaScriptWriting effi cient code In a decade where broadband is now the norm, many web developers have allowed their sites and applications to be...

  • Page 336

    304 ❘ CHAPTER 17 BANDWIDTH AND PERFORMANCE OPTIMIZATIONSreadability of the code that they are optimizing. The second camp, perhaps best described as relaxed optimizers, are interested in optimizing their applications. But they are not interested in sacrifi cing code readability and manageabi...

  • Page 337

    Best Practices to Minimize Bandwidth ❘ 305Consider using gzip compression when you serve your application. (See the following section for more on compression options.)Consider using a JavaScript compressor on your JavaScript libraries. You could then work with a normal, unoptimized JavaScript l...

  • Page 338

    306 ❘ CHAPTER 17 BANDWIDTH AND PERFORMANCE OPTIMIZATIONSConsider using shorter CSS style names and JavaScript variable and function names. After all, the longer your identifi ers are, the more space your fi les take. At the same time, do not make your identifi ers so short that they become...

  • Page 339

    Compressing Your Application ❘ 307JavaScript Code CompressionIn addition to reducing the total fi le size of your website, another technique is to focus on JavaScript code. These compression strategies go far beyond the manual coding techniques described in this chapter and seek to compress an...

  • Page 340

    308 ❘ CHAPTER 17 BANDWIDTH AND PERFORMANCE OPTIMIZATIONSTABLE 17-1: Benchmark of JavaScript Library Compression COMPRESSORJAVASCRIPT COMPRESSION (BY TES)WITH GZIP COMPRESSION (BY TES)No compression100% (11284)26% (2879)JSMin65% (7326)21% (2403)Dojo ShrinkSafe58% (6594)21% (2349)YUI Compressor...

  • Page 341

    JavaScript Performance Optimizations ❘ 309{ var d = divs[0];}var start2 = new Date().getTime();var delta1 = start2 — start1;document.getElementById(“output”).innerHTML = “Time: “ + delta1;</script></html>Safari for Mac OS X executes this script in 529 milliseconds, ...

  • Page 342

    310 ❘ CHAPTER 17 BANDWIDTH AND PERFORMANCE OPTIMIZATIONSOffl ine DOM ManipulationWhen you are writing to the DOM, assemble your subtree of nodes outside of the actual DOM and then insert the subtree once at the end of the process. For example, consider the following:var comments=customBlog.g...

  • Page 343

    Dot Notation and Property Lookups ❘ 311Using the Window ObjectThe window object is faster to use because Safari does not have to navigate the DOM to respond to your call. The last window reference in the following example is more effi cient than the fi rst three:// Inefficientvar h=document.l...

  • Page 344

    312 ❘ CHAPTER 17 BANDWIDTH AND PERFORMANCE OPTIMIZATIONSm.n.o.p.doThat();// More efficientvar d = m.n.o.p;d.doThis();d.doThat();Accessing a Named ObjectIf you access a named object, it is more effi cient to use getElementById() rather than access it via dot notation. For example, compare the...

  • Page 345

    Dot Notation and Property Lookups ❘ 313for (i=0;i<myArray.length;i++) { // Do something}// More efficientmyArray = new Array();len = myArray.length;for (i=0;i<len;i++) { // Do something}String ConcatenationAnother traditional problem area in JavaScript is string concatenation. In genera...

  • Page 346

    314 ❘ CHAPTER 17 BANDWIDTH AND PERFORMANCE OPTIMIZATIONS</body><script type=“text/javascript” language=“javascript”>stringTable();intermStringTable();</script></html>WHAT TO DO AND NOT TO DOYou want to be sure to avoid with statements, which slow down the proce...

  • Page 347

    What to Do and Not to Do ❘ 315WHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSMinimizing bandwidthMinimize the number of external fi lesRemove content that doesn’t need to be in your fi les (comments, extra white space, unused code/styles)Shrink your images as much as possible without degr...

  • Page 348

    c17.indd 316c17.indd 31612/22/11 8:58:47 AM12/22/11 8:58:47 AMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com

  • Page 349

    Debug and DeployWHAT YOU WILL LEARN IN THIS CHAPTER:Using an iOS Simulator on your Mac computer Debugging with Safari on Mac or Windows Debugging options on your iOS deviceGet in, get out. That’s the attitude that most developers have in testing and debugging their applications. Few developers ...

  • Page 350

    318 ❘ CHAPTER 1 8 DEBUG AND DEPLOYSIMULATING THE IPHONE OR IPAD ON YOUR DEVELOPMENT COMPUTERBecause you are coding your iOS web app on a desktop computer, you’ll fi nd it helpful to also be able to perform initial testing on the desktop as well. To do so, you need to create a test browser e...

  • Page 351

    To use the iOS Simulator for viewing a web app, simply click the Safari icon with your mouse. You can load your app from a bookmark or type a URL in the Address box. Figure 18-2 shows a Web app displayed in the iOS Simulator.FIGURE 18-2The iOS Simulator is actually quite powerful. Not only do the...

  • Page 352

    320 ❘ CHAPTER 1 8 DEBUG AND DEPLOYFIGURE 18-3FIGURE 18-4Using Safari on Mac or WindowsBecause Safari on iOS is closely related to its Mac and Windows desktop counterparts, you can also perform initial testing and debugging right on your desktop. However, before doing so, you c18.indd 320c18....

  • Page 353

    need to turn Safari into an iOS simulator by performing two actions — changing the user agent string and resizing the browser window.Changing Safari’s User Agent StringSafari on Mac and Windows enables you to set the user agent provided by the browser through the User Agent list, which you ac...

  • Page 354

    322 ❘ CHAPTER 1 8 DEBUG AND DEPLOYAfter you have selected an iPhone, iPad, or iPod touch user agent, the desktop version of Safari appears to your web app as Safari on iPhone. Changing the Window SizeTo get the same viewport dimensions in Safari, you need to create a bookmarklet (see Chapter 1...

  • Page 355

    The two Safari developer features worth special attention for your needs are the Web Inspector and JavaScript Console.Working with Safari’s Web InspectorThe best debugging feature available in Safari is certainly the Web Inspector. The Web Inspector, shown in Figure 18-7, enables you to browse ...

  • Page 356

    324 ❘ CHAPTER 1 8 DEBUG AND DEPLOYSearching the DOM: You can use the Search box to look for any node of the DOM — element names, node attributes, even content. Results of the search are shown in the inspector pane, displaying the line on which a match was found. If you want to get a better i...

  • Page 357

    Working with the Scripts Inspector The Web Inspector also sports a powerful Scripts Inspector, as shown in Figure 18-9. You can use it to inspect variables at point of execution, set breakpoints, step through your code, and view the call stack. FIGURE 18-9There are several tasks you can perform i...

  • Page 358

    326 ❘ CHAPTER 1 8 DEBUG AND DEPLOYInspecting variables: The Scope Variables box at the top of the Script Inspector window displays the variables in scope (local, closure, global). You can inspect these variables by right-clicking them and choosing Inspect Element. A new Web Inspector window is...

  • Page 359

    You can enable the Debug Console from Settings ➪ Safari ➪ Developer. Inside this menu screen, you can turn on the Debug Console (see Figure 18-13). DOM ViewerThe DOM Viewer, available from brainjar.com, is a web-based DOM viewer that you can work with directly inside of Safari on iOS. The DOM...

  • Page 360

    328 ❘ CHAPTER 1 8 DEBUG AND DEPLOY 3. Open a page in your app and add a script to the end of your HTML page that you want to inspect:<script type=“application/x-javascript”>window.open(‘domviewer.html’);</script> 4. Save the fi le. 5. Open the page inside Safari. If needed...

  • Page 361

    Because it will reference the desired element directly by getElementById(), you can add this code in your HTML page after the element you want to examine in the body but not before it.Go to http://brainjar.com/dhtml/domviewer for full details on the DOM Viewer.EXERCISES 1. What is alert() debuggi...

  • Page 362

    330 ❘ CHAPTER 1 8 DEBUG AND DEPLOYWHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSPreview and interact with your iOS web apps on your Mac computerUse the Safari app that runs inside Xcode’s iOS Simulator Inspecting a page’s DOM and stylesUse the Web Inspector, built into Safari on Mac or ...

  • Page 363

    PART VNext Steps: Developing Native iOS Applications with HTML and JavaScriptCHAPTER 19: Preparing for Native iOS DevelopmentCHAPTER 20: PhoneGap: Native Apps from Your HTML, CSS, and JavaScriptCHAPTER 21: Submitting Your App to the App Storec19.indd 331c19.indd 33112/22/11 9:01:31 AM12/22...

  • Page 364

    c19.indd 332c19.indd 33212/22/11 9:01:34 AM12/22/11 9:01:34 AMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com

  • Page 365

    Preparing for Native iOS DevelopmentWHAT YOU WILL LEARN IN THIS CHAPTER:Joining the iOS Developer ProgramGetting necessary credentials Installing a provisioning profi leAlthough iOS web apps can perform and even look similar to native apps, many mobile web developers still want to package their ...

  • Page 366

    334 ❘ CHAPTER 19 PREPARING FOR NATIVE IOS DEVELOPMENTof programming in Objective-C, don’t sweat. Although you need to utilize Xcode to wrap your web apps inside a native wrapper, you don’t need to learn Objective-C. I promise! Xcode is a free download from the Mac App Store. If you can’...

  • Page 367

    GETTING AN IOS DEVELOPER CERTIFICATEAfter you have been accepted into the iOS Developer Program, you can log in to the iOS Dev Center and download your developer certifi cate, which is required before you can install native apps onto an iOS device. This certifi cate links your identity to the v...

  • Page 368

    336 ❘ CHAPTER 19 PREPARING FOR NATIVE IOS DEVELOPMENT 16. Click the Certifi cates link on the left. 17. Click the Request Certifi cate button. 18. Click the Choose File button on the Create iOS Development Certifi cate page and choose the .certSigningRequest fi le you just created on you...

  • Page 369

    RETRIEVING THE DEVELOPER CERTIFICATEWhen you receive an approval email you can go to the Program Portal to download the certifi cate. You download the developer certifi cate fi le (which is named developer_identity.cer) from Apple’s iOS Provisioning Portal at https://developer.apple.com/ios/...

  • Page 370

    338 ❘ CHAPTER 19 PREPARING FOR NATIVE IOS DEVELOPMENT 6. Go to the iOS Provisioning Portal at https://developer.apple.com/ios/manage/overview/index.action. 7. Click the Devices link and then click the Add Device button. 8. Type a descriptive name for the device in the space provided. From ex...

  • Page 371

    For example, a typical App ID might look something like the following: 2MDCRUBLFG.com.richwagner.myamazingwebappTo create an App ID for your app: 1. Go to the iOS Provisioning Portal at https://developer.apple.com/ios/manage/overview/index.action. 2. Click the App IDs link. 3. Click the New App ...

  • Page 372

    340 ❘ CHAPTER 19 PREPARING FOR NATIVE IOS DEVELOPMENTCREATING A PROVISIONING PROFILE If you have proceeded in order through the chapter, you have submitted and obtained a developer certifi cate, registered your iOS device for testing, and created an App ID. Now, you are ready to create the ...

  • Page 373

    4. Type the name of the profi le in the Profi le Name box. 5. The name of your developer certifi cate (which you created earlier in the chapter) displays next to the Certifi cates label. Click the checkbox to assign your developer certifi cate to this profi le. 6. Choose the App ID you cr...

  • Page 374

    342 ❘ CHAPTER 19 PREPARING FOR NATIVE IOS DEVELOPMENTThat’s it! You have now gotten all of the busy work out of the way, so as you continue with Chapter 20, you can get back to wrapping your web app inside a native iOS shell. EXERCISES 1. What software is needed to create native iOS apps? ...

  • Page 375

    WHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSJoining the iOS Developer ProgramMembership into the iOS Developer Program is required for installing, testing, and distributing native iOS apps.Obtaining a Developer Certifi cateA developer certifi cate ties your identity to a validated contact ...

  • Page 376

    c19.indd 344c19.indd 34412/22/11 9:01:52 AM12/22/11 9:01:52 AMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com

  • Page 377

    PhoneGap: Native Apps from Your HTML, CSS, and JavaScriptWHAT YOU WILL LEARN IN THIS CHAPTER:Creating a PhoneGap project in XcodeAdding your web app code into PhoneGapTweaking the project to fi t your needs Worlds collide. At least that’s what happens when you use a tool like PhoneGap or one o...

  • Page 378

    346 ❘ CHAPTER 20 PHONEGAP: NATIVE APPS FROM YOUR HTML, CSS, AND JAVASCRIPT 3. Extract the .dmg fi le and then double-click the PhoneGap .pkg fi le launch the Installer. 4. Navigate through the steps in the Installer to install the tool onto your computer. CREATING A NEW PHONEGAP PROJECT IN...

  • Page 379

    5. In the next dialog box (see Figure 20-2), enter the name of your project in the Product Name fi eld. I am calling mine Top Filmz. 6. Enter a unique company id in a “reverse domain” syntax. I am using com.richwagner.app. 7. Uncheck the Use Automatic Reference Counting box. This is an impo...

  • Page 380

    348 ❘ CHAPTER 20 PHONEGAP: NATIVE APPS FROM YOUR HTML, CSS, AND JAVASCRIPTRUNNING THE BASE PROJECTBefore continuing, you need to confi rm that the Xcode part of your app is compiling and functioning correctly by running it inside of the iOS Simulator. Check out the Scheme combo box that list...

  • Page 381

    4. Make sure that the Copy Items into Destination Group’s Folder box is unchecked. 5. Click Finish. As shown in Figure 20-5, the Xcode project now has a direct link with the www folder.FIGURE 20-5Click the Run button to run the app again in the iOS Simulator. Now that you have a connection wi...

  • Page 382

    350 ❘ CHAPTER 20 PHONEGAP: NATIVE APPS FROM YOUR HTML, CSS, AND JAVASCRIPThandlers that you can uncomment if you want to utilize them in your app. The template index.html fi le is shown here:<!DOCTYPE html><html> <head> <title></title> <meta name=”vi...

  • Page 383

    ready to roll */ /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch. see http://iphonedevelopertips.com/cocoa/launching-your-own-application- via-a-custom-url-scheme.html for more details -jm */ function onDevice...

  • Page 384

    352 ❘ CHAPTER 20 PHONEGAP: NATIVE APPS FROM YOUR HTML, CSS, AND JAVASCRIPT 3. Replace the existing boilerplate text in the body with the body code in the Top Filmz fi le. 4. Save the updated fi le. 5. Top Filmz app doesn’t have any supporting CSS, JS, or image fi les, but if your app h...

  • Page 385

    function preventBehavior(e) { e.preventDefault(); }; document.addEventListener(“touchmove”, preventBehavior, false); */ /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch. see http://iphonedevelop...

  • Page 386

    354 ❘ CHAPTER 20 PHONEGAP: NATIVE APPS FROM YOUR HTML, CSS, AND JAVASCRIPT <li><a href=”#larsAndTheRealGirl”>Lars and the Real Girl</a></li> <li><a href=”#babettesFeast”>Babette’s Feast</a></li> <li&...

  • Page 387

    <div data-role=”header”> <h1>Lars and the Real Girl</h1> </div> <div data-role=”content” style=”background-color:#ffffff”> <img class=”poster” src=”http://ecx.images-amazon.com/images/I/ 51Sn3wcuNGL._SL500...

  • Page 388

    356 ❘ CHAPTER 20 PHONEGAP: NATIVE APPS FROM YOUR HTML, CSS, AND JAVASCRIPT </div> <div data-role=”content” style=”background-color:#ffffff”> <img class=”poster” src=”http://ecx.images-amazon.com/images/I/ 51MeImdd92L._SL500_AA3...

  • Page 389

    <img class=”poster” src=”http://ecx.images-amazon.com/images/I/ 51c02AOAyCL._SL500_AA300_.jpg”/> <a href=”http://www.imdb.com/title/tt0286106/” data-role=”button”>Go to IMDB Page</a> <a href=”#home” data-ro...

  • Page 390

    358 ❘ CHAPTER 20 PHONEGAP: NATIVE APPS FROM YOUR HTML, CSS, AND JAVASCRIPT 2. In the key-value pairs displayed in Xcode, locate the External Hosts key. 3. Click the + button next to the External Hosts key and enter *.jquery.com in the value fi eld. 4. Click the + button again next to the E...

  • Page 391

    2. Locate the shouldStartLoadWithRequest method: (BOOL)webView:(UIWebView *)theWebView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType 3. Replace the existing method code with the following updated source code: (BOOL)...

  • Page 392

    360 ❘ CHAPTER 20 PHONEGAP: NATIVE APPS FROM YOUR HTML, CSS, AND JAVASCRIPTRUNNING THE FINISHED APPWhen you have made all of the fi nal adjustments, you are ready to test your fi nished app. Click the Run button in Xcode and run the app in iOS Simulator. Figure 20-9 shows the app when it loa...

  • Page 393

    EXERCISES 1. True/False. When adding your web app code to the PhoneGap project, you should overwrite the existing index.html fi le that is supplied by PhoneGap. 2. Why won’t a PhoneGap web app access an external resource by default? 3. What are the naming conventions and the dimensions of th...

  • Page 394

    362 ❘ CHAPTER 20 PHONEGAP: NATIVE APPS FROM YOUR HTML, CSS, AND JAVASCRIPTWHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSInstalling PhoneGapDownload and install PhoneGap after you have installed Xcode Create a PhoneGap projectUse the PhoneGap-based Application template when you create a new...

  • Page 395

    Submitting Your App to the App StoreWHAT YOU WILL LEARN IN THIS CHAPTER:Getting a distribution certifi cate Obtaining a distribution provisioning profi le Publishing your app to the App Store If you have made it this far, you’ve designed, coded, and tested your web app, and you’ve wrapped i...

  • Page 396

    364 ❘ CHAPTER 21 SUBMITTING YOUR APP TO THE APP STORESTEP 1: GETTING A DISTRIBUTION CERTIFICATEiOS apps must be signed by a valid certifi cate before they can be run on an iPhone, iPad, or iPod touch. Similar to what you did when you obtained a developer certifi cate to develop and install ...

  • Page 397

    Step 2: Creating a Distribution Provisioning Profi le ❘ 365 5. If you have a certifi cate ready, click the Download button. If you don’t, follow the instructions to create one. After it is created, then you can download the developer_identity.cer fi le and continue. 6. When you have downl...

  • Page 398

    366 ❘ CHAPTER 21 SUBMITTING YOUR APP TO THE APP STORETRY IT OUT Obtaining a Distribution Provisioning Profi leA Distribution Provisioning Profi le is much like your app’s passport and is required for entry into the App Store. Here’s how to download your own Distribution Provisioning Pro...

  • Page 399

    Step 2: Creating a Distribution Provisioning Profi le ❘ 367 7. Give Apple a few moments to process your request and then refresh the browser to see the profi le status changed to Active. 8. Click the Download button to download the .mobileprovision fi le. 9. Save this fi le to your hard d...

  • Page 400

    368 ❘ CHAPTER 21 SUBMITTING YOUR APP TO THE APP STORESTEP 3: BUILDING A DISTRIBUTION RELEASE OF YOUR APPNow that you have all the preliminaries completed and your credentials in order, you are ready to publish the fi nal distribution release of your native iOS app. TRY IT OUT Publishing a Di...

  • Page 401

    Step 4: Submitting Your App to the App Store ❘ 369How It WorksWhen you perform these actions, you build an archive fi le. In the next section, you take this archive fi le and submit it to the App Store. STEP 4: SUBMITTING YOUR APP TO THE APP STOREAfter you have your app compiled and ready to ...

  • Page 402

    370 ❘ CHAPTER 21 SUBMITTING YOUR APP TO THE APP STORETRY IT OUT Submitting to the App Store Follow these steps to submit your app to the Apple App Store. 1. Log in to the iOS Dev Center at http://developer.apple.com. 2. Click the iTunes Connect link. You are taken to the iTunes Connect webs...

  • Page 403

    Step 4: Submitting Your App to the App Store ❘ 371 6. Enter the name of your app in the App Name box. 7. Enter a unique number to identify your app. This value isn’t a version number; it’s a way to differentiate between multiple apps you submit. 8. Select your provisioning profi le from ...

  • Page 404

    372 ❘ CHAPTER 21 SUBMITTING YOUR APP TO THE APP STOREHow It WorksYou just walked through the fi nal, critical stage of submitting your app to the App Store. That’s it! You now just have to wait for Apple to review your app over the next week or weeks before it is offi cially available. EX...

  • Page 405

    Step 4: Submitting Your App to the App Store ❘ 373WHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSDistribution Certifi cateiOS apps must be signed by a valid certifi cate before they can be run on an Apple device.Distribution Provisioning Profi leA Provisioning Profi le is a collection of ...

  • Page 406

    c21.indd 374c21.indd 37412/22/11 9:04:59 AM12/22/11 9:04:59 AMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com

  • Page 407

    Exercise AnswersCHAPTER 1 1. A native app runs executable code on the device and is installable through the App Store. A web app runs inside of Safari on iOS and requires no installation onto the device. A native app is written in Objective-C whereas a web app is written using HTML, CSS, JavaScri...

  • Page 408

    376 ❘ APPENDIX EXERCISE ANSWERS 6. Use arguments.length to determine to the total number of parameters passed to a function. 7. No. JavaScript treats an empty string as a different value than null. CHAPTER 3 1. The node is the basic component of the DOM. 2. False. A DOM hierarchy is not exa...

  • Page 409

    Chapter 9 ❘ 377CHAPTER 6 1. Edge-to-edge navigation lists are the standard way to present list or hierarchical information. 2. It is generally recommended that you size your UI element by 40 pixels or more for ease of touch. 3. False. You won’t fi nd it on an iOS device. 4. False. Web app...

  • Page 410

    378 ❘ APPENDIX EXERCISE ANSWERS CHAPTER 10 1. Mouse emulation, touch, and gesture events. 2. No, there are several touch interactions that are handled for you by default by Safari on iOS. These include fl ick-scrolling, zoom pinching and unpinching, and one-fi nger panning (or scrolling). ...

  • Page 411

    Chapter 18 ❘ 379CHAPTER 14 1. The user agent string of an iPad has the text iPad in its platform string portion. 2. Stroking refers to drawing a line on a path, whereas fi lling is the painting of an area inside a path. 3. A path is composed of a series of subpaths, such as a straight line or ...

  • Page 412

    380 ❘ APPENDIX EXERCISE ANSWERS 3. Enable the Debug Console through Settings ➪ Safari ➪ Developer. Once enabled, the Debug Console is displayed below the URL bar when an error occurs. CHAPTER 19 1. Xcode, which is available for free from the Mac App Store. 2. All of the above. The Devel...

  • Page 413

    381Symbols!=, comparison operator, 26%=, assignment operator, 26*=, assignment operator, 26+=, assignment operator, 26-=, assignment operator, 26/=, assignment operator, 26<, comparison operator, 27<=, comparison operator, 27>, comparison operator, 27>=, comparison operator, 27... (el...

  • Page 414

    382apps (continued)data URL, 237–244native, 331–341App ID, 334–335Apple Developer Program, 332developer certifi cates, 333–335Development Provisioning Profi le, 338–340provisioning profi le, 339–341Safari, 4, 5Xcode, 331–332offl ine, 267–283DOM, 308HTML5 cache, 267–273key-va...

  • Page 415

    383blur, 190body, 48font-size:small, 90index.html, 67landscape, 200onload, 93, 264onorientationchange, 196orient, 197, 200portrait, 200body > .dialog, 170bookmark icons, 11bookmarklets, 235–239iPhone, 320Booleans, 40–41box-shadow, 146bread crumbs, 104–105breakpoints, 323Bundle Identifi ...

  • Page 416

    384conference app, 123–130constants, 25Contacts, 103content div, 91iWebKit, 292contenteditable, 116contextcanvas, 252–254drawImage(), 259drawImg(), 259fillStyle, 262JavaScript, 210strokeStyle, 262context.clearRect(), 254context.fillRect(), 254context.globalAlpha, 263context.strokeRect(), 254c...

  • Page 417

    385dbName, 281db.transaction, 282Dean Edward’s Packer, 215Debug Console, 324–325debugging, 315–328devices, 324–327Safari, 318–324declaration, manifest fi les, 268default-theme.css, 153, 165dialog, 169–170GIF, 155landscape mode, 154destHeight, 259destination page, UI, 162–166destwid...

  • Page 418

    386double-tap fi nger gesture, 10, 189do/while, 32–33drag fi nger gesture, 9drawImage()canvas, 257–263context, 259onload, 258drawImg(), 259EE, 134E(attr), 134E + F, 134E > F, 134E ~ F, 134E F, 134E:after, 135E::after, 135E:before, 135E::before, 135E:checked, 135edge-to-edge navigation, 1...

  • Page 419

    387iPhone, 189UI, 107–109firstChild, 53Flash media, 11, 16Safari, 80–82fldBillTotal, 244fldFinalTotal, 244fldTipPercent, 244fl ick fi nger gesture, 9float, 91fl oating-point numbers, 40float-left, 128FLV, 11.flv, 16focus, 190font, 91canvas, 253fonts. See also text size adjustmentSafari, 10...

  • Page 420

    388Hello World, 65–77detail pages, 70–75index page, 66–67main screen, 67–70setting up, 66Herrera, Richard, 235hexadecimal numbers, 40horizontal scrolling, 109:hover, 189href, 69# (hash mark), 70div, 157id, 179jQuery Mobile, 279tel:, 224ul, 157HTMLanimations, 258data URL, 237DOM, 47, 48loc...

  • Page 421

    389calc(), 171keydown, 182key-value storage, 279name, 171select, 168input fi elds, 108input type=”file”, 80insertAfter(), 56insertBefore(), 55, 59cloneNode(), 61moveNode(), 60integers, 40integrated development environment (IDE), 331intermStringTable(), 311internal URLlink clicks, 182panels, ...

  • Page 422

    390iui.showPage(), 178iWebKit, 291–297CSS, 292JavaScript, 292viewport, 292JJava applets, 11Safari, 80Javadoc, 34JavaScript, 18–45; (semicolon), 19{} (curly brackets), 19animations, 217–218arrays, 42–45assignment operators, 26bookmarklets, 233–237Booleans, 40–41calc(), 171canvas, 256ca...

  • Page 423

    391jquery.js, 121JSDoc, 34JSMin, 305–306JSON, 1878Kkey, 275key event trapping, 202keyboard, 202Keychain Access, 333, 335keydown, 190input, 202keypress, 190keyup, 190key-value storagedeleting data, 276HTML5, 274–280loading data, 275–276offl ine apps, 274–281saving data, 274–275Llandscap...

  • Page 424

    392maps.google.com, 228margin, 151marketing version, user agent, 250masks, 213–214master-detail, 117master.js, 123mathematical operators, 27maximum-scale, 100viewport, 84–85media queriesHTML, 89–90iPad, 116websites, 88media tags, HTML5, 15–18Safari, 7Metrics pane, 322middle.png, 143minimu...

  • Page 425

    393octal numbers, 40offl ine apps, 267–283DOM, 308HTML5 cache, 267–273key-value storage, 274–280SQL database, 281–282.ogg, 16OggTheora, 16oldValue, 275onchange, 279onclick, 224SMS, 227one-fi nger gestures, 188–189panning, 188onLine, 271onloadbody, 93, 264drawImage(), 258Image, 264init...

  • Page 426

    394phone calls, 222–224PhoneGap, 343–355index.html, 347–348web apps, 347–355Xcode, 343Photos, navigation lists, 103pinch close fi nger gesture, 10pinch open fi nger gesture, 10pinch/unpinch zoom fi nger gesture, 189platform string, user agent, 250playcount, 16PlotKit, 213plug-ins, 11Sa...

  • Page 427

    395SSafari, 10AJAX, 4Back button, 180bookmarklets, 234–235build number, 250canvas, 249click, 190compatibility, 80–82cookies, 4CSS, 3, 133animation, 7effects, 7selectors, 133–140data URL, 238debugging, 319–324Develop menu, 320–321DOM, 48external URL, 356–357fonts, 109geolocation, 6–7...

  • Page 428

    396sessionStorage, 275, 279getItem(), 275setItem(), 274setAttribute(), 59–60setInterval(), 191setItem(), 275setLocalKeyValue(), 279setSessionKeyValue(), 279setTimeout(), 178setTimeout, 180Settings, navigation lists, 103shadows, 210–211shadowBlur, 210canvas, 253shadowColorcanvas, 253CSS, 210sh...

  • Page 429

    397SVG. See Scalable Vector GraphicsswapUpdate(), 271, 273SWF, 11SWFObject, 81–83switchJavaScript, 30–31user agent, 251System Preferences, 11Ttap fi nger gesture, 9, 189target, 193target=”_blank”, 236targetNode, 55, 56target=”_replace”, 162, 182target=”_self”, 162link clicks, 182...

  • Page 430

    398URI Kitchen, 245URLAJAX URL, 158data URL, 237–244externalAJAX, 161–162link clicks, 182Safari, 356–357UI link type, 158Xcode, 355–356internallink clicks, 182panels, 158–160UI link type, 158url, 275URL listings, manifest fi les, 268Url2iphone, 245user agentcanvas, 249–252Safari, 249...

  • Page 431

    399iWebKit, 292jQuery Mobile, 286landscape mode, 137, 201orient, 154portrait mode, 137, 191Safari, 82–85WW3C, 47web apps, 3–14frameworks, 285–299iOS Simulator, 317local network, 11–12PhoneGap, 347–355resource constraints, 10–11Safari, 3–9Wi-Fi, 233Web Hypertext Application Technolog...

  • Page 432

    400window.applicationCache.OBSOLETE, 272window.applicationCache.UNCACHED, 272window.applicationCache.UPDATEREADY, 272window.iui, 177window.orientation, 123window.scroll(), 116with, 312Word, 10Xx.509 certifi cates, 11XcodeDevelopment Provisioning Profi le, 339Distribution Provisioning Profi le,...

  • Page 433

    bindex.indd 401bindex.indd 40112/21/11 2:29:05 PM12/21/11 2:29:05 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com

  • Page 434

    Try Safari Books Online FREE for 15 days + 15% off for up to 12 Months*START YOUR FREE TRIAL TODAY!VisitactionURI(http://www.safaribooksonline.com/wrox29): actionURI(http://www.safaribooksonline.com/wrox29):www.safaribooksonline.com/wrox29 to get started.With Safari Books Online, you can experien...

  • Page 435

    actionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com

  • Page 436

    Related Wrox BooksBeginning iOS 5 Application DevelopmentBeginning iOS Game Development Professional iPhone and iPad Application DevelopmentProfessional iPhone and iPad Database Application Programming Wei-Meng LeeBeginningiOS 5 Application DevelopmentWrox Programmer to Programmer™IN FULL COLO...

Free HTML Books, HTML Book Pdf, HTML Pdf Books, HTML Pdf Books Download, HTML Pdf Books Free Download, Free HTML Develope Books, HTML Develope Book Pdf, HTML Develope Pdf Books, HTML Develope Pdf Books Download, HTML Develope Pdf Books Free Download, Free HTML JavaScript Books, HTML JavaScript Book Pdf, HTML JavaScript Pdf Books, HTML JavaScript Pdf Books Download, HTML JavaScript Pdf Books Free Download, Free iOS Books, iOS Book Pdf, iOS Pdf Books, iOS Pdf Books Download, iOS Pdf Books Free Download,