黃忠成
(內部資訊教材)
Web的發展史

1. 以動態HTML , Flash為基
礎
2. 網站為服務提供者
3. 使用者是瀏覽者,同時也成
為提供者
1. 以靜態HTML為基礎
2. 網站為唯一提供者
3. 使用者為瀏覽者

1. 以動態HTML, Flash,
...
Web 2.0的關鍵
 以人為基礎,網站不再是唯一的資訊提供者
 以分享為目的,網站必須轉型為[服務提供者]

 從實際數字來看Web 2.0
 Web 1.0 - 使用者上下傳比為 1:100
 Web 2.0 - 使用者上下傳比為...
Web 2.0的獲利模式
 廣告
 例如Google , YouTube 利用插入廣告的方式來獲利
 透過介紹商家,讓商家提高能見度,也增加社群人數
 Rating
 例如Amazon書店利用評比機制來促進書籍銷量及能見度
 Rec...
Web 2.0的要點
 使用者為主, 提供給使用者可以分享其生活經驗, 心得,

有趣事物的服務
 透過廣告, 宣傳力, 影響力來獲取利益.
 形成網站與使用者雙贏的局面.
 Web 2.0的標的網站
 Google
 Amazon...
Web 2.0的關鍵技術
 Web Services (REST/SOAP/JSON)
 AJAX

 Flash
 Silverlight
 AIR
Web 2.0中的另一個關鍵點
 要體驗Web 2.0,使用者得有電腦, 網路才可以
 Netbook 的出現, 證明了Web 2.0逐漸於人們的日常生

活普及化
 Netbook銷售的萎縮,證明了人們需要更輕的裝置來使
用Web 2....
Web 2.0的最終型態

在辦公室及住
家使用Web

在辦公室及住家, 出差
時使用Web,只要有個
一尺見方空間即可

隨時隨地,不必坐下,行
進間,停駐間皆可使用
Web
來自Mobile/Device的挑戰狀
 Device的螢幕大小只有2 ~ 4吋,如何設計符合尺寸且可

輕鬆操作的網站?
 Device的GPRS/3G/3.5G上網費用昂貴,且頻寬有限,如
何設計出她們可有效得到/分享資訊,省錢的網站內...
Mobile Web 2.0
 Mobile Web 2.0基礎定義與Web 2.0相同,但內涵不同
 Mobile Web 2.0分成兩個區塊,一是瀏覽器,二是原生應

用程式
HTML/CSS/
JavaScript

Mobile
W...
Mobile Web 2.0 – 瀏覽器
 Device多半使用Opera, IE
 WAP/WML規格
 以瀏覽器為基準而設計的Mobile Web 2.0網站,必須辨識瀏

覽器的版本來呈現不同於桌上型網站的內容
 Mobile上的...
ASP.NET Mobile Web Controls
 Visual Studio 2008 已不再支援Mobile Web Controls的

設計時期
 Visual Studio 2008 也不再提供Mobile Web Form...
開發前的準備
 安裝Virtual PC 2007
 安裝此軟體的目的在於虛擬網路卡
 設定模擬器的網路
 測試是否可連上本機
ASP.NET in Mobile
 如何識別來訪者的裝置?
 ViewState 的可怕之處

 善用Session來減少流量
 可以用AJAX嗎? 怎麼用?
 使用ASP.NET AJAX Controls
 WM 6 With...
製做適合Mobile的網頁
 UI介面的設計
 偵測瀏覽器的工作區大小

 來點漂亮的UI
 IPhone Style Mobile Web
 Windows Mobile 6/6.1 的Pocket IE不支援
Transparen...
製做內層UI介面
 準備背景圖
 動態生成選單圖
當功能無法於傳統網頁中完成時
 iPhone如何在網頁中取得AGPS資料的??
 Hami的KiDoWi
 Mobile IE支援Active X,這意味著?
 我們可以使用Native Code撰寫ActiveX元件來提供AGPS資料...
ASP.NET in Mobile 的不足之處
過於繁複的操作介面

無謂的網路流量浪費
無法背景運作

瀏覽器支援不同

與Native Code的溝通困難
Go to Fast Mobile Web 2.0
 Mobile Web 2.0絕不會只以瀏覽器為主.
 原生應用程式也是推動Mobile Web 2.0的主角之一

 目前智慧型手機的四大平台
 Windows Phone - .N...
Native應用程式的可能性
 可使用AGPS,提供使用者在地服務
 可連結社群網站的API服務,讓使用者能與朋友分享
 訊息
 照片
 遊戲成果
 …..
 友善的UI介面,簡易直覺的操作
一個簡單的.NET CF應用程式
 建立Smart Device Application
 Hello World!!
讓Native Code躍上Mobile Web 2.0的關鍵
 Web Services
 SOAP格式

 使用ASP.NET 建構Web Services
 使用.NET CF建構Web Services Consumer
串起用戶
User A

User B

Web
Services

分享照片
訊息
位置資訊
Next Web Services - RESTFul
 什麼是REST
 ASP.NET與REST
 WCF REST Start Kit
 .NET CF與REST
REST 的運作
REST Service

Consumer 1

Consumer 1
Why REST
 如果有了Web Services,為何我們還需要REST?
 Web Services只能使用XML,而REST支援JSON
 JSON比XML更簡潔,更容易於JavaScript中解譯
 REST API可輕易的被...
