Mobile Web 2.0 Seven Principles of Mobile Web 2.0

1. Mobile Web 2.0Seven Principles of Mobile Web 2.0 Multilingual mobile access Digital Convergence and Mobile Web2.0 The disruptive power of Ajax and mobile widgets 모바일 TV

2. 목차 Multilingual mobile access The mobile phone network is the computer Multilingual implications Digital Convergence and Mobile Web 2.0 What is Digital Convergence? Digital Convergence : the definitions Digital Convergence : previous attempts The basis of a ‘Lingua Franca’ Digital convergence = mashups

3. 목차 The disruptive power of Ajax and mobile widgets What is Ajax? XMLHttpRequest Method, Properties Javascript DOM The significance of Mobile Ajax Problems facing the Mobile Data Industry The disruptive potential of Mobile Ajax Walled gardens and Open Gardens How does this approach contrast with Java ME, Symbian etc The (unpredictable) evolution of Ajax

4. Multilingual mobile access

5. The mobile phone network is the computer • Introduction • Bill Gates • 1970년대 • ‘모든 책상에 컴퓨터가 있고 누구나 마이크로소프트의 제품을 사용함’ • 1990년대 말에 그의 이상은 거의 실현됨 • John Gage(Sun Microsystems 공동 창립자) • 1984년 • ‘The Network is the computer’ • 1990년대 말 역시 그의 이상 또한 거의 실현됨 컴퓨터는 어떤 정보를 처리하거나 하나의 기계로 한정되는 것이 아니라네트워크로 연결된 지능 머신들 이라고 할 수 있음 컴퓨터정보통신공학과 07310730 신승우

6. The mobile phone network is the computer Fig.27 : A network of phones 컴퓨터정보통신공학과 07310730 신승우

7. The mobile phone network is the computer • Web 2.0 나 SOA architecture는 더 많은 사람을 연결해 주는 기능을 가짐 • 응용 단계에서 ‘Computation’ • Computation을 쉽게 해주는 ‘Network’ • Mobile Web 2.0에서의 생각 • 21억의 모바일 폰 사용자와 10억의 인터넷유저(2005년말) • 약 2억명이 모바일 폰을 이용해 인터넷을 사용 • 주로 Japan, China, South Korea • ‘Point of inspiration’의 대표기기가 모바일 폰임 • 모바일 폰으로 부터 생성된 Content는 ‘tagged’되어감 • 이것은 모바일폰이 집단지능(지성)의 기능을 가지도록 함 • 비상업적인 소리나 영상,사진, podcast, text를 캡쳐 • 진정한 글로벌 네트워크의 잠재성을 ‘non-textual’ web이 조합 • Flickr, Youtube와 유사한 응용을 통해 컴퓨터정보통신공학과 07310730 신승우

8. The mobile phone network is the computer Computing / Processing / Aggregation (Web) Tagged, Multilingual, user generated content some text but mostly video, audio, images A user accessing content through a site like flickr / Youtube Fig.28 Summary – The mobile phone network is the computer

9. The mobile phone network is the computer What if we could extrapolate the idea of the ‘network is the computer’ and extend the concepts of a ‘computer’ and a ‘network’ to higher levels in the software stack and especially to a ‘Network of mobile phones’ Computers Networks Fig.29 Network is the computer 컴퓨터정보통신공학과 07310730 신승우

10. Multilingual implications • Multilingualism(다국어 사용) • 동시에 여러 개의 언어를 사용할 수 있도록 하는 것 • 다국어 컨텐츠를 통합 하기 위한 Global Driver 역할을해야 함 • 이를위한 두 가지 Idea를 이해하여야 함 • 모바일 폰이 더욱 강력해져야 하며 • “Security Blanket”으로서의 모바일 폰(특히 해외여행자에게는) • Conclusions 컴퓨터는 어떤 정보를 처리하거나 하나의 기계로 한정되는 것이 아니라네트워크로 연결된 지능 머신들 이라고 할 수 있음 컴퓨터정보통신공학과 07310730 신승우

11. Multilingual implications Query in the Users Native Language Query transition Cross lingual Information system Information Retrieval Device (s) Korean Arabic German English Multilingual Collection of Data Natural language technologies RelevantData Generated in the Users Native Language Fig.30 Multilingual support 컴퓨터정보통신공학과 07310730 신승우

12. Digital convergence and mobile web 2.0

