Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML5 Golsana Ghaemi 8811143 1. Introduction Page Structure Multimedia Forms Canvas Storage Drag & Drop 2.

Similar presentations

Presentation on theme: "HTML5 Golsana Ghaemi 8811143 1. Introduction Page Structure Multimedia Forms Canvas Storage Drag & Drop 2."— Presentation transcript:

1 HTML5 Golsana Ghaemi

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

3 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

4 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 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

5 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

6 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, , url, … 6

7 HTML5 is not based on XML or SGML Browsers need to see – To work in standard compliance mode HTML5 Document type(in older versions of HTML were longer) Character encoding 7

8 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 Following tags are not required Document is successfully validated without them 8

9 AttributeValueDescription contenteditabletrue false inherit Specifies whether a user can edit the content of an element or not draggabletrue false auto Specifies whether a user is allowed to drag an element or not hidden Specifies that an element should be hidden spellchecktrue false Specifies if the element must have its spelling and grammar checked 9

10 Emphasize semantic web HTML5 offers new semantic elements to clearly define different parts of a web page: 10

11 HTML is not just presentation Each page portion has its own meaning In XHTML, page is organized by div s – Assign meaningful ID or Class for div s header, navigation, footer, content, … HTML5: new tags for the common divs –,,, … HTML5 recommends the usage of these tags 11

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

13 The weblog using HTML5 semantic tags Use HTML5 new tags A semantic element clearly Describes its meaning to Both the browser and the developer 13

14 14 Header Navigation Aside Footer Article Section Footer Figure Image, Video, Quote, Table, etc… caption

15 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

16 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 – is used to insert (source) the image – The figcaption element represents a caption or legend for a figure. 16

17 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

18 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 – element to insert video – element to play audio sound – element to source the content 18

19 Currently, there are 3 supported video formats for the element: MP4, WebM, and Ogg,Not all browsers support all formats Your browser does not support video tag. Problems: You must convert your videos to many different formats The 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

20 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 and tags for browsers that do not support the element 20

21 The element allows multiple elements. 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 elements – an MPEG4 file, and an Ogg file 21

22 AttributeValueDescription autoplay The video will start playing as soon as it is ready controls Video controls should be displayed heightpixelsSets the height of the video player loop Video will start over again, every time it is finished muted Audio output of the video should be muted posterURLAn image to be shown while the video is downloading, or until the user hits the play button widthpixelsSets the width of the video player 22

23 Three formats: Ogg, WAV, MP3 – Ogg: Firefox, Opera, Chrome – MP3: IE9, Chrome, Safari Your browser does not support audio element. control, multiple source, and content text is similar to element 23

24 AttributeValueDescription autoplay Audio will start playing as soon as it is ready controls Audio controls should be displayed (such as a play/pause button etc). loop Audio will start over again, every time it is finished 24

25 AttributeDescription oncanplayScript to be run when a file is ready to start playing (when it has buffered enough to begin) onemptiedScript to be run when something bad happens and the file is suddenly unavailable (like unexpectedly disconnects) onendedScript to be run when the media has reach the end (a useful event for messages like "thanks for listening") onerrorScript to be run when an error occurs when the file is being loaded onloadstartScript to be run just as the file begins to load before anything is actually loaded onpauseScript to be run when the media is paused either by the user or programmatically onplayScript to be run when the media is ready to start playing onplayingScript to be run when the media actually has started playing onvolumechangeScript to be run each time the volume is changed which (includes setting the volume to "mute") 25

26 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 users browser with JavaScript Given that almost every web page has some kind of formsearch, comments, sign-up, and so onit 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

27 Built-in validation One of the coolest features for developerswhich will be transparent to bosses and consumers, but theyll 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 " " will validate input field for numbers only 27

28 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 TypeDescription urlThe input value is a URL The input value is one or more addresses dateThe input value is a date monthThe input value is a month weekThe input value is a week timeThe input value is of type time numberThe input value is a number rangeThe input value is a number in a given range colorThe input value is a hexadecimal color, like #FF8800

29 29

30 HTML5 has several new attributes for and. New attributes for : autocomplete novalidate New attributes for : autocomplete autofocus form formaction formenctype formmethod 30

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

32 autocomplete : on / off – The autocomplete attribute works with and the following types: text, search, url, tel, , 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

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

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

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

36 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, , and password. – Tip: Use the global title attribute to describe the pattern to help the user.title 36

37 Country code: sadafnaz required : required – Input field must be filled out before submitting 37

38 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), First name: Last name: 38

39 The HTML5 element is used to draw graphics, The 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 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 elements on one HTML page. Your browser does not support Canvas 39

40 All drawing on the canvas must be done inside a JavaScript(from javascript function) First, find the 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

41 Whenever drawing shapes on an HTML5 canvas, there are two properties you need to set: Stroke Fill The 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

42 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

43 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

44 Arc ctx.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.stroke()fill() 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

45 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 line lineTo(x,y) defines the ending point of the line var 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

46 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

47 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

48 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

49 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 point var y1 = 100; // y of 1. circle center point var r1 = 30; // radius of 1. circle var x2 = 100; // x of 2. circle center point var y2 = 100; // y of 2. circle center point var r2 = 100; // radius of 2. circle 49

50 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

51 Put image in canvas var img=new Image(); img.src="URL"; cxt.drawImage(img,0,0); 51

52 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

53 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

54 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: sessionStorage.lastname="Smith"; var name = sessionStorage.lastname; 54

55 Count page visits in current session if (sessionStorage.pagecount){ sessionStorage.pagecount = Number(sessionStorage.pagecount) + 1; } else{ sessionStorage.pagecount = 1; } document.write("Visits "+ sessionStorage.pagecount + " time(s)."); 55

56 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 : localStorage.lastname="Smith"; 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

57 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

58 else { document.getElementById("result").innerHTML="Sorry, your browser does not support web storage..."; } Click me! Click the button to see the counter increase. Close the browser tab (or window), and try again, and the counter will continue to count (is not reset). 58

59 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

60 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: 60

61 Bruce Lawson and Remy Sharp, Introducing HTML5 importance-of-sections/ Development-Class-Media-Events htm book-review.html 61

Download ppt "HTML5 Golsana Ghaemi 8811143 1. Introduction Page Structure Multimedia Forms Canvas Storage Drag & Drop 2."

Similar presentations

Ads by Google