Ⓒ sblim, 2010 html5 overview 숙명여자대학교 임순범 1. Ⓒ sblim, 2010 table of contents...
Post on 25-Dec-2015
221 Views
Preview:
TRANSCRIPT
Ⓒ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
Ⓒsblim, 2010 Ⓒsblim, 2010
HyperText
1965, Nelson
HyperCard
1987 Apple
5
Ⓒsblim, 2010 Ⓒsblim, 2010
World Wide Web
1990, CERN Tim Berners-Lee
6
“Information Management: A Proposal”Tim Berners-Lee, CERNMarch 1989, May 1990
Ⓒsblim, 2010 Ⓒsblim, 2010
Mosaic Web Browser
1993, Marc Andreessen & Eric Bina NCSA, Univ. of Illinois
7
Ⓒsblim, 2010 Ⓒsblim, 2010
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
Ⓒsblim, 2010 Ⓒsblim, 2010
Web Browsers 2nd Stage
1996 Opera, Norway 2002 Mozilla
(2007 Netscape 9.0) 2004 Firefox (Phoenix, Firebird) 2003 Safari 2008 Chrome
10
Ⓒsblim, 2010 Ⓒsblim, 2010
Development of Web
11
Ⓒsblim, 2010
HTML5 HistoryHTML5 History
HTML
12
Ⓒsblim, 2010 Ⓒ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, 일부요소 추가
Ⓒsblim, 2010 Ⓒsblim, 2010
Why “new HTML” ?
Fail of XHTML2 Developer Productivity Browser Compatibility Rich Web functions: Flex, Silverlight, AIR
Now, Web is a PlatformWeb on Everything
14
Ⓒsblim, 2010 Ⓒsblim, 2010
Web Platform is Accelerating
15
Ⓒsblim, 2010 Ⓒsblim, 2010
Key Developer Challenges
16
Ⓒsblim, 2010 Ⓒsblim, 2010
WHAT Working Group Web Hypertext Application Technology Open Community, 2004 W3C 는 유료 회원에게만 개방
Developing Web Form 2.0, Web Application 1.0
17
WHATWG
Ⓒsblim, 2010 Ⓒ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
Ⓒsblim, 2010
HTML5 HTML5 Key Key FeaturesFeatures
Extension of HTML +Add “Rich Web Application”
19
Ⓒsblim, 2010 Ⓒsblim, 2010
What is “HTML5” ?
20
새로운 마크업 구조 + {Canvas, Web Storage, Drag&Drop, Microdata, …}
Ⓒsblim, 2010 Ⓒsblim, 2010
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
Ⓒsblim, 2010 Ⓒsblim, 2010
HTML5, Geo-Location
24
Ⓒsblim, 2010 Ⓒsblim, 2010
HTML5, Web Sockets
25
Ⓒsblim, 2010 Ⓒsblim, 2010
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
Ⓒsblim, 2010 Ⓒsblim, 2010
HTML5, Canvas
CANVAS 2D (API) paths (lines & strokes) Fills Gradients Shadows Text Bitmaps Manipulation Animation
27
Ⓒsblim, 2010 Ⓒsblim, 2010
HTML5, WebGL & SVG
28
Ⓒsblim, 2010
Standard & Standard & Web Web
DevelopmentDevelopment
HTML5 StandardService Model
29
Ⓒsblim, 2010 Ⓒsblim, 2010
HTML Events
30
Source: http://channy.creation.net
Ⓒsblim, 2010 Ⓒsblim, 2010
W3C Standards (in draft)
31
http://www.w3.org/TR/2010/WD-html5-20100624/
Working Draft 25 May 2011
Ⓒsblim, 2010 Ⓒ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 2012-07 HTML5 Candidate Recommendation 2014-01 HTML5 Proposed Recommendation 2014-04 HTML5 Recommendation
32
Ⓒsblim, 2010 Ⓒsblim, 2010
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
Ⓒsblim, 2010 Ⓒsblim, 2010
Web Development
1990, early stage
웹 문서 시대 : 웹문서 내에 프로그램 코드 혼재 웹 표준 시대 : MVC(Model, View, Control) 구분 웹 서버에 종속적
34Source: http://channy.creation.net
Ⓒsblim, 2010 Ⓒsblim, 2010
2000s, Web2.0
RIA 환경 : 웹문서 대신 데이터만 송수신 , 예 , JSON 아직 웹서버에 종속적 , 독립적인 앱 개발 불가능
35Source: http://channy.creation.net
Ⓒsblim, 2010 Ⓒsblim, 2010
2010s, HTML5
서버와 독립적인 웹 응용 개발이 가능 : 오프라인 , 로컬 DB 기능
RIA 에서 UX 반영의 확대 : Canvas, D&D, GeoLoc, file API, … 분산 파일 시스템도 가능 : RESTful
36Source: http://channy.creation.net
Ⓒsblim, 2010
Mobile & HTML5Mobile & HTML5
Mobile Web
37
Ⓒsblim, 2010 Ⓒsblim, 2010 38
Ⓒsblim, 2010 Ⓒsblim, 2010
HTML5 vs. Mobile
Offline Support Canvas and Video GeoLocation API Advanced Forms Storage API
39
Ⓒsblim, 2010 Ⓒsblim, 2010
HTML5 in Mobile browser
40
Ⓒsblim, 2010 Ⓒsblim, 2010
[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
top related