mobile app, mobile web : introduction
DESCRIPTION
천안 북일고 학생들을 대상으로 2시간 정도 동안 HTML5과 웹을 중심으로 모바일 웹과 모바일 앱에 대한 개요를 수업 형식으로 소개했던 자료입니다. It's an introduction to the Mobile Web and Mobile App.TRANSCRIPT
모바일 앱, 모바일 웹 소개
Jonghong JeonETRI, SRC
Email: [email protected] Blog: http://mobile2.tistory.com
http://twitter.com/hollobit
http://www.etri.re.kr
11
Growth of Web Sites
Total Sites Across All DomainsAugust 1995 - November 2011
http://news.netcraft.com/archives/2011/11/07/november-2011-web-server-survey.html#more-5091
525,998,433 sites
12
20 Presents the WWW has given us
q Vast amounts of digital information
q Organized access.q Communication.q Multimedia sharingq Entertainment.q E-commerce.q Real-time news.
13
Online Activities, 2000 ~ 2009
http://www.pewinternet.org/Trend-Data/Online-Activities-20002009.aspx
15
WAP 1.0 WAP 1.1 WAP 2.0WAP 1.2
XML
XML-RPC
HTTP 1.0(IETF RFC1945)
SOAP 1.2
Semantic WebConcept
RDFOWL
MobileRFID
MWI
UWS
2005
URI
HTTP 1.1(RFC2616)
Before W3C Wirelss Internet WS, SW
World Wide Web (1991 ~ 2005)
16
History of WWW-KR WorkshopWWW-Forum은 1994년 7월초에 만들어진 WWW 관련 메일링 리스트입니다. 현재 가입 인원은 약 250여명으로 지난 10여개월 동안 국내 WWW의발전 및 보급에 많은 노력을 기울인 메일링 리스트입니다. WWW-Forum 에서 주로 다루는 내용은 Web server의 설치, Client의 설치 및 사용, 각종Web site 의 소개등 WWW에 관련된 전반적인 것을 다루고 있습니다. (제1회 워크샵 안내문)
등록비 : 학생 : 5,000원 , 일반 : 10,000 원
20
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를 통해 한 단계 진화된 웹 응용 환경을 제공하며, 위치정보 및 소셜 정보 등을 결합하는 통합 응용 플랫폼으로서 웹이 자리잡아 가는 단계
22
Changes (스마트 디바이스 급성장)
Source: http://totoro4.wordpress.com/2011/07/08/smart-device-leads-change-device-side/
23
Changes (무선네트워크 진화)
아날로그폰
아날로그음성통화
디지털폰
디지털음성통화
피처폰/스마트폰
IP 기반데이터서비스 시작
고성능 스마트폰
All IP 기반데이터서비스 확산
가상 스마트 기기
All IP 기반초고속 데이터서비스
아날로그망 GSM/CDMA망 WCDMA망 OFMDA망 ??
음성 통신 서비스의 시대 데이터 통신 서비스의 시대
24
Emerging N-Screen environment
q N스크린은 하나의 콘텐츠를 스마트폰, PC, TV 등 여러 단말기를통해 이용할 수 있도록 하는 서비스q N스크린은 연결성(connectivity), 이동성(portability), 통합성(integration)이라는 세
가지 특성을 갖는 미디어 이용과 콘텐츠 소비 환경
q N스크린에서 ‘N’은 어떤 수도 들어갈 수 있는 불특정 자연수(Natural Number)를 가리키며 ‘스크린’은 이를 네트워크로 연결되는 여러 대의 단말기 장치를 의미
29
Fragmentation is a big problem
q Network Fragmentationq Service Fragmentationq Device Fragmentationq Platform Fragmentationq Screen Fragmentationq Application Fragmentationq Content Fragmentation
http://is.gd/yXvTj7
33
Open Internet, Open WebSource: http://bit.ly/4OgbGV
인터넷은 수백만의 사심 없는 친절, 호기심과 신뢰로 구성Jonathan Zittrain
http://www.isoc.org/graphics/photos/newsweek.jpg
35
Evolution of Web Ecosystem
q Web of Documentsq Web of Servicesq Web of Devicesq Web of Dataq Web of Thingsq Web of Human
36
Evolution of Web Platform
Search
Cloud
OfficeImageSharing
VideoSharing
ShoppingCommerce Book
Map News Payment
Ads SNS
OpenAPI
OpenAPI
37
Online Activities, 2000 ~ 2009
http://www.pewinternet.org/Trend-Data/Online-Activities-20002009.aspx
39
API Billionaires Club, 2011 edition
5 billion API calls / day (April 2010)
1.6 billion API-delivered stories / month (October 2010)
5 billion API calls / day (October 2009)
8 billion API calls / month (Q3 2009)
3 billion API calls / month (March 2009)
13 billion API calls / day (May 2011)
Over 260 billion objects stored in S3 (January 2011)
10 billion API calls / month (January 2011)
40
Putting everything together
q Your Mashup = API calls + Data Manipulation + UI
User Request
User
Mashup website
Website 1 Website 2
API Call Data
Data presentation
API Call Data
Data Manipulation
42
Web Platform Layer
User Interaction
Presentation
Transport
Resources
JavaScript + Web APIs
HTML 5 & CSS 3
HTTP
Web Resource URIs(Service, Content, Site)
45
과거로 돌아가보자 !!
q1996년§ 대부분 Web 기반의 Application으로 변할 것이다.
q2006년§ Web 기반이 아닌 로컬 전용 기업용 Application을 만들자 !!
50
App vs. WebNative App
특정 모바일 단말 및 플랫폼에 맞게 개발되며, 다운로드및 설치가 되어야 함
HTML5 Web Application브라우저를 통해 접속하며, 설치와 업데이트 불필요
Portability각 플랫폼에 포팅해야 함(iPhone, BlackBerry, Android, Palm and the list goes on…)
표준 웹만 개발하면 어디서나 볼 수 있음
Hyper Links외부 링크를 통한 브라우저 호출은 가능하지만, 내부 링크는 불가능하고, 앱 간 호출은 보안 제약이 있음
어떤 부분이건 링크로 연결 가능
Discoverability 앱스토어 홍보와 마케팅을 위한 비용이 필요검색 사이트, 이메일 홍보, 트위터 링크 등으로홍보 가능
Distribution & Market Size
플랫폼과 단말의 종류에 한계가 있으며, 상위 부분에 있는것과 하위 내용과 차별화 됨
누구든 접속 가능
Usage of Device Capabilities
단말의 모든 기능 제어 가능(GPS, camera, voice, RFID, address book, calendar, etc.)
현재는 불가능 (HTML와 Device API 표준화를통해 2011년부터 가능할 것으로 전망)
Supportability & Upgradeability
앱이 다운로드 되고 나면, 지원에 어려움이 있음. 버그가있는 부분에 대해서는 다시 등록하고 모두에게 재다운로드 받으라고 해야 함
사이트를 수정하면 언제든 바로 업데이트
Entry Costs앱스토어 개발자 등록 비용이 필요 (Apple charges developers $99 and enterprises $299, RIM charges $200 )
없음
Revenue Share앱스토어를 통해 판매시 수익 공유 (Apple takes 30%, RIM takes 20%)
모두 내꺼
User Experience 풍부한 사용자 인터페이스 제공이 가능 HTML/CSS/JavaScript 등의 기능에 의해 한정됨
Performance 바이너리 코드로 실행되므로 속도가 빠름네트웍을 거치며, 서버에서 제공되고, 브라우저를 통해 처리되기에 성능 변동폭이 큼
Offline Browsing 로컬 저장소를 이용해 가능HTML5의 App Cache 기능을 이용해 구현해야지만 가능
53
Why Mobile Web [3] – Easy develop
q 만약 @@@ 앱을 만든다면 ?
§아이폰용으로 개발 (Object-C)§안드로이드용으로 개발 (Java)§ 윈도우 모바일용으로 개발 (C#)§ 삼성 바다용으로 개발 (C)§ 블랙베리용으로 개발 (Java)§ 팜용으로 개발 (HTML, CSS, JavaScript) § ….
61
HTML5 ?
q HTML5로 통칭되는 요소는 HTML5 뿐 아니라 CSS3, 웹 어플리케이션을 위한 JavaScript API 확장을 포함한 것
통칭되는 “HTML5”
HTML5콘텐츠 내용과 형식을 표현
CSS3콘텐츠 표현 방법을 정의
JavaScript각종 API를 통해
기능을 표현
문서 구조의 의미를 명확히 하여디자인과 프로그램의 독립성을 확보
서로 다른 다양한 브라우저 상에서일관된 표현 기능 제공, 효과적이고 편
리한 표현 방식의 변경
풍부한 기능과 자원을 제어할 수있는 로컬 어플리케이션
§ 문서구조의 상세화§ 멀티미디어§ 폼과 이벤트 등
§ 문서구조의 상세화§ 멀티미디어§ 폼과 이벤트 등
§ 표현 기능 모듈화§ 웹 폰트§ 표현 기능 모듈화§ 웹 폰트
§ Web Storage§ Web Worker§ Web Socket§ Geolocation API
§ Web Storage§ Web Worker§ Web Socket§ Geolocation API
67
HTML5 규격표준화경과
CSS1CSS1JavascriptJavascript
CSS2CSS2 CSS3CSS3
DOM1DOM1 DOM2DOM2 DOM3DOM3 DOM4DOM4
2010 2011
AJAXAJAXHTTPHTTP
CanavsCanavs Web WorkersWeb Workers AppCacheAppCache
W3C
Web App.
표준들
W3C
Web App.
표준들
XHR2XHR2
WebGLWebGLGeolocationGeolocation FileAPIFileAPI
WebFontWebFontAudio/VideoAudio/Video
Web formWeb form
q HTML5는 2007년 웹 어플리케이션 활성화와 함께 본격화
69
HTML5 표준화세부현황(W3C HTML WG)
q HTML5 표준화는 2014년 최종 표준 제정을 목표로 작업 중§ HTML WG에서는 2012년도 중반(늦어도 후반)까지는 후보 표준안
(Candidate Recommendation) 단계를 목표
Specification FPWD WD LCWD CR PR REC1 HTML5 2007 2010 2011.05 2012 Q2 2014 Q1 2014 Q22 HTML+RDFa 1.1 2009 2010 2011.05 2012 Q2 2014 Q1 2014 Q23 HTML Microdata 2009 2010 2011.05 2012 Q2 2014 Q1 2014 Q24 HTML Canvas 2D Context 2008 2010 2011.05 2012 Q2 2014 Q1 2014 Q2
5Polyglot Markup: HTML-CompatibleXHTML Documents
2010 2010 2011.05 2012 Q2 2014 Q1 2014 Q2
6HTML5: Techniques for providinguseful text alternatives
2010 2010 2011.05 2012 Q2 2014 Q1 2014 Q2
7HTML to Platform Accessibility APIsImplementation Guide
2011 2012.03 2012 Q1 2012 Q2 2014 Q1 2014 Q2
8 HTML5 differences from HTML4 2008 2011.05 2012 Q1 2012 Q2 2014 Q1 2014 Q29 HTML5: Edition for Web Authors 2011 2011.08 2012 Q1 2012 Q2 2014 Q1 2014 Q210 HTML: The Markup Language 2010 2011.03 2012 Q1 2012 Q2 2014 Q1 2014 Q2
FPWD:First Public Working Draft LCWD: Last Call Working Draft PR: Proposed RecommendationWD: Working Draft CR : Candidate Recommendation REC: RecommendationFPWD:First Public Working Draft LCWD: Last Call Working Draft PR: Proposed RecommendationWD: Working Draft CR : Candidate Recommendation REC: Recommendation
70
W3C Web Application API 표준화세부현황
Name of Specification Last Publication ED FPWD WD LCWD CR PR REC
Clipboard APIs and Events 2012-02-23Cross-Origin Resource Sharing (CORS) 2010-07-27DOM Level 3 Events 2011-05-31DOM4 2012-01-05Element Traversal 2008-12-22File API 2011-10-20File API: Directories and System 2011-04-19File API: Writer 2011-04-19From-Origin Header 2011-07-21HTML5 Web Messaging 2012-03-03Indexed Database API 2011-12-06Java bindings for Web IDL 2012-02-07Progress Events 2011-09-22Selectors API 2009-12-22Selectors API Level 2 2010-01-19Server-Sent Events 2011-10-20Shadow DOM
Uniform Messaging Policy (UMP) 2010-01-26Web IDL 2012-02-07Web Sockets API 2011-12-08Web Storage 2011-12-08Web Workers 2012-03-13XBL2 Primer 2007-07-18XBL2 Spec 2007-03-16XmlHttpRequest (Level 2) 2012-01-17
FPWD:First Public Working Draft LCWD: Last Call Working Draft PR: Proposed RecommendationWD: Working Draft CR : Candidate Recommendation REC: RecommendationFPWD:First Public Working Draft LCWD: Last Call Working Draft PR: Proposed RecommendationWD: Working Draft CR : Candidate Recommendation REC: Recommendation
q 최근에는 다양한 Web Application API 표준화가 활발히 시작 중
84
모바일 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.기타 새로운 기회들
85
N-Screen의 종결자, HTML5과 차세대 웹문제 해결책
다중 플랫폼을 지원하는 응용 개발 Web Application
단말간 데이터 이동 및 심리스 서비스 지원 Cloud & Web Application
다중 단말의 식별과 지원 HTTP UAProf, CSS MQ
다양한 화면 사이즈를 지원하는 응용 개발 SVG, CSS, HTML5
그래픽 처리, 3D 콘텐츠 표현 HTML5 canvas, CSS, WebGL, X3D
Video 및 Audio 콘텐츠 처리 HTML5 video/Audio
Interactive한 처리 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
86
2012년은 HTML5 활성화의 원년!!
2010 2011 2012 2013
MobileWeb
GoldenAge
MobileWeb
GoldenAge
LTE
Smart devices
HTML5Apps
표준화 완료
전국 서비스
다양화
87
2012, 모바일 웹과 HTML5 전망
1. Mobile First2. Responsive Web & Responsive Ads3. Social + Local + Cloud + Mobile + Web 4. Web UI Framework5. Cross Platform & Hybrid Web Application 6. JavaScript Library & Web Application API Standards7. HTML5 Game & Mobile HTML5 Game 8. Web Store & Native Web App 9. HTML5 ebook & HTML5 services 10.Web Operating System & RESTful WoT(Web of Things)
95
HTML5 어떻게 공부하나요 ?
qHTML5 스펙 너무 어려워요! 게다가 모두 영어!§ 한글 HTML5 번역본 è http://j.mp/html5ko (clearboth.org)
q그래도 내용이 너무 많아요§ 웹 개발자를 위한 최소 스펙 è http://j.mp/html5devel
q디자이너/기획자도 알아야 하나요 ? § 많은 문서/책자들 è HTML5: Edition for Web Authors, …
q알기쉬운 튜토리얼 및 프리젠테이션은 없나요 ?§ Google의 선물 è http://www.html5rocks.com
q그 외에 꼭 추천해주실만한 것은 ?§ 실전 HTML5 가이드 (한글 PDF) è http://j.mp/html5guide_ko§ 기타 한글로 된 많은 HTML5, CSS3, JavaScript 관련 서적들
참고: http://xguru.net/635
96
JavaScript 전성 시대
q JavaScript Libraries è http://bit.ly/tVFW6Y§ Application Frameworks, Server Side Library, Testing Frameworks§ Game Engines, Animation Library, Image manipulation
• Akihabara, IMPACT, enchant.js, Unity3D
q Server-side JavaScript § Node.js : Evented Server-Side Javascript è http://nodejs.org
• Google Chrome의 Javascript Engine V8을 단독으로 사용• 모든 Network I/O는 NonBlocking, File I/O는 Asynchronous • Thread 방식에 비해 뛰어난 성능• HTTPd, FTPd, IMAP, WebDAV 등 다양한 서버모듈
q Javascript로 컴파일 되는 언어들 è http://j.mp/hp2pnR§ CoffeeScript & Kaffeine : Javascript를 더 간결하게§ J2js è Java ByteCode to JS, Script# è C# to JS
100
학생들을 위한 조언
q 학습 : 기본에 충실하고 공부하라§ 웹 표준의 숙지와 연습 : HTML5, CSS, Javascript§ CSS 표준 기반의 웹 (응용) 디자인§ Mobile UI Framework 및 자바 스크립트 스킬 향상
q 도전과 노력 : 직접 개발해보고 시도하라§ Hybrid Web App 고려§ Mobile Cloud 고려§ 크로스플랫폼 및 멀티 스크린 지원 방법
q 함께 활동하라§ 오픈 소스 커뮤니티 활동§ HTML5 응용 모범 사례들의 도출과 공유§ 국내외 시장분석과 글로벌 도전
q 지금 당장 시작하라~
101
Thank youFor more discussion :
JongHong Jeon ([email protected])+82-42-860-5333
Blog : http://mobile2.tistory.com/mhttp://twitter.com/hollobit
OR