A testing time…

As part of my web design course I have to undergo a test. The time had come to do it and I was nervous about it as I was not allowed to get any help from either my tutor or my fellow students. The test comprised of creating a portfolio website to showcase the websites I have created and all the other material I had created in Adobe Photoshop and Adobe Illustrator. I also had to do a theory assignment but thankfully I had completed that in February 2013 when I was in between projects.

I started on the test on the Monday. I had an idea for the site logo. I would use the logo which had been rejected by my client. Waste not, want not! I stretched the logo out, put new text on it and once I was happy with it I worked on the colour scheme. I was going to use Adobe Kuler to create a colour scheme from my logo. Unfortunately I was not able to do this as Kuler had recently been updated and this faculty was temporarily gone from the site. So I had to use Photoshop to pick out colours from the logo and use the colour scheme designer to choose complimentary colours. I picked a bright colour scheme. I showed it to my tutor Martine who was not allowed to pass comment on it as it was part of a test. However, shortly thereafter she announced to the class that the best way to present a portfolio website was to use dark complimentary colours. I took the hint and changed tact and decided to use dark greens for my site. I showed it to Martine who seemed happier with it.

The recycled logo for my test site

I decided more or less to utilise the work I had done previously in my project two site although the dimensions of the test site would be slightly smaller. I had to do a wireframe diagram of the home page which I quickly got through. The next day, Tuesday, I started on the code for the home page. Unfortunately when I ran the code the slideshow which was meant to have a background of a frame (which I created in Photoshop) was nowhere to be seen and the slideshow was not running smoothly, it looked jittery. I couldn’t fathom what was the matter so the next day I decided I would leave it for another time and proceed onto the next page.

This was the about page which consisted of a photo of me and a blurb about myself. Writing the blurb took longer than the actual coding. However, once more there were problems, neither the photo nor the text were in the right place. I stuck at it until the end of the day but it was still unresolved.

The next day was Thursday and I wrote the code for the contact page. This was relatively simple as all I had to do was copy the code from my previous web site. The code ran as it should, no problems thankfully. I then moved onto the photo gallery page. I picked six images from my work in Photoshop and Illustrator and what was meant to happen was that once clicked they would appear in a lightbox slide show. Yet again I hit some snags. The thumbnail images weren’t in the right place and the lightbox slide show didn’t work. This was very disheartening.

The weekend came so I had two days away from all the coding. This obviously did me some good as when I came in on Monday I solved a lot of the problems I was having. I got the lightbox slideshow working on the portfolio page when I noticed there was a apostrophe in part of the javascript code; it hadn’t worked for that sole reason! I also sorted out the thumbnails to my satisfaction too. I also fixed the about page although the text wasn’t quite laid out as I liked when viewed in Safari & Chrome web browsers but it looked fine in Internet Explorer & Firefox. But it was good enough. I had managed to sort out two out of three problem pages and had just had one left to tackle.

On Tuesday I gave the home page my full attention. I just couldn’t see what the problem was. I was considering taking out the slideshow altogether and just showing four thumbnails of my other websites. However near the end of the day I spotted something, the slideshow was called “SlideShow” in the HTML but was called “slideshow” in the CSS. This meant that the CSS code for the lightshow wasn’t being run as it was titled incorrectly. So once I changed it to “SlideShow” in the CSS the slideshow stopped being jittery and ran properly. As for the frame, I just couldn’t get it to appear behind the slideshow so what I decided to do was give the slideshow a border. This looked well so I was happy with it.

The Lightbox Slideshow on my Portfolio site

The website was more or less finished. I added a links page which showed a sitemap. Then I had to validate each webpage, check for any mistakes or omissions and then upload the site. I was very pleased with the colour scheme of the finished site. I had there weeks to do it and I had done it in under two. The testing time was over and I had done well…

The Gallery page

The Contact page and sitemap were two pages that I whizzed through on my Project Two website. The Gallery page was another matter entirely. Well, it wasn’t the Gallery page itself but the extras that were added to it. The Gallery page consisted of six thumbnail photographs each of which opened up in a new window when clicked and a video to the right of the thumbnails. I registered with Vimeo which is a video sharing site. I then uploaded a video of mine to Vimeo, once this was processed (it took a long time) I was able to copy the code giving the address of the video file online plus other information such as the size of the video and other info governing its behaviour. The video and thumbnails were from the recent wedding of my wife’s sister. That was the Gallery page finished for the moment. I was happy enough with it.

The Gallery page

Next I had to augment the Home page of my Project Two site. I was going to add a slideshow to it. This involved adding pictures inside a container called “slideshow” and then adding jQuery, which is a form of Javascript, to the code. Thankfully I got this working first time round. It wasn’t difficult as it was mainly a case of copying a few lines of code and so long as everything was in the right place it would work.

