But this is not just a random post so I can copy star wars. This is the post where I do all the mentions and thankings.
First of all thanks to Chris Saunders for teaching CSS, Javascript, other HTML and helping with the corners.
Thanks also to Jon Redwood for helping me out a fair bit.
Cannot forget to mention how useful these websites were:
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
A small mention to Simon for being up with me as we were both finishing off.
And finally a mention to Radio 1 for being the background noise to me tying up all of the loose ends.
Showing posts with label Website. Show all posts
Showing posts with label Website. Show all posts
Friday, 20 November 2009
Website Part V: The Evaluation and Other Stuff
Well this the summary post. If you look HERE you will see my original design and if you click HERE you will see the final version. As you can see there are not many differences but I am going to outline those few differences and explaint them. The final website is a much darker green than my simple design. This is because I thought the green I used for the design was too bright for my liking. The other reason for the change is because, well, I sort of forgot what green I had originaly used but I now do prefer the green I went with.
As you can see I scrapped the "title of the page the user is on" thing going underneath the banner. This was because I figured it would be more practical to just use a title on the page to display this rather then big letters underneath a banner. Finally the curves on my corners are a lot bigger than those on the design, thats because I was able to get better curves when I got to the final website. Below is the CSS I used to create my curved corners.
Now I will go onto the rest of my CSS. For the final website I used several CSS files instead of just one. I did this because I found it was easier to style each page that way especially as the contact page is so different to the other two. The reason I did seperate ones for the index and about page is simple. In the CSS file I used "auto" and when it came to the height on the index, because there was not a lot of content, it would shorten it to a very short length. I did not want a short height for my index and I wanted it to be slightly similar to the other two, longer pages. Therefore I just duplicated my CSS file and made the small change.
Right next would be the javascript. In This Post you can see the code for my form validation. I am very proud I got this to work because validation is important and alert windows make this easier. My code works by looking at the fields one by one, starting at the beginning. For example if the "Name" box was empty an alert message would appear. If it was filled then the validation would jump down to the "Email" box to check if that is filled. If that is filled then it would then check to see if the Email Address entered is valid. It does this by checking for an @ sign beyond the first character and then a . beyond the second character. If that is all good then it finally jumps down to the "Message" box and if that is filled then the form will be submitted.
However that is not the only javascript I used on my website. There is another bit.
This makes a pop up box appear asking the user if they are sure they want to visit my blog. This works after the user has clicked the blog button and that is when the alert appears. If the user clicks OK then they proceed to my blog however, if they click Cancel, the process will be cancelled and the user will be returned to the page they were just on. Thats about it for javascript, now onto what I think about the website.
Well to say I am proud is an understatement. This is my very first website that is officially on the internet! I am very happy to see it there. First all I believe that the best designs of things are those that are kept simple and I believe my website is as simple as it gets. It is a single coloured rounded rectangle with a few links, text and images on. I would have definitely liked to make it a bit more colourful and have more going on but I am happy with the simplicity of the design, as the saying goes, I believe it is "Simple yet Effective". I am also proud of my buttons I created allowing people to link up with me on Social Networking Sites. These were done simply in Photoshop with logos gotten off the internet. Usually I would not be proud of simple buttons but this is because I made them myself. I am of course proud of my Javascript, it took ages to complete but it all works a charm now. I love the fact I got my curved corners eventually. They took a lot of time but they are done and make the site look better than it would with square ones, I think so anyway. And finally I am pleased that my CSS turned out ok and everything works.
Of course there are some things I am not so happy with and if I had left more time I would have certainly implemented on my website. I would have liked to have made a more complicated form with more than three fields but I am content with it for now. I would have liked to done something more with more images like create a small gallary that uses Javascript. Finally I also would have liked to have added more content and to make the current content a little less predictable and standard.
However at the end of the day I am very proud with what I have achieved, hope everyone likes it. All thats left to do at the end of this monster post is post a link and advertise!
CLICK HERE
Enjoy!
As you can see I scrapped the "title of the page the user is on" thing going underneath the banner. This was because I figured it would be more practical to just use a title on the page to display this rather then big letters underneath a banner. Finally the curves on my corners are a lot bigger than those on the design, thats because I was able to get better curves when I got to the final website. Below is the CSS I used to create my curved corners.
#topbar {
background-image:url(banner.gif);
width: 100%;
height: 150px;
background-repeat: no-repeat;
}
#footer {
background-image:url(bottombar.gif);
width: 100%;
height: 50px;
background-repeat: no-repeat;
text-align:center;
font-size:12px;
}Now I will go onto the rest of my CSS. For the final website I used several CSS files instead of just one. I did this because I found it was easier to style each page that way especially as the contact page is so different to the other two. The reason I did seperate ones for the index and about page is simple. In the CSS file I used "auto" and when it came to the height on the index, because there was not a lot of content, it would shorten it to a very short length. I did not want a short height for my index and I wanted it to be slightly similar to the other two, longer pages. Therefore I just duplicated my CSS file and made the small change.
Right next would be the javascript. In This Post you can see the code for my form validation. I am very proud I got this to work because validation is important and alert windows make this easier. My code works by looking at the fields one by one, starting at the beginning. For example if the "Name" box was empty an alert message would appear. If it was filled then the validation would jump down to the "Email" box to check if that is filled. If that is filled then it would then check to see if the Email Address entered is valid. It does this by checking for an @ sign beyond the first character and then a . beyond the second character. If that is all good then it finally jumps down to the "Message" box and if that is filled then the form will be submitted.
However that is not the only javascript I used on my website. There is another bit.
function leaveConfirm() {
if (confirm("Clicking this link will direct you away from my website. \n\nDo you still wish to continue to my blog?")) {
window.location.href = "http://tomsaundersmpt.blogspot.com/";
}
return false;
}This makes a pop up box appear asking the user if they are sure they want to visit my blog. This works after the user has clicked the blog button and that is when the alert appears. If the user clicks OK then they proceed to my blog however, if they click Cancel, the process will be cancelled and the user will be returned to the page they were just on. Thats about it for javascript, now onto what I think about the website.
Well to say I am proud is an understatement. This is my very first website that is officially on the internet! I am very happy to see it there. First all I believe that the best designs of things are those that are kept simple and I believe my website is as simple as it gets. It is a single coloured rounded rectangle with a few links, text and images on. I would have definitely liked to make it a bit more colourful and have more going on but I am happy with the simplicity of the design, as the saying goes, I believe it is "Simple yet Effective". I am also proud of my buttons I created allowing people to link up with me on Social Networking Sites. These were done simply in Photoshop with logos gotten off the internet. Usually I would not be proud of simple buttons but this is because I made them myself. I am of course proud of my Javascript, it took ages to complete but it all works a charm now. I love the fact I got my curved corners eventually. They took a lot of time but they are done and make the site look better than it would with square ones, I think so anyway. And finally I am pleased that my CSS turned out ok and everything works.
Of course there are some things I am not so happy with and if I had left more time I would have certainly implemented on my website. I would have liked to have made a more complicated form with more than three fields but I am content with it for now. I would have liked to done something more with more images like create a small gallary that uses Javascript. Finally I also would have liked to have added more content and to make the current content a little less predictable and standard.
However at the end of the day I am very proud with what I have achieved, hope everyone likes it. All thats left to do at the end of this monster post is post a link and advertise!
CLICK HERE
Enjoy!
Website Part IV: Well how about that, its done
Yes thats right the website is finished, completed, done and dusted. Today I polished off the content of my blog and then went through the validator websites. Everything passes with flying colours, however the only colour that matters is the green of the validator saying all is good. To show that my site passes all of this I have used the code provided to put the buttons onto my website. I wanted to put them into the footer but for some reason that was not liked so to save time and hassle I smacked them straight into the home page. This turns out to be a good thing because everyone will see them instantly as they arrive at my webpage. I am so glad to have this all finished, all the heartache of looking at the Firefox Error Console and seeing errors was worth it in the end.
Now to just do a final write-up-esque post on my blog which you will see above this one shortly.
Now to just do a final write-up-esque post on my blog which you will see above this one shortly.
Wednesday, 18 November 2009
Website Part III: The Taming of the Javascript
So today was a very very happy day. I continued with javascript and after a lot of persistance it all worked. Here it is below.
This is only my validation javascript. All of these but 1 controls whether the box is empty or not and if it is a small alert box appears telling them to fill it in. The only different bit of code is the email validation one which can tell whether the email address is valid or not. It checks to see if there is an @ sign within the email and if there is a . (because there should be like.co.uk or .com). This will then hopefully make sure the email address I recieve is at least valid and possibly real (I do understand that fake email addresses can be typed in but to code that is currently out of my skill set).
Well thats all I achieved today but hopefully you understand that this is a very very big thing and it took me 6+ hours to get to work. But it now does and I am every so happy. Time for bed cheerio!
function validate_form(){
if (document.contactform.name.value == "" ){
alert ( "Please enter your Name." );
return validate_name = false;
}else{
validate_name = true;
}
if (document.contactform.email.value == ""){
alert ( "Please enter your Email Address.");
return validate_email=false;
}else{
validate_email=true;
}
if ((document.contactform.email.value.indexOf(".") > 2) && (document.contactform.email.value.indexOf("@") > 0)){
validate_validemail=true;
}else{
alert ( "Please enter a valid Email Address." );
return validate_validemail=false;
}
if (document.contactform.message.value == "" ){
alert ( "Please enter your Message." );
return validate_message = false;
}else{
validate_message = true;
}
}
This is only my validation javascript. All of these but 1 controls whether the box is empty or not and if it is a small alert box appears telling them to fill it in. The only different bit of code is the email validation one which can tell whether the email address is valid or not. It checks to see if there is an @ sign within the email and if there is a . (because there should be like.co.uk or .com). This will then hopefully make sure the email address I recieve is at least valid and possibly real (I do understand that fake email addresses can be typed in but to code that is currently out of my skill set).
Well thats all I achieved today but hopefully you understand that this is a very very big thing and it took me 6+ hours to get to work. But it now does and I am every so happy. Time for bed cheerio!
Website Part II: It has all began
I actually made a start on my website a long time ago but I am still yet to get used to this "blog everytime you do something" thing. But tonight I figured I really should blog what I have done so far and what I have achieved recently.
So a couple of weeks ago I made the basic backbone of my website. I created a menu system with mouseovers and sorted out the main colour scheme for my website. If you check the first website related post you will see my original design and I pretty much stuck to that for this first part. I also attempted curved corners but I failed pretty badly. Since, at the time of writing, I am yet to upload what I have done recently you can still see the very first steps my website has taken on the URL Here.
So on to what I have done recently. After some advice from Chris I managed to tame curved corners and they now feature on my website which pleased me greatly as I really do hate square corners, they're too sharp.
I also implemented an idea that I came up with recently which was to use javascript to make an alert box appear when someone clicked on my blog link. This alert box would warn the user that they are moving away from my webpage. This is mainly so that the user knows it is going to happen and they can stop it if they want to rather then being taken straight to the blog without any clue what is going to happen.
I also made a start on my form validation which I must say did not start well but I am hoping I will be finally completing this very soon.
The future plans for my website are to obviously put content onto it. I would also like to implement a sort of gallery for images rather then just plastering them all over a page. I do want to add some facebook stuff too however this will most likely be the most basic available because I struggled with the more complicated stuff in the practical.
Anyway time for bed, the next post will most likely be a progress update on how tomorrows work goes. Heres hoping it's all good :).
So a couple of weeks ago I made the basic backbone of my website. I created a menu system with mouseovers and sorted out the main colour scheme for my website. If you check the first website related post you will see my original design and I pretty much stuck to that for this first part. I also attempted curved corners but I failed pretty badly. Since, at the time of writing, I am yet to upload what I have done recently you can still see the very first steps my website has taken on the URL Here.
So on to what I have done recently. After some advice from Chris I managed to tame curved corners and they now feature on my website which pleased me greatly as I really do hate square corners, they're too sharp.
I also implemented an idea that I came up with recently which was to use javascript to make an alert box appear when someone clicked on my blog link. This alert box would warn the user that they are moving away from my webpage. This is mainly so that the user knows it is going to happen and they can stop it if they want to rather then being taken straight to the blog without any clue what is going to happen.
I also made a start on my form validation which I must say did not start well but I am hoping I will be finally completing this very soon.
The future plans for my website are to obviously put content onto it. I would also like to implement a sort of gallery for images rather then just plastering them all over a page. I do want to add some facebook stuff too however this will most likely be the most basic available because I struggled with the more complicated stuff in the practical.
Anyway time for bed, the next post will most likely be a progress update on how tomorrows work goes. Heres hoping it's all good :).
Monday, 2 November 2009
Website Part I: The Design
So today I thought I would upload the design I have created for my website.
Here it is below, please click for a larger version.
If you haven't caught on yet my favourite colour is green hence why my website is green. I chose the colour scheme of white and green because I feel these 2 colours go well together (and they are also the colours of my beloved Argyle ;)).I also like curved corners because I think they look cool so thats why my website (and this blog) have curved edges. At the moment i'm not sure how I will make my website have curved corners but I am sure I will be able to get them to work after I mess around with the CSS.
I wanted to have a navigation bar at the top of my website because I think this is the best layout to have because the user can clearly see it and it doesn't restrict the left hand margin of my website. The buttons on my nav-bar will have a rollover because I think it looks cool and also shows off the skill I have to make rollovers work :P. To show what the buttons will look like when the mouse is over them I made one of the buttons on my design the colour the button will go. I was hoping to have a drop down menu but I had no idea what would go on each menu so I decided against it. I may go back to this at some point.
Right, the banner. I will make this in Adobe Photoshop and hopefully I will be able to display this on the website. It will be a very basic banner with probably just my name on it and featuring the chosen colour scheme of green and white. Also underneath this I want to display the name of the page the user is on so they are never lost!
So thats it, my current website design, it will no doubt change over the course of making the website but if you follow the blog you will stay up to date ;). And with that shameless promotion of my blog I will bid you good night.
Here it is below, please click for a larger version.
If you haven't caught on yet my favourite colour is green hence why my website is green. I chose the colour scheme of white and green because I feel these 2 colours go well together (and they are also the colours of my beloved Argyle ;)).I also like curved corners because I think they look cool so thats why my website (and this blog) have curved edges. At the moment i'm not sure how I will make my website have curved corners but I am sure I will be able to get them to work after I mess around with the CSS.
I wanted to have a navigation bar at the top of my website because I think this is the best layout to have because the user can clearly see it and it doesn't restrict the left hand margin of my website. The buttons on my nav-bar will have a rollover because I think it looks cool and also shows off the skill I have to make rollovers work :P. To show what the buttons will look like when the mouse is over them I made one of the buttons on my design the colour the button will go. I was hoping to have a drop down menu but I had no idea what would go on each menu so I decided against it. I may go back to this at some point.
Right, the banner. I will make this in Adobe Photoshop and hopefully I will be able to display this on the website. It will be a very basic banner with probably just my name on it and featuring the chosen colour scheme of green and white. Also underneath this I want to display the name of the page the user is on so they are never lost!
So thats it, my current website design, it will no doubt change over the course of making the website but if you follow the blog you will stay up to date ;). And with that shameless promotion of my blog I will bid you good night.
Subscribe to:
Posts (Atom)