HTML5 Golsana Ghaemi 8811143
Outline Introduction Page Structure Multimedia Forms Canvas Storage Drag & Drop Outline
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. introduction
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. HTML5 standard status
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 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, … Some new feature
Document type & encoding 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"> Document type & encoding
HTML5 syntax 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> HTML5 syntax
Some new global attributes Value Description contenteditable true false inherit Specifies whether a user can edit the content of an element or not draggable true false auto Specifies whether a user is allowed to drag an element or not hidden Specifies that an element should be hidden spellcheck true false Specifies if the element must have its spelling and grammar checked Some new global attributes
Page structure 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> Page structure
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 Page structure
Xhtml based page design A sample weblog Assign id & class to divs Use CSS to arrange divs Xhtml based page design
html5 based page design A semantic element clearly The weblog using HTML5 semantic tags Use HTML5 new tags A semantic element clearly Describes its meaning to Both the browser and the developer html5 based page design
Sample html5 page structure Header Figure Navigation Image, Video, Quote, Table, etc… Aside Article Section Section Section caption Footer Footer Sample html5 page structure
Html5 page structure tags 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 Html5 page structure tags
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. 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. 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 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 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 Html5 video (cont’d)
Html5 video (cont’d) Firefox, Opera, and Chrome: Ogg 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 Html5 video (cont’d)
Video attributes Attribute Value Description autoplay The video will start playing as soon as it is ready controls Video controls should be displayed height pixels Sets 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 poster URL An image to be shown while the video is downloading, or until the user hits the play button width Sets the width of the video player Video attributes
Html5 audio 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 Html5 audio
Html5 audio (cont’d) Attribute Value Description 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 Html5 audio (cont’d)
Media events Attribute Description oncanplay 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 playing onplaying 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") Media events
HTML5 threw a whole bunch of awesomeness at us 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 Forms current & future
Built-in validation One 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 Forms current & future
Not all major browsers support all the new input types 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 Type Description url The input value is a URL email The input value is one or more email addresses date The input value is a date month The input value is a month week The input value is a week time The input value is of type time number The input value is a number range The input value is a number in a given range color The input value is a hexadecimal color, like #FF8800 New input types
Real example
New input type attributes HTML5 has several new attributes for <form> and <input>. New attributes for <form>: autocomplete novalidate New attributes for <input>: autofocus form formaction formenctype formmethod New input type attributes
New input type attributes formnovalidate formtarget height and width list min and max multiple pattern (regexp) placeholder required step New input type attributes
New input type attributes 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. New input type attributes
New input type attributes autofocus: autofocus field should automatically get focus when a page is loaded. New input type attributes
New input type attributes min, max and step: a number Used with number and range Input data in number & range can be controlled New input type attributes
New input type attributes list: datalist A list of options for an input field For text, url, email, … New input type attributes
New input type attributes 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. New input type attributes
New input type attributes 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 New input type attributes
Html5 forms association 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"> Html5 forms association
canvas <canvas id="canvas_id" width="200" height="100"> 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> 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. Canvas (cont’d)
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. 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); Canvas API
Canvas API (cont’d) 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 Canvas API (cont’d)
Canvas API (cont’d) Path and line: 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. 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() Canvas API (cont’d)
Canvas API (cont’d) 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) Canvas API (cont’d)
Canvas API (cont’d) 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(); Canvas API (cont’d)
Canvas API (cont’d) Gradients: patterns of color which changes gradiently from one color to another There are two types of gradients: Linear: linear pattern Radial:circular pattern Canvas API (cont’d)
Canvas API (cont’d) 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 Canvas API (cont’d)
Canvas API (cont’d) 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 Canvas API (cont’d)
Canvas API (cont’d) 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); Canvas API (cont’d)
Canvas API (cont’d) Put image in canvas var img=new Image(); img.src="URL"; cxt.drawImage(img,0,0); Canvas API (cont’d)
Storing data on the client 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 Storing data on the client
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.. } Storing data on the client
Session storage <script> sessionStorage.lastname="Smith"; 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> Session storage
Session storage example 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> Session storage example
Local storage 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. 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)."; Local storage example
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> Local storage example
Drag & drop 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. Drag & drop
Drag & drop <div id="ID" draggable="true"> </div> 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> Drag & drop
references 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 references