Author

Hi there!

I'm Anil Kumar M.S. A technology enthusiast living in Mysore, India. I'm Passionate about .Net, Web Apps, Cloud, Application design and Architecture, Ux, Javascript and Windows Phone.

A Microsoft Certified Technology Specialist and also a Professional Developer in .Net 4 Web. I like travelling, doing Adventure & Love food.

Let's be friends !



Webpage : www.msanil.com
×

Saturday, October 22, 2011

HTML 5 - Some more details and an Intro to Modernizer Framework - 1

Saturday, October 22, 2011
Recently, I watched a screencast on HTML 5 and got a chance to learn something interesting. This post is not about everything we have in HTML 5 but, will mention few important things I observed in that screencast.
Also, my primary intension is to introduce you to a small new JS framework called Modernizr.

Mostly, I am translating the screencast which I watched to plain text through this post along with my observations. Read further.

HTML 5 is mostly all about a mix of JavaScript API's and new elements (tags) that has been newly introduced when compared to the previous versions of HTML. You can use them now in your layouts, do automatic validations, embed media on the page, draw things on screen and do much more. There is a drastic change in semantics. But for a developer, the important enhancements are the new elements and attributes which he can use.

HTML 5 has cool things for developers more than the web page users. UI developers, over the years have developed many things in HTML and CSS which are accepted by end users and now HTML 5 doesn’t do much favor for them but allows them to structure the content with ease than it used to be once.
What we have now is more than sufficient to leverage the client side technologies and present the content in best way in-terms of usability.

An attempt has been made by World Wide Web Consortium to create few tags which in general can be used by developers for presenting the content on a webpage easily. Looks like the www consortium has made an analysis on web pages of thousands of websites to understand the common tags, attributes and sections developers write on web pages. Also, they have focused on the SEO part this time.

So, for the search engine crawlers, it is a bit easy task now to understand and see the things on your web page and index them in a way it becomes easy for it to retrieve it back later when required.

Here is a list of new tags that are in the "To implement" list of browser companies.

article
aside
audio
command
datalist
details
embed
figcaption
figure
footer
header
hgroup
keygen
mark
meter
nav
output
progress
rp
rt
ruby
section
source
summary
time
Video
wbr



Here is a list of javascript API'S

Canvas 2D Context
Contacts
File APIs
Forms
Geolocation
HTML Microdata
Indexed Database
Media Capture
Messaging
Offline Web Applications
Selection
Server-Sent Events
Web Notifications
Web Sockets
Web Storage
Web Workers
XMLHttpRequest Level 2


Start googling each one of the tag to find more about it. If you can wait for few days, i can explain all of them in detail in coming posts. OK. Let us come to the point.

One thing you should know!
"HTML 5 is not completely done yet and there is a plan to complete everything by year 2022! "

Hold on. This doesn't mean you cannot use it till 2022. You can !

But an important thing to note about HTML 5 is,
"Not all browsers support all features of HTML 5 at present".

So, the question is "how do you know which browser , of which version, supports which HTML 5 Tags ? "
Believe me, you dont have to remember any thing. There is a small js framework by name "Modernizr" just to do that.


What is modernizr?

The modernizr website says
Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.
  1. It tests for over 40 next-generation features, all in a matter of milliseconds
  2. It creates a JavaScript object (named Modernizr) that contains the results of these tests as boolean properties
  3. It adds classes to the html element that explain precisely what features are and are not natively supported
  4. It provides a script loader so you can pull in polyfills to backfill functionality in old browsers
So, In my next post, we shall see how we can use modernizer and using our visual studio, let us write some code to detect the HTML 5 features supported by various browsers.



Author : Anil Kumar M.S
A technology enthusiast living in Mysore, India.
You can connect with me on Twitter @MSGuyTweets or on Facebook.
Email me at ms.anil.kumar@gmail.com


Was this post useful?