History and Status of HTML5

Agenda 목적 – 차세대 웹 표준의 방향에 대한 모색 웹 표준 동향 – 웹 표준 (W3C vs. WHATWG) – HTML 5 소개 Demo Q&A

리치 웹 시대의 문제 SaaS, Service as a Software – 과거의 유산: DHTML, ActiveX, NS Plugin, Flash – 새로운 기술: Ajax, WPF/e, Apollo, Widget 웹을 기반으로 하는 어플리케이션 – URI-addressable (접근 가능성) – Search-index able (콘텐츠 기반) – Readable and editable (확장 HTML) – HTML/CSS/DOM/JS 기반 리치 웹 상용 벤더의 “데스크톱 리치 웹과 분리” 해야 한다.

HTML Timeline vs. <blink> <marquee> <font> 1990 1995 1996 1997 1998 1999 2000 2001 2002 HTML 1.0 XHTML 2.0 Begins… SGML RFC 1866

World Wide Web Consortium(W3C) 운영 현황 – 웹을 발명한 Tim Berners-Lee에 의해 1994년 시작 – 400개 회원사, 65명의 직원 (2006년 현재) – MIT (US), ERCIM (프랑스), 게이오대(Japan), 15개 지역 사무국 운영 운영 방법 – 강력한 표준안 제정 과정 – 특허 무료 정책 – 공감대, 개방성, 상호 운용성 중시 – 40개 이상의 다른 표준 단체와 연계 작업 – 국제 표준에 맞는 합리적인 운영 주요 목표 – 웹 문서에서 하나의 ‘웹’을 지향 – 데이터서비스: XML, 웹 서비스(Web Services), 시맨틱 웹(Semantic Web)

W3C 주요 목표 XML – 기계 및 인간 모두에 대한 접근성 가능, 국제화 용이 – 주요 이슈 •텍스트 메시징의 문제 (바이너리 XML) •웹에서 XML 전환이 사실상 실패 웹 서비스 : 기계-기계 상호 교환 (cf. 사람-기계 상호 교환) – XML 기반 메시지 처리: 플랫폼 독립적인 모델 – 확장성을 고려한 프레임웍: 상호 운용성 확보 – 기계가 처리할 수 있는 형식: 통합 적합성 확보 시맨틱 웹 – 데이터와 의미를 가진 웹 – 기계가 처리 가능한 의미 있는 웹으로 전환 목표

XHTML XHTML: XML 기반 마크업 언어 – XHTML 1.0: HTML 4을 XML화(Well-formed) 시킴 • HTML의 전환 전략으로 만들어짐 – XHTML 1.1: XHTML 1.0 Strict을 완성 시킴 – XHTML Basic: 휴대폰, TV 및 프린터에서도 사용 가능 – XHTML2: 진정한 XML 기반 마크업 언어 XHTML 2.0 주요 특징 – XML 기반 원리에 충실 – 구조적 마크업에 치중 – 더 많은 시맨틱 마크업 채택 – 사용성 및 접근성, 국제화 강화 • XForm, XMLEvents 사용 – 스크립트 사용 지양 및 장치 독립성 확대

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) 주요 이슈 – HTML에 대한 하위 호환성(Backward Compatibility) 포기를 전제 – <img>, <applet> 등 외부 객체를 <object>로 통일 – <form>은 확장 가능한 XForm을 제공 – XML Events 사용을 위해<script>를 <handler>로 대체 – URL 연속성을 위해 <frame>을 Xframes로 대체 가장 큰 이슈 – 과감한 변화에 따른 비용 증가에 대한 효용성 부족 – 웹은 W3C의 방향에 따라 움직여 주지 않았음

