HTML 5 Overview sblim 2010 1 Table of
HTML 5 Overview 숙명여자대학교 임순범 Ⓒsblim, 2010 1
Table of Contents l l l History of Web HTML 5 History HTML 5 Key Features Standard & Web Development Mobile & HTML 5 정보과학회 MOBAS 워크샵 2010. 10 일부 PPT 자료제공 : 이승윤 팀장, ETRI Ⓒsblim, 2010 2
Ⓒsblim, 2010 Source: http: //channy. creation. net 3
History of Web WWW Ⓒsblim, 2010 4
Hyper. Text l 1965, Nelson Hyper. Card l 1987 Apple Ⓒsblim, 2010 5
World Wide Web l 1990, CERN u Tim Berners-Lee “Information Management: A Proposal” Tim Berners-Lee, CERN March 1989, May 1990 Ⓒsblim, 2010 6
Mosaic Web Browser l 1993, Marc Andreessen & Eric Bina u NCSA, Univ. of Illinois Ⓒsblim, 2010 7
WWW Consortium l 1994, http: //www. w 3 c. org Ⓒsblim, 2010 8
Web Browsers 1 st Stage l Netscape u u l 1994~1997 1. 0~4. 8 1998 오픈소스 발표 v 4. 0 2000 Mozilla 기반 2007 AOL v 7. 0 Microsoft u u l v 1. 0 ~ 1997 v 4. 0 v 5. 0, 2001 v 6. 0 v 7. 0, 2009 v 8. 0, v 9. 0 치열한 경쟁 u u Ⓒsblim, 2010 1995 1999 2008 2010 비표준 태그 크로스 브라우징 반독점금지법, 2000 미 대법원 9
Web Browsers 2 nd Stage 1996 Opera, Norway l 2002 Mozilla (2007 Netscape 9. 0) l 2004 Firefox (Phoenix, Firebird) l 2003 Safari l 2008 Chrome l Ⓒsblim, 2010 10
Development of Web Ⓒsblim, 2010 11
HTML 5 History HTML Ⓒsblim, 2010 12
HTML versions l l l l 1991, HTML 1. 0 (Berners-Lee) 1995, HTML 2. 0 (IETF) 1997, HTML 3. 2 (W 3 C) 1997, HTML 4. 0 (W 3 C) 1999, HTML 4. 01 (W 3 C) 2000, XHTML 1. 0 (W 3 C) ? ? , XHTML 2. 0 § Ⓒsblim, 2010 Xform, Xframe, DOM대신 XML event, RDFa, 일부요소 추가 13
Why “new HTML” ? u u Fail of XHTML 2 Developer Productivity Browser Compatibility Rich Web functions: Flex, Silverlight, AIR Now, Web is a Platform Web on Everything Ⓒsblim, 2010 14
Web Platform is Accelerating Ⓒsblim, 2010 15
Key Developer Challenges Ⓒsblim, 2010 16
WHATWG l WHAT Working Group u u u l Web Hypertext Application Technology Open Community, 2004 W 3 C는 유료 회원에게만 개방 Developing u Web Form 2. 0, Web Application 1. 0 Ⓒsblim, 2010 17
New Activities on W 3 C, 2005 l Web Application Format WG § l Web Form 2. 0, Widget, etc. Web API WG § XMLHttp. Request, DOM 3, File Upload, etc. HTML WG created, 2007 § Ⓒsblim, 2010 600+ invited experts, open mailing-list 18
HTML 5 Key Features Extension of HTML + Add “Rich Web Application” Ⓒsblim, 2010 19
l HTML의 발전 역사 Ⓒsblim, 2010
What is “HTML 5” ? 새로운 마크업 구조 + {Canvas, Web Storage, Drag&Drop, Microdata, …} Ⓒsblim, 2010 21
HTML 5, Structure DOCTYPE HTML Ⓒsblim, 2010 <!DOCTYPE html> <head> <meta charset="UTF-8”> HTML 5 24
l <iframe> l l <iframe src =”파일주소” width=”폭” height=”높이” name=”이름”> </iframe> <figure> <figcaption> <figure> <p>멀티미디어 배움터 2. 0</p> <img src="multi. jpg" alt="책표지" width="70"> <figcation>[그림 1] 책 소개</figcaption> </figure> Ⓒsblim, 2010 <a href=”…” target=”intro”> <iframe name=”intro”> 25
HTML 5, Web. Form 2 l INPUT TYPES <input <input <input Ⓒsblim, 2010 type="search"> type="tel"> type="email"> type="url"> type="number"> type="datetime"> type="date"> type="month"> type="week"> type="time"> type="color"> l ATTRIBUTES placeholder required autofocus autocomplete min max step pattern. . . 26
Ⓒsblim, 2010 27
HTML 5, Audio & Video <video width="xx" height="yy"> <source src="file. ogg" type="video/ogg"></source> <source src="file. mp 4" type="video/mp 4"></source> </video> <video controls autobuffer autoplay poster="img. jpg"> Ⓒsblim, 2010 28
애플리케이션 개발을 위한 API l l l l 드래그앤 드롭(Drag & Drop) API 오프라인 웹 어플리케이션(Offline Web Applications) API 웹 스토리지(Web Storage) API 인덱스드 데이터베이스(Indexed Database) API 파일(File) API 웹 소켓(Web Sockets) API 웹 메세징(Web Messaging) API 위치정보(Geo-Location) API Ⓒsblim, 2010 30
HTML 5, Canvas u CANVAS 2 D (API) § § § § Ⓒsblim, 2010 paths (lines & strokes) Fills Gradients Shadows Text Bitmaps Manipulation Animation 31
HTML 5, Geo-Location Ⓒsblim, 2010 32
HTML 5, Web Sockets Ⓒsblim, 2010 33
HTML 5, Web. GL & SVG Ⓒsblim, 2010 34
Standard & Web Development HTML 5 Standard Service Model Ⓒsblim, 2010 35
HTML Events Source: http: //channy. creation. net Ⓒsblim, 2010 36
W 3 C Standards (in draft) http: //www. w 3. org/TR/html 5/ Ⓒsblim, 2010 37
HTML 5, milestone u u u u 2007 -05 HTML 5 & Web Forms 2. 0 specs adopted as basis for review 2007 -11 HTML Design Principles 2008 -02 HTML 5 First Public Working Draft 2011 -05 HTML 5 Last Call Working Draft 2013 -08 HTML 5 Candidate Recommendation 6 2014 -01 HTML 5 Proposed Recommendation 2014 -04 HTML 5 Recommendation Ⓒsblim, 2010 38
Mobile & HTML 5 Mobile Web Ⓒsblim, 2010 39
Ⓒsblim, 2010 40
HTML 5 vs. Mobile l l l Offline Support Canvas and Video Geo. Location API Advanced Forms Storage API Ⓒsblim, 2010 41
![[Ref. ] Useful site for HTML 5 u u u u u http: //www.](http://slidetodoc.com/presentation_image_h2/7d6e425f337c59bc95bcae416ca7a07d/image-42.jpg "[Ref. ] Useful site for HTML 5 u u u u u http: //www.")
[Ref. ] Useful site for HTML 5 u u u u u http: //www. w 3. org/html/wg http: //webstandards. or. kr/html 5 http: //html 5 rocks. com http: //html 5 test. com http: //html 5 doctor. com http: //html 5 demos. com http: //www. html 5 video. org http: //html 5 gallery. com http: //www. diveintohtml 5. org Ⓒsblim, 2010 42
- Slides: 42