13. What is Digital Convergence? • Digital Convergence • Co-mingled bits • 1995년의 Being Digital (Nicolas Necroponte)에서의 개념 • 우리가가진 미디어나 PC 소비가전이나 통신업체가서로 더욱더 가까워지는 현상 • Device convergence • 다양한 기기들의 통합(Ex – iPhone , Nokia N-Gage) • Fixed to mobile convergence • ‘Seamless Mobility’ – 끊김 없는 이동성 • 끊김없이(매끄럽게)로밍이 되는 것(Fixed, Mobile, Wi-Fi) • Unilicensed Mobile Access • Device communication • 장치간의 정보를 공유하는 기능

14. What is Digital Convergence? • 각자의 위치에서 서로 다른 전략으로 접근 • For Example • Microsoft : 운영체제의 업데이트 • Intel : Viiv라는 브랜드네임으로 • Cisco : Networking • Yahoo and Google : 웹 브라우저를 통한 해결 • Sony : 소비자의 장치를 통한 해결(Playstation) 컴퓨터정보통신공학과 07310730 신승우

15. What is Digital Convergence? • 브라우저를 탑재한 다양한 기기들 Nintendo DS Set Top box Sharp Zaurus PDA Nokia 770 In flight entertainment Fig.31 Devices with browsers 컴퓨터정보통신공학과 07310730 신승우

16. What is Digital Convergence? • Digital convergence : previous attempts • 정보는디지털화 되어야 함 • 정보가 ‘Flowing freely’한 기능을 가져야 함 • Real bottleneck • ‘The Information superhighway’ • 한국과일본의 경우 • 일본 – 시장지배적인 NTT Docomo 가 선도를 하고 있음 • 한국 – 정부주도의 표준화 관리 • Toyota는 세계적인 차가 되었지만 i-mode의 경우는 세계가 좋아하는 플랫폼이 되지 않았음 • 표준에 입각한 시도로 이루어 지지 않았으므로 • 다른 시도들 • Sun Microsystems – Jini • ‘Network Plug n Play’를 제공 컴퓨터정보통신공학과 07310730 신승우

17. What is Digital Convergence? • The basis of a ‘Lingua Franca’ • Digitisation은 어디에서든 일어난다. • 의사소통기술은 디지털 컨텐츠의 제작을 어렵게 만듬 • Top-Down접근법은 세계규모의 스케일에선 불가능함 • 정부나 회사로 부터의 • Digital convergence = mashups • Mashup은 Web 2.0의 핵심요소 • Ex) Yahoo Music Engine API 컴퓨터정보통신공학과 07310730 신승우

18. What is Digital Convergence? • Yahoo Music Engine API • Home PC로부터 공유기를 통해 집안의 다양한 기기에서 재생 가능하도록 하는 API Fig.32 Yahoo music engine API 컴퓨터정보통신공학과 07310730 신승우

19. The disruptive power of Ajax and mobile widgets

20. What is Ajax? • Ajax is • Asynchronous Javascript And XML • Jesse James Garret 이 제안(2005년) • 다음의 기술로 이루어짐 • XHTML and CSS • 표준기반 표현 • DOM(Document Object Model) • 동적인 디스플레이와 상호작용 • XML & XSLT • 데이터교환과 조작 • XMLHttpRequest • 비동기데이터 데이터 검색 • Javascript • 모든것을 연결해주는 기술 컴퓨터정보통신공학과 07310730 신승우

21. What is Ajax? - Ajax 기본 구성요소 • Ajax의 장점 • 기존의 브라우저를 통해 어떠한 추가적인 것 없이 뛰어난 사용자인터페이스를 제공한다는 점 • 전통적인 웹의 경우 HTTP로 요청을 하면 서버가 처리후 결과를 사용자에게 돌려줌(그동안 사용자는 기다려야 함) 컴퓨터정보통신공학과 07310730 신승우

22. What is Ajax? • The classic Ajax Diagram Web 1.0 vs Web 2.0 Fig.33 Ajax Model 컴퓨터정보통신공학과 07310730 신승우

23. What is Ajax? - XMLHttpRequest vs Iframe • XMLHttpRequest vs Iframe • XMLHttpRequest • 비동기적으로 GET,POST를 서버에 요청가능 • 사용자에겐 어떤 것도 보여지지 않음 • 한번에 여러 개의 XMLHttpRequest 가 활성화가 가능 • 원래는 MS의 IE에서만 되었으나 현재 대부분의 브라우저에서 지원 • Iframe • HTML문서의“mini-browser” 창(window) • 숨길수있음(width와height를0으로 하여) • URL을 불러올수 있음 • Javascript를 읽어올수 있음 • 상태창에 메시지가 나타남 • 서버 요청한것이 사용자에게 알려짐 • XMLHttpRequest보다 느림 컴퓨터정보통신공학과 07310730 신승우

