View the category Guerrilla Gardening for the full story

Adapting the Course page content

Any hopes of getting hold of a clean and complete data source of every course’s details were soon dashed. The CMS – which of course thinks in pages in most instances. This is great as it makes updates and devolving of content submission far easier, but I need to work around it.

Title, URL, and Course Type

The CMS will easily give up Course Title and URL, but accessing award, availability for clearing and other attributes of the pages would require far more work, possibly HTTP spidering.

The structure we gave to the Courses area when last reworked thankfully lends itself well to grabbing these additional attributes -  denoted by their publication. Each of the three Course Types are published to a location determined by its award type:

<site root>/courses/undergraduate/

<site root>/courses/postgraduate/

<site root>/courses/cpd/

With a new templated page in the CMS connected to the content of the Course pages,  I can quickly generate a rough data source for Course Title and URL into a list. I can bypass the Compliance and tidy management tools for the template, allowing me to make whatever document format I need from the source.

Availability for Clearing

For a short time each year the Clearing attribute comes into play. The courses available for Clearing are a subset of undergraduate courses, created by adding an attribute to each page.

Another great feature of the CMS is keyword assignment, which allows pages to be aggregated into lists of links and titlesfor use elsewhere.

Keyword assignment list creation in the CMS

The Clearing keyword allows me to create such a list, giving me my final data source.

For the moment I’ll leave each output page as a simple HTML list of the format:

<ul>

  <li><a href="courseurl_1">Course Name 1 <a/></li>

  <li><a href="courseurl_2">Course Name 2 <a/></li>

</ul>

With a snapshot of data output to files, I can begin to put together some of the proposed components. An added bonus here is that my simple data sources have by necessity been separated by Course Type, which is no bad thing as that’s the fisrt fork in the road for most visitors to the Courses pages.

With luck, more tomorrow.

Plot Chosen. The Courses area.

View the category Guerrilla Gardening for the full story

It’s a high traffic part of the site presenting probably the most important pre-application content we have.  Over the years it’s had gradual improvements, most notably a modified mooTools accordion feature to accommodate the various Course Types in easily identified compartments which open and close with a click.

The page content is fully accessible without Javascript, and is fine for screen readers.

By Default all accordion boxes are closed, except the Search All Courses box

The Course Page

The purpose of the page is – unsurprisingly – to effectively get a prospective applicant to the course or courses that interest them, it should be so usable, you don’t even know how you arrived at the course you came for.

When first loaded four compartments are visible, with Undergraduate courses, Postgraduate courses and CPD (Continuing Professional Development) all represented in a closed state.

By default the bottom box is open, providing a course search facility.

The Undergraduate Section open, showing the A-Z Listings links

Opening any Course Type shows a clickable alphabet, clicking on the letter ‘A’ in Undergraduate takes you to the undergraduate ‘A’ Listings page.

While only one set of A-Z links  is ever visible, there are three sets of Alphabetised links embedded in the page.

The Course Search does not filter by Course Type as the alphabetised links do. As it employs the website-wide search facility, it temporarily navigates the user away from the courses area to display search results within the usual search page,  related side links, which makes return navigation problematic.

A typical use case involving searching for multiple courses might take a user across two pages before reaching the course page and the a single return step to the Courses Home.

The (Rough) Plan

Rough Draft of the proposed layout

Off the top of my head, I’d like to:

• remove the repeating elements presented on the page
• develop a dynamic single-view for all courses, with minimal clicks or page loads
• keep the search results within the Courses part of the site
• show links to courses from the outset, with no A-Z pages required
• Maintain the usual editing and update regime via the CMS
• Maintain accessibility

Whether or not it results in a deployable application doesn’t yet concern me so much as the steps necessary to achieve it – which in themselves will be useful later on.

As all the information resides in the Content Management System or its published pages, the first steps involve overcoming retrieval and formatting.

For starters I’ll need to:

• Adapt the current Courses area content into some sort of re-usable data source
• Use the data sources to populate an easy-to-use course selector
• Justify my own time by developing some ideas for re-using the data elsewhere

Something else was going on in Colchester around the time of IWMW 20009. While delegates of the Institutional Web Management Workshop were hearing the mantra ’seek forgiveness rather than permission’ for any improvements we’d like to make to our institutional web provision,  The Human Shrub was hard at work with some unapproved upgrades of his (or her) own.

Inspired by the guerrilla gardener I’ve decided to take some direct action on an area of our site. I’m going to tell no-one, and work by cover of darkness. I’ve yet to decide on an outfit.

The aim is to use spare time and all available methods to improve the look and feel, user interface and usability of the area in a non-invasive way, avoiding all the usual time constraints. By the end I hope to have something suitable to replace or update the area that all stakeholders will find difficult to refuse.  To do this:

• All work must be carried out on breaks, out of hours or overnight
• No live content will be touched, proof of concept will be devised & created as alternate services
• Extant environment and systems will be respected – that means working with the CMS, with the means of editing and deployed using the normal methods
• Ease of integration or implementation a major determinant of any approach (so no recreating the whole site as a Symfony plug-in)
• As with any unofficial, unbidden and unapproved endeavour, the goals will shift & adapt as and when.
• Horticultural metaphors will abound.

