2

【HTML5開發友善網頁介面】

  1. 已採用HTML5的實例: T客邦(語意標籤)、永豐銀行信用卡網站、LEXUS活動網站(canvas)、NVESTO股票線圖(canvas)、HITCON駭客年會官網(Responsive Web Design, RWD)、Fandora.tw(RWD)
  2. 舊版瀏覽器HTML5相容:
    • HTML5Shiv: 使舊版瀏覽器能辨識新語意標籤，使其支援CSS
    • Modernizr(摩登家): 偵測HTML5/CSS3支援程度，會在<html>加上class="no-touch no-history multiplebgs"，CSS便可用.multiplebgs #boo { … }加入一段只有支援多重背景時才套用的Style設定
    • HTML5 Cross Browser Polyfills: 填充物，在舊版瀏覽器用其他方式實現HTML5才有的功能。例如: 用Flash模擬canvas繪圖動作，讓IE6也能"跑"canvas
  3. HTML5友善介面
    • <input type="url"> Win8/iPhone出現有".com"的鍵盤
    • <input type="tel"> 純數字鍵盤
  4. <video> <audio>在不同裝置播放控制條有所差異! 要統一的話可借重如VIDEOJS等外掛。
  5. 上傳檔案: XHR Level2支援傳輸進度
    * 進度條<progress>
    * xhr.upload.onprogress 進度回報事件
    * new Blob(…), JavaScript中的BLOB物件
    * blob.splice(start, end) 可將檔案分割成多部分。突破瀏覽器一次上傳容量2G上限
  6. Responsive Web Design: 翻譯: 自適應、回應式、響應式，暫無統一用語
    • <meta name="viewport" content="width=device-width,initial-scale=1.0">設成跟裝置同寬且不放大縮小
    • 指定在特定解析度才套用的CSS:
      @media screen  and (min-width: 400px) and (max-width: 600px) { font-size: … } 或是
      <link href="iphone1.css" mce_href="iphone1.css" media="screen and (min-width: ….
    • IE8(含)以下需要Media Queries Polyfills
    • Responsive Image: 圖片跟著瀏覽器尺寸自動放大縮小
      img { max-width: 100%, height: auto; }跟著容器等比例縮放
    • margin, font-sizs, padding: 用相對尺寸, %, em
    • 強迫斷行
  7. 模擬器
    • Windows Phone SDK裝完後就會有模擬器
      Tips 不用虛擬鍵盤: Alt-PgUp可關閉虛鍵盤，改用KB輸入
    • Opera Mobile Emulator
    • Mobilizer: 加外框而已，中間是IE
  8. 行動版網頁效能優化
    • HTML5兩種開發模式 : 直接用Browser vs 包在原生App中(JS API呼叫手機特有功能)
    • HTML4.01提供defer載入<script defer src="/img/loading.svg" data-src="boo.js" mce_src="boo.js"> 多個defer JS依序執行
      HTML5提供async載入<script async src="/img/loading.svg" data-src="boo.js" mce_src="boo.js"> 載入後同時執行
    • Bundling(打包) / Minification(壓縮或稱最小化)
    • IIS7 靜態內容壓縮/動態內容壓縮: jQuery 1.7.1 242K –> 102K(min) –> 31K(gz)
    • HTTP Cache, DOM Cache, HTML5離線應用程式(applicationCache)、IndexDB...
    • XHR Lvl2 – 進度回報, Cross-Site, bufferarray
    • Web Socket: Client與Server間建立連線，持續交換資料
    • Web Worker: Client端的多執行緒模型
    • CSS3特效: Transitions, Transforms, Border Radius, Box Shadow, 比JS順暢，可充分發揮GPU硬體威力
    • 使用Sprite減少圖檔下載次數: CSS Sprite Generator, 上傳一包圖檔交由程式進行圖檔拼接並產生CSS裁切語法(.sprite-IconFileName { background-position:... })
    • ASP.NET Sprite and Image Optimization(套件)
    • Web Font: 減少以圖片取代字型的需求 --> 將全頁用到的字型變成單一圖檔。國內廠商justfont，提供JS，將中文字內容丟到廠商Server再抛回圖檔，原本新細明體會換成圖形美觀文字顯示(速度不甚理想)
    • 使用Media Queries: 寬 / 高 / 方向(直 or 橫)
    • 善用CSS3 Selector取代用JS硬幹，語法乾淨、效能更好
  9. MSDN訂戶取得WinPhone, Win Store, WinAzure免費帳號Token aka.ms/startmsdn

