blog
Hi folks. Welcome to my blog section. Below you can read my blog regarding the development of my major project - www.omaghyouth.org
Alternatively, if you wish to check out my on-going blog about this, that, and everything else, you can do so at www.jonathanaiken.wordpress.com
nb - i'm now working as a full-time web designer for Vision Solutions NI.
Keep a track of my development during the course of this semster. I'll be seeking to update it weekly with progress on things such as changes made to the portfolio site, major project research and development, along with any other things that may take my interest.
week one
"It's not over till it's over" - Rocky Balboa
I need to put that statement into practice.
W hilst developing our Major Project Proposal, we were to draw up a timescale in the form of a Gantt Chart to help pace ourselves this semester. I'll be trying to keep to the scale as best as I can, although with week 1 being week 1, i'll need to make up for this missed week.
Branding
I have a friend who is unfortunate enough to be a Liverpool fan, and in conversation recently he made much of the fact that Anfield is renowned for having a great atmosphere, whilst the atmosphere at Old Trafford can sometimes be pretty 'flat'. Even a certain Roy Keane was very aware of this, driving him to launch an attack on the "prawn sandwich" brigade that seem to attend Old Trafford.
Sometimes you wonder, do they understand the game of football? Away from home our fans are fantastic, I'd call them the hardcore fans. But at home they have a few drinks and probably the prawn sandwiches and they don't realise what's going on out on the pitch. I don't think some of the people who come to Old Trafford can spell football, never mind understand it.
Old Trafford regularly sells out at a massive capacity of 76,000, whilst Anfield sells out at 45,000. With 31,000 more fans being able to fit into Old Trafford, than Anfield, surely the noise and the atmosphere should be electric.
I'm talking about this because whilst I thought about the topic later that day, it occurred to me that it could be something to do with how Manchester United FC brands itself. Looking at the very first page, the splash page, that the user encounters when accessing the Man Utd website, and more specifically at the individual cut outs from the splash page.
Notice the recurring theme? By using phrases such as 'don't miss out', 'match day hospitality' and 'most popular', MUFC are branding themselves as a football club that is there for the fans, rather than the fans for the football club.
Old Trafford is often referred to as the 'Theatre of Dreams', and MUFC regularly advertise their matches as being the 'Ultimate Experience'. It appears that Old Trafford is the stage, the players are the actors and than fans are come to be entertained. I'm a regular attender of Ulster Rugby at Ravenhill, and when I log onto the Ulster Rugby site i'm greeted with slogans such as 'come shout the boys on' and 'stand up for the ulstermen'. The difference is apparent. One appeals to come and be in awe of the beautiful game, the other to come and sing your heart out in support of your team.
The new and improved Theatre of Dreams .... unrivalled variety of Matchday packages, each offering their own unique day out.
Old Trafford is seeking to be viewed as a family friendly venue, with a special family area having been made available, and special prices for family days out etc, which are no bad things, but is further evidence of the way in which MUFC are branding themselves.
After having been encourage to focus and be aware of branding from DES511J1, I couldn't help but think that the MUFC branding strategy could be partially responsible for the sometimes poor atmosphere at Old Trafford. Parts of the crowd have been encouraged to attend to be entertained, to have the ultimate experience, and aren't vocal in their support.
week two
This week i've begun my journey into PHP. I've been using a book a bought of Amazon called 'PHP in 5 Easy Steps' (i'm sure!!!).
The book instructed how to set up a 'PHP environment' on my machine - download and install PHP, MySQL and Apache as the first step. Upon this I stumbled as I couldn't get the three working together correctly for some reason. I went back to the WAMP server that I had been told about before Christmas and it seems to be the answer - the '3 in 1' as it were. The tests appear to have returned successful results.
PHP
The majority of wy work this week has been directed into giving myself a grounding in PHP as it will be widely used in my major project. Follow my progress here.
Quotations
As was suggested during a feedback session, i've spent a little time learning how to use quotations in a way that will break up chunks of text to make it easier for the reader to follow.
these should work quite well I think
week three
Google Analytics
I've signed up for Google Analytics in an effort to increase the search engine rankings for a couple of freelance sites I did a while back. It just required entering a few lines of code into each page, hopefully it will prove profitable. Thought I may as well test it out as it may, or may not, be a useful tool in the future.
PHP
Keep a track of my ongoing journey into PHP here.
Information Design / Layouts
Lacking inspiration for my Portfolio site, i've been leafing through some art journals in search for inspiration. Here's a few designs and layouts that caught my eye.
Random Images
In my blog, I'll not be going into detail on every bit of progress I make in PHP as it can be viewed on it's own page via the link in the side bar, but I will mention progress on specific things that I am likely to use. One such thing is the random image generator. I've implemented some PHP that randomly loads an image when the page is accessed. I'm thinking strongly about using this on either the portfolio site or the major project, maybe even both, so I felt it was worth a mention here. Check it out (under week 3 in one the PHP page - see side bar).
My Blog
As you may or may not have noticed, the design of my blog has radically changed in the last few days. I created a design for a blog which I have been using for the last week or so, but to be honest, every time I looked at it, my opinion of it lessened! I put a fair bit of time into trying to improve it, but was fighting a losing battle. I began work on my portfolio site, and have now just transferred the blog material over. Incase you forget and hadn't seen the initial blog, here's a screen dumps.
Portfolio Website
As mentioned above, my disastrous blog design led me to begin afresh to create a portfolio site. First thing was to check to see if my domain name was available. I wanted www.jonathanaiken.co.uk and that's just what I got.
On the research trail, a few cool sites caught my eye.
It struck me that the designs that were catching my eye were mainly quite plain looking and spacious with good use of white and blank space. I knew then that I wanted my portfolio site to have these characteristics. As for a colour scheme, I instantly loved the one used on the site shown below. The colour scheme adopted for my site was largely inspired by this.
week four
Portfolio Development
It's taken me too long to do my portfolio site, it really has. I'm pretty happy with how it has turned out, but for the number of hours and days i've put into it....I really don't know why it's taken me so long. Last week my blog finished with showing where I got the idea for a colour scheme for the site....the next thing was a design. I tried several different approaches, like the one shown below, but they all looked rubbish!
Designer mind block had hit.
It stayed.
I got frustrated.
I hated web design
Eventually I came up with a design that I felt would work. Early versions looked like this.
After further consideration on content I needed to have some extra navigation for an RSS feed and a Tips page. Also, the leaf images beside my name didn't really make much sense. What relevance do they have to me or the site...none really. Since the site was really about me, what I do and who I am...I came up with the little stick man idea. He's got a happy face because I'm a happy person! :)
The newer version also contained a sidebar. I realised there was information that I wanted to put on the site that would not merit full page on its own, but was also better in short form than big paragraphs of writing. A sidebar would do the trick. Also, page navigation could then be easily included.
...something a little different...
in design ....
in content ....
Design Ideas
It's fair to say I was extremely discouraged that coming up with a design was such a struggle. Though i'm happy at the end result, as a 'designer' surely it should come more natural. In an attempt to give me more ideas and help me in the future, i've invested yet another £30 in books today from Amazon. I hope they help.
week five
portfolio site...continued
Chatting to Nick last week about my portfolio site opened my eye to a few problems with it. At the time I was happy with the site, probably because I was just relieved to eventually have got something up and running.
Issue #1 - alignment
Why was nothing lining up??? Looking back at it i'm not quite sure why I had the main navigation box central whilst the content section and the
side bar sat out to either side. See what I mean in the image below.
Issue #2 - Conflicting Styles
I wanted a clean cut design, which I think I obtained, however, the little stick man idea and the face in the top corner didn't really seem to fit into this.
Nick pointed this out, and I began to see it made sense. I've chosen to stick with the clean cut site of things, and removed them.
Issue #3 - Too Big
The top section of the page was taking up screen. Taking in the header, title image and main navigation, it filled the screen almost.
Steps Taken
I spent some time tidying the site and taking steps to help solve the issues. I've removed the stick man and face, neutralising the style conflict. This also helped
with the spacing issue, as did reducing the depth of the navigation bar. By widening the navigation bar I was able to resolve the problem.
Alternate Style
I've begun work on an alternate style which can be accessed via the 'Page Style' option in the sidebar. I'm trying something
slightly different by using bright, bold colours. It's a work in progress
week six
VIVA
This week saw the delivery of my presentation for my Major Project. I'm reasonably happy with how it went, although some of the other presentations were top drawer, in my opinion anyway. The powerpoint slides used I used for my presentation can be accessed here.
In developing the script for my presentation, I was mindful to try and get the information across in a method that would help the audience, and myself, to keep track of what I was talking about. To do this, I decided to split the presentation into three different topics:
1. Proposed project
2. Purpose of the project
3. Process for the project
I felt that these heading would give a thorough covering of the project, letting the audience know what I was going to do, why I was going to do it, and how I was going to do it. Under each of the main points, I used sub points to get my message across in a clear and precise manner.
Old Trafford
This week has been a little less productive than others due to being away for a few days. A couple of months back a group of us had planned a trip away to Manchester to see Man Utd vs Lille in the Champions League. It was unfortunate that it turned out to be the same week as the VIVA, as it has meant between preparing for it and being away for a couple of days, I haven't managed to get too much else done. However, Old Trafford was a FANTASTIC EXPERIENCE.
week seven
Portfolio
You may recall the changes I made to the portfolio site in wk5. After receiving feedback, I was directed to make some further amendments.
amendment #1
It was suggested that the 'header(s)' still took up too much room at the top of the page. The issue had been much improved by the changes made in week 5,
but Nick advised me that it was still a bit of an issue. Here's the steps i've taken to amend it.
before
after- i've removed the box around the main navigation and relocated it and my name into the top header. Amendment 2
deals with the placements of the 'tips' and 'rss' links that had been removed to allow this.
amendment #2
Relocation of top links (tips, contact and rss). These links were initially placed in the top header, now occupied by the main navigation. I've
moved these links, which I would consider to be of less importance, to the footer.
amendment #3
Featured Project - I was advised that the placement and the font used in the featured project was of a differing style to that rest of the site.
before
after
Major Project
the size of the block of work has been putting me off ...knowingwhere to start has been the problem
I need to get shifting. The last few wks have been taking up with portfolio development, the viva, and also being away. A lot of thinking around the subject of the Major Project has been going on, but nothing actually to show for it. My mind keeps running around the many different things I have to do, and i've not really know where to start. Advice was needed!
I've just spoken to Nick. After explaining to him my concerns and having decided against my initial branding, he's given me some advice and some 'homework' for next wk - to design layouts for the site in Photoshop. I reckon this is what I needed - a deadline to meet. So, hopefully, the major project should be underway in a definite manner.
Major Project Menu
I've decided to use a drop down menu system as there are to many links to do otherwise. Here's a sketch of the sections and sub sections which i'm likely to have.
week eight
Major Project
Logo - for a period of time now i've know that
I wouldn't be using the logo that i'd developed in Semester 1 (see right). It's too complicated and only will work on a black background. This
won't be suitable now as the layout I have in mind for the site is based upon a white background, making this logo redundant.
The new logo (see below) is alot more simple. It's text based, and will fit in well with the site design. The chosen font is Eurostile, as it gives a clean cut traditional, but just slightly different from the norm, impression. It will work well as I want a similar feel to the website. We are a traditional church so the web site will need to be an 'acceptable' design, but I also want to make it a little different.
Layout Mockup
After getting feedback on this layout, i've gona ahead and put it into (X)HTML and CSS. I'm pretty happy with the results so far, feeling that the design is keeping within the inivisable boundaries that wud be acceptable to the curch but also being slightly funky with the Youth in mind.
I have created the main graphic at the top as a flash banner, roatating through a number of different scripture vereses. I may add to this, but you can see how it is at the moment, below.
week nine
Major Project
getting into the PHP / MySQL - as much as i've wanted to get into the swing of PHP, i'd been kinda dreading this moment....and...
it's been every bit as difficult as i've expected it to be
However, now that it's the end of the week again and time to update the blog, I'm fairly satisfied with the progress i've made into it. Here are some of the things i've been learning this week, eventually giving some results.
MySQL - creating a database - using the MySQL Console, i've been learning how to create databases, tables and records.
Inserting records into a database through the browser - I was able to create a form and through that form I was able to add records to the database.
Calling database records and displaying them in a browser - the next step was to create a query which would display the database recordsin the browser. Below shows the results of this query.
Deleting database records through the browser - I will ened to be able to delete records such as e-mail addresses from the mialing list, or news from the latest news section. Below the user can click delete beside the record they wish to delete from the database.
The user is asked to confrim the deleting of the record, as once it is gone it cannot be recovered.
The work surrounding the mailing list has involved creating a MySQL database, creating a connection to it via PHP and being able to view, insert and delete records via the broswer. The skills learned here will be utilised for creating the CMS for managing the news page etc, but I need to progress into learning how to edit records as this will be needed.
The media team will access the CMS and manage the mailing list through an admin page. I have password protected this page, as shown below.
Apart from the backend work, i've create two further pages - 'Articles of Faith' and 'Vision'
week ten
Major Project
It's all about Major Project at this stage, and it's a little mad to be honest!!
News Section
adding, deleting and editing records
Taking the skills i'd learned from last wks work on the mailing list, I've been working on the 'news' section. The plan is to have a news section that can be updated using the CMS. What's different about this from the mailing list is that I also want to be able to edit the records. I've found this pretty difficult and time consuming, but have got there in the end!
Instead of using writing the tables in mySQL, I've creating them using the phpMyAdmin section available with my hosting. It's been an easier way to do it, mainly because I found that I made to many typing errors in the mySQL meaning having to retype the same thing over a number of times.
I want each news item to involve a title, content and the time/date of when it was posted. Therefore, i've created the following fields in the table
- news_id (primary key)
- title
- content
- date
adding news
The user can update the news sections by logging into the admin section, selecting 'new entry' under the 'Latest News' tag, and filling out the form below. The user is not required to enter the time/date as I have set the field as timestamp via phpMyAdmin.
The news page is then automatically updated, using PHP to pull the records out of the database. I have formatted the timestamp as follows . date("d.m.Y",$row['date']). , however, as you can see in the image below, for some reason it is pulling out the same time for each record, which is wrong....as the news was definitely not entered in 1970!!!
editing and deleting news
The deletion of news is carried out the same way as for the mail list, however, you can also edit existing news items by selecting 'edit' as shown below.
The user is then met with the screen shown below, where they can edit the details and click submit. At the minute, for some reason when I attempt to use a textarea with rows and columns, the info is not displayed, so the the time being I am using input type. I hope to get this amended to give the user a clearer view of what they wish to edit.
Schedule Page
The idea was to have a page clearly displaying where and when the Youth meet, along with information on other activities of the Church. I've used the right content area to display an attractive and bright image providing info on the Youth schedule, whilst the left hand side gives details of Church activities.
Contact and Location Pages
creating an email address
The Youth has been using omaghfpcyouth@hotmail.com, but it was suggested to me that it might be an idea to set up a new accounts it would look more professional to go along with the website. Using the 1 & 1 Control Panel, I have set up mail@omaghyouth.org
location page
We felt it was important to provide a map showing where the Church is, and address details for contact purposes. I've created a 'location' page (see below), however i'm not totally satisfied with it. There is nothing impressive about it...
... I have to think about how I could make this more than just a page showing a map
One thing I had thought about was using Google maps, however they don't seem to care about 'wee Omagh' !! They provide no details of this part of the country.
contact page
I created a PHP feedback form allowing the user to directly contact us via the newly set up mail@omaghyouth.org
Helping Hand
i'm not quite sure how to display so much text in an appealing fashion
That was my problem with this page, and pretty much still is. I've made the page, but in truth I'd happily change it if I can come across a better way to approach it. As it stands, i've used anchors to jump down to each article via a page navigation menu. I've used quotes (like above) to try and break up the text a little bit, but i'm aware that it's still quite a daunting stretch of text.
top image
I really like the image i'm using on the top of the page. The page is entitled 'helping hand', and I think the image portrays that, with the one hand reaching down and pulling the other up.
page overview
Here's a screen dump showing part of the page. The articles (mainly text) continue on and you scroll down the page. You can the the page navigation on the left, and links to other articles and sites that may be useful to the reader.
roman road
You may or may not be aware of what is called the Roman Road, it is a series of verses from the book or Romans that go together to clearly describe how we can have peace with God. Initially, I was going to list all the verses in text, but then it entered my mind that I should maybe make a little flash movie for it. You can see the flash movie below
Diary - ExtCalendar
You may remember that during my research I came across a great calendar tool called ExtCalendar. It will operate as an 'online diary' so the Youth can always easily find out what events are planned. I've spent some time installing it and incorporating it into my webpage, with the end result looking something like this.
Adding an Event - an individual can chose to add an event by clicking the + on the date, then fill out the info in the screen that appears (as below). To prevent unwanted comments by unwanted users, the administrator (me) then receives an email seeking me to either allow or refuse the addition.
Views - options allowing the user to choose which view they want to use, or to add an event (events also added by clicking the + sign on the date desired).
Search - the user can enter words for easy searching of the calendar.
Administrator Panel - as administrator I can do various things such as grant levels of access to other users, permit event additions, and create categories etc.
Forum - PunBB
Looking into getting a forum for the first time, I decided to investigate PunBB as I noticed that was what was used for the IMD forum, and I consider it to be a success. After spending time setting the forum up, I started to try to edit the style sheet etc to try and make it look a bit more like my site. I've hit a brick wall with this though, as it seems to be that no matter what file I edit or even delete, nothing seems to change!! I'll spend some more time on it, however Nick has said I should look into a 'Vanilla' forum, as it might be a bit more suitable than the PunBB, so i'll investigate that option aswell.
Forum Admin - as administrator I change the setting of the forum and have an overall control of it. The admin panel gives many options (see below) which i've been playing around with.
Forum Censorship - I was happy to see that the admin panel allowed me to censor certain words. Being a Church forum, the last thing we want is to have some people using alot of abusive and bad language ruining the forum for everyone else. This wasn't a nice job, however I managed to put together a fairly comprehensive list of words and phrases that I don't want to appear on the forum, and replace them with a "please do not use bad language on this forum" message, lol.
MOO Cards
Included in my Major Project plan, was the aim to design and produce some 'business' cards for the Youth. After being alerted to MOO cards by Chric and Nick, and then seeing how good they looked when others got them, I decided that they were definately the way to go. They are extremely suitable for the Youth as they are new, modern and trendy, I think te Youth will definately like them. I've the design of the banner of the website, adding the use of green to make it a bit more colourful and attractive. I'm very happy with the results. Some info and the web address are printed on the back of the cards.
week eleven
Major Project
This week has again been dominated by Major Project work. There is a few wee things that I will want to change on the portfolio site before the hand in, eg - the contact form, but maybe i'll get to look at that next week.
Forum - Change to Vanilla
Last week I installed a PunBB forum onto the website, but after showing it to Nick, it was suggested that a Vanilla forum might fit in better with the style of the website. It's a little more inconspicuous and mite be a little easier to adapt into a similar visual style of the site. I thought that I would set up the Vanilla forum, then choose which I prefered...whch happens to be Vanilla.
I was able to change the visual appearance of the forum through CSS and utilise the built in option which allows the administrator to select the style source.
iFrame
Instead of the forum opening up in a new page, as I was doing with the PunBB, I felt that the Vanilla forum was adapt to working within an iFrame. An iFrame allows the forum to be displayed with a 'frame' within the current page."
iFrame Code
<iframe src="gallery/index.php" name="inner" width="950" height="800" align="middle"
frameborder="0" id="inner" scrolling="yes"></iframe>
Gallery
I wanted to employ a gallery where I could upload and display images. Rather than waste a lot of time trying to build a gallery which would be inferior to what is already out there, the smarter idea was definitely to find an appropriate open source gallery, and adapt it to my site. I tried and tested a few different option, but settled upon one called Zen Photo
I've been able to suitably fit the gallery into the a page, and have been able to edit the colours etc to suit the site. The gallery allows the administrator to set up as many different albums as they want, currently I have set up 3 (see below).
When the user selects the desired album, all the picture contained within that album are displayed as below. The images can then be selected for an enlarge view, or comments left if desired.
Audio Section
Wimpy Player
I wasn't quite sure how I was going to go about making the audio section of the page. I wanted to stream the audio from the site, as supposed to making it available for download. I discovered Wimpy Player, which was available online for $40. The player is 're-skinable', and I found a skin/style on the internet called 'Cosa' which I feel fits into the style of the Youth website. Below you can see the Wimpy Player with the Cosa skin applied.
News Section
'Paginating' Results
I had created the 'News Section' a couple of weeks ago, but it occurred to me this week that I wouldn't want all the news appearing in one page, continually getting longer and longer with old news etc. The way around this was to paginate the results. I hadn't tried to do this with anything before, so it took me a bit of time to get it working, but with the help of the Ullman book i've got it going and am very happy with it. At the moment, I've set it to display 3 news items per page, however this can be increased or decreased if desired.
Word for the Week
Andrew Dobbin, my Bible Class teacher and friend, was very happy to agree to taking on the responsibility of the weekly entries for 'Word for the Week'. To allow this to work with maximum efficiency, he would need to be able to easily add his thoughts every week, which he will be able to do through the 'Admin Panel'. I decided on the required fields and set up the database like below.
Updating Word for the Week
When the user selects 'new entry' under Word for the Week in the Admin Panel, he will add a new entry by completing the form shown below, selecting the appropriate options from the drop down boxes etc.
When the form has been completed and submitted, the Word for the Week page will be updated and appear as below. As the weeks progress, previous weeks will be paginated, with only the most recent entry being shown on the initial page.
Editing / Deleting an Entry
From the 'Admin Panel' the user can also select to edit or delete an existing entry. If the were to select delete they would further be asked to confirm this action, preventing accidental deletion.
To edit an entry, a form is supplied showing the current data and allowing it to be chnaged.
Committee Profiles
I had initially thought about doing a profile for each member of the Youth, but I think that was a little pointless really. I was going to use that an a way in which I could learn how to upload images to the server. I decided it would serve more of a purpose to create mini profiles for the members of the Youth Committee, which would require uploading, but prevent making dozens of profiles for no real reason.
Uploading
Firstly, I had to learn how to upload an image to the server. Using the Ullman book, I was able to upload images to a folder which I called 'uploads'.
Creating the Profiles
I wanted to be able to create, edit and delete profiles through a form accessed via the Admin Panel so that whenever the Youth Committee changes, the website can be easily updated. Initially I tried to uploading the images directly to the database, making the field a mediumblob, then somehow I wanted to call them out again to display on the web page. I wasn't having much luck with this at all.
I said to Nick about it in the lab and he suggested that I should just upload the images to the server, and then use the database to reference the image source, along with the persons name and information that would make up the profile. I've managed to get this working.
To add a new profile, the user will fill out the form below.
When data will be submitted to the database, and will then be displayed on the committee page as shown below. The image has been uploaded to the server, and is then referenced via the database, displaying it alongside the name and information on the individual.
The profiles can be edited and deleted in the same way as other sections such as the Word for the Week.
Other Progress
Includes
as I was completely new to PHP before I commenced my Major Project, I was unaware of what 'includes' were. It was only this week that I had a look at them, and I can't believe I didn't realise them at an earlier stage...they would have saved me SOO much time, especially on the when editing the menu bar on many pages. I've created a couple of includes now for the header and menu, and have implemented them.
includes ... why ... oh why, did I not explore them at the beginning
Guestbook
I could use an open source guestbook, but i've decided i'll create one as i've already used and open source calendar, gallery and forum. I feel I have made the smart decisions by employing the open source options to meet those three needs, but i'm conscious that I don't want to overdo it. I've begun work on making a guestbook. More on this should follow next week.
week twelve
Major Project
Logging the Time
It was way back in about week 6 or 7 that I first encountered the problematic timestamp, it's week 12 and I finally got it sorted! Instead of using timestamp or datetime in the
database, i've just set the field type to text, and use the following code to log the time into the text field, and then to output it.
inputting the current time
outputting the current time
result
CMS re-design
I had been completely focusing on the functionality of the CMS, trying to get my head around the PHP etc, and hadn't worried to much about
the aesthetics of it. This week i've spent a fair bit of time improving the look, feel and navigation of the admin area. Here's a few screen dumps
of some of the changes.
Admin Area Overview
Section Overview
Within the individual sections in the CMS system, i've placed the forms in the right context column to fit into the style of the rest of the site.
I've created a navigation box in the top left of each section to navigate within that section.
Reports
In order to keep up-to-date with the old members of Youth who are now in full time for work for God, we wanted a 'reports' section. I've built it
so that the individuals can log in and write a report whenever they wish.
The user will then be guided thought the required steps for adding, editing or deleting a report. When the user adds a report, the output is shown below.
Guestbook
I began work on the guesbook at the end of last week and completed this week. See below.
MP3 player
I was unsure abouthaving the media player pop up as soon as the index page is accessed, people may not realise it has been blocked by a pop up
blocker, and others may find it annoying. To give people the option of listening to background music, i've created at tab 'music' in a noticeable
position, which launches the mp3 player in a pop up window.
week thirteen
uni is finished, classes all over. 4 yrs of it....its weird, however, the Major Project rolls on, consuming me...my thoughts, my time, my sleep.... my life
Major Project
The final push now really. There was 2 main things I wanted to get done this week - video and location map. Aside from those, a few tweaks here and there would probably do the site the world of good.
Video
taking the footage
This was really to be my first real experience with video work. The only video work I have ever done was as part of a group assignment back in 1st year, so I was a little nervous but excited about the challenge. The first thing was to gather the footage for the video, which was done in 2 steps :
out-takes - not sure if they are called 'out-takes' or what, but that's what i'll refer to them as anyway. This involved taking clips of footage of me doing a few different things such as walking, working, using a computer etc. Clips that would in some way represent my everyday life.
in-takes - again, i've just called this 'in-takes'. This involved taking the footage of me actually talking and giving my testimony. This was done indoor to to try and get as good a sound quality as possible.
inputting the footage
I transferred the footage from the camera to the computer using a firewire cable. I was advised to transfer the footage in smaller chunks instead of doing it all at once, was it would be easier and quicker to deal with at the editing stage.
editing the footage
I used a piece of software called Song Vegas. I don't own the software, or even a copy of it, but I was told that it was a very useful package, I was able to download a 30 day trial version which has worked out well.
The interface was reasonable easy to find my way around. You can see the layout of it below. Various effects were available, and I used a couple of them like the 'fade in' 'fade out' and 'black and white' options.
After a few different trial runs, I produced a version of the video which I was very happy with. I added music into the background, decreasing the volume of it so as not to overcome my voice, and I think this has really helped it. Feedback on the video so far has been really good, with people commenting that it was 'moving' and 'powerful'. The feedback from the video has really encouraged me, and hopefully i'll be able to make some video's of other people from Youth in the future.
Creating 'Flash Video'
In order to effectively display the video online, I used Flash Video. The AVI file produced from editing the film in Sony Vegas, was imported to Flash as below.
Importing Flash Video
I was then able to import the Flash Video into Dreamweaver, as shown below. The process of importing the avi to Flash, then the Flash Video to Dreamweaver, produced a number of files, and I needed to upload the 2 .swf files and the .flv file for it to work online.
The video can be viewed at www.omaghyouth.org/testimonies.php
clip from video (in-take)
clip from video (out-take)
Location Map
Previously, I has just a plain map of the part of Omagh showing where the Church was. In truth, it was a fairly poor map, and Google Maps didn't give the area in any great detail either. I'd intended to come back to the map and do something with it, but never knew what.
Towards the end of last week I thought it might be cool if I was to create a little movie in flash that would show the user how to get to the Church from a recognisable, central location in Omagh - the Bus Depot was the most suitable place. The map should be simple and clear, showing some landmarks and road names. I produced the movie below. It plays automatically, and can be restarted by the red button in the bottom right hand corner.
Google Maps
As well as using the flash movie, I still liked the idea of having a map. I checked out Google Maps again, and realised that I could use it, as long as I didn't use the 'Hybrid' view (that's what I checked for previously when I thought Google Maps didn't cover Omagh). Anyway, I was able save a map, then place a marker on it. I've placed a link to the map on the location page.
Guestbook
Editing Comments
I created the Guestbook last week, and allowed the deleting of comments through the 'Admin Area', but I hadn't created a way to edit the comments as I didn't think this would be very useful. However, during the lab session on Friday, Nick suggested that it may be a useful idea to allow the editing on comments, incase someone may post some details to it of an event, but maybe get the time wrong of something like that.
The user can access the screen below through the Admin Area to edit the comments.
Admin Tweaks
User Testing and Icons
When watching a user navigating around the Admin Area, I noticed that initially it took a brief moment for them to spot the 'Delete | Edit' buttons. I thought I could make it clearer to the user by the use of icons, which after doing, I think has definitely rectified the problem.
Paginated Views
I had 'paginated' various sections of the front end of the site, however it occurred to me that lists and lengths of pages could also become annoying in the Admin Area. For this reason, i've paginated sections such as 'News' and 'Guestbook' to show 5 records per page, making the whole thing a lot more manageable.
Portfolio Site
Featured Project Update
Omagh Youth Site
I've changed the 'Featured Project' in my portfolio site from Milan Clothing to Omagh Youth. I think the Omagh Youth site
will be that bit more impressive to potential clients or employers as it has entailed a CMS and is a larger, more complicated site.
Special Mention
As I do feel that the Milan Clothing site is an impressive showcase of my skills, I wanted it to still be noticeable. For this reason, I placed it in a 'Special Mention' section just below the Featured Project. I would still like to draw attention to the Milan Clothing piece of work.
Other Work
There have been various other bit and pieces that i've carried out this week which aren't really quite major enough to describe in detail.
Tweaks to Banners
I wasn't completely satisfied with the banners on a couple of pages, namely the Schedule, Audio and Forum pages. I've made some changes to these, for the better I feel.
Logo now a Link
One user mentioned to me that they were on a page and wanted to return to the 'home page'. They automatically went to click on the large 'Omagh Youth' logo on the top left of every page, assuming it would be a link (which it wasn't). This seemed to be a fair point, so i've made it a link to try and make the site even more user friendly.
Form Textarea Size
Nick pointed out that the text areas on some of the forms in the Admin Area may be a little on the small side. For some of them, i've purposely made them smallish to indicate to the user that only a few lines is desired for content in these section, but for other sections such as 'Word for the Week', I agreed that the input area should be much larger.
'Save For Web' Settings
I'd always been one for saving images for the web using the 'save for web - maximum quality' setting. Someone mentioned to me that some of the images just take a little second or 2 to download. I experimented with saving the images on 'high' or 'very high' and bother gave a considerable file size reduction than the 'maximum' without a noticeable drop in quality. I've went through a lot of my larger images, such as banners, and re saved them to reduce the file sizes.
Summary
can it really be finished?? instead of feeling a sense of relief...i'm actually feeling probably more worried than ever
The project is complete...it's scary. This piece of work will account for 50% of Sem 2 ... 25% of my total degree. After about 2 months of solid work on the site, it would be fair to say that i'm getting over familiarised with it, but the feedback from every new user to see the site is really good.
I've pushed myself and this is by far and away the biggest, most impressive and most complicated piece of work i've ever done. I've extended my knowledge greatly by pushing the boundaries are technologies and languages I hadn't used at all before.
The site is online and available for viewing at www.omaghyouth.org.
What i've Learned
PHP - this was my first contact with PHP, and i've used it extensively throughout the project. I'm proud to have developed a Content Management System allowing the end user to keep the site updated. Images can also be uploaded using the CMS, and then called from a database.
MySQL - used to create the databases and queries for the CMS and for populating sections of the site.
video - producing my testimony on video gave good experience of what is involved in the filming and editing of footage, then preparing it for use on the web.
open source - i'd never before used Open Source applications such as the ExtCalendar and the Forum. It's given me a greater awareness of the powerful tools that are available out there which can really compliment and improve the functionality of website's. Also, the experience of installing them and tweaking them to suit your site.
time management - a project of this scale and difficulty had to have a great deal of time management, having to continue with it for an extended period whilst also working on other assignments. I feel that after a slow start, i've ended up managing the time really well as I haven't had to rush things at the end to get it completed, which is often the case.
css skills - i've definitely improved my skills in this area.
design skills - at the very beginning, I never thought that the site would look the way it does now. I had never thought about using browns and white, however after coming up with the idea it's worked out really well.
Visuals
Below are a series of screen dumps showing overviews of the site and the admin area. The site can be seen first hand at www.omaghyouth.org
Home Page Overview
Testimony Video Page Overview
Admin Area Overview
Admin Area - Update Word for the Week
ExtCalendar Overview
Gallery Overview
Forum Overview
