Index

images A

accessibility, 32–36

alerts, 35

captions, 35

software features, 35

voice control, 34

VoiceOver feature, 33

white on black feature, 34

zoom feature, 34

active interface, 125–126, 147, 158

active negative space, 137–138

Adobe Fireworks program, 188–201, 219–242

canvas, 189–190

design

of interface, 198

of layout, 192

reuse, 198–200

organizing levels, 191

tools for UI design, 201

versions of

iPad-compatible, 220–232

iPad native-like, 233–242

aesthetics, for design

native-like, 172–176

of UIs, 158, 167–168

agile information architecture, and optimized information architecture, 16–18

agile projects

design, 31–49

information architecture

content-out approach, 22–23

mobile strategy, 21

phases of, 11–16

processes, 16–20

prototypes, 28–31

representing with site map, 23–26

sketching with wireframes, 26–28

agile testing, 391–392

AIA (American Institute of Architects), 10

algorithms, Google PageRank concept, 383–385

Align function, 192

ambient intelligence, Domotic computing and, 432–433

American Institute of Architects (AIA), 10

analogous color schemes, 145

animation, in CSS 3, 98–99

Animation property, CSS 3, 286–287

appendChild( ) method, 316

Apple Mobile Design, 49

Apple WebApp portal, 419–420

AppleMobileWebAppStatusBarStyle, 323

applicationCache, 377–378

applications

compressing, 369–371

full-screen mode, 323–324

mobile, 60

redirecting, 326–327

service interaction

Mail application, 331–332

Maps application, 332

Phone application, 330–331

SMS application, 332

startup image, 325–326

web, 390–391

Webapps, 66–69, 414–423

Beta Invitation testers, 414–415

compatible approach to, 66

dedicated approach to, 67–68

email marketing, 417–418

vs. native apps, 69–73

native-like approach to, 68–69

with Offline feature, 375–378

optimized approach to, 67

press releases, 415

social networks, 422–423

submitting to WebApp portals, 419–422

web site for, 415–417

Array( ) method, 305

arrays, Javascript, 305–307

artifact recycling, 394

Artifact Recycling approach, 394

assets, prototypes

electronic, 399–400

paper, 398–399

attributes, HTML5 Canvas, 254–256

audible option, 35

<audio> tag, HTML5, 251

images B

Background Origin property, CSS 3, 279

Background property, 88

Background Size property, CSS 3, 278

backgrounds, in CSS 3

multiple backgrounds, 88

origin of backgrounds, 87

size of backgrounds, 86

Balsamiq Mockups interface, 185–186

basic shapes and lines, HTML5 Canvas, 256–262

beginPath( ) method, 260, 262, 264

behaviors, adding in JavaScript language, 106

best practices, Javascript, 316–317

Beta Invitation Phase, 415

Beta Invitation testers, 414–415

black, color psychology and user mood, 143–144

block model, iPad, 44–47

blue, color psychology and user mood, 141

<body> section, 348–350, 352, 354–355, 359

BOM (Browser Object Model), 309–310

Border Images property, CSS 3, 274

borders, in CSS 3

border radius, 79

images, 80

Bottom Bar, 42–43, 47–48

Box Shadow property, CSS 3, 277

Box Sizing property, CSS 3, 276

boxes, in CSS 3

box sizing, 83

shadows, 84

Breadcrumb Bar, 352–353

brown, color psychology and user mood, 142–143

Browser Object Model (BOM), 309–310

browser support, for web standards

being finger-friendly, 110–111

limitation and constraints, 108–110

progressive enhancement, 111–113

resources and tools for Safari browser, 113–114

tools for mobile Safari browser, 114–115

browsers, Safari

mobile, tools for, 114–115

resources and tools for, 113–114

Elements, 113

Network, 114

Resources, 114

Script, 114

Timeline, 114

Web Inspector, 113

images C

CA (content architecture), 13

Cache Manifest file, 375

Canvas, HTML5

attributes and methods, 254–256

basic shapes and lines, 256–262

canvas state (drawing state), 268–270

clipping paths, 266–267

complex shapes, 262–265

creating slideshow, 270–272

manipulating objects, 267

overview, 252–253

versus SVG, 253–254

canvas state (drawing state), HTML5 Canvas, 268–270

<canvas> tag, HTML5, 252

canvases, Adobe Fireworks program

iPad-compatible version, 220–221

iPad native-like version, 233

overview, 189–190

captions, 35

Cascading Style Sheets. See CSS

Cascading Style Sheets 3. See CSS 3

charArt( ) method, 308

charCodeAt( ) method, 308

Clarke, Andy, 189

clip( ) method, 266

clipping paths, HTML5 Canvas, 266–267

cloneNode( ) method, 316

closed captions, 35

closePath( ) method, 262, 264

closing tabs, 364

Cocoa Touch framework, 116–118

Foundation framework, 116–117

UIKit framework, 117–118

code

developing for humans, 106

in JavaScript language

commenting, 104

