The Power of HTML5: 15 reasons your business should be using HTML5 for web and mobile

  • 1,177 views
Uploaded on

Slides from the webinar conducted on November 8, 2012. Presenter: Dave Porter

Slides from the webinar conducted on November 8, 2012. Presenter: Dave Porter

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,177
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
22
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • The Power of HTML5: 15 reasons your business should be using HTML5 for web & mobile.
  • HTML5: integrated audio, video, canvass (for drawing) & SVG (Scalable Vector Graphics).CSS3: Rounded corners, gradients, smooth scaling, skewing, animations, media queries.JS: Do more things, much faster.
  • This was always the great promise of the web. In 2012, we can finally deliver.
  • read.kobo.com
  • read.kobo.com
  • read.kobo.com
  • 1, 2 - Pew Research Center at http://pewinternet.org/Reports/2012/Smartphone-Update-2012/Findings.aspx3 - Flurry mobile analytics - http://blog.flurry.com/bid/88867/iOS-and-Android-Adoption-Explodes-Internationally4 – IDC via http://www.idc.com/getdoc.jsp?containerId=prUS23398412
  • IDC via http://www.idc.com/getdoc.jsp?containerId=prUS23398412
  • This is a limited use case but is a great, visceral example of how far the standards process has brought us.
  • Yelp is the most popular (and most straight-forward) example of browser geolocation put to good use.
  • Data storage & querying:LocalStorage, WebSQL, IndexedDB for performance and offline cachingFast, two-way communication: Web SocketsBig performance for big data: Web WorkersEasy CSS animations: CSS transitions & keyframe animationsFull 3D graphics: WebGL
  • 1990s: Browser wars2003: Apple releases WebKit2004: Firefox 1.0, funded largely by Google2008: Chrome; Google begins iterating and turns JavaScript into a world-class programming language2010 – 2011: IE9; Microsoft gets on board with standards2011 – 2012: Adobe begins contributing to CSS3These companies (market cap of $1.05T) are investing heavily to improve the platform, and you benefit for free
  • 1, 2 – caniuse.com3 – netmarketshare.com

