本文讨论了 Microsoft 在跨平台开发中的思维与布局，重点介绍了 HTML5 的应用前景和网站相容性。内容涵盖了如何开发和维护网站，介绍了「釘選網站」的优点与局限性，并探讨了不同平台（如 iOS 和 Windows）下的开发工具和技术。最后，文中指出创新是推动行业发展的关键，强调了现代开发环境的必要性。

1. Microsoft 的跨平台思維及佈局 -由HTML5談起 蔡孟儒資深協理 台灣微軟開發工具暨平台推廣處

3. Microsoft –Our Future

7. 2012

8. 1. 您的網站相容嗎?
2. HTML5 延伸之路

10. http://www.modern.ie

11. http://www.modern.ie
-Scan Site
-Screenshots
-RemoteIE

12. 2. Web & App? HTML5 延伸之路 Web sitePinned SiteHybrid AppNative App

13. 2. Web & App? HTML5 延伸之路 Web sitePinned SiteHybrid AppNative App

14. 典型的網站開發及維護架構
網站開發團隊使用設計工具 (如: Sublime) 編修網頁 (Application UI)
使用習慣的程式碼控制工具 (如: GitHub)
並使用熟悉的開發框架(如: Node.js)
及網站伺服器(如: Azure Web sites)來作日常網站的維護及修 改。

15. 釘選網站Pinned Site
既有的網站要因應現實中的行動化趨勢，最簡單的作法 就是提供使用者「釘選」的功能

16. 以iOS 而言，要加入如以下的程式碼 <!--Info for iOS --> <linkhref="touch-icon-iphone.png"rel="apple-touch-icon"> <linkhref="img/touch-icon-ipad.png"rel="apple-touch-icon"sizes="76x76"> <linkhref="img/touch-icon-iphone-retina.png"rel="apple-touch-icon"sizes="120x120"> <linkhref="img/touch-icon-ipad-retina.png"rel="apple-touch-icon"sizes="152x152">

17. Windows 平台，也是插入類似的程式碼
您可以利用以下的網站直接幫您產出，還能同時達到動態磚(Live Tile) 的效果:
http://www.BuildMyPinnedSite.com/

18. 步驟1: 設定Tile (磚)的文字、背景顏色及圖片

19. 步驟2: 以RSS Feed 來設定動態磚

20. 步驟3: 程式碼自動產生
同時提供連同圖片一起打包好的package，讓您一次上傳 至網站根目錄。

21. 釘選網站Pinned Site
「釘選網站」最大的優勢就是簡單，同時又不會影響到 開發團隊維運既有網站的方式。
但由於執行起來還是傳統的網頁，無法善用裝置端的特 性(如所在位置、照相功能等)，也無法處理無網路時的離 線情境
我們發現不論是在iOS 或Windows 平台，無論是被「釘 選」的網站數量、或是會使用「釘選」網站的使用者人 數都不多。

23. 使用者的日常…

24. Web sitePinned SiteHybrid AppNative App

26. …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

29. End user
experience
Great apps delivered to the user’s choice of device
Development agility to move at mobile speed
Developer Experience
+
+
-

30. Xcode
ADT
Visual
Studio
+
+
-
✗

31. Web sitePinned SiteHybrid AppNative App

33. Visual Studio 2013 + Apache Cordova
DEMO

34. 使用Cordova (PhoneGap) on Visual Studio

35. 可以針對Windows、iOS或 Android 的平台作客製化

38. Plugin -> Native API
Native WebViewEngine
CSS
HTML
JavaScript

39. Front-End Frameworks
WinJS,jQuery Mobile ,AngularJS….
後端服務
Geolocation
行動裝置平台

40. before
after
iOS
Mac-Xcode
VisualStudio
Android
Eclipse
Visual Studio
Windows Apps
VisualStudio
Visual Studio

41. http://wat.codeplex.com/

44. 





47.  Low’sZooplaProperty

48. Expedia.com

52. Web sitePinned SiteHybrid AppNative App

53. 



54. Web
Hybrid
Native
技術困難度
低
低
高
效能
慢
中->快速
快速
支援原生功能
無
可 (各平台API支援度不同)
可
上架市集
無
可
可
離線
無
可
可
跨平台
可
可
無

56. Microsoft –Our Future

57. Our industry does not respect tradition
—it only respects innovation
Microsoft CEO Satya Nadella
Transformation

58. 確保網站相容性
HTML5 延伸之路
http://www.modern.ie
•Visual Studio 2013 + Apache Cordova