© 2008, infosys technologies ltd. confidential er/corp/crs/ /003 introduction to html5 education...

© 2008, Infosys Technologies Ltd.


ConfidentialConfidentialER/CORP/CRS/<CourseCode>/003ER/CORP/CRS/<CourseCode>/003

Introduction to HTML5

Education & Research“© 2008 Infosys Technologies Ltd. This document contains valuable confidential and proprietary information of Infosys. Such confidential and proprietary information includes, amongst others, proprietary intellectual property which can be legally protected and commercialized. Such information is furnished herein for training purposes only. Except with the express prior written permission of Infosys, this document and the information contained herein may not be published, disclosed, or used for any other purpose.”

We enable you to leverage knowledge anytime, anywhere!

© Infosys Technologies Ltd.

© 2008, Infosys Technologies Ltd.© 2008, Infosys Technologies Ltd. ConfidentialConfidential

Confidential Information

• This Document is confidential to Infosys Technologies Limited. This document contains information and data that Infosys considers confidential and proprietary (“Confidential Information”).

• Confidential Information includes, but is not limited to, the following:– Corporate and Infrastructure information about Infosys;– Infosys’ project management and quality processes;– Project experiences provided included as illustrative case studies.

• Any disclosure of Confidential Information to, or use of it by a third party, will be damaging to Infosys.• Ownership of all Infosys Confidential Information, no matter in what media it resides, remains with Infosys.• Confidential information in this document shall not be disclosed, duplicated or used – in whole or in part –

for any purpose without specific written permission of an authorized representative of Infosys.



ConfidentialConfidential

How web works? Introduction to Web Technology




Characteristics of Conventional Web Application• Click - Wait – Refresh user interaction :

– For all the interactions of the user with the web application, entire web page gets loaded in the browser

– Partial updates are not possible• Synchronous “request/response” communication model

– The user has to wait for the response– User can not do any other parallel activity with the

web application• Page-driven: Workflow is based on pages

– Page-navigation logic is determined by the server




Need for Rich Internet Applications - RIAs

Constraints of Traditional Web Model• Web Pages that need to be submitted to server for

any processing• Less focus on user interactivity and effectiveness• Network and server bandwidth can limit the response

time of page refreshes• User may lose operational context on each web page

refresh• Most of these limitations do not exist in the case of

conventional Desktop Applications that however require tedious installations




Rich Internet Applications

• Bridge the gap between desktop and traditional web based applications

• Introduce a Client Engine between the client and the server • Richer – offering useful user interface behaviors like drag-

drop, client side computations, progress bars, sliders for data change

• Higher degree of Responsiveness• Performance Benefits : Client/Server balance• Asynchronous Communication like pre-fetching data

without user knowledge/interruption• Network Efficiency when Client Engine intelligently filters

call to the server




Rich Internet Applications

• Web Application that utilizes an intermediate layer to bypass traditional page refresh

• Introduced by Macromedia in March 2002

Advantages of RIA– Richer interface and no page refresh– Real-time feedback and validation to the user, triggered

by user events– Implements the look and feel of traditional desktop

applications– Can include full multimedia experience with audio and

video– Have capabilities such as real time chat and

collaboration




Rich Internet Applications Technologies

• OpenLazlo

• ColdFusion

• Windows Presentation Foundation

• AJAX

• ActionScript 2.0

• Adobe Flex

• MS Silverlight

• JavaFX




Tools or Technologies used for creating RIA

• AJAX– Combination of HTML, CSS and Javascript– CSS and Javascript can be used to trigger updates to

visual aspects of the page– XMLHttpRequests can be used to fetch data in the

background of the page– Advantage:

• Changes its appearance and update its data without any page refresh

– Disadvantage:• Compatibility issues with browser versions• Confusion in selecting the suitable frameworks




Recently emerged Technologies and frameworks• MS SilverLight

– A Simple plug-in for DotNet framework to create Rich Internet Applications

– It is the subset of WPF which uses DotNet class Libraries and Namspaces

– Advantages:• Less than 5MB Download needed• DOM Integration• Vector based. So Images will be clear even in poor

resolution• Tight coupling between Developer components and

Designer components– Supports only png and jpg images




Recently emerged Technologies and frameworks• Adobe Flex

