Archive for the 'Development' Category

IIS 301s

Published by Andy Davies on March 17, 2010 in Development and Uncategorized. 0 Comments Tags: , , , .

We don’t use IIS very much, but a third party application that we are integrating into the corporate website runs on IIS, and today I had a very pressing need to add a redirect to one of the default application pages to one of our corporate site pages.

I discovered 2 very good solutions:

  • Add the following code to the top of the file you wish to redirect:

    1
2

    Response.Status="301 Moved Permanently"
Response.AddHeader "Location", "http://edgehill.ac.uk/rosetheatre/whatson/"

    This is quick and nasty way to redirect a page if you don’t have admin rights to your IIS server.

  • By far the best way is, if you have access to IIS admin, is to follow the following steps:

    1. Browse the website you want to do the redirect for.
    2. In the right pane, right click on the file you want to redirect, and click “Properties”
    3. Under the “File” tab, hit the radio selection “A redirection to a URL”
    4. Put the target in the “Redirect to” textarea.
    5. Make sure “The exact URL entered above” and “A permanent redirection for this resource” are both checked

Both of these solutions worked for me.

Learning Something New Every Day

Published by Andy Davies on March 9, 2010 in Development. 0 Comments Tags: , , , , , , , .

Today, I learnt about cononical linking.  Canonical linking is a way of letting search engines know that your content is accessible through multiple URLs, by publicly specifying the preferred URL of page content. This prevents Google penalising your site for having duplicate content.

I first came across the possibility of  search engines penalising sites for duplicate content when following WPDesigner’s excellent tutorial on creating WordPress Themes. Here, he recommends ways to change the content of pages which might be viewed as duplication by Google – Prevention not cure.

It wasn’t until today that Mike recommended that I “canonically link” Rose Theatre event pages because they are almost identical to the same page in the events section of the site. To do so, within the <head> tags of each Rose Theatre event page, add a link like the one below:

<link rel="canonical" href="http://www.edgehill.ac.uk/events/2010/03/09/stand-up-comedy" />

The link tag is an empty tag, and the use of the “rel” attribute defines the canonical nature of the tag. In our case we generate the link URL using symfony routing rules, URL parameters and the page slug so we don’t need to add the link for every page.

So now, when you visit Stand Up Comedy check out the source code and you’ll see the link, just like Google does.

Video, Silverlight and jQuery

Published by Mike Nolan on February 4, 2010 in Design and Development. 5 Comments Tags: , , , , , , , , , , .

During our 25 days of blogging last year, Sam talked about some of the new websites designs that we’ve been working on.  The 125 website was the first to go live last month and today we have released the website accompanying the exhibition for a new sports development.

For both sites we’ve developed some new ways of displaying information as well as improving the designs. Bot the homepage designs use jQuery to create visual effects on the page. 125 has multiple “slides” of information. Each slide transitions to the next after a short period of time or when you click the link on the right.

New Sport also uses some jQuery transitions, this time to change the background image and headline when you hover over links to each section.

There’s a few more new additions to the sport site. We were provided with a DVD containing lots of aerial photos of the campus to feature in a gallery. We’ve done the usual thumbnail gallery but we’ve also got a fancier way of showing off photos.

Microsoft Photosynth is a tool from their Live Labs project. It works by taking a set of photos, working out how they fit together and creating a 3D model in which you can navigate around them. Our set of photos is 71% “synthy” – a measure of how we matched they are – pretty good I’d say! The one negative thing is that viewing the resulting photosynth requires Silverlight on the browser.

Photosynth of Edge Hill

Another new development that’s being released for the first time on this site is a video browser. The observant may have noticed last week video pages on the Edge Hill site changed slightly, doubling the size of the video and moving around some elements on the page. This was to allow us to highlight related videos right along side.

Video player

One final little thing we’ve incorporated into this site is embedding the PDF of exhibition boards – normally a sizable download – into the page using Scribd. Using third party hosted services has risks associated with it but here it clearly benefits the user to be able to quickly scan through pages without the need to download a large file and open in Acrobat.

WordPress MU 2.9.1

Published by Mike Nolan on January 14, 2010 in Blogs and Development. 0 Comments Tags: , , , , , .

We’ve just upgraded to the latest version of WordPress MU – the system that powered blogs.edgehill.ac.uk. You can see that latest features in this video:

That video was embedded using one of the coolest new features in WordPress 2.9.1 – oEmbed. oEmbed is a way of websites sharing information about how content should be included in a page. Instead of having to copy any paste complicated HTML such as this:

<object width="425" height="339">
<param name="movie" value="http://www.edgehill.ac.uk/swf/flvplayer/player_flv_maxi.swf"></param>
<param name="allowFullScreen" value="true"></param>
<param name="flashvars" value="configxml=http%3A%2F%2Fwww.edgehill.ac.uk%2Fvideo%2F psychology%2Fxml%2Fembed"></param>
<embed src="http://www.edgehill.ac.uk/swf/flvplayer/player_flv_maxi.swf" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="339" flashvars="configxml=http%3A%2F%2Fwww.edgehill.ac.uk%2Fvideo%2F psychology%2Fxml%2Fembed"></embed>
</object>

We can instead just paste the URL onto a blank line in the post. oEmbed is supported right now by many popular websites such as Flickr and YouTube. We’ve also added oEmbed support to our own video streaming platform. Since we’re not one of the popular video sharing sites embedding our videos doesn’t work out of the box with WordPress but we’ve enabled it for our site. Here’s what it will look like:

Implementing oEmbed was fairly easy so keep an eye out for it on other content we publish.

2010: The Year of Open Data?

Published by Mike Nolan on December 24, 2009 in Development and We're looking at. 0 Comments Tags: , , , , , , , , , , .

I don’t like to predict the future – usually because I’m wrong – but I’m going to put my neck out on one point for the coming year.  2010 will be the year that data becomes important.

I’ve long been a believer in opening up sources of data.  As far as possible, we try to practice what we preach by supplying feeds of courses, news stories, events and so on.  We also make extensive use of our own data feeds so I’m always interested to see what other people are doing.  Over the last year there has been growing support for opening up data to see what can be done with it and there’s potentially more exciting stuff to come.

A big part of what many consider to be “Web 2.0” is open APIs to allow connections to be made and they have undoubtedly let to the success of services like Twitter.

Following in their footsteps have been journalists, both professional and amateur, who are making increasing use of data sources and in many cases republishing them.  The MPs expenses issue showed an interesting contrast in approaches.  While the Daily Telegraph broke the story and relied on internal man power to trawl through the receipts for juicy information the Guardian took a different route.  As soon as the redacted details were published, the Guardian launched a website allowing the public to help sort through pages and identify pages of interest.  Both the Guardian and the Times have active data teams releasing much of their sources for the public to mashup.

The non commercial sector have produced arguably more useful sources of data.  MySociety have a set of sites which do some really cool things to help the public better engage with their community and government.

In the next few months there looks set to be even more activity.  The government asked Tim B-L to advise on ways to make the government more open and whether due to his influence or other factors there are changes on the horizon.

But it’s set to be the election, which must be held before [June], which could do the most.  Data-based projects look set to pop up everywhere.  One project – The Straight Choice – will track flyers and leaflets distributed by candidates in order to track promises during and after the election.  Tweetminster tracks Twitter accounts belonging to MPs and PPCs and has some nice tools to visualise and engage with them.

I believe there will be an increasing call for Higher Education to open up its data.  Whether that’s information about courses using the XCRI format, or getting information out of the institutional VLE in a format that suits the user not the developer, there is lots that can be done.  I’m not pretending this is an easy task but surely if it can be done it should because it’s the right thing to do.

Since I started writing this entry a few days ago, the Google Blog post on The Meaning of Open. Of course they say things much better than I could, so I’ll leave you with one final quote:

Open will win. It will win on the Internet and will then cascade across many walks of life: The future of government is transparency. The future of commerce is information symmetry. The future of culture is freedom. The future of science and medicine is collaboration. The future of entertainment is participation. Each of these futures depends on an open Internet.

Let’s do our bit to contribute to that future.

Winter bugs

Published by Steve Daniels on December 21, 2009 in Development and Web Services. 0 Comments Tags: , , , , , , .

Here at Edge Hill we’ve used Trac for quite some time in Web Services. I’ve been here for more than a year and a half now and during this period the team have greatly increased their use of Trac for ticketing problems, monitoring source changes, and more recently tracking Scrum Sprint progress. While Trac is great we need more – we want more – we’re bias.

We use Confluence heavily, the Faculty of Health have it as home to many documents and information for staff, students and external partners, we’re moving our Intranet into it, we also use it as our team wiki for documentation and the like. So as you can see, we have a fair bit invested in it. Confluence is made by Atlassian and these great folks also make JIRA.

We’ve heard many great things about JIRA and seen it in action ourselves when dealing with Atlassian. We think it’s great, has good integration and with the GreenHopper it’ll help us with our Scrum agile project management!

That’s the plan anyway!

Whilst we’re at it we’re taking the opportunity to install FishEye too. This will give us some awesome insight into what we’re actually coding and allow some great collaboration and knowledge sharing without much effort at all. If your a stats junky the numbers and graphs this thing makes is awesome!

