top 10 web and html5 predictions for 2013

1

2013, Web & HTML5

Jonathan [email protected]

13 December 2012

Computing Paradigm

4Source: Mary Meeker, INTERNET TRENDS, 2012/12

Computing Paradigm


Computing Platforms


Computing Devices


2016, Mobile Market

9

http://smarterplanet.co.kr/2012/11/06/mobile/

10

Top 5 Form Factors, 2015

11

2014Mobile will become the most common way of accessing the Internet

13

Source: 김용균, 2013 IT 산업 10대 이슈, NIPA

2012 vs. 2013 전망

14

Source: 김용균, 2013 IT 산업 10대 이슈, NIPA

2013 Predictions, Gartner

15

Hype Cycle for Consumer Services and Mobile Application, 2012

17

Hype Cycle for Application Development, 2012

18

2013년 주요 IT 트랜드

데이터 폭증

서비스 환경의다양성 증가

사용자 편의성요구 증가

효율적 활용 요구 증가

단말/플랫폼/서비스 경쟁

Top 10 Web Trends1. HTML5 enabled devices2. HTML5 is the Vanguard 3. Plan 2014 & HTML 5.14. Specializing Web App5. Flooding of Web APIs6. Emerging Web OS7. Territorial expansion8. Response Web Design9. Policy & Plan10. Rethinking the Web Ecosystem

21

1. HTML5 enabled devices

Source:Gartner, Inc.,, Emerging Technology Analysis: Mobile Business Intelligence, 13 July 2011

Windows 8 & IE 10 ??

23

2. HTML5 is the Vanguard

24

Why HTML

25

Why HTML

26

HTML5 is …

27

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

29

HTML Standardization

30

WHAT‐WG

HTML milestone

2012 2013 2014 2015 2016 2017 2018 2019 2020

HTML5.0CR start

…CR, LC

REC … …

HTML5.1 FPWD ---LC + CR

… CR REC

HTML5.x FPWD ---LC + CR

… CR REC

HTML6.x FPWD ---LC + CR

… CR REC

FPWD:First Public Working Draft LCWD: Last Call Working Draft PR: Proposed RecommendationWD: Working Draft CR : Candidate Recommendation REC: Recommendation

HTML 5.1 • http://drafts.htmlwg.org/html/FPWD51/Overview.html

32

HTML.next• The mission of the HTML Working

Group is to continue the evolution of HTML.

• Media Source Extensions: allow JavaScript to generate media streams for playback

• Encrypted Media Extensions: enable playback of protected content extend media element to allow decryption key acquisition

• Canvas 2D Context additions– Ellipses, dashed lines– text on path, SVG matrix transforms

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/

HTML.next - Proposed elements

http://www.w3.org/html/wg/next/markup/

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

HTML5 Modularity• HTML Microdata - HTML WG

• HTML Canvas 2D Context - HTML WG

• HTML5 Web Messaging - Web Apps WG

• Web Workers - Web Apps WG

• Web Storage - Web Apps WG

• The WebSocket API - Web Apps WG

• The WebSocket Protocol - IETF HyBiWG

• Server-Sent Events - Web Apps WG

• WebRTC - WebRTC WG

• WebVTT - W3C Web Media Text Tracks CG

• HTML+RDFa - RDFa WG

• DOM Parsing and Serialization -Web Apps WG

• Shadow DOM - Web Apps WG

• Web Intents - Web Apps WG / Device APIs WG

• Polyglot Markup: HTML-Compatible XHTML Documents - HTML WG

• HTML5: Techniques for providing useful text alternatives - HTML WG

• HTML Editing APIs - HTML Editing APIs CG

• HTML Media Capture - Device APIs WG

• Media Capture and Streams - Device APIs WG / WebRTC WG

• Media Fragments URI - Media Fragments WG

• Encrypted Media Extensions - HTML WG

• Media Source Extensions - HTML WG

4. Specializing Web App

37

Native App vs. Mobile Web

Native App vs. Web App

• Why App ?

– Better Performance

– Better UI

– H/W Capability

– Offline

– Developer Support

– Monetization

– Enhanced Install/Update

38

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 …39

Native App vs. Web App

40

Native App

Web App

Web page

NativeWeb App

Hybrid Web App

Multi-platform support

Specializing Web App

• Web App Models

Running model

Service Model

Trust model ExecutionContext

Browser based Web App

Hosted Web App

Untrusted Web App

Browsing Context

WRT based (Native)Web App

Packaged(Installable) Web App

Trusted Web App

Native Context

41

Overcome the obstructions of web app• Performance

– Engine enhance (Script, Rendering)

– H/W Acceleration

– Web OS

• Offline

– HTML5 offline feature (application cache, localStorage, online/offline events)

• Device Capability

– Device APIs

– System Application APIs

– Web APIs (Web Intents, Web Push…)

– Web OS

• Monetization

– Web Application Store & Native Web App

• Developer Environment

– Developer Tools

– Javascript Frameworks

• UI

