Download presentation
Presentation is loading. Please wait.
1
HTML5 Overview 숙명여자대학교 임순범
2
Table of Contents History of Web HTML5 History HTML5 Key Features
Standard & Web Development Mobile & HTML5 정보과학회 MOBAS 워크샵 일부 PPT 자료제공 : 이승윤 팀장, ETRI
3
Source: http://channy.creation.net
4
History of Web WWW
5
HyperText 1965, Nelson HyperCard 1987 Apple
6
World Wide Web 1990, CERN Tim Berners-Lee
“Information Management: A Proposal” Tim Berners-Lee, CERN March 1989, May 1990
7
Mosaic Web Browser 1993, Marc Andreessen & Eric Bina
NCSA, Univ. of Illinois
8
WWW Consortium 1994,
9
Web Browsers 1st Stage Netscape Microsoft 치열한 경쟁 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 미 대법원
10
Web Browsers 2nd Stage 1996 Opera, Norway 2002 Mozilla
(2007 Netscape 9.0) 2004 Firefox (Phoenix, Firebird) 2003 Safari 2008 Chrome
11
Development of Web
12
HTML5 History HTML
13
HTML versions 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
Why “new HTML” ? Now, Web is a Platform Fail of XHTML2
Developer Productivity Browser Compatibility Rich Web functions: Flex, Silverlight, AIR Now, Web is a Platform Web on Everything
15
Web Platform is Accelerating
16
Key Developer Challenges
17
WHATWG WHAT Working Group Developing
Web Hypertext Application Technology Open Community, 2004 W3C는 유료 회원에게만 개방 Developing Web Form 2.0, Web Application 1.0
18
New Activities on W3C, 2005 HTML WG created, 2007
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
19
Extension of HTML + Add “Rich Web Application”
HTML5 Key Features Extension of HTML + Add “Rich Web Application”
20
HTML의 발전 역사
21
What is “HTML5” ? 새로운 마크업 구조 + {Canvas, Web Storage, Drag&Drop, Microdata, …}
22
HTML5 언어의 특징 HTML5의 방향 마크업에 보다 의미를 부여, 스타일은 분리하도록 CSS3 활용
플러그인 대신 웹 표준 적용하도록 SVG, MathML 지원 인터랙션 개발을 위해 자바스크립트를 지원 웹 애플리케이션의 개발을 위하여 다양한 API를 제공 특히 위치관련 및 오프라인 등 모바일 환경까지 고려한 API 제공
23
(1) 강화된 마크업 요소 의미 부여 가능한 구조적 마크업 요소 다양하고 편리한 웹 폼(WebForm) 입력 기능
<header> <nav> <footer> <article> <aside> <section> 의미 부여 가능한 구조적 마크업 요소 페이지 단위의 문서 구조를 표현 다양하고 편리한 웹 폼(WebForm) 입력 기능 편리한 UI 개발을 위해 Form 기능 대폭 개선 <input> 요소에 date, number, color 등 각종 type 추가 웹 미디어 기능의 강화 <video> 요소와 <audio> 요소 <canvas> 요소: 래스터 그래픽스 그리기 기능 SVG(Scalable Vector Graphics): 벡터 그래픽스 처리 MathML 언어: 수식의 의미와 모양까지 표현
24
HTML5, Structure DOCTYPE HTML HTML5 <!DOCTYPE html>
<head> <meta charset="UTF-8”>
25
<figure> <figcaption>
<iframe> <iframe src =”파일주소” width=”폭” height=”높이” name=”이름”> </iframe> <figure> <figcaption> <a href=”…” target=”intro”> <iframe name=”intro”> <figure> <p>멀티미디어 배움터 2.0</p> <img src="multi.jpg" alt="책표지" width="70"><br> <figcation>[그림 1] 책 소개</figcaption> </figure>
26
HTML5, WebForm2 INPUT TYPES ATTRIBUTES <input type="search">
<input type="tel"> <input type=" "> <input type="url"> <input type="number"> <input type="datetime"> <input type="date"> <input type="month"> <input type="week"> <input type="time"> <input type="color"> ATTRIBUTES placeholder required autofocus autocomplete min max step pattern ...
28
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">
29
사용 중단 권고 CSS 대체가능한 요소 웹접근성에 지장있는 요소 혼란 야기 요소
<font> <big> <center> <s> <u> <b> <strike> … 웹접근성에 지장있는 요소 <frame> 혼란 야기 요소 <applet> <acronym>
30
(2) CSS3의 완전 지원 스타일시트(Stylesheet) Cascading Style Sheet
웹 문서의 외형 스타일을 지정하는 언어 HTML 문서에는 일반적으로 CSS사용 1996 CSS1, 1998 CSS2, 2005년 이후 CSS3는 모듈별로 개발 중 HTML5에서는 CSS1, CSS2, CSS3까지 완전히 지원 기존 CSS는 주로 텍스트, 배경 및 색상, 목록, 박스모델 등 속성 CSS3에는 더욱 다양한 스타일 지정 기능을 포함
31
CSS3의 다양한 기능 박스의 모서리 처리, 그림자 효과, 다단(Multi-column) 지정, 2D/3D 기하변환, 텍스트의 그림자 등 효과 설정 폰트 지정 2D/3D 변환: translate(), rotate(), scale(), skew(), … 다단 속성: column-count, column-gap, column-width, 장면 변환(Transition), 애니메이션, 사용자 인터페이스 예제 화면 박스의 모서리 처리, 그림자 효과, 다단(multi-column) 지정, 2D/3D 기하변환, 텍스트의 그림자 등 효과
32
(3) 웹 어플리케이션 개발을 위한 자바스크립트 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
33
HTML5, Canvas CANVAS 2D (API) paths (lines & strokes) Fills Gradients
Shadows Text Bitmaps Manipulation Animation
34
HTML5, Geo-Location
35
HTML5, Web Sockets
36
HTML5, WebGL & SVG
37
Standard & Web Development
HTML5 Standard Service Model
38
HTML Events Source:
39
W3C Standards ( 확정)
40
HTML5, milestone HTML5 & Web Forms 2.0 specs adopted as basis for review HTML Design Principles HTML5 First Public Working Draft HTML5 Last Call Working Draft HTML5 Candidate Recommendation 6 HTML5 Proposed Recommendation HTML5 Recommendation
41
Mobile & HTML5 Mobile Web
43
HTML5 vs. Mobile Offline Support Canvas and Video GeoLocation API
Advanced Forms Storage API
44
[Ref.] Useful site for HTML5
![[Ref.] Useful site for HTML5](http://slidesplayer.org/slide/14291625/89/images/44/%5BRef.%5D+Useful+site+for+HTML5.jpg)
Similar presentations
