Processing Completed:

As shown in the previous post, the finished sketch is very similar and still changes colours between red, green and blue only these colour changes are now dependant on the arch-os feed being taken from the Portland Square Building. By using 'if' statements to check weather the values being taken are greater or less than three different values, the sketch will successfully change depending on the values being received.

To make the sketch a bit more alive I also added classes to send circles/ellipses from top to bottom and left to right that also change colour depending on the RSS values.

Below is a print screen of the sketch in action:

if value is below, or equal to 50:

If value is above, or equal to 100:

If value is above, or equal to 1000:

Another change to this sketch is that I was unable to select just one factor from the xml feed. I had originally planned on only using the temperature values. Now the sketch takes all the different pieces of data from the arch-os and depending on its value will change the colour accordingly.

Processing Ideas:

After several weeks of tutorials on Processing it was now time to use what we had been taught to design our own sketches for an end of term assignment. There are many many different sketches Processing allows users to create, however the amount of sketches I personally was capable of achieving were minimal. The brief included having to have the Arch-os files of one of the university buildings to control the processing animation. I decided that I wanted to choose the temperature of the ground floor, and would design a sketch that fit this changing factor.

I visited processing.org and openprocessing.org I got many ideas for what I wanted to achieve with my design. I wanted a circle in the middle

of the sketch that appeared to go round, and changing colour depending on the temperature. Red for hot, green for an 'in the middle' temperature and blue for cold.

After browsing I found some code that I was able to

modify to change the sketch to fit my design plan. Below are print screens of the different temperatures being displayed. I used 'if' statements to control which colours were displayed.

If cold:

If warm:

If hot:

These are early sketched of the design. With each new ellipse drawn I changed the 'r, g, b' values to random(255) to change the shades of each of them to give the effects shown above. The circles are also constantly being redrawn so it is constantly updated and shows movement.

I still want to add other elements to the sketch, but will wait until I have the Arch-os working to control it, at this stage I have simply given the temperature a standing value to test each of the statements. So far though, a good start.

To make the circle follow the circumference of a bigger circle in the centre of the sketch I used a tutorial which used cos and sin in mathematics. I then placed the centre of the large circle to the middle of the page by positioning it to half the width and height, (height/2), (width/2).

My Flash Game:

Once I had a good idea of what I was aiming to achieve with my game it was much easier to begin. I also however wanted it to be different, I had originally decided to make a game that was in the style of a pigeon shoot, or a space kind of idea, but after hearing of some of the games my fellow classmates had produced I de

cided to change the subject of mine completely. to mix things up I decided to change the vi

ew from shooting things in the air, to being in the air and shooting down. This then led to the theme of the game that the user would become a gunman of a helicopter and the aim would be to catch an escaped criminal. This still uses the same principle of an aim and shoot game, but at a different point of view which I liked.

I definitely wanted my game to have a start screen. The purpose of this is to introduce the game by setting the scene and giving the user some instructions. Once the user had clicked a play button, it would then go into the game play screen where the user would be set a specific time to shoot the criminal before the time ran out. Once the user had hit the running criminal for the required number of times in the time limit, the window frame would show a win, but failure to do so would result in a game over screen with an option to go back and try again.

The game play will involve the user having to catch a criminal that I place randomly on screen using action script with the position (Math.random). once the user has clicked on the criminal 10 times, they win. Although to limit the user from winning every time, I placed a timer so the game play was limited to 10 seconds. I also purposely did not show how much time the user has left, this should give a little more excitement. If the user is unable to click the criminal 10 times in 10 seconds, they fail.
After a few days of writing the action script and checking the game fully worked, this is what I came up with:

Start Screen:

Game Play (day):

Game Play:Winner Screen:

Failure Screen:

For the game change due to an external change, I decided to change the background of the game play frame. Seeing as the criminal is running in the streets, I decided to simply change the background from a map during the day, to a street map that looked as though it was night by giving it a green layer to imply the user is now us

ing night vision. The data pulled in would be the time of the users computer to change this depending on weather it was day or night equivale

nt to real time (If day, game would display day fram

e, if night, game would display night vision frame).

[External Data Change] Time Screen (night):

Now that the game is complete I am happy with the way that the game looks and plays.

I also tried to keep the look of the game specific to my website. The colour scheme on my website consists of red and black, so for the game, I h

ave made all text red on top of a black back ground to try and keep them related.

Below is how the game appeared once I had uploaded it to my webspace, Happy days!

Flash Game Research:

Our 2nd assignment for this module has been set and is to make our own Flash game using action script. To begin, I decided to get a ganda at what games I enjoyed to play myself before making my own. After a hard hour of research work by playing games, I found that the games I was most attracted to were shooting games. Games that involved the user having shoot or destroy a target. On this basis, I decided to make a similar game myself.


Below are some print screens of a couple of examples I came across when searching online:


This is also a very simple style of game to reproduce as it doesn't require a high level of skill to create. With this being my first flash game it definitely seems like a good place to start.
The brief was was to create a flash game that had either a scoring system or a timer which would limit the user in some way and also had to extract data from an external source that would change the game. So with that in mind, Its time to begin making my game!

Website Improvements

If I were to know then what I know now, then I would definitely start the site much earlier than i did this time. This is because I am new to this and took me a lot longer to solve problems and remove any errors from my code than I would have liked. I would have also added extra code in my validation form that asks for a valid email address by checking if the email address entered had '@' symbol in it somewhere. I had previously had a code for this, but the alerts suddenly stopped working when it was added, but did once I took the email validation out. After hours of looking over again and again I could not find any problem with it, so I eventually gave in and left it out as I would rather have the majority working than none at all.
I would have also liked to have added a photo gallery to display some of my traveling photos to link to my traveling section in my 'About Me' page.
Considering this is the first website I have ever produced I feel that it was a good effort and has definitely helped me in understanding the code I have learned and being able to apply it to a project. It also helped having a project that people care about because I wanted to have a website that looked good and was pleasing to the audience. This meant I was more determined to get the code correct throughout the website to keep it as good as it could be.

Finished Website

I have now completed my website and is now online. I have changed small parts of the site such as an added link in my menu linking my blog to the site. I also slightly changed the background image, as I felt the previous image shown in my previous post was too white for the look I was trying to achieve. I also thought though that the all black background was too much aswell, and needed just a little something to break up the text and make the page look slightly smaller.
To make this happen, I used another background image, but one that had much less white in it, keeping the overall look of my site black which is how I wanted.

Below are print screens of how my site now looks.

Home Page:
Interests: Including images to show audience rather than large amounts of text as I have previously discussed.
NPNG: I also added a page for videos of a skate team I am a part of, No Pain No Gain Skateboards. This is for users of the site to view, so not only are they able to read about my hobbies in the Interests page, but to see what I get up to in my spare time with mates. I also changed the YouTube embed code to give the videos on my page a red boarder to keep the the same colour choice of my site, aswell as making the video windows larger for better viewing quality.
Contact: My final page is a Contact Me page. This would give people who visit the site to leave a comment with their name, email address and then their message. I also added JavaScript to write a conditional statement to avoid people missing data in the required fields.
Now that I have completed my website, I must validate it ready to hand in. To do this I used The W3C Markup Validation Service where I was able to copy and past the URL of each page to make sure it passed validation. It didn't to begin with, but luckily it was only minor errors in my code such as not ending my image tags with alt and not closing paragraph tags before opening a new one, so I was able to correct it and have my pages revalidated and passing.The only pages I was unable to get to pass validation were the pages that included YouTube videos. This is because the validation service did not like areas of the code that was required for the videos to work. Because I these videos were on additional pages, I decided to keep them as the 4 compulsory pages of the website all passed.
If you want to visit the site, visit olza.co.uk

More Looking At Websites

Another website I look at a fair amount is the DC website. This again is again because I follow the skate scene along with a touch of snow boarding and motocross. I am also a fan of Ken Block's Gymkhana videos and this website has it all. I also like the way this site has many photo's and videos as they are of sports I am interested in.
It has now also began to showcase the last 20 years of professional skateboarder Danny Way, who happens has skated professionally since he was 14 and gone on to break world records for the highest backside air out of a quater pipe, measuring 23.5 ft, also setting the long distance record with a backside 360 at 75 ft, largest bomb drop from the Hard Rock Hotel & Casino at 100 ft into a 40 ft ramp, gapping the great wall of China as well as breaking the land speed on a skateboard at 74 mph.
Because of these achievements he has become extremely well known and websites use this to draw attention to audiences. This also supports the reason I have decided to focus on images and videos rather than large amounts of text to read.

Print screen of the DC website:
Also Check out DC website

Danny Way also has his own website, documenting on all his latest and oldest news including photos and videos. This site is also Black which in my opinion looks much better.


Now that I have already built a simple website which is shown as print screens in the post below, I can now begin to make it more unique to me, adding images and videos.

Danny Way Official Website

The reason for this post is to determine my audience. I aim to target an audience that has similar interests to me, as the videos and images I put on my website will mainly be of skating.

More Website Ideas

I didn't like the fact that the images/logos I came up with had a lot of white in them. This did not fit in with the black and darker look I am aiming for with my site. To change this I went back and did some more. Before hand however, I also wanted to create some sort of logo that could the site could be identified with. To achieve this I had another look at my digital signature I made for the module IDAT 107, by using the same style as the Love Park does in Philadelphia.
Digital Signature:
This is what I managed to produce from the above and will use it for my header to the site.

Website Building

I know which websites I like, so creating my own should be fairly simple. I definitely don't want too much going on, this can distract users and make navigation of the site much harder than it needs to be. I also wanted to create some sort of logo/image that can be recognised with my site. I came up with black, white and red being my main colours as black and white are complete opposites and red was to give the site more a bit of colour. They also contrast with each other which again makes it easy to identify. The menu is located exactly the same on every page, also making it easier to navigate, which is at the top making it clear and easily found.

