Download presentation
Presentation is loading. Please wait.
1
Introduction to HTML5
2
Brief History Of Markup
HTML 2 From IETF To W3C : The Road To HTML 4 HTML 4.01 XHTML 1 : HTML As XML XHTML 1.1 ( XHTML 2) From W3C To (WHATWG , W3C ) HTML5 IETF : Internet Engineering Task Force W3C : World Wide Web Consortium WHATWG : Web Hypertext Application Technology Working Group 2 of 100
3
Tag Structure DOCTYPE The doctype for HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " The doctype for XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" " The doctype for HTML5 <!DOCTYPE html>
4
Tag Structure <meta> Tag <script> Tag
The meta declaration for document written in HTML 4.01 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> In HTML5 <meta charset="UTF-8"> <script> Tag <script type="text/javascript" src="file.js"></script> In HTML5 <script src="file.js"></script>
5
Tag Structure <link> Tag In HTML5 Obsolete Elements In HTML5
<link rel="stylesheet" type="text/css" href="file.css"> In HTML5 <link rel="stylesheet" href="file.css"> Obsolete Elements In HTML5 Frame , frameset , noframes , font , big , center and few more. Attributes like bgcolor, cellspacing, cellpadding, and valign. Use of <a> Tag in HTML5 <a href="/about"> <h2>About me</h2> <p>Find out what makes me tick.</p> </a>
6
Tag Structure Organizing Code Using Blocking Elements SECTION ARTICLE
HEADER FOOTER ASIDE FIGURE NAV
7
Forms in HTML5 In addition to GET and POST action , PUT and DELETE are added as an action for form. Form elements can be anywhere and can be associated to form by giving form's ID to form attribute of that element. <form id=foo> <input type=”text”> ... </form> <textarea form=foo></textarea>
8
Forms in HTML5 New INPUT types Email input type URL input type
<input type= > <input type=url> Date input type Time input type <input type=date> <input type=time> datetime input type <input type=datetime> Month input type <input type=month>
9
Forms in HTML5 More INPUT types In Chrome In Opera Week input type
range input type <input type=week> <input type=range > In Chrome Search input type <input type=search> Number input type tel input type <input type=number min=0 max=20 step=2 > <input type=tel> In Opera
10
Forms in HTML5 Last INPUT type In Blackberry web browser
color input type <input type=color > In Blackberry web browser
11
Forms in HTML5 New attributes Autofocus attribute
<input id="status" name="status" type="text" autofocus> Placeholder attribute <label for="search">My Search</label> <input id="search" name="search" type="text" placeholder="Search Here"> My Search Search Here
12
Forms in HTML5 More new attributes Required attribute
<input id="pass" name="pass" type="password" required> Autocomplete attribute <input type="text" name="onetimetoken" autocomplete="off">
13
Offline Web Applications
Allow you to keep using web apps and sites without a network connection Browsers cache data in Application cache Once resources are cached you can access them very quickly (without network request) HTML5 also allows online and offline detection We can use offline mechanism that allows us to easily prefetch site resources
14
Offline Web Applications
The cache manifest Contents of cache.manifest CACHE MANIFEST # Files to cache index.html cache.html html5.css image1.jpg html5.js # Use from Network if available NETWORK: network.html # Fallback content FALLBACK: fallback.js fallbackserver.js /fallback.html <!DOCTYPE HTML> <html manifest="/cache.manifest"> <body> ... </body> </html>
15
Geolocation Geolocation is the art of figuring out where you are in the world and sharing that information with the people you trust. Geolocation API provides latitude and longitude on the page where this API is used. The simplest use of the geolocation API looks like this : function get_location() { navigator.geolocation.getCurrentPosition(show_map); }
16
Geolocation Calling the getCurrentPosition() fuction of the geolocation API will cause the browser to popup an infobar at the top of the browser window. This infobar says that you , * are told that a website wants to know your location * are told which website wants to know your location * can click through to Learn more link which explains what the is going on * can choose to share your location * can choose not to share your location * can tell your browser to remember your choice so you never see this infobar again on this website
17
Geolocation getCurrentPosition() is single fuction which takes callback function show_map.Callback function looks like : function show_map(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // let's show a map or do something interesting! } This position object provides information like latitude , longitude , accuracy , speed etc.
18
Canvas The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly. Canvas gives an easy and powerful way to draw graphics using Javascript. For each canvas element you can use a "context" (think about a page in a drawing pad), into which you can issue JavaScript commands to draw anything you want.
19
Canvas Basics of Canvas
<canvas id="myCanvas" width="300" height="150"> Fallback content, in case the browser does not support Canvas. </canvas> <script> // Get a reference to the element. var elem = document.getElementById('myCanvas'); // Always check for properties and methods, to make // sure your code doesn't break // in other browsers. if (elem && elem.getContext) { // Get the 2d context. // Remember: you can only initialize one context per element. var context = elem.getContext('2d'); if (context) { // You are done! Now you can draw your first rectangle. // You only need to provide the (x,y) coordinates, followed by // the width and // height dimensions. context.fillRect(0, 0, 150, 100); } </script>
20
Canvas Basic lines and strokes context.fillStyle = '#00f'; // blue
context.strokeStyle = '#f00'; // red context.lineWidth = 4; // Draw some rectangles. context.fillRect (0, 0, 150, 50); context.strokeRect(0, 60, 150, 50); context.clearRect (30, 25, 90, 60); context.strokeRect(30, 25, 90, 60);
21
Canvas Paths // Set the style properties. context.fillStyle = '#00f';
context.strokeStyle = '#f00'; context.lineWidth = 4; context.beginPath(); // Start from the top-left point. context.moveTo(10, 10); // give the (x,y) coordinates context.lineTo(100, 10); context.lineTo(10, 100); context.lineTo(10, 10); // Done! Now fill the shape, and draw the stroke. // Note: your shape will not be visible until you call any of the two methods. context.fill(); context.stroke(); context.closePath();
22
Canvas Text in Canvas context.fillStyle = '#00f';
context.font = 'italic 30px sans-serif'; context.textBaseline = 'top'; context.fillText('Hello world!', 0, 0); context.font = 'bold 30px sans-serif'; context.strokeText('Hello world!', 0, 50);
23
Data Storage Current problems with COOKIES
Low size: Cookies generally have a maximum size of around 4KB, which is not much good for storing any kind of complex data. It’s difficult for cookies to keep track of two or more transactions on the same site, which might be happening in two or more different tabs. Cookies can be exploited using techniques such as cross site scripting, resulting in security breaches.
24
Data Storage Storage options
HTML5 gives two options when it comes to storing data on the client side :- Web Storage – supported in all latest browsers. Web SQL Database – supported in Opera , Chrome and Safari
25
Data Storage Web Storage Web Storage spec was designed as a better way
of storing data on the client-side until the end of a session (Session Storage) , or beyond (Local Storage). It has two different types of storage: Session Storage Local Storage Able to store around 5MB of data per domain
26
Data Storage Session Storage
Purpose : To remember all the data in your session, and forget it as soon you close the tab (or window) you are working in. Setting Data : sessionStorage.setItem(yourkey, yourvalue); Retrieving Data : item = sessionStorage.getItem(yourkey); Removing Data : sessionStorage.removeItem(yourkey); Clearing Data : sessionStorage.clear();
27
Data Storage Local Storage
Local Storage is used if you want the data to be stored for more than a single session. When a page uses Local Storage, the page (or window) can be closed and re-opened, and still show the saved data — it provides persistent storage. Local Storage API uses same function names as of Session Storage like getItem() , setITem() clear(),removeItem().
28
Data Storage Using Storage event
The specification also provides for the storage event to be fired whenever the storage area changes. This provides various useful attributes such as: storageArea: Tells which kind of storage it is (Session or Local) key: The key which is being changed. oldValue: The old value of the key newValue: The new value of the key url: The URL of the page whose key is changed.
29
Data Storage Web SQL Database API
Web SQL Databases are another way to store and access data. This is a real database that you are able to query and join results. Opening a connection db = openDatabase("ToDo", "0.1", "A list of to do items.", ); Executing Queries db.transaction( function(tx) { tx.executeSql("SELECT COUNT(*) FROM ToDo", [], function(result){}, function(tx, error){});
30
Data Storage Insertion Working with Results db.transaction(
function(tx) { tx.executeSql("INSERT INTO ToDo (label, timestamp) values(?, ?)", [label, new Date().getTime()], null, null); } ); Working with Results db.transaction( function(tx) { tx.executeSql("SELECT * FROM ToDo", [], function(tx, result) { for(var i = 0; i < result.rows.length; i++) { document.write('<b>' + result.rows.item(i)['label'] + '</b><br />'); } }, null); );
31
Videos HTML5 provides a standardised way to play
video directly in the browser, with no plugins required. No <object> , <embed> elements required. <video> elements can be styled with CSS HTML5 can be tweaked and redisplayed onto <canvas> with Javascript.
32
Videos Usage of video element Fallback markup between the tags, for
<video src=turkish.ogv></video> Fallback markup between the tags, for older Web browsers that do not support native video <h1>Video and legacy browser fallback</h1> <video src=leverage-a-synergy.ogv> Download the <a href=leverage-a-synergy.ogv>How to leverage a synergy video</a> </video>
33
Videos Attributes supported autoplay
<video src=leverage-a-synergy.ogv autoplay> </video> It tells the browser to play the video or audio automatically. controls <video src=leverage-a-synergy.ogv controls> </video> Provides play/ pause toggle, a seek bar, and volume control.
34
Videos Attributes supported poster
<video src=leverage-a-synergy.ogv poster > </video> The poster attribute points to an image that the browser will use while the video is downloading, or until the user tells the video to play. height , width These attributes tell the browser the size in pixels of the video.
35
Videos Attributes supported loop It loops the media playback.
<video src=leverage-a-synergy.ogv loop > </video> It loops the media playback. preload (preload=auto) Indicates browser that it should begin downloading the entire file.
36
Videos Attributes supported preload = none
<video src=leverage-a-synergy.ogv preload=none > </video> This state suggests to the browser that it shouldn’t preload the resource until the user activates the controls. preload = metadata This state suggests to the browser that it should just prefetch metadata but that it shouldn’t download anything.
37
Videos Attributes supported Multiple <source> elements
<video controls> <source src=leverage-a-synergy.ogv type=’video/ogg; codecs=”theora, vorbis”’> <source src=leverage-a-synergy.mp4 type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2”’> <p>Your browser doesn’t support video. Please download the video in <a href=leverage-a- synergy.ogv>Ogg</a> or <a href=leverage-a- synergy.mp4>mp4</a> format.</p> </video>
38
Google Chrome Frame Google Chrome Frame is an open source plug-in
that brings HTML5 and other open web technologies to Internet Explorer It provides additional features and better performance. It help web developers deliver faster, richer applications. Start using using open web technologies - like the HTML5 canvas tag - right away even if they are not supported in IE 6 , 7 , 8.
39
Google Chrome Frame Google Chrome Frame is an open source plug-in
that brings HTML5 and other open web technologies to Internet Explorer It provides additional features and better performance. It help web developers deliver faster, richer applications. You can start using open web technologies - like the HTML5 canvas tag - right away even if they are not supported in IE 6 , 7 , 8.
40
Thank You Presented by : Avidnyat Chiddarwar PHP Developer Techjini Solutions Pvt Ltd. Id : Contact No :
Similar presentations
