2011年4月30日星期六

在Facebook粉絲專頁中設計歡迎頁的功能

正確的 Facebook 歡迎頁 (抵達首頁)設計，能夠讓瀏覽訪客跟已加入成為粉絲這兩者，可以看到內容有差異，尤其若能引起初次造訪者對您的 粉絲專頁 感到興趣，迅速得知主要提供的內容方向為何，以提高訪客點選「讚」變成您的粉絲的機率！

Static FBML 不能使用了

但 Facebook 常常做了很多新的變革，導致原有功能無法繼續使用，例如以往在 粉絲專頁 中要使用 歡迎頁 的功能，大家多半會使用 Static FBML 這個工具，來產生新的頁籤與設定成歡迎頁，但是從2011年3月18日起， Facebook 已經不能夠再建立新的 FBML 應用程式(原有已經建立好的 FBML 依然可以繼續正常使用，雖然不知道哪天會不會突然全面停用…)，那如果新成立的 粉絲專頁 仍想要做 歡迎頁 怎麼辦呢？站長這一陣子試用測試了不少方式，最後推薦大家使用的是「IFRAME APP」這個方法來設計，可以得到最靈活的使用彈性！

推薦使用 IFRAME APP 來設計歡迎頁

「IFRAME APP」是由Widefire這個廠商所開發的 Facebook 免費應用程式，您可以在登入 Facebook 後，點選此網址http://iframes.wildfireapp.com/，會出現如下圖所示的畫面，請點下「Install this app」。

出現授權請求畫面後，請按下同意鈕。

若您有多個 Facebook 的 粉絲專頁 ，請記得在下拉式選單挑選想要加入此功能的 粉絲專頁 名稱，再按下「新增 Widefire iFrames for Pages」鈕。

填入如下圖的欄位資料後，必須勾選同意後，按下「Submit」鈕。

安裝完成後，可以在您的粉絲專頁中看到一個「 Welcome 」的選項，點選此選項後，在右方再點選「Edit Settings」鈕。

進入的設定畫面如下圖所示，若您在「Fan Gate」裡選擇「On」，則會出現「Fans view」與「Non-Fans view」兩種設定區域，意思是代表若已經是粉絲時進入這個 粉絲專頁 ，則會顯示A畫面，若是非粉絲的瀏覽者則會被導入到B畫面( 歡迎頁 )。

至於畫面的產生，可以選擇「Custom Image」來自行上傳圖檔，或是選擇「Custom HTML」來自行輸入HTML標籤或CSS語法(但對於輸入中文支援度似乎會有問題)。

站長的設定式採用較為簡單的模式，將「Fan Gate」裡選擇「Off」，挑選「Custom Image」按下「瀏覽」鈕，上傳一張自己繪製設計的 歡迎頁 圖檔，需為JPG、GIF、PNG三種檔案之一，格式必須為RGB，建議解析度為72DPI，圖檔寬度為520像素，高度則不限(當然也不要真的高到太長太誇張)，完成後按下「Save & Preview」鈕。

上述設定完成後，還要再做一下權限設定，請點選 Facebook 粉絲專頁 裡的「查看全部」。

進入到「權限管理」。

將「訪客抵達預設頁籤」挑選成「 Welcome 」，也就是尚未加入粉絲者會先到看此 歡迎頁 ，按下「儲存」鈕，就完成了全部設定。

之後訪客進入到此 Facebook 粉絲專頁 時，就會出現如下圖的 IFRAME APP 歡迎頁 囉！

在此另外還有一個類似功能叫做「Static HTML: iframe tabs」，也是另一個不錯的 Facebook 歡迎頁 設定工具，網址： https://www.facebook.com/apps/application.php?id=190322544333196&sk=info

2011年4月1日星期五

台科大推廣教育中心-2.5小時讓Expression Studio網頁製作輕鬆上手講座，100元參加體驗價

相信已經有不少人看我的部落格、Facebook、微網誌裡的介紹，或者是經由微軟的宣傳管道得知Expression Studio走唱團活動目前正火熱展開中，但這個活動由於瞄準的是需要有企業或機構單位，且需要一次參加者有10人以上且必須自備場地，對於許多個人、SOHO工作室、微型企業等族群只能望之興嘆無法申請，不過這些族群注意囉！目前您也有個參加機會囉！