【Win Store App開發】 課程資料SkyDrive分享

  1. Windows Store(市集)的優勢:
    • 直接面對消費者的有效通路(傳統做法需要高行銷成本才能說服使用者主動到網站下載安裝)，可方便地蒐集消費者回饋
    • 跨x86/ARM平台的應用程式
    • 直接賺取收益(購買付費、廣告、讓使用者繼續付費的API[In-App Purchase/訂閱/虛擬寶物])
  2. 收益
    • 七三分帳: 微軟30%、開發者70%。營收超過USD $ 25,000後改為八二分帳
    • 開發者亦可決定使用既有金流系統，不走微軟金流
  3. 開發語言
    • C++/C/C#/VB.NET/HTML5+JavaScript
    • Win8 + VS2012
  4. Chakra JavaScript引擎: IE9起把JS跟Render引擎拆開，並對Chakra不斷優化，使其充分發揮硬體效能，對其效能表現不用太擔心
  5. 一個開發帳號可以授權15台裝置直接安裝App，除此之外，就只能透過Win Store取得App
  6. 生命週期: Running / Suspended / Terminated (開發人員要處理Suspended回到Running時的狀態還原，這是與Desktop程式最大的不同)
  7. Blend for VS2012支援XAML/HTML5/CSS3
  8. 模擬器功能夠齊全(觸控/不同解析度/GPS...) 與 遠端偵錯(Remote Debugging，在Win8平板安裝Agent)
  9. HTML Win Store App呼叫MessageBox的寫法:
    var dlg = new Windows.UI.Popups.MessageDialog(…)
    dlg.showAsync();
  10. Windows Runtime Component(Windows執行階段元件)
    • 有隱藏核心邏輯程式碼的效果(用C++寫更好)
    • 使用C++, C#, VB.NET開發可與其他系統共用的元件/程式庫
    • 重度運算需求用C++開發可加速
    • C++元件要Build三份: x86/x64/ARM
    • 元件的Method名稱在JavaScript會變成小寫開頭
  11. C++/CX (Extension)
    • C++11, 可用STL(但不建議)
    • 要用DirectX，只能用C++
  12. C# 5.0 / VB.NET 10.0
    • 加入async/await
    • WPF/Silverlight./WP經驗可沿用(XAML)
  13. HTML5 + JS
    • 對Web開發者而言無痛移轉
    • WinJS Library –> 符合Modern UI風格的視覺元素
  14. package.appxmanifest: 註明會用到GPS/Camera，要求使用者授權使用
  15. Microsoft Design Style: Charms Bar 分享/搜尋、動態磚、訊息推播(微軟的Push Notification Service結合自行開發的Cloud Service)
  16. Tile: 150x150, 310x150, Semantic Zoom: 30x30, Badge(磚上的數字)
  17. 使用Microsoft Account登入，一般App可以將資料存入RoamingSettings/RoamingFolder物件，使用者換裝置後會批次同步，可以共享同樣的狀態或設定(因為批次，不適合必須即時同步的應用)

