History and Status of HTML5

Ag e n d a
목적
–차세대 웹 표준의 방향에 대한 모색

웹 표준 동향
–웹 표준 (W vs. W
3C HATWG)
–HTM 5 소개
L

Demo
Q&A

리치 웹 시대의 문제
SaaS, Service as a Software
– 과거의 유산 : DHTM ActiveX, NS Plugin, Flash
L,
– 새로운 기술 : Ajax, WPF/e, Apollo, Widget

웹을 기반으로 하는 어플리케이션
–URI- addressable ( 접근 가능성 )
–Search- index able ( 콘텐츠 기반 )
–Readable and editable ( 확장 HTML)
–HTM L/CSS/DOM /JS 기반 리치 웹

상용 벤더의 “데스크톱 리치 웹과 분리”해야 한
다.

HTML Tim e lin e
vs.

<blink>
<marquee>
<font>
1990 1995 1996 1997 1998 1999 2000 2001 2002

HTML 1.0 XHTML 2.0
Begins…

SGML

RFC 1866

Wo rld Wid e We b
Co n s o rtium (W3 C )
운영 현황
– 웹을 발명한 Tim Berners- Lee 에 의해 1994 년 시작
– 400 개 회원사 , 65 명의 직원 (2006 년 현재 )
– M (US), ERCIM ( 프랑스 ), 게이오대 (Japan), 15 개 지역 사
IT
무국 운영

운영 방법
– 강력한 표준안 제정 과정
– 특허 무료 정책
– 공감대 , 개방성 , 상호 운용성 중시
– 40 개 이상의 다른 표준 단체와 연계 작업
– 국제 표준에 맞는 합리적인 운영

주요 목표
– 웹 문서에서 하나의 ‘ ’ 지향 웹을
– 데이터서비스 : XM 웹 서비스 (W Services), 시맨틱 웹
L, eb
(Semantic Web)

W3 C 주요 목표
XML
– 기계 및 인간 모두에 대한 접근성 가능 , 국제화 용이
– 주요 이슈
• 텍스트 메시징의 문제 ( 바이너리 XML)
• 웹에서 XM 전환이 사실상 실패
L

웹 서비스 : 기계 - 기계 상호 교환 (cf. 사람 - 기계 상
호 교환 )
– XM 기반 메시지 처리 : 플랫폼 독립적인 모델
L
– 확장성을 고려한 프레임웍 : 상호 운용성 확보
– 기계가 처리할 수 있는 형식 : 통합 적합성 확보

시맨틱 웹
– 데이터와 의미를 가진 웹
– 기계가 처리 가능한 의미 있는 웹으로 전환 목표

XHTML
XHTM XM 기반 마크업 언어
L: L
– XHTM 1.0: HTM 4 을 XM 화 (W form
L L L ell- ed) 시킴
• HTM 의 전환 전략으로 만들어짐
L
– XHTM 1.1: XHTM 1.0 Strict 을 완성 시킴
L L
– XHTM Basic: 휴대폰 , TV 및 프린터에서도 사용 가능
L
– XHTML2: 진정한 XM 기반 마크업 언어
L

XHTM 2.0 주요 특징
L
– XM 기반 원리에 충실
L
– 구조적 마크업에 치중
– 더 많은 시맨틱 마크업 채택
– 사용성 및 접근성 , 국제화 강화
• XForm XM
, LEvents 사용
– 스크립트 사용 지양 및 장치 독립성 확대

XHTML 2 . 0 (1 )
Generic XML
– 모든 외양은 CSS 로 선언 가능하게 함
– 모든 요소에 하이퍼 링크 추가

시맨틱 태그 강화
– <meta> 및 <link> 에 있는 title 같은 속성을 모든 태그에서 사용

모든 외양 태그 삭제
구조적 마크업 대거 확장
– <br/> 대신 <l>. <h1>, <h2> 대신 <nl>, <section> 및 <h> 신설

I think that I shall never see<br />
A poem lovely as a tree

<l>I think that I shall never see</l>
<l>A poem lovely as a tree</l>

XHTML 2 . 0 (2 )
주요 이슈
–HTM 에 대한 하위 호환성 (Backw
L ard Com patibility)
포기를 전제
–<img>, <applet> 등 외부 객체를 <object> 로 통일
–<form 은 확장 가능한 XForm을 제공
>
–XM Events 사용을 위해 <script> 를 <handler> 로 대
L
체
–URL 연속성을 위해 <fram 을 Xfram 로 대체
e> es

가장 큰 이슈
– 과감한 변화에 따른 비용 증가에 대한 효용성 부족
– 웹은 W 의 방향에 따라 움직여 주지 않았음
3C

W3 C 에 대한 비판
기술 사양에 대한 비판
–XM 스펙의 과도한 확장으로 현실 웹과 괴리
L
• 웹의 변화 속도에 맞추지 못하는 상황 지속 )
– 너무 어렵고 긴 구현 스펙으로 인한 구현 어려움
• DOM 219p, SVG 719p
3
–W 2.0 및 Rich W 등 새로운 변화에 대응 못함
eb eb
–SOAP, WSDL 등 현실 웹에서 거의 사용 안 함

조직에 대한 비판
– 클라이언트 기반 ( 브라우저 ) 회원사들의 배제
– 핵심에 집중하지 않은 너무 큰 이상적인 목표 치중
– 각 W 의 책임감 있는 운영 부재 및 외부와의 단절
/G
– 각 W 의 방만한 회원사 운영 및 비 생산적인 활동
/G

Web Hypertext Application Technology Working Group

WHATWG
설립 계기
– 2004. 4 W 3C 웹어플리케이션 CDF 워크샵 (
http://w w 3.org/2004/04/w
w .w ebapps- cdf- ws/)
– 2004. 6 W HATW 결성 (W Hypertext Application
G eb
Technology W orking Group, http://whatwg.org)

주요 목표
– 웹 페이지 주요 기능인 HTM 을 확장 .
L
– 지금의 “ 수준” 맞는 “
웹 에 적합한 웹”개발 모델 제시
– 리치 웹 어플리케이션 및 동적 웹 서비스 제시

주요 멤버 : Mozilla, Opera, Apple, Google

활동 방법
– 공개된 메일링 리스트를 통해 의견 청취
– 오픈 소스 방법론을 통한 스펙 개발

In te ro p e ra b ility Is s ue s
<p><strong>a<em>b</strong>c</em>

p p p

STRONG STRONG EM STRONG

#text: a EM #text: a EM #text: c #text: a EM
#text: b #text: c #text: b #text: b #text: c

WHATWG 표준의 목표
기본 아이디어
– 현실적인 웹 문서 상황에 맞는 표준 스펙 (95% 이상이
아직 HTM 임 )
L
– 꼭 필요한 필수적인 표준 확장 기능을 처리 ( 현업 개발
자 피드백 )
– 실제적인 새로운 기능 추가 ( 웹 어플리케이션 )
– 하위 호환성 보장 ( 웹 브라우저 현실 인식 )
– 개발에 꼭 필요한 디버깅 및 에러 처리 방식 기술

개발 방식
– 현재 브라우저를 역 공학 후 호환성 유지
– 에러 처리에 대한 방식 제공

Th e DOCTYP E
HTML 4.01 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html>

Th e S p e c s

We b We b Fo rm 2 . 0
Ap p lic a tio n s
1 .0

We b Co n tro ls 1 . 0

WHATWG 작업 스펙
WebForm 2.0 (Completed)
– 웹 저작자들이 Form을 확장하여 사용할 수 있도록
함
– 웹 어플리케이션 제작 시 요구 기능 추가

W Application 1.0 (W
eb orking)
–HTM 에 시맨틱과 구조적 마크업 확장
L
– 고급 위젯에 사용할 수 있는 메뉴 , 콘트롤 , 툴바 정
의
– 브라우저 환경 개선 및 오프라인 브라우징 , 통신 처
리 개선

W Controls 1.0 (Drop)
eb
– 자바스크립트와 CSS 에 다양한 위젯 개발 기능을 부
여

W3 C Ric h We b Clie n ts
W3C 내 새로운 그룹 형성
– 2005 년 10 월 결성 / Ajax 및 위젯 등 동적 UI 및 XM 기반
L
웹 어플리케이션에 뒤늦게 호응

W Application Form
eb ats W/G
– W Form 2.0 2006- 08- 21 W
eb s orking Draft
– XM Binding Language (XBL) 2.0 2006- 09- 07 Last Call
L
W orking Draft
– Client- Side W Applications (W
eb idgets) Requirements
2006- 11- 09 W orking Draft
–W idgets 1.0 2006- 11

W APIs W
eb /G
– XM LHttpRequest Object. W indow Object 1.0.
– DOM Level 3 Events.
– File Upload, Selectors API, Rem ote Events for XM (REX) 1.0
L

Bre a kin g Ne w s !
Tim Berners- Lee, “Reinventing HTML”
(2006- 10- 27)
–http://dig.csail.mit.edu/breadcrumbs/node/166
–W form 와 Sem
ell- ed antic 마크업의 장점에도 불구
하고 HTM 에서 XHTM 로의 전환은 실패했음을 인
L L
정
– 새로운 HTM 개선 워킹 그룹 개설 제의
L

HTML W/ G 발족

600 여명의 외부 Invited Expert (W3C 사상 최초 )
공개 메일링리스트 및 W HATW 와 병행 해서 표준안
G
작업

3 ) 개발자를 위한 설명서

