Html5 and Semantic Web – Give wings to your markup

Hardik DangarLeave a comment

Few years back i have read about Semantic web in yahoo’s developer sites. it was amazing experience, at that time when world was moving from tables to div based markup or html4 to XHTML based markup. they told that web needs to be more semantic. by means of semantic is you can use some predefine standards to display data in the web. and search engines can use this predefine standards to explore the data and can learn more about the data in the web.

Using these standards search engines can evaluate sites on the web effectively and give very good results of user’s search. like if some user is searching for university in his area. then search engine can pull out university’s with reviews. and can actually have ability to sort the results on the basis of reviews from different different websites. now the real part is, how its possible to get reviews from different different websites? because developers have ability to use anything they want in review section page. how search engines going to know weather the tag or markup, developer has used is for name of the university or is it rating or review description? because some developers might use > div < tag whereas some will simply use > span < or some will use
> div < tag. yahoo at that time give answers to these questions as Resource Description Framework(RDF). RDF is developed by w3c to make web more semantic. you can read more about RDF at RDF

So what is RDF?
RDF is more like data about data. it can give meaning to your data. to know more about RDF you can refer RDF tutorial.

Now back to html5, What’s the relationship between html5 and RDF? well html5 uses Microdata as the format for giving meaning to tags. that’s what RDF does. but Microdata uses similar concepts but in more profound ways. Microdata can be embedded in the page itself unlike RDF. RDF was actually created for XHTML( although there is ongoing draft available at w3c to port RDF in html5). but let’s talk about Microdata. what are they ? how they are gonna provide meaning to your tags ? and how you can use it in your pages. or enter into the world of html5 semantic web.

Microdata is the data about the tags you write in your web pages. it gives meaning to html5 tags. it gives meaning to tags using vocabulary’s. you need to tell which vocabulary to use to understand the meaning of Microdata. one such example is Organization vocabulary. if you open the link you can see organization vocabulary, now this vocabulary defines what is the scope of Microdata you have provided in your code and what is the meaning of items you have specified in your code. example…

< section itemscope itemtype="http://data-vocabulary.org/Organization" >
 <h1 itemprop="name">Acme Inc
 <a itemprop="url">http://www.acmeinc.com</a>
 <span itemprop="tel">+1 4654 7894</span>
</ section >

now this code can be evaluated by search engines or any other robots and they can know what type of data exists in the page and can get meaning of data from the tags. like here we have defined that section tag describes organization vocabulary by writing Microdata

< section itemscope itemtype="http://data-vocabulary.org/Organization" >

now whenever we give definition to our tag using itemprop attribute of Microdata it will search meaning of that tag into http://data-vocabulary.org/Organization vocabulary. i.e

<h1 itemprop="name">Acme Inc

this code will search into http://data-vocabulary.org/Organization vocabulary for the meaning of “name”. now if you look at the vocabulary page it defines “The name of the business” that means organization name. so now search engines or any other robots can know that what is the organization name. the same way other two property’s define URL of the organization and telephone no of the organization.

this is the way you can use microdata’s. and html5 specs says you can create your custom vocabulary’s and publish into your own url’s. it works just like namespace concept of java or .net or many popular languages feature.

now back to our classic example of some one searching for university. how search engine can show him reviews of university fetched from different websites. well if web pages which has review uses html5 and Microdata in same fashion then search engines can know how to fetch data from those web page and how to use the data.

let’s for example our site abc.com have university review like this.



 < article itemscope itemtype="http://www.data-vocabulary.org/Review/">
 <h1 itemprop="itemreviewed">Acme University</h1>
 <span><span itemprop="rating">3</span>out of 5</span>
 <p itemprop="summary">Acme University Review</p>
 <p itemprop="description"> Acme University is located at the alpus. campus is quite good. one thing i am concerned about the quality of education there. after i studied there for one year i believe they need to improve the quality of education.
 </p>
</article>

which is both semantic and html5 correct review. but the old websites can also use this. say for ex some website already have structure then they can use Microdata to give the meaning to tags i.e.



