SharePoint 2007: Accessing a SharePoint List programmatically

17 December, 2010 | | 0 comments |

Share |
Microsoft SharePoint 2007 offers the best portal, collaboration and content management for an enterprise. Teams using a SharePoint portal can collaborate using Document libraries, lists, picture libraries, discussion boards, surveys, etc. Amongst those I mentioned, document libraries are the most used allowing a team to share documents(of Office 2003/07) and stay synchronized with the latest one allowing real-time collaboration. These lists and libraries can be accessed programmatically in C# using the SharePoint Object Model(SOM). Though SOM can also be used to access different entities like Workflows, Site Features, etc; in this post I'll be focusing on accessing lists/libraries using SOM.


Following will give you a quick gist of how we can access a SharePoint list present in a SharePoint site based on the hierarchy.


Hierarchy Class

• SharePoint Site Collection
(i.e. top-level or parent site)

SPSite

• SharePoint Site
(i.e. target or sub-site)

SPWeb

• SharePoint List under the target site

SPList

• List Items in the List

SPListItem


In my following example, I’m trying to access images in a Picture Library named ‘PictureLibrary1’ present at the URL http://ram2003svr:8080/PictureLibrary1. The List Items existing in the ‘PictureLIbrary1’ are ‘Name’, ‘Title’. I have used an ASP.Net website for this example, so make sure you have the following three libraries added as a reference to your project.


• Microsoft.SharePoint
• Microsoft.SharePoint.Security
• Microsoft.SharePoint.intl

You can copy the DLL’s from your GAC using this link Here.


CODE Snippet:


  • using System;
  • using System.Web;
  • using System.Web.UI;
  • using System.Web.UI.HtmlControls;
  • using System.Web.UI.WebControls;
  •  
  • using Microsoft.SharePoint;
  • using Microsoft.SharePoint.WebControls;
  • using Microsoft.SharePoint.WebPartPages;
  •  
  • public partial class Image_Library_Webpart_Default : System.Web.UI.Page
  • {
  •     
  •     /*
  •         We're trying to access a 'Picture Library' located at below URL.
  •         URL: http://ram2003svr:8080/PictureLibrary1
  •       
  •         The below process is similar for accessing a Document Library or Lists like 'Tasks','Announcements', etc.
  •     */
  •     
  •     protected void Page_Load(object sender, EventArgs e)
  •     {
  •  
  •         //SPSecurity.RunWithElevatedPrivileges() is mandatory since a user might not have sufficient privileges to access this list.
  •  
  •         SPSecurity.RunWithElevatedPrivileges(delegate()
  •         {
  •  
  •             //SPSite returns the Site Collection object for the URL
  •  
  •             using (SPSite spSite = new SPSite("http://ram2003svr:8080/"))    
  •             {
  •                 /* Returns the object of the site (takes relative site URL after the top-site) which we want to access.
  •                 In this case, it is BLANK since the site is a top-level site */
  •  
  •                 using (SPWeb spWeb = spSite.AllWebs[""])
  •                 {   
  •                     //Returns the List object for the Picture Library. Takes the List Name as an argument.
  •  
  •                     SPList spList = spWeb.Lists["PictureLibrary1"];
  •  
  •                     //Iterate through the SPListItems in the List.
  •  
  •                     foreach (SPListItem spListItem in spList.Items)
  •                     {
  •                         
  •                         //You can access the various attributes in the list like 'Name','Title'
  •  
  •                         Response.Write("Name of image file : " + spListItem["Name"].ToString() + "<br /><br />");
  •  
  •                         Response.Write("Title of image file : " + spListItem["Title"].ToString() + "<br /><br />");
  •  
  •                         Response.Write("URL of image file : " + "http://ram2003svr:8080/PictureLibrary1/" + spListItem["Name"].ToString() + "<br /><br />");
  •                         
  •                     }
  •  
  •                 }
  •             }
  •  
  •         });
  •  
  •     }
  • }






You can download the source code Here:





Source code for accessing a SharePoint 2007 List programmatically






SharePoint 2007: Creating WebParts using ASP.Net Web User Controls

10 December, 2010 | | 1 comments |

Share |
WebParts can be used as an add-on in MOSS (Microsoft Office SharePoint Server) 2007 or WSS (Windows SharePoint Services) 3.0. You can include ASP.Net functionality into SharePoint using Web Parts as well. Web Parts as developers know, does not have a front end when developed, we have to add controls to it dynamically for it to be displayed on SharePoint page. In such cases, to make the development effort easier and faster, ASP.Net Web User Controls (i.e. .ascx) can bear the Web Form layout. The Web Part can be made to use this Web User Control for displaying it on a SharePoint page. A matter of fact, developing, deploying and maintaining WebParts is one of the most tedious tasks for a SharePoint developer. Following steps will help you leverage a ASP.Net Web User Control with a Web Part.


