1 / 42

The Evolution of HTML5: Key Features and History Overview

Explore the history, key features, and significance of HTML5 in web development. Learn about its evolution and developer challenges.

brunor
Download Presentation

The Evolution of HTML5: Key Features and History Overview

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 Overview 숙명여자대학교 임순범

  2. Table of Contents • History of Web • HTML5 History • HTML5 Key Features • Standard & Web Development • Mobile & HTML5 정보과학회 MOBAS 워크샵 2010.10 일부 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 • TimBerners-Lee “Information Management:A Proposal” Tim Berners-Lee,CERN March 1989, May1990

  7. Mosaic Web Browser • 1993, Marc Andreessen & Eric Bina • NCSA, Univ. of Illinois

  8. WWW Consortium • 1994, http://www.w3c.org

  9. 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 미 대법원

  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” ? • 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 • WHATWorking Group • Web Hypertext Application Technology • Open Community, 2004 • W3C는 유료 회원에게만 개방 • Developing • Web Form 2.0, Web Application 1.0

  18. 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

  19. 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) 입력 기능 • 편리한 UI 개발을 위해 Form 기능 대폭 개선 • <input> 요소에 date, number, color 등 각종 type 추가 • 웹 미디어 기능의 강화 • <video> 요소와 <audio> 요소 • <canvas> 요소: 래스터 그래픽스그리기 기능 • SVG(Scalable Vector Graphics): 벡터 그래픽스 처리 • MathML 언어: 수식의 의미와 모양까지 표현 <header> <nav> <article> <aside> <section> <section> <footer>

  24. HTML5, Structure <!DOCTYPE html> <html> <head> <meta charset="UTF-8”> DOCTYPE HTML  HTML5

  25. <iframe> • <iframe src =”파일주소” width=”폭” height=”높이” name=”이름”> </iframe> • <figure> <figcaption> • <a href=”…”target=”intro”> <figure> <p>멀티미디어 배움터 2.0</p> <img src="multi.jpg" alt="책표지" width="70"><br> <figcation>[그림 1] 책 소개</figcaption> </figure> <iframe name=”intro”>

  26. 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"> • ATTRIBUTES placeholder required autofocus autocomplete min max step pattern ...

  27. 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">

  28. 사용중단 권고 • CSS 대체가능한 요소 • <font> <big> <center> <s> <u> <b> <strike> … • 웹접근성에 지장있는 요소 • <frame> • 혼란 야기 요소 • <applet> <acronym>

  29. 애플리케이션개발을 위한 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

  30. HTML5, Canvas • CANVAS 2D (API) • paths (lines & strokes) • Fills • Gradients • Shadows • Text • Bitmaps • Manipulation • Animation

  31. HTML5, Geo-Location

  32. HTML5, Web Sockets

  33. HTML5, WebGL & SVG

  34. Standard & Web Development HTML5 Standard Service Model

  35. HTML Events Source: http://channy.creation.net

  36. W3C Standards (in draft) http://www.w3.org/TR/html5/

  37. 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-04 HTML5 Recommendation

  38. Mobile & HTML5 Mobile Web

  39. HTML5 vs. Mobile • Offline Support • Canvas and Video • GeoLocation API • Advanced Forms • Storage API

  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

More Related