@HatemMahmoud ExpressionLab.com April 21, 2011
Agenda <ul><li>Introduction
History
Features
Conclusion
References </li></ul>
Introduction
HTML <ul><li>HTML * is the core technology of the World Wide Web
With HTML, authors describe the structure of Web pages using markup  <tags> </li></ul>*HyperText Markup Language
HTML5 <ul><li>The  new standard  for HTML, XHTML, and HTML DOM
Improves  interoperability
Introduces markup and APIs for  Web applications </li></ul>
History
1989 <ul><li>Tim Berners-Lee  proposed an Internet-based hypertext system for CERN* researchers to use and share documents...
1990 <ul><li>Tim published the first HTML specifications in a document called  HTML Tags
Tim wrote the  first Web browser
Tim wrote the  first Web server </li></ul>
1991 <ul><li>HTML   1.0  published by  IETF * </li></ul>*Internet Engineering Task Force
1994 <ul><li>Tim  founded  W3C * as the standards organization for the World Wide Web </li></ul>*World Wide Web Consortium
1995 <ul><li>HTML   2.0  published by  IETF </li></ul>
1997 <ul><li>HTML   3.2  was the first version developed by W3C and published as a Recommendation
HTML   4.0  was published as a W3C Recommendation </li></ul>
1999 <ul><li>HTML 4.1  was published as a W3C Recommendation </li></ul>
2000 <ul><li>XHTML 1.0  was published as a W3C Recommendation
Because XHTML is an  XML  application, other XML tools can be used (for example, XSLT for transforming XML content) </li><...
2001 <ul><li>XHTML 1.1  was published as a W3C Recommendation </li></ul>
2004 <ul><li>XHTML 2.0  drafts
Most major browser vendors were unwilling to implement the new features </li></ul>
2004 <ul><li>WHATWG * was formed by individuals from  Mozilla ,  Opera  and  Apple  to work on advancing HTML in response ...
2007 <ul><li>W3C formed  HTML Working Group  to work with  WHATWG
Since then, both groups have been working together on the development of the  HTML5  specification </li></ul>
2009 “ While we recognize the value of the XHTML 2 Working Group’s contributions over the years, after discussion with the...
2011
2011 <ul><li>W3C announced  2014  as the target for Recommendation </li></ul>
Features
Syntax <ul><li>No longer  based on  SGML *
Backward compatible  with common parsing of older versions of HTML </li></ul>*Standard Generalized Markup Language
DOCTYPE <ul><li>DOCTYPE is  not a tag , it is an instruction to the browser about the markup language
SGML-based DOCTYPE required a reference to a DTD* </li></ul>*Document Type Definition
HTML 4.01 Strict <ul><li>DTD does  not  include presentational or deprecated elements
Framesets are  not  allowed </li></ul><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/...
HTML 4.01 Transitional <ul><li>DTD includes presentational and deprecated elements
Framesets are  not  allowed </li></ul><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http:...
HTML 4.01 Frameset <ul><li>DTD includes presentational and deprecated elements
Framesets are allowed </li></ul><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Frameset//EN&quot; &quot;http://www.w3.o...
Browser Mode <ul><li>Standards Mode DOCTYPE exists and valid
Quirks Mode DOCTYPE doesn't exists or invalid </li></ul>
HTML5 DOCTYPE <ul><li>HTML5 requires a DOCTYPE only to enable Standards Mode </li></ul><!DOCTYPE html>
Example <!doctype html> <html> <head>   <meta charset=&quot;UTF-8&quot;>   <title> Example document </title>   </head>   <...
 
Semantics <ul><li>Elements, attributes, and attribute values are defined to have certain  meanings
Authors  must not  use elements, attributes, or attribute values for purposes other than their intended semantic purpose <...
 
 
 
 
Input Types
Input Types
Validation
Absent Elements basefont big center font strike tt u  frame frameset noframes acronym applet isindex
 