Step 1: Creating the ASP.Net Web User Control


Create an ASP.Net web site and get your Web User Control (.ascx and .ascx.cs files) developed and tested as per your requirements. If you want your Web User Control to interact with SharePoint Object Model then you have to add references to the following 3 DLL’s:

• Microsoft.SharePoint
• Microsoft.SharePoint.Security
• Microsoft.SharePoint.intl

You can copy these three DLL’s from GAC using this link Here.


Keep the following points included in mind for certain cases:

◘ If you want to insert a custom JavaScript file specially for the ASP.Net User Control you can either use the <script></script> block in the .ascx file or use the following approach:

• Place an ASP.Net Placeholder in the section of the SharePoint Master page. Name it as per your convention.
• Use a Literal control (say 'Literal1') and add the <script src=" ... " type="text/javascript"></script> code for JavaScript or <link href=" ... " rel="Stylesheet" /> code for CSS to the ‘Literal1.Text’ attribute in the Page_Load event of the ASP.Net User Control.
• Access the Placeholder with the ID from the Page_Load event and add the Literal1 control to it.

◘ The JavaScript or CSS file so referenced in the Web User Control can either be a file visible in SharePoint 2007 Designer or in the ‘_layouts’ folder. Choosing the former option would be wiser.

◘ If you need to access a <ConnectionString> or <AppSetting> attribute from the Web User Control, make sure you make the required entry in the 'web.config' file.


Step 2: Placing the Web User Control in the '_layouts' folder


Place the ASP.Net Web User Control files (i.e. .ascx and .ascx.cs) in a folder created (name it wisely) in the ‘_layouts’ folder of your 12 hive where Microsoft SharePoint 2007 is installed. Place your JavaScript or CSS files here as well if you have chosen to reference them from your Web User Control here.

A majority of posts on the Internet will advice to keep the Web User Control files in the ‘_controltemplates’ virtual directory but believe me and my experience; I prefer the ‘_layouts’ virtual directory. In my example mentioned below, I have used a Web User Control named 'Photo_Gallery.ascx' placed in the folder 'PhotoGallery' in the '_layouts' folder.


Step 3: Creation of WebPart


Assuming you have your development environment ready, create a Web Part project in VS 2005/2008 using SharePoint Extensions for Visual Studio with the following code snippet:


  •  
  • using System;
  • using System.IO;
  • using System.Runtime.InteropServices;
  • using System.Web.UI;
  • using System.Web.UI.WebControls;
  • using System.Web.UI.WebControls.WebParts;
  • using System.Xml.Serialization;
  •  
  • using Microsoft.SharePoint;
  • using Microsoft.SharePoint.WebControls;
  • using Microsoft.SharePoint.WebPartPages;
  •  
  • namespace WP_PhotoGallery
  • {
  •  
  •     [Guid("c3417aa5-e282-42c8-a8b8-769d1f66af31")]
  •     public class SogetiPhotoGallery : System.Web.UI.WebControls.WebParts.WebPart
  •     {
  •  
  •         Control c;              //Variable for the Web Part Control
  •         String err;             //Will store the Exception
  •  
  •         public SogetiPhotoGallery()
  •         {
  •             /* Will allow to export the WebPart. Not mandatory. */
  •  
  •             this.ExportMode = WebPartExportMode.All;
  •         }
  •         
  •         protected override void Render(HtmlTextWriter writer)
  •         {
  •             
  •             /* SPSecurity.RunWithElevatedPrivileges block is required to run the Web Part with additional privilegs.
  •              * This BLOCK is recommended to avoid user authentication/authorization issues. */
  •  
  •             SPSecurity.RunWithElevatedPrivileges(delegate()
  •             {
  •  
  •                 try
  •                 {
  •                     /* Render the Web User Control */
  •                     
  •                     c.RenderControl(writer);
  •                 }
  •  
  •                 catch (Exception e)
  •                 {
  •                     /* Store the Exception in 'err' is any */
  •                     
  •                     writer.Write(e.Message + " : " + err);
  •                 }
  •         
  •             });
  •             
  •         }
  •  
  •         protected override void CreateChildControls()
  •         {
  •  
  •             SPSecurity.RunWithElevatedPrivileges(delegate()
  •             {
  •                 
  •                 //Create all associated child controls necessary for display //
  •                 
  •                 base.CreateChildControls();
  •                 
  •                 try
  •                 {
  •  
  •                     this.Controls.Clear();
  •                     
  •                     //Load the Web User Control (.ascx) and add it to the Page. //
  •  
  •                     c = this.Page.LoadControl("~/_layouts/PhotoGallery/Photo_Gallery.ascx");
  •                     this.Controls.Add(c);
  •                 }
  •                     
  •                 catch (Exception e)
  •                 {
  •                     err = e.Message;
  •                 }
  •                 
  •             });
  •             
  •         }
  •  
  •     }
  •  
  • }


