1.
2013,
Web & HTML5
Jonathan Jeon
hollobit@etri.re.kr
30 November 2012
1

2.
2

3.
8

4.
9

5.
2012 vs. 2013 전망
10

6.
2013 Predictions, Gartner
11

7.
12

8.
Top 10 Web Trends
1. HTML5 enabled devices
2. HTML5 is the Vanguard
3. Plan 2014 & HTML 5.1
4. Specializing Web App
5. Flooding of Web APIs
6. Emerging Web OS
7. Territorial expansion
8. Response Web Design
9. Policy & Plan
10. Rethinking the Web Ecosystem
13

9.
1. HTML5 enabled devices

10.
2. HTML5 is the Vanguard
15

11.
3. Plan 2014 & HTML 5.1
• Goal: How to get HTML5 to Rec in 2014?
– http://dev.w3.org/html5/decision-policy/html5-2014-plan.html
• Plan 2014 proposes how to get there:
– Charter timeline revisions:
• HTML 5.0 REC: 2014Q4
• Add HTML 5.1 for further feature development
– Permissive CR exit criteria to focus testing
– Modularity
• Address remaining open issues via extension
specs
• Provide opportunity for extension specs to
merge back
16

12.
HTML Standardization
WHAT‐WG
17

13.
HTML milestone
2012 2013 2014 2015 2016 2017 2018 2019 2020
CR …CR,
HTML5.0 REC … …
start LC
LC +
HTML5.1 FPWD --- … CR REC
CR
LC +
HTML5.x FPWD --- … CR REC
CR
LC +
HTML6.x FPWD --- … CR REC
CR
FPWD:First Public Working Draft LCWD: Last Call Working Draft PR: Proposed Recommendation
WD: Working Draft CR : Candidate Recommendation REC: Recommendation

14.
HTML.next - Proposed attributes
capture (proposal)
Provides a hint that by default, for an input element whose type element has the value file,
the file-picker control should be placed in a particular media capturing mode; possible
values are camera, camcorder, microphone, and filesystem.
inert (proposal)
A way to disable an entire subtree, without necessarily making the elements in that
subtree appear disabled (e.g., the way that controls behind a modal dialog are
“disabled” without appearing that way, in traditional UIs).
inputmode (notes)
Specifies what type of keyboard to use for a particular input or textarea element—for
example, to switch to displaying a keyboard optimized for typing in numbers rather than
letters, or for typing in URLs, or for auto-capitalizing; similar to the inputmode attribute
from XHTML 1.1/Basic.
download (proposal)
Indicates that the author intends an a element to be used for downloading a resource.
The attribute may have a value; the value, if any, specifies the default filename that the
author recommends for use in labeling the resource in a local file system.
ping (proposal)
Enables hyperlink auditing: when used on an a element, gives the URLs of the
resources that are interested in being notified if the user follows the hyperlink for that
element.
http://www.w3.org/html/wg/next/markup/

15.
HTML.next - Proposed elements
content (Web Components)
“Represents an insertion point in a shadow DOM subtree. The insertion point is replaced with the
elements’ children at rendering time. The <content> element itself is never rendered.”
data (proposal)
For marking up machine-readable data.
datagrid (proposal)
Represents an interactive/sortable representation of tree, list, or tabular data in the form of rows and
cells. (Might be rendered in browsers as a column-sortable “spreadsheet view” and/or
collapsible/expandable “tree view”). <datagrid> was previously part of the HTML draft, but was dropped
in 2008.
decorator (Web Components)
“Defines a new decorator. Typically, you would also give it an id attribute to make it addressable from
CSS.”
element (Web Components)
“Defines a new custom element.”
intent (Web Intents)
Represents an intent registration.
menuitem (Mozilla proposal)
Represents a command in a menu in a Web application.
reco (Web Speech)
Represents a speech-input (speech recognition) control in a user interface.
shadow (Web Components)
“Specifies an insertion point, where the next-oldest shadow DOM subtree in element’s list of shadow
DOM subtrees is rendered. The <shadow> element itself is never rendered.”
template (Web Components)
“Defines an inert chunk of DOM that can then be used for creating DOM instances in an unknown
parsing context.”
tts (Web Speech)
Represents an audio stream comprised of synthesized speech output (text to speech). DOM interface
inherits from HTMLMediaElement (that is, the DOM interface for the HTML <audio> and <video
elements). http://www.w3.org/html/wg/next/markup/

