2010年2月18日 星期四

微軟Expression Studio 3多媒體互動及創意設計工具教師培訓營新竹場花絮

筆者應台灣微軟之邀,擔任Expression Studio 3多媒體互動及創意設計工具教師新竹場兩天培訓營講師,地點在新竹市民族路33號教師研習中心2樓電腦教室(東門國小內),來參加的學員都是新竹市國中國小資訊組的老師,微軟是希望用這樣的培訓活動,旁養更多種子教師來達成對微軟軟體使用的推廣傳播。

第一天課程大綱:
‧HTML、XHTML的概念
‧Expression Web 基本操作與檔案管理
‧CSS的概念
‧DIV與CSS版面編排配置
‧Expression Web動態網站範本
‧Expression Web表現方式的運用
‧SuperPreview
‧Expression Web發佈網站與連線網站
‧協助工具與相容性報告、網站摘要
‧Silverlight Deep Zoom

第二天課程大綱:

‧建立Access資料庫
‧Expression Web 簡易ASP.NET程式設計
‧Expression Design基本操作
‧Expression Encoder 3 Screen Capture
‧Expression Encoder to Silverlight
‧Silverlight與WPF的差異與Silverlight Streaming概念
‧Expression Blend UserControl、Group
‧Expression Blend 中的動畫(Animation)、行為(Behavior)、腳本(Storyboard)、時間軸
‧在 Expression Web 插入Silverlight動畫

下面前三張圖是第一天上課的實況,大約有超過40位老師來參加,以電腦現場教學來說算是還蠻大班的編制。
1

這是第一天上課座位坐到滿滿的學習盛況,稍有美中不足的是好像還有些老師在旁邊沒有電腦可以跟著實機練習。
2

至於上課內容,其實12小時要講4個軟體與一些觀念仍是有些緊,只能重點式的帶到(有些軟體可能老師們平時較少會用到),且只能內容大多只夠時間教1、2次,而我除了原本內容之外,還有很快順帶補充一些教課或講義撰寫上可以注意的事項(例如微軟免費提供的多功能簡報工具軟體Zoomit,我看反應就不錯,很多學員都有抄筆記記下來,IE8的開發者工具好像反應也還OK),Expression Encoder Screen Capture可以錄製電腦畫面教學應該對老師們工作上也有幫助才對。
3

第二天來參與學習的老師數量就稍微少了一些!4

這是教室後面另外一台單槍投影機,雖然整個場地有前後兩台投影機,不過由於場地裡沒有廣播教學系統可以直接將講師的畫面傳到學員端,教學起來確實效果會打點折扣,第二天的課Expression Encoder Screen Capture會用到耳麥,但好像有帶耳麥的人仍很少,比較無法實際體驗到自己錄製聲音教學檔的樂趣。
5

由於參加學員皆為學校老師,可能因為是老師自重身分,加上第一天比較不熟,所以第一天幾乎沒有學員詢問問題,我有詢問一些統計也少人有舉手回應,但第二天就開始比較熱若有詢問。
6

至於學員反應,兩天課程上完後我有留下來一下子詢問承辦人員,他是說由於這個算比較大班,學員程度差異比較大,較難兩邊討好他可以理解,因為第一天上完課他好像有學員覺得太難所以第二天不敢來(第二天參加人數稍微少了可能有5、6位左右),但也有少數學員跟翠容老師反應過於簡單,這班的學員課堂上我詢問請他們舉手大約的統計,約有一半的人有網頁設計經驗,但幾乎沒有人有做Flash的經驗(可見得這方面門檻還是比較高,且被老師們運用到的層面也較低的樣子),不過承辦人員有說我講義寫的蠻仔細的,學員有聽過再照上面講義步驟應可做出範例(我看有不少學員實作出來表情都還蠻高興的)。


參加台灣微軟Designer圓桌會議花絮

筆者在2010年1月23日星期六下午,很榮幸被應邀到台灣微軟參加Designer圓桌會議,這是個很特別只特定人士參加的活動,針對台灣各大flash 板主/blogger or Flash作者的小型邀約企劃,大約只有15人參加(我是因為曾經擔任微軟講師的關係順道沾光參加),難得有這個參與的機會,就對於參加內容來做個特別報導吧~!

下圖是邀請函內的時程表!
s1

之前上班時間來時一直不好意思拍微軟櫃台,這次趁假日沒人拍一張吧~!底下的照片因為都是臨時起意只有用手機拍(我好像是來旅遊的…),畫質不好之觸來請包含囉~!
s2 

走道入口有標明Microsoft圓桌會議的小黑板~!
s3 

這一次進來的這個房間,是微軟一般沒有開放給一般民眾參觀的體驗室,裡面的佈置還蠻特別的,可以先體驗一下未來的高科技生活,一進來是一台超大台的觸控式液晶螢幕,上面有一些觸控式電子書,可以讓人去翻閱玩看看,例如裡面有爆破藝術大師蔡國強的爆破體驗小遊戲(不過拍出來效果不好我就不放上來了)。
s4