Step 4: Deployment of Web Part, populating it in Web Part Gallery and using a Web Part page to display the Web Part on a SharePoint page


Make sure you follow the required steps for deployment of Web Part. If you face any issues, please post it in the comments section.

As a reference for beginners, you can learn how to create, deploy and install Web Parts using this article Here.






You can download the source code Here:





Source code for Creating WebParts using ASP.Net Web User Controls in SharePoint 2007






Unicode special characters at your advantage

25 November, 2010 | | 1 comments |

Share |
I’m sure you would have come across Facebook status updates and Tweets having special characters which you don’t find them on your keyboard. These special characters convey expressions, feelings and adorn your text from aesthetics point-of-view.


Examples: ☺ ♣ ♥ ◘ ♫ ¿ ► ↔ » ☼ ■ ± √ ¼ Ω Ü £ ░  ... many more


Check the following examples on Facebook and Twitter


Facebook Update with special characters

Twitter Update with special characters


These are called Unicode Special Characters and there are many of them. You can use ALT codes to get these characters on screen. The idea is to keep the ALT key pressed and then type the CODE from your numeric keypad. Check the following Unicode special character list along with its equivalent ALT code. For language specific characters check Here.




Note:

  • Make sure you have the Num Lock ON.
  • You need the numeric keypad on your keyboard layout to use these codes else use the Character Map in Windows. Apple Mac OSX users can refer this link Here for using Unicode special characters. The ‘Character Map’ equivalent in Macintosh is known as Character Palette. You can read more on both of them below.
  • The ALT key has to be released once the code is typed.


■ How do I use Unicode special characters in Web Pages?

There are several ways you can type or import Unicode text, but each page must include a encoding meta tag specifying the utf-8 Unicode encoding, so that browsers render the text correctly. See the code below for HTML5:


  •  
  • <head>
  •  
  • <meta charset="UTF-8" />
  • ...
  •  
  • </head>


■ Use 'Character Map' in Windows if you don't have access to Web or can't remember ALT Codes:

Start → Run → charmap ↵


■ For Apple Macintosh users:

The ‘Character Map’ equivalent in Macintosh is known as Character Viewer. Read more on it Here.



Why Google’s Blogger is the best blogging service according to me

08 November, 2010 | | 2 comments |

Share |
There are many options available for having your Blog like Wordpress, Blogger, LiveSpaces, etc. But the best I'd recommend is Google's Blogger. Some of the prime reasons I rank it above WordPress, LiveSpaces

  • Provides customizations to the best possible extent including adding Scripts, custom HTML, etc to the template.
  • Publishing a post subsequently indexes the same on Google Search instantly. Check it out for yourself.
  • Has a lucid and user-friendly interface making it easy for any beginner to quickly get started.
  • Provides publishing over FTP or E-Mail. FTP publishing literally means publishing your blog to your personal website with content hosted over Blogger. E-Mail publishing offers making posts by sending an E-Mail to a E-Mail address which can be configured from the Settings Tab.
  • Direct integration with Google Picasa Web Albums and YouTube which provides a central repository for storing your images and videos respectively.
  • Support for both RSS and Atom(default) feeds with ample customization possibilities over the following things:
»» Templates – Here
»» Customization Scripts –Here





Check out Google’s Blogger Here:
    Google's Blogger service




My personal suggestions

• Once registered with an ID say ' abc ' you'll have your blog in this fashion - www.abc.blogspot.com

• Before registering, please think as to what subject you'll be focusing on for your blog. Choose an apt title for your blog and any posts you make so that search engines index your blog appropriately depending on your quality of content. This way you'll get some decent readers VIA search engine results.

• Blogger offers some cool features like a rich text-editor, 1GB image storage space over Picasa, comment moderation, Blog publishing via E-Mail, FTP hosting on your personal web-site, importing previous posts, various templates, etc.


So start blogging ... (just make it a habit)



Microsoft BPOS Suite: Getting started with the 30-day Evaluation

25 October, 2010 | | 0 comments |

Share |
Assuming you know about Microsoft BPOS Suite, it's time to get started with the 30-day Evaluation. You can read my previous post Here in case you want an overview of it. Following are the requirements for getting started with the 30-day evaluation:

  • A Windows Live ID (can be created if you don’t have one)
  • An internet domain with full access to administration panel (mandatory)

Now let’s get started with the registration process.


Step 1

Login into the Microsoft BPOS portal Here. Another way of viewing this page:

  •  Check out BPOS Suite under Products menu