16.
HTML5 Modularity
• HTML Microdata - HTML WG • Web Intents - Web Apps WG /
• HTML Canvas 2D Context - HTML Device APIs WG
WG • Polyglot Markup: HTML-Compatible
• HTML5 Web Messaging - Web XHTML Documents - HTML WG
Apps WG • HTML5: Techniques for providing
• Web Workers - Web Apps WG useful text alternatives - HTML WG
• Web Storage - Web Apps WG • HTML Editing APIs - HTML Editing
• The WebSocket API - Web Apps APIs CG
WG • HTML Media Capture - Device APIs
• The WebSocket Protocol - IETF HyBi WG
WG • Media Capture and Streams - Device
• Server-Sent Events - Web Apps APIs WG / WebRTC WG
WG • Media Fragments URI - Media
• WebRTC - WebRTC WG Fragments WG
• WebVTT - W3C Web Media Text • Encrypted Media Extensions - HTML
Tracks CG WG
• HTML+RDFa - RDFa WG • Media Source Extensions - HTML
WG
• DOM Parsing and Serialization -
Web Apps WG
• Shadow DOM - Web Apps WG

17.
4. Specializing Web App
Native
Native App
Web App
Hybrid Web App
Web App
Web page
Multi-platform support
22

18.
4. Specializing Web App
• Web App Models
Running Service Trust model Execution
model Model Context
Browser Hosted Web Untrusted Browsing
based Web App Web App Context
App
WRT based Packaged Trusted Native
(Native) (Installable) Web App Context
Web App Web App
23

19.
Native App vs. Web App
• Counterattack (Native App)
– AppStore, Auto update,
– Developer Ecosystem
• Obstruction (Mobile Web)
– Performance, Offline
– Device Capability, Monetization
• Evolution (Mobile UX)
• Chain Reaction
– Evolution/Mutation of Web App
• Native Web App, Hybrid Web App
• Future …
24

20.
Security Model?
• Some suggestions from John Lyle, Oxford University
– Install before execute
– Signed manifest
– Restrictions on external sources and use of secure
connections
– Least privilege access control like native app platforms
– Interoperable access control through policies or capability
tokens
– Hooks for monitoring system application activity
– Restrictions on inline JavaScript and dangerous functions
such as eval.
– Isolation expectations, e.g. sandboxed storage & inter
app communication
– Application lifecycle – update, uninstall, revocation of
privileges
– Application provenance, e.g. app store certification
– User interface guarantees, e.g. to limit clickjacking
– Fingerprinting, linkability and privacy considerations
Source: APIs for Trusted Web Applications ‐ Lyon
25

21.
5. Flooding of Web APIs
Release Date Name Status
2012‐10‐25 Web MIDI API Working Draft
• 50 APIs
2012‐10‐25 HTML to Platform Accessibility APIs Implementation Guide Working Draft
2012‐10‐25 File API Working Draft
2012‐10‐23 Server‐Sent Events Last Call
2012‐10‐18 Push API Working Draft
2012‐10‐04 Web Intents Addendum ‐ Local Services Working Draft
– 225 specs
2012‐10‐04 Web Audio Processing: Use Cases and Requirements Working Draft
2012‐10‐04 Network Service Discovery Working Draft
2012‐09‐20 The WebSocket API CR
2012‐09‐13 Web Cryptography API Working Draft
2012‐08‐21 WebRTC 1.0: Real‐time Communication Between Browsers Working Draft
• New WG 2012‐08‐02
2012‐08‐02
2012‐07‐26
2012‐07‐26
Web Audio API
Ambient Light Events
User Timing
Performance Timeline
Working Draft
Working Draft
CR
CR
– Pointer Event
2012‐07‐26 Page Visibility CR
2012‐07‐26 Navigation Timing CR
2012‐07‐12 Proximity Events Working Draft
2012‐07‐12 JSON‐LD API 1.0 Working Draft
2012‐07‐12 HTML Media Capture Last Call
– Web NFC 2012‐07‐12
2012‐07‐12
2012‐07‐10
2012‐07‐03
Pick Media Intent
Pick Contacts Intent
WebDriver
Working Draft
Working Draft
Working Draft
Working Draft
Quota Management API
– System
2012‐06‐28 Selectors API Level 2 Working Draft
2012‐06‐28 Selectors API Level 1 Last Call
2012‐06‐28 Media Capture and Streams Working Draft
2012‐06‐26 Web Intents Working Draft
Application
2012‐06‐14 Web Notifications Working Draft
2012‐05‐29 Pointer Lock Working Draft
2012‐05‐29 Gamepad Working Draft
2012‐05‐24 Input Method Editor API Working Draft
– Web Crypto
2012‐05‐24 Indexed Database API Last Call
2012‐05‐22 The Screen Orientation API Working Draft
2012‐05‐22 Resource Timing CR
2012‐05‐10 Geolocation API Specification PR
2012‐05‐08 Vibration API CR
– Web RTC 2012‐05‐08
2012‐05‐01
2012‐05‐01
Battery Status API
Web Workers
HTML5 Web Messaging
CR
CR
CR
2012‐04‐19 Web IDL CR
2012‐04‐17 File API: Writer Working Draft
2012‐04‐17 File API: Directories and System Working Draft
2012‐02‐23 Clipboard API and events Working Draft
2012‐01‐17 XMLHttpRequest Level 2 Working Draft
26

