HTML5 應用程式開發簡介
•
8 likes•2,828 views
http://www.microsoft.com/taiwan/techdays2011/ IE9 加入了網路應用程式革命的浪潮，導入了 HTML5 技術與 Windows 的整合，使 Web 更有資格成為你的下一個應用程式所使用的開發平台！本課程將簡介 HTML5 等網路新技術所賦予給網路應用程式開發的力量，常用的程式語言、工具、函式庫與開發流程等。這類型的網路應用程式將有別於普通網路服務仰賴伺服器端運算的方式，著重於釋放與利用瀏覽器現有的能力，甚至不需伺服器，以本機檔案包裹的方式在 PC 與手機上執行。 講師簡介 http://www.microsoft.com/taiwan/techdays2011/teacher.aspx#簡冠庭 http://blog.timc.idv.tw/ http://timc.idv.tw/
Recommended
Recommended
More Related Content
What's hot
What's hot (19)
Similar to HTML5 應用程式開發簡介
Similar to HTML5 應用程式開發簡介 (20)
More from Timothy Chien
Recently uploaded
Recently uploaded (20)
HTML5 應用程式開發簡介
- 1. HTML5 ((mdream) Web Developer DEV310
- 2. <me /> ! “(mdream” ! Web Developer, not Designer l Web FrontPage HTML5 l PhotoShop ! Programmer l m(_ _)m
- 3. HTML5 hKp://(mc.idv.tw/wordcloud/
- 4. Outline ! ! HTML5 ! ! IE10 ! Web !
- 6. JavaScript CSS DOM HTML
- 7. How browsers work: Behind the scenes of modern web browsers hKp://taligarsiel.com/Projects/howbrowserswork1.htm
- 8. HTML ! 1991 ! ! crica. 2004 ! CSS 1995 ! HTML 1996 ! 2010 ! JavaScript ECMAScript 1996 ! Event-‐based HTML CSS ! XMLHKpRequest 2004 ! Document Object Model DOM 1996 ! HTML
- 10. JavaScript CSS DOM HTML
- 11. Web as an Applica(on Plaborm
- 12. HTML5 ! <HTML /> ! <blink> <marquee> ! Buzzword™ ! Flash hKp://lovesansrival.blogspot.com/2010/10/first-‐internet-‐ browser-‐wars.html
- 13. HTML5 … ! API l l OS l hKp://www.w3.org/html/logo/
- 14. ! Library, not Framework ! frameworks ! ! Say good bye to some of the “JavaScript PaKerns” hKp://www.w3.org/html/logo/
- 15. OS ! 2D … ! Typed Arrays hKp://www.w3.org/html/logo/
- 16. ! ! ! ! A G O M hKp://www.w3.org/html/logo/
- 17. -‐ Mac -‐ PC -‐ hKp://xkcd.com/934/
- 18. <!doctype html>
- 19. IDE ! IDE ! ! * Authoring Tools
- 20. Internet Explorer F12 Developer Tools
- 21. Chrome, Safari, Webkit Nightly Web Inspector
- 22. Opera Dragonfly
- 23. Firefox Web Console, Firebug
- 24. console.log() Console ! console.log() ! Console ! Console API: hKp://gebirebug.com/wiki/index.php/Console_API
- 25. HTML <!doctype html> <html lang="zh-tw"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>TITLE</title> <link rel="stylesheet" href="assets/style.css"> </head> <body> <!-- HTML here --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2 /jquery.min.js"></script> <script src="assets/script.min.js"></script> </body> </html>
- 26. HTML <!doctype html> <!-- HTML5 --> <html lang=“zh-tw”> <!-- HTML --> <head> <!-- --> <meta charset=“utf-8”> <!– --> <meta http-equiv=“X-UA-Compatible” content=“IE=edge”> <!-- IE --> <title>TITLE</title> <!-- --> <link rel=“stylesheet” href=“assets/style.css”> <!-- --> </head> <body> <!-- --> <!-- HTML here --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2 /jquery.min.js"></script> <!-- jQuery CDN --> <script src=“assets/script.min.js”></script> <!-- JavaScript --> </body> </html>
- 28. JavaScript CSS DOM HTML
- 29. Minimal HTML JavaScript <!doctype html> <html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge”> </head> <body><script src="assets/script.min.js"></script></body> </html>
- 30. JavaScript ECMAScript 5 Strict Mode ! ! “Use Strict”; ! ! var scope ! with ! arguments.callee ! … ! For “The Good Part” ! eval is evil
- 31. jQuery Library The Dollar ! DOM Element $( ) jQuery $(”#neat").addClass("ohmy").show("slow"); var el = document.getElementById(‘neat’); if (!/bohmyb/.test(el.className) el.className += ‘ ohmy’;
- 32. html5shiv Library ! IE6/7/8 HTML5 ! <head> IE condi(onal comment html5.js <!--[if lt IE 9]> <script src="assets/libs/html5.js” type="text/javascript"></script> <![endif]-->
- 33. ! if (!window.FileReader) { … } if (!document.createElement(‘canvas’).getContext) { … } if (!Array.prototype.forEach) { … } ! Modernizer ! Polyfill JavaScript (shim)
- 34. Polyfill if (!Array.prototype.forEach) { Array.prototype.forEach = function(c,d){var e,a;if(this==null)throw new TypeError(" this is null or not defined");var b=Objec t(this),g=b.length>>>0;if({}.toString.cal l(c)!="[object Function]")throw new TypeErro r(c+" is not a function");d&&(e=d);fo r(a=0;a<g;){var f;a in b&&(f=b[Pk],c.cal l(e,f,a,b));a++}}; } Mozilla Developer Network Closure Complier
- 35. Modernizr Library ! 40 HTML5 ! Modernizr ! <HTML> class ! script loader ! …
- 36. Modernizr Library polyfill Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js' });
- 38. API requestAnima(onFrame, setImmediate … ! ! 2005 ! setInterval = ! F.I.R. 2005 ! snowtimer = setInterval("snowIE_NS6()", 10); hKp://www.altan.hr/snow/index.html#eng
- 39. setInterval vs requestAnimateFrame http://msdn.microsoft.com/en-us/ie/hh272906
- 40. API vender prefix shim and fallback window.requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback, element){ window.setTimeout(callback, 1000 / 60); }; })(); requestAnimationFrame( function step() { snowIE_NS6(); if (not_stopped) requestAnimationFrame(step); } ); hKp://paulirish.com/2011/requestanima(onframe-‐for-‐smart-‐anima(ng/
- 41. API
- 42. Web Workers ! while(true) while(true) { snowIE_NS6(); }; ! Web Workers thread while loop var worker = new Worker(‘./snow_calc.js’); worker.onmessage = function (ev) { … };
- 43. Web Workers ! DOM l window global object l XMLHKpRequest importScript() l console.log() (T____T) ! postMessage() scope
- 44. Web Workers
- 45. Drag Drop API & File API ! script l <input type=“file”> ! ! ! !
- 46. Drag Drop API & File API
- 47. Web
- 48. Beyond Browsers ! Site-‐specific Browsers ! HTA: HTML Applica(ons (.hta) ! Ac(veX Control Windows IE ! Web OS ! IE4 Ac(ve Desktop 1997 ! Windows Widgets ! IE9+ ! Windows 8 Metro-‐style App ! OS ! G C (1966-‐1997)
- 49. Build Windows 2011 Keynote, http://www.buildwindows.com/
- 50. Metro UI start screen, http://www.microsoft.com/presspass/events/build/
- 51. Going Mobile ! ! Web App as App ! A i Add to Home Screen ! PhoneGap Windows Phone 7
- 52. JavaScript is more than web ! JavaScript ! Windows Script Host ! ! Node.JS ! Titanium ! Mozilla Applica(on Plaborm (XUL Runner)
- 54. Toward a more beau(ful web ! Web ! Web ! Single toolset for all plaborm ! ! jQuery Modernizr !
- 56. HTML5 ( DEV311 ) 9/15/2011 10:20 – 11:30 hKp://caniuse.com/ (When can I use … ) hKp://diveintohtml5.org/ (Dive into HTML5 HTML5 ) ( )
- 57. hKp://technet.microsow.com/zh-‐ hKp://msdn.microsow.com/zh-‐ tw/default.aspx tw/default.aspx Resources for IT Professionals Resources for Developers windows.microsow.com/zh-‐TW/internet-‐explorer/products/ie/home Microsow Internet Explorer 9 ie.microsow.com/testdrive/ Internet Explorer Test Drive ( IE 10 Preview 2) ( ) hKp://msdn.microsow.com/zh-‐tw/ie/gg192966.aspx Internet Explorer
- 58. © 2009 Microsow Corpora(on. All rights reserved. Microsow, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The informa(on herein is for informa(onal purposes only and represents the current view of Microsow Corpora(on as of the date of this presenta(on. Because Microsow must respond to changing market condi(ons, it should not be interpreted to be a commitment on the part of Microsow, and Microsow cannot guarantee the accuracy of any informa(on provided awer the date of this presenta(on. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.