Development: The Final Chapter - Completion

Finally The Wait Is Over

After long periods of time with the eyes glued to the computer, typing away..The website has been fully created.

http://www.leecunnington.co.uk/


Enjoy :)

Note: Website passes validation (Html and Css).

Development: The Fourth Chapter

Validation and Beta Testing

Validation

The Markup Validation Service is designed to ensure that a website (new or old) is not only functioning properly but also complies with certain regulations on how it should be made through Html/Css/Javascript.

The W3C Markup Validation Service is a common website which is designed to do this very job. Open for everyone to use, the user simply enters the correct web address. Example:http://www.leecunnington.co.uk/AboutLee.html and instantaneously the site will scan through the code I have created to check for errors and problems which may make it fail validation. If errors do appear on the results window, then it fails validation automatically. The great thing about W3C is that it displays all of the error messages and tells you which line and column it belongs to within the code. So it helps me to go back into dreamweaver and finding where I'm going wrong.

Validation Passed on AboutLee.html

Not all webpages will pass the first time

Looks like I've got some work cut out for me!

Beta Tests

I have selected random friends and family to test my website for me to find any bugs and errors that may occur when browsing through the site. Even though the website has passed validation, it doesn't mean that errors will go away. There will always been something that needs to be repaired over time.

From these results I have found that the website is in good shape according to the results my friends and family have given me they seem to enjoy the layout, colour styles and the way the navigation is run better than anything else. Only minor problems have been mentioned, though this shouldn't take much time at all to fix before the deadline.

Development: The Third Chapter

Almost There

Under 1 week until the deadline and the creation of the website about myself has almost come to a finish, every webpage I wanted has been layed out, full of content and colour and even some javascript has been thrown in too!

Sneak Peek

Below is the image when accessing the Fun! webpage. It gives the user instructions to enter some details about themselves and anything random that comes to mind. Some questions from my website include:

Name

Location

Best Friend

Favourite Animal

Which political party do you dislike most?

There are many more questions the user will have to answer in order to access the webpage. Once the user has completed this, the webpage will display a random story I have created and whatever they inputted into the alert boxes will fill the gaps within the story

Once the user types in all the details here is the final result: The Story/'madlib'

Note:Story has not been 100% completed but javascript has been completed :)

Here are the variables I have created for the Fun! webpage story.

I have used these variable prompts to store the items of information in which the user enters into the alert boxes.

Below is the development of the 'document.writeln' after the variable prompts which basically reads the items of information on the webpage to the user. Whatever they enter into the alert boxes during this basically fills in the gaps of the variables completing the story or 'madlib'.

Contact Form Javascript

Plan

The form needs to be designed so users will be able to see clearly the information that they are inputting and it will need to ensure them that their information will not be used by third parties. It needs to be created using Javascript functions using code which will validate the form as the user clicks the 'Send' button.

Building the Javascript from scratch using a Javascript (.js) file in Dreamweaver will make the 'product' easier to understand when it comes to fixing any problems which may arise. The 'Form Tags' (Form) will be made within the Html of the webpage and this will display:

Name

Age

Email

Comment

Once the user enters the correct information and clicks a submit button, the information will send to: http://www.sam-i-am.com/cgi-bin/echoform.cgi and will display the information from there.

I will need to make the Javascript code validate so the user cannot miss out any information that is important when contacting me (or when submitting to the sam-i-am site.) I will need to create variables which will be designed to interdict what the user inputs. So if they entered nothing in at all, then an alert will tell them to enter the information. If they enter the wrong information such as an Email address, then they will be instructed to use a valid email address.

Javascript

Here in the Javascript (.js) page, I have basically established variables for every element within the form such as Name, Age, Email and Opinion. I have then created the if statement which explains that valid is true but if the Name (for example) hasn't been entered in the text box then an alert will be displayed telling the owner to enter their name. The 'return validate_Name = false;' function stops the Javascript from executing the rest of the script until the text boxes are filled.

Form

