Attack Of The Blob!

(Image taken from WikiPedia's entry on The Blob!)

Yesterday I had a frustrating day trying to modify a CSS file for a SharePoint look and feel task.

For some reason, no matter what I did, the CSS never refreshed in the browser. When viewed in SharePoint Designer it did show the updated version, but no amount of IIS resets, file deletion, or browser cache clearing prevented my web browsers (both Internet Explorer and Firefox) from rendering the old version.

Eventually I happened to look on the file system and notice a folder on the root called "blobcache". Aha! I was using a new Virtual Machine and unbeknownst to me Blob Caching had been enabled to improve performance.

Inside this blob cache folder I found my css file with a .cache file extension on the end of it. I tried to delete manually but it then started to show "File Not Found." errors.

The solution was to flush the blob cache. The option is on the site collection's Site Settings. Select "Site Collection Object Cache" and then click "Force this server to reset its disk based cache."

The BlobCache is enabled in the web.config file and looks like this:

<BlobCache location="C:\blobCache" path="\.(gifjpgpngcssjs)$" maxSize="10" enabled="true" />

I could just remove the css reference from the path but during development I think the better approach is to just to set enabled to false.

Interesting note: David Marsh and I think SharePoint Designer was able to view the newly deployed file because it was using WebDav and so was hitting the database rather than having IIS redirect it to the BLOB cache which is what happened to the browsers.

SharePoint Accessibility

One of the most painstaking web programming tasks is achieving web accessibility. Although estimates vary, between 5 and 10% of web users have some sort of accessibility need.

There are several standards, and determining which ones to support depends largely on your business needs and location. The US Government for instance has Section 508 compliance while the Canadian Government has Common Look And Feel 2.0 Accessibility standards.

Generally all of these standards build upon the specifications of the W3C's Web Content Accessibility Guidelines, specifically the Priority 1 and 2 requirements.

Some examples of WCAG requirements are that all web pages must have valid HTML and CSS code, images must have alternative descriptive text, and there must be alternative methods of viewing data or accessing page functionality. Accessible browsers such as JAWS cannot interpret client scripts or view images in the way that a regular browser can, but they can still provide a spoken translation of the markup code.

What happens if you have a SharePoint site that needs to be accessible? Well, unfortunately SharePoint currently outputs a lot of non-compliant code. Luckily, there is a lot of interest in the community in finding the workarounds, and SharePoint is nothing if not flexible.

 

Accessibility Options Within SharePoint

There seem to be a collection of elements that can go into creating a web accessible SharePoint site.

To begin with, you might wish to start with the Microsoft Minimal Master Page and a blank page layout. This will give you a fighting chance generating XHTML code, which is the first vital step. Zac Smith blogs about how to do this in detail.

Another requirement is to change the markup that the SharePoint web parts and user controls generate.

The easiest way to do this is to use a native SharePoint feature called "More Accessible Mode" that you can enable. This changes the UI rendering by applying Microsoft Active Accessibility (MSAA) standards for assistive devices. From the Microsoft Office Online site:

You turn More Accessible Mode on or off by pressing the TAB key immediately after placing focus on the page in a browser. Press the TAB key until you reach the Turn on more accessible mode or Turn off more accessible mode link. Even though the link to turn on More Accessible Mode is the first element in the tab order — which means that it is the first option that you interact with on the page — you may need to press the TAB key more than once to activate the feature.

Another way to change the rendering is to rewrite the output of web and user controls.

Web Parts are generally problematic as the HTML the web parts and the web part zones render is non-compliant. User Controls however are more easily changed. You could choose to do this using delegate controls.

At run time, the delegate control on the page selects the search control that has the lowest sequence number and displays the control to the user.

Another option is to use the .NET CSS Friendly Adapters that were introduced last year to help cleanup the markup the existing controls generate. John Ross (aka "Mossman") talks about this in his blog posting, "CSS Friendly Control Adapters in SharePoint 2007 (A Walk-Through)".

Client side scripts can be modified by using Regular Expressions to modify them at runtime (in the OnLoad methods of a page), but this may pose problems for future upgrades.

 

Third Party Solutions

HiSoftware has just announced that it will be partnering with Microsoft to create a Web Accessibility Kit for SharePoint:

The Accessibility Kit for Office SharePoint Server will include site templates, Web parts, documentation, instruction and tutorials enabling partners and customers to develop Web sites that conform to the guidelines set out in Section 508 of the U.S. Rehabilitation Act and the W3C’s Web Content Accessibility Guidelines (WCAG). The solution will also provide accessibility updates for Office SharePoint Server templates and Web parts for Web publishing, corporate intranet, team and project collaboration sites and more. This allows users to create a site and replace “out-of-the-box” MOSS components with accessibility kit templates, reusable Web content and Web parts.

Telerik offers a Rich Content Editor for SharePoint that contains more accessibility options and may be worth investigating.

I've heard SiteCore recommended as a good front-end for MOSS and it could be a useful alternative to a MOSS internet portal if meeting accessibility standards is a core requirement.

Third party web part vendors may generate more compliant markup.

Finally, you can follow the Glu Mobile approach and use SharePoint as a platform to help with content management and other functionality, but build an ASP.NET application on top of it, which will give you full control over what markup is generated.

 

More Information

• W3C Web Accessibility Initiative
• thekid.me.uk blog: Another Day, Another Accessible MOSS Site
• CSS Friendly Adapters
• SharePoint Accessibility - Is MOSS 2007 accessible?
• SharePoint 2007.com on Accessibility

If you have any tips or advice on how MOSS can be made more accessible, or any real world examples of MOSS portals that meet compliance standards, please feel free to post!

The Beta 2 of Visual Studio 2008 (aka "Orcas") has been released. To download it, point your browser at http://msdn2.microsoft.com/en-us/vstudio/aa700831.aspx.

If you're using the VPC version you'll first have to download and install the base virtual hard disk, Base01.vhd. It's available here.

After extracting the VPC or DVD, you'll also have to download and run a script to prevent the beta from messing up any existing Ajax development you may be working on.

Finally, if you are using the VPC image you can log onto the box using the username "Administrator" and the password "P2ssw0rd". It will prompt you to change the password once you log in for the first time.

Scott Guthrie has been blogging about many of the cool features that are contained in Visual Studio 2008.

Some of the things that I hope to try over the next few days:

• Working with Linq, especially trying to figure out how it would work in an n-tier architecture;
• Nesting master pages;
• Trying out the enhanced CSS support;
• Using the embedded Ajax framework and enhanced JavaScript intellisense and debugging.

Happy coding!

I've been struggling to implement Open LDAP Authentication. I've posted a technical article about it how to do it here. Today I ran into some more technical issues around it: the big one as mentioned is client integration but there is also an issue around web permissions.

I created a master page that had a variety of images, uploaded into a SharePoint portal's Style Library. This was done on the default port 80, which had Windows Authentication. When extending this app to allow LDAP Authentication, I had a problem: the image and css references in the master page all resolved to the new port number, and didn't show up, because they didn't exist in the SharePoint database for that application.

SharePoint Designer couldn't access the new LDAP site because of the client integration issue, so I couldn't upload the images and css to it.

As a workaround, I tried to hardcode the references to point to the port 80 site....it worked for some of my user accounts but not for others.

Finally I had to create a completely non-SharePoint site in IIS, make it anonymous authentication, stick all the images and css in there, and reference that site from the Master Page. Not pretty, but it worked.

The moral of the story: SharePoint and Forms-Based Authentication is PAINFUL.

I had to create a custom CSS for a SharePoint portal, and ended up struggling a bit with the SharePoint CSS classes. Not being much chop at CSS, the only way I could get the job done was with Firefox’s Web Developer plugin and Heather Solomon’s excellent SharePoint 2007 CSS Resource Chart (http://www.heathersolomon.com/content/sp07cssreference.htm).

In this latest project I had to modify the colours of the top menu bar. Easy enough, but I noticed when I viewed the dropdowns that if the submenu text was too long, it caused discolourations to appear in the flyout menu.



Notice that there is a light blue bar next to the submenu item I was hovering over. Personally I think with the default SharePoint colour scheme this looks quite nice. However, as I was asked to make the row all the same colour, I had to modify the menu flyout classes as follows:

.ms-topNavFlyOuts tr td
{
background-color: #C0C0C0;
}
.ms-topNavFlyOuts a:visited
{
background-color: #C0C0C0;
color: white;
}
.ms-topNavFlyOuts a:link
{
background-color: #C0C0C0;
color: white;
}
.ms-topNavFlyOutsHover a:link
{
background-color: #ffeaad;
color: black;
}
.ms-topNavFlyOutsHover a:hover
{
background-color: #ffeaad;
color: black;
}
.ms-topNavFlyOutsHover a:visited
{
background-color: #ffeaad;
color: black;
}
.ms-topNavFlyOutsHover tr td
{
background-color: #ffeaad;
}

The final result: