How to decide on SharePoint Metadata

Blog Moved: http://geekswithblogs.net/KunaalKapoor/archive/2012/05/08/how-to-decide-on-sharepoint-metadata.aspx

 

Changing SharePoint with – CSS3, HTML5 and jQuery

This post covers how to squeeze the most out of the platform we all love – SharePoint 2010 and push the boundaries to the max in-order to get acceptance and success.

SharePoint, is a terribly-complex and yet a wonderfully-simple product.  The prime objective of SharePoint is to allow the “Knowledge Worker” (business user) to automate and organize their work processes without the engaging IT at every step.

SharePoint has succeeded because of its ability to empower the end-user to create their own solutions to every day business challenges.  The reason for that success is that it is reasonably simple for the end-user to learn and use.

It delivers a lot out-of-the-box but in order to gain maximum out of it we can customize how users use, feel, look and gain out of SharePoint.

We are seeing some unifying technologies that promise to extend the capabilities of SharePoint while simultaneously improving user experience and simplifying the job of the SharePoint Developer.  This post primarily covers how to integrate and leverage JavaScript, jQuery, CSS3, HTML5, and the SharePoint 2010 JavaScript Client Object Model.

Most of us know from the buzz associated around HTML 5 and CSS 3 that they come out with a lot of useful and visual features which can help present SharePoint in a decorated envelope.

HTML5 and CSS3 are browser(client-side) technologies.  Even though these technologies emerged much later than SharePoint (in fact, the technologies are far from mature and standardized in browsers today),  there is much we can do to begin enjoying their benefits.  For the Microsoft Internet Explorer, you will need Version 9.0 or later.  For Version 8 users, the content would look much like it does on the left image above.  To provide the best and most reliable experience for IE 9.0 users, SharePoint 2010 Service Pack 1 should be deployed.  For development, Visual Studio Web Standards Update and Expression Web 4 Service Pack 1 should be downloaded and installed.  You will find articles online on how to select the new schema for HTML5 and CSS intellisense to work in Visual Studio 2010 and Expression Web 4 SP1.   As far as coding HTML5 in SharePoint Designer 2010,  avoid it.  SPD2010 has a nasty habit of removing anything it doesn’t like, and it doesn’t understand HTML5 schema.  I place the CSS3 styling in style sheets and apply it through classes.  I would guess the safest way to handle HTML5 features like canvas is to inject the markup with jQuery so that SharePoint Designer doesn’t see it.  Perhaps Microsoft will publish an upgrade for SharePoint Designer.

Here’s a step wise procedure to explore HTML 5 and how to integrate it into your SP2010 site:

HOW:

STEP1 – Open a COPY of your masterpage in your editor of choice

Now, let’s begin the fun part of this journey — setting up our first masterpage so that we can begin to experiment (play) with HTML5 and CSS3.
The first step is to create a copy of your preferred masterpage. Whether you prefer to start with “minimal.master”, v4.master, or an already branded masterpage of your own, you will want to create a copy to which you will be making some modifications. I perform most of my masterpage edits in SharePoint Designer 2010 so that I have access to the SharePoint Server and the results are at least reasonably rendered in the split-screen mode of the editor. Because of the limitations of that editor (not understanding the HTML5 schema and removing potentially risky code – as in all your HTML5 and CSS3 code) I set the default editor for CSS inside that editor as Expression Web 4 with SP1. This provides me the intellisense when working with the new CSS3 schema in my style sheets.

STEP2 – Modifying our document type declaration

In the illustration above, you can see one of the wonderful changes that came with HTML5.  The DOCTYPE declaration is easy to remember.  Browse to the DOCTYPE declaration in your new masterpage and change the line to read “<!DOCTYPE HTML>” (no quotes).  That’s really al we need to alert the browser that we are interested in using the new HTML5 schema when rendering our page – EXCEPT for one more tiny “gotcha” .  If you scroll down into the <Head> tag of your page, you should find this line –’ <meta http-equiv=”X-UA-Compatible” content=”IE=8″/>’.  This line instructs the browser to use IE8 mode when rendering your content.  As mentioned previously, IE9 or higher is required to take advantage of our HTML5 markup.  What we need to do is change that “IE8” to “IE9” or “IE10” depending on the browser you will be targeting with your page.  I chose “IE9” for the purposes of this post and the result looks like this illustration.

STEP3 – Create our Resource libraries in SharePoint.

