Introduction to html5 programming
Download
1 / 13

Introduction to HTML5 Programming - PowerPoint PPT Presentation


  • 107 Views
  • Uploaded on

Introduction to HTML5 Programming. d onghao. 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. HTML Elements and jQuery. HTML Elements <div>, <p>, <body>, <span>, etc. CSS

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Introduction to HTML5 Programming' - iniko


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

Html5 is the new html standard
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


Html elements and jquery
HTML Elements and jQuery

  • HTML Elements

    • <div>, <p>, <body>, <span>, etc.

  • CSS

    • Styling HTML elements.

    • border-radius, gradient, etc.

  • jQuery

    • A Javascript library to manipulate HTML elements efficiently.

    • $("p.neat").addClass("ohmy").show("slow");


Graphics
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/


Graphics canvas
Graphics / Canvas

  • <canvas id="canvas" width="200" height="100"></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();


Graphics svg
Graphics / SVG

  • <?xml version="1.0" standalone="no"?>

  • <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

  • <svgxmlns="http://www.w3.org/2000/svg" version="1.1">

  • <circlecx="100"

  • cy="50"

  • r="40"

  • stroke="black"

  • stroke-width="2"

  • fill="red" />

  • </svg>


Data storage
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;


Client server communication
Client-Server Communication

  • AJAX: AsynchronousJavascript And XML

  • jQuery syntax:$.ajax(options)

    • http://api.jquery.com/jQuery.ajax/

  • Data format:

    • Plain text.

    • XML

    • JSON: JavaScript Object Notation


Asynchronous programming
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.


Asynchronous example
Asynchronous Example

  • // define a callback function.

  • varcallback = function(txt) {

  • alert("Got text:" + txt);

  • };

  • // start fetching data.

  • $.get("example.txt", callback);

  • alert("Next job.");


Json javascript object notation
JSON: Javascript Object Notation

  • http://www.json.org

  • Good way to exchange data.

  • Serialization: Object <-> String.


Other cool stuff
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


Reading list
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


ad