Html5 first look by aj.Ball

2,006
-1

Published on

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,006
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
78
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Html5 first look by aj.Ball

  1. 1. The First Look Supote Phunsakul http://codetoday.net Twitter: @SoftEngine  #codetoday  #html5  #wp7dev  #techtags
  2. 2. January 27, 2010
  3. 3. Scott Stanfield @ Mix’11
  4. 4. Scott Stanfield @ Mix’11
  5. 5. Plug-ins are out; HTML5 is in. Scott Stanfield @ Mix’11
  6. 6. http://drama-addict.com
  7. 7. Jobs, “yeah I meant it: Flash sucks” Scott Stanfield @ Mix’11
  8. 8. Adobe’s response
  9. 9. Apple’s (implied) response
  10. 10. Most Flash websites will need to be rewritten to support touch. [...] why not use modern technologies like HTML5, CSS and JavaScript?  Steve Jobs, April 2010 Scott Stanfield @ Mix’11
  11. 11. Apple loves HTML5. Scott Stanfield @ Mix’11
  12. 12. Google loves HTML5. Scott Stanfield @ Mix’11
  13. 13. Microsoft loves HTML5. Scott Stanfield @ Mix’11
  14. 14. PAGE 15
  15. 15. January 18, 2011
  16. 16. It’s official: we have a logo! http://www.w3.org/html/logo/ Scott Stanfield @ Mix’11
  17. 17. The Technology Semantic Offline & Storage Device Access Connectivity Multimedia 3D, Graphics, Effects Performance & Integration CSS3 Styling
  18. 18. What is “HTML5”? PAGE 20 HTML5 ~= HTML + CSS + JS http://www.html5rocks.com
  19. 19. Next Month (May 2011)
  20. 20. Scott Stanfield @ Mix’11
  21. 21. Who’s ready for HTML5?
  22. 22. 11% 23% 2% 6% 56% Chrome Firefox Opera Safari Explorer Scott Stanfield @ Mix’11
  23. 23. 54%*  Browsers support basic <canvas> * From caniuse.com, Feb 2011 Scott Stanfield @ Mix’11
  24. 24. 11%* Still use IE 6 † * Mainland China, 5.8%. USA is 0.6% † IE 6.0 shipped August 2001 Scott Stanfield @ Mix’11
  25. 25. IE6 Deathwatch Scott Stanfield @ Mix’11
  26. 26. 54% Of web traffic comes from Windows XP Scott Stanfield @ Mix’11
  27. 27. 95.91%* Browse on the “desktop” * 89% of that is on Windows Scott Stanfield @ Mix’11
  28. 28. 3.9%* Mobile browsers * Doubled in 12 months! Scott Stanfield @ Mix’11
  29. 29. So, why do we care so much about HTML5? Scott Stanfield @ Mix’11
  30. 30. Because 5 > 4
  31. 31. Scott Stanfield @ Mix’11
  32. 32. What’s my Browser Compatibilty Strategy? (BCS)
  33. 33. Official Tests: w3c-test.org Scott Stanfield @ Mix’11
  34. 34. (Unofficial Tests) HTML5Test.com CanIUse.com Scott Stanfield @ Mix’11
  35. 35. Scott Stanfield @ Mix’11
  36. 36. Scott Stanfield @ Mix’11
  37. 37. Syntax: HTML5 is Terse
  38. 38. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Page</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <p>Hello World!</p> </body></html> Scott Stanfield @ Mix’11
  39. 39. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Page</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <p>Hello World!</p> </body></html> Scott Stanfield @ Mix’11
  40. 40. <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Page</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <p>Hello World!</p> </body></html> Scott Stanfield @ Mix’11
  41. 41. <!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8 /> <title>Untitled Page</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <p>Hello World!</p> </body></html> Scott Stanfield @ Mix’11
  42. 42. <!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8 /> <title>Untitled Page</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <p>Hello World!</p> </body></html> Scott Stanfield @ Mix’11
  43. 43. <!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8 /> <title>Untitled Page</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <p>Hello World!</p> </body> </html> Scott Stanfield @ Mix’11
  44. 44. Semantics: New Tags
  45. 45. Scott Stanfield @ Mix’11
  46. 46. Top 20 Class Names (http://code.google.com/webstats/) Scott Stanfield @ Mix’11
  47. 47. Mapping Popular Class Names Scott Stanfield @ Mix’11
  48. 48. Scott Stanfield @ Mix’11
  49. 49. Scott Stanfield @ Mix’11
  50. 50. Great sites from Beauty Of The Web PAGE 52
  51. 51. HTML5 Topics  Twitter ปรับปรุง Mobile Web ใหม่ เขียนด้วย HTML5 เป็นเว็บแอพ  Adobe Creative Suite 5.5 มาแล้ว เน้น HTML5, มือถือ, แท็บเล็ต  Facebook ออกเครื่องมือช่วยวัดประสิทธิภาพเกม HTML5  NVIDIA/Mozilla/YouTube จับมือโชว์วิดีโอ HTML5 แบบ 3D  ไมโครซอฟท์เปิดตัว Silverlight 5 เบต้า, ยืนยัน Sliverlight มีบทบาทในโลก HTML5  Adobe แจกตัวแปลง Flash เป็น HTML5 แล้วในชื่อ Wallaby  IE9 ผ่านการทดสอบ HTML5 และ CSS3 ร้อยเปอร์เซ็นต์เต็ม  Disney ไม่สน HTML5 ขอทา App ดีกว่า  Disney เข้าซื้อบริษัทเครื่องมือสร้างเกมด้วย HTML5 PAGE 53 http://www.blognone.com
  52. 52. HTML5 Topics  แอปเปิลปรับเว็บใหม่ใช้ HTML5 แทน HTML4  Gmail เพิ่มฟีเจอร์ "แจ้งเตือนเมลใหม่" บนเดสก์ท็อป  มาตรฐานวีดีโอแตกเป็นสองทาง: Chrome ยกเลิกการรองรับ H.264 แล้ว  ไมโครซอฟท์โต้กูเกิล บอก WebM ไม่มีใครใช้  วิดีโอใหม่ใน YouTube ถูกแปลงเป็น WebM หมดแล้ว  IE9 สนับสนุน VP8 Codec บน HTML5  อุตสาหกรรมหนังโป๊ หนุน HTML5 เตรียมบอกลา Flash PAGE 54 http://www.blognone.com
  53. 53. Multimedia Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action!
  54. 54. HTML5 Video & Audio <audio <video src= src= The url to the audio or video width= The width of the video element height= The height of the video element poster= The url to the thumbnail of the video preload= preload= (none, metadata, auto) Start downloading autoplay autoplay Audio or video should play immediately loop loop Audio or video should return to start and play controls controls Will show controls (play, pause, scrub bar) > > … … </audio> </video> Nigel Parker - http://nigelparker.name
  55. 55. The browser will use the first recognized format <video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> Your browser does not support the video tag. </video> PAGE 57
  56. 56. Audio & Video Codecs – Browser Support PAGE 58 If WebM is installed * ! * ! Chrome is removing support for H.264 Microsoft released a H.264 Extension for Chrome on Windows 7 * ! Nigel Parker - http://nigelparker.name
  57. 57. HTML5 Video Codec Browser H.264 (MP4) VP8 (WebM) Internet Explorer 9 X X Google Chrome 12 X X Mozilla Firefox 4 - X Apple Safari 5 X - Opera 11 - X PAGE 59
  58. 58. Apple’s HLS (HTTP Live Streaming) PAGE 60  HTML5 doesn’t specify any form of adaptive streaming  Apple’s HLS is not a part of an industry standard  3GPP and MPEG are in the process of standardizing DASH(Dynamic Adaptive Streaming over HTTP) Nigel Parker - http://nigelparker.name
  59. 59. CSS3 Styling CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before.
  60. 60. Styling Video with CSS PAGE 62 video { position: relative; border-radius: 200px 50px 200px 50px; box-shadow: #244766 10px 10px 10px; transform: rotate(5deg) translate(15px,10px); } Nigel Parker @ Mix’11
  61. 61. Dropdown Menu PAGE 63 HTML <ul class="menu"> <li><a href="/a/">Menu</a> <ul> <li><a href="/a/a">Sub-menu A</a></li> <li><a href="/a/b">Sub-menu A</a></li> <li><a href="/a/c">Sub-menu A</a></li> </ul> </li> </ul> CSS .menu > li > ul { display:none; } .menu > li:hover > ul { display:block; } Jonathan Snook @ Mix’11
  62. 62. Rollovers PAGE 64 CSS a { background-image: url("my-image.png"); } a:hover { background-image: url("roll.png"); } CSS a { background-image: url("my-sprite.png"); background-position: 0 0; } a:hover { background-position:0 -30px; } Jonathan Snook @ Mix’11
  63. 63. Dependent Content PAGE 65 HTML <div class="faq"> <a href="#a1">How much wood could...?</a> <a href="#a2">Who sells seashells...?</a> ... <div id="a1"> The amount of wood that a woodchuck... </div> </div> CSS .faq > div { display:none; } .faq > div:target { display:block; } Jonathan Snook @ Mix’11
  64. 64. Layout: display table with CSS PAGE 66 HTML <table> <tr> <td style="width:50px">Sidebar Content</td> <td >Main Content</td> </tr> </table> HTML <div id="content"> <div class="sidebar">Sidebar Content</div> <div class="main">Main Content</div> </div> CSS #content { display:table; } .sidebar { display:table-cell; width:50px; } .main { display:table-cell; } Jonathan Snook @ Mix’11
  65. 65. Connectivity More efficient connectivity means more real- time chats, faster games, and better communication. Web Sockets and Server- Sent Events are pushing (pun intended) data between client and server more efficiently than ever before.
  66. 66. The concept of “Real Time Web” is awesome. Craig Kitterman & Paul Batum @ Mix’11
  67. 67. WebSockets PAGE 69  Bidirectional  Single TCP socket  In & out of browser  Real time performance  Simple programming model  Bandwidth savings  Scalability advantages a socket that works anywhere across the web …even through network intermediaries Craig Kitterman & Paul Batum @ Mix’11
  68. 68. http://www.html5labs.com DEMO PAGE 70
  69. 69. 3D, Graphics, Effects Between SVG, Canvas, WebGL, and CSS3 3D features, you're sure to amaze your users with stunning visuals natively rendered in the browser.
  70. 70. What’s Canvas?  HTML5 element that allows for dynamic, scriptable rendering of 2D shapes and bitmaps  Immediate mode rendering  Simple API: 45 methods, 21 attributes Jatinder Mann @ Mix’11
  71. 71. Here is the entire API PAGE 73  state  void save();  void restore();  transformations  void scale(…);  void rotate(…);  void translate(…);  void transform(…);  void setTransform(…);  compositing  globalAlpha;  globalCompositeOperation;  colors and styles  strokeStyle;  fillStyle;  CanvasGradient createLinearGradient(…);  CanvasGradient createRadialGradient(…);  CanvasPattern createPattern(…);  Line caps/joins  attribute double lineWidth;  attribute DOMString lineCap;  attribute DOMString lineJoin;  attribute double miterLimit;  Shadows  attribute double shadowOffsetX;  attribute double shadowOffsetY;  attribute double shadowBlur;  attribute DOMString shadowColor;  Rects  void clearRect(…);  void fillRect(…);  void strokeRect(…);  path API  void beginPath();  void closePath();  void moveTo(…);  void lineTo(…);  void quadraticCurveTo(…);  void bezierCurveTo(…);  void arcTo(…);  void rect(…);  void arc(…);  void fill();  void stroke();  void clip();  boolean isPointInPath(…);  focus management  boolean drawFocusRing(…);  drawing images  void drawImage(…);  text  attribute DOMString font;  attribute DOMString textAlign;  attribute DOMString textBaseline;  void fillText(…);  void strokeText(…);  TextMetrics measureText(…);  pixel manipulation  ImageData createImageData(…);  ImageData createImageData(…);  ImageData getImageData(…);  void putImageData(…);  interface CanvasGradient {  void addColorStop(…); };  interface CanvasPattern {};  interface TextMetrics {  readonly attribute double width; };  interface ImageData {  readonly attribute unsigned long width;  readonly attribute unsigned long height;  readonly attribute CanvasPixelArray data; };  interface CanvasPixelArray {  readonly attribute unsigned long length;  getter octet (…);  setter void (…); }; Jatinder Mann @ Mix’11
  72. 72. Create a Canvas Element  <canvas id="myCanvas" width="200" height="100"></canvas> PAGE 74 <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script> http://www.w3schools.com
  73. 73. Offline & Storage Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications.
  74. 74. HTML 5 Semantics Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your users.
  75. 75. Device Access Beginning with the Geolocation API, Web Applications can present rich, device-aware features and experiences. Incredible device access innovations are being developed and implemented, from audio/video input access to microphones and cameras, to local data such as contacts & events, and even tilt orientation.
  76. 76. Performance & Integration Make your Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2. No user should ever wait on your watch.

×