UNIT 5 HTML 5.

UNIT 5 HTML 5

REFERENCE MATERIAL

INTRODUCTION

HTML5: What is it? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM (document object model). The previous version of HTML came in The web has changed a lot since then. HTML5 is still a work in progress, but most modern browsers have some HTML5 support.

HTML5: Origins 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.

HTML5: Ground Rules Some rules for HTML5 were established:
> New features should be based on HTML, CSS, DOM, and JavaScript > Reduce the need for external plugins > Better error handling > More markup to replace scripting > HTML5 should be device independent > Dev process should be visible to the public

HTML5: New Features > Canvas element for drawing > Video/audio elements for media playback > Better support for local offline storage > New content specific elements, like article, footer, header, nav, section > New form controls, like calendar, date, time, , url, search

HTML5: Support HTML5 is not yet an official standard, and no browser has full HTML5 support. It is a LIVING STNADARD!!!

HTML5: Support You may well ask: “How can I start using HTML5 if older browsers don’t support it?” But the question itself is misleading. HTML5 is not one big thing; it is a collection of individual features. You can only detect support for individual features, like canvas, video, or geolocation.

HTML5: Support Love it or hate it, you can’t deny that HTML 4 is the most successful markup format ever. HTML5 builds on that success. You don’t need to throw away your existing markup. You don’t need to relearn things you already know. If your web application worked yesterday in HTML 4, it will still work today in HTML5. Period.

HTML5: Example HTML5 supports all the form controls from HTML 4, but it also includes new input controls. Some of these are long-overdue additions like sliders and date pickers; others are more subtle... For example, the input type looks just like a text box, but mobile browsers will customize their onscreen keyboard to make it easier to type addresses. Older browsers that don’t support the input type will treat it as a regular text field, and the form still works with no markup changes or scripting hacks.

<!DOCTYPE html> HTML: DOCTYPE
Previous versions of HTML defined a lot of doctypes, and choosing the right one could be tricky. In HTML5, there is only one doctype: <!DOCTYPE html>

HTML: Support Whether you want to draw on a canvas, play video, design better forms, or build web applications that work offline, you’ll find that HTML5 is already well-supported. Firefox, Safari, Chrome, Opera, and mobile browsers already support canvas, video, geolocation, local storage, and more. Google already supports microdata annotations. Even Microsoft supports most HTML5 features in the Internet Explorer 9.

HTML5:So many features

HTML5:Such varied support

WE NEED A STRATEGY RESEARCH: What browsers does it work in?
DETECTION: Does it work in the users browser FALLBACK: What do we do if it does not work

RESEARCH: WHAT BROWSERS DOES IT WORK IN?
Check caniuse.com ES5 compatibility tables mobilehtml5.org CSS3 selector support mobile CSS support .

caniuse.com

HTML5: Detection Check if a certain property exists on a global object (such as window ornavigator). Example: testing for geolocation support Create an element, then check if a certain property exists on that element. Example: testing for canvas support Create an element, check if a certain method exists on that element, then call the method and check the value it returns. Example: testing which video formats are supported Create an element, set a property to a certain value, then check if the property has retained its value. Example: testing which <input> types are supported

function supports_geolocation() { return !!navigator.geolocation; }
Detection Technique #1 function supports_geolocation() { return !!navigator.geolocation; }

Detection Technique #2 function supports_canvas() { return !!document.createElement('canvas').getContext; }

Detection Technique #3 function supports_video() { return !!document.createElement('video').canPlayType; }

function supports_h264_baseline_video() {
if (!supports_video()) { return false; } var v = document.createElement("video"); return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); } return v.canPlayType('video/mp4;codecs="avc1.42E01E, mp4a.40.2"');

