TechDays 2010 隨堂筆記 0930
3 | 20,990 |
[以下屬隨堂筆記,純粹記錄關鍵字供日後回憶,為定期飲用孟婆湯之中年人士求生必備]
【HTML5, CSS3跨瀏覽器實務】by 國四無雙 上官神人
- 一張複雜的HTML規格發展歷史圖表
幾個關鍵點: <small><font> –> CSS, XHTML -> HTML5 - 現今網頁開發所用的主流HTML標準,仍停留在十年前的水準,網頁開發者為了實踐所需功能,只好借重外掛,導致Plugins泛濫
- 2004 Mozilla, Apple, Opera等廠商建議W3C加入HTML5,但W3C深愛XHTML未接受。廠商自力救濟,成立WHATWG自訂HTML5,W3C見苗頭不對,終於也成立HTML5 Working Group
- 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(…) - 廣義HTML5:
HTML5(Microdata, WAI-ARIA), WebForm2.0, Web Application API 1.0, CSS3, ECMAScript 5 - 支援HTML5的瀏覽器: Firefox, Safari, Chrome, Opera… and IE9(終於...)
- 支援HTML5的行動裝置: iPhone, iPad, Android
- HTML5主要標籤改進:
簡化成<!DOCTYPE html>, <meta charset=”UTF-8”>, <script>, <style>不需再指定type… - 配置: header, nav, section(內嵌article), aside, footer
- DataURI, <img src=”data:image/png;base64,iVBORw0kGedDarkthread….” alt=”…”>,可以省去Browser再產生一個Request的成本,對於增進Mobile Device瀏覽效率格外有用!!
- 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 <-- 必填欄位 - Context-aware IME: iPhone針對type=”email”時輸入法鍵盤帶出@ .,type=”url”時帶出. / .com
- <canvas> 在網頁上處理2D/3D圖形,甚至可以寫遊戲
實作範例: 載入照片,取得Pixel顏色,轉成灰階 - SVG: IE很早就支援,現在各大瀏覽器也都納入規格中
- 直接用<video> <audio>指定URL播放檔案,可以針對標籤自訂播放介面,用Javascript控制播放,CSS裝飾面板
- 影片解碼器支援議題:
Safari, Chrome, IE9支援H.264編碼(有專利/版權問題), FF, Opera支援Theora編碼...
Google買下VP8 Open Source: Chrome, Firefox, Opera支援VP8, IE9宣稱PC有裝就支援(但會不會Bunddle是未知數),至於Safari,呃.... - Video標籤可支援多種影片格式來源,讓各瀏覽器挑自己支援的格式進行撥放
<video poster=”劇照JPG” controls><source src=”A" type=”video/mp4” /><source src=”B” type=”video/webm” /><source src=”C” type=”video/ogg” /></video> - CSS3的囧況
獨立規格,只是隨著HTML5發燒而一併被討論。各家瀏覽器支援度差異很大,例如圓角。
標準 - border-radius: 5px;
Safari, Chrome: –webkit-border-radius: 5px;
Firefox: –moz-border-radius: 5px;
Opera: –o-border-radius: 5px;
現在搞CSS3的玩法: 用國語說一次、用河洛話、客家語各說一次以確定各瀏覽器都聽得懂 - CSS3 Web Font: 可以指定Font檔案來源,缺字型時下載
- CSS3 漸層(各家語法差異很大): IE尚未支援(可用SVG頂著先)
CSS3 Transition: 產生過場動畫(指定時間長度、Linear or ...)
CSS3 Transform: 變形(旋轉、縮放)
CSS3 Animation: 何時開始、關鍵影格, from->50%->to, 目前只有Webkit支援 - localStorage[“key”] = value (IE8就開始支援)
- 取得地理資訊: navigator.geolocation.getCurrentLocation(succ, fail, opt);
- 多個瀏覽器Window間透過message事件傳遞參數
- var ws = new WebSocket(“ws://localhost:8080/handle”);
ws.onmessage = function(evt) { … }; - 多執行緒!!!
var wk = new Worker(‘heavy_works.js”);
wk.onmessage = function(evt) { … }; - 在桌面產生通知
webkitNotifications.requestPermission(); //取得使用者授權
webkitNotfications.createHTMLNotification(xxx).show(); - Drag & Drop, File API (Google, FF)
在網頁中取得檔案資訊及內容 - ECMAScript 5 多了一些語法、物件改良,不過沒有大驚喜
- 如何突破瀏覽器對HTML5支援不足的問題 ==> 寫出好的Web/App來
脅迫吸引使用者升級瀏覽器
【Developer & Designer協同作業 - 企業應用案例】
導入案例:
- 新光證券下單網頁轉為以Silverlight實作
- 故宮線上購物
傳統做法: 選分類->清單->翻頁 或 下關鍵字搜索。商品種類過多,找尋過程不友善。 重新設計: 居家場景,直接點選照片中的物件連接到分類、運用DeepZoom一次看到所有商品全覽圖,再針對特定部分放大
故宮線上商店UI改善思維:
- 將商品分類重新歸納,使其更明確易被理解
- 原本主畫面資訊及項目龐雜,縮減為13項
- 結合使用者Window Shopping生活經驗,將主畫面場景包裝成商品櫥窗
- DeepZoom -> 獨特但易學習的操作方式
重新設計後的成效:
- 使用者迷路機率降低
- 客戶抱怨減少
- 網路下單增加
- 獨特性帶來宣傳效果
實例示範: DeepZoom Composer, VS2010 VB.NET, Expression Blend 4
【Expression開發WP7】
- Tips: 以前的Blend for WP,在Blend 4.0已整合在一起,不用再另外安裝
- Expression Blend 4,建立Windows Phone Application Project,專案樣版有四種: 一般, DataBound, Pivot, Panorama
- PhoneApplicationPage (等同SL的MainPage),已預先建好Title Panel, CotentPanel
- SL Class Library有可能一行不改就搬到WP7中使用
- 手機直擺棋放方向改變時,可利用OrientationChanged事件中調整物件Margin, Size以充分運用空間
- ApplicationIcon.png <-- 應用程式圖示 62x62,要改其他檔名要用VS2010,Build Action=Content, Project Property裡選取圖檔
- SplashScreenImage.jpg <-- 載入時期等待畫面
- WP7模擬器可支援多點觸控: 需為Windows 7,LCD也要支援(廢話)
- 表演不寫一行程式做一個人名照片清單,點選可看詳細資訊的WP7程式。(有寫到一行程式,章老師願意躺在地上給大家踩)
- Import Data From XML –> 拖拉Collection欄位到頁面變為ListBox –> Edit ItemTemplate –> StackPanel按右鍵轉成Grid調文字照片大小。
- VisualStateGroup: 設定時間1秒, 加入Normal, Select兩種狀態,"錄製"3D翻轉動晝 。
- GotoStateAction行為可設定點一下由Normal->Select狀態轉換,就可產生動畫過場。
- 製作詳細檢視: 增加一個Grid,從Data區拖拉欄位到頁面自動產生Label: Value的表單式檢視UI
- Programmer接手,將DataContext="{StaticResource...}”拿掉,改成從動態資料來源取得
- PS: Silverlight 5明年3月上市
- Panorama內含多個PanoramaItem。內容超寬的PanoramaItem –> Object and Timelines找ListBox按右鍵建立Template再做調整。
- Pivot像是Tab,但可以左右移切換不同PivotItem
- NavigateToPageAction: 在物件上按右鍵選NavigateTo,就可加上點選後導覽至不同頁面的效果
- ApplicatoinBar(應用程式列): 水平時會移到靠實體按鈕那一側
- 按右鍵新增ApplicationBar, 再按右鍵新增IconButton或MenuItem。透明度<100%時跟內容可重疊,不佔空間;ApplicationBar可多個頁面共用。
- Application Bar Icon: 48x48, 但實質內容26x26(外面要包一個圓圈)
- SystemTray: 可決定隱藏或開啟
- Software Input Panel(SIP),轉入欄位的InputScope: Text(字詞提示), Name, Email, Url… (類似HTML5 Context-aware IME)
- 快速格式外介面靠樣式、狀態,此與Silverlight相同。Style拖拉到元件上,就可以立即套用;圖片Make Into Control變成按鈕。
- MediaElement(影音播放) IIS Smooth Streaming Client 1.1,SmoothStreamingMediaElement控件
PS: 此時全場的手機簡訊聲四起,TechDays小祕書送活動簡訊給每個學員... XD - 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)
- 角色扮演動機: 體驗不同生活,沈浸在新鮮情境中、Avatar個人化、聲光刺激(青少年偏愛、上班族較不愛)、解任務的成就感
- 臉書實例
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 餐城: 大家都去館子,會有興趣體驗當餐廳老闆。(桌數、食材、翻桌率...) - 成就動機:
透過遊戲設計獲得大小不同的成功經驗: 排行榜、達成某項成就時發通知給社群成員、累積虛擬金錢(有數字才有效能調校的努力目標 XD)、每天都有Level Up - 臉書實例:
Happy Island 金銀島: 把世界的地標蒐集在一個島上,等八天升級成目標建築,讓User用較緩慢的步調輕鬆玩 - 社交動機: 如偷菜、訪問朋友->增加社群成員間的互動
- 臉書實例:
Lucky Train: 火車進站就有收入,把車子後面的車廂交給朋友經營,朋友的貢獻也增加收入(老鼠會上下線)。升級車廂後,朋友也增加收入。 - 重點: 把有在玩遊戲的人(且願意付錢)留下來,爭取有價值的User(願意付錢的、能帶進更多新會員的),設法讓沒貢獻的人滾蛋 XD
- 網頁遊戲的優勢:
* 門檻低、成本低(一兩個月開發,投資<100萬元)
* Flash/Silverlight較精緻
* 方便、免下載、隨時可玩
* 容易結合網路活動(行銷…)
* 手機、平版電腦也OK - 成功案例 – Trivian(車肥羊 or 部落戰爭)
2004 德語版,佔地為王,同概念衍生成三國、中世紀、大航海... 等風格
2007 Browser Game of the Year, 2008 Best Gameplay and Best role-playing Game - HTML5特色: 新標籤、GPU加速…
- Web技術演進:
Web 1.0: HTML+CSS
Web 2.0: AJAX
Web 3.0: HTML5, Graphically and Media-Rich - 展示TestDrive: Browser Hunt(小精靈,背景球在轉彰顯效能)、Hampster Dance Resolution(跳舞機,可達50-60FPS,手機上10FPS就算高)、Canvas Pinball(打彈珠)、Chrome Experiment(Box2D JS版,模擬物體的物理特性)、FlowerPower(貝氏曲線)
- IE9 CSS3:
圓角框、box-shadow、transittion(過場動畫)、CSS3 Selector、更多Color Space... - DEMO: css3generator.com
- SVG - JS操作DOM改變SVG內容
- SVG較常見應用: 報表、地圖... 實務上應用並不廣泛。因為要依賴客戶端決定產生結果是否正確,不夠可靠。
- DEMO: TestDrive Canvas Pad
- DEMP: 中國字筆順示範(小朋友學寫字)
- PS: 據說WebSocket被移出HTML5規格
- 瀏覽器挑戰: 不同瀏覽器、不同平台版本、不斷推出新版
- 跨瀏覽器的做法:
* <!—[if IE lte 7]> … <[endif] -->
* 用特徵識別: if (document.all) { … } else { … }
* 測試函數存在再叫用(較好的做法): if (document.addEventListener) { … } else { … } - 遊戲設計成敗: 企劃(點子)、美術(視覺)、技術。市場定位明確,敏捷開發快速回應玩家反應
【Developer & Designer協同作業 -- 遊戲開發案例】
講師背景: B+ Studio半業餘工作室,蒼蠅王遊戲開發者
- 設計人員不喜歡Blend,因為仍習慣原本熟悉的工具 => 讓Blend變成輔助SL開發的工具,而非開發SL不得已的選擇
- 實作遊戲範例: 捏氣泡紙
- 設計人員不只是畫圖,要依整體感做調整,包含考量UI的易用性(不喜歡被叫美工)
簡單的設計 != 短時間可以完成。納入整體考量: WP7的主畫面隱含鸚鵡螺黃金比例配置。 - 摸擬遊戲構想: 擬真、800*480、100顆氣泡、七彩、三種破掉狀態、氣泡動態特效、音效、觸控 -> 設計人員意見: 減少氣泡數量以利觸控
- 點陣圖在顯示時不需要運算,較節省資源,向量圖可做到放大不失真。
- 工具: Illustrator - 向量圖案(.ai 可轉 XAML) PhotoShop - 照片 (.psd –> Image)
- 設計觀點: 效果過多未必是好事,需斟酌整體搭配
- 中斷程式人員1分鐘 = 消耗15分鐘的產能
- 程式人員需要花很多時間思考、重構、研究別人程式、實驗效能
設計人員也需要花很多時間製作細節、研究流行元素、實驗風格 - 常見的溝通問題:
* 設計人員在意程式人員變動設計(Debug修改時忽略細節、為了簡化程式)
* 溝通時應傳達想要的目標,而非細節
EX: 字型放大兩級、按鈕改圓角、背景改漸層 ==>
文字清晰,版面柔和一點
* 細節由設計人員提出,再由雙方共同決定 - 推薦書籍: 細節決定互動設計成敗、iPhone UI設計經典案例
Comments
# by Ricardo
to TechEd背包後援會榮譽主席:期待看到你對TechEd 2010背包的評比文喔~~
# by 小黑
請問黑大去參加研討會,是如何記這麼多筆記的?筆電?還是有超人的記憶力。
# by Jeffrey
to 小黑,哈! 你嚴重高估中老年人的記憶能力~~ 我多半是Notebook與紙本筆記本兼用(T43老筆電的續航力只有兩個小時多一點。),回家再趁記憶猶新時趕快整理。到了這種年紀,只能靠勤能補拙囉。