This is where the more advanced SharePoint Developers may choose to diverge a little from the path, but the concepts remain the same whether you are deploying these resources through the UI, SharePoint Developer, or Visual Studio.  What we will be doing next is creating our folders for JavaScript libraries and files, CSS Style sheets, and any images that we need.  I have chosen to NOT deploy these resources to the SharePoint Root (14) folder as a farm solution.  My reasoning was to maintain compatibility with SharePoint Online and allow “tenant” solution activation and use of the masterpage solution from anywhere in the Site Collection.  As a result, I used Visual Studio and provisioned my folders under “the “Site Assets” library.  Regardless of your method of deployment, if you want to maintain compatibility with SharePoint Online, and/or reap the benefits of SharePoint monitoring and controlling your scripts that is available only for “sandboxed” solutions, then your resources should be deployed as a site scoped solution and stored in the content database.

STEP4 –Deploy your content (JavaScript, CSS, Images).

Using your preferred method (UI,SPD, VS2010), Deploy your content resources to the newly created folders. This will allow us to point our links and references to these assets from within our masterpage.  You will have a different set of resources, but the concept remains the same.  There is one file that you may find particularly interesting – test.js.  I created this file to allow a way to determine if I was successfully accessing these resources from my masterpage.  Because browsers generally fail “gracefully”, we want a way to determine whether our scripts have errors or whether they are perhaps not being included at all in the rendered content.  I chose a very simple JavaScript alert function which I can call from my pages as a test.  The simple JavaScript is below:

function

doit(){
alert(“Hi there … this loaded from the SiteAssets/js Folder”);
}We’ll get into the details later, but, by including this link and calling my function, I can test whether my function was loaded successfully by SharePoint

  <SharePoint:ScriptLink language=”javascript” name=”~site/SiteAssets/js/test.js” runat=”server”/>

STEP5 –Gluing it all together in your masterpage

Now we need to change our masterpage to include all those resources that we uploaded to our folders.  If you followed my folder structures, you can use the examples from my masterpage as a guide in defining the paths to your content.

Custom CSS Registration

First we’ll reference our CSS files.  By including <SharePoint:CssRegistration ID=”CssRegistration1″ name=”/SiteAssets/css/pTech.css” After=”corev4.css” runat=”server”/> within the head tag of our masterpage, we are instructing SharePoint to insert our custom CSS file, pTech.css , after the default coreV4.css.  This allows us to override the default styles with our definitions.  Certain values may need an “!important”  attribute to override the same attribute in coreV4.css.

Linking JavaScript Files and Libraries

The SharePoint namespace provides us a method to link our custom JavaScript  to SharePoint – SharePoint:ScriptLink.  The syntax is as shown below.  Remember, we are storing these assets in the content database, so the “~site/”  placeholder communicates to SharePoint to retrieve these assets from there.

<SharePoint:ScriptLink language=”javascript” name=”~site/SiteAssets/js/jquery-1.7.1.min.js” runat=”server”/>
<SharePoint:ScriptLink language=”javascript” name=”~site/SiteAssets/js/jquery-ui-1.8.17.custom.min.js” runat=”server”/>
<SharePoint:ScriptLink language=”javascript”name=”~site/SiteAssets/js/pTechmaster.js” runat=”server”/>
<SharePoint:ScriptLink language=”javascript” name=”~site/SiteAssets/js/test.js”runat=”server”/>

Linking images

In most cases, you will probably be linking your images from your custom CSS file.  In my case, that was the pTech.css file.  In my experience, the most reliable way to access these images is similar to the approach below, which is the style that sets the pattern behind the s4-Title area.

.s4-titletext

{
background-image:url(‘../../SiteAssets/Images/pattern3.png’);
}

STEP6 –Activating & setting your new default masterpage.

If you used Visual Studio and did not activate the solution, you will need to activate it now from the  Site Solutions Gallery.
And if you did not set it as the Site Default Masterpage in the Web Solution Package, you will need to do that now.  The easiest way to set and reset the Default Masterpage is through SharePoint Designer 2010.  Select Master Pages from the left navigator, and in the right pane select the row by clicking anywhere except the file link.  Once the row is selected, right-click the row and chose Select as Default Master Page from the drop down.  if you browse to the home page in your browser and refresh the display, your new masterpage should be active and any new styles should be applied.  If you have any difficulties, check to make sure the solution (if you deployed it as a solution) is activated.  Then verify that you paths to your script files are being accessed.  You can use the Test.js doIt() to test this.  Finally, using your favorite browser tools, such as IE Developer Tools, verify that your styles are being applied and not overridden by the defaults.  If time allows, I’ll package up modified solutions and WSP files of both the v4.Master and minimal.Master masterpages to make the effort a little easier for those folks facing challenges.

Now that’s all I have the time to cover, but the opportunities and options are endless.

Exploit and explore. Have a look at our website to find out what can be achieved using the fundamentals covered in this post: http://www.brightstarr.com/pages/default.aspx.