2. Who Am I?
Perlin - Hyper/Word Services.
– Internationally recognized content creation and
– Help clients create effective, efficient, flexible
content in anything from print to mobile.
– Working with mobile since Windows CE and
WML/WAP c. 1998
– Certified – Viziapps, Flare, Mimic, RoboHelp.
2 – Pages and Page Elements
3 – Creating the Database
4 – Connecting App to Database
6. Market – Why Mobile?
information when users want it.
they want it.
– Where they are now.
they expect it.
– Mobile devices to take top spot from PCs.
– With much caution, see …Mobile Web Will
Rule by 2015
7. Why Mobile?
online doc or help
for use in the field.
– Create using tech comm tools like
Flare and RoboHelp.
or eliminate paper.
– Airline boarding passes.
– “They’re not mobile, we are” – i.e. “we’re cool,
8. Why Mobile?
“mobilized” desktop apps:
– Weather (Weather Pro)
– Astronomy (Firedale’s Messier Objects)
– Surveys (Surveyor)
9. Why Mobile?
novel new apps:
Sports bar (“footie bar”) locators
Card-swipe, NFC-based payment
Inventory data entry in the field
Contact lead tracking at trade shows
Concrete calculator with contractor referral
For tech comm, perhaps – SnapGuide, iFixit
Apps aren’t the entirety of “mobile” but they’re
the focus of this workshop.
10. Why ViziApps
mobile apps cost between $5,000
Average time to market is 12 weeks.
Modifying mobile apps costs $2,500 to
– From Viziapps.
11. Viziapps’ Approach
traditional dev with a GUI model.
– No coding.
– Uses familiar concepts, Google Docs spreadsheets as a database for “simple” apps.
» SQL and web services
for heavy duty work.
– This app, with the
page and database,
took me 4 hours.
12. Business App Use Cases
Example App: Real Estate Capture and Listing
ViziApps Inc., 2011
13. Business App Use Cases
14. The ViziApps Workflow
15. The ViziApps Workflow
visually – no coding.
Preview live, as well as in an emulator, by
using a preview app from ViziApps.
– Without the delay and uncertainty of getting it
into a store.
– A more realistic test involving real processor
power, live data, and network latency.
Publish, subject to vendor judgment.
16. Why ViziApps Specifically?
of a larger class of GUI app dev tools.
– Includes AppInventor, appmakr, IBuildApps,
ViziApps is the least template-bound
and most visually flexible for design and
offers the most options for data handling.
– Which is why I’m also certified in it.
18. Why Terminology Matters
choice of authoring tools, hardware
and software delivery “mechanisms”.
Terminology problems can = disaster.
– Just saying “mobile” is an invitation to buy the
wrong tools or hire the wrong developer.
– Like being unclear re Web Help vs. WebHelp.
19. Basic Terms
– Short for application, typically used
re mobile devices – “iPhone app”.
– Typically highly focused on one task (“microtasking”) vs. PC-style applications.
– Three categories:
» Native – Follow a platform standard – e.g. “iPhone
app” or “Android app”, access device resources
» Web (“mobile web”) – Run via a browser on any
device – the browser is the app – but can’t access
device resources directly.
20. Basic Terms
– Hybrid apps:
» Can appear in an app store and can access device
resources, like a native app.
» Can run in a browser, like a web app.
» Can operate cross-platform.
» Make heavy use of HTML5 and CSS3.
21. App Design
simplifies app dev mechanics and
makes it tempting to just dive in.
Before you do, however, consider:
and limit the app’s goals.
– Too many goals can make the app “fuzzy”.
– Can’t fit too many options on tiny screens.
the app type, whether users understand the concept and task flow.
– Mobilized desktop app, like weather – yes.
– True mobile app, like sports bar finder – no.
the app’s context, and test.
24. Functional Design
what platform features you need.
– On-device only?
– Data input, retrieval, and processing locally or
in the cloud – e.g. need internet access.
– GPS, camera, orientation, etc.
25. Aesthetic Design
for the small screen.
– Keep it simple and ruthlessly minimize:
» Internet access that can eat up battery.
– Remember what your competition is and what
users will compare you to.
26. Design for a Small Screen
27. Aesthetic Design
on one screen, within
screen size limits.
Provide clear transitions
– Number of hands available.
– Range of motion of hands – effect
on button and field position.
– Ambient light.
– Size of fingertips vs. mouse pointer.
– Need for internet access.
» From iPhoneGuide.com
feedback for user actions.
Consider adding “help” for complex apps.
– Usually assumed that apps are simple enough to
not need help, but...
» May need “assistance” or domain knowledge.
» Multi-key or multi-touch controls may also need
– Can connect web app to native app to use the
former as context-sensitive help for the latter.
30. “Programmatic” Design
size, color, button color, background
Define conventions based on O/S limits…
– For example, can’t resize picker
31. “Programmatic” Design
– Such as picker in iOS
vs. Android equivalent,
32. “Programmatic” Design
terminology conventions before
starting app dev, such as…
– Consistent element names – e.g. object_label
for field labels vs. object_field for entry fields.
– Consistent name prefixes, like btn for buttons.
– Element names in lower case, no spaces in
multi-word element names.
» Use consistent app and database element names to
avoid confusion or ambiguity in data management
phase of app dev.
33. Viziapps Dev Process
– Design the app using paper or a wireframe tool.
– Start a new app or select an existing app to edit,
then create the app interface and flow – Design
– Define data handling – Manage Data pane.
– Publish – Publish pane.
34. 2 – Page and Page Elements
35. Design Screen – Overall
36. Design Screen
open your last app or create a new one
(from a template or from scratch).
– Most of these options are missing if this is your
37. From a Template…
you start a new app using a Viziappssupplied template, vs. from scratch.
38. New App Dialog Box
39. Design Screen – Existing Project
40. Design Screen Options
options – List of
all field options and
41. Design Screen Options
Current App –
The app being
worked on and
– Also to rename, duplicate, convert the app type,
or delete the app.
42. Design Screen Options
for test… – To run this app thru
ViziApps’ previewer app.
Validate… – Check for dupe field names.
App page options:
The page to display on the canvas.
Add, duplicate, rename, resequence, etc., pages.
Save and Undo – Self-explanatory.
Manage Page Data – Opens the data management window.
43. App Background Screen
set the app background.
mockup of pages, elements and their
code names, and links between pages.
– Hover over an element code name to highlight it
in red on the screen mockup.
– Hover over an element code name that links two
pages, like a button, to highlight it in red and
draw a line to the target page.
– Click a page to open it on the canvas.
– To output the storyboard to
PDF for review or markup.
46. Design Screen
a button to open its properties screen.
47. Sample Properties Screen
example, for an image…
48. Element Notes
a unique “internal” name.
Has appearance controls.
May have action controls.
49. Element Notes
element that can invoke an action has
various action controls.
50. Ex. 1: Create the Pages
51. 3 – Create the Database
52. Data Handling Options
app data management options:
ODBC (Open DataBase Connectivity) –
compatible db like MySQL and SQL Server.
– Google Docs (GDocs) spreadsheets.
apply a different data source to each
page in your app.
53. Manage Data Options
focus on the GDocs spreadsheet for
– Concepts are familiar to anyone in business and
easiest option for non-techie developers.
– Ties into the de facto standard spreadsheet –
54. Overview of
GDocs and the
55. Overview of GDocs
web-based suite with spreadsheet,
word-processing, presentation, drawing,
forms, and data storage modules.
– Now redirecting to Google Drive – similar idea.
– Lets users work online and collaborate in realtime with other users.
– Runs under any modern commercial browser.
sub-text is to undercut MS Office.
56. GDocs (Redirected to Drive) –
57. Overview of GDocs
the two controls on the main page.
They let you create a new
spreadsheet or upload an
Now a closer look at the
58. Sample GDocs Spreadsheet
59. Spreadsheet Details
spreadsheet can have 1+ worksheets.
Each worksheet’s name appears and is
managed on a tab at
the lower left.
– Give worksheets real
names, not “sheet1”.
60. Spreadsheet Details
– A column in a spreadsheet is a field.
– Field names are in the first row of each column.
» Must be lower case, no spaces in multi-word labels.
– Field values are in rows 2 and down.
61. Access Control
GDocs spreadsheet is initially restricted
To use it with Viziapps, you must make it
publicly viewable and writeable.
– Click the Share button on the
62. Access Control
63. Setting Access for ViziApps
Change the Private option to Public on the
Select the Allow Anyone to Edit option
under Edit Access.
64. Ex. 2: Create the Database
65. 4 – Connecting the App to GDocs
can pass data between an app and
a spreadsheet using four operations:
– Select from – Insert field values from a spreadsheet into app fields.
– Insert into – Insert app field values into 1+ rows
in the spreadsheet.
– Update – Change 1+ rows of values in the
spreadsheet based on some condition.
– Delete From – Delete 1+ rows of values in the
spreadsheet based on some condition.
67. A Five-Step Process…
Open the Manage Data page and register
the data source API for a new project.
Connect your app to the spreadsheet.
Select the app operation to define.
Specify the command(s) to apply to the
Specify any conditions for the command.
Repeat 3-5 for the next operation or page.
68. 1 – Register the Data Source API
69. 1 – Register the Data Source API
is a scary but straightforward process
that uses Google Docs/Drive for security.
Need to fill in the Data Source ID, Client
ID, and Client Secret fields.
Only need to do this once.
Can re-use the values later if necessary.
Process documented in Exercise 4.
Note – May change due to Google changes.
70. 2 – Connect App To Spreadsheet
registering the data source API, select the
click Save, wait for the “Your database
info has been saved” message, and click Close.
71. 3 – Select the Operation to Define
the data source and the operation to
define on the selected page.
working area displays, shown next.
72. 3 – …Working Area Displays
73. 4 – Specify the Commands
the Add Command button.
command line displays.
74. 4 – Specify the Commands
the specific data command.
75. 4 – Specify the Field Mapping
the Add a Field icon to start the first
first mapping line displays.
76. 4 – Specify the Field Mapping
the desired field from the storyboard
to the command line field.
77. 4 – Specify the Field Mapping
select the corresponding worksheet
78. 5 – Specify Any Conditions
any conditions to apply to the
repeat as needed…
79. Manage Data Page of Exercise
80. Ex. 3: Connect App To the Data
81. Preview and
82. Overview of Preview
the app on your phone often during dev
to be sure it looks and works as you want.
– You’re previewing live on the phone, not in an
– This is more realistic since the app is running
live on the phone.
you finish, you’ll have to get it to the
on the vendor, the client, and the
app, but, in general:
– Get a ViziApps account.
– Get the vendor’s developer license.
» Get the “organization” license for Apple.
– Select the data handling method.
84. Ex. 4: Preview
85. A Few Sources of Information
Human Interface Guidelines –
LinkedIn Mobile Groups – Too many to
list; search for “mobile” groups and skim.
86. A Few More…
Design and Development, Fling,
Beginning Smartphone Web Development,
Frederick and Lal, Apress, 2009
iPhone Application Development for
Dummies, Goldstein, Wiley, 2010
Tapworthy, Clark, O’Reilly, 2010
87. Hyper/Word Services Offers…
Training • Consulting • Development
Mobile Flare • Mobile RoboHelp
Flare • RoboHelp
Single sourcing • Structured authoring