台科大推廣教育中心目前與微軟配合，推出唯一一場2.5小時讓Expression Studio網頁製作輕鬆上手講座(錯過就沒啦！之後不曉得還有哪個單位願意主辦咧！)，上述族群想要得知Expression Studio走唱團活動主要都在講啥嗎？想要快速認識Expression Studio的話這是個好機會，台科大僅收參加者每人場地維護費100元，您就可以跟台科大人員一起聽課學習囉！

要報名這個講座，請洽台科大服務人員，課程網址 http://cec.ntust.edu.tw/CourseInfo.aspx?id=1076

對了，另外提醒說明的是，此講座時間總長度應為2.5小時，台科大課程網頁上只標2小時，是因為其系統限制時數不能標小數點，所以才標成2小時，實際講座長度正確的是2.5小時才對啦！歡迎有興趣認識微軟新軟體技術的人前往參加！

台科大推廣教育中心-Blog行銷班

站長新課程又來啦！這次是在台科大推廣教育中心的課程，會帶領您以低成本部落格開始入手開始進行網路行銷，部落格適合寫較為詳細圖文並茂的文章，輔以SEO搜尋引擎曝光技巧可以帶來人潮，並可善用工具進行訪客分析，搭配各類網路資源擴充您的部落格，達成行銷的目的！線上觀看與報名請按此
教學內容：

網路行銷要知道的觀念與模式、看看成功的部落客怎麼做
免費部落格基礎建置快速上手
怎樣寫部落格文章比較好，撰寫工具與方法的運用
部落格美化與數據分析評估
部落格的進階擴充增強戰力，部落格式的商店建立
部落格的SEO優化曝光行銷方法

上課資訊：
起迄時間:2011/05/07-2011/06/11
上課時數:18
上課時段:每週六9：30-12.：30
報名費:NT$200
學費:NT$3,600

適合對象：

具有基本電腦操作與上網經驗者
想要學習網路行銷者
願意花時間以低成本達成行銷目的者
網頁設計人員或行銷人員提昇進修
想要建立公司或單位部落格者
自行創業想以部落格為官網行銷

線上報名請洽台科大推廣教育中心，更多課程細節網址：http://cec.ntust.edu.tw/CourseInfo.aspx?id=1069

2011年3月26日星期六

製作Silverlight的Deep Zoom網頁動畫效果(二)

在上一篇製作Silverlight的Deep Zoom網頁動畫效果(一)裡，我們學習到了不需要寫程式，也可以產生Deep Zoom放大縮小的特效，但若此特效只想要在Expression Blend裡設計的部分區域使用，則可以參考本篇文章，順便也可以藉此了解一下，如何參照額外的.dll檔來進行擴增，以快速加入某些新功能。

請先到Expression gallery 下載 DeepZoom Touch & Mouse這外掛的行為(Behavior)檔案，網址在http://gallery.expression.microsoft.com/DeepZoomTouch/，點選位於右下角的「DOWNLOAD BEHAVIOR」鈕，下載DeepZoomTouch.zip檔案到您的電腦裡。

完成下載後，記得將檔案解壓縮，會看到產生的目錄裡有一個DeepZoomTouch.dll，請記得此檔所在位置。

開啟Expression Blend，在功能表上選擇「檔案 / 新增專案」。

選擇「Silverlight / Silverlight 應用程式+網站」，給予名稱與資料夾位置後，語言選擇C#，版本選擇4.0，按下「確定」鈕。

請先到「專案」裡，在此專案名稱下的「參照」上，按下滑鼠右鍵選擇「新增參照」。

將位置選擇到之前我們下載並解壓縮後的DeepZoomTouch.dll後，按下「開啟舊檔」鈕。

加入參照後，需要執行功能表上的「專案 / 重建專案」。

此時再回到「專案」區裡，就可以看到產生了一個「ClientBin」的資料夾，請在此資料夾上按下滑鼠右鍵，選擇「在Windows檔案總管中開啟資料夾」。

請另外開一個檔案總管，把在上一篇文章裡，使用Deep Zoom Composer產生的檔案(兩個資料夾與一個.xml)進行複製。

將資料複製到剛才在Expression Blend裡，「在Windows檔案總管中開啟資料夾」所打開的資料夾下。

完成後請回到Expression Blend，在「專案」裡「ClientBin」的資料夾上，按下滑鼠右鍵，選擇「重新整理資料夾」。

就可以看到剛剛複製過去的資料。

接著請在「資產 / 位置」裡，挑選「MultiScaleImage」物件，並將此物件使用滑鼠拖曳到「物件與時間軸」裡的「LayoutRoot」下面。

如此「LayoutRoot」下就會顯示出「MultiScaleImage」物件。

