K. G. Sreeju Nair

Semantic Tags in HTML 5

2013-02-24T13:14:19Z

In December 2012, W3C has published the complete definition of HTML 5 specification. Already most of the browser vendors have implemented support for HTML 5 and you can expect future versions of browsers will have complete support of the specification. In the introduction of HTML 5, web developers faced some challenges to support their markup in non-HTML 5 browsers. This added some cost to web development. Now web developers can expect better browser support and all the browser vendors already announced their commitment to this standard.

In this article I am going to mention about the semantic tags introduced in HTML 5. The introduction of semantic tags is to make your markup meaningful. When an HTML document is presented to people, they are seeing how the document is presented in the browser. So for people, Markup is not that important. So definitely adding meaning for markup doesn’t meant for those who are looking for the presentation of the document.

But there are other couple of types of users is there who are interested in your markup. The first one, is the search engine crawlers. They need to identify what is the content of the indexed page and what is the related content etc. Another type of users is those who integrate the markup in their applications (can be a web application that consolidate content from various sites or standalone applications that aggregates data from various web). They will be interested in meaningful content in markup.

Prior to HTML 5, there was no single mechanism that allows this. Web developers used to give meaningful id/class attribute to the markup. This helped them grouping the content across their applications but the terminology used differs from developer to developer.

For e.g. I used the following markup for my titles across my applications

<div id=”Title”>My title content</div>

I saw lots of developers using the terms such as header, titles or their own names. This makes it impossible for the crawlers/indexers to identify the title of the page. So making some standard semantic tags will solve this. With HTML 5 W3C decided to give a common naming definitions for markup, those are named as sematic tags in HTML 5. I am going to list most of them as a tabular format for developers to have a quick look at them. (I have added the tags with a brief explanation by W3C and corresponding url and some helpful tips.)

Tag	Brief explanation
article	The article element represents a section of content that forms an independent part of a document or site; for example, a magazine or newspaper article, or a blog entry. Refer http://www.w3.org/TR/html5/sections.html#the-article-element An article refers to the main content of a page. An article can have header, footer and even contains multiple article sub elements. E.g. a blog post, a news entry etc.
section	The section element represents a generic section of a document or application. Refer http://www.w3.org/TR/html5/sections.html#the-section-element Basically section element is meant for grouping content. For e.g. if you have multiple articles related to a subject in a page, it will give more meaning by including them in a section element. Though section element definition looks similar to article, it is recommended to use article element to syndicate the content. If you use section element, it will be easy to extract the document outline from the section elements.
nav	The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Refer: http://www.w3.org/TR/html5/sections.html#the-nav-element If you have navigation elements in your page, such as menus or quick links, it is recommended to place them inside the nav element.
aside	The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Refer: http://www.w3.org/TR/html5/sections.html#the-aside-element When you use aside inside an article, aside content to be related to the article and when used outside, the content to be related to the site. A typical use of aside is to place related content for an article such as sidebar content.
hgroup	The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines. Refer: http://www.w3.org/TR/html5/sections.html#the-hgroup-element hgroup element is used to group multiple head tags (h1 – h6). hgroup should only contain h1 – h6 as child elements. It is a good idea to group multiple headings such as main heading, sub heading etc. with a hgroup element
header	The header element represents a group of introductory or navigational aids. Refer: http://www.w3.org/TR/html5/sections.html#the-header-element The header element should be used to wrap the heading content such as table of contents, hgroup, heading tags etc. Unlike hgroup (that supports only h1-h6 as childs) header can contains other HTML elements as children elements
Footer	The footer element represents footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. Refer: http://www.w3.org/TR/html5/sections.html#the-footer-element
address	The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole. Refer: http://www.w3.org/TR/html5/sections.html#the-address-element Be noted that address element is not created for postal addresses. You can place the address information inside body to specify the contact information for the page, and place inside article to specify the contact information for the particular article.

As a web developer you should ensure that your markup is following the HTML 5 recommendations. You can expect search engines to implement algorithms based on HTML 5 to index the content. Making the site in HTML 5 ensures your content can be indexed by search engines properly. In addition to this, you can consider every web page as a structured content that can be syndicated to various applications. Adding sematic tags to HTML means you have self-described document available on the web that can be acted as a database for other applications that utilize your content.

Apply language packs to SharePoint 2013

2013-01-08T10:16:59Z

Any collaboration platform that allows teams to work together should have the user interface available in multiple languages. As a market leader in portals and collaboration technology, it is one of the important but easiest features to configure inside SharePoint 2013. Now a days it is common in enterprises to have teams mixed with people speaks different languages. Getting the menus and commands translated to user’s local language will increase the productivity for the user. In this walkthrough I am going to demonstrate how you can apply language pack in SharePoint 2013.

For the purpose of this walkthrough, I have SharePoint 2013 installed in standalone mode. By default the language is English. Now I am going to apply the Arabic language pack to my SharePoint farm.

Download language packs

I was able to find the language pack from the MSDN subscription. If you are facing difficulties to locate the language pack, remember to add the specified language to your search filter.

All language packs downloads with the same file name. So if you download multiple language packs, make sure you download it to different folders to avoid overwriting files.

Once you download the ISO file, run the setup.exe. Since it is Arabic language, the interface is in Arabic. I have a second opinion here. The administrator who installs language pack may not be familiar with the corresponding language, so an option to display the details in English is better I think. Starting the setup from the installation media will bring the following dialog.

As usual you need to select the check box for “I agree to license terms” and then click on the continue button. Once you click continue, the installation starts immediately.

Once the installation succeeds, you will find the below screen.

The checkbox here takes your permission to run products configuration wizard. You need to run this in order to apply changes to the SharePoint farm. Click on the finish button will start the configuration wizard. The products configuration wizard will be in your default language, so for me it is in English. Now it is going to update your SharePoint farm. You are not supposed to enter or select any option here, just click some next buttons.

You need to click Yes on the warning dialog appears. It just alerts you saying that IIS will be stopped during the update process. The installation starts immediately.

If everything goes ok, you will see the following success message.

Now your SharePoint farm can use the installed language. To use the installed language with a site, go to the Site Settings page. Instead of Site Actions menu in SharePoint 2010, you have a settings image that brings the Site Actions menu in SharePoint 2013.

Now in the Site Settings page, under Site Administration, you will find Language Settings.

In the language settings, you see the default language (which will be decided during the site creation step and you cannot change this later), and alternative languages that site can utilize. In my case I can see the Arabic there. Select the languages from the list and click OK.

Once you applied the changes, now your site can deliver the UI in the selected languages. In SharePoint 2010, there was a language selection available for users to select from. The following is a screenshot of SharePoint 2010 language selection options.

If you create a site in SharePoint 2013, in the template selection you have an option to select the experience version (either 2010 or 2013). If you select your site as 2010 experience version, you will see the same option for selecting the language.

In 2013, things have changed a bit. The page will render the specified language based on 2 things

The browser settings.

I have a site with default language as English. I also enabled the Arabic language from the site settings page for this site. In my browser, I have default language as English. In this case site will be displayed in English

I have added Arabic language to the IE language settings.

Since Arabic has first preference, the site will render in Arabic.

Changing the language from browser will have immediate effect in the site appearance.

