html5
DESCRIPTION
I presented this as a seminar in the partial fulfillment of my B.Tech. degree program at College of Technology, G B Pant University of Agriculture & Technology, Pantnagar, India.TRANSCRIPT
TCT – 492: Seminar
<HTML>by:Tanay Mathpal Final YearComputer [email protected]://tanamania.wordpress.comhttp://twitter.com/tanamania
What is
…the next major revision of HTML (Hypertext Markup Language), the core markup language of the World Wide Web.
HTML 5 is…
So What???
What the whole fuss is about???
Why
W3C vs WHATWG
The World Wide Web Consortium is the main international standards organization for the World Wide Web.
W3C
Web Hypertext Application Technology Working Group is a growing community of people interested in evolving the Web. It focuses primarily on the development of HTML and APIs needed for Web applications.
WHATWG
The WHATWG was founded by individuals of Apple, the Mozilla Foundation, and Opera Software in 2004, after a W3C workshop.
It was formed in response to the slow development of web standards monitored by the W3C, and its decision to abandon HTML in favour of XML-based technologies.
WHATWG
?
WHATWG
Web Hypertext Application Technology Working Group
The WHATWG pioneered the development of Web Applications 1.0 which was later renamed HTML5.
On 10 April 2007, the Mozilla Foundation, Apple and Opera Software proposed that the new HTML working group of the W3C adopt the WHATWG’s HTML5 as the starting point of its work.
• On 9 May 2007, the new HTML working group of the W3C resolved to do that.
HTML5
HTML5 is the proposed next standard for HTML 4.01, XHTML 1.0 and DOM Level 2 HTML.
HTML5 is a revolution in Web application development, making plug-in-based RIA (Rich Internet Application) technologies as Adobe Flash, Microsoft Silverlight, and Sun JavaFX obsolete.
HTML5
Key Features:
Semantic Web Form Controls Embedded Content and Multimedia
HTML5
Semantic Web
HTML 5 has replaced generic block (<div>) and inline (<span>) elements with new tags which make web application designing a whole new; semantic experience.
Some of these tags will be discussed by me in the following slides.
Semantic Web
Semantic Web <article> tag
It is intended for semantically specifying the content section of the web page.
Prior to HTML 5, we had to use <div class=“article”> or <div class=“content”>
Semantic Web <header> and <footer> tags
These semantic tags can be used for placing headers and footers on the web page.
Prior to HTML 5, we had to use <div id=“header”> and <div id=“footer”>
Semantic Web <dialog> tag
This tag is specifically used for dialog contents. For instance, it can be used to include a dialog conversation between two people.
Semantic Web <aside> tag
Using the <aside> tag, content other than the primary content stream is specified. This can be a flyover or a sidebar.
Semantic Web <section> tag
This tag is for the semantic representation of section of the content. For instance, an <article> can contain a <header> and can be divided into several <section>s.
Semantic Web <meter> tag
It can be used in places where users are required to rate the web content or web application performance.
Usage of <meter> tag is shown in the following slide.
Semantic Web <meter> tag
• <meter>60%</meter>• <meter>3/5</meter>• <meter>6 blocks used (out of 10 total)</meter>
• <meter value="0.6">Medium</meter>
Semantic Web <progress> tag
This tag is useful in cases where the progress of a loading AJAX application, web form, et cetera needs to be shown.
Semantic Web <progress> tag
• <progress>Step 3 of 6</progress>• <progress>50% Complete</progress>• <progress value="0.5"> Half way!</progress>
Semantic Web <m> tag
The <m> stands for marked or highlighted text. This tag is used to indicate point of relevance in a page.eg: error notifications or search results within a page
Semantic Web <m> tag
<p>The highlighted part below is where the error lies:</p><pre><code>var i: Integer;begin i := <m>1.1</m>;end.</code></pre>
Form Controls
Form Controls
Forms controls in HTML 4 are too limited and difficult to implement. The developers at W3C and WHATWG identified these limitations and introduced several new features in HTML 5.
Form Controls
HTML 5 has superseded Web Forms 2.0, the other document of WHATWG. All features of Web Forms 2.0 have now been included in the HTML 5 document.
Form Controls Dates and Time
• <input type="datetime">• <input type="date">• <input type="time">
Form Controls Numbers
• <input type="number">• <input type="range">
Form Controls Email and URLs
• <input type=“email">• <input type=“url">
[email protected] http://tanamania.wordpress.comhttp://tanamania.wordpress.com/ Tanay’s Blog
http://twitter.com/tanamania/
Form Controls Combo Boxes
• <input list="title-list"><datalist id="title-list"> <option value="..."></datalist>
Form Controls Form Validation
• New attributes like required, pattern, min, max, etc. have been introduced to describe validity constraints for the expected input.
• New DOM APIs allow scripts to detect and deal with user input errors more easily.
Embedded Content and Multimedia
Embedded Content & Multimedia
Rich Internet Application (RIA) Tools:
With HTML 5, say goodbye to these tools! Let’s see how...
Embedded Content & Multimedia
Canvas
HTML 5 has introduced the <canvas> tag for adding dynamic and interactive graphics to our web page.
It is proving to be extremely useful for graphs, applications, games and puzzles and many more.
Embedded Content & Multimedia
Canvas
A practical example of the use of <canvas> is the Mozilla lab project – Bespin which is an Extensible Web Code Editor built using canvas.
The following image shows another small example of canvas.
Embedded Content & Multimedia
Canvas
Embedded Content & Multimedia
Geolocation
This HTML 5 API defines location information of the device hosting the API.
Sources of location information include Global Positioning System (GPS) and network elements such as IP address, RFID, WiFi and Bluetooth MAC addresses and GSM/CDMA cell IDs.
Embedded Content & Multimedia
Geolocation
Embedded Content & Multimedia
Application Caches
This HTML 5 feature enables the user to store web applications locally and access them without any external client.
Google Gears, which enables the users to access Gmail offline, is an implementation of this specification of HTML 5.
Embedded Content & Multimedia
<audio> and <video> tags
These are the most amazing feature of HTML 5.
At present Flash has become the de facto standard for adding video content to web sites.
This requires additional plug-ins to be installed on the browser.
Embedded Content & Multimedia
<audio> and <video> tags
With HTML 5, audios and videos can be embedded with the use of <audio> and <video> tags.
This is done by specifying a standard multimedia codec for all web browsers.
Embedded Content & Multimedia
<audio> and <video> tags
• <video src=“movie.ogg” id=“video”>...</video>
• <button onclick=“video.play();”> Play</button>
• <audio src=“audio.ogg” id=“audio”>...</audio>
• <button onclick=“audio.play();”> Play</button>
Embedded Content & Multimedia
<audio> and <video> tags
This is what the whole fuss is about!!!
HTML5 Concluding Notes
HTML5 is designed so that old browsers can safely ignore new HTML5 constructs.
It is estimated by Ian Hickson, the WHATWG editor, that HTML5 will reach the W3C Candidate Recommendation stage during 2012.
HTML5 Concluding Notes
It is estimated, again by Hickson, that HTML 5 will reach a W3C recommendation in the year 2022 or later.
This doesn’t mean that you and I can’t use these amazing features today.
HTML5 Concluding Notes
Currently the features are not supported by every browser. Most features work well with Firefox 3.5 or higher.
Safari 4, Opera 9 and Chrome also support many of the features.
HTML5 Further Reading
http://www.whatwg.org/
http://www.w3.org/html/wg/html5/
http://dev.w3.org/html5/html4-differences/
Mail to:
Join the mailing list:
http://whatwg.org/mailing-list/
HTML5
Images Courtesy
http://www.webmastersbydesign.com/2008/06/17/what-can-we-expect-from-html-5/
http://www.pinceladasdaweb.com.br/blog/uploads/html5.jpg
Referenceshttp://www.geektechnica.com/2009/06/5-amazing-html5-features-to-look-forward-to/
http://lachy.id.au/slides/developing-with-html5/
HTML 5 by Tanay Mathpal is licensed under a Creative Commons Attribution-Share Alike 2.5 India License
HTML5 Licensing
<thank you>
HTML5