Week 1

Major Project Lift Pitch

Belfast history website featuring an advanced interactive time based timeline going from 1900 to present day. Timeline features time periods with themed content for each time period. Also an interactive Belfast map where the user clicks on a building and specific historical content (including photos) about that building is available.

Back to Top

Major Project Proposal - Belfast History

Back to Top

Gantt Chart

Here is the gantt chart showing the tasks timetabled for semester 2 (click for larger version):

Gantt Chart

Back to Top

Photos of Belfast

Areas in Belfast to take photos of:

The best of these photos along with other photos I have taken of things in Belfast will be used in the randomly loaded photographs on the enter page (index) for task 1.

Here is a photo gallery of the Belfast photos I took on 29/01/2007 (click image to view):

Belfast - 29/01/2007

Here is 10 photos I have chosen to be used on the enter page (click on image to view them):

10 Photos

More photos will be added later. Photos added at a later stage could be of a more historical nature.

Back to Top

Task 1 - Random Photos Learn how to randomly load photographs into a webpage.

There are 2 ways I could randomly load images;

  1. Javascript
  2. PHP

1. JavaScript

I got the Javascript code from here http://www.daniweb.com/techtalkforums/thread22560.html

Here is the JavaScript version working (click image to view):

Randomly loading images

The Javascript code:

<script language="JavaScript" type="text/javascript">
var theImages = new Array()

//Random-loading images
theImages[0] = 'images/photo1.jpg'
theImages[1] = 'images/photo2.jpg'
theImages[2] = 'images/photo3.jpg'
theImages[3] = 'images/photo4.jpg'
theImages[4] = 'images/photo5.jpg'
theImages[5] = 'images/photo6.jpg'
theImages[6] = 'images/photo7.jpg'
theImages[7] = 'images/photo8.jpg'
theImages[8] = 'images/photo9.jpg'
theImages[9] = 'images/photo10.jpg'

var j = 0
var p = theImages.length;
var preBuffer = new Array()

for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));

function showImage(){
if(whichImage==0){
document.write('<img src="'+theImages[whichImage]+'" alt="photo" border="0" width="592" height="372">');
}
else if(whichImage==1){
document.write('<img src="'+theImages[whichImage]+'" alt="photo" border="0" width="592" height="372">');
}
else if(whichImage==2){
document.write('<img src="'+theImages[whichImage]+'" alt="photo" border="0" width="592" height="372">');
}
else if(whichImage==3){
document.write('<img src="'+theImages[whichImage]+'" alt="photo" border="0" width="592" height="372">');
}
else if(whichImage==4){
document.write('<img src="'+theImages[whichImage]+'" alt="photo" border="0" width="592" height="372">');
}
else if(whichImage==5){
document.write('<img src="'+theImages[whichImage]+'" alt="photo" border="0" width="592" height="372">');
}
else if(whichImage==6){
document.write('<img src="'+theImages[whichImage]+'" alt="photo" border="0" width="592" height="372">');
}
else if(whichImage==7){
document.write('<img src="'+theImages[whichImage]+'" alt="photo" border="0" width="592" height="372">');
}
else if(whichImage==8){
document.write('<img src="'+theImages[whichImage]+'" alt="photo" border="0" width="592" height="372">');
}
else if(whichImage==9){
document.write('<img src="'+theImages[whichImage]+'" alt="photo" border="0" width="592" height="372">');
}
}
</script>

The code for where the image is in the html (calls the function in the JavaScript):

<script type="text/javascript">showImage();</script>

Back to Top

2. PHP

Here is the PHP version (click image to view):

Randomly loading images

The PHP code:

<?php
srand( microtime() * 1000000 );
$num = rand( 1, 10); switch( $num )
{
case 1 : $site="images/photo1.jpg"; break;
case 2 : $site="images/photo2.jpg"; break;
case 3 : $site="images/photo3.jpg"; break;
case 4 : $site="images/photo4.jpg"; break;
case 5 : $site="images/photo5.jpg"; break;
case 6 : $site="images/photo6.jpg"; break;
case 7 : $site="images/photo7.jpg"; break;
case 8 : $site="images/photo8.jpg"; break;
case 9 : $site="images/photo9.jpg"; break;
case 10 : $site="images/photo10.jpg"; break; }
$banner = "<img src=\"$site\" alt=\"photo\"";
$banner.= "width=\"592\" height=\"372\" border=\"0\" />";
?>
<img src="images/bh.jpg" alt="Belfast History" width="592" height="76" /><?php echo( $banner ); ?><img src="images/enter.jpg" alt="Enter" width="592" height="37" />

Back to Top

Chosen Version

I will be using PHP to randomly load images. I like the way that when the PHP version is run, the html returned validates as XHTML transitional.

To use the PHP version, a PHP page needs to be used on belfasthistory.net instead of an index.html file. I will upload a index.php4 file instead of index.html to belfasthistory.net to set the site to point to the php file when loaded.

The randomly loading images by PHP has been added to belfasthistory.net (click to view):

Randomly loading images

Back to Top

Task 2 - Homepage And Popup Create homepage with randomly loading photos and the popup window.

Here is the image I will be using for the actual enter button:

Enter

Javascript code for the popup window that the site will be housed within:

Code for the enter button:

<a href="javascript:newWind5()"><img src="images/enter.jpg" alt="Enter" width="592" height="37" />

This points to a JavaScript function at the top of the page that has the code for the actual popup window:

