Background design

Below is the background I have designed. I have used the colours from my digital signature so that the colours still represent me. I think it also give the web page more of a design element. I am going to try repeating the image all the way across to see what it looks like.

(My background on the left hand side)

I think the background looks so much better when repeated across my whole website. Make the website look a lot brighter and more artist. The only thing I am worried about is having writing over the back ground. Because the background is so busy and bright it might make seeing text difficult. I want my text to stand out. So I might have to put the text onto a different colour background.

(My background repeated across the whole screen)

My writting got lost when I wrote on the background. It was not very easy to read. So I decided to to put all the text onto a different colour background. The logical choice for me was the background colour of the document with a lilic boreder. This is because these are the two main colours for my website. Below you can see how it looks.

(Text over my background)

Form design

I started my form by using the basic code. You can see how it tured out from the picture below. I want to put the form in the middle of the page. Also I want to see what the boxes look like when they are lilac. I also think that I looks a bit lost on my page. So I want to find a way to make this look better.

(My form aligned to the left)

So I decided to start with trying to to change the background of the text boxes using css. I used the code below to see what it would do. It changed the whole section of my background lilac. So I need to work out how to get the text box colour to just change. I am not sure how to do this using css.

(My form, attempted to change the box colour)

I finally got the code working to change the background of the text boxes to lilac. I decided that I do not like how it looks. Looks so much better in white. I also had a issue with my text on the form. I originally made it lilac (same colour as the border) but this wasn't very easy to see with my background. So I decided to see what the writing looked like in white.

(My form, text box colour background)

Even though the writing did look better in white it still wasn't very easy to read. So I decided that I needed to put some kind of background on the writing or on the form. It might of looked a bit funny if I just put a background on the writing. So I went with the background around the whole form. With a lilac border. This turned out a lot better then I thought it would. I think it gives it that more professional appeal I was going for.

(Finished form)

Header

I put my digital signature into the header of my website to see if I liked it with my colours I have picked for my website and I really do. I think it looks really good. The contrast between the black, the purple and all the bright colours are really good. I am temped to make headers like these for the pages as well. I think when I've got the bright coloured flowed design up the side of the page it will look really good.

(My Digital Signature in my website background colour)

I like my digital signature as a header so much I decided to do the other pages with the same headers. So below are the header for 'My Hobbies' and 'My Form'. I think these look really good.

(My hobbies header)

(My form header)

I decided that on my second page (that I named 'My Hobbies') I wanted to display some of the cards I have made. So I thought that the title 'My Hobbies' wasn't really relevant. So I decided to change it to my cards. I believe this is a better title because it explains what is on the page.

(My card header)

Design ideas

When you access my website I want it to be very me. I want people to be able to look at it and tell something about me from it.

Also I think the background is really plain. I want to put something up the left hand side of the page. I want like to put a animated flower that grows up the page but I don't really think I have to skills to be able to do this. So I will just have the picture on my background page. Hopefully this is something I can design. Below are some examples of the design I like. What I want is a mixture of all of them. I love the colours in the top picture these are very similar to my website.