Microsoft BPOS Portal


Step 2

Clicking the Free Trial »» link will open up a modal dialog suggesting the three steps to followed for the entire process. Read them carefully. You can click on ‘Get Started Now >’ to proceed.

Microsoft BPOS Registration Steps


Step 3

Clicking on the button will take you to the Microsoft Online Services Sign up portal.

Microsoft Online Services Sign Up portal


As depicted in the above image, you can you can click on 'Sign Up' to create a Windows Live ID and then register or click on 'Sign In' to register using an existing Live ID.

Step 4

On successful registration, you will be redirected to the Microsoft Online Services Customer portal.

Microsoft Online Services Customer portal


You will be asked for the following two fields:

  •  Promotion code (not required)
  •  Company Name (make sure the name/alias is available and is named appropriately)

By default, you will be the Administrator of the Microsoft Online Services account and will also have access to the Microsoft Online Services Administration center. In future, you can create more users and elevate them to be administrators.

A point to note, by default the Administrator of the Microsoft Online Services account will have his username –
admin@CompanyName.microsoftonline.com

In future, the subsequent users added will have their usernames - @CompanyName.microsoftonline.com.

The users will have access to their allotted MOS services via the MOS Customer portal Here.

On completion, of all the fields and before clicking I agree image button you will see the following screen.

Microsoft Online Services Customer portal - Domain Sign Up


Step 5

We are almost done with the Microsoft Online Services 30-day Evaluation. You will see the following page which means you will receive a confirmation E-Mail with login credentials and Administration center link from msonlineservicesteam@microsoftonline.com. Make sure you check your junk/spam folder in case you don’t see the E-Mail in your Inbox in 15 minutes.

Microsoft Online Services - Subscription Steps


You need to Login into the MOS Administration Center with your login credentials as provided in the confirmation mail and then get started with verifying your domain.

Note:

In case, you don’t see any E-mails in your Inbox and Spam folder, you can send a request for the same at -
msonlineservicesteam@microsoftonline.com


Step 6

The confirmation Mail will of the following format with Login credentials and Administration center link.

Microsoft Online Services Registration - EMail Confirmation


Now you can sign into the MOS Administration Center and start with the following:

  •  Verifying your domain for Microsoft Online Services.

Stay tuned for a post on the same on my blog.


Microsoft BPOS Suite: An overview

10 October, 2010 | | 2 comments |

Share |
What is it?

Microsoft BPOS (Business Productivity Online Suite) is Microsoft’s SaaS (Software as a Service) offering which offers day-to-day messaging via E-Mail, peer-to-peer audio calls, video conferencing, team collaboration via portals, presence availability via Communicator in the form of tools like Exchange Online, Sharepoint Online, Office Communications Online and Office Live Meeting Online. So its four software services bundled together for your daily business and collaboration requirements for large, medium or budding enterprises. These software services are hosted by an array of data-centers at Microsoft's privy sites.


Microsoft BPOS Services


Check out the comprehensive visual demo of BPOS below.


Click to view Microsoft BPOS Demo


Why enterprises should look forward to it?


Click to view how Microsoft BPOS works


  • Large, medium or budding enterprises who don’t want to invest in having on-premise infrastructure for their day-to-day messaging via E-Mail, peer-to-peer audio calls, video conferencing, team collaboration via portals, presence availability via Communicator, etc.
  • Enterprises can leverage business rich capabilities without the need to deploy and maintain software and hardware on-premise. These services can meet your needs for user productivity, high availability (Microsoft assures 99.5% and above up-time), security (read here) and 24/7 reliability.
  • It’s a subscription or pay-per-use based service which means you can back out from using it as per your own discretion. All your data can be backed up on-premise in that case.
  • Having said that, even enterprises having their infrastructure present on-premise can look forward to BPOS when they intend to scale up their hosted applications without investing in infrastructure (including floor space, H/W and S/W), reducing expenditure on maintenance and administration, renewing software licenses, etc.


How should I upgrade to BPOS?

  • Don’t have an on-premise infrastructure ready: If you are an enterprise or a start-up firm who doesn’t have an on-premise infrastructure, it’s going to be a fast adoption and a learning curve to look forward. All you have to do is:
  • Pen down your requirements from the BPOS suite of tools with the no. of users you wish to have. In future, it won’t be difficult to scale up your requirements/users coz it’s a subscription based service and you pay-per-use.
  • Go through the buying options carefully Here and select the right plan.
  • Register for the service Here and get familiar with the Administration and User center.
  • Register your company domain(mandatory) and get it approved via an E-Mail confirmation.
  • Check the Administration center, start and configure all the services you need. Make the necessary settings like adding users, giving the requisite permissions to the user, etc.

  • Have an on-premise infrastructure ready: This case deserves a separate blog post from me as there needs to be a clear strategy which an Architect has to design considering existing infrastructure and its tolerable capacity, critical data, security, co-existence expenditure, etc. A lot of case-studies and best practices exist for this case but one of the best amongst those which I found and which all experts recommend - co-existing your on-premise infrastructure with your cloud based service.