As preparation for what I wanted to achieve with the Gallery page, I did an assignment whose aim was to create a “Lightbox”. What this basically means is that when you click on a thumbnail a white box appears containing the full size image with the option to click an arrow to go onto the next image or the previous image. It is basically another sort of slideshow. The instructions to create this Lightbox were in my web design book but unfortunately there were several omissions which meant that every so often I would have to ask for my tutor’s assistance. Once it was seemingly finished it still didn’t work. With assistance from my tutor Martine and web design student Ross I eventually managed to get the assignment to work. The problems I had were mainly to do with the fact jQuery is case sensitive while HTML isn’t. The folder containing my images was in uppercase but in the code it was in lowercase and I didn’t realise this for the longest time.

It was now time to add the jQuery code for the Lightbox to my Gallery page. Even though I got it working for the assignment I couldn’t get it to work for the Gallery. Once more it turned out to be problems with case sensitivity! I was slow to learn my lesson! Another problem I had was that the text describing the photo in the Lightbox wasn’t visible. It turned out that the text takes the colour given to it in the body property of the CSS. The colour there was white and the background of the lightbox was white which meant of course you couldn’t see the text. Finally the Lightbox worked and the text was visible. It was worth the frustration though once it was finished and it is a great addition to my Gallery page.

The Lightbox slideshow in action

And onto Project Two…

As I’m finally finished my client’s website (project 3) it was now time to move on to project two which is a website with a photo gallery. My tutor Martine kindly provided me with Photoshop templates, four in total for each page of the website. I changed the colours of the Photoshop document and changed the logo and header around a bit so it wouldn’t be a mere clone of my tutor’s template. I also created a gradient for the Navigation bar which I thought turned out really well. Next I drew a wireframe sketch of the home page showing all the different divs and all the other components. This was kind of doing it backwards as normally one would do the wireframe, then do the Photoshop template. Once Martine was happy with it, I moved to writing out the code on paper which Martine once again checked. Now it was on to the actual coding which didn’t take long as it was all in front of me.

The aborted picture with the blacked out faces

Once I ironed out any problems with the coding I moved onto the about page. The point of the exercise was the design of the brief rather than the content but as the page was to be about me I didn’t want to just use lorum ipsum text as filler. I wrote a little about myself in more detail than I have ever done for an online piece before. I also put in a photo of my wife and me though I originally blacked out our faces but that made it look hideous. Once I had the wireframe done and written out the code it was time to input the code in Notepad++. The page didn’t look right at all and for the longest time I tweaked it until it was in the right shape. I ended up being very pleased with the final article.

The finished About page

Finishing touches

The site was more or less finished. I had to check the web pages in different browsers as how they are displayed can vary. The recipes page looked fine in all the browsers except for Internet Explorer 9. When viewed in that browser the text over ran the box it was placed in so I had to reduce the amount of padding around the text so it would fit in.

Next it was time to validate the HTML and CSS on the World Wide Web Consortium website. I had a problem with all the pages due to some code I had put in which highlights the name of the current page on the navigation bar. The validator didn’t like the fact I had used identifiers that were present in other parts of the code. So I had to change the names of them slightly, usually by putting a dash in, for example “abou-t” instead of “about”. The other problems I had were usually caused by oversights such as forgetting to close a tag in the HTML. And there was one line where I had put two sets of inverted commas in one after the other instead of just one. The language used by the validator was sometimes difficult to decipher but it would give the line number of the code that was at fault. However sometimes the error showed up on the given line but actually originated earlier on. Getting used to this was half the battle.

The next stage was to do print outs for my portfolio. I printed all the validation pages for my site on the World Wide Web Consortium website. Next I had to print out all the CSS and HTML code along with screen prints of each web page. By the time I was finished there were over 50 pages!

Finally it was time to upload my website onto the GHIS website. Everything went well until I looked at the footer after everything had been uploaded. The Facebook icon wasn’t there, it was replaced by the text “like me on Facebook”. I couldn’t understand it! I started to trawl through the footer code to try to discern what was the matter. I was none the wiser. Thankfully a thought hit me like a bolt before I tore the footer code asunder – perhaps the Sonicwall firewall software used in GHIS was stopping the icon form being viewed. I went down to Hughie who is in charge of the software and he confirmed my diagnosis. So there was nothing wrong with my website – I was so relieved!

Where is the Facebook icon?

My webpage is now finished and uploaded. I have to resist the temptation to further tinker around with it. I have to leave it be. I’m quite proud of it. I have had some very positive feedback on it from Martine and others. It has been an interesting, frustrating and rewarding experience. And I would gladly do it again.

