HTML5 and next - W3C 대한민국 사무국!

+

HTML5 and next 조만영 | W3C 대한민국사무국 [email protected]

+

발표자 소개 §  (현) 미래웹기술연구소㈜ 대표이사 §  (현) W3C 대한민국 사무국 Staff Business and Technology Specialist §  (전) 오페라소프트웨어 Presales Engineer 부장 §  (전) 유니퀘스트 경영기획실 §  (전) 나모인터랙티브 웹개발팀

§  E-Mail : [email protected], [email protected] §  Twitter : @manyoungc

Pag e 1-2

+ HTML5 는 왜 각광받는 것일까?

+

HTML5 만능? n 

잠깐 HTML 만 가지고 뭘하죠?

Image source : http://www.caxid.com/blog/wp-content/uploads/2011/04/html_css.jpg

+

HTML, CSS, Javascript, XML, etc n 

It’s web technology

+

웹기술이 뜬다. 왜?

+

Steve Jobs!

+

iPhone, iPad

+

Thoughts on Flash

http://www.apple.com/hotnews/thoughts-on-flash/

+

We love apple

+

진짜이유: 인터넷 환경의 변화

M e n u

Close Tab

+

HTML5 Video의 사례 : 2007년 도입

Source : http://labs.opera.com/

+

2007년 시장에서의 무관심 n 

2007년 당시 Desktop에는 Flash 가 있기에!

http://statowl.com/plugin_overview.php

+

Seamless internet experience

M e n u

Close Tab

+

HTML5 무시할수 없음

+

인터넷 접속 기기의 다변화 대체기술에 대한 요구 발생

iOS

Mobile Phone

Tablet PC

TV

Android

WM7

Blackberry

Bada

WebOs

+

Native Application 접근 방법의 한계

WM

Black berry

Bada

Android

App ?

iOS

+

크로스 플랫폼, 크로스 디바이스 서비스, 컨텐츠에 대한 필요성

+

웹표준기술 : 범용성 n 

W3C

n 

Non proprietary technology

n 

Viewed by browser

n 

Open standard

n 

Device independent

+

팀버너스리가 웹을 고안했을때 부터 이기종의 호환성을 고려 n 

Formatting online hypertext in a device-independent way http://www-sul.stanford.edu/tools/tutorials/html2.0/ devicein.html

+

전 산업영역에서 웹기술을 주목하는 이유

+ HTML5와 웹기술은 어디로 가는가?

+

HTML5 기술들의 요소는 무엇들인가?

n 

Video,

n 

Canvas

n 

Audio,

n 

Geolocation,

n 

Web Storage,

n 

Workers

n 

And many more

+

HTML5 Video, Audio, Geolocation, Web Storage, Workers n 

뭔가 혁신적인 기술들인가요?

+

HTML5는 혁신적이지 않다. 다만 범용적일 뿐이다.

http://www.silverlighthack.com/post/2011/04/16/Five-Things-thatHTML5-Video-Currently-will-not-do-but-Silverlight-and-Flash-will.aspx

+

HTML5 에 추가된 기술들이 의미하는 것 은 무엇인가? n 

Video,

n 

Canvas

n 

Audio,

n 

Geolocation,

n 

Web Storage,

n 

Workers

n 

And many more

+

Legacy 기술들이 웹표준기술의 영역으로 들어오는 과정 n 

5년전에 비디오가 웹표준 기술이라고 이야기 했다면?

n 

하지만 지금은?

+

미래의 웹기술의 진화방향을 예측할 수 있는 단서 HTML Geolocation Device API

WebFont WOFF

CSS

Javascript

기술통합자로서의 웹기술

WEB

Web as technology integrator! Web Storage, Indexed DB

XML

Video Audio

VoiceML, MathML

+

W3C 안에선 어떤 일들이 일어나고 있을까?

+

Web Standardization

+

Web as Application

Network

WEB

Communication Other Users

Web Application Content Text

Other Applications

Graphics Multimedia User Input

Storage

User Interactions

Forms Packaging

Sensors & Hardwares

+

웹표준화가 진행중인 애플리케이션 기반기술 n 

Graphics, Multimedia

n 

User Interaction, Forms

n 

Data Storage

n 

Sensors and Hardware Integration

n 

Network, Communication

n 

Packaging

n 

Performance and Optimization

Page § 32

+

Graphics

Feature

2D Vector Graphics

2D Programmatic API

Page § 33

Specification

Working Group

Maturity

Current implementations

Widely deployed (iOS, BlackBerry, WebKit on Nokia, webOS, Opera, Firefox, announced for Android, announced for Windows Phone)

