HTML5

17,266
-1

Published on

HTML5 History and Features

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

No notes for slide

HTML5

  1. @HatemMahmoud ExpressionLab.com April 21, 2011
  2. Agenda <ul><li>Introduction
  3. History
  4. Features
  5. Conclusion
  6. References </li></ul>
  7. Introduction
  8. HTML <ul><li>HTML * is the core technology of the World Wide Web
  9. With HTML, authors describe the structure of Web pages using markup <tags> </li></ul>*HyperText Markup Language
  10. HTML5 <ul><li>The new standard for HTML, XHTML, and HTML DOM
  11. Improves interoperability
  12. Introduces markup and APIs for Web applications </li></ul>
  13. History
  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. 1990 <ul><li>Tim published the first HTML specifications in a document called HTML Tags
  16. Tim wrote the first Web browser
  17. Tim wrote the first Web server </li></ul>
  18. 1991 <ul><li>HTML 1.0 published by IETF * </li></ul>*Internet Engineering Task Force
  19. 1994 <ul><li>Tim founded W3C * as the standards organization for the World Wide Web </li></ul>*World Wide Web Consortium
  20. 1995 <ul><li>HTML 2.0 published by IETF </li></ul>
  21. 1997 <ul><li>HTML 3.2 was the first version developed by W3C and published as a Recommendation
  22. HTML 4.0 was published as a W3C Recommendation </li></ul>
  23. 1999 <ul><li>HTML 4.1 was published as a W3C Recommendation </li></ul>
  24. 2000 <ul><li>XHTML 1.0 was published as a W3C Recommendation
  25. Because XHTML is an XML application, other XML tools can be used (for example, XSLT for transforming XML content) </li></ul>
  26. 2001 <ul><li>XHTML 1.1 was published as a W3C Recommendation </li></ul>
  27. 2004 <ul><li>XHTML 2.0 drafts
  28. Most major browser vendors were unwilling to implement the new features </li></ul>
  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. 2007 <ul><li>W3C formed HTML Working Group to work with WHATWG
  31. Since then, both groups have been working together on the development of the HTML5 specification </li></ul>
  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. 2011
  34. 2011 <ul><li>W3C announced 2014 as the target for Recommendation </li></ul>
  35. Features
  36. Syntax <ul><li>No longer based on SGML *
  37. Backward compatible with common parsing of older versions of HTML </li></ul>*Standard Generalized Markup Language
  38. DOCTYPE <ul><li>DOCTYPE is not a tag , it is an instruction to the browser about the markup language
  39. SGML-based DOCTYPE required a reference to a DTD* </li></ul>*Document Type Definition
  40. HTML 4.01 Strict <ul><li>DTD does not include presentational or deprecated elements
  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. HTML 4.01 Transitional <ul><li>DTD includes presentational and deprecated elements
  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. HTML 4.01 Frameset <ul><li>DTD includes presentational and deprecated elements
  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. Browser Mode <ul><li>Standards Mode DOCTYPE exists and valid
  47. Quirks Mode DOCTYPE doesn't exists or invalid </li></ul>
  48. HTML5 DOCTYPE <ul><li>HTML5 requires a DOCTYPE only to enable Standards Mode </li></ul><!DOCTYPE html>
  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
  52. Authors must not use elements, attributes, or attribute values for purposes other than their intended semantic purpose </li></ul>
  53.  
  54.  
  55.  
  56.  
  57. Input Types
  58. Input Types
  59. Validation
  60. Absent Elements basefont big center font strike tt u frame frameset noframes acronym applet isindex
  61.  
  62. Audio <audio id=&quot;audio&quot; src=&quot;sound.mp3&quot; controls> </audio> <script> document.getElementById(&quot;audio&quot;).muted=false; </script>
  63. Video <video id=&quot;video&quot; src=&quot;movie.webm&quot; autoplay controls> </video> <script> document.getElementById(&quot;video&quot;).play(); </script>
  64.  
  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>
  66. 2D Canvas
  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>
  68. 3D Canvas (Web GL)
  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>
  70. SVG
  71.  
  72. Web Storage <ul><li>key/value pairs </li><ul><li>Key: string
  73. Value: any JavaScript type </li></ul></ul>
  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>
  75. Web Storage <script> sessionStorage .firstname=&quot;Hatem&quot;; document.write( sessionStorage .firstname); </script>
  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.”
  77. Indexed Database API <ul><li>Each database contains object stores
  78. Each object store has a list of records
  79. Each record consists of a key and a value
  80. Indexes allows looking up records in an object store using properties of the values
  81. Cursors used to iterate on records of an index or object store </li></ul>
  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 = ...; };
  83. Offline Web applications <ul><li>Offline browsing
  84. Cached resources load faster
  85. Only download resources that have changed </li></ul>
  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);
  87.  
  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'); }
  89. WebSocket
  90.  
  91. Native Drag & Drop document.addEventListener(' dragstart ', function(event) { event. dataTransfer . setData ('text', 'Customized text'); event. dataTransfer . effectAllowed = 'copy'; }, false);
  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);
  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); }
  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); }
  95. Geolocation API
  96.  
  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); };
  98. Web Workers
  99.  
  100. CSS3 <ul><li>New selectors
  101. Webfonts
  102. Text wrapping
  103. Text stroke
  104. Columns
  105. Shadows
  106. Multiple backgrounds </li></ul><ul><li>Opacity
  107. Hue/saturation
  108. Gradients
  109. Rounded corners
  110. Transitions
  111. Transforms
  112. Animations </li></ul>
  113. Conclusion
  114. Conclusion <ul><li>HTML5 is not one big thing ; it's a collection of individual features
  115. You can’t detect “HTML5 support,” but you can detect support for individual features </li></ul>
  116. Conclusion <ul><li>Upgrading to HTML5 can be as simple as changing doctype
  117. You don’t need to throw anything away
  118. It already works! </li></ul>
  119. References
  120. wikipedia.org/wiki/Html5
  121. w3.org/html/wg
  122. w3.org/TR/html5-diff
  123. whatwg.org
  124. developers.whatwg.org
  125. diveintohtml5.org
  126. html5rocks.com
  127. html5demos.com
  128. </thanks> @HatemMahmoud ExpressionLab.com April 21, 2011

×