黃忠成

(內部資訊教材)

Web的發展史

1. 以動態HTML, Flash, Silverlight為基礎

2. 網站為服務提供者,但也可以是Cloud的消費者

3. 使用者是瀏覽者,同時也成為提供者

1. 以動態HTML , Flash為基礎

2. 網站為服務提供者3. 使用者是瀏覽者,同時也成為提供者

1. 以靜態HTML為基礎2. 網站為唯一提供者3. 使用者為瀏覽者

Web 2.0的關鍵 以人為基礎,網站不再是唯一的資訊提供者

以分享為目的,網站必須轉型為[服務提供者]

從實際數字來看Web 2.0 Web 1.0 -使用者上下傳比為 1:100

Web 2.0 -使用者上下傳比為 60:40

分享,是Web 2.0的中心思想

社群,是Web 2.0發展的關鍵

Web 2.0的獲利模式 廣告

例如Google , YouTube 利用插入廣告的方式來獲利 透過介紹商家,讓商家提高能見度,也增加社群人數

Rating 例如Amazon書店利用評比機制來促進書籍銷量及能見度

Recommend Amazon書店利用Recommend機制,促進相關書籍能見度與銷量

Facebook 同樣是以廣告為獲利, 但除此之外, 也收取使用者玩小遊戲時付費購買虛擬物品的佣金

以人為基礎,以分享為推力,進而形成網站獲利.

Web 2.0的要點 使用者為主, 提供給使用者可以分享其生活經驗, 心得, 有趣事物的服務

透過廣告, 宣傳力, 影響力來獲取利益.

形成網站與使用者雙贏的局面.

Web 2.0的標的網站

Google

Amazon

Facebook

……..

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.0

智慧型手機(PDA)的銷量快速爬升,代表著使用者逐漸接受以手機來使用Web 2.0的習慣

據統計,目前全球約有40億人擁有手機,其中有4億人是使用可上網的手機.

Web 2.0的最終型態

在辦公室及住家使用Web

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

隨時隨地,不必坐下,行進間,停駐間皆可使用

Web

來自Mobile/Device的挑戰狀 Device的螢幕大小只有2 ~ 4吋,如何設計符合尺寸且可輕鬆操作的網站?

Device的GPRS/3G/3.5G上網費用昂貴,且頻寬有限,如何設計出她們可有效得到/分享資訊,省錢的網站內容?

Device的CPU/RAM配備不比桌上型/筆記型,如何避免設計出其無法快速解譯的網站?

So, Let’s go to Mobile Web 2.0

Mobile Web 2.0 Mobile Web 2.0基礎定義與Web 2.0相同,但內涵不同

Mobile Web 2.0分成兩個區塊,一是瀏覽器,二是原生應用程式

HTML/CSS/JavaScript

Native Application

Mobile Web 2.0

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 (台哥大)

ASP.NET Mobile Web Controls Visual Studio 2008 已不再支援Mobile Web Controls的設計時期

Visual Studio 2008 也不再提供Mobile Web Form Controls的

這代表什麼?

因為多數網站不會專為Mobile設計網頁.

Mobile上的瀏覽器已經能夠處理為桌上型設計的網頁

那我們還要繼續使用Mobile Web 嗎?

開發前的準備 安裝Virtual PC 2007

安裝此軟體的目的在於虛擬網路卡

設定模擬器的網路

測試是否可連上本機

ASP.NET in Mobile 如何識別來訪者的裝置?

ViewState的可怕之處

善用Session來減少流量

可以用AJAX嗎? 怎麼用?

使用ASP.NET AJAX Controls

WM 6 With Opera

WM 6.5 With IE&Opera

JQuery支援Mobile Web嗎?

製做適合Mobile的網頁 UI介面的設計

偵測瀏覽器的工作區大小

來點漂亮的UI

IPhone Style Mobile Web

Windows Mobile 6/6.1 的Pocket IE不支援

Transparent PNG

Windows Mobile 6.5的表現較好

製做內層UI介面 準備背景圖

動態生成選單圖

當功能無法於傳統網頁中完成時 iPhone如何在網頁中取得AGPS資料的??

Hami的KiDoWi