– Includes MXML - Tag based language, Action Script 3.0 - Object Oriented language

– Supports RIA over Flash Platform– Advantages:

• Flex Applications runs in simple flash player embedded in the browser

• A good supporting IDE available• Flex Data Services (FDS) Application Server

– Disadvantages:• Most of the components are proprietary• Cannot display video other than flash video format

files




Recently emerged Technologies and frameworks• JavaFX

– JavaFX is a software platform for building and deploying Rich Internet Applications (RIAs) which can run across many devices

– Advantages:• Enables rapid development of RIA applications by

providing rich set of tools• Architecture neutral and platform independent• Applications are coded using a powerful scripting

language – JavaFX script• Separate tools for Developers and Designers• Same application can be deployed across devices• Good IDE available.



© 2008, Infosys Technologies Ltd.© 2008, Infosys Technologies Ltd. ConfidentialConfidential1515

Course Outline

• Unit 1: Overview of HTML5

• Unit 2: Form Features

• Unit 3: New HTML5 Elements

• Unit 4: HTML5 Media




Unit 1: Overview of HTML5




Unit Outline

• What is html5?

• What is WHATWG ?

• Comparison of HTML5 with HTML4

• Browser Support for HTML5



© 2008, Infosys Technologies Ltd.© 2008, Infosys Technologies Ltd. ConfidentialConfidential 1818

What is HTML5?

• HTML5 is a newer version of HTML4.01

• Developed by the cooperation of WHATWG and W3C .

• New Markup Elements and APIs were introduced in HTML5.

• One of the important objective of HTML5 is to reduce the need for external plug-in in the browser.

• Still under development.




What is WHATWG ?

• WHATWG stands for Web Hypertext Application Technology Working Group.

Objectives:• Document real-world browser behavior• Develop practical new features• Ensure backwards compatibility• Define robust error handling

HTML 5 is introduced on the basis of these objectives by the WHATWG and W3C(WorldWideWebConsortium).




A Sample HTML5 Document

<!doctype html>

<html>

<head>

<meta charset=“utf-8”>

<title>Hello World!</title>

</head>

<body>

<h1>Hello World</h1>

<p>This is my first HTML 5 document</p>

</body>

</html>




Comparison of HTML5 WITH HTML4 …1

What are the tags removed from html4 in html5?

• Text

- big, basefont, font, center,dir, tt,s,u,xmp• Frames

- frame, frameset, noframes• Misc

- applet, acronym





What are the new tags introduced in HTML5?• Structure of textual documents

- section, article, header, footer,nav,aside• Graphics

- canvas, figure• Forms

- input- different types of input elements• Editing

- drag-and-drop, copy-and-paste, undo• Multimedia

- audio, video, embed





• One of the important difference between html4 and html5 is the DOCTYPE used.

HTML4 HTML5

1. Transitional <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtDOCTYPE d”>2. Strict <! HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

Only <!DOCTYPE HTML>Is used




Browser Support for HTML5 …1

InternetExplorer 8 Mozilla 3.6.8GoogleChrome 7.0.2

Opera10.62 Safari 5.0.2

Diagram:html5comparison




Browser Support for HTML5 …2

• The site www.html5test.com provides you the information regarding the percentage of html5 features your browser support.

• From the diagram html5comparison, we can understand Google Chrome has the highest support for HTML5.

• Internet Explorer 8 has the least support for HTML5. Internet Explorer 9 is expected to support the features of HTML5.

http://www.html5test.com/




Unit 2: FORM Features




2.1 FORM TAGS

2727




Email

• The email type is used for input fields that should contain an e-mail address.

• The value of the email field is automatically validated when the form is submitted.

<input type="email" name=“usermail”>

This feature is currently supported only in Opera 9.0 browser.

2828




URL

• The url type is used for input fields that should contain a URL address.

• The value of the url field is automatically validated when the form is submitted.

<input type="url" name=“myurl” />

2929




Date and Time

• HTML5 has several new input types for selecting date and time:

• date - Selects date, month and year• month - Selects month and year• week - Selects week and year• time - Selects time (hour and minute)• datetime - Selects time, date, month and year (UTC time)• datetime-local - Selects time, date, month and year (local

time)

