When you’re building a web site in Site Studio you use the Site Studio functions to build the navigation, right?

Well, not always. It’s true that out of the box Site Studio comes with a number of features to build navigation based on the node hierarchy but you don’t have to do it that way. For a recent client we built the navigation features using a simple static list. This post explains how we did it and why.

To create our navigation contributors and site administrators, created a site structure in the usual way using Designer or Manager. Nodes were assigned Primary and Secondary templates as normal. The navigation, however, was contributed in a single region based on a static list. In this list the contributors were given different columns representing the navigation levels and they created links to page sections or secondary pages for each navigation element. We also provided additional options to control when and how links are displayed. With this method the entire navigation was built using a simple static list rather than basing it on the Site Studio node structure.

Now, you’re probably wondering why on earth we would do this given that Site Studio already provides some functionality in this area. Well there are a number of reasons which are shown below:

1. Control over urls. Our client wanted to have control over the url for each page. In particular they wanted the urls to remain very short i.e. www.sitename.com/legal or www.sitename.com/latest-press-releases. These urls would have resulted in a very flat site hierarchy which makes little sense in the navigation. By separating the navigation from the hierarchy you get the best of both worlds.
2. Secondary Pages. A static list navigation means that you can easily include secondary pages in the navigation and they can be located wherever you like.
3. Labels. The navigation label can be easily changed without altering the page url. They can also be updated using Contributor rather than having to go into Site Studio Manager.
4. Sitemap. The same static list can be used to generate a sitemap and options can be put in to change the order or include and exclude links from the sitemap as compared to the navigation.

While this method won’t be applicable to all websites it does present an alternative view compared to the standard Site Studio functionality. Interestingly this is also the approach followed by the new WebCenter Sites.

Websites are using more and more user generated content now and it is this exposure to dynamic content that allows hackers to plant mischievous code. The reason this works is down to the way your browser interprets the HTML of a site. As soon as it comes across a <SCRIPT> tag it will attempt to execute whatever JavaScript is located within it.  If a third party is able to run JavaScript without you knowing, then they can potentially access any information the browser holds such as cookies, sessions or even redirect you to other sites.

Persistent Vs. Non-Persistent XSS

XSS boils down to two main types: persistent and non-persistent. Persistent XSS can potentially be more damaging as it involves a server storing content submitted by a user. For example if you register for a website and set the username to “<SCRIPT>alert(“hello there”)</SCRIPT>” then each time you load a page where the username is displayed you will receive a JavaScript alert box welcoming you. Now replace that harmless script with malicious code and anyone who views the value for your username will potentially be at risk. What is even more worrying though is that if this username value is used in an SQL query then your application could be tricked into exposing sensitive data by modifying the query or even deleting data, this is also known as a form of SQL injection. However persistent XSS attacks like this can be caught by “cleansing” your inputs. Each time user content is submitted just make sure that it only contains alphanumeric characters.

Non persistent XSS is a different kettle of fish as it involves modifying the URL to embed scripts directly into the HTML. Say for instance the URL parameter “&name=” is used in your application to simply print out the value without any processing. Then a malicious user could modify the value of this parameter to include some devious scripting e.g. “&name=<SCRIPT>….</SCRIPT>”. Once again this can be prevented by cleansing any URL parameters that are used for creation of HTML.

Cross Site Request Forgery (XSRF)

XSRF is a more serious exploitation of cross site hacking technique. For example if you are using an online bank to transfer money and then leave the site without logging out your session will still be active. If you subsequently view a mischievous website that has an html element which knows your session is still available then it can be used to perform an action on the banks website without you even knowing. The html element might look like this: <img src="http://www.mybank.com/withdraw?account=current&amount=1000000&to=Fred&accnum=12345678">. Banks are now starting to be more aware of cross site requests and most are now requiring the use of a card reader to make withdrawals. But another simple way to stop this from happening is to log out of your bank account when you are finished!

What can I do?

