mobile web 2.0 seven principles of mobile web 2.0

컴퓨터 정보통신공학과컴퓨터 정보통신공학과07310730 07310730 신승우신승우

23年 4月 20日 1

Mobile Web 2.0Mobile Web 2.0Seven Principles of Mobile Web Seven Principles of Mobile Web 2.02.0

모바일 TV

Multilingual mobile accessDigital Convergence and Mobile Web2.0The disruptive power of Ajax and mobile

widgets

목차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

목차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

Multilingual mobile access

The mobile phone network is the computer

Introduction Bill Gates

• 1970 년대 – ‘ 모든 책상에 컴퓨터가 있고 누구나 마이크로소프트의 제품을

사용함’– 1990 년대 말에 그의 이상은 거의 실현됨

John Gage(Sun Microsystems 공동 창립자 )• 1984 년

– ‘The Network is the computer’– 1990 년대 말 역시 그의 이상 또한 거의 실현됨

23 4 20年月日 모바일 TV 5 컴퓨터정보통신공학과 07310730 신승우



Fig.27 : A network of phones


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 와 유사한 응용을 통해



Tagged, Multilingual, user generated content

some text but mostly video, audio, images

Computing /

Processing /

Aggregation

(Web)

A user accessing content through a

site like flickr / Youtube

Fig.28 Summary – 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’

Com

pu

ters

Netw

ork

s

Fig.29 Network is the computer

Multilingual implications

Multilingualism( 다국어 사용 ) 동시에 여러 개의 언어를 사용할 수 있도록 하는 것 다국어 컨텐츠를 통합 하기 위한 Global Driver 역할을

해야 함 이를 위한 두 가지 Idea 를 이해하여야 함

• 모바일 폰이 더욱 강력해져야 하며• “Security Blanket” 으로서의 모바일 폰 ( 특히

해외여행자에게는 )

Conclusions


Multilingual implications


Fig.30 Multilingual support

Query in the Users

Native Language

Relevant Data Generated in the

Users Native Language

Cross lingual

Information system

Multilingual Collection of

Data

ArabicGerma

nEnglish

Korean

Natural language

technologies

Query transition

Information

Retrieval Device (s)

Digital convergence and mobile web 2.0

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• 장치간의 정보를 공유하는 기능

What is Digital Convergence? 각자의 위치에서 서로 다른 전략으로 접근

• For Example– Microsoft : 운영체제의 업데이트– Intel : Viiv 라는 브랜드네임으로– Cisco : Networking– Yahoo and Google : 웹 브라우저를 통한 해결– Sony : 소비자의 장치를 통한 해결 (Playstation)



브라우저를 탑재한 다양한 기기들


Fig.31 Devices with browsers

In flight entertainment

Nintendo DS

Sharp Zaurus PDA

Set Top box

Nokia 770


Digital convergence : previous attempts1. 정보는 디지털화 되어야 함2. 정보가 ‘ Flowing freely’ 한 기능을 가져야 함

• Real bottleneck

‘The Information superhighway’ 한국과 일본의 경우

• 일본 – 시장 지배적인 NTT Docomo 가 선도를 하고 있음• 한국 – 정부주도의 표준화 관리• Toyota 는 세계적인 차가 되었지만 i-mode 의 경우는 세계가

좋아하는 플랫폼이 되지 않았음– 표준에 입각한 시도로 이루어 지지 않았으므로

다른 시도들• Sun Microsystems – Jini

– ‘Network Plug n Play’ 를 제공



The basis of a ‘Lingua Franca’ Digitisation 은 어디에서든 일어난다 . 의사소통 기술은 디지털 컨텐츠의 제작을 어렵게 만듬 Top-Down 접근법은 세계규모의 스케일에선 불가능함

• 정부나 회사로 부터의

Digital convergence = mashups Mashup 은 Web 2.0 의 핵심요소

• Ex) Yahoo Music Engine API



Yahoo Music Engine API Home PC 로부터 공유기를 통해 집안의 다양한 기기에서

