Evaluation

Evaluation

1. My clients original idea was quite concise and he told me exactly wanted on the site, this meant that I had some very clear guidelines to work to.However, on the design front of the website I was given a lot of freedom, and I was told to do what I thought was best.  Due to this my website was in quite close relation to the clients original intentions, but the design was all my own work, but the client was happy with the way it turned out. 

2. My website was to work as a promotional and booking website, so that clients could easily access information about the DJ and book him without confusion. To make sure that it fit this purpose I made these pages easy to reach, with them in large buttons on top of every webpage. This made them easy to reach and was proven in the user tests.

3. A technical quality was the Google form that I embedded into the booking page to allow inquires to be directly emailed to the clients inbox.

4. Some aesthetic qualities I made was the images that I created for buttons on the navigation bar. This made a change from the usual plain text that are found on most websites. Also, I think that keeping the same layout for most of the pages kept the website simple and more visually pleasing. 

5. It has a style that connotes a party/exciting vibe. 

6. The content was all provided by the client and was spell checked by a computer and checked again by me.

7. The client provided the information so it was as the client wanted.

8. My production skills where good, as I had a clear idea of what I wanted the website to look like along side the guidelines the clients had given me. My presentation was good as I had followed a lot of online tutorials before I set out to create a complete website. I think that my creativity was limited as the I found that working with HTML was hard and some ideas I had not possible as doing them in HTML where far to complex for me. 

9. I think that I could have been better at documenting my work for my client. This was because my client was in close contact with my client at all time, so I communicated constantly and often forgot to note this down. This is one downfall I had in my production. 

10. If I was to change my project I think that I may have tried to create my website completely from scratch. This would mean that I would have more freedom and understand what had been coding more. However, we did have a very limited time to create this website so this method may not have worked. 

11. One way I could have improved my websites search engines optimization would be to accurately describe what content was on my page, for example I accidentally kept the name of my webpage at the name of the template I used, to use increase SEO the should have chosen one that accurately describes the page for example, 'DJ Luke Shires'.

Another way would be to use 'metatags' to my advantage. This would give a description to what  my website to Google that would mean that the page is likely to show up in more web searches. These tags can be a sentence or up to a whole paragraph. 

A final way would be to optimize the use of my images, this would mean the images would been seen on a Google image search, which would bring traffic in from another source.

Task 3.2

Technical Testing

During the technical testing, I used a number of web browser to see if it work across platforms. I had the most trouble with 'Internet Explorer', where a number of images and pages took a while to load. 

The Favicon on every page doesn’t display, and the text in the tab is always ‘Basic 81’ which is the name of the template that I used.

Home Page:

Links

• Home (Yes)
• Why Me (Yes)
• Radio (Yes)
• Gallery (Yes)
• Book Me (Yes)

Layout (Yes)

Images Loading (Yes)

Navigation Bar Placement (Yes)

Why Me:

Links

• Home (Yes)
• Why Me (Yes)
• Radio (Yes)
• Gallery (Yes)
• Book Me (Yes)

Layout (Yes)

Images Loading (Yes)

Navigation Bar Placement (Yes)

Radio:

Links

• Home (Yes)
• Why Me (Yes)
• Radio (Yes)
• Gallery (Yes)
• Book Me (Yes)

Layout (Yes)

Images Loading (Yes)

Navigation Bar Placement (Yes)

Gallery:

Links

• Home (Yes)
• Why Me (Yes)
• Radio (Yes)
• Gallery (Yes)
• Book Me (Yes)

Layout (Yes)

Images Loading (Yes)

• Enlargement of photos failed, webpage displays ‘404 Page Error’

Navigation Bar Placement (Yes)

Book Me:

Links

• Home (Yes)
• Why Me (Yes)
• Radio (Yes)
• Gallery (Yes)
• Book Me (Yes)

Layout (Yes)

Google Booking Form (Yes - Email received)

• Took a while to load on ‘Internet Explorer’

Navigation Bar Placement (Yes)

After running these technical tests I then decided to run it  through the W3C's code validator.  The information provided on the website says 'This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. If you wish to validate specific content such as RSS/Atom feeds or CSS stylesheets,MobileOK content, or to find broken links, there are other validators and tools available', This basically means that the website runs through the the coding on my website to see if it is all correct and working properly.