Stay tuned on this blog post as I'll be putting up some relevant links here later.




Try a 30-day evaluation of BPOS Here.




About the pricing?

There exists a separate offering for both new and existing customers and both of them are quite attractive. At the same time, it’s important that you think twice before you enroll your users coz its per-user-per-service pricing per month and not all features which we had in our on-premise set-up are there in BPOS. Check the image below for an idea.


Click to view BPOS features


Services preferred Price
Entire BPOS Suite which includes:
   - Exchange Online
   - Sharepoint Online
   - OCS Online
   - Live Meeting Online
10$ user/month
• Exchange Online 5$ user/ month
• Sharerepoint Online 5.25$ user/month
• Office Comunications Online 2$ user/month
• Office Live Meeting Online4.5$ user/month




Check this calculator for BPOS cost calculationClick to view Microsoft BPOS Price Calculator




BPOS Success story (over Google Apps in a way)

Some of the biggest names in the Fortune 500 list have started taking to SaaS platform and many more are following.

Check out some customer experiences on BPOS Here.




A wild thought I get while writing this – Microsoft just unleashed a wave which it is set to conquer.




Mumbai IT Pro - The inspiration behind it and my thoughts on it

26 September, 2010 | | 0 comments |

Share |
IT industry has been one of the most sought after industry for the current generation in INDIA. But, the right people with the right skills and technical proficiency have always eluded companies and private organizations. Add to it, people who work in large organizations always find themselves falling short of skills and knowledge to deal with their project work. And the ones’ who possess both are fighting to find people of their caliber so they could network with them. A point to note, as per NASSCOM - 70% of graduates passing out are unemployable (including those passing in IT and computers branch).


Enter Mumbai IT Pro – A technology based user-group, founded by die-hard Microsoft fanatics and partly funded by Microsoft has primarily focused on the above mentioned critical issues which the current folks have been facing. We impart education (the practical form) in the form of sessions including hands-on-labs, videos, guides, etc. Some of the best in this business including corporate trainers, Microsoft MVP’s (Most Valued Professionals), IT Specialists, etc are a part of this team and share the same view. Apart from imparting education, users of this group are also enlightened to some of the most precious products about to release, preview programs, offers, quiz, etc.

Example : Microsoft Windows 7, Office 2010, Sharepoint 2010, etc.


The sessions are very dynamic including Q&A’s, social networking, quiz, etc. In short, the audience always find themselves in a win-win situation from fun way-of-learning to winning some goodies for themselves. Every quarter, a kind-of mega event is organized called as Community Tech. Day which is held at a neutral venue (other than Microsoft Kalina office) where we get an opportunity to get in touch with more passionate people and get them involved in our activities. The Tech. Day witnesses audiences over 500 with more than 800 streams online. A record in a way. Till date, Mumbai IT Pro has around 5000 members with around 1000 members online over their portal every day. Our very notion ‘ Connect + Share = Grow ’ says the entire story. Adding to it, making people realize the idea that working isn’t just for earning but it’s actually fun and can be relishing and enjoyable.


From my contribution P.O.V., I have been an active and regular part of this group since 2008 and since August 2009 on their portal. I always had this opinion that writing articles, blogs and guides on important technical topics/products would not only come handy to users but would always stay on record of the search-engines on the web and on the Mumbai IT Pro website. Hence writing has been my primary focus. Secondly, I hold the position of social enthusiast in the user-group, which means I contribute towards the evangelism and marketing of all events and activities over all popular social networks including Twitter and Facebook. A matter of fact, I’ll always be seen at all of the events volunteering in all possible sorts and sometimes getting desperate to win some goodies for myself …. ☺ ☺


Over time, I’ve won some accolades for myself from the community and have been absent for some periods due to my personal/professional commitments …. ☺ ☺

Following are some of them ::

  •     My profile over Mumbai IT Pro Here.
  •     Blogger of the month award – June 2010 Here.
  •     'Tech. Ed. on the road event' on 15th May, 2010 :: Here & Here.
  •     One of the samples guides (E-Book) I wrote for the user-group Here.


