[以下屬隨堂筆記,純粹記錄關鍵字供日後回憶,為定期飲用孟婆湯之中年人士求生必備]

ASP.NET 4.0 + HTML5 + CSS3

  1. HTML5重點: New Tag, SVG, Canvas, Embedding Font, Video/Audio, HTML5 Form 2.0, HTML5 Web Storage, HTML5 Offline Web Application...
  2. 與ASP.NET/VS2010的結合: VS2010 HTML5/CSS3 Support, SVG圖表與資料庫結合, Debugging SVG, C#/VB OOP設計SVG
  3. TIPS: IE9設為VS2010預設Browser,以檢視HTML5結果, HTML5 Snippet Code
  4. Demo: SVG原本預設以XML Editor開啟,可改為預設用IE9開啟
  5. Demo: Visual Studio工具 - CSS屬性、管理樣式、套用樣式 (But, CSS編輯器還不認得border-radius等圓角CSS3屬性,IDE 網頁設計檢視時也還不能即時顯示圓角)
  6. Demo: IE9 CSS3新功能,頭文字放大 ::first-letter, 文字陰影 text-shadow
  7. SVG vs Canvas: (祭司認為二者並無重大分別,可擇一而用)
    SVG: W3C SVG獨立標準, XML+Script, 繪圖工具可匯出SVG格式
    Canvas: HTML5的Javascript API, Script Only, 2D Only(W3C說未來不排除加入3D支援)
  8. SVG: Scalable Vector Graphics
    樣式, Path, Shape, Text, Filling, Stroking, Marker Symbols, Color, Gradients and Patterns, Cliping and Mask, Filters, Animation…
  9. DEMO: 文字以波浪形排列(文字跟著自訂的Path擺放)
  10. 注意: IIS要新增SVG MIME Type: image/svg+xml以開放.svg檔案下載
  11. SVG嵌入方法有四種: <embed src=”blah.svg” type=”image/svg+xml” pluginspage="httq://www.adobe.com/svg/viewer/install/" /> <object />, <iframe src=”blah.svg” />, HTML直接內嵌SVG的XML內容
  12. 動態圖表: OData Javascript Library, jQuery更新SVG元素
  13. WCF Data Service查詢參數: $select, $top, $orderby…
  14. Demo: 用jQuery更新SVG標籤<rect>以改變顏色、寬度
  15. OOP SVG: 定義Shape Class,類別具備自己轉換為SVC Element XML的能力

Windows Phone 7設計準則與應用開發總覽

  1. 【講師一】Moli
  2. "設計"長期被漠視 -- 專案不會因為"美"而多收到錢、美的評量標準很主觀...
  3. Pocket PC 2000 –> 只是把桌機UI搬到PDA,沒什麼巧思,但競爭者少,所以...
  4. Pocket PC 2002, WM 2003, WM2003 SE … 沒大改變,但螢幕解析度開始分歧
  5. WM5 .NETCF 1.0, Office Mobile, DirectX…
  6. WM6 .NETCF 2.0 … 到此為止畫面沒什麼改變,都是把Desktop經驗搬到手機
  7. WM6.5 UI大改了,但各廠商多自訂UI(例如HTC),幾乎無人認得本尊
  8. WP7 -> 介面大改到他娘都不認得,開發應用程式時也要記得配合
  9. WP7開發可用技術: Silverlight, XNA with C#(VB.NET, F#, but XNA is C# only),其他支援仍屬未知
    內部RD開發過程: XNA first, SL based on XNA
  10. SL vs  XNA?
    一般Applets -> SL省時
    對系統支援要求高-> XNA功能完整
  11. XNA –> 可跨XBox, Windows Zune, Windows。多半Game開發者才有基礎,進入門檻較高。
    SL –> 本質上是SL3的特殊版本,可以移植到Windows
  12. 【講師二】北士品牌設計公司 - 唐聖翰 (非技術背景, from another world XD)
  13. 圖像的三個層級: Index(指標索引,不帶情感,直接指涉某事), Iconic(以帶情感的符號模擬真實世界事物), Symbolic(象徵符號,不是表面上的意義)
  14. 設計思維實例: 手機介面 - 飛機儀表板式複雜按鈕 vs 上下左右加三棵鈕
  15. WP7的圖像精神: 師法公共設施的簡潔指標圖示,世界通用,容易閱讀
  16. 圖像閱讀: 有教養的設計 -> 同一頁面不超過兩種字體、同色系配色、單純設計語彙
  17. 圖像層次實例: 阿里山小火車照片(Image) –> 放在看板上配合運用(Index) –> 當作人像背景(Symbol, 攝影專家/愛台灣)
  18. 生活化隱喻: 能言傳也可以意會。捷運廣告文字描述建議行李尺寸,不如直接畫出框來
  19. 有效傳達: 以為說明清楚,其實使用者接收錯誤。高鐵車票: 磁條要朝上,與一般認知相反=> 解法: 讓讀卡機兩面均可讀 or 將磁條面搞得像正面(全黑隱藏磁條)
  20. 按閱讀順序排列,不要放讓使用者分心的文字或圖像,直接順著由左而右,有上而下安排
  21. WP7使用 Segoe 微軟無襯線字體(人文主義特色),勿小於15px
  22. 全景UI (Panorama)
  23. 【講師三】小光的娘: 許瓊文(MS互動多媒體經理)
  24. 以手機的使用者經驗為例: 放褲子口袋,結果掉進馬桶,國外0.8%保險公司提供手機掉馬桶保險。
    解決方案: 手機不會掉進去的馬桶 or 不會掉進馬桶的手機 or 不會讓手機從口袋掉出來的牛仔褲
    苦主: 馬桶設計師、手機設計師、牛仔褲設計師 都不覺得是自己的責任,但必須要被解決才會有良好的使用者經驗
  25. WP使用者經驗: Metro(視覺經驗)、Touch(互動經驗)
  26. Touch: Click, Double Click, 按住, 雙指放大, 彈開(Flip), 拖拉(Drag), 搖動
  27. WP7設計重點: 不只求自嗨,更要追求個人化、人性化,讓User覺得好用,願意分享

