This document discusses Lotus software on mobile devices and developing for mobile. It covers the history of Lotus mobile clients, including Lotus Traveler, Sametime and Connections. It also discusses using geolocation, forms and working offline in mobile development. Resources listed include the WURFL database for device detection, CSS media queries, and HTML5 features like geolocation, forms attributes and the cache manifest for offline work.

1. mobile
Giusepe Grasso
Notes Developer

3. Agenda
• Part A - Lotus on mobile
• Part B - Cool things you can do on mobile
devices
– Geolocation
– Working Offline
– Forms

4. Lotus on mobile

5. A long experience on “pervasive devices”
That’s way we have this flag
on design elements
2008
around
2001
1997

6. Lotus Traveler
• Bring push email on any major device:
Nokia Symbian, Windows Mobile,
Apple iPhone, iPod & iPad
Android is coming… (q4 2010)
get into the beta

7. Lotus Sametime
Native clients for Browser based client for
• Blackberry • Apple iPhone, iPod
• Nokia E series
• windows mobile
• Sony Ericsson – M600,
P990i, P1i

8. Lotus Quickr
• SnappFiles for iPhone, iPod Touch (and soon,
iPad)
• BlackBerry Client for IBM Lotus Quickr
• Accessing Lotus Quickr From Google Android
(lotus quickr wiki article with app source)

9. Lotus Connections
• BlackBerry Client for IBM Lotus Connections
• Web client for iPhone, iPhone 3G(S), iPod
Touch, and Nokia S60 3rd & 5th edition
devices
• https://greenhouse.lotus.com/mobile/

10. Lotus Mobile Wiki
• Avaliable now

11. Mobile Portal Accelerator
• http://lotus2010.com

12. Lotus on mobile:
other third parties

13. Other third party tools: MartinScott
WirelessMail: pure domino mail push solution for
blackberry, iphone, windows mobile, palm treo:
no BES, no Traveler, only your domino server
Just go and ask
Jamie Mcgee!!

14. Other third party tools: commontime
mNotes, mForms, mSuite,
mDesign Studio…
Mail Applications &
device managment

15. Other third party tools: Teamstudio
Teamstudio Unplugged:
an eclipse designer plugin
that enable you to
translates Notes
applications into native
blackberry apps with
offline support

16. Now for the developers part

17. But first…
Some basics to keep in mind:
• Mobile users can be with limited or no data
connectivity (no plan, roaming, no
coverage) and little bandwidth
• Do not overload the cpu, a charged battery
makes an happy user!
• Ergonomics and usage patterns are way
different from desktop

18. Basic markup you need to know
• Tell the device you’re a friend:
<meta name="HandheldFriendly" content="True" />
• Avoid viewport zoom
<meta name="viewport" content="width=device-
width,minimum-scale=1.0,maximum-scale=1.0"/>
or
<meta name="viewport" content="width=device-width,initial-
scale=1.0,user-scalable=no"/>

19. Cool things you can do on mobile devices

20. Detect mobile devices
• No simple answer
• Using http headers
• Css media query

21. WURFL
Wireless Universal Resource File: An opensource
database/xml-file of mobile user-agent(s)
Helps you indentify mobile devices
And more important
Wurfl is made in Italy by
Mobile devices features and capabilities Passani
Luca
• Open source: http://wurfl.sourceforge.net/
• Lotus Notes version by Jason Hook
http://weblog.jasonhookonline.com/jho/blog.nsf/d
6plinks/JHOK-7MJCPB

22. WURFL
• Open source: http://wurfl.sourceforge.net/
• Lotus Notes version by Jason Hook
http://weblog.jasonhookonline.com/jho/blo
g.nsf/d6plinks/JHOK-7MJCPB
• I’ve made some updates to Jason database
and you’ll find my version on DDive DVD

23. WURFL structure

24. WURFL device info
You can try with your smartphone
right now:
http://bit.ly/DDiveDemoMDInfo

25. WURFL why bother?
If we know the device features, we can adapt
and send resouces or features of the right
size or kind to the right devices

26. Other http headers of interest
HTTP headers sent by mobile devices but not by
desktop browser:
• x-wap-profile: links to UAProfile (standard by
Open Mobile Alliance)
• X-OperaMini-Features: set by opera mini
browser, gives CSV of phone features
We can use this http headers to “guess” that a
device is mobile

27. User-agent x-wap-profile & x-operamini-features
Look for:
• Common mobile patterns in user-agent
• Data in x-wap-profile or x-operamini-features
You can try with your smartphone
right now:
http://bit.ly/DDiveDemoMID

28. CSS media queries
@media handheld { ... }
@media only screen and (max-device-width: 700px) { ... }
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) { ... }
• Brillant implementation at lessframework.com

