1. Introduction to HTML5

2.  Dive into HTML5 - Mark Pilgrim (http://diveintohtml5.info/) or (http://fortuito.us/diveintohtml5/) or (http://mislav.uniqpath.com/diveintohtml5/)http://diveintohtml5.info/http://fortuito.us/diveintohtml5/http://mislav.uniqpath.com/diveintohtml5/  Also available for PDF download (www.jesusda.com/docs/.../ebook_manual_en_dive -into-html5.pdf) or (http://s3.amazonaws.com/mislav/Dive+into+HTML 5.pdf)www.jesusda.com/docs/.../ebook_manual_en_dive -into-html5.pdfhttp://s3.amazonaws.com/mislav/Dive+into+HTML 5.pdf

4.  Learn HTML5: 10 Must Read Lessons (http://www.webhostingsecretrevealed.com/f eatured-articles/learn-html5-10-must-read- lessons/)http://www.webhostingsecretrevealed.com/f eatured-articles/learn-html5-10-must-read- lessons/

6.  HTML 5 Demos and Examples (http://html5demos.com/)http://html5demos.com/

8.  WDL - 10 HTML5 Demos to Make You Forget About Flash (http://webdesignledger.com/inspiration/10- html5-demos-to-make-you-forget-about-flash)http://webdesignledger.com/inspiration/10- html5-demos-to-make-you-forget-about-flash

10. The term “HTML5” covers a family of web technologies currently being specified by the W3C and being used in various stages by browser vendors.

11. What is commonly referred to as “HTML5” is often a combination of HTML5 markup/features,CSS3 style and JavaScript interactivity/ animation.

12. HTML5 “Core” : New structural and semantic markup CSS3 : Support for animation and much more) Geolocation Canvas Web Storage (Offline Support) Web Sockets Drag and Drop

13. HTML5 addresses current limitations such as multimedia (without browser plugins – for example, Flash, Java, Silverlight), data storage, lack of a native graphical format. These are qualities well suited for web applications.

15. New Structural and Semantic markup is designed to reduce reliance on tags and introduce logical, consistent and readable page elements.

16. Examples of new tags: Structural elements

18. This is my header #header { width:960px; height:100px; background-color:gray; }

19. This is my header header { width:960px; height:100px; background-color:gray; }

20. Many more new semantic tags: Acts a wrapper for one or more related heading elements. It can only contain a group of - elements(s) The element is intended to be used with the element to mark up diagrams, illustrations, photos and more

21. New input types Many more: datepickers, auto-complete, data- lists…

22. and Enabling native audio and video playback within the browser, no browser plugins needed. Resolution-dependent bitmap canvas, which can be used for rendering visual images (charts, game graphics) on the fly in the browser. Provides native drawing and animation format.

23. and

24. http://camendesign.com/code/video_for_everybody/test.html

25. var canvas = document.getElementById ("myCanvas"), context = canvas.getContext("2d"); // x = 10, y = 20, width = 200, height = 100 context.fillRect(10, 20, 200, 100);

26. The canvas element works as a drawing surface on your page.  You can create shapes with colour, gradient, and pattern fills.  You can interactively manipulate pixels onscreen, render text, and export these contents to a static image file - such as a.png.  You can also add JavaScript or the new CSS3 animation features to make the objects you create move, fade, scale - and so on.

27. http://www.lucidchart.com Web applications such as the one at LucidChart.com can use the canvas element to interactively draw charts and diagrams.

28. CSS3 : Support for animation and much more) Web Storage (Offline Support) - http://dev.w3.org/html5/webstorage/#introduction Geolocation - http://dev.w3.org/geo/api/spec- source.html#introduction Drag and Drop - http://developers.whatwg.org/dnd.html#dnd Web Workers and Sockets Microdata - http://developers.whatwg.org/links.html#microdata

29. HTML5 and CSS3 work hand in hand. Many “HTML5 experiences” include CSS3 features.  CSS3 animations and transitions  2D and 3D transformations  backgrounds, borders, RGBa colors, gradients, box and text shadows  multi-column layouts  media queries  web fonts

30. CSS3 animations  Technologies such as Flash have traditionally been used to animate objects in the browser.  You can now create some of the same functionality using CSS rules and properties.  In the future, the HTML5 Canvas element and CSS3 transitions can help designers create interactive and animated elements on the page.  Visit http://animatable.com/demos/madmanimation/ in a Webkit browser - such as Chrome or Safari - to see CSS animation in action.http://animatable.com/demos/madmanimation/

32. CSS3 transitions  CSS transitions are closely related to animation, but fundamentally different.  A transition allows property changes in CSS values to occur smoothly over a specified duration.  You can currently perform this type of animation with JavaScript and Flash, but transitions give designers a tool to use without becoming a scripting expert.  Visit http://daftpunk.themaninblue.com/ to see an example of CSS transitions in action.http://daftpunk.themaninblue.com/

34. CSS 2D- and 3D-transformations  The CSS transform property allows you to rotate, scale or skew an element on your page.  You can also animate transforms.  You can also add the perspective property to the transformation effect to simulate an object positioned or animated in 3D space.  Visit http://www.webkit.org/blog-files/3d- transforms/morphing-cubes.html/ to see an example of a 3D-CSS transformation that is also animated.http://www.webkit.org/blog-files/3d- transforms/morphing-cubes.html/

35. http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html

36. What is an API?  APIs (Application Programming Interfaces) are a way to create applications using pre-built components and are not unique to web development - or even to scripting languages.  One of the main goals of an API is to standardize how certain mechanics work and to simplify otherwise complicated programming tasks.  APIs are very significant in the world of HTML5

37. Takes the concept of browser “cookies” to higher levels. HTML5 provides two ways to store data: localStorage and sessionStorage.  Data saved as localStorage is available at any point – even after browser closes or system is restarted.  Data saved as sessionStorage is lost as soon as that window is closed.

38. http://developers.whatwg.org/ Web pages request user permission to use offline storage.

39. The Geolocation API Specification allows the web browser’s geographic location to be pinpointed. This information is then used to send you relevant data based on your whereabouts. Version 3.5 of Firefox was one of the first browser to make use of geolocation.

40. Example of Geolocation: http://www.flickr.com/map/  This page displays a map of photographs around the world that users have uploaded with metadata that tags their images with the geographical coordinates of the location.  The term for images with this metadata is geotagged. Click ‘Find My Location’

41. Click ‘Share Location’

42. If there are geotagged images in your immediate area, you will see pink circles representing images on a local map.

43.  Web Workers is a framework that addresses browser performance.  When you access advanced web applications, such as mapping or applications that instantly generate charts and graphs, there are several processor-intensive computations that can slow down the performance of your application.  Web Workers are scripts that run in a separate thread.  This separation means that processes, such as obtaining data from a database, occur independently from user behaviour - which creates a more seamless environment for the user

44.  Mobile devices and smartphones are active platforms for HTML5 documents and web applications today.  Browsers such as Apple Safari for iOS have supported features associated with HTML5 - for example, offline storage and CSS3 animations - for a few years.  This is because iOS mobile devices, such as the iPhone and the iPad, have a distinctive hardware profile including screen size and memory capabilities as well as a consistent software profile. The mobile Safari browser on Apple’s iPhone has been using HTML5 features such as offline storage since 2009, and has internal preferences to set the storage size.

45.  Within the landscape of desktop computing, there are far too many variables to support easily, including multiple browsers, old browsers, different monitor resolutions and more.  Users are also demanding content that is optimized for mobile devices, which HTML5 and its supporting technologies can deliver.  For this reason, HTML5 support is a high priority for the manufacturers of these devices.

46. Visit the URL for your primary browser, and then explore the HTML5 features:  Google Chrome (www.chromeexperiments.com)www.chromeexperiments.com  Apple Safari (www.apple.com/html5)www.apple.com/html5  Mozilla Firefox (https://developer.mozilla.org/en/HTML/HTML5)https://developer.mozilla.org/en/HTML/HTML5  Microsoft Internet Explorer (www.nevermindthebullets.com)www.nevermindthebullets.com

48. Google Chrome 06_index.html

49. Safari

50. The web's #1 resource for smoothie recipes

51. #masthead { background-color: #FFF; } #masthead h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 2em; color:#a50476; font-weight: normal; float:right; margin:1.5em 4em 0 0; }

52. The web's #1 resource for smoothie recipes

53. Google Chrome 06_index.html

54. Firefox 3.6 06_index.html

55. When Firefox 3.6 encounters a tag it does not recognise it treats it as an inline element. Add the following code to reset.css: header, section, aside, nav, footer, figure, figcaption{ display:block; }

56. Firefox 3.6 06_index.html

57. Internet Explorer 8 06_index.html

58. When Internet Explorer 8 or earlier encounters a tag it does not recognise it completely ignores them. Add link to JavaScript library called Modernizr – forces IE to recognise HTML5 tags: 06_index.html

59. Internet Explorer 8 06_index.html

60. 07_contactform.html Google Chrome

61. 07_contactform.html Edit: Email: Website: Only effects mobile browsers. In future. will be used to process form data more efficiently.

62. 07_contactform.html Edit: First name:

63. 07_contactform.html Google Chrome

64. 07_contactform.html Edit: First name:

65. 07_contactform.html Google Chrome

66. 07_contactform.html Internet Explorer 8

67. Providing fallback for browsers that don’t support HTML5 features Edit: yepnope({ test: Modernizr.input.placeholder, nope: 'h5f.js', callback: function(url, result, key) { H5F.setup(document.getElementById("contactform")); } }); 07_contactform.html

68. Internet Explorer 8 07_contactform.html

69. jquerytoggle.html Google Chrome

70. Edit: jquerytoggle.html

71. Edit: $(document).ready(function() { $('#CalorieBox').hide(); }); jquerytoggle.html

72. Google Chrome jquerytoggle.html

73. Edit: Calories per serving to Calories per serving jquerytoggle.html

74. Edit: $(document).ready(function() { $('#CalorieBox').hide(); $(‘a#triggerCalorieBox’).click(function() { $(‘#CalorieBox’).show(); e.preventDefault() }); jquerytoggle.html

75. Google Chrome

76. jquerytoggle.html Google Chrome

77. Edit: $(document).ready(function() { $('#CalorieBox').hide(); $(‘a#triggerCalorieBox’).click(function() { $(‘#CalorieBox’).toggle(); e.preventDefault() }); jquerytoggle.html

78. Edit: index.html

79. Firefox 3.6 index.html Not all browsers support the same video formats -.ogg supported by Firefox, Google Cfrome

80. Safari 4.0 Not all browsers support the same video formats -.ogg supported by Firefox, Google Cfrome index.html

81. Edit: Download the video index.html

82. Edit: Download the video Download the video index.html

83. cnavastemplate.html

84. function setup() { var canvas = document.getElementById('lessonCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); } canvastemplate.html

85. function setup() { var canvas = document.getElementById('lessonCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.strokeRect(0, 0, 300, 300); } canvastemplate.html

86. Google Chrome canvastemplate.html

87. function setup() { var canvas = document.getElementById('lessonCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.strokeRect(0, 0, 300, 300); ctx.strokeStyle = ‘rgb(255, 0, 0)’; ctx.strokeRect(0.5, 0.5, 100, 100); } canvastemplate.html

88. Google Chrome

89. function setup() { var canvas = document.getElementById('lessonCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.strokeRect(0, 0, 300, 300); ctx.strokeStyle = ‘rgb(255, 0, 0)’; ctx.strokeRect(0.5, 0.5, 100, 100); ctx.fillRect(20, 20, 100, 100); ctx.fillStyle = ‘rgb(0, 255, 0)’; ctx.fillRect(50, 50, 100, 100); } canvastemplate.html

90. Google Chrome canvastemplate.html

91. function setup() { var canvas = document.getElementById('lessonCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.strokeRect(0, 0, 300, 300); ctx.strokeStyle = ‘rgb(255, 0, 0)’; ctx.strokeRect(0.5, 0.5, 100, 100); ctx.fillRect(20, 20, 100, 100); ctx.fillStyle = ‘rgb(0, 255, 0)’; ctx.fillRect(50, 50, 100, 100); ctx.clearRect(80, 80, 30, 30); } canvastemplate.html

92. Google Chrome canvastemplate.html

93. colorsstylesand gradients_completed.html Google Chrome

94. Firefox 3.6 colorsstylesand gradients_completed.html

95. Google Chrome usingtransforms_completed.html

96. Google Chrome drawingloop_completed.html

97. notepad_example.html

98. Google Chrome notepad_example.html

99. Google Chrome notepad_example.html

100. Google Chrome notepad_example.html

101. Internet Explorer 8 notepad_example.html

102. Firefox 3.6 notepad_example.html

103. Firefox 3.6 notepad_example.html

104. Firefox 3.6 notepad_example.html Firefox 3.6 only use offline storage when on the Web.

105. Edit (line 30): mystorage = window.localStorage || (window.globalStorage ? globalStorage[location.hostname] : null); to mystorage = window.sessionStorage || (window.globalStorage ? globalStorage[location.hostname] : null); notepad_example.html

106. Google Chrome

107. notepad_example.html

108. Google Chrome notepad_example.html

109. Google Chrome notepad_example.html

110. Mozilla Firefox shopping_completed.html

111. Mozilla Firefox checkers_completed.html