Mobile Web 2.0
-
Upload
jeffray-huang -
Category
Education
-
view
468 -
download
2
description
Transcript of Mobile Web 2.0
![Page 1: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/1.jpg)
黃忠成
(內部資訊教材)
![Page 2: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/2.jpg)
Web的發展史
1. 以動態HTML, Flash, Silverlight為基礎
2. 網站為服務提供者,但也可以是Cloud的消費者
3. 使用者是瀏覽者,同時也成為提供者
1. 以動態HTML , Flash為基礎
2. 網站為服務提供者3. 使用者是瀏覽者,同時也成為提供者
1. 以靜態HTML為基礎2. 網站為唯一提供者3. 使用者為瀏覽者
![Page 3: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/3.jpg)
Web 2.0的關鍵 以人為基礎,網站不再是唯一的資訊提供者
以分享為目的,網站必須轉型為[服務提供者]
從實際數字來看Web 2.0 Web 1.0 -使用者上下傳比為 1:100
Web 2.0 -使用者上下傳比為 60:40
分享,是Web 2.0的中心思想
社群,是Web 2.0發展的關鍵
![Page 4: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/4.jpg)
Web 2.0的獲利模式 廣告
例如Google , YouTube 利用插入廣告的方式來獲利 透過介紹商家,讓商家提高能見度,也增加社群人數
Rating 例如Amazon書店利用評比機制來促進書籍銷量及能見度
Recommend Amazon書店利用Recommend機制,促進相關書籍能見度與銷量
Facebook 同樣是以廣告為獲利, 但除此之外, 也收取使用者玩小遊戲時付費購買虛擬物品的佣金
以人為基礎,以分享為推力,進而形成網站獲利.
![Page 5: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/5.jpg)
Web 2.0的要點 使用者為主, 提供給使用者可以分享其生活經驗, 心得, 有趣事物的服務
透過廣告, 宣傳力, 影響力來獲取利益.
形成網站與使用者雙贏的局面.
Web 2.0的標的網站
Amazon
……..
![Page 6: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/6.jpg)
Web 2.0的關鍵技術 Web Services (REST/SOAP/JSON)
AJAX
Flash
Silverlight
AIR
![Page 7: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/7.jpg)
Web 2.0中的另一個關鍵點 要體驗Web 2.0,使用者得有電腦, 網路才可以
Netbook的出現, 證明了Web 2.0逐漸於人們的日常生活普及化
Netbook銷售的萎縮,證明了人們需要更輕的裝置來使用Web 2.0
智慧型手機(PDA)的銷量快速爬升,代表著使用者逐漸接受以手機來使用Web 2.0的習慣
據統計,目前全球約有40億人擁有手機,其中有4億人是使用可上網的手機.
![Page 8: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/8.jpg)
Web 2.0的最終型態
在辦公室及住家使用Web
在辦公室及住家, 出差時使用Web,只要有個一尺見方空間即可
隨時隨地,不必坐下,行進間,停駐間皆可使用
Web
![Page 9: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/9.jpg)
來自Mobile/Device的挑戰狀 Device的螢幕大小只有2 ~ 4吋,如何設計符合尺寸且可輕鬆操作的網站?
Device的GPRS/3G/3.5G上網費用昂貴,且頻寬有限,如何設計出她們可有效得到/分享資訊,省錢的網站內容?
Device的CPU/RAM配備不比桌上型/筆記型,如何避免設計出其無法快速解譯的網站?
So, Let’s go to Mobile Web 2.0
![Page 10: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/10.jpg)
Mobile Web 2.0 Mobile Web 2.0基礎定義與Web 2.0相同,但內涵不同
Mobile Web 2.0分成兩個區塊,一是瀏覽器,二是原生應用程式
HTML/CSS/JavaScript
Native Application
Mobile Web 2.0
![Page 11: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/11.jpg)
Mobile Web 2.0 –瀏覽器 Device多半使用Opera, IE WAP/WML規格 以瀏覽器為基準而設計的Mobile Web 2.0網站,必須辨識瀏覽器的版本來呈現不同於桌上型網站的內容
Mobile上的瀏覽器對於Flash,JavaScript的支援有限,要特別注意.
Mobile 2.0 網站標竿 Microsoft Marketing Place Android Marketing App Store Hami (中華電信) Match (台哥大)
![Page 12: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/12.jpg)
ASP.NET Mobile Web Controls Visual Studio 2008 已不再支援Mobile Web Controls的設計時期
Visual Studio 2008 也不再提供Mobile Web Form Controls的
這代表什麼?
因為多數網站不會專為Mobile設計網頁.
Mobile上的瀏覽器已經能夠處理為桌上型設計的網頁
那我們還要繼續使用Mobile Web 嗎?
![Page 13: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/13.jpg)
開發前的準備 安裝Virtual PC 2007
安裝此軟體的目的在於虛擬網路卡
設定模擬器的網路
測試是否可連上本機
![Page 14: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/14.jpg)
ASP.NET in Mobile 如何識別來訪者的裝置?
ViewState的可怕之處
善用Session來減少流量
可以用AJAX嗎? 怎麼用?
使用ASP.NET AJAX Controls
WM 6 With Opera
WM 6.5 With IE&Opera
JQuery支援Mobile Web嗎?
![Page 15: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/15.jpg)
製做適合Mobile的網頁 UI介面的設計
偵測瀏覽器的工作區大小
來點漂亮的UI
IPhone Style Mobile Web
Windows Mobile 6/6.1 的Pocket IE不支援
Transparent PNG
Windows Mobile 6.5的表現較好
![Page 16: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/16.jpg)
製做內層UI介面 準備背景圖
動態生成選單圖
![Page 17: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/17.jpg)
當功能無法於傳統網頁中完成時 iPhone如何在網頁中取得AGPS資料的??
Hami的KiDoWi
Mobile IE支援Active X,這意味著? 我們可以使用Native Code撰寫ActiveX元件來提供AGPS資料供網頁應用程式使用
前提是,我們必須要能事先安裝ActiveX於Mobile裝置上 Opera日後也計畫支援ActiveX,或者我們也可以撰寫plugin
ActiveXHTML/JavaScript Server
AGPS
![Page 18: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/18.jpg)
ASP.NET in Mobile 的不足之處
過於繁複的操作介面
無法背景運作
無謂的網路流量浪費
瀏覽器支援不同
與Native Code的溝通困難
![Page 19: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/19.jpg)
Go to Fast Mobile Web 2.0Mobile Web 2.0絕不會只以瀏覽器為主.
原生應用程式也是推動Mobile Web 2.0的主角之一
目前智慧型手機的四大平台
Windows Phone - .NET Compact Framework
Android – Java Platform
iPhone – iPhone SDK(Objective-C)
Symbian – C/C++
![Page 20: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/20.jpg)
Native應用程式的可能性 可使用AGPS,提供使用者在地服務
可連結社群網站的API服務,讓使用者能與朋友分享
訊息
照片
遊戲成果
…..
友善的UI介面,簡易直覺的操作
![Page 21: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/21.jpg)
一個簡單的.NET CF應用程式 建立Smart Device Application
Hello World!!
![Page 22: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/22.jpg)
讓Native Code躍上Mobile Web 2.0的關鍵 Web Services
SOAP格式
使用ASP.NET 建構Web Services
使用.NET CF建構Web Services Consumer
![Page 23: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/23.jpg)
串起用戶
User A User B
Web Services
分享照片訊息位置資訊
![Page 24: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/24.jpg)
Next Web Services - RESTFul 什麼是REST
ASP.NET與REST
WCF REST Start Kit
.NET CF與REST
![Page 25: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/25.jpg)
REST 的運作
REST Service
Consumer 1 Consumer 1
![Page 26: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/26.jpg)
Why REST 如果有了Web Services,為何我們還需要REST?
Web Services只能使用XML,而REST支援JSON
JSON比XML更簡潔,更容易於JavaScript中解譯
REST API可輕易的被其它語言及平台所解譯及應用
Web Services由於過度發展,規格呈現複雜化,已經不再是Simple Object Access Protocol了
![Page 27: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/27.jpg)
REST的最佳範本- Facebook 使用.NET Compact Framework取得連絡人資訊
使用REST API取得該連絡人於Facebook的訊息
結合成一個社群
Facebook/our application
黃xx
李 xx
陳xx
林xx
![Page 28: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/28.jpg)
實作 Facebook Application
建立
設定
Facebook SDK for .NET CF
建立CF端
取得聯絡人
取得聯絡人訊息
![Page 29: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/29.jpg)
我們做了什麼? 使用者可隨時使用Facebook得知連絡人的近況
使用者可分享自己的近況給連絡人
形成了Mobile Web 2.0的關鍵要件, 是提供者也是消費者.
![Page 30: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/30.jpg)
更進一步,商業模式 使用者透過Marketing 購買軟體
Marketing透過REST API發佈使用者已購買該軟體的訊息
進而達到提升軟體可見度
使用者再透過Marketing評比該軟體
進而達到行銷好軟體的目的
社群是Mobile Web 2.0的要件
![Page 31: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/31.jpg)
如何構築Mobile Web 2.0的提供者 Mobile Web 2.0有兩個角色: 提供者及消費者
提供者提供REST/SOAP API供原生應用程式呼叫,藉此分享訊息及更新狀態
消費者透過REST/SOAP API來取得訊息或更新訊息
橋接的關鍵點: REST/SOAP API
Consumer SOAP/REST Provider
![Page 32: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/32.jpg)
回到商業模式,無入口網頁的獲利模式 REST Providers可以沒有入口網頁
透過橋接,可協助未有REST Provider的網站進入Mobile Web 2.0的世界.
藉由租金,上架費或是單純廣告來獲利
REST Providers
User
Kxtone
Bxd
PxHome
![Page 33: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/33.jpg)
Anytime, Anywhere, 定位系統的加入 於旅行期間,你是否曾看到美麗景色而拍下照片? 你如何透過Mobile Web 2.0分享照片呢?
於逛街期間,你是否因為想找美食而茫然呢?
迷路了,你是否想找一個明燈呢?
於商業街中,你是否為了找某樣東西而走到精疲力盡?
想找人看電影,你是否會害怕找的人沒空,而不敢撥電話呢?
突然想看電影,你是否為了找時刻表及影評而不知所措呢?
定位系統將解決這些問題,這是Mobile Web 2.0的最終應用
![Page 34: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/34.jpg)
Mobile上的定位技術 GPS
可於戶外定位,精準度非常高 缺點是無法於室內定位,這跼限了其只能應用在導航,僅能滿足少量的定位需求
市區因高樓林立,因此很難於街區內定位
CPS 使用基地台定位,精準度不高 優點是不受建築物影響 可滿足多數的定位需求
CPS+GPS 使用CPS做粗估定位,當同一基地台有人使用GPS時,結合其位置及Cell訊號強弱,進行更精確定位
這是Google使用的模式
![Page 35: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/35.jpg)
CPS+GPS Mode
User A(Use CPS)
User A(Use GPS)
Server
使用User B的GPS訊號,加上User B的Cell訊號強弱,來運算出User
A的更精確位置
![Page 36: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/36.jpg)
CPS+GPS應用的困難處 Windows Phone
RIL層並未強制實作提供Cell資訊的API,所以不見得所有Windows Phone手機都有此資訊
Android
內建
iPhone
內建
Symbian
視機型而定
![Page 37: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/37.jpg)
使用.NET Compact Framework建構GPS應用程式 .NET CF對於GPS的支援
使用.NET Compact Framework取得GPS定位資訊
使用Fake GPS協助測試
![Page 38: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/38.jpg)
結合Google Map 使用Web Browser來結合Google+GPS座標顯示位置.
![Page 39: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/39.jpg)
使用.NET Compact Framework建構CPS應用程式 CPS的最大問題,如何取得基地台資訊?
使用RIL API取得基地台資訊
運用.NET CF + Google Map來完成CPS定位的應用程式
RGAPI
Google API
MCC,LAC與CID
關於訊號強度
RIL_GetTowerInfo的dwRxLevel數值
![Page 40: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/40.jpg)
網頁與Native Code的差別 網頁
使用預載的ActiveX取得CPS+GPS資料
使用AJAX上傳至Server端
由Server端取得資訊
優點
可與瀏覽器整合
可提供給其它網站使用,並與其它網站整合
Native Code
優點
簡潔的UI介面
![Page 41: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/41.jpg)
終極應用-Location Based Service 什麼是LBS?
LBS於真實世界的應用 (電影街)電影時刻表的發送與訂票
(美食街)特價美食資訊及預訂
(高速公路)行車資訊
…….
LBS的關鍵技術 CPS+GPS
REST API
Native Application
ActiveX/Plug-In and Browser
![Page 42: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/42.jpg)
實作LBS Server 實作餐廳搜尋的LBS Server
Designing Web Services/REST APIs
![Page 43: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/43.jpg)
實作LBS Native Client Application 實作LBS Client Application
Gather Location Information
Consuming Web Servcies APIs
![Page 44: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/44.jpg)
實作LBS 網頁客戶端 實作ActiveX元件
於網頁中使用此元件
![Page 45: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/45.jpg)
延展性的考量 Channel的設計
Plug-In 架構的設計
LBS Server
Movies
交通資訊
美食資訊
CHANNELS
![Page 46: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/46.jpg)
Mobile Web 2.0的下一步 AR(Augmented Reality)
雲端與Mobile Web 2.0
為何使用雲端?
Windows Azure平台
SQL Azure平台
![Page 47: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/47.jpg)
AR(Augmented Reality) 什麼是AR
簡稱為擴增實境 主軸在於於現成地圖上提供標示
AR能做什麼? 於導航時,顯示最近的加油站地點及距離 隨著行進,標示點會即時更新
AR的關鍵技術 導航及地圖 圖形辨識? 行進速度預估 圖層技術 群體標示的力量
AR目前的情況 Layer於Android及iPhone都推出了軟體
![Page 48: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/48.jpg)
雲端與Mobile Web 2.0結合的第一步 Microsoft My Phone
使用Azure技術所架構的平台
使用雲端技術來儲存使用者資料.
如何使用Windows Azure
申請
設定
撰寫應用程式
![Page 49: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/49.jpg)
Table Storage Services Windows Azure的資料儲存服務
Queue
Blob
Table Storage Services
使用Table Storage Services來儲存資料
![Page 50: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/50.jpg)
SQL Azure 雲端上的關聯資料庫
使用SQL Azure
申請
設定
撰寫應用程式
![Page 51: Mobile Web 2.0](https://reader034.fdocument.pub/reader034/viewer/2022051411/5469ce35af7959653c8b590b/html5/thumbnails/51.jpg)
Azure與Mobile Web 2.0的結合 使用Azure來Hosting REST APIS
使用.NET CF來取用