90 slides of HTML5 introduction for technical executives

1. HTML5 Technical Executive Overview
HTML 5
Gilad Khen
Overview
September 2012

2. About Me http://linkedin.com/in/giladkhen
 Gilad Khen
Profile:
 Web architect, experience:12 years
 Founder at
 SharpKit
- C# to JavaScript compiler http://sharpkit.net
 CloudRows- Cloud Analytics http://cloudrows.com
 Consultant for AT&T

3. What’s In This Lecture For You
Some questions to be answered:
 What is HTML5? Is it ready yet?
 What are the top features of HTML5?
 Which clients support HTML5?
 Can we use HTML5 in our company?
 How are other companies using HTML5?
 What tools and libraries work with HTML5?
 What R&D strategies to consider for HTML5?
* Special attention to video and mobile features

4. Background

5. HTML - Definition
That thing behind your browser “View Source” button
 HyperText Markup Language
 Describes Document Object
Model (DOM)
 Popular version – 4.01
(published - 1999)
 Open standard
(W3C / WHATWG)
 Various implementations
(browsers / platforms)

6. JavaScript - Definition
Browsers scripting language
 Interpreted, weakly typed
 Popular version – 1.5 / 1.6
(published - 2000)
 HTML = HTML + JS + CSS
 Language vs. API

7. CSS - Definition
Controls the look of HTML documents
 Cascading Style Sheets
 Popular version – 2.1
(published - 2004)
 HTML = HTML + JS + CSS

8. HTML Standard Release Cycle (W3C)
Working Draft
Version++ Last Call Working Draft
Recommendation (REC) Call for implementation
Call for Review

9. Cross-Platform R&D Challenge
 Designing for multiple platforms
 Implementing for multiple platforms
 Testing in multiple platforms

10. The Good News
HTML5 was designed
(among other things)
to solve the multiple-
platforms problem

11. The Bad News
It didn’t.

12. The Ugly News
It made it worse.

13. Don’t Panic (Unless it’s IE6)
 Same old story as 10 years ago (HTML4)
 New features available
 Not all browsers are equal
 X-browser Infrastructure available
 R&D overhead remains

14. HTML5 - Introduction

15. HTML5 - Definition
 A natural evolution of HTML4
 New DOM elements
 New JavaScript APIs
 New CSS tricks
 “HTML5 is a brand”
 Typicallyalso means “CSS3”
 Additional associated JS APIs
 Everything new cool thing on the web

16. HTML5 - Features Categories
More details later…

17. HTML5 - A Moving Target
 Specifications / support changes rapidly
 Browser / version / feature readiness – http://caniuse.com

18. Is HTML5 Ready Yet? (according to Google…)
http://ishtml5readyyet.com

19. HTML5 Readiness - 2008

20. HTML5 Readiness - 2009

21. HTML5 Readiness - 2010

22. HTML5 Readiness - 2011

23. HTML5 Readiness – Timeline

24. HTML5 Readiness – Mobile Browsers

25. HTML5 in Browser Wars

26. HTML5 in Browser Wars

27. Detecting HTML5 Support – Run Time
http://modernizr.com

28. Polyfills – DHTML Fallbacks for HTML5
Google: “html5 polyfills”

29. Detecting HTML5 Support – Run Time
http://modernizr.com

30. HTML5 Native Mobile Integration
http://phonegap.com acquired by Adobe

31. The Million $ Question
 “Can we write our app in HTML5 Today?”
 Yes
 No
 We already did (HTML4 ?)
 All of the above

32. So What Is HTML5 Good For?
 The short answer:
 Rich features where there’s no Flash (iPhone etc…)
 Building mobile apps outside App Stores
 Alternative to SOME native apps functionality
(desktop/mobile)
 Steer towards rich client architecture
 The long answer:
 Coming up…

33. Why are we here (now)?

34. HTML5 Hype – Search Trends
Google Search trends for “HTML5” iPad
2004- 2011 iPhone released,
Released, no Flash
HTML SDK
Only
Work on Native
HTML5 iPhone
Started SDK
Released

35. HTML5 Hype - Job Trends

36. What’s Next?

37. HTML5 Hype – Forecast

38. Features Overview

39. Graphics – Features
 PNG Alpha  SVG effects for HTML
Transparency elements
 Data URLs  SVG SMIL animation
 CSS3 Colors  SVG Fonts
 SVG (basic support)  SVG filters
 Canvas (basic support)  CSS3 Animation
 Video element  Inline SVG in HTML5
 CSS Transforms  3D Canvas graphics /
 Text API for Canvas WebGL
 SVG in CSS  CSS 3D Transforms
Backgrounds

40. Canvas – 2D
 Generating vector graphics using JavaScript
 Support already widely implemented