The form is established on the Html, using input types such as buttons and text boxes to option values with drop-down boxes, it is ideal to use in form making as it's clear, simple and presentable to all user groups. Each input and select tag has a selected name which relates to the Javascript page I have created. So when executed online or in preview mode, it appears as text boxes and drop-down boxes on the screen. Each tag name in the Javascript executes along with this, working together to help the user enter the information and to correct information which is invalid.

Finished Javascript Validation Form Design

The finished design of the validated form below shows each text box filled with information. When the Send Details button is clicked, it will link to the sam-i-am website.

However if I miss out some of the information, then the Javascript will kick into gear and will alert me, prompting me to fill in all the missing text boxes.

If I do not fill in all of the text boxes, then the Javascript will also kick into gear and alert me to fill in each of the text boxes. It will go through a cycle of alert messages from Name to Age to Email to Opinion until I fill in all the text boxes.

Adding in Facebook

Facebook is one of the most popular social networking site on the planet. Why don't we add it to the site?

Here's some of the code to display a list of friends from my Facebook

The issue with the source code is that it Fails Validation. So I have decided to add it into an Iframe (impractical but useful to avoid the failure of validation).

Not very neat is it? But it's the best thing that I can do to contain the code without failing validation.

Development: The Second Chapter

Steamrolling

Development of the website has been steamrolling these past few days, I have developed each webpage to a fair standard through Html and Css codes. Layout difficulties were almost about to hinder progress on website designing but I managed to tweak the Css to work with image positions and background image locations.

Desiging Logo for the Header has been fully resolved and has been added to the webpages along with hyperlinks for each title (such as Home, Music etc.) Using the 'a href' tag.

Graphics For Headings

Using graphics for headings will be useful to help the user identify which webpage he/she is on. Using Adobe Illustrator and Photoshop I have produced some interesting ideas which I will add to the website as it progresses throughout the next week or so.

I have stuck to the original idea of keeping the font family the same for all the headers and logo's used within my website. Using the special 'Star Vader' font I found over the internet and using offset paths to create the graphical colour effects, I have found it really useful to make one style of logo. I have also kept to the same house style of colours: Red, White, Blue and Black.

In Action

Bring on the Hoverbox

Using hoverboxes in Html and Css I have been able to use this idea to expand the size of images when the mouse cursor moves over an image. By harnessing the codes, I should be able to come up with an effective image gallery to improve the quality of the webpages.

Sneak Peek - Snippets of Hoverbox Code and Demo

When the mouse cursor moves over the image, it will expand.

In action on the Music webpage

Html

The Html is the most important part when viewing the hoverbox. The Html contains the image source and the class which is set to "preview". Each image can also be setup as a hyperlink, which will be ideal for linking to other webpages on the site.. however I have currently set the names of mine to "#" for later use.

Note:Full Css has not been displayed.

Bottom of the Page

Whats it going to be?

The bottom of the webpage will be a useful area to list favourite links to my webpage, it will also contain a logo of Mozilla Firefox to show users that this website favours this web browser especially in the Fun! webpage (although the rest of the site works in IE7+ too).

In the image above, I have matched the house style of the main header banner using the red and white gradients and a thick red border to make it look seperate from the main content and the body background colour. I have included a link to the Home webpage along with various links to favourite sites of mine which maybe useful to any user willing to use this website regularly. Most importantly it contains the W3C validation markup certificate which shows that the site passes validation.

I should really add a link which can help users jump to the top of the page for better usability.

Advanced Layout Ideas and Final Design

From creating sketches of my website layout, to conducting practice and creating my final layout idea through Dreamweaver. I have overcome some new ways of learning along with some good design ideas for future usage if I ever come to make other websites in the near future.

Final Planning Ideas

Establish a layout which is fully usable for any age group from any demographic.

Colour schemes need to be similar and have something in common. (Achieved: Red, White, Blue and Black).

Simplicity is key - Finding a way of creating a website using complex code which I can learn from but making the website look simple for users to navigate and read through.

Must pass W3C Markup Validation Service for both Html and Css templates

