html5 an introduction · 2011-01-24 · html5 an introduction group 3: nguyen viet thang le anh...

HTML5An Introduction

Group 3:

Nguyen Viet Thang

Le Anh Hoang

Nguyen Phuong Anh

Phan Thi Thanh Ngoc

Truong Van Thang

Truong Quang Minh

HTM

L5 -

Intr

od

uct

ion

1

Overview

Introduction

HTML5 Canvas

HTML5 Audio and Video

HTML5 Geolocation

HTML5 Web storage

HTML5 Websocket

The future of HTML5

HTM

L5 -

Intr

od

uct

ion

2

What is Html?

• HTML stands for Hypertext Markup Language

HTM

L5 -

Intr

od

uct

ion

3

A short history of HTML

• 1991 HTML first mentioned – Tim Berners-Lee – HTML Tags

• 1993 HTML

• 1993 HTML 2 draft

• 1995 HTML 2 – W3C

• 1995 HTML 3 draft

• 1997 HTML 3.2 – “Wilbur”

• 1997 HTML 4 - ”Cougar” - CSS

• 1999 HTML 4.01

• 2000 XHTML draft

• 2001 XHTML

HTM

L5 -

Intr

od

uct

ion

4

A short history of AJAX 5

HTM

L5 -

Intr

od

uct

ion

A More Powerful Web 6

HTM

L5 -

Intr

od

uct

ion

Browser Support For HTML5 7

HTM

L5 -

Intr

od

uct

ion

What’s New?

HTM

L5 -

Intr

od

uct

ion

8

Pre-HTML5

<!DOCTYPE html PUBLIC "-//W3C//DTD

XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xh

tml1-strict.dtd">

HTML5<!DOCTYPE html>

Changes to old Tags: Doctype

Changes to old Tags: htmlPre-HTML5

<html xmlns="http://www.w3.org/1999/xhtml"

lang="en" xml:lang="en">

HTML5

<html lang="en" xml:lang="en">

HTM

L5 -

Intr

od

uct

ion

9

Changes to old Tags

• <link rel="stylesheet" href="style-

original.css" >

• <meta charset="utf-8">

• Provide new tag

• <header><hgroup><nav><article><aside><footer>

HTM

L5 -

Intr

od

uct

ion

10

What is being not supported in HTML5?• BASEFONT• BIG• CENTER• FONT• S• STRIKE• TT• U• FRAME• FRAMESET• NOFRAMES• ACRONYM• APPLET• ISINDEX• DIR

HTM

L5 -

Intr

od

uct

ion

11

Can be duplicated with the CSS element or iFrame.

New important feature

• Canvas

• Audio and video

• Geolocation

• Web database (app cache & database)

• Web socket

HTM

L5 -

Intr

od

uct

ion

12

CANVAS 13

HTM

L5 -

Intr

od

uct

ion

Until Recently, you couldn’t draw on the web 14

HTM

L5 -

Intr

od

uct

ion

And graphics weren’t very interactive 15

HTM

L5 -

Intr

od

uct

ion

Javascript:onClick(Draw());

The usual options to solve the problem 16

HTM

L5 -

Intr

od

uct

ion

Overview of HTML5 Canvas

• What is a Canvas?

• graphics, charts, images, animation

• Introduced by Apple

HTM

L5 -

Intr

od

uct

ion

17

Canvas Coordinates

HTM

L5 -

Intr

od

uct

ion

18

x and y coordinates on a canvas

Browser Support for HTML5 Canvas

HTM

L5 -

Intr

od

uct

ion

19

Adding a Canvas to a Page

HTM

L5 -

Intr

od

uct

ion

20

<canvas id="diagonal" style="border: 1px solid;" width="200" height="200">

</canvas>

A simple HTML5 canvas element on an HTML page

Translated diagonal line on a canvas

HTM

L5 -

Intr

od

uct

ion

21

Diagonal line on a canvas

<script>

function drawDiagonal() {

// Get the canvas element and its drawing context

var canvas = document.getElementById('diagonal');

var context = canvas.getContext('2d');

// Create a path in absolute coordinates

context.beginPath();

context.moveTo(70, 140);

context.lineTo(140, 70);

// Stroke the line onto the canvas

context.stroke();

}