So hopefully, when developing applications, you will now be aware of the threat that XSS poses, but the trick is to be clean! However you must also be aware that it is out there and when browsing the web be vigilant at all times.

Staging is the new Contribution

In SiteStudio we’re used to having Contribution and Consumption environments in Production and a Staging platform for testing releases. In Sites they use slightly different terms, the environments there are called:

• QA, for testing
• Staging, for content publishing and approvals
• Delivery, for consumption

So QA is the new Staging, Staging is the new Contribution and Consumption is Delivery. Confused? You’re not the only one!

Security

Sites contains some powerful tools for controlling who can add and edit pages. What it doesn’t have, out of the box, is the ability to apply security to the consumption of content. This is an area where SiteStudio is very strong and it is particularly useful for the delivery of intranet sites. Of course it is possible to implement similar functionality in Sites but you have to do a bit more work.

Out of the box

One of the big differences between Sites and SiteStudio is that while SiteStudio is supplied with a whole library of code from which to build your site, WebCenter Sites doesn’t. Well, officially it doesn’t. There are demo sites available but they’re not supported. Also, several of the features such as the DAM capabilities, image editors and document converters are currently provided by third parties. I expect we will see these being driven by WebCenter Content in the future.

Contribution

A key strength of Sites is its ease of contribution. Although it uses the fckEditior like SiteStudio, it just seems to have been integrated really nicely. There are two ways of updating pages, through the administration screens and directly on the pages themselves. Both methods have their pros and cons but they’re both really intuitive and within a matter of minutes we were updating our demo sites and publishing articles.

Articles can be edited using a form based interface….

…or they can be edited in-line on the page.

Navigation

Now in the SiteStudio world you generally start off a project by trying to pin down the navigation so you can work out templates you need. In our experience this approach is very hard to do in practice. Users don’t want to commit to a navigation early in the project and it’s hard for them to visualise the site structure without having pages in place. On recent projects we’ve therefore focused more on defining different types of content pages and fitting them together in the navigation later in the project. It’s good to see that the folks at WebCenter Sites also recommend this approach.

Personalisation

The other big difference in Sites is of course the personalisation. This is a very powerful aspect to the product and one that will appeal to web site managers and contributors. Sites has the ability to apply segments to logged in or anonymous users based on their profile or their journey around the site.

While the primary focus for Sites personalisation has traditionally been for retail sites there’s no reason why it should be limited to products. For any website the ability to understand a user’s profile and point them towards your latest relevant research or thought leadership paper is a great bonus. The focus here is on relevance, if you can give users the information they need without them having to look for it, they’ll keep coming back.

Overall

Overall we think the future for WebCenter Sites looks very bright indeed. The product is extremely powerful but maintains a strong focus on usability. There isn’t a clear migration path from SiteStudio but we’ve already kicked off some internal projects to migrate some of our products to Sites and we’re working with clients on their roadmap for using Sites.

We are proud to announce we are Google Enterprise partners! 

Since its inception, I have been one of Google’s number one fans so I am (personally) very pleased that ECS and Google have partnered together. 

Imagine Google.  For work.  Other than a pay rise, is there any greater wish of employees? 

We will act as an extended part of the Google Enterprise team offering value-added search solutions and services for businesses.  As it’s Google, you might wonder what extra value we could possibly add (Google is perfect, right?)… well, we have a few ideas for some specific uses of search within our sectors which we will develop further in the upcoming weeks.   Apart from that, we will assist organisations with their overall information classification exercises required for successful enterprise search.  Plus we’ll roll up our sleeves and get dirty with the techy stuff to ensure that Google Enterprise Search provides real benefits to our customers. 

The ECS Google team is busy back in the office getting equipped for the colourful future ahead so watch this space for more developments soon!

Finally a few weeks out of the office—a holiday!  I reclined my seat and browsed the in-flight entertainment magazine to plan my movie-watching for the next 10 hours.  I counted my British coins and my American change to choose how I should fund my gin and tonic.  I looked out the window and I cringed.  I was in “the Cloud”.