也可以線上做動態挑選衣服等觸控測試。
s5

下圖是開發工具暨平台推廣處的總經理劉博士,簡報講述的內容主要是說明Visual Studio跟Expression Studio之間搭配定位關係等大方向觀念,以及介紹微軟Silverlight的佈局與願景!
s6

接下來的簡報是由互動多媒體技術經理Carol主講,主要內容是Better User Experience(更好的使用者經驗)以及Expression Blend與 SketchFlow,比較偏向視覺設計師的一些觀念與領域,這間體驗室前面主要分成三個部分,分別是示意在辦公室、機場、居家的三種不同環境可以有的高科技體驗,下圖這張後面主要的場景是位於左側的辦公室情境。
順道一提的是我當初是在微軟一個研討會上認識Carol,也就因此因緣際會認識到微軟其他同仁以及有後續的合作。
s7

下圖這張照片則是位於右方的居家的場景(裡面入鏡的是微軟產品行銷經理Dann,算是裡面跟我接觸最密切的一位),那張桌子可是大有來頭,做作微軟神桌,據說台灣目前只有兩台(一台在故宮),算是這一次我覺得最好玩的「旅遊景點」,它的螢幕觸控點據說比一般觸控螢幕多了很多倍,一方面當然也是要軟體有相關支援,目前其實許多功能都已經可以執行實現,但這台微軟神桌目前還是停留在實驗室階段,我想可能因為是製程與成本等還是過高,所以目前還無法產品化量產,但據微軟透露說這台神桌硬體方面幾乎都是由台灣廠商製作,可見得台灣科技業廠商這方面技術水準還是很頂級的,有興趣的看部分操作畫面的朋友,可以看本篇文章最後面的神桌畫面14連拍。
s8

下圖的照面則是位於中間的機場情境場景。
s8-1

接下來的照片則是我照覺得比較有意思的投影片或播放的影片,這篇我不想寫的太深成技術性文章,大家輕鬆看看就好啦~!下圖是播放一個影片,裡面提到在資訊設計業裡,最常遇到的問題就是DESIGNER跟DEVELOPER會產生的對立與思維上的衝突問題。
s9

微軟架構下的願景當然是希望能夠讓視覺設計師與程式設計師之間能夠和樂的整合在一起,不要因為大腦上的思考方向不同而往往造成合作上的分歧,或是因為遇到豬頭客戶的不合理怪要求時,能有一些方式可以盡量避免掉與加速溝通。
s10

而如何能讓視覺設計師熟悉的Psd、Gif、Jpg等格式跟程式設計師熟悉的VB、C#等語法整合與溝通呢?
s11

微軟提出的是使用XAML這個格式方案,以期能夠解決掉大部分的整合上的問題。
s12

過來這幾張照片則是我拍微軟播放的一個未來高科技對於周遭生活的影響,這些很炫很便利的功能有些以前好像在科幻電影未來世界之類的才看得到,但實際上這些功能與操作絕大部分在實驗室已經可以辦得到(主要依然是量產普及化的問題),也許在未來10、20年後大家辦公室等環境就已經都變成這樣囉!例如下圖主要是提到未來有玻璃的地方很可能都是有資訊系統,可以透過觸碰等方式進行查詢操作等動作。
s12-1

一些識別卡之類的也都真正電子數位化,卡上直接有螢幕畫面之類的可供選擇、識別甚至是做資料傳輸交換。
s12-2

可能未來鑰匙與手機及桌面等的資料也是可以互通與傳遞的。
s12-3

電子書不稀奇,下圖是「電子紙」,可能未來我們看報紙不是用真的紙張,而是一張一樣薄的電子紙,上面可以有色彩豐富的圖文閱讀功能與點選等效果可以使用,其實內容還有很多,實在無力放啦!這部份介紹就到這邊啦~!
s12-4

下圖則是微軟介紹其這兩年有關於Silverlight產品開發的架構與發表推出的時程,以及相關的一些周邊軟體對應搭配,也有提到最新的2010年第二季的未來發展呦!
s13 

下面的圖就是Microsoft Surface(微軟神桌)的一部分操作畫面,因為他的功能選項很多,我只有挑其中一項選單內的操作拍,也感謝當天有兩位與會的人士「出手」相助協助此段拍攝(其實有些人當天玩這台還玩開了玩蠻久的說)~!
s14 

底下是微軟神桌操作過程14連拍,不過可能用拍的應該較難讓您完全感受到,這台神桌的畫面會因為操作者使用的方向不同而變更畫面正面對您,而點選一些畫面物件拖曳或是用拇指與食指將此物件直接啦大旋轉等,這些細微的操作體驗可能蠻難用圖文說明這種微妙的操作感就是了~!
sz1    sz2

最後附上三個線上的網址可以讓您前往瀏覽觀看:

‧全球各地Silverlight成功案例:http://silverlight.net/showcase/

‧微軟推動的Experience Smooth Streaming影音串流媒體線上體驗,順暢不間斷的影音播放技術:http://www.iis.net/media/experiencesmoothstreaming

