차세대 웹 플랫폼과 HTML5 기술 동향

차세대 웹 플랫폼과 HTML5 동향Jonghong JeonETRI, SRCEmail: hollobit@etri.re.krBlog: http://mobile2.tistory.com http://twitter.com/hollobithttp://www.etri.re.kr

2011.8.6

Growth of Web Sites Total Sites Across All Domains August 1995 - November 2011 525,998,433 sites3 http://news.netcraft.com/archives/2011/11/07/november-2011-web-server-survey.html#more-5091

20 Presents the WWW has given usq Vast amounts of digital informationq Organized access.q Communication.q Multimedia sharingq Entertainment.q E-commerce.q Real-time news.4

Online Activities, 2000 ~ 2009 http://www.pewinternet.org/Trend-Data/Online-Activities-20002009.aspx5

World Wide Web (1989~1991)6

World Wide Web (1991 ~ 2005) Before W3C Wirelss Internet WS, SW UWS MWI Mobile RFID WAP 1.0 WAP 1.1 WAP 1.2 WAP 2.0 2005 URI XML-RPC RDF OWL HTTP 1.0 HTTP 1.1 (IETF RFC1945) (RFC2616) XML SOAP 1.2 Semantic Web Concept7

Evolution of World Wide Web8

Evolution of World Wide Web http://evolutionofweb.appspot.com/9

Evolution of World Wide Webq 1단계 (1989~1999) : 웹사이트의 시대, HTML과 WAP § HTML, URL, HTTP 라는 세 가지 기술에 기초한 웹 기술이 제안되고, 보다 나은 인간 중심의 정보처리 및 지식공유 등을 목표로 하는 단계q 2단계 (2000~2004) : XML과 웹서비스, 시맨틱 웹 § XML(eXtensible Markup Language)에 기반하며 인간 중심의 정보 처리뿐 아 니라 다양한 디바이스와 서비스, 멀티미디어를 연결하는 것을 목표로 하는 단계q 3단계 (2005~2009) : 웹 2.0, 웹 플랫폼 시대의 성장 § 구글, 아마존, 위키피디아 등의 성공과 함께 웹 산업을 제2의 전성기로 이 끌며 다양한 신규 서비스가 등장할 수 있는 기반을 마련q 4단계 (2010~현재) : 웹 앱의 시대, 모바일과 N-Screen 시대 § 스마트 폰 및 태블릿 등 다양한 모바일 기기들을 대상으로 HTML5와 Web API를 통해 한 단계 진화된 웹 응용 환경을 제공하며, 위치정보 및 소셜 정 보 등을 결합하는 통합 응용 플랫폼으로서 웹이 자리잡아 가는 단계10

Changes (스마트 디바이스 급성장) Source: http://totoro4.wordpress.com/2011/07/08/smart-device-leads-change-device-side/11

Emerging N-Screen environmentq N스크린은 하나의 콘텐츠를 스마트폰, PC, TV 등 여러 단말기를 통해 이용할 수 있도록 하는 서비스 q N스크린은 연결성(connectivity), 이동성(portability), 통합성(integration)이라는 세 가지 특성을 갖는 미디어 이용과 콘텐츠 소비 환경q N스크린에서 ‘N’은 어떤 수도 들어갈 수 있는 불특정 자연수 (Natural Number)를 가리키며 ‘스크린’은 이를 네트워크로 연결되 는 여러 대의 단말기 장치를 의미12

Fragmentation is a big problemq Network Fragmentationq Service Fragmentationq Device Fragmentationq Platform Fragmentationq Screen Fragmentationq Application Fragmentationq Content Fragmentation13 http://is.gd/yXvTj7

Fragmentation is a big problem Device Content Screen Fragmentations Application Platform Service14

Solution ? Device Content Screen Fragmentations Application Platform Service15

Evolution ofWeb Platform Technology

Evolution of Web Ecosystemq Web of Documentsq Web of Servicesq Web of Devicesq Web of Dataq Web of Thingsq Web of Human17

Evolution of Web Platform Open API Search Image Mail Office Sharing Video Shopping Book Sharing Commerce Map News Payment Cloud Ads SNS18

