![Agenda ,[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to HTML5
Similar to HTML5 (20)
Recently uploaded
Recently uploaded (20)
HTML5
- 1. @HatemMahmoud ExpressionLab.com April 21, 2011
- 3. History
- 4. Features
- 5. Conclusion
- 6. References
- 7. Introduction
- 9. With HTML, authors describe the structure of Web pages using markup <tags> *HyperText Markup Language
- 12. Introduces markup and APIs for Web applications
- 13. History
- 16. Tim wrote the first Web browser
- 17. Tim wrote the first Web server
- 22. HTML 4.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)
- 28. Most major browser vendors were unwilling to implement the new features
- 31. Since then, both groups have been working together on the development of the HTML5 specification
- 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
- 35. Features
- 37. Backward compatible with common parsing of older versions of HTML *Standard Generalized Markup Language
- 39. SGML-based DOCTYPE required a reference to a DTD* *Document Type Definition
- 41. Framesets are not allowed <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- 43. Framesets are not allowed <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- 45. Framesets are allowed <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
- 47. Quirks Mode DOCTYPE doesn't exists or invalid
- 49. Example <!doctype html> <html> <head> <meta charset="UTF-8"> <title> Example document </title> </head> <body> <p> Example paragraph </p> </body> </html>
- 52. Authors must not use elements, attributes, or attribute values for purposes other than their intended semantic purpose
- 57. Input Types
- 58. Input Types
- 59. Validation
- 60. Absent Elements basefont big center font strike tt u frame frameset noframes acronym applet isindex
- 62. Audio <audio id="audio" src="sound.mp3" controls> </audio> <script> document.getElementById("audio").muted=false; </script>
- 63. Video <video id="video" src="movie.webm" autoplay controls> </video> <script> document.getElementById("video").play(); </script>
- 65. 2D Canvas <canvas id="canvas" width="838" height="220"></canvas> <script> var canvasContext = document. getElementById("canvas"). getContext ("2d"); 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="canvas" width="838" height="220"></canvas> <script> var gl = document. getElementById("canvas"). getContext ("experimental-webgl"); gl. viewport (0, 0, canvas.width, canvas.height); ... </script>
- 68. 3D Canvas (Web GL)
- 69. SVG <svg> <circle id="myCircle" cx="50%" cy="50%" r="100" fill="url(#myGradient)" onmousedown="alert('hello');"/> </svg>
- 70. SVG
- 73. Value: any JavaScript type
- 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="Hatem"; document.write( sessionStorage .firstname); </script>
- 76. Web SQL Database var db = window. openDatabase ("DBName", "1.0", "description", 5*1024*1024); db. transaction (function(tx) { tx. executeSql ("SELECT * FROM test", [], 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.”
- 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
- 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 = ...; };
- 84. Cached resources load faster
- 85. Only download resources that have changed
- 86. Offline Web applications <html manifest="cache.appcache" > 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);
- 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
- 91. Native Drag & Drop document.addEventListener(' dragstart ', function(event) { event. dataTransfer . setData ('text', 'Customized text'); event. dataTransfer . effectAllowed = 'copy'; }, 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
- 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 ("got: " + event.data); };
- 98. Web Workers
- 101. Webfonts
- 102. Text wrapping
- 103. Text stroke
- 104. Columns
- 105. Shadows
- 107. Hue/saturation
- 108. Gradients
- 109. Rounded corners
- 110. Transitions
- 111. Transforms
- 112. Animations
- 113. Conclusion
- 115. You can’t detect “HTML5 support,” but you can detect support for individual features
- 117. You don’t need to throw anything away
- 118. It already works!
- 119. References
- 121. w3.org/html/wg
- 122. w3.org/TR/html5-diff
- 123. whatwg.org
- 125. diveintohtml5.org
- 126. html5rocks.com
- 127. html5demos.com
- 128. </thanks> @HatemMahmoud ExpressionLab.com April 21, 2011