I’ll be more than pleased to mention some of our prominent members from Mumbai IT Pro team :

  •     Ashwin Kini (Chairman of Mumbai IT Pro, MVP, IT Specialist)
  •     Shabbir Ahmed (CCIE, MVP and one of best speakers we have)
  •     Aviraj Ajgekar (MCSE, MVP and speaker)
  •     Ankit Jain (MCSE, IT Specialist at IBM)
  •     Cyril Thomas (MS Exchange specialist and in-charge of events/sessions)
  •     Mohit Panchal (in-charge of events/sessions)
  •     Chirag Panchal (MCT, MCPD, speaker, Corporate Trainer)
  •     Hari Maurya (in-charge of newsletters/banner designs)


For more details on Mumbai IT Pro E-Mail :: info@mumbaiitpro.org



Web Designing: CSS Box Model approach and some examples

11 September, 2010 | | 0 comments |

Share |
I have been doing my bit on Web Designing for Web 2.0 concept for quite some time now. Some related posts on the same :

Web Designing: Opting for XHTML 1.0 and CSS 2.0
Web Designing: Faster Websites means more Business


In this post I’ll be now covering a very basic Web Designing topic on CSS Box Model which will pave the way for you to think in the boxed approach and harness the power of CSS to get simpler designs while at the same time not losing the charm and looks of your design.


CSS Box Model


CSS Box Model


As you can make out, a Web-Page is composed (from CSS point-of-view) of several parts starting from outside. The idea for Web Designers and UI enthusiasts is to think in this approach while designing their layouts or writing a code snippet.

Some basic selectors of CSS like margin, outline, border and padding should be known to put things in place. A point to note, the above selectors are known as short-hand selectors and can help you save the effort by specifying the style, width and color in just one go. Check the following example:

padding: 25px;          //All four paddings are 25px

border:  5px solid red;     //Can mention the [width], [style] and [color] all together


Now trying some full-fledged examples to prove what I had mentioned previously - Using the CSS Box Model approach.


• Example 1: The basics

This example uses the CSS Box Model and the CSS attributes to style a DIV element. Check the CODE below. The CSS selector:property combination used:

• background-color: #F7F6F3;
• border: solid 4px White;
• outline: #E6E2D8 Solid 4px;
• padding: 20px;

CODE Snippet

  • <div style="background-color:#F7F6F3; border:solid 4px transparent; outline:#E6E2D8 Solid 4px; padding:20px; margin:20px;">
  •  
  •         This example uses the CSS Box Model and the CSS attributes to style a DIV element. Check the CODE below.
  •  
  • </div>


• Example 2: The Gmail style

This is the perfect Gmail Login page style if you might have noticed.

CODE Snippet


  • <div style="background-color:#E8EEFA; border:solid 4px transparent; outline:#C3D9FF Solid 1px; padding:20px;">
  •  
  •             This is the perfect <strong>GMail</strong> Login Page style which you might have noticed.
  •  
  • </div>


• Example 3: The W3Schools style

This is the perfect W3Schools style.

CODE Snippet


  • <div style="outline:double 4px #98bf21; background-color:#E1EFBB; border:solid 4px transparent; padding:20px; margin:20px;">
  •  
  •             This is the perfect <strong>W3Schools</strong> style.
  •  
  • </div>



Web Designing: Opting for XHTML 1.0 and CSS 2.0

13 August, 2010 | | 2 comments |

Share |
Creating Web sites is no more a new thing for the current generation. Considering the fact that here in Mumbai | INDIA even a 9th standard student is taught HTML and making web-pages in school explains the fast transition the Internet and web in particular has made. Moving ahead and to the point, choosing the right version of HTML and CSS surely makes sense and speaks volumes while answering questions in future on compatibility, code maintenance, leveraging W3C and browser standards, performance tuning, etc.

Hence the topic – opting for XHTML 1.0 and CSS 2.0.


Web Designing: Opting for XHTML 1.0 and CSS 2.0


A nice practice


The best part about opting XHTML for your design over HTML 4.01:


  • It is a stricter and cleaner version of HTML.
    XHTML
  • Provides a rational methodology of writing CODE where XHTML bears the data and CSS bears the styling. Both of them should not be interchanged.
  • All tags should be closed (including inline elements like <br>)
  • Tags should be properly nested.
  • The presentation part of the design/layout should be handled by CSS (internal/external/inline).
  • The single part attributes in HTML 4.01 should also have values (example: selected=”selected” in <option>).


Now read the following point over the above carefully :

  • XHTML 1.0 is W3C’s recommendation over HTML 4.01. XHTML 1.0 became a W3C Recommendation on January 26, 2000.
  • All browsers currently (including IE6) support XHTML. Going ahead, it would be XHTML 1.0 and HTML 5 (implicitly follows XHTML) that will have it's presence on the web.
  • Developing the design in XHTML makes it easy for others to understand the code and maintain it later. This in fact, is one of the top reasons why you should go for XHTML in place of the now obsolete HTML 4.01 and its variants.
  • Quite a lot of elements, attributes have been deprecated. Check the list Here.


