Weekly update #2

[Days spent on website this week: 4]

What I've added to the site this week:

• Added a Search box to the Navigation menu (which was in the original site map, but not shown on the web visuals). This works, but I may well have to tweak it at a later date to give simpler search results for a user - at the moment it shows too many irrelevant details in each search results.
  
  
  Search results
  
  
• Tweaked the navigation menu layout using CSS
  
  
• Recoloured the wiggly lines in the header and added in correct Bird logo
  
  
• Reduced height of the header - was too tall
  
  
• Spent a good few hours correcting an error that meant that Dates shown on the homepage were still appearing even if they were in the past (which I don't want showing up there). This turned out to be an error with the 'Date' module, which was fixed by upgrading to their latest dev version, and creating the View for the upcoming dates again.
  
  
• Created a number of Users and Roles. A 'Role' might be something like 'Editor' (I can create as many different Roles as I like), and I can define what an Editor can and can't do on the site. In this case, an Editor can moderate News and Dates items, and set whether they can appear on the site. A 'User' (e.g. John Smith) can be given one or many Roles.
  
  
• Added a new content type: 'News'. This allows a signed-in user to post a News item to appear on the 'Home' and 'News and Dates' pages. When the user has saved this item, it goes into a content queue which someone with the 'Editor' role can then view and decide whether the content should be published. When it is published, it has been set up to automatically appear on the 'Home' and 'News and Dates' pages. I've also set this up so that a signed in user can start writing their News item, save it as a draft, log off and come back to it later.
  
  
  News items on the Home page
  
  
• Using Actions and the Trigger module, I've set this up such that when a News item is submitted, this sends the Editors (i.e. probably just me!) an email letting them know that this has happened, so that they can log into the website and choose whether to publish it. It also gives the author of the News item a message to say that their content us under review.
  
  
• Added a 'Moderate content' menu to users given the 'editor' role, and set it up so that moderation can be done as a batch process (using the 'Workflow', 'Workspace' and 'Views Bulk Operations' modules).
  
  
  The Moderate Content menu
  
  
• Upgraded Drupal to the latest version (version 6.11). This is required when Drupal release a new version due to fixes/new features they've added, and is essential to do as soon as possible due to any possible security features (much in the same way you might need to upgrade other software).
  
  
• Discovered I've done something, possibly by changing the name of the content type 'events' to 'dates' (to keep it in line with the text in the rest of the site), that has messed up getting dates to appear on the Calendar. I'll have to fix this next week, but I've learnt an important lesson - don't change the name of a content type once you've started using it!

Weekly update #1

[Days spent on website this week: 4]

Some of the things I've been working on this, my first full week on the new website:

• Editing the web visuals, correcting the colours used (which were supplied to us in Pantone colours which don't appear as they should do on-screen).
  
  
• Reading up on Cascading Style Sheets (CSS). Embarrassingly, this is something I haven't really had to know too much about up until now using the Dreamweaver website (as Dreamweaver does some of the things CSS do without you having to look at it), but it is something any web developer really should learn about.
  
  
• Using CSS to style Drupal to look like our web visuals. As you can see, I've only done this on the background and header, but it already feels like it has our mark on it!
  
  
• Adding the 'Event' content type to Drupal, which means that anyone logged into the website can add a new event to the calendar. I've also added a calendar to the 'News & Dates' section, which automatically displays these events, as well as a section on the Home page that shows the next 5 events.
  
  
• Creating this blog!

Screenshots of the site as it currently looks:


Home page


News & Dates page

Although the calendar doesn't yet look how I want it to, the exciting thing is that it actually works!

If you're interested in what Drupal looks like behind the scenes, here's an example of the 'Views' module, which is used to set the functionality and appearance of various things (for example the calendar), although appearance-wise it only really allows setting what information is shown, and how it's laid out, rather than things like how it's coloured, whether it has rounded-corners, etc. (which needs to be done in CSS):


Drupal - Views module

Site design

Having worked with an external design company, Cleverbox (who are designing our new visual identity), the following web visuals have been produced based on the specifications for our new website, having consulted staff on requirements for the site (please note that the logo shown here is not the one that will be used):


Home


Learning


Learning>Faculties>Mathematics

The three designs show an example of how a user might progress through the site, from Home, to Learning (in the Primary Navigation), to Mathematics (in the Tertiary Navigation).

Please note that the final site will inevitably differ to these designs somewhat, due to technological restraints, as well as some minor cosmetic changes requested. Often it's hard to see how something will look at the Site Map stage of development (which happens before this stage and is basically a text-only blueprint for what needs to go where on the site), and therefore it is normal that some changes are requested only after the web visuals have been produced and people can actually see what the designer is thinking. That said, assuming I can figure this all out, the finished site won't look vastly different.

Due to delays in the starting of this project, the new website will not be complete when it is implemented (and replacing the current website, although this will be archived), and therefore will be more basic than that shown above (i.e. not all of the features will have been finished, and some things may function but not yet look like they should, but the most important information will be there). In the months following this, new features will gradually be added to the site until it's as close as possible to the design.

When I get the chance, I'll be producing some more up-to-date mockups than those shown above, of how the site may look when launched, and also how it should look upon completion (based on the feedback I've got from the designs shown here).

Why Drupal?

As mentioned in the previous post, I'll be building the new school website using something called Drupal. This is an open source Content Management System. But what does that mean?

• The open source part means that the software has been put together through a collaboration of individual members of the public (as opposed to teams of programmers at somewhere like Microsoft). These are folk who have created the software for the love of it and have done so without financial incentive. Drupal continues to be maintained and added to by such people, and projects are worked on by people all across the globe.
  
  
• A Content Management System (CMS) does clever things with your content, and keeps it stored in a separate database to the rest of the website. For example, when uploading a 'News' item to a CMS, any text/images/videos/etc. associated with that item are stored in their own area. This content can then be archived, used on more than one of the pages on your website (without saving the data on every single page it's used on), and 'themed' to look inline with the rest of the website. Should you change the look of the website, the theme can be changed, leaving the content itself untouched.

One of the many problems for me with the current webiste is that it doesn't do anything clever with content whatsoever. If I post a new vacancy on the site, with a deadline for applicants of 25 April 2009, this vacancy remains on the site after the closing date, and I have to remember to take it off myself (which I tend to do by adding a reminder in Outlook. If I remember to do so). The same applies to things like the Calendar on our homepage and, if content isn't removed at the right time, can leave the website looking out of date. Using Drupal means that when I add such a piece of content, I can set the date at which it will disappear from the website (despite this disappearance, the content will remain stored in the database should it be required again).

This leads me on to another great thing about using a CMS - all content is archived. Using the current system, whenever I delete a 'News' item or anything else in fact, that's it - it's gone forever*. Anything added to our new Drupal site will be stored permanently, including any edits to content - each version will be stored separately and can be 'rolled back' to, if required.

Once the 'core' version of Drupal is installed, I'll be able to add 'modules' to it. These modules are extra bits of pre-written code by Drupal fans that allow me to add some great bits of functonality to the site. There are thousands of modules out there, which include things like: calendars, online shops, polls, photo galleries, etc. along with things that are more to do with the nitty-gritty of making the site run.

Another difference when using Drupal is that, once the website is built, any updates/edits to content can be made using a web browser. Currently, the website can only be updated using Dreamweaver, which requires a knowledge of the software, and a computer with it installed. Once the new site is in action, and should we require it, content can be added using pretty much any computer (as most people have an internet browser) in a user-friendly interface. The new site will also use a new hosting company and will allow me to update the website from anywhere, which the current hosting doesn't allow. This caused problems, for example, during the recentish snow, when the school was closed due to the weather, but I still had to get into the building to post an item on the website informing parents and carers that the school was closed due to snow!

Drupal has many other benefits, and it would take me weeks to name them all, but future blog posts will include mentions of some of the new features it provides.



*I do periodically back up the whole website, although this doesn't catch everything.

A long time ago, in a galaxy far, far away...

... the Stoke Newington School website was created (http://www.sns.hackney.sch.uk/Index.htm). Well, in technology terms it was a long time ago at any rate - in real terms I'm guessing it was four or five years ago (I'm not 100% sure as my predecessor built it).

She did a good job in doing so and, having recently looked at many other school websites (including those of other Schools of Creativity, of which Stoke Newington is one of only a handful in the country), it's clear that our current website still looks better than a lot of the others.

However, due to the fast pace of web design technology, a lot has happened since then, and I've decided to leave the days of Dreamweaver behind and instead use a Content Management System by the name of 'Drupal'. More on that in my next post.

Our school is currently being rebuilt under the BSF (Building Schools for the Future) programme, with a new visual identity to go with this. It makes sense for work on the new website to happen at the same time and is a good opportunity also to start from scratch with what content we require and how we display it, as the current site has many pages, some buried fairly deeply within the site, that are no longer required.

It'll be a huge challenge for me, as it will involve having to learn a lot about software/code that I've never used before. But I think that ultimately it will be worth it and will make Stoke Newington School & Sixth Form continue to stand out as a school that, amongst other things, leads the way with its web presence, thus giving the school community stronger links*.

* Disclaimer: assuming I figure it all out. Gulp!