Wednesday, 27 October 2010

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..

Monday, 25 October 2010

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>

Sunday, 17 October 2010

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>

Monday, 4 October 2010

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!

Sunday, 3 October 2010

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