Assignment: Create a website

After about 20+ hours of typing code, figuring out problems, researching solutions and experimenting, I have finally managed to finish my first website, and with only around 50kb used, I made sure that I didn't exceed the limit that was asked for. I couldn't remember the exact figure, I thought it was 100kb, but then looking through the powerpoint from last week it mentioned 60kb, so I ensured that I met both, as a single requirement is as important as any.

The website's development went through several stages. The first was the initial creation, which involved looking at codes from workshops, figuring out how I want the web pages to look, and checking it regularly in preview to ensure that I didn't encounter errors early on that weren't fixed. The design looked like this;

Version 1 of the website, initial layout and content.

As you can see (click the image for full resolution) there is a clear colour scheme going on, that is fluent throughout. The only problem with this layout was that it didn't look complete, and all of the content was pushed to the left of the screen. The colour scheme I liked so I kept it, but I decided to center the content, and center it, so that it looked neater and more professional.

Version 1.1, improved layout.

I then decided to experiment with other features. I was able to center the content, but I thought; if I have a footer, then surely I should include a header to help keep a concistent flow with the layout. As you can see above however, it doesn't look very good, as it merges in with the navigation area, and therefore makes the web page look like it was made in Microsoft Frontpage. The other problem is the background colour, how it is only a single colour which then takes up the whole area. I didn't like this as again it makes the website look unfinished, and emphasis on the empty space, which isn't what I want the user to be focusing on.

Version 2, div sections included for 2-colour background and experimentation of navigation area.

Now as you can see in the image above, I now have progressed alot more from having the content squashed into the left side of the page and looking unoganised, to now having a clean footer, a separated area for the content/body and a working navigation. The separate background colour was achieved through CSS by including another Div ID so that I had a separate area to include a background colour onto, as the body already had one assigned. This meant I could then designate a set area for the content to be placed into, by including a width a height property. The navigation area was still in the experimental stage, as ideally I was wanting a side navigation, but was halfway there to fullfilling my hopes. The focus at this moment of time was more on getting the layout for the content right, which I had achieved except from the navigation area, which was my next step.

Version 3, improved layout and added banner, with addition of the side navigation area.

This was a breakthrough for me, as I could now see the website taking shape and looking more professional and unique. I have added an image which is acting as a banner. It's purpose is to represent what this website is about, and to relate to myself also. The design is jsut to represent graphic design, and also typography as that is what the recent assignment with Gianni was related to. So the idea of the banner on my website is to keep up to date with events and projects that I may be working on.

As you can also see, I have fulfulled my initial intentions, as the side navigation area is now fully functional. The only problem I had was getting it aligned beside the content area rather than above it. This was achieved by assigning a 'positon' element to the CSS code, which was set to 'absolute'. This would mean that it would stay at the current position on the web page, and not stay to that position on the screen, as the option 'fixed' would do, as shown with the footer in place.

Upon the creation of this new and improved layout, I also decided to improve on the content, in terms of making it easier for the user to contact me and interact. I decided to include a reference to my blogs that i use for each module, but figured that if I didnt make it easy for them to get to each one, they wouldn't view them. So I decided to create a list of the modules which were separately hyperlinked to the allocated blog. They were assigned different colours to emphasis the difference and explained that they were links below.

Hyperlinked text to blogs and given different colours

Doing so helps users to interact with the web page and also to follow me, if they were interested in what I do and would like to keep upto date on my progress. Further contact has been included onto the contact page, such as my email and a link to my facebook profile, thus covering the web 2.0 and allowing users to easily contact me through various websites and media (email, profile comments, blog comments).

The navigation was also modified so that, when the user hovers over the desired navigation link, the text will appear larger, thus helping them to read which page they are pointing towards. To emphasis this, when the user clicks on the text and is redirected, the name of the page they are on changes colour and is underlined. This is just a simple change to help users navigate through the website.

Screenshot of navigation area changes explained above

The only problem I then had with this layout was that the navigation area seemed out of place, and did not match the current design of the website, so I decided to revert my idea for it and return to a horizontal navigation area.

Version 3.1, navigation reverted to horizontal for neater finish, problem with Div tag clash effecting footer.

Personally, the website now looks really professional, due to the neat layout, how it all goes down the page in a straight line, how both the text and images have a separate Div ID to give them a separate area to the content area, and how the footer fits to we.. wait no it doesnt't! I had an annoying problem with the footer's positioning on ONLY the portfolio web page. The problem for this (I think) is because I had too many DIV tags within the HTML, which then concluded in them clashing with eachother, causing the footer to appear wrongly positioned in comparison to the other web pages. I think this was the problem, as upon removing the footer there were no other mis-alignments with the layout and it was the only part of the web page which was not showing as intended. After the time I took to try and fix the problem, I decided that the footer didn't suit the new layout due to the sudden change of colour scheme and positioning, so I removed it from the code.