User Testing

Too test my website properly I gathered a few users to try out my website for me, this would give me a good idea about what the customer response was, and how the customers experience could be enhanced. I set each user up with a laptop with the website running and also a iPad or iPhone. The users then had to fill in a response for which asked them to perform tasks, a give suggestions for improvement.

Here is the form I created: 

Form

I then collected the responces in a spreadsheet, here are the results.

As you can see there testing showed similar results to mine, most of the complaints and troubles seemed to be from either the pages loading too slowly or the enlargement of the images not working correctly. 

However from these results I can see that users found my website easy to use most of the time, and after a few improvements involving the loading time and image enlargement the website will be working full and to a higher standard, making it better as a whole. 

Wireframes

Wireframes

In order to know how to design my webpage I had to create wireframes to work to. These frames show the basic layout of my website without any content in them. They basically give me something to work towards. These are the ones I made:

This is the wireframe for the home page. I have included a picture and possibly a video on this page. However, the elements on the page may change once I am in the creation process.

This is the wireframe I have chosen for the other pages of the website.  I have chosen to have them all similar because I think that a website is easier to read in this way, and keeps it clean and simplistic. Again the elements may change but I hope to keep them in the same place. 

Creating a Footer

On the bottom of every webpage I wanted to have a small footer that had links to the clients Facebook, Twitter and Book me pages. I did this by using this code:

This tag is usually used for addresses but it seemed to work well for this purpose, this is what the design looked like:

Creating a gallery table

For one of the pages on my website, I had to create a gallery to display a number of images. I had a look on the internet for a template to do this, but I discovered that they used a lot of Javascript, and I don't know how to use this language.

Instead of using one of these I decided to make a gallery page out of a HTML table. I would then be able to insert the images and display them in a suitable way.

This is the code I create for this:

This is what the design looked like: 

I made sure that all the images where the same size by specifying in the code what size i wanted them, this made sure that they looked good, and no images where too big or small.

Diary Post 1

This is the progress I have made today.
From the template, I changed the background and began to change the layout to see how I wanted it to be.

HTML Tutorials

Here is a tutorial that i followed on how to create a clickable picture page, here is the result:

Here is the code that i used:

Website Sitemap

Website Sitemap

This is the sitemap I created for my clients website. I used his current website as an outline but tried to improve on it and reduce the number of clicks that needed to be made.

Here is the site map:

Similar Site Comparison

Similar Site Comparison

To get a feel for what type of website I am going to be making, I decided to have a look at some websites which where similar to what my client wants there website to be like.

