Roll-Over images- Re thought. Speech Bubble Facts!

 

 

In order to make my web pages more interactive I wanted to use roll-over images, however, the feedback I got from the previous images I had made of era's was that they were unnecessary and didn't bring anything to the page as the viewer already new the era by the page title. These new roll-over images will provide short interesting facts of that era that aren't to do with technology but are just extra snippets of fun information specifically for this age group. The first image will read 'did you know' and the roll-over will reveal the fact. These speech bubbles will be coming out of the robot characters mouth, as if it is him/her speaking.

Getting to Grips with CSS- Finally!

I have started to understand the process of adding CSS to my website and have become more confident in experimenting in what it can do. I have decided to use an internal CSS sheet for my website, because I work better having everything in one place and it avoids confliction between internal and external style sheets. Also, because each of my pages is going to be different in terms of layout and colour, it makes sense to have individual internal CSS that I feel comfortable working with.

 

I started by adding  a wrapper to my website to go around the sides and give the website a boundary. I then started experimenting with floaters and positioning to manipulate the images. Something that I am learning is that in order to get these numbers/pixels right, you need to do a lot of trial and error and preview where and how the images are moving. From this I started experimenting with margin's and positions. Something I also am finding useful in Dreamweaver is the colour co-ordination of the CSS & HTML. It allows me to see mistakes without having to re-trace my steps or read through reams of coding. For example, the bottom div class .robot3 is in blue, because the above div class .microchip has a missing '{' symbol to complete the instruction. Hence, I am now learning to look out for colour changes to correct my work.

 

Something else that I am learning is short-cuts. On the left is a screen shot of the positioning of four individual images. I spent hours individually moving the images to try and place them in a horizontal line, by using floats, paddings and margins. This was a time-consuming process and when I added a border it read all of them as one image and added a giant border round the whole space.

 

This was incredibly frustrating and meant that the majority of my time was being spent on positioning images. Because of this, I started researching better ways to position images and went to a colleague of mine who recommeded inserting a table, and placing the images into a table. This prooved successful and became a lot easier in terms of CSS. You can see on the right, I could remove all the previous id's and simply add a #divtable and border: 2px solid #000;

 

This allowed me to manipulate the images within a table so they did not move or need numerous CSS instructions. I am glad that I came across this AFTER individually positioning the images as it taught me about the different id's and classes, but also allowed me to learn two ways of achieving this.. Even though it was time-consuming!

 

Starting to piece everything together..

These are some screenshots taken of the progress of my website.  By experimenting with colours it has made me aware of certain colours that are difficult to read and clash etc. You can see the different robot characters are the main part of the page and will be at the top of each page to introduce the era.

 

These are some of the images I want to use for my page on 2000's technology. One issue I came across at this stage was that once the images were saved for the web, they left some of the white background and were not completely transparent. This therefore meant each image had to carefully have the white pixels erased on Photoshop which was a time consuming but unavoidable process.



Navigation Bar- Updated

Navigation Bar:

When I first started my navigation bar, I didn't want it to be over-complicated and wasn't confident enough to use the correct navigation format. Instead, I simply created a table in HTML and produced an adequate horizontal navigation bar that linked to each page.

However, after spending a lot of time watching YouTube Tutorials and reading relevant articles on navigation bars, I gained confidence and realised that it was actually quite simple and would look a lot more professional than a table. I created the navigation div id in the HTML and then in CSS I entered the correct instructions for display, font, list, hover etc. I was really pleased that I challenged myself, instead of settling with something that I wasn't happy with. I feel like I am learning more and more every time I open Dreamweaver.
 

This was my final navigation bar. The link will turn green to match the robots tummy and the 'o' in the logo when the user hovers over it. I also rounded the corners using a border-radius css element to make them look softer and more button like. The 'roundness' also compliments the round text.

Original Navigation Table:

New Navigation Bar with Hover effect:

 

In addition, when the user clicks on the robot header it will take them back to the homepage. This is a proffessional and interactive technique that the majority of websites have in case the user wants a quick exit of a page. There is also the home button that has the same function.

Logo Development

Stage 1: Scanning the image and using a stamp effect. Finding a suitable globe image

 

Stage 2: Cutting out a raised arm and adding colour to the image.

 

 

Stage 3: Adding globe image and resizing to fit robot hand.

 

Stage 4: Adding image to text and giving consistent colour to letter 'o'

Colours & Fonts

Colours

Getting the colours right in web design is a crucial part of producing a website and when this isn't done properly it can ruin a website. (See post on bad examples of web design) In order to make sure I do not fall into that category, I have used two websites to guide me into selecting the right colours. Obviously there is a level of opinion involved in this, e.g. some people may think it's too bright, too dark etc. however without researching existing websites and understanding colour, it is impossible to produce a professional looking website.

https://kuler.adobe.com/#themes/rating?time=30

This website taught me that low contrasts between font and background are harder to read and depending on your background colour contrast can be improved. The highest contrast you can have is black and white and the lowest is light yellow and grey.

http://www.w3schools.com/tags/ref_colorpicker.asp

Both of these websites have been useful in picking the right colours, which has been quite challenging due to my target users being children. I wanted the pages to be bright, colourful and gripping without clashing and being uncomfortable to look at.

Fonts:

When I started looking at fonts I wanted to use 'Robot-Like' science text to relate to the logo and overall theme of the website. I downloaded some texts from http://www.dafont.com/ that I liked and started asking for feedback on what others thought.

The majority of feedback I received said that they were too grown up for my target users and didn't add anything to the theme of Global Village. They said to avoid a complicated, science, techno font and keep it simple, clear, yet fun. This was the font I decided on; Hobo Std, because its clear yet the slight twists and bending in the letters make it fun.

Creating a Website Logo

I began drawing some sketches for a logo idea all around the concept of 'The Global Village'. The first drawing was to represent giving the globe in his hands and was a sweet and simple image idea. The second (underneath) was to create the robots body out of the globe to show how 'The Global Village is part of us, and the third was almost a 3D image of the robot standing next to a globe with his arm around it. However, it was the fourth that was voted most popular when asking a small focus group, as they felt like it represented 'having the world at your fingertips' and by lifting it up in the air it was a positive and strong image. By lifting the image up it also made them focus on the globe. I also received feedback to remove the text from the globe as with the blue and green colours of land and sea, the text will become unreadable and instead to have 'The Global Robot' next to him to support the image.

Creating Roll-Over Images

These images were used as roll-over images. Every time the cursor rolled over one of the robots, the era or topic would flash up. Although these worked, I received feedback that they did not bring anything to the webpage as the user was already aware what era they were looking through by the navigation bar and page title. I still want to use roll-over images however I will re-think to find something more relevant and fun for my target audience. This was still an important stage in my production as I have learnt how to incorporate interactivity and view where and how they work well.

Editing My Robots

After I had created my sketches I scanned them into the computer and began bringing them to 'life'. In Photoshop I used a stamp sketch effect to darken the sketch lines and make them look more defined.  I used my original drawings to make them look like they've been hand-drawn as this would be more relevant for a child's website. The two images that I added externally where the union jack and the spiky hair, which I then Photo-shopped and edited to fit the image. This was because the original drawings looked too messy and did not look consistent compared to the other robots.



(Image source: Google Images: www.woodlands-junior.kent.sch.uk)
(Image source: Google Images: www.best-of-web.com)

I wanted them to be bright, individual, but still have the 'child-like' drawing element as if they looked too professional and technical they would lose their fun, light-hearted appearance. I used the same robot for each era, and then began adding their trade-mark objects e.g. glasses, scarf. As mentioned in the proposal, I deliberately made one robot have short 'male' hair and one with a long pony tail to ensure the robots gender is not fixed and therefore appeal to both girls and boys.

Each robot had a consistent theme of blue eyes, black shoes, a square tummy and the exact arms and legs. This consistency is important for the website to flow from page to page and to enhance the narrative that the robot is one character that is simply changing his/her outfit throughout the eras. These are my final robot characters..

Creating Kids Content.

An important stage in producing my web content was to ensure it was suitable and understandable for my target audience of 9-11 year olds.

To test this, I interviewed my 9 and a half year-old cousin.

Me: If I said to you I was making a website of the development of technology would you understand what that means?
9 year old: Yeah, it's going to be like a history.
Me: Yes, that's right but it will show you what technology was created in each year and how it revolutionised the way people lived. Do you know what revolutionised means?
9 year old: Erm, changed and made better.
Me: Yes, but it's more of a huge, dramatic change.

Me: Do you know what the term Global Village means?
9 year old: No.
Me: A Global Village is what can be created by everyone using technology together, at once, all over the world. A village is something you think of as being a small group of people, and global you think of being the whole world, so combined, it's like having everyone in the world in a small village. They communicate, share, learn and create together all via technology.
9 year old: Ohh, like Skype and email.
Me: Yes they help create a Global Village, but this is on a much much bigger scale.
9 year old: Cool!

Me: What about a Digital Divide?
9 year old: I don't know.
Me: Well a Digital Divide, is what happens to people who aren't part of the Global Village. There are some countries and places in the world that are not fortunate enough to have the computers and mobile phones that we have therefore they become separated and it becomes difficult to communicate and learn things with these people.
9 year old: Oh, like the people for red nose day.
Me: Yes, the poor countries that you raise money for are the type of people that don't even have electricity let alone internet.
9 year old: People should send them computers then we could talk to them and wouldn't have to fly to Africa.
Me: That is a nice idea but the trouble is there isn't a lot of money to provide children with computers and many places don't have internet connections. However, there are some charities that are beginning to do exactly what you've just said and give school children computers to share to help them learn more about the world.

This mini extract from the interview enabled me to tailor some of what i'd written to be more comprehendible for this age group, however something that I had learnt from this interview was that i'd previously underestimated the technical knowledge and awareness of this age group. This 9 year-old was able to explain to me what a mega-pixel was, how to get an internet connection and could describe what words like evolution and revolutionised meant with confidence. This has been an insightful part of my web design process, and it know means that I can use complex terms with the confidence that this age group should understand and enjoy what their reading.

This interview also confirmed to me that the whole aim of my website; to get children to understand the difference between a Global Village and a Digital Divide was necessary, as he did not know what this was and after some basic explaining he had grasped the concepts. My proposal stated that children will become ignorant to the availability of technology if they are not informed of the misfortune of others around the world, and this interview clarified my concern and reason for creating this website.

Gathering Content for the Website

An important stage in creating a website is collecting the right information and content for your users. This stage could prove challenging for me as my website topic is based around the development of technology over 60 years and how these technologies have changed the way we live. I will also be basing this website around the concepts of the Global Village and the Digital Divide, all of which is not exactly easy for my target audience of young children. Therefore once I have collected my content, I will have to mediate and edit every word and phrase to make it easily comprehendible for the children whilst not avoiding important vocabulary and concepts.

This website has provided me with a basic foundation of what technologies were invented in each era.http://www.techradar.com/news/world-of-tech/5-technologies-to-thank-the-1950s-for-623013

Another useful source I have found has come from the Channel 5 programme 'the Gadget show'. This particular episode shows an interesting look at where the future of technology is going and therefore is relevant to my last web page 'the future'. http://www.channel5.com/shows/the-gadget-show-future-special

1950's
1. The first microchip/integrated circuit
2. The first stored program computer
3. The first mass-produced modems
4. Inventing optical fibre
5. The first credit card

1960's
1. The first video game console
2. The first computer mouse
3. Light Emitting Diodes
4. Dynamic Random Access Memory
5. Light Amplification by Stimulated Emission of Radiation

1970's
1. The first microprocessor
2. Videogame era dawns
3. Liquid Crystal Display
4. The first word processor
5. Email
6. The first digital camera
7. The pocket calculator

1980's
1. The Personal Computer
2. The CD
3. The Walkman
4. The Video Cassette Recorder
5. The Mobile Phone
6. The Camcorder
7. Game Consoles

1990's
1. Satellite Television
2. The Answer Machine
3. The Internet
4. The First MP3
5. Text Messaging

2000's
1. Smart Phones
2. Ipod/Iphones/Ipads
3. Laptops
4. Tablets
5. On demand television
(Record, Pause, Rewind live TV)