heavy nesting loops, 105

modularizing, 105

strict coding style, 104

understandable code, 104

optimization, 362–366

combining CSS and Javascript code files, 365

minimizing DOM, 365–366

reducing HTTP requests, 363–365

web standards complaint, 362–363

writing slim, 363

cognitive resources, of users, 181

color, depth of, 366

color-stop( ) method, 82, 103, 276, 290

colors, psychology of, 138–147

color schemes, 144–147

and user mood, 140–144

columns, in CSS 3

multiple columns, 93

spanning columns, 94

commenting, code, in JavaScript language, 104

communications, mobile devices and, 427–428

compareDocumentPosition( ) method, 316

compatible approach, to Webapps, 66

complementary color schemes, 145

complex shapes, HTML5 Canvas, 262–265

composition, in design, 159

compressing, applications, 369–371

computing, ubiquitously, 427–435

Domotic computing and ambient intelligence, 432–433

mobile devices and communications, 427–428

multitouch technology

effect on next-generation computing, 430–431

next-generation computing with touch screen and, 428

new technology, usability, and opportunity, 429–430

resources for telecommunication and, 434

concat( ) method, 308

conditional statements, Javascript, 300–302

connections, representing, 187–188

containers, content box, 56

contat( ) method, 306

content architecture (CA), 13

content box containers, 56

content-out approach, 22–23

content regions, 56

createElement( ) method, 271

CSS 3 (Cascading Style Sheets 3)

Animation property, 286–287

Background Origin property, 279

Background Size property, 278

Border Images property, 274

Box Shadow property, 277

Box Sizing property, 276

Gradients property, 275

keyframes, 289

Multiple Background property, 279

Multiple Columns property, 283

new features of

animation, 98–99

backgrounds, 86–88

border images, 80

border radius, 79

boxes, 83–84

columns, 93–94

gradients, 82

keyframes, 101–102

outline, 85

reflections, 102

tap highlight, 92

text, 89–91

transforms, 95–96

transitions, 94

web fonts, 92

word wrapping, 91

Outline property, 278

Reflection property, 289

Rounded Borders property, 274

Spanning Columns property, 284

Tap Highlights property, 282

Text Overflow property, 281

Text Shadow property, 280

Transform property, 285–286

Transition property, 284

Web Fonts property, 282

Word Wrapping property, 281

CSS (Cascading Style Sheets)

files, combining with Javascript code files, 365

rules of, using instead of images, 368

sprites, 366–368

CSS class, 53, 56

CSS file, 53

CSS property, 86, 89, 94, 102, 108, 284

ctx.beginPath( ) method, 261–263, 265

ctx.clip( ) method, 266

ctx.restore( ) method, 270

ctx.save( ) method, 270

ctx.stroke( ) method, 261–263, 265

customization, allowing maintenance and, 105

images D

data categories, Javascript, 293–295

dead-zone, 125

dedicated approach, to Webapps, 67–68

definitions, HTML5, 246

deliverables, for design

native-like, 173–177

of UIs, 159–160, 170

descriptions, headers and, for text boxes, 57

designs

aesthetics for

native-like, 172–176

of UIs, 158, 167–168

composition in, 159

deliverables for

native-like, 173–177

of UIs, 159–160, 170

elements, for touch events and gestures, 340

feedback, 407–408

gray box design, Adobe Fireworks program, 233–237

hardware, for mobile design, 8

ID phase, 14

for iPad, 170–173

aesthetic, 172–173

deliverables, 173

interaction, 173

research phase, 170

structure, 171–172

for iPhone, 173–177

aesthetic, 176

deliverable, 177

interaction, 176–177

research phase, 174

structure, 174–175

tools for UI design, 177

mobile, 1–8

hardware for, 8

history of, 2–4

market for, 4–5

mobile-oriented approach, 6

mobile-oriented guidelines, 6–7

reasons for investing in now, 5

native design implementation

native interface emulation, 348–359

native-like page structure, 347–348

page model, 347

perception rules for, 127–130

research phases for

native-like, 170–174

of UIs, 158–164

reuse of, 198–200

search engine oriented design, 380–387

content, 381–382

domain title, 380

images, 385–386

Javascript code, 386

links, 383–385

meta tags, 381

page title, 381

SEO tools, 386–387

sketching, 179–184, 210–212

UI design, 204–212

hiding and shaping elements, 207–209

removing and prioritizing elements, 206–207

shrinking and grouping elements, 209

simplicity-complexity paradox, 210

sketching UI, 210–212

XD phase, 13–14

Developer tab, 421

development frameworks, 52–59

description of, 53–54

iWebKit 5 for iPhone, 54–59

linking framework elements, 54

UI elements, 54–59

development life cycles, SDKs, 118

<div class="greytitle">, 356

<div id="footer">, 358

<div id="hero"> element, 353

<div id="title">, 350

<div id="topbar"> tag, 349

<div> tag, 352

Document Object Model. See DOM

DOM classes, 335