Transcript

  • 1. CANADIAN HEADQUARTERS UNITED STATES OFFICE UNITED KINGDOM OFFICE www.appnovation.com 152 West Hastings Street 3414 Peachtree Road, #1600 3000 Hillswood Drive info@appnovation.com Vancouver BC, V6B 1G8 Atlanta Georgia, 30326-1164 Hillswood Business Park Chertsey KT16 0RS, UKTHE POWER OF HTML5 15 Reasons Your Business Should be Using HTML5 for Web & Mobile Dave Porter – SproutCore Developer & Core Team Member marketing@appnovation.comDave Porter V
  • 2. Appnovation is oneof the world’s TOPOPEN SOURCEDEVELOPMENTSHOPS.Dave Porter V
  • 3. LOCATIONSVANCOUVER OFFICE ATLANTA OFFICE LONDON OFFICE152 West Hastings Street 3414 Peachtree Road, #1600 3000 Hillswood DriveVancouver BC, V6B 1G8 Atlanta Georgia, 30326-1164 Hillswood Business Park Chertsey KT16 0RS, UK Dave Porter V
  • 4. Dave Porter V
  • 5. The Power Of HTML5Dave Porter V
  • 6. WHAT IS HTML5? HTML5 CSS3 Blazing-Fast JavaScript Powerful New JavaScript APIsDave Porter V
  • 7. WHAT IS HTML5? STANDARD BASED!Dave Porter V
  • 8. The Decline of FlashDave Porter V
  • 9. 1. THE DECLINE OF FLASH • Interactive, video, big-data websites in 2005: Flash / Flex • June 2007: iPhone ships without Flash, Adobe promises it “soon” • April 2010: Steve Jobs publishes “Thoughts on Flash” • August 2010: Adobe releases crippled, battery-draining Flash for Android • October 2011: Adobe begins contributing to CSS3 • June 2012: Adobe ceases development of Flash for mobile; removes it from Android store Dave Porter V
  • 10. 1. THE DECLINE OF FLASH If you want to be on the mobile web, you can’t be on Flash. Dave Porter V
  • 11. Write Once Run AnywhereDave Porter V
  • 12. 2. WRITE ONCE, RUN ANYWHERE • PC • Mac • Linux • iPhone • iPad • Android • Kindle Fire • Model S • “Smart” Refrigerators • Airplane seat-back screensDave Porter V
  • 13. Responsive DesignDave Porter V
  • 14. 3. RESPONSIVE DESIGNDave Porter V
  • 15. 3. RESPONSIVE DESIGNDave Porter V
  • 16. 3. RESPONSIVE DESIGNDave Porter V
  • 17. 3. RESPONSIVE DESIGNDave Porter V
  • 18. 3. RESPONSIVE DESIGNDave Porter V
  • 19. 3. RESPONSIVE DESIGNDave Porter V
  • 20. 3. RESPONSIVE DESIGN One Site, any Display On screen: NYDOT by AppnovationDave Porter V
  • 21. Mobile, Mobile, Mobile!Dave Porter V
  • 22. 4. MOBILE, MOBILE, MOBILE!• 46% of US adults carry smartphones• >100M US users in 2013• Worldwide: over 450M users TODAY• 1.6B by 2016 Dave Porter V
  • 23. 4. MOBILE, MOBILE, MOBILEDave Porter V
  • 24. 4. MOBILE, MOBILE, MOBILE • Is HTML5 ready to deliver sophisticated mobile applications? • Performance: Great on iPad • Performance: iPhone 5 is a turning pointDave Porter V
  • 25. Control Your Development CostsDave Porter V
  • 26. 5. CONTROL YOUR DEVELOPMENT COSTS• Cover more users with one product• Avoid rare, specialized skillsets• Zero-headache deploymentDave Porter V
  • 27. Control Your DestinyDave Porter V
  • 28. 6. CONTROL YOUR DESTINY Nobody owns the web No 30% app store fees No sales channel rules No long approval waitsDave Porter V
  • 29. Moving Forward with Backwards CompatibilityDave Porter V
  • 30. 7. MOVING FORWARD WITH BACKWARDSCOMPATIBILITY • No more broken websites • Standards promise to stay standards. • Additive evolution: new features too, not instead Dave Porter V
  • 31. AccessibilityDave Porter V
  • 32. 8. ACCESSIBILITY• Section 508, Federal Rehabilitation Act of 1973• Web browsers come accessibility-ready• WIA-ARIA: Accessible Rich Internet Application standards <img src=”info.png” aria-label=”Information”/> Dave Porter V
  • 33. Standard- Based VideoDave Porter V
  • 34. 9. STANDARD BASED VIDEODave Porter V
  • 35. 9. STANDARD BASED VIDEODave Porter V
  • 36. 9. STANDARD BASED VIDEO http://www.craftymind.com/ 2010/04/20/blowing-up- html5-video-and-mapping- it-into-3d-space/Dave Porter V
  • 37. Location AwarenessDave Porter V
  • 38. 10. LOCATION AWARENESS• Act mobile in mobile browsers• Provide better value in context• Location-based targeting & marketingDave Porter V
  • 39. 10. LOCATION AWARENESSnavigator.geolocation.getCurrentLocation(cal lback);Dave Porter V
  • 40. Enterprise- class FeaturesDave Porter V
  • 41. 11. ENTERPRISE-CLASS FEATURES• Data storage & querying• Fast, two-way communication• Big performance for big data• Visual flair: from easy CSS animation to full 3D graphics• Feature-parity with native solutions. Dave Porter V
  • 42. Open-Source Has Your BackDave Porter V
  • 43. 12. OPEN-SOURCE HAS YOUR BACKjQuery / Twitter embeds / ember.js / SproutCoreDave Porter V
  • 44. The Fastest- Moving Platform PeriodDave Porter V
  • 45. 13. THE FASTEST-MOVING PLATFORM PERIOD• Apple• Google• Microsoft• Adobe• You benefit for free. Dave Porter V
  • 46. WEB + APPDave Porter V
  • 47. 14. WEB + APP• The technology is speeding ahead• No more tradeoffs• Open, standardized web technologies are ready. Dave Porter V
  • 48. HTML5 Is The FutureDave Porter V
  • 49. 15. HTML5 IS THE FUTURE • Basic HTML5 – 77% compatibility • Advanced HTML5 – 60% compatibility • Mobile - 10% browser share • ...and rising rapidly Dave Porter V
  • 50. CANADIAN HEADQUARTERS UNITED STATES OFFICE UNITED KINGDOM OFFICE www.appnovation.com 152 West Hastings Street 3414 Peachtree Road, #1600 3000 Hillswood Drive info@appnovation.com Vancouver BC, V6B 1G8 Atlanta Georgia, 30326-1164 Hillswood Business Park Chertsey KT16 0RS, UK Thank You For Your Participation! QUESTIONS?Dave Porter – SproutCore Core Team Member marketing@appnovation.comDave Porter V