재생 가능하도록 하는 API


Fig.32 Yahoo music engine API

The disruptive power of Ajax and mobile

widgets

What is Ajax?

Ajax is Asynchronous Javascript And XML

• Jesse James Garret 이 제안 (2005 년 )

다음의 기술로 이루어짐• XHTML and CSS

– 표준기반 표현• DOM(Document Object Model)

– 동적인 디스플레이와 상호작용• XML & XSLT

– 데이터교환과 조작• XMLHttpRequest

– 비동기데이터 데이터 검색• Javascript

– 모든것을 연결해주는 기술


What is Ajax? - Ajax 기본 구성요소


Ajax 의 장점• 기존의 브라우저를 통해 어떠한 추가적인 것 없이 뛰어난

사용자인터페이스를 제공한다는 점• 전통적인 웹의 경우 HTTP 로 요청을 하면 서버가 처리후

결과를 사용자에게 돌려줌 ( 그동안 사용자는 기다려야 함 )

What is Ajax?

The classic Ajax Diagram


Fig.33 Ajax Model

Web 1.0 vs Web 2.0

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 보다 느림


What is Ajax? – Case:Google


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 를 set23 4 20年月日 모바일 TV 25 컴퓨터정보통신공학과 07310730

신승우

XMLHttpRequest Propertiesonreadystatechange

이벤트 핸들러가 상태가 변경된때 알림 이 속성을 통해 함수를 핸들링

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 서버로부터의 상태 텍스트가 리턴


Javascript 에서의 DOM 사용Javascript 에서의 DOM 사용

Javascript엔진은 전역변수 .document 를 이용해 최상위엘리먼트를 가져올 수 있음

기본적인 DOM method 들 getElementById()

• DOM 계층구조의 위치와 상관없이 부여해둔 ID 를 통해 노드를 찾음 getElementsByTagName()

• HTML태그 유형의 객체를 배열로 알려줌 createElement()

• Div, img등 html태그요소를 생성할 수 있음 createTextNode()

• 제목이나 div, 문단 등의 안에 나타나는 텍스트노드를 생성 appendChild()

• 문서에 원하는 위치에 붙일때 사용23 4 20年月日 모바일 TV 27 컴퓨터정보통신공학과 07310730

신승우

XMLHttpRequest Example



Simpsons.xml

1

2

3

5

4



1

2

3

4

5

The significant of Mobile AjaxAjax 가 Mobile Device 의 새로운 기술인 이유

Ajax 는 애플리케이션 개발의 브라우저 모델을 촉진• ‘One Web’ 을 장려• 시장의 단편화 ( 분할 ) 을 줄임• 모바일 장치의 Porting 에 대한 불행을 극복• 모바일 데이터시장의 폐쇄적인 구조 (Walled Garden) 를 극복

Ajax 는 Mobile Widget 의 개발을 독려함• 위젯은 애플리케이션 개발에 웹과 모바일 웹의 조화와 폭 넓은 애플리케이션의 배포 모델을 가능케 함

Ajax 는 ‘ Long Tail’ 애플리케이션의 개발을 독려함 Ajax 는 개발자 Community 를 지원


Problems facing the Mobile Data Industry

Market Fragmentation 모바일 데이터 산업은 떠오르는 산업 하지만 새로운 시장은 Market Fragmentation 을 야기 Market Fragmentation 의 예제집합

• 당신이 Application 을 런칭하는 도시의 인구는 ?• 전화기를 가진 인구의 비율 ?• 어느 통신사를 통해 서비스 할것인가• 어떤 단말기를 대상으로 서비스 할것인가• Application 이 LBS같은 특별한 기술을 원하는가 ? 원한다면

단말기에 얼만큼 장착되어 있는가 ?• 무슨 기준으로 구분되어 지는가 ?(남성 /여성 , 선불 /후불 )• 우리가 타겟팅한 시장의 채널이 어떤 채널인가 ?• 고객들을 대상으로 한 마케팅 예산을 어떻게 편성할 것인가 ?

