Upload
worklight
View
199
Download
1
Embed Size (px)
DESCRIPTION
Technology overview of the capabilities, benefits and challenges of HTML5 in mobile. Learn about using HTML5 in cross-platform application development, from key strategic considerations to detailed technical analysis. Watch the full webinar at http://www.worklight.com/resources/webinars-and-tools.
Citation preview
© 2011 Worklight, Inc. All rights reserved. The information contained herein is the proprietary and confidential information of Worklight.
Is HTML5 Ready for Mobile Cross-Platform App Development?
WorkLight Webinar Series
Worklight Introduction
2
Worklight mobile app platform and tools enable the development, integration and management of HTML5, hybrid and native applications for smartphones and tablets.
Agenda
Strategic Considerations HTML5 in the Enterprise
Key Benefits for Mobile App Initiatives
Useful HTML5 Mobile Features
Challenges in Cross-platform App Development
Future Directions for HTML5 in Mobile
3
Strategy: Mobile Vendors Committed to HTML5
4
"Our commitment to supporting HTML5 and Adobe AIR development has resonated and spurred developers to create fun and innovative applications for BlackBerry PlayBook users"
David Yach, CTO for software at RIM, Apr 2010
"IE9 is a great example of bringing assets together from across Microsoft to improve the
Windows Phone experience. We need to give people the full web, the full internet… like they expect with the PC."
Steve Ballmer, Microsoft, Feb 2011
"It looks to me like HTML5 will eventually become a way almost all applications are built, including those on new phones.
Eric Schmidt, Google Chairman, Feb 2011
“Our whole belief is that the entire experience is going to go to HTML5."Phil McKinney, CTO for personal systems group at HP, Jun 2011
“Apple … created WebKit, a complete open-source HTML5 rendering engine that is the heart
of the Safari web browser used in all our products… New open standards created in the mobile era, such as HTML5, will win on mobile devices”
Steve Jobs, Apple CEO, Apr 2010
Strategy: Active HTML5 Standardization Efforts
5
CSS3 Word-wrap, contenteditable attribute (basic support), @font-face Web fonts, Canvas (basic support), CSS3 Transforms, Text API for Canvas, rem (root em) units, CSS3 Text-shadow, Flexible Box Layout Module, SVG effects for HTML, CSS Gradients, WOFF - Web Open Font Format, Ruby annotation, SVG in HTML img element, CSS3 Transitions, Inline SVG in HTML5, CSS3 Animation, calc() as CSS unit value, CSS3 3D Transforms, CSS3 object-fit/object-position, CSS Grid Layout, TTF/OTF - TrueType and OpenType font support, WebGL - 3D Canvas graphics
CSS3 Box-sizing, CSS3 Media Queries, CSS3 selectors, CSS3 Border-radius (rounded corners), CSS3 Box-shadow, CSS3 Multiple backgrounds, CSS3 Background-image options, CSS3 Multiple column layout, SVG in CSS backgrounds, CSS3 Border images
CSS position:fixed, CSS3 opacity, CSS3 Colors, SVG (basic support), SVG filters, SVG SMIL animation, SVG fonts
Cross-document messaging, dataset & data-* attributes, getElementsByClassName, New semantic elements, classList (DOMTokenList), Form validation, JSON Parsing, Data URLs
querySelector/querySelectorAll MathML
Web Storage - name/value pairs, Offline web applications, File API, IndexedDB
Hashchange event, Cross-Origin Resource Sharing, XMLHttpRequest 2, Web Sockets, Web Notifications
WAI-ARIA Accessibility features, Geolocation, Drag and Drop, Progress & Meter, Datalist element, Touch events, Details & Summary elements, HTML5 form features, Toolbar/context menu
Video element, Audio element, Ogg/Theora video format, WebM/VP8 video format, MPEG-4/H.264 video format
web workers, Session history management, Server-sent DOM events
Presentation
Data Semantics
Storage
Comms
UI
Media
Development
Working DraftCandidate
Recommendation
Strategy: Active HTML5 Standardization Efforts
6
CSS3 Word-wrap, contenteditable attribute (basic support), @font-face Web fonts, Canvas (basic support), CSS3 Transforms, Text API for Canvas, rem (root em) units, CSS3 Text-shadow, Flexible Box Layout Module, SVG effects for HTML, CSS Gradients, WOFF - Web Open Font Format, Ruby annotation, SVG in HTML img element, CSS3 Transitions, Inline SVG in HTML5, CSS3 Animation, calc() as CSS unit value, CSS3 3D Transforms, CSS3 object-fit/object-position, CSS Grid Layout, TTF/OTF - TrueType and OpenType font support, WebGL - 3D Canvas graphics
CSS3 Box-sizing, CSS3 Media Queries, CSS3 selectors, CSS3 Border-radius (rounded corners), CSS3 Box-shadow, CSS3 Multiple backgrounds, CSS3 Background-image options, CSS3 Multiple column layout, SVG in CSS backgrounds, CSS3 Border images
CSS position:fixed, CSS3 opacity, CSS3 Colors, SVG (basic support), SVG filters, SVG SMIL animation, SVG fonts
Cross-document messaging, dataset & data-* attributes, getElementsByClassName, New semantic elements, classList (DOMTokenList), Form validation, JSON Parsing, Data URLs
querySelector/querySelectorAll MathML
Web Storage - name/value pairs, Offline web applications, File API, IndexedDB
Hashchange event, Cross-Origin Resource Sharing, XMLHttpRequest 2, Web Sockets, Web Notifications
WAI-ARIA Accessibility features, Geolocation, Drag and Drop, Progress & Meter, Datalist element, Touch events, Details & Summary elements, HTML5 form features, Toolbar/context menu
Video element, Audio element, Ogg/Theora video format, WebM/VP8 video format, MPEG-4/H.264 video format
web workers, Session history management, Server-sent DOM events
Presentation
Data Semantics
Storage
Comms
UI
Media
Development
Not implementedImplemented
Strategy: Growing Mobile HTML5 Ecosystem
7
Libraries
Frameworks
Tools
Knowledge Bases
Native Wrapper
Strategy: Distribution Options
8
HTML Codebase
Mobile Browser
Web Server
HTML Codebase
Mobile Device
App Store
Uploaded to App Store
Downloaded to Device
Downloaded to Device
Benefits: Cross-platform Compatibility
9
iOS
BlackBerry
WebOSWindows
Phone
Android
HTML5
Benefits: Form Factor Adjustment
10
Benefits: Cross-device Compatibility
11
The HTC Sense (and standard Android) tab bar
The Samsung Touchwiz tab bar
The Sony Ericsson Timescape tab bar
Benefits: Development Tools
<ul data-role="listview">
<li><img src="images/gf.png" alt="France" class="ui-li-icon"><a href="index.html">France</a> <span class="ui-li-count">4</span></li>
<li><img src="images/de.png" alt="Germany" class="ui-li-icon"><a href="index.html">Germany</a> <span class="ui-li-count">4</span></li>
…
</ul>
12
var listStore = {
data: [ {firstName: 'Alana', lastName: 'Wiersma'}, … ]}
var myList = new Ext.Container({
items: [{
height: 500,
xtype: 'list',
store: listStore,
itemTpl: '<div class="contact"> {firstName} {lastName} </div>',
grouped: true,
indexBar: true
}]
});
Benefits: Graphics Toolkits
13
Benefits: Rapid Application Development Tools
14
Benefits: Debuggers and Emulators
15
Benefits: Delivering HTML5 Apps as Mobile Web Apps
16
Mobile Web App
App store presence Only in web app stores
App store approval None
Upgrade flexibility High
Installation user experience
Via mobile browser, QR code
Branded on-device presence
Yes
Offline availability Yes
Monetization No app store fees
Crawl-ability Possible
1
2
3
Benefits: Delivering HTML5 Apps as Hybrid Apps
Mobile Web App Hybrid App
App store presence Only in web app stores In leading app stores
App store approval None Required
Upgrade flexibility HighDirect update requires proprietary mechanism
Installation user experience
Via mobile browser, QR code
Downloaded from app store
Branded on-device presence
Yes Yes
Offline availability Yes Yes
Monetization No app store fees App store fees apply
Crawl-ability Possible Not possible
17
Core HTML5 Features: UI Elements
18
Core HTML5 Features: CSS3
19
Core HTML5 Features: Non-UI Features
2
0
Geo-location Web SocketsWeb Storage
Challenges: Device-specific HTML5 Implementations
Browser-specific CSS prefix
Web Sockets
Video formats
Positioned:fixed
Cache size
21
.border9 {border-radius: 9px;-webkit-border-radius: 9px;-moz-border-radius: 9px;-khtml-border-radius: 9px;}
Challenges: Proprietary Android UI Layers
22
Correct edit box styling
Edit box style reset by HTC Sense
Challenges: Browser Memory Management
23
Heavy and repeated jQuery animation
Frequent loading and releasing DOM fragments
Frequent handling complex Ajax responses
Future Directions of HTML5 in Mobile
WebGL
IndexedDB
Web Workers
Push Notifications
Camera and Device Access
24
Is HTML5 Ready for Mobile Cross-platform?
25
For More Information
26
Resource Location
30-day Software Trial www.worklight.com/download
Online Training www.worklight.com/resources/training-modules
Documentation www.worklight.com/resources/product-documentation
Whitepapers www.worklight.com/resources/datasheets-and-whitepapers
Webinars www.worklight.com/resources/webinars-and-tools
Additional Info [email protected]