The Museum at Sidmouth Folk Week,  More photographs here

“It is … a surprising fact that there exists no properly funded centre in Britain to research and celebrate our native traditions and vernacular arts.

It is my aim, that over the next few years, such an institution will exist, which will address this situation”

Simon Costin

You can read more about Simon Costin’s plan to celebrate and educate British folklore and heritage and the current Museum Tour on the website, http://museumofbritishfolklore.com.

I am not alone in being fired up the by plenaries, parallels and general fervour(?) that the Institutional Web Management Workshop inspires.
My first act towards devil may care guerilla HE web improvement begins today, as I re-present  – to members of our Marketing Team – some of the main concepts discussed by Michael Smethurst and Matthew Wood from BBC Music in their plenary on how they make websites.

My audience has been primed with the knowledge that they don’t start with wireframes and Photoshop mock-ups, so there’ll be plenty to talk about. This will hopefully inform an upcoming reworking of our student centred web provision. I’m also arming myself with Mr Boag’s Making your killer applications… killer! slides – covering everything from Desktop convergence to thinking in apps, not pages, and the challenges of bringing these methods into the HE web.

Avebury Megameet 2009

My Design to promote or otherwise furnish information about this year’s Avebury Megameet.

Sadly I didn’t make it. Next year I hope.

Today is my (and indeed the) last day of the Institutional Web Management Workshop 2009, the main event for discussing web developments across all aspects of the HE sector.

IWMW2009 Keynote 1 Tuesday 28th 2009 University of Essex, Colchester

I’ll be getting around to blogging in more detail about the things I’ve seen, heard and participated in, such as Agile development , Scrum, site search evaluation, course finders and killer apps as well as system management techniques and discussions on how best the sector communicates in future, regionally, nationally and broader still.

The food, people and low-flying geese have been great too.

We still have lots to come this morning, with presentations about how the BBC produce websites and the products of the Developer Lounge event.

Making the transition to Symfony 1.2 and Doctrine all at once was never going to be easy. As Doctrine is the future of symfony and I have a distinct Propel addiction, the following steps (based on the early stages of the excellent Jobeet tutorial) will take no time at all and can be practised often to help cement the process in mind until it’s second nature.

This is no substitute for (and will make little sense without first reading) the Jobeet tutorial, nor the documentation. This is just my daily-Symfony-quick-setup-zen-cheatsheet. I hope in time to be doing this one-handed in my sleep while vaccuuming the stairs. Copy+Paste strictly out of bounds.

If you choose to use this and repeat it often, you’ll have setup your web server config’ on your development setup ready to run this, so those steps are omitted.

Posted here in a bit of a rush to respond to Jwage’s request , I hope they live up to expectation, and that someone finds them useful. I am bound to have made some errors, some omissions or not been concise enough, please let me know.

Create The Project

• mkdir <path_to_local dev>\newsymfonytest
• cd <path_to_local dev>\newsymfonytest

From now on<path_to_local dev>\newsymfonytest is your <project> directory

• php <path_to_symfony>\data\bin\symfony generate:project newsymfonytest
  • Note that this creates an absolute path to Symfony in <project>/config/ProjectConfiguration.class.php which you should update.
• copy the sf folder from  <path_to_symfony>\data\web\ into <project>/apps/frontend/web or alias it in your server configuration Alias /sf “<path_to_symfony>\data\web\sf”

• Now Symfony is linked from your current location, the <project> root, test local access to Command-Line Interface with php symfony cc
• Check the application has been created by visiting in browser

Setup Doctrine Database

• Replace the setup function in <project>/config/ProjectConfiguration.class.php

public function setup()
{
  $this->enablePlugins(array('sfDoctrinePlugin'));
  $this->disablePlugins(array('sfPropelPlugin'));
}

• Publish any plugin assets: php symfony plugin:publish-assets
• Clear the Cache php symfony cc
• Remove Propel structure, create Doctrine structure:
  • rm config/propel.ini
  • rm config/schema.yml
  • rm config/databases.yml
  • mkdir config/doctrine
• create database in MySQL: mysqladmin -u root -p create newsymfonytest
• << enter password when prompted or omit -p if you have no password set (shame on you!) >>
• setup the YAML schema in <project>/config/doctrine/schema.yml

Here’s my sample schema.yml, lifted from the Jobeet tutorial:

# config/doctrine/schema.yml
SampleCategory:
  actAs: { Timestampable: ~ }
  columns:
    name: { type: string(255), notnull: true, unique: true }

SampleItem:
  actAs: { Timestampable: ~ }
  columns:
    category_id:  { type: integer, notnull: true }
    type:         { type: string(255) }
    is_activated: { type: boolean, notnull: true, default: 0 }
    email:        { type: string(255), notnull: true }
    expires_at:   { type: timestamp, notnull: true }
  relations:
    SampleCategory: { onDelete: CASCADE, local: category_id, foreign: id, foreignAlias: SampleItems }

