Finally managed to release a beta for juxtapo

Phew, I’ve been working hard at getting unit tests done, bugs ironed out and docs written so that I can get a release of juxtapo out and now it’s here.

juxtapo is a personal project I’ve been working on which gives in browser overlays and previews for template building. It’s been so valuable to me in my day to day work that I thought I should share it out.

So take a look and let me know what you think.

We’re building the new Lloyds.com

It’s now public that we’re building the new Lloyd’s of London website. The news went up on Aqueduct’s blog last week.

Progressive enhancement

This site is pretty feature rich and has been a lot of fun to put together so far. It has been very important for me to keep to good web standards and to make sure the front end is accessible to the broadest audience. We’ve used the progressive enhancement approach and built a rich interface on top of an underlying no-javascript-required base.

More info

The site is looking to launch in 2010, more info at http://www.aqueduct.co.uk/blog/2009/12/were-building-new-lloydscom.html

Javascript development and deployment strategy – Part 1

With the popularity of JavaScript rising significantly the amount of code within one project has grown to the extent where it needs to be separated in to separate files unless you want to be scrolling through thousands of lines of code. Whether you do this per class or namespace is another debate but I have been thinking through how all these separate files might be combined appropriately and compressed at deployment.

I have decided to itemise what I would ideally want to achieve and maybe some thoughts on how i could do it.

1. I want to be able to split code in to appropriate sections so that i can save them across multiple files.
   • this will make it easier to find code
   • this will make code more modular and help to debug
2. I only want one script reference within the html file even at dev time
   • i don’t want to annoy the back end devs with the hassle of different versions of the html head area
   • i want to manage easily the order in which scripts are loaded and which scripts are grouped together.
   • i want the dev to mimic the live environment as closely as possible
3. I want a system which is flexible enough to allow me to specify which scripts get combined on deployment
   • if there are sub sections to the code which change more frequently to others i don’t want the client to have to download the full whack when something small has changed
4. I want this to be extremely painless to implement
   • pain is not that desirable to me

With these four requirements in mind I set about my strategy and have come up with this:

1. a root file for each set which at dev time dynamically adds the linked files to the page
2. You can have as many root files as you want and you only need to maintain one list of links within each root file.
3. It only takes 3 very simple steps:
   1. copy and paste short section of standalone code in to a root file
   2. set the root file js name
   3. include a list of files which will be combined on deployment

In part 2 I will give a demonstration of this in action.

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.