【Windows Phone設計最佳實務】

  1. 本堂課程未涉及任何WP8未公開內幕及情報
  2. 開發抉擇: 若沒用到WP8特有功能，沿用WP7架構開發沒什麼不好
  3. Win8的開發經驗可以套用在WP8
  4. 解析度變多了! (補聲暗) WVGA 800x480 WXGA 1280x768, 720p 1280x720
  5. Metro Design己不可用，但Modern Design的新名詞似乎亦尚未定案
  6. Google警告Android開發者不要抄襲WP介面的設定風格 ==> 意味Metro Style已被大眾所接受
    *Evernote Hello 完全照抄動態磚概念
  7. 維持標準字型, 標準大小: 不要寫死字型大小的數值，套用如PhoneTextNormalStyle等預設Style，才能隨解析度自動調適
  8. Top 10 programming-fonts: 字寬固定
  9. 系統標準色: 除非App需要依循企業識別，否則應依循系統標準色
  10. 考慮在Dark Theme / Light Theme下的顯示結果: 不要寫死顏色，用PhoneForegroundBrush / PhoneBackgroundBrush
  11. 傳說Win8有20種標準色
  12. PhoneAccentColor: 系統輔色，使用者可以任選，改變後App最好也能跟著變動
  13. 排版
    • 格線系統 Grid System, Start Screen有遵循格線系統
    • 創造隱藏的格線
    • Windows Phone MetroGridHelper 1.11 from NuGet
      MetroGridHelper.IsVisible = true; 設計View會出現隱藏格線
    • 左邊界請設24px
    • 對齊與接近原則:
      若用網頁設計比喻: 至少用<td>分隔header及欄位值以求對齊，但<dt><dd>方式上下相接更好
    • 元素間隔12px
    • Panorama vs Pivot: 技術上相同，只有Template有小差異，實際試看看
    • 爛設計: Panorama上方"類別", "結果"，點"類別"清單中的項目後切換到"結果"... (直接就把分類展開在最上一排比較好)
  14. Tile
    • Icon != Tile
      Icon只是靜態圖檔，Tile是App的延伸，更像是Gadget/Widget
    • Wide, Medium, Small三種尺寸
    • Icon透明背景會顯示輔色，增加融合度。但上架用的Icon不要用透明色，因為市集背景很花(失敗案例: 台灣高鐵早鳥優惠)
    • 工具: Windows Phone Icons Maker
  15. Portable Class Library: 確保元件在.NET 4.5, .NET for Metro, Silverlight 5, WP7.1通行
  16. Immo Landwerth說: Win8的API是以WP7的.NET Library為基礎開始的
    * 比WP7更精簡(Namespace數由 95 –> 72，而完整.NET有447)
  17. 第三方控制項
    * Windows Phone Toolkit:
       Silverlight for WP toolkit, Coding4Fun fo WP toolk這兩套算是必備
    * Silverlight for WP toolkit: People Hub的Recent效果, HubTile(翻轉)
    * Coding4Fun toolkit: TimeSpanPicker時間選擇器, MemoryCounter(觀察記憶體用量)
  18. 不要自訂DialogBox: 不符合Guide，會混淆使用者對Dialog標準的認知，無法通過更嚴格的審查標準
  19. WP8相容性: WP7 Silverlight與XNA不用改就可相容，但建議把XNA改成MonoGame
  20. 提示:
    • 要不要SplashScreen? 若沒有特別需求，就移掉吧! MS內建的手機App都沒在用，你真的要讓客戶覺得Loading很慢嗎?
    • 不要內嵌WebBrowser控制項(iOS開網頁後回不來App才要加，WP可以按Back回App，不用這麼搞)
    • 不要在ListBox加">"代表展開，iOS這樣玩，但WP裡不用
    • 可按的UI元素，按了呈現沈下去的動畫，不要用改色效果以求一致
    • 不要設計關閉鈕，系統本來就可以做到

【開發跨Win8 / WinPhone應用程式】

  1. 是"同時打造"在兩個平台上運行的App，而不是"打造同時"在兩個平台運行的App。
  2. 基本原則
    • 熟悉WP App與Win Store App平台的不同
    • 多用XAML處理UI，少用Code，較不會受限於平台
    • 取出Logic變成共用類別(Portable Class)
  3. 跨平台的技術迷思
    • Write Once Run Anywhere? 真的可能嗎?
    • 不斷推出新平台、新裝置，出現新特性，不用嗎?
    • 做到盡量重用程式，讓開發速度變快就好，不要奢望平台一直換程式不用改
  4. WinStore App與WP App不同
    • 更多解析度標準
    • 觸控外，還有滑鼠鍵盤操作模式
    • 隨時具有連網能力
    • Charms Bar
    • 少了一些Namespace, 用FlipView取代Panorama或Pivot
    • 控制項改變: 沒有Panorama或Pivot、ListBox vs ListView, GridView, FlipView, SemanticZoom…
  5. XAML 2007起就被MS當成標準，並非Silverlight專利...
    XAML + C# + Full .NET = WPF
    XAML + C# + Mini .NET = Silverlight
    XAML + C# + WP7 .NET = WP App
    XAML + C# + WinRT .NET = Win Store App
  6. 如果已經有WPF或Silverlight基礎，用XAML開發是最佳選擇
    用HTML5 + JS可以跨平台，但易失去發揮平台特性的機會，何況真要跨仍有許多眉角
  7. Tile: WP7 173 x 173, WinStore 150x150 or 310x150
  8. 記得善用async, await簡化程式寫法
  9. Win Store的通知變化更多: ScheduledTileNotification
  10. 檔案存取:
    • IsolatedStorage: WP7, Silverlight, WinForm, WebForm... 同步
    • Application Data: 用於WinStore App, 非同步存取(非同步用很凶，所以async/await格外重要)
      分為Local/Roaming/Temporary、Settings/Files(Temporary只有Files，其餘兩種都有)
      生命週期在App移除後消失
  11. Roaming漫遊: 信任這台裝置，資料便會同步進來
  12. 取Package中安裝的檔案變得比以前容易
  13. FileOpenPicker: 可以抓取使用者在本機空間甚至SkyDrive的檔案，不用額外寫Code
  14. 透過Contract可以跟其他App合作。例如: 分享、搜尋...
  15. 遠端資料及DataBinding的改變:
    * Converter, WebClient改HttpClient, WebService可用, SyndicationClient(ATOM/RSS), Azure Mobile Service
  16. Portable Class Library: 在WP, WinStore App, Slivelight, .NET專案中共用，通常不涉及UI，只聚焦在企業邏輯上。
  17. 把程式邏輯寫進ViewModel類別，XAML只要設定Binding就好。Class由WP App搬到WinStore App，設好XAML，不用寫半行程式就實現跨平台。(最近在研究Knockout.js，完全能體會其中的美好~~ MVVM實在太棒了)