DOM (Document Object Model)

Javascript, 106

versus HTML structure, 312–313

overview, 310–312

working with, 314–316

minimizing, 365–366

DOM method, 271

domain titles, 380

dominance, achieving with passive negative space, 135

Domotic computing, and ambient intelligence, 432–433

drawImage( ) method, 271

drawing state (canvas state), HTML5 Canvas, 268–270

drawOnCanvas( ) method, 257

images E

eHubWebApp portal, 420–422

electronic prototypes, 17, 30–31, 49, 159, 399–403

element emulation, 329–330

elements

Page Title, 350–352

testing, in JavaScript language, 106

Elements tool, for Safari browser, 113

email marketing, 417–418

emotional feedback, 409

emulation

native environment

element emulation, 329–330

link emulation, 328

scrolling emulation, 330

text emulation, 328–329

native interface, 348–359

Breadcrumb Bar, 352–353

footer section, 358–359

Hero Content area, 353–355

Menu Area, 356–358

Page Title element, 350–352

top bar section, 349–350

ergonomics, and usability, of mobile devices, 4

ETA (Estimated Time Of Arrival), 406–407

evaluating tests, variables for, 405–411

evaluation techniques, 409–411

test feedback, 411

test variable, 410–411

expectation feedback, 408

experience design (XD) phase, 13–14

images F

F-shaped reading patterns, 151–152

Facebook, 416, 422–423, 425–426

fear of being misunderstood, 206

fear of failure, 206

fear of missing something, 206

feedback, 407–409

design, 407–408

emotional, 409

expectation, 408

finger-friendly development, 110–111

fonts, web, in CSS 3, 92

footers, 58–59, 358–359

Foundation framework, 116–117

frameworks

Cocoa Touch, 116–118

Foundation framework, 116–117

UIKit framework, 117–118

expanding, 343–345

iWebKit, 353, 356–357

iWebKit 5 framework, for iPhone, 54–59

linking framework elements, 54

UI elements, 54–59

linking elements of, 54

for mobile development, 119

UIKit, 117–118

from( ) method, 103, 290

fromCharCode( ) method, 308

full-screen mode, 323–324

function( ) method, 258–259, 261, 263, 265–266, 269, 271

functionalities, 416

functionName( ) method, 303

functions, Javascript, 303–304

images G

gesture events, 335, 337–339

gestures, touch events and, 334–343

design elements for, 340

native and customized handler for, 339

orientation change event, 340–342

paradigm, 334–339

getAttribute( ) method, 315

getContext( ) method, 256–257

getElementById( ) method, 314

getElementByTagName( ) method, 314

getElementsByName( ) method, 314

getElementsByTagName( ) method, 314

global cached resources, 364

Global Positioning System (GPS), 3

global variables, in JavaScript language, 104

Google analytics, 387

Google Maps, 332–333

Google PageRank concept, algorithm, 383–385

GPS (Global Positioning System), 3

gradient( ) method, 82, 102–103, 275–276, 290

gradients, in CSS 3, 82

Gradients property, CSS 3, 275

gray box design, Adobe Fireworks program, 233–237

gray, color psychology and user mood, 143

green, color psychology and user mood, 141

grouping elements, shrinking elements and, 209

guidelines, mobile-oriented, 6–7

GZIP compression, 369–371

images H

<h1> tag, 352

handlers, for touch events and gestures, 339

hardware, for mobile design, 8

hasAttributes( ) method, 316

hasChildNodes( ) method, 316

HCI (human computer interaction), 15–16, 72–73

head sections, 327–328

<head> tag, 348, 352–353, 355, 359, 362

header bars, 54–56

headers, and descriptions, 57

Heat Map test, 393–394

Hero Content area, 353–355

hiding elements, and shaping elements, 207–209

highlighting, tap, in CSS 3, 92

HTML structure, versus DOM structure, 312–313

HTML5 (Hypertext Markup Language 5), 244–272

< audio> tag, 251

<canvas> tag, 252

<video> tag, 249

Canvas

attributes and methods, 254–256

basic shapes and lines, 256–262

canvas state (drawing state), 268–270

clipping paths, 266–267

complex shapes, 262–265

creating canvas slideshow, 270–272

manipulating objects, 267

overview, 252–253

versus SVG, 253–254

definitions, 246

markup syntax, 244–246

new features of, 74–78

semantics, 246–247

SVG, 252–253

HTTP (Hypertext Transfer Protocol), reducing requests, 363–365

human computer interaction (HCI), 15–16, 72–73

Hypertext Markup Language 5. See HTML5

Hypertext Transfer Protocol (HTTP), reducing requests, 363–365

images I

IA (information architecture)

content-out approach, 22–23

mobile strategy, 21

phases of, 11–16

HCI, 15–16

ID, 14

IM, 12–13

IR, 12

IxD, 15

UE, 14–15

UX, 14

XD, 13–14

processes

agile and optimized, 16–18

three main, 18–20

prototypes, 28–31