Based on the language preferences in user’s profile

With BYOD, people are using multiple devices at work. So instead of changing settings in every browser, user can update the language preference in the user’s settings. To update the users settings, from the user menu, select About Me

You will be redirected to your personal page.

Click on Edit link, you will be redirected to update profile section.

Click on the … (three dots) to see the language and region menu

Click on the language and Region link will take you to the page where you can set your preferences. You can simply add languages to this and decide the order here.

I added the languages as below.

Now you will see the site is rendered on your preferred language, as per my settings it is Arabic.

The settings in your profile are having highest priority. If you set the preferences in your profile and the UI will be rendered in the preferred language if the site is available in that language. Configuring multiple language options is easy in SharePoint.

Get certified for free, Microsoft offers free certification exam (70-480)

2013-01-03T10:34:00Z

Recently I got an email from Microsoft regarding the free exam voucher that can be used for exam 70-480 : Programming in HTML 5 with JavaScript and CSS3. This is a great opportunity for developers to get certified without spending any money. Awesome!

With the release of Windows 8, Microsoft has announced the capability to develop windows store apps using HTML5, JavaScript and CSS3. So now developers can be certified in these technologies to showcase your expertise. I think this is the only certification available for HTML 5.

Free Voucher Code

You can use the free voucher code HTMLMPN or HTMLJMP as the registration code.

Hurry! The registration code has some limit on the number of registrations.. So register before the count ends.

How To Register

To register for the exam go to the below URL

www.register.prometric.com

To successfully schedule an exam using the Prometric site, you need to register an account. Registration is free. Once you registered, go to the above url.

You will find Schedule an exam link, click on the Schedule an exam link.

First you need to select your country and then locate Microsoft as the client and select the Program.

In the next step you need to select the 70-480 as the exam and choose a currency. It will show the amount for the exam as per your country. Don’t worry, you are not going to pay anything. Just click next button.

Now you will see all the test centers available in the location you selected.

Once you find the test center of your choice click on the associated Schedule appointment link. You need to have a Prometric account to continue from here, so make sure that you register one and logged in with the account.

Once you select the Schedule appointment link, it will show you a calendar, you can choose any available date and time of your choice.

Now you can see the Enter Promo Code/Voucher number. Enter HTMLMPN here.

Once you click validate, you will redirect to the previous page and will show you your balance amount as 0.0

Now in the bottom of the page just click on the Agree button and the registration will be over.

.

Once you are done, you need to prepare for the Exam. right? There are lot of resources available in the web. But there are some specifically for this exam again freely distributed by Microsoft, great! isn’t it? You can find it from channel 9 or from MVA (Microsoft Virtual Academy). Refer the url below.

http://channel9.msdn.com/Series/MVA-Jump-Start/Developing-HTML5-Apps-Jump-Start-01a-HTML5-Semantic-Structure-Part-1

It is a great opportunity for developers to get certified in HTML 5. Hope you will enjoy it and all the very best for your success.

Installing SharePoint 2013 on Windows 2012- standalone installation

2012-11-27T08:15:43Z

In this article, I am going to share my experience while installing SharePoint 2013 on Windows 2012. This was the first time I tried SharePoint 2013. So I thought sharing the same will benefit somebody who would like to install SharePoint 2013 as a standalone installation. Standalone installation is meant for evaluation/development purposes. For production environments, you need to follow the best practices and create required service accounts. Microsoft has published the deployment guide for SharePoint 2013, you can download this from the below link.

http://www.microsoft.com/en-us/download/details.aspx?id=30384

Since this is for development environment, I am not going to create any service account, I logged in to Windows 2012 as an administrator and just placed my installation DVD on the drive. When I run the setup from the DVD, the below splash screen appears.

This reflects the new UI changes happening with all Microsoft based applications; the interface matches the metro style applications (Windows 8 style). As you can see the options are same as that of the SharePoint 2010 installation screen. Click on the “install software prerequisites” link to get all the prerequisites get installed. You need a valid internet connection to do this. Clicking on the install software prerequisites will bring the following dialog.

Click Next, you will see the terms and conditions. Select I accept check box and click Next.

The installation will start immediately.

For any reason, if you stop the installation and start it later, the product preparation tool will check whether a particular component is installed and if yes, then the installation of that particular component will be skipped. If you do not have internet connection, you will face the download error as follows. At any point of failure, the error log will be available for you to review.

If all OK, you will reach the below dialog, this means some components will be installed once the PC is rebooted. Be noted that the clicking on finish will not ask you for further confirmation. So make sure to save all your work before clicking on finish button.

Once the server is restarted, the product preparation tool will start automatically and you will see the following dialog.

Now go to the SharePoint 2013 splash page and click on “Install SharePoint Server” link.

You need to enter the product key here. Enter the product key as you received and click continue.

Select the Checkbox for the license agreement and click on continue button.

Now you need to select the installation type. Select Stand-alone and click on “Install Now” button.

A dialog will pop up that updates you with the process and progress.

The installation took around 15-20 minutes with 2 GB or Ram installed in the server, seems fair. Once the installation is over, you will see the following Dialog. Make sure you select the Run the products and configuration wizard.

If you miss to select the check box, you can find the products and configuration wizard from the start tiles.

The products and configuration wizard will start. If you get any dialog saying some of the services will be stopped, you just accept it.

Since we selected standalone installation, it will not ask for any user input, as it already knows the database to be configured. Once the configuration is over without any problems you will see the configuration successful message.

Also you can find the link to central administration on the Start Screen.

Troubleshooting

During my first setup process, I got the below error.

System.ArgumentException: The SDDL string contains an invalid sid or a sid that cannot be translated.
Parameter name: sddlForm
at System.Security.AccessControl.RawSecurityDescriptor.BinaryFormFromSddlForm(String sddlForm)
at System.Security.AccessControl.RawSecurityDescriptor..ctor(String sddlForm)
at Microsoft.SharePoint.Win32.SPNetApi32.CreateShareSecurityDescriptor(String[] readNames, String[] changeNames, String[] fullControlNames, String& sddl)
at Microsoft.SharePoint.Win32.SPNetApi32.CreateFileShare(String name, String description, String path)
at Microsoft.SharePoint.Administration.SPServer.CreateFileShare(String name, String description, String path)
at Microsoft.Office.Server.Search.Administration.AnalyticsAdministration.CreateAnalyticsUNCShare(String dirParentLocation, String shareName)
at Microsoft.Office.Server.Search.Administration.AnalyticsAdministration.ProvisionAnalyticsShare(SearchServiceApplication serviceApplication)
…………………………………………
…………………………………………

The configuration wizard displayed the error as below.

The error occurred in step 8 of the configuration wizard and by the time the central administration is already provisioned. So from the start, I was able to open the central administration website, but the search service application was showing as error.

I found a good blog that specifies the reason for error.

http://kbdump.com/sharepoint2013-standalone-config-error-create-sample-data/

The workaround specified in the blog works fine. I think SharePoint must be provisioning Search using the Network Service account, so instead of giving permission to everyone, you could try giving permission to Network Service account(I didn’t try this yet, buy you could try and post your feedback here). In production environment you will have specific accounts that have access rights as recommended by Microsoft guidelines.