Do your use JIRA?

One project to rule them all (ala Second Life’s Linden Labs) or many little ones?

What are your favourite things about FishEye?

Form Follows Function, But How Far Behind?

Published by Sam Trafford on December 19, 2009 in Design, Development and Web Services. 2 Comments Tags: , , , , , .


I go into this blog-post blind, but I am conscious of two things: firstly that I have a question, but no conclusion; secondly, I’m haunted by an image of neatly aligned post-it notes, stuck on a whiteboard.

The Question

Does the designer need to be involved in a development project from conception to sign off, or should they be roped in once all development work is done?

That Image

This picture is taken from the presentation How We Make Websites by Matthew Wood and Michael Smethurst of the BBC, given at the Institutional Web Management Workshop 2009. I remembered the image as a page layout, and I imagined the different coloured notes to be some kind of attention mapping.

OK, I got it wrong as it turns out, the image is from the “Design your URI schema” slide. In my head it is linked with Matthew saying, and this could possibly be a misquotation “We don’t do any mock-ups in Photoshop” which is more likely to have come during the “Apply decor CSS” section.

What am I on about?

The workflow outlined in the presentation is dealing with masses of data, so I can understand why the web designer is being brought in late in the process.

We do however seem to have two concepts of design, and two stages of design: firstly design as a process of organising and structuring information; secondly design as a process of decoration. In essence, one is functional, the other is frivolous.

I agree that form should follow function; the site needs to work, but I think some degree of designed visualisation throughout the process can improve the final outcome.

Grids, Wire-framing, and Attention Mapping

Loads has be written about these so I don’t think I should write an overview, but I think they really help set the agenda for what you want an application to do. I think they can help a designer communicate ideas with a developer, and the developer can feedback whether or not something is workable…

Some Examples

I designed a homepage for E42, Edge Hill’s magazine and mocked it up in HTML and CSS. I figured it was a simple job for the developer, so I gave to him and said “Make it work!”. Presenting the stories in two columns turned out to be a nightmare, something to do with odd and even numbers of stories, and closing div tags. Anyway a bit of communication and a simple wireframe mock-up could have saved an afternoons work.

Conversely our main events page was created by the development team: it functions perfectly, but has no visual punch. If a monotone wireframe had been used, the focus could have been drawn quicker to the latest event; and if some attention mapping was done, you wouldn’t have to scroll down to find the button to the Events Timeline!

One Thing about Wire-framing

Wire-framing is great in certain contexts, getting the balance and composition of a static page right, early in the workflow, increases consideration for the end user throughout the process.

With applications like GO, where the end user can add and remove their own content, they are also creating their own page composition: In this context it is worth concentrating on the individual components.

By using Photoshop layers you can compare how the components sit next to one another, and see if you are achieving harmony or just making noise.

The Accidental

Experience has taught me the importance of planning up front: however nothing is conceived and visible in an instant. Just about every project hits a lull, where things look OK, but there is a lack of balance, or something just isn’t standing out the way it should do.

This is where a happy accident often occurs, usually by hiding layers in Photoshop the right juxtaposition of text, imagery and colour can miraculously happen, and everything falls into place.

This can’t be built in as part of your core plan, but by involving a designer throughout, little twists to the plot can happen, and you could end up with a more effective website.

To Conclude

Well the answer to the original question is no: let’s face it if something works it works; but people are becoming more conscious of the visual appearance of applications and how the intuitiveness of a layout gives them confidence as a user; also there is a psychological element that if something looks good it probably works better too.

Obviously there are other aesthetic questions: why do so many interfaces resemble a Mac operating system, or the dashboard of an Audi; but this is beside the point.

A load of “Gobbledigook” from an online form

Published by Maurice Savage on December 12, 2009 in Development, Infrastructure and Web Services. 0 Comments Tags: , , , .

You have Spam!

Web content editors, designers and developers have all worked hard to make their website interesting, attractive and functional.

A lot of time and money is spent promoting the website. People find the website talk about it and link to it from their website, blog, wiki, bulletin board ect.

Search engines then trawl through the internet looking for links and keywords (among other things). The more links the search engine finds the more interesting the target website must be (all these people linking to it, it must be good)

The search engine goes away tots up all the scores. The one with the most incoming links is the winner. They will be at the top of the search engine ranking for that month (Its not really that simple but I think this is basically what the spammers tell their clients).

The Gobbledigook you receive from the form submission always contains links to websites. The spammer is not trying to get you to click the link. Spammer wanted a link published on a website by filling in a form that would update the blog, wiki ect. Spammer is trying to get as many links as possible pointing at the clients website, increasing the site’s search engine ranking. The results can then lead to the site being listed ahead of other sites for certain searches, increasing the number of potential visitors and paying customers.