<input type=“datetime” name=“mydate”>

3030




Number

• The number type is used for input fields that should contain a numeric value.

• You can also set restrictions on what numbers are accepted.

<input type="number" name="points" min="1" max=“42” />

3131




Range

• The range type is used for input fields that should contain a value from a range of numbers.

• The range type is displayed as a slider bar.• You can also set restrictions on what numbers are

accepted.

<input type="range" name="points" min="1" max="10" />

3232




DataList

• The datalist element specifies a list of options for an input field.

• The list is created with option elements inside the datalist.

• To bind a datalist to an input field, let the list attribute of the input field refer to the id of the datalist.

<input list="title-list"> <datalist id="title-list"> <option value="..."> </datalist>

3333




2.2 STORAGE AND OFFLINE APPLICATION

3434




Session Storage

• The sessionStorage method stores the data for one session.

• The data is deleted when the user closes the browser window.

Example

<!DOCTYPE HTML>

<html> <body>

<script type="text/javascript">sessionStorage.name=“Veera";document.write(sessionStorage.name);</script>

</script> </body></html>

3535




Local Storage

• The localStorage method stores the data with no time limit. The data will be available the next day, week, or year.

Example:

<!DOCTYPE HTML>

<html>

<body>

<script type="text/javascript">

localStorage.name=“Veera";

document.write("Last name: " + localStorage.name);

</script>

</body></html>

>3636




Offline Applications …1

• Offline application Cache in HTML5 allows users to run web applications, even when they are offline.

• To make this possible use manifest attribute of html tag.

<html manifest=“my.manifest”>• Create a my.manifest file and add the below line.

CACHE MANIFEST• Add the resources you wish to cache from the webpage,

like css, image, javascript below CACHE MANIFEST.

3737





Cache.manifest

CACHE MANIFEST

Chrysanthemum.jpg

3838





• To load the manifest file add “text/cache-manifest “ to your web application server mime.types file.

Index.html<!DOCTYPE html>

<html manifest="cache.manifest">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Offline Cache Demo</title>

</head>

<body>

<div id="container">

<h2>HTML 5 Offline Cache Demo</h2>

<p><img src="Chrysanthemum.jpg" alt="no image available" /></p>

</div></body></html>

3939




UNIT 2:NEW HTML5 ELEMENTS

4040




3.1 NEW MARKUP ELEMENTS

4141




Structural Elements …1

• HTML5 includes several new structural elements that help define parts of the document. The most commonly used structural elements are :

• <header>: Header region.• <nav>: Navigation region.• <section>: A logical region of a page.• <article>: A article or other complete piece of content.• <aside>: Secondary content, such as a sidebar.• <footer>: Footer region.

4242




Structural Elements …2Example:<!doctype html>

<html> <body>

<nav><ul><li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

</ul></nav>

<header>

<h1><a href="#">Very Basic Document</a></h1>

<h2>A tag line might go here</h2>

</header>

<section> <article>

<p>Hello All there trying Structural demo……</p>

</article>

</section>

<aside> <h4>Connect With Us</h4>

<ul><li><a href="#">Twitter</a></li><li><a href="#">Facebook</a></li></ul>

</aside>

<footer> <p>All rights reserved.</p> </footer> </body>

</html>

4343




Mark <M> Tag

• Marked or Highlighted text.• Indicates point of interest or relevance• Useful for:

– Highlighting relevant code in a code sample– Highlighting search keywords in a document

Example Code:<p>The highlighted part below is

where the error lies:</p><pre><code>var i: Integer; Output:begin i := <m>1.1</m>;end.</code></pre>

4444




<Meter> Tag

• Representing scalar measurements or fractional values• Useful for:

– User Ratings (e.g. YouTube Videos)– Seach Result Relevance– Disk Quota Usage

Example:<meter>60%</meter><meter>3/5</meter><meter min="0" max="100" value=“60”><meter value="0.6">Medium</meter>

4545




<Progress> Tag• Show completion progress of a task• Progress bars are widely used in other applications• Works with scripted applications• Useful for:

– Indicate loading progress of an AJAX application– Show user progress through a series of forms– Making impatient users wait

Example:<progress>Step 3 of 6</progress><progress>50% Complete</progress><progress value="0.5">