Installation of SharePoint 2013 is pretty straight forward. Hope you enjoyed the article!

NuGet package manager in Visual Studio 2012

2012-10-25T07:59:16Z

NuGet is a package manager that helps developers to automate the process of installing and upgrading packages in Visual Studio projects. It is free and open source. You can see the project in codeplex from the below link.

http://nuget.codeplex.com/

Now days developers needed to work with several packages or libraries from various sources, a typical e.g. is jQuery. You will hardly find a website that not uses jQuery. When you include these packages as manually copying the files, it is difficult to task to update these files as new versions get released. NuGet is a Visual studio add on, that comes by default with Visual Studio 2012 that manages such packages. So by using NuGet, you can include new packages to you project as well as update existing ones with the latest versions. NuGet is a Visual Studio extension, and happy news for developers, it is shipped with Visual Studio 2012 by default. In this article, I am going to demonstrate how you can include jQuery (or anything similar) to a .Net project using the NuGet package manager.

I have Visual Studio 2012, and I created an empty ASP.Net web application. In the solution explorer, the project looks like following.

Now I need to add jQuery for this project, for this I am going to use NuGet. From solution explorer, right click the project, you will see “Manage NuGet Packages”

Click on the Manage NuGet Packages options so that you will get the NuGet Package manager dialog. Since there is no package installed in my project, you will see “no packages installed” message.

From the left menu, select the online option, and in the Search box (that is available in the top right corner) enter the name of the package you are looking for. In my case I just entered jQuery. Now NuGet package manager will search online and bring all the available packages that match my search criteria.

You can select the right package and use the Install button just next to the package details. Also in the right pane, it will show the link to project information and license terms, you can see more details of the project you are looking for from the provided links. Now I have selected to install jQuery.

Once installed successfully, you can find the green icon next to it that tells you the package has been installed successfully to your project.

Now if you go to the Installed packages link from the left menu of package manager, you can see jQuery is installed and you can uninstall it by just clicking on the Uninstall button.

Now close the package manager dialog and let us examine the project in solution explorer.

You can see some new entries in your project. One is Scripts folder where the jQuery got installed, and a packages.config file. The packages.config is xml file that tells the NuGet package manager, the id and the version of the package you install. Based on this file NuGet package manager will identify the installed packages and the corresponding versions.

Installing packages using NuGet package manager will save lot of time for developers and developers can get upgrades for the installed packages very easily.

Coexistence of projects between Visual Studio 2010 and 2012

2012-10-17T10:04:00Z

Microsoft has released another version of Visual Studio named Visual Studio 2012. As you can see there are user interface (UI) changes in all/most of the Microsoft applications as Microsoft is moving towards Windows 8 and changing the UI scheme for all of the applications. Visual Studio 2012 is a move to adapt the new interface requirements that are in coherent with Windows 8. Not only this Visual Studio 2012 has lots of improvements in several areas and it supports .Net framework 4.5.

In the past, whenever a new version of Visual Studio launches, developers needed to upgrade the project to new version of Visual Studio which was a pain, especially when you are working with a team of developers. Once a solution is upgraded to a newer version, it was not possible to going back. With Visual studio 2012, you can avoid the pain of upgrading. Developers will be able to open their project in Visual Studio 2012 along with Visual Studio 2010 SP 1. This means if you create a project using Visual Studio 2012, you will be able to open it with Visual Studio 2010 SP 1 and vice versa. There are some exceptions (as always!). Visual Studio 2012 supports some new project types, which was not there in 2010 version. Such project, you will not be able to open in Visual Studio 2010. For e.g. Visual Studio 2012 brings a new project type named “Windows 8 Modern Applications”, such projects you will not be able to open using the 2010 version of Visual Studio.

Just to prove the said subject, I am going to perform some simple operations. I installed Visual Studio 2010 with SP 1 and Visual Studio 2012 on my PC. See the snapshots for both the installations.

Visual Studio 2010

Visual Studio 2012

Now I am going to perform two test cases. First create a project in 2010 Version and open it in 2012 version and vice versa. If you are interested, you can continue scrolling down, otherwise just say bye bye to this article.

Case 1: Open a solution created using Visual Studio 2010 in 2012 version.

I created a project in VS 2010 named TestProject2010 using empty ASP.Net web application template. Once created the project appears in VS 2010 as follows.

I closed Visual Studio and opened the solution file using VS 2012 by using the Open Project dialog(File -> Open Project/Solution). Surprisingly, there is not even a warning message, just the project opened fine in Visual Studio 2012.

Case 2: Open a solution created using Visual Studio 2012 in 2010 version.

I have created a project in Visual Studio 2012 named testProject2012. See the screenshot of the project in VS 2012 below.

Now try opening the solution in Visual Studio 2010. The solution loaded successfully, but Visual Studio failed to load project. See the screenshot.

At first I was surprised. The Web application project template is available in both versions, So there should not be any problem. What is making the incompatibility? Is it ASP.Net version? Yes it is. VS 2012 assign ASP.Net 4.5 as the default version that was causing the trouble for Visual Studio 2010.

I changed the version to .Net framework 4.0 and saved the project after that I was able to open the project in Visual Studio 2010.

This as an excellent move from Visual Studio Team and allows enterprises to perform gradual upgrade to the new version. Now developers can work in any version based on availability and preference, simply I can use Visual Studio 2012 as my IDE while my colleague working on the same project can still use Visual Studio 2010.

Change default language settings in Visual Studio 2012

2012-10-08T20:12:00Z

The first thing you need to do after the installation of Visual Studio 2012 is to choose the IDE preferences. Once you select your preferred collection of settings, the IDE will always choose dialogs and other options according to your selection. Nowadays developer’s needs to work with different programming environments and due to this, developers might need to reset the default settings. In this article, I am going to demonstrate how you can change the default settings in Visual Studio 2012.

For the purpose of this demonstration, I have installed Visual Studio 2012 and selected C++ as my default environment settings. So now when I go to file -> new project, it will give me C++ templates by default as follows. If you want to select another language, you need to expand Other Languages section and select C# or VB.

Now I am going to change these default settings. I am going to change the default language preference to C#. In Visual Studio 2012, go to tools menu and select Import and Export Settings.

Here you have 3 options; one is to export the current settings so that the settings are saved for future use. Also you can import previously saved settings. The last option available is to reset it to default. It is a good Idea to export your settings and import it as you need in later stages. To reset the settings to default select the Reset option and click next.

Now Visual Studio will ask you to whether you would like to save the settings, which can be used in future to restore. Select any one option and click next. For the purpose of this demo, I have selected not to save the settings. Click Next button to continue.

Now Visual Studio will bring you the similar dialog that appears just after installation to select your IDE settings. Select the required settings from the available list and click Finish button.

Click Finish once you are done. If everything OK, you will see the success message as below.

Now go to file -> new Project, you will see the selected language appear by default. I selected C# in the previous step and the new project dialog appears as follows.

Changing IDE settings in Visual Studio 2012 is very easy and straight forward.

Extension methods in .Net framework

2012-08-07T13:18:00Z

Recently one of my friend asked me about extension method. Though it was introduced in .Net framework 3.0, lots of people are not using this or not aware of the power of extension methods. So I decided to write a blog post about this to give an introduction to the extension methods.

