html5 golsana ghaemi 8811143 1. introduction page structure multimedia forms canvas storage drag...

HTML5

Golsana Ghaemi 8811143

1

• Introduction• Page Structure• Multimedia• Forms• Canvas• Storage• Drag & Drop

2

OUTLINE

INTRODUCTION

• HTML5 is the next generation of HTML

– HTML5 is still a work in progress. However, most modern browsers have some HTML5 support

• HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG)– WHATWG was working with web forms and applications, and W3C was

working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.

3

HTML5 STANDARD STATUS

• The first draft was made public in 2008, but not much happened until 2011

• Today all major browsers (Chrome, Safari, Firefox, Opera, IE) offer HTML5 support

• HTML5 works with CSS3 and is still in development. Since its release, HTML5 has been in continuous development, with the W3C adding more and more impressive features

• HTML5 is the successor of HTML 4.01, released for the first time in 1999. The internet has changed significantly since 1999 and it seemed like the creation of HTML5 was necessary . The new markup language was developed based on pre-set standards.

4

• New features should be based on HTML, CSS, DOM, and JavaScript

• Reduce the need for external plugins – like Flash, …

• Better error handling– A consistent DOM for any bad markup

• More markup to replace scripting• The development process should be visible to the

public

5

HTML5 RULES AND GOALS

• HTML5 was created to make the coding process easier and more logical

• Many of the features it comes with have been created with the consideration that users should be able to run heavy content on low-powered devices

• The canvas element for drawing• The video and audio elements for media playback• Better support for local & offline storage• New content specific elements

– article, footer, header, nav, section• New form controls

– date, time, email, url, …

6

SOME NEW FEATURE

• HTML5 is not based on XML or SGML• Browsers need to see <!DOCTYPE …>– To work in standard compliance mode

• HTML5 Document type(in older versions of HTML were longer)<!DOCTYPE html>

• Character encoding<meta charset="utf-8">

7

DOCUMENT TYPE & ENCODING

• HTML5 syntax (not XHTML5) is very lax• Unlike Xhtml, HTML5 is coming with lots of flexibility and

would support the followings: Uppercase tag names. Quotes are optional for attributes. Attribute values are optional. Closing empty elements are optional.

• These are equivalent<meta CHARSET=utf-8 ><meta charset="utf-8" /><META charset="utf-8" >

• Following tags are not required Document is successfully validated without them

<html> <head> <body>

8

HTML5 SYNTAX

Attribute Value Descriptioncontenteditable true

falseinherit

Specifies whether a user can edit the content of an element or not

draggable truefalseauto

Specifies whether a user is allowed to drag an element or not

hidden hidden Specifies that an element should be hidden

spellcheck truefalse

Specifies if the element must have its spelling and grammar checked

9

SOME NEW GLOBAL ATTRIBUTES

• Emphasize semantic web• HTML5 offers new semantic elements to clearly

define different parts of a web page:<header><nav><section><article><aside><figcaption><figure><footer>

10

PAGE STRUCTURE

• HTML is not just presentation• Each page portion has its own meaning• In XHTML, page is organized by divs– Assign meaningful ID or Class for divs• header, navigation, footer, content, …

• HTML5: new tags for the common divs– <header>, <nav>, <footer>, …

• HTML5 recommends the usage of these tags

11

PAGE STRUCTURE

XHTML BASED PAGE DESIGN

• A sample weblog• Assign id & class to divs• Use CSS to arrange divs

12

HTML5 BASED PAGE DESIGN

• The weblog using HTML5 semantic tags • Use HTML5 new tags

A semantic element clearly Describes its meaning toBoth the browser and thedeveloper

13

SAMPLE HTML5 PAGE STRUCTURE14

Header

Navigation

Aside

Footer

Article

Section

Section

Section

Footer

Figure

Image, Video, Quote, Table, etc…

caption

• header– Represents a group of introductory or aids

• section– Represents a generic document section

