Index

A, B

Adobe Dreamweaver CS5.5

compression

compressed, obscured, and alien–like jQuery code, 236

uncompressed jQuery script, 235

HTML5 Boilerplate, 240

PhoneGap, 256

Adobe Fireworks

design comp, 143, 144

on Windows 7 platform, 141

Pages panel, 142

Advanced Audio Coding (AAC), 191

Android 2.3 web browser, 32

Android’s geolocation world, 155

checkIn() function, 156

geolocation tracking, 158

PERMISSION_DENIED error, 156

position.coords.accuracy, 155

position.coords.altitude, 155

position.coords.heading, 158

position.coords.latitude, 155

position.coords.longitude, 155

position.coords.satellites, 155

position.coords.speed, 158

POSITION_UNAVAILABLE error, 156, 157

supportsGeo() function, 155

TIMEOUT error, 156

UNKNOWN_ERROR, 156

watchPosition() method, 158

API. See Application programming interface (API)

Application packaging

compression

compressed, obscured, and alien–like jQuery code, 236

description, 233–234

jQuery 1.6.2. file size examination, 235

tools and utilities, 236–240

uncompressed jQuery script, 235

features, 254–255

FTP application

deploying an application, 248–252

description, 246

FileZilla, 247

Git, 253–254

hosting solution

1and1, 245

Dreamhost, 243–245

evaluation, 241–242

Media Temple, 245–246

PhoneGap, 255–257

software versioning, 252–254

Titanium Mobile, 258–259

Application programming interface (API)

Audio Data, 196

Android 2.3.4 Gingerbread device, 196

description, 196

HTML5, 196

definition, 21

music service

Amazon’s Product Advertising API, 207–208

description, 202

Last.fm, 203–206

Asynchronous JavaScript And XML (AJAX)

asynchronous transfer

Android operating system, 214

beginning my search, 213

description, 211

false setting, 230–231

flash video, 215

Google search home page, 212

description, 211

JavaScript and XML, 215–216

POST vs. GET, 230

RSS feeds, 220

JSON output and display it, 224–226

Pipes creation, 221–224

username availability

check username page, 228

check_name.php Script, 227–228

checking code, 229

checkname.html Page, 228

description, 226

not available screen, 229

Users Table, 227

validation and forms auto–submission, 229

word–of–the–day application

Android web browser, 219–220

onreadystatechange Function, 217

readyState and status, 218

request.send() function, 218

word.txt file, 216–217

Audacity audio editor

editing, 192

export option, 195

LAME MP3 Library download page, 194

preferences dialog box, 193

Audio, mobile web applications

audacity audio editor

editing, 192

export option, 195

LAME MP3 Library download page, 194

preferences dialog box, 193

audio codecs

AAC, 191

MP3, 190–191

Ogg, 191

Audio Data API

Android 2.3.4 Gingerbread device, 196

description, 196

HTML5, 196

description, 187

HTML5 audio tag

Android Gingerbread 2.3 device, 189

attributes, 188

elements, 188

integration, 189–190

music service APIs

Amazon’s Product Advertising API, 207–208

description, 202

Last.fm, 203–206

C

CartoDB, 164

Cascading Style Sheets (CSS)

Family Chore list, 3

frameworks, 130–131

320 and Up, 133–135

biosketch, framework comparison, 135–140

Less Framework 4, 132–133

1140px Grid, 131

HTML tag, 5

Patriotic Chore list, 4

Cell tower triangulation, 146

ChangeDiv() function, 154

CheckIn() function, 154, 156

CloudMade, 164

Codecs

audio

AAC, 191

description, 190

MP3, 190–191

Ogg, 191

video

h.264/MPEG-4, 199

Ogg Theora, 199

WebM, 199–200

Compression

compressed, obscured, and alien–like jQuery code, 236

description, 233–234

jQuery 1.6.2. file size examination, 235

tools and utilities

applications, 238

HTML5 Boilerplate, 239–240

Packer, 238

YUI compressor, 236–237

uncompressed jQuery script, 235

Cross-domain scripting, 22

Cross-site scripting (XSS), 22

Crude mockup, 58

CSS. See Cascading Style Sheets (CSS)

D

deviantART, 124–125

Document Object Model (DOM), 36, 147

Dreamhost

description, 243

VPS, 244–245