< div itemscope itemtype="http://www.data-vocabulary.org/Review/" >
 < h5 itemprop="itemreviewed">Acme University
 < span itemprop="rating">3</span>
 < div itemprop="summary">Acme University Review</div>
 < p itemprop="description">
 Acme University is located at the alpus. campus is quite good. one thing
 i am concerned about the quality of education there. after i studied there
 for one year i believe they need to improve the quality of education.
 < /p >    
< /div >

here markup is semantically incorrect but Microdata will still be available for the review. so this way any website can integrate html5 Microdata and can give wings to there markup. and search engines like Google, yahoo and Bing can understand the pages much better way and use this information to create Semantic web.

i hope this one helps you to understand some of the concepts of html5. questions or any queries ? drop comment or send me at twitter.com/hardikdangar

Html5 and Semantic Web – Give wings to your markup

javascript common pitfalls… and some jquery magic

Hardik DangarLeave a comment

when i started web development, i kinda dislike the JavaScript, because as i know JavaScript better and better i wish things were more simple like other languages and debugging was a pain.

but then a hero came jQuery. what was great about jQuery was it was as easy as you speak the dom itself and select what you want. it’s like what SQL has done to databases. jQuery has done to JavaScript. things became so easy that tons of lines of code now was 10-20 lines and you can do little magics with jQuery animations and many things.

google chrome came and safari also revamped. both used cool JavaScript engines which can do great things. and suddenly jQuery buzz came out and people started using all JavaScript which can do so many cool things.

but i still remember those old plain JavaScript days and i still remember the common pitfalls which mostly covered by jQuery. but even today some of them are useful

  • submit java script form from anchor or link
    • you might be wondering whats the issue with it ? well issue is quite simple. when you write something like this to submit form from anchor tag.
    • document.formname.submit();
    • this should work. but there is a problem with submit method. there must not be any input named submit in form. and as we know developers they will always name submit button submit name. so actually it never works. and once you start debugging this problem. you will surely pull out your hair to know the reason. all great JavaScript debuggers will only tell you. “there is no method named submit()”. and you will be left on your own to solve the problem. so next time make sure there is no input named JavaScript method when you get the same kind of error.
    • now if you are jQuery lover and you are saying $(formname).submit() will work well it doesn’t work. worst thing is, it doesn’t even throws error. you are speechless and clueless when you discover this.
  • send image path or CSS path to your JavaScript file using JavaScript variables.
    • many of you might have face the situation where your server path is quite different and you can’t put it relative. and may be JavaScript library or editor you use needs the path of image or CSS and it wants in JavaScript file. your project is in very complex structure like ci or symphony or ruby and you want to give that path. solution is quite simple just define path before the JavaScript include file in a variable and you can access it in your JavaScript file.
    • i.e var path = ;
    • <script include=’test.js’> </script>
    • now in test.js you can get access to path variable.
  • JavaScript variable and castings
    • when you are dealing with JavaScript functions you must have to deal carefully like…
    • var test = somevar;
    • alert(test.toUpperCase());
    • here error will come 🙂
    • error is you need to convert somevar variable to string. why because JavaScript needs a string value as a return type.
  • another common pitfall is using JavaScript for json array’s i get this time to time. in JavaScript
    • setAttr("size", 20.20);
setAttr({size: 20.20, product_name: "Jason"});

both are same but problem starts when you mix JavaScript types.
as soon as you start mixing types and objects in array's it
starts giving different results and errors. and best way to fix
is when you are dealing in with lots of variables in json arrays
make sure you know what type are they.
  • jquery can help you on little things which was previously very difficult.
  • one thing surely easy is ajax using jQuery. all you have to write is what you want.
  • like jquery.post(url);
  • this simple line of code save some 40-50 line of JavaScript code that dev’s used to write.
  • another great thing is you can select the dom tree easily. there are lots of great ways you can select dom tree and you can go anywhere from anywhere. like from ordered list you can go to parent div and then select same level div or other tags. and do the processing there. previously using JavaScript it was quite a pain. the real thing is jQuery is crossbrowser so we don;t have to worry about selecting dom previously JavaScript was quite a difficult to write for all the browsers.

i wish i could write all jQuery features but it’s already there on the web you can easily find them using google.

javascript common pitfalls… and some jquery magic