W3C에 대한 비판 기술 사양에 대한 비판 – XML 스펙의 과도한 확장으로 현실 웹과 괴리 •웹의 변화 속도에 맞추지 못하는 상황 지속) – 너무 어렵고 긴 구현 스펙으로 인한 구현 어려움 •DOM3 219p, SVG 719p – Web 2.0 및 Rich Web 등 새로운 변화에 대응 못함 – SOAP, WSDL등 현실 웹에서 거의 사용 안 함 조직에 대한 비판 – 클라이언트 기반(브라우저) 회원사들의 배제 – 핵심에 집중하지 않은 너무 큰 이상적인 목표 치중 – 각 W/G의 책임감 있는 운영 부재 및 외부와의 단절 – 각 W/G의 방만한 회원사 운영 및 비 생산적인 활동

Web Hypertext Application Technology Working Group

WHATWG 설립 계기 – 2004. 4 W3C 웹어플리케이션 CDF 워크샵 (http://www.w3.org/2004/04/webapps-cdf-ws/) – 2004. 6 WHATWG 결성 (Web Hypertext Application Technology Working Group, http://whatwg.org) 주요 목표 – 웹 페이지 주요 기능인 HTML을 확장. – 지금의 “웹 수준”에 맞는 “적합한 웹” 개발 모델 제시 – 리치 웹 어플리케이션 및 동적 웹 서비스 제시 주요 멤버: Mozilla, Opera, Apple, Google 활동 방법 – 공개된 메일링 리스트를 통해 의견 청취 – 오픈 소스 방법론을 통한 스펙 개발

Interoperability Issues <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% 이상이 아직 HTML임) – 꼭 필요한 필수적인 표준 확장 기능을 처리 (현업 개발자 피 드백) – 실제적인 새로운 기능 추가 (웹 어플리케이션) – 하위 호환성 보장 (웹 브라우저 현실 인식) – 개발에 꼭 필요한 디버깅 및 에러 처리 방식 기술 개발 방식 – 현재 브라우저를 역 공학 후 호환성 유지 – 에러 처리에 대한 방식 제공

The DOCTYPE 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>

The Specs Web Web Form 2.0 Applications 1.0 Web Controls 1.0

WHATWG 작업 스펙 WebForm 2.0 (Completed) – 웹 저작자들이 Form을 확장하여 사용할 수 있도록 함 – 웹 어플리케이션 제작 시 요구 기능 추가 Web Application 1.0 (Working) – HTML에 시맨틱과 구조적 마크업 확장 – 고급 위젯에 사용할 수 있는 메뉴, 콘트롤, 툴바 정의 – 브라우저 환경 개선 및 오프라인 브라우징, 통신 처리 개 선 Web Controls 1.0 (Drop) – 자바스크립트와 CSS에 다양한 위젯 개발 기능을 부여 – XBL2의 스펙에도 영향을 줌

W3C Rich Web Clients W3C 내 새로운 그룹 형성 – 2005년 10월 결성 / Ajax 및 위젯 등 동적 UI 및 XML기반 웹 어플리 케이션에 뒤늦게 호응 Web Application Formats W/G – Web Forms 2.0 2006-08-21 Working Draft – XML Binding Language (XBL) 2.0 2006-09-07 Last Call Working Draft – Client-Side Web Applications (Widgets) Requirements 2006-11-09 Working Draft – Widgets 1.0 2006-11 Web APIs W/G – XMLHttpRequest Object. Window Object 1.0. – DOM Level 3 Events. – File Upload, Selectors API, Remote Events for XML (REX) 1.0

Breaking News! Tim Berners-Lee, “Reinventing HTML” (2006-10-27) – http://dig.csail.mit.edu/breadcrumbs/node/166 – Well-formed와 Semantic 마크업의 장점에도 불구하고 HTML에서 XHTML로의 전환은 실패했음을 인정 – 새로운 HTML 개선 워킹 그룹 개설 제의

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

1) 표준 초안

2) 새로 바뀐 점

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>

1. 구조적 마크업

Fallback for new elements • http://ejohn.org/blog/html5-shiv/ • http://remysharp.com/2009/01/07/html5-enabling-script/

주의 사항 Inline 요소이므로 Block 요소로 정의 필요 IE6/IE7 – createElement 메소드를 이용 •C.f. Dean Edwards IE7 Script, jQuery Plugin Firefox 2 – XHTML로 제공 해야 함 (xml content-type)

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. Web Form 콘트롤 <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">