투명한 스펙 제정 노력

HTML 5
<!doctype html>
<html>
<head>
<meta charset="UTF-8”>
<title>Example document</title>
</head>
<body>
<p>Example paragraph
</body>
</html>

HTML5 + XML = XHTML5
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>

Fa llb a c k fo r n e w e le m e n ts

• http://ejohn.org/blog/htm shiv/
l5-
•http://rem ysharp.com /2009/01/07/htm enabling- script/
l5-

주의 사항
Inline 요소이므로 Block 요소로 정의 필
요
IE6/IE7
–createElement 메소드를 이용
• C.f. Dean Edwards IE7 Script, jQuery Plugin

Firefox 2
–XHTM 로 제공 해야 함 (xm content- type)
L l

2 . 시맨틱 마크업
<time>

<figure>

<legend> <meter>

<meter>

Rating:

<progress>

<datagrid>

시맨틱 마크업 용례
시맨틱 태그 추가
– var i:Integer;i := <m>1.1</m>; end.
– <t lang="fr">je ne sais quoi</t>
– <time datetime="2006-09-23">a saturday</time>
– <meter min="0" max="100" value="75"></meter>
– <meter value="0.25">Low activity,</meter>
– <progress><span id="p">0</span>%</progress>

컨텐츠 임베딩
– <img>, <iframe>
– <embed>
– <object>-<param> <figure>
– <video>
– <audio>

3 . We b Fo rm 콘트롤
<input type="datetime"> <input type="text" list="list">
<datalist id="list">
<option value="Mr">
...
</datalist>

<input type="url">

<input type="number">

<input type="email"> <input type="range">

F o rm 유효성 확인
최대 최소값 표현
<input type="range" min="20" max="80">

필수 항목 확인
<input type="email"
required="required">
정규 표현식
<input type="text" pattern="[a-z0-9_-]+">

텍스트 최대값
<textarea
maxlength="2000"></textarea>

Fo rm 이벤트 수정
<p>Search: <input type="text" oninput="search(value);"></p>

<label>
<input name="byte" type="number" min="0" max="255“
required="required" oninvalid="failed(event)" /></label>

<output name="error"/>
<script type="text/javascript"> <![CDATA[
function failed(event) {
var form = event.target.form;
if (event.target.validity.typeMismatch)
form.error.value = ' 숫자만 허용 됩니다 ..';
else if (event.target.validity.rangeUnderflow)
form.error.value = ' 숫자가 0 보다는 커야 합니다 .';
else if (event.target.validity.rangeOverflow)
form.error.value = ' 숫자가 255 이하여야 합니다 .';
event.preventDefault();
}
]]> </script>
</form>

Fa llb a c k fo r We b Fo rm 2

http :// c o de .g o o g le .c o m/ p / we bfo rms 2/

3 . 멀티 미디어
Canvas
– SVG Foreign Object
Audio / Video

~ 33% browsers natively
–Open Source JS Shim for
s
Canvas and SVG (autum n
2009) support in IE
–No Flash in iPhone &
Android

Ca n va s
Dynam and interactive graphics
ic
Draw images using 2D drawing API
–Lines, curves, shapes, fills, etc.
Native SVG
Useful for:
–Graphs
–Applications
–Gam and Puzzles
es
–And m ore…

Vid e o a n d Aud io
멀티미디어 서비스가
주류 서비스로 편입
거의 모두 플러그인 기
반으로 제공되고 있음
(c.f. Open Video)
Flash 가 de facto
standard
브라우저에 네이티브
지원 필요성 (c.f.
OGG)

Fa llb a c k fo r Vid e o