Application distribution without walls J2ME 는 Sun 에서 커뮤니티 프로세스의 셋업이 충분치 못함


Problems facing the Mobile Data Industry

Porting 불행 이문제는 다운로드 애플리케이션의 문제 (J2ME)

• Sprint 나 Vodafone등 그들의 수입의 10% 가 모바일 게임이나 다른 데이터서비스로 발생됨을 보고

• 전세계적으로 4 억 5 천대의 Java 탑재의 휴대폰이 보급되어있고 3800 의 BREW 와 1500 의 Symbian 탑재의 휴대폰이 보급되었음

• 10 억 2 천 $ 의 모바일 게임 수익 하지만 이것은 함정이 있음

• 플랫폼은 같지만 다른 스크린 크기 , 프로세서 속도 , 메모리 양 , 사운드 기능 등 기계별로 천차만별

문제점들• 개발비용이 비쌈• 우리는 한정된 몇 개의 게임만 함• ‘Long Tail’ Application 이 개발이 되지 않음• 개발업체가 대부분 소규모임 ( 배포채널이 비싸고 개발비용이 높음


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 를

제공23 4 20年月日 모바일 TV 33 컴퓨터정보통신공학과 07310730

신승우

The disruptive potential of Mobile Ajax

The Ajax led resurgence of mobile 추상화의 레벨이 브라우저로 옮겨감

• 업데이트가 쉽고 fragmentation 을 줄임 브라우저의 경험과 데이터관리기능을 향상시킴

• 사용자가 원하는 데이터나 컨텐츠를 구입하는 프로세스가 이전에 비해 빨라지고 이에 따라 이익이 증진됨

개발자는 Ajax 의 모바일 인터넷 확장을 지원 받을 수 있다• Ex) IBM’s Open Ajax


Openajax.net


The power of mobile widgets Code base 모바일위젯은 웹기반의 위젯들과 공유가

가능 다른 위젯을 호출할 수 있음

• 더 복잡한 위젯을 개발할 수 있음 애플 위젯이나 Opera 위젯과 유사한 위젯의 제작을 촉진


Apple Widget Opera Widget


Walled gardens and OpenGardens Walled garden

• 3(Three)• Vodafone live

Open garden• Ajax 는 브라우저를 통해 접속되고 , 이러한 브라우저를 사용자가 새로이 인스톨 하여 사용할 수 있음 ( 최소의 공통점만 있으면 되므로 )

• 모바일 회사들이 만들 Walled Garden 을 우회하여 지나갈 수 있음

How does this approach contrast with Java ME, Symbian etc Ajax/Platform 은 브라우저 기반 Application 과

다운로드된 Application 사이의 간격을 줄여줌 Ajax 는 더 나은 배포모델 임



The evolution of Ajax Ajax 는 개발자 커뮤니티로부터 다양한 지원을 얻는

강점을 가짐 원래 설계되었던 것에 비해 더욱 많은 것을 가지게 되었음

• 많은 개발자들이 사용으로 인해 많은 보완과 지원이 이루어짐 좀더 완벽한 형태로 정의가 되어야 함

• 특정 브라우저에 대한 제약 혹은 용어의 정의 등


Conclusions

Ajax, Mobile web 2.0 과 모바일 위젯은 시장에 배포시간을 줄이고 혁신과 개발자가 더 큰 시장을 공략할 수 있게 도와줌 위젯은 개발자에게 더 나은 가치를 제공

• 위젯이 다른 위젯을 부르면 단순한 컴포넌트에서 더 우수한 애플리케이션이 개발 될 수 있음

소형 애플리케이션 개발자를 지원하는 최고의 요소Conclusion


References

Ajit Jaokar and Tony Fish, Mobile Web 2.0, Futuretext,2006

Dave Crain, Ajax in Action,2006Clearnova, Ajax & Rich Internet

Application(pdf)Web 2.0 Professional, Wrox


감사합니다

mobile web 2.0 seven principles of mobile web 2.0

Documents