Droid Sans font, 29, 127

E

Extensible Markup Language (XML)

interactions, 10

my personal blog, 9–10

RSS feed, 8–9

RSS icon, 8

F

FAILboard Pro, 54–55

File Transfer Protocol (FTP) application

Cyberduck, 248

deploying an application, 248–252

description, 246

FileZilla

description, 247

directory creation, 250–252

host connection information, 249

Unknown Host Key prompt, 250

without configuration, 249

SFTP, 248–252

FileZilla

description, 247

directory creation, 250–252

host connection information, 249

Unknown Host Key prompt, 250

without configuration, 249

Find Icons search engine, 123

Font issues, 129–130

G

Geolocation

application, 151–152

changeDiv() function, 154

checkIn() function, 154

HTML review, 153

navigator.geolocation.getCurrentPosition(), 154

supportsGeo() function, Redux, 153

utility function, 153

cell tower triangulation, 146

desktop browser test for geolocation support, 149

Document Object Model (DOM), 147

Global Positioning System (GPS), 146

IP address allocation, 146

mobile browser test for geolocation support, 149

settings, 147

simple geolocation support, 148, 150

tracking, 158

WiFi triangulation, 146

Global Positioning System (GPS), 146

Google Maps, 160–163

location-based services, 163

CartoDB, 164

CloudMade, 164

Mapnik, 164

Mapstraction, 164

Open Street Map, 164

pros and cons, 163–164

Wax, 164

Google Nexus One, 89–90

Google web fonts, 128–129

GPS. See • Global Positioning System (GPS)

H

.htaccess user agent detection, 97–98

h.264, 199

Hosting solution

1and1, 245

evaluation, 241–242

Media Temple, 245–246

HotGloo, 58–59

HTML. See HyperText Markup Language (HTML)

HTML5

audio tag

Android Gingerbread 2.3 device, 189

attributes, 188

elements, 188

video tag

Android 2.3.4 Gingerbread device, 198

attributes, 198

elements, 197

features, 198

HTML5 Boilerplate

configuration, 240

description, 239

structure, 239

HTML5 location-based applications

Android's geolocation world

checkIn() function, 156

geolocation tracking, 158

PERMISSION_DENIED error, 156

position.coords.accuracy, 155

position.coords.altitude, 155

position.coords.heading, 158

position.coords.latitude, 155

position.coords.longitude, 155

position.coords.satellites, 155

position.coords.speed, 158

POSITION_UNAVAILABLE error, 156, 157

supportsGeo() function, 155

TIMEOUT error, 156

UNKNOWN_ERROR, 156

watchPosition() method, 158

geolocation, 145

cell tower triangulation, 146

desktop browser test for geolocation support, 149

Document Object Model (DOM), 147

Global Positioning System (GPS), 146

IP address allocation, 146

mobile browser test for geolocation support, 149

settings, 147

simple geolocation support, 148, 150

WiFi triangulation, 146

geolocation application, 151–152

changeDiv() function, 154

checkIn() function, 154

HTML review, 153

navigator.geolocation.getCurrentPosition(), 154

supportsGeo() function, Redux, 153

utility function, 153

Google Maps, 160–163

location-based services, 163–164

location gaming, 164–166

Human-Readable Data Interchange, 10–11

HyperText Markup Language (HTML)

bodytag, 2

code, 2

description, 1

page header, 2

review, 153

I

I Love Ham

CSS, 41–43

HTML markup, 39–41

JavaScript, 43–48

web application, 21

Iconfinder, 121–122

Icons

Find Icons search engine, 123

Iconfinder, 121–122

Init() function, 36

Internet applications

Adobe Fireworks, 141

design comp, 143, 144

on Windows 7 platform, 141

Pages panel, 142

CSS frameworks, 130–131

1140px Grid, 131

320 and Up, 133–135

biosketch, framework comparison, 135–140

Less Framework 4, 132–133

icons

Find Icons search engine, 123

icon usage, favicon, 123–124

Iconfinder, 121–122

stock photography

deviantART, 124–125

iStockphoto, 125–126

photo usage rules, 126

web fonts

Droid Sans font, 127

Google, 128–129

issues, 129–130

IP address allocation, 146

iStockphoto, 125–126

J, K

JavaScript, web design, 6–8

JavaScript Object Notation (JSON), 10–11

