Websites for charities
The Dorfred Charitable Trust, who provides support for aid projects in the third world, asked us to set up a website to provide information about funded projects, application procedure and news updates. Our quotes are always extremely competitive whch is ideal for charities that of course are very careful not to incur large overhead costs.
By providing a website the charity can now reach to a wider audience of applicants who require funding for third-world projects.
We propsed a style that was simple, effective and future proof. The logo was provided by the client and although the site is plain white the images on the site add lots of colour. All images are from projects that have received aid from the Dorfred Charitable Trust. The text on the website was provided by the charity thus further keeping the cost down. We registered www.dorfred-trust.org.uk and set up the hosting for the site.
In the end our client was very pleased to have a good looking website at a fraction of the cost they had expected.
Web Design for British Neuroscience Association
We were asked if we could extend the British Neuroscience Association website to include an events listing and events registration section. The style of the pages were to be in line with the existing style of the website. The site administrator would have access to log in, add and edit events, and review registrations and export delegates lists to excel.
One critical requirement was that the events section needed to be delivered and working in a matter of days in order to promote and take registrations for the upcoming Christmas Symposium.
As the existing site was developed in ASP and hosted in a Microsoft environment that posed an initial challenge as we don't really do ASP. We proposed a technical solution and a quote for the job. As our quote was very competitive and as we have a reputation for delivering quality results quickly we got the job.
The client's expectations were met as we delivered the project in time and well within the agreed budget. We are excited that the events section is now in use and is working really well as the site is getting quite a few hits every day and more and more people are signing up to the event.
Websites for research and academia
Wordpress is an impressive platform that offers so much more than blog-capabilities.
There are plugins that provide forums, calendars, member profiles and RSS feed imports, to name just a few. The ability to easily customise the front page and the ability to define a mix of static and dynamic pages as well as easily customise navigation menus and widgets means that you can pretty much create any type of website in a matter of hours. Coupled with the amount of professional looking free or paid-for themes that are available for download - it becomes an offer you can't afford to ignore.
To the client this means that they get
- a professional looking wesite
- a website with advanced features and that is secure
- a website where they have complete control over the content
- a website that works extremely well from a search-engine point of view
- a website based on a widely used open-source platform written in the popular language PHP
- and last but not least a website that is very cheap.
For these reasons we are currently developing a site based on Wordpress for a research initiatve at the University of Cambridge. The website will be used to provide some static informational pages describing the research initiative, to publish news and events, pull in some RSS feeds and have a member register and a community forum in order to promote interworking between groups at the University.
All these capabilities can be delivered within a week and at a very low budget thanks to the stability and extensibility of the Wordpress platform.
If you have any thoughts or queries about how we could offer the same for you - please don't hesitate to get in touch.
Thumbnail rollover image gallery with captions
This image gallery is implemented in PHP and uses javascript and CSS to display the image under the mouse pointer. The benefit of this rollover effect is that the site visitor can vey quickly browse the images in the gallery. The downside is that all images need to be loaded first. You can see a variant of this gallery in action at http://www.orcabags.co.uk/bags.php
Pleae feel free to use this code in any way you want. If you use it on your website then please let me know. Feedback is always welcome.
The images to display in the gallery are specified in a simple text file that defines the image filename and the caption to use for each image. In this example this file is called gallery1.txt and contains the following lines.
img1.jpg;Image caption 1 img2.jpg;Image caption 2 img3.jpg;Image caption 3 img4.jpg;Image caption 4
The gallery script assumes that you have two folders 'images' and 'thumbs' in the same place as the gallery1.txt file where all the images are stored. The thumbnails should have the same filenames as their full-size equivalents that are stored in the 'images' folder.
In order to implement this gallery on your page you need to insert the javascript block that you get from calling gallery_script() from gallery.php (gallery.php is listed further down on this page). The resulting string should be placed inside the html header.
<?php
// This is done in the page header...
echo gallery_script('galleries/', 'galleries/gallery1.txt');
?>;
Then, in the body of the page, you need to call the function gallery() at the place where you want the gallery to be displayed.
<?php
gallery('galleries/', 'galleries/gallery1.txt');
?>
The gallery is implemented in the gallery.php file and needs to be included at the top of your page.
<?php
require_once('galleries/gallery.php');
?>
The following code is the 'gallery.php' script.
<?php
define('GALLERY_TNWIDTH', '80');
define('GALLERY_TNHEIGHT', '80');
define('GALLERY_NUMCOLS', '2');
define('GALLERY_TNBORDER', '1');
function gallery_script($folder, $gallery, $stickyimage=true) {
$str = "<script language=\"JavaScript\" type=\"text/JavaScript\">\n";
$str .= "<!--\n";
$str .= "var preloadedimages = new Array();\n";
$str .= "var images = new Array();\n";
$str .= "var captions = new Array();\n\n";
$str .= "var blankimage;\n";
$str .= "blankimage = new Image();\n";
$str .= "blankimage.src = \"/img/blank.gif\";\n";
$num = 0;
if (($handle = @fopen($gallery, "r")) !== false) {
// Parse the "images.txt" file and display gallery...
while (!feof($handle)) {
$line = fgets($handle);
$params = explode(";", $line);
$str .= "images[$num] = \"".trim($params[0])."\";\n";
$str .= "captions[$num] = \"".trim($params[1])."\";\n";
$str .= "preloadedimages[$num] = new Image();\n";
$str .= "preloadedimages[$num].src = \"".$folder."images/".trim($params[0])."\";\n";
$num++;
}
fclose($handle);
}
$str .= "\nfunction showimage(id) { \n";
$str .= " var str = \"".$folder."images/\"+images[id];\n";
$str .= " document.getElementById(\"galleryimage\").src = str;\n";
$str .= " document.getElementById(\"caption\").childNodes[0].nodeValue = captions[id];\n";
$str .= "}\n";
$str .= "\nfunction hideimage(id) { \n";
if (!$stickyimage) {
$str .= " var str = \"".$folder."images/\"+images[id];\n";
$str .= " document.getElementById(\"galleryimage\").src = \"/img/blank.gif\";\n"; //str;\n";
$str .= " document.getElementById(\"caption\").childNodes[0].nodeValue = \"\";\n"; //captions[id];\n";
}
$str .= "}\n";
$str .= "-->\n";
$str .= "</script>\n";
return $str;
}
function gallery($folder, $gallery, $stickyimage=true) {
echo '<div style="border:0px dashed blue;padding:0px;margin-top:10px;height:1000px;position:relative;">';
$num = 0; $rows = 0;
if (($handle = @fopen($gallery, "r")) !== false) {
// Parse the "images.txt" file and display gallery...
while (!feof($handle)) {
$line = fgets($handle);
$params = explode(";", $line);
if ($num%GALLERY_NUMCOLS == 0) { /*echo "<br>";*/ $rows++; }
// draw thumbnail...
echo "<a style=\"padding:4px\" href=\"javascript:void(0);\" onmouseover=\"showimage($num);\" onmouseout=\"hideimage($num);\"><img src=\"".$folder."thumbs/".$params[0]."\" width=\"".GALLERY_TNWIDTH."\" height=\"".GALLERY_TNHEIGHT."\" style=\"padding:0px;border:solid ".GALLERY_TNBORDER."px black\"></a>";
if ($num == 0) {
$firstimage = $params[0];
$firstcaption = $params[1];
}
$num++;
}
fclose($handle);
}
$top = 95;
$left = 4;
if (!$stickyimage) {
echo '<br><br><br><br><div style="position:absolute;top:'.$top.'px;left:'.$left.'px;"><img id="galleryimage" border="0" src="/img/blank.gif">';
echo '<br><span id="caption"></span></div>';
} else {
echo '<br><br><br><br><div style="position:absolute;top:'.$top.'px;left:'.$left.'px;"><img id="galleryimage" border="0" src="'.$folder.'images/'.$firstimage.'">';
echo '<br><span id="caption">'.$firstcaption.'</span></div>';
}
echo '</div>';
}
?>