window.addEventListener("load", drawDiagonal, true);

</script>

Working with Paths

HTM

L5 -

Intr

od

uct

ion

22

function createCanopyPath(context) { // Draw the tree canopy context.beginPath();

context.moveTo(-25, -50); context.lineTo(-10, -80); context.lineTo(-20, -80); context.lineTo(-5, -110); context.lineTo(-15, -110); // Top of the tree context.lineTo(0, -140); context.lineTo(15, -110); context.lineTo(5, -110); context.lineTo(20, -80); context.lineTo(10, -80); context.lineTo(25, -50);

// Close the path back to its start point context.closePath();

}

function drawTrails() { var canvas =

document.getElementById('trails'); var context =

canvas.getContext('2d');

context.save(); context.translate(130, 250);

// Create the shape for our canopy path createCanopyPath(context);

// Stroke the current path context.stroke(); context.restore();

}

Working with Paths

HTM

L5 -

Intr

od

uct

ion

23

A simple path of a tree canopy

Working with Stroke Styles

HTM

L5 -

Intr

od

uct

ion

24

// Increase the line width context.lineWidth = 4;

// Round the corners at path joints context.lineJoin = 'round';

// Change the color to brown context.strokeStyle = '#663300';

// Finally, stroke the canopy context.stroke();

Stylish stroked tree canopy

Working with Fill Styles

HTM

L5 -

Intr

od

uct

ion

25

// Set the fill color to green and fill the canopy context.fillStyle = '#339900'; context.fill();

Filled tree canopy

Other Canvas APIs

• Drawing Curves

• Inserting Images into a Canvas

• Using Gradients

• Using Background Patterns

• Scaling Canvas Objects

• Using Canvas Transforms

• Using Canvas Text

• Applying Shadows

• Working with Pixel Data

• Implementing Canvas Security

HTM

L5 -

Intr

od

uct

ion

26

HTML5 Forms

HTM

L5 -

Intr

od

uct

ion

27

•New input types, new functions and attributes

HTML5 Forms

HTM

L5 -

Intr

od

uct

ion

28

New form attributes and functions

HTM

L5 -

Intr

od

uct

ion

29

The placeholder Attribute

<label>Runner: <input name="name" placeholder="First and last name" required></label>

The autocomplete Attribute

<input type="text" name="creditcard" autocomplete="off">

The autofocus Attribute

<input type="search" name="criteria" autofocus>

The list Attribute and the datalist Element


HTM

L5 -

Intr

od

uct

ion

30

The list Attribute and the datalist Element

<datalist id="contactList"> <option value="[email protected]" label="Racer X"> <option value="[email protected]" label="Peter">

</datalist>

<input type="email" id="contacts" list="contactList">


HTM

L5 -

Intr

od

uct

ion

31

•The min and max Attributes•The step Attribute•The valueAsNumber Function• The required Attribute•Checking forms with validation•Validation Fields and Functions•Turning Off Validation

Demo HTML Forms http://rendera.heroku.com/

http://rendera.heroku.com/

http://rendera.heroku.com/

Browser Support for HTML5 Form

HTM

L5 -

Intr

od

uct

ion

32

Browser Details

Chrome 5.0.x supports input types email, number, tel,

url, search, and range. Most

validation.

Firefox Not supported in 3.6. Initial support coming in

4.0.Unsupported input types such

as url, email, and range will fall back to a text

field.

Internet Explorer Not supported, but new types will fall back to a

text field rendering.

Opera Strong support for initial specifications in

current versions, including validation.

Safari 4.0.x supports input types email, number, tel,

url, search, and range. Most

validation. Some types supported better in

mobile Safari.

Video and Audio 33

HTM

L5 -

Intr

od

uct

ion

Browser support for HTML5 Audio and Video

HTM

L5 -

Intr

od

uct

ion

34

Using the HTML5 Audio and Video As a user: don't have to bother

installing any plug-in

As a developer: really easy

HTM

L5 -

Intr

od

uct

ion

35

Using the HTML5 Audio

<audio src="LOVE TODAY.ogg" src="LOVE TODAY.mp3"

controls="controls">

</audio> HTM

L5 -

Intr

od

uct

ion

36

Element attributes

HTM

L5 -

Intr

od

uct

ion

37

Audio Format

HTM

L5 -

Intr

od

uct

ion

38

VIDEO

<html>

<video id="clip1" controls="controls">

<source src="clip1.webm" />

</video>

</html> HTM

L5 -

Intr

od

uct

ion

39

Element attributes

HTM

L5 -

Intr

od

uct

ion

40

Video Format

HTM

L5 -

Intr

od

uct

ion

41

Geolocation 42

HTM

L5 -

Intr

od

uct

ion

What is this?

Geolocation provides location information for the device, such as latitude and longitude. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs. No guarantee is given that the API returns the device's actual location.

The World Wide Web Consortium (W3C) have published a Geolocation API specification in HTML5 that allows a web page to query the user's location using JavaScript to access objects exposed by the browser.

Methods• geolocation.getCurrentPosition• geolocation.watchPosition• geolocation.clearWatch• ...

HTM

L5 -

Intr

od

uct

ion

43

http://docs.phonegap.com/phonegap_geolocation_geolocation.md.html

http://dev.w3.org/geo/api/spec-source.html

http://dev.w3.org/geo/api/spec-source.html




HTM

L5 -

Intr

od

uct

ion

44

• GSM/CDMA cell IDs

Wifi or ip address

GPS

Demo• var map = null;• var geocoder = null;•

