Is HTML5 Ready for Mobile Cross-Platform App Development?
Upcoming SlideShare
Loading in...5
×
 

Is HTML5 Ready for Mobile Cross-Platform App Development?

on

  • 6,374 views

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 ...

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

Statistics

Views

Total Views
6,374
Views on SlideShare
6,363
Embed Views
11

Actions

Likes
0
Downloads
179
Comments
0

3 Embeds 11

http://www.linkedin.com 9
http://www.slashdocs.com 1
https://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Is HTML5 Ready for Mobile Cross-Platform App Development? Is HTML5 Ready for Mobile Cross-Platform App Development? Presentation Transcript

    • Is HTML5 Ready for Mobile Cross- Platform App Development? WorkLight Webinar Series© 2011 Worklight, Inc. All rights reserved. The information contained herein is the proprietary and confidential information of Worklight.
    • Worklight Introduction Worklight mobile app platform and tools enable the development, integration and management of HTML5, hybrid and native applications for smartphones and tablets.2
    • 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 Mobile3
    • Strategy: Mobile Vendors Committed to HTML5 “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 "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 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 “Our whole belief is that the entire experience is going to go to HTML5." Phil McKinney, CTO for personal systems group at HP, Jun 20114
    • Working Draft Candidate Strategy: Active HTML5 Standardization Efforts Recommendation Presentation 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 Data Cross-document messaging, dataset & data-* attributes, getElementsByClassName, New semantic elements, Semantics classList (DOMTokenList), Form validation, JSON Parsing, Data URLs querySelector/querySelectorAll MathML Storage Web Storage - name/value pairs, Offline web applications, File API, IndexedDB Comms Hashchange event, Cross-Origin Resource Sharing, XMLHttpRequest 2, Web Sockets, Web Notifications UI WAI-ARIA Accessibility features, Geolocation, Drag and Drop, Progress & Meter, Datalist element, Touch events, Details & Summary elements, HTML5 form features, Toolbar/context menu Media Video element, Audio element, Ogg/Theora video format, WebM/VP8 video format, MPEG-4/H.264 video format Development web workers, Session history management, Server-sent DOM events5
    • Not implemented Strategy: Active HTML5 Standardization Efforts Implemented Presentation 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 Data Cross-document messaging, dataset & data-* attributes, getElementsByClassName, New semantic elements, Semantics classList (DOMTokenList), Form validation, JSON Parsing, Data URLs querySelector/querySelectorAll MathML Storage Web Storage - name/value pairs, Offline web applications, File API, IndexedDB Comms Hashchange event, Cross-Origin Resource Sharing, XMLHttpRequest 2, Web Sockets, Web Notifications UI WAI-ARIA Accessibility features, Geolocation, Drag and Drop, Progress & Meter, Datalist element, Touch events, Details & Summary elements, HTML5 form features, Toolbar/context menu Media Video element, Audio element, Ogg/Theora video format, WebM/VP8 video format, MPEG-4/H.264 video format Development web workers, Session history management, Server-sent DOM events6
    • Strategy: Growing Mobile HTML5 Ecosystem Libraries Frameworks Tools Knowledge Bases7
    • Strategy: Distribution Options HTML HTML Codebase Codebase Native Wrapper Web Server Uploaded to App Store Downloaded to Device App Store Downloaded to Device Mobile Mobile Device Browser8
    • Benefits: Cross-platform Compatibility iOS Android BlackBerry HTML5 Windows Phone WebOS9
    • Benefits: Form Factor Adjustment10
    • Benefits: Cross-device Compatibility The HTC Sense (and The Samsung The Sony Ericsson standard Android) tab bar Touchwiz tab bar Timescape tab bar11
    • 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> 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 }] });12
    • Benefits: Graphics Toolkits13
    • Benefits: Rapid Application Development Tools14
    • Benefits: Debuggers and Emulators15
    • Benefits: Delivering HTML5 Apps as Mobile Web Apps Mobile Web App 1 App store presence Only in web app stores App store approval None Upgrade flexibility High 2 Installation user Via mobile browser, experience QR code Branded on-device Yes presence Offline availability Yes Monetization No app store fees 3 Crawl-ability Possible16
    • 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 Direct update requires Upgrade flexibility High proprietary mechanism Installation user Via mobile browser, Downloaded from app experience QR code store Branded on-device Yes Yes presence Offline availability Yes Yes Monetization No app store fees App store fees apply Crawl-ability Possible Not possible17
    • Core HTML5 Features: UI Elements18
    • Core HTML5 Features: CSS319
    • Core HTML5 Features: Non-UI Features Geo-location Web Storage Web Sockets20
    • Challenges: Device-specific HTML5 Implementations Browser-specific CSS prefix Web Sockets Video formats Positioned:fixed Cache size .border9 { border-radius: 9px; -webkit-border-radius: 9px; -moz-border-radius: 9px; -khtml-border-radius: 9px; }21
    • Challenges: Proprietary Android UI Layers Correct edit box styling Edit box style reset by HTC Sense22
    • Challenges: Browser Memory Management Heavy and repeated jQuery animation Frequent loading and releasing DOM fragments Frequent handling complex Ajax responses23
    • Future Directions of HTML5 in Mobile WebGL IndexedDB Web Workers Push Notifications Camera and Device Access24
    • Is HTML5 Ready for Mobile Cross-platform?25
    • For More Information 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 info@worklight.com26