HTML5 An Introduction
Group 3: Introduction - Nguyen Viet Thang Le Anh Hoang HTML5 Nguyen Phuong Anh Phan Thi Thanh Ngoc Truong Van Thang 1 Truong Quang Minh Overview
Introduction HTML5 Canvas HTML5 Audio and Video HTML5 Geolocation HTML5 Web storage
HTML5 Websocket Introduction -
The future of HTML5 HTML5
2 What is Html?
• HTML stands for Hypertext Markup Language
Introduction
- HTML5
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” Introduction • 1997 HTML 4 - ”Cougar” - CSS -
• 1999 HTML 4.01 HTML5 • 2000 XHTML draft • 2001 XHTML
4
Introduction
- HTML5
A short history of AJAX 5
Introduction
- HTML5
A More Powerful Web 6
Introduction
- HTML5
Browser Support For HTML5 7 What’s New?
Changes to old Tags: Doctype
Pre-HTML5 HTML5 HTML5 8 Changes to old Tags: html
Pre-HTML5
xml:lang="en">
HTML5
Introduction -
HTML5
9 Changes to old Tags
• css" > • • Provide new tag •
Introduction -
10 What is being not supported in HTML5? • BASEFONT • BIG • CENTER • FONT • S • STRIKE Can be duplicated with the • TT CSS element or iFrame.
• U Introduction • FRAME -
• FRAMESET HTML5 • NOFRAMES • ACRONYM • APPLET • ISINDEX • DIR 11 New important feature
• Canvas • Audio and video • Geolocation • Web database (app cache & database)
• Web socket
Introduction
- HTML5
12
Introduction
- HTML5
CANVAS 13
Introduction
- HTML5
Until Recently, you couldn’t draw on the web 14
Introduction
- HTML5
Javascript:onClick(Draw());
And graphics weren’t very interactive 15
Introduction
- HTML5
The usual options to solve the problem 16 Overview of HTML5 Canvas
• What is a Canvas? • graphics, charts, images, animation
• Introduced by Apple
Introduction
- HTML5
17
Canvas Coordinates
Introduction
- HTML5
x and y coordinates on a canvas
18 Browser Support for HTML5
Canvas
Introduction
- HTML5
19 Adding a Canvas to a Page
Introduction
- HTML5
A simple HTML5 canvas element on an HTML page 20 Translated diagonal line on a canvas
21 Working with Paths function createCanopyPath(context) { function drawTrails() { // Draw the tree canopy var canvas = context.beginPath(); document.getElementById('trails'); var context = context.moveTo(-25, -50); canvas.getContext('2d'); context.lineTo(-10, -80); context.lineTo(-20, -80); context.save(); context.lineTo(-5, -110); context.translate(130, 250); context.lineTo(-15, -110);
// Top of the tree // Create the shape for our canopy Introduction context.lineTo(0, -140); path - context.lineTo(15, -110); createCanopyPath(context); context.lineTo(5, -110); HTML5 context.lineTo(20, -80); // Stroke the current path context.lineTo(10, -80); context.stroke(); context.lineTo(25, -50); context.restore(); } // Close the path back to its start point 22 context.closePath(); }
Working with Paths
Introduction
- HTML5
A simple path of a tree canopy 23 Working with Stroke Styles
// Increase the line width context.lineWidth = 4;
// Round the corners at path joints context.lineJoin = 'round';
// Change the color to brown
context.strokeStyle = '#663300'; Introduction // Finally, stroke the canopy -
context.stroke(); HTML5
Stylish stroked tree canopy
24 Working with Fill Styles
// Set the fill color to green and fill the canopy context.fillStyle = '#339900';
context.fill();
Introduction -
Filled tree canopy HTML5
25 Other Canvas APIs
• Drawing Curves • Inserting Images into a Canvas • Using Gradients • Using Background Patterns
• Scaling Canvas Objects Introduction • Using Canvas Transforms -
• Using Canvas Text HTML5 • Applying Shadows • Working with Pixel Data
• Implementing Canvas Security 26 HTML5 Forms
•New input types, new functions and attributes
Introduction
- HTML5
27
HTML5 Forms
Introduction
- HTML5
28 New form attributes and functions
The placeholder Attribute
The autocomplete Attribute
Introduction -
HTML5 The autofocus Attribute
The list Attribute and the datalist Element 29 New form attributes and functions
The list Attribute and the datalist Element
Introduction
- HTML5
30 New form attributes and functions
•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
Introduction
- HTML5
Demo HTML Forms http://rendera.heroku.com/ 31 Browser Support for HTML5 Form 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 Introduction field. -
Internet Explorer Not supported, but new types will fall back to a HTML5 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 32 validation. Some types supported better in mobile Safari.
Introduction
- HTML5
Video and Audio 33 Browser support for HTML5
Audio and Video
Introduction
- HTML5
34 Using the HTML5 Audio and Video
As a user: don't have to bother installing any plug-in
As a developer: really easy
Introduction
- HTML5
35 Using the HTML5 Audio
HTML5
36
Element attributes
Introduction
- HTML5
37
Audio Format
Introduction
- HTML5
38 VIDEO
-
HTML5
39
Element attributes
Introduction
- HTML5
40
Video Format
Introduction
- HTML5
41
Introduction
- HTML5
Geolocation 42 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 Introduction
location using JavaScript to access objects exposed by the browser. - HTML5 Methods • geolocation.getCurrentPosition • geolocation.watchPosition • geolocation.clearWatch • ... 43 • GSM/CDMA cellGSM/CDMA IDs Wifi or ip address GPS 44 HTML5 - Introduction 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( Introduction
• 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"); HTML5 • } else { • map.setCenter(point, 13); • var marker = new GMarker(point); • map.addOverlay(marker); • marker.openInfoWindowHtml(address); • } • } • ); • } • } 45
Introduction
- HTML5
App cache & database 46 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
Introduction
- HTML5
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? • - HTML5 • Your result: Last name: Smith • Demo: http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_ webstorage_local 48 The localStorage Object
• The following example counts the number of times a user has visited a page: • HTML5 • 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_webstor age_local_pagecount 49 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: • -
• Your result: Smith HTML5 • Demo: http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_ webstorage_session
50 The sessionStorage Object
• The following example counts the number of times a user has visited a page, in the current session: • • 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_web 51 storage_session_pagecount
Introduction
- HTML5
Web socket 52
WebSocket Attributes
Introduction
- HTML5
53
WebSocket Events
Introduction
- HTML5
54
WebSocket Methods
Introduction
- HTML5
55 WebSocket Example Demo
• Creating Client Side HTML & JavaScript Code File
Introduction
- HTML5
56 WebSocket Example Demo
• 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: Introduction -
• $pydoc mod_pywebsocket HTML5
• This will install it into your python environment 57 WebSocket Example Demo
• Start the Server • Go to the pywebsocket-x.x.x/src/mod_pywebsocket • folder and run the following command
• This will install it into your python environment
Introduction
- HTML5
58 WebSocket Example Demo
• Go to the pywebsocket-x.x.x/src/mod_pywebsocket folder and run the following command
• This will install it into your python environment
Introduction -
This will start the server listening at port 9998 and use the handlers HTML5 directory specified by the -w option where our echo_wsh.py resides.
59 What’s else?
• Web workers • Offline web applications • Cross-document messaging • Drag and Drop • Server sent DOM events
• Inline SVG Introduction
- HTML5
60 Future of HTML5
• HTML5 provides powerful programming features • HTML in Three Dimensions • 3D Shaders • Devices
• Peer to peer networking
Introduction
- HTML5
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.
Introduction
- HTML5
62 ANY QUESTION OR COMMENT?
Nguyen Viet Thang Le Anh Hoang Phan Thi Thanh Ngoc
Nguyen Phuong Anh Introduction
Truong Van Thang -
Truong Quang Minh HTML5
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 Introduction
comet long-term connection to user the HTML5 Web Socket API -
• Server must support to response HTML in HTML5 format. HTML5
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, Introduction -
and dodge your images easily. HTML5
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. Introduction • 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 HTML5 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. 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 Introduction - communication channel that works over a single socket and it is exposed through a JavaScript interface in HTML 5 compliant HTML5 browsers. This API support streaming over HTTP, Comet requires a long-lived connection allow developer to develop many real-time web application easier. 67 Html5 WebSocket Thi 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 been established. = 1 : indicates that the connection is established and communication is possible. = 2 : indicates that the connection is going through the closing handshake. = 3 : indicates that the connection has been closed or could not be opened.
Socket.bufferedAmount Represents the number of bytes of UTF-8 text that have been 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 existing connection. WebSocket Example Demo
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 WebSocket Example Demo I. Creating Client Side HTML & JavaScript Code
WebSocket Example DemoII. 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 WebSocket Example Demo
III. Start the Server
• Go to the pywebsocket-x.x.x/src/mod_pywebsocket folder and run the following command
$sudo python standalone.py -p 9998 -w ../example/
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