<video>
<source src="zombie.ogg" type="video/ogg"/> <source
src="zombie.mp4" type="video/mp4"/>

<embed src="http://blip.tv/play/AYGLzBmU8hw"
type="application/x-shockwave-flash" width="500"
height="396" allowscriptaccess="always"
allowfullscreen="true"/>

</video>

http://camendesign.com/code/video_for_everybody

4 . 오프라인 지원 및 스토리
지
데이터를 클라이언트 사이드에서 저장
필요
웹 애플리케이션의 오프라인 기능 지원
필요
–데이터베이스 서비스 지원
–SQLite database 및 DOM storage api (key/
value pairs)

구현 브라우저
–Firefox, Safari, Opera, Google Chrom and
e

5 . 웹 워커
일반 애플리케이션은 Thread 와 Process 를 가
짐
웹 애플리케이션에 동시 실행 가능성 부여
오버로드가 심한 애플리케이션에서 분리된
Thread 로 실행 가능
–Dedicated (think: bound to a single tab)
–Shared (shared am ong m ultiple w indow in an
s
origin)
–Persistent (run when the brow ser is “closed”)

구현 중 : Firefox 3.5, Safari and Google
Chrome

6 . 데이터 처리
전통 브라우저에서 HTM (DOM 처리의 문제
L )
–HTM 상의 DOM Tree 오류 수정
L
– 동적 마크업 추가 - innerHTM L()
– 이벤트 핸들러 추가 – AddEventListner()
–HTM 문서에 API 추가 -
L
docum ent.createElement()

테이블 모델 추가
– createCaption(),createTHead(), deleteTFoot() ...

Datagrid : 데이터를 찾는 새로운 방법
– 행과 열을 가지는 새로운 데이터 트리 구조
–Datagrid 는 새로운 이벤트 모델로 제어가 가능하다
• 데이터 얻기 : getRow Count(), getCaptionText()
• 데이터 편집 : setRow editCell(), updateEverything()
(),
• 데이터 핸들 : selectAll(), invert(), clear()

7 . 기타
HTML
– 모든 Tag 의 시맨틱 정리
– <b> 와 <i> <small> c.f. <strong> vs. <em>
– 새 속성
• draggable, spellcheck, contenteditable 속성 제공

DOM
– getElementByClassNam e()
– CrossDom ain Messaging (c.f. XHR)

사용자 정의 프로토콜 및 핸들러
– fax:// - re g is te rCo nte ntHand le r()

W Socket
eb

그 밖에 주요 웹 표준
PNG 구현
CSS 2.1 및 CSS 3
3D API
Selector API –querySelector()
Geolocation API

국내 활동

미래 웹 포럼 : http://futureweb.tistory.com

표준화 참여 방법
W3C
–W 3C 새 HTM W 의 Invited Expert 참여
L /G
–W 3C 테크니컬 문서 참조 http://w w 3.org/TR/
w .w
– 표준안 단계별의 Last Call 및 Issue 추적
–W 3C 한국 사무국에 의견 제시 (http://w w 3.or.kr)
w .w

WHATWG
–WHATW 위키 및 블로그 : Feedback 및 제안
G
• http://blog.whatwg.org, http://wiki.whatwg.org
– 공개 메일링 리스트 : 진행 사항 확인
• http://listserver.dreamhost.com/pipermail/whatw w
g- hatwg.org/
– 표준 스펙 테스트 : 웹 브라우저 구현 단계 별로 테스트
• Firefox DOM Storage,
http://channy.creation.net/work/firefox/domstorage/

Re s o urc e s
W3C
– http://w w 3.org/htm g/htm
w .w l/w l5/
– http://w w 3.org/TR/htm design- principles/
w .w l-
– http://dev.w3.org/html5/htm differences/
l4-
Firefox 3.5
– http://hacks.m ozilla.org/ (
http://w w ozilla.or.kr/zine/?tag=35days)
w .m
– https://developer.m ozilla.org/Ko/Firefox_3.5_for_developers

Comparision
– http://en.wikipedia.org/wiki/HTML_5
– http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28H

– http://a.deveria.com /caniuse/
– http://w iki.whatwg.org/wiki/Implementations_in_Web_browsers

History and Status of HTML5

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (19)

Ähnlich wie History and Status of HTML5

Ähnlich wie History and Status of HTML5 (20)

Mehr von Channy Yun

Mehr von Channy Yun (20)

History and Status of HTML5