Detection Technique #4 var i = document.createElement("input");
i.setAttribute("type", “date"); return i.type !== “text";

HTML5: What's New The internet has changed a lot since HTML 4.01 became a standard in Today, some elements in HTML 4.01 are obsolete, never used, or not used the way they were intended to be. These elements are deleted or re-written in HTML5. HTML5 also includes new elements for better structure, drawing, media content, form handling.

HTML5: Input - form HTML5 has several new elements and attributes for forms. > datalist > output

HTML5: Form elements The datalist element specifies a list of options for an input field. The list is created with option elements inside the datalist. The output element is used for different types of output, like calculations or script output

Output <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form>

HTML5: Canvas The HTML5 canvas element uses JavaScript to draw graphics on a web page. A canvas is a rectangular area, and you control every pixel of it. The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images.

HTML5: Canvas Adding a canvas element to the HTML5 page. Specify the id, width, height of the element: <canvas id="myCanvas" width="200" height="100"></canvas>

HTML5: Canvas The canvas element has no drawing abilities of its own. All drawing must be done inside a JavaScript: <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script>

Canvas rectangle arc arcTo createLinearGradient createRadialGradient
Note:Please refer mozilla developer network and the prescribed text alongwith slides

Rectangles fillRect(x, y, width, height)
Draws a filled rectangle. strokeRect(x, y, width, height) Draws a rectangular outline. clearRect(x, y, width, height) Clears the specified rectangular area, making it fully transparent.

beginPath() Creates a new path. Path methods
Paths beginPath() Creates a new path. Path methods closePath() Closes the path so that future drawing commands are once again directed to the context. stroke() Draws the shape by stroking its outline. fill() Draws a solid shape by filling the path's content area. moveTo(x, y) Moves the pen to the coordinates specified by x and y. lineTo(x, y) Draws a line from the current drawing position to the position specified by x and y.

Arcs arc(x, y, radius, startAngle, endAngle, anticlockwise)
Draws an arc which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction indicated by anticlockwise (defaulting to clockwise). arcTo(x1, y1, x2, y2, radius) Draws an arc with the given control points and radius, connected to the previous point by a straight line. Note: Angles in the arc function are measured in radians, not degrees. To convert degrees to radians you can use the following JavaScript expression: radians = (Math.PI/180)*degrees.

A little bit of style!! fillStyle = color Sets the style used when filling shapes. strokeStyle = color Sets the style for shapes' outlines. lineWidth = value Sets the width of lines drawn in the future. Note: When you set the strokeStyle and/or fillStyle property, the new value becomes the default for all shapes being drawn from then on. For every shape you want in a different color, you will need to reassign the fillStyle or strokeStyle property.

Gradients createLinearGradient(x1, y1, x2, y2)
Creates a linear gradient object with a starting point of (x1, y1) and an end point of (x2, y2). createRadialGradient(x1, y1, r1, x2, y2, r2) Creates a radial gradient. The parameters represent two circles, one with its center at (x1, y1) and a radius of r1, and the other with its center at (x2, y2) with a radius of r2.

Gradients gradient.addColorStop(position, color)
Creates a new color stop on the gradient object. The position is a number between 0.0 and 1.0 and defines the relative position of the color in the gradient

Linear Gradient Example
var lineargradient = ctx.createLinearGradient(0,0,150,150); lineargradient.addColorStop(0, 'white'); lineargradient.addColorStop(1, 'black'); ctx.fillStyle = lingrad; ctx.fillRect(10,10,130,130);

Radial Gradient var radgrad =ctx.createRadialGradient(45,45,10,52,50,30); radgrad.addColorStop(0, '#A7D30C'); radgrad.addColorStop(0.9, '#019F62'); radgrad.addColorStop(1, 'rgba(1,159,98,0)'); ctx.fillStyle = radgrad; ctx.fillRect(0,0,150,150);

Drawing Text fillText(text, x, y [, maxWidth])
Fills a given text at the given (x,y) position. Optionally with a maximum width to draw. strokeText(text, x, y [, maxWidth]) Strokes a given text at the given (x,y) position. Optionally with a maximum width to draw.

Styling Text font = value textAlign = value textBaseline = value
The current text style being used when drawing text. textAlign = value Text alignment setting. Possible values: start, end, left, right or center. The default value is start textBaseline = value Baseline alignment setting. Possible values: top, hanging, middle, alphabetic, ideographic, bottom. The default value is alphabetic direction = value Directionality. Possible values: ltr, rtl, inherit. The default value is inherit.

Baseline

Drawing Images drawImage(image, x, y)
Draws the CanvasImageSource specified by the image parameter at the coordinates (x, y). drawImage(image, x, y, width, height) This adds the width and height parameters, which indicate the size to which to scale the image when drawing it onto the canvas.

Drawing Images drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) Given an image, this function takes the area of the source image specified by the rectangle whose top-left corner is (sx, sy) and whose width and height are sWidth and sHeight and draws it into the canvas, placing it on the canvas at (dx, dy) and scaling it to the size specified by dWidth and dHeight.

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

Audio & Video

HTML5: Video Until now, there hasn't been a standard for showing video on a web page. Today, most videos are shown through a plugin (like Flash). However, not all browsers have the same plugins. HTML5 specifies a standard way to include video with the video element.

HTML5: Video Currently, there are 3 supported video formats for the video element:

HTML5: Video <!DOCTYPE HTML> <html> <body> <video src="movie.ogg" width="320" height="240" controls="controls"> Your browser does not support the video tag. </video> </body> </html>

