1. Ⓒ sblim, 2010 HTML5 Overview 숙명여자대학교 임순범 1

2. Ⓒ sblim, 2010 Table of Contents History of Web HTML5 History HTML5 Key Features Standard & Web Development Mobile & HTML5 정보과학회 MOBAS 워크샵 2010.10 일부 PPT 자료제공 : 이승윤 팀장, ETRI 2

3. Ⓒ sblim, 2010 3 Source: http://channy.creation.net

4. Ⓒ sblim, 2010 History of Web WWW 4

5. Ⓒ sblim, 2010 HyperText 1965, Nelson HyperCard 1987 Apple 5

6. Ⓒ sblim, 2010 World Wide Web 1990, CERN  Tim Berners-Lee 6 “Information Management: A Proposal” Tim Berners-Lee, CERN March 1989, May 1990

7. Ⓒ sblim, 2010 Mosaic Web Browser 1993, Marc Andreessen & Eric Bina  NCSA, Univ. of Illinois 7

8. Ⓒ sblim, 2010 WWW Consortium 1994, http://www.w3c.orghttp://www.w3c.org 8

9. Ⓒ sblim, 2010 Web Browsers 1 st Stage Netscape  1994~1997 1.0~4.8  1998 오픈소스 발표 v4.0  2000 Mozilla 기반  2007 AOL v7.0 Microsoft  1995 v1.0 ~ 1997 v4.0  1999 v5.0, 2001 v6.0  2008 v7.0, 2009 v8.0,  2010 v9.0 치열한 경쟁  비표준 태그  크로스 브라우징  반독점금지법, 2000 미 대법원 9

10. Ⓒ sblim, 2010 Web Browsers 2 nd Stage 1996 Opera, Norway 2002 Mozilla (2007 Netscape 9.0) 2004 Firefox (Phoenix, Firebird) 2003 Safari 2008 Chrome 10

11. Ⓒ sblim, 2010 Development of Web 11

12. Ⓒ sblim, 2010 HTML5 History HTML 12

13. Ⓒ sblim, 2010 HTML versions 13 1991, HTML 1.0 (Berners-Lee) 1995, HTML 2.0 (IETF) 1997, HTML 3.2 (W3C) 1997, HTML 4.0 (W3C) 1999, HTML 4.01 (W3C) 2000, XHTML 1.0 (W3C) ??, XHTML 2.0  Xform, Xframe, DOM 대신 XML event, RDFa, 일부요소 추가

14. Ⓒ sblim, 2010 Why “new HTML” ?  Fail of XHTML2  Developer Productivity  Browser Compatibility  Rich Web functions: Flex, Silverlight, AIR Now, Web is a Platform Web on Everything 14

15. Ⓒ sblim, 2010 Web Platform is Accelerating 15

16. Ⓒ sblim, 2010 Key Developer Challenges 16

17. Ⓒ sblim, 2010 WHAT Working Group  Web Hypertext Application Technology  Open Community, 2004  W3C 는 유료 회원에게만 개방 Developing  Web Form 2.0, Web Application 1.0 17 WHATWG

18. Ⓒ sblim, 2010 New Activities on W3C, 2005 Web Application Format WG  Web Form 2.0, Widget, etc. Web API WG  XMLHttpRequest, DOM3, File Upload, etc. HTML WG created, 2007  600+ invited experts, open mailing-list 18

19. Ⓒ sblim, 2010 HTML5 Key Features Extension of HTML + Add “Rich Web Application” 19

20. Ⓒ sblim, 2010 HTML 의 발전 역사

21. Ⓒ sblim, 2010 What is “HTML5” ? 21 새로운 마크업 구조 + {Canvas, Web Storage, Drag&Drop, Microdata, …}

22. Ⓒ sblim, 2010 HTML5 언어의 특징 HTML5 의 방향  마크업에 보다 의미를 부여, 스타일은 분리하도록 CSS3 활용  플러그인 대신 웹 표준 적용하도록 SVG, MathML 지원  인터랙션 개발을 위해 자바스크립트를 지원  웹 애플리케이션의 개발을 위하여 다양한 API 를 제공  특히 위치관련 및 오프라인 등 모바일 환경까지 고려한 API 제공

