Silverlight 的一個新案例--紅星大獎 視訊

Silverlight 的一個新案例
http://starawards.mediacorptv.sg/videogallery.htm
紅星大獎 視訊
Star Awards Video Gallery本文章來自於神魂顛倒論壇 http://forum.flash2u.com.tw

什麼是 Silverlight Streaming ?

什麼是 Silverlight Streaming ?

http://silverlight।live.com/

Microsoft® Silverlight™ Streaming by Windows Live™ is a companion service for Silverlight that makes it easier for developers and designers to deliver and scale rich media as part of their Silverlight applications। The service offers web designers and developers a free and convenient solution for hosting and streaming cross-platform, cross-browser media experiences and rich interactive applications that run on Windows™ and Mac. Combined with the ability to create content with Microsoft® Expression Studio and other 3rd party tools, Web designers and content publishers wishing to integrate Silverlight applications into their online properties can enjoy complete control of the end user experience.

還有免費的4GB空間可以申請
http://silverlight.live.com/account/create.aspx


Silverlight Streaming 案例 DEMO

Halo 3 Interactive Game ManualBefore you play the game, master all the controls, weapons, and gameplay modes in the Halo 3 Interactive Game Manual.

Partner-TV: Telling it how it isPartner-TV provides Sales, Marketing and Technical information to Microsoft’s Partners throughout the UK and beyond.

Roxio BuzzRoxio Buzz makes publishing video clips and photo-slideshows to the Web fun and easy, now updated with support for Silverlight Streaming।

一些相關資源

About Silverlight Streaming: To learn more about the benefits of Microsoft® Silverlight™ Streaming by Windows Live™, visit the Silverlight Streaming page on microsoft.com/silverlight.

For Developers and Designers: To learn more about how to program Microsoft® Silverlight™ Streaming by Windows Live™ please review the SDK on dev.live.com/silverlight.

Learn about Microsoft Silverlight: Explore the possibilities of Microsoft® Silverlight™, a cross-browser, cross-platform plug-in for delivering the next generation of media experiences and rich interactive applications (RIAs) for the Web, visit microsoft.com/silverlight.

使用上若有疑問,也可以參考這邊的設定玩玩Silverlight streaming


http://61.30.28.35/ajun/archive/2007/06/20/51452.aspx
如果你裝了Microsoft Expression Media Encoder Preview後卻發現沒有template的話主要是語系的問題,直接將安裝資料夾中的Template\en的資料夾複製一份並命名為zh-tw(如果你的是繁體中文的作業系統的話),(Template放置的資料夾 : C:\Program Files\Microsoft Expression\Media Encoder 1.0\Templates\en)

manifest.xml

StartWithParentMicrosoftAjax।jsPreviewMedia।jsEmePlayer.jsplayer.jsstartPlayer.js


期待Silverlight 1.1

期待Silverlight 1.1

轉載自: 賴榮樞

微軟日前正式發表Silverlight 1.0,並且展示了很多利用Silverlight 1.0技術的商業網站,例如MLB網站的影片,和微軟的Halo 3預覽網站HD版)、Tafiti.comMSN Podium '08

微軟沒有忘記必須讓Silverlight跨平台、跨網頁瀏覽器,因此Silverlight的runtime不僅有Windows和Mac版本,也會有Linux版,而Mono專案團隊將會負責實作開放源碼版的Silverlight 1.0和1.1;開放源碼版本的Silverlight的專案代號是Moonlight。Mono是由Novell贊助的Linux版।NET平台,有趣的是專案代號Moonlight。如何有趣?一是銀光、一是月光;再者,把Mono的最後兩個字母調換就變成Moon了不是嗎?Moonlight不僅能在Linux套件執行,而且將支援Firefox、Konqueror、Opera。再者,Moonlight 1.0會如同Silverlight 1.0支援JavaScript程式開發架構,而Moonlight 1.1則會向Silverlight 1.1完整支援.NET架構。