【ASP.NET MVC 4】

  1. ASP.NET MVC 4新功能
  2. 範本加強
    • 終於有真的空白範本，Layout翻新，以HTML5為基礎，支援RWD
    • Single Page Application SPA在Beta版有，正式版暫時移除，等更成熟完整再加回來
    • Global.asax中抽出FilterConfig, RouteConfig, BundleConfig等放到App_Start
  3. Internet Application Project範本
    • MVC入門必看，有諸多值得學習效法之處
    • EF 5.0, 完整Layout範例, 完整會員註冊、登入、表單驗證、RWD
    • ActionFilter: Filters資料夾
    • AuthConfig –> OAuth
  4. Intranet Application Project: 用AD認證、省略會員機制及ActionFilter
  5. Mobile Project: 以jQuery Mobile為基礎
    Display Mode: 由User-Agent決定不同的顯示模式, Index.mobile.cshtml
    DisplayModeProvider.Instance.Modes.Insert(…)擴充，識別User-Agent字串，定義額外顯示模式，例如: wp7, iphone。用來處理平板及手機的差異還不錯
  6. 網路應用
    • Windows Azure SDK
    • OAuth – MVC 4正式版, AuthConfig中已內建Microsoft Account, Facebook, Twitter, Google, LinkedIn
    • 登入UI多了"使用其他服務系統登入"選項
  7. 正式版獨立出WebApiConfig.cs，專司Web API Routing設定
  8. 實作RESTful API時，一定要加上權限驗證
  9. 展示用Fiddler模擬POST, PUT, DELETE Request操作RESTful API，十分方便
  10. Web API本來支援OData，正式版先移除(成熟度尚不足)。如果要用，從NuGet取得OData安裝(目前為Prerelease，發行前版本)。參數: $top, $skip, $filter, $orderby
  11. CSS與JS的打包壓縮 Bundling and Compression
    • new ScriptBundle("~/bundles/jquery") <—不能有此實體存在
    • Include("~/Scripts/jquery-{version}.js")
    • Include("~/Scripts/jquery-mobile*.js")
    • IncludeDirectory("~/scripts", "test*", true)
    • bundles.UseCdn = true; 還是要加Include，CDN失效就用本機版本
    • 自訂忽略清單: 預設會忽略.intellisense.js, –vsdoc.js, min.js, debug.js… 可自訂
  12. 非同步支援: async, await屬.NET 4.5新增功能, MVC4預設為.NET 4，若要用async/await要升到.NET 4.5
  13. MVC4正式版: 開放Controller不一定要放在Controllers資料夾中
  14. AllowAnonymous Attribute: 在class加上[Authorize]，在某些Method上加註[AllowAnonymous]
  15. _references.js 宣告Intellisense引用的JS, 不用一一加註在各JS<references>
  16. Page Inspector: VS2012的新功能，檢查DOM元素時，會自動對應到Vew或Partial View位置，對於MVC格外方便。檔案頁籤亦可列出_Layout.cshtml, Index.cshtml... 所有用到的View檔案

Comments

# by demo

慘....看到黑大整理的範例發現我講錯了＠＠ 【非同步支援: async, await。屬.NET 4.5新增功能, MVC4預設是.NET4，如果要用需要升級到.NET 4.5 】

# by Jeffrey

to demo, 己更正，謝謝補充。

Post a comment