• article – Represents an independent piece of content of a

document, such as newspaper article• aside – Represents an independent piece of content of a

document, such as a blog entry

15

HTML5 PAGE STRUCTURE TAGS

• hgroup

– Groups multiple headers, title and subtitle in the header• footer

– Represents a footer for a section• nav

– Represents a section intended for navigation• figure

– Used to associate a caption together with some embedded content

– <img> is used to insert (source) the image– <figcaption> The figcaption element represents a caption or

legend for a figure.

16

HTML5 PAGE STRUCTURE TAGS

• Until now, there hasn't been a standard multimedia on web• Multimedia on the web is sound, music, videos, and animations.• Most videos are shown through a plugin• A helper application is a small computer program that extends the

standard functionality of the browser. Helper applications are also called plug-ins.

17

HTML5 MULTIMEDIA

• Plug-ins can be used for many purposes: to display maps, scan for viruses, verify your bank id, and much more. The restrictions are few.

• However, not all browsers have the same plugins• HTML5 specifies a standard way to include multimedia

contents (video or audio) on web– <video> element to insert video– <audio> element to play audio sound– <source> element to source the content

18

HTML5 MULTIMEDIA

• Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg,Not all browsers support all formats

<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support video tag.</video>• Problems:

You must convert your videos to many different formats The <video> element does not work in older browsers Try to play the .ogg audio file If item 1 fails, try to play the .mp3 file If item 2 fails, display the “browser does not support” message

19

HTML5 VIDEO

• The control attribute adds video controls, like play, pause, and volume

It is also a good idea to always include width and height attributes. If height and width are set, the space required for the video is reserved when the page is loaded

• Insert text content between the <video> and </video> tags for browsers that do not support the <video> element

20

HTML5 VIDEO (cont’d)

• The <video> element allows multiple <source> elements. <source> elements can link to different video files

• The browser will use the first recognized format• Today

– Firefox, Opera, and Chrome: Ogg – Internet Explorer, Chrome, and Safari: MPEG4

• To cover all the major browsers, use two <source> elements

– an MPEG4 file, and an Ogg file

21

HTML5 VIDEO (cont’d)

Attribute Value Descriptionautoplay autoplay The video will start playing as soon as it is readycontrols controls Video controls should be displayedheight pixels Sets the height of the video playerloop loop Video will start over again, every time it is finished

muted muted Audio output of the video should be mutedposter URL An image to be shown while the video is

downloading, or until the user hits the play buttonwidth pixels Sets the width of the video player

22

VIDEO ATTRIBUTES

• Three formats: Ogg, WAV, MP3– Ogg: Firefox, Opera, Chrome– MP3: IE9, Chrome, Safari

<audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" />Your browser does not support audio element.</audio>

• control, multiple source, and content text is similar to <video> element

23

HTML5 AUDIO

Attribute Value Descriptionautoplay autoplay Audio will start playing as soon as it is ready

controls controls Audio controls should be displayed (such as a play/pause button etc).

loop loop Audio will start over again, every time it is finished

24

HTML5 AUDIO (cont’d)

Attribute Descriptiononcanplay Script to be run when a file is ready to start playing (when it has

buffered enough to begin)

onemptied Script to be run when something bad happens and the file is suddenly unavailable (like unexpectedly disconnects)

onended Script to be run when the media has reach the end (a useful event for messages like "thanks for listening")

onerror Script to be run when an error occurs when the file is being loaded

onloadstart Script to be run just as the file begins to load before anything is actually loaded

onpause Script to be run when the media is paused either by the user or programmatically

onplay Script to be run when the media is ready to start playingonplaying Script to be run when the media actually has started playing

onvolumechange Script to be run each time the volume is changed which (includes setting the volume to "mute")

25

MEDIA EVENTS

• HTML5 threw a whole bunch of awesomeness at us. Tasks we accomplished with JavaScript and Flash, like basic form validation and audio/video, can now be completed using basic HTML.