CSS 2.0 isn’t a shift in approach like XHTML was from HTML 4.01. It has some fine feature additions and enhancements over CSS 1.0. Here are some of them :


  • CSSCSS pseudo classes like :link, :visited, :hover, :active, :focus, :before, :after, :first-child, :first-letter, :first-line.
  • The behavior attribute for Internet Explorer to customize events has become prominent.
  • Border and Outline : Custom styling w.r.t. color, width, style for top, bottom, left, right border and outline.
  • Text : Introduced the ‘ text-shadow ‘ property. This attribute ceases to work as expected in IE. This property is not recommended for use.
  • Absolute positioning : The ‘ position ‘ selector can now take ‘ absolute ‘ property. You can use the top, bottom, left, right selectors to specify the coordinates and position an element on a page.
  •  
    A good practice in using CSS is to use external style-sheets. This not only keeps the CODE compact but also helps making future modifications faster for the entire Website. Make sure you avoid internal style-sheets as much as possible.


    Some interesting facts which you might not have noticed :

    • Google recommends and advocates the use of XHTML 1.0 and CSS 2.0 but a closer look at the code of Gmail, Orkut and Blogger says a different story.
    • One of the primary goals and concerns for a Web-site from a client’s perspective is to convert the existing code-base to XHTML 1.0 and CSS 2.0. This explains the reason why you should keep up to both the version for any new code.
    • SEO (Search Engine Optimization) yields positive results if done on a code-base written in XHTML 1.0, CSS 2.0 and validated from W3C Markup Validation Service.
    • Microsoft’s site is one of the fewest I found amongst the technology heavy-weights which correctly implements both the standards.
    • No matter which programming language you use like PHP, C#.Net, Ruby, JSP, etc. on any platform say ASP.Net, J2EE, Ruby-on-Rails, etc. – what you eventually receive on the side of client is HTML, CSS and JavaScript (irrespective of versions).



    Web Designing: Faster Websites means more Business

    | | 0 comments |

    Share |
    Complex things are always easy and trust me (and Google), this proverb always stands true in the tenets of Web Designing. Increasingly, companies/projects/designers are opting for a Web 2.0 design but keeping the winning formula of Google in mind –

    " Faster Websites means more Business "

    If the Web stats. and most prominent examples are quoted like Facebook, GMail, Yahoo the above formula of Google indeed is true.


    A matter of fact, your site speed also helps in Search rankings.


    Faster websites help in Search Rankings


    Read more on it Here.


    One thing you’ll notice from the above article over the link - you don’t always have to go for fancy images, JavaScript, Flash content, etc. to attract the notice of your visitor. Using the above approach means using more space and bandwidth on the Web Server, and on the client side keeping him waiting for the entire thing to load which for everybody is frustrating and hence not recommended. Perhaps, that approach might work for your personal websites or blogs which witnesses at the most 1000 users per day but the same for enterprise projects isn't true!

    Web Users have now matured and are looking for content moreover of their interest and trying to get their intent completed ASAP. Hence the approach –

    A good and compelling design with faster loading


    Perhaps, after the advent of XHTML 1.0 and CSS 2.0, things have indeed changed in approach and practice. You can read my post on it Here.


    Inception – The film’s idea and my view

    18 July, 2010 | | 5 comments |

    Share |
    The film’s named Inception and it indeed lives to its name. Directed by Cristopher Nolan, the maestro behind ‘The Dark Knight’ comes out with another screen-scorcher and action-packed thriller. Long time since I saw a film like that, the last one being - The Dark Knight … :)


    Inception - The Movie


    My disclaimer

    I intend to write this post not as a review but as a base for those who’ll be watching this film after reading this post. The film’s tied up in a dream and anachronism right from the start which makes it difficult to comprehend for our die-hard Hindi film viewers (even I’m one of them). Probably, they have another reason to give this film a miss, but that’s what I don’t want to happen. The film is an extra-ordinary one with a great story, cast and some heart-stopping sequences. I’ll rate it a must watch for all boys! For girls/women - since they are moreover emotional animals than social, it would be your man’s call … :)


    The core idea

    The core idea of the film lies in the fact that to get a human-being to do something he has to have a perception regarding it or say he has to make a decision. But getting a stranger to have a perception when he's awake isn't a child's play and hence only a planned inception into human’s mind can help. That’s inception!

    An individual has to be put into a dream or hallucinated (the same dizzy feeling when you smoke or get drunk) by some way. And once that's achieved, you can give the mind the feeling of the unrealistic ambience around him and force him into a trap to achieve our motive. That’s the dynamic of the story!

    You can read more on the film at IMDB Here.

    You can check out the following trailer which will give you the gist of it.




    My view

    Now the story in the film falls into place with Leonardo DiCaprio in lead role and the one who plants the inception. He along with his accomplices uses all possible sophisticated technology, planning and the right people to get the job done. In the way, you’ll see some breath-taking sequences filled with action, mature humor, thrilling scenes and romance (oh yeah !).


    My rating : 5/5


    Watching the film on VCD/DVD at your home will take the joy out of the entire experience and also won’t do justice to the idea of the film! So do watch it at a Multiplex nearby ….


    Web Development: Printing a DIV tag using JavaScript

    08 July, 2010 | | 3 comments |

    Share |
    A majority of times, web developers have to print an existing content on their web page. To be practical, you target the contents of a <div> tag. While a majority would choose to search for a string like ‘Printing a DIV tag in ASP.Net’ or ‘Printing a DIV tag in PHP’; the right search string should be ‘Printing a DIV tag using JavaScript’. This is because irrespective of the server side programming language used, using JavaScript would be the most apt solution. Following method will help you achieve the same using simple and effective JavaScript. You can get the LOC(lines of code) to negligible if you implement the same using jQuery.


    Step 1:

    The <div> tag to be printed should bear the id="DivToPrint". Following HTML snippet depicts the same with comments(do read them carefully). The Button is used to execute the ‘PrintResults()’ function on Mouse click.


    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    •  
    • <html xmlns="http://www.w3.org/1999/xhtml">
    • <head>
    •     <title>Example for Printing a DIV</title>
    •  
    •     <script src="PrintScript.js" type="text/javascript"></script>
    •  
    • </head>
    • <body>
    • <br />
    •  
    •     <!-- The contents of 'DivToPrint' will be printed. Avoid giving any styles to this <DIV>. -->
    •  
    •     <div id="DivToPrint">
    •         
    •         <!-- All content here onwards will be printed -->
    •         
    •         <div style="text-align:center; margin:50px; border:double 4px BLACK;">
    •             
    •             <br />
    •                 This is the Content which will be printed.
    •             <br /><br />
    •             
    •         </div>
    •         
    •         <!--  *************************************** -->
    •         
    •     </div>
    •  
    •     <button onclick="PrintResults()">Click to Print</button>
    •  
    • <br />
    • </body>
    • </html>


    Step 2:

    Import the JavaScript file which contains the ‘PrintResults()’ function. The Script contains code for printing the DIV tag which follows the following procedure:

    • Read the DIV tag with id="DivToPrint" and access its HTML content in a variable.
    • Create an additional DIV tag which will have your custom HTML content to be printed. Add the custom HTML content to this DIV tag.
      • Create a pop-up menu using ‘window.open()’. Open the document stream to this document and add the contents of both the DIV tags and close the stream. This Window when opened will open up the print window. On successful print operation, this window will terminate offering no user intervention with the window. You can remove the ‘window.close();’ code if you want this window to persist.

      Following is the JavaScript code with detailed annotations as present in PrintScript.js


      •  
      • /* JavaScript function to print the contents of the DIV */
      •  
      • function PrintResults()
      • {
      •          
      •     //alert("Function Entered!");   /* Test if the function is entered */
      •     
      •     /* We can create a DIV with custom content dynamically to be printed. */
      •     
      •     var elem = document.createElement("div");
      •     elem.innerHTML = "<div style='text-align:left;'>"
      •                         + "<br />This is the custom CONTENT.<br /><br />"
      •                     + "</div>"
      •                     + "<br /><br />";
      •     
      •     var content1 = elem.innerHTML;      // content1 has to HTML code for our Custom DIV
      •     var content2 = document.getElementById("DivToPrint").innerHTML; // content2 has to HTML code for our 'DivToPrint'
      •     
      •     var win1 = window.open("", "Print_Results", "scrollbars=yes,width=800,height=700,toolbar=no,resizable=true,status=false,location=false");
      •     
      •     //win1.moveTo(150, 100);        /* Use this to move the Window to a specified location  */
      •     
      •     //alert(content1 + content2);   /* Will show the entire HTML CODE to be printed in alert Window for Test */
      •     
      •     //Open the stream to the win1 for adding the CODE
      •     
      •     win1.document.open();
      •     
      •     win1.document.write("<html>"
      •                         + "<head><title>Window to be Printed</title></head>"
      •                         + "<body onload='window.print();window.close();'>"
      •                             + content1 + content2 +
      •                         "</body></html>");
      •     
      •     /* You can remove 'window.close();' to avoid closing the Window if you want. */
      •     
      •     win1.document.close(); //Closing the stream is mandatory
      •     
      • }






      You can download the source code Here:





      Source code for printing a DIV tag using JavaScript