SVG Tiny 1.2

SVG Working Group

Standard

HTML Canvas 2D Context

HTML Working Group

Working Draft

Widely deployed (iOS, BlackBerry, Android, webOS, Opera, Firefox, announced for Windows Phone)

+

Graphics

Feature

Specification

Working Group

Maturity

Deployed as an extension in many mobile browsers

Rounded Corners Complex background images

CSS Backgrounds and Borders

Candidate Recommendation

Box shadow effects CSS 2D Transforms

Current implementations

Limited (?) Limited (?)

Working Draft

Limited (?)

CSS Animations Module Level 3

Working Draft

Limited (?)

CSS Transitions Module Level 3

Working Draft

Limited (?)

3D Effects

CSS 3D Transforms Module Level 3

Working Draft

Very limited

CSS-based Adaptation

Media Queries

Candidate Recommendation

Widely deployed

Downloadable fonts

WOFF File Format 1.0

Last Call

Growing deployment

Animations

Page § 34

CSS 2D Transforms Module Level 3

CSS Working Group

WebFonts Working Group

+

Multimedia

Feature

Specification

Video playing

HTML5 video element

Audio playing

Working Group

Maturity

Current implementations

HTML Working Group

Working Draft

Growing deployment

Working Draft

Very limited

Working Draft

None (?)

Working Draft

Widely deployed (iOS, BlackBerry, Android, webOS, Opera, Firefox, announced for Windows Phone)

HTML5 audio element HTML Media Capture

Capturing audio/video

Device APIs & Policy Working Group The Media Capture API

Image & Video analysis, modification

HTML Canvas 2D Context

HTML Working Group

Audio analysis, modification

None

Audio Working Group (not started yet) N/A

Page § 35

None

+

User Interactions

Feature

Specification

Working Group

Maturity

Current implementatio ns

Touch-based interactions

Touch Events Specification (no public draft yet)

Web Events Working Group

N/A

Growing deployment

Vibration

N/A

Device API & Policy

N/A

None

Intent-based events

N/A

Web Events Working Group

N/A

None

Notification

Web Notifications (no public draft yet)

Web Notifications Working Group

N/A

None

Speech-based interactions

N/A

HTML Speech Incubator Group

N/A

N/A

Page § 36

+

Forms

Feature

Specification

Working Group

Date and time entries

HTML5 Date and Time state of input element

Limited

Customized text entries (tel, email, url)

HTML5 telephone, email and URL state of input element

Limited (?)

HTML Working Group

Maturity

Current implementations

Working Draft

Input pattern

HTML5 pattern attribute

Very limited (?)

Input hint

HTML5 placeholder attribute

Limited (?)

Pre-defined values for text entries

HTML5 datalist element

Very limited (?)

Page § 37

+

Data Storage

Feature

Specification

Working Group

Maturity

Current implementations

Simple data storage

Web Storage

Web Applications Working Group

Working Draft

Well deployed

File reading

File API

Web Applications Working Group

Working Draft

Limited (?)

File writing

File API: Writer

Web Applications Working Group

Working Draft

Limited (?)

Filesystems operations

File API: Directories and System

Web Applications Working Group

Working Draft

None

Database query/update

Indexed Database API

Web Applications Working Group

Working Draft

Very limited (?)

Addressbook data

Contacts API

Device APIs & Policy Working Group

Working Draft

Very limited

Calendar data

Calendar API (no public draft yet)

Device APIs & Policy Working Group

N/A

Very limited

Page § 38

+

Sensors and Hardware Integration

Feature

Specification

Working Group

Maturity

Current implementations

Geolocation

Geolocation API

Geolocation Working Group

Candidate Recommendation

Widely deployed

Accelerometer / Orientation

DeviceOrientation Event Specification (no public draft yet)

Geolocation Working Group

N/A

Limited

Generic sensors

The System Information API

Device APIs & Policy Working Group

Working Draft

None

Camera & Microphone capture

The Media Capture API

Device APIs & Policy Working Group

Working Draft

None (?)

Page § 39

+

Network

Feature

Specification

Working Group

Maturity

Current implementations

HTTP(s) network API

XMLHttpRequest

Web Applications Working Group

Candidate Recommendation

Widely deployed

XHR2

XMLHttpRequest Level 2

Web Applications Working Group

Working Draft

Very limited (?)

Cross-domain requests

Cross-Origin Resource Sharing

Web Applications Working Group

Working Draft

Getting deployed (?)

Server-pushed requests

Server-Sent Events

Web Applications Working Group

Working Draft