Mobile IE支援Active X,這意味著? 我們可以使用Native Code撰寫ActiveX元件來提供AGPS資料供網頁應用程式使用

前提是,我們必須要能事先安裝ActiveX於Mobile裝置上 Opera日後也計畫支援ActiveX,或者我們也可以撰寫plugin

ActiveXHTML/JavaScript Server

AGPS

ASP.NET in Mobile 的不足之處

過於繁複的操作介面

無法背景運作

無謂的網路流量浪費

瀏覽器支援不同

與Native Code的溝通困難

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++

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可輕易的被其它語言及平台所解譯及應用

Web Services由於過度發展,規格呈現複雜化,已經不再是Simple Object Access Protocol了

REST的最佳範本- Facebook 使用.NET Compact Framework取得連絡人資訊

使用REST API取得該連絡人於Facebook的訊息

結合成一個社群

Facebook/our application

黃xx

李 xx

陳xx

林xx

實作 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的提供者 Mobile Web 2.0有兩個角色: 提供者及消費者

提供者提供REST/SOAP API供原生應用程式呼叫,藉此分享訊息及更新狀態

消費者透過REST/SOAP API來取得訊息或更新訊息

橋接的關鍵點: REST/SOAP API

Consumer SOAP/REST Provider

回到商業模式,無入口網頁的獲利模式 REST Providers可以沒有入口網頁

透過橋接,可協助未有REST Provider的網站進入Mobile Web 2.0的世界.

藉由租金,上架費或是單純廣告來獲利

REST Providers

User

Kxtone

Bxd

PxHome

Anytime, Anywhere, 定位系統的加入 於旅行期間,你是否曾看到美麗景色而拍下照片? 你如何透過Mobile Web 2.0分享照片呢?

於逛街期間,你是否因為想找美食而茫然呢?

迷路了,你是否想找一個明燈呢?

於商業街中,你是否為了找某樣東西而走到精疲力盡?

想找人看電影,你是否會害怕找的人沒空,而不敢撥電話呢?

突然想看電影,你是否為了找時刻表及影評而不知所措呢?

定位系統將解決這些問題,這是Mobile Web 2.0的最終應用

Mobile上的定位技術 GPS

可於戶外定位,精準度非常高 缺點是無法於室內定位,這跼限了其只能應用在導航,僅能滿足少量的定位需求

市區因高樓林立,因此很難於街區內定位

CPS 使用基地台定位,精準度不高 優點是不受建築物影響 可滿足多數的定位需求

CPS+GPS 使用CPS做粗估定位,當同一基地台有人使用GPS時,結合其位置及Cell訊號強弱,進行更精確定位

這是Google使用的模式

CPS+GPS Mode

User A(Use CPS)

User A(Use GPS)

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定位的應用程式

RGAPI

Google API

MCC,LAC與CID

關於訊號強度

RIL_GetTowerInfo的dwRxLevel數值

網頁與Native Code的差別 網頁

使用預載的ActiveX取得CPS+GPS資料

使用AJAX上傳至Server端

由Server端取得資訊

優點

可與瀏覽器整合

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

Native Code

優點

簡潔的UI介面

終極應用-Location Based Service 什麼是LBS?

LBS於真實世界的應用 (電影街)電影時刻表的發送與訂票

(美食街)特價美食資訊及預訂

(高速公路)行車資訊

…….

LBS的關鍵技術 CPS+GPS

REST API

Native Application

ActiveX/Plug-In and Browser

實作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

Movies

交通資訊

美食資訊

CHANNELS

Mobile Web 2.0的下一步 AR(Augmented Reality)

雲端與Mobile Web 2.0

為何使用雲端?

Windows Azure平台

SQL Azure平台

AR(Augmented Reality) 什麼是AR

簡稱為擴增實境 主軸在於於現成地圖上提供標示

AR能做什麼? 於導航時,顯示最近的加油站地點及距離 隨著行進,標示點會即時更新

AR的關鍵技術 導航及地圖 圖形辨識? 行進速度預估 圖層技術 群體標示的力量

AR目前的情況 Layer於Android及iPhone都推出了軟體

雲端與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來取用