I've just tacked on a subdirectory to my main Drupal site (http://www.sns.hackney.sch.uk) giving the new area: http://www.sns.hackney.sch.uk/carnival2010
As I still don't consider myself a Drupal pro, and need to do a relatively fast job, I'm building this new section in Dreamweaver (I know, a bit of a cop out, but I don't have time to do it another way). Something relatively simple I've not had to work out until now is the following problem:
'How can I set my site up so that someone can visit http://www.sns.hackney.sch.uk/carnival2010 and have that direct to index.html without anyone having to type that?'
A friend helped me out on this one. Apparently it depends on whether your server uses apache or not (you'll need to check this with your hosting company). Mine does, which means it's the '.htaccess' file I needed to tinker with. Drupal creates one of these files automatically in the root of your site, so for example I already had one in http://www.sns.hackney.sch.uk which you should be able to see in the cPanel for your site. (If you were to view it before uploading your site, it's a hidden file when it lives on your computer, so you'll need to set your computer to show hidden files if you want to see it there.)
Using the information on this page and this one I discovered that I needed to create a new and separate '.htaccess' file inside my 'carnival2010' folder. As it seemed a bit of a faff creating a new one of these files, I fudged it as follows:
- In the file manager in the cPanel provided by my hosts, I copied the .htaccess file that Drupal had created in the root of my site, and pasted it into the root of my 'carnival2010' folder.
- I edited this file from my file manager, deleting everything in it, and replacing the text with 'DirectoryIndex index.html'.
-That's it! Now I can just visit http://www.sns.hackney.sch.uk/carnival2010 and that loads the 'index.html' bit.
Friday, 23 April 2010
Wednesday, 18 November 2009
Stopping the Footer appearing half way up the page
As mentioned in my previous post, which shows a screenshot of the problem, I needed to stop the footer of my site from appearing half way up the page on some of the pages, when viewed in IE6 and IE7.
After a LOT of Googling and Tinkering, I used this advice, which fixed the problem in IE6 but not IE7:
http://drupal.org/node/482420?mode=2&sort=2
After EVEN MORE tinkering, I eventually fixed the problem by adding the following line of code (to around line 226 in my case) to page.tpl.php:
Here's some info on what that code does.
Phew - I am so relived!
----
Incidentally, this is the first time I've tried pasting a code example in a Blogger post (shown above). It should have occurred to me that this is not as easy as it looks as, rather than just displaying the code, Blogger actually attempts to follow the code (hence on my first attempt the code above just vanished).
If you ever need to display code in a Blogger post (or Wordpress, I'd imagine), here's how it's done
Long explanation:
http://www.bloggerbuster.com/2007/11/how-to-display-code-properly-in-your.html
Quick way (paste your desired code into this page and use the resulting 'parsed' code in Blogger instead):
http://www.blogcrowds.com/resources/parse_html.php
After a LOT of Googling and Tinkering, I used this advice, which fixed the problem in IE6 but not IE7:
http://drupal.org/node/482420?mode=2&sort=2
After EVEN MORE tinkering, I eventually fixed the problem by adding the following line of code (to around line 226 in my case) to page.tpl.php:
<br clear="all" />
Here's some info on what that code does.
Phew - I am so relived!
----
Incidentally, this is the first time I've tried pasting a code example in a Blogger post (shown above). It should have occurred to me that this is not as easy as it looks as, rather than just displaying the code, Blogger actually attempts to follow the code (hence on my first attempt the code above just vanished).
If you ever need to display code in a Blogger post (or Wordpress, I'd imagine), here's how it's done
Long explanation:
http://www.bloggerbuster.com/2007/11/how-to-display-code-properly-in-your.html
Quick way (paste your desired code into this page and use the resulting 'parsed' code in Blogger instead):
http://www.blogcrowds.com/resources/parse_html.php
Tuesday, 10 November 2009
Internet Explorer testing
I've completed Phase 1 of the website and it's nearly there. I've uploaded a password protected version of the site for people at the school to look at and am now tweaking a few things.
The major problem I have is that the footer appears in the wrong place when viewed in Internet Explorer (see screengrab). Someone else spotted this problem and as I'm using a Mac to create the website, it's difficult for me to replicate (which I need to do to check that I've fixed it). I'm running Windows on the Mac using VMWare, but have IE8 installed and have discovered it's pretty complicated (thanks, Microsoft) to have more than one version of Internet Explorer installed on one machine - it would be nice to have IE6 and IE7 on there as those cover the majority of web use.
This link on multiple versions of Internet Explorer is worth a read if you're having the same problem, but unfortunately is a tad out of date now and links to some things that are also out of date:
http://www.communitymx.com/content/article.cfm?cid=8897D
This website offers one solution, in the form of a screengrab of your website in different versions of IE, but this requires uploading the site and therefore doesn't let you test it quickly while you're developing. It also only shows the screengrab of the top of the page.
http://ipinfo.info/netrenderer/
I shall update this if I find a decent solution..
-----
UPDATE!
A friend directed me to a bit of software called Spoon, which requires a download and lets you try the site out in a variety of browsers. Interesting to read on this site that it sounds like Spoon is best installed with Firefox rather than IE8:
http://jamesowers.co.uk/software/420/testing-your-site-in-different-browsers/
The major problem I have is that the footer appears in the wrong place when viewed in Internet Explorer (see screengrab). Someone else spotted this problem and as I'm using a Mac to create the website, it's difficult for me to replicate (which I need to do to check that I've fixed it). I'm running Windows on the Mac using VMWare, but have IE8 installed and have discovered it's pretty complicated (thanks, Microsoft) to have more than one version of Internet Explorer installed on one machine - it would be nice to have IE6 and IE7 on there as those cover the majority of web use.
This link on multiple versions of Internet Explorer is worth a read if you're having the same problem, but unfortunately is a tad out of date now and links to some things that are also out of date:
http://www.communitymx.com/content/article.cfm?cid=8897D
This website offers one solution, in the form of a screengrab of your website in different versions of IE, but this requires uploading the site and therefore doesn't let you test it quickly while you're developing. It also only shows the screengrab of the top of the page.
http://ipinfo.info/netrenderer/
I shall update this if I find a decent solution..
-----
UPDATE!
A friend directed me to a bit of software called Spoon, which requires a download and lets you try the site out in a variety of browsers. Interesting to read on this site that it sounds like Spoon is best installed with Firefox rather than IE8:
http://jamesowers.co.uk/software/420/testing-your-site-in-different-browsers/
Monday, 5 October 2009
Weekly update #13
Days worked this week:
Mon (0.6 days)
Tue (0.7 days due to Spotlighter+ overtime)
Wed (0.8 days due to having to head into work to update the website)
Thu 1 day + 1hr
Fri 1 day
Sun 2hr
- Spent Monday afternoon emailing someone from the Learning Trust and Clook, our new hosts, to get test website working. Thanks to new network setup at work, access to the hosts is blocked! So went home.
- Tweaking CSS for the Term dates section on the Home page
- Lots more tweaking of things to get the test website working. This is not simple! Requires changing a line of code in settings.php (found in sites/default). What goes in this line of code took ages to figure out - it tells your website files how to connect to your database - and needs the correct usename and password combination corresponding to those you've set your database up with on your hosting account. But there are quite a few usernames and passwords associated with this, and I didn't find it obvious how to do this without some help on exactly what was required here.
Finally managed to upload things, but the css is doing something odd to the online version, so the layout is different to that of my local copy!
- Adding content to the About Us section
Mon (0.6 days)
Tue (0.7 days due to Spotlighter+ overtime)
Wed (0.8 days due to having to head into work to update the website)
Thu 1 day + 1hr
Fri 1 day
Sun 2hr
- Spent Monday afternoon emailing someone from the Learning Trust and Clook, our new hosts, to get test website working. Thanks to new network setup at work, access to the hosts is blocked! So went home.
- Tweaking CSS for the Term dates section on the Home page
- Lots more tweaking of things to get the test website working. This is not simple! Requires changing a line of code in settings.php (found in sites/default). What goes in this line of code took ages to figure out - it tells your website files how to connect to your database - and needs the correct usename and password combination corresponding to those you've set your database up with on your hosting account. But there are quite a few usernames and passwords associated with this, and I didn't find it obvious how to do this without some help on exactly what was required here.
Finally managed to upload things, but the css is doing something odd to the online version, so the layout is different to that of my local copy!
- Adding content to the About Us section
Tuesday, 29 September 2009
Weekly update #12
Days worked this week: 4
- Aligning search box/menus on the Home page, as well as adding and removing some panels/graphics to tidy things up in time for the launch.
- Upgrading Panels 2 to Panels 3, (along with Chaos Tools, which is required to do this). Panels is one of the main modules I use, and upgrading to the new version was recommended to me. However, I was uber careful about doing this, as I gathered from the page on upgrading from Panels 2 to Panels 3 (http://drupal.org/node/515140) that doing so can be buggy. So I backed up absolutely everything, as I wasn't sure which data was stored in the database. For example, some of my panels just contain HTML code, so I carefully copied this out from each panel and pasted into a text editor. The update went pretty smoothly as it happens, and HTML panels required no effort on my part.
The only things that did change were:
I also found a bug when clicking on the dates in the 'Events' section I have on my homepage. Googling this shows many others have had the same problem since upgrading Drupal core, and it relates to comments. This is the error I was getting:
user warning: Unknown column 'u.signature_format' in 'field list' query: SELECT c.cid as cid, c.pid, c.nid, c.subject, c.comment, c.format, c.timestamp, c.name, c.mail, c.homepage, u.uid, u.name AS registered_name, u.signature, u.signature_format, u.picture, u.data, c.thread, c.status FROM comments c INNER JOIN users u ON c.uid = u.uid WHERE c.nid = 87 ORDER BY c.thread DESC LIMIT 0, 50 in...
Fortunately, some kind person named 'maximum' has shown how to fix it. It goes as follows:
- Aligning search box/menus on the Home page, as well as adding and removing some panels/graphics to tidy things up in time for the launch.
- Upgrading Panels 2 to Panels 3, (along with Chaos Tools, which is required to do this). Panels is one of the main modules I use, and upgrading to the new version was recommended to me. However, I was uber careful about doing this, as I gathered from the page on upgrading from Panels 2 to Panels 3 (http://drupal.org/node/515140) that doing so can be buggy. So I backed up absolutely everything, as I wasn't sure which data was stored in the database. For example, some of my panels just contain HTML code, so I carefully copied this out from each panel and pasted into a text editor. The update went pretty smoothly as it happens, and HTML panels required no effort on my part.
The only things that did change were:
- the css must be different for some things in Panels 3, as certain things on my homepage moved around and lost their styles. This was easily fixed having investigated what had happened using Firebug, and I changed my css code to reflect these updates
- The slightly annoying thing about Panels 3 (which, like Panels 2 uses the 'Pages' interface), is that the interface now tries to fit into the width of my website (which has a fixed width). This width isn't wide enough for the Pages interface to display some of my panel pages when I'm editing them, so I have to switch back to the Garland theme before I can edit things in Panels.
I also found a bug when clicking on the dates in the 'Events' section I have on my homepage. Googling this shows many others have had the same problem since upgrading Drupal core, and it relates to comments. This is the error I was getting:
user warning: Unknown column 'u.signature_format' in 'field list' query: SELECT c.cid as cid, c.pid, c.nid, c.subject, c.comment, c.format, c.timestamp, c.name, c.mail, c.homepage, u.uid, u.name AS registered_name, u.signature, u.signature_format, u.picture, u.data, c.thread, c.status FROM comments c INNER JOIN users u ON c.uid = u.uid WHERE c.nid = 87 ORDER BY c.thread DESC LIMIT 0, 50 in...
Fortunately, some kind person named 'maximum' has shown how to fix it. It goes as follows:
- Run update.php
- This includes a dropdown menu entitled 'Select versions'
- From this dropdown, select 'System module' then '6051'
- This has fixed the error for me, and many others
Thursday, 24 September 2009
Weekly update #11
Days worked this week: 1.3 Days
Due to holiday/other work commitments, I've not worked on the website for a couple of months now, so was relieved to see that the me of two months ago had kindly written some notes for the me of today, on the kinds of things I'd have forgotten about while away.
Before I could even start reminding myself how Drupal worked and carry on working on the site, I was stumped at the first hurdle* when I discovered Drupal's dreaded White Screen of Death (WSOD) on the Modules page (admin/build/modules) for my site.
I spent about a day trying to fix this, and found this page on the Drupal site to be particularly useless, given that its first solution to 'admin/build/modules' giving a blank page involves going to 'admin/build/modules' and changing some settings. How on earth are you meant to do that if it's blank?!
I've had this problem before and it's usually fixed by running update.php (which is done by visiting 'http://www.example.com/update.php' , where 'www.example.com' is changed to the URL of your website), as well as running Cron (which you can do from www.example.com/admin/reports/status). This normally magically fixes problems like this, but that wasn't making any difference. I'd also increased the PHP memory limit to 96MB, as recommended on this page and this one, which aside from the flaw mentioned previously, seemed to be the most knowledgeable Help pages on this error. This hadn't fixed the problem either, so I was starting to worry.
Fortunately a friend of mine knows his stuff when it comes to Drupal, and worked out what the problem was within minutes. He worked it out by viewing the error log in MAMP, which is what i'm using on my Apple laptop to run the laptop as a virtual server while I develop the site. To find this log, you'll need to navigate somewhere like here in Finder (if using OSX) - not sure where it would be if in Windows:
Applications>MAMP>logs>php_error.logs
Right-click that .logs file and open in 'Console' (not sure what the Windows equivalent is. possibly 'Terminal'?). Once Console has fired up, you may need to navigate on the left side of it to the 'php_error.log' file. The errors shown here are shown in order of date and time, so scroll around until you find the time you tried looking at the Modules page to find it blank. In this particular case I was getting the following message:
PHP Fatal error: Only variables can be passed by reference in /.../.../.../.../sites/all/modules/admin_menu/admin_menu.inc on line 536
[I've edited that error message slightly to remove irrelevant bits of the address, that relate to where specifically on my computer the file path is]
This gave the clue that the Administration Menu Module (or 'admin menu' as it's sometimes referred to), was causing problems. Indeed, when temporarily moving the 'admin_menu' folder out of my 'sites/all/modules' folder (which is where you should be keeping your modules), I could then access the Modules section on my website, so problem solved!
When I say 'problem solved', of course it's not entirely. Although the Administration Menu Module isn't essential for site development, it is one of the most useful modules out there, and I'm now left without it. Looking at their web page, it looks like there's a general problem with this module that I don't think is their fault, so here's hoping that gets fixed soon.
*Am I mixing two sports there, cricket and horse racing, or is that a real phrase?
Due to holiday/other work commitments, I've not worked on the website for a couple of months now, so was relieved to see that the me of two months ago had kindly written some notes for the me of today, on the kinds of things I'd have forgotten about while away.
Before I could even start reminding myself how Drupal worked and carry on working on the site, I was stumped at the first hurdle* when I discovered Drupal's dreaded White Screen of Death (WSOD) on the Modules page (admin/build/modules) for my site.
I spent about a day trying to fix this, and found this page on the Drupal site to be particularly useless, given that its first solution to 'admin/build/modules' giving a blank page involves going to 'admin/build/modules' and changing some settings. How on earth are you meant to do that if it's blank?!
I've had this problem before and it's usually fixed by running update.php (which is done by visiting 'http://www.example.com/update.php' , where 'www.example.com' is changed to the URL of your website), as well as running Cron (which you can do from www.example.com/admin/reports/status). This normally magically fixes problems like this, but that wasn't making any difference. I'd also increased the PHP memory limit to 96MB, as recommended on this page and this one, which aside from the flaw mentioned previously, seemed to be the most knowledgeable Help pages on this error. This hadn't fixed the problem either, so I was starting to worry.
Fortunately a friend of mine knows his stuff when it comes to Drupal, and worked out what the problem was within minutes. He worked it out by viewing the error log in MAMP, which is what i'm using on my Apple laptop to run the laptop as a virtual server while I develop the site. To find this log, you'll need to navigate somewhere like here in Finder (if using OSX) - not sure where it would be if in Windows:
Applications>MAMP>logs>php_error.logs
Right-click that .logs file and open in 'Console' (not sure what the Windows equivalent is. possibly 'Terminal'?). Once Console has fired up, you may need to navigate on the left side of it to the 'php_error.log' file. The errors shown here are shown in order of date and time, so scroll around until you find the time you tried looking at the Modules page to find it blank. In this particular case I was getting the following message:
PHP Fatal error: Only variables can be passed by reference in /.../.../.../.../sites/all/modules/admin_menu/admin_menu.inc on line 536
[I've edited that error message slightly to remove irrelevant bits of the address, that relate to where specifically on my computer the file path is]
This gave the clue that the Administration Menu Module (or 'admin menu' as it's sometimes referred to), was causing problems. Indeed, when temporarily moving the 'admin_menu' folder out of my 'sites/all/modules' folder (which is where you should be keeping your modules), I could then access the Modules section on my website, so problem solved!
When I say 'problem solved', of course it's not entirely. Although the Administration Menu Module isn't essential for site development, it is one of the most useful modules out there, and I'm now left without it. Looking at their web page, it looks like there's a general problem with this module that I don't think is their fault, so here's hoping that gets fixed soon.
*Am I mixing two sports there, cricket and horse racing, or is that a real phrase?
Monday, 29 June 2009
Weekly update #10
[Total days this week: 3.5 ] - had to swiftly get design elements together for a bus advert for the school.
A change I actually made last week (thanks to a tip in my recent training session) was to use the 'Flexible' layout in Panels, which I've now converted my pages to use. This is good for themeing in CSS as it allows me to set each item on the page to be in a different region, and therefore gives me CSS IDs for each of these regions. One place this has come in handy is the 'Events' section on the Home page. In Panels this is two separate components (the calendar, and the next 5 events, underneath it). Using the flexible Panels layout, I can group these two components into the same region, which then means I can use the CSS ID Drupal creates for this to add a rounded box around the two components as if they are just one component.
- Working on CSS and the Views surrounding News items, to make these look a bit nicer (both the summaries of News items and the page you're taken to with the full item).
- As I've been told that setting up video streaming in Drupal (and in general) is a tricky things to do, and something that some hosting providers don't allow, I've been investigating blip.tv, a free video hosting and streaming service. The wikipedia page about blip.tv provides some useful information including the following points. Generally it sounds pretty good:
- The CSS for hiding bullets in an unordered list doesn't seem to work very well (i'm not sure if this is something I was doing wrong, or Drupal being picky). There's a solution for it on the Drupal site, which suggests it was the latter!
- CSS work on getting the Mathematics page to look like the design. Once this is done (which I've used Panels for), I can copy the Panel Page for many of the other pages on the site and remove elements not needed from it.
A change I actually made last week (thanks to a tip in my recent training session) was to use the 'Flexible' layout in Panels, which I've now converted my pages to use. This is good for themeing in CSS as it allows me to set each item on the page to be in a different region, and therefore gives me CSS IDs for each of these regions. One place this has come in handy is the 'Events' section on the Home page. In Panels this is two separate components (the calendar, and the next 5 events, underneath it). Using the flexible Panels layout, I can group these two components into the same region, which then means I can use the CSS ID Drupal creates for this to add a rounded box around the two components as if they are just one component.
- Working on CSS and the Views surrounding News items, to make these look a bit nicer (both the summaries of News items and the page you're taken to with the full item).
- As I've been told that setting up video streaming in Drupal (and in general) is a tricky things to do, and something that some hosting providers don't allow, I've been investigating blip.tv, a free video hosting and streaming service. The wikipedia page about blip.tv provides some useful information including the following points. Generally it sounds pretty good:
- Allows Creative Commons licenses to be set for each video
- It's free (you can opt in to advertising, of which you share 50% of the revenue with them, but this whacks an ad on top of your video, which we won't be doing)
- Uploaders retain all copyright of their videos
- It doesn't place a 'blip.tv' logo with on top of your video (like YouTube does when you're viewing an embedded video in a site other than YouTube)
- Allows high quality videos, at high resolutions
- Includes options to automatically post links to videos on Facebook/Twitter/iTunes, etc. if you choose to do so
- You can choose whether to allow comments on your video posts (I've turned these off)
- Allows people to download your videos by default (I haven't yet worked out whether this can be disabled)
- It converts everything to Flash video, so video is viewable by pretty much anyone
- The CSS for hiding bullets in an unordered list doesn't seem to work very well (i'm not sure if this is something I was doing wrong, or Drupal being picky). There's a solution for it on the Drupal site, which suggests it was the latter!
- CSS work on getting the Mathematics page to look like the design. Once this is done (which I've used Panels for), I can copy the Panel Page for many of the other pages on the site and remove elements not needed from it.
Monday, 22 June 2009
Weekly update #9
[Days spent on website this week: 3.5]
A shorter week due to a meeting at work and other commitments there.
I wasn't working on the website last week, but this week here's what I got up to this week:
- Correcting a fault with one of the updated modules to get the 'Year' view of the Calendar to display correctly. The fix to it is documented here.
- Editing CSS for parts of the Calendar and Home view to make them fit in with the design of the site more.
- I've changed some of the photos used in the Slideshows where the quality of the image wasn't great.
- 0.5 day training with Ali
- Installed the SWF Tools module, which requires a little more reading of the documentation than other modules when you're setting it up. But once you've done this, it works very well. It means I can easily add swf files to pages, so I've now got the Flash animation slideshows working on the Home and Well-being pages (now I've done this it'll be very easy to add them to the other pages once the images have been confirmed for those pages).
- I'm not sure why, but the Home page started doing funny things at one point, so I had my first go at dropping the data from the database and importing a backup of it to set things back to normal. It was a fairly terrifying experience having not done this before, but it all went smoothly and just highlights the importance of keeping regular backups of the database (and of course any other files your site uses).
- Added a 'Looking Back' section to Home page
- updated the CCK module to the latest version
Here's how the Home page is currently looking. Most of it's there now and, thanks to a training session last week, things like rounded corners in CSS are there now. This is something I'd been struggling with up until that point! I also have the text inline with the images in the News section now, and various other fixes. (The 'Quick Links' section is there twice as I'm experimenting with it):
The Home page
A shorter week due to a meeting at work and other commitments there.
I wasn't working on the website last week, but this week here's what I got up to this week:
- Correcting a fault with one of the updated modules to get the 'Year' view of the Calendar to display correctly. The fix to it is documented here.
- Editing CSS for parts of the Calendar and Home view to make them fit in with the design of the site more.
- I've changed some of the photos used in the Slideshows where the quality of the image wasn't great.
- 0.5 day training with Ali
- Installed the SWF Tools module, which requires a little more reading of the documentation than other modules when you're setting it up. But once you've done this, it works very well. It means I can easily add swf files to pages, so I've now got the Flash animation slideshows working on the Home and Well-being pages (now I've done this it'll be very easy to add them to the other pages once the images have been confirmed for those pages).
- I'm not sure why, but the Home page started doing funny things at one point, so I had my first go at dropping the data from the database and importing a backup of it to set things back to normal. It was a fairly terrifying experience having not done this before, but it all went smoothly and just highlights the importance of keeping regular backups of the database (and of course any other files your site uses).
- Added a 'Looking Back' section to Home page
- updated the CCK module to the latest version
Here's how the Home page is currently looking. Most of it's there now and, thanks to a training session last week, things like rounded corners in CSS are there now. This is something I'd been struggling with up until that point! I also have the text inline with the images in the News section now, and various other fixes. (The 'Quick Links' section is there twice as I'm experimenting with it):
The Home page
Monday, 8 June 2009
Weekly update #8
[Days spent on website this week: 3]
Another short week - only 3 days this time (due to other work commitments)
- Added sections and menus for all pages shown on the Site Map (most of these have yet to have information added to them).
- I've decided against my previous thoughts on giving the side navigation bar (seen on all but the home page) all links in its menu, and have gone back to following the Web Visuals. This is partly because it will actually work out quicker for me to do!
- Added past issues of our newsletter Spotlight with thumbnails, having added our other newsletter Spotlighter last week. When I get the chance, I'll make this page look nicer.
- I've spent a frustrating half a day trying to link one view to another (the news view on the home page to the larger news view for each item). I haven't yet worked out how to do this which is annoying as it seems like it should be something pretty simple to do!
- After much persuasion from a friend, I've finally got round to installing the Contemplate (Content Template) module. I've been trying to avoid using php, mainly because I've not used it before, but following on from my previous point, it looks like i'll have to! This tutorial is fairly useful, although it looks like there might be something wrong on that page near the bottom (the '.....' bit.
-I'm staring to figure out, using php, how to stop certain thing from appearing in the News articles (what you get when you click on the smaller news items on the Home page). So I don't want it to say what time it was submitted, etc.
-I've done more on the Flash slideshows, and have cropped photos for all primary pages
- Updated 4 modules in Drupal
Another short week - only 3 days this time (due to other work commitments)
- Added sections and menus for all pages shown on the Site Map (most of these have yet to have information added to them).
- I've decided against my previous thoughts on giving the side navigation bar (seen on all but the home page) all links in its menu, and have gone back to following the Web Visuals. This is partly because it will actually work out quicker for me to do!
- Added past issues of our newsletter Spotlight with thumbnails, having added our other newsletter Spotlighter last week. When I get the chance, I'll make this page look nicer.
- I've spent a frustrating half a day trying to link one view to another (the news view on the home page to the larger news view for each item). I haven't yet worked out how to do this which is annoying as it seems like it should be something pretty simple to do!
- After much persuasion from a friend, I've finally got round to installing the Contemplate (Content Template) module. I've been trying to avoid using php, mainly because I've not used it before, but following on from my previous point, it looks like i'll have to! This tutorial is fairly useful, although it looks like there might be something wrong on that page near the bottom (the '.....' bit.
-I'm staring to figure out, using php, how to stop certain thing from appearing in the News articles (what you get when you click on the smaller news items on the Home page). So I don't want it to say what time it was submitted, etc.
-I've done more on the Flash slideshows, and have cropped photos for all primary pages
- Updated 4 modules in Drupal
Monday, 1 June 2009
Weekly update #7
[Days spent on website this week: 4]
This week:
- Working on the breadcrumb trail and its associated CSS
- reading up on template files. Editing these files will be important for positioning some of the page elements (e.g. the breadcrumb trail, which isn't quite in the right place right now)
- edited CSS for Calendar on home page
- I've started work on the Flash slideshows that will appear at the top of each of the main pages. This has so far involved trawling through lots of photos we've recently had taken for the new school prospectus, as well as any high-quality exisiting photos we have, and seeing what would work well at the 'postbox' shape and size set on our web visuals.
- Added a basic-looking page for Spotlighter, and added pdfs of back issues. This will have to do for Sept, but I'll get this looking much more interesting when I get the chance.
This week:
- Working on the breadcrumb trail and its associated CSS
- reading up on template files. Editing these files will be important for positioning some of the page elements (e.g. the breadcrumb trail, which isn't quite in the right place right now)
- edited CSS for Calendar on home page
- I've started work on the Flash slideshows that will appear at the top of each of the main pages. This has so far involved trawling through lots of photos we've recently had taken for the new school prospectus, as well as any high-quality exisiting photos we have, and seeing what would work well at the 'postbox' shape and size set on our web visuals.
- Added a basic-looking page for Spotlighter, and added pdfs of back issues. This will have to do for Sept, but I'll get this looking much more interesting when I get the chance.
Tuesday, 26 May 2009
Weekly update #6
[Days spent on website this week: 3.5]
The Home page - most recent view of it!
Another short week this week, owing to the Bank Holiday, so only 3 days spent on the website (a normal week is 4 days spent on it as I do other bits of work one day a week).
- Added the footer (c) section; I'll add the accessibility 'Change text size' bit to the footer if I get time, but may do after September. I don't think this bit is too important as you can change the text size in most browsers by pressing 'Ctrl' and '+' or 'Ctrl' and '-' (Ctrl becomes Cmd if you're on a Mac). I've also added the section for the footer logos, which need to be revised due to some being out of date.
- Quick Links now looking correct. I need to adjust the spacing between these at some point as they're a bit far apart.
- Lots of CSS on the homepage, along with Panels stuff. Tweaking it to look like the Web Visuals. It's getting close! Although so far it's only the Home page that's close, most of the work I've done up to now has been 'behind the scenes' stuff essential to make the whole site work, as well as learning how to do lots of things. Now that the Home page is nearly there, it'll be a lot easier to implement what I've already done on the other pages of the site.
- I've started work on getting the navigation that appears on the left hand side of all pages, other than the Home page. The web visuals have it looking something like this:
Left side navigation for the Learning page
I decided a while ago for consistency to make this nav bar the same width as the left hand column on the home page (which contains Quick Links, Events, etc.), so it's now slightly wider at 220px. I'm also going to change it slightly from the web visual shown, to also include the other primary links ('Home', 'About Us', etc.). The reason for this is that I'll be able to use the same navigation bar for every page (rather than having just the 'Learning' link at the top when you're in the Learning section) which will make things simpler for me to put it together, and should also make navigating the site easier for the user, so it's a win-win idea! In this case, if you're in the Learning section, the background behind the word 'Learning' as it's shown above will appear white, as is shown for 'Welcome'.
-ARGH! At 3pm on Friday afternoon, I experienced my first ever Drupal WSOD (white screen of death). Although this doesn't initially sound as scary as a Blue Screen of Death, it's actually worse, as at least a blue screen alerts you to the fact that the computer knows something's gone wrong. A white screen just leaves you stranded, unaware as to whether it's your fault, the computer's fault, or both. Or neither.
Fortunately Drupal have a page on their website about dealing with this and it was only the admin/build/modules page I was having this problem, which is mentioned on their page (the error occured when I tried to upgrade 4 modules at the same time). I followed the advice and ran upgrade.php, which gave me a scary looking error message, along the lines of:
Fortunately, Dr Google came to the rescue when I copied and pasted the 'Fatal error...' message in and someone else had already had this problem and reported it on the Drupal website. All it took in the end was me having to remove one line of code and everything is now fixed.
The problem lay in the fact that some Drupal modules rely on others, which was the case for two of the modules I was upgrading. I think because of the order in which I upgraded them, it got confused.
All I can say is thank Zeus I backed everything up before I upgraded the modules!
- As a result of upgrading the Panels module, some weird borders have appeared around the edge of things:
Home page with strange borders added around things, thanks to Panels
I've removed these using CSS and the Home page now looks as shown at the top of this post.
Drupal does occasionally like to keep one on ones toes!
The Home page - most recent view of it!
Another short week this week, owing to the Bank Holiday, so only 3 days spent on the website (a normal week is 4 days spent on it as I do other bits of work one day a week).
- Added the footer (c) section; I'll add the accessibility 'Change text size' bit to the footer if I get time, but may do after September. I don't think this bit is too important as you can change the text size in most browsers by pressing 'Ctrl' and '+' or 'Ctrl' and '-' (Ctrl becomes Cmd if you're on a Mac). I've also added the section for the footer logos, which need to be revised due to some being out of date.
- Quick Links now looking correct. I need to adjust the spacing between these at some point as they're a bit far apart.
- Lots of CSS on the homepage, along with Panels stuff. Tweaking it to look like the Web Visuals. It's getting close! Although so far it's only the Home page that's close, most of the work I've done up to now has been 'behind the scenes' stuff essential to make the whole site work, as well as learning how to do lots of things. Now that the Home page is nearly there, it'll be a lot easier to implement what I've already done on the other pages of the site.
- I've started work on getting the navigation that appears on the left hand side of all pages, other than the Home page. The web visuals have it looking something like this:
Left side navigation for the Learning page
I decided a while ago for consistency to make this nav bar the same width as the left hand column on the home page (which contains Quick Links, Events, etc.), so it's now slightly wider at 220px. I'm also going to change it slightly from the web visual shown, to also include the other primary links ('Home', 'About Us', etc.). The reason for this is that I'll be able to use the same navigation bar for every page (rather than having just the 'Learning' link at the top when you're in the Learning section) which will make things simpler for me to put it together, and should also make navigating the site easier for the user, so it's a win-win idea! In this case, if you're in the Learning section, the background behind the word 'Learning' as it's shown above will appear white, as is shown for 'Welcome'.
-ARGH! At 3pm on Friday afternoon, I experienced my first ever Drupal WSOD (white screen of death). Although this doesn't initially sound as scary as a Blue Screen of Death, it's actually worse, as at least a blue screen alerts you to the fact that the computer knows something's gone wrong. A white screen just leaves you stranded, unaware as to whether it's your fault, the computer's fault, or both. Or neither.
Fortunately Drupal have a page on their website about dealing with this and it was only the admin/build/modules page I was having this problem, which is mentioned on their page (the error occured when I tried to upgrade 4 modules at the same time). I followed the advice and ran upgrade.php, which gave me a scary looking error message, along the lines of:
Fatal error: Unsupported operand types in .../sites/all/modules/ctools/views_content/views_content.module on line 26
Not what you want when there are only a couple of hours until the weekend and you're feeling smug about the work you have done.Fortunately, Dr Google came to the rescue when I copied and pasted the 'Fatal error...' message in and someone else had already had this problem and reported it on the Drupal website. All it took in the end was me having to remove one line of code and everything is now fixed.
The problem lay in the fact that some Drupal modules rely on others, which was the case for two of the modules I was upgrading. I think because of the order in which I upgraded them, it got confused.
All I can say is thank Zeus I backed everything up before I upgraded the modules!
- As a result of upgrading the Panels module, some weird borders have appeared around the edge of things:
Home page with strange borders added around things, thanks to Panels
I've removed these using CSS and the Home page now looks as shown at the top of this post.
Drupal does occasionally like to keep one on ones toes!
Monday, 18 May 2009
Weekly update #5
[Days spent on website this week: 3.5]
I lost half a day this week due to an emergency with the school newsletter!
- I've started to experiment with CSS a bit more to theme the content. This is how I go about actually changing the default appearance that Drupal gives, to look like the desired Web Visuals. So it lets me tweak all sorts for things such as the font, colour, etc. for specific areas within the design. I've managed to work out for example how to add dotted underline under each News item (on every page that a News item appears).
- I've started experimenting with the Panels module (version 3). It's been a bit tricky to figure out as all the tutorials I've found online are relevant to version 2, and I think it's changed quite a bit since then. I've laid out panels for each component of the home page. This is one of the things I've been slightly terrified of (along with styling the pages, which will come later), but the module seems to work pretty well. Although it did take a few attempts to work it out!
One thing I've decided to try and avoid with this module is the 'flexible' layout option, which turned out not to work very well (it didn't mark the css up for me nicely). But fortunately one of the templates it comes with works perfectly as it is (although I've used css to adjust the column widths). There are still a few things I need to iron out on the Home page now i'm displaying it as a panel, but I feel like this is a great step, and that I'll know how to lay out all the other pages now!
Home page using the Panel module to set the layout
- Created a design mockup for the Expressive Art faculty and the Art department, taking into account a realistic example of what text may appear on their page, and changing the page design to give a more realistic idea of how the finished page may look (although this is still subject to change). I created two versions of each of these - one for how it'll look when finished, and the other with my guess as to how it will look for Sept.
- Went through the content with my amazing boss, to figure out things like what exactly we need for each page, and word limits for each section.
I lost half a day this week due to an emergency with the school newsletter!
- I've started to experiment with CSS a bit more to theme the content. This is how I go about actually changing the default appearance that Drupal gives, to look like the desired Web Visuals. So it lets me tweak all sorts for things such as the font, colour, etc. for specific areas within the design. I've managed to work out for example how to add dotted underline under each News item (on every page that a News item appears).
- I've started experimenting with the Panels module (version 3). It's been a bit tricky to figure out as all the tutorials I've found online are relevant to version 2, and I think it's changed quite a bit since then. I've laid out panels for each component of the home page. This is one of the things I've been slightly terrified of (along with styling the pages, which will come later), but the module seems to work pretty well. Although it did take a few attempts to work it out!
One thing I've decided to try and avoid with this module is the 'flexible' layout option, which turned out not to work very well (it didn't mark the css up for me nicely). But fortunately one of the templates it comes with works perfectly as it is (although I've used css to adjust the column widths). There are still a few things I need to iron out on the Home page now i'm displaying it as a panel, but I feel like this is a great step, and that I'll know how to lay out all the other pages now!
Home page using the Panel module to set the layout
- Created a design mockup for the Expressive Art faculty and the Art department, taking into account a realistic example of what text may appear on their page, and changing the page design to give a more realistic idea of how the finished page may look (although this is still subject to change). I created two versions of each of these - one for how it'll look when finished, and the other with my guess as to how it will look for Sept.
- Went through the content with my amazing boss, to figure out things like what exactly we need for each page, and word limits for each section.
Monday, 11 May 2009
Weekly update #4
[Days spent on website this week: 4]
- I've set things up so that, when a News story is added, an image can be uploaded to go alongside it (as per the Web Visuals). Using the ImageCache module, this then resizes the image to the correct thumbnail size that I want for the home page, as well as producing a larger version of the image that fits nicely on a page.
- I think I'm finally getting to grips with Views, one of the most important Drupal modules. I managed to get the view for the News items (thumbnail, title, and summary of content), working unaided. A breakthrough for me!
The updated News view
-I've added the Pathauto module (http://drupal.org/project/pathauto) which is one of the most popular Drupal modules. This automatically creates a friendlier-looking URL when you add a new News or Date item, by incorporating some of the text from that item.
So, for example, prior to installing Pathauto, if I'd added a News story with the title 'Will it add 'news' to the url this time?', the URL for this story would end up as something like this:
http://www.sns/hackey.sch.uk/node/60
With Pathauto, it becomes this:
http://www.sns/hackey.sch.uk/news/will-it-add-news-url-time
Which shows both that it's 'news', and some of the title of the story.
Why is this useful? Well, aside from being a more 'human' thing to read/remember, it also makes our website more friendly to search engines, a la Google.
- Having set up my Taxonomy terms last week (allowing someone writing a News story to say which subjects it's relevant to, e.g. 'Mathematics'), I've worked out how, using Views, to display News items only relevant to Mathematics on the Mathematics page. I'll eventually get round to doing this with dates too, so that each faculty page has its own calendar.
News with the 'Mathematics' tag appearing in the Mathematics section
- I've added a fuller list of Taxonomy terms (all faculties/departments are now on there). I'll need to figure out at some point what else will require taxonomy terms. This shows the options available when adding a News item now:
New Taxonomy terms added for faculties and departments
- Added the Menu Breadcrumb module (http://drupal.org/project/menu_breadcrumb) which has fixed the slightly odd behaviour of breadcrumbs with the 'out of the box' version of Drupal:
Breadcrumbs now reading correctly
- I've created a favicon for the site (the little logo you see in your browser next to the site's URL). This required getting an extra plugin for Photoshop (which can't otherwise save .ico files, those required for favicons, out of the box). I used this link to help create it:
http://www.revolutionwebdesign.com/blog/index.cfm?mode=entry&entry=8B1F9EB1-D1B9-61C4-09F428DC29AF6230
Favicon
- Upgraded Drupal Core to version 6.12
- I've set things up so that, when a News story is added, an image can be uploaded to go alongside it (as per the Web Visuals). Using the ImageCache module, this then resizes the image to the correct thumbnail size that I want for the home page, as well as producing a larger version of the image that fits nicely on a page.
- I think I'm finally getting to grips with Views, one of the most important Drupal modules. I managed to get the view for the News items (thumbnail, title, and summary of content), working unaided. A breakthrough for me!
The updated News view
-I've added the Pathauto module (http://drupal.org/project/pathauto) which is one of the most popular Drupal modules. This automatically creates a friendlier-looking URL when you add a new News or Date item, by incorporating some of the text from that item.
So, for example, prior to installing Pathauto, if I'd added a News story with the title 'Will it add 'news' to the url this time?', the URL for this story would end up as something like this:
http://www.sns/hackey.sch.uk/node/60
With Pathauto, it becomes this:
http://www.sns/hackey.sch.uk/news/will-it-add-news-url-time
Which shows both that it's 'news', and some of the title of the story.
Why is this useful? Well, aside from being a more 'human' thing to read/remember, it also makes our website more friendly to search engines, a la Google.
- Having set up my Taxonomy terms last week (allowing someone writing a News story to say which subjects it's relevant to, e.g. 'Mathematics'), I've worked out how, using Views, to display News items only relevant to Mathematics on the Mathematics page. I'll eventually get round to doing this with dates too, so that each faculty page has its own calendar.
News with the 'Mathematics' tag appearing in the Mathematics section
- I've added a fuller list of Taxonomy terms (all faculties/departments are now on there). I'll need to figure out at some point what else will require taxonomy terms. This shows the options available when adding a News item now:
New Taxonomy terms added for faculties and departments
- Added the Menu Breadcrumb module (http://drupal.org/project/menu_breadcrumb) which has fixed the slightly odd behaviour of breadcrumbs with the 'out of the box' version of Drupal:
Breadcrumbs now reading correctly
- I've created a favicon for the site (the little logo you see in your browser next to the site's URL). This required getting an extra plugin for Photoshop (which can't otherwise save .ico files, those required for favicons, out of the box). I used this link to help create it:
http://www.revolutionwebdesign.com/blog/index.cfm?mode=entry&entry=8B1F9EB1-D1B9-61C4-09F428DC29AF6230
Favicon
- Upgraded Drupal Core to version 6.12
Tuesday, 5 May 2009
Weekly update #3
[Days spent on website this week: 2.5]
A shorter week than normal this week due to the bank holiday and some urgent things at work, so only 2 and a bit days rather than 4 this time.
- Added dimensions to the Web Visuals of some areas on the Home page (required for the css). I've since decided that the Header (wiggly lines + logo) and the photo slideshow that appears just under the primary navigation are taking up far too much vertical space, so I've reduced this. Once web browser navigation is taken into account, and if you're looking at the site on a wide screen (such as that of the laptop I'm creating it with), the actual content of the page previously only began about half way down the screen!
Modified Web Visuals with smaller header and slideshow, some dimensions shown
- Looked at the 'Panels' module for laying out the Home page. I'll be looking into this more soon.
- Added 'Taxonomy' to the News and Dates content types. This is a way of categorising content, so that when, for example, a Date is added to the calendar, I can say what subjects this is relevant to. So if I was adding information on a school play to the calendar, e.g. Romeo and Juliet, I can specify when I'm uploading this Date that it's relevant to both 'Drama' and 'English'. Once I've got time after the initial 'alpha' version of the site in July, I'll hopefully be able to do clever things with this in terms of giving faculty pages their own calendars, which only show events related to the English Dept, for example.
- The default method of input for these Taxonomy terms in Drupal is ok, but it could benefit with being a bit more user-friendly. To get around this problem, I spent some time researching how best to allow input of this kind - this page on the Drupal site was helpful: http://drupal.org/node/212834. I opted to use the 'Content Taxonomy' module to add checkboxes for the available categories for News and Dates content, as this seemed to be the most popular module of its kind, and seemed to have more potential for customisation.
- Scrap that - I tried 'Content Taxonomy' out for a bit, and it didn't seem to integrate well with Drupal's core Taxonomy features. So I'm now using 'Taxonomy Super Select' which seems to do the simple job of providing checkboxes for Taxonomy terms, far better.
Taxonomy in action - notice how News items now have links to the subjects they relate to
When the Humanities link is clicked, the user is taken to a page with all Humanites information in one place (News and Dates)
- One of the problem's I'd intended to fix, seems to have fixed itself! (Not that I'm complaining). For some reason, until I checked yesterday, an error was occurring when a normal user added a Date to the calendar, this would get published immediately, without requiring moderation from an Editor, which shouldn't be the case (News items were working perfectly, however). Dates now go unpublished until an Editor allows them. Phew!
- I've started setting up News items such that an image can be uploaded to go alongside them. I'm currently trying this our with the ImageField and ImageCache modules, but it's quite possible I'll change my mind about these modules once I've seen them in action and start again using different ones!
A shorter week than normal this week due to the bank holiday and some urgent things at work, so only 2 and a bit days rather than 4 this time.
- Added dimensions to the Web Visuals of some areas on the Home page (required for the css). I've since decided that the Header (wiggly lines + logo) and the photo slideshow that appears just under the primary navigation are taking up far too much vertical space, so I've reduced this. Once web browser navigation is taken into account, and if you're looking at the site on a wide screen (such as that of the laptop I'm creating it with), the actual content of the page previously only began about half way down the screen!
Modified Web Visuals with smaller header and slideshow, some dimensions shown- Looked at the 'Panels' module for laying out the Home page. I'll be looking into this more soon.
- Added 'Taxonomy' to the News and Dates content types. This is a way of categorising content, so that when, for example, a Date is added to the calendar, I can say what subjects this is relevant to. So if I was adding information on a school play to the calendar, e.g. Romeo and Juliet, I can specify when I'm uploading this Date that it's relevant to both 'Drama' and 'English'. Once I've got time after the initial 'alpha' version of the site in July, I'll hopefully be able to do clever things with this in terms of giving faculty pages their own calendars, which only show events related to the English Dept, for example.
- The default method of input for these Taxonomy terms in Drupal is ok, but it could benefit with being a bit more user-friendly. To get around this problem, I spent some time researching how best to allow input of this kind - this page on the Drupal site was helpful: http://drupal.org/node/212834. I opted to use the 'Content Taxonomy' module to add checkboxes for the available categories for News and Dates content, as this seemed to be the most popular module of its kind, and seemed to have more potential for customisation.
- Scrap that - I tried 'Content Taxonomy' out for a bit, and it didn't seem to integrate well with Drupal's core Taxonomy features. So I'm now using 'Taxonomy Super Select' which seems to do the simple job of providing checkboxes for Taxonomy terms, far better.
Taxonomy in action - notice how News items now have links to the subjects they relate to
When the Humanities link is clicked, the user is taken to a page with all Humanites information in one place (News and Dates)
- One of the problem's I'd intended to fix, seems to have fixed itself! (Not that I'm complaining). For some reason, until I checked yesterday, an error was occurring when a normal user added a Date to the calendar, this would get published immediately, without requiring moderation from an Editor, which shouldn't be the case (News items were working perfectly, however). Dates now go unpublished until an Editor allows them. Phew!
- I've started setting up News items such that an image can be uploaded to go alongside them. I'm currently trying this our with the ImageField and ImageCache modules, but it's quite possible I'll change my mind about these modules once I've seen them in action and start again using different ones!
Monday, 27 April 2009
Weekly update #2
[Days spent on website this week: 4]
What I've added to the site this week:
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!
Friday, 24 April 2009
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:
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
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!
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).
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).
Thursday, 23 April 2009
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.
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!
Subscribe to:
Comments (Atom)