How is it done?

A computer programme is used this searches for publicly accessible forms. Once a form is found it adds content into all text fields, a non existent email address into the email field and HTML containing a link into the text area field usually comment, content or message field.

All websites that accept content via a form are at risk of receiving spam via their forms.

Solutions

Disallowing multiple consecutive submissions
Spammers often reply to their own comments. Checking that the users IP address is not replying to a user of the same IP address would help reduce the spam flooding our in boxes.
This however proves problematic when multiple users, behind the same proxy, wish to submit the same form which is quite often the case here.

Blocking by keyword
Spammers have to use relevant and readable keywords so the search engines can index them effectively
Spam could be reduced by blocking the keywords they use simply banning names of casino games, popular pharmaceuticals and certain body enhancements.

Drawback the list could be quite extensive and would have to be maintained.

CAPTCHA
Is a method used to display an automatically generated image of a combination of numbers and letters. The user then enters the letters in to a text field to validate the form.
A computer programme can not read the image and the form will not validate.

Drawbacks sometimes difficult to read and the form needs to be refreshed or submitted several times before you get a readable image.
This system can prove difficult or impossible for the visually impaired who rely on screen readers. Providing an audio version of the characters can resolve this.

CSS
Use CSS to hide a text field. A programme will find the field enter data our validation checks the field if it contains data the submit fails.

Drawback if a screen reader is used it will find the form filed and ask for data the form will then fail validation.

Distributed Solutions
Originally developed for use on blogs but now most form data can be submitted to one of the services.
When a user submits a form the content is sent to one of the services. The content is then filtered. The service looks for links and keywords it also compares the content against a database of known spam content already submitted. The content is then given a score and sent back to your server. The server then accepts,flags or rejects the content based on the values you set.
Akismet, Defensio, Mollom are some of the web based distributed services.

Drawback Valid users can be blocked. If a user is wrongly flagged as being a spammer it can be difficult for that user to post data to websites using the same service.

Wiki Meetings

Published by Steve Daniels on December 10, 2009 in Development and Web Services. 5 Comments Tags: , , , , .


Early on in the New Year the old Intranet here at Edge Hill will be abolished. All of its content will be available directly through GO. The platform we’re hosting this content under is called Confluence and it’s a wiki.

To the majority of people this won’t mean much right now but we’re hoping in the future it will. You’ll be able to manage your own content on GO for dissemination to colleagues you work with on a daily basis and those you work with across the university.

This new way of managing things will hopefully reduce the amount of out of date information that is out there. You shouldn’t be emailing around Word documents within the university. Because the moment you send that document it’s out of date, your recipient just doesn’t know it yet!

Lets take Meeting Agenda’s as an example. The below video describes why you shouldn’t be emailing meeting agendas and why you should start using a wiki:

The Faculty of Health is already doing stuff like this, posting meeting dates in their calendar, having agendas online, with misc documents for the meeting available on each meetings dedicated pages. You department can too!

Another brilliant use of the wiki is to keep track of action points:

These excellent videos are courtesy of Stewart Mader’s 21days you can find a lot more videos there and other extremely useful wiki related resources.

More calendars to watch

Published by Mike Nolan on December 5, 2009 in Design, Development, Just for fun and We're looking at. 1 Comment Tags: , , , , , , , .

We’re not the only kid on the block this December so be sure to check out some of these other advent calendars:

24 Ways

If web design is more your thing then you could do worse than following 24 ways for the next few weeks. Variety of well known web folks share their ideas as blog posts… Kind of like the Web Services blog but without the well known bit!

Equally useful is the archive right back to 2005 so you’ll have stuff to read into the new year.

University of Warwick

This will be particularly interesting to watch because I thought about doing an advent calendar for main Edge Hill website a few months ago but it didn’t get off the ground in time.  Ideas for next year though!

Symfony Advent Calendar

The original symfony advent calendar, published in December 2005 was one of the key things in persuading me to adopt symfony for the Education Partnership website.  Symfony now forms the core of the corporate website, GO and Hi – it’s adoption at Edge Hill has radically changed the way we build websites.  This year the symfony project have created a brand new advent calendar and I look forward to following it.

Newby’s Advert Calendar

Binary Calculator from Newby's Advert CalendarIf you like surreal comedy advert calendars satiring local newspapers then there is literally only one advent calendar for you this year! The Framley Examiner created this quite a few years ago but I still love it.

There’s a few I’ve come across – post a comment to tell us about any other cool online advent calendars, or even just to tell us what the one on your wall is like.