In a nutshell Extension methods make the .Net framework extensible. You can add methods to existing classes without altering or accessing the original class code. This applies to in-built types that shipped with .Net framework and the types you create. Using this feature you can extend types/classes that you never have access to. You can add a method to a class written by somebody else. Extension method adds more power to .Net framework.

Prior to extension methods, developers were using the inheritance feature to extend a class. You need to create a new class based on the existing class and can add methods to it. This is great, but this approach has two disadvantages.

In order to add a single method, you need to create a new class. So just to add a simple method you are forced to extend a class and create a new class/Type, which is inconvenience for developers.
Secondly there are classes with definition Sealed (Not Inheritable in Visual Basic) as you can not extend such classes. There is lots of classes in .Net framework with sealed definition which makes almost impossible to add more properties or methods to those classes. E.g. System.String, System.Int32 etc.

Starting with .Net framework 3.0 there is happy news for developers. A new feature added to the framework called “Extension Methods”. Extension methods allow developers to define methods to existing classes, great feature! Right? Now developers can add new methods to existing classes even if the Class is sealed(Not Inheritable).

I am going to demonstrate how you can make use of Extension method in C#. For the purpose of this demonstration, I am going to add a method to the type “int”. The method name is “IsEven” which will return a Boolean value depending whether the number is even or not.

By default, when you define an int variable there are certain methods available. Visual studio IntelliSense will display all the available methods. The following is the screenshot of the default ones available with int.

Now I am going to add IsEven to the list of methods available for Int. To create an extension method in C#, you need to create a public static class and define a public static method in it. The first argument for the method should be the type you are extending (int in our case). Also you need to mark the first argument with this keyword to denote that it is an extension method.

For e.g. consider the following method definition

public static bool IsEven(this int num){……}

This defines an extension method for the type int that returns a Boolean value. If you place this method inside a public static class, the framework will understand this as an extension method and will be available for the type you extended.

See the definition of the Extension class I have created.

Once I create this class, the Visual Studio IntelliSense will identify the method in the available list as follows.

See the sample code that illustrates the use of IsEven method

You can add methods to built-in classes and for user defined classes. By using this, you can add more methods to existing types that can be used by your team of developers. Visual Studio IntelliSense is incredible in this as it finds and lists all available methods. As a developer you should make use of extension methods to simplify common tasks.

Integrate Bing Search API into ASP.Net application

2012-07-04T08:28:00Z

Couple of months back, I wrote an article about how to integrate Bing Search engine (API 2.0) with ASP.Net website. You can refer the article here

http://weblogs.asp.net/sreejukg/archive/2012/04/07/integrate-bing-api-for-search-inside-asp-net-web-application.aspx

Things are changing rapidly in the tech world and Bing has also changed! The Bing Search API 2.0 will work until August 1, 2012, after that it will not return results. Shocked? Don’t worry the API has moved to Windows Azure market place and available for you to sign up and continue using it and there is a free version available based on your usage.

In this article, I am going to explain how you can integrate the new Bing API that is available in the Windows Azure market place with your website.

You can access the Windows Azure market place from the below link

https://datamarket.azure.com/

There is lot of applications available for you to subscribe and use. Bing is one of them. You can find the new Bing Search API from the below link

https://datamarket.azure.com/dataset/5BA839F1-12CE-4CCE-BF57-A49D98D29A44

To get access to Bing Search API, first you need to register an account with Windows Azure market place. Sign in to the Windows Azure market place site using your windows live account. Once you sign in with your windows live account, you need to register to Windows Azure Market place account.

From the Windows Azure market place, you will see the sign in button it the top right of the page.

Clicking on the sign in button will take you to the Windows live ID authentication page. You can enter a windows live ID here to login. Once logged in you will see the Registration page for the Windows Azure market place as follows.

You can agree or disagree for the email address usage by Microsoft. I believe selecting the check box means you will get email about what is happening in Windows Azure market place. Click on continue button once you are done.

In the next page, you should accept the terms of use, it is not optional, you must agree to terms and conditions. Scroll down to the page and select the I agree checkbox and click on Register Button.

Now you are a registered member of Windows Azure market place. You can subscribe to data applications. In order to use BING API in your application, you must obtain your account Key, in the previous version of Bing you were required an API key, the current version uses Account Key instead.

Once you logged in to the Windows Azure market place, you can see “My Account” in the top menu, from the Top menu; go to “My Account” Section.

From the My Account section, you can manage your subscriptions and Account Keys. Account Keys will be used by your applications to access the subscriptions from the market place.

Click on My Account link, you can see Account Keys in the left menu and then Add an account key or you can use the default Account key available.

Creating account key is very simple process. Also you can remove the account keys you create if necessary.

The next step is to subscribe to BING Search API. At this moment, Bing Offers 2 APIs for search. The available options are as follows.

1. Bing Search API - https://datamarket.azure.com/dataset/5ba839f1-12ce-4cce-bf57-a49d98d29a44

2. Bing Search API – Web Results only - https://datamarket.azure.com/dataset/8818f55e-2fe5-4ce3-a617-0b8ba8419f65

The difference is that the later will give you only web results where the other you can specify the source type such as image, video, web, news etc. Carefully choose the API based on your application requirements. In this article, I am going to use Web Results Only API, but the steps will be similar to both.

Go to the API page https://datamarket.azure.com/dataset/8818f55e-2fe5-4ce3-a617-0b8ba8419f65, you can see the subscription options in the right side. And in the bottom of the page you can see the free option

Since I am going to use the free options, just Click the Sign Up link for that.

Just select I agree check box and click on the Sign Up button. You will get a recipt pagethat detail your subscription.

Now you are ready Bing Search API – Web results. The next step is to integrate the API into your ASP.Net application. Now if you go to the Search API page (as well as in the Receipt page), you can see a .Net C# Class Library link, click on the link, you will get a code file named “BingSearchContainer.cs”.

In the following sections I am going to demonstrate the use of Bing Search API from an ASP.Net application.

Create an empty ASP.Net web application. In the solution explorer, the application will looks as follows.

Now add the downloaded code file (“BingSearchContainer.cs”) to the project. Right click your project in solution explorer, Add -> existing item, then browse to the downloaded location, select the “BingSearchContainer.cs” file and add it to the project.

To build the code file you need to add reference to the following library.
System.Data.Services.Client

You can find the library in the .Net tab, when you select Add -> Reference

Try to build your project now; it should build without any errors.

Add an ASP.Net page to the project. I have included a text box and a button, then a Grid View to the page. The idea is to Search the text entered and display the results in the gridview. The page will look in the Visual Studio Designer as follows.

The markup of the page is as follows.

In the button click event handler for the search button, I have used the following code.

Now run your project and enter some text in the text box and click the Search button, you will see the results coming from Bing, cool.

I entered the text “Microsoft” in the textbox and clicked on the button and I got the following results.

Searching Specific Websites

If you want to search a particular website, you pass the site url with site:<site url name> and if you have more sites, use pipe (|).

e.g. The following search query

site:microsoft.com | site:adobe.com design

will search the word design and return the results from Microsoft.com and Adobe.com

See the sample code that search only Microsoft.com for the text entered for the above sample.