REST的最佳範本- Facebook
 使用.NET Compact Framework取得連絡人資訊
 使用REST API取得該連絡人於Facebook的訊息

 結合成一個社群
黃xx

林xx

Facebook/our
app...
實作
 Facebook Application
 建立
 設定
 Facebook SDK for .NET CF
 建立CF端
 取得聯絡人
 取得聯絡人訊息
我們做了什麼?
 使用者可隨時使用Facebook得知連絡人的近況
 使用者可分享自己的近況給連絡人

 形成了Mobile Web 2.0的關鍵要件, 是提供者也是消費

者.
更進一步,商業模式
 使用者透過Marketing 購買軟體
 Marketing透過REST API發佈使用者已購買該軟體的






訊息
進而達到提升軟體可見度
使用者再透過Marketing評比該軟體
進而達到行銷好軟體的...
如何構築Mobile Web 2.0的提供者
 Mobile Web 2.0有兩個角色: 提供者及消費者
 提供者提供REST/SOAP API供原生應用程式呼叫,藉此

分享訊息及更新狀態
 消費者透過REST/SOAP API來取得訊...
回到商業模式,無入口網頁的獲利模式
 REST Providers可以沒有入口網頁
 透過橋接,可協助未有REST Provider的網站進入Mobile

Web 2.0的世界.
 藉由租金,上架費或是單純廣告來獲利
User

PxH...
Anytime, Anywhere, 定位系統的加入
 於旅行期間,你是否曾看到美麗景色而拍下照片? 你如何透









過Mobile Web 2.0分享照片呢?
於逛街期間,你是否因為想找美食而茫然呢?
迷路了,你是否...
Mobile上的定位技術
 GPS
 可於戶外定位,精準度非常高
 缺點是無法於室內定位,這跼限了其只能應用在導航,僅能滿
足少量的定位需求
 市區因高樓林立,因此很難於街區內定位
 CPS
 使用基地台定位,精準度不高
 優點是...
CPS+GPS Mode
User A
(Use GPS)

User A
(Use CPS)

Server

使用User B的GPS訊號,加上User
B的Cell訊號強弱,來運算出User
A的更精確位置
CPS+GPS應用的困難處
 Windows Phone
 RIL層並未強制實作提供Cell資訊的API,所以不見得所有
Windows Phone手機都有此資訊
 Android
 內建
 iPhone
 內建
 Symbian...
使用.NET Compact Framework建構GPS
應用程式
 .NET CF對於GPS的支援
 使用.NET Compact Framework取得GPS定位資訊

 使用Fake GPS協助測試
結合Google Map
 使用Web Browser來結合Google+GPS座標顯示位置.
使用.NET Compact Framework建構CPS
應用程式
 CPS的最大問題,如何取得基地台資訊?
 使用RIL API取得基地台資訊

 運用.NET CF + Google Map來完成CPS定位的應用程

式
 RGA...
網頁與Native Code的差別
 網頁
 使用預載的ActiveX取得CPS+GPS資料
 使用AJAX上傳至Server端
 由Server端取得資訊
 優點



可與瀏覽器整合
可提供給其它網站使用,並與其它網站整合

...
終極應用-Location Based Service
 什麼是LBS?
 LBS於真實世界的應用
 (電影街)電影時刻表的發送與訂票
 (美食街)特價美食資訊及預訂
 (高速公路)行車資訊
 …….
 LBS的關鍵技術
 CP...
實作LBS Server
 實作餐廳搜尋的LBS Server
 Designing Web Services/REST APIs
實作LBS Native Client Application
 實作LBS Client Application
 Gather Location Information
 Consuming Web Servcies APIs
實作LBS 網頁客戶端
 實作ActiveX元件
 於網頁中使用此元件
延展性的考量
 Channel的設計
 Plug-In 架構的設計

LBS
Server

C
H
A
N
N
E
L
S

Movies

交通資
訊

美食資
訊
Mobile Web 2.0的下一步
 AR(Augmented Reality)
 雲端與Mobile Web 2.0

 為何使用雲端?
 Windows Azure平台
 SQL Azure平台
AR(Augmented Reality)
 什麼是AR
 簡稱為擴增實境
 主軸在於於現成地圖上提供標示
 AR能做什麼?
 於導航時,顯示最近的加油站地點及距離
 隨著行進,標示點會即時更新
 AR的關鍵技術
 導航及地圖
...
雲端與Mobile Web 2.0結合的第一步
 Microsoft My Phone
 使用Azure技術所架構的平台
 使用雲端技術來儲存使用者資料.
 如何使用Windows Azure
 申請
 設定
 撰寫應用程式
Table Storage Services
 Windows Azure的資料儲存服務
 Queue
 Blob
 Table Storage Services
 使用Table Storage Services來儲存資料
SQL Azure
 雲端上的關聯資料庫
 使用SQL Azure
 申請
 設定
 撰寫應用程式
Azure與Mobile Web 2.0的結合
 使用Azure來Hosting REST APIS
 使用.NET CF來取用
Upcoming SlideShare
Loading in …5
×

Mobile Web 2.0

635 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
635
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile Web 2.0

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

×