In this blog, we will discover some of the great new features that HTML5 has to offer.
Let me start with, HTML5 is exciting and anyone who builds web pages is looking forward to implementing these new tags into their sites. HTML5 audio tags are definitely one of the ones on the list meant to make life much easier for both webmasters and end users. Another of the most exciting buzz these days in web circles is about HTML5 and specifically video on HTML5. HTML5 video tag has solved the age old problem site owners and designers face on how to best embed video on websites.
HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements, and how to recover from errors. Some of the new features in HTML5 are functions for embedding audio, video, graphics, client-side data storage, and interactive documents. HTML5 also contains new elements like <nav>, <header>, <footer>, and <figure>. The HTML5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and many hundreds of other vendors.
Note: HTML5 is not a W3C recommendation yet!
We will start our learning with the new semantic elements that aim to give meaning to the various parts of a modern Web page: headers, footers, navigation bars, side bars, and so forth.
Next, we will learn about the important new <canvas> element and the 2D drawing JavaScript APIs that you can use to create shapes, text, animations, transitions, and more. Following this, you will see how the new <audio> and <video> elements intend on replacing the Web's current dependency on Flash as a multimedia delivery platform.
Next, we will be introduced to the local storage APIs and offline applications support that will further bring Web applications in line with their desktop counterparts in terms of functionality, even when not connected to a network or the Internet. This section is wrapped up with a brief overview of the other new elements, attributes, and APIs that are proposed in the current HTML5 specification.
The HTML5 specification includes a series of new semantic elements that is used to give some meaning to the various sections or parts of a Web page, such as a header, footer, navigation, and so on. In previous versions of HTML, we would typically use <div> elements to create these parts, using ID or class attributes to differentiate them from each other. The problem with this is that this has no semantic meaning, as there are no strict rules defined that specify what class names or IDs are to be used, making it extremely difficult for software to determine what the particular area is doing. HTML5 should help alleviate these issues, making it easier for Web browsers to parse the semantic structure of a document.
It is worth pointing out that continuing to use <div> elements in HTML5 is perfectly valid, but in order to future-proof our work, it is recommended that we use semantic elements where relevant. On the other side of the coin, it is also suggested that we avoid using these new elements for purposes other than their intended. For example, the <nav> element should not be used for just any group of links; it is intended to surround the main navigation block on the page.
The main semantic elements that HTML5 introduces are:
<header>
This element is used to define a header for some part of a Web page, be it the entire page, an <article> element, or a <section> element.
<footer>
Like the <header> element, this new element defines a footer for some part of a page. A footer does not have to be included at the end of a page, article, or section, but it typically does.
<nav>
This is a container for the primary navigation links on a Web page. This element is not intended for use with all groups of links and should be used for major navigation blocks only. If we have a <footer> element that contains navigation links, we do not need to wrap these links in a <nav> element, since the <footer> element will suffice on its own.
<article>
The <article> element is used to define an independent item on the page that can be distributed on its own, such as a news item, blog post, or comment. Such items are typically syndicated using RSS feeds.
<section>
This element represents a section of a document or application, such as a chapter or a section of an article or tutorial. For example, the section we are reading now could be surrounded by a <section> element in HTML5. <section> elements typically have a header, although it is not strictly required. The header for the section we are reading now would contain the text "Semantic elements," for example.
<aside>
This new element can be used to mark up a sidebar or some other content that is considered somewhat separate to the content around it. An example of this might be advertising blocks.
<hgroup>
In some cases, a page, article, or section may require more than one heading, such as where we have a title and a subtitle. This tutorial, for example, has the title "Create modern Web sites using HTML5 and CSS3" and the subtitle "Implementing the canvas and video elements in HTML5." We could wrap these in an <hgroup> element, using an <h1> element for the main title and an
<h2> element for the subtitle.
The sample Web site at the end of this tutorial includes several of these new semantic elements, and I will explain their syntax and use in more detail at that point.
<canvas> element
The <canvas> element was originally developed by Apple® for use in Mac OS X Dashboard widgets and in Safari, but was later adopted by Mozilla® and Opera® in their Web browsers. The element has been standardized and included in the HTML5 specification, along with a series of 2D drawing APIs that can be used to create shapes, text, transitions, and animations inside the element.
Many believe that the <canvas> element is one of the most important aspects of HTML5 as it facilitates the production of graphs, interactive games, paint applications, and other graphics on the fly without requiring external plug-ins such as Adobe Flash.
The <canvas> element itself is quite basic, defining the width, height, and unique ID for the object. The developer must then use a series of JavaScript APIs to actually draw objects on the canvas, typically when the Web page has finished rendering. These APIs allow the developer to draw shapes and lines; apply color, opacity, and gradients, create text; transform canvas objects; and perform animation. The APIs also allow the <canvas> to be interactive and respond to user input such as mouse events and key events, facilitating the production of games and Web applications on the canvas. We will see an example of the <canvas> element in action in the sample HTML5/CSS3 Web site later in this tutorial.
Playing <audio> and <video>
In recent years, the popularity of video sharing sites such as YouTube and content delivery platforms like Hulu has seen a huge explosion in the use of the Web for multimedia streaming. Unfortunately, the Web was not built with such content in mind, and as a result, the provision of video and audio has by and large been facilitated by the Flash Video (.flv) file format and the Adobe Flash platform.
HTML5, however, includes support for two new elements, <audio> and <video>, which allow Web developers to include multimedia content without relying on the user to have additional browser plug-ins installed. Several browsers, including Mozilla Firefox, Apple Safari, and Google Chrome, have begun supporting these new elements and providing standard browser playback controls, should the user choose to use them. In addition, a set of standard JavaScript APIs has been provided to allow developers to create their own playback controls, should they wish to do so. A key advantage to native multimedia playback is that it theoretically requires less CPU resources, which can lead to energy savings. A key issue with these new multimedia elements, however, is the file formats supported by each browser and the patent licensing issues that go along with the various codecs that these files can be encoded with. Mozilla and Opera want to use the open source Theora video container and codec, which does not require patent licensing for the inclusion of the codecs in the Web browser. On the other hand, Apple and Google are not happy with the quality of Theora, particularly for the delivery of high definition (HD) content on the likes of YouTube. They prefer the H.264 codec, typically contained in MP4, MOV, or MKV files.
The issue is not just with video however, as the same problems reside with audio codecs. The MP3 and AAC formats are restricted by patents, whereas the Vorbis format is not. The problem with Vorbis audio is that it is not in widespread use, as portable media players and many media software applications do not support it.
There are many decisions to be made about HTML5 <video> and <audio> in the near future, and it will be interesting to see what codecs and formats are facilitated in the final recommendation. In the meantime, we can try to support all browsers by making video available in a variety of formats and by providing Flash video as a fallback. Let's hope that a final decision is made, and that it is not left to browser vendors to decide which formats to support, as that would essentially render these new elements useless.
Web developers have traditionally used cookies to store information on a visitor's local machine, allowing a Web page to read this information back at a later point. While cookies are very useful for storing basic data, they are limited by the fact that Web browsers are not required to keep more than 20 cookies per Web server or more than 4KB of data per cookie (including both name and value). In addition, they are sent to the Web server with every HTTP request, which is a waste of resources.
HTML5 provides a solution for these problems with the Local Storage APIs, which are covered in a separate specification to the main HTML5 document. This set of APIs allows developers to store information on the visitor's computer while remaining reasonably confident that they will still be there at a later date. In addition, the information is accessible at any point (even after the page has rendered) and is not loaded automatically with each HTTP request. The specification includes same-origin restrictions, which prevent Web sites from reading or changing data stored by other Web sites.
Most browsers store Web pages in local cache, allowing them to be viewed even if the user is offline. This works fine for static pages, but it is not available for dynamic content that is typically database-driven, such as Gmail, Facebook, or Twitter.
HTML5 provides support for offline applications, where the browser downloads all the files necessary to use the application offline, and when the user uses the application offline, the browser can allow any changes made in the process to be uploaded to the server when they reconnect to the Internet.
HTML5 includes so many new features; it's impossible to cover them all in this tutorial. This section provides a brief overview of some of the other enhancements in the specification.
Web worker
This allows JavaScript code to be set to run in a background process facilitating the development of multi-threaded applications. The chief benefit that Web workers offer developers is that intensive calculations can be processed in the background without adversely affecting the speed of the user interface.
Geolocation
HTML5 includes a geolocation API that allows a Web application to determine our current geographical location, assuming the device we are targeting provides features for finding such information (for example, GPS on a cellphone). If we do not have a device that supports this feature (such as an iPhone or an Android 2.0-based smartphone), we can use Firefox and download a plug-in that allows we to set our location manually.
Drag and Drop
Another interesting feature is the inclusion of a drag and drop API. Up until now, implementation of drag and drop without plug-ins was dependent on some very complex JavaScript or the use of a JavaScript library such as script.aculo.us.
Cross-document messaging
This allows documents in different windows (and iframes, for that matter) to send and receive messages to one another. This feature could prove very useful for the development of widgets and applications that are hosted on servers other than the primary Web page's server (similar to Facebook applications).
And more
Other new features introduced by HTML5 include MIME types and protocol handler registration, so Web applications can be registered as the default application for a particular file type or protocol; browser history management, which until now needed to be implemented manually or using an external JavaScript framework; and a host of other new elements and attributes that make Web developers' lives easier.
Let’s learn about the more enhancements in next blog. Till then please share your suggestion at ravindrapande@gmail.com
No comments:
Post a Comment