Folder sharing in Google Docs

Finally – Folder sharing in Google Docs

Amazing…thank you Google for adding folder sharing into Google docs!

This has been a long anticipated update, now when you are in a folder you can use the “Share this folder” dropdown to share all the items within it.

Tutorial with examples for making web pages more accessible.

Quick start accessibility

I have been looking at web accessibility recently due to an up and
coming project with a global client who needs their site to be AAA
where possible.

It has made me realise how small things can make a huge difference. Here are some quickstart ways to enhance the accessibility of your sites.

1. Hidden accessibility navigation for screen readers

You should include navigation for the sections within each page. This makes it much easier for people using screen readers or mobile devices to go directly to the content they want.

The CSS:

#nav-acc {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 39px;
}
#nav-acc p    { position:absolute; top: auto; left: -10000px; width: 1px; height: 1px; }
#nav-acc ul   { list-style: none; margin:0; padding: 0; }
#nav-acc li    { list-style: none; list-style-image: none; }
#nav-acc a    {
    position:absolute;
    display: block;
    top: auto;
    left: -10000px;
    width: 1px;
    height: 1px;
}
#nav-acc a:active,
#nav-acc a:focus {
    z-index: 1000;
    top: 0;
    left: 0px;
    width: 350px;
    height: 20px;
    background-color: white;
    border: 1px dotted #ccc;
    padding: 5px;
}

The HTML:

<div id="nav-acc">
 <p>
     <strong>Accessibility links</strong>
 </p>
 <ul>
     <li><a accesskey="c" href="#content">Jump to main content [Access key 'C']</a></li>
     <li><a accesskey="n" href="#nav-primary">Jump to primary navigation [Access key 'N']</a></li>
 </ul>
</div>

Acessibility Items

There will also be various elements within your markup which need to be hidden on screen but help describe items for screen readers. For this you can use the following class and markup:

CSS

.acc-item { position:absolute; display: block; top: auto; left: -10000px; width: 1px; height: 1px; }

HTML

<span class="acc-item">description of something for screen readers</span>

2. Label form information

When structuring your forms I expect you will already be using labels for input controls but if you have a series of inputs relating to a single label (ie Address) you should include labels for each of the inputs (ie Address Line 1,Address Line 2) here is some markup to show how we could achieve this. Note that we use the acc-item class to hide the individual labels.

<fieldset>
 <span class="labelHeader">Address</span>
   <label>
     <span class="acc-item">Address 1</span>
     <input type="text" />
   </label>
   <label>
     <span class="acc-item">Address 2</span>
     <input type="text" />
   </label>
   <label>
     <span class="acc-item">Address 3</span>
     <input type="text" />
   </label>
</fieldset>

3. Document strucure

Make sure that the structure of your markup is in the same order as you
would want to read it. A good check for this is to turn off all styles
within the view menu of firefox.

Conclusion

I hope this has been helpful, it is a really quick start for anybody who hasn’t got a huge amount of time to go any deeper. For further reading the reference below goes in to more detail. It’s not particularly hard to implement these practices so lets make the web a more accessible place.

References

http://webaim.org/techniques/css/invisiblecontent/

Sitecore Certified

I have just completed my sitecore 6 training and am now a sitecore certified developer.

I have been really impressed by the way that sitecore is structured. It does a very good job of separating content from presentation, giving the developer huge flexibility whilst retaining an easy to use interface for the user.

I also think the way they have designed the content and a lot of the core system around the same granualar concept of a content item is amazing.

It’ll be interesting to start using it in a real working environment to see where the weaknesses are. I’m especially curious as to whether it can maintain XHTML Strict in a .Net world where people only seem to care about Transitional.

A couple of example sitecore projects completed at Aqueduct include Manchester City Football Club.

If you’ve used sitecore let me know your thoughts.

Client XSL Transformations from Asp.Net Webservice Response

I wrote previously about how you can use jQuery to query Asp.Net WebServices. We are now going to build on that by using xslt to transform the xml returned from your web service and insert it in to your document.

Download the full script

We are going to need two further functions, the first to load your xslt file and the second to do the transform.

Remember not to crowd the root namespace so start by building upon our previous DT namespace:

DT.xml = {}

Then add the functions:


DT.xml.loadXMLDoc = function(fname) {
var xmlDoc;
// code for IE
if (window.ActiveXObject) {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load(fname);
return (xmlDoc);
}
// code for Mozilla, Firefox, Opera, etc.
else if (window.XMLHttpRequest) {
xmlDoc = new window.XMLHttpRequest();
xmlDoc.open("GET", fname, false);
xmlDoc.send("");
return xmlDoc.responseXML;
}
else {
alert('Your browser cannot handle this script');
}
}