Audio <audio id=&quot;audio&quot; src=&quot;sound.mp3&quot; controls> </audio> <script> document.getElementById(&quot;audi...
Video <video id=&quot;video&quot; src=&quot;movie.webm&quot; autoplay controls> </video> <script> document.getElementById(...
 
2D Canvas <canvas id=&quot;canvas&quot; width=&quot;838&quot; height=&quot;220&quot;></canvas> <script>  var canvasContext...
2D Canvas
3D Canvas (Web GL) <canvas id=&quot;canvas&quot; width=&quot;838&quot; height=&quot;220&quot;></canvas> <script> var gl = ...
3D Canvas (Web GL)
SVG <svg> <circle id=&quot;myCircle&quot;    cx=&quot;50%&quot;    cy=&quot;50%&quot;    r=&quot;100&quot;    fill=&quot;u...
SVG
 
Web Storage <ul><li>key/value pairs </li><ul><li>Key: string
Value: any JavaScript type  </li></ul></ul>
Web Storage <script>  storagesaveButton.addEventListener('click',  function (){ window. localStorage.setItem ('value',  ar...
Web Storage <script> sessionStorage .firstname=&quot;Hatem&quot;; document.write( sessionStorage .firstname); </script>
Web SQL Database var db = window. openDatabase (&quot;DBName&quot;, &quot;1.0&quot;, &quot;description&quot;, 5*1024*1024)...
Indexed Database API <ul><li>Each  database  contains object stores
Each  object store  has a list of records
Each  record  consists of a  key  and a  value
Indexes  allows looking up records in an object store using properties of the values
Cursors  used to iterate on records of an index or object store </li></ul>
Indexed Database API var idbRequest = window. indexedDB . open ('Database Name'); idbRequest.onsuccess = function(event) {...
Offline Web applications <ul><li>Offline browsing
Cached resources load faster
Only download resources that have changed </li></ul>
Offline Web applications <html  manifest=&quot;cache.appcache&quot; > window. applicationCache .addEventListener ('updater...
Upcoming SlideShare
Loading in...5
×

HTML5

14,899

Published on

HTML5 History and Features

Published in: Technology
11 Comments
70 Likes
Statistics
Notes
No Downloads
Views
Total Views
14,899
On Slideshare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
0
Comments
11
Likes
70
Embeds 0
No embeds

No notes for slide

HTML5

  1. 1. @HatemMahmoud ExpressionLab.com April 21, 2011
  2. 2. Agenda <ul><li>Introduction
  3. 3. History
  4. 4. Features
  5. 5. Conclusion
  6. 6. References </li></ul>
  7. 7. Introduction
  8. 8. HTML <ul><li>HTML * is the core technology of the World Wide Web
  9. 9. With HTML, authors describe the structure of Web pages using markup <tags> </li></ul>*HyperText Markup Language
  10. 10. HTML5 <ul><li>The new standard for HTML, XHTML, and HTML DOM
  11. 11. Improves interoperability
  12. 12. Introduces markup and APIs for Web applications </li></ul>
  13. 13. History
  14. 14. 1989 <ul><li>Tim Berners-Lee proposed an Internet-based hypertext system for CERN* researchers to use and share documents </li></ul>*Conseil Européen pour la Recherche Nucléaire
  15. 15. 1990 <ul><li>Tim published the first HTML specifications in a document called HTML Tags
  16. 16. Tim wrote the first Web browser
  17. 17. Tim wrote the first Web server </li></ul>
  18. 18. 1991 <ul><li>HTML 1.0 published by IETF * </li></ul>*Internet Engineering Task Force
  19. 19. 1994 <ul><li>Tim founded W3C * as the standards organization for the World Wide Web </li></ul>*World Wide Web Consortium
  20. 20. 1995 <ul><li>HTML 2.0 published by IETF </li></ul>
  21. 21. 1997 <ul><li>HTML 3.2 was the first version developed by W3C and published as a Recommendation
  22. 22. HTML 4.0 was published as a W3C Recommendation </li></ul>
  23. 23. 1999 <ul><li>HTML 4.1 was published as a W3C Recommendation </li></ul>
  24. 24. 2000 <ul><li>XHTML 1.0 was published as a W3C Recommendation
  25. 25. Because XHTML is an XML application, other XML tools can be used (for example, XSLT for transforming XML content) </li></ul>
  26. 26. 2001 <ul><li>XHTML 1.1 was published as a W3C Recommendation </li></ul>
  27. 27. 2004 <ul><li>XHTML 2.0 drafts
  28. 28. Most major browser vendors were unwilling to implement the new features </li></ul>
  29. 29. 2004 <ul><li>WHATWG * was formed by individuals from Mozilla , Opera and Apple to work on advancing HTML in response to W3C's decision to abandon HTML in favor of XML-based technologies </li></ul>*Web Hypertext Application Technology Working Group
  30. 30. 2007 <ul><li>W3C formed HTML Working Group to work with WHATWG
  31. 31. Since then, both groups have been working together on the development of the HTML5 specification </li></ul>
  32. 32. 2009 “ While we recognize the value of the XHTML 2 Working Group’s contributions over the years, after discussion with the participants, W3C management has decided to allow the Working Group’s charter to expire at the end of 2009 and not to renew it”
  33. 33. 2011
  34. 34. 2011 <ul><li>W3C announced 2014 as the target for Recommendation </li></ul>
  35. 35. Features
  36. 36. Syntax <ul><li>No longer based on SGML *
  37. 37. Backward compatible with common parsing of older versions of HTML </li></ul>*Standard Generalized Markup Language
  38. 38. DOCTYPE <ul><li>DOCTYPE is not a tag , it is an instruction to the browser about the markup language
  39. 39. SGML-based DOCTYPE required a reference to a DTD* </li></ul>*Document Type Definition
  40. 40. HTML 4.01 Strict <ul><li>DTD does not include presentational or deprecated elements
  41. 41. Framesets are not allowed </li></ul><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;>
  42. 42. HTML 4.01 Transitional <ul><li>DTD includes presentational and deprecated elements
  43. 43. Framesets are not allowed </li></ul><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;>
  44. 44. HTML 4.01 Frameset <ul><li>DTD includes presentational and deprecated elements
  45. 45. Framesets are allowed </li></ul><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Frameset//EN&quot; &quot;http://www.w3.org/TR/html4/frameset.dtd&quot;>
  46. 46. Browser Mode <ul><li>Standards Mode DOCTYPE exists and valid
  47. 47. Quirks Mode DOCTYPE doesn't exists or invalid </li></ul>
  48. 48. HTML5 DOCTYPE <ul><li>HTML5 requires a DOCTYPE only to enable Standards Mode </li></ul><!DOCTYPE html>
  49. 49. Example <!doctype html> <html> <head> <meta charset=&quot;UTF-8&quot;> <title> Example document </title> </head> <body> <p> Example paragraph </p> </body> </html>
  50. 51. Semantics <ul><li>Elements, attributes, and attribute values are defined to have certain meanings
  51. 52. Authors must not use elements, attributes, or attribute values for purposes other than their intended semantic purpose </li></ul>
  52. 57. Input Types
  53. 58. Input Types
  54. 59. Validation
  55. 60. Absent Elements basefont big center font strike tt u frame frameset noframes acronym applet isindex
  56. 62. Audio <audio id=&quot;audio&quot; src=&quot;sound.mp3&quot; controls> </audio> <script> document.getElementById(&quot;audio&quot;).muted=false; </script>
  57. 63. Video <video id=&quot;video&quot; src=&quot;movie.webm&quot; autoplay controls> </video> <script> document.getElementById(&quot;video&quot;).play(); </script>
  58. 65. 2D Canvas <canvas id=&quot;canvas&quot; width=&quot;838&quot; height=&quot;220&quot;></canvas> <script> var canvasContext = document. getElementById(&quot;canvas&quot;). getContext (&quot;2d&quot;); canvasContext. fillRect (250, 25, 150, 100); canvasContext. beginPath (); canvasContext. arc (450, 110, 100, Math.PI * 1/2, Math.PI * 3/2); canvasContext. lineWidth = 15; canvasContext. lineCap = 'round'; canvasContext. strokeStyle = 'rgba(255, 127, 0, 0.5)'; canvasContext. stroke (); </script>
  59. 66. 2D Canvas
  60. 67. 3D Canvas (Web GL) <canvas id=&quot;canvas&quot; width=&quot;838&quot; height=&quot;220&quot;></canvas> <script> var gl = document. getElementById(&quot;canvas&quot;). getContext (&quot;experimental-webgl&quot;); gl. viewport (0, 0, canvas.width, canvas.height); ... </script>
  61. 68. 3D Canvas (Web GL)
  62. 69. SVG <svg> <circle id=&quot;myCircle&quot; cx=&quot;50%&quot; cy=&quot;50%&quot; r=&quot;100&quot; fill=&quot;url(#myGradient)&quot; onmousedown=&quot;alert('hello');&quot;/> </svg>
  63. 70. SVG
  64. 72. Web Storage <ul><li>key/value pairs </li><ul><li>Key: string
  65. 73. Value: any JavaScript type </li></ul></ul>
  66. 74. Web Storage <script> storagesaveButton.addEventListener('click', function (){ window. localStorage.setItem ('value', area.value); window. localStorage.setItem ('timestamp', (new Date()).getTime()); }, false); textarea.value = window. localStorage.getItem ('value'); </script>
  67. 75. Web Storage <script> sessionStorage .firstname=&quot;Hatem&quot;; document.write( sessionStorage .firstname); </script>
  68. 76. Web SQL Database var db = window. openDatabase (&quot;DBName&quot;, &quot;1.0&quot;, &quot;description&quot;, 5*1024*1024); db. transaction (function(tx) { tx. executeSql (&quot;SELECT * FROM test&quot;, [], successCallback, errorCallback); }); Deprecated! “ All interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardization path.”
  69. 77. Indexed Database API <ul><li>Each database contains object stores
  70. 78. Each object store has a list of records
  71. 79. Each record consists of a key and a value
  72. 80. Indexes allows looking up records in an object store using properties of the values
  73. 81. Cursors used to iterate on records of an index or object store </li></ul>
  74. 82. Indexed Database API var idbRequest = window. indexedDB . open ('Database Name'); idbRequest.onsuccess = function(event) { var db = event.result ; var transaction = db. transaction ([], IDBTransaction.READ_ONLY ); var curRequest = transaction. objectStore ('ObjectStore Name'). openCursor (); curRequest. onsuccess = ...; };
  75. 83. Offline Web applications <ul><li>Offline browsing
  76. 84. Cached resources load faster
  77. 85. Only download resources that have changed </li></ul>
  78. 86. Offline Web applications <html manifest=&quot;cache.appcache&quot; > window. applicationCache .addEventListener ('updateready', function(e) { if (window.applicationCache. status == window.applicationCache. UPDATEREADY ) { window.applicationCache. swapCache() ; if (confirm( 'A new version of this site is available. Load it?' )) { window.location.reload(); } } }, false);
  79. 88. WebSocket var socket = new WebSocket ('ws://html5rocks.websocket.org/echo'); socket. onopen = function(event){ socket. send ('Hello, WebSocket'); }; socket. onmessage = function(event){ alert(event.data); } socket. onclose = function(event){ alert('closed'); }
  80. 89. WebSocket
  81. 91. Native Drag & Drop document.addEventListener(' dragstart ', function(event) { event. dataTransfer . setData ('text', 'Customized text'); event. dataTransfer . effectAllowed = 'copy'; }, false);
  82. 92. Desktop Drag-In <ul><li>Drop files from your desktop </li></ul>document. querySelector('#dropzone'). addEventListener('drop', function(e){ var reader = new FileReader (); reader.onload = function(evt){ document.querySelector('img').src = evt.target.result; }; reader.readAsDataURL(evt.dataTransfer.files[0]); }, false);
  83. 93. Desktop Drag-Out <ul><li>Drop files onto your desktop </li></ul><a href=&quot;src/star.mp3&quot; draggable=&quot;true&quot; class=&quot;dragout&quot; data-downloadurl= &quot; MIMETYPE:FILENAME:ABSOLUTE_URI_TO_FILE &quot;> download</a> var files=document.querySelectorAll('.dragout'); for(var i = 0, file; file = files[i]; ++i){ file.addEventListener('dragstart', function(e){ e.dataTransfer.setData('DownloadURL', this.dataset.downloadurl); }, false); }
  84. 94. Geolocation API if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var latLng = new google.maps.LatLng( position.coords.latitude, position.coords.longitude); var marker = new google.maps.Marker({position: latLng, map: map}); map.setCenter(latLng); }, errorHandler); }
  85. 95. Geolocation API
  86. 97. Web Workers //main.js var worker = new Worker ('task.js'); worker. onmessage = function(event){ alert(event.data); }; worker. postMessage ('data'); //task.js self.onmessage = function(event){ // Do some work self. postMessage (&quot;got: &quot; + event.data); };
  87. 98. Web Workers
  88. 100. CSS3 <ul><li>New selectors
  89. 101. Webfonts
  90. 102. Text wrapping
  91. 103. Text stroke
  92. 104. Columns
  93. 105. Shadows
  94. 106. Multiple backgrounds </li></ul><ul><li>Opacity
  95. 107. Hue/saturation
  96. 108. Gradients
  97. 109. Rounded corners
  98. 110. Transitions
  99. 111. Transforms
  100. 112. Animations </li></ul>
  101. 113. Conclusion
  102. 114. Conclusion <ul><li>HTML5 is not one big thing ; it's a collection of individual features
  103. 115. You can’t detect “HTML5 support,” but you can detect support for individual features </li></ul>
  104. 116. Conclusion <ul><li>Upgrading to HTML5 can be as simple as changing doctype
  105. 117. You don’t need to throw anything away
  106. 118. It already works! </li></ul>
  107. 119. References
  108. 120. wikipedia.org/wiki/Html5
  109. 121. w3.org/html/wg
  110. 122. w3.org/TR/html5-diff
  111. 123. whatwg.org
  112. 124. developers.whatwg.org
  113. 125. diveintohtml5.org
  114. 126. html5rocks.com
  115. 127. html5demos.com
  116. 128. </thanks> @HatemMahmoud ExpressionLab.com April 21, 2011

×