• Validation is required on the server, of course

• But you have to duplicate it in the user’s browser with JavaScript

• Given that almost every web page has some kind of form—search, comments, sign-up, and so on—it would be great if browsers had built-in validation for some of the most common data types that we collect

• HTML5 defines new input elements

26

FORMS CURRENT & FUTURE

• Built-in validationOne of the coolest features for developers—which will be transparent to bosses and consumers, but they’ll make our lives much easier— are new form input types which can give us special built-in error reporting. From now on you just need to specify a "type" inside your "input field" and the browser will validate automatically. For example "<input type=number>" will validate input field for numbers only

27

FORMS CURRENT & FUTURE

• Not all major browsers support all the new input types. However, you can already start using them; If they are not supported, they will behave as regular text fields

28

Type Descriptionurl The input value is a URL

email The input value is one or more email addressesdate The input value is a date

month The input value is a monthweek The input value is a weektime The input value is of type time

number The input value is a numberrange The input value is a number in a given rangecolor The input value is a hexadecimal color, like #FF8800

NEW INPUT TYPES

29

REAL EXAMPLE

HTML5 has several new attributes for <form> and <input>.• New attributes for <form>:• autocomplete• novalidate• New attributes for <input>:• autocomplete• autofocus• form• formaction• formenctype• formmethod

30

NEW INPUT TYPE ATTRIBUTES

• formnovalidate• formtarget• height and width• list• min and max• multiple• pattern (regexp)• placeholder• required• step

31


• autocomplete: on / off– The autocomplete attribute works with <form> and the

following <input> types: text, search, url, tel, email, password, datepickers, range, and color.

– When autocomplete is on, the browser automatically complete values based on values that the user has entered before.

– It is possible to have autocomplete "on" for the form, and "off" for specific input fields, or vice versa.

32


• autofocus: autofocus– field should automatically get focus when a page is loaded.

NEW INPUT TYPE ATTRIBUTES33

• min, max and step: a number– Used with number and range– Input data in number & range can be controlled

NEW INPUT TYPE ATTRIBUTES34

• list: datalist– A list of options for an input field– For text, url, email, …

35


• novalidate: novalidate is a boolean attribute.

– form or input field should not be validated when submitted

• pattern:specifies regular expression– The pattern that input should match with– Note: The pattern attribute works with the following input

types: text, search, url, tel, email, and password.– Tip: Use the global title attribute to describe the pattern to

help the user.

36


http://www.w3schools.com/tags/att_global_title.asp

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

sadafnaz• required: required

– Input field must be filled out before submitting

37


• In HTML4, input elements must be inside a form to be associated with it

• In HTML5, input elements can be associated with forms using form attribute , An input field located outside the HTML form (but still a part of the form), <input form="form_id">

• <form action="demo_form.asp" id="form1">First name: <input type="text" name="fname"><br><input type="submit" value="Submit"></form>

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

38

HTML5 FORMS ASSOCIATION

• The HTML5 <canvas> element is used to draw graphics, The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.

• Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.

• A canvas is a rectangular area on an HTML page, • Note: By default, the <canvas> element has no border and no content.• Note: Always specify an id attribute(baraye element e canvas) (to be

referred to in a script), and a width and height attribute to define the size of the canvas.

• Tip: You can have multiple <canvas> elements on one HTML page.

<canvas id="canvas_id" width="200" height="100">Your browser does not support Canvas

</canvas>

39

CANVAS

• All drawing on the canvas must be done inside a JavaScript(from javascript function)

• First, find the <canvas> element:• var c=document.getElementById("myCanvas")• Then, call its getContext() method (you must pass the string "2d"

to the getContext() method):• var ctx=c.getContext("2d");• getContext("2d") object is a built-in HTML5 object, with many

properties and methods for drawing paths, boxes, circles, text, images, and more.

40

CANVAS (CONT’D)

