1. Introduction to HTML5 Programming donghao

2. HTML5 is the New HTML Standard New Elements, Attributes. Full CSS3 Support Video and Audio 2D/3D Graphics Local Storage Local SQL Database Web Applications

3. HTML Elements and jQuery HTML Elements –,,,, etc. CSS – Styling HTML elements. – border-radius, gradient, etc. jQuery – A Javascript library to manipulate HTML elements efficiently. – $("p.neat").addClass("ohmy").show("slow");

4. Graphics Canvas – Use Javascript to draw graphics on the fly. – Bitmap graphics. – http://www.w3.org/TR/2dcontext/ SVG (Scalable Vector Graphics) – Define graphics in XML format. – Attributes can be animated. – Can attach event handlers. – Vector graphics. – http://www.w3.org/TR/SVG/

5. Graphics / Canvas var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(0, 0); context.lineTo(100,100); context.strokeStyle = "black"; context.stroke();

6. Graphics / SVG <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />

7. Data Storage Cookies – Use the jQuery-Cookies plugin. – $.cookie("key", value, { expires: 10 }); – var value = $.cookie("key"); Local Storage – Store data in the browser. – About 5M, depends on browser's setting. – localStorage['key'] = value;

8. Client-Server Communication AJAX: Asynchronous Javascript And XML jQuery syntax: $.ajax(options) – http://api.jquery.com/jQuery.ajax/ Data format: – Plain text. – XML – JSON: JavaScript Object Notation

9. Asynchronous Programming Javascript is Single threaded. Synchronous: – Start job A. – Wait until A is finished. – Do job B. Asynchronous: – Start job A, register callback for A. – Do job B.

10. Asynchronous Example // define a callback function. var callback = function(txt) { alert("Got text:" + txt); }; // start fetching data. $.get("example.txt", callback); alert("Next job.");

11. JSON: Javascript Object Notation http://www.json.org Good way to exchange data. Serialization: Object String.

12. Other Cool Stuff Mustache – Template engine. – Template + Data => HTML. D3: Data Driven Documents – http://d3js.org – Bind data to HTML elements. – Tutorial: http://mbostock.github.com/d3/tutorial/circle.html

13. Reading List http://www.w3schools.com/html5 http://jquery.com http://www.w3.org/TR/2dcontext/ http://www.w3.org/TR/SVG/ http://www.json.org http://mustache.github.com http://d3js.org