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 !  

5. JavaScript CSS DOM HTML

6. How browsers work: Behind the scenes of modern web browsers hKp://taligarsiel.com/Projects/howbrowserswork1.htm

7.   HTML ! 1991 !  !  crica. 2004!   CSS 1995 !  HTML 1996 !  2010!   JavaScript ECMAScript 1996 !   Event-‐based HTML CSS !  XMLHKpRequest 2004!   Document Object Model DOM 1996 !   HTML

9. Web as an Applica(on Plaborm

10. HTML5 !  <HTML /> !   <blink> <marquee> !   Buzzword™!  Flash hKp://lovesansrival.blogspot.com/2010/10/ﬁrst-‐internet-‐ browser-‐wars.html

11. HTML5 … !  API l  l  OS l  hKp://www.w3.org/html/logo/

12. !   Library, not Framework !  frameworks!  !   Say good bye to some of the “JavaScript PaKerns” hKp://www.w3.org/html/logo/

13. OS !   2D … !   Typed Arrays hKp://www.w3.org/html/logo/

14. !  !  !  !  A G O M hKp://www.w3.org/html/logo/

15. -‐  Mac -‐  PC -‐  hKp://xkcd.com/934/

16. <!doctype html>

17. IDE !  IDE ! !  * Authoring Tools

18. Internet Explorer F12 Developer Tools

19. Chrome, Safari, Webkit Nightly Web Inspector

20. Opera Dragonﬂy

21. Firefox Web Console, Firebug

22. console.log() Console !  console.log() !   Console !   Console API: hKp://gebirebug.com/wiki/index.php/Console_API

23. 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>  <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>

24. 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>   <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>

25. hKp://www.spreadshirt.co.uk/-‐C4408A6786516

27. 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>

28. JavaScript ECMAScript 5 Strict Mode !  !   “Use Strict”;!  !   var scope !   with ! arguments.callee !   …!   For “The Good Part” !  eval is evil

29. 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’;

30. html5shiv Library !   IE6/7/8 HTML5 !   <head> IE condi(onal comment html5.js

31. !  if (!window.FileReader) { … } if (!document.createElement(‘canvas’).getContext) { … } if (!Array.prototype.forEach) { … }!   Modernizer ! Polyﬁll JavaScript (shim)

32. Polyﬁll 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=Object(this),g=b.length>>>0;if({}.toString.call(c)!="[object Function]")throw new TypeError(c+" is not a function");d&&(e=d);for(a=0;a<g;){var f;a in b&&(f=b[Pk],c.call(e,f,a,b));a++}};} Mozilla Developer Network Closure Complier

33. Modernizr Library !   40 HTML5 !   Modernizr !   <HTML> class!   script loader !   …

34. Modernizr Library polyﬁll Modernizr.load({ test: Modernizr.geolocation, yep : geo.js, nope: geo-polyfill.js});

35. <h1>Hello World</h1>

36. API requestAnima(onFrame, setImmediate … !  !   2005 ! setInterval = !   F.I.R. 2005 !   snowtimer = setInterval("snowIE_NS6()", 10); hKp://www.altan.hr/snow/index.html#eng

37. setInterval vs requestAnimateFrame http://msdn.microsoft.com/en-us/ie/hh272906

38. API vender preﬁx 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/

39. API

40. Web Workers !  while(true) while(true) { snowIE_NS6(); };!  Web Workers thread while loop var worker = new Worker(‘./snow_calc.js’); worker.onmessage = function (ev) { … };

41. Web Workers !  DOM l  window global object l  XMLHKpRequest importScript() l  console.log() (T____T)!  postMessage() scope

42. Web Workers

43. Drag Drop API & File API !  script l  <input type=“ﬁle”> !  !  !  ! 

44. Drag Drop API & File API

45. Web

46. Beyond Browsers !   Site-‐speciﬁc 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)

47. Build Windows 2011 Keynote, http://www.buildwindows.com/

48. Metro UI start screen, http://www.microsoft.com/presspass/events/build/

49. Going Mobile ! !   Web App as App !   A i Add to Home Screen ! PhoneGap Windows Phone 7

50. JavaScript is more than web !  JavaScript !   Windows Script Host !   ! Node.JS !   Titanium !   Mozilla Applica(on Plaborm (XUL Runner)

51. Toward a more beau(ful web !   Web !   Web !   Single toolset for all plaborm!  !  jQuery Modernizr! 

52. HTML5 ( DEV311 ) 9/15/2011 10:20 – 11:30 hKp://caniuse.com/ (When can I use … ) hKp://diveintohtml5.org/ (Dive into HTML5 HTML5 ) ( )

53. 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

54. © 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.

HTML5 應用程式開發簡介

Timothy Chien

HTML5 應用程式開發簡介