Why, What and How to get started on HTML5

WHY HTML5

  • To enable developers to create apps and websites that requires, multimedia, filesystem, animation.
  • Make the browsers plugin free, and using the new native support for audio and video.
  • To have offline access to the Web using client-side storage and caching functionality.
  • It’s about rich Internet clients. Instead of building clients with plug-ins like Flash.
  • To enable developers to create apps having same experience as desktop applications.

WHAT is HTML5

HTML5 = Markup + JavaScript APIs + CSS

That is, we have markup to build the core structure of our pages, we have JavaScript along with all its APIs to add behavior and new functionality, and we have CSS to style our pages—and together.  So HTML5 is not only about markup, it is a technology in itself that will push the web forward.

HTML5 is the ubiquitous platform for the web. Whether you’re a mobile web developer, an enterprise with specific business needs, or a serious game developer looking to explore the web as a new platform, HTML5 has something for you.

HTML5 Features:-

  • Native Audio/Video
  • Forms
  • Offline Web and Storage
  • Presentation
  • 3D/Graphics
  • Local File Access
  • RealTime Communication and Server Push:-

 

How to start working on HTML5

  • Native Audio and Video:-

Instead of relying on a third-party plugin, audio and video can be built using web technologies now. HTML5 has improved embedding of audio and video by providing native support for many different filetypes.
How to build audio video into your web-app

  • Forms:-

In HTML5, new functionality for forms was introduced, including validation and new form fields. This makes it much simpler to build complicated forms because you don’t need to rely on custom Javascript functionality.
How to build features using forms in HTML5.

  • Offline Web and Storage:-

HTML5 and related specs introduce a number of features to make offline web apps a reality such as:-
Application cache, localStorage, sessionStorage, IndexedDB, File System and online and offline events enable apps to  smoothly work  with or without online connection.

HTML 5 provides a smarter solution for improving offline caching. 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.

Offline web apps enable users to continue interacting with web applications and documents even when their network connection is unavailable. The user can, for example, access email locally without to connect to internet or install an external client.

Practicle example on offline caching
Gmail client that works offline on Chrome is another enterprise level example.
For more on offline
For more on storage
How to make your application work offline:-

  • Presentation:-

With the introduction of CSS3 it has never been easier to create rich and beautiful sites and applications in HTML. There are many new technologies and extensions to CSS3 including: 2D Transformations, Transitions, 3D Transforms and WebFonts to name just a few
For more on presentations.

  • 3D/Graphics:-

With the addition of technologies like canvas element, WebGL, SVG, 3D CSS transforms one can produce animations and visual effects and they dont have to rely it on plugins like Flash. Many mobile and desktop browser games are also coming with the help of canvas element.
More on graphics
Build your first game on Canvas

  • Local File Access:-

With the file system api we can have direct interaction between the web and local files and one can create apps for photo video editing, music mixers, media visualization tools that directly assess your music files, images videos.
HTML5 finally provides a standard way to interact with local files, via the File API specification.
File System API
More on local file access

  • RealTime Communication and Server Push:-

Websockets:- They provide full-duplex channels. Connections can both send data to the browser and receive data from the browser. A good example of an application that could use websockets is a chat application.

SSE connections can only push data to the browser. Online stock quotes, or twitters updating timeline or feed are good examples of an application that could benefit from SSE.
More on SSE
More on WebSockets

Predictions on HTML5 :- 

HTML5

  • Web browsers will look more like iPhones
  • More and more applications will just be built in HTML5
  • Browser manufacturers will get into the App Store business
  • Many more applications will use offline cache
  • HTML5 ads will become prevalent and overtake Flash.
  • JavaScript will get a lot faster with better memory management
  • Canvas will get hardware acceleration in more browsers
  • People will play popular HTML5 games on their mobile devices

 

Written By:-
Gaurav Gupta
Mobile Developer at

3 thoughts on “Why, What and How to get started on HTML5

  1. Very nice!

    One thing I would like to add, CSS3 contributes a lot to HTML5 through its good dynamic features like selectors, extra pseudo-classes, transforms etc. As JS APIs provides good feature support to HTML5 same is done by CSS3 also.

    Keep posting good stuff like this!

  2. Thanks a lot Sumit. People tend to ignore the importance of CSS3 in HTML5. I am looking forward for a blog post on the same from you.

Leave a Reply

Your email address will not be published. Required fields are marked *


− two = 0

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>