Here it is!

Things I’ve learned

I’d like to talk about some of the valuable lessons I have learned along the way of this project. First of all always have a backup of your HTML and CSS files so if you run into a problem you have something to fall back on. Also, when trying to troubleshoot a problem it is important to be aware that it could be just a little thing causing the problem. I learned the pain that forgetting to add a semi-colon or adding two left curly braces instead of one can cause.

Most of all I learned a lot from working with my client. Quite often during the course of building the website I would be adamant that what I was working on was for the best then my client would turn around and say she did not like what I was doing. Early on in the process I would take this to heart and feel wounded. But I would have little choice but to do things the way she wanted and over time I learned to accept this whenever it occurred.

It is important to recognise which battles are worth fighting for and which ones you should give in. If it was a difference of opinion over a picture then just allow the client to have their way. If it is a fundamental issue that is the difference between making the site legible and making the site look ridiculous then you fight tooth and nail against the ridiculous. When it came to the fundamentals of web page design I had my tutor Martine on my side with her sage advice.

I did find that over design issues my client would give way once there was a logical argument presented to her. She knew that I had the best interests of the website at heart. I learned valuable lessons in not taking things to heart and when to fight for the good of the website.

The last two…

There remained just two pages left of my client’s website. One was the sitemap which did not really involve very much, just a list of the six pages of the site. The other was the contact page. Apart from giving contact information of my client, this page also had a contact form where prospective clients would fill in details such as their name, e-mail address and reason for contact. Most of the code for the contact form was already done in an exercise devised by my tutor Martine to get me acquainted with forms.

The website was not going to be used by my client for a number of months. She is a dietary coach in training and after her exams she has to set up her company and must be insured in order to practice and only then will she be utilising the website. However, as part of my web design course I must have the website online on the GHIS portfolio website. This meant that for some months the site would be online, not wanting to draw attention to itself. Martine told me that each HTML page of the site would need to have code in it which stops the page being listed in search engine results. I found the code online and put it into each page. It goes beneath the Title tags in the head of the HTML document. And here it is:

meta name="robots" content="noindex, nofollow"

The other thing of importance that was also brought to my attention by Martine was that we did not want an e-mail address on the contact page that could be readable by spambots.

“E-mail spambots harvest e-mail addresses from material found on the Internet in order to build mailing lists for sending unsolicited e-mail, also known as spam.”
From Wikipedia, the free encyclopedia.

I had to do a bit of research online as to the best course of action to take. I decided that the method I would use to defeat the spambots was to use an image of the e-mail address on the page rather than typing it out. This I created quickly enough in Adobe Photoshop. So now I had everything I needed to finish off the contact page and it didn’t take long at all. Over the next couple of days I tweaked things a little on the whole site, making it look consistent.

The Contact Page

Problems…problems!!

I’m pleased to say I got the remaining text for the website from my client so I could move on with the remainder of the web site. I began with the “Weight Loss Programme” page, creating the HTML page first of all then entering the CSS into the stylesheet. It was going well, everything was working the way it should.

Next I worked on the “Recipe” page, again working on the HTML first then doing the CSS. It was while I was working on the CSS for this page where I hit a huge snag. When I ran the “Recipe” page it showed the header, navigation bar and the pictures on the left hand side as it should, but the rest of the page was just in text form with no CSS formatting showing. Worse still when I ran the other pages on the site, they too displayed the same behaviour. The only page that escaped most of this was the “Home” page although it did not display the footer properly.

I asked my tutor Martine for a hand. She asked me did I have a copy of the stylesheet that still worked properly. I did not. I resolved that from now on I would always have a copy of what I was working on prior to alterations. Martine had a look at the HTML and the CSS. She couldn’t find anything obviously wrong with them although she did not like the way I had done some things so I set out to rectify these issues as much as I could.