22.
Web (Platform) APIs
http://www.w3.org/2012/05/mobile‐web‐app‐state/
27

23.
6. Emerging WebOS
Public Implementor
Internal Stable draft Standard Test
pecification Working s feedback Notes
draft (Last Call) (Rec) Suite
draft (CR)
Execution &
Q4 2012 Q2 2013 Q2 2013
Security Models
Alarm Q1 2013 Q2 2013 Q2 2014
Phase 1 Contacts Q1 2013 Q2 2013 Q2 2014
Messaging Q1 2013 Q2 2013 Q2 2014
Telephony Q1 2013 Q2 2013 Q2 2014
Raw Sockets Q1 2013 Q2 2013 Q2 2014
Bluetooth API
Browser API
Calendar API
Device Capabilities
API
Phase 2 Idle API
Media Storage API
Network Interface
API
Secure Elements API
System Settings API
28

24.
Why Emerging WebOS
• New Paradigm (marketing)
• Challenging
• Device for Web Life
• Cheaper OS
• Rival horse
• New Era of Web
• Webbing the internet & world
29

25.
Firefox OS
Firefox OS is a HTML 5 web-based browser, which sits on top of
Android kernals, with all the features on handsets basically being
accessed through a browser – similar to Google's Chrome OS.
30

26.
7. Territorial expansion
Digital signage (recent Workshop hosted by NTT)
Digital publishing
Two Workshops: eBooks in February 2013, Q2 2013
Digital Marketing
Q2 2013 Workshop
Automotive
14-15 Nov Workshop hosted by Intel and sponsored by
Webinos.
Privacy
26-27 Nov Workshop hosted by UC Berkeley and TRUST
Science and technology center.
Television
Q2 or Q3 2013 Workshop
Source: Jeff Jaffe, “W3C Update*”, 2012
31

27.
8. Response Web
• Fragmentation is a big problem
32

28.
8. Response Web
• A flexible /fluid grid
• Responsive images
• Media queries
33

29.
9. Policy & Plan
34

30.
웹 전문가의 부족 현상 심화
35

31.
웹 전문가의 부족 현상 심화
36

32.
10. Rethinking the Web Ecosystem
37

33.
10. Rethinking the Web Ecosystem
• Social media & network effect
• Openness & Mashup (0.61M)
39

34.
others
• HTML5 & Broadcasting/TV
• Web based Signage
• Web RTC API
• Web Crypto API
• Web NFC API
• Web Intents
• Web Push API
• Web Driver API
• ePub3 & ebook
40

35.
Conclusions
1. HTML5 enabled devices
2. HTML5 is the Vanguard
3. Plan 2014 & HTML 5.1
4. Specializing Web App
5. Flooding of Web APIs
6. Emerging Web OS
7. Territorial expansion
8. Response Web Design
9. Policy & Plan
10. Rethinking the Web Ecosystem
41

36.
Thank you
For more discussion :
JongHong Jeon (hollobit@etri.re.kr)
+82-42-860-5333
Blog : http://mobile2.tistory.com/m
http://twitter.com/hollobit
OR
42