<script language="javascript"
type="text/javascript">
function newWind5() {
catWindow = window.open('main.html',
'catWin', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes
resizable=no,copyhistory=yes,width=1024,height=768,left=0 top=0', 'scrollbars=yes')
}
</script>
<script language="javascript" type="text/javascript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</script>

The popup window is set to a resolution of 1024 by 768.

I have added the popup window to belfasthistory.net (Click image to view):

Popup Window

Back to Top

Task 3 - Domain Get Domain name and web hosting.

I have now got the domain name www.belfasthistory.net and have got a holding page up:

Holding

I got the domain name as an additional domain to my existing domain and web space through the web hosts www.oneandone.co.uk.

Back to Top

Learning PHP

I upgraded my oneandone account and now have PHP capability on the belfasthistory.net site. Here are a few PHP examples I have been working on to help me get up to speed as to how PHP works (click image to view them):

Learning PHP

PHP seems to run very well, as does MySQL.

Back to Top

Week 2

Task 4 - Learn how to create scroll buttons in Flash

Two sections that will feature scroll buttons are:

  1. Interactive time based timeline
  2. Interactive map of Belfast

1. Interactive time based timeline

Buttons for the following time periods on the timeline:

Prototypes 3 and 7 from semester 1 feature the buttons I will be using (click images to view):

Prototype 3

Prototype 7

Back to Top

Action Script code for the buttons

The Flash action script for 1900 to 1930 button:

//sets the destination
on (press) {
_root.xnew = _root.mask2._x+(4+3)*100/2;
}

The Flash action script for 1930 to 1960 button:

on (press) {
_root.xnew = _root.mask2._x+(1-2)*100/2;
}

The Flash action script for 1960 to 1980 button:

on (press) {
_root.xnew = _root.mask2._x+(0-7)*100/2;
}

The Flash action script for 1980 to Present button:

on (press) {
_root.xnew = _root.mask2._x+(-2-11)*100/2;
}

The Flash action script for Present Day button:

on (press) {
_root.xnew = _root.mask2._x+(-2-19)*100/2;
}

Back to Top

2. Interactive map of Belfast

Buttons on the interactive Belfast map for:

Prototype 6 features examples of how the buttons will function (click image to view):

Prototype 6

I will finish the actual design of these scroll buttons when I have sourced a suitable Belfast map and am putting it together.

Back to Top

Action Script code for the buttons

This action script code is on the timeline rather than within each button. The code controls the buttons though:

stop();
moveUp.onPress = function() {
map.onEnterFrame = function() {
map._y -= 4;
}
}
moveUp.onRelease = function() {
delete map.onEnterFrame;
} moveDown.onPress = function() {
map.onEnterFrame = function() {
map._y += 4;
}
}
moveDown.onRelease = function() {
delete map.onEnterFrame;
} moveRight.onPress = function() {
map.onEnterFrame = function() {
map._x += 4;
}
}
moveRight.onRelease = function() {
delete map.onEnterFrame;
} moveLeft.onPress = function() {
map.onEnterFrame = function() {
map._x -= 4;
}
}
moveLeft.onRelease = function() {
delete map.onEnterFrame;
} rotateCW.onPress = function() {
map.onEnterFrame = function() {
this._rotation += 3;
}
}
rotateCW.onRelease = function() {
delete map.onEnterFrame;
} rotateCCW.onPress = function() {
map.onEnterFrame = function() {
this._rotation -= 3;
}
}
rotateCCW.onRelease = function() {
delete map.onEnterFrame;
}

Back to Top

Inspirational Websites

I have to create a portfolio website. Here are some existing portfolio websites on the web that I looked at for inspiration:

Of all the sites I looked for inspiration, I really liked Net Dreams:

Net Dreams

The use of many different shades of blue along with the colour white is very effective. I feel that a site designed with nice graphics, XHTML and CSS would work better for a portfolio than a flash based version, though I can still showcase flash projects I've done from within a non flash based portfolio.

I really like the way the background graphics float around the top left, top right, bottom left and bottom right parts of the site. The main sections also have graphics floating around them.

If I had a nice header, then the body of my portfolio site, I could create a background graphic that floats around the whole thing. Would be a nice way to design my portfolio.

Back to Top

Week 3

JavaScript Redirect

The index.html file in the majorproject folder (http://ijsr32.infj.ulst.ac.uk/~11311202/majorproject/index.html) on my IMD site now has a JavaScript redirect that redirects the browser after 2 seconds (using a body onload time delay) to www.belfasthistory.net. The page (with redirect) also features a standard html link incase the javascript redirect ever fails.

Javascript code for the redirect (taken from www.tizag.com/javascriptT/javascriptredirect.php) is:

<script type="text/javascript">
<!--
function delayer(){
window.location = "http://www.belfasthistory.net/"
}
//-->
</script>
<link href="../css/redirect.css" rel="stylesheet" type="text/css" />
</head>
<body onload="setTimeout('delayer()', 2000)">

Back to Top

Task 5 - Learn how to zoom in and out of photos/images in Flash.

Prototype 5 features an example of how the zoom in and out for the Belfast map could function (click image to view):

Action Script for first frame of the flash timeline (within the fla):

stop();
_root.zoom.onEnterFrame = function() {
if (mouse_over_zoom) {
_root.zoom.nextFrame();
}
else {
_root.zoom.stop();
}
};

Action Script for the zoom in button:

on (press) {
_root.mouse_over_zoom = true;
}
on (release) {
_root.mouse_over_zoom = fstartlse;
}

Action Script for the zoom out button:

on (press) {
gotoAndPlay("first_scene", 1);
}

I will get the Belfast map scroll buttons working before I include the zoom in and out functionality. At this stage I'm having second thoughts about including zooming on the map. For a start it may mess up the buttons for the buildings on the map (if user zooms in too far) and to be honest I'm not that happy with prototype 5, as it doesn't really zoom out, just returns to the original size. Once I have created the map and all the scroll buttons work, I will make a decision about zoom in and out functionality. I also need to find some more tutorials on zooming in and out.

Back to Top

Task 6 - Learn how to stream video in Flash.

Instead of streaming video as such, I'm going to use the Flash Video Format. Macromedia Studio 8 allows the converting of videos (MPEGs) to .flv. I can embed the video into an html page using Dreamweaver: Insert > Media > Flash Video. It uses a progressive download technique which seems to work quite well. Flash Player 7 or higher is required to view the video. I like the way it includes controls for stopping and starting the video.

Here is an example video embedded in an html page using Flash Video:

If I source Belfast related videos or take video myself, I will be able to include them on the Belfast History site using Flash video. Adobe has a good Flash Video tutorial.

Back to Top

Task 7 - Learn how to get timeline to scroll left and right in Flash.

Example Flash Action Script code (taken from prototype 7):

on (press) {
_root.xnew = _root.mask2._x+(1-2)*100/2;
}

The numbers within brackets (1-2) indicate where on the timeline for the movie clip to scroll to. If the timeline is at the far right and the button for 1900 to 1930 is pressed, the timeline will scroll left to the part indicated in the action script for that button. If the timeline is made wider, then the numbers need changed accordingly in the action script for each button.

Back to Top

Task 8 - Learn how to get timeline to scroll left and right on button clicks in Flash.

Action script code for one of the timeline buttons:

on (press) {
_root.xnew = _root.mask2._x+(1-2)*100/2;
}

The on (press) tells Flash to execute the code for the button when the button is pressed. The timeline scrolls left and right as mentioned in Task 7 above.

Back to Top

Belfast History Logo Redevelopment

After getting feedback on semester 1 design work, I feel the need to work on my Belfast History logo and make it better. Ways to do this:

  1. Take more Belfast photos or use existing ones. These photos could be used as a basis for the redeveloped logo; ie. maybe using the Harland and Wolff cranes.
  2. Look at logos out there already, especially in the area of history and transport etc.

Logos already out there

Here's some cool logos already out there on the web:

Logos for historical sites

Here is some logos I found on the web relating to historical content:

www.mutabor.de

MutaborThe site features an interesting section on brand identity, including sub sections on brand development, naming, corporate wording, corporate design, packaging, POS and retail design, product development, signage and pictograms and brochures. There are interesting comments about branding, including comments like "Every brand must be unique. The basis for this is the unmistakable presentation of brand values. Displayed in visual form these brand values then come to life: logos, typography, colours, key visuals, landmarks, shapes and images are the important components."

Back to Top

Designing new Version of Logo

The original Belfast History logo I had come up with:

Original Logo

Potential enhanced versions of the Belfast History logo or completely new versions:

Belfast History Logo

Belfast History Logo

Belfast History LOgo

Belfast History Logo

Belfast History LOgo

Belfast History Logo

The background for the following 4 logos was scanned from the back cover of the Inventors and Innovators Ulster Greats Free Poster Collection that came with the Belfast Telegraph newspaper:

Belfast History Logo

Belfast History Logo

Belfast History Logo

The logo I have decided to go with is:

Belfast History Logo

This logo has now be incorporated into the enter page and the top of the interactive timeline on www.belfasthistory.net.

Back to Top

Deconstructing www.netdreams.co.uk

I really like www.netdreams.co.uk as a website. I'm interested to find out how they placed their background image on the site floating around the content. I was thinking of having a background image floating around the content on my portfolio site.

The net dreams site background is split up into a number of images:

The main issue for me is what happens when the main body of my portfolio site is slightly longer on one particular page, for example: university work. The background for the main body would need to be designed so it could tile if the page was longer, but not show the join where it joins the bottom background image floating around the footer. Currently I like the blue to black fading background I have on my portfolio. I would like to keep that. So any graphics would need to be placed over the top of that.

As for www.belfasthistory.net I have added a background to the main site using the following CSS:

background-image: url(../images/main_bg.jpg);
background-position: center;

The background is positioned in the middle of the page, as there is a old style shadow running down the left and right of the main content.

Back to Top

Week 4

Sources of Belfast History

Websites

Websites that include history information about Belfast:

Books

Back to Top

Week 5

Task 9 - Learn how to get content to display when user clicks button in Flash and timeline is scrolling.

The user will choose a time period from the timeline and the timeline will then scroll across to where the images for that time period are on the timeline. When the user clicks one of the images, for example Titanic, the page will load for that. The action script for the button on the timeline would be:

on (release) { getURL("titanic.html"); }

Back to Top

Task 10 - Take photos and video of Belfast. Also create wallpapers.

I created the following collage of Belfast photos to float along bottom of the enter page:

Enter Background

Initial Belfast History Wallpapers page has been created. It features 9 Belfast History wallpapers, with each wallpaper available at 2 sizes: 800 * 600 and 1024 * 768.

Back to Top

Week 6

Task 11 - Source photos of Belfast. Edit photos and video to make them old looking.

It has been suggested (by Gabriel) that I include historical things in the background of the main site floating down the left and right. Things like:

It was also suggested to me (by another student) that I search for old paper photoshop tutorial in regard to the background on the site.

Back to Top

Tweaking the Belfast History Logo

As far as the chosen logo, it was suggested (by Gabriel) that I should:

The photos on the enter page have been reduced in height to allow more space for the Belfast History logo.

The Belfast History logo in the interactive timeline on the top of www.belfasthistory.net now has more breathing space around it.

The chosen logo on the enter page now has more breathing space around it and the end of the slogan text lines up with the end of the word History.

The tweaked Belfast History logo on the enter page looks like this:

Tweaked Belfast Hiistory Logo

Back to Top

Task 12 - Source Belfast history information for 1900 to 1930.

Topics for 1900 to 1930 time period:

Separate pages has been created along with sourcing an image for each topic to go on the timeline.

Photo for Harland and Wolff on the timeline (taken by me):

Harland and Wolff Crane

Photo for Ship Building on the timeline:

RMS Olymic

Photo for Titanic on the timeline:

Titanic

Back to Top

Task 13 - Source Belfast history information for 1930 to 1960.

Topics for 1930 to 1960 time period:

Page for Blitz has been created along with the following image (Trace Bitmap in Flash used to turn the image into a vector image) for the timeline:

Blitz Image

Back to Top

My Major Project Presentation - 9th March

I was in the first batch of 20 people who had to do their 5 minute Major Project Presentation. I timed mine before hand and it was about 6 minutes in length. But when I got up in front of the whole class, I didn't go over the 5 minutes. I think I may have spoken a bit fast. Overall, doing the presentation wasn't as bad as I thought it might have been.

My presentation (click image to view the Power Point):

Major Project Presentation

The script for my presentation is available as a PDF here.

Back to Top

Week 7

Belfast History Old Style Site Background

Sepia tone colours have been added to the background. I got the colour values from Using Photoshop Elements for a sepia tone effect tutorial.

Old Paper Photoshop Tutorial. I used some Photoshop brushes to create a burnt paper effect on the Belfast History background (left and right sides of the background). I also used a brush for the main body to give the old paper effect.

As for the historical things:

Here are three photos taken from home in Richhill (of clocks):

Clock

Clock

Clock

Other things:

Titanic ticket:

Titanic Ticket

Old stamps:

These stamps where taken from Microsoft Clip Art:

Stamps

Stamps

The site has been updated with the old style background:

Belfast History Background

You need a screen resolution bigger than 1024 * 768 to see the images in the background on the left and right.

I tweaked the background a bit more to remove any joins appearing where the background was tiling:

Belfast History Background

Back to Top

Task 14 - Source Belfast history information for 1960 to 1980

Topics for 1960 to 1980 time period:

Page for The Troubles has been created along with the following image (Trace Bitmap in Flash used to turn the image into a vector image) for the timeline:

The Troubles

Page for Westlink has been created along with the following image (Trace Bitmap in Flash used to turn the image into a vector image) for the timeline:

Westlink Image

Back to Top

Task 15 - Source Belfast history information for 1980 to present day.

Topics for 1980 to present day time period:

Initial page for Europa Hotel created along with the following photo (taken by me) used for the timeline:

Eropa Hotel

Initial page for Waterfront Hall has been created along with the following photo (taken by me) for the timeline:

Waterfront Hall

Initial page for the Odyssey Arena has been created along with photo (taken by me) for the timeline:

The Odyssey Arena

Back to Top

Task 16 - Source suitable Belfast map and information for the separate buildings on the map.

Possible Belfast map(s):

The 2 most suitable Belfast Maps found so far are:

I have also found out that its possible to import the contents of a PDF into Adobe Photoshop Elements 4 and save it as an image. Very useful, since one of the 2 Belfast maps was in PDF format.

Here is one of the two maps in Flash ( which was originally Prototype 6):

Here is the other of the two maps (using Prototype 6 as well):

The second map is the most suitable map.

Sections (buildings) for the map:

Initial pages created for Interactive Belfast Map, City Hall and Belfast Cathedral.

Back to Top

Task 17 - Learn how to create preloaders in Flash and include them in site. Also learn how to load Flash movies inside flash movies.

Flash Action Script code for the percentage preloader that the Interactive Timeline currently uses:

There are two scenes (preloader and timeline). Preloader scene has 2 frames.

Frame 1 code:

bytesLoaded = _root.getBytesLoaded();
bytesTotal = _root.getBytesTotal();
percentLoaded = int((bytesLoaded/bytesTotal)*100);
if (percentLoaded == 100) {
gotoAndPlay("timeline", 1);
}

ifFrameLoaded ("timeline", 1) {
gotoAndPlay("timeline", 1);
}

Frame 2 code:

gotoAndPlay(1);

If frame 1 of timeline scene is loaded, then the flash has loaded and goes to the timeline scene. Otherwise, preloader goes on to preloader scene frame 2 which then tells it to return to frame 1. The code above the ifFrameLoaded gets the percentage loaded value.

Back to Top

Flash MP3 Player

A Flash MP3 music player has been added to the main page of www.belfasthistory.net.

The Flash player is from here: http://www.jeroenwijering.com/?item=Flash_MP3_Player

The list of tracks are contained in a playlist.xml file. The player initially features 2 songs by U2 and 2 songs by Snow Patrol:

Get the Flash Player to see this player.

Back to Top

Task 22 - Learn how to upload photos to a sever using PHP.

I made an uploader with PHP. Click here to view it.

Code for uploader.html:

<html><head><title>File Uploader</title>
<link href="../../css/php_style.css" rel="stylesheet" type="text/css">
</head>
<body> <h3>File Upload</h3>
Select a file to upload (Files less than 2Meg):
<br><br>
<form action="uploader.php" method="post"
enctype="multipart/form-data">

<input type="file" name="file" size="45">
<br><br>
<input type="submit" value="Upload File">
</form>

</body></html>

PHP Code for uploader.php:

<?php
if( $_FILES['file']['name'] != "" )
{
copy ( $_FILES['file']['tmp_name'],
"" . $_FILES['file']['name'] )
or die( "Could not copy file" );
}
else{ die( "No file specified" ); }
?><html><head><title>Upload Complete</title><link href="../../css/php_style.css" rel="stylesheet" type="text/css"></head>
<body><h3>File Upload succeeded...</h3>
<ul>
<li>Sent: <?php echo $_FILES['file']['name']; ?></li>
<li>Size: <?php echo $_FILES['file']['size']; ?> bytes</li>
<li>Type: <?php echo $_FILES['file']['type']; ?></li>
</ul> <a href="<?php echo $_FILES['file']['name']; ?>">
Click here to view file</a>
</body></html>

Back to Top

Task 23 - Learn how to dynamically generate a photo gallery in PHP

The kind of functionality I would like in the photo gallery (not sure if I'll get all of this working though):

People browsing the gallery (not logged in):

I'm thinking of using an Open Source photo gallery (for example: Coppermind Gallery) instead of writing all the PHP from scratch.

I have created the Belfast History Photo Gallery page and added a static gallery of my Belfast photos (Click photo to view):

Belfast - 29/01/2007

The static gallery is contained in an Iframe and code for that is:

<iframe src="29_01_2007/index.html" name="inner" width="950" height="800" align="left"
frameborder="0" id="inner"></iframe>

The Static photo gallery will stay until the PHP version is created.

Back to Top

Week 8

Final Tweaks to Portfolio Website.

I have finished work on my portfolio website. I made some final tweaks to the site (adding link into Photography page to My Flicker and also enhancing the header graphic). Site can be viewed by clicking the image:

Portfolio Website

I'm happy enough with the design of my portfolio website. Having the gradient as a background along with the colourful header graphics I think works quite well. I can replace Cara Murphy as my Significant Project on my Portfolio homepage with my Major Project (www.belfasthistory.net) once it is completed. Once I finish Final Year, I can migrate this portfolio across to be the main site on my domain: www.digitally-inspired.co.uk.

Back to Top

Task 19 - Work on interactive map. Add content for each building along with streaming videos (s).

Here is the second of the two chosen Belfast Maps with buttons added for the Belfast City Hall, Waterfront Hall, Odyssey Arena and Belfast Cathedral.. The map starts with the City Hall in the center and for this example the buttons open the separate pages in new windows (though for the finished map it will not load pages in new window):

Also for this example the speed of scrolling on the map has been increased.

The map is quite large, so increasing the speed of scrolling really helps.

It has been suggested (by Gabriel) that I actually import the PDF map straight into Flash as this will give me a total vector map of Belfast. I can then delete the outlines around the roads, and colour the whole map with the actual buttons highlighted on the map for the user.

I imported the PDF of the map into Flash, deleted the text on the right and then turned the map into a graphic and added a tint to make it less bright. The tint makes the 4 buttons for the buildings stand out alot more. The map is now a lot less big in size because its all vector rather than the map being a JPEG.

For this example, the 4 buttons open in a new window:

Back to Top

Week 9

Task 18 - Work on timeline. Add Belfast content into each time period along with streaming video (s).

The text that appears for each button within each time period on the time line has been placed in a white box for each button. This improves the consistency across the whole timeline. Plus the text Select Time Period has been removed.

Back to Top

Task 24 - Create PHP driven photo gallery (if time permits).

The instructions for installing the Copper mine Photo gallery are here:
http://coppermine-gallery.net/demo/cpg14x/docs/index.htm

I'm going to follow the instructions and see if I can get the gallery running.

Here is the process I've gone through to try and get Coppermine up and running on Belfast History:

Belfast History Photo Gallery

The main issue is that I'm limited with mySQL databases of 100 meg in size in my oneandone account. That should be ok for getting the gallery going. The gallery has been added to the iframe within the Belfast History Photo Gallery page.

So how did I find out about Coppermine in the first place? Well I found out about Coppermine through the following question I submitted to Yahoo Answers:

Do you know of any really good FREE open source PHP / MySQL Photo Galleries?

Yahoo Answers

So far I'm really impressed with Coppermine, and it features most of the things I wanted from the photo gallery, including the users being able to upload photos. The Gallery has now been added to the Belfast History Photo Gallery within the Iframe:

Belfast History Photo Gallery in Iframe

The code for the Iframe has been modified with align set to middle to get vertical scrollbars to appear in Internet Explorer:

<iframe src="gallery/index.php" name="inner" width="950" height="800" align="middle"
frameborder="0" id="inner" scrolling="yes"></iframe>

Back to Top

Customizing Belfast History Photo Gallery

The Coppermine Classic theme is being used for the Belfast History Photo Gallery. The Classic theme has been modified to give a more Belfast History look and feel:

Back to Top

Further tweaking the old style background of Belfast History

It was suggested (by Gabriel) that I should make the background of the Belfast History site even longer (with more elements on left and right) so that the things on the left and right don't repeat as much.

Here are some of the images that may be used in the larger background:

Albert Clock

Titanic

History

History

History

History

History

History

History

History

History

History

History

The main Belfast History background has been increased in size (now 900 pixels high):

Belfast History Background

Also a gradient has been used as the background colour, which gives added effect.

I have added a few more elements to the left and right and fixed the background so that it doesn't look like it is tiling as much:

Belfast History Background

Back to Top

Improving Design of Present Day on Timeline

The present day time period of the timeline is a bit bland (only text buttons) at the moment:

Bland Present Day

Could make the present day section of the timeline more interesting by using some of graphics from the collage of buildings on the Belfast History Enter page.

The collage of buildings has been added to the Present Day section of the timeline:

Present Day

Back to Top

Week 10

Task 20 - Tie the timeline and the map together.

The Belfast History site is coming together well. I already have the timeline working well and the Belfast map is up and running. Its a case of fine tuning both to make them even better.

As for the timeline, it was suggested (by Gabriel) that I:

It worked well when I reduced the alpha down to 70%.

I also added the old paper texture from the main body of the background on the site to the back of the Belfast History logo at the top of the timeline.

The Belfast History logo on the timeline before texture was added:

Belfast History Logo

The Belfast History logo on the timeline after the texture added:

Belfast History Logo

I had to change the font colour of the word History to black because in the shade of yellow it wasn't very readable.

As for the Belfast map, it was suggested (also by Gabriel) that I:

The map has been updated (on the Belfast Map page of Belfast History) with smaller buttons (with white around them instead of black) and some of the map detail removed (for this example the buttons open in new window):

Back to Top

Video(s) for Belfast History

It was suggest (by Gabriel) that I add videos to Belfast History:

I mentioned about my granny having old ration cards from the second world war. They might be interesting scanned in and used. Need to check if they have been thrown out or not.

I'm not sure if my Granny would like being videoed. Also not sure if I could get someone to talk about the present day. Might attend the Titanic Made in Belfast Festival over Easter and see if I can get anything useful from that to include in Belfast History.

To include video in Belfast History I'm going to need to brush up on my Adobe Premiere Elements 2 video editing skills. Any video I create and use on Belfast History, will be added to the site using Flash Video. An example of some Flash Video I had a play around with earlier in the semester can be viewed here.

Places in Belfast that I may take video of:

For the video of the City Hall, I could make it look old using Adobe Premiere Elements 2.

Back to Top

Belfast History Video Slide show

I thought it would be cool if I created a slide show of my Belfast photos (taken on 29/01/2007) and added it to the Belfast History site as a video using Flash Video.

The title image for the video:

Belfast History Slide Show

I created the slide show by:

The video slide show is now on Belfast History in place of the photo of the Belfast Cathedral on the main page:

Belfast History Video Slide Show

The slide show uses progressive download and really works best on broadband as its about 30 meg in size (with 90 photos of Belfast and the U2 song). I am rather surprised by the power of Adobe Photoshop Elements 4 considering it is supposed to be a cut down version of Photoshop.

Back to Top

More History Information

The following pages on Belfast History now have more historical information added:

Belfast Video already out there

Videos of Belfast related stuff already out there on the web:

Back to Top

Week 11

Task 21 - Test site on different browsers.

5 pages on Belfast History that are most likely to cause problems in different browsers:

Browsers that these pages will be tested in:

I found this program (Multiple IE) that installs different versions of Microsoft Internet Explorer on a computer (useful for browser testing):

Multiple IE

Enter Page (in Microsoft Internet Explorer 6 with a screen resolution of 1680 by 1050 pixels):

Enter Page

Enter Page (in Microsoft Internet Explorer 7 with a screen resolution of 1680 by 1050 pixels):

Enter Page

Enter Page (in Mozilla Firefox 2 with a screen resolution of 1680 by 1050 pixels):

Enter Page

Enter Page (in Opera 9 with a screen resolution of 1680 by 1050 pixels):

Enter Page

Back to Top

Main Page (in Microsoft Internet Explorer 6 with a screen resolution of 1680 by 1050 pixels):

Main Page

Main Page (in Microsoft Internet Explorer 7 with a screen resolution of 1680 by 1050 pixels):

Main Page

Main Page (in Mozilla Firefox 2 with a screen resolution of 1680 by 1050 pixels):

Main Page

Main Page (in Opera 9 with a screen resolution of 1680 by 1050 pixels):

Main Page

Back to Top

Belfast Map Page (in Microsoft Internet Explorer 6 with a screen resolution of 1680 by 1050 pixels):

Belfast Map

Belfast Map Page (in Microsoft Internet Explorer 7 with a screen resolution of 1680 by 1050 pixels):

Belfast Map

Belfast Map Page (in Mozilla Firefox 2 with a screen resolution of 1680 by 1050 pixels):

Belfast Map

Belfast Map Page (in Opera 9 with a screen resolution of 1680 by 1050 pixels):

Belfast Map

Back to Top

Wallpapers Page (in Microsoft Internet Explorer 6 with a screen resolution of 1680 by 1050 pixels):

Wallpapers

Wallpapers Page (in Microsoft Internet Explorer 7 with a screen resolution of 1680 by 1050 pixels):

Wallpapers

Wallpapers Page (in Mozilla Firefox 2 with a screen resolution of 1680 by 1050 pixels):

Wallpapers

Wallpapers Page (in Opera 9 with a screen resolution of 1680 by 1050 pixels):

Wallpapers

Back to Top

Photo Gallery Page (in Microsoft Internet Explorer 6 with a screen resolution of 1680 by 1050 pixels):

Photo Gallery

Photo Gallery Page (in Microsoft Internet Explorer 7 with a screen resolution of 1680 by 1050 pixels):

Photo Gallery

Photo Gallery Page (in Mozilla Firefox 2 with a screen resolution of 1680 by 1050 pixels):

Photo Gallery

Photo Gallery Page (in Opera 9 with a screen resolution of 1680 by 1050 pixels):

Photo Gallery

No major issues with the Belfast History site in any browser, apart from the Flash elements (timeline, video slide show and Belfast Map) running a bit slower in Microsoft Internet Explorer 6.

Belfast History works best in Mozilla Firefox 2.

Back to Top

Manchester United

I was at the Manchester United v Roma match. It was fun (Manchester United won 7-1). Here are the photos (click image to view):

Manchester United v Roma

Back to Top

Making Video look old

Using the example video footage I took earlier in the semester, I have made it look like old footage (using Adobe Premiere Elements 2 and Microsoft Windows Movie Maker 2 ) by doing the following:

Here is another version of the video (with Film Age, Oldest video and Sepia Tone effects used in Windows Movie Maker 2):

With Adobe Premiere Elements 2 and Microsoft Windows Movie Maker 2 it is easy enough to make video look old. Now I need to take some video of Belfast (City Hall and Belfast Cathedral), make it look old and then add it to the Belfast History site. Since the Belfast City Hall and Cathedral are both about a 100 years old, I can make the video of them look old. But making video of Waterfront Hall or Odyssey look old wouldn't work as they are much newer buildings.

Although Adobe Premiere Elements 2 may be great for converting video files to different video formats, Windows Movie Maker 2 provided better video effects for making my video look old and dated.

Back to Top

Week 12

Titanic Times

I never did make it to the Titanic Made in Belfast Festival (partly due to being tired after the Roma Match, but also because of the Interactive Multimedia Computing Assignment 2). I did though get The Titanic Times supplement from the News Letter (Thursday April 5 2007). The front cover of The Titanic Times has been scanned in and the photo of the Titanic added to the Titanic page of Belfast History:

Titanic Times

Titanic Photo from Titanic Times

I have also added some real video footage of the Titanic (taken from www.youtube.com) to the Titanic page of Belfast History:

Back to Top

Another Approach to the Timeline

I came across this timeline made in Flash that I thought was really interesting:

Top Gear

Its from the BBC Top Gear website. It is a Flash timeline that tells about the 3 presenters on the show; Richard, Jeremy and James. On selecting a presenter, the timeline provides information about the life of that presenter broke up into years. There is a car that goes along a track dependent on what year is selected. I like the way that the car can be dragged left and right along the timeline and how the car doors open and close. Each presenter has a different car.

Back to Top

Belfast History Quiz

An interactive quiz testing users' knowledge of the history of Belfast might be an interesting feature for Belfast History. Questions (based on information already contained within Belfast History) to be used in the quiz:

There are 5 levels to the quiz with 8 questions in each. The 5 levels will be as follows:

  1. 1900 to 1930
  2. 1930 to 1960
  3. 1960 to 1980
  4. 1980 to Present Day
  5. Other Questions

8 questions for 1900 to 1930 level:

  1. What year was the Harland and Wolff shipyard founded?
  2. At its height Harland and Wolff was?
  3. Over how many ships did Harland and Wolff construct?
  4. What are the names of the two Harland and Wolff cranes?
  5. What year was the Harland and Wolff crane Samson built?
  6. What year was the Harland and Wolff crane Goliath built?
  7. When did the Titanic sink?
  8. What year was James Cameron's epic Titanic movie released?

8 questions for 1930 to 1960 level:

  1. When year did the Second World War begin?
  2. What year did the Second World War end?
  3. Just before the Second World War in Belfast there was?
  4. What about Belfast made it a target for the German bombing?
  5. Around how many people where killed in a raid in 1941?
  6. What part of Belfast was hit during the Blitz?
  7. Why was Northern Ireland at war?
  8. About how many Belfast houses where destroyed in the Blitz?

8 questions for 1960 to 1980 level:

  1. When was the Westlink built?
  2. What year was work on the Westlink completed?
  3. Why is work being done to widen the Westlink?
  4. What year did the widening of the Westlink begin?
  5. What year is the Westlink widening work due to be completed?
  6. What year are the Troubles acknowledged to have begun?
  7. What year where the British army first deployed?
  8. What year was the Good Friday Agreement signed?

8 questions for 1980 to Present Day level:

  1. What is the Europa Hotel famous for being?
  2. What building is the Europa Hotel situated next to?
  3. How many bedrooms does the Europa Hotel have?
  4. What year was the Odyssey Arena completed?
  5. What sport is played in the Odyssey Arena?
  6. What year did planning for the Waterfront Hall begin?
  7. What year was the Waterfront Hall completed?
  8. What year was the Waterfront Hall voted second best conference centre in the world in the Apex Awards?

8 questions for Other Questions level:

  1. How many time periods are there on the Belfast History website?
  2. Who stayed in the Europa Hotel during 1995 and 1998?
  3. The part of Belfast where Titanic was built is?
  4. What year was the Titanic built?
  5. Why did the Titanic sink?
  6. How many seats does the Waterfront Hall have?
  7. What is the dome of the Waterfront Hall covered in?
  8. What year was the Laganside Corporation formed?

The actual quiz is one of the games included with my oneandone account (in Dynamic Content > Games > Quiz). The questions and answers where configured from within my oneandone account:

OneandOne Quiz

The quiz is Flash based and is contained within an Iframe on the newly created Belfast History Quiz page on Belfast History:

Belfast History Quiz

The code for the Iframe is:

<iframe src="/tinc?key=SrUqN3JR" name="inner" width="650" height="475" align="middle"
frameborder="0" id="inner" scrolling="no"></iframe>

The link to the quiz has been added to the main page of Belfast History:

Belfast History Quiz Link on Main Page

The background colour of the quiz was set to #E1CB82. The following logo has been used for the quiz:

Belfast History Quiz Logo

Belfast History Quiz

The quiz works quite well, with a decent number of questions, plus a high score table. Being able to incorporate the background colour and logo of Belfast History really helped brand the quiz. Having questions for each time period was an effective way to structure the questions.

Back to Top

Significant Project

The Significant Project on the homepage of my Portfolio has been changed to my Major Project (www.belfasthistory.net).

Significant Project

Back to Top

Week 13

Video footage of Belfast City Hall made to look old.

Here is video footage of Belfast City Hall that I took (on 19/04/2007):

The video footage was made to look old by following the method mentioned earlier in this blog (skipping Adobe Premiere Elements 2 and going straight to Microsoft Windows Movie Maker 2):

The video footage (made to look old) has been added to the Belfast City Hall page of Belfast History:

Belfast City Hall

Back to Top

Video footage of Belfast Cathedral made to look old.

Here is video footage of Belfast Cathedral that I took (on 19/04/2007):

The video footage was made to look old by following the method mentioned earlier in this blog (skipping Adobe Premiere Elements 2 and going straight to Microsoft Windows Movie Maker 2):

The video footage (made to look old) has been added to the Belfast Cathedral page of Belfast History:

Belfast Cathedral

I really like Microsoft Windows Movie Maker 2 for the ease in which video effects can be added:

Windows Movie Maker 2

Back to Top

Changing the transitions of video slide show.

It was suggested (by Gabriel) that I have just one type of transition on the video slide show rather than lots of different transitions.

Here is the video slide show with just one transition (fade) used:

This version of the video is smaller in file size than the previous version. Having only one kind of transition works better. The video is now on the main page of Belfast History. This one video will remain until the 4 separate videos are added to the main page.

Back to Top

More fun with video

I've had a decent go with videos for Belfast History, but Gabriel was suggesting further enhancements:

I'm thinking of moving the mp3 player on the homepage from the right to the left and leaving the right side of the homepage just for the 4 videos. I'm also thinking that I could get four videos with buttons to work by placing them in an Iframe. The page in the Iframe would change to display a different video, but the user would still be on the homepage.

I have now created 4 pages with a different Flash Video on each and 4 links between the pages. The 4 videos are:

  1. Feature Video (currently the Belfast City video and Belfast Cathedral video with Belfast History titles beginning and end)
  2. Belfast Video Slide show
  3. Belfast City Hall
  4. Belfast Cathedral

The feature video will remain as the 2 videos combined and will only be changed to a person sitting in front of the City Hall if I get a chance to video something like that.

Code for the iFrame:

<iframe src="video_1.html" name="inner" width="465" height="415" align="middle" frameborder="0" id="inner" scrolling="no"></iframe>

The iFrame with the 4 videos has been added to the Main Page of Belfast History, plus the music player has been moved to the left of the Main Page:

4 Videos Added

Back to Top

Further Map Tweaking

It was suggested (by Gabriel) that I tweak the Belfast Map further by:

The map has been tweaked and looks like this (for this example the buttons open in a new window):

I tinted the map by adding a new layer. Then created a huge box (covering the whole map) in that layer (with colour set to #733907), converted it to a graphic and set the alpha to 30% on it to make the map appear. To angle the box for the Belfast Cathedral button and City Hall button, all snapping in Flash 8 had to be turned off. That way I could angle the boxes better.

The Belfast Map has been updated the Belfast Map page of Belfast History.

Back to Top

Tweaking CSS for background image

I noticed that on longer pages (like Titanic page) the background wasn't starting to tile from the very top of the page. I fixed this by changing the code in the CSS files (http://www.belfasthistory.net/css/style_main.css and http://www.belfasthistory.net/css/style_wallpapers.css):

From:

background-position: center;

To:

background-position: top;

Back to Top

Belfast History Email and Contact Page

Just to prove I can set up an email address at a domain name, I'm going to set up an email for Belfast History.

In my Oneandone account, I have added a new email; info@belfasthistory.net.

The email address info@belfasthistory.net is now up and running and I'm using Mozilla Thunderbird for the emails.

Test email received to info@belfasthistory.net :

Test Email

Test email sent from info@belfasthistory.net :

Test Email

A mail to link to the info@belfasthistory.net email has been added to the main page of Belfast History:

Email Link

A dedicated contact page for Belfast History might be useful.

A Belfast History contact page has now been created and the actual email link removed from the main page of Belfast History.

I found the following tutorial on how to create a PHP Contact Form.

A Contact form has been added to the Belfast History Contact page and when a user clicks submit it runs mailer.php:

Contact Page

Code for the form on the Belfast History contact page:

<form method="post" action="mailer.php">
Name:
<input type="text" name="name" size="19" />
<br />
<br />
Email:
<input type="text" name="email" size="19" />
<br />
<br />
Message:<br />
<br />
<textarea rows="9" name="message" cols="30"></textarea>
<br />
<br />
<input type="submit" value="Submit" name="submit" />
<input type="reset" value="Reset" name="Reset" />
</form>

PHP code included in mailer.php (rest of the page is just standard html code):

<?php
if(isset($_POST['submit'])) {

$to = "info@belfasthistory.net";
$subject = "Contacting Belfast History";
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$message = $_POST['message'];

$body = "From: $name_field\n E-Mail: $email_field\n Message:\n $message";

echo "Data has been submitted to <a href='mailto:$to'>$to</a><br /><br />Return to <a href='main.html'>Main Page</a>";
mail($to, $subject, $body);

} else {

echo "<a href='contact.html'>Contact</a> or return to <a href='main.html'>Main Page</a>";

}
?>

I have tested the contact form by filling it out and clicking submit:

Contact Page

Mailer

And the email I got:

Email Received

As the mail to link has been removed from the main page, I have added a button to the timeline that goes to the Contact page when clicked:

Contact button the Timeline

Action script for the button:

on (release) { getURL("contact.html"); }

Back to Top

Business Cards

I got a card with one of my Amazon orders about getting business cards with Vista Print. It may be useful having business cards, especially for the degree show.

I have uploaded and used my own design for the business cards (I wanted to keep the design fairly simple and in the same style to my Portfolio):

Business Card

I just have my name and contact details on the front. I will use the cards as a means for people to have my contact details. I left the back of the card as just black. Delivery was quoted as 14 days. I will be interested to see how well the business cards come out.

Back to Top

Milestones

I had the following milestones on my Gantt chart:

As for Tasks 1 - 9, I have completed them all apart photo zooming. I've decided not to include zooming in the Belfast map.

As for Tasks 10 - 16, they have all been completed.

As for Tasks 17 - 21, they also have all been completed.

I'm well on the way to completing most of the tasks, especially considering I got Coppermine up and running on Belfast History and Task 24 was the PHP Photo Gallery.

I need to add as much extra stuff to Belfast History to make it even better.

Back to Top

Ration Card

My granny's ration card from the second world war was retrieved from the archives. It is a clothes ration card. I'm going to scan in parts of it, remove personal details like name and address and create a collage for the Belfast History Blitz page.

Here is the front cover of the card (without personal details):

Ration Card

I have created the following collage:

Ration Card

The ration card collage has been added to the Blitz page of Belfast History:

Ration Card Added

Back to Top

Titanic Animation

I got the following version of the Belfast News Letter about the Titanic:

News Letter

I thought it might be cool of I created a Titanic based Flash animation and add it to the Titanic page of Belfast History.

The Titanic Animation has been created:

The Titanic animation has been added to the Titanic Page of Belfast History:

Titanic Animation Added

Back to Top

Line Rider, Screen Capture and YouTube

I'm interested in finding out what its like to add videos to YouTube. I may or may not add Belfast History videos; haven't decided yet.

As a test video, I used CamStudio to screen capture a Line Rider level I had made.

The process involved with recording the video:

Here is the YouTube (http://www.youtube.com/watch?v=WtFwHZD5CkE) video:

I'm really impressed with how videos run when added to YouTube. My first YouTube video. Not bad! And how did I find out about CamStudio? The Help! section of the IMD Forum.

On reflection if I where to add Belfast History videos to YouTube, I would need to edit the titles on the videos so that they included the Belfast History web address.

Back to Top

More Random Photos

Another 10 photos have been created for the enter page of Belfast History (click image to view):

10 More Photos

They are more historically based photos and are now on Belfast History:

10 More Photos Added

The php code for index.php4 has been changed so that it includes 20 photos instead of 10:

<?php
srand( microtime() * 1000000 );
$num = rand( 1, 20);

switch( $num )
{
case 1 : $site="images/photo1.jpg"; break;
case 2 : $site="images/photo2.jpg"; break;
case 3 : $site="images/photo3.jpg"; break;
case 4 : $site="images/photo4.jpg"; break;
case 5 : $site="images/photo5.jpg"; break;
case 6 : $site="images/photo6.jpg"; break;
case 7 : $site="images/photo7.jpg"; break;
case 8 : $site="images/photo8.jpg"; break;
case 9 : $site="images/photo9.jpg"; break;
case 10 : $site="images/photo10.jpg"; break;
case 11 : $site="images/photo11.jpg"; break;
case 12 : $site="images/photo12.jpg"; break;
case 13 : $site="images/photo13.jpg"; break;
case 14 : $site="images/photo14.jpg"; break;
case 15 : $site="images/photo15.jpg"; break;
case 16 : $site="images/photo16.jpg"; break;
case 17 : $site="images/photo17.jpg"; break;
case 18 : $site="images/photo18.jpg"; break;
case 19 : $site="images/photo19.jpg"; break;
case 20 : $site="images/photo20.jpg"; break;
}
$banner = "<img src=\"$site\" alt=\"photo\"";
$banner.= "width=\"592\" height=\"322\" border=\"0\" />";
?>
<img src="images/bh_logo.jpg" alt="Belfast History" width="592" height="200" /><?php echo( $banner ); ?><a href="main.html"><img src="images/enter.jpg" alt="Enter" width="592" height="37" border="0" /></a>

Back to Top

Reinstalling Coppermine

I had to re install the Belfast History photo gallery. This was because I got locked out of the gallery trying to change the password of the administrator account. This explains why there is a different collection of photographs on the gallery:

Coppermine Up and Running Again

Re installing the gallery involved deleting the gallery folder (and all sub folders) from my web space, re uploading them all again, deleting and re creating the MySQL database, running the installation and reconfiguring. This whole process would only have been a problem if I had had users who had registered and uploaded photos. I can no longer say I'm immune to PHP hiccups. The creating of sub folders and uploading of files is the longest part of setting up Coppermine.

Back to Top

Photo to Sketch

I found this Photoshop Photo to Sketch Tutorial.

I had a go with the Belfast History enter page background collage:

Enter Background

The resulting image after tutorial was completed:

Background

I've decided to leave the enter page background collage as it was, apart from a black border added to top and bottom (done by adding to the actual image) and changing background colour to #e3cc88:

Belfast History Enter Page

The CSS code (in style.css) for the background:

background: #e3cc88 url("../images/enter_bg.jpg") repeat-x bottom;

Going a stage further, the background colour for the enter page has been darkened to similar colour (#501d00) as the main page, plus the background collage has a gradient:

Belfast History Enter Page

The CSS code (in style.css) for the background:

background: #501d00 url("../images/enter_bg.jpg") repeat-x bottom;

A stage further, lightening the background colour on the enter page to be closer to the colour of the main page:

Belfast History

The CSS code (in style.css) for the background:

background: #a17224 url("../images/enter_bg.jpg") repeat-x bottom;

I'm happy enough with the Belfast History Enter page.

Back to Top

Enhancing Belfast History Photos

Here is the photo of the Waterfront Hall:

Waterfront Hall

It was enhanced using Adobe Photoshop Elements 4:

Waterfront Hall

The image was enhanced by:

I liked the effect, so I did the same for The Belfast Cathedral photo:

Before:

Belfast Cathedral

After:

Belfast Cathedral

I liked the enhanced photos. So I thought why don't I do the same for all 20 randomly loading photos on the Belfast History Enter Page? So I did:

Before:

Belfast History

After:

Belfast History

Before:

Belfast History

After:

Belfast History

Before:

Belfast History

After:

Belfast History

Before:

Belfast History

After:

Belfast History

Before:

Belfast History

After:

Belfast History

Before:

Belfast History

After:

Belfast History

Before:

Belfast History

After:

Belfast History

Before:

Belfast History

After:

Belfast History

Before:

Belfast History

After:

Belfast History

Before:

Belfast History

After:

Belfast History

Before:

Belfast History

After:

Belfast History

Before:

Belfast History

After:

Belfast History

Before:

Belfast History

After:

Belfast History

Before:

Belfast History

After:

Belfast History

Before:

Belfast History

After:

Belfast History

Before:

Belfast History

After:

Belfast History

Before:

Belfast History

After:

Belfast History

Before:

Belfast History

After:

Belfast History

Before:

Belfast History

After:

Belfast History

Before:

Belfast History

After:

Belfast History

I also enhanced the Belfast History enter page background collage:

Before:

Belfast History

After:

Belfast History

The CSS code (in style.css) for the background:

background: #95782a url("../images/enter_bg.jpg") repeat-x bottom;

All the enhanced photos are on Belfast History now:

Belfast History

I have also enhanced the Belfast History logo on the Belfast History Enter Page:

Before:

Belfast History

After:

Belfast History

Back to Top

Mac Testing

To test Belfast History in different browsers on an Apple Mac, www.browsercam.com will be used. A 24 hour trial of BrowserCam was used. Pages on Belfast History to be tested:

3 Apple Mac Browsers to be used:

Set 5 seconds for wait before screen shot taken.

Enter Page (in Firefox 2 with a screen resolution of 1280 by 800 pixels):

Enter Page

Enter Page (in Opera 9 with a screen resolution of 1280 by 800 pixels):

Enter Page

Enter Page (in Safari 2 with a screen resolution of 1280 by 800 pixels):

Enter Page

Main page (in Firefox 2 with a screen resolution of 1280 by 800 pixels):

Main Page

Main page (in Opera 9 with a screen resolution of 1280 by 800 pixels):

Main Page

Main page (in Safari 2 with a screen resolution of 1280 by 800 pixels):

Main Page

Belfast Map Page (in Firefox 2 with a screen resolution of 1280 by 800 pixels):

Belfast Map

Belfast Map Page (in Opera 9 with a screen resolution of 1280 by 800 pixels):

Belfast Map

Belfast Map Page (in Safari 2 with a screen resolution of 1280 by 800 pixels):

Belfast Map

Wallpapers Page (in Firefox 2 with a screen resolution of 1280 by 800 pixels):

Wallpapers

Wallpapers Page (in Opera 9 with a screen resolution of 1280 by 800 pixels):

Wallpapers

Wallpapers Page (in Safari 2 with a screen resolution of 1280 by 800 pixels):

Wallpapers

Photo Gallery Page (in Firefox 2 with a screen resolution of 1280 by 800 pixels):

Photo Gallery

Photo Gallery Page (in Opera 9 with a screen resolution of 1280 by 800 pixels):

Photo Gallery

Photo Gallery Page (in Safari 2 with a screen resolution of 1280 by 800 pixels):

Photo Gallery

No major problems in these Apple Mac browsers. Having a delay before the screen shot was taken helped let the Belfast History timeline load fully.

Back to Top

Final Tweaks to Belfast History

All the wallpapers have been enhanced on Belfast History:

Wallpapers Enhanced

In the final design lab class (week 12), Gabriel suggested the following improvements to Belfast History:

The photo of the Waterfront Hall on the Belfast History Homepage is now an actual link to the Photo Gallery:

Waterfront Hall - Link to Photo Gallery

The following Belfast History pages have had images enhanced:

To get the background collage on the Belfast History enter page to go to the very bottom of the browser window in Firefox 2, the following CSS code was added to (solution found here: Body background image align to bottom: Firefox) style.css:

html
{
min-height: 100%;
height: auto;
}

Background collage now going to the bottom of the browser window in Firefox 2:

Background Collage going to the bottom of the browser window in Firefox 2

Internet Explorer 6, Internet Explorer 7 and Firefox 2 are pushing the background collage to the bottom of the browser window, but not Opera 9. I long for the day when all internet browsers deal with CSS in exactly the same way.

I only want the collage to repeat horizontally, plus I want to continue specifying the background colour of the rest of the page without the need for the background image to cover the whole of the background.

A gradient has been added to the enter button on the Belfast History Enter Page.

Before:

Enter

After:

Enter

The Belfast History Map has been updated with more subtle buttons; no black round them and white inside (for this example the buttons open the separate pages in new windows):

The php code on the Belfast History Enter page has been modified to include different alt text for each of the 20 randomly selected images:

<?php
srand( microtime() * 1000000 );
$num = rand( 1, 20);

switch( $num )
{
case 1 : $site="images/photo1.jpg"; $alt="Waterfront Hall"; break;
case 2 : $site="images/photo2.jpg"; $alt="Belfast Telegraph"; break;
case 3 : $site="images/photo3.jpg"; $alt="Royal Avenue"; break;
case 4 : $site="images/photo4.jpg"; $alt="Belfast City Hall"; break;
case 5 : $site="images/photo5.jpg"; $alt="Albert Clock"; break;
case 6 : $site="images/photo6.jpg"; $alt="Odyssey Arena"; break;
case 7 : $site="images/photo7.jpg"; $alt="St Georges Market"; break;
case 8 : $site="images/photo8.jpg"; $alt="Belfast Cathedral"; break;
case 9 : $site="images/photo9.jpg"; $alt="Laganside"; break;
case 10 : $site="images/photo10.jpg"; $alt="Belfast Cathedral"; break;
case 11 : $site="images/photo11.jpg"; $alt="Titanic"; break;
case 12 : $site="images/photo12.jpg"; $alt="Titanic"; break;
case 13 : $site="images/photo13.jpg"; $alt="Knocking off at Harland and Wolff"; break;
case 14 : $site="images/photo14.jpg"; $alt="Belfast City Hall and Albert Clock"; break;
case 15 : $site="images/photo15.jpg"; $alt="Albert Clock"; break;
case 16 : $site="images/photo16.jpg"; $alt="Albert Clock"; break;
case 17 : $site="images/photo17.jpg"; $alt="History"; break;
case 18 : $site="images/photo18.jpg"; $alt="Belfast Cathedral"; break;
case 19 : $site="images/photo19.jpg"; $alt="Belfast Telegraph and Belfast Cathedral"; break;
case 20 : $site="images/photo20.jpg"; $alt="Albert Clock"; break;
}
$banner = "<img src=\"$site\" alt=\"$alt\"";
$banner.= "width=\"592\" height=\"322\" border=\"0\" />";
?>
<img src="images/bh_logo.jpg" alt="Belfast History" width="592" height="200" /><?php echo( $banner ); ?><a href="main.html"><img src="images/enter.jpg" alt="Enter" width="592" height="37" border="0" /></a>

On the wallpapers page of Belfast History, I have changed the background colour of the css file (wallpaper_image.css) so when you click for a larger version of a wallpaper you get the image with the same background colour as the rest of Belfast History:

Belfast History Wallpaper Background

CSS code (in wallpaper_image.css):

body
{
background-color: #e2cb87;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

Going a stage further, a return to wallpapers button (as an image) has been added to each wallpaper page (2 different size buttons; one for 800 x 600 and one for 1024 x 768):

Return to Wallpapers

Return to Wallpapers

And a stage further, a gradient has been added to the background of every wallpaper page:

Wallpaper page Background Gradient

CSS code (in wallpaper_image.css):

body
{
background-color: #e2cb87;
background-image: url(../images/bg_wallpaper.jpg);
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

The links under each image on the wallpapers page have been placed on one line rather than two lines:

Links on 1 line instead of 2 lines

On the Belfast History Timeline the white behind the buildings logo top right has been removed:

White Gone

Back to Top

The Business Cards Have Arrived

My business cards have arrived from Vista Print. They are simple with my name and contact info on the front and the back is just blank.

Front:

Business Cards - Front

Back:

Business Cards - Back

I'm happy enough with them; i'll give them out to people who want my contact details. I got 250 of these; that's a decent number of them to begin with. I need to use them wisely.

Back to Top

Other Cool Stuff Found on the Web

There is lots of cool stuff out there on the web, for example these 2 websites I found:

ISO50

On this site (for ISO50) I like the way the main focus is on the photographs and I also like the background music. Having lots of tiny squares for the user to navigate through the photos works really well as your drawn towards clicking randomly wanting to see what photos are there.

CREAKTIF

This site (for CREAKTIF) is cool in the way it uses the parts of the house for navigation. I'm quite impressed with the flash version of the light box that CREAKTIF have created:

CREAKTIF

Having images displaying in Flash means they can't be saved.

I found these class game maps for the Old Amiga game Turrican 2 (which I liked playing years ago) on Hall of Light:

Turrican 2 Gamemap

On a further search of the web, I actually found the following 2 PC based versions of the game on Turrican Forever.

Turrican 2002:

Turrican 2002

Turrican 2002

Turrican 2002 is very similar graphically to Turrican 2 on the Amiga, though the levels are far bigger. Playing Turrican 2002 certainly brings back memories of Turrican 2 on the Amiga.

T4 Funeral:

T4 Funeral

And another website I found that combines Christian Theology with technology:

Godbit

Godbit is an interesting site that features lots of design related articles and showcases well designed Christian websites.

Back to Top

Week 14

In Conclusion

Overall its been a busy but very rewarding final IMD semester.

I'm pleasantly surprised by my finished Major Project. I didn't expect I would get a full PHP and MySQL photo gallery up and running, but I did, thanks to Coppermine.

I really like the background images being used on www.belfasthistory.net. Reworking the Belfast History logo from the logo I had at the end of semester 1 really helped enhance the overall brand for Belfast History.

My favorite page of Belfast History has to be the enter page because of the randomly loading photos (using PHP) and to be honest I think its the best designed page of the site. I also like the photo gallery page.

Splitting my blog up into weekly tasks helped me stay on target. Gabriel's suggestions in the practical classes (about the background of the Belfast History site, getting going on the history research and about the Belfast Map) where very useful and gave me design inspiration I had not initially thought about.

I'm happy with my portfolio site, especially since I was able to tie in the same style of design for the business cards. As for this blog; I like the content. To be honest I could have done with spreading the blog over 14 different pages, as this one page takes way too long to load.

If I was redoing Belfast History, I think I would take screen resolutions more into consideration, as users with small screen resolutions won't fully appreciate (or see) in full the background to the Belfast History site.

Back to Top