HTML5: Video The last example uses an Ogg file, and will work in Firefox, Opera and Chrome. To make the video work in Safari and future versions of Chrome, we must add an MPEG4 and WebM file. The video element allows multiple source elements. Source elements can link to different video files. The browser will use the first recognized format:

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

HTML5: Video

HTML5: Audio Until now, there has never been a standard for playing audio on a web page. Today, most audio is played through a plugin (like Flash). However, not all browsers have the same plugins. HTML5 specifies a standard way to include audio, with the audio element. The audio element can play sound files, or an audio stream.

HTML5: Audio Currently, there are 3 supported formats for the audio element:

HTML5: Audio <!DOCTYPE HTML> <html> <body> <audio src="song.ogg" controls="controls"> Your browser does not support the audio element. </audio> </body> </html>

HTML5: Audio The last example uses an Ogg file, and will work in Firefox, Opera and Chrome. To make the audio work in Safari, the audio file must be of type MP3 or Wav. The audio element allows multiple source elements. Source elements can link to different audio files. The browser will use the first recognized format.

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

HTML5: Audio

Local Storage Storing of data locally in native client applications - registry, ini files, xml files etc. Limited facility in Browsers with the use of cookies.

Local StoragE Problems with cookies:
Included with every request that goes across to the server Very limited size – around 4KB usually. Not encrypted unless the whole application is over SSL. More network traffic, slowing down the app.

Local StoragE We need…. More storage space locally. Data must persist.
Should not transmit to the server unnecessarily. The solution is……HTML5 LocalStorage.

Local Storage - history
Started with “userData” from MS. (64KB) Adobe’s Flash 6 : upto 100KB Gears from Google in 2007 – database style storing. HTML 5 – Local and Session storage. Supported by all major browsers.

Local Storage - Interface
interface Storage { readonly attribute unsigned long length; getter DOMString key(in unsigned long index); getter any getItem(in DOMString key); setter creator void setItem(in DOMString key, in any value); deleter void removeItem(in DOMString key); void clear(); };

Local Storage length: The size of the local storage (count)
key(index) – return the key at index getItem(key) – return the value of the specified key as a string setItem(key,value) – set the value for the key specified as a string removeItem(key) – remove an item specified by thekey clear( ) – remove all items from storage.

Local StoragE - examples
localStorage.setItem(“name”, “student”); // or localStorage[“name”] = “student”; Nam = localStorage.getItem(“name”); // returns null if such a key does’nt exist. removeItem(“name”); //does nothing if key does’nt exist.

Local Storage - Tracking changes
We can register for the “storage” event. Thus: win.addEventListener(“storage”, func, false); //win is window Or window.onstorage = myfunc;

Local Storage - tracking changes
The storage event cannot be reversed. It can only be recorded and some action can be taken accordingly. On IE, the event object is retrieved by window.event, while on other browsers, functions can accept a parameter called “event” which is the event object.

Local StoragE - tracking changes
The “event” object has the following properties. key: the named key added/removed or modified. oldValue: the old value of the key (null if new key is added) newValue: the new value (null if key is removed) url: the page that triggered this change.

Local Storage - limitations
Standard limit is 5 MB (still, way better than what cookies can offer) All values are stored as strings only. (if you want db type operations, you need to go to the competitors. If storage quota is exceeded, QUOTA_EXCEEDED_ERR exception is thrown. Cannot request for more space

Application Cache /Offline Browsing

Application Cache A web application is cached, and accessible without an internet connection. Application cache gives an application three advantages: Offline browsing - users can use the application when they're offline Speed - cached resources load faster Reduced server load - the browser will only download updated/changed resources from the server

Application Cache Every page with the manifest attribute specified will be cached when the user visits it. If the manifest attribute is not specified, the page will not be cached (unless the page is specified directly in the manifest file). The recommended file extension for manifest files is: ".appcache“ <!DOCTYPE HTML> <html manifest="demo.appcache"> </html>

Application Cache The manifest file is a simple text file, which tells the browser what to cache (and what to never cache). The manifest file has three sections: CACHE MANIFEST - Files listed under this header will be cached after they are downloaded for the first time NETWORK - Files listed under this header require a connection to the server, and will never be cached FALLBACK - Files listed under this header specifies fallback pages if a page is inaccessible

Manifest File - Example
CACHE MANIFEST # v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html/ /offline.html

JQUERY

BOOTSTRAP

UNIT 5 HTML 5.

Similar presentations

Presentation on theme: "UNIT 5 HTML 5."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

UNIT 5 HTML 5.

Similar presentations

Presentation on theme: "UNIT 5 HTML 5."— Presentation transcript:

Similar presentations

About project

Feedback