HTML5 Overview 숙명여자대학교 임순범
Table of Contents History of Web HTML5 History HTML5 Key Features Standard & Web Development Mobile & HTML5 정보과학회 MOBAS 워크샵 2010.10 일부 PPT 자료제공 : 이승윤 팀장, ETRI
Source: http://channy.creation.net
History of Web WWW
HyperText 1965, Nelson HyperCard 1987 Apple
World Wide Web 1990, CERN Tim Berners-Lee “Information Management: A Proposal” Tim Berners-Lee, CERN March 1989, May 1990
Mosaic Web Browser 1993, Marc Andreessen & Eric Bina NCSA, Univ. of Illinois
WWW Consortium 1994, http://www.w3c.org
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 미 대법원
Web Browsers 2nd Stage 1996 Opera, Norway 2002 Mozilla (2007 Netscape 9.0) 2004 Firefox (Phoenix, Firebird) 2003 Safari 2008 Chrome
Development of Web
HTML5 History HTML
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, 일부요소 추가
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
Web Platform is Accelerating
Key Developer Challenges
WHATWG WHAT Working Group Developing Web Hypertext Application Technology Open Community, 2004 W3C는 유료 회원에게만 개방 Developing Web Form 2.0, Web Application 1.0
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
Extension of HTML + Add “Rich Web Application” HTML5 Key Features Extension of HTML + Add “Rich Web Application”
HTML의 발전 역사
What is “HTML5” ? 새로운 마크업 구조 + {Canvas, Web Storage, Drag&Drop, Microdata, …}
HTML5 언어의 특징 HTML5의 방향 마크업에 보다 의미를 부여, 스타일은 분리하도록 CSS3 활용 플러그인 대신 웹 표준 적용하도록 SVG, MathML 지원 인터랙션 개발을 위해 자바스크립트를 지원 웹 애플리케이션의 개발을 위하여 다양한 API를 제공 특히 위치관련 및 오프라인 등 모바일 환경까지 고려한 API 제공
(1) 강화된 마크업 요소 의미 부여 가능한 구조적 마크업 요소 다양하고 편리한 웹 폼(WebForm) 입력 기능 <header> <nav> <footer> <article> <aside> <section> 의미 부여 가능한 구조적 마크업 요소 페이지 단위의 문서 구조를 표현 다양하고 편리한 웹 폼(WebForm) 입력 기능 편리한 UI 개발을 위해 Form 기능 대폭 개선 <input> 요소에 date, number, color 등 각종 type 추가 웹 미디어 기능의 강화 <video> 요소와 <audio> 요소 <canvas> 요소: 래스터 그래픽스 그리기 기능 SVG(Scalable Vector Graphics): 벡터 그래픽스 처리 MathML 언어: 수식의 의미와 모양까지 표현
HTML5, Structure DOCTYPE HTML HTML5 <!DOCTYPE html> <head> <meta charset="UTF-8”>
<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>
HTML5, WebForm2 INPUT TYPES ATTRIBUTES <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"> ATTRIBUTES placeholder required autofocus autocomplete min max step pattern ...
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">
사용 중단 권고 CSS 대체가능한 요소 웹접근성에 지장있는 요소 혼란 야기 요소 <font> <big> <center> <s> <u> <b> <strike> … 웹접근성에 지장있는 요소 <frame> 혼란 야기 요소 <applet> <acronym>
(2) CSS3의 완전 지원 스타일시트(Stylesheet) Cascading Style Sheet 웹 문서의 외형 스타일을 지정하는 언어 HTML 문서에는 일반적으로 CSS사용 1996 CSS1, 1998 CSS2, 2005년 이후 CSS3는 모듈별로 개발 중 HTML5에서는 CSS1, CSS2, CSS3까지 완전히 지원 기존 CSS는 주로 텍스트, 배경 및 색상, 목록, 박스모델 등 속성 CSS3에는 더욱 다양한 스타일 지정 기능을 포함
CSS3의 다양한 기능 박스의 모서리 처리, 그림자 효과, 다단(Multi-column) 지정, 2D/3D 기하변환, 텍스트의 그림자 등 효과 설정 폰트 지정 규칙: @font-face 2D/3D 변환: translate(), rotate(), scale(), skew(), … 다단 속성: column-count, column-gap, column-width, 장면 변환(Transition), 애니메이션, 사용자 인터페이스 예제 화면 박스의 모서리 처리, 그림자 효과, 다단(multi-column) 지정, 2D/3D 기하변환, 텍스트의 그림자 등 효과
(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
HTML5, Canvas CANVAS 2D (API) paths (lines & strokes) Fills Gradients Shadows Text Bitmaps Manipulation Animation
HTML5, Geo-Location
HTML5, Web Sockets
HTML5, WebGL & SVG
Standard & Web Development HTML5 Standard Service Model
HTML Events Source: http://channy.creation.net
W3C Standards (2014.10.28 확정) http://www.w3.org/TR/html5/
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-10 HTML5 Recommendation
Mobile & HTML5 Mobile Web
HTML5 vs. Mobile Offline Support Canvas and Video GeoLocation API Advanced Forms Storage API
[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