Must contain a sufficient amount of Javascript and must have the use of validation through a form so users can input the correct information.

Navigation must be clear on each webpage so the user can navigate quickly without suffering problems.

Website Final Layout

This is a zoomed out screenshot of my website, as you can see the header is bold and pronounced and contains the navigation buttons along with the robust logo it contains. The central area is where the content is. There are hoverbox images and a special overflow box full of text. This will help the user scroll up and down in this area of the webpage instead of having to use the main scroller on the side of the webpage..improving usability. The content background is the image of clouds and a pure blue sky to display a peacful atmosphere. It mixes very well with the other colours used within the website. I have used the black background idea to keep the website central along with black within the header names surrounding the inner colours of the other logo's I have created through illustrator and photoshop. Almost forgot to mention. I have added a clock using Javascript within the Home page.. just a random feature to help users keep track of time!

Towards the bottom of the webpage, it contains where all of the hyperlinks are going to be situated to other websites (which are my favourites). It matches the house style of the header colours background.

A close-up of the top of the webpage.

The Javascript clock can be seen in higher detail, along with the hoverbox image gallery and the overscroll box.

In conclusion

In conclusion to the final designs of my website, I am going to choose this as my main layout for each webpage. This is because it is very suitable for presentation, the layout is easy to establish to any user and colour helps spot and attract the users attention. Navigation is used professionally to help the user guide through page to page. This is it!

Development: The First Chapter

It has begun

For the last 2 weeks I have been experimenting with many different layouts with the help of Html and Css script languages. I have also been creating several 'header' graphics to suit the top central alignment of each webpage.

Colour Schemes?

My initial ideas of colour schemes will reflect on personality and favourites. My favourite colours are blue, white and red which can be clearly suitable of combining for gradient effects. I find myself to be peaceful at times, so maybe a blue sky with clouds as a background image in the content area of the webpage would be useful to display this. Using black with my favourite colours could cause conflict but if it is used for borders and the outer body backgrounds, it actually helps focus the main three colours inside of the webpage. Along with the reason of using black, it's because of the subject of colour blindness. I have colour blindness problems not actually being blind to colour (black and white) I actually see the world in opposites (red is orange, brown is green vice versa). I have learned to control this problem by thinking opposite to the colour. I should really consider helping colourblind people by finding Html/Css/Javascript code to make the webpage change colour to their needs, so by the click of a button the colour will change to aid the user.

I have initially decided with webpage names also:

Welcome - Initial idea of this webpage is to welcome the visitor to the site. When I create a logo, I will hyperlink it so it will guide them to the 'Home' webpage. I may include some Javascript to add a 'Loading Screen' as the user clicks the image logo.

Home - The Home page will obviously be the main center piece within my website, helping the user chose whatever webpage they would like to visit using hyperlinks along the header of the page and they can enjoy information from a news feed that I'm planning to apply into this webpage. This page will also have images of myself and many other things that I enjoy.

About - This webpage will be about myself, with information on my past. I may plan on creating a overflow scroll within the content of the webpage so the user won't have to constantly use the main scroller to glide up and down the page, instead they can scroll closer to the text for a better read. I will also add image galleries to the webpage and maybe a video of myself playing the bass guitar!

Fun! - This webpage is based on javascript that I will be using to create a little story for the user as they enter this webpage. They will be alerted to name themselves, their location, favourite animal etc. When they finish this task the webpage will reveal, showing a story about them using Javascript variables and if else statements. This page will also contain an image gallery and maybe even a Flash game which I will have to create in the next coming months.

Contact - The Contact webpage will display a form (using form tags) giving the user questions to optionally answer personal details such as their name, location and age. Once they click submit, the information will be sent to the Sam-i-am website. If possible instead of having to submit to this website, I will make the form code submit the information to my own email address using "mailto:" html.

Music - The Music webpage will basically display image galleries of my favourite musicians, bands and albums. Later on in the development I may provide video of myself playing bass guitar to some songs produced by those talented artists.

Sneak Peek

Logo/Header


Html For Logo/Header