The last problem that I had to overcome was the file size limit. When I calculated the overall filesize of every document used for the website (.html pages, .css file, .javascript file, images) I had accumulated about 150kb, which was alot larger than the file size which I was intending. Because of the files being saved as normal GIF's, the file size was not greatly reduced. I did then have two options, to continue saving as a GIF but lower quality, or save as a JPEG. The JPEG format when saved with a quality number of 7 was 40kb, so GIF was only option, lowering quality to save filesize down to an average of 5kb for the images, with the exception of the banner which was 10kb(with quality of 2 colours) due to it's resolution. The resolution was 1000x300 so that it would be perfectly aligned with the body of the website with the content. This was unfortunate as I was not able to present the full quality of the banner's image, due to myself trying to ensure that I kept to 60kb, as shown in the presentation last week. The image now compressed at a glance looks pretty bad, but I guess it can also look artistic given that it was done on purpose with good intention (of course it was!).

Here's an image of the compression window, and also a comparison to show the difference of the two versions of the banner, to help understand and represent why it is such a smaller file size;

File size - GIF compression example

You can see (view full size) how the image becomes very dot-like/pixelated  through the gif compression. But if you look in the box underneath the image, the filesize is now 5.49kb instead of around 20kb, so it is definitely worth doing if you have a requirement to not exceed a size limit.

Compression comparison

 You can see how the compression has made a huge difference to the image and how it looks, but it is obvious that it would when it is compressed from 256 colours to only 4. It may be a downgrade in my opinion, but the main importance was to meet the requirements, and by lowering the filesize I am helping to meet them. It isn't entirely bad however, As upon adding the new banner image to the website, It does look quite good, as it gives an originality and uniqueness to it as it looks pixelated it also looks like it has been done on purpose and gives an art themed touch to the web pages. This therefore helps to link the web page to the course's theme, of graphic design and digital art, and also to link to myself and the work I have done and are currently doing.

As a last minute touch to the website I decided to give it a customised icon, as you usually see next to the address bar showing the URL. The reason for this was to give it a uniqueness for personal preference but also to make it look like a proper website. I had to create an image in Adobe Photoshop with a size of 24x24 as it is the icon size for the website icon image, and to then convert it into an .ico file. I used a programme called Axialis which made it easy to convert the image into an .ico file format. The design is just the letter 'k' as it then makes it unique to me. Here's a screenshot of the outcome;

Screenshot of the website icon created in action

So here is a final image of the web page;

Screenshot of the final web page design with content

Now that the website was done I decided to see if it would validate. The w3 validation service website successfully validated my webpages, but when I included their code as it suggested, to include an image to show others that my web pages passed, validating it again failed with six errors and nine warnings. This was very unexpected, having the outcome that after everything, it is the validation website's own code that creates errors onto my webpages. I removed the code and checked the validation again to ensure that no errors were of my own this time, and luckily it passed.

Proof?
Index: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.karlhammett.co.uk%2Fidat102%2Findex.html

Bio: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.karlhammett.co.uk%2Fidat102%2Fbiography.html

Form: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.karlhammett.co.uk%2Fidat102%2Fform.html

Contact: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.karlhammett.co.uk%2Fidat102%2Fportfolio.html

CSS: http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.karlhammett.co.uk%2Fidat102%2Fbiography.html&profile=css21&usermedium=all&warning=1

Upon using the cynthia portal tester, I realised that it would fully pass if i only removed the bit of text which said 'image' for the alt of my image code links. That was the only problem that was shown from testing my web pages within the cynthia content quality test, which was again another relief as I would find the process of editing the webpages and re-uploading several times to be very tedious and time consuming.

So overall, am I happy with the final outcome of my website? Yes I feel that although my design changed drastically from the original concept of the web pages, it was bound to happen as a concept is rarely the exact of the final outcome. I feel that the layout has represented a very professional image due to the banner and content having the same width, and giving the text and image separate columns next to eachother, thus helping the web page to flow and make content placed on the web pages easier to read or view.

"Facebook hack"

adadasd

Change of plans

I decided to just use a set of pop ups instead, as I couldn't figure out how to link the forms to my javascript code.

This went into the header;

<script type="text/javascript">
    var text_name = prompt("Please type your name","type here");
    var text_animal = prompt("Please type your name","type here");
    var text_sport = prompt("Please type your name","type here");
    var text_food = prompt("Please type your name","type here");
    var text_eat = prompt("Please type your name","type here");
    var text_emotion = prompt("Please type your name","type here");
</script>

This then went into <script></script> tags after the <html> tags:
<script type="text/javascript">
    document.writeln(text_name + "decided to go for a walk with their" + text_animal + ", hoping to find a good location to play some " + text_sport + ". Unfortunately their " + text_animal + " became hungry, so it was given a " + text_food + " to " + text_eat + "  on for the journey.");
    document.writeln("The day passed and " + text_name + " did not find somewhere to play " + text_sport + ", so they felt very " + text_emotion + " and decided to head off back home.");
</script>

Progress

I've created a set of forms, which will act as boxes where the user will input the data to then be read and put into the story when a button is pressed.

<form name="text_name">
<input type ="text" name="textbox1" size="20" maxLength="30" value="Name" />
</form>
<form name="text_animal">
<input type="text" name="textbox2" size="20" maxLength="30" value="Favourite Animal" />
</form>
<form name="text_sport">
<input type="text" name="textbox3" size="20" maxLength="30" value="Favourite Sport" />
</form>
<form name="text_food">
<input type="text" name="textbox4" size="20" maxLength="30" value="Favourite Food" />
</form>
<form name="text_eat">
<input type="text" name="textbox5" size="20" maxLength="30" value="A word for eating" />
</form>

Then there will be this code which will work to replace the IDs within the story, to put the information placed inside the forms, into the IDs that it is linked to.

<form name="text_emotion">
<input type="text" name="textbox6" size="20" maxLength="30" value="An emotion" />
</form>
<script type="text/javascript">
    document.writeln(text_name + "decided to go for a walk with their" + text_animal + ", hoping to find a good location to play some " + text_sport + ". Unfortunately their " + text_animal + " became hungry, so it was given a " + text_food + " to " + text_eat + "  on for the journey.");
    document.writeln("The day passed and " + text_name + " did not find somewhere to play " + text_sport + ", so they felt very " + text_emotion + " and decided to head off back home.");
</script>

Work for the weekend

We've been tasked to create a 'Madlib' which is basically a form that you fill in, that will contain the necessary information to complete a story.

A good example is:
http://javascript.internet.com/miscellaneous/madlib-caesar.html

The specific types of words that we will need to include into our form are;
name, favourite animal, favourite food, some verbs and adjectives

Here's my draft of what my story will look like, and the type of words that will be included into the form for the user to fill in:

[Name] decided to go for a walk with their [Favourite Animal], hoping to find a good location to play some [Favourite Sport]. Unfortunately their [Favourite Animal] became hungry, so it was given a [Favourite Food] to [Word to explain eating] on for the journey.

The day passed and [Name] did not find somewhere to play [Favourite sport], so they felt very [Emotion] and decided to head off back home.

The story is simple, but it's more about focusing on the use of creating a form that they include text to, which will then add to the story to fill in the missing words. Now for the tricky part, creating the code for this..

unfinished

# is made by typing alt + 3

all hrefs need a title

function readForm() {
    var formContents = document.myForm.thistext.value;
    alert (formContents);
}


<form name="myForm">
    <input type="text" name="thistext" value="" />
    <input type="button" value="click" onClick="readForm()" />
</form>

Styling

The problem with creating web pages is that you need to ensure that it is standards compliant. This means that you ensure your webpage is compatible with all web browsers, which some very in how things will appear. You will alo need to ensure that any fonts which you use for your web page will need to be available on all computers. This includes fonts such as; Arial, Verdana, Trebuchet MS, Times New Roman, Georgia, Comic Sans MS. But of course, don't just choose any font, it will need to suit the content and directed age group that you intend the website to be for.

Changing these kind of details manually for each page can be very strainful, so a solution is to create a separate page that is linked to the others and acts as a styling page, so that whatever you settings you make on this page, it will be saved onto the others as a template almost.

Richard Rutter figured out that the body's font size is 62.5%, as most web browsers default their text size to 16px. Because 62.5% of 16px is 10px any element within the body has been reset to display type based on a 10-px em square.

The idea of 'em square' works like this:
100 percent is equal to 1 em, therefore 1 em is 10 pixels 0.8 em is 8 pixels, 1.4 em is 14 pixels ect.

Font transforming can be useful as you can apply specific characteristics such as uppercase only, lowercase only, capitalize ect. for headers and other areas, to make them different to the normal pad of text. This will not work for all fonts however, so you would need to make sure the font allows variants.

Creating forms

We ended up creating a form which would allow you to insert your first and last name, which when you click the submit button, it will show it in the form of a table on a website that it was linked to.

Initially we figured out how to create a text box, which looked something like this;

<form name=”testForm”>
<input type=”text” name=”textbox1” size=”20” maxLength=”30” value=”type here” />
<input type=”password” name=”passbox1” size=”20” maxLength=”30” value=”” />
</form>