electronic, 30–31

paper, 30

representing with site map, 23–26

limiting user mistakes, 24–25

providing orientation with navigation path, 25–26

sketching with wireframes, 26–28

icons, springboard, 324–325

ID (interaction design) phase, 14–15

IDEs (Integrated Development Environment), Xcode, 115

IM (information management) phase, 12–13

image optimization, 366–369

avoiding scaling, 368–369

color depth, 366

CSS sprites, 366–368

using CSS rules instead of, 368

images

in reading patterns, 152–153

search engine oriented design, 385–386

startup, 325–326

incremental cycles, 389–390

indexOf( ) method, 306, 308

information architecture. See IA

Information Architecture Process, 10, 12, 16, 18, 50

information management (IM) phase, 12–13

information research (IR) phase, 12

insertBefore( ) method, 316

Integrated Development Environment (IDEs), Xcode, 115

interaction design (ID) phase, 14–15

interaction, with users, 159, 168–169, 173–177

interfaces

definition of, 123–125

designing with Adobe Fireworks program, 198, 223–232

hierarchy of, 147–148

Internet, 4

inverted simple approach, to UI design, 204–212

hiding and shaping elements, 207–209

removing and prioritizing elements, 206–207

shrinking and grouping elements, 209

simplicity-complexity paradox, 210

sketching UI, 210–212

iOS devices, 9, 36

iPad

Adobe Fireworks program compatible with, 220–232

canvas, 220–221

interface design, 223–232

layout design, 222–223

organizing levels, 221–222

block model, 44–47

designing UIs compatible with, 160–170

aesthetic, 167–168

deliverables, 170

interaction, 168–169

research phase, 161–164

structure, 164–167

versus iPhone for web presentation, 244

iPhone/iPad simulator, 115

native-like design for, 170–173

Adobe Fireworks program, 233–242

aesthetic, 172–173

deliverables, 173

interaction, 173

research phase, 170

structure, 171–172

usability, 38

user interface, 47–49

Web optimization and compatibility, 361

iPhone

designing UIs compatible with, 160–170

aesthetic, 167–168

deliverables, 170

interaction, 168–169

research phase, 161–164

structure, 164–167

development for using web standards, 118–119

versus iPad for web presentation, 244

native interface emulation, 348–359

Breadcrumb Bar, 352–353

footer section, 358–359

Hero Content area, 353–355

Menu Area, 356–358

Page Title element, 350–352

top bar section, 349–350

native-like design for, 173–177

aesthetic, 176

deliverable, 177

interaction, 176–177

research phase, 174

structure, 174–175

tools for UI design, 177

page model, 40–41, 50, 180, 347

usability, 38

user experience limitations of, 181

user interface, 41

using on the go, 180

viewport, 321

Web optimization and compatibility, 361

iPhone/iPad simulator, 115

IR (information research) phase, 12

isEqualNode( ) method, 316

isSameNode( ) method, 316

iterative cycles, 389–390

iterative-incremental lifecycle, 389–390

iWebKit 5 framework, for iPhone, 54–59

linking framework elements, 54

UI elements, 54–59

iWebKit framework, 353, 356–357

images J

Javascript, 290–317

adding to webpage, 292

arrays, 305–307

best practices, 316–317

best practices for, 103–106

adding behaviors, 106

allowing maintenance and customization, 105

code, 104–106

DOM, 106

global variables, 104

mix technologies, 104

optimizing loops, 105

progressive enhancement, 105

shortcut notation, 105

testing elements, 106

BOM, 309–310

conditional statements, 300–302

data categories, 293–295

DOM

versus HTML structure, 312–313

overview, 310–312

working with, 314–316

files, combining with CSS files, 365

functions, 303–304

loop statements, 302–303

objects, 308–309

operators, 298–300

reserved words, 295–296

search engine oriented design, 386

strings, 307–308

structure, 293

variable scope, 304–305

variables, 296–298

JavaScript file, 53, 272, 303

Javascript object, 307, 309

Javascript statement, 293, 296

join( ) method, 306

images K

keyframes, in CSS 3, 101–102, 289

images L

Landscape mode, 49

lastIndexOf( ) method, 308

Law of Closure, 129

Law of Common Fate, 129

Law of Continuity, 128

Law of Figure Ground, 129–131

Law of Past Experience, 130

Law of Proximity, 127–128

Law of Similarity, 128

layouts

designing, with Adobe Fireworks program, 192, 222–223, 238–242

for touch-screen devices, 164–166

Lee, Stan, 154

<li class="menu">, 357

life cycles, development, SDKs, 118

lifecycles, web development, 389–390

link emulation, 328

LinkedIn, 422–423, 426

linking, framework elements, 54

links, Google PageRank concept, 383–385

loop statements, Javascript, 302–303

loops, in JavaScript language, 105

images M

Mail application, 331–332

Mailto attributes, 331

maintenance, allowing customization and, 105

manifest attribute, 377

manifest files, 375–378

