Ⓒ sblim, 2010 html5 overview 숙명여자대학교 임순범 1. Ⓒ sblim, 2010 table of contents...

Ⓒsblim, 2010

HTML5 OverviewHTML5 Overview

숙명여자대학교 임순범

1

Ⓒsblim, 2010 Ⓒsblim, 2010

Table of Contents

History of Web HTML5 History HTML5 Key Features Standard & Web Development Mobile & HTML5

정보과학회 MOBAS 워크샵 2010.10

일부 PPT 자료제공 : 이승윤 팀장 , ETRI

2

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

Ⓒsblim, 2010

History of WebHistory of Web

WWW

4


HyperText

1965, Nelson

HyperCard

1987 Apple

5


World Wide Web

1990, CERN Tim Berners-Lee

6

“Information Management: A Proposal”Tim Berners-Lee, CERNMarch 1989, May 1990


Mosaic Web Browser

1993, Marc Andreessen & Eric Bina NCSA, Univ. of Illinois

7


WWW Consortium

1994, http://www.w3c.org

8

Ⓒsblim, 2010

Web Browsers 1st 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


Web Browsers 2nd Stage

1996 Opera, Norway 2002 Mozilla

(2007 Netscape 9.0) 2004 Firefox (Phoenix, Firebird) 2003 Safari 2008 Chrome

10


Development of Web

11

Ⓒsblim, 2010

HTML5 HistoryHTML5 History

HTML

12


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, 일부요소 추가


Why “new HTML” ?

Fail of XHTML2 Developer Productivity Browser Compatibility Rich Web functions: Flex, Silverlight, AIR

Now, Web is a PlatformWeb on Everything

14


Web Platform is Accelerating

15


Key Developer Challenges

16


WHAT Working Group Web Hypertext Application Technology Open Community, 2004 W3C 는 유료 회원에게만 개방

Developing Web Form 2.0, Web Application 1.0

17

WHATWG


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

Ⓒsblim, 2010

HTML5 HTML5 Key Key FeaturesFeatures

Extension of HTML +Add “Rich Web Application”

19


What is “HTML5” ?

20

새로운 마크업 구조 + {Canvas, Web Storage, Drag&Drop, Microdata, …}


HTML5, Structure

DOCTYPE

HTML HTML5

21

<!DOCTYPE html><html><head><meta charset="UTF-8”>

Ⓒsblim, 2010

HTML5, WebForm2 INPUT TYPES

<input type="search"><input type="tel"><input type="email"><input type="url"><input type="number"><input type="datetime"><input type="date"><input type="month"><input type="week"><input type="time"> <input type="color">

ATTRIBUTESplaceholderrequiredautofocusautocompleteminmaxsteppattern...

22

Ⓒsblim, 2010 Ⓒsblim, 2010 23


HTML5, Geo-Location

24


HTML5, Web Sockets

25


HTML5, Audio & Video

<video width="xx" height="yy">

<source src="file.ogg" type="video/ogg"></source>

<source src="file.mp4" type="video/mp4"></source>

</video>

<video controls autobuffer autoplay poster="img.jpg">

26


HTML5, Canvas

CANVAS 2D (API) paths (lines & strokes) Fills Gradients Shadows Text Bitmaps Manipulation Animation

27


HTML5, WebGL & SVG

28


HTML Events

30

Source: http://channy.creation.net


W3C Standards (in draft)

31

http://www.w3.org/TR/2010/WD-html5-20100624/

Working Draft 25 May 2011


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 2012-07 HTML5 Candidate Recommendation 2014-01 HTML5 Proposed Recommendation 2014-04 HTML5 Recommendation

32


HTML5, Korea

Mobile Web 2.0 Forum HTML5 Ad-hoc Group (2010.5~)

W3C Korea Office HTML5 Korean Interest Group (2010.10~)

http://www.w3.org/html/ig/ko/

33


Web Development

1990, early stage

웹 문서 시대 : 웹문서 내에 프로그램 코드 혼재 웹 표준 시대 : MVC(Model, View, Control) 구분 웹 서버에 종속적

34Source: http://channy.creation.net


2000s, Web2.0

RIA 환경 : 웹문서 대신 데이터만 송수신 , 예 , JSON 아직 웹서버에 종속적 , 독립적인 앱 개발 불가능



2010s, HTML5

서버와 독립적인 웹 응용 개발이 가능 : 오프라인 , 로컬 DB 기능

RIA 에서 UX 반영의 확대 : Canvas, D&D, GeoLoc, file API, … 분산 파일 시스템도 가능 : RESTful



HTML5 vs. Mobile

Offline Support Canvas and Video GeoLocation API Advanced Forms Storage API

39


HTML5 in Mobile browser

40


[Ref.] Useful site for HTML5

http://www.w3.org/html/wg http://webstandards.or.kr/html5 http://html5rocks.com http://html5test.com http://html5doctor.com http://html5demos.com http://www.html5video.org http://html5gallery.com http://www.diveintohtml5.org

41

Ⓒ sblim, 2010 html5 overview 숙명여자대학교 임순범 1. Ⓒ sblim, 2010 table of contents...

Documents