Half way!</progress>

4646




3.2 NEW INPUT TYPE ATTRIBUTES

4747




autocomplete Attribute

• The autocomplete attribute specifies that the form or input field should have an autocomplete function.

Example:

<form action=“#” autocomplete="on">First name: <input type="text" name="fname" /><br />Last name: <input type="text" name="lname" /><br />E-mail: <input type="email" name="email" autocomplete="off" /><br /><input type="submit" /></form>

4848




autofocus Attribute

• The autofocus attribute specifies that a field should automatically get focus when a page is loaded.

• The autofocus attribute works with all input types.

Example:

<form action=“#”>

User name: <input type="text" name="user_name" autofocus="autofocus" />

<input type="submit" />

</form>

4949




form Attribute

• The form attribute specifies one or more forms the input field belongs to.

• The form attribute works with all input types.

Example:

<form action=“#" id="user_form">

First name:<input type="text" name="fname" />


</form>

Last name: <input type="text" name="lname" form="user_form" />

5050




height and width Attribute

• The height and width attributes specifies the height and width of the image used for the input type image.

• The height and width attributes only works with input type: image.

Example:

<form action=“#" >

User name: <input type="text" name="user_name" /><br />

<input type="image" src="img_submit.gif" width="50" height="100" />

</form>

5151




multiple Attribute

• The multiple attribute specifies that multiple values can be selected for an input field.

• The multiple attribute works with the input types: email, and file.

Example:

<form action=“#" method="get">

Select images: <input type="file" name="img" multiple="multiple" />


</form>

5252




draggable Attribute

• Draggable specifies whether or not a user is allowed to drag an element.

Example:

<div draggable="true">drag me</div>

5353




Pattern Attribute

• The pattern attribute specifies a pattern used to validate an input field.

• The pattern is a regular expression.• The pattern attribute works with the input types: text,

search, url, telephone, email, and password.

Example:

Country code: <input type="text" name="country_code" pattern="[A-z]{3}“ title="Three letter country code" />

5454




placeholder Attribute

• The placeholder attribute provides a hint that describes the expected value of an input field.

• The hint is displayed in the input field when it is empty, and disappears when the field gets focus.

Example:

<form action=“#" method="get">

<input type="search" name="user_search" placeholder="Search W3Schools" />


</form>

5555




required Attribute

• The required attribute specifies that an input field must be filled out before submitting.

• The required attribute works with the input types: text, search, url, telephone, email, password, date pickers, number, checkbox, radio, and file.

Example:

<form action="demo_form.asp" method="get">

Name: <input type="text" name="usr_name" required="required" />


</form>

5656




Unit 4: HTML5 Media

5757




4.1: MEDIA AND GRAPHIC TAGS

5858




Audio tags …1

5959

Audio can be embedded in html by using Audio tags.Syntax:<audio src="myaudio.ogg“ type="audio/ogg” autoplay> All the attributes supported by the video tag is supported by the audio tag also, except height, poster and width attributes. Media elements can be controlled by javascript .

Eg:var v = document.getElementsByTagName(“audio”)[0]; v.play();




Audio Example …2

<!DOCTYPE HTML>

<html>

<body>

<audio width="320" src="uno.ogg" type="audio/ogg" controls="controls"/>

Your browser does not support the audio tag.

</body>

</html>

6060

Output:




Attributes of Audio Tag:




Video Tags …1

6262

• Videos have become very popular in webpages• Currently difficult to embed videos in HTML• Flash has become the de facto standard• To embed videos, Video tag in html5 is introduced.




…2

6363

Syntax:<video><source src="myvideo.ogg” type="video/ogg"></video>

Attributes of Video Tag:




Video Example …3

<!DOCTYPE HTML>

<html>

<body>

<video width="320" height="240" controls="controls" >

<source src="oggvideo.ogg" type="video/ogg"/>

Your browser needs to support the video tag.

</video>

</body>

</html>

6464

Output:




Canvas Tags …1

• Used to render simple graphics such as line arts, graphs and other custom graphical elements on the client side.

Syntax:

<canvas id="myCanvas" width="300" height="150"> Canvas supporting Browser Required </canvas>

