20141212 html5 及微軟跨平台佈局 long
59
Microsoft 的跨平台思維及佈局 - 由 HTML5 談起 蔡孟儒 資深協理 台灣微軟 開發工具暨平台推廣處
-
Upload
meng-ru-tsai -
Category
Technology
-
view
325 -
download
6
Transcript of 20141212 html5 及微軟跨平台佈局 long
Microsoft 的跨平台思維及佈局-由HTML5談起
蔡孟儒資深協理台灣微軟開發工具暨平台推廣處
Microsoft – Our Future
2012
1. 您的網站相容嗎? 2. HTML5 延伸之路
2. Web & App? HTML5 延伸之路
Web site Pinned Site Hybrid App Native App
2. Web & App? HTML5 延伸之路
Web site Pinned Site Hybrid App Native App
典型的網站開發及維護架構 網站開發團隊使用設計工具
(如: Sublime) 編修網頁(Application UI)
使用習慣的程式碼控制工具(如: GitHub)
並使用熟悉的開發框架 (如: Node.js)
及網站伺服器 (如: Azure Web sites)來作日常網站的維護及修改。
釘選網站 Pinned Site
既有的網站要因應現實中的行動化趨勢，最簡單的作法就是提供使用者「釘選」的功能
以 iOS 而言，要加入如以下的程式碼
<!-- Info for iOS -->
<link href="touch-icon-iphone.png" rel="apple-touch-icon">
<link href="img/touch-icon-ipad.png" rel="apple-touch-icon" sizes="76x76">
<link href="img/touch-icon-iphone-retina.png" rel="apple-touch-icon" sizes="120x120">
<link href="img/touch-icon-ipad-retina.png" rel="apple-touch-icon" sizes="152x152">
Windows 平台，也是插入類似的程式碼
您可以利用以下的網站直接幫您產出，還能同時達到動態磚 (Live Tile) 的效果:
http://www.BuildMyPinnedSite.com/
步驟1: 設定 Tile (磚)的文字、背景顏色及圖片
步驟2: 以 RSS Feed 來設定動態磚
步驟3: 程式碼自動產生
同時提供連同圖片一起打包好的 package，讓您一次上傳至網站根目錄。
釘選網站 Pinned Site
「釘選網站」最大的優勢就是簡單，同時又不會影響到開發團隊維運既有網站的方式。
但由於執行起來還是傳統的網頁，無法善用裝置端的特性(如所在位置、照相功能等)，也無法處理無網路時的離線情境
我們發現不論是在 iOS 或 Windows 平台，無論是被「釘選」的網站數量、或是會使用「釘選」網站的使用者人數都不多。
使用者的日常…
Web site Pinned Site Hybrid App Native App
…ported from Objective-C to
JavaScript.
…result is an authentic translation
of the game for the web,
showcasing some of the best that
HTML5 has to offer: canvas-
rendered graphics, browser-based
audio and video, CSS3 styling and
the personality of WOFF fonts.
- thebeebs
End user experience
Great apps delivered to the user’s choice of device
Development agility to move at mobile speed
Developer Experience
+
+
-
Xcode ADT Visual Studio
+
+
-
✗
Web site Pinned Site Hybrid App Native App
Visual Studio 2013 + Apache Cordova
DEMO
使用 Cordova (PhoneGap) on Visual Studio
可以針對 Windows、iOS 或Android 的平台作客製化
Plugin -> Native API
Native WebViewEngine
CSS
HTMLJavaScript
Front-End FrameworksWinJS , jQuery Mobile , AngularJS….
後端服務
Geolocation
行動裝置平台
before after
iOS Mac - Xcode Visual Studio
Android Eclipse Visual Studio
Windows Apps Visual Studio Visual Studio
Low’sZoopla Property
Web site Pinned Site Hybrid App Native App
Web Hybrid Native
技術困難度 低 低 高
效能 慢 中->快速 快速
支援原生功能 無 可(各平台API支援度不同)
可
上架市集 無 可 可
離線 無 可 可
跨平台 可 可 無
Microsoft – Our Future
Our industry does not respect tradition
— it only respects innovation
Microsoft CEO Satya Nadella
Transformation