29. CSS media queries
• Media queries poor's man implementation on
dominopoint.it:
• With a screen width of less then 700px, we show a
prominent link to the mobile version:
@media screen { .mobile { display:none; }}
@media handheld { .mobile { display:block; }}
@media (max-width:700px) { .mobile { display:block; } }

30. geolocation
Three way:
1. IP Based: I know where your gateway is (or
I can use a service like ipinfodb.com)
2. Based on Gps, wifi (kown position of nearby
access points) or cell tower (triangulation)
3. Ask the user

31. Geolocation: phone triangulation
Your phone is always connected with more
than one tower and talk with the network
about signal strenght (as in distance from the
towers)
if you're on the run from authorities
You Are here
is better to leave the mobile phone
at home

32. geolocation
As usual, different ways of doing this
• blackberry.location on FW >=4.1 <=5
• Google gears geolocation api (deprecated)
• New standard: W3C Geolocation API
There’s a nice open source geo location
framework for mobile that supports iPhone,
gears, old and new blackberries, nokia web
runtime etc.: geo-location-javascript

33. Geolocation sample: HTML Head content

34. Geolocation sample: JS Header

35. Geolocation sample: callbacks

36. Geolocation sample: onload

37. Geolocation
You can try with your smartphone
later when you’re outside and can
get a satellite fix:
http://bit.ly/DDiveDemoGeo

38. forms
Some new HTML5 attributes helps a lot at making
forms:
• more usable for the users
• faster and easier to develop
Mobile browser are ahead of desktop browser and
already implemented these attributes
Take a typical,
boring, form

39. Forms autofocus & placeholder
autofocus attribute will set the default focus on
the field element
placeholder will set a text that disappear as
soon as the field gets focus (just like the
search box in your browser)

40. Forms type=email
Type=“email” for input fields

41. Forms date & time
type="date" min="1900- type="time"
01-01" max="1999-12-
31“

42. Form numbers & range
• type="number" • type="range" min="1"
max="5" step="1"

43. Work offline
Set a manifest attribute in your html tag pointing to
the cache manifest file
<html manifest="manifest.mf">
All resouces (scripts, css, images, html files etc.) needs
to be into the manifest
Cache manifest allow your browser to know where
wich resouces will need to be in the “AppCache”
and be avalible in case of no connectivity
Your application can control the “AppCache” with the
window.applicationCache object

44. Work offline: manifest file
Content-type: text/cache-manifest
First line: CACHE MANIFEST
One resource per row, separated in sections:
In NETWORK: list resources that must not be cached
In CACHE: list resources that must be cached
In FALLBACK: section list on each row an url pattern and an url
to a resource that will be served if the matching pattern is
not available (“/” matches everything)

45. widgets
An application developed with web
technologies (html, css, javascript) that can
be installed as a native application on the
device and works online & offline.
Still an evolving area, with a W3C candidate
reccomandation
http://www.w3.org/TR/widgets/
It mostly involves an xml configuration file and
a package format (ie .zip) for the resources

46. widgets
Widgets also usually offer some kind of
persistent storage, like html5 storage or
google gears
Widgets can get access to system features not
available from web apps (exposed as
javascript objects) ie filesystem, battery,
signal, camera and native agenda, messaging
and calendar services

47. widgets
Anyway, there’s a lot of fragmentation and still
no adopted standard:
Nokia WRT, BlackBerry Widget SDK, Opera
Widget Manager, Vodafone & Verizion JIL
all are similar but all are different!

48. Questions?

49. Resources

50. As the mobile OS market fragments,
mobile browsers are consolidating
Modern Mobile Browsers
Engine HTML5
Mobile Safari Webkit Yes
Android Webkit Yes
Blackberry 6 Browser Webkit Yes
Symbian^3 Webkit Yes
MeeGo Webkit (Chromium) Yes
Internet Explorer Internet Explorer 7 No
WebOS Browser Webkit Yes
Bada OS Browser Webkit Yes?
Opera Mobile Opera Presto 2.2 Yes
Opera Mini Opera Presto 2.2 Yes
Fennec Firefox Yes
Myriad (former Openwave) Webkit No
BOLT browser Webkit ?
• http://radar.oreilly.com/2010/05/mobile-operating-systems-and-b.html

51. Mobile data traffic surpasses voice
• http://www.ericsson.com/th
ecompany/press/releases/20
10/03/1396928
• http://www.tgdaily.com/mo
bility-brief/49044-mobile-
data-surpasses-voice-traffic
• http://gigaom.com/2010/03
/24/mobile-milestone-data-
surpasses-voice-traffic/
• http://gigaom.com/2010/02
/09/cisco-the-
mobilpocalypse-is-coming/
• http://www.cisco.com/en/U
S/solutions/collateral/ns341
/ns525/ns537/ns705/ns827/
white_paper_c11-
520862.html

52. Mobile cache file sizes
• http://www.stevesouders.com/blog/2010/0
7/12/mobile-cache-file-sizes/