Note: Page numbers followed by b indicate boxes, f indicate figures.
A
accelerators. See hardware accelerators
active pseudo class, 32
Adobe’s Spry framework, 111
Ajax
linking to outside pages with, 84–85
pulling in dynamic data, 111–114
Ajax, linking to outside pages with, 84–85
Aktagon Ltd. has, 102
all (media type), 33
Amazon Android App Store, 206
ANCHOR element, 31–32
adding jQuery to, 74
page transitions (jQuery Mobile), 86
Android browser, 10. See web browsers
designing for, 48–49
Android Market Place (Amazon), 206
Android Market Place (Google), 206
Android operating system, 4, 5, 5f
PhoneGap on, 175
Android tablets, developing for. See tablet development
API functionality, 42–45
geolocation. See geolocation
App IDs (Apple), 180
App Store, packaging apps for, 192–194, 206
Apple, 4, 5, 6–7. See also iPhones; Mobile Safari
App IDs, 180
becoming Apple developer, 177–178
provisioning profiles, 181, 181f
iAd framework, 189
icons for iPhone apps, 182
packaging apps for App Store, 192–194, 206
PhoneGap projects on iOS devices, 177–185
preparing to develop apps, 180–185
publishing apps with iTunes Connect, 194–196
tablets, 212. See also tablet development
apps
building with PhoneGap. See PhoneGap architecture
converting HTML to, 105–106, 118–134
with PhoneGap. See PhoneGap templates
packaging for App Store, 192–194, 206
publishing with iTunes Connect, 194–196
art. See images
ARTICLE element, 13–14, 58, 59
audio
encoding for web delivery, 39–40
autoCapitalize property, 152
AUTOFOCUS attribute (INPUT), 63
autoplay attribute (VIDEO), 36, 37
autotitles extension for jQTouch, 131–132
B
back button, 86, 127. See also buttons
background-image definition, 26–27
background objects, 26–27
background-position definition, 26
basic lists (Sencha Touch), 156, 157, 158f
bitmaps, 34–35
BlackBerry 6, designing for, 49
using PhoneGap, 196–197
blocking content, 12–16
blur-radius definition, 23
boilerplate pages, 122
border-radius definition, 28
borders
columns, 24
bounce animation, 30–31
BR element, 63
braille (media type), 33
browsers. See web browsers
Build Health Chart (PhoneGap), 205f
Build service (PhoneGap), 196–197, 203–206
Bundle identifier, 185
BUTTON element, 65
button size, 8–9
buttons. See also toolbars
with jQTouch, 126–127
with jQuery Mobile, 86, 87, 110
adding icons to, 93–95
with Sencha Touch, 151
C
call-only phones, 3
Carousel control (Sencha Touch), 160–162, 161f
carousel navigation (Sencha Touch), 160–162, 161f
cascading style sheets. See CSS3
centimeter (for font size), 20
certified Apple developer, becoming, 178–179
checkboxes
checked pseudo class, 32
Chrome OS, 11. See also web browsers
CLASS attribute (HEADER), 57
classes, 31–32
Cm (for font size), 20
Code Signing Identity property, 183
colors, 22
gradients, 25–26
of shadow text effects, 23
transitions. See transitions
columns, designing, 23–25
community plug-ins, 74
components, jQuery Mobile, 85–95
Contact Us page, designing, 61–65
content blocks. See blocking content
controls attribute (VIDEO), 36, 37
controls, form. See forms
converting websites into apps. See apps, converting HTML to
Cook, Tim, 5
core library, jQuery, 75
core plug-ins, 74
Corner-Radius definition, 27
CSS (Cascading Style Sheets)
about, 16–33
designing with, 17
background objects, 26–27
colors. See colors columns, 23–25
controlling display with, 17–19
font sizing, 20–21
shadow text effects, 22–23
media definition, 32–33
on Sencha Touch sites, 166–167
styling video controls, 38
cubic-bezier function (animation), 29
“current” class (jQTouch example), 121, 123
custom icons. See icons, adding to elements
cut-out effect, 23
D
data bubbles, 92
data-dividertheme attribute (UL), 91
data-icon attribute, 93–95
Data Link plug-in (jQuery Mobile), 100
data-position attribute (DIV), 88
data-role attribute (DIV), 83
data-role attribute (UL), 91
data speeds, 41
data storage, local, 45–47
DATALIST element, 64
Datepickerfield control (Sencha Touch), 154
DATETIME attribute (TIME), 61
default start page, changing, 123, 123f
default.html file, 59
designing for mobile devices, about, 7–11
dialogs, with jQuery Mobile, 89
disabled pseudo class, 32
disclosure lists (Sencha Touch), 156, 159, 159f
display control with CSS, 17–19
DIV element, 82
multiple screens with, 122
dividers, list, 91
downloading
Eclipse, 175
jQTouch framework, 119
PhoneGap, 175
Sencha Touch, 145
Xcode, 182
Dreamweaver to build PhoneGap projects, 196
drop-down lists. See lists; spinning drum
drop-down menus, 64
drop shadow effects, 22–23
dynamic data in jQuery Mobile, 111–114
E
ease functions (animation), 29
EDGE data speed, 41
edge-to-edge lists (jQTouch), 124, 125, 125f
Email field (Sencha Touch forms), 152–153
embedding fonts using CSS3, 19
embossed (media type), 33
enabled pseudo class, 32
encoding for web delivery, 39–40
error messages with form validation, 97–100
events, gesture-driven, 95
extensions for jQTouch, 129–131
autotitles extension for jQTouch, 131–132
building custom, 133–134
floaty extension for jQTouch, 129
location extension for jQTouch, 132–133
external pages, linking to, 84–85
F
Fennec. See Mobile Firefox
Fieldset control (Sencha Touch), 155
FIGURE element, 15
Firefox. See Mobile Firefox
first-child pseudo class, 32
fixed headers and footers, 88–89
floaty extension for jQTouch, 129
focus pseudo class, 32
font-face definition, 21f
font-family definition, 18
font-size definition, 20–21
fonts
embedding using CSS3, 19
sizing, 20–21
web-safe, 18
footers with jQuery Mobile, 86, 87, 88–89
FORM attribute (INPUT), 57
FORM element, 57, 62. See also forms
formatting pages. See also CSS3
with jQTouch, 127–129, 141, 142. See also buttons
with Sencha Touch, 151–156
validating with jQuery Mobile, 95–100
custom error messages, 97–100
4G data speed, 41
G
geolocation, 43–45
on jQTouch websites, 132–133
MapKit plug-in for PhoneGap, 186
on Sencha Touch sites, 168
gesture-driven events, 95
GIF graphics, 34
Globalization plug-in (jQuery Mobile), 100
Google, 4
Android. See Android browser; Android operating system
Android Market Place, 206
Chrome OS, 11. See also web browsers
Google Analytics, 101–104
Honeycomb tablets,
developing for. See tablet
development
Map services, 43, 43b, 43f, 169
gradient colors, 25–26
graphics, 34–35. See also colors; images
grouped lists (Sencha Touch), 156, 158, 158f
H
H1 element, 58
handheld (media type), 33
hardware accelerators, 8
HEAD element, 56
pulling in dynamic data, 112
headers with jQuery Mobile, 86, 88–89, 110
height attribute (VIDEO), 36
hexadecimal codes for colors, 22
home page, creating, 59–60
Honeycomb tablets, developing for. See tablet development
horizontal-offset definition, 23
horizontal rule. See HR element
designing for, 51
HR element, 58
HSL and HSLA colors, 22
HTML, converting to apps. See apps, converting HTML to
HTML5 basics, 11–16
HTML5 elements, new, 12
hyperlinks. See links
I
iAd framework, 189
icons
adding to elements, 93–95
adding to list items, 126
for iPhone apps, 182
ID attribute (ARTICLE), 58
ID attribute (DATALIST), 64
ID attribute (HEADER), 57
images. See also FIGURE element
adding to list items, 92
background, multiple, 26–27
preloading for jQTouch websites, 138
In (for font size), 20
inch (for font size), 20
input devices, 8
INPUT element, 57
checkboxes, 128
for Contact Us page, 61–65
iOS devices, PhoneGap on, 177–185
iPad development. See tablet development
iPhones, 3
becoming Apple developer, 177–179
provisioning profiles, 181, 181f
developing apps for, 180–185
developing icons, 182
jQuery plug-in for, 77
packaging apps for App Store, 192–194, 206
spinning drum for lists, 128, 154f
iTunes App Store, packaging apps for, 192–194, 206
iTunes Connect, 194–196
J
controlling VIDEO element with, 37–39
extending jQuery Mobile with, 95–104
extensions for jQTouch, 129–131
autotitles extension for jQTouch, 131–132
building custom, 133–134
floaty extension for jQTouch, 129
location extension for jQTouch, 132–133
jQuery. See jQuery Mobile
local data storage, 45–47
on Sencha Touch sites, 147, 168–170
JPG (JPEG) graphics, 34–35
jQTouch framework, 77, 117–136
building basic site, 120–122, 137–142
building multiple pages, 122–124
extensions for, 129–131
autotitles extension for jQTouch, 131–132
building custom, 133–134
floaty extension for jQTouch, 129
location extension for jQTouch, 132–133
extras for iOS devices, 135–136
forms on, 127–129, 141, 142. See also buttons
geolocation, 132–133
jQuery
basics, 71–74
blog, 100
converting website into app, 105–106
extending with jQTouch. See jQTouch framework
future enhancements, 108
keeping current with, 107
toolset for, 75
jQuery iPhone plug-in, 77
jQuery library, 81
jQuery Mobile, 16–17, 16f, 69–108. See also plug-ins, jQuery
components, 85–95
dialogs, 89
lists, 90–93
converting websites into apps. See apps, converting HTML to
extending with jQTouch. See jQTouch framework
future enhancements, 108
gesture-driven events, 95
getting started, 80–85
creating pages with links, 83–85
Google Analytics plug-in, 101–104
keeping current with, 107
operating systems with, 78–80
Sencha Touch vs., 145
setting up, 109–111
for tablet development, 216
swatches, 225–226
themes, 224–225
ThemeRoller plug-in for, 104, 228
jQuery Mobile ThemeRoller plug-in, 228
jQuery Templates plug-in (jQuery Mobile), 100
jQuery UI plug-in, 75–76
jQuery UI ThemeRoller plug-in, 104
L
LABEL element, 63
landscape and portrait views, 8
lang pseudo class, 32
Large (font size), 20
last-child pseudo class, 32
latitude. See geolocation
LEGEND element, 15
LI element. See also lists on websites
line breaks. See BR element
linear function (animation), 29
linear gradients, 25
link pseudo class, 32
links
adding to list items, 92
to external pages, 84–85
LIST attribute (INPUT), 64
LIST element, 91
lists
with jQTouch, 124–126
with jQuery Mobile, 90–93
adding icons to, 93–95
with Sencha Touch, 156–159
local data storage, 45–47
LocalStorage API, 45–47
location-aware solutions. See geolocation
location extension for jQTouch, 132–133
longitude. See geolocation
loop attribute (VIDEO), 36
M
map services. See geolocation
Map services (Google), 43, 43b, 43f, 169
MapKit plug-in, 186
media definition, 32–33
Medium (font size), 20
MeeGo, 52
menu pages, designing (jQuery Mobile), 83
metal lists (jQTouch), 124, 125, 125f
Microsoft
jQuery and, 100
tablets, developing for. See tablet development
Windows Phone 6.5 and earlier, 52
PhoneGap projects for, 196–197
millimeter (for font size), 20
Mm (for font size), 20
mobile browsers. See web browsers
mobile devices, about designing for, 7–11
Mobile Firefox, 10, 10f. See web browsers
mobile operating systems. See operating systems
Mobile Safari, 4, 10. See web browsers
designing for, 48
money, making by selling apps, 206–207
Motorola Xoom. See tablet development
-moz-border-radius definition, 28
multicolumn display, 23–25
N
name, app, 185
NAV element, 15–16
navbars, jQuery Mobile, 87–95
navigation, 15–16
carousel navigation (Sencha Touch), 160–162, 161f
with jQuery Mobile buttons, 86, 87–95
adding icons to, 93–95
tab navigation (Sencha Touch), 160–162, 162f
new page, designing, 60–61
Nokia MeeGo and Symbian, 52, 80
Notobi’s PhoneGap. See PhoneGap templates
nth-child pseudo class, 32
nth-last-child pseudo class, 32
O
Objective-C language, 117
only-child pseudo class, 32
onReady function, 150
Opera Mobile, 10, 11f. See Mobile Safari
operating systems, 4, 5, 6. See also specific operating system by name
jQuery Mobile with, 79
supported by PhoneGap, 176, 176f
OUTPUT element, 65
P
P element, 58
packaging apps for App Store, 192–194, 206
padding
with rounded corners, 28
Page component (jQuery Mobile), 90
page header and footer. See FOOTER element; HEADER element
page transitions (jQuery Mobile), 85–86
Password field (Sencha Touch forms), 152–153
Pc (for font size), 20
persistent headers and footers, 88–89
Phone 7. See Windows Phone 7
PhoneGap architecture, 105–106, 173–197
Build Health Chart, 205f
Build service, 196–197, 203–206
developing apps with, 180–185
for BlackBerry and Windows Phone, 196–197
with Dreamweaver, 196
on iOS devices, 177–185
with Xcode, 182–185
extending with custom code, 189–192
extending with plug-ins, 185–189, 186f
packaging apps for App Store, 192–194, 206
pica (for font size), 20
pixel (for font size), 20
pixels. See screen sizes and resolutions
PLACEHOLDER attribute (INPUT), 57
PlayBook, designing for, 49. See also tablet development
Plist configuration, 183, 184f
plug-ins, 74
plug-ins, jQuery, 75, 76–77, 95–104
Google Analytics plug-in, 101–104
jQTouch. See jQTouch framework
jQuery Mobile ThemeRoller plug-in, 228
jQuery UI plug-in, 75–76
jQuery UI ThemeRoller plug-in, 104
plug-ins, PhoneGap, 185–189, 186f
PNG graphics, 34
point (for font size), 20
pop-overs, table, 213
portrait and landscape views, 8
POST method (FORM element), 62
poster attribute (VIDEO), 36
preloading images on jQTouch websites, 138
presentation, Sencha Touch, 149
print (media type), 33
progressive enhancement, 69–70
projection (media type), 33
provisioning profiles, 181, 181f
pseudo applications with jQTouch, 135
pseudo classes, 31–32
Pt (for font size), 20
publishing apps with iTunes Connect, 194–196
Px (for font size), 20
R
radio selectors, 129
radius, rounded corners, 28
RANGE attribute (INPUT), 64
Rem (for font size), 20
removeItem property (JavaScript), 46
REQUIRED attribute (INPUT), 63
resolution, screen. See screen sizes and resolutions
revenue generation with app sales, 206–207
RGB and RGBA colors, 22
RIM, 6
designing for. See Android operating system
PlayBook, designing for, 49. See also tablet development
rounded buttons (Sencha Touch), 151
rounded corners, 27–28, 27f, 126f
rounded lists (jQTouch), 124, 125, 125f
S
Safari. See Mobile Safari
sales of apps, 206–207
Scalable Vector Graphics. See SVG images
screen (media type), 33
screen sizes and resolutions, 8, 9f
media type definitions and, 33
video streaming and, 41
screens, creating multiple with DIV, 122
SECTION element, 12, 13, 57–58
Selectfield control (Sencha Touch), 154, 154f, 155f
selection pseudo class, 32
selling apps
guidelines for, 206–207
with iTunes Connect, 194–196
Sencha Touch framework, 145–163
building basic site, 148–150
custom CSS with, 166–167
getting started, 145–148, 165–166
jQuery Mobile vs., 145
for tablet development, 213–215
TabPanel, 150
user interface elements, 150–162
buttons, 151
Carousel and Tabs controls, 160–162, 161f
forms, 151–156
lists, 156–159
toolbars, 159–160
video, 162
sencha-touch.js document, 147
settings, Sencha Touch, 149
shadow-color definition, 23
shadow effects (text), 22–23
sidebar tags. See ASIDE element
sidebars, tablet, 213
$ sign (jQuery), 74
sites, converting to apps, 105–106, 118–134
with PhoneGap. See PhoneGap templates
size
fonts, 20–21
screen. See screen sizes and resolutions
startup screen, 136
slider inputs, 64
Small (font size), 20
smart phones, 3
SOURCE element, with VIDEO, 40
SPAN element, 113
speech (media type), 33
spinning drum for lists, 128, 154f
start page, changing default, 123, 123f
startup screen size, 136
streaming video playback, 41–42
STYLE attribute (ARTICLE), 58
STYLE attribute (ASIDE), 61
style sheets. See CSS3
submitting apps to app stores, 192–194, 206
swatches, jQuery Mobile, 225–226
swipe events, 95
T
tab navigation (Sencha Touch), 160–162, 162f
TABLE element, 111
tablet development, 52–53, 211–219
jQuery Mobile for, 216
swatches, 225–226
themes, 224–225
Sencha Touch for, 213–215
sidebars, pop-overs, and touch, 213
TabPanel (Sencha Touch), 150
Tabs control (Sencha Touch), 160–162, 162f
tap events, 95
Templates plug-in (jQuery Mobile), 100
text
adding to list items, 92
columns, designing, 23–25
shadow text effects, 22–23
web-safe fonts, 18
Text field (Sencha Touch forms), 152
Text Area field (Sencha Touch forms), 152–153
ThemeRoller plug-in (jQuery), 104
ThemeRoller plug-in (jQuery Mobile), 228
themes, extending jQuery Mobile with, 71–74, 224–225
3G data speed, 41
TIME element, 61
timing-function definition, 29
“toolbar” class (jQTouch example), 121
toolbars
floating, with jQTouch, 129
with Sencha Touch, 159–160
touch interface (tablets), 213
transitions
pages (jQuery Mobile), 85–86
TTY (media type), 33
TV (media type), 33
TYPE attribute (INPUT), 63, 64
U
UL element, 91, 113. See also lists on websites
units for font size, 20–21
URL field (Sencha Touch forms), 152–153, 154f
V
Validate plug-in (jQuery Mobile), 95–100
custom error messages, 97–100
vector graphics. See SVG images vertical-offset definition, 23
vertical separator. See HR element
video, 35–42
encoding for web delivery, 39–40
with Sencha Touch, 162
streaming playback, 41–42
VIDEO element, 36–37
controlling with JavaScript, 37–39
SOURCE elements with, 40
visited pseudo class, 32
W
web browsers, 10–11, 12. See also specific web browser
designing for specific, 48–51
web-safe fonts, 18
-webkit-border-radius definition, 28
WebKit platform, 4
designing for, 51
website home page, creating, 59–60
websites, converting to apps, 105–106, 118–134
with PhoneGap. See PhoneGap templates
width attribute (VIDEO), 36
WiFi data speed, 41
Windows Phone 6.5 and earlier, 52
PhoneGap projects for, 196–197
X
X-large (font size), 20
X-small (font size), 20
Xcode
packaging apps for App Store, 192–194, 206
Xcode environment, 177, 182–185
Xoom tablet. See tablet development
xtype attribute, 152
Xx-large (font size), 20
Xx-small (font size), 20