HTML5 an Introduction

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 A short history of AJAX of history short A 5 HTML5 - Introduction A More Powerful Web Powerful More A 6 HTML5 - Introduction Browser Support For HTML5 For Support Browser 7 HTML5 - Introduction What’s New? Changes to old Tags: Doctype Pre-HTML5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Introduction "http://www.w3.org/TR/xhtml1/DTD/xh - tml1-strict.dtd"> HTML5 HTML5 <!DOCTYPE html> 8 Changes to old Tags: html Pre-HTML5 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> HTML5 Introduction - <html lang="en" xml:lang="en"> HTML5 9 Changes to old Tags • <link rel="stylesheet" href="style- original.css" > • <meta charset="utf-8"> • Provide new tag • <header> <hgroup> Introduction - <nav> <article> HTML5 <aside> <footer> 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 CANVAS 13 HTML5 - Introduction Until Recently, you couldn’t draw on the web the on draw couldn’t you Recently, Until 14 HTML5 - Introduction Introduction - HTML5 Javascript:onClick(Draw()); And graphics weren’t very interactive 15 The usual options to solve the problem the solve to options usual The 16 HTML5 - Introduction 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 <canvas id="diagonal" style="border: 1px solid;" width="200" height="200"> </canvas> Introduction - HTML5 A simple HTML5 canvas element on an HTML page 20 Translated 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); Introduction - context.lineTo(140, 70); Diagonal line on a canvas HTML5 // Stroke the line onto the canvas context.stroke(); } window.addEventListener("load", drawDiagonal, true); </script> 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 HTML5 28 HTML5 - Introduction New form attributes and functions The placeholder Attribute <label>Runner: <input name="name" placeholder="First and last name" required></label> The autocomplete Attribute Introduction - <input type="text" name="creditcard" autocomplete="off"> HTML5 The autofocus Attribute <input type="search" name="criteria" autofocus> The list Attribute and the datalist Element 29 New form attributes and functions 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"> 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. Video and Audio and Video 33 HTML5 - Introduction 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 <audio src="LOVE TODAY.ogg" src="LOVE TODAY.mp3" Introduction controls="controls"> - </audio> HTML5 36 Element attributes Element 37 HTML5 - Introduction Audio Format Audio 38 HTML5 - Introduction VIDEO <html> <video id="clip1" controls="controls"> <source src="clip1.webm" /> Introduction </video> - </html> HTML5 39 Element attributes Element 40 HTML5 - Introduction Video Format Video 41 HTML5 - Introduction Geolocation 42 HTML5 - Introduction 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 cell IDs Introduction - HTML5 GPS 44 Wifi or ip address 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 App cache & database & cache App 46 HTML5 - Introduction 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? • <script type="text/javascript"> localStorage.lastname="Smith"; document.write(localStorage.lastname); Introduction </script> - HTML5 • Your result: Last name: Smith

Load more