Still no joy though so I began to put comment tags around those parts of the stylesheet I wanted omitted when the code was run. That way I could stop parts of the code from running and would eventually see what worked and what didn’t. Finally I saw what was wrong. I had two left curly braces ({) one after the other. The second curly brace stopped the browser seeing the code after it. It is amazing how one little character can have such a catastrophic affect on the website! I was pleased that I had managed to solve the problem by myself, for the most part.

The next thing I wanted to do was to link a picture on one page of the site to a specific area of another part of the website. I couldn’t remember how to do it so I looked in the course book which Martine had written. It seemed simple enough. The part of the site you want to link to is given a unique identifier and the picture is given the address of this. Unfortunately when I clicked on the picture the webpage opened with no CSS which meant everything was in barren text form with no formatting or pictures.

How the page looked when I clicked on the picture

I asked Martine to have a look at what I had done. She said I had done it just as it had been in the book. But it still didn’t work. There was a forward slash (/) in the code for the picture. She suggested that I try taking it out. Once I did this it worked the way it should have. So there was an error in the book, not my bad this time!

How the page looked when I took out the forward slash

Thankfully all the problems were ironed out and I learned a few things as I went along. Most of the web site is now done, just the “Contact” page left to do along with a few extra details.

Half way there…

I ended up waiting over a week for my tutor Martine to come back and rescue me. She did not come up with a solution right away (this stopped my pride from hurting slightly) but she had to go away and think about it. But solve it she did. Now the “Home” page was looking more like how it should although it still needed some work. Mainly it was the text of the page which needed tweaking, trying to make it look balanced and as readable as possible. I tried different font sizes and letter spacings which eventually got me the look I wanted.

The finished Home Page

I started working on the “Dietary Services & Fees” page next which contained a lot of material that was demanding to decipher and looked very jumbled. I had just done an assignment using tables and Martine suggested I make a table from some of the data contained on the page. This made a lot of sense as it was a means of presenting the information in a much clearer manner. It was also a good exercise to make me more fully understand the coding used in making tables.

Martine had many suggestions on making it more attractive and readable which contributed greatly to the finished article. Once I was pleased with the table I worked on the remaining information on the “Fees” page. As the table contained the majority of the material there was less data to present and I was able to lay it out in a more legible manner.

The Table For The Fees Page

The next page I worked on was the “About” Page. That went a bit more smoothly than the other pages as I was able to use the layout and font sizes etc from the previous two web pages. Once this was finished I had half of the website done. Unfortunately I wasn’t able to go full steam ahead with the remaining three pages as I didn’t have the textual information from my client which I needed. Also I have to be taught about forms by Martine which would be used in the “Contact” page. So hopefully when I get the info I need it’ll be full steam ahead with the rest of the website.

Code glorious code!

Having done the wireframe of the home page on graph paper and the mock up in Adobe Photoshop, I was at the stage where I could start doing the code. However, jumping into the CSS code at this stage is frowned upon as my tutor Martine wants us to write it out first. This is good practice as it means you should have everything worked out before you input the code into Notepad++.

I had my wireframe drawing and a sheet of paper with the measurements for everything I could think of in front of me, along with a rough workout of the code. It was surprising though how when you think you have everything worked out you still notice errors and omissions which you have to iron out. Once I had all the CSS written out I gave it to Martine to check. She was happy with it and so I started on the actual coding.

First of all I inputted the code for the HTML document. This contained all the pictures and text for the body of the document, along with all the different boxes or Divs which provide the structure. The home page run in a web browser at this stage would just show all the different elements one on top of the other and would not be terribly impressive at all. Once Martine checked the HTML it was time to do the CSS.

On the left the CSS, on the right the HTML

The CSS is what gives flair to web pages. How text looks, the spacing between each picture, each Div and basically all the style elements are governed by the CSS. I have a habit of checking how the document looks in the web browser after every few lines of code. This lets me know whether the document is going the way it should. Even with all the preparation I had made there were still some errors and omissions which goes to show one can never be too prepared.

Unfortunately by the end of inputting the CSS code it was apparent that something was wrong. The Div with the pictures was not where it should have been and the spacing between it and the Nav wasn’t right either. I couldn’t work out what the problem was. I kept combing over it to try to spot any mistakes but I couldn’t find any. Martine said she would have a look over it the next day but the next day there was a snow blizzard and she was unable to come in. So I am stuck with a broken webpage which is frustrating to the extreme. Hopefully Martine shall be able to come in tomorrow and end my misery!

Home page drawing & mock up

Now that I knew what way to lay out my webpage I decided to have another go at a web page mock up. I started out by using graph paper to draw out the individual components of the page. The pictures and text parts will become divs once I do the code for the website. Once I was happy with this I showed it to my tutor Martine. She was happy with it as well.

Graph Paper Mock Up

Next it was time to use Adobe Photoshop to bring colour to the page. I started out by placing horizontal and vertical guides wherever they were needed to mark out where the logo, navigation bar, pictures, text and footer were to go. The rest of the page went smoothly as I knew where to put everything. Once this was finished I e-mailed a PNG of the document to my client. It seemed like an eternity waiting for her response but like it she did. Also she was working on the text for the website and she would have it for me by the end of the week. This was most gratifying.

Client Home Page Mock Up

After the event I decided that there needed to be more space between the individual elements of the document. This could be done when I do the actual code for the webpage.