24. What is Ajax? – Case:Google 컴퓨터정보통신공학과 07310730 신승우

25. XMLHttpRequest Object : Methods • open(“method”, “URL”) • open(“method”, “URL”, async, username, password) • 목적지 URL을 할당 • send(content) • String과 DOM 객체 데이터를 포함한 요청을 보냄 • abort() • 현재의 요청을 끝냄 • getAllResponseHeaders() • String으로 header(lables+values)를 리턴 • getResponseHeader(“header”) • 주어진 header의 반환된 값 • setRequestHeader(“label”,”value”) • 전송전 요청 header를 set 컴퓨터정보통신공학과 07310730 신승우

26. XMLHttpRequest Properties • onreadystatechange • 이벤트핸들러가 상태가 변경된때 알림 • 이 속성을 통해 함수를 핸들링 • readyState – 요청의 현재 상태 • 0 = uninitialized • 1 = loading • 2 = loaded • 3 = interactive (some data has been returned) • 현재 IE에서 미지원 • 4 = complete • status • HTTP Status returned from server: 200 = OK • responseText • 서버로 부터의 데이터의 스트링 버전 • responseXML • XML DOM문서형태의 데이터 • statusText • 서버로부터의 상태 텍스트가 리턴 컴퓨터정보통신공학과 07310730 신승우

27. Javascript에서의 DOM사용 • Javascript에서의 DOM사용 • Javascript엔진은 전역변수 .document를이용해 최상위엘리먼트를 가져올 수 있음 • 기본적인 DOM method들 • getElementById() • DOM계층구조의 위치와 상관없이 부여해둔 ID를 통해 노드를 찾음 • getElementsByTagName() • HTML태그 유형의 객체를 배열로 알려줌 • createElement() • Div, img등 html태그요소를 생성할 수 있음 • createTextNode() • 제목이나 div,문단 등의 안에 나타나는 텍스트노드를 생성 • appendChild() • 문서에원하는 위치에 붙일때 사용 컴퓨터정보통신공학과 07310730 신승우

28. XMLHttpRequest Example 3 4 Simpsons.xml 5 2 1 XMLHttpRequest Example 컴퓨터정보통신공학과 07310730 신승우

29. XMLHttpRequest Example 1 2 3 4 5 컴퓨터정보통신공학과 07310730 신승우

30. The significant of Mobile Ajax • Ajax가 Mobile Device의 새로운 기술인 이유 • Ajax는 애플리케이션 개발의 브라우저 모델을 촉진 • ‘One Web’을 장려 • 시장의 단편화(분할)을 줄임 • 모바일 장치의 Porting에 대한 불행을 극복 • 모바일 데이터시장의 폐쇄적인 구조(Walled Garden)를극복 • Ajax는 Mobile Widget의 개발을 독려함 • 위젯은애플리케이션 개발에 웹과 모바일 웹의 조화와 폭 넓은 애플리케이션의 배포 모델을 가능케 함 • Ajax는 ‘Long Tail’ 애플리케이션의 개발을 독려함 • Ajax는 개발자 Community를 지원 컴퓨터정보통신공학과 07310730 신승우

31. Problems facing the Mobile Data Industry • Market Fragmentation • 모바일데이터 산업은 떠오르는 산업 • 하지만 새로운 시장은 Market Fragmentation을 야기 • Market Fragmentation의 예제집합 • 당신이 Application을 런칭하는 도시의 인구는? • 전화기를 가진 인구의 비율? • 어느 통신사를 통해 서비스 할것인가 • 어떤 단말기를 대상으로 서비스 할것인가 • Application이 LBS같은 특별한 기술을 원하는가? 원한다면 단말기에 얼만큼 장착되어 있는가? • 무슨 기준으로 구분되어 지는가?(남성/여성, 선불/후불) • 우리가 타겟팅한 시장의 채널이 어떤 채널인가? • 고객들을 대상으로 한 마케팅 예산을 어떻게 편성할 것인가? • Application distribution without walls • J2ME는 Sun에서 커뮤니티 프로세스의 셋업이 충분치 못함 컴퓨터정보통신공학과 07310730 신승우