DT.xml.xslTransform = function(xml, xsl) {
// code for IE
if (window.ActiveXObject) {
ex = xml.transformNode(xsl);
return ex;
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument) {
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml, document);
return resultDocument;
}
}


Now we can update the HelloWorld method to add the transformed html to the DOM. This needs to be run once the DOM has been loaded so you would either put this code within the jQuery ready event or a user inititiated event.


DT.wsCustom.HelloWorld(function(xData,textStatus){
xsl = DT.xml.loadXMLDoc("yourxsl.xslt");
doc = DT.xml.xslTransform(xData.responseXML,xsl);
$("#HelloWorldDiv").html(doc);
});

As you can see this is extremely simple but has the potential to completely revolutionise the way that you create web applications.

HTML 5 examples and tutorials

I thought I would post a few really helpful html 5 examples and test pages.

A good page to keep track of is http://www.w3.org/html/planet/

Drag and Drop (works in firefox 3.5)

http://decafbad.com/2009/07/drag-and-drop/api-demos.html

Test Elements

This is a layout which uses the new header, nav, aside and footer elements to build a page as well as a few other new HTML 5 tags.
http://www.brucelawson.co.uk/tests/html5-elements.html

Layouts Tutorial

Another HTML 5 layout but as a tutorial.
http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/

Building an XHTML5 document

http://www.hagenburger.net/2009/03/html5-xhtml5-with-css-for-safari-firefox-opera-ie

Enjoy checking out html 5

Aqueduct

I have just taken up a new position as Front End Web Developer at Aqueduct who are a creative agency based in Farringdon.

This means I should be able to have more of a focus on front end technologies.

More to come…

Example using jQuery with ASP.Net (SOAP) WebServices

I don’t know about you, but I’ve had enough of slow loading aspx pages because of the huge ScriptManager JavaScript files that are needed to be downloaded. I also don’t see why I should have to register web services through it to be able to use them in my client side code.

Once answer is to use jQuery. We can access Asp.Net web services (SOAP) removing the need for the ScriptManager on your aspx page.

Asp.Net web services either use SOAP or JSON and for this post I will show you how to access your webservice using SOAP.

This is how you can do it:

First of all I like to organise all my JavaScript in to namespaces so that it stays neat so I declare the DT object.

var DT = {}

Then because we will be using Soap I have created a useful Soap function called getEnvelope which saves having to add the envelope xml each time you want to build a request.

DT.Soap = {
  getEnvelope: function(body) {
    var soapEnv =
    "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
        <soapenv:Body> \
           " + body + " \
        </soapenv:Body> \
     </soapenv:Envelope>";
    return soapEnv;
  }
}

You can use this ws object each time you define a new webservice.

DT.ws = function(wsUrl) {
    this.wsUrl = wsUrl;
}
DT.ws.prototype = {
    wsUrl: null,
    getData: function(soapEnvelope, fnComplete, fnSuccess, fnError) {
        $.ajax({
            url: this.wsUrl,
            type: "POST",
            dataType: "xml",
            data: soapEnvelope,
            contentType: "text/xml; charset=\"utf-8\"",
            complete: fnComplete,
            success: fnSuccess,
            error: fnError
        });
    }
}

Defining a new web service would then look something like the code below. We first create a new ws object instance and then define the HelloWorld method.

DT.wsCustom = new DT.ws("wsCustom.asmx");
DT.wsCustom.HelloWorld = function(fnComplete, fnSuccess, fnError) {
    var soapEnv = DT.Soap.getEnvelope("<HelloWorld xmlns='http://yournamespace.com/'></HelloWorld>");
    this.getData(soapEnv, fnComplete, fnSuccess, fnError);
}

Finally you can use your new web service with the following code.

DT.wsCustom.HelloWorld(function(xData,textStatus){
    alert("This is the xml response: " + xData.responseXML);
});

This is just a quick start to using jQuery to access Asp.Net web services. Here is part 2 to include XSL transforms and more advanced web methods.

Hope this helps.

Clergy Shirts

Recently I have been working on a website which sells clergy shirts and clergy accessories which has been an strange experience trying to make dog collars and gowns look attractive. Not sure if I have achieved it but it has been fun.

I will say of the Lord

Est and I have finally got this recorded, it’s a bit ropey but we had fun. God is good!!

Ruth Fazal at Lewin 16th May

Ruth Fazal is at Lewin on the 16th May. Should be a good evening!