• Save
HTML5
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML5

on

  • 15,185 views

HTML5 History and Features

HTML5 History and Features

Statistics

Views

Total Views
15,185
Views on SlideShare
12,952
Embed Views
2,233

Actions

Likes
70
Downloads
0
Comments
11

57 Embeds 2,233

http://afternoon-flower-9390.herokuapp.com 570
http://localhost 361
http://www.phodphad.com 342
http://desdealgunlugardebuenosaires.blogspot.com 253
http://localhost:3000 169
http://desdealgunlugardebuenosaires.blogspot.mx 74
http://computerstories.net 72
http://blog.yamer.net.cn 54
http://www.expressionlab.com 50
http://rwaq.dev 38
http://pkcentum.tistory.com 28
http://desdealgunlugardebuenosaires.blogspot.com.es 27
http://www.computergeneratedimagery.net 25
http://phodphad.com 21
http://urocipc.sms-vps.com 21
http://desdealgunlugardebuenosaires.blogspot.com.ar 20
http://paper.li 14
http://localhost:3001 10
http://deema.espace.ws 9
http://twitter.com 7
http://www.mashme.tv 6
http://www.plurk.com 6
http://moodle.esenviseu.net 5
http://akrut.phodphad.com 5
http://www.utpl.edu.ec 4
http://www.mongodb.org 4
http://www.techgig.com 3
http://www.slideshare.net 3
http://aprendersociales.blogspot.com 2
http://www.petrobras.com.br 2
http://www.facebook.com 2
http://www.cleeki.com 1
http://www.benchmark-analytics.com 1
http://desdealgunlugardebuenosaires.blogspot.nl 1
http://edicolaeuropea.blogspot.com 1
http://www.linkedin.com 1
http://jolidev-jolicloud.dotcloud.com 1
http://merkaquinto.blogspot.com 1
http://j09.indicthreads.com 1
http://us-w1.rockmelt.com 1
https://www.socialtext.net 1
http://www.onlydoo.com 1
http://www.livrosimulacao.eng.br 1
http://www.goback.me 1
http://mujerebelde.blogspot.com 1
http://flow3.typo3.org 1
http://pmsapp.mercadolibre.com.ar 1
http://expressionlab.com 1
http://www.mentoring-unpak.socialgo.com 1
http://pibatef.com.br 1
More...

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 11 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 Presentation Transcript

  • 1. @HatemMahmoud ExpressionLab.com April 21, 2011
  • 2. Agenda
    • Introduction
    • 3. History
    • 4. Features
    • 5. Conclusion
    • 6. References
  • 7. Introduction
  • 8. HTML
    • HTML * is the core technology of the World Wide Web
    • 9. With HTML, authors describe the structure of Web pages using markup <tags>
    *HyperText Markup Language
  • 10. HTML5
    • The new standard for HTML, XHTML, and HTML DOM
    • 11. Improves interoperability
    • 12. Introduces markup and APIs for Web applications
  • 13. History
  • 14. 1989
    • Tim Berners-Lee proposed an Internet-based hypertext system for CERN* researchers to use and share documents
    *Conseil Européen pour la Recherche Nucléaire
  • 15. 1990
    • 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
  • 18. 1991
    • HTML 1.0 published by IETF *
    *Internet Engineering Task Force
  • 19. 1994
    • Tim founded W3C * as the standards organization for the World Wide Web
    *World Wide Web Consortium
  • 20. 1995
    • HTML 2.0 published by IETF
  • 21. 1997
    • 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
  • 23. 1999
    • HTML 4.1 was published as a W3C Recommendation
  • 24. 2000
    • 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)
  • 26. 2001
    • XHTML 1.1 was published as a W3C Recommendation
  • 27. 2004
    • XHTML 2.0 drafts
    • 28. Most major browser vendors were unwilling to implement the new features
  • 29. 2004
    • 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
    *Web Hypertext Application Technology Working Group
  • 30. 2007
    • 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
  • 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
    • W3C announced 2014 as the target for Recommendation
  • 35. Features
  • 36. Syntax
    • No longer based on SGML *
    • 37. Backward compatible with common parsing of older versions of HTML
    *Standard Generalized Markup Language
  • 38. DOCTYPE
    • 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*
    *Document Type Definition
  • 40. HTML 4.01 Strict
    • DTD does not include presentational or deprecated elements
    • 41. Framesets are not allowed
    <!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
    • DTD includes presentational and deprecated elements
    • 43. Framesets are not allowed
    <!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
    • DTD includes presentational and deprecated elements
    • 45. Framesets are allowed
    <!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
    • Standards Mode DOCTYPE exists and valid
    • 47. Quirks Mode DOCTYPE doesn't exists or invalid
  • 48. HTML5 DOCTYPE
    • HTML5 requires a DOCTYPE only to enable Standards Mode
    <!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
    • 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
  • 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
    • key/value pairs
      • Key: string
      • 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=&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
    • 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
  • 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
    • Offline browsing
    • 84. Cached resources load faster
    • 85. Only download resources that have changed
  • 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
    • Drop files from your desktop
    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
    • Drop files onto your desktop
    <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
    • New selectors
    • 101. Webfonts
    • 102. Text wrapping
    • 103. Text stroke
    • 104. Columns
    • 105. Shadows
    • 106. Multiple backgrounds
    • Opacity
    • 107. Hue/saturation
    • 108. Gradients
    • 109. Rounded corners
    • 110. Transitions
    • 111. Transforms
    • 112. Animations
  • 113. Conclusion
  • 114. Conclusion
    • 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
  • 116. Conclusion
    • Upgrading to HTML5 can be as simple as changing doctype
    • 117. You don’t need to throw anything away
    • 118. It already works!
  • 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