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.
Major Project Proposal - Belfast History
Gantt Chart
Here is the gantt chart showing the tasks timetabled for semester 2 (click for larger version):
Photos of Belfast
Areas in Belfast to take photos of:
- Rope works, tobacco (Gallagher) and ship building.
- St George's Market
- City Hall
- Odyssey Arena
- Europa Hotel
- Cathedral
- Westlink
- Waterfront Hall
- Laganside
- Harland and Wolf cranes
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):
Here is 10 photos I have chosen to be used on the enter page (click on image to view them):
More photos will be added later. Photos added at a later stage could be of a more historical nature.
Task 1 - Random Photos Learn how to randomly load photographs into a webpage.
There are 2 ways I could randomly load images;
- Javascript
- 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):
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>
2. PHP
Here is the PHP version (click image to view):
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" />
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):
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:
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):
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:
I got the domain name as an additional domain to my existing domain and web space through the web hosts www.oneandone.co.uk.
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):
PHP seems to run very well, as does MySQL.
Week 2
Task 4 - Learn how to create scroll buttons in Flash
Two sections that will feature scroll buttons are:
- Interactive time based timeline
- Interactive map of Belfast
1. Interactive time based timeline
Buttons for the following time periods on the timeline:
- 1900 to 1930
- 1930 to 1960
- 1960 to 1980
- 1980 to Present
- Present Day
Prototypes 3 and 7 from semester 1 feature the buttons I will be using (click images to view):
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;
}
2. Interactive map of Belfast
Buttons on the interactive Belfast map for:
- Scrolling up
- Scrolling right
- Scrolling down
- Scrolling left
- Rotating clockwise
- Rotating anti-clockwise
Prototype 6 features examples of how the buttons will function (click image to view):
I will finish the actual design of these scroll buttons when I have sourced a suitable Belfast map and am putting it together.
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;
}
Inspirational Websites
I have to create a portfolio website. Here are some existing portfolio websites on the web that I looked at for inspiration:
- www.netdreams.co.uk
- www.spoidesign.com
- www.cubicalb.com
- www.sroown.com
- www.timeforcake.com
- www.momonofotografie.nl
- www.adhdgraphics.com
- www.mutabor.de
- www.duffy.com
- www.2advanced.com
- www.designchapel.com
- www.billybussey.com
Of all the sites I looked for inspiration, I really liked 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.
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)">
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.
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.
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.
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.
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:
- 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.
- 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:
The 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."
Designing new Version of Logo
The original Belfast History logo I had come up with:Potential enhanced versions of the Belfast History logo or completely new versions:
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:
The logo I have decided to go with is:
This logo has now be incorporated into the enter page and the top of the interactive timeline on www.belfasthistory.net.
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:
- www.netdreams.co.uk/images/top-bg.png
- www.netdreams.co.uk/images/main-bg.png
- www.netdreams.co.uk/images/foot-bg.png
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.
Week 4
Sources of Belfast History
WebsitesWebsites that include history information about Belfast:
- http://www.localhistories.org/belfast.html
- http://en.wikipedia.org/wiki/Belfast
- www.gotobelfast.com
- www.discovernorthernireland.com
- http://www.linenhall.com/
- http://www.onlineni.net/
- http://www.rediscoverni.com/
- www.world66.com
- http://en.wikipedia.org/wiki/History_of_Belfast
- www.belfast-harbour.co.uk
- http://uk.holidaysguide.yahoo.com/
- www.bbc.co.uk
- http://www.wesleyjohnston.com/
- http://www.belfast.net/
- http://www.bbc.co.uk/northernireland/
- http://en.wikipedia.org/wiki/Harland_and_Wolfe
- http://en.wikipedia.org/wiki/RMS_Titanic
- http://en.wikipedia.org/wiki/Westlink_Belfast
- http://en.wikipedia.org/wiki/Troubles
- http://en.wikipedia.org/wiki/Europa_Hotel
- http://en.wikipedia.org/wiki/Waterfront_Hall
- http://en.wikipedia.org/wiki/Odyssey_%28Belfast%29
- http://en.wikipedia.org/wiki/Belfast_City_Hall
- http://www.titanicinbelfast.com/
- http://en.wikipedia.org/wiki/Belfast_Blitz
- http://www.bbc.co.uk/northernireland/learning/history/index.shtml
- http://en.wikipedia.org/wiki/St_Anne%E2%80%99s_Cathedral%2C_Belfast
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"); }
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:
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.
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:
- Old Desk
- Titanic ticket
- Old stamps
- Ink pen and pot
- Also use Sepia colour
- Also the effect of burned edges on paper (as if it was old).
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.
Tweaking the Belfast History Logo
As far as the chosen logo, it was suggested (by Gabriel) that I should:
- Reduce the size of the photos on the enter page to give more space for the logo.
- It was also suggested that the logo has breathing space around it, on the enter page and on the main site.
- The slogan text lines up with the end of the history text.
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:
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):
Photo for Ship Building on the timeline:
Photo for Titanic on the timeline:
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:
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):
The script for my presentation is available as a PDF here.
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):
Other things:
Titanic ticket:
Old stamps:
These stamps where taken from Microsoft Clip Art:
The site has been updated with the old style 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:
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:
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:
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:
Initial page for Waterfront Hall has been created along with the following photo (taken by me) for the timeline:
Initial page for the Odyssey Arena has been created along with photo (taken by me) for the timeline:
Task 16 - Source suitable Belfast map and information for the separate buildings on the map.
Possible Belfast map(s):
- http://www.gotobelfast.com/
- http://www.viamichelin.co.uk/viamichelin/gbr/direct/map/Belfast-map
- MSN Maps
- Mapquest
- Lonely Planet: Belfast Map
- http://www.belfast.net/mo/belmap.jpg
- http://www.qub.ac.uk/schools/SchoolofMathematicsandPhysics/amtpt/about_us/belfast1.jpg
- http://www.belfasthostel.com/BetterBelfastMap.gif
- http://www.wesleyjohnston.com/users/ireland/maps/towns/belfast.gif
- http://travel.yahoo.com/p-map-191501816-map_of_belfast-i
- http://www.discovernorthernireland.com/downloads/belfaststreet.pdf
- http://www.multimap.com/
- http://www.britishcouncil.org/northernireland-aboutus-map.htm
- http://www3.open.ac.uk/
- http://upload.wikimedia.org/wikipedia/en/9/98/DSCF0195.JPG
The 2 most suitable Belfast Maps found so far are:
- http://upload.wikimedia.org/wikipedia/en/9/98/DSCF0195.JPG
- http://www.discovernorthernireland.com/downloads/belfaststreet.pdf
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.
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.
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.
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>
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):
- Create new user. User details: first name, last name, email, username and password.
- Login as a user.
- Once logged in be able to view all photos.
- View all photos in a particular category.
- Upload photos. Each photo uploaded will contain a tag, from an existing category or a new one.
- Confirmation page where user can see photo has been uploaded.
- Thumbnails are created for uploaded photos.
- User can search for any photo they have uploaded using a search by tag or name or photo.
- User can delete photos if they want.
People browsing the gallery (not logged in):
- Search for any photo using a search by tag or name or photo.
- Photo gallery. All photos uploaded can be viewed in categories dependent on tags.
- All photos by each user can be viewed separately.
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):
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.
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:
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.
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:
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.
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:
- I downloaded the zip folder of files for the stable version of Coppermine.
- I unzipped the folder of files preserving the directory structure.
- I uploaded all the folders and files to Belfast History at: www.belfasthistory.net/gallery/
- In my oneandone account I created a new database.
- Used FTP to change the permissions on albums and include folders.
- I then ran the installation on the site.
- The Gallery (www.belfasthistory.net/gallery/) is now up and running; a bit more configuring of the layout still required.
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?
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:
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>
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:
- The Coppermine logo at the top of the gallery has been replaced with this Belfast History logo:
- The actual background of the gallery has been changed to light brown (#dbc573), like the main body of Belfast History.
- The links in the gallery have been changed to be green (#006600) and yellow (#999933) like the rest of the Belfast History site.
- The headings on each of the gallery tables have been changed to brown like the background on the site.
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:
The main Belfast History background has been increased in size (now 900 pixels high):
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:
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:
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:
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:
- Reduce the opacity (Alpha in Flash) of the white behind the text on the timeline buttons to 90%. This is so that the images can be seen through.
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:
The Belfast History logo on the timeline after the texture added:
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:
- Remove some of the street names from the map.
- Add white around the buttons on the map and reduce them in size.
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):
Video(s) for Belfast History
It was suggest (by Gabriel) that I add videos to Belfast History:
- Old vintage video; maybe taken off the web somewhere.
- Or maybe I could have a video interview with my Granny about her experiences in the blitz during the second world war.
- Present day video; maybe have an interview with someone from City Hall about what's happening in Belfast.
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:
- Belfast City Hall
- Waterfront Hall
- Belfast Cathedral
For the video of the City Hall, I could make it look old using Adobe Premiere Elements 2.
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:
I created the slide show by:
- Adding all my 29/01/2007 Belfast photos to Adobe Photoshop Elements 4 along with the Slide Show Title image.
- From the create menu selected slide show.
- Choose random for the transitions between each image.
- Made sure the first image was the title image.
- Added background music to the slide show (this case U2 - I Still Haven't Found What I'm Looking For).
- I clicked Fit Slides to Audio so that the slide show runs until the music finishes.
- Outputted the slide show as WMA video.
- Converted the video into FLV using the Macromedia Flash 8. Converting the video to FLV took a while.
- Added the Flash Video to the sidebar on the main page of Belfast History using Dreamweaver 8.
The video slide show is now on Belfast History in place of the photo of the Belfast Cathedral on the main page:
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.
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:
- Belfast Ad (on www.youtube.com)
- Belfast City Hall Centenary - Living Leaves (on Google Video)
- BELFAST DOCKS TITANIC Harland and Wolff NORTHERN IRELAND (on Google Video)
- Simple Minds - Belfast Child (on www.youtube.com)
- Back home in Belfast town (on www.youtube.com)
- Belfast (on www.youtube.com) - Interesting section about the Titanic
- Belfast - 1901 - Mitchell and Kenyon (on www.youtube.com)
- Titanic movie in Black and white (on www.youtube.com)
- Titanic - Two the Surface (on www.youtube.com) Spoof trailer to Titanic sequel. Shows what is possible with video.
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):
Enter Page (in Microsoft Internet Explorer 6 with a screen resolution of 1680 by 1050 pixels):
Enter Page (in Microsoft Internet Explorer 7 with a screen resolution of 1680 by 1050 pixels):
Enter Page (in Mozilla Firefox 2 with a screen resolution of 1680 by 1050 pixels):
Enter Page (in Opera 9 with a screen resolution of 1680 by 1050 pixels):
Main Page (in Microsoft Internet Explorer 6 with a screen resolution of 1680 by 1050 pixels):
Main Page (in Microsoft Internet Explorer 7 with a screen resolution of 1680 by 1050 pixels):
Main Page (in Mozilla Firefox 2 with a screen resolution of 1680 by 1050 pixels):
Main Page (in Opera 9 with a screen resolution of 1680 by 1050 pixels):
Belfast Map Page (in Microsoft Internet Explorer 6 with a screen resolution of 1680 by 1050 pixels):
Belfast Map Page (in Microsoft Internet Explorer 7 with a screen resolution of 1680 by 1050 pixels):
Belfast Map Page (in Mozilla Firefox 2 with a screen resolution of 1680 by 1050 pixels):
Belfast Map Page (in Opera 9 with a screen resolution of 1680 by 1050 pixels):
Wallpapers Page (in Microsoft Internet Explorer 6 with a screen resolution of 1680 by 1050 pixels):
Wallpapers Page (in Microsoft Internet Explorer 7 with a screen resolution of 1680 by 1050 pixels):
Wallpapers Page (in Mozilla Firefox 2 with a screen resolution of 1680 by 1050 pixels):
Wallpapers Page (in Opera 9 with a screen resolution of 1680 by 1050 pixels):
Photo Gallery Page (in Microsoft Internet Explorer 6 with a screen resolution of 1680 by 1050 pixels):
Photo Gallery Page (in Microsoft Internet Explorer 7 with a screen resolution of 1680 by 1050 pixels):
Photo Gallery Page (in Mozilla Firefox 2 with a screen resolution of 1680 by 1050 pixels):
Photo Gallery Page (in Opera 9 with a screen resolution of 1680 by 1050 pixels):
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.
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):
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:
- Created a new project in Adobe Premiere Elements 2.
- Added the video to the timeline (using add media to add the video to the project and then dragging the video onto the timeline.).
- Highlighted the video on the timeline and then went to windows > effects.
- Under the effects menu, I applied a tint to the video on the timeline. Colour #663300 was used for Map Black to and colour #e0c885 was used for Map White to. 60% was chosen as the Amount to Tint.
- Exported the video from Premiere Elements 2 as an MPEG video.
- Created a new project in Windows Movie Maker 2.
- Imported the video into Windows Movie Maker 2.
- Dragged the video onto the timeline.
- Added Sepia Tone effect and then Film Age, Older effect from Video Effects menu to the video.
- Saved the video from Windows Movie Maker 2 as .wmv
- Converted the video to Flash Video (.flv) using Macromedia Flash 8.
- Then Flash Video was added to this blog here (using Macromedia Dreamweaver 8):
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.
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:
I have also added some real video footage of the Titanic (taken from www.youtube.com) to the Titanic page of Belfast History:
Another Approach to the Timeline
I came across this timeline made in Flash that I thought was really interesting:
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.
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:
- 1900 to 1930
- 1930 to 1960
- 1960 to 1980
- 1980 to Present Day
- Other Questions
8 questions for 1900 to 1930 level:
- What year was the Harland and Wolff shipyard founded?
- At its height Harland and Wolff was?
- Over how many ships did Harland and Wolff construct?
- What are the names of the two Harland and Wolff cranes?
- What year was the Harland and Wolff crane Samson built?
- What year was the Harland and Wolff crane Goliath built?
- When did the Titanic sink?
- What year was James Cameron's epic Titanic movie released?
8 questions for 1930 to 1960 level:
- When year did the Second World War begin?
- What year did the Second World War end?
- Just before the Second World War in Belfast there was?
- What about Belfast made it a target for the German bombing?
- Around how many people where killed in a raid in 1941?
- What part of Belfast was hit during the Blitz?
- Why was Northern Ireland at war?
- About how many Belfast houses where destroyed in the Blitz?
8 questions for 1960 to 1980 level:
- When was the Westlink built?
- What year was work on the Westlink completed?
- Why is work being done to widen the Westlink?
- What year did the widening of the Westlink begin?
- What year is the Westlink widening work due to be completed?
- What year are the Troubles acknowledged to have begun?
- What year where the British army first deployed?
- What year was the Good Friday Agreement signed?
8 questions for 1980 to Present Day level:
- What is the Europa Hotel famous for being?
- What building is the Europa Hotel situated next to?
- How many bedrooms does the Europa Hotel have?
- What year was the Odyssey Arena completed?
- What sport is played in the Odyssey Arena?
- What year did planning for the Waterfront Hall begin?
- What year was the Waterfront Hall completed?
- What year was the Waterfront Hall voted second best conference centre in the world in the Apex Awards?
8 questions for Other Questions level:
- How many time periods are there on the Belfast History website?
- Who stayed in the Europa Hotel during 1995 and 1998?
- The part of Belfast where Titanic was built is?
- What year was the Titanic built?
- Why did the Titanic sink?
- How many seats does the Waterfront Hall have?
- What is the dome of the Waterfront Hall covered in?
- 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:
The quiz is Flash based and is contained within an Iframe on the newly created Belfast History Quiz page on Belfast History:
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:
The background colour of the quiz was set to #E1CB82. The following logo has been used for the 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.
Significant Project
The Significant Project on the homepage of my Portfolio has been changed to my Major Project (www.belfasthistory.net).
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:
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:
I really like Microsoft Windows Movie Maker 2 for the ease in which video effects can be added:
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.
More fun with video
I've had a decent go with videos for Belfast History, but Gabriel was suggesting further enhancements:
- I should have a feature video which features somebody (dressed up in clothes of vintage nature) sitting in front of the City Hall and then it pans up over the City Hall and displays Belfast History text / title.
- Have 4 videos on the homepage. The main one is the feature video and then the other 3 are the video slide show, the City Hall video and Belfast Cathedral video.
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:
- Feature Video (currently the Belfast City video and Belfast Cathedral video with Belfast History titles beginning and end)
- Belfast Video Slide show
- Belfast City Hall
- 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:
Further Map Tweaking
It was suggested (by Gabriel) that I tweak the Belfast Map further by:
- Tinting the colour of the map to be the same colour as the brown of the background on Belfast History.
- Tweak the four buttons by angling to cover area of buildings on the map and making sure that they cover all the text for that button.
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.
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;
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 sent from info@belfasthistory.net :
A mail to link to the info@belfasthistory.net email has been added to the main page of Belfast History:
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:
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:
And the email I got:
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:
Action script for the button:
on (release) { getURL("contact.html"); }
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):
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.
Milestones
I had the following milestones on my Gantt chart:
- Tasks 1 - 9 (Random Photos, Homepage and Popup, Domain, Scroll Buttons, Photo Zooming, Video Streaming, Timeline Scrolling 1, Timeline Scrolling 2 and Timeline Content)
- Tasks 10 - 16 (Photo Taking, Source Photos, 1900 to 1930, 1930 to 1960, 1960 to 1980, 1980 to Present Day and Belfast Map)
- Tasks 17 - 21 (Flash Preloaders, Timeline, Interactive Map, Timeline and Map and Browser Testing)
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.
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):
I have created the following collage:
The ration card collage has been added to the Blitz page of Belfast History:
Titanic Animation
I got the following version of the Belfast News Letter about the Titanic:
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:
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:
- Installed CamStudio.
- Set screen resolution to 800 by 600 and hid the task bar at the bottom of the screen.
- Opened the LineRider_beta.exe file that I have for the Line Rider game.
- Pressed F8 to start recording. Then pressed play in Line Rider straight away. Left the mouse curser over the play button inside Line Rider.
- Once the level was finished I pressed F9 to stop the recording and then saved the .avi video file.
- Signed up for a YouTube account and then uploaded the video file.
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.
More Random Photos
Another 10 photos have been created for the enter page of Belfast History (click image to view):
They are more historically based photos and are now on Belfast History:
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>
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:
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.
Photo to Sketch
I found this Photoshop Photo to Sketch Tutorial.
I had a go with the Belfast History enter page background collage:
The resulting image after tutorial was completed:
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:
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:
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:
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.
Enhancing Belfast History Photos
Here is the photo of the Waterfront Hall:
It was enhanced using Adobe Photoshop Elements 4:
The image was enhanced by:
- Applying Enhance > Auto Smart Fix
- Applying Enhance > Auto Levels
- Applying Enhance > Auto Contrast
- Applying Enhance > Auto Colour Correction
- Applying Enhance > Auto Smart Fix
I liked the effect, so I did the same for The Belfast Cathedral photo:
Before:
After:
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:
After:
Before:
After:
Before:
After:
Before:
After:
Before:
After:
Before:
After:
Before:
After:
Before:
After:
Before:
After:
Before:
After:
Before:
After:
Before:
After:
Before:
After:
Before:
After:
Before:
After:
Before:
After:
Before:
After:
Before:
After:
Before:
After:
Before:
After:
I also enhanced the Belfast History enter page background collage:
Before:
After:
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:
I have also enhanced the Belfast History logo on the Belfast History Enter Page:
Before:
After:
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 (in Opera 9 with a screen resolution of 1280 by 800 pixels):
Enter Page (in Safari 2 with a screen resolution of 1280 by 800 pixels):
Main page (in Firefox 2 with a screen resolution of 1280 by 800 pixels):
Main page (in Opera 9 with a screen resolution of 1280 by 800 pixels):
Main page (in Safari 2 with a screen resolution of 1280 by 800 pixels):
Belfast Map Page (in Firefox 2 with a screen resolution of 1280 by 800 pixels):
Belfast Map Page (in Opera 9 with a screen resolution of 1280 by 800 pixels):
Belfast Map Page (in Safari 2 with a screen resolution of 1280 by 800 pixels):
Wallpapers Page (in Firefox 2 with a screen resolution of 1280 by 800 pixels):
Wallpapers Page (in Opera 9 with a screen resolution of 1280 by 800 pixels):
Wallpapers Page (in Safari 2 with a screen resolution of 1280 by 800 pixels):
Photo Gallery Page (in Firefox 2 with a screen resolution of 1280 by 800 pixels):
Photo Gallery Page (in Opera 9 with a screen resolution of 1280 by 800 pixels):
Photo Gallery Page (in Safari 2 with a screen resolution of 1280 by 800 pixels):
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.
Final Tweaks to Belfast History
All the wallpapers have been enhanced on Belfast History:
In the final design lab class (week 12), Gabriel suggested the following improvements to Belfast History:
- Make the buttons on the Belfast Map more subtle; remove the black round them and colour the buttons white.
- Also on the Belfast Map try to prevent the user scrolling off the map as if the movie clip is much larger than the map area itself.
- On the Belfast History homepage there is a photo of the Waterfront Hall. It isn't a random loading photo or a link to another part of the site. If nothing else, make it a link to another part of the site.
- Have the background collage on the Belfast History enter page right at the bottom of the page.
The photo of the Waterfront Hall on the Belfast History Homepage is now an actual link to the Photo Gallery:
The following Belfast History pages have had images enhanced:
- Harland and Wolff
- Belfast Ship Building
- Titanic
- The Blitz
- The Westlink
- The Troubles
- The Europa Hotel
- The Odyssey Arena
- Waterfront Hall
- City Hall
- Belfast Cathedral
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:
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:
After:
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:
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):
And a stage further, a gradient has been added to the background of every wallpaper page:
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:
On the Belfast History Timeline the white behind the buildings logo top right has been removed:
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:
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.
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:
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.
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:
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:
On a further search of the web, I actually found the following 2 PC based versions of the game on Turrican Forever.
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:
And another website I found that combines Christian Theology with technology:
Godbit is an interesting site that features lots of design related articles and showcases well designed Christian websites.
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.