manipulating objects, HTML5 Canvas, 267

Maps application, 332–333

market, for mobile design, 4–5

markup syntax, HTML5, 244–246

match( ) method, 308

media queries, 342–343

MenuArea, 356–358

menuitems, 57–58

meta tags, 381

methods, HTML5 Canvas, 254–256

mix technologies, in JavaScript language, 104

mobile applications, 60

mobile design, 1–8

hardware for, 8

history of, 2–4

augmented reality, 3

GPS, 3

improved ergonomics and usability, 4

Internet, 4

making payments, 3

smart networks, 3

TV, 3

market for, 4–5

mobile-oriented approach, 6

mobile-oriented guidelines, 6–7

reasons for investing in now, 5

mobile development, tools and frameworks for, 119

mobile devices, and communications, 427–428

mobile Safari browser, tools for, 114–115

mobile strategies, 21, 413

mobile websites, 60

modularizing, code, in JavaScript language, 105

monetizing, WebApps, 424

monochromatic color schemes, 144

multi-touch events, 335–336

Multiple Background property, CSS 3, 279

Multiple Columns property, CSS 3, 283

multitouch technology, next-generation computing

effect on, 430–431

with touch screen and multitouch technology, 428

Munsell color scheme, 139–140

images N

native apps, Webapps vs., 69–73

HCI, 72–73

UI, 69–71

UX, 71–72

native design implementation

iPhone

native interface emulation, 348–359

page model, 347

native-like page structure, 347–348

native environment, 319–346

applications

full-screen mode, 323–324

redirecting, 326–327

startup image, 325–326

configuring, 319–320

defining viewport, 321–322

emulation

elements, 329–330

links, 328

scrolling, 330

text, 328–329

expanding frameworks, 343–345

head section, 327–328

resources for coding, 345

service interaction, 330–332

springboard icon, 324–325

touch events and gestures, 334–343

design elements for, 340

native and customized handler for, 339

orientation change event, 340–342

touch event paradigm, 334–339

native-like approach, to Webapps, 68–69

native-like design

for iPad, 170–173

aesthetic, 172–173

deliverables, 173

interaction, 173

research phase, 170

structure, 171–172

for iPhone, 173–177

aesthetic, 176

deliverable, 177

interaction, 176–177

research phase, 174

structure, 174–175

tools for UI design, 177

native-like page structure, 347–348

native user interface (NUI), 41–42, 47–48

navigation paths, providing orientation with, 25–26

negative space, passive, 130–138

active negative space, 137–138

dominance, 135

eliminating visual tension, 133–134

improving reading experience, 136

separating groups of content, 133

spotlighting elements, 134

user experience, 137

nesting loops, heavy, 105

Network tool, for Safari browser, 114

networks, smart, 3

next-generation computing

effect of multitouch technology on, 430–431

with touch screen and multitouch technology, 428

Nielsen, Jakob, 36

notation shortcut, in JavaScript language, 105

Note application, 45

NUI (native user interface), 41–42, 47–48

images O

Object( ) method, 309

Objective-C class, 116

Objective-C language, 116

objectName.methodName( ) method, 306

objects, Javascript, 308–309

Offline feature, WebApp with, 375–378

open captions, 35

OpenAppMktWebApp portal, 420–422

operators, Javascript, 298–300

optimized approach, to Webapps, 67

optimized information architecture, agile information architecture and, 16–18

orange, color psychology and user mood, 142

orientation change events, 340–343

orientation, providing with navigation path, 25–26

Outline property, CSS 3, 278

outlines, in CSS 3, 85

Overflow property, 90

overflow, text, 90–91

images P, Q

page model, iPhone, 40, 180, 347

page structure, native-like, 347–348

Page Title element, 350–352

page titles, 381

paper prototypes, 17, 30, 391, 398–401

passive interface, 125–126, 147

passive negative space, 132–138

active negative space, 137–138

dominance, 135

eliminating visual tension, 133–134

improving reading experience, 136

separating groups of content, 133

spotlighting elements, 134

user experience, 137

patterns, 148–157

F-shaped, 151–152

guidelines for, 155–157

images in, 152–153

influencing, 153–155

Z-shaped, 149–151

payments, making with mobile devices, 3

perception, rules for UI design, 127–130

performance, 361–375

application compressing, 369–371

code optimization, 362–366

combining CSS and Javascript code files, 365

minimizing DOM, 365–366

reducing HTTP requests, 363–365

web standards complaint, 362–363

writing slim, 363

image optimization, 366–369

avoiding scaling, 368–369

color depth, 366

CSS sprites, 366–368

using CSS rules instead of, 368

usability optimization, 371–375

Phone application, 330–331

pixels, versus vectors, 252–253

PNB (primary navigation bar), 214, 223–225

PNG (Portable Network Graphic), 324

pop( ) method, 306

Portable Network Graphic (PNG), 324

Portrait mode, 49

presentation, web, 244

press releases, 415

primary navigation bar (PNB), 214, 223–225