This was the first image i came up with, but it did not turn out the way I wanted, it was way too small to be used and not what i was after.
So I went back and came up with a similar logo/image using Illustrator to make the image much larger and clearer. I also kept it simple by just using the domain name 'olza' to keep it specific to my site.

So this is the image i came up with to use for my site. I definitely wanted to use this, but was not sure of whether to use it as my back ground image, or the header of each of the site pages.
Here are some screen shots of the different ways the site may look by experimenting different uses of this image.

Without Background Image:With Background Image:
I am currently split between both these options as both have hold characteristics I like. The print screen with no background image I find looks good as its easy to read and nothing to distract users, I find it also makes the menu much easier to use as its extremely clear and separate to all other text.
The print screen of the site with the background also looks appealing as there's something extra, but not too much that it takes away the main focus to the text. It also makes the site more unique having a background image that I have created myself.

My choice of font was Arial as it is easy to read, but also looks different. I was tempted to use Times New Roman as this is sans-serif font and has been proven to be easier to read as the flicks of the letters bring them closer together, however, this really only applies to large amounts of text that will be read by users for long periods of time. The purpose of my site is not for long reading about me, but more visual in the use of pictures and video. I wanted to focus on this as it is much nicer for a user to see images and clips rather than to read, this should keep users interested for longer and keep them visiting again to see updated pages.

HTML code: Forms

Forms are very important in the way that they give the ability to allow website users to give their personal details securely online, these are used in order to make payments, including address information for deliveries, contact details such as email address and phone numbers, as well as contacting the website for any inquiries or feedback.


This is an example of a form I made as an exercise to practice writing code:





Please Enter Details
Personal Details:

First Name:

Surname:

Your Gender: Male Female


Address: (Line 1)

Address: (Line 2)

City

Post Code/Zip

County/Region Andorra Austria Belgium Czech Republic Denmark Estonia Finland France Germany Belgium Greece Hungary Ireland Italy Latvia Liechtenstein Lithuania Luxembourg Malta Monaco Netherlands Norway Poland Portugal San Marino Slovakia Slovenia spain Sweden Switzerlan Turkey United kingdom


Contact Details:


Landline:

Mobile:

Email Address:

Confirm Email & Add Password:


Email:

Password:

Confirm Password:

Remember Me: Yes
No

I will be using the same style of form when building my own website. The form will be used in the Contact page which will enable people to input their name, email address and a short message, aswell as a check box and submit details button. I want to keep the form on my website as short as possible as this makes it more likely for people to want to leave a message because lets face it, who wants to spend ages filling in forms just to be able to leave a short message.

Putting HTML code into practice:

After having a few lectures with Mark Dixon on the fundamentals of HTML code we were thrown into writing the code using Dreamweaver with Chris Saunders, which then became clear it was not going to be easy to keep up with the speed of the tutorial for beginners!

The most frustrating thing is even if you're certain you have followed the code precisely, the code wouldn't always work, which would often be due to one small error such as a spelling mistake, or an unclosed tag. This wouldn't be such a problem, but the issue is not highlighted to you, it's just a case of re reading the code with complete focus to ensure it is correct, showing just how careful and thorough you have to be.

Website research:

The BBC Website:

My favorite website is The Berrics, but I do have a few issues with it. One of which is the navigation of the website, although i can quite easily navigate my way around the site, my first visit i do remember having trouble finding where particular events were. This is because the links are very small and don't exactly describe where it leads to.
It also changes frequently, so even once you have the ability to navigate the site, it changes and is difficult to navigate again.

The BBC website however i really like as it is extremely easy to navigate, all information is clearly labeled and the layout is clearly separated between each subject box.
Not only that, but the user can also slightly change/customize the site to make it specifically set out for their convenience by arranging and moving the subject boxes where they want them to appear on the page.
This makes it much more user friendly for visitors to the site.

I will use both these sites to help me decide how to display my own website, taking into account positive and negative factors eah of these websites consisted of.

Visit: http: www.bbc.co.uk

Favorite Websites

My favorite website: The Berrics

The Berrics is a privately owned indoor skate park located in downtown Los Angeles set up by professional skateboarders Steve Berra and Eric Koston. Combining Steve Berra's name with Eric Koston's, The Berrics was born.
Due to skateboarding being illegal in America this park was set up as a place where skateboarders can go and skate without the hassle of security of being arrested by police. The attraction of The Berrics is huge as many professionals visit The Berrics making video's and events like Battle Commander, S.K.A.T.E and various other events during the week.
The Berrics has a corresponding website that posts these events weekly such as Butteryass Monday's, Wednesday's with Reda and First try Friday's.
The reason this is my favorite website is because I love skateboarding and The Berrics has provided many skaters like myself with exactly what they want, which is many more professional skateboarding clips, weekly updates...and skateboarding videos in general.

Visit: http: www.theberrics.com