• function initialize() {• if (GBrowserIsCompatible()) { //check Browser is compatible ?• map = new GMap2(document.getElementById("map_canvas")); //Draw map• map.setCenter(new GLatLng(37.4419, -122.1419), 13); //Set center of map• geocoder = new GClientGeocoder(); //access the Google Maps API geocoding service via the GClientGeocoder object• }• }•

• function showAddress(address) {• if (geocoder) { //Use GClientGeocoder.getLatLng() to convert a string address into a GLatLng. This method takes as parameters a

string address to convert, and a callback function to execute upon retrieval of the address.• geocoder.getLatLng(• address,• function(point) { //we geocode an address, add a marker at that point, and open an info window displaying the address.• if (!point) {• alert(address + " not found");• } else {• map.setCenter(point, 13);• var marker = new GMarker(point);• map.addOverlay(marker);• marker.openInfoWindowHtml(address);• }• }• );• }• }

HTM

L5 -

Intr

od

uct

ion

45

App cache & database 46

HTM

L5 -

Intr

od

uct

ion

Storing Data on the Client

• HTML5 offers two new objects for storing data on the client:

• localStorage - stores data with no time limit

• sessionStorage - stores data for one session

• HTML5 uses JavaScript to store and access the data

HTM

L5 -

Intr

od

uct

ion

47

The localStorage Object

• The localStorage object stores the data with no time limit

• The data will be available the next day, week, or year.

• How to create and access a localStorage?

• <script type="text/javascript">localStorage.lastname="Smith";document.write(localStorage.lastname);</script>

• Your result: Last name: Smith

• Demo: http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_webstorage_local

HTM

L5 -

Intr

od

uct

ion

48

http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_webstorage_local

http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_webstorage_local

The localStorage Object

• The following example counts the number of times a user has visited a page:• <script type="text/javascript">

if (localStorage.pagecount){

localStorage.pagecount=Number(localStorage.pagecount) +1;}

else{

localStorage.pagecount=1;}

document.write("Visits "+ localStorage.pagecount + " time(s).");</script>

• Your result: Visits: 4 time(s). Refresh the page to see the counter increase.Close the browser window, and try again, and the counter will continue.

• Demo: http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_webstorage_local_pagecount

HTM

L5 -

Intr

od

uct

ion

49

http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_webstorage_local_pagecount

http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_webstorage_local_pagecount

The sessionStorage Object

• The sessionStorage object stores the data for one session. The data is deleted when the user closes the browser window.

• How to create and access a sessionStorage:

• <script type="text/javascript">sessionStorage.lastname="Smith";document.write(sessionStorage.lastname);</script>

• Your result: Smith

• Demo: http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_webstorage_session

HTM

L5 -

Intr

od

uct

ion

50

http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_webstorage_session

http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_webstorage_session

The sessionStorage Object

• The following example counts the number of times a user has visited a page, in the current session:• <script type="text/javascript">

if (sessionStorage.pagecount){sessionStorage.pagecount=Number(sessionStorage.pagecount)

+1;}else{

sessionStorage.pagecount=1;}document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");</script>

• Your result: Visits 1 time(s) this session. Refresh the page to see the counter increase. Close the browser window, and try again, and the counter has been reset.

• Demo: http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_webstorage_session_pagecount

HTM

L5 -

Intr

od

uct

ion

51

http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_webstorage_session_pagecount

http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_webstorage_session_pagecount

Web socket 52

HTM

L5 -

Intr

od

uct

ion

WebSocket Attributes

HTM

L5 -

Intr

od

uct

ion

53

WebSocket Events

HTM

L5 -

Intr

od

uct

ion

54

WebSocket Methods

HTM

L5 -

Intr

od

uct

ion

55

WebSocket Example Demo

• Creating Client Side HTML & JavaScript Code File

HTM

L5 -

Intr

od

uct

ion

56


• Install pywebsocket

1. Unzip and untar the downloaded file.

2. Go inside pywebsocket-x.x.x/src/ directory.

3. $python setup.py build => python compiler

4. $sudo python setup.py install

5. Then read document by:• $pydoc mod_pywebsocket

• This will install it into your python environment

HTM

L5 -

Intr

od

uct

ion

57


• Start the Server• Go to the pywebsocket-x.x.x/src/mod_pywebsocket

• folder and run the following command


HTM

L5 -

Intr

od

uct

ion

58


• Go to the pywebsocket-x.x.x/src/mod_pywebsocket

folder and run the following command


HTM

L5 -

Intr

od

uct

ion

59

This will start the server listening at port 9998 and use the handlers

directory specified by the -w option where our echo_wsh.py resides.

What’s else?

• Web workers

• Offline web applications

• Cross-document messaging

• Drag and Drop

• Server sent DOM events

• Inline SVG

HTM

L5 -

Intr

od

uct

ion

60

Future of HTML5

• HTML5 provides powerful programming features

• HTML in Three Dimensions

• 3D Shaders

• Devices

• Peer to peer networking

HTM

L5 -

Intr

od

uct

ion

61

Reference

• Peter Lubbers, Brian Albers, and Frank Salim, “Programming Powerful APIs for Richer Internet Application Development”

• Mathew David, “HTML5 Designing Rich Internet Application”

• Information that search from Google website.

HTM

L5 -

Intr

od

uct

ion

62

ANY QUESTION OR COMMENT?

Nguyen Viet ThangLe Anh Hoang

Phan Thi Thanh NgocNguyen Phuong Anh

Truong Van ThangTruong Quang Minh

HTM

L5 -

Intr

od

uct

ion

63

What is required to support HTML5 from the client-side? And from the server-side?

• Client-side:

• Browser support HTML5 (Such as: Safari 5.0, Google Chrome, Firefox 3.5 or over, Internet Explorer 9.0)

• Server-side:

• HTML5 also applies the Comet communication pattern by defining Server-Sent Events (SSE). So the server must support the comet long-term connection to user the HTML5 Web Socket API

• Server must support to response HTML in HTML5 format.

HTM

L5 -

Intr

od

uct

ion

64

Explain in two or three sentences the benefits of the canvas environment.

• The HTML 5 canvas environment gives a standard way of handling drawing and animation in the web browser without using to a third-party plug-in. Plus, the canvas tag is a part of the document, so the browser can easily integrate it into the content. The canvas environment provides developers with a simple way to using JavaScript to draw diagrams, graphics and animations on a web page. With canvas, you can blur, burn, and dodge your images easily.

HTM

L5 -

Intr

od

uct

ion

65

What are the main improvements of HTML5?• In my opinion, HTML5 has added five important feature

• Web workers: This feature allows developer to separate background threads used to do processing without effecting performance of a webpage, it can be very useful for web applications which relies on heavy scripts to perform functions.

• Audio & Video element: Developer can embed video code with the same amount of ease as they now embed an image with the ability to manipulate audio, videos and built-in video controls among other things.

• Canvas: Let user render graphics and images on the webpage.• Application caches: It is the ability to store web apps like email

locally and access it without having to connect to the internet or install an external client like Outlook or Thunderbird.

• Geolocation: This API defines location information with high-level interface (GPS) associated with the device hosting the API. Developer can build a lot of feature with this API such as: identify the location of the user and finding the shortest way to the destination, etc.

HTM

L5 -

Intr

od

uct

ion

66

Explain with more details why the Web Socket example is related to HTML5

• Normally when a browser visits a web page, an HTTP request is sent to the web server that hosts that page. The webserver receive this request and sends back response . The problem is the response could be stale by the time the browser renders the page with some cases such as for stock prices, news reports and so on. In HTML5, the Web Sockets is added to solve this problem. Web Sockets API support a full-duplex communication channel that works over a single socket and it is exposed through a JavaScript interface in HTML 5 compliant browsers. This API support streaming over HTTP, Comet requires a long-lived connection allow developer to develop many real-time web application easier.

HTM

L5 -

Intr

od

uct

ion

67

Html5 WebSocketThi Thanh Ngoc PHAN

HTML5 WebSocket Introduction

• Web Sockets is a next-generation bidirectional communication technology for web applications

• It is a standard bidirectional TCP socket between the client and the server.

• The socket starts out as a HTTP connection and then "Upgrades" to a TCP socket after a HTTP handshake.

• After the handshake, either side can send data

HTML5 WebSocket Attributes

Attribute Description

Socket.readyState Represents the state of the connection with following values:

= 0 : indicates that the connection has not yet beenestablished.

= 1 : indicates that the connection is established andcommunication is possible.

= 2 : indicates that the connection is going through theclosing handshake.

= 3 : indicates that the connection has been closed or couldnot be opened.

Socket.bufferedAmount Represents the number of bytes of UTF-8 text that havebeen queued using send() method.

HTML5 WebSocket Events

Event Event Handler Description

open Socket.onopen This event occurs when socket connection is established.

message Socket.onmessage This event occurs when client receives data from server.

error Socket.onerror This event occurs when there is any error in communication.

close Socket.onclose This event occurs when connection is closed.

HTML5 WebSocket Methods: Method Description

Socket.send() The send(data) method transmits data using the connection.

Socket.close() The close() method would be used to terminate any existingconnection.


Following 3 steps:

I. Creating Client Side:

HTML & JavaScript Code in HTLM 5 compliant browers

II. Install pywebsocket:

using “mod_pywebsocket”

III. Start the Server

Start the server listening at a port, using pyWebSocket Handle


<html><head><script type="text/javascript">

function WebSocketTest(){

if ("WebSocket" in window) {

alert("WebSocket is supported by your Browser!");

var ws = new WebSocket("ws://localhost:9998/echo"); // Open a web socket

ws.onopen = function() { // Web Socket is connected, send data using send()ws.send("Message to send");

alert("Message is sent..."); };

ws.onmessage = function (evt) {

var received_msg = evt.data;

alert("Message is received..."); };

ws.onclose = function() { // websocket is closed.

alert("Connection is closed..."); }; }

else { // The browser doesn't support WebSocket

alert("WebSocket NOT supported by your Browser!"); }}

</script></head>

<body>

<div id="sse"><a href="javascript:WebSocketTest()">Run WebSocket</a></div>

</body>

</html>

I. Creating Client Side HTML & JavaScript Code


II. Install pywebsocket:

1. Unzip and untar the downloaded file.

2. Go inside pywebsocket-x.x.x/src/ directory.

3. $python setup.py build => python compiler

4. $sudo python setup.py install

5. Then read document by:$pydoc mod_pywebsocket

This will install it into your python environment


• Go to the pywebsocket-x.x.x/src/mod_pywebsocket

folder and run the following command

This will start the server listening at port 9998

• The socket starts out as a HTTP connections and Upgrades to a TCP socket after a HTTP handshake.

• After handshake, either side can send data

$sudo python standalone.py -p 9998 -w ../example/

III. Start the Server

html5 an introduction · 2011-01-24 · html5 an introduction group 3: nguyen viet thang le anh...

Documents