Primitive data type, 293

print( ) method, 109

prioritizing elements, removing elements and, 206–207

progressive enhancement

of browser support, 111–113

in JavaScript language, 105

promoting, 413–426

mobile strategy, 413

WebApps, 414–423

Beta Invitation testers, 414–415

email marketing, 417–418

monetizing, 424

press releases, 415

resources on market, 425

social networks, 422–423

submitting to WebApp portals, 419–422

web site for, 415–417

YouTube video tutorials, 418–419

prototypes, 28–31

electronic, 30–31, 159, 399–403

paper, 30, 398–401

purple, color psychology and user mood, 142

push( ) method, 306

images R

reading

improving experience with passive negative space, 136

patterns of, 148–157

F-shaped, 151–152

guidelines for, 155–157

images in, 152–153

influencing, 153–155

Z-shaped, 149–151

red, color psychology and user mood, 142

redirecting, applications, 326–327

Reference data type, 293

Reflection property, CSS 3, 289

reflections, in CSS 3, 102

removeChild( ) method, 316

removing elements, and prioritizing elements, 206–207

replace( ) method, 308

replaceChild( ) method, 316

research phases, for design

native-like, 170–174

of UIs, 158–164

reserved words, Javascript, 295–296

Resources tool, for Safari browser, 114

restore( ) method, 269–270

Retina Display, 43–44

reuse, of designs, 198–200

reverse( ) method, 306

Rounded Borders property, CSS 3, 274

rules of perception, in UI design, 127–130

images S

Safari Bar, 38

Safari browser

mobile, tools for, 114–115

resources and tools for, 113–114

Elements, 113

Network, 114

Resources, 114

Script, 114

Timeline, 114

Web Inspector, 113

save( ) method, 269–270

Scalable Vector Graphics, HTML5. See SVG

scaling images, avoiding, 368–369

Script tool, for Safari browser, 114

scrolling emulation, 330

SDKs (Software Development Kits), 115–119

development for iPhone using web standards, 118–119

development life cycle, 118

models for

Cocoa Touch framework, 116–118

iPhone/iPad simulator, 115

Objective-C language, 116

SDK development life cycle, 118

Xcode IDE, 115

tools and frameworks for mobile development, 119

Search Engine Algorithm, 380

search engine databases, 380

Search Engine Optimization. See SEO

search engine oriented design, 380–387

content, 381–382

domain title, 380

images, 385–386

Javascript code, 386

links, 383–385

meta tags, 381

page title, 381

SEO tools, 386–387

Search Engine Result Page (SERP), 380

search engines, anatomy of, 379–380

search( ) method, 308

secondary navigation bar (SNB), 214, 223

semantics, HTML5, 246–247

SEO (Search Engine Optimization), 378–387

resources on optimization and, 387

search engine oriented design, 380–387

content, 381–382

domain title, 380

images, 385–386

Javascript code, 386

links, 383–385

meta tags, 381

page title, 381

SEO tools, 386–387

search engines, anatomy of, 379–380

SERP (Search Engine Result Page), 380

service interaction, applications, 330–332

Mail, 331–332

Maps, 332

Phone, 330–331

SMS, 332

setAttribute( ) method, 315

shadows, in CSS 3

box shadow, 84

text shadow, 89–90

shaping elements, hiding elements and, 207–209

Sharing box, 320

shift( ) method, 306

shortcut notation, in JavaScript language, 105

showModalDialog( ) method, 109

shrinking elements, and grouping elements, 209

Sidebar Main Header, 167–168, 176

simplicity-complexity paradox, 210

simplicity, of UI, 180–181

iPhone, 180–181

user cognitive resources, 181

simulators, iPhone/iPad, 115

single resource, 364

single-touch events, 334–335

site maps, representing information architecture with, 23–26

limiting user mistakes, 24–25

providing orientation with navigation path, 25–26

Sizing property, 277

sketching, UI design, 179–184, 210–212

slice( ) method, 306, 308

slideshow, HTML5 Canvas, 270–272

smart networks, 3

SMS application, 332

SNB (secondary navigation bar), 214, 223

social media networks, 424

social network interconnection, 423

social networks, promoting WebApps on, 422–423

social sharing options, 416

Soft Line border, 196, 198

Software Development Kits. See SDKs

sort( ) method, 306

<span class="name">, 358

<span="arrow"> element, 358

spanning columns, in CSS 3, 94

Spanning Columns property, 284

splash screens, 325–326

splice( ) method, 306

split complementary color schemes, 145

split( ) method, 308

spotlighting, with passive negative space, 134

springboard icons, 324–325

sprites, CSS, 366–368

SQL database, 114

startup images, 325–326

Status Bar, 38, 41–43, 47–48

String object, 307

strings, Javascript, 307–308

Stroke( ) method, 260

structures

for design

native-like, 171–175

of UIs, 158, 164–167

Javascript, 293

style guides, 159–160

substr( ) method, 308

substring( ) method, 308

subtitling, 35

sum( ) method, 304

SVG (Scalable Vector Graphics), HTML5

versus Canvas, 253–254

overview, 252–253

swapCache( ) method, 377–378

switchImage( ) method, 271

images T

tabs, closing, 364

tap highlight, in CSS 3, 92

Tap Highlights property, CSS 3, 282

Task-Oriented Test, 400

technologies, in JavaScript language, 104

technology, ubiquitous computing, 429–430

tel protocol, 330–332

telecommunication, resources for ubiquitous computing and, 434

test feedback evaluation, 411

test variable evaluation, 410–411

testing, 389–412

agile, 391–392

elements, in JavaScript language, 106

evaluating, variables for, 405–411

Heat Map, 393–394

introduction to, 389

organizing, 394–400

assets, 398–400

use-cases, 394–398

performing, 400–403

electronic prototype, 403

paper prototype, 401

resources on, 412

web application, 390–391

web development lifecycles, 389–390

tetradic color schemes, 146–147

text

overflow, 90–91

shadow, 89–90

text boxes, header and description, 57

text emulation, 328–329

Text Overflow property, CSS 3, 281

Text Shadow property, CSS 3, 280

Textual Use Cases, 395–397

TFT (thin-film transistor), 220

Timeline tool, for Safari browser, 114

toDataURL( ) method, 255

toLowerCase( ) method, 308

tools

for mobile development, 119

for mobile Safari browser, 114–115

for Safari browser, 113–114

Elements, 113

Network, 114

Resources, 114

Script, 114

Timeline, 114

Web Inspector, 113

SEO, 386–387

for UI design, 177, 201, 242

Balsamiq Mockups interface, 185–186

representing connections, 187–188

for web development

frameworks, 52–59

mobile website, 60

Tools command, 113

top bar section, 349–350

toString( ) method, 306

touch events

finger-friendly development, 110–111

and gestures, 334–343

design elements for, 340

native and customized handler for, 339

orientation change event, 340–342

touch event paradigm, 334–339

touch-screens

devices

layout for, 164–166

typography for, 166–167

next-generation computing with multitouch technology and, 428

toUpperCase( ) method, 308

Transform property, CSS 3, 285–286

transforms, in CSS 3, 95–96

Transition property, CSS 3, 284

transitions, in CSS 3, 94

triadic color schemes, 146

tutorials, YouTube video, 418–419

TV, viewing with mobile devices, 3

Twitter, 416, 422–423, 425–426

typography, for touch-screen devices, 166–167

images U

ubiquitous computing, 427–435

Domotic computing and ambient intelligence, 432–433

mobile devices and communications, 427–428

multitouch technology

effect on next-generation computing, 430–431

next-generation computing with touch screen and, 428

new technology, usability, and opportunity, 429–430

resources for telecommunication and, 434

UE (usability engineering) phase, 14–15

UIKit framework, 117–118

UIs (User Interfaces), 121, 178–179, 201–203

Adobe Fireworks program, 188–201, 219–242

canvas, 189–190

design, 192–200

organizing levels, 191

tools for UI design, 201

versions of, 220–242

color psychology, 138–147

color schemes, 144–147

and user mood, 140–144

designing, 157–160

aesthetic, 158

deliverables, 159–160

interaction, 159

native-like, 170–177

research phase, 158

structure, 158

elements of

content box container, 56

content region, 56

footer, 58–59

header bar, 54–56

menu items, 57–58

text box, 57

interfaces

definition of, 123–125

hierarchy of, 147–148

inverted simple approach to, 204–212

hiding and shaping elements, 207–209

removing and prioritizing elements, 206–207

shrinking and grouping elements, 209

simplicity-complexity paradox, 210

sketching UI, 210–212

for iOS devices, 125–130

iPhone and iPad compatible, 160–170

aesthetic, 167–168

deliverables, 170

interaction, 168–169

research phase, 161–164

structure, 164–167

negative space, 130–138

reading patterns, 148–157

F-shaped, 151–152

guidelines for, 155–157

images in, 152–153

influencing, 153–155

Z-shaped, 149–151

simplicity of, 180–181

iPhone, 180–181

user cognitive resources, 181

sketching design, 203–204

anatomy of, 181–184

overview, 179–180

tools for designing, 184–188, 213–219

Balsamiq Mockups interface, 185–186

representing connections, 187–188

Webapps vs. native apps, 69–71

<ul id="pageitem">, 357

UML (Unified Modeling Language), 395, 410, 412

unshift( ) method, 306

update( ) method, 377–378

URL Bar, 41–43, 47–48

usability, 30–31, 36–40

ergonomics and, of mobile devices, 4

inspection, 372

optimization, 371–375

test, 372

ubiquitous computing, 429–430

usability engineering (UE) phase, 14–15

Usability Problems study, 374

use-cases, 394–398

Textual, 395–397

Use-Case Diagram, 397–398

user experience

effect of problems with usability on, 373–375

improving with passive negative space, 137