• Whenever drawing shapes on an HTML5 canvas, there are two properties you need to set:

StrokeFillThe stroke and fill determines how the shape is drawn. The stroke is the outline of a shape. The fill is the contents inside the shape.Fillstyle property: The fillStyle property sets or returns

the color, gradient, or pattern used to fill the drawing.Strokestyle property: The strokeStyle property sets or

returns the color, gradient, or pattern used for strokes.

41

CANVAS API

• Here is an example rectangle drawn with blue stroke, and green fill (actually it is two rectangles):

// Obtain a reference to the canvas element. var canvas = document.getElementById("ex1"); // Obtain a 2D context from the canvas element. var context = canvas.getContext("2d"); // Draw grahpics. context.fillStyle = "#009900"; context.fillRect(10,10, 100,100); context.strokeStyle = "#0000ff"; context.lineWidth = 5; context.strokeRect(10,10, 100,100);

42

CANVAS API

• Rectangle 2D Context functions fillRect() and strokeRect() context.fillStyle = "#ff0000"; context.fillRect(10,10, 100,100); context.strokeStyle = "#0000ff"; context.strokeRect(30,20, 120,110);fillRect()• The fillRect() function draws a filled rectangle, The 4 parameters (x, y,

width, height) are passed to the fillRect() strokeRect()• The strokeRect() function draws the outline of a rectangle, without

filling it

43

CANVAS API (CONT’D)

Arcctx.arc(X,Y,R,sAngle,eAngle,anticlock); • The arc() method creates an arc/curve (used to create circles, or parts of circles).• Tip: To create a circle with arc(): Set start angle to 0 and end angle to 2*Math.PI.• Tip: Use the stroke() or the fill() method to actually draw the arc on the canvas.

Path and line:• A HTML5 Canvas path is a series of points with drawing instructions

between those points. For instance, a series of points with lines between them, or with arcs between them

• Paths are used to draw many types of shapes (lines, circles, polygons etc.) on an HTML5 canvas, so it is important to understand this central concept.

• A path is started and ended using the 2D Context functions beginPath() andclosePath()

44


http://www.w3schools.com/tags/canvas_stroke.asp

http://www.w3schools.com/tags/canvas_fill.asp

• Line:• The stroke() method actually draws the path you have defined with all

those moveTo() and lineTo() methods. The default color is black.• To draw straight lines on a canvas, we will use the following two methods:moveTo(x,y) defines the starting point of the linelineTo(x,y) defines the ending point of the linevar c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.moveTo(0,0);ctx.lineTo(200,100);ctx.stroke();

ctx.moveTo(X, Y) ctx.lineTo(X, Y)

45


• Complex shapes

ctx.beginPath();ctx.strokeStyle = "rgb(0, 0, 240)";ctx.moveTo(100, 100);ctx.lineTo(200, 100);ctx.lineTo(200, 300);ctx.lineTo(150, 250);ctx.closePath();ctx.stroke();

46


Gradients:patterns of color which changes gradiently from one color to another

There are two types of gradients: Linear: linear pattern Radial:circular pattern

47


Linear gradient:The createLinearGradient() function takes 4 parameters: x1, y1, x2, y2. These 4 parameters determine the direction and extension of the gradient pattern. The gradient extends from the first point x1, y1 to the second point x2, y2.horizontal gradient, vertical gradient, diagonal gradient

The addColorStop() function takes 2 parameters. The first parameter is a number between 0 and 1, The second parameter is the color you can draw using the gradient as either fill or stroke color

48


Radial Gradients:

A radial gradient is defined by 2 circles. Each circle has a center point and a radius. Here is a code example:

var x1 = 100; // x of 1. circle center pointvar y1 = 100; // y of 1. circle center pointvar r1 = 30; // radius of 1. circle

var x2 = 100; // x of 2. circle center pointvar y2 = 100; // y of 2. circle center pointvar r2 = 100; // radius of 2. circle

49