23. Ⓒ sblim, 2010 (1) 강화된 마크업 요소 의미 부여 가능한 구조적 마크업 요소  페이지 단위의 문서 구조를 표현 다양하고 편리한 웹 폼 (WebForm) 입력 기능  편리한 UI 개발을 위해 Form 기능 대폭 개선  요소에 date, number, color 등 각종 type 추가 웹 미디어 기능의 강화  요소와 요소  요소 : 래스터 그래픽스 그리기 기능  SVG(Scalable Vector Graphics): 벡터 그래픽스 처리  MathML 언어 : 수식의 의미와 모양까지 표현

24. Ⓒ sblim, 2010 HTML5, Structure DOCTYPE HTML  HTML5 24

25. Ⓒ sblim, 2010 25 멀티미디어 배움터 2.0 [ 그림 1] 책 소개

26. Ⓒ sblim, 2010 HTML5, WebForm2 INPUT TYPES ATTRIBUTES placeholder required autofocus autocomplete min max step pattern... 26

27. Ⓒ sblim, 2010 27

28. Ⓒ sblim, 2010 HTML5, Audio & Video 28

29. Ⓒ sblim, 2010 사용 중단 권고 CSS 대체가능한 요소  … 웹접근성에 지장있는 요소  혼란 야기 요소  29

30. Ⓒ sblim, 2010 애플리케이션 개발을 위한 API 드래그앤 드롭 (Drag & Drop) API 오프라인 웹 어플리케이션 (Offline Web Applications) API 웹 스토리지 (Web Storage) API 인덱스드 데이터베이스 (Indexed Database) API 파일 (File) API 웹 소켓 (Web Sockets) API 웹 메세징 (Web Messaging) API 위치정보 (Geo-Location) API 30

31. Ⓒ sblim, 2010 HTML5, Canvas  CANVAS 2D (API)  paths (lines & strokes)  Fills  Gradients  Shadows  Text  Bitmaps  Manipulation  Animation 31

32. Ⓒ sblim, 2010 HTML5, Geo-Location 32

33. Ⓒ sblim, 2010 HTML5, Web Sockets 33

34. Ⓒ sblim, 2010 HTML5, WebGL & SVG 34

35. Ⓒ sblim, 2010 Standard & Web Development HTML5 Standard Service Model 35

36. Ⓒ sblim, 2010 HTML Events 36 Source: http://channy.creation.net

37. Ⓒ sblim, 2010 W3C Standards (in draft) 37 http://www.w3.org/TR/html5/

38. Ⓒ sblim, 2010 HTML5, milestone  2007-05 HTML5 & Web Forms 2.0 specs adopted as basis for review  2007-11 HTML Design Principles  2008-02 HTML5 First Public Working Draft  2011-05 HTML5 Last Call Working Draft  2013-08 HTML5 Candidate Recommendation 6  2014-01 HTML5 Proposed Recommendation  2014-04 HTML5 Recommendation 38

39. Ⓒ sblim, 2010 Mobile & HTML5 Mobile Web 39

40. Ⓒ sblim, 2010 40

41. Ⓒ sblim, 2010 HTML5 vs. Mobile Offline Support Canvas and Video GeoLocation API Advanced Forms Storage API 41

42. Ⓒ sblim, 2010 [Ref.] Useful site for HTML5  http://www.w3.org/html/wg http://www.w3.org/html/wg  http://webstandards.or.kr/html5 http://webstandards.or.kr/html5  http://html5rocks.com http://html5rocks.com  http://html5test.com http://html5test.com  http://html5doctor.com http://html5doctor.com  http://html5demos.com http://html5demos.com  http://www.html5video.org http://www.html5video.org  http://html5gallery.com http://html5gallery.com  http://www.diveintohtml5.org http://www.diveintohtml5.org 42