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.
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.
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:
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.
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.
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.
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
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.
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.
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.