41. Canvas – 3D
 Generating 3D graphics using JavaScript
 Not really part of W3C HTML5 Standard
 Partial desktop support, no mobile suppport

42. Canvas - API

43. Canvas - API

44. Canvas – Cross Browser

45. Canvas – Usage Types
 Games, charts, vector maps etc…

46. Example - Zynga

47. Example - Disney

48. Multimedia
 Audio element
 Video element
 WebRTC

49. Audio
 Playing sounds without flash
 Support already widely implemented
 Caveat – no standard for codecs

50. Audio - Codecs
 Requires maintaining content in multiple formats
 Requires server side setup (MIME Type)
 Pollyfill availbale – audio.js

51. Audio - API

52. Example - exfm

53. Video
 Playing videos without flash
 Support already widely implemented
 Caveat – no standard for codecs

54. Video - Codecs
 Requires maintaining content in multiple formats
 Requires server side setup (MIME Type)
 Pollyfill availbale – http://videojs.com/

55. Video - API
 Requires maintaining content in multiple formats
 Requires server side setup (MIME T

56. Example - YouTube

57. Video – Performance Benchmark

58. WebRTC
 Not part of the HTML5 standard
 Packages multiple technologies
 Access to local camera feed
 NAT traversal
 P2P
 Beta Browsers – Chrome, Opera IE, Firefox

59. WebRTC

60. WebRTC

61. Offline
 Create desktop/mobile offline apps with HTML5/JS
 Requiresserver setup
 Use along with web storage / web SQL database

62. Web Storage
 Like cookies, but up to ~5MB
 Stored as string name value pairs
 Saves on cookie traffic!

63. Example – Gmail Mobile

64. Gmail Mobile

65. Example – Amazon Kindle Cloud Reader

66. Amazon Kindle Cloud Reader

67. Geolocation
 Get current geographical location
 Widely supported across mobile platforms
 Plan for opt-in permission dialogs

68. Geolocation - API

69. Geolocation - API

70. Example - Nokia

71. HTML5 with Mobile Devices

72. jQuery Mobile (open source)

73. jQuery Mobile Platform Support

74. jQuery Mobile Platform Support

75. Example- Twitter for iPad

76. Counter Example - Facebook

77. Example - Sencha

78. HTML5 Mobile R&D Strategies
Optional strategies:
 Pure HTML  Native shell, HTML frame
 Pros:  Pros:
 Easy  Access native functionality
 Target multiple platforms (phonegap / custom)
 Offline capabilities  Shared HTML codebase
 Bypass App Stores  App Store friendly
 Cons:  Cons:
 Sandboxed  Requires initial “stitching”
 x-browser overhead  Limited performance?
 Limited performance?

79. Even more features
If we have time left…

80. New Form Elements
 Date pickers, sliders, validation, placeholders
 Partially
implemented in most browsers
 No standard for display

81. Semantic Elements
 <section> <article> <header> <footer> <nav>
<aside>
 SEO game changer?

82. Web Workers
 JavaScript threads
 Runbackground tasks, separate from UI thread
 Create responsive UI

83. Web Sockets
 Bi-directional, full-duplex communications channels over
TCP
 Currently disabled in some browsers due to security issues

84. Cross-document Messaging
 Sending information between pages in different
domains
 IE – not between tabs

85. So what’s the catch?

86. Crossing The Hype Chasm
Aim Here

87. HTML5 - Buzz vs. Reality
 HTML5 is backward compatible Yep
 HTML5 is cross-browser Maybe
Nope
 HTML5 will supersede libraries like jQuery
 HTML5 will make apps run faster
 HTML5 will make apps more rich
 HTML5 will replace Flash / Silverlight
 HTML5 <video> makes displaying videos easier
 HTML5 will replace native desktop platforms
 HTML5 will replace native mobile platforms
 HTML5 will make the web more semantic

88. Implications - Today
 Today we can
 Steer towards rich client architecture
 Steer towards HTML/JS platform
 Reduce Flash dependency
 Target new platforms
 Build apps outside App Stores
 Leverage the buzz
 Today we can’t
 Serve HTML5 clients the same content (codecs, etc…)
 Rely on pure HTML5 solutions

89. Implications
 In the future we will (hopefully) be able to
 Targetmost platforms using HTML5
 Leverage more and more HTML5 features

90. HTML5 - Summary

91. HTML5 – R&D Guidelines
 Look what big companies have already achieved
“If it was done, it’s doable”
 Think “Browser”, think “Rich Client”
 Know your target audience platform support matrix
 Plan for cross-browser R&D overhead
 Plan for content-distribution overhead (codecs, formats)
 Use infrastructure for abstraction

92. HTML 5
Thanks!
Overview