with padding, 22

JavaScript user agent detection

detection code, 92–93

single-platform developer, 94

Android Browser, 96

App HTML Page, 94–95

Safari, 97

jQuery JavaScript framework, 33

jQuery Mobile

animation, 109

Avery native looking user interface, 102

content data-attribute, 101

dialog boxes, 111–113

features, 100

HTML markup, 101

invalid custom mood attribute, 100

multiple pages, 102

about and contact pages, 106–107

about Page, 108

contact page, 109

contents, 103

count bubble list, 104

footer, 105

form elements, 105

home page, 107

inset search fields, 104

nested list, 104

search filter box, 105

thumbnail and icon list, 104

transition and theme attributes, 105

UI elements, 102

Simple Calc, 118–120

ThemeRoller, 113

Adobe kuler swatches, 116

configuration, 116

customizing options, 115

download theme window, 117

My custom theme, 117

start up screen, 114

transition page, 109–111

valid data-mood attribute, 100

JSON. See JavaScript Object Notation (JSON)

L

Less Framework 4, 132–133

Location gaming, 164–166

Location-based services

CartoDB, 164

CloudMade, 164

Mapnik, 164

Mapstraction, 164

Open Street Map, 164

pros and cons, 163–164

Wax, 164

M, N

MapMe() function, 162

Mapnik, 164

Mapstraction, 164

META tags

description, 85

history, 86

viewport element, 86

Android Webkit browser, 89

code adds, 88

description, 86

device pixel density, 89

scale values, 88

user-scalable turned off, 88–89

Who’s That Tweet game, 87

Mobile interfaces

mobile strategy, 56

native applications, 54–55

web applications, 56

web sites, 55–56

Mobile web applications

3G technologies, 11–12

audio

audacity audio editor, 192–195

audio codecs, 190–192

Audio Data API, 196–197

HTML5 audio tag, 188–189

integration, 189–190

music service APIs, 202–208

concepts, 15

Keep it Simple Stupid, 17–19

monetization, 16

test-retest reliability, 17

Think Like A User, 16

External Keyword tool, 50, 51

Google Keyword Search, 51

KISS principle, 18

languages and protocols, 12

desktop-view, my blog, 14

mobile view, my blog, 15

PDAs, 12–14

WAP, 14

Partial Keyword Ideas list, 51

planning

description, 53

FAILboard Pro, 54–55

mobile strategy, 56

mobile web sites, 55–56

native applications, 54–55

web applications, 56

structuring

code structure, 60–62

crude mockup, 58

description, 57

folder structure, 62–63

HotGloo, 58–59

Wireframing / Mockup, 57–58

Twitter, 19

user movement, 59–60

users, 51

age distribution, 53

description, 52

fictional transit application, 52

video

description, 197

Handbrake, 200–202

HTML5 video tag, 197–198

video codecs, 199–200

web design

CSS, 3–5

HTML, 1–3

JavaScript, 6–8

JSON, 10–11

XML, 8–10

Move Me application

global state variables, 173

limitations, 181

local transport searches, 176–177

location markers customization, 173–174

map preparation, 174–176

running the code, 177–179

source code, 169–172

transport possibilities, 180

with dedicated transit buttons, 180

MP3, 190–191

MPEG-4, 199

Music service APIs

Amazon’s Product Advertising API

description, 207

iObjects Code Sample, 208

Last.fm

API request documentation, 205

description, 203

scrobbling process, 206

Web Services page, 204

O

Ogg

audio codecs, 191

video codecs, 199

Open Street Map, 164

P, Q

Packer, 238

Personal digital assistants (PDAs), 12–14

PhoneGap, 255–257

Photo usage rules, web apps, 126

PHP user agent detection, 91–92

1140px Grid, 131

R

RSS feeds, 220

JSON output and display it, 224–226

Pipes creation, 221

completed Pipe, 223–224

editor, 222

Fetch Site, 222

homepage, 221

modules, 222

Truncate, 222

Union, 222

S

Screen resolution, CSS 3, 65

Daily Droid newspaper

CSS code, 74–79

HTML code, 72–74

480 × 859 resolution, 71

859 × 480 resolution, 72

1024 × 600 resolution, 69

1280 × 800 resolution, 70

2048 × 1536 resolution, 70

fixed-width webpage at 1024 × 600 resolution, 66