Online Activities, 2000 ~ 2009 http://www.pewinternet.org/Trend-Data/Online-Activities-20002009.aspx19

Growth of Open API20

API Billionaires Club, 2011 edition 13 billion API calls / day (May 2011) 10 billion API calls / month (January 2011) Over 260 billion objects stored in S3 (January 2011) 1.6 billion API-delivered stories / month (October 2010) 5 billion API calls / day (April 2010) 5 billion API calls / day (October 2009) 8 billion API calls / month (Q3 2009) 3 billion API calls / month (March 2009)21

Web Oriented Architecture22

Web Platform Layer User Interaction JavaScript + Web APIs Presentation HTML 5 & CSS 3 Transport HTTP Web Resource URIs Resources (Service, Content, Site)23

Next Generation Web- HTML5

HTML525

Hype Cycle for Web and User InteractionTechnologies, 201126

주목해야 할 10가지 모바일 기술 (2012~)27

HTML5 ?q HTML5로 통칭되는 요소는 HTML5 뿐 아니라 CSS3, 웹 어플리케 이션을 위한 JavaScript API 확장을 포함한 것 통칭되는 “HTML5” HTML5 CSS3 JavaScript 콘텐츠 내용과 형식을 표현 콘텐츠 표현 방법을 정의 각종 API를 통해 기능을 표현 § Web Storage § 문서구조의 상세화 § 표현 기능 모듈화 § Web Worker § 멀티미디어 § 웹 폰트 § Web Socket § 폼과 이벤트 등 § Geolocation API 서로 다른 다양한 브라우저 상에서 문서 구조의 의미를 명확히 하여 풍부한 기능과 자원을 제어할 수 일관된 표현 기능 제공, 효과적이고 편 디자인과 프로그램의 독립성을 확보 있는 로컬 어플리케이션 리한 표현 방식의 변경28

HTML5 ?29

HTML5의 주요 특징30

HTML5: Web Development to the next level http://slides.html5rocks.com/31

HTML5 표준화32

W3C HTML5 Roadmap33

HTML5 Roadmapq Progress: Last Call milestone reached § 25 May 2011. Published Last Call Working Draft of the HTML5 spec. § 03 August 2011. Ended Last Call (LC1) comment round for HTML5 spec.q Five other LCWDs published in May § Polyglot Markup: HTML-Compatible XHTML Documents (Eliot Graff) § Techniques for providing useful text alternatives (Steven Faulkner) § HTML Canvas 2D Context (Ian Hickson) § HTML+RDFa (Manu Sporny) § HTML Microdata (Ian Hickson)34

HTML WG Updateq Non-LC deliverables published in May § The HTML WG also maintains the following three non-normative documents, and published updates of them in May along with the LCWDs. § HTML to Platform Accessibility APIs Implementation Guide(Steven Faulkner) § HTML5 differences from HTML4 (Anne van Kesteren, Simon Pieters) § HTML Markup Language Reference (Michael[tm] Smith)q “HTML5: Edition for Web Authors” FPWD § In August, the HTML WG also published a First Public Working draft of the document HTML5: Edition for Web Authors. § auto-generated subset of the full HTML5 specification § not for user-agent implementors (omits UA implementation details) § targeted toward Web authors and Web developers35

HTML WG Updateq Last Call numbers: Bugs/Comments § 1550+ Last Call comments. For this Last Call round (LC1), the group received* about 1550 comments on the HTML5 spec (spec “bugs”) § More that 80% of comments already resolved. Of those ~1550 HTML5 Last-Call spec bugs, more than 80% (almost 1300) have already received a resolution from the HTML5 spec editor (Ian Hickson). § Less than 20% (about 280) of the Last Call spec bugs/comments for the HTML5 spec are still awaiting resolution by the editorq Post-LC1 numbers: Bugs/Comments § So far since the close of the LC1 round, the group has received almost 300 bugs/comments on the HTML5 spec § Of those ~300 HTML5 spec bugs, more than 80% (around 250) have already received a resolution from the HTML5 spec editor (Ian Hickson). § Less than 20% (about 50) of the remaining post-LC1 bugs/comments for the HTML5 spec are still awaiting resolution by the editor.36