– WebGL, Web Audio API

– CSS4, DOM4

– Touch Events, GamePad API …

42

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

43Source: APIs for Trusted Web Applications ‐ Lyon

5. Flooding of Web APIs

• 50 APIs

– 225 specs

• New WG

– Pointer Event

– Web NFC

– System Application

– Web Crypto

– Web RTC

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

44

Web (Platform) APIs

45

http://www.w3.org/2012/05/mobile‐web‐app‐state/

6. Emerging WebOS

pecification Internal draft

Public Working draft

Stable draft (Last Call)

Implementors feedback (CR)

Standard (Rec)

Test Suite Notes

Phase 1

Execution & Security Models Q4 2012 Q2 2013 Q2 2013

Alarm Q1 2013 Q2 2013 Q2 2014Contacts Q1 2013 Q2 2013 Q2 2014Messaging Q1 2013 Q2 2013 Q2 2014Telephony Q1 2013 Q2 2013 Q2 2014Raw Sockets Q1 2013 Q2 2013 Q2 2014

Phase 2

Bluetooth APIBrowser APICalendar APIDevice Capabilities APIIdle APIMedia Storage APINetwork Interface APISecure Elements APISystem Settings API

46

Why Emerging WebOS

• New Paradigm (marketing)

• Challenging

• Device for Web Life

• Cheaper OS

• Rival horse

• New Era of Web

• Webbing the internet & world

47

Firefox OS

48

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.

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

49

8. Response Web• Fragmentation is a big problem

50

8. Response Web• Fragmentation is a big problem

51

8. Response Web• A flexible /fluid grid

• Responsive images

• Media queries

52

8. Responsive Web• W3C Responsive Image Community Group

• Picture Elements

– http://picture.responsiveimages.org/

– http://bit.ly/Uyu05L (W3C)

• Goals

– Respond to different screen pixel width/height

– Respond to different screen pixel densities

– Respond to user zoom on image resource.

– ….

53

9. Policy & Plan

54

HTML5 Leader’s Camp• 국내 인터넷 이용환경 개선과 HTML5 활성화를 위한 전문가 위원회

구성/발족

– 위원장 : 방통위 박재문 네트워크정책국장

– 위원: ETRI, KISA, 삼성전자, LG전자, SKT, KTH, MS 등

– 활동목표: HTML5 활성화 협력 및 자문 (코디네이터 : ETRI 전종홍)

– http://www.facebook.com/groups/html5kr/

HTML5 Leader’s Camp• http://www.facebook.com/groups/html5kr/

• 1차 회의 (2012.1.30, 방통위)

– 인터넷 이용환경 개선 추진 실적 및 ’12년 계획 발표

– HTML5 활성화 리더스 캠프 운영 방안, 전략 수립 방안 논의

• 2차 회의 (2012.3.6 ~ 2012.3.7, 곤지암리조트)

– 주요 기업별 HTML5 도입 및 활성화 계획 발표 및 토의

– 국내 웹 현황과 인터넷 이용환경 개선 방안 논의

– ’12년도 HTML5 활성화 및 향후 정책 방향 논의

• 3차 회의 (2012.3.28, KISA)

– 차기 플랫폼에서의 HTML5 지원 계획 사례 발표 : 타이젠, 윈도우8 등

– HTML5 활성화 대책 1차 초안 검토

• 4차 회의 ~ 5차 회의 (다수 회의): HTML5 활성화 대책 작성/보완

• 6차 회의 (2012.10.24, 강남)

– 방통위 HTML5 활성화 대책 최종안 소개

– 인크로스 다빈치 스튜디오 소개

• 7차 회의 (2012. 11.21, KISA 강남아카데미)

– W3C TPAC 2012, Web Automotive Workshop 결과 소개

– jQeury ASIA 2012 conference 및 Webkit community 활동 방법 소개

• 8차 회의 (2012.12.12, 강남역 TOZ)

– 스마트 미디어와 HTML5 현황

– SK텔레콤의 WDK 소개56

Lack of Web Expert• ICT 미충원 인원 비율

57Source: 이경남, ICT 인력고용현황및시사점, 2012

Lack of Web Expert

58

• ICT 인력 부족률

Source: 이경남, ICT 인력고용현황및시사점, 2012

10. Rethinking the Web Ecosystem

59


60


• Social media & network effect

• Openness & Mashup (0.61M)

• Humor, Easy, Offline, Language …

61

Other Top 10• 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• Javascript & Framework, Tools

62

ConclusionsMobile First & Web Platform First

1. HTML5 enabled devices2. HTML5 is the Vanguard 3. Plan 2014 & HTML 5.14. Specializing Web App5. Flooding of Web APIs6. Emerging Web OS7. Territorial expansion8. Response Web Design9. Policy & Plan10. Rethinking the Web Ecosystem

63

64

Thank youFor more discussion :

JongHong Jeon ([email protected])+82-42-860-5333

Blog : http://mobile2.tistory.com/mhttp://twitter.com/hollobit

OR