(http://www.istockphoto.com/file_thumbview_approve/8819234/2/istockphoto_8819234-floral-design.jpg)

(http://images2.layoutsparks.com/1/120344/pink-abstract-flower-design.jpg)

(http://www.layoutsparks.com/1/39357/phantom-opera-flower-design.html)

I would also like to put my digital signature on the website. I think it would be a good idea because it was made to represent me and the person I am. I will make the background colour transparent. The only issue is that it might clash with the colours I have chosen. I am thinking that maybe I should change the colours I have chosen to compliment my digital signature. I am going to put my digital signature into the website and see what it looks like then decide.

(My Digital Signature)

Implemention/Realisation

The building process (jobs and activities undertaken)
When we got to our space, we picked out a spot we thought would be good to start the Rube Goldburg machine and started building a ramp for the ball to roll down. From there on we placed the rest of the machine down and ran a few test runs. Once happy that it would work, we set the PC up with the arduino boards and placed the light sensor in the right place. Ignoring the relay switch for the time being, we placed the other parts of the machine and ran a test run using a normal desk fan instead of the fan being used on the relay switch.

One we were happy with the in and out contraptions, we did a quick test of the computer system. Covering up the light switch with a spare cup to get it started, followed it through to the relay switch turning on the fan. Once that was OK'd, and we tried a few test runs, we got ready to film the whole thing.


Problems encountered
There were a few issues with the computer based part of the design. The email wasn't getting sent to being with, but this was an error within the code that was fixed easily. Another problem that we encountered was the computer itself; we had to put it on a slightly unbalanced surface that was enough to disconnect the power cable, therefore turning it off. We fixed this by propping it up with some cardboard we had left over. Everything else wasn't nearly as much of a hassle

The real world part was a nightmare at some points. One of the DVD cases got broken when it got kicked by accident, causing us to go hunt for another. We had a few cases of balls going in the wrong direction and getting lost under furniture, and the most annoying part has to be setting everything back up when the starting ball would get knocked, causing the rest of the unbuilt machine to activate.

Parts we did not implement (and why)
We had quite a lot of leftover parts we brought along for the real world part of the whole thing. Some of the things we ended up leaving out include:

• Sellotape - We found it wasn't strong enough, so used duct tape
• Half a box of dominoes - We couldn't squeeze the rest of them in somewhere
• Wind up kids toys - We had a few of these, some of them just not needed
• Playing cards - We did not have the skills to keep a house made of these up

Screenshots and walkthroughs of what has been built so far (or any mock-ups you have created)
So far, we have these mock-ups made by members of the group...

Storyboard
This storyboard shows our project, including the platforms we will use. The final project is very similar to what the storyboard shows, with major changes to the real world part.

Descriptions of how it works

The whole thing works by using real world objects to move in a certain formation that causes other objects to move, much like the effect that dominoes have when lined up on their smaller edge and pushed but with a bit more ingenuity. This would then cause the virtual part of the machine to activate with a similar effect to it's real world counterpart, displaying webpages, showing animations and sending data to other sites. Once the right condition is met, the computer activates the rest of the real world objects. At the end, a roll of kitchen towels gets knocked and unrolls, revealing some written text.

Actual timetable

Put up Time
9:50am - Get to house.
10:20am - Start setting up Rube Goldberg machine (input)
11:30pm - set up PC
12:30pm - Start setting up Rube Goldberg machine (output)
2pm - Dry runs (Making adjustments where needed)
3:30pm - Film and editing

Pull Down Time
5:30pm - Tidy equipment
6:10pm - Load up car
6:30pm - Return PC
6:35pm - Leave

Content

When I first heard I had to do a website about myself, I had no idea what to do it on. So I decided to use a mind map about myself. Ive always been told this is a good way to sort information and pick out the best bits.



I have decided that I will put a bit of information about all four points on my home page. Then I will expends and the information on my hobbies on my page 2. The thing I don't want though is to just end up with a lot of text on my home page.

Deployment

Set up time - As the set up with be in someone house the set up time for the project is very flexible. However it can not be unsociable hour due to other people in the house. It would also be a good idea to film while it was still daylight because this would produce the best light to see by.

Vandalism - As we are filming inside someone house vandalism is not a issue. The other problem we could have is from the other people in the house wanting to use the room. They could knock thing over and interferer with the setup.

Security - The project is something that we are going to put up and film and take down so the security isn't that big of a deal. The only thing we need to make sure is once the installation has been set up that no one is going to mess around with it. This is easily done in a house because we can lock the door and control who uses the room.

Filming - We will be filming inside. We need to make sure that we have good light available so we can see each part clearly. Another thing we are going to have to worry about is how to actually film it because it will set out over such a big space.Another issue that we might have is fully capturing the computer side.

Health and safety

• We could trip over the object on the floor, we will have to be careful where we step.

• No sharp object that we could cut ourselves on.

• No liquid near the electrics, chance of electrocution.

• Open flame should be secure, to lower chance of fire.

Deployment time table (put up)

10am - Get to house.

10:30am - Set up the PC in the room.

11am - Build the Rube Goldberg machine and set up PC side.

1pm - Dry run (making sure all the links work and it runs smoothly).

1:30pm - Make any adjustments needed.

2pm - Film and editing

Deployment time table (pull down)

4pm - Tidy equipment back into boxes.

4:15pm - Load up car.

4:30pm - Put room back together and return PC to proper place.

Equipment list

PC's
light sensors
Relay Switch
Computer Programmes
DVD Cases
Cardboard Box
Dominoes
String
Scissors
Candles
Playing cards
Bounce balls (4)
Bubbles
Tape/Glue
Cotton rel (Large one for wire)
Cardboard tube
Paper cups
Books
Elastic bands
Ruler
Kids toys (wind up toy, mechanic ect)
Fan
Dublo
Blue tack
Mousetrap the game
Kitchen roll