The pieces of information highlighted in red are changeable depending on what you want to be said, and how you want things to be laid out. For example, testForm, textbox1 and passbox1 are given a name merely for organisation, to help keep things in a certain order, it is best to use numbers for each textbox, password or any other device that you include. The value will be what text will be initially displayed for you, to help give an understanding of what you need to do.

We then included Submit and Reset buttons, so that the user could both submit, and ammend what they type into the boxes.

<form name=”testForm” action=”targetURL.html” method=”post”>
<input type=”text” name=”textbox1” size=”20” maxLength=”30” value=”” />
<input type=”reset” value=”clear details” />
<input type=”submit” value=”submit details” />
</form>

Again, those in red are changeable according to what you want to use the buttons for, and what text/sizing you wish to include.

If you wanted to include a checkbox, for maybe a questionairre you are creating, then this would be the code to use;

<form name=”testForm”>
<input type=”checkbox” name=”checkbox1” value=”value1” />
<input type=”checkbox” name=”checkbox2” value=”value2” />
<input type=”checkbox” name=”checkbox3” value=”value3” checked />
</form>

A radio button is probably more preferred, as it uses small circles which can be selected rather than checkboxes.

<form name=”testForm”>
<input type=”radio” name=”radio1” value=”value1” />
<input type=”radio” name=”radio1” value=”value2” />
<input type=”radio” name=”radio1” value=”value3” checked />
</form>

If you were wanting to include alot of text, then a text area/box would be used. This allows text to be placed within a specific area of columns and rows.

<form name=”testForm”>
<textarea cols=”40” rows=”10” name=”area1”>
This will initially appear in the text area</textarea>

Also in questionairres you could use a select list/dropdown menu. This helps to show many possible answers without having them directly shown on the page.

<form name=”testForm”>
<select name=”selectlist1”>
 <option value=”option1”>The first option</option>
 <option value=”option2”>The second option</option>
 <option value=”option3”>The third option</option>
 <option value=”option4”>The fourth option</option>
</select>
</form>
To enable the select list to have multiple options, you simple rename <select name=”selectlist1”>
 to <select name=”selectlist1” size=”3” multiple>

Favourite Website

It's difficult to decide what your favourite website is, when you just sit and think about it. Several websites went through my head, thinking about the appearance of the website rather than the content.

My final decision was this website: http://www.brinkthegame.com/

I know about this website due to my interest in computer games, as this is a new upcoming one for the beginning of next year. I like the website because it is simplistic, there is the logo at the top, followed by a row of navigation links, acting as the header. There is then a small section where the main information about the website and the game is listed, in a set of different sized boxes, to separate each piece of information, but also so that they can decide for us which piece of data is more important for us to read/watch. It is then followed by a blog almost, with live twitter feeds from them and a list of news updates that have been posted. It then has a list of the sponsors/companies it's working with and a language selection area, thus finishing the website with a footer.

The colour scheme is simple, the backgrounds are white and black, with the text colours being grey and blue, and then followed by a background image which is dominantly blue, to help even out the colours in the website.

The main reason I chose this website as my favourite one is due to the simplicity and colour scheme, as it is appealing to me (blue is my favourite colour!). It is also easy to navigate and interpret where everything is, which is mainly due to it being simplistic, as if too much was going on it would be easy to get confused. An example of one of these would be shopping websites, such as Amazon or Play.com, where there are so many options you dont knnow where to start!

Overview of introduction to the course

Markup language is used to create the coding of the web pages. This includes tags and elements, they look like this: <tag>content</tag> that you will have seen before but not understood what it was for. These are used to create the formatting of the information within the webpage, it's the things that you don't see, which are implemented to change the font, text size, any kind of formatting which you would do by clicking buttons on the interface.

Within the code form of the web page, all of the information that you want to be visible to others will need to be placed INSIDE the <body></body> tags.

To insert a link into your webpage, you would need to insert the following code;
<a href="Link URL here“ title=“This is the link”>Click me</a>
The areas highlighted in red are what you would need to hcange to suit what and where your link is from.

You can also insert a link to send an email through code;
<a href=“mailto:me@somewhere.com?subject=hello%20from%20my%20website”>email me</a>
Again those in red are what you would change to suit who you are emailing, the subject you wish it to say, and the piece of text that you wish to be shown on your web page for the user to click to send the email. the use of "%20" is to create a space between the words, as it won't allow a simple " " between each word within the code.

An image can be inserted, but the code is slightly different to a hyperlink and an email, as you don't need to click the image to do anything;
<img src=“file” alt=“Short description of image” width=“n” height=“n” />
Here you can change the description of the image, and the proportions too, if the image you have selected is too big or is slightly distorted.

We looked at a well known director called Michael Gondry who has created many inspiring pieces of work, mainly within music videos such as ;

• Chemical Brothers - Star Guitar
• Daft Punk - Around the world