limitations of iPhone, 181

user experience phase. See UX

User Interfaces. See UIs

users

cognitive resources of, 181

interaction with, 159, 168–169

limiting mistakes of, 24–25

mood of, color psychology and, 140–144

needs of, 21

UX (user experience) phase, 14

finger-friendly development, 110–111

Webapps vs. native apps, 71–72

images V

valueOf( ) method, 306, 308

variable scope, Javascript, 304–305

variables

for evaluating tests, 405–411

collecting feedback, 407–409

ETA, 406–407

number of mistakes, 406

number of touches, 405

techniques, 409–411

global, in JavaScript language, 104

Javascript, 296–298

vectors, versus pixels, 252–253

version history, 416

vibrating alerts, 35

<video> tag, HTML5, 249

video tutorials, YouTube, 418–419

Viewport Metatag properties, 322

viewports, defining, 321–322

Virzi, Robert, 373

visible option, 35

visual tension, eliminating with passive negative space, 133–134

voice control, 34

VoiceOver feature, 33

images W

WAI (Web Accessibility Initiative), 23, 32

waterfall lifecycle, 389–390

WDM (Web Development Model), 51, 61–62

Web Accessibility Initiative (WAI), 23, 32

web applications, 390–391

web development

introduction to, 51

lifecycles, 389–390

mobile applications, 60

model for

pros and cons of, 62

web standards, 73, 106

Webapps, 66–69

SDK, 115–119

development for iPhone using web standards, 118–119

models for, 115–118

tools and frameworks for mobile development, 119

tools for, 60

development frameworks, 52–59

mobile website, 60

Web Development Model (WDM), 51, 61–62

web fonts, in CSS 3, 92

Web Fonts property, CSS 3, 282

Web Inspector tool, for Safari browser, 113

Web optimization, 361–388

iPad and iPhone compatibility, 361

Offline feature, WebApp with, 375–378

performance, 361–375

application compressing, 369–371

code optimization, 362–366

image optimization, 366–369

usability optimization, 371–375

SEO, 378–387

resources on optimization and, 387

search engine oriented design, 380–387

search engines, 379–380

web sites, for promoting WebApps, 415–417

web standards, 243–318

browser support for, 106–115

being finger-friendly, 110–111

limitation and constraints, 108–110

progressive enhancement, 111–113

resources and tools for Safari, 113–114

tools for mobile Safari, 114–115

code complaint with, 362–363

comparing iPhone and iPad for web presentation, 244

CSS 3, 272–289

Animation property, 286–287

Background Origin property, 279

Background Size property, 278

Border Images property, 274

Box Shadow property, 277

Box Sizing property, 276

Gradients property, 275

keyframes, 289

Multiple Background property, 279

Multiple Columns property, 283

new features of, 78, 102

Outline property, 278

Reflection property, 289

Rounded Borders property, 274

Spanning Columns property, 284

Tap Highlights property, 282

Text Overflow property, 281

Text Shadow property, 280

Transform property, 285–286

Transition property, 284

Web Fonts property, 282

Word Wrapping property, 281

development for iPhone using, 118–119

HTML, new features of, 74–78

HTML5, 244–272

< audio>tag, 251

<canvas>tag, 252

<video>tag, 249

Canvas, 252–272

definitions, 246

markup syntax, 244–246

semantics, 246–247

SVG, 252–253

Javascript, 290–317

adding to webpage, 292

arrays, 305–307

best practices, 103–106, 316–317

BOM, 309–310

conditional statements, 300–302

data categories, 293–295

DOM, 310–316

functions, 303–304

loop statements, 302–303

objects, 308–309

operators, 298–300

reserved words, 295–296

strings, 307–308

structure, 293

variable scope, 304–305

variables, 296–298

resource on web standards, 317

WebApp mode, 321, 323

WebApp portal, 419–420, 422, 426

Webapps, 66–69, 414–423

Beta Invitation testers, 414–415

compatible approach to, 66

dedicated approach to, 67–68

email marketing, 417–418

vs. native apps, 69–73

HCI, 72–73

UI, 69–71

UX, 71–72

native-like approach to, 68–69

with Offline feature, 375–378

optimized approach to, 67

press releases, 415

social networks, 422–423

submitting to WebApp portals

Apple, 419–420

eHub, 420–422

OpenAppMkt, 420–422

web site for, 415–417

webpage, adding Javascript to, 292

websites, mobile, 60

white, color psychology and user mood, 143

white on black effect, 34

whitespace, 130

window.applicationCache, 377–378

wireframes, 23–24, 26–29, 38

word wrapping, in CSS 3, 91

Word Wrapping property, 281

Wordpress theme, 414

images X

Xcode IDE, 115

XD (experience design) phase, 13–14

images Y

yellow, color psychology and user mood, 141

YouTube video tutorials, 418–419

images Z

Z-shaped reading patterns, 149–151

zen software, 184

ZenWare, 184

zenware program, 184

zoom function, 34

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.121.45