Today we will be using the HTML5 geolocation API to present the user with a personalized weather forecast. Using jQuery, we will issue AJAX request to two of Yahoo’s popular APIs to obtain additional geographical information and a weather forecast. This example also makes use of the wonderful climacons icon set.
Obtaining an Application Key
Yahoo provides a large collection of useful APIs that are free for developers to use. The requirement is that you register your application with through their developer dashboard. The registration is simple and straightforward, and as a result you obtain an application id (look for it under the title of your application). You are going to need this later in the tutorial, but first let’s see how everything would work together.
The Idea
Here is what we need to do in order to display our weather forecast:
- First we’ll use the Geolocation API supported by modern browsers. The API will prompt the user to authorize location access and will return a set of GPS coordinates;
- Next, we will issue a request to Yahoo’s PlaceFinder API, passing the above coordinates. This will give us the name of the city and country, and a woeid – a special ID used to identify the city in weather forecasts;
- Finally, we will issue a request to Yahoo’s Weather API with that woeid. This will give us current weather conditions, as well as a forecast for the rest of the current and the next day.
Great! We are now ready for the HTML.
Weather Forecast Web App
The HTML
We will start with a blank HTML5 document, and we will add a reference to our stylesheet to the head section, along with two fonts from Google’s Webfonts library. In the body we will add a h1 header and markup for the weather forecast slider.
index.html
Weather Forecast with jQuery & Yahoo APIs
else
showError("Your browser does not support Geolocation!");
function locationSuccess(position)
var lat = position.coords.latitude;
var lon = position.coords.longitude;
// We will make further requests to Yahoo's APIs here
function locationError(error)
switch(error.code)
case error.TIMEOUT:
showError("A timeout occured! Please try again!");
break;
case error.POSITION_UNAVAILABLE:
showError('We can't detect your location. Sorry!');
break;
case error.PERMISSION_DENIED:
showError('Please allow geolocation access for this to work.');
break;
case error.UNKNOWN_ERROR:
showError('An unknown error occured!');
break;
}
function showError(msg)
weatherDiv.addClass('error').html(msg);
</pre>
<p>The <strong>locationSuccess</strong> function is where we will be issuing requests to Yahoo’s APIs in a moment. The <strong>locationError</strong> function is passed an error object with the specific reason for the error condition. We will use a <strong>showError</strong> helper function to display the error messages on the screen.</p>
<p>The full version of <em>locationSuccess</em> follows:</p>
<pre class="brush:js">function locationSuccess(position)
var lat = position.coords.latitude;
var lon = position.coords.longitude;
// Yahoo's PlaceFinder API http://developer.yahoo.com/geo/placefinder/
// We are passing the R gflag for reverse geocoding (coordinates to place name)
var geoAPI = 'http://where.yahooapis.com/geocode?location='+lat+','+lon+'&flags=J&gflags=R&appid='+APPID;
// Forming the query for Yahoo's weather forecasting API with YQL
// http://developer.yahoo.com/weather/
var wsql = 'select * from weather.forecast where woeid=WID and u="'+DEG+'"',
weatherYQL = 'http://query.yahooapis.com/v1/public/yql?q='+encodeURIComponent(wsql)+'&format=json&callback=?',
code, city, results, woeid;
// Issue a cross-domain AJAX request (CORS) to the GEO service.
// Not supported in Opera and IE.
$.getJSON(geoAPI, function(r)
if(r.ResultSet.Found == 1)
results = r.ResultSet.Results;
city = results[0].city;
code = results[0].statecode
// Add the location to the page
location.html(city+', <b>'+code+'</b>');
weatherDiv.addClass('loaded');
// Set the slider to the first slide
showSlide(0);
}
else
showError("Error retrieving weather data!");
});
}
}).error(function()
showError("Your browser does not support CORS requests!");
);
}</pre>
<p>The PlaceFinder API returns its results as plain JSON. But as it is on a different domain, only browsers that support CORS (cross origin resource sharing) will be able to retrieve it. Most major browsers that support geolocation also support CORS, with the exception of IE9 and Opera, which means that this example won’t work there.</p>
<p>Another thing to consider is that the weather API returns only two days of forecasts, which somewhat limits the utility of our web app, but unfortunately there is no way around it.</p>
<blockquote class="note"><p>We are only using the Weather API for temperature data, but it provides additional information that you might find useful. You can play with the API and browse the responses in the <a href="http://developer.yahoo.com/yql/console/?q=show%20tables&env=store://datatables.org/alltableswithkeys#h=select%20*%20from%20weather.forecast%20where%20woeid%3D2502265" target="_blank">YQL console</a>.</p>
</blockquote>
<p>After we retrieve the weather data, we call the <strong>addWeather</strong> function, which creates a new LI item in the <em>#scroller</em> unordered list.</p>
<pre class="brush:js">function addWeather(code, day, condition)
var markup = '<li>'+
'<img src="assets/img/icons/'+ weatherIconMap[code] +'.png" />'+
' <p class="day">'+ day +'</p> <p class="cond">'+ condition +
'</p></li>';
scroller.append(markup);
</pre>
<p>Now we need to listen for clicks on the previous / next arrows, so we can offset the slider to reveal the correct day of the forecast.</p>
<pre class="brush:js"> /* Handling the previous / next arrows */
var currentSlide = 0;
weatherDiv.find('a.previous').click(function(e)
e.preventDefault();
showSlide(currentSlide-1);
);
weatherDiv.find('a.next').click(function(e)
e.preventDefault();
showSlide(currentSlide+1);
);
function showSlide(i)
var items = scroller.find('li');
// Exit if the requested item does not exist,
// or the scroller is currently being animated
if (i >= items.length
// The first/last classes hide the left/right arrow with CSS
weatherDiv.removeClass('first last');
if(i == 0)
weatherDiv.addClass('first');
else if (i == items.length-1)
weatherDiv.addClass('last');
scroller.animate(left:(-i*100)+'%', function()
currentSlide = i;
);
}</pre>
<p><strong>With this our simple weather web app is complete!</strong> You can see everything together in <em>/assets/js/script.js</em>. We won’t be discussing the styling here, but you can read through <em>/assets/css/styles.css</em> yourself.</p>
<h3>Done!</h3>
<p>In this example you learned how to use the HTML5 geolocation with Yahoo’s Weather and Places APIs to present a location-aware weather forecast. It works on most modern web browsers and mobile devices.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Tutorialzine?a=WE9Ji7e9_mo:cSfOze2YRR4:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/Tutorialzine?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Tutorialzine?a=WE9Ji7e9_mo:cSfOze2YRR4:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/Tutorialzine?i=WE9Ji7e9_mo:cSfOze2YRR4:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Tutorialzine?a=WE9Ji7e9_mo:cSfOze2YRR4:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/Tutorialzine?i=WE9Ji7e9_mo:cSfOze2YRR4:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Tutorialzine?a=WE9Ji7e9_mo:cSfOze2YRR4:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Tutorialzine?i=WE9Ji7e9_mo:cSfOze2YRR4:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Tutorialzine?a=WE9Ji7e9_mo:cSfOze2YRR4:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Tutorialzine?i=WE9Ji7e9_mo:cSfOze2YRR4:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Tutorialzine?a=WE9Ji7e9_mo:cSfOze2YRR4:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/Tutorialzine?d=qj6IDK7rITs" border="0"></img></a>
</div>
<p><img src="http://feeds.feedburner.com/~r/Tutorialzine/~4/WE9Ji7e9_mo" height="1" width="1" />|
<div><a href="http://tutorialzine.com/2012/05/weather-forecast-geolocation-jquery/"><img src="http://cdn.tutorialzine.com/img/featured/1985.jpg" /></a></div>
<p> Today we will be using the HTML5 Geolocation API to present the user with a personalized weather forecast.}</p>
<p>Read more : <a target="_blank" href="http://feedproxy.google.com/~r/Tutorialzine/~3/WE9Ji7e9_mo/" title="How to use Geolocation and Yahoo’s APIs to build a simple weather webapp">How to use Geolocation and Yahoo’s APIs to build a simple weather webapp</a></p>
<div class="clear"></div>
</div><!-- .entry-content-->
<p class="filed categories alt-font tight">Posted in <a href="http://developersarena.com/category/android/" rel="category tag">Android</a>, <a href="http://developersarena.com/category/elgg/" rel="category tag">Elgg</a>, <a href="http://developersarena.com/category/freelancing/" rel="category tag">Freelancing</a>, <a href="http://developersarena.com/category/popular/" rel="category tag">Popular</a>, <a href="http://developersarena.com/category/startups/" rel="category tag">Startups</a>, <a href="http://developersarena.com/category/technology/" rel="category tag">Technology</a>, <a href="http://developersarena.com/category/web/" rel="category tag">Web</a>.</p>
<p class="filed tags alt-font tight">Tagged with <a href="http://developersarena.com/tag/addweather/" rel="tag">addweather</a>, <a href="http://developersarena.com/tag/ajax/" rel="tag">ajax</a>, <a href="http://developersarena.com/tag/api/" rel="tag">api</a>, <a href="http://developersarena.com/tag/browser/" rel="tag">browser</a>, <a href="http://developersarena.com/tag/geolocation/" rel="tag">geolocation</a>, <a href="http://developersarena.com/tag/jquery/" rel="tag">jquery</a>, <a href="http://developersarena.com/tag/major/" rel="tag">major</a>, <a href="http://developersarena.com/tag/opera/" rel="tag">opera</a>, <a href="http://developersarena.com/tag/showslide/" rel="tag">showslide</a>, <a href="http://developersarena.com/tag/weather-forecast/" rel="tag">weather-forecast</a>, <a href="http://developersarena.com/tag/yahoo/" rel="tag">Yahoo</a>.</p>
<p class="comments-link"><a href="http://developersarena.com/web/2012/05/how-to-use-geolocation-and-yahoos-apis-to-build-a-simple-weather-webapp/#respond" rev="post-17462" >No comments</a></p>
<p class="by-line">
<span class="author vcard full-author">
<span class="by alt-font">By</span> <a class="url fn" href="http://developersarena.com/author/Martin Angelov/" title="View all posts by Martin Angelov">Martin Angelov</a> </span>
<span class="date full-date"><span class="ndash alt-font">–</span> <abbr class="published" title="2012-05-14T09:13">May 14, 2012</abbr></span>
</p><!--/by-line-->
<div id="post-comments-17462-target"></div>
<div class="clear"></div>
</div><!-- .post --> <div id="comments">
<div class="rule-major"><hr /></div>
<h2 class="h1 comments-title">0 Responses</h2>
<p>Stay in touch with the conversation, subscribe to the <a class="feed" rel="alternate" href="http://developersarena.com/web/2012/05/how-to-use-geolocation-and-yahoos-apis-to-build-a-simple-weather-webapp/feed/"><acronym title="Really Simple Syndication">RSS</acronym> feed for comments on this post</a>.</p>
<div id="respond-p17462">
<form action="http://developersarena.com/wp-comments-post.php" method="post" class="comment-form">
<p class="comment-form-comment tight">
<label class="h3" for="comment-p17462">Leave a Reply <em id="cancel-comment-reply"><a rel="nofollow" id="cancel-comment-reply-link-p17462" href="/web/2012/05/how-to-use-geolocation-and-yahoos-apis-to-build-a-simple-weather-webapp/#respond-p17462" style="display:none;">Cancel</a></em></label>
<br class="lofi" />
<span class="comment-form-comment-area">
<textarea id="comment-p17462" name="comment" rows="8" cols="40"></textarea><br />
<em class="some-html-is-ok"><abbr title="You can use: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> ">Some HTML is OK</abbr></em>
</span>
</p>
<p class="comment-form-user-info tight">
<input type="text" id="author-p17462" name="author" value="" size="22" />
<label for="author-p17462">Name <em>(required)</em></label>
</p><!--/name-->
<p class="comment-form-user-info tight">
<input type="text" id="email-p17462" name="email" value="" size="22" />
<label for="email-p17462">Email <em>(required, but never shared)</em></label>
</p><!--/email-->
<p class="comment-form-user-info tight">
<input type="text" id="url-p17462" name="url" value="" size="22" />
<label title="Your website address" for="url-p17462">Web</label>
</p><!--/url-->
<p class="tight">
<input name="submit" type="submit" value="Post comment" />
<span class="comment-form-trackback">or, reply to this post via <a rel="trackback" href="http://developersarena.com/web/2012/05/how-to-use-geolocation-and-yahoos-apis-to-build-a-simple-weather-webapp/trackback/">trackback</a>.</span>
</p>
<input type='hidden' name='comment_post_ID' value='17462' id='comment_post_ID_p17462' />
<input type='hidden' name='comment_parent' id='comment_parent_p17462' value='0' />
</form>
</div>
</div><!--#comments-->
<div class="pagination-single">
<span class="previous">« <a href="http://developersarena.com/web/2012/05/zynga-picks-up-mobile-gaming-startup-wild-needle-in-a-talent-deal/" rel="prev">Zynga Picks Up Mobile Gaming Startup Wild Needle In A Talent Deal</a></span>
<span class="next"><a href="http://developersarena.com/web/2012/05/ntt-docomo-will-pay-up-to-300m-to-buy-italian-mobile-content-company-buongiorno/" rel="next">NTT Docomo Will Pay Up To $300M To Buy Italian Mobile Content Company Buongiorno</a> »</span>
</div>
</div><!--#content-->
<hr class="lofi" />
<div id="sidebar">
<div id="carrington-subscribe" class="widget">
<h2 class="widget-title">Subscribe</h2>
<a class="feed alignright" title="RSS 2.0 feed for posts" rel="alternate" href="http://developersarena.com/feed/">
<img src="http://developersarena.com/wp-content/themes/carrington-blog/img/rss-button.gif" alt="Developers Arena latest posts" title="Developers Arena latest posts" />
</a>
</div><!--.widget-->
<div id="carrington-about" class="widget">
<div class="about">
<h2 class="widget-title">About Developers Arena</h2>
Developersarena.com is a place where we share our knowledge, thoughts. DA handles topics such as web technologies, mobile applications, technology, tips etc.<a class="more" href="http://developersarena.com/about/">more →</a> </div>
</div><!--.widget-->
<div id="primary-sidebar">
<div id="recent-posts-3" class="widget widget_recent_entries"> <h2 class="widget-title">Recent Posts</h2> <ul>
<li>
<a href="http://developersarena.com/web/2019/09/danville-metropolis-council-works-with-casino-12/">Danville Metropolis Council Works with Casino Legalization Effort</a>
</li>
<li>
<a href="http://developersarena.com/web/2019/09/sign-up-for-the-actual-sat-knowing-you-re-in-a-5/">Sign up for the actual SAT knowing you’re in a position to register for taking the test.</a>
</li>
<li>
<a href="http://developersarena.com/web/2019/09/coming-to-america-our-best-pupil-podcasts-around-3/">Coming To America: Our Best Pupil Podcasts Around Immigration</a>
</li>
<li>
<a href="http://developersarena.com/web/2019/09/fine-martial-arts-styles-portfolio-suggestions-11/">Fine Martial arts styles Portfolio Suggestions Applicants may perhaps submit their very own portfolio 1 of 2 ways</a>
</li>
<li>
<a href="http://developersarena.com/web/2019/09/when-must-my-scholar-take-the-posed/">When Must My Scholar Take the POSED?</a>
</li>
</ul>
<div class="clear"></div></div><div id="search-3" class="widget widget_search"><form role="search" method="get" id="searchform" class="searchform" action="http://developersarena.com/">
<div>
<label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form><div class="clear"></div></div> </div><!--#primary-sidebar-->
<div id="secondary-sidebar">
<div id="categories-3" class="widget widget_categories"><h2 class="widget-title">Categories</h2> <ul>
<li class="cat-item cat-item-220"><a href="http://developersarena.com/category/android/" >Android</a> (751)
</li>
<li class="cat-item cat-item-35"><a href="http://developersarena.com/category/apple/" >Apple</a> (1,516)
</li>
<li class="cat-item cat-item-36"><a href="http://developersarena.com/category/business/" >Business</a> (1,894)
</li>
<li class="cat-item cat-item-115"><a href="http://developersarena.com/category/editorial/" >Editorial Pick</a> (377)
</li>
<li class="cat-item cat-item-30"><a href="http://developersarena.com/category/elgg/" >Elgg</a> (289)
</li>
<li class="cat-item cat-item-146"><a href="http://developersarena.com/category/freelancing/" >Freelancing</a> (635)
</li>
<li class="cat-item cat-item-11"><a href="http://developersarena.com/category/general/" >General</a> (5,835)
</li>
<li class="cat-item cat-item-22"><a href="http://developersarena.com/category/inspiration/" >Inspiration</a> (328)
</li>
<li class="cat-item cat-item-793"><a href="http://developersarena.com/category/javascript/" >JavaScript</a> (297)
</li>
<li class="cat-item cat-item-5"><a href="http://developersarena.com/category/podcasts/" >Podcasts</a> (298)
</li>
<li class="cat-item cat-item-42"><a href="http://developersarena.com/category/popular/" >Popular</a> (304)
</li>
<li class="cat-item cat-item-38"><a href="http://developersarena.com/category/social-media/" >Social Media</a> (938)
</li>
<li class="cat-item cat-item-265"><a href="http://developersarena.com/category/startups/" >Startups</a> (3,078)
</li>
<li class="cat-item cat-item-39"><a href="http://developersarena.com/category/technology/" >Technology</a> (5,809)
</li>
<li class="cat-item cat-item-1"><a href="http://developersarena.com/category/web/" >Web</a> (28,726)
</li>
<li class="cat-item cat-item-37"><a href="http://developersarena.com/category/web-design/" >Web Design</a> (714)
</li>
<li class="cat-item cat-item-367"><a href="http://developersarena.com/category/world/" >World</a> (836)
</li>
</ul>
<div class="clear"></div></div><div id="tag_cloud-3" class="widget widget_tag_cloud"><h2 class="widget-title">Tags</h2><div class="tagcloud"><a href='http://developersarena.com/tag/amazon/' class='tag-link-206' title='673 topics' style='font-size: 9.4141414141414pt;'>Amazon</a>
<a href='http://developersarena.com/tag/apple-2/' class='tag-link-819' title='4,725 topics' style='font-size: 21.292929292929pt;'>apple</a>
<a href='http://developersarena.com/tag/apps/' class='tag-link-118' title='648 topics' style='font-size: 9.1313131313131pt;'>apps</a>
<a href='http://developersarena.com/tag/business-2/' class='tag-link-922' title='3,310 topics' style='font-size: 19.171717171717pt;'>business</a>
<a href='http://developersarena.com/tag/company/' class='tag-link-818' title='2,923 topics' style='font-size: 18.464646464646pt;'>company</a>
<a href='http://developersarena.com/tag/count/' class='tag-link-897' title='730 topics' style='font-size: 9.8383838383838pt;'>count</a>
<a href='http://developersarena.com/tag/entertainment/' class='tag-link-1270' title='945 topics' style='font-size: 11.535353535354pt;'>entertainment</a>
<a href='http://developersarena.com/tag/europe/' class='tag-link-939' title='646 topics' style='font-size: 9.1313131313131pt;'>europe</a>
<a href='http://developersarena.com/tag/facebook/' class='tag-link-82' title='2,062 topics' style='font-size: 16.20202020202pt;'>Facebook</a>
<a href='http://developersarena.com/tag/flickr/' class='tag-link-1088' title='829 topics' style='font-size: 10.686868686869pt;'>flickr</a>
<a href='http://developersarena.com/tag/francisco/' class='tag-link-1039' title='625 topics' style='font-size: 8.989898989899pt;'>francisco</a>
<a href='http://developersarena.com/tag/gadgets/' class='tag-link-1497' title='994 topics' style='font-size: 11.818181818182pt;'>gadgets</a>
<a href='http://developersarena.com/tag/image/' class='tag-link-4069' title='750 topics' style='font-size: 10.121212121212pt;'>image</a>
<a href='http://developersarena.com/tag/images/' class='tag-link-1387' title='893 topics' style='font-size: 11.111111111111pt;'>images</a>
<a href='http://developersarena.com/tag/internet/' class='tag-link-834' title='1,244 topics' style='font-size: 13.232323232323pt;'>internet</a>
<a href='http://developersarena.com/tag/iphone/' class='tag-link-197' title='1,083 topics' style='font-size: 12.383838383838pt;'>iPhone</a>
<a href='http://developersarena.com/tag/javascript/' class='tag-link-28936' title='3,557 topics' style='font-size: 19.59595959596pt;'>JavaScript</a>
<a href='http://developersarena.com/tag/king/' class='tag-link-830' title='5,250 topics' style='font-size: 22pt;'>king</a>
<a href='http://developersarena.com/tag/major/' class='tag-link-853' title='999 topics' style='font-size: 11.818181818182pt;'>major</a>
<a href='http://developersarena.com/tag/media/' class='tag-link-1272' title='918 topics' style='font-size: 11.252525252525pt;'>media</a>
<a href='http://developersarena.com/tag/microsoft/' class='tag-link-194' title='964 topics' style='font-size: 11.535353535354pt;'>Microsoft</a>
<a href='http://developersarena.com/tag/mobile/' class='tag-link-76' title='2,543 topics' style='font-size: 17.616161616162pt;'>Mobile</a>
<a href='http://developersarena.com/tag/music/' class='tag-link-274' title='564 topics' style='font-size: 8.2828282828283pt;'>Music</a>
<a href='http://developersarena.com/tag/news/' class='tag-link-84' title='1,162 topics' style='font-size: 12.808080808081pt;'>News</a>
<a href='http://developersarena.com/tag/people/' class='tag-link-959' title='814 topics' style='font-size: 10.545454545455pt;'>people</a>
<a href='http://developersarena.com/tag/popular-2/' class='tag-link-821' title='3,733 topics' style='font-size: 19.878787878788pt;'>popular</a>
<a href='http://developersarena.com/tag/president/' class='tag-link-920' title='677 topics' style='font-size: 9.4141414141414pt;'>president</a>
<a href='http://developersarena.com/tag/product/' class='tag-link-820' title='534 topics' style='font-size: 8pt;'>product</a>
<a href='http://developersarena.com/tag/share/' class='tag-link-3302' title='1,408 topics' style='font-size: 13.939393939394pt;'>share</a>
<a href='http://developersarena.com/tag/social/' class='tag-link-917' title='1,330 topics' style='font-size: 13.515151515152pt;'>social</a>
<a href='http://developersarena.com/tag/social-media-2/' class='tag-link-836' title='2,278 topics' style='font-size: 16.909090909091pt;'>social media</a>
<a href='http://developersarena.com/tag/software/' class='tag-link-157' title='686 topics' style='font-size: 9.5555555555556pt;'>software</a>
<a href='http://developersarena.com/tag/startups/' class='tag-link-28935' title='3,817 topics' style='font-size: 20.020202020202pt;'>Startups</a>
<a href='http://developersarena.com/tag/story/' class='tag-link-1258' title='995 topics' style='font-size: 11.818181818182pt;'>story</a>
<a href='http://developersarena.com/tag/tech/' class='tag-link-2144' title='608 topics' style='font-size: 8.7070707070707pt;'>tech</a>
<a href='http://developersarena.com/tag/technology-2/' class='tag-link-822' title='4,098 topics' style='font-size: 20.444444444444pt;'>technology</a>
<a href='http://developersarena.com/tag/twitter/' class='tag-link-111' title='978 topics' style='font-size: 11.676767676768pt;'>Twitter</a>
<a href='http://developersarena.com/tag/video/' class='tag-link-632' title='1,190 topics' style='font-size: 12.949494949495pt;'>video</a>
<a href='http://developersarena.com/tag/videos/' class='tag-link-766' title='619 topics' style='font-size: 8.8484848484848pt;'>videos</a>
<a href='http://developersarena.com/tag/watercooler/' class='tag-link-10602' title='576 topics' style='font-size: 8.4242424242424pt;'>watercooler</a>
<a href='http://developersarena.com/tag/web-2/' class='tag-link-825' title='3,546 topics' style='font-size: 19.59595959596pt;'>web</a>
<a href='http://developersarena.com/tag/web-design-2/' class='tag-link-827' title='1,703 topics' style='font-size: 15.070707070707pt;'>web design</a>
<a href='http://developersarena.com/tag/windows/' class='tag-link-848' title='566 topics' style='font-size: 8.2828282828283pt;'>windows</a>
<a href='http://developersarena.com/tag/world-2/' class='tag-link-877' title='3,686 topics' style='font-size: 19.878787878788pt;'>world</a>
<a href='http://developersarena.com/tag/year/' class='tag-link-899' title='793 topics' style='font-size: 10.40404040404pt;'>year</a></div>
<div class="clear"></div></div><div id="recent-comments-3" class="widget widget_recent_comments"><h2 class="widget-title">Recent Comments</h2><ul id="recentcomments"></ul><div class="clear"></div></div> </div><!--#secondary-sidebar-->
<div class="clear"></div>
</div><!--#sidebar--> <div class="clear"></div>
</div><!-- .wrapper -->
</div><!-- #main -->
<hr class="lofi" />
<div id="footer" class="section">
<div class="wrapper">
<p id="generator-link">Proudly powered by <a href="http://wordpress.org/" rel="generator">WordPress</a> and <a href="http://carringtontheme.com" title="Carrington theme for WordPress">Carrington</a>.</p>
<p id="developer-link"><a href="http://crowdfavorite.com" title="Custom WordPress development, design and backup services." rel="developer designer">Carrington Theme by Crowd Favorite</a></p>
</div><!--.wrapper-->
</div><!--#footer -->
</div><!--#page-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-19328731-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>