var radialGradient1 = context.createRadialGradient(x1, y1, r1, x2, y2, r2); radialGradient1.addColorStop(0, 'rgb(0, 0, 255)');radialGradient1.addColorStop(1, 'rgb(0, 255, 0)'); context.fillStyle = radialGradient1;context.fillRect(10,10, 200, 200);

50


• Put image in canvas

var img=new Image();img.src="URL";cxt.drawImage(img,0,0);

51


• With HTML5, web pages can store data locally within the user's browser.

• Earlier, this was done with cookies. However, Web • Storage is more secure and faster• It is also possible to store large amounts of data, without

affecting the website's performance.• web page can only access data stored by itself.

• HTML5 offers two new objects for storing data on the client– localStorage: stores data with no time limit– sessionStorage: stores data for one session

52

STORING DATA ON THE CLIENT

• Before using web storage, check browser support for localStorage and • sessionStorage:• if(typeof(Storage)!=="undefined")

{ // Yes! localStorage and sessionStorage support! // Some code..... }else { // Sorry! No web storage support.. }

53

STORING DATA ON THE CLIENT

• To store the data for one session• Data is deleted when session finishes(when the user closes the

browser)

• How to create and access sessionStorage:

<script>sessionStorage.lastname="Smith";var name = sessionStorage.lastname;

</script>

54

SESSION STORAGE

• Count page visits in current session <script>

if (sessionStorage.pagecount){sessionStorage.pagecount = Number(sessionStorage.pagecount) + 1;

}else{

sessionStorage.pagecount = 1;}document.write("Visits "+ sessionStorage.pagecount + " time(s).");

</script>

55

SESSION STORAGE EXAMPLE

• The localStorage Object• Stores data with no time limit. – The data will be available the next day, week, …

• How to create and access a localStorage:<script>localStorage.lastname="Smith";</script>Create a localStorage key/value pair with key="lastname" and

value="Smith"

Key/value pairs are always stored as strings. Remember to convert them to another format when needed.

56

LOCAL STORAGE

<!DOCTYPE html>

<html>

<head>

<script>

function clickCounter()

{

if(typeof(Storage)!=="undefined")

{

if (localStorage.clickcount)

{

localStorage.clickcount=Number(localStorage.clickcount)+1;

}

else

{

localStorage.clickcount=1;

}

document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";

}

57

LOCAL STORAGE EXAMPLE

else

{

document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";

}

}

</script>

</head>

<body>

<p><button onclick="clickCounter()" type="button">Click me!</button></p>

<div id="result"></div>

<p>Click the button to see the counter increase.</p>

<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>

</body>

</html>

58

LOCAL STORAGE EXAMPLE

HTML5 supports drag-and-drop operations

• Drag and Drop (DnD) is powerful User Interface concept which makes it easy to copy, reorder and deletion of items with the help of mouse clicks. This allows the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.

59

DRAG & DROP

• To achieve drag and drop functionality with traditional HTML4, developers would either have to either have to use complex Javascript programming or other Javascript frameworks like jQuery etc.

• From HTML5 point of view– By default, all links, text, image are draggable– make an element draggable:

<div id="ID" draggable="true"> </div>

60

DRAG & DROP

• Bruce Lawson and Remy Sharp, “Introducing HTML5”• www.w3.org/

• www.w3schools.com/html5• faculty.purchase.edu/jeanine.meyer/html5projects.html• http://html5doctor.com/the-figure-figcaption-elements/• http://coding.smashingmagazine.com/2013/01/18/the-

importance-of-sections/• http://www.htmlgoodies.com/html5/tutorials/HTML5-

Development-Class-Media-Events-3883356.htm• http://ingus.info/blog/introducing-html5-second-edition-book-

review.html• http://www.wufoo.com/html5/attributes/05-list.html

61

REFERENCES

html5 golsana ghaemi 8811143 1. introduction page structure multimedia forms canvas storage drag...

Documents