차세대 웹 플랫폼과 HTML5 동향 Jonghong Jeon ETRI, SRC Email: hollobit@etri.re.kr Blog: http://mobile2.tistory.com http://twitter.com/hollobit http://www.etri.re.kr
2011.8.6
Growth of Web Sites Total Sites Across All Domains August 1995 - November 2011 525,998,433 sites 3 http://news.netcraft.com/archives/2011/11/07/november-2011-web-server-survey.html#more-5091
20 Presents the WWW has given us q Vast amounts of digital information q Organized access. q Communication. q Multimedia sharing q Entertainment. q E-commerce. q Real-time news. 4
Online Activities, 2000 ~ 2009 5 http://www.pewinternet.org/trend-data/online-activities-20002009.aspx
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 HTTP 1.0 (IETF RFC1945) HTTP 1.1 (RFC2616) RDF OWL XML SOAP 1.2 Semantic Web Concept 7
Evolution of World Wide Web 8
Evolution of World Wide Web 9 http://evolutionofweb.appspot.com/
Evolution of World Wide Web q 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 (스마트 디바이스 급성장) 11 Source: http://totoro4.wordpress.com/2011/07/08/smart-device-leads-change-device-side/
Emerging N-Screen environment q N스크린은 하나의 콘텐츠를 스마트폰, PC, TV 등 여러 단말기를 통해 이용할 수 있도록 하는 서비스 q N스크린은 연결성(connectivity), 이동성(portability), 통합성(integration)이라는 세 가지 특성을 갖는 미디어 이용과 콘텐츠 소비 환경 q N스크린에서 N 은 어떤 수도 들어갈 수 있는 불특정 자연수 (Natural Number)를 가리키며 스크린 은 이를 네트워크로 연결되 는 여러 대의 단말기 장치를 의미 12
Fragmentation is a big problem q Network Fragmentation q Service Fragmentation q Device Fragmentation q Platform Fragmentation q Screen Fragmentation q Application Fragmentation q Content Fragmentation 13 http://is.gd/yxvtj7
Fragmentation is a big problem Device Content Screen Fragmentations Application Platform Service 14
Solution? Device Content Screen Fragmentations Application Platform Service 15
Evolution of Web Platform Technology
Evolution of Web Ecosystem q Web of Documents q Web of Services q Web of Devices q Web of Data q Web of Things q Web of Human 17
Evolution of Web Platform Open API Search Mail Office Image Sharing Video Sharing Shopping Commerce Book Map News Payment Cloud Ads SNS 18
Online Activities, 2000 ~ 2009 19 http://www.pewinternet.org/trend-data/online-activities-20002009.aspx
Growth of Open API 20
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 Architecture 22
Web Platform Layer User Interaction JavaScript + Web APIs Presentation HTML 5 & CSS 3 Transport HTTP Resources Web Resource URIs (Service, Content, Site) 23
Next Generation Web - HTML5
HTML5 25
Hype Cycle for Web and User Interaction Technologies, 2011 26
주목해야 할 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 Roadmap 33
HTML5 Roadmap q 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 Update q 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 developers 35
HTML WG Update q 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 editor q 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 Roadmap q 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 LC1 q 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 support 40
[1] Multi Device & platform support 41
[1] Multi Screen & resolution support 42
[1] Multi Device & Screen Supprt http://colly.com 43
[2] Platform Fragmentation 44
[2] Platform Fragmentation 45
[2] Platform Fragmentation Portability Hyper Links Discoverability Distribution & Market Siz e Usage of Device Capabiliti es Supportability & Upgrade ability Entry Costs Revenue Share 46 Native App 특정 모바일 단말 및 플랫폼에 맞게 개발되며, 다운로드 및 설치가 되어야 함 각 플랫폼에 포팅해야 함(iPhone, BlackBerry, Android, Pal m and the list goes on ) 외부 링크를 통한 브라우저 호출은 가능하지만, 내부 링크 는 불가능하고, 앱 간 호출은 보안 제약이 있음 앱스토어 홍보와 마케팅을 위한 비용이 필요 플랫폼과 단말의 종류에 한계가 있으며, 상위 부분에 있는 것과 하위 내용과 차별화 됨 단말의 모든 기능 제어 가능(GPS, camera, voice, RFID, a ddress book, calendar, etc.) 앱이 다운로드 되고 나면, 지원에 어려움이 있음. 버그가 있는 부분에 대해서는 다시 등록하고 모두에게 재다운로 드 받으라고 해야 함 앱스토어 개발자 등록 비용이 필요 (Apple charges develo pers $99 and enterprises $299, RIM charges $200 ) 앱스토어를 통해 판매시 수익 공유 (Apple takes 30%, RI M takes 20%) HTML5 Web Application 브라우저를 통해 접속하며, 설치와 업데이트 불필요 표준 웹만 개발하면 어디서나 볼 수 있음 어떤 부분이건 링크로 연결 가능 검색 사이트, 이메일 홍보, 트위터 링크 등으로 홍보 가능 누구든 접속 가능 현재는 불가능 (HTML와 Device API 표준화를 통해 2011년부터 가능할 것으로 전망) 사이트를 수정하면 언제든 바로 업데이트 없음 모두 내꺼 User Experience 풍부한 사용자 인터페이스 제공이 가능 HTML/CSS/JavaScript 등의 기능에 의해 한정됨 Performance Offline Browsing 바이너리 코드로 실행되므로 속도가 빠름 로컬 저장소를 이용해 가능 네트웍을 거치며, 서버에서 제공되고, 브라우저 를 통해 처리되기에 성능 변동폭이 큼 HTML5의 App Cache 기능을 이용해 구현해야 지만 가능
47
[3] Rich Web Application q <video>, <audio> Flash 기반 사이트의 전환 YouTube, Vimeo, Scribd q 왜 HTML5인가? Search Friendly 호환성 (유무선 ) 접근성 성능 48 http://www.scribd.com/doc/30964170/scribd-in-html5 http://estima.wordpress.com/2010/05/07/scribd/
[3] Rich Web Application q ActiveX의 대체 Flash 기반 사이트의 전환 Video/Audio (multi) File Upload Graphics Canvas, 3D transition, SVG, WebGL, X3D 49
[4] Standards HTML5 CSS3 JS 50
[4] Standards - HTML5 지원 현황 q DeskTop q Mobile 51 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 New Standards Web App. API Device API Widget Hybrid Web New Platform & Browser Real time Web & Social Web Web Application Store Web Cloud Mobile Device & Platform War 54
[4] Web Application Architecture HTML5 (Web forms, Video/Audio, Canvas..) Web Application APIs (Web IDL, Web Socket, Web Worker, Web Database.) XML XMLHTTPRequest Widgets API Device APIs CSS (Calendar, Camera GPS, File,..) ECMASCript DOM HTTP + URI/IRI+ Unicode 55
[5] The Web as an application platform q Standards for Web Applications on Mobile: February 2011 current state and roadmap http://www.w3.org/2011/02/mobile-web-app-state.html 56
57
[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 Chances 59
[7] New Chances 위치기반서비스 q navigator.geolocation.getcurrentposition q 위치 기반 응용들 로컬 검색 지도 서비스 사용자 위치 트래킹 Geo Social 현재 위치 기반 서비스 60
[7] New Chances 성능 향상 웹 소켓과 XHR 비교 40배 61 http://bloga.jp/ws/jq/wakachi/mecab/wakachi.html
[7] New Chances UI 개선 q HTML5 의 새로운 input type들 Search, tel, url, email datetime, date, month, week, time, and datetime-local Number, range, Color q Mobile Safari (on the iphone)은 number, email, url 지원을 추가 q Chrome 5 beta 에서 placeholder attribute를 지원 62 <label for="email">email address</label> <input id= email type="email" placeholder="jonathan@example.com">
[7] New Chances Hybrid App Comparison: App Inventor, DroidDraw, Rhomobile, PhoneGap, Appcelerator, WebView, and AML 63 http://www.amlcode.com/2010/07/16/comparison-appinventor-rhomobile-phonegap-appcelerator-webview-and-aml/
[7] New Chances Web App Store q https://chrome.google.com/webstore 64
[7] New Chances Web App Store Client Device Devices Any Devices (PC, TV, Car, Tablet ) App Store Browser Browser Server Front Store Server Front Web Server Web App Store Web App Store Web App Store Native Appp Native App Native App Web App Cloud 65
[7] New Chances q Mobile Commerce q Mobile Search q Voice Browsing q Web on TV q Web 3D, Web GL q Augmented Reality q E-book q HTML5 Game q Web Store & Widget q Device APIs q Security & Privacy 66
Case - HTML5 & N-Screen 67
모바일 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과 차세대 웹 문제 다중 플랫폼을 지원하는 응용 개발 단말간 데이터 이동 및 심리스 서비스 지원 다중 단말의 식별과 지원 다양한 화면 사이즈를 지원하는 응용 개발 그래픽 처리, 3D 콘텐츠 표현 Video 및 Audio 콘텐츠 처리 Interactive한 처리 멀티 터치 등의 지원 오프라인 기능의 지원 디바이스 제어 콘텐츠 표준 호환성 검사 비동기적 처리, 쓰레드 관리, 전송 속도 개선 보다 고속처리 가능하며 판매용 앱이 필요하다면? 융합 서비스 지원 69 해결책 Web Application Cloud & Web Application HTTP UAProf, CSS MQ SVG, CSS, HTML5 HTML5 canvas, CSS, WebGL, X3D HTML5 video/audio JavaScript, CSS, HTML5 webforms HTML5 & Web event HTML5 (localstorage) Device APIs HTML/CSS Validation, mobileok XHR, WebWorker, WebSocket Hybrid Web App RESTful Web Services, LOD
너무 많은 기대를 하는 것은 아닌가?
우리가 바라는 HTML5 앱 모습 71
실제 구현 가능한 HTML5 앱 현실 72
그 결과를 받아본 고객의 표정 73
떼돈
좀 냉정해질 필요가 있다 좀 차분해질 필요가 있다 Source: http://try.powermapper.com/demo/statsversions.aspx
그냥 새로운 마크업 중 하나일 뿐.. 그리고 약간의 기회와 가능성일 뿐!!
Future Web Golden Age Smart devices 다양화 표준화 완료 Mobile Web Golden Age HTML5 Apps LTE 전국 서비스 2010 2011 2012 2013 hollobit@etri.re.kr 77
2012, 모바일 웹과 HTML5 전망 1. Cloud based Mobile Web 2. Mobile Web UI Framework 3. Cross Platform & Hybrid Web Application 4. JavaScript Library & Web Application API Standards 5. HTML5 Game & Mobile HTML5 Game 6. Web Store & Native Web App 7. HTML5 ebook & HTML5 services 8. Responsive Web & Responsive Ads 9. Web Operating System & RESTful WoT(Web of Things) 10.Web Signage 78
Conclusions HTML5과 차세대 웹 기술은 멀티디바이스와 N-screen 지원을 위한 유일한 대안으로 유무선 통합의 관점과 웹 표준 기반 디바이스 호환성의 중요성을 일깨우고 새로운 웹과 앱의 개발 기회, 새로운 수익 모델의 가능성, 그리고 많은 새로운 웹 경험의 편리함를 제공하는 출발점 앞으로의 미래는 어떻게 준비하고 시작하느냐에 달려 79
Refences & Resources q 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/html5 q 놀랄만큼 유용하고 재미있는 HTML5 모바일 앱 30개 - http://is.gd/e87hy q Detecting HTML5 Features - http://diveintohtml5.org/detect.html q 기타 참조 사이트 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 OR 81