DJ Welly (http://www.djwelly.net/home.html)

This is my annotated analysis of this website: 

 This is the website of a professional DJ, therefore is likely to be made by a professional site builder. This gave me a good idea of what pages would be good to have on the website and also gave me the idea of linking all my clients social networking sites to the website.

Mobile DJ Gary Scott (http://www.themobiledisco.com/home.html)

This is the picture analysis of this website:

This website is a lot more basic, and gives me an idea of what basic things I should have on the website. The colour scheme and layout is very basic, that makes me think that it was made by the DJ himself. I like the fact that the websites introductory paragraph is so personal, its gives the website a good feel to it.

Client Brief

Website Planning 

I created an electronic survey for my client to fill out, that would give me the best idea of what the client wanted and how they wanted their website to be, the survey that I created can be found here: E-Survey

Here is the response I received from my client:

Shortly after sending the survey I got a response from my client. My client had clearly answered my question, telling exactly what he wanted. He also sent me in a separate email he current website, which helped me a lot when it came to what content would need to be displayed on his website.
This is his current website: DJ Luke Shires



The client told me that he wanted a website primarily for promotion and booking purposes, some where that people could see pictures of previous events and book one  for themselves. From what he told me I created a checklist for the things that would need to be on the website:

• Information about the client
• A gallery page
• A page about his work in radio
• A booking page

These are the very basic things that will need to be on the website.

After I received this information from my client I then quickly went about creating an asset audit sheet. This is basically a sheet that shows all the information that will have on the website, where I got it from and any issues I had with it.  This sheet will help me when I come to making the website, as all I will be able to see where I am going to get my information from and will help with general organisation. 
The audit sheet is available here: Audit Sheet

Creating Tables

Creating Tables

In this lesson we created a table in HTML. Tables where very important in the layout of websites a few years ago. Nowadays layout is usually done in the CSS for the website. However we practised making a HTML table from scratch. 

This is the coding that I wrote for the table: 

As you can see the HTML code for the table is in green. This is what this code displayed:

As you can see table worked well. If I wanted more rows or cells I would add the tag <tr> for table row, or <td> for table data. 

I then learnt how to use '<div>' tags and how to use '<div>' ids. This is the CSS and the HTML that I used to do this, I have put a better explanation of div id and tags in the website.

Heres the code:

Here is what the page looked like:

15 Minute Test

15 Minute Test

1. Name two advantages of using CSS

one advantage of using CSS is that you dont have to individually change each HTML tag, instead you can create styles which can be applied to different bits of text, making then exactly the same. CSS also allows you to change many parts of a webpage by changing the style, this is rather than searching through the HTML and changing individual tags. There is also alot more choice when styling the website.

2. What does the <a> tag do?

This tag is written before a piece of text to make it into a hyperlink.

3. What does <a> stand for?

This stands for anchor.

4. Where is CSS placed in a HTML document?

The CSS is an external file linked to in the <head> of the HTML document.

5. How is CSS written?

6. How should elements be 'nested' in HTML?

Elements are nested by putting an opening tag such as <a> before a piece of text, then to finish the nest you put a closing tag, </a>. This nests the text and makes that tag take effect. They should also be first till last, so for example the first tag should be the last tag closed.

7. Why would you use XHTML?

Because it is a cleaner version of HTML. Every tag must be closed properly and everything must be nested properly. If not, it will not work correctly.

8. Name 2 rules of XHTML

Always use lowercase. Content must be 100% dramatically correct.

1.3

1.3

So far I have looked at a lot of HTML tags, some which I will eventually use on my webpage and some that aren't useful for what i am doing.

These are some HTML tags that I have found and their uses:

<b> - This tag means 'bold', putting this in front of some text will make it appear bold.

<h1> to <h6> -  This tag means 'heading',  if put in front of text it will make them look like a title. I have learnt that <h1> should be reserved only for the main heading of a website

<img src= - This codes for embedding an image. The name that comes after refers to the name of the source of the image.

<select> - This is a drop down list, which used to be coded for in Javascript unit HTML5 was realised. After <select> a tag called <option> must be used for each option in the drop down list.

<ul> - This code is for an un-ordered list, which is a navigation bar. These are usually seen at the top of webpages.

<video> - This is used for embedding a video file, this is new to html5.

I had a go at creating a very small website for a photography project which I did last year. For this website I obviously wanted  to have embedded images, I also wanted the website to be only HTML.

This is the coding that I came up with for my very simple website. This is my first attempt at website building and was done all on notepad.

As you can see, in my small website script I added CSS into the HTML. This is a bad idea if you are making a website with multiple pages, as it would mean you would have to type out the CSS script on each page. Usually the CSS is in a separate file, which you would link to in the head of the HTML script for each page.

In my CSS i have created a style division called '#FaceMe1', so anything with '<div id=FaceMe1>' will have a grey background with a 1px black border. So, if i put it around another piece of text it would look like this: 

 

And this is the coding that I used, I have highlighted the CSS:

The website can be found here: faceme.comxa.com

Task 1.2 Source

Source Codes

This is the source code to the website here.

This is a review of this webpage

This is the source for this webpage

Using Templates

USING TEMPLATES

This lesson we used a HTML template and changed the parts of the website to make them our own. I changed the images that came with the template on photoshop and uploaded them. I also went into the HTML code and changed he text on the page. I changed all the navigation bar names on the code and added a link from them, like this:

<nav>
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
<li><a href="videos.html">Videos</a></li>
    <li><a href="catpics.html">Cat Pics</a></li>
    <li><a href="cattunes.html">Cat Tunes</a></li>

    </ul>
    </nav>

As you can see I put a '<a href='for the hyperlinks to the new pages. This meant that now people click on the navigation bar they will be taken to that page.

I also changed the logo on the page. I did this by opening the logo image source in photoshop, and just played around to change the logo. I then saved this over the original image and refreshed the file in my browser and the logo changed.