• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Using HTML5 to Build Mobile Apps
 

Using HTML5 to Build Mobile Apps

on

  • 26,872 views

Native apps are great, but if you want your app to reach as many people as possible, HTML5 is your ticket. In this session, we'll explore the different ways HTML5 can be used to build and deploy ...

Native apps are great, but if you want your app to reach as many people as possible, HTML5 is your ticket. In this session, we'll explore the different ways HTML5 can be used to build and deploy mobile apps, as well as the tools that can make the job easier.

Statistics

Views

Total Views
26,872
Views on SlideShare
26,849
Embed Views
23

Actions

Likes
11
Downloads
325
Comments
3

2 Embeds 23

http://lanyrd.com 22
http://localhost 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

13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • You won't need to choose whether your app should be native or HTML5 as there're lots of cloud-based services which allow making a single app that's distibuted to all major platforms such as iOS,Android and HTML5. I'm using Snappii service currently because they offer great features that can be implemented even without coding.
    Are you sure you want to
    Your message goes here
    Processing…
  • there is no tutorial...... the whole slideshow is covered with fucking tutorials...........
    Are you sure you want to
    Your message goes here
    Processing…
  • what the fuck .......
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Using HTML5 to Build Mobile AppsNative apps are great, but if you want your app to reach as many people as possible, HTML5 is your ticket. In this session, we'll explore the different ways HTML5 can be used to build and deploy mobile apps, as well as the tools that can make the job easier.Mobile and HTML5 expert Todd Anglin will show how Kendo UI Mobile helps developers build "native looking" apps that automatically adapt to iOS and Android. He'll demonstrate how tools like PhoneGap can be used to package a HTML5 app for an app store and will reveal tips for optimizing app development with HTML5.
  • Captain Obvious: Mobile Apps are important
  • Source: Really? Google it.
  • Source: http://mashable.com/2012/05/11/betting-everything-on-mobile/
  • Source: http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats#mobilebroadbandAccording to estimates by The ITU (2011), there are 1.2 billion active mobile-broadband subscriptions in the world. That is 17 percent of the global population.
  • Source: http://www.gartner.com/it/page.jsp?id=1980115 (April 2012)“Worldwide media tablet sales to end users are forecast to total 118.9 million units in 2012, a 98 percent increase from 2011 sales of 60 million units, according to Gartner, Inc.”
  • Source: Gartner(Appendix slide)
  • Source: http://www.kendoui.com/blogs/teamblog/posts/11-12-20/smartphone_shipments_outpaced_pcs_in_all_of_2011.aspxFirst beat PCs in Q4 2010. Subsequently beat PCs in every quarter of 2011.Importance:Mobile cannot be an afterthought – it’s next generation computingPlug-ins are a liability for reach (web)Could be more mobile devices than PCs in future software world
  • Source: http://www.comscore.com/Press_Events/Press_Releases/2012/5/Introducing_Mobile_Metrix_2_Insight_into_Mobile_BehaviorAnalysis of the share of time spent across apps and browsers revealed that even though these access methods had similar audience sizes, apps drove the lion’s share of engagement, representing 4 in every 5 mobile media minutes. Analysis of the top properties also revealed widely varying degrees of time spent between app and browser access methods. On Facebook, the top ranked mobile media property by engagement, 80 percent of time spent was represented by app usage compared to 20 percent via browser. Twitter saw an even higher percentage of time spent with apps at 96.5 percent of all minutes. In contrast, Microsoft Sites was among brands that saw browser access driving a majority of usage at 82.1 percent.
  • Captain Obvious: Mobile Apps are important
  • IntroductionsTodd Anglin, VP HTML5 Web & Mobile Tools, TelerikBurke Holland, Developer Evangelist for Kendo UI, Telerik
  • AGENDA
  • Choice for Building Mobile AppsNow that we’ve established mobile apps are important, how do you go about building them?
  • “Let’s build a native app…”Native app dev forces:Repetitive engineeringDevice specific developer skillsOn-going maintenance headachesComplicated dev environmentFrom major Android developer in HK:3 weeks to optimize with cross-compiled apps*Eclipse, but not exclusively (other options: Netbeans, IntelliJ, etc.)*Blackberry supports multiple app models – Native HTML5, Native Code (NDK), Blackberry Java SDK, Android Java SDK, Adobe AIRhttps://bdsc.webapps.blackberry.com/devzone/
  • There is no clear “winner” in mobile. This is a permanent multi-platform world.Graphic source: comScore, Mobile Future in Focus, Feb 2012 http://www.comscore.com/Press_Events/Presentations_Whitepapers/2012/2012_Mobile_Future_in_Focus (PDF Download)Digital Omnivores Report: http://www.comscore.com/Press_Events/Presentations_Whitepapers/2011/Digital_Omnivores (PDF download)
  • U.S. Smartphone Market Share by OS Expanded Trend Source: comScoreMobiLens, 3 mon. avg. ending Dec-2005 to Dec-2011, U.S.
  • Source: Gartner
  • Why HTML5? Why forgo native?[BkgndImg Source: http://lifeintheateam.blogspot.com/]
  • Build an app with HTML5Simplifies the funnel
  • You’re not lazy if you choose HTML5. It’s a smart choice.
  • Source: http://www.idc.com/getdoc.jsp?containerId=prUS23480612“By 2015, 80% of all mobile applications developed will be hybrid or mobile-Web-oriented.”http://www.gartner.com/technology/reprints.do?id=1-1AAJYX9&ct=120427&st=sb
  • Not alone. Examples of apps built with HTML5:http://html5.grooveshark.com/#/popular[Gmail]http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5http://www.cuttherope.ie/More: Netflix, Facebook,
  • Ship apps: http://www.useit.com/alertbox/mobile-sites-apps.html (Nielsen)As of this writing, there's no contest: ship mobile apps if you can afford it. Our usability studies with mobile devices clearly show that users perform better with apps than with mobile sites. (Mobile sites have higher measured usability than desktop/full sites when used on a phone, but mobile apps score even higher.)The empirical data is really all you need to know. It's a fact that apps beat mobile sites in testing. To plan a mobile strategy, you don't need to know why the winner is best, but I'll try to explain it anyway.
  • One Size DOESN’T Fit All
  • Just like clothes, one size, one style does not fit all.Tailored experiences produce the best results.
  • Keep this in mind when evaluating approaches to building mobile apps/UI
  • *Avoid CDNs if you plan to package the app for offline useStart-up image code: http://stackoverflow.com/a/10011893
  • What does it take to be “native”?
  • Discussion of things that force us to use PhoneGap with HTML5 today.Discussion of recent industry changes that HTMl5 devs must consider
  • Overcome the limits of HTML5Use proxy tools like Cordova (the open source variant of PhoneGap)Available APIs listed in Greenhttp://docs.phonegap.com/en/1.7.0/index.html
  • More explanation:http://phonegap.com/2012/05/02/phonegap-explained-visually/
  • HTML5 is not a sliver bullet. It’s not appropriate for every app.Use HTML5when it satisfies the requirements.
  • Beware the “Uncanny Valley” with HTML aps.Focus on building experiences that you can make look and feel right.Good discussion of avoiding Uncanny Valley: http://www.tricedesigns.com/2012/05/08/a-response-to-shell-apps-and-silver-bullets/Platform will evolve over time making it easier to do more without providing rough/bad experience. Takes some effort today.
  • Source: Forrester Researchhttp://www.forrester.com/Building+Mobile+Apps+Start+With+Web+Move+To+Hybrid/fulltext/-/E-RES61154?objectid=RES61154(Summary + original chart: http://www.readwriteweb.com/mobile/2012/01/hybrid-html5-apps-are-more-les.php)
  • From Gartner, April 2012

Using HTML5 to Build Mobile Apps Using HTML5 to Build Mobile Apps Presentation Transcript

  • Mobile appsare important.
  • FACT:Facebook paid $1,000,000,000 for a simple photo sharing iOS app
  • FACT:Mobile app revenues will double this year to $12 billion.
  • FACT: 17% of the world’s populationhas an active mobile broadband subscription.
  • FACT:Tablet sales will increase nearly 100% this year.
  • FACT:Lightweight OSs will surpass traditional OSs in 2014.
  • FACT: Smartphone shipments nowregularly exceed PC shipments
  • FACT:82% of time spent with mobile media happens via apps.
  • Mobile appsare important.
  • @toddanglin +@burkeholland
  • The case for HTML5The choices with HTML5 The tools for HTML5 The limits of HTML5
  • Native “Hybrid” Browser SDKHighly targeted Highly reusablePlatform skills Standards skills
  • ObjC Java Poly*UIKit XML Poly* Xcode Eclipse* Eclipse*
  • FACT:On average, CIOs report that they support 3.5 mobile platforms in 2012
  • JSHTML Any IDE
  • 80% 1bof all mobile apps HTML5 mobilewill use HTML5 by web browsers by 2015 2013
  • Native Apps HTML AppsMobile AppsMobile Sites Custom Sites Responsive Sites
  • Fundamental HTML App Challenge: Making things look “right”
  • One Size fits all vs. native• Fat guy, little jacket• Fine tailored suit• Wrong suit, wrong job
  • Do you want your app to be a snuggie or a suit?
  • Web DataViz Mobile
  • Mobile
  • DEMO: BUILD AN APP
  • 1. Media Queries for resolutions2. Favorite icons & Startup image3. Clipping Masks and Icons4. Add To Homescreen5. Avoid CDNs*
  • DEMO: TIPS IN ACTION
  • HTML5 “Native”Looks right. * Feels right. * Available offline. * Installable. * In App Store. X Runs everywhere.  XPremium APIs X 
  • AccelerometerCompassDevice InfoGeolocationStorageCameraNetworkEventsMediaCaptureContactsFileNotification
  • HTML/JS/CSS AppNative Shell + SDK Proxy Native App
  • DEMO: CORDOVA
  • No Silver Bullet• Not right for every app
  • Hybrid Experience CostNative Web Performance Agility Middleware [Forrester]
  • Mobile apps are important. HTML5 is a reach multiplier.Kendo UI is a productivity multiplier.
  • www.KendoUI.comThat’s it!anglin@telerik.comholland@telerik.com
  • KendoUI♥HTML5
  • Appendix Slides(Additional Research Data)