Everyday I overhear “cloud” numerous times.  The word is no longer representative of daydreams, relaxation, picnics or walks in the park.  Instead we all use it to boost credibility when we discuss our IT strategies.  It’s our overused code word to signal we are “in the know”.  If you’re not talking “cloud” you must not be “thinking outside the box”, “innovating” or “pushing the envelope”.  Blah blah blah.

Hopefully, it will quickly die out and we can soon look up to the sky and think of The Simpsons once again instead of SaaS.  Does anyone remember how long it took to once again enjoy Starbucks after the Java language originated?  (Interesting fact according to Wikipedia: the language was originally called “oak” after an oak tree outside one of the originator’s office but was later changed to “java” because of the large amount of coffee consumed by its creators.)  I wonder if some programmers only drank tea until their bugs were resolved.

Of course Cloud technology will have a dramatic and positive effect on businesses and consumers but I just wish they had called it something else.  Why do we let nice words creep into the office?  It’s not like we allow the opposite to happen—we don’t go home and request our spouses to create “more innovative” meals or to give us an “elevator pitch” before selecting which tv programme to watch.

I think we should be able to safeguard a list of words to ensure they never become a technical buzz phrase or ever associated with work.   Although I probably wouldn’t have had the foresight to add “cloud”, even if the list did exist, maybe someone out there would have.

So as a start to that list of taboo words that should never be allowed into a PowerPoint presentation or sales meeting, here are my first four:

• Margarita
• Bath
• Jacuzzi
• Laugh

I am interested to know what you would add.

The homepage

The home page is where the latest assets (i.e. image, video, audio files) get displayed, and it allows users to search across the asset repository.

Slider
jQuery allows us to add a slider to the page, which essentially returns a number that corresponds the horizontal position of the ‘nubbin’ (I made that up, but it sounds right). We’ve used to enable users to dynamically control the size of the image thumbnails in the results.
To implement the slider control, you need to specify a number that represents the left most slider position, and the right most position, known as the min and max. You also need to specify the starting position of the nubbin on the slider, and also provide a call back function to call when the user moves the slider.

$("#slider").slider({
        min: -58,
        max: 150,
        value: '-58',
        slide: function(event, ui) { changeThumbSize(ui.value) }
});

The actual numbers for the min and max can be anything, but in this case they are used to calculate the amount of pixels to change thumbnails by.

clueTip
In case the thumbnails don’t grow big enough for users, we’ve also made use of the jQuery clueTip plugin to display larger versions of images when the mouse cursor is hovered over the thumbnail. This is a nice and simple plugin which looks for certain anchor tags, and relies on them having a ‘rel’ attribute containing the URL of the larger version of the image.

The JavaScript looks like this:

$('a.image_popup').cluetip({
        width: '470px',
        dropShadow: false,
        dropShadowSteps:3,
        hoverIntent: {
               sensitivity:  1,
               interval:  400,
               timeout: 200
        }
});

So this looks for all anchor tags with a class of ‘image_popup’ and applies the clueTip plugin to it, passing in some initialization variables, see the clueTip options page for more.

Tip: In MediaBank the URLs to images are in the form of service calls, and not direct references to images, e.g:

?IdcService=GET_FILE&dID=123&Rendition=PreviewLarge&RevisionSelectionMethod=Specific

This can cause issues with jQuery plugins (including clueTip) where they expect URLs to end with an image extension, and will otherwise fail to load. But you can overcome this by fooling the jQuery parser into thinking there is an extension by just modifying the URL slightly, e.g:

?IdcService=GET_FILE&dID=123&Rendition=PreviewLarge&RevisionSelectionMethod=Specific&extension=.jpg

Only do this if you’re sure the images are all jpg, which in our case they are!

Colorbox
Users can also click on the magnifying glass icon for each image to view a larger still version, and start a slideshow of all the other image results on the page. For this, we used the jQuery Colorbox plugin:

The colorBox plugin is a popular one, and I see it pop up all over the web. In our implementation, we have anchors on the page with the same ‘rel’ attribute, which colorbox looks for and works it’s magic on:

$("a[rel='slideShowItems']").colorbox({
        maxWidth:"90%",
        maxHeight:"90%",
        slideshow:true,
        slideshowSpeed:4000,
        slideshowAuto:true
});

Uploading
One way for users to upload images in MediaBank is to use a jQuery plugin called Plupload. It’s able to run on an impressive array of platforms, including HTML5, Gears and Flash, and provides an attractive way to upload multiple files.

Holy Crop!
One of the latest features in MediaBank is the addition of image cropping. This can now be done by users within their browser, using a jQuery plugin called jCrop.

The plugin superimposes cropping facilities over the image, allowing users to click and drag portions of the image to replace the existing image with, or create a brand new image from.

The jCrop plugin also allow the developer to make updates to the cropping region in the UI after the region has been initialized, and as such you assign the initialized region to a JavaScript variable which can then be manipulated.

For example, our code initializes the cropping region as such:

var api = $.Jcrop('#cropbox',{        
    onChange: showCoords,
    onSelect: showCoords,
    boxWidth: 690,
    aspectRatio: 0
});

And subsequent calls are made to the ‘api’ object depending on what the user chooses e.g.

api.setOptions({ aspectRatio: 1.78 });

Incidentally, the ‘showCoords’ function referenced above sets hidden fields with coordinates of the cropped image, when is then passed to a Java method which performs the crop.

Manage Media Projects
Part of the MediaBank application allows users to manage projects, or jobs of images, in a file-system type interface, with all the benefits of the Oracle WebCenter Content platform in the background. As well as all the regular features you’d expect of a file system such as creating folders, moving and renaming images, etc, users can download the whole project as a zip, and route the job through Oracle WebCenter Content approval workflows.

While a lot of this comes from custom Oracle WebCenter Content code, the front end interface is an implementation of the jsTree jQuery plugin.

To read more about MediaBank, see http://www.extended-content.com/ecs-website/ServicesSolutions/Solutions/MediaBank/index.htm

The four components are usually shown in the diagram below:

To my mind this diagram doesn’t really show how the components fit together or indeed why they fit together. There’s going to be a lot of connections between the components in fact a lot of the power of the platform is that the tools will be working together to form a coherent platform. Personally I think the diagram below gives a better view of how the bits and pieces fit in.

You’ll notice that I’ve added another component in there, WebCenter Commerce. This represents the Oracle ATG application which is used for creating ecommerce sites. It’s not officially part of the WebCenter Suite but it can integrate with both WebCenter Content and WebCenter Sites so it would seem to fit into the picture quite nicely. Guess we’ll have to wait and see what happens…

CCLA is an investment management for charities, faith organisations, and local authorities. After our initial engagement based on the ECS Iris solution, we continue to work closely with CCLA.

CCLA Reduce Costs with Oracle Universal Content Management

CCLA Increase Efficiency with Oracle UCM

We began working with Royal Botanic Gardens, Kew in 2008 to re-launch its website based on Oracle Content Management (now Webcenter Content). We enjoy our continued relationship with Kew today.

Oracle At Work: Kew Botanical Gardens

Ed at our Infrastructure Show stand

ECS had a great three days at the Infrastructure Show this week at the NEC in Birmingham.  We partnered with Sword CTSpace to promote FusionEnterprise for the engineering market as well as our own Webcenter-based solutions for engineering documents and drawings.  We relished the opportunity to learn more about the latest industry developments and we enjoyed meeting many new faces. 

We had a competition to win an iPad and the winner was an employee from CH2M Hill who is working on the Thames Tideway project!  Unfortunately I didn’t go home with an iPad but I did collect a nice stash of stress balls (in the shape of diggers and hard hats) as well as a very cool JCB reusable bag!