使用Silverlight開發WP7應用程式

  1. 2009/9/23 Silverlight 3.0, 2010/05/06 Silverlight 4.0
  2. SL通吃: Web、Desktop、Embedded、Mobile
  3. Mobile vs NB: 1) 簡單是趨勢(減法革命) 2) 輕巧是要素 3) 易用是重點 4) 內容(軟體)則是決勝關鍵
  4. Mobile Software vs BIG Application
    耗資數百萬元、裝上三天三夜,數公斤的操作手冊,只用10%的功能 => 簡單使用、快速下載安裝、立即達成目標
  5. Information at your fingertips! (資訊彈指可得) Bill Gates at Jan 1995
  6. WP7 SL開發優勢:
    學習曲線平緩(相較於iPhone, Android)、C# 、可沿用Windows平台SL經驗...
  7. Demo: 資料放在雲端,Silverlight on Desktop與Silverlight on WP7擁有類似的界面,同樣的資料來源。在PC上送出請假單,Notification送至WP7,在WP7上用手指簽名核准表單。
  8. System Tray在最上方: 訊號強度、電力.... ,Application Bar在最下方: 程式碼可以控制
  9. 結構: Frame 包 Page 包 Content Area,System Tray及App Bar在Frame上
  10. Navigation Frame: Back回上一頁(NavigationService.GoBack()
  11. 10月推出的WP7英文版,中文可正常顯示,比模擬器好看一點
  12. Demo: MainPage –> Page1, Page1加上進場動畫,並用Behavior設定一載入就播放
  13. 手機 SupportedOrientations = “PortaitOrLanscape”, OrientationChanged事件,Grid改成StackPanel + ScrollViewer,讓物件多時可以捲軸拖拉
  14. Application Bar按鈕最多四個,右方三點Icon可以帶出下方Menu(會有PowerPoint式顯現動畫)
  15. 控制項: Bing Map控制項,直接顯示地圖、Browser Control內嵌網頁在程式中...
  16. Panorama 全景
  17. Pivot 場景間切換: 感覺像是TabControl,同一Page中可以內嵌多個不同內容交互切換
  18. Launcher/Chooser,Chooser時會回傳值,Launcher則否。Ex: PhoneCallTask(撥號), SavePhoneNumberTask(存入通訊錄), PhoneNumberChooserTask.Completed傳回選取通訊錄, SmsComposeTask(送簡訊)
  19. 若手機支援,可以Call A -> Hold A -> Call B –> Merge A & B –> Conference Call
  20. 離線應用: 線指3G, 3.5G or WiFi。連線時透過WCF/Web Service送至雲端,離線時資料保存在IsolatedStorage
  21. 多點觸控: 支援四點,一樣可用Hook Touch.FrameReported方式處理,也可用XNA Framework或Toolkit Service處理Gesture。
  22. Push Notification: WP7不做Polling以求省電、透過Microsoft Push Notification Service轉送通知
  23. 通知有三種: Raw(由AP自己解讀)、Tile(狀態磚)、Toast(彈出文字訊息)
  24. SL App可以PIN到某頁上變成狀態磚

Comments

# by 艾小克

使用Silverlight開發WP7應用程式 1. Web Desktop Embedded Mobile 14 Application Bar按鈕最多五個 Menu Item

# by Jeffrey

to 艾小克,謝謝指正。第1點已修正,第14點,我查了資料為Buttons數1-4枚(REF http://tinyurl.com/276r878),Menu Item數不建議超過五個(REF: http://tinyurl.com/22mk2wh),不知是否與你所知的相同?

# by 艾小克

Sorry 黑暗大, 一時打太快混著用了... 的確 Menu Item 建議最多五個, Button 建議最多四個... :D

# by hunterpo

原來黑大有聽這場...沒見到你真可惜! 幫忙補充一下:小弟記得祭司在談完 IIS 設定 SVG MIME Type 後有提到開源軟體 - inkscape,可以用來編輯跟產出 .svg 檔,剛剛去搜尋一下,意外發現他有 Chinese(Taiwan) 說明文件,並且提供免安裝版,相當不錯的軟體。 下載位置:http://inkscape.org/download/?lang=en 說明文件:http://inkscape.org/doc/index.php?lang=en

Post a comment


49 + 41 =