Microsoft PowerPoint - HTML5-교육컨설팅.ppt

Size: px

Start display at page:

Download "Microsoft PowerPoint - HTML5-교육컨설팅.ppt"

동석 인
5 years ago
Views:

1 융합형 IT Specialist 인력양성교육 웹개발기술의변화방향 윤석찬 다음커뮤니케이션

2 HTML Timeline HTML5

3 리치웹기술의성장 과거의유산 웹브라우저전쟁및비표준웹브라우저 (IE6) 플러그인양산ActiveX, NS Plugin, Flash 웹 2.0 과웹애플리케이션 브로드밴드환경하에사용자참여기반의웹플랫폼성장 Ajax 기반의리치웹애플리케이션성장 ( 구글맵, 지메일 ) 현대적웹브라우저의기술혁신 ( 파이어폭스, 사파리, 크롬 ) 새로운트렌드 HTML5 기반리치웹애플리케이션제공 모바일및태블릿 OS에서적극이용가능

4 리치웹기술의현황 웹기반표준 PC O 모바일 O 태블릿 O 바이너리플러그인 PC O 모바일 X 태블릿 X

5 [ 현실 ] 현재웹표준을 100% 지원하는웹브라우저는없으며미래에도없다! 웹개발자들이존재하는이유

등기능을단계적으로향상시킴 단계적기능축소 (Graceful Degradation) 반대로기능을단계적으로축소하더라도중요한기능은수행되도록해야함.

6 웹개발의중요원칙 기술요소의분리 (Separation of Functions) 구조 (HTML), 표현 (CSS), 동작 (DOM Script) 의분리 점진적기능향상 (Progressive Enhancement) HTML 의기능을기반으로 CSS, JavaScript, Plugin 등기능을단계적으로향상시킴 단계적기능축소 (Graceful Degradation) 반대로기능을단계적으로축소하더라도중요한기능은수행되도록해야함. 하위및상위호환성 (Backward/Forward Compatibility) 웹브라우저별이전버전의기능을제공하면서도향후버전에탑재될미래표준에대한기능역시제공

7 초창기웹개발방식 (1990 년초반 ) CGI Plug-in Internet <html> <title> <?=$title?> </title> <body> <font size=2>hello! World</font> <?=mysql_query( SELECT name )?> </body> </html> DB DB

8 웹표준시대 (200 년대중반 ) MS.NET Spring Struts Plug-in Internet XHTML Structure Model View <! DOCTYPE XHTML > <title>$title</title> <body> <h1>hello, Wolrd</h1> </body> </html> DB DB CSS Layout Presentation body { font-size: 9pt;} h1 {color:blue;} DOM Script Behavior Function popup(url) { window.open(url); } Controller

9 Ajax 시대 (2000 년대후반 ) Internet Model DB DB Plug-in Structure Ajax OpenAPI View {"Name": "Cheeso", "Rank": 7} Presentation Behavior jquery Gears RubyOnRails Controller

10 소셜웹시대의웹개발 (2010 년 ) Plug-in Local Local Storage Storage Structure Ajax Internet RESTful NoSQL {"Name": "Cheeso", "Rank": 7} disk disk Presentation Behavior Cloud Computing

11 융합형 IT Specialist 인력양성교육 HTML5 와모바일웹변화 HTML5 and Mobile Web 윤석찬 다음커뮤니케이션

12 HTML5 표준의역사

13 HTML5 디자인원칙 호환성 기존의 HTML 문서를최대한지원, 단계적기능축소 (Graceful degradation), 기존기능재사용및엄격한잣대를대지않는것 유용성 실제웹개발자들이겪고있는가장중요한문제를순위에따라나누되문제점을분리해서독립적으로해결함. 상호호환성 브라우저엔진호환을위해최대한자세한스펙을기술하되복잡하지않고오류처리방법을꼭기술. 보편적접근성 미디어포맷독립성, 전세계언어지원, 웹접근성보장

14 1. 구조적마크업 <header> <article> <nav> <section> <aside> <footer>

15 2. Web Form <input type="datetime"> <input type="url"> <input type="range"> <input type="text" list="list"> <datalist id="list"> <option value="mr">... </datalist> And many more

16 3. 멀티미디어 비디오및오디오 멀티미디어서비스가주류콘텐츠로편입 거의모두플러그인기반으로제공되고있음 (c.f. Open Video) 브라우저에네이티브지원필요성 (c.f. OGG) Canvas 간단한 2D Graphics

17 Demo: Video, Canvas, WebGL