維持點選「MultiScaleImage」物件的狀態，在「屬性 / 一般屬性」裡的「Source」按下「選擇影像」鈕。

挑選dzc_output.xml，就可以看到MultiScaleImage物件裡已經有顯示圖片了，您可以再使用工具箱上的「選取」工具，將MultiScaleImage物件移到適當位置以及調整大小。

完成後的MultiScaleImage物件，目前仍是無法支援使用滑鼠滾輪變大變小的DeepZoom效果，還需要到「資產 / 位置 / DeepZoomTouch.dll」裡，將DeepZoomMouse物件拖曳到MultiScaleImage物件下。

完成上述步驟後，請選擇功能表上的「專案 / 執行專案」，到瀏覽器上看一下效果吧！確實可以完成一個局部區域影像的DeepZoom效果，在上面使用滑鼠滾輪，確實可以達成放大縮小的動畫特效。

2011年3月24日星期四

製作Silverlight的Deep Zoom網頁動畫效果(一)

這一次來介紹不需要寫程式，也可以做到酷炫的微軟新型態Silverlight動畫，產生Deep Zoom放大縮小的特效，並了解怎樣在各軟體間切換記行整合運用。

請下載Deep Zoom Composer這個英文版免費軟體，http://www.microsoft.com/downloads/en/details.aspx?familyid=457b17b7-52bf-4bda-87a3-fa8a4673f8bf&displaylang=en，並安裝完成(若您很早之前有完過此軟體，請重新下載安裝，版本有更新)。

開啟Deep Zoom Composer，選擇「New Project」。

設定好名稱與目錄位置，按下「OK」鈕。

在「Import」階段裡，按下「Add image」鈕，匯入幾張您要製作的圖檔。

可匯入圖擋(格式為.tif、.jpg、.bmp、.png)，建議匯入的圖檔解析度需要較高些，未來效果會較佳。

按下到「Compose」階段裡，在下方「Images」區裡，使用「Selection」工具，點選某張圖片，按下滑鼠左鍵不放拖曳到主視覺區裡，移動到合適的位置裡再放開。

在主視覺區裡，使用「Selection」工具，點選某張圖片，會出現8個白色節點，可以將滑鼠游標移至某個白節點上，使用滑鼠左鍵拖曳，以對此圖片進行尺寸大小的調整。

當需要將畫面放大以利調整時，可以使用「Zoon」工具進行畫面放大，若同時按下鍵盤上的「Alt」鍵，則會變成畫面縮小的功能。

需要移動到畫面不同區域時，則可以使用「Pan」工具。

依此類推上述步驟，完成各圖片置入主視覺區的動作

按下到「Export」階段裡。

在「Setting」裡，在「Output type」中選擇「Silverlight Deep Zoom」，「Name」裡輸入您想要的名稱，在「Location」裡按下「Browse…」鈕選擇輸出路徑，「Export options」裡選擇「Expor as a collection(multiple images)」，「Templates」選擇「Deep Zoom Navigation(Default)」，在「Image settings」裡的「Format」裡，可以選擇輸出的圖檔格式為JPEG或PNG，「Quality」裡可以設定圖片壓縮率(數值越小檔案壓縮越小，但品質也會越來越差，本選項若上面選擇成PNG則不會出現)，「Image Width」則可設定圖片寬度尺寸，上述設定確認後，請按下「Export」鈕。

完成後可以按下「View Image Folder」。

可以看到輸出的檔案與目錄。

如果要將剛剛設計的Deep Zoom放到網頁上，可以使用Microsoft Expression Web，開啟一個網頁後，滑鼠游標點選在網頁裡，選擇工具列上的「插入 / 媒體 / Deep Zoom」。

選擇剛剛檔案輸出的目錄位置，點選dzc_output.xml檔案，按下「開啟舊檔」鈕。

會出現如下視窗，可以在此調整關高大小與縮放速度，按下「確認」鈕，系統會產生對應的javascript檔案，即可完成置入Deep Zoom效果物件到網頁裡。

後續若您需要變更此置入物件的寬高大小，可以在此物件上滑鼠左鍵點兩下，會出現ActiveX控制項設定視窗。

若您是希望將此Deep Zoom效果，之後轉到Microsoft Expression Blend裡使用，則在Deep Zoom Composer裡的「Templates」，必須選擇成「Expression Blend 4 + Source」的選項進行匯出，會變成一個可以使用Expression Blend 或Visual Studio開啟的專案檔。