Form 유효성 확인 최대 최소값 표현 <input type="range" min="20" max="80"> 필수 항목 확인 <input type="email" required="required"> 정규 표현식 <input type="text" pattern="[a-z0-9_-]+"> 텍스트 최대값 <textarea maxlength="2000"></textarea>

Form 이벤트 수정 <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>

Fallback for WebForm2 http://code.google.com/p/webforms2/

3. 멀티 미디어 Canvas – SVG Foreign Object Audio / Video ~33% browsers natively – Open Source JS Shims for Canvas and SVG (autumn 2009) support in IE – No Flash in iPhone & Android

Canvas Dynamic and interactive graphics Draw images using 2D drawing API – Lines, curves, shapes, fills, etc. Native SVG Useful for: – Graphs – Applications – Games and Puzzles – And more…

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

Fallback for Video <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 Chrome and IE8

5. 웹 워커 일반 애플리케이션은 Thread와 Process를 가짐 웹 애플리케이션에 동시 실행 가능성 부여 오버로드가 심한 애플리케이션에서 분리된 Thread로 실행 가능 – Dedicated (think: bound to a single tab) – Shared (shared among multiple windows in an origin) – Persistent (run when the browser is “closed”) 구현 중: Firefox 3.5, Safari and Google Chrome

6. 데이터 처리 전통 브라우저에서 HTML (DOM)처리의 문제 – HTML상의 DOM Tree 오류 수정 – 동적 마크업 추가 - innerHTML() – 이벤트 핸들러 추가 – AddEventListner() – HTML 문서에 API 추가 - document.createElement() 테이블 모델 추가 – createCaption(),createTHead(), deleteTFoot() ... Datagrid : 데이터를 찾는 새로운 방법 – 행과 열을 가지는 새로운 데이터 트리 구조 – Datagrid는 새로운 이벤트 모델로 제어가 가능하다 •데이터 얻기: getRowCount(), getCaptionText() •데이터 편집: setRow(), editCell(), updateEverything() •데이터 핸들: selectAll(), invert(), clear()

7. 기타 HTML – 모든 Tag의 시맨틱 정리 – <b>와 <i> <small> c.f. <strong> vs. <em> – 새 속성 • draggable, spellcheck, contenteditable 속성 제공 DOM – getElementByClassName() – CrossDomain Messaging (c.f. XHR) 사용자 정의 프로토콜 및 핸들러 – fax:// - registerContentHandler() Web Socket

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

국내 활동 미래 웹 포럼: http://futureweb.tistory.com

표준화 참여 방법 W3C – W3C 새 HTML W/G의 Invited Expert 참여 – W3C 테크니컬 문서 참조 http://www.w3.org/TR/ – 표준안 단계별의 Last Call 및 Issue 추적 – W3C 한국 사무국에 의견 제시 (http://www.w3.or.kr) WHATWG – WHATWG 위키 및 블로그: Feedback 및 제안 • http://blog.whatwg.org, http://wiki.whatwg.org – 공개 메일링 리스트: 진행 사항 확인 • http://listserver.dreamhost.com/pipermail/whatwg-whatwg.org/ – 표준 스펙 테스트 : 웹 브라우저 구현 단계 별로 테스트 • Firefox DOM Storage, http://channy.creation.net/work/firefox/domstorage/

Resources W3C – http://www.w3.org/html/wg/html5/ – http://www.w3.org/TR/html-design-principles/ – http://dev.w3.org/html5/html4-differences/ Firefox 3.5 – http://hacks.mozilla.org/ (http://www.mozilla.or.kr/zine/?tag=35days) – https://developer.mozilla.org/Ko/Firefox_3.5_for_developers Comparision – http://en.wikipedia.org/wiki/HTML_5 – http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HT ML_5%29 – http://a.deveria.com/caniuse/ – http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers

History and Status of HTML5

0 comments

Notes on slide 1

4 Favorites