18 4. 오프라인지원및스토리지 데이터를클라이언트사이드에서저장필요 웹애플리케이션의오프라인기능지원필요 데이터베이스서비스지원 SQLite database 및 DOM storage api (key/value pairs) 구현브라우저 Firefox, Safari, Opera, Google Chrome and IE8

19 5. 웹워커 일반애플리케이션은 Thread와 Process를가짐 웹애플리케이션에동시실행가능성부여 오버로드가심한애플리케이션에서분리된 Thread로실행가능 Dedicated (think: bound to a single tab) Shared (shared among multiple windows in an origin) Persistent (run when the browser is closed ) 구현중 : Firefox 3.5, Safari and Google Chrome

20 그밖에주요웹표준 PNG 구현 CSS 2.1 및 CSS 3 3D API Selector API queryselector() Geolocation API

21 HTML5 Right now? Google.com Apple.com Mozilla.com html5gallery.com And many more

22 태블릿!= 데스크톱 OS

23 모바일 OS 가주목받는이유 왜모바일 OS 인가? 데스크톱 OS 가태블릿에서실패했기때문 모바일과데스크톱사이의영역을새롭게정의 인터넷기반의웹애플리케이션의성장 전혀새로운소프트웨어생태계주도 태블릿애플리케이션의구도 태블릿 OS 의네이티브개발환경 iphone OS, Android, WindowsPhone, Symbian 차세대웹표준기반개발환경 HTML5 (Audio, Video, Canvas, SVG, CSS3, WebSocket )

24 무엇이문제인가? Even Google was not rich enough to support all of the different mobile platforms from Apple s AppStore to those of the BlackBerry, Windows Mobile, Android and the many variations of the Nokia platform - Vic Gundotra, Google Engineering VP

25 모바일에서주요구현현황 Canvas Video/Audio WebGL SVG Workers

Computing disk disk Casandra Hbase Amazon AWS MS Azure HTML5 시대의웹프레임웍

26 Plug-in Structure Presentation Behavior Local Local Storage Storage Internet Ajax RESTful NoSQL {"Name": "Cheeso", "Rank": 7} Cloud Computing disk disk Casandra Hbase Amazon AWS MS Azure HTML5 시대의웹프레임웍 CSS3 WebGL HTML5 Canvas AppCache SelectorAPI Geolocation Drag&Drop Web Socket Web Storage

온라인기반애플리케이션 Hand of Greed http://brainiumstudios.

27 온라인기반애플리케이션 Hand of Greed Spin the Bottle Canvas 이용간단한멀티미디어기능구현가능 광고및온라인게임등활용

28 하이브리드형애플리케이션 Harmonious - 웹기반스케치패드 아이폰앱안에웹기반 UI 제공 네이티브 + 웹기반형태로앱스토어에서다운로드가능

오프라인애플리케이션 Monocle - 웹기반 ebook Reader http://monocle.

29 오프라인애플리케이션 Monocle - 웹기반 ebook Reader HTML5 기술 + 로컬저장소만이용한애플리케이션 App Cache 혹은앱스토어를통해배포가능

30 차세대빅뱅 : Chrome OS? 웹기반차세대태블릿 OS 웹앱스토어마켓 디바이스 API 지원

31 융합형 IT Specialist 인력양성교육 Q&A 및교육프로그램안내 윤석찬 다음커뮤니케이션

HTML5가 웹 환경에 미치는 영향 고 있어 웹 플랫폼 환경과는 차이가 있다. HTML5는 기존 HTML 기반 웹 브라우저와의 호환성을 유지하면서도, 구조적인 마크업(mark-up) 및 편리한 웹 폼(web form) 기능을 제공하고, 리치웹 애플리케이 션(RIA)을

HTML5가 웹 환경에 미치는 영향 고 있어 웹 플랫폼 환경과는 차이가 있다. HTML5는 기존 HTML 기반 웹 브라우저와의 호환성을 유지하면서도, 구조적인 마크업(mark-up) 및 편리한 웹 폼(web form) 기능을 제공하고, 리치웹 애플리케이 션(RIA)을 동 향 제 23 권 5호 통권 504호 HTML5가 웹 환경에 미치는 영향 이 은 민 * 16) 1. 개 요 구글(Google)은 2010년 5월 구글 I/O 개발자 컨퍼런스에서 HTML5를 통해 플러 그인의 사용이 줄어들고 프로그램 다운로드 및 설치가 필요 없는 브라우저 기반 웹 플랫폼 환경이 점차 구현되고 있다고 강조했다. 그리고 애플(Apple)은 2010년