• Useful for:– Graphs– Applications– Games and Puzzles– And more…

6565




Canvas Example

<!DOCTYPE HTML>

<html>

<body>

<canvas id="myCanvas" width="150" height="150">

</canvas>

<script type="text/javascript“>

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

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

ctx.fillStyle = "rgb(200,0,0)";

ctx.fillRect (10, 10, 55, 50);

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";

ctx.fillRect (30, 30, 55, 50);

</script>

</body> </html>

6666

Output




WebWorkers …1

6767

• Defines an API for running background scripts.• It helps to execute multiple task simultaneously. • This concept gives a way to execute a part of JavaScript

like a thread.• Workers are like thread for web apps.• It helps in parallel JavaScript programming for

asynchronous message passing only.

Webworker has two methods:

Onmessage: used to receive the data from another worker.

postMessage: Used to pass the data from one worker to other.




WebWorker Example …2

<!DOCTYPE HTML>

<html>

<script type="text/javascript">

var worker = new Worker('worker.js');

worker.onmessage = function(event) {

alert("Worker says: " + event.data);

};

worker.postMessage(‘Dave’);</script>

<head>

</head>

<body></body>

</html>

6868

Worker.jsonmessage = function(event) { var message = "Your name is " + event.data; postMessage(message); };




WebSockets

• It helps to achieve efficient bidirectional communication between web application and servers.

• It reduces latency time drastically and give good performance result.

• It’s a bidirectional channel which carries string data.• It is like XmlHttpRequest, but it only connects once, and

can send / receive data in realtime. • Not many HTTP headers required and it simplify the

codes .

6969




Web Socket-ExampleExample snippet:var MyWebSocket = new WebSocket("ws://mypage.example.com");// WebSocket creation

// Javascript callback functions

MyWebSocket.onopen = function(evt) {

alert(“My Socket Connection open..."); }; MyWebSocket.onmessage = function(evt) { alert( "Received Update: " + evt.data); };

MyWebSocket.onclose = function(evt) {

alert("Connection closed."); };

//Send Data

MyWebSocket.postMessage(“SELL: Product,[email protected]″);

MyWebSocket.disconnect(); //Disconnect once Done

7070




Geolocation

• It helps in finding users current location.• On support and after access to the web application

browser returns longitude,lattitude,elevation and speed.• It can use both GPRS and IP address of the Machine to

look for current location for the user.

navigator.geolocation;

if (navigator.geolocation) { // Execute geolocation code } else { // Execute code for geolocation not available }




Geolocation- Code Snippet

<script>// Initialize the map

function initialize() {

map = new GMap2(document.getElementById("map_canvas"));

map.setCenter(new GLatLng(34, 0), 1);

geocoder = new GClientGeocoder();

}//Get the current location

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(function(position) {

s = position.coords.latitude+","+position.coords.longitude;

document.forms[0].q.value = s;

showLocation();

});

} else {

alert("I'm sorry, but geolocation services are not supported by your browser.");

}

</script>

7272




Advantages of using HTML5

• HTML5 is the standard which works across technologies as the frontend User Interface.

• Interoperability

• No tedious coding pattern involved

• Reduces the heaviness of the website because of adding plug-ins

• Standard HTML support with Proper deprecation and backward compatibility wherever needed

• Simple JavaScript , ExtJS and CSS3.0 supported




Aspects to be improved

• Standardization

• Browser support issues

• Widgets and 3D




References

• HTML & CSS fifth edition The Complete Reference, Thomas A. Powel.

• HTML 5 tutorial available online at http://www.w3schools.com/html5/default.asp

• HTML5 Drafts Standard available online http://www.whatwg.org/specs/web-apps/current-work/multipage/

• http://html5demos.com/• http://www.html5test.com/• http://diveintohtml5.org/table-of-contents.html#detect

7575

http://www.w3schools.com/html5/default.asp

http://www.whatwg.org/specs/web-apps/current-work/multipage/

http://www.whatwg.org/specs/web-apps/current-work/multipage/

http://html5demos.com/

http://www.html5test.com/

http://diveintohtml5.org/table-of-contents.html#detect




Thank you

7676

© 2008, infosys technologies ltd. confidential er/corp/crs/ /003 introduction to html5 education...

Documents