HTML5	          	  ((mdream)	  Web	  Developer	  DEV310	  
<me	  />	  	  !   “(mdream”	  !   Web	  Developer,	  not	  Designer	         l                        	  Web	            ...
HTML5   hKp://(mc.idv.tw/wordcloud/	  
Outline	  	  	  	  !    !              	  HTML5	  !    !     IE10	  !     Web	  !              	  
JavaScript	   CSS	   DOM	      	  HTML	             	  
How	  browsers	  work:	  Behind	  the	  scenes	  of	  modern	  web	  browsers	  hKp://taligarsiel.com/Projects/howbrowsers...
 	  	     HTML	  !                                             1991 	         !        !                                  ...
JavaScript	   CSS	        	   DOM	      	  HTML	               	  
Web	  as	  an	  Applica(on	  Plaborm
HTML5	                                                       	  !           	  <HTML	                   	  />     !   <bli...
HTML5	                                     	  …	  	  	  	  !                             	  API	                      	   ...
 	  !   Library,	  not	  Framework	  !      frameworks!     !   Say	  good	  bye	  to	  some	  of	  the	  “JavaScript	  Pa...
 OS	          	  	  !   2D	                                        	  …	       !   Typed	  Arrays	                        ...
 !      !                                                   	  !      !    	  A	               G	     O	             	  M	...
-­‐    	  Mac	  -­‐    	  PC	  -­‐                                         	                       hKp://xkcd.com/934/	  
<!doctype	  html>
IDE	               	  	  !         IDE	  ! !                           	                      *	            	  Authoring	 ...
Internet	  Explorer	  F12	  Developer	  Tools	  
Chrome,	  Safari,	  Webkit	  Nightly	  Web	  Inspector	  
Opera	  Dragonfly	  
Firefox	  Web	  Console,	  Firebug	  
 	  console.log()	                        Console 	  	  !                              console.log()	  !   	  Console	  ! ...
HTML	                              	                                                            	  <!doctype html><html la...
HTML	                              	                                                           	  <!doctype html> <!-- HTM...
hKp://www.spreadshirt.co.uk/-­‐C4408A6786516	  
JavaScript	   CSS	        	   DOM	      	  HTML	               	  
Minimal	  HTML	                      	  JavaScript	         	  <!doctype html><html><head>  <meta charset="utf-8">  <meta ...
JavaScript	                                   	  ECMAScript	  5	  Strict	  Mode	  !      !   “Use Strict”;!      !        ...
jQuery	  Library	  The	  Dollar	  !         	  DOM	  Element	     $(              )        jQuery	                        ...
html5shiv	  Library	                    	  !   IE6/7/8	                         	  HTML5	  !   	  <head>	         	  IE	  ...
                                                  	  !      if (!window.FileReader) { … }     if (!document.createElement(...
Polyfill	        	  	  	  if (!Array.prototype.forEach) {   Array.prototype.forEach = function(c,d){var  e,a;if(this==null)...
Modernizr	  Library	  	  	  !              40	                        	  HTML5	  !                        Modernizr	  !   ...
Modernizr	  Library	          polyfill	  Modernizr.load({  test: Modernizr.geolocation,  yep : geo.js,  nope: geo-polyfill....
<h1>Hello	  World</h1>
 API	  requestAnima(onFrame,	  setImmediate	  …	  !      !                                    	  2005	   	       !       s...
setInterval	  vs	  requestAnimateFrame	  	                   http://msdn.microsoft.com/en-us/ie/hh272906
 API	  vender	  prefix	  shim	  and	  fallback	      window.requestAnimationFrame = (function(){          return window.req...
 API	  
Web	  Workers	  	      	  !                   	  while(true)	         	        while(true) { snowIE_NS6(); };!            ...
Web	  Workers	                    	  	  	  !                  	  DOM	       l          window	   	  global	  object     l...
Web	  Workers	  
Drag	  Drop	  API	  &	  File	  API	  	        	  !          	  script	                              	       l            ...
Drag	  Drop	  API	  &	  File	  API	  
Web	     	  
Beyond	  Browsers	  	  	  	  !   Site-­‐specific	  Browsers	       !   HTA:	  HTML	  Applica(ons	  (.hta)	       !   Ac(veX...
Build Windows 2011 Keynote, http://www.buildwindows.com/
Metro UI start screen, http://www.microsoft.com/presspass/events/build/
Going	  Mobile	  	  	  	  ! !   Web	  App	  as	  App    !   A	   i	                     Add	  to	  Home	  Screen    ! Phon...
JavaScript	  is	  more	  than	  web	  	  	  	  !                            	  JavaScript	              	       !     Wind...
Toward	  a	  more	  beau(ful	  web	  	  	  !   Web	                                             	  !   Web	       !   Sing...
      HTML5                                                                     (	  DEV311	  )	  9/15/2011	  	  10:20	  –	...
 hKp://technet.microsow.com/zh-­‐                              hKp://msdn.microsow.com/zh-­‐tw/default.aspx	              ...
©	  2009	  Microsow	  Corpora(on.	  All	  rights	  reserved.	  Microsow,	  Windows,	  Windows	  Vista	  and	  other	  prod...
HTML5 應用程式開發簡介
HTML5 應用程式開發簡介
HTML5 應用程式開發簡介
HTML5 應用程式開發簡介
Upcoming SlideShare
Loading in …5
×

HTML5 應用程式開發簡介

7,665 views

Published on

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/

Published in: Technology, Design
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,665
On SlideShare
0
From Embeds
0
Number of Embeds
1,692
Actions
Shares
0
Downloads
163
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

HTML5 應用程式開發簡介

  1. 1. HTML5    ((mdream)  Web  Developer  DEV310  
  2. 2. <me  />    !   “(mdream”  !   Web  Developer,  not  Designer   l   Web    FrontPage    HTML5   l  PhotoShop    !   Programmer   l   m(_  _)m  
  3. 3. HTML5 hKp://(mc.idv.tw/wordcloud/  
  4. 4. Outline        !  !    HTML5  !  !   IE10  !   Web  !    
  5. 5. JavaScript   CSS   DOM    HTML    
  6. 6. How  browsers  work:  Behind  the  scenes  of  modern  web  browsers  hKp://taligarsiel.com/Projects/howbrowserswork1.htm  
  7. 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    
  8. 8. JavaScript   CSS     DOM    HTML    
  9. 9. Web  as  an  Applica(on  Plaborm
  10. 10. HTML5    !   <HTML    /> !   <blink>    <marquee>  !   Buzzword™!   Flash   hKp://lovesansrival.blogspot.com/2010/10/first-­‐internet-­‐ browser-­‐wars.html  
  11. 11. HTML5    …        !   API     l  l   OS   l  hKp://www.w3.org/html/logo/  
  12. 12.    !   Library,  not  Framework  !  frameworks!  !   Say  good  bye  to  some  of  the  “JavaScript  PaKerns”   hKp://www.w3.org/html/logo/  
  13. 13.  OS      !   2D    …   !   Typed  Arrays     hKp://www.w3.org/html/logo/  
  14. 14.  !  !   !  !   A   G   O    M     hKp://www.w3.org/html/logo/  
  15. 15. -­‐   Mac  -­‐   PC  -­‐    hKp://xkcd.com/934/  
  16. 16. <!doctype  html>
  17. 17. IDE      !  IDE  ! !    *    Authoring  Tools  
  18. 18. Internet  Explorer  F12  Developer  Tools  
  19. 19. Chrome,  Safari,  Webkit  Nightly  Web  Inspector  
  20. 20. Opera  Dragonfly  
  21. 21. Firefox  Web  Console,  Firebug  
  22. 22.    console.log()   Console    !  console.log()  !    Console  !   Console  API:     hKp://gebirebug.com/wiki/index.php/Console_API
  23. 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> <!-- 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>
  24. 24. 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>
  25. 25. hKp://www.spreadshirt.co.uk/-­‐C4408A6786516  
  26. 26. JavaScript   CSS     DOM    HTML    
  27. 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. 28. JavaScript    ECMAScript  5  Strict  Mode  !  !   “Use Strict”;!  !   var   scope   !   with ! arguments.callee   !   …!   For  “The  Good  Part”  !  eval  is  evil  
  29. 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. 30. 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]-->
  31. 31.    !  if (!window.FileReader) { … } if (!document.createElement(‘canvas’).getContext) { … } if (!Array.prototype.forEach) { … }!   Modernizer  ! Polyfill JavaScript   (shim)  
  32. 32. 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=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. 33. Modernizr  Library      !   40    HTML5  !   Modernizr  !    <HTML>    class!    script  loader  !   …  
  34. 34. Modernizr  Library   polyfill  Modernizr.load({ test: Modernizr.geolocation, yep : geo.js, nope: geo-polyfill.js});
  35. 35. <h1>Hello  World</h1>
  36. 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. 37. setInterval  vs  requestAnimateFrame     http://msdn.microsoft.com/en-us/ie/hh272906
  38. 38.  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/  
  39. 39.  API  
  40. 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. 41. Web  Workers        !   DOM   l  window    global  object l  XMLHKpRequest   importScript()   l  console.log()    (T____T)!  postMessage()    scope
  42. 42. Web  Workers  
  43. 43. Drag  Drop  API  &  File  API      !   script     l   <input  type=“file”>    !    !  !  ! 
  44. 44. Drag  Drop  API  &  File  API  
  45. 45. Web    
  46. 46. 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)  
  47. 47. Build Windows 2011 Keynote, http://www.buildwindows.com/
  48. 48. Metro UI start screen, http://www.microsoft.com/presspass/events/build/
  49. 49. Going  Mobile        ! !   Web  App  as  App !   A   i   Add  to  Home  Screen ! PhoneGap  Windows  Phone  7  
  50. 50. JavaScript  is  more  than  web        !   JavaScript     !   Windows  Script  Host   !     ! Node.JS   !   Titanium   !   Mozilla  Applica(on  Plaborm  (XUL  Runner)  
  51. 51. Toward  a  more  beau(ful  web      !   Web    !   Web   !   Single  toolset  for  all  plaborm!  !  jQuery Modernizr! 
  52. 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. 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. 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.  

×