Html5 Tutorial - Future Technology

Thursday 3 October 2013

HTML5 Tutorial - Advantages of HTML5

Top 10 Advantages of HTML5

Basically HTML5 has it’s many new syntactical features, which include the video, audio, and canvas elements, as well as the integration of SVG content. Due to these new elements, it will be very easy to integrate multimedia and graphical content to web without using flash and third party plugins. There are also another new elements like section, article, header and nav which enrich the semantic value of the document. Other major advantages of HTML5 are described below. -

  • 1. Mutuality
    Due to usability purpose the web sites made by developers are highly interactive nowadays and for this developers need to include fluid animations, stream video, play music and Social Network sites like Facebook and Twitter into the websites. Till now they have only the option to integrate it with the help of Flash or Silverlight, Flex or javascript like tools. But these consume so much time to develop and even the complexity of web application also increased. But now with the help of HTML5 it is possible to embed video and audio, high quality drawings, charts and animation and many other rich content without using any plugins and third party programmas as the functionality is built into the browser.

  • 2. Cleaner markup / Improved Code
    HTML 5 will enable web designers to use cleaner, neater code, we can remove most div tags and replace them with semantic HTML 5 elements.

  • 3. Improved Semantics
    Now it is easy to see which parts of the page are headers, nav, footers, aside, etc as the tags are specific for these all and most importantly know what their meaning and purpose is in whole the format. By using HTML5 elements we can increase the semantic value of the web page as the codes are very standardized.

  • 4. Elegant forms
    HTML5 enables designer to use more fancier forms. Even it makes form validation native to HTML, User interface enhancements and reduced need for JavaScript (only needed in browsers that don’t support form types). There will be different type of text inputs, search and different fields for different purpose.

  • 5. Consistency
    As websites adopt the new HTML5 elements we will see more greater consistency in terms of the HTML used to code a web page on one site compared to another. This will make it more easier for designers and developers to immediately understand how a web page is structured.

  • 6. Improved Accessibility
    Different technologies can elaborate on the features with the help of HTML5, as they can Immediately make more detailed understanding of the structure of a page by take a look at HTML5 elements it has.

  • 7. Fulfill the need of Web application
    Many new features and standards have emerged as part of HTML 5. Once you detect the available features in today’s browsers, you can take advantage of those features in your application. Main focus of HTML5 is to make easier application with easy front-ends, drag and drop tools, discussion boards, wikis and other useful elements.

  • 8. Offline Application cache
    All browsers have some kind of caching m After a sometime, you open up your laptop and click the Back button in the browser hoping to see the previous page that was opened. However, as you are not connected to the internet and the browser didn’t cache the page properly, you are unable to view that page. You then click the Forward button thinking that at least that page will load, but it doesn’t. You need to reconnect to the internet to be able to view the pages. HTML 5, thankfully, provides a smarter solution. While building the site, the developer can specify the files that the browser should cache. So, even if you refresh the page when you are offline, the page will still load correctly. This sort of caching has several advantages like offline browsing, files load much faster and reduced load on server

  • 9. Client-side database
    While cookies have been used to track unique user data for years, they have serious disadvantages. The largest flaw is that all of your cookie data is added to every HTTP request header. This can end up having a measurable impact on response time. So a best practice is to reduce cookie size. With HTML5 we can do better by using sessionStorage and localStorage(two different storage in HTML5) in place of cookies. It is not a permanent database, but enables you to store structured data, temporarily.

  • 10. Geolocation support
    With help of Geolocation any one can find out where you are in the world and sharing that information with people. There is different ways to figure out where you are — your IP address, your wireless network connection, which cell tower your phone is talking to, or dedicated GPS hardware that calculates latitude and longitude from information sent by satellites in the sky. But The new HTML5 geolocation APIs make location, whether generated via GPS or other methods, directly available to any HTML5-compatible browser-based application. This is only the overview of the HTML5 advantages, actually there is lots more to know about HTML5. In the near future HTML5 will become a online development language. It is assumed that it will not completely finished before 2022.So just keep it in your mind and start using HTML5 in your designs right now!

Monday 30 September 2013

HTML5 Tutorial - Difference between HTML4 & HTML5

Differences between HTML4 & HTML5

It’s going to be a while before HTML5 is the new standard and everything HTML5 has to offer is supported by all the important browsers. If you’re a web dev, what should you do? If you’re new to the game or you’re an old pro, you eventually have to ask yourself when and how to begin transitioning over. Perhaps the first thing that you should learn and keep in mind is exactly what the differences between the two are. It’s going to be a while before HTML5 is the new standard and everything HTML5 has to offer is supported by all the important browsers. If you’re a web dev, what should you do? If you’re new to the game or you’re an old pro, you eventually have to ask yourself when and how to begin transitioning over. Perhaps the first thing that you should learn and keep in mind is exactly what the differences between the two are.

