creating mobile applications using html5
TRANSCRIPT
![Page 1: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/1.jpg)
Creating Mobile Applications using HTML5Developers Track
David Orchard: salesforce.com
Paolo Bergamo: salesforce.com
![Page 2: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/2.jpg)
Safe HarborSafe harbor statement under the Private Securities Litigation Reform Act of 1995: This presentation may
contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties
materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ
materially from the results expressed or implied by the forward-looking statements we make. All statements
other than statements of historical fact could be deemed forward-looking, including any projections of
subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or
plans of management for future operations, statements of belief, any statements concerning new, planned, or
upgraded services or technology developments and customer contracts or use of our services.
The risks and uncertainties referred to above include – but are not limited to – risks associated with developing
and delivering new functionality for our service, our new business model, our past operating losses, possible
fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our
security measures, the outcome of intellectual property and other litigation, risks associated with possible
mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our
ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and
successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and
selling to larger enterprise customers. Further information on potential factors that could affect the financial
results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year
ended January 31, 2010. This documents and others are available on the SEC Filings section of the Investor
Information section of our Web site.
Any unreleased services or features referenced in this or other press releases or public statements are not
currently available and may not be delivered on time or at all. Customers who purchase our services should
make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes
no obligation and does not intend to update these forward-looking statements.
![Page 3: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/3.jpg)
Agenda
Where is mobile going
HTML5
Different approaches
Demos
![Page 4: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/4.jpg)
Where is mobile
going?
![Page 5: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/5.jpg)
Mobile Internet
Morgan Stanley “Internet Trends”, December 2009
![Page 6: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/6.jpg)
Explosive growth in the mobile web
Mobile sites are a viable option for apps
100% Year/Year growth in mobile
browser traffic
Capable browsers, compelling
experiences
Source: Quantcast, 2010
![Page 7: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/7.jpg)
Proliferation of mobile: two dimensions
![Page 8: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/8.jpg)
Mobile browsers are slowly converging
![Page 9: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/9.jpg)
HTML5
Truly crossplatform
Rich content: <video>, <audio>, <canvas>
Offline storage
Cache Manifest
Location
Websocket
![Page 10: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/10.jpg)
Friends of HTML5
JavaScript
CSS3
Device API Working Group
– Contacts, Calendar, Media Capture(API/HTML forms), …
Cross Origin Resource Sharing (CORS)
– JSONP replacement
![Page 11: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/11.jpg)
CSS
Wonderful for mobile
Animations
Borders, Shading, Gradients
Text styling
Example
– Text sizes, styles, etc. different across form factors
– Could calculate truncation on server, or native/javascript
– Use CSS for 1 style across all devices FTW!
![Page 12: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/12.jpg)
HTML5
![Page 13: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/13.jpg)
HTML 5 and Friends Reality in Mobile
Incomplete specifications and implementation
Security challenges
Authentication
Secure storage
UI performance – notably scrolling
Different webKit version per OS and platform
Hard to find features per build per OS
Ie, iOS webKit ! CSS 2.1 position:fixed
![Page 14: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/14.jpg)
Web vs Native
Feature Web Native
Install/Update Refresh Deploy/Download
Animation Slower to almost Native Fast
Dev environment Browser, Web tools OS specific
Dev languages HTML, CSS, Javascript Obj-C|Java|C#|…
Distribution Publish Approval by App store
Collect icons on device Yes Yes
Monetization Ads, Exchanges,
Payment providers
App stores + Web
Popularity Rankings Analytics,
Platforms (facebook)
App Store
![Page 15: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/15.jpg)
Hybrid applications
Native app from non-native language
PhoneGap
Rhomobile
Appcelerator Titanium
Lua
…
![Page 16: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/16.jpg)
PhoneGap
Open Source
Native app embedding webKit
HTML5, Javascript, CSS
Cross Platform
Installable Apps
Native code/functionality accessible from Javascript
![Page 17: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/17.jpg)
Core APIs
Contacts
Geo
Accelerometer
Device
File I/O
Network
Camera
Events
Notifications
![Page 18: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/18.jpg)
Mix and Match
By definition, PhoneGap is mixture
Also use native compents
Tab bar, ChildBrowser, TableView
Native apps often use embedded browser
– Chatter for iPhone: UIWebView for feedItems
– Salesforce.com iPhone/Blackberry app
• Dashboards, VisualForce pages
![Page 19: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/19.jpg)
Different architectures
![Page 20: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/20.jpg)
#1: Hosted Web + Salesforce.com proxy
Acme corporate
network
![Page 21: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/21.jpg)
#2: Hosted Web + API to Salesforce.com
Acme corporate
network
![Page 22: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/22.jpg)
Salesforce is mobile-ready
Mobile-ready login page
Oauth support
![Page 23: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/23.jpg)
Building a native container
Pure browser applications
cannot yet take advantage of
features available to mobile:
Picture upload
Security
Consider a Hybrid
![Page 24: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/24.jpg)
#3: Native+HTML5 to Salesforce or Host
Acme corporate
network
![Page 25: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/25.jpg)
#4: Salesforce Hosted
Salesforce Mobile and Visualforce Mobile
![Page 26: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/26.jpg)
Visualforce
<apex:page id="thePage”>
<script> function changeFont(input, textid) {
if(input.checked)
document.getElementById(textid).style.fontWeight = "bold"; else
document.getElementById(textid).style.fontWeight = "normal"; }
</script>
...
![Page 27: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/27.jpg)
Visualforce Mobile
Embedded browser (no need to authenticate)
Bridge between native client and browser
Enables GPS location, picture upload etc
![Page 28: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/28.jpg)
Summary
![Page 29: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/29.jpg)
Summary
Mobile growing rapidly in usage and capabilities
HTML5 and friends maturing quickly
4 Different architectures for mobile HTML5
Hybrid very interesting and potentially important
![Page 30: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/30.jpg)
Thank you!
![Page 31: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/31.jpg)
Creating Mobile Applications using
HTML5
![Page 32: Creating Mobile Applications using HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022050613/5a6d62bd7f8b9a16428b551b/html5/thumbnails/32.jpg)
How Could Dreamforce Be Better? Tell Us!
Log in to the Dreamforce app to submit
surveys for the sessions you attended
Use the
Dreamforce Mobile
app to submit
surveysEvery session survey you submit is
a chance to win an iPod nano!
OR