32. Problems facing the Mobile Data Industry • Porting불행 • 이문제는다운로드 애플리케이션의 문제(J2ME) • Sprint 나 Vodafone등 그들의 수입의 10%가 모바일 게임이나 다른 데이터서비스로 발생됨을 보고 • 전세계적으로 4억5천대의 Java탑재의 휴대폰이 보급되어있고 3800의 BREW와 1500의 Symbian탑재의 휴대폰이 보급되었음 • 10억2천$의 모바일 게임 수익 • 하지만 이것은 함정이 있음 • 플랫폼은 같지만 다른 스크린 크기, 프로세서 속도, 메모리 양, 사운드 기능 등 기계별로 천차만별 • 문제점들 • 개발비용이 비쌈 • 우리는 한정된 몇 개의 게임만 함 • ‘Long Tail’ Application이 개발이 되지 않음 • 개발업체가 대부분 소규모임(배포채널이 비싸고 개발비용이 높음 컴퓨터정보통신공학과 07310730 신승우

33. The disruptive potential of application Mobile Ajax • The Browsing Applications Model • Browsing applications • 마이크로 브라우저를 통해 url을 입력하여 사용 • 기존의 웹 환경과 유사하지만 장치의 크기등이 다른 환경 • Downloading applications(smart client applications) • 다운로드를 받아 실행하는 모델 • Can all applications be developed using the browsing model? • 때때로 끊기는 연결 • 대역폭의 한계 • 클라이언트 데이터 저장소의 필요성 • Local Application이 더 우수한 Rich Experience를 제공 컴퓨터정보통신공학과 07310730 신승우

34. The disruptive potential of Mobile Ajax • The Ajax led resurgence of mobile • 추상화의 레벨이 브라우저로 옮겨감 • 업데이트가쉽고 fragmentation을 줄임 • 브라우저의 경험과 데이터관리기능을 향상시킴 • 사용자가원하는 데이터나 컨텐츠를 구입하는 프로세스가 이전에 비해 빨라지고 이에 따라 이익이 증진됨 • 개발자는 Ajax의 모바일 인터넷 확장을 지원 받을 수 있다 • Ex) IBM’s Open Ajax Openajax.net 컴퓨터정보통신공학과 07310730 신승우

35. The disruptive potential of Mobile Ajax • The power of mobile widgets • Code base 모바일위젯은 웹기반의 위젯들과 공유가 가능 • 다른 위젯을 호출할 수 있음 • 더 복잡한 위젯을 개발할 수 있음 • 애플 위젯이나 Opera 위젯과 유사한 위젯의 제작을 촉진 Opera Widget Apple Widget 컴퓨터정보통신공학과 07310730 신승우

36. The disruptive potential of Mobile Ajax • Walled gardens and OpenGardens • Walled garden • 3(Three) • Vodafone live • Open garden • Ajax는 브라우저를 통해 접속되고, 이러한 브라우저를 사용자가 새로이 인스톨 하여 사용할 수 있음(최소의 공통점만 있으면 되므로) • 모바일 회사들이 만들 Walled Garden을 우회하여 지나갈 수 있음 • Howdoes this approach contrast with Java ME, Symbian etc • Ajax/Platform은 브라우저 기반 Application과 다운로드된 Application사이의 간격을 줄여줌 • Ajax는 더 나은 배포모델 임 컴퓨터정보통신공학과 07310730 신승우

37. The disruptive potential of Mobile Ajax • The evolution of Ajax • Ajax는 개발자 커뮤니티로부터 다양한 지원을 얻는 강점을 가짐 • 원래 설계되었던 것에 비해 더욱 많은 것을 가지게 되었음 • 많은 개발자들이 사용으로 인해 많은 보완과 지원이 이루어짐 • 좀더 완벽한 형태로 정의가 되어야 함 • 특정 브라우저에 대한 제약 혹은 용어의 정의 등 컴퓨터정보통신공학과 07310730 신승우

38. Conclusions • Ajax, Mobile web 2.0과 모바일 위젯은 • 시장에 배포시간을 줄이고 • 혁신과 개발자가 더 큰 시장을 공략할 수 있게 도와줌 • 위젯은 개발자에게 더 나은 가치를 제공 • 위젯이 다른 위젯을 부르면 단순한 컴포넌트에서 더 우수한 애플리케이션이 개발 될 수 있음 • 소형 애플리케이션 개발자를 지원하는 최고의 요소 • Conclusion AJAX, Mobile web 2.0, mobile widget은 모바일 시장에서 개발자들에게 문제가 되었던 여러가지 사항들을 해결해 주는 방법들이다 컴퓨터정보통신공학과 07310730 신승우

39. References • Ajit Jaokar and Tony Fish, Mobile Web 2.0, Futuretext,2006 • Dave Crain, Ajax in Action,2006 • Clearnova, Ajax & Rich Internet Application(pdf) • Web 2.0 Professional, Wrox 컴퓨터정보통신공학과 07310730 신승우

40. 감사합니다