HTML5 Roadmapq 13 open issues. WG now has 13 open issues awaiting resolution by chairs.q 11 closed issues flagged as “awaiting new information”. (10 against the HTML5 spec, one against the HTML+RDFa spec).q 9 open formal objections. (4 for the HTML5 spec, 5 for other specs; relate to text alternatives, RDFa, polyglot spec, ARIA, video poster, more).37

Deadlines for moving beyond LC1q The chairs announced a timeline for moving beyond LC1. § 31 Dec 2011. Editors must have all LC1 bugs resolved. § 14 Jan 2012. WG members last chance* to escalate any resolved bugs to issues. § 11 Feb 2012. WG members last chance* submit change proposals for open issues. § 10 Mar 2012. WG members last chance* to submit counter-proposals for issues. § 07 Apr 2012. Chairs must have all issues resolved (must have all decisions made). § 21 Apr 2012. Chairs announce resolution to go to the next step.q The HTML WG is scheduled to publish a Candidate Recommendation of the HTML5 spec in mid- to late-2012.38

Why HTML5 is important ?

[1] Multi Device support40

[1] Multi Device & platform support41

[1] Multi Screen & resolution support42

[1] Multi Device & Screen Supprt http://colly.com43

[2] Platform Fragmentation44

[2] Platform Fragmentation45

[2] Platform Fragmentation Native App HTML5 Web Application 특정 모바일 단말 및 플랫폼에 맞게 개발되며, 다운로드 브라우저를 통해 접속하며, 및 설치가 되어야 함 설치와 업데이트 불필요 각 플랫폼에 포팅해야 함(iPhone, BlackBerry, Android, PalPortability 표준 웹만 개발하면 어디서나 볼 수 있음 m and the list goes on…) 외부 링크를 통한 브라우저 호출은 가능하지만, 내부 링크Hyper Links 어떤 부분이건 링크로 연결 가능 는 불가능하고, 앱 간 호출은 보안 제약이 있음 검색 사이트, 이메일 홍보, 트위터 링크 등으로Discoverability 앱스토어 홍보와 마케팅을 위한 비용이 필요 홍보 가능Distribution & Market Siz 플랫폼과 단말의 종류에 한계가 있으며, 상위 부분에 있는 누구든 접속 가능e 것과 하위 내용과 차별화 됨Usage of Device Capabiliti 단말의 모든 기능 제어 가능(GPS, camera, voice, RFID, a 현재는 불가능 (HTML와 Device API 표준화를es ddress book, calendar, etc.) 통해 2011년부터 가능할 것으로 전망) 앱이 다운로드 되고 나면, 지원에 어려움이 있음. 버그가Supportability & Upgrade 있는 부분에 대해서는 다시 등록하고 모두에게 재다운로 사이트를 수정하면 언제든 바로 업데이트ability 드 받으라고 해야 함 앱스토어 개발자 등록 비용이 필요 (Apple charges develoEntry Costs 없음 pers $99 and enterprises $299, RIM charges $200 ) 앱스토어를 통해 판매시 수익 공유 (Apple takes 30%, RIRevenue Share 모두 내꺼 M takes 20%)User Experience 풍부한 사용자 인터페이스 제공이 가능 HTML/CSS/JavaScript 등의 기능에 의해 한정됨 네트웍을 거치며, 서버에서 제공되고, 브라우저Performance 바이너리 코드로 실행되므로 속도가 빠름 를 통해 처리되기에 성능 변동폭이 큼 HTML5의 App Cache 기능을 이용해 구현해야Offline Browsing 로컬 저장소를 이용해 가능 지만 가능46

[3] – Rich Web Applicationq <video>, <audio> § Flash 기반 사이트의 전환 • YouTube, Vimeo, Scribdq 왜 HTML5인가 ? § Search Friendly § 호환성 (유무선…) § 접근성 § 성능 http://www.scribd.com/doc/30964170/Scribd-in-HTML5 http://estima.wordpress.com/2010/05/07/scribd/48