Limited (?)

Bidirectional connections

The WebSocket API

Web Applications Working Group

Working Draft

None (?)

on-line state

HTML5 onLine DOM state

HTML Working Group

Working Draft

Getting deployed

Network characteristics

Network Property in The System Information API

Device APIs & Policy Working Group

Working Draft

None

Page § 40

+

Communication

Feature

Specification

Working Group

Maturity

Current implementations

Emails, SMS and MMS wit h generated attachments

The Messaging API

Device APIs & Policy Work ing Group

Working Draft

None

Inter-app communications

HTML5 Web Messaging

Web Applications Working Group

Working Draft

Limited (?)

Inter-app triggers

None

Possibly Device APIs & Policy Work ing Group

N/A

None

P2P connections

None

Proposed Web Real-Time Communic ations Working Group

N/A

None

P2P Video/Audio streams

None

Proposed Web Real-Time Communic ations Working Group

N/A

None

Page § 41

+

Packaging

Feature

Specification

Working Group

Maturity

Current implementations

Application Cache

HTML5 Application Cache

HTML Working Group

Working Draft

Getting deployed

Last Call

Getting deployed

Candidate Recommendati on

Getting deployed

Candidate Recommendati on

Limited

Widgets Packaging & Conf iguration Widgets

Digital Signatures for Widg ets Widget Access Request P olicy

Page § 42

Web Applications Working Group

+

Performance and Optimization

Feature

Specification

Working Group

Maturity

Current implementations

Timing hooks

Navigation Timing

Web Performance Working Group

Last Call

None (?)

Threading

Web Workers

Web Applications Working Group

Working Draft

Limited (?)

Optimization Best Practice s

Mobile Web Application Be st Practices

Mobile Web Best Practices Working Group (now clos ed)

Standard

N/A

Page § 43

+

웹표준기술에 대한 새로운 관점이 필요 n 

HTML 태그가 전부가 아니다.

n 

기술통합자로서 웹표준 기술은 계속 심화될 것이다.

+

Evolution of web technology

Source : https://evolutionofweb.appspot.com/

Pag e 1-45

Evolution of web technology

Page 1-46

Evolution of Web Technology

Page 1-47

+

W3C 밖에서는?

n 

산업계또한 오래전부터 웹기술의 범용성에 대해 주목함

n 

Global AppStore : WAC

n 

OIPF(Open IPTV Forum)

n 

HBBTV

n 

WebOS

n 

W3C Web and TV IG

+

Browser for TV middleware n 

HBBTV

+

앞으로 예상되는 환경의 변화에 따른 웹기술 트렌드

+

앞으로의 환경의 변화 n 

4G LTE

n 

Portable devices

+

Cloud computing

+

Thin client computing in portable device

+

Kindle Cloud Reader

+

Kindle Fire : $199

+

Amazon Silk Browser

+

Facebook Spartan

http://www.slashgear.com/facebooks-project-spartan-an-html5trojan-horse-for-apple-16159671/

+

Chrome WebStore

+

Web based e-book

+

Google music

+

웹기술에 요구하는 것이 많아짐 n 

시장의 요구는 계속 증가하고 있음

n 

그 요구는 표준화로 반영된다.

+

Web 과 App 의 UI 경계 사라짐

+

웹은 앱을 대체하지 않을것. 쓰임새가 다르다.

+

웹기술과 웹브라우저 아직은 여전히 부족한 기술

+

웹기술을 쓸수 밖에 없는 환경의 도래

n 

결국 시간 문제

+

멀티디바이스 시대 웹기술은 GUI 기술로서 더욱 재조명 n 

N-Screen 종결자

n 

CSS

n 

Media Query

n 

SVG

+

웹기술기반 UI Framework 시대의 본격적인 개막 n 

HTML5 UI Framework : Sencha Touch

n 

jQueryMobile

+

Language 진화의 자연스러운 단계를 웹기술도 밟고 있는 것임 n 

Library 화

n 

UI component 화

+

웹코더에서 Web UI Developer 로서의 변신 필요

+

웹기술이 어디까지 갈까? n 

웹브라우저의 미래를 생각해 보자.

+

가전에서의 요구

+ One more thing!

+

HTML5 다음이 궁금하십니까?

출처 http://html11.org

+

직접 만드시면 됩니다.

+

웹의 미래, 웹기술은 미래 당신도 만들수 있습니다. n 

열려있습니다.

n 

HTML5 KIG

n 

W3C Member

n 

W3C Community Group

n 

W3C Business Group

+

W3C 가입하고 바로 활동하세요 J

+ Thank You!