var webResults = bingContainer.Web("site:www.Microsoft.com " + txtSearch.Text, null, null, null, null, null, null);

Paging the results returned by the API

By default the BING API will return 100 results based on your query. The default code file that you downloaded from BING doesn’t include any option for this. You can modify the downloaded code to perform this paging.

The BING API supports two parameters $top (for number of results to return) and $skip (for number of records to skip). So if you want 3^rd page of results with page size = 10, you need to pass $top = 10 and $skip=20.

Open the BingSearchContainer.cs in the editor. You can see the Web method in it as follows.

public DataServiceQuery<WebResult> Web(String Query, String Market, String Adult, Double? Latitude, Double? Longitude, String WebFileType, String Options) {

In the method signature, I have added two more parameters

public DataServiceQuery<WebResult> Web(String Query, String Market, String Adult, Double? Latitude, Double? Longitude, String WebFileType, String Options, int resultCount, int pageNo) {

and in the method, you need to pass the parameters to the query variable.

query = query.AddQueryOption("$top", resultCount);
query = query.AddQueryOption("$skip", (pageNo -1)*resultCount);
return query;

Note that I didn’t perform any validation, but you need to check conditions such as resultCount and pageCount should be greater than or equal to 1. If the parameters are not valid, the Bing Search API will throw the error.

The modified method is as follows.

The changes are highlighted. Now see the following code in the SearchPage.aspx.cs file

protected void btnSearch_Click(object sender, EventArgs e)
{
    var bingContainer = new Bing.BingSearchContainer(new Uri(https://api.datamarket.azure.com/Bing/SearchWeb/));
    // replace this value with your account key
    var accountKey = "your key";
    // the next line configures the bingContainer to use your credentials.
    bingContainer.Credentials = new NetworkCredential(accountKey, accountKey);
    var webResults = bingContainer.Web("site:microsoft.com" +txtSearch.Text , null, null, null, null, null, null,3,2);
    lstResults.DataSource = webResults;
    lstResults.DataBind();
}

The following code will return 3 results starting from second page (by skipping first 3 results). See the result page as follows.

Bing provides complete integration to its offerings. When you develop search based applications, you can use the power of Bing to perform the search. Integrating Bing Search API to ASP.Net application is a simple process and without investing much time, you can develop a good search based application.

Make sure you read the terms of use before designing the application and decide which API usage is suitable for you.

Integrating Flickr with ASP.Net application

2012-06-13T20:50:00Z

Flickr is the popular photo management and sharing application offered by yahoo. The services from flicker allow you to store and share photos and videos online. Flicker offers strong API support for almost all services they provide. Using this API, developers can integrate photos to their public website. Since 2005, developers have collaborated on top of Flickr's APIs to build fun, creative, and gorgeous experiences around photos that extend beyond Flickr.

In this article I am going to demonstrate how easily you can bring the photos stored on flicker to your website. Let me explain the scenario this article is trying to address. I have a flicker account where I upload photos and share in many ways offered by Flickr. Now I have a public website, instead of re-upload the photos again to public website, I want to show this from Flickr. Also I need complete control over what photo to display. So I went and referred the Flickr documentation and there is API support ready to address my scenario (and more… ).

FlickerAPI for ASP.Net

To Integrate Flicker with ASP.Net applications, there is a library available in CodePlex. You can find it here

http://flickrnet.codeplex.com/

Visit the URL and download the latest version. The download includes a Zip file, when you unzip you will get a number of dlls. Since I am going to use ASP.Net application, I need FlickrNet.dll. See the screenshot of all the dlls, and there is a help file available in the download (.chm) for your reference.

Once you have the dll, you need to use Flickr API from your website. I assume you have a flicker account and you are familiar with Flicker services.

Arrange your photos using Sets in Flickr

In flicker, you can define sets and add your uploaded photos to sets. You can compare set to photo album. A set is a logical collection of photos, which is an excellent option for you to categorize your photos. Typically you will have a number of sets each set having few photos. You can write application that brings photos from sets to your website. For the purpose of this article I already created a set Flickr and added some photos to it. Once you logged in to Flickr, you can see the Sets under the Menu.

In the Sets page, you will see all the sets you have created. As you notice, you can see certain sample images I have uploaded just to test the functionality. Though I wish I couldn’t create good photos so please bear with me.

I have created 2 photo sets named Blue Album and Red Album. Click on the image for the set, will take you to the corresponding set page.

In the set “Red Album” there are 4 photos and the set has a unique ID (highlighted in the URL). You can simply retrieve the photos with the set id from your application. In this article I am going to retrieve the images from Red album in my ASP.Net page. For that First I need to setup FlickrAPI for my usage.

Configure Flickr API Key

As I mentioned, we are going to use Flickr API to retrieve the photos stored in Flickr. In order to get access to Flickr API, you need an API key. To create an API key, navigate to the URL http://www.flickr.com/services/apps/create/

Click on Request an API key link, now you need to tell Flickr whether your application in commercial or non-commercial.

I have selected a non-commercial key. Now you need to enter certain information about your application.

Once you enter the details, Click on the submit button. Now Flickr will create the API key for your application.

Generating non-commercial API key is very easy, in couple of steps the key will be generated and you can use the key in your application immediately.

ASP.Net application for retrieving photos

Now we need write an ASP.Net application that display pictures from Flickr. Create an empty web application (I named this as FlickerIntegration) and add a reference to FlickerNet.dll. Add a web form page to the application where you will retrieve and display photos(I have named this as Gallery.aspx). After doing all these, the solution explorer will look similar to following.

I have used the below code in the Gallery.aspx page.

The output for the above code is as follows.

I am going to explain the code line by line here.

First it is adding a reference to the FlickrNet namespace.

using FlickrNet;

Then create a Flickr object by using your API key.

Flickr f = new Flickr("<yourAPIKey>");

Now when you retrieve photos, you can decide what all fields you need to retrieve from Flickr. Every photo in Flickr contains lots of information. Retrieving all will affect the performance. For the demonstration purpose, I have retrieved all the available fields as follows.

PhotoSearchExtras.All

But if you want to specify the fields you can use logical OR operator(|). For e.g. the following statement will retrieve owner name and date taken.

PhotoSearchExtras extraInfo = PhotoSearchExtras.OwnerName | PhotoSearchExtras.DateTaken;

Then retrieve all the photos from a photo set using PhotoSetsGetPhotos method. I have passed the PhotoSearchExtras object created earlier.

PhotosetPhotoCollection photos = f.PhotosetsGetPhotos("72157629872940852", extraInfo);

The PhotoSetsGetPhotos method will return a collection of Photo objects. You can just navigate through the collection using a foreach statement.

foreach (Photo p in photos)
{
//access each photo properties
}

Photo class have lot of properties that map with the properties from Flickr. The chm documentation comes along with the CodePlex download is a great asset for you to understand the fields. In the above code I just used the following

p.LargeUrl – retrieves the large image url for the photo.

p.ThumbnailUrl – retrieves the thumbnail url for the photo

p.Title – retrieves the Title of the photo

p.DateUploaded – retrieves the date of upload

Visual Studio intellisense will give you all properties, so it is easy, you can just try with Visual Studio intellisense to find the right properties you are looking for.

Most of hem are self-explanatory. So you can try retrieving the required properties.

In the above code, I just pushed the photos to the page. In real time you can use the retrieved photos along with JQuery libraries to create animated photo galleries, slideshows etc.

Configuration and Troubleshooting

If you get access denied error while executing the code, you need to disable the caching in Flickr API. FlickrNet cache the photos to your local disk when retrieved. You can specify a cache folder where the application need write permission. You can specify the Cache folder in the code as follows.

Flickr.CacheLocation = Server.MapPath("./FlickerCache/");

If the application doesn’t have have write permission to the cache folder, the application will throw access denied error. If you cannot give write permission to the cache folder, then you must disable the caching. You can do this from code as follows.

Flickr.CacheDisabled = true;

Disabling cache will have an impact on the performance. Take care! Also you can define the Flickr settings in web.config file.You can find the documentation here.

http://flickrnet.codeplex.com/wikipage?title=ExampleConfigFile&ProjectName=flickrnet

Flickr is a great place for storing and sharing photos. The API access allows developers to do seamless integration with the photos uploaded on Flickr.

Using custom fonts in your web pages

2012-05-23T07:35:00Z

From the start of web, people were restricted to use standard fonts(those are globally available in all platforms) such as Arial, Times etc, for displaying content in web pages. The main issue was that the browser did not have the capability to read the font from server. Due to this companies were forced to use different font than their branding for the web pages, which created dissatisfaction for the brand owners. Though internet explorer addressed this by allowing embedding font starting from version 4, there was no common method that works universally in all browsers. With HTML 5 specification, things are changing. HTML 5 have a @font-face element, that can be used to link your page with a font that resides in remote location.

According to W3C, the specification for @font-face element is as follows

“The @font-face rule allows for linking to fonts that are automatically activated when needed. This allows authors to select a font that closely matches the design goals for a given page rather than limiting the font choice to a set of fonts available on all platforms. A set of font descriptors define the location of a font resource, either locally or externally, along with the style characteristics of an individual face. Multiple @font-face rules can be used to construct font families with a variety of faces. Using CSS font matching rules, a user agent can selectively download only those faces that are needed for a given piece of text.”

Refer http://www.w3.org/TR/css3-fonts/ and refer @font-face rule section.

This is definitely very good news for those who are tired of using only certain fonts in the web pages. Now for web designers and developers there are no restrictions on fonts. The @font-face is should be your favorite CSS element that will do the work for you.

http://www.microsoft.com/typography/web/embedding/default.aspx

Browser Compatibility Issues

When defining custom fonts in your website, you should be aware of the browser compatibility issues. The non-HTML5 browsers will not support @font-face attribute. Internet explorer supports this from version 4.0, but you need to specify eot font in the @font-face attribute. Internet explorer 9 supports WOFF fonts. Most of the other browsers support ttf(true type) or otf(open type) fonts. So you need to address these and should provide a standard font as an alternative to use in case if the browser failed to load the font you specify.

To link a font from external source, you need to use @font-face in your style sheet. With @font-face you need to define two attributes(descriptors) - the font-family and src.

The font-family descriptor will define the name that will be used in your css document to refer the embedded font. You can use any name to represent the embedded font in the font-family element in your stylesheet.

The src descriptor will refer the file that needs to be embedded. You can refer multiple src attributes in one @font-face element, the first successful will be used by the browser to read the font. As we mentioned earlier you need to provide different types of font files for different browsers. This can be achieved by multiple src descriptors in the @font-face. When specifying src, you can optionally place a format element that specifies the type of font.

example.

@font-face
{
font-family: The Name given to your font;
src: url(url to eot font);
src: url(url to woff font) format(“woff”);
src: url(url to ttf font) format(“truetype”) ;
}

Note – The format attribute will tell the browser the format of the linked font, and if browser will not support the format, it will not download that font and will skip to the next src attribute. Also you can have multiple urls under one src attribute, separated by commas. When specifying eot font for internet explorer 8 or prior, you should not specify the format attribute as it will not work.

Implementation

Now let us see this in action. I am going to demonstrate how you can make this to work in a simple HTML page where I have embedded the stylesheet in the document itself. I have a fonts folder in my I have a font folder in my website where I placed fonts with extension ttf and eot.

Note – if you have ttf font, You can convert to eot or woff format by using WEFT tool from Microsoft. Refer the below urls:
http://www.microsoft.com/typography/WEFT.mspx
http://www.microsoft.com/typography/web/embedding/weft3/download.aspx

Also there are some online websites that allows you to convert the font to other formats. Refer the below that I have used to create all variants of fonts.

http://www.font2web.com/

The markup

<!DOCTYPE html>
<html>
    <head>
        <title>Testing Font</title>
        <style>
            @font-face
            {
                font-family: MyFont;
                src:url('fonts/acmesa.eot');/* this will be applied from IE 9 compatibility mode*/
                src: url('fonts/acmesa.eot?') format('embedded-opentype'), /* IE prior versions */
               url('fonts/acmesa.woff') format('woff'), /* modern browser that support web open font */
               url('fonts/acmesa.ttf') format('truetype'); /* browsers that support true type */
           }
           .Title
           {
               font-family: MyFont, Arial;
               font-weight: bold;
               font-size: 16px;
               color: #0094ff;
          }
          .Text
          {
              font-family: MyFont, Arial;
              font-size: 12px;
         }
     </style>
</head>
<body>
    <div style='width: 300px; border: 1px solid #dfdfdf; padding: 4px;'>
         <div class="Title">Font Face Test</div>
         <div class="Text">
             This font style is applied by embedding a font from server. If the browser failed to retrieve the font, this will be displayed using Arial.
          </div>
     </div>
</body>
</html>

Output

Now find the output of the above markup in various browsers. I have used Adobe Browser labs to generate the output in various browsers. (https://browserlab.adobe.com/en-us/index.html)

IE 9

IE 8

IE 7

IE 6

Firefox

Google Chrome

Safari

You can embed fonts in your website and it will work in almost all browsers. This will work in almost all browsers. For unsupported browsers, make sure you define another font name in the font-family element.

Further References

http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
http://webfonts.info/wiki/index.php?title=WOFF
http://www.w3.org/Fonts/WOFF-FAQ.html

Configure Email notifications on SharePoint 2010 list

2012-05-15T19:58:00Z

In this article I am going to demonstrate how you can configure email notification feature on SharePoint List. For the purpose of demonstration I chose the default tasks list that is coming with almost all default SharePoint sites. Tasks list have one column “Assigned To”. When an item is created in the task list, I would like to send an email to the user to whom the task is assigned. The scenario is very simple and straight forward.

In order to perform certain action when an Item is created in a list, you can make use of Workflow. To understand more about workflows in SharePoint 2010, refer the link http://technet.microsoft.com/en-us/sharepoint/ff819861 .

So What I need to do is to create a list workflow that is associated with my Tasks list. The workflow should be initiated automatically whenever an item is added to the tasks list. I am going to use SharePoint Designer as the workflow authoring tool.

Open SharePoint designer and open the site where your tasks list resides. Click on File menu, then select Add Item from the Menu. Under the workflow section, select List Workflow

Now SharePoint designer will ask you to enter a name for your workflow. Also select a list to which the workflow will be applied. Since I am going to create a workflow on task list, I have selected it and for the purpose of this demonstration I have named the workflow as “MyTaskFlow”. Click on create button once you are done.

SharePoint Designer will open the Workflow in the workflow editor. The default workflow screen will look similar to the following.

In our case the workflow is simple; we just need to add a step that will send email. In real life you may need to check certain condition, for e.g. if the task priority is high, then send email etc. When sending email, the workflow should access the data from the created item such as who created it and to whom it is assigned etc. You can add conditions and actions to workflow. In our case, it is just one action. Click on the Action Icon in the top and select send email.

When you click on Action icon, it will pop up all the available actions that you can choose from. There are many actions available and we need send an Email Action.

When you choose the Action, it will be inserted in the Step. Also you can simply type in the Step where underline is there to pick the right action/condition. This is another way of authoring if you don’t want to use mouse and menu to pick the actions/conditions. The default Send Email action will look similar to following.

Click on users link, it will bring Define email dialog. Here you need to select address, subject and a body for the email.

First you need to enter the To address. Click on the browser button next to To: text box. Here you can add a static email address or you can pick it from SharePoint objects. As our requirement is to send to the user in the Assigned To field, you have an option to pick this data from the current Item property. First select Workflow lookup for a user, click on the Add button.

This will bring the lookup dialog to select the item and field. Also make sure you select return field as Email Address.

Click OK twice so the select users dialog will be closed. Now in the subject box, enter some text. You can even pick the data from current item such as showing the task title in the subject. In the body part, you need to tell the user “the task is created for you at <time of the task> by <created user>. So you need to access the item properties in the body too. You can see Add/change lookup button in the bottom of the dialog to pick the necessary fields. You can write custom message and include the fields in between the message as necessary. Below is the screenshot of the email body I have configured.

Click OK once you are done. Now you can see the start options for the workflow as follows.

Since I want the workflow to start automatically when an Item is created I selected the second option. Now I need to publish it. To publish the workflow, press on the publish button in the top.

Now when you go to your list, you will see the workflow is available under the list you configured the workflow, in our case under the Tasks list. From the browser, go to the tasks list, then open list tab.

On the right corner, you can see workflow settings link

Click on the Workflow Settings link, this will open the workflow settings for the tasks list and you can find our workflow is available in the list.

Now go and add a new list item and you will see the workflow will be executed automatically and will send email. Designing such business processes is simple and straight forward with SharePoint 2010 and SharePoint Designer. Without writing single line of code you can achieve your day to day business requirements.

Getting started with LINQ to SharePoint

2012-04-23T05:27:00Z

One of the major advantages of SharePoint 2010 is the support for LINQ. If you are new to LINQ, I would recommend you to read the below article from MSDN.

http://msdn.microsoft.com/en-us/library/bb397926.aspx

With the support of LINQ to SharePoint, in SharePoint 2010 you can apply LINQ queries to your SharePoint objects, a great feature that helps developers who struggle to write CAML queries. In this article I am going to demonstrate how you can do the LINQ to SharePoint. When executing the runtime will convert LINQ queries to corresponding CAML queries and then execute against SharePoint.

For the purpose of demonstration, I am going to query tasks list that comes up with almost all SharePoint site definitions. The tasks list has fields such as Title, Description, Priority, Assigned to etc. IN this demonstration I am going to list all the high priority tasks from the Tasks list. Using LINQ it is easy to extract data using the Object model. I have entered certain tasks in my task list. The data available for the tasks list is as follows.

As you can see, there are 2 high priority tasks. So What I am going to do is to list them in the user’s home page using a custom web part.

In order to access any list using LINQ to SharePoint, first you need to create the entity class for the list. SharePoint 2010 shipped with SPMetal.exe that will generate entity class for you. You can find SPMetal.exe in the following location

%ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\BIN

The 14 folder under web server extensions is referred as “14 hive” and you may find this term in the remaining part of this article and you need to translate this to the correct folder.

To read more about SPMetal, refer the following MSDN article.

http://msdn.microsoft.com/en-us/library/ee538255.aspx

To generate code file for your site, just navigate to the Bin folder under 14 hive from command prompt and execute SPMetal Command with the necessary options. I have executed SPMetal command as follows.

Once the command executed, MyCode.cs is generated in the specified location, c: in my case.

Now create a new SharePoint visual web part project. If you want to know how to create a visual web part you can refer the following article.

http://weblogs.asp.net/sreejukg/archive/2011/03/26/create-a-visual-web-part-using-visual-studio-2010.aspx

I have created a Visual Web part and named it as LinqTest. I have deleted the default web part and added a new visual web part with name LinqTestWebPart. In the solution explorer, the project looks as follows.

Now we need to add the entity class created early to this project. Right click the project, select add existing item then select MyCode.cs (or the name you selected for your class file). After added the generated class, the solution explorer will looks similar to following snapshot.

In order to use LINQ to SharePoint in your code, your project needs to refer the following dll.

Microsoft.SharePoint.Linq.dll

This dll can be found in the ISAPI folder under 14 hive. Right click your project, click on add reference. In the add reference dialog, select Browse tab, Browse to the ISAPI folder and select Microsoft.SharePoint.Linq.dll

Click OK so that the reference will be added to the project.

In the Visual web part user control, I placed a panel control, where I am going to display high priority tasks. The source of the usercontrol is as follows.

As you can see, there is just a panel control with ID pnlTasks.

Now we can start writing our code. Basically you need to create a data context object by passing the site url. Once you have the data context object, you can directly query the lists using the object model. I have entered the following code.

DataContext thisSite = new DataContext(SPContext.Current.Web.Url);
EntityList<Task> tasks = thisSite.GetList<Task>("Tasks");
var highPriorityTasks = from t in tasks
where t.Priority == Priority._1High
select t;
foreach (Task highPriorityTask in highPriorityTasks)
{
pnlTasks.Controls.Add(new LiteralControl("<b>" + highPriorityTask.Title + "</b><br/>"));
}

Make sure you included the following using statements in the top of the code file.

using System.Linq;
using Microsoft.SharePoint;
using Microsoft.SharePoint.Linq;

The snap shot for the entire code is given below .

I have deployed the web part to my SharePoint farm. In the home page, I inserted the LinqTestWebpart in the page. The output of the page is as follows.

As you have seen, with couple of lines of code, we can do complex tasks. In real time you will have some data bound control such as grid view /list view and bind the results gained from LINQ to the control directly. With LINQ to SharePoint, you will get access to the lists as native objects, the possibilities for developers are seamless and you are not supposed to worry about the CAML syntax.

Display weather information in your site using jQuery and Yahoo services

2012-04-17T08:34:00Z

Few months back, I wrote an article about how to retrieve weather information from www.weather.com using XOAP services. In that article I was subscribing the data from server side, caching data to SQL server database and then retrieving the information from SQL to display on the page. You can read that article from the link http://weblogs.asp.net/sreejukg/archive/2011/02/21/include-weather-information-to-your-site-using-weather-com-xmloap-service.aspx . After published the article, I received certain queries about retrieving the weather information without using any server side technology, so I decided to write this.

In this article I am going to explain how you can retrieve weather information from Yahoo services using jQuery and JSONP. Yahoo provides real time weather data for the location of your choice. Yahoo provides lot of options for developers by providing the data in various formats such as RSS, JSON, JSONP etc. To know more about weather services from Yahoo, you can refer the below link.

http://developer.yahoo.com/weather/

To retrieve weather for a particular location, you need to pass two parameters as follows.

w – WOEID, this parameter refers to the location for weather you are looking for

u – Unit of weather you would like to receive. This can be either Celsius or Fahrenheit. You can specify c or f for Celsius and Fahrenheit respectively. This parameter is optional and if you didn’t specify any the unit will be Fahrenheit.

Now you would like to retrieve the value for w parameter. I am going to explain how you can get this. Just follow the steps, it is easy. Just go to the below url

http://weather.yahoo.com/

Enter the city name or zip code for the location you are looking for. For ex. for finding weather for Manama, Bahrain, just enter Manama in the text box and press Go.

This will show all the similar locations available. Click on the location you are looking for. It will show the weather forecast for the location. In the url, you can find the value for the WOEID parameter.

The WOEID value for Manama, Bahrain is 1967057.

Now let us try getting the RSS feed for your location, try the below url, make sure you update the correct value for w parameter. http://weather.yahooapis.com/forecastrss?w=1967057&u=c

The output of the page is as follows.

The RSS response is based on RSS 2.0 specification and you can refer the http://developer.yahoo.com/weather/ for what fields included in the response.

Now you know how to get the information using Yahoo services. In order to show the weather information you need to access the data provided by Yahoo from your website. The biggest challenge here is the same origin policy of browsers, by default browser will not allow you to issue a cross domain request. There are workarounds but to achieve across browsers is always a pain. Due to the same origin policy you cannot make a cross domain request to Yahoo site. There is a workaround using JSONP and Yahoo supports this!. Using JSONP, it is possible to make cross domain requests. You can refer this here

http://en.wikipedia.org/wiki/JSONP

Yahoo offers YQL (Yahoo query language, using this you can retrieve weather compatible with JSONP. YQL allows developers to query the object similar to SQL like syntax. You can read more about YQL here.

http://developer.yahoo.com/yql/

The following is the YQL equivalent for getting temperature for Manama using JSON format.

http://query.yahooapis.com/v1/public/yql?q=select * from weather.forecast where woeid=1967057 and u='c'&format=json&callback=func

Notice the callback attribute, this is for JSONP padding. You can send the above url to jQuery method getJSON so that it will retrieve the weather data. Make sure you define callback=?, instead of specifying a name for call back, so that jQuery will define the function name for you.

I have created the below HTML page. The page is very simple and in the body I included a div with id weather. When weather is retrieved, I am going to update this div with the weather information. See my HTML markup

When I browse the page, I can see the weather in my page as follows.

Once you get the data as JSON, you can access any property available in the JSON response.

For example, if you want to retrieve Current temperature, you can use

data.query.results.channel.item.condition.temp

To retrieve date & time of the weather data you can use

data.query.results.channel.item.condition.date

To retrieve the current condition code you can refer

data.query.results.channel.item.condition.code

It is easy to customize the output as you require. I recommend you to read Yahoo usage policy to make sure you comply with the terms of use.

Integrate BING API for Search inside ASP.Net web application

2012-04-07T13:51:00Z

Update: Since Bing has moved Search API to Windows Azure Market place, I wrote a new article about the new Bing Search API. You can read this from the below link

http://weblogs.asp.net/sreejukg/archive/2012/07/04/integrate-bing-search-api-to-asp-net-application.aspx

As you might already know, Bing is the Microsoft Search engine and is getting popular day by day. Bing offers APIs that can be integrated into your website to increase your website functionality. At this moment, there are two important APIs available. They are

Bing Search API
Bing Maps

The Search API enables you to build applications that utilize Bing’s technology. The API allows you to search multiple source types such as web; images, video etc. and supports various output prototypes such as JSON, XML, and SOAP. Also you will be able to customize the search results as you wish for your public facing website.

Bing Maps API allows you to build robust applications that use Bing Maps.

In this article I am going to describe, how you can integrate Bing search into your website. In order to start using Bing, First you need to sign in to http://www.bing.com/toolbox/bingdeveloper/ using your windows live credentials.

Click on the Sign in button, you will be asked to enter your windows live credentials. Once signed in you will be redirected to the Developer page. Here you can create applications and get AppID for each application. Since I am a first time user, I don’t have any applications added.

Click on the Add button to add a new application. You will be asked to enter certain details about your application. The fields are straight forward, only thing you need to note is the website field, here you need to enter the website address from where you are going to use this application, and this field is optional too. Of course you need to agree on the terms and conditions and then click Save.

Once you click on save, the application will be created and application ID will be available for your use.

Now we got the APP Id. Basically Bing supports three protocols. They are JSON, XML and SOAP. JSON is useful if you want to call the search requests directly from the browser and use JavaScript to parse the results, thus JSON is the favorite choice for AJAX application. XML is the alternative for applications that does not support SOAP, e.g. flash/ Silverlight etc. SOAP is ideal for strongly typed languages and gives a request/response object model. In this article I am going to demonstrate how to search BING API using SOAP protocol from an ASP.Net application.

For the purpose of this demonstration, I am going to create an ASP.Net project and implement the search functionality in an aspx page.

Open Visual Studio, navigate to File-> New Project, select ASP.Net empty web application, I named the project as “BingSearchSample”.

Add a Search.aspx page to the project, once added the solution explorer will looks similar to the following.

Now you need to add a web reference to the SOAP service available from Bing. To do this, from the solution explorer, right click your project, select Add Service Reference.

Now the new service reference dialog will appear. In the left bottom of the dialog, you can find advanced button, click on it.

Now the service reference settings dialog will appear. In the bottom left, you can find Add Web Reference button, click on it.

The add web reference dialog will appear now. Enter the URL as http://api.bing.net/search.wsdl?AppID=<YourAppIDHere>&version=2.2 (replace <yourAppIDHere> with the appID you have generated previously) and click on the button next to it. This will find the web service methods available. You can change the namespace suggested by Bing, but for the purpose of this demonstration I have accepted all the default settings. Click on the Add reference button once you are done.

Now the web reference to Search service will be added your project. You can find this under solution explorer of your project.

Now in the Search.aspx, that you previously created, place one textbox, button and a grid view. For the purpose of this demonstration, I have given the identifiers (ID) as txtSearch, btnSearch, gvSearch respectively. The idea is to search the text entered in the text box using Bing service and show the results in the grid view. In the design view, the search.aspx looks as follows.

In the search.aspx.cs page, add a using statement that points to net.bing.api.

I have added the following code for button click event handler.

The code is very straight forward. It just calls the service with your AppID, a query to search and a source for searching. Let us run this page and see the output when I enter Microsoft in my textbox.

If you want to search a specific site, you can include the site name in the query parameter. For e.g. the following query will search the word Microsoft from www.microsoft.com website.

searchRequest.Query = “site:www.microsoft.com Microsoft”;

The output of this query is as follows.

Integrating BING search API to your website is easy and there is no limit on the customization of the interface you can do. There is no Bing branding required so I believe this is a great option for web developers when they plan for site search.