[3] – Rich Web Applicationq ActiveX의 대체 § Flash 기반 사이트의 전환 – Video/Audio § (multi) File Upload § Graphics – Canvas, 3D transition, SVG, WebGL, X3D49

[4] – Standards HTML5 CSS3 JS50

[4] – Standards - HTML5 지원 현황q DeskTop q Mobile51 Source: http://html5test.com/results.html

[4] – Standards - HTML5 지원 현황52 Source: http://www.browserscope.org/

[4] – Standards - HTML5 지원 현황53 http://mobilehtml5.org/

[4] – Evolution of Web Application Tech. HTML5 Real time New Web Web App. API Platform New Hybrid & Standards Device Web & API Social Browser Web Widget Web Application Store Web Cloud Mobile Device & Platform War54

[4] – Web Application Architecture HTML5 (Web forms, Video/Audio, Canvas..) Web Application APIs (Web IDL, Web Socket, Web Worker, Web Database….) XMLHTTPRequest Widgets API Device APIs CSS (Calendar, XML ECMASCript Camera GPS, File,..) DOM HTTP + URI/IRI+ Unicode55

[5] – The Web as an application platformq Standards for Web Applications on Mobile: February 2011 current state and roadmap § http://www.w3.org/2011/02/mobile-web-app-state.html56

[6] – Open APIs & Mashup 13 billion API calls / day (May 2011) 10 billion API calls / month (January 2011) Over 260 billion objects stored in S3 (January 2011) 1.6 billion API-delivered stories / month (October 2010) 5 billion API calls / day (April 2010) 5 billion API calls / day (October 2009) 8 billion API calls / month (Q3 2009) 3 billion API calls / month (March 2009)58 58

[7] –New Chances59

[7] – New Chances – 위치기반서비스q navigator.geolocation.getCurrentPositionq 위치 기반 응용들 § 로컬 검색 § 지도 서비스 § 사용자 위치 트래킹 § Geo Social § 현재 위치 기반 서비스60

[7] – New Chances – 성능 향상 •웹 소켓과 XHR 비교 40배 http://bloga.jp/ws/jq/wakachi/mecab/wakachi.html61

[7] – New Chances – UI 개선q HTML5 의 새로운 input type들 § Search, tel, url, email § datetime, date, month, week, time, and datetime-local § Number, range, Colorq Mobile Safari (on the iPhone)은 number, email, url 지원을 추가q Chrome 5 beta 에서 placeholder attribute를 지원 <label for="email">Email address</label> <input id=“email” type="email" placeholder="jonathan@example.com">62

[7] – New Chances– Hybrid App Comparison: App Inventor, DroidDraw, Rhomobile, PhoneGap, Appcelerator, WebView, and AML http://www.amlcode.com/2010/07/16/comparison-appinventor-rhomobile-phonegap-appcelerator-webview-and-aml/63

[7] – New Chances– Web App Storeq https://chrome.google.com/webstore64

[7] – New Chances– Web App Store Any Devices Device Devices (PC, TV, Car, Tablet…) Client App Store Browser Browser Front Front Web Web Web Server Store Web App App App Server Server Store Store Store Native Native Web Cloud Native Appp App App App65

[7] – New Chancesq Mobile Commerceq Mobile Searchq Voice Browsingq Web on TVq Web 3D, Web GLq Augmented Realityq E-bookq HTML5 Gameq Web Store & Widgetq Device APIsq Security & Privacy66

Case - HTML5 & N-Screen67

모바일 HTML5의 가능성1. 새로운 웹 환경 : 새로운 모바일 웹, 유무선 통합2. Multi-Screen, Multi-Device, Multi-Platform의 해결사3. HTML5 Apps : HTML5 앱의 성장4. 애플/구글 지배로부터의 탈출구5. UI/UX 부분의 보완6. Rich Web : 보다 다양한 기능 제공, 주요 웹서비스 활용7. 광고 : 마이크로사이트, 상호작용형 HTML5 광고 시장8. 위치기반서비스 : 위치 기반 서비스9. 성능 향상 : 빠르고 뛰어난 웹 서비스 제공10. UI 개선 : 보다 편리한 UI 제공11. Hybrid App : 앱과 통합되는 환경12. 기타 새로운 기회들68