Here are ten important differences between HTML4 and HTML5


  • 1. HTML5 Is a Work in Progress
    As cool as it is to see what HTML5 can do for you, it hasn’t been standardized like HTML4. You don’t have to worry about updating pages built using HTML4. It’s more than ten years old and it’s a set standard. If you jump into HTML5 with both feet, you’re going to be making updates. Elements and attributes are added and modified several times a year. Of course, this is dependent how much you depend on rich elements, but it’s certainly a risk you must take into consideration when using a fluid language. Build with HTML4, play with HTML5.

  • 2. Simplified Syntax
    The simpler doctype declaration is just one of the many novelties in HTML5. Now you need to write only: and this is it. The syntax of HTML5 is compatible with HTML4 and XHTML1, but not with SGML.

  • 3. The New canvas Element
    This is what killed Flash. Although it isn’t as … uh … flashy … most assume that it will eventually make Flash obsolete. Only time will tell.

  • 4. The header and footer Elements
    For good or bad, HTML5 has acknowledged the new web anatomy. With HTML5, header and footer are specifically marked for such. Because of this, it is unnecessary to identify these two elements with a div tag.

  • 6. New menu and figure Elements
    menu can be used for your main menu, but it can also be used for toolbars and context menus. The figure element is another way to arrange text and images.

  • 7. New audio and video Elements
    Embedind audio and video has never been easier. There are also some new multimedia elements and attributes, such as , that provides text tracks for the video element. With these additions HTML5 is definitely getting more and more Web 2.0-friendly. The problem is that by the time HTML5 becomes widely accepted, Web 2.0 might be old news.

  • 8. New Forms
    The new
    and elements are looking good. If you do much with forms, you may want to take a look at what these have to offer.

  • 9. Kiss b and font Goodbye!
    CSS, all the time. All the time, CSS.

  • 10. No More frame, center, big
    I bet you’re going to miss these.

HTML5 Tutorial - Client-Side Storage

Introduction This is an overview of client-side storage, a general term for several separate but related APIs: Web Storage, Web SQL Database, Indexed Database, and File Access. Each of these techniques provides a distinct way to store data on the user's hard drive, instead of the server, where data usually resides. There are two main reasons to do this: (a) to make the web app available offline; (b) to improve performance. For a detailed explanation of the use cases for client-side storage, see the HTML5Rocks article, "Offline": What does it mean and why should I care?. The APIs share a similar scope and similar principles. So let's first understand what they have in common before launching to the specifics of each. Common Features Storage on the Client Device In practice, "client-side storage" means data is passed to the browser's storage API, which saves it on the local device in the same area as it stores other user-specific information, e.g. preferences and cache. Beyond saving data, the APIs let you retrieve data, and in some cases, perform searches and batch manipulations. Sandboxed All four storage APIs tie data to a single "origin". e.g. if http://abc.example.com saves some data, then the browser will only permit http://abc.example.com to access that data in the future. When it comes to "origins", the domain must be exactly the same, so http://example.com and http://def.example.com are both disqualified. The port must match too, so http://abc.example.com:123 also cannot see http://abc.example.com (which defaults to port 80), and so must the protocol (http versus https, etc.). Quotas You can imagine the chaos if any website was allowed to populate unsuspecting hard drives with gigabytes of data! Thus, browsers impose limits on storage capacity. When your app attempts to exceed that limit, the browser will typically show a dialog to let the user confirm the increase. You might expect the browser to enforce a single limit for all storage an origin can use, but the major browsers are actually enforcing limits separately for each storage mechanism. This may change in the future, but for now, you should think of the browser as maintaining a 2-D matrix, with "origin" in one dimension and "storage" in the other. For example, "http://abc.example.com" is allowed to store up to 5MB of Web Storage, 25MB of Web SQL Database Storage, and forbidden to use Indexed Database. Another welcome enhancement in this area would be user interfaces to let users view and control how much space they have allocated for each origin. There are also environments where the user can see upfront how much storage will be used, e.g. in the case of the Chrome Web Store, when a user installs an app, they will be prompted upfront to accept its permissions, which include storage limits. One possible value is "unlimited_storage". Transactions The two "database" storage formats support transactions. The aim is the same reason regular relational databases use transactions: To ensure the integrity of the database. Transactions prevent "race conditions", a phenomenon where two sequences of operations are applied to the database at the same time, leading to results that are both unpredictable and a database whose state is of dubious accuracy. Synchronous and Asynchronous Modes Most of the storage formats all support synchronous and asynchronous modes. Synchronous mode is blocking, meaning that the storage operation will be executed to completion before the next line of Javascript is executed. Asynchronous mode will cause the next line of Javascript to be executed immediately, with a new thread implicitly created to perform the storage operation. The application will be notified when the operation is finished by way of a callback function being called, a function which must be specified when the call is made. Synchronous mode is okay for low-impact situations, e.g. maintaining a set of preferences; it's a much simpler programming model, and such operations only take a few milliseconds. But in many production situations, data crunching will block the main thread, which includes the user interface. The display won't update during that time, and the user won't know if their mouse and keyboard actions have been received. So with larger data and complex operations, you should really choose asynchronous mode to keep your app running smoothly. Or alternatively, you can run synchronous operations in a spearate thread using Web Workers. Indeed, aside from Web Storage, you're forced to do it this way; all the other APIs only make their synchronous versions available from inside a Web Worker.