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

【HTML5, CSS3跨瀏覽器實務】by 國四無雙 上官神人

  1. 一張複雜的HTML規格發展歷史圖表 
    幾個關鍵點: <small><font> –> CSS, XHTML -> HTML5
  2. 現今網頁開發所用的主流HTML標準,仍停留在十年前的水準,網頁開發者為了實踐所需功能,只好借重外掛,導致Plugins泛濫
  3. 2004 Mozilla, Apple, Opera等廠商建議W3C加入HTML5,但W3C深愛XHTML未接受。廠商自力救濟,成立WHATWG自訂HTML5,W3C見苗頭不對,終於也成立HTML5 Working Group
  4. WHATWG制定了:
    * 新Tag: <header><footer><video><canvas>…
    * Microdata: <span itemprop=”name”>Jeffrey</span>
    * Web Forms 2.0: 新表單元件,如: <input type=”email” required />
    * Web Application API: 新的JS物件,如: new WebSocket(…)
  5. 廣義HTML5:
    HTML5(Microdata, WAI-ARIA), WebForm2.0, Web Application API 1.0, CSS3, ECMAScript 5
  6. 支援HTML5的瀏覽器: Firefox, Safari, Chrome, Opera… and IE9(終於...)
  7. 支援HTML5的行動裝置: iPhone, iPad, Android
  8. HTML5主要標籤改進:
    簡化成<!DOCTYPE html>, <meta charset=”UTF-8”>, <script>, <style>不需再指定type…
  9. 配置: header, nav, section(內嵌article), aside, footer
  10. DataURI, <img src=”data:image/png;base64,iVBORw0kGedDarkthread….” alt=”…”>,可以省去Browser再產生一個Request的成本,對於增進Mobile Device瀏覽效率格外有用!!
  11. Web Form 2.0(支援最好的是Opera, Webkit次之,IE/FF 呃...)
    * 新表單輸入元件: 內建date, datetime(日期/時間選擇器)、number(上下箭頭增減), range(滑桿鈕), email, phone, url, search...
    * 可以用list屬性指向DataList <datalist><option ….,以下拉選單提供輸入選項
    * :invalid { border: 1px solid red; } <-- 為驗證失敗的input加上紅框
    * pattern=”\d{1,3}” <-- 可用Regular Expression指定驗證規則
    * required <-- 必填欄位
  12. Context-aware IME: iPhone針對type=”email”時輸入法鍵盤帶出@ .,type=”url”時帶出. / .com
  13. <canvas> 在網頁上處理2D/3D圖形,甚至可以寫遊戲
    實作範例: 載入照片,取得Pixel顏色,轉成灰階
  14. SVG: IE很早就支援,現在各大瀏覽器也都納入規格中
  15. 直接用<video> <audio>指定URL播放檔案,可以針對標籤自訂播放介面,用Javascript控制播放,CSS裝飾面板
  16. 影片解碼器支援議題:
    Safari, Chrome, IE9支援H.264編碼(有專利/版權問題), FF, Opera支援Theora編碼...
    Google買下VP8 Open Source: Chrome, Firefox, Opera支援VP8, IE9宣稱PC有裝就支援(但會不會Bunddle是未知數),至於Safari,呃....
  17. Video標籤可支援多種影片格式來源,讓各瀏覽器挑自己支援的格式進行撥放
    <video poster=”劇照JPG” controls><source src=”A" type=”video/mp4” /><source src=”B” type=”video/webm” /><source src=”C” type=”video/ogg” /></video>
  18. CSS3的囧況
    獨立規格,只是隨著HTML5發燒而一併被討論。各家瀏覽器支援度差異很大,例如圓角。
    標準 - border-radius: 5px;
    Safari, Chrome: –webkit-border-radius: 5px;
    Firefox: –moz-border-radius: 5px;
    Opera: –o-border-radius: 5px;
    現在搞CSS3的玩法: 用國語說一次、用河洛話、客家語各說一次以確定各瀏覽器都聽得懂
  19. CSS3 Web Font: 可以指定Font檔案來源,缺字型時下載
  20. CSS3 漸層(各家語法差異很大): IE尚未支援(可用SVG頂著先)
    CSS3 Transition: 產生過場動畫(指定時間長度、Linear or ...)
    CSS3 Transform: 變形(旋轉、縮放)
    CSS3 Animation: 何時開始、關鍵影格, from->50%->to, 目前只有Webkit支援
  21. localStorage[“key”] = value (IE8就開始支援)
  22. 取得地理資訊: navigator.geolocation.getCurrentLocation(succ, fail, opt);
  23. 多個瀏覽器Window間透過message事件傳遞參數
  24. var ws = new WebSocket(“ws://localhost:8080/handle”);
    ws.onmessage = function(evt) { … };
  25. 多執行緒!!!
    var wk = new Worker(‘heavy_works.js”);
    wk.onmessage = function(evt) { … };
  26. 在桌面產生通知
    webkitNotifications.requestPermission(); //取得使用者授權
    webkitNotfications.createHTMLNotification(xxx).show();
  27. Drag & Drop, File API (Google, FF)
    在網頁中取得檔案資訊及內容
  28. ECMAScript 5 多了一些語法、物件改良,不過沒有大驚喜
  29. 如何突破瀏覽器對HTML5支援不足的問題 ==> 寫出好的Web/App來脅迫吸引使用者升級瀏覽器

【Developer & Designer協同作業 - 企業應用案例】

導入案例:

  1. 新光證券下單網頁轉為以Silverlight實作
  2. 故宮線上購物
    傳統做法: 選分類->清單->翻頁 或 下關鍵字搜索。商品種類過多,找尋過程不友善。 重新設計: 居家場景,直接點選照片中的物件連接到分類、運用DeepZoom一次看到所有商品全覽圖,再針對特定部分放大

故宮線上商店UI改善思維:

  1. 將商品分類重新歸納,使其更明確易被理解
  2. 原本主畫面資訊及項目龐雜,縮減為13項
  3. 結合使用者Window Shopping生活經驗,將主畫面場景包裝成商品櫥窗
  4. DeepZoom -> 獨特但易學習的操作方式

重新設計後的成效:

  1. 使用者迷路機率降低
  2. 客戶抱怨減少
  3. 網路下單增加
  4. 獨特性帶來宣傳效果

實例示範: DeepZoom Composer, VS2010 VB.NET, Expression Blend 4

【Expression開發WP7】

  1. Tips: 以前的Blend for WP,在Blend 4.0已整合在一起,不用再另外安裝
  2. Expression Blend 4,建立Windows Phone Application Project,專案樣版有四種: 一般, DataBound, Pivot, Panorama
  3. PhoneApplicationPage (等同SL的MainPage),已預先建好Title Panel, CotentPanel
  4. SL Class Library有可能一行不改就搬到WP7中使用
  5. 手機直擺棋放方向改變時,可利用OrientationChanged事件中調整物件Margin, Size以充分運用空間
  6. ApplicationIcon.png <-- 應用程式圖示 62x62,要改其他檔名要用VS2010,Build Action=Content, Project Property裡選取圖檔
  7. SplashScreenImage.jpg <-- 載入時期等待畫面
  8. WP7模擬器可支援多點觸控: 需為Windows 7,LCD也要支援(廢話)
  9. 表演不寫一行程式做一個人名照片清單,點選可看詳細資訊的WP7程式。(有寫到一行程式,章老師願意躺在地上給大家踩)
  10. Import Data From XML –> 拖拉Collection欄位到頁面變為ListBox –> Edit ItemTemplate –> StackPanel按右鍵轉成Grid調文字照片大小。
  11. VisualStateGroup: 設定時間1秒, 加入Normal, Select兩種狀態,"錄製"3D翻轉動晝 。
  12. GotoStateAction行為可設定點一下由Normal->Select狀態轉換,就可產生動畫過場。
  13. 製作詳細檢視: 增加一個Grid,從Data區拖拉欄位到頁面自動產生Label: Value的表單式檢視UI
  14. Programmer接手,將DataContext="{StaticResource...}”拿掉,改成從動態資料來源取得
  15. PS: Silverlight 5明年3月上市
  16. Panorama內含多個PanoramaItem。內容超寬的PanoramaItem –> Object and  Timelines找ListBox按右鍵建立Template再做調整。
  17. Pivot像是Tab,但可以左右移切換不同PivotItem
  18. NavigateToPageAction: 在物件上按右鍵選NavigateTo,就可加上點選後導覽至不同頁面的效果
  19. ApplicatoinBar(應用程式列): 水平時會移到靠實體按鈕那一側
  20. 按右鍵新增ApplicationBar, 再按右鍵新增IconButton或MenuItem。透明度<100%時跟內容可重疊,不佔空間;ApplicationBar可多個頁面共用。
  21. Application Bar Icon: 48x48, 但實質內容26x26(外面要包一個圓圈)
  22. SystemTray: 可決定隱藏或開啟
  23. Software Input Panel(SIP),轉入欄位的InputScope: Text(字詞提示), Name, Email, Url… (類似HTML5 Context-aware IME)
  24. 快速格式外介面靠樣式、狀態,此與Silverlight相同。Style拖拉到元件上,就可以立即套用;圖片Make Into Control變成按鈕。
  25. MediaElement(影音播放) IIS Smooth Streaming Client 1.1,SmoothStreamingMediaElement控件
    PS: 此時全場的手機簡訊聲四起,TechDays小祕書送活動簡訊給每個學員... XD
  26. Expression Encoder製作串流,選Encoding for Silverlight,產生不同解析度的多個ismv檔案放在IIS(要裝Media Server)

【HTML5遊戲開發】

講師背景: 10年手機軟體開發經驗、十餘款Java/C++手機遊戲、Nokia Ovil商店130萬次下載,米魯蛋、洋葱頭系列。寫過12頁動態網頁遊戲,14天做完,上線一年半33萬(Active 10萬)使用者,80萬Page Hit/Day: Tuning –> Memory Cache -> Database Tuning -> Table Index數目爆了,持續修改(Tuning)了三個多月,Web, DB各一台(黑暗面: Server太忙時,就把User抓去關以降低Loading)

  1. 角色扮演動機: 體驗不同生活,沈浸在新鮮情境中、Avatar個人化、聲光刺激(青少年偏愛、上班族較不愛)、解任務的成就感
  2. 臉書實例
    Farmvillie (MAU, Monthly Active User, 6,200萬,最高曾到8,000萬)
    Peak User 170萬Concurrent User,得靠雲端解決。340台機器,Small Unit 70 TWD,大的Unit 240 TWD/每天
    ** PS: 臉書Base 5億User,台灣有10萬玩家就很屌了。**
    Restaurant City 餐城: 大家都去館子,會有興趣體驗當餐廳老闆。(桌數、食材、翻桌率...)
  3. 成就動機:
    透過遊戲設計獲得大小不同的成功經驗: 排行榜、達成某項成就時發通知給社群成員、累積虛擬金錢(有數字才有效能調校的努力目標 XD)、每天都有Level Up
  4. 臉書實例:
    Happy Island 金銀島: 把世界的地標蒐集在一個島上,等八天升級成目標建築,讓User用較緩慢的步調輕鬆玩
  5. 社交動機: 如偷菜、訪問朋友->增加社群成員間的互動
  6. 臉書實例:
    Lucky Train: 火車進站就有收入,把車子後面的車廂交給朋友經營,朋友的貢獻也增加收入(老鼠會上下線)。升級車廂後,朋友也增加收入。
  7. 重點: 把有在玩遊戲的人(且願意付錢)留下來,爭取有價值的User(願意付錢的、能帶進更多新會員的),設法讓沒貢獻的人滾蛋 XD
  8. 網頁遊戲的優勢:
    * 門檻低、成本低(一兩個月開發,投資<100萬元)
    * Flash/Silverlight較精緻
    * 方便、免下載、隨時可玩
    * 容易結合網路活動(行銷…)
    * 手機、平版電腦也OK
  9. 成功案例 – Trivian(車肥羊 or 部落戰爭)
    2004 德語版,佔地為王,同概念衍生成三國、中世紀、大航海... 等風格
    2007 Browser Game of the Year, 2008 Best Gameplay and Best role-playing Game
  10. HTML5特色: 新標籤、GPU加速…
  11. Web技術演進:
    Web 1.0: HTML+CSS
    Web 2.0: AJAX
    Web 3.0: HTML5, Graphically and Media-Rich
  12. 展示TestDrive: Browser Hunt(小精靈,背景球在轉彰顯效能)、Hampster Dance Resolution(跳舞機,可達50-60FPS,手機上10FPS就算高)、Canvas Pinball(打彈珠)、Chrome Experiment(Box2D JS版,模擬物體的物理特性)、FlowerPower(貝氏曲線)
  13. IE9 CSS3:
    圓角框、box-shadow、transittion(過場動畫)、CSS3 Selector、更多Color Space...
  14. DEMO: css3generator.com
  15. SVG - JS操作DOM改變SVG內容
  16. SVG較常見應用: 報表、地圖... 實務上應用並不廣泛。因為要依賴客戶端決定產生結果是否正確,不夠可靠。
  17. DEMO: TestDrive Canvas Pad
  18. DEMP: 中國字筆順示範(小朋友學寫字)
  19. PS: 據說WebSocket被移出HTML5規格
  20. 瀏覽器挑戰: 不同瀏覽器、不同平台版本、不斷推出新版
  21. 跨瀏覽器的做法:
    * <!—[if IE lte 7]> … <[endif] -->
    * 用特徵識別: if (document.all) { … } else { … }
    * 測試函數存在再叫用(較好的做法): if (document.addEventListener) { … } else { … }
  22. 遊戲設計成敗: 企劃(點子)、美術(視覺)、技術。市場定位明確,敏捷開發快速回應玩家反應

【Developer & Designer協同作業 -- 遊戲開發案例】

講師背景: B+ Studio半業餘工作室,蒼蠅王遊戲開發者

  1. 設計人員不喜歡Blend,因為仍習慣原本熟悉的工具 => 讓Blend變成輔助SL開發的工具,而非開發SL不得已的選擇
  2. 實作遊戲範例: 捏氣泡紙
  3. 設計人員不只是畫圖,要依整體感做調整,包含考量UI的易用性(不喜歡被叫美工)
    簡單的設計 != 短時間可以完成。納入整體考量: WP7的主畫面隱含鸚鵡螺黃金比例配置。
  4. 摸擬遊戲構想: 擬真、800*480、100顆氣泡、七彩、三種破掉狀態、氣泡動態特效、音效、觸控 -> 設計人員意見: 減少氣泡數量以利觸控
  5. 點陣圖在顯示時不需要運算,較節省資源,向量圖可做到放大不失真。
  6. 工具: Illustrator - 向量圖案(.ai 可轉 XAML)  PhotoShop - 照片 (.psd –> Image)
  7. 設計觀點: 效果過多未必是好事,需斟酌整體搭配
  8. 中斷程式人員1分鐘 = 消耗15分鐘的產能
  9. 程式人員需要花很多時間思考、重構、研究別人程式、實驗效能
    設計人員也需要花很多時間製作細節、研究流行元素、實驗風格
  10. 常見的溝通問題:
    * 設計人員在意程式人員變動設計(Debug修改時忽略細節、為了簡化程式)
    * 溝通時應傳達想要的目標,而非細節
       EX: 字型放大兩級、按鈕改圓角、背景改漸層 ==>
             文字清晰,版面柔和一點
    * 細節由設計人員提出,再由雙方共同決定
  11. 推薦書籍: 細節決定互動設計成敗、iPhone UI設計經典案例

Comments

# by Ricardo

to TechEd背包後援會榮譽主席:期待看到你對TechEd 2010背包的評比文喔~~

# by 小黑

請問黑大去參加研討會,是如何記這麼多筆記的?筆電?還是有超人的記憶力。

# by Jeffrey

to 小黑,哈! 你嚴重高估中老年人的記憶能力~~ 我多半是Notebook與紙本筆記本兼用(T43老筆電的續航力只有兩個小時多一點。),回家再趁記憶猶新時趕快整理。到了這種年紀,只能靠勤能補拙囉。

Post a comment


45 - 32 =