N-Screen의 종결자, HTML5과 차세대 웹문제 해결책다중 플랫폼을 지원하는 응용 개발 Web Application단말간 데이터 이동 및 심리스 서비스 지원 Cloud & Web Application다중 단말의 식별과 지원 HTTP UAProf, CSS MQ다양한 화면 사이즈를 지원하는 응용 개발 SVG, CSS, HTML5그래픽 처리, 3D 콘텐츠 표현 HTML5 canvas, CSS, WebGL, X3DVideo 및 Audio 콘텐츠 처리 HTML5 video/AudioInteractive한 처리 JavaScript, CSS, HTML5 webforms멀티 터치 등의 지원 HTML5 & Web event오프라인 기능의 지원 HTML5 (localstorage)디바이스 제어 Device APIs콘텐츠 표준 호환성 검사 HTML/CSS Validation, mobileOK비동기적 처리, 쓰레드 관리, 전송 속도 개선 XHR, WebWorker, WebSocket보다 고속처리 가능하며 판매용 앱이 필요하다면 ? Hybrid Web App융합 서비스 지원 RESTful Web Services, LOD69

너무 많은 기대를 하는 것은 아닌가 ?

우리가 바라는 HTML5 앱 모습71

실제 구현 가능한 HTML5 앱 현실72

그 결과를 받아본 고객의 표정73

떼돈

좀 냉정해질 필요가 있다좀 차분해질 필요가 있다 Source: http://try.powermapper.com/demo/statsversions.aspx

그냥 새로운 마크업 중 하나일 뿐…..그리고 약간의 기회와 가능성일 뿐 !!

Future Web Golden Age Mobile Web 다양화 Golden Age Smart devices 표준화 완료 전국 서비스 HTML5 Apps LTE 2010 2011 2012 2013 hollobit@etri.re.kr77

2012, 모바일 웹과 HTML5 전망1. Cloud based Mobile Web2. Mobile Web UI Framework3. Cross Platform & Hybrid Web Application4. JavaScript Library & Web Application API Standards5. HTML5 Game & Mobile HTML5 Game6. Web Store & Native Web App7. HTML5 ebook & HTML5 services8. Responsive Web & Responsive Ads9. Web Operating System & RESTful WoT(Web of Things)10.Web Signage78

Conclusions HTML5과 차세대 웹 기술은 멀티디바이스와 N-screen 지원을 위한 유일한 대안으로 유무선 통합의 관점과 웹 표준 기반 디바이스 호환성의 중요성을 일깨우고 새로운 웹과 앱의 개발 기회, 새로운 수익 모델의 가능성, 그리고 많은 새로운 웹 경험의 편리함를 제공하는 출발점 … 앞으로의 미래는 어떻게 준비하고 시작하느냐에 달려…79

Refences & Resourcesq HTML5 - http://www.w3.org/TR/html5/q HTML5 differences from HTML4 - http://www.w3.org/TR/html5-diff/q 실전 HTML5 가이드 - http://webstandards.or.kr/html5q 놀랄만큼 유용하고 재미있는 HTML5 모바일 앱 30개 - http://is.gd/e87hyq Detecting HTML5 Features - http://diveintohtml5.org/detect.htmlq 기타 참조 사이트 § http://kr.html5doctor.com § http://html5gallery.com § http://html5demos.com § http://html5rocks.com § http://html5games.com § http://www.html5video.org/ § http://www.chromeexperiments.com/ § http://html5test.com § http://html5readiness.com/80

Thank you For more discussion : JongHong Jeon (hollobit@etri.re.kr) +82-42-860-5333 Blog : http://mobile2.tistory.com/m http://twitter.com/hollobit OR81

http://a0.twimg.com	4
http://paper.li	4
http://twitter.com	4
http://hiworks.geurimsoft.com	1
http://us-w1.rockmelt.com	1

차세대 웹 플랫폼과 HTML5 기술 동향

by Jonathan Jeon

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 14

Statistics

차세대 웹 플랫폼과 HTML5 기술 동향 Presentation Transcript