•  Generate a new Databases.yml:

php symfony configure:database –name=doctrine –class=sfDoctrineDatabase “mysql:host=localhost;dbname=newsymfonytest” <mysqluser> <mysqlpass>

Build!!!

• php symfony doctrine:build-model
• php symfony doctrine:build-sql
• php symfony doctrine:insert-sql
• php symfony doctrine:build-forms

Add Sample Data

Create fixture files:

Here’s my sample <project>data/fixtures/categories.yml, again lifted from the Jobeet tutorial:

SampleCategory:
  design:
    name: Design
  programming:
    name: Programming
  manager:
    name: Manager
  administrator:
    name: Administrator

Here’s my sample <project>data/fixtures/items.yml, curiously similar to one from the Jobeet tutorial I’ve said so little about.

SampleItem:
  job_sensio_labs:
    SampleCategory: programming
    type:         full-time
    is_activated: true
    email:        job@example.com
    expires_at:   '2010-10-10'

• Populate with php symfony doctrine:data-load

Generate first app

• php symfony generate:app –escaping-strategy=on –csrf-secret=1sTh15r34l1y53cur3 frontend
• Visit the site root you set up in your server configuration in your browser

Generate first module

• Then, using the format:

  "php symfony doctrine:generate-module --with-show --non-verbose-templates <appname> <modulename> <modelname>"

php symfony doctrine:generate-module –with-show –non-verbose-templates frontend sample SampleItem

• Visit the module in your browser
• Rinse and repeat

Thursday November 6th, 1130 – 1700. Mild for the time of year, sunny then overcast (arguably the ideal weather for it)

Having now covered excavation, identification, the recording system for trenches, finds, contexts, photographs, basic observations and interpretation, today I set about my first graphic site recordings.

Read the rest of this entry »

Inspired by Jonathan Snook’s article on animating backgrounds using Jquery, I had a snoop around in Script.aculo.us for the equivalent methods to create moving background images. It wasn’t long before I hit a wall with the Effect.Morph method and its inability to parse the CSS values for background-position.

Effect.Morph simply examines current CSS values and calculates new ones, iterating through a number of transforms according to the duration of the morph. Colour values are handled appropriately, but for positioning only a single value is anticipated. As the second value of background-position is never parsed, you’re limited to horizontal animation.

see a demo of the problem.

So I’ve created an extension, similar to Alexander Farkas’ for JQuery, to manipulate background-position both vertically and horizontally using the same syntax as Effect.Morph.

See it in action on Horizontal and Vertical background animations and Vertical only.

Using the Effect.Morphbgpos extension

Include in the <head> the Prototype and Script.aculo.us libraries as usual. Download the extension and include it after the main libraries:

<script src="bgposeffect.js" type="text/javascript"></script>

Jonathan did a great job describing his HTML and CSS markup (including how to show the final states of the animation using CSS just in case Javascript is not present) so I won’t repeat it all here. Suffice to say this is very similar: an unordered list with an id, containing three items, containing only links.

<body>
...
<ul id="a">
	<li><a href="#">Rivera</a></li>
	<li><a href="#">Miro</a></li>
	<li><a href="#">Varo</a></li>
</ul>
...

Then (somewhere after the list) include the code observers that restyle your links on mouseover and mouseout:

<script type="text/javascript">
$$('#tabs a').each(
	function(s) {
		s.observe('mouseover', function(s){
			this.setStyle( {backgroundPosition: "0px 5px"});
			new Effect.Morphbgpos(this, {
			  style: 'background-position:0px -40px;color:#cc0000',
			  duration: 4.3
			});
		});
	 	s.observe('mouseout', function(s) {
			this.setStyle( {backgroundPosition: "0px -40px"});
			new Effect.Morphbgpos(this, {
			style: 'background-position:0px 5px;color:#c0c0c0',
			duration: 4.3
			});
		});
	});
</script>

Note that in the example each of the observer methods sets the state directly before animating it. Mouseover begins from the original state set in the CSS while Mouseout sets the finished state (as in the CSS link hover state ) before animating back to the original state.

How it works

Very simple. Effect.Morphbgpos is a modified version of Effect.Morph that anticipates having to handle two sets of pixel values. It reads the current states into x and y variables, manipulates them and writes out the appropriate CSS, repeating until the final state is reached.

Handling Other Effect.Morph CSS properties

The extension will pass any CSS that isn’t a background-position property to a new instance of Effect.Morph.

You should be able to replace all Effect.Morph calls with Effect.Morphbgpos, and then simply find+replace them when this functionality becomes available in a future version of the framework.

Limitations

This first version only handles explicit background-position statements, using pixel values, and duration is the only supported option.

As it’s only extending Script.aculo.us by a fraction it seems to be robust across the browsers I’ve tested.

Download & usage

Download the js file here (or here as text). Use just as you would Effect.Morph by settings CSS property-value pairs, and a duration.