隨著1।0的推出,微軟也正加快Silverlight 1.1的開發。Silverlight 1.1將會包含跨平台版本的.NET Framework,支援WPF的UI開發架構(包括可擴充的控制項架構、版面配置的管理、資料繫結、控制項面板、更多內建的控制項)。Silverlight 1.1也包含了目前開發人員使用的完整.NET Frameworkr基底類別庫的子集,能支援集合、泛型、IO、HTML DOM、XML、本機儲存、LINQ,以及sockets、Web Services、REST等網路功能。包含跨平台版本的.NET Framework,意味著開發人員可以利用任何.NET語言(VB、C#、JavaScript、Python、Ruby等等)來開發Silverlight程式。

目前如果想要開發Silverlight 1.0的程式,可以利用任何的文字編輯器-_-;或者以Visual Studio 2008/Visual Web Developer Express 2008 Beta 2搭配JavaScript Intellisense for Silverlight 1.0(這比利用文字編輯器hard coding方便許多)。

如果現在就已經著眼於Silverlight 1.1,可以下載Silverlight Tools for Visual Studio 2008 Alpha和Express Blend Preview。參考資料
Silverlight 1.0 Released and Silverlight for Linux Announced / Scott Guthrie
Microsoft/Novell Collaboration on Silverlight / Miguel de Icaza

Silverlight 完全中文解決方案

Silverlight 完全中文解決方案

作者:黃忠成

問題的起源
如你所知,Silverlight 具備相當完善的 2D 向量繪圖及動畫能力,而且擁有了通往 RIA 世界最重要的完整程式架構支援,但是一旦想將其應用在實務的網頁開發上時,你馬上會陷入到 Silverlight 目前無法顯示中文的窘境之中!!事實上,Silverlight 在顯示中文上並沒有問題,只是其 Runtime 並未內建中文字型,導致所有的中文字都會因缺乏字型的緣故而顯示成一個個的小方框,解決這個問題的方案也不是沒有,本文就一一細數目前在 Silverligh 上顯示中文的解決方案。

解法一:下載字型或是 ODTTF(XPS)
雖然 Silverlight Runtime 中未內建中文字型,不過倒是提供了字型下載的功能,Silverlight Runtime 支援 TTF 及 ODTTF(XPS) 等兩種字型,我們可以使用 Downloader 物件來下載包含字型的 ZIP 檔案,然後以 setFontSource 函式將字型指定給 TextBlock,如此便能顯示中文字了,詳細的做法可以參考 Silverlight SDK 的說明文件。但如你所知的,字型本身有著授權的問題,你不能下載未經授權的字型到客戶端,這意味著除非微軟同意,否則我們不能在網站上提供如 Windows 之細明體、標楷體等字型下載,當然!轉成 XPS 後所粹取出的 ODTTF 也是受到同樣限制的。

解法二:Path
微軟的周旺暾先生提出了下載字型外的另一種解法,那就是使用 Path 物件,他提出了兩種使用 Path 物件來顯示中文的方法,一是使用 Blend 將中文直接轉成 Path,這個方法的確可行,但只適用於靜態字之顯示。二是於網站伺服器上安裝 .NET Framework 3.0,利用 WPF API 動態將指定文字轉成 Path 後回傳給客戶端,此法可適用於靜態或是動態之文字顯示,詳細請參考旺暾兄之 Blog:http://blogs.msdn.com/wtchou/

解法三:圖型
圖形解法是我於前幾個月所提出的解法,簡單的說就是在伺服器端將文字輸出成圖形,回傳至客戶端指定給 Image 物件來顯示中文,詳細請參考我的 Blog:http://blog.csdn.net/Code6421/archive/2007/08/09/1733745.aspx

為何不在 Runtime 內嵌中文字型?
老實說,除了下載字型外,使用 Path 或是圖形都只能算暫解燃眉之急的解法,畢竟 TextBlock 控件才是 Silverlight 用來顯示文字的主要控件,以 Path 來說,雖然支援換行上不是問題,但是若要兩行顏色或是字體不同,那就傷腦筋了!圖形也有著同樣的問題,如何算出輸出文字後圖形的大小,頁面上又該如何調配都是問題,即使能夠克服,也必須花上不少時間!總歸一句話,只要 Silverlight Runtime 內嵌中文字型,一切的問題都迎刃而解,但這樣一來,Silverlight Runtime 就不可能低於 2MB,畢竟中文字博大精深,每個字型檔少說都要 8~9MB,就算用 ZIP 壓縮後也要 4~5MB,更不用談要支援繁簡兩種字型了,若再將其它語系算進去的話,那這個 Runtime 可以說是大怪物一隻了,別忘了!Silverlight Runtime 是要能夠執行於所有語系之系統上的!因此,Silverlight Runtime 內嵌中文字型的方式在實務上是不可行的,那又該如何是好呢?我認為應該循視情況下載字型的方向走,當觀看一個繁體中文的 Silverlight 網頁時,若使用者的 Silverlight Runtime 未下載所需要的字型,那麼就提示該使用者並自動由某一網站下載字型,這個某一網站可以是開發者的,也可以是微軟的,不過!這個假設建立在一個前題之下,那就是下載字型的動作必須是合法的。

評估使用免費字型的可能性
好了!你現在應該由抱怨微軟不在 Silverlight Runtime 內嵌中文字型慢慢轉成抱怨微軟不在推出 Silverlight Runtime 時開放某些中文字型的授權了,事實上!就我所得到的消息,微軟目前正在研擬修改字型授權,未來各位可能可以將某些特定字型放在 Silverlight 網站上供人下載或是由微軟網站下載而不觸法,但是處理這件事需要一些時間,誰也說不準得花上多久。在這之前,除了使用 Path 或圖形外,我們也可以朝向找尋完全免費授權之免費字型的方向前進,目前筆者能找到的、並確定能使用在 Silverlgiht 的免費中文字型如下:

王漢宗老師:http://briian.com/?p=290
吳老師:ftp://cle.linux.org.tw/pub2/fonts/cwttf/center
文鼎捐贈給自由軟體界的四套字: http://cle.linux.org.tw/fonts/Arphic/
PS:內含兩套簡體字。
雖然王漢宗老師所提供的字型較多且完整,但因為與文鼎有一些法律上的糾紛待處理,所以若你是要用於商業網站上,還是建議使用吳老師或是文鼎所提供的字型,另外!請特別注意一點,Silverlight 的 FontFamily 必須使用英文名稱,以文鼎 PL 中楷來說,FontFamily 必須設定為【AR PL KaitiM Big5】。

當字型、授權不是問題時
OK,現在字型及授權都不是問題了,問題在於你還是得寫下一些 JavaScript 程式碼,使用 Downloader 物件來下載需要的字型,並設定給 TextBlock,這雖然不難,但就是有點繁瑣,基於前次開發 Silverlight DataBindings 技術的經驗,我設計了一組 JavaScript Library 來協助各位更容易的在 Silverlight 上顯示中文。

方便的 JavaScript Library : FontHelper
FontHelper 提供了 Font Bindings 技術,讓你可以直接於 XAM L之 TextBlock 的 Tag 中指定要使用何種字型,如下例:





【DBCS】是 FontHelper 辨識該 TextBlock 是否需要下載字型的關鍵字,【:】號之後的是字型壓縮檔的檔名,此檔案必須放在 Silverlight 網站下,以本例來說是放在網站的根目錄下,【;】後的是修飾字,FontHelper 支援使用者指定一個 default 字型,以本例來說,接下來的 TextBlock 只要以下例方式宣告,就可直接使用 cwkai.zip 的字型。





當呼叫了 FontHelper 物件的 initialize 函式後,其將會搜尋頁面上的 TextBlock 控件,並一一為其下載需要的字型,那麼何時呼叫 initialize 函式呢?在這之前你得先引用 SLFH.js 到你的 Silverlight 網頁中 (此檔可於範例檔中的 SilverlightJSApplication1 或是 SilverlightJSApplication2 等目錄中找到),如下例:

Default.html





SilverlightJSApplication1
















然後在 handleLoad 事件中建立 FontHelper 並呼叫 initialize 函式,如下例:

.xaml.js


handleLoad: function(plugIn, userContext, rootElement)
{
this.plugIn = plugIn;
this.button = rootElement.children.getItem(0);
//建立Font Helper 物件
this.fh = new SilverlightHelper.FontHelper(rootElement);
//呼叫initialize函式,掃描Page 上所有的TextBlock控件,並自動下載字型
this.fh.initialize();;
}


這是靜態字型的使用方式,倘若我想在 JavaScript 中直接使用其它字型呢?FontHelper 提供了 setTextWithFont 函式能幫你達到這個需求。

.xaml.js


//呼叫setTextWithFont來設定TextBlock的字型及文字
//參數:
// setTextWithFont(,<要設定的文字>,<下載的字型>,<字型的FontFamily名稱>)
//
//PS: setTextWithFont不會重覆下載已經下載過的字型!!
this.fh.setTextWithFont(sender.findName("DynamicText"),
"我是動態設置的字","cwfs.zip","cwTeXFangSong");


setTextWithFont 會幫你下載指定的字型到客戶端,並設定指定的文字及 FontFamily,更好的是她會顯示 目前字型的下載進度於畫面上。好了,了解 FontHelper 的大概使用方法後,下面是個實際的例子,你可以在範例壓縮檔中的 SilverlightJSApplication1 目錄中找到這些檔案。

Default.html





SilverlightJSApplication1














Default.html.js


function createSilverlight()
{
var scene = new SilverlightJSApplication1.Scene();
Silverlight.createObjectEx({
source: 'Scene.sxaml',
parentElement: document.getElementById('SilverlightPlugInHost'),
id: 'SilverlightPlugIn',
properties: {
width: '400',
height: '400',
background:'#ffffffff',
isWindowless: 'false',
version: '0.8'
},
events: {
onError: null,
onLoad: Silverlight.createDelegate(scene, scene.handleLoad)
},
context: null
});
}

if (!window.Silverlight)
window.Silverlight = {};

Silverlight.createDelegate = function(instance, method) {
return function() {
return method.apply(instance, arguments);
}
}


Scene.xaml





Storyboard.TargetName="highlightEllipse"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />


Storyboard.TargetName="highlightEllipse"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />


Storyboard.TargetName="highlightEllipse"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />


Storyboard.TargetName="highlightEllipse"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />




Width="120" Height="44" Stroke="#46000000">







Canvas.Left="17" Canvas.Top="12" Foreground="#FFEFEFEF" Text="我是中文"
FontFamily="cwTeXKai" FontSize="24" Tag="DBCS:cwkai.zip;default" />
FontSize="26" Text="格式化中文測試" Tag="DBCS:default">


FontHelper 完全支援 TextBlock的Run指令



斜體目前仍無法處理



粗體字也無法處理



Canvas.Top="280"
FontFamily="cwTeXKai"
FontSize="42"
Tag="DBCS:default">
漸層中文字















Fill="#00FFFFFF" Name="highlightEllipse" Canvas.Left="3" Canvas.Top="3"/>




Scene.xml.js


if (!window.SilverlightJSApplication1)
window.SilverlightJSApplication1 = {};


SilverlightJSApplication1.Scene = function()
{
}

SilverlightJSApplication1.Scene.prototype =
{
handleLoad: function(plugIn, userContext, rootElement)
{
this.plugIn = plugIn;
this.button = rootElement.children.getItem(0);

this.button.addEventListener("MouseEnter",
Silverlight.createDelegate(this, this.handleMouseEnter));
this.button.addEventListener("MouseLeftButtonDown",
Silverlight.createDelegate(this, this.handleMouseDown));
this.button.addEventListener("MouseLeftButtonUp",
Silverlight.createDelegate(this, this.handleMouseUp));
this.button.addEventListener("MouseLeave",
Silverlight.createDelegate(this, this.handleMouseLeave));

//建立Font Helper 物件
this.fh = new SilverlightHelper.FontHelper(rootElement);
//呼叫initialize函式,掃描Page 上所有的TextBlock控件,並自動下載字型
this.fh.initialize();;
},

// Sample event handlers
handleMouseEnter: function(sender, eventArgs)
{
// The following code shows how to find an element by name and call a method on it.
var mouseEnterAnimation = sender.findName("mouseEnter");
mouseEnterAnimation.begin();
},

handleMouseDown: function(sender, eventArgs)
{
var mouseDownAnimation = sender.findName("mouseDown");
mouseDownAnimation.begin();
},

handleMouseUp: function(sender, eventArgs)
{
var mouseUpAnimation = sender.findName("mouseUp");
mouseUpAnimation.begin();

// Put clicked logic here
alert("clicked");
//呼叫setTextWithFont來設定TextBlock的字型及文字
//參數:
// setTextWithFont(,<要設定的文字>,<下載的字型>,<字型的FontFamily名稱>)
//
//PS: setTextWithFont不會重覆下載已經下載過的字型!!
this.fh.setTextWithFont(sender.findName("DynamicText"),
"我是動態設置的字","cwfs.zip","cwTeXFangSong");
},

handleMouseLeave: function(sender, eventArgs)
{
var mouseLeaveAnimation = sender.findName("mouseLeave");
mouseLeaveAnimation.begin();
}
}


下圖是執行畫面。



點選按鈕後的畫面。



PS:目前 Silverlight Runtime 1.0 似乎有著一個 Bug,那就是在設定 setFontSource 後, 如粗體、斜體等修飾樣式都將無法使用,即使強制再設定也一樣,此問題不僅發生在中文字型,英文字也一樣。

當字型大小成為問題時
有了 FontHelper 及免費字型的幫忙,相信在你的 Silverlight 網站上使用中文已經不是大問題了,現在的問題是變成是字型檔大小,先讓我們看一下前例於 FireFox 上執行時的流量。



很可怕是吧,這樣一個網頁要價 6.98MB,其實光是字型檔就得要 6.95MB 了,對多數用戶來說,這是無法承受的沉重負擔!

使用 ODTTF
如果字型大小對你或是客戶而言是一個困擾的話 (大部份是),那麼 ODTTF 檔案可能會是解決方案之一,當你的電腦上安裝了 .NET Framework 3.0 時,其順便也為你安裝了 XPS Document Writer 工具,此工具以虛擬印表機的方式呈現,她可以讓你將 Word 檔案輸出成 XPS 檔案,一旦有了這個 XPS 檔案後,我們便可以由其中粹取 ODTTF 檔,這個 ODTTF 檔中包含了該 Word 檔案中所使用的字型,與 TTF 不同,ODTTF 中僅包含用到的字型,所以檔案自然小上許多。以將前例來說,首先我們必須將需要的字型安裝到 Windows 系統中,請以檔案總管開啟 Windows\Fonts 資料夾,由選單之檔案|安裝新字型來安裝所需要的字型:





接著準備一個 Word 檔案,內容如下,請注意!字體要選擇所需要的。





完成後選擇列印。



點選確定後選擇存檔位置。



待輸出完成後,請該檔案之副檔名由 .xps 改成 .zip,解壓後可於其中找到 .ODTTF 的檔案。



將這三個檔案再壓縮成一個 zip 檔案,將檔名取為 partialFonts.zip,放到 SilverlightJSApplication1 的目錄下,然後修改 Sence.xaml 及 Sence.xaml.js 如下。

Sence.xaml





Storyboard.TargetName="highlightEllipse"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />


Storyboard.TargetName="highlightEllipse"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />


Storyboard.TargetName="highlightEllipse"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />


Storyboard.TargetName="highlightEllipse"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />




Height="44" Stroke="#46000000">







Canvas.Top="12" Foreground="#FFEFEFEF" Text="我是中文"
FontFamily="cwTeXKai" FontSize="24" Tag="DBCS:partialFonts.zip;default" />
FontSize="26" Text="格式化中文測試" Tag="DBCS:default">


FontHelper 完全支援 TextBlock的Run指令



斜體目前仍無法處理



粗體字也無法處理



Canvas.Top="280"
FontFamily="cwTeXKai"
FontSize="42"
Tag="DBCS:default">
漸層中文字















Fill="#00FFFFFF" Name="highlightEllipse" Canvas.Left="3" Canvas.Top="3"/>





Sence.xaml.js


if (!window.SilverlightJSApplication1)
window.SilverlightJSApplication1 = {};


SilverlightJSApplication1.Scene = function()
{
}

SilverlightJSApplication1.Scene.prototype =
{
handleLoad: function(plugIn, userContext, rootElement)
{
this.plugIn = plugIn;
this.button = rootElement.children.getItem(0);

this.button.addEventListener("MouseEnter",
Silverlight.createDelegate(this, this.handleMouseEnter));
this.button.addEventListener("MouseLeftButtonDown",
Silverlight.createDelegate(this, this.handleMouseDown));
this.button.addEventListener("MouseLeftButtonUp",
Silverlight.createDelegate(this, this.handleMouseUp));
this.button.addEventListener("MouseLeave",
Silverlight.createDelegate(this, this.handleMouseLeave));

//建立Font Helper 物件
this.fh = new SilverlightHelper.FontHelper(rootElement);
//呼叫initialize函式,掃描Page 上所有的TextBlock控件,並自動下載字型
this.fh.initialize();;
},

// Sample event handlers
handleMouseEnter: function(sender, eventArgs)
{
// The following code shows how to find an element by name and call a method on it.
var mouseEnterAnimation = sender.findName("mouseEnter");
mouseEnterAnimation.begin();
},

handleMouseDown: function(sender, eventArgs)
{
var mouseDownAnimation = sender.findName("mouseDown");
mouseDownAnimation.begin();
},

handleMouseUp: function(sender, eventArgs)
{
var mouseUpAnimation = sender.findName("mouseUp");
mouseUpAnimation.begin();

// Put clicked logic here
alert("clicked");
//呼叫setTextWithFont來設定TextBlock的字型及文字
//參數:
// setTextWithFont(,<要設定的文字>,<下載的字型>,<字型的FontFamily名稱>)
//
//PS: setTextWithFont不會重覆下載已經下載過的字型!!
//this.fh.setTextWithFont(sender.findName("DynamicText"),
//"我是動態設置的字","cwfs.zip","cwTeXFangSong");
this.fh.setTextWithFont(sender.findName("DynamicText"),
"我是動態設置的字","partialFonts.zip","cwTeXFangSong");
},

handleMouseLeave: function(sender, eventArgs)
{
var mouseLeaveAnimation = sender.findName("mouseLeave");
mouseLeaveAnimation.begin();
}
}



完成後執行,使用 FireFox 的流量分析如下所示。



只需 67KB,很戲劇化的結果是吧。

字型部份下載:XPS Font Service
使用 ODTTF 的優點是字型檔較小,缺點則是必須仰賴 Word 及 XPS Document Writer 來製作 ODTTF 檔案,在需要由資料庫或是與使用者互動來動態顯示中文字的應用上,這種解法就完全不適用了!當然,你可以事先準備較多的中文字,但這畢竟不是 100% 完整的解法!!那麼到頭來還是得下載所有字型了嗎?不見得!我們能用WPF將字轉成 Path,當然也能如法泡製將字轉成 XPS,然後粹取出 ODTTF 後壓縮回傳到客戶端,當然!前題得先在網站伺服器上安裝 .NET Framework 3.0,下面列出 Font Services 及使用她的 GetFontsXPS.aspx、及 ZIP 壓縮解壓縮部份 (此處使用 SharpZipLib 這個免費的 Zip 物件庫,可以在 http://www.icsharpcode.net/OpenSource/SharpZipLib/ 取得) 的原始碼,你可以在範例壓縮檔的 SilverlightJSApplication2 中找到她們。

FontServces.cs


using System;
using System.ComponentModel;
using System.Configuration;
using System.Collections;
using System.Collections.Generic;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Windows;
using System.Globalization;
using System.Windows.Media;
using System.IO.Packaging;
using System.IO;
using System.Windows.Xps;
using System.Printing;
using System.Windows.Xps.Packaging;
using System.Text;
using System.Reflection;
using System.Security.Permissions;

public class FontService
{
private static Dictionary _fontMapping = new Dictionary();

static FontService()
{
//王老師的字型(由於與文鼎有些爭議未決,建議多使用吳老師的)
_fontMapping.Add("HanWangMingLight", "王漢宗細明體繁");
_fontMapping.Add("HanWangMingMedium", "王漢宗中明體繁");
_fontMapping.Add("HanWang WeiBeiMedium-Gb5", "王漢宗中魏碑簡");
_fontMapping.Add("HanWang FangSongMedium-Gb5", "王漢宗中仿宋簡");
//吳老師的字型
_fontMapping.Add("cwTeXHeiBold", "cwTeXHeiBold");
_fontMapping.Add("cwTeXFangSong", "cwTeXFangSong");
_fontMapping.Add("cwTeXKai", "cwTeXKai");
_fontMapping.Add("cwTeXYen", "cwTeXYen");
_fontMapping.Add("cwTeXMing", "cwTeXMing");
}

//create xps.
private DrawingVisual CreateDrawingVisualText(string formattedText,
string fontName, CultureInfo ci)
{
// Create an instance of a DrawingVisual.
DrawingVisual drawingVisual = new DrawingVisual();

// Retrieve the DrawingContext from the DrawingVisual.
DrawingContext drawingContext = drawingVisual.RenderOpen();

// Draw a formatted text string into the DrawingContext.
drawingContext.DrawText(
new FormattedText(formattedText,
ci,
FlowDirection.LeftToRight,
new Typeface(fontName),
12, Brushes.Black),
new Point(200, 116));

// Close the DrawingContext to persist changes to the DrawingVisual.
drawingContext.Close();
return drawingVisual;
}


private void VisualToXps(string fileName, string formattedText,
string fontName, CultureInfo ci)
{

Package package = Package.Open(fileName, FileMode.Create);
{
XpsDocument doc = new XpsDocument(package, CompressionOption.SuperFast);
{

XpsDocumentWriter writer = XpsDocument.CreateXpsDocumentWriter(doc);
writer.Write(CreateDrawingVisualText(formattedText, fontName, ci));
}
doc.Close();
}
package.Close();
}


private FileStream BuildFontFont(string formattedText, string fontName, CultureInfo ci)
{
string key = Guid.NewGuid().ToString();
if (!Directory.Exists(HttpRuntime.AppDomainAppPath + "App_Data\\TempFonts"))
Directory.CreateDirectory(HttpRuntime.AppDomainAppPath + "App_Data\\TempFonts");
string basePath = HttpRuntime.AppDomainAppPath + "App_Data\\TempFonts\\";
VisualToXps(basePath + "\\" + key + ".xps", formattedText, fontName, ci);
Compression.UnZipClass unZip = new Compression.UnZipClass();
string fileName = unZip.UnZip(basePath + "\\" + key + ".xps", basePath);
File.Delete(basePath + "\\" + key + ".xps");
Compression.ZipClass Zip = new Compression.ZipClass();
Zip.ZipFile(fileName, HttpRuntime.AppDomainAppPath + "CachedFonts\\" +
key + ".zip", 8, 8192);
File.Delete(fileName);
return new FileStream(HttpRuntime.AppDomainAppPath + "CachedFonts\\" +
key + ".zip", FileMode.Open, FileAccess.Read);
}

private void DeleteOutDateFonts()
{
foreach (string item in Directory.GetFiles(
HttpRuntime.AppDomainAppPath + "CachedFonts\\"))
{
DateTime dt = File.GetCreationTime(item);
TimeSpan ts = DateTime.Now - dt;
if (ts.Hours > 2)
File.Delete(item);
}
}

public FontService(Page page)
{
page.Load += new EventHandler(page_Load);
}

void page_Load(object sender, EventArgs e)
{
Page page = (Page)sender;
if (!String.IsNullOrEmpty(page.Request.QueryString["FontName"]))
{
DeleteOutDateFonts();
string fontName = page.Request.QueryString["FontName"];
string texts = page.Server.UrlDecode(Encoding.Default.GetString(
Convert.FromBase64String(page.Request.QueryString["Data"])));
if (_fontMapping.ContainsKey(fontName))
fontName = _fontMapping[fontName];
FileStream fs = BuildFontFont(texts, fontName,
CultureInfo.GetCultureInfo("zh-TW"));
fs.Close();
page.Response.Clear();
page.Response.Write("CachedFonts/" + Path.GetFileName(fs.Name));
page.Response.End();
}
}
}



DeCompress.cs


using System;
using System.Text;
using System.Collections;
using System.IO;
using System.Diagnostics;
using System.Runtime.Serialization.Formatters.Binary;
using System.Web;

using ICSharpCode.SharpZipLib.BZip2;
using ICSharpCode.SharpZipLib.Zip;
using ICSharpCode.SharpZipLib.Zip.Compression;
using ICSharpCode.SharpZipLib.Zip.Compression.Streams;
using ICSharpCode.SharpZipLib.GZip;
using ICSharpCode.SharpZipLib.Checksums;


namespace Compression
{
public class UnZipClass
{
public string UnZip(string fileName,string basePath)
{
string name = string.Empty;
using (FileStream inputStream = new FileStream(fileName,
FileMode.Open, FileAccess.Read))
{
ZipInputStream s = new ZipInputStream(inputStream);

ZipEntry theEntry;
while ((theEntry = s.GetNextEntry()) != null)
{
string directoryName = Path.GetDirectoryName(theEntry.Name);
if (directoryName == "Resources")
{
if (!Directory.Exists(
HttpRuntime.AppDomainAppPath + "App_Data\\TempFonts"))
Directory.CreateDirectory(
HttpRuntime.AppDomainAppPath + "App_Data\\TempFonts");
FileStream fs = File.Create(basePath+"\\"+
Path.GetFileName(theEntry.Name));
name = fs.Name;
int size = 2048;
byte[] data = new byte[2048];
while (true)
{
size = s.Read(data, 0, data.Length);
if (size > 0)
fs.Write(data, 0, size);
else
break;
}
fs.Close();
break;
}
}
s.Close();
}
return name;
}
}


public class ZipClass
{
public void ZipFile(string FileToZip, string ZipedFile,
int CompressionLevel, int BlockSize)
{
FastZip fz = new FastZip();
fz.CreateZip(ZipedFile, Path.GetDirectoryName(FileToZip), false,
Path.GetFileName(FileToZip));
}
}
}



GetFontsXPS.aspx.cs


using System;
using System.ComponentModel;
using System.Configuration;
using System.Collections;
using System.Collections.Generic;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Windows;
using System.Globalization;
using System.Windows.Media;
using System.IO.Packaging;
using System.IO;
using System.Windows.Xps;
using System.Printing;
using System.Windows.Xps.Packaging;
using System.Text;
using System.Reflection;
using System.Security.Permissions;



public partial class GetFontsXPS : System.Web.UI.Page
{
private FontService _fontServices = null;

public GetFontsXPS()
{
_fontServices = new FontService(this);
}
}



Font Services 的設計是希望透過 ASP.NET 接收客戶端所傳上來的 FontName 及 Data 參數來動態產生 XPS,然後粹取出 ODTTF 後再壓縮後回傳給客戶端,基於必須由 JavaScript 將中文字送上來的緣故,Data 參數必須在 JavaScript 端轉成 Base64 後才能送上來解碼,FontHelper 提供了這些功能。

FontHelper 於 XPS Font Service
FontHelper 支援使用 XPS Font Service,SilverlightJSApplication2 就是使用 XPS Font Service 的例子。

Scene.xaml





Storyboard.TargetName="highlightEllipse"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />


Storyboard.TargetName="highlightEllipse"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />


Storyboard.TargetName="highlightEllipse"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />


Storyboard.TargetName="highlightEllipse"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />




Width="120" Height="44" Stroke="#46000000">







Canvas.Top="12" Foreground="#FFEFEFEF" Text="我是中文"
FontFamily="cwTeXKai" FontSize="24" Tag="XPS:GetFontsXPS.aspx?FontName=cwTeXKai" />
Text="格式化中文測試" Tag="XPS:GetFontsXPS.aspx?FontName=cwTeXKai">

FontHelper 完全支援 TextBlock的Run指令

斜體目前仍無法處理

粗體字也無法處理


Canvas.Top="280"
FontFamily="cwTeXKai"
FontSize="42"
Tag="XPS:GetFontsXPS.aspx?FontName=cwTeXKai">
漸層中文字





















Secne.xaml.js


if (!window.SilverlightJSApplication1)
window.SilverlightJSApplication1 = {};


SilverlightJSApplication1.Scene = function()
{
}

SilverlightJSApplication1.Scene.prototype =
{
handleLoad: function(plugIn, userContext, rootElement)
{
this.plugIn = plugIn;
this.rootElement = rootElement;
this.button = rootElement.children.getItem(0);

this.button.addEventListener("MouseEnter",
Silverlight.createDelegate(this, this.handleMouseEnter));
this.button.addEventListener("MouseLeftButtonDown",
Silverlight.createDelegate(this, this.handleMouseDown));
this.button.addEventListener("MouseLeftButtonUp",
Silverlight.createDelegate(this, this.handleMouseUp));
this.button.addEventListener("MouseLeave",
Silverlight.createDelegate(this, this.handleMouseLeave));
var fh = new SilverlightHelper.FontHelper(rootElement);
fh.initialize();
},

// Sample event handlers
handleMouseEnter: function(sender, eventArgs)
{
// The following code shows how to find an element by name and call a method on it.
var mouseEnterAnimation = sender.findName("mouseEnter");
mouseEnterAnimation.begin();
},

handleMouseDown: function(sender, eventArgs)
{
var mouseDownAnimation = sender.findName("mouseDown");
mouseDownAnimation.begin();
var fh = new SilverlightHelper.FontHelper(this.rootElement);
var input = document.getElementById("DyanmicInput");
if(input && input.value && input.value != '')
fh.setTextWithXPS(sender.findName("DynamicText"),input.value,
"GetFontsXPS.aspx?FontName=cwTeXFangSong","cwTeXFangSong");
else
fh.setTextWithXPS(sender.findName("DynamicText"),
"我是動態由JavaScript設定的","GetFontsXPS.aspx?FontName=cwTeXFangSong","cwTeXFangSong");
},

handleMouseUp: function(sender, eventArgs)
{
var mouseUpAnimation = sender.findName("mouseUp");
mouseUpAnimation.begin();

// Put clicked logic here
alert("clicked");
},

handleMouseLeave: function(sender, eventArgs)
{
var mouseLeaveAnimation = sender.findName("mouseLeave");
mouseLeaveAnimation.begin();
}
}



除了靜態文字外,FontHelper 提供了相對於 setTextWithFont 的 setTextWithXPS 函式可供指定動態文字用,如下所示。


handleMouseDown: function(sender, eventArgs)
{
var mouseDownAnimation = sender.findName("mouseDown");
mouseDownAnimation.begin();
var fh = new SilverlightHelper.FontHelper(this.rootElement);
var input = document.getElementById("DyanmicInput");
if(input && input.value && input.value != '')
fh.setTextWithXPS(sender.findName("DynamicText"),input.value,
"GetFontsXPS.aspx?FontName=cwTeXFangSong","cwTeXFangSong");
else
fh.setTextWithXPS(sender.findName("DynamicText"),
"我是動態由JavaScript設定的",
"GetFontsXPS.aspx?FontName=cwTeXFangSong","cwTeXFangSong");
}



下圖是執行範例。



下圖是輸入文字後,再點選 (我是中文) 按鈕後的執行畫面。



PS:請特別注意,你必須將需要的中文字型安裝到 Windows 中方能使用 XPS Font Services。

就這樣!中文不再是 Silverlight 的致命傷!
就這樣,困擾我們多時的 Silverlight 顯示中文問題,在 XPS Font Services 及免費中文字型及 Font Helper Library 的協助下得以完全解決,在此特別感謝吳老師所提供的免費字型!!未來希望微軟也能開放字型授權,屆時我們會有更多的字型可選擇。

Developer Notes
當你使用 Font Binding Helper 時,於下載字型時發生 Download/Network Error,請檢查 TextBlock 之 TAG 設定值,所要求的檔案可能不在目錄中,亦或是要求的字型未安裝至 Windows 系統中 (Use XPS)。
範例檔中的 Font Binding Helper 及 Font Services 最新版本已支援大量字處理,當要顯示的字大於 100 個時,Font Binding Helper 及 Font Servcies 會自動分批下載並整合 (Downloader 在處理長度過長的 URL 會出現錯誤)。
受限於 Cross-Domain 的設計,Font Services (GetFontsXPS.aspx、FontServcies.cs) 必須與 Silverlight 網頁放在同一網站中。
Font Servcies 會將字型檔案產生於 App_Data\TempFonts 及 CachedFonts 目錄中,因此若你想將 Silverlight 網站安裝到 IIS 中,請預先建立這幾個目錄,並設定目錄存取權限 (以 Windows 2003 來說,必須新增 IIS_WPG 為完全授權使用者)。
吳老師的兩個字型 (楷書與仿宋) 位於範例檔中的 SilverlightJSApplication1 目錄中,以 .zip 方式壓縮,若你想使用 XPS Font Service,請自行解壓後安裝到 Windows 字型中。
本文列出之範例程式碼僅是參考,完整請參照範例檔,若有更新,文章將不另行更新。
因 Visual Studio 2005 之 Silverlight XAML Designer 目前與中文有不相容的問題,若你開啟專案後發現 Scene.xaml 中的中文變成亂碼,那麼請由目錄下我所準備的備份檔 backup_xaml.txt 複製回來。
範例檔下載:http://code6421.myweb.hinet.net /SLFH_Samples.zip (19MB)

深度體驗SilverLight

深度體驗SilverLight

原文地址:http://www.riaexpert.cn/2007/08/30/%e4%bd%93%e9%aa%8csilverlight10rc/

雖說silverlight各種嘗鮮版已經出了N多,可是一直沒有時間好好體驗一下這個M$為RIA界帶來的巨大驚喜。曾經沉浸在Ajax中無法自拔,期盼著WPF這個呼之欲出的RIA救世主;漫長的等待中,陰差陽錯的結識了Flex,才發現原來Flash也有爭奪RIA霸主地位的實力。

今天實際使用silverlight開發了一個像素畫的」Hello World」,可以在右邊按鈕選擇畫筆的顏色。源代碼採用javascript編寫(1.0RC也只支持這個了);詳細的內容請看DEMO,截圖如下:

使用過後,發現silverlight如果要作為真正的RIA開發平台,比起flex還說還是有不短的路要走:

1.在1.0RC中,還沒有行程完成的xaml->object,或是object->xaml的機制,也就是說在你的 business logic code中還不能自由的以Class instance的方式來初始化對像;而是使用簡陋的plug.content.createFromXaml(xamlString)來創建一個 UIElement;與我們常用的new Class的實例化方式有較大區別。

2.雖然可以使用vs2005做一些基於IDE的開發,但是這種vs的支持僅限於intellisense功能;而不支持WYSIWYG的開發方式,無法發揮IDE的真正作用,當然這也是目前silverlight framework中缺少對於繼承於UIElement的控件的支持相關的,下面會說到。

3.最不理解的就是,在silverlight發佈之後,M$並沒有緊跟著推出一個基於silverlight的control library,也就是說,如果你要開發一個RIA應用的話,你首先得自己構建一套統一樣式的client control library,你得從按鈕,下拉列表框開始開發;這個對於RIA應用的開發是不可理喻的缺點,也是致命的弱點,雖然這個特性對於很多「大牛」來說,不屑一顧。

4.缺少對於流行RIA應用特性的支持;雖然現在silverlight支持播放流媒體,可是這樣的流媒體僅僅是單向的;silverlight依賴於windows media server的流媒體能力,並不能實現Flash Media Server一樣,client同server端的雙向流媒體通信;同時缺少對於服務器客戶端通信方面的支持,在這個RIA的年代REST和 Webservice顯然是對於多媒體應用無能為力的。

5.目前來說,開發方法非常怪異;與flex和flash中開發方法對比強烈不同,silverlight中混雜了客戶端應用程序與動畫的不同開發方法,讓人無法適從。不過可能未來M$指望用不同的IDE把不同的開發者分開;動畫開發者使用Expression Blend,應用開發者使用VS.net;可是至少在缺少IDE的情況下,真的很怪……

雖然silverlight標榜自己支持multi language,但是如果指望昔日的frontend engineer會使用ruby,python,甚至c#和vb來開發RIA的話,真是天方夜譚,雖然JScript也被CLI支持,但是這個從來就不被看好的孩子,已經面目全非,形同雞肋了;實際上silverlight的多開發語言,並不能取悅開發者;但在這樣的情況下,微軟非但不在 silverlight中強化javascript的作用,反而將其弱化到了silverlight與browser的粘合劑的地步,這點絕對會引來 RIA最大的潛在開發者–ajax developer的唾棄。

再看flex,雖然使用actionscript3,但是這是與javascript同根生的親兄弟,兩者的差別近乎為0;節省了開發者轉向 flex的時間。同時flex有完備的ide,有完備的UI library,可以快速的構建RIA應用;加上易用的Flash Media Server,也就是說一個普通的ajax developer可以很容易的在flex平台上面實現當初在html+javascript平台上無法實現的很多夢想;

綜上,我們也該看到,雖然silverlight有這樣那樣的缺點,但是以M$操作系統的佔有率,silverlight在部署及性能方面佔有極大的優勢,而以M$的開發經驗,完善silverlight的開發環境及體驗也不是很難的事情;這點,大家可以觀察.net如何在java佔領制高點的情況下奪回中小企業用戶市場的案例,很有啟發。

可憐了開發者的我們,還是只能做牆頭草,把兩個平台都摸清,才能有備無患。

sliverlight和flash/flex的唯一區別

[轉] sliverlight和flash/flex的唯一區別,看了這個新專題的很多關於兩者pk的爭論。
包括藍色老大的說法,都沒有說到點子上。
不要去爭論技術!誰也不是弱者,做出來的東西也各有千秋。
決定他們命運的關鍵在哪裡?關鍵在你我的手上!
flash現在有極高的佔有率,一是瀏覽器上,一個是廣大的開發者。
這兩者有著很微妙的關係,瀏覽器上的高佔有率,決定了用戶(我說的是買家,瀏覽者)習慣了什麼,想要什麼。
用戶自然決定了開發者要作些什麼。
而廣大的開發者,則決定了網上流傳的是些什麼東西,而這些又影響了用戶。兩者相輔相成,水漲船高成就了flash的天下。
臥龍鳳雛得其一 而得天下!
而現在silverlight的命運在哪裡 ?瀏覽器的市場變幻莫測,群雄紛爭。開發者呢?哈哈,就是你我了。這樣說,如果這個論壇越來越火,
作silverlight的人越來越多,則silverlight將蠶食flash/flex,甚至...,但如果觀望者多於實踐者,那就仍然是flash/flex的天下了。
所以說,其實他們的命運在你我手上!

Silverlight搶先預覽(2)Silverlight/RIA不只是炫目的動畫效果

轉載自:http://www.ithome.com.tw/itadm/article.php?c=43367

也歡迎到 Silverlight 區 發表大作

Silverlight在技術生態圈上,可以與既有的ASP.NET、ASP.NET AJAX、JavaScript、WCF、WorkFlow等技術整合,這是Flash或Flex不易達到的。

RIA一詞最早是2002年由Adobe(Macromedia)提出,是以Flash提供向量動畫為基礎的展現層技術,目的是增加使用者互動的多媒體經驗;接著2006年Adobe又發表第二代RIA技術開發平臺Flex,帶給企業與市場執行更為快速、令人讚嘆與容易開發的網站體驗。

微軟過去的網頁開發技術中,一直缺乏向量技術的加持,故RIA領域總是被Adobe搶盡光環。為了加速擁抱RIA,微軟今年推出Silverlight競逐RIA寶座,並藉由廣大的.NET企業與開發人口優勢,希望可以征服已導入.NET技術的企業與使用者。

Silverlight在技術生態圈上,可以與既有的ASP.NET、ASP.NET AJAX、JavaScript、WCF、WorkFlow等技術整合,這是Flash或Flex不易達到的,在.NET的勢力範圍內,Adobe的戰力確實稍弱。

不過,在.NET勢力外,Adobe仍具有極強的競爭力。筆者相信Sliverlight RIA與Adobe RIA,必須歷經好幾個世代較勁,才能夠逐漸顯現出何方是RIA技術的王者。

良好的操作介面,效益無窮
在Adobe RIA技術推出近6年之後,世界上出現不少以Flash或Flex技術為基礎的知名網站,使用者只能以「驚艷」二字形容操作的感覺。然而驚艷只是RIA外顯的一個優點,重點在於愉快而舒服的使用者經驗,讓使用者留下極為深刻的印象,如此便是一個成功的RIA網站設計。

雖然上述文字解釋了使用者經驗,但究其字面上意義仍然過於抽象,讓人摸不著使用者經驗所要傳達的真義。讓我們針對「使用者經驗」一詞,抽絲剝繭,一窺玄妙之處,使用者經驗可以導引出三個重大利益,包括:

效率(Performance):造訪一個使用者經驗良好的RIA網站時,由於網站針對使用者經驗設計與改良,因此瀏覽網站的過程與行為模式是經過最佳化的,包括增進使用者對網站的瞭解度、資訊與商品易於尋找、訂購商品容易度、完成任務迅速等,如此使用者可以在最少時間內,訂購商品或完成工作任務,這是高效率的表現。

生產力(Productivity):由於使用者瀏覽或操作的是效率最佳化的網站,進一步可再導引出兩個層面的意義。第一是使用者層面,能夠在最短時間完成商品訂購,也意謂著使用者可以訂購更多商品,或是完成更多任務。第二是企業層面,網站每分鐘服務顧客的數目提升,每分鐘交易數也增加,這便意謂著生產力的提升。

滿意度(Satisfaction):使用者造訪以RIA精神與技術所設計的網站,留下深刻的印象,自然會提高顧客的回流與再次造訪率,甚至會購買更多的商品,造就使用者與企業滿意度雙贏的局面。

「使用者經驗」不是口號,而是有真實的目的,必須達成某些實質的利益提升,才算是成功的RIA網站,否則充其量只能稱之為美麗的Flash或Flex網站。

RIA利益:增加營收,減少成本
然而使用者經驗只是RIA利益中的一環而非全部,企業網站若導入RIA的設計,依不同企業或網站可以有幾種不同面向的利益:

增加營收:以線上交易為主的商業網站,若要增加營收,必須增加更多的交易量、工作任務的完成率、顧客的回流率等。例如五星級渡假飯店Broadmoor的線上訂房系統便是利用RIA的設計,有了顯而易見的資訊與圖片導引,顧客可以清楚地瞭解各種資訊,成功地加速網站與顧客之間的「對話」,顧客在當下就能夠決定,並快速完成線上訂房,訂房率的提升便促使企業的營收增加。

增加獨特性:以向量動畫為基礎的RIA技術,良好設計可以讓網站的瀏覽與操作更為直覺,較HTML更具高度的客製化能力。而令人激賞與驚嘆的網站畫面設計,可以大幅增加RIA網站與非RIA網站之間的差異性,如此便可以有效捕捉客戶的目光,增進企業在使用者心目中獨特的形象與地位。

迷人的使用者經驗:如何有效提升使用者經驗是一門挑戰與藝術,這絕非是簡單而趨向靜態的HTML技術所能夠辦到的,例如Intelligent Finance是一家抵押借款公司,自從在網站提供一個RIA型式的計算機系統供客戶使用後,使用者可以輕易地透過計算機,瞭解複雜的償還計算公式,也能夠簡單而清楚地知道自己應該如何償還,因此其營收便增加了15%。



Intelligent Finance於網站提供RIA的計算機系統,使用者可以輕易地瞭解複雜的償還計算公式,也能夠簡單地知道應該如何償還,因此營收增加了15%。

增進使用者對網站的瞭解:當企業在網站上提供金融、保險與投資等眾多的商品服務時,複雜的商業規則往往令非專業的小老百姓望之卻步,若能透過資訊的重整與最佳化,利用RIA視覺化地呈現資訊,並融入與顧客互動的能力,可以有效增進使用者對網站的瞭解,自然能夠確保潛在或既有客戶不會流失。

減少支援成本:成本是任何一家企業都關心的話題,RIA系統也能夠有效地減少支援的成本。因為網站若能增進使用者對商品或服務的瞭解,顧客就不需要諮詢客服人員,如此便可以減少客服人員的數量。

除此之外,RIA系統非常強調穩定性、可用性與低錯誤率,例如Yankee Candle是一家線上販賣蠟燭商品的公司,自從導入RIA系統之後,顧客可以在網站完成商品訂購,甚至是客製化的商品訂購,不會因為資訊不清楚、功能可用性低或不穩定等因素,必須透過電話與客服人員訂購商品,而降低了70%的客服人力支援。

RIA設計要務,從使用者經驗開始
RIA要成功,前提是透過殫精竭慮的設計,在使用者經驗設計過程中通常有4種角色的參與:使用者經驗指導者、資訊架構師、視覺化設計師與技術設計專家,這4種角色彼此各有不同職掌與分工,分析既有HTML網站、尋找使用者經驗附加價值、融入RIA向量設計與增進視覺化美感等一連串的工作,藉此創造出一個成功的RIA網站。

RIA設計的首要工作,是先從使用者經驗的設計開始,切莫魯莽行事,以為只要找個美工設計人員,急忙弄出一個很炫的向量網站逕自上線,如此只會導致一個失敗的RIA專案。

而RIA失敗所造成的後果,將隨著企業規模愈大則損失愈大,畢竟系統不穩、使用者經驗不良、效益不明確與顧客流失,是一種難以彌補的災難。

《作者簡介》奚江華
聖殿祭司是奚江華在網路上的名字,熱愛微軟 .NET 技術而創建了一個名為「DotNet開發聖殿」的部落格,以發布.NET相關最新資訊為職志,他同時也是.NET書籍作家、微軟專屬講師、微軟MVP。