‧XBOX360體感遊戲展示影片:http://www.xbox.com/en-US/live/projectnatal/ ,這個這一次沒有介紹到,不過我覺得還蠻有趣的,所以也一併放在此處了,有興趣的朋友可以去看看,微軟的遊戲機XBOX360之後(可能2010年中)只要再加買一個Touch-less in XBOX體感遊戲的裝置,就可以達到影片上展示的效果(當然還是要有對應的軟體),主要的原理是這個裝置裡面有類似webcam網路攝影機的功能可以偵測使用者的身體而做出相對應的動作。


2010年2月15日 星期一

如何使用Blogger官方版的繼續閱讀功能

Google Blogger雖然修改的彈性大,但比較常被初學者抱怨的,反而是缺乏有些基本常用的功能,有些部分即使連進階使用者要修改也會稍嫌麻煩與受到限制,例如最常被抱怨的前幾名裡,應該就有在其他部落格系統預設會有的文章清單「繼續閱讀」的功能(因為Blogger本身系統內原本就沒有可以另行輸入前文導言之類的欄位設計),不過目前官方系統裡已經有內建了繼續閱讀這項功能可用了,真是一項遲來的福音…

以往在Google Blogger開立後要自行尋找外掛程式來修補這個缺點,但無論您找到那些高手那一版寫的繼續閱讀的外掛功能,其實原理幾乎不外乎是把不要顯示在文章清單裡的內容用Javascript加上CSS與HTML隱藏起來,但實際上這樣的做法都會有一項先天上的缺點,就是一般瀏覽者在瀏覽Google Blogger前台頁面時,仍是需要先把該頁清單內的所有文章內的文字與圖片載入,等到讀入後再去縮減隱藏其他不必要顯示的圖文,這樣子除了在瀏覽顯示時容易因為圖檔較大會頓一下不美觀之外,若圖檔多嚴重時可能會整個拖慢頁面讀取效率,對於SEO來說也是不利的,這些問題也只有使用官方的繼續閱讀從系統層面才能有效解決,這個改善應該是在Blogger推出新版文章編輯器時就已經有的,只是過了好幾個月筆者才注意到就是了(Google Blogger近來持續推出了不少新功能)...

要使用官方版的繼續約讀功能,建議到Blogger後台的「設定」/「基本」裡,將文章編輯器改為新版。s1

在您想要做繼續閱讀斷行的地方,按下「插入jump/break指令」按鈕。
s2

在文章編輯器內就會多出一個類似水平線的圖示,這就表示Blogger系統在前台清單頁顯示文章時,會把本篇文章此分隔水平線符號以下的內容直接不載入,由官方系統層面來處理自然前台就不會用讀取這些不必要顯示的內容,也就不會造成前台頁面載入時的緩慢與不必要的頻寬浪費,這是其他類似外掛功能所做不到的。
s3

其實您在後台新文章編輯器裡按下「插入jump/break指令」按鈕,如果您切換到HTML模式去看,就是多產了一個s4這樣的語法註記,所以若是您沒有使用舊版的文章編輯器或甚至使用其他的網頁編輯器來撰寫部落格內文時,可以手動鍵入這樣的HTML註解標籤,一樣可以達成官方版繼續閱讀的功能,但提醒您要注意的是有些網頁編輯器或其他的部落格文章編輯器,由於不認得s4這樣的語法註記,有可能會誤認或者是將此語法轉換成超連結語法(例如筆者使用WindowsLiveWriter連上Google Blogger寫文章就會發生這樣的情形),所以建議若使用其他編輯器的使用者,在撰寫完部落格文章最後時再使用Google Blogger後台的文章編輯器設定「插入jump/break指令」為宜,雖然是稍微麻煩了一點,但還是要提醒您要稍加留意就是囉~!

若是您想要修改前台原本系統預設的「閱讀更多 » 」這樣的文字,可以到Blogger後台的「版面配置」/「網頁元素」裡(非傳統範本模式才有這個選項),在「網誌文章」的區域點選「編輯」連結,可以看到「張貼頁面連結顯示文字:」的項目,將此欄位裡面文字做變更修改即可。
s5

還需注意的是,若您的部落格美編版面不是使用Blogger系統原本提供的範本,而是您自行在編修或者是使用其他第三方(非官方)提供的美編版面範本(像筆者就是),則有可能還需要對Blogger後台的「修改 HTML」裡做些調整,詳情請參考Blogger官方建立「繼續閱讀」摘要的說明,裡面有提到詳細的修改做法。

筆者最近已經把自己的Google Blogger的所有文章,由原本外掛的寫法改成官方版的繼續閱讀的功能,並花些時間把之前的舊文章打開加入s4語法標記,的確對前台文章清單頁面的讀取速度有獲得很大的改善,效能的改善在前面也有提到對於SEO搜尋引擎最佳化也有所助益(網路曝光行銷等層面),建議有在使用Google Blogger且有看到本篇文章的您,趕緊也去改成官方版繼續閱讀的功能吧~!


Related Posts Plugin for WordPress, Blogger...

訂閱RSS