Website Progress

Since my previous progress update I have done a bit more design work in Photoshop, but I have also started writing the code for the website, which has taken the majority of my time.

I always try to ensure that the XHTML and CSS I am writing is valid, so I have constantly checked my code using the W3C Validator to identify any errors early and stop them from accumulating. Additionally, what good is valid code if it isn't compatible with your browser? I have tested my code very regularly in all of the major browsers; Mozilla Firefox, Internet Explorer (7.0), Google Chrome, Safari and Opera. I am not aware of a way to have two different versions of IE on my computer at one time so I am using 7.0 for IE testing initially and will hope that if it works in an earlier version, it should be OK in a later version!

There have been a few issues when testing my site with IE7, all style related, so I have created a separate style sheet that IE 7 will use. I will also make 1 more style sheet for any versions of IE that are 6.0 or lower. However, this will just show a message to the user telling them that their browser is out of date and they need to update (links will be provided).

The above code features HTML that only IE will respond to. Within these tags I have linked to a style sheet meant only for IE 7.

The above two screenshots both occur in the same web page. I have used Javascript to replace the drinks board with the snacks board. The Javascript basically replaces all of the content from one div with all of the content from another div when a button is pressed. This prevents an extra web page having to load unnecessarily. I have highlighted all of the 2nd screenshot to show how I put it together. Each 'element' of the design is a separate image, so each image can have their own appropriate alternate text for the search engines to feed off. I feel this is important in a web page with practically zero actual text.

The above screenshot is the events page (un-finished). This makes use of Javascript that shows more information about each type of event in an expand/collapse style. This increases organisation and ease of use, as the user can easily access the particular information they are looking for.

All of my pages successfully validate as XHTML 1.0 Strict and they all appear correctly in each of the major browsers.

Read More 0 comments | Posted by Ste

More Simple Javascript

I created another game using Javascript, this time with a bit more substance to it. The Javascript code is still very simple, although I suspect not as simple as it should be - and not without it's drawbacks.

The game (interface shown above) shows images of football grounds and presents the user with a text box. The user can then type the name of the ground into the text box and click the 'Check Answer' button. If the answer is correct/incorrect, an alert will appear to confirm this.

Here's the code:

To begin with, the HTML is a simple img, a text field input and a button input. The text field has an id property so it can be referenced in the Javscript Function. The Button has an onlick property, so it can call the function when clicked upon.

The actual function is quite basic. It calls the value from the text field (that the user has entered), then states that if this value is 'Anfield' an alert should appear informing the user that this answer is correct. I tried to use a simple 'or' (||) operator to state other possible answers, but this stopped the program from running. So instead I used an else if statement to state another possible correct answer. Then, anything else would show as incorrect due to the final else statement I used.

Read More 0 comments | Posted by Ste

Simple JavaScript Game

After being set a task to plan and create a game using Javascript, I considered my knowledge of the language; which is fairly limited.

I had recently learnt how to generate random numbers and I thought this code may be a good basis for a game. After some thought I decided to create a dice game; the aim being to roll either a 2 or a 6 in order to win. Very simple stuff.

Here is the code, including the XHTML framework, the CSS formatting and the Javascript to bring the game to life.

The die=Math.ceil(Math.random()*6); code generates a random number between 0 and 1, then multiplies it by 6, so we have a random number between 0 and 5.999. The Match.ceil part rounds this number up, so we have a random number between 1 and 6.

I then use an if statement to give the game different outcomes. So if the user rolls a 2 or a 6, they receive feedback telling them they have won. Otherwise, they are given the feedback 'sorry, try again'.

The try again text is a link, which also uses some Javascript. This javascript:location.reload(true) refreshes the page when clicked, so as to begin the whole cycle again.

The following screeshots show the sequence of the game.

Read More 0 comments | Posted by Ste

Website Progress

I'm currently in the process of designing the look of the website I'm developing for the Radfords bar. I'm using Adobe Photoshop for this part of the design process as I am comfortable within this software and familiar with all the tools. I have many papers full of sketches of many different design ideas which I will scan and upload at a later date. So far I have designed the look of the Enter page, the Home page and the Food & Drink page.

Enter Page

Home Page

Food & Drinks Page - Drinks

Food & Drinks page - Snacks

I got in contact with the bar's Landlord to get an idea of content for the site and he provided a few bits of information, such as the local ale they serve and the sort of events they hold.

I hope to use Javascript for a Calendar feature on the Events page, the Gallery and the Food & Drinks page. Although I feel the interactive calendar I have in mind may prove too challening for my level of Javascript knowledge... but I will see what I can come up with.

Read More 0 comments | Posted by Ste

Website Project

Our project for the first term is to choose a 'building, structure or environment' to create a website for. The site must have a minimum of 5 pages and 3 interactive javascript features.

I have chosen to create a website for Radfords, the match bar at Hereford United's Edgar Street stadium. The bars main purpose is to serve the Hereford United fans on a match day with drinks and snacks, although the bar can also serve a number of other events, such as meetings and functions.

The bar has recently undergone a huge refurbishment as well as a name change which has given it a new lease of life among Hereford supporters.

Thanks to my good relationship with Hereford's official photographer I can get hold of the necessary images relatively easily, although I do plan to get to the bar in the next month or so to gather my own material.

At this early stage I would imagine the content of the site would be on the following lines; welcome page, up-coming events (maybe a calendar feature), book an event, food/drinks/offers, history, gallery and a contact page. This will more than likely change when I get further into my planning for this project. I do plan to contact the bar's landlord to gather some information and get his opinion on content for the site.

Read More 0 comments | Posted by Ste

Junior Bulls Xmas Card Design

I've just finalised the design I've been working on for the Junior Bulls Supporters Club (of Hereford United) Christmas card. This design will be mass produced and all the players at HUFC will sign each card. The cards then get sent to each member of the Junior Bulls Supporters Club in time for Christmas.

The baubles each feature a player's face as does the fairy; this will be the basis of a competition where the members have to guess which player the fairy is. Everything in the card design was made from scratch including the xmas tree, the presents and the baubles.

Read More 0 comments | Posted by Ste

Ste Blog

About

www.stephengreig.co.uk

#

Website Progress

More Simple Javascript

Simple JavaScript Game

Website Progress

Website Project

Junior Bulls Xmas Card Design

Ste Blog

About

Followers

Blog Archive

Labels

Search