fixed-width webpage at 2048 × 1536 resolution, 66, 67

flexible-width webpage at 1024 × 600 resolution, 67

flexible-width webpage at 2048 × 1536 resolution, 68

media queries, 79–83

Video Graphics Array (VGA), 65

Simple Calc, 118–120

Software versioning, 252–254

Stock photography

deviantART, 124–125

iStockphoto, 125–126

photo usage rules, 126

Structuring, mobile web applications

code structure, 60

footer.php file, 61

HTML document, 62

PHP Include Statement, 61

crude mockup, 58

description, 57

folder structure, 62–63

HotGloo, 58–59

Wireframing / Mockup, 57–58

SupportsGeo() function, Redux, 153

T

ThemeRoller, 113

Adobe kuler swatches, 116

configuration, 116

customizing options, 115

download theme window, 117

My custom theme, 117

start up screen, 114

320 and Up framework, 133–135

Titanium Mobile, 258–259

Transit data resources

Community Projects, 184

Google’s Transit Developers Page, 184

GTFS components, 182–183

One Busway Project, 184

schedules and timetables, 181

timetable realities, 183

UlmApi.de hackathon GTFS application, 184–185

Transport application

description, 167–169

execSearch() function, 176, 180

google.load() function, 172

Move Me application

global state variables, 173

limitations, 181

local transport searches, 176–177

location markers customization, 173–174

map preparation, 174–176

running the code, 177–179

source code, 169–172

transport possibilities, 180

with dedicated transit buttons, 180

prepareMap() function, 175

processLocalSearchResults() function, 177

transit data resources, 181

Community Projects, 184

Google’s Transit Developers Page, 184

GTFS components, 182–183

One Busway Project, 184

schedules and timetables, 181

timetable realities, 183

UlmApi.de hackathon GTFS application, 184–185

Twitter applications

I Love Ham

CSS, 41–43

HTML markup, 39–41

JavaScript, 43–48

Who’s That Tweet?, 26

CSS file, 27–33

HTML markup, 26–27

JavaScript, 33–37

JSON with padding, 22

Uniform Server development environment, 22–25

U

Uniform Server development environment, 22

default WWW folder view, 25

menu, 24

Pre-Check application, 23

quick help documentation, 25

User agents, browser platforms

description, 89

JavaScript, 92

detection code, 92–93

single-platform developer, 94–97

PHP, 91–92

Spoofing, 90

Utility function, dynamic page changes, 153

V

Video Graphics Array (VGA), 65

Video, mobile web applications

codecs

h.264/MPEG-4, 199

Ogg Theora, 199

WebM, 199–200

description, 187, 197

Handbrake

description, 200

in Windows 7 operating system, 200

iPhone and iPod Touch preset configuration settings, 202

settings, 201

HTML5 video tag

Android 2.3.4 Gingerbread device, 198

attributes, 198

elements, 197

features, 198

Viewport element

Android Webkit browser, 89

code adds, 88

description, 86

device pixel density, 89

scale values, 88

user-scalable turned off, 88–89

Who’s That Tweet game, 87

Virtual Private Server (VPS), 244–245

W

WatchPosition() method, 158

Wax, 164

Web browser platforms

META tags

description, 85

history, 86

viewport element, 86–89

user agent

.htaccess, 97–98

description, 89

Google Nexus One, 89–90

JavaScript, 92–97

PHP, 91–92

Spoofing, 90

Web design

CSS

Family Chore list, 3

HTML tag, 5

Patriotic Chore list, 4

HTML

bodytag, 2

code, 2

description, 1

page header, 2

JavaScript, 6–8

JSON, 10–11

XML

interactions, 10

my personal blog, 9–10

RSS feed, 8–9

RSS icon, 8

Web fonts

Droid Sans font, 127

Google, 128–129

issues, 129–130

Webkit, 28

WebM, 199–200

Who’s That Tweet?

CSS file, 27–33

HTML markup, 26–27

JavaScript, 33–37

JSON with padding, 22

Uniform Server development environment, 22

default WWW folder view, 25

menu, 24

Pre-Check application, 23

quick help documentation, 25

WiFi triangulation, 146

Wireframing / Mockup, 57–58

X, Y Z

XML. See Extensible Markup Language (XML)

XSS. See Cross-site scripting (XSS)