Bibliography & References

Books
Adobe Dreamweaver CS3: Classroom in a Book, (2007) Berkeley, CA, Adobe Press

Donnelly, D. (2002) Cutting Edge Web Design, The Next Generation, Gloucester, Massachusetts: Rockport Publishers

Faulkner, A. & Walthers von Aten J. (2007), Adobe Photoshop CS3: Classroom in a Book, San Jose, Calif. London, Adobe Press; Pearson Education

Henick, B. (2010) HTML & CSS: The Good Parts. Beijing ; Farnham : O'Reilly

Simmons, J. (2007) The Designer's Desktop Manual, Mies: RotoVision

Tittel, E. & Burmeister, M. (2005) HTML 4 Dummies, 5th Ed. Hoboken, N.J. ; Great Britain : Wiley

Media Clips on Marshall McLuhan
Marshall McLuhan - The World is a Global Village (CBC TV) 
http://www.youtube.com/watch?v=HeDnPP6ntic&feature=player_embedded

Herbert Marshall McLuhan- Conversation
http://www.thecanadianencyclopedia.com/articles/marshall-mcluhan

Web Design
Learn to Create Websites
http://www.w3schools.com/

HTML Colour Picker
http://www.w3schools.com/tags/ref_colorpicker.asp

Adobe Kuler
https://kuler.adobe.com/

Superbad- An Immersive Experience Website
http://www.superbad.com/

Sod.jodi- Coding: Breaking the Rules
http://sod.jodi.org/

Tutorials
Navigation Bar Tutorial
http://www.youtube.com/watch?v=VRi93QcAilk

CSS Tutorial
http://www.youtube.com/watch?v=T5AMAf6ERe4

How to insert a Youtube Iframe
http://www.youtube.com/watch?v=-fYaNby0ZUM

Youtube Iframes used on my Website
'1980's technology vs Kids Today'
http://www.youtube.com/watch?v=7v75QpvISUs

'10 things that make you a 90's kid'
http://www.youtube.com/watch?v=finPQLzOLUU

'10 things that make you a 2000's kid'
http://www.youtube.com/watch?v=V2wnUDO3rqk

'The Digital Divide in Education'
http://www.youtube.com/watch?v=x1YLPL0KOWE

'Nicole Scherzinger unveils first ever Twitter dress'
http://www.youtube.com/watch?v=UqYz9hlPISM

Evaluation

As always, evaluating your work is an important and necessary process for any project or piece of work as it helps you to summarise the overall project and reflect on what you have learnt and what challenges you have overcome.

When starting my web design project, I felt very out of my depths and struggled to grasp the technical vocabulary and felt like I was learning a completely new language, which is exactly what it was; ‘Hypertext Mark-up Language.’ It took me a long time to get my head around HTML and I began to feel very behind on my work as I was reluctant to experiment due to lack of confidence. However, I forced myself to begin watching Youtube tutorials and hired some relevant texts to start to understand the basics. Instantly I began to understand that the only way that I was going to learn is by trial and error and physically using Dreamweaver. After I’d grasped the basics and had a clear idea from my proposal as to what I wanted to create, I slowly began to gain some confidence and stopped avoiding difficult challenges. By week 6 of production I had produced 6 basic page layouts and began producing my content. It took my two weeks to research, collect images and write up my website script however, it was part of the process that was just as crucial as the design itself. At every stage I tailored my content specifically to my target users of 9-11 year olds, to ensure that the website would be consistent and stuck closely to my proposal. I feel like the hours I spent into ensuring this was done properly has paid off as my presentation feedback told me that there was no doubt that it was aimed at children and they could see a lot of research and thought had gone into every stage.

After feeling more comfortable with HTML, I had to get my head around another difficult process; CSS, (Cascading Style Sheets). Initially this stunted me, as I was unaware that HTML could not create the design for the website, and I felt that I had to start from stage 1 and learn something that was not only completely new but contradicting to HTML rules. To separate the two in my mind, I told myself that metaphorically the HTML was the skeleton of the website and the CSS was the clothes and accessories. This enabled me to understand that without CSS the website would look like a shell and therefore understanding CSS was my next challenge. After a lot of persistence I grasped the idea and used an internal style sheet, as I preferred to have all my content together. Although some may see this as more time-consuming than an external style sheet, I felt comfortable coding this way and that was the most important thing for me considering it took me a long time to feel secure in what I was doing.

Creating my Robot characters was a fun and positive part of the web design process as they were my main way of targeting my users and were something that I felt I could create and produce successfully. From sketches to Photoshop images, I feel like my Robot characters ended up exactly how I wanted, each representing a different era, and during my presentation feedback they appeared to be the most popular and received the most positive feedback. The feedback was received  for my Logo, which involved creating a different robot holding a globe to correspond with the website title ‘The Global Robot.’

During my production stages I came across numerous challenges and times were I felt like I had come to a halt and began giving up on my project. However, it was these difficulties that provided huge learning curves for me and actually allowed me to step back from the situation and find a solution or search for help. This table documents these situations.

Issue:	How I dealt with issue:
Lack of confidence in HTML & CSS	Spent hours reading online articles, renting books and watching Youtube tutorials. Also asked for helped from colleagues and tutors who provided me with physical assistance and recommended helpful websites.
Trying to explain difficult concepts in simplistic terms for children	I researched my ideas, wrote out a website script and then went through and re-worded any parts that I thought were too complex or boring. For example instead of writing, ‘The mouse in computing, is a pointing device that functions by detecting two-dimensional motion relative to its supporting surface’ I would write ‘here is something that doesn’t like cheese, doesn’t squeak and isn’t afraid of cats..the mouse!’ and then explain how it worked in simple terms.
Not knowing target users technical knowledge and ability levels	I held an interview with my 9 year old cousin and asked him questions based on my website content, whilst specifically asking what terms he understood or found difficult. I then based my content on what I had found.
Trying to ensure each page/era had the same amount of content	The 1950’s obviously had a lot less inventions then the 2000’s so I took the most interesting and relevant inventions and ensured that each page had roughly the same amount of content. I also picked things that 9-11 year olds would most be interested in e.g. computer games instead of modems.
Trying to find colour images for old technology	It was difficult to find any images of 1950’s technology that were in colour, however in my feedback I was told that this is not an issue as children need to see black & white images to respect that we did not always have colour. I included both colour images and black & white to support both sides.
Lack of interactivity	I created roll-over speech bubbles that revealed a question and answer when the mouse hovered over them. I also included videos on each page.
Speech Bubbles pointing in wrong direction	I wanted the speech bubble to come out of the robots mouth and I had over-looked the fact that if the robot is on the right the speech bubble needs to point in the opposite direction. I resolved this by flipping the text and the bubble horizontally in Photoshop.
Image files coming up as broken	I realised that every time I moved my files around on my memory stick, Dreamweaver could not source the files. I therefore created set files and ensured I correctly ordered them and kept them in the write locations under a ‘www’ folder.
Positioning Images	I added each image into a set of tables to ensure that they did not move and did not rely on a series of individually positioned div’s and id’s.
Saving images for web	I saved each image as resolution 72 and made the background transparent to remove the white backgrounds. I then cut out all the white outlines that had been left on the image.
Lack of professional appearance	I added a thin black border around every image to make them look neat and located. I carefully considered colours and texts and re-made a professional navigation bar. I also added a footer with copyright details at the bottom.
Messy text positioning	By modifying the text to ‘justify’ the text automatically positioned itself around the relative images.
Too much text on page	I tried to insert images into the text to break it up and inserted videos to split the pages in two.
Not being able to see the ‘O’ in ‘The Global Village’	I specifically chose background colours that did not clash or interrupt the existing colours from the logo.

 

 

As well as evaluating all the positives of my project, I think it is also important to reflect on some of the areas that could have been improved or changed. One area that I feel like my website may lack slightly is an extra element of professionalism. I feel that the footer at the bottom works well for this, however my header could have had a better positioning and maybe even some separate icons to click on. A lot of websites have Facebook and Twitter links at the top of their site, and because this was a child’s educational website I did not think social networking links would be appropriate. However, maybe adding separate links or images to the top header would have made it appear more interesting and less like a title page. Another area in which my website may have improved is less paragraphs of text. I wanted to get as much information on the website but maybe if I had condensed the text or positioned it differently it would not dominate the page as much. A final element which I think may have improved my website is more interactivity and if I had the design skills I would have liked to make the robots move in some way.

 

This web design project has been one of the most complicated and challenging projects I have ever completed, and at times I did not think I would be able to complete what I had set out to do. It has taught me a completely new language, and a different way of thinking that has inspired me to learn more about coding and designing for the internet. I feel like I have successfully produced a website that has stuck closely to my proposal and is representative of my target users. It has helped me understand themes of usability, accessibility, innovation and functionality including how to correctly use colour, text and layout. Web design at times can be frustrating, stressful and incredibly demanding, however it can also be hugely rewarding when you sit back and admire what you have created from a set of codes. I am immensely proud of my website and I am aware that there is still room for improvement and are possible areas to develop, however as a first attempt of web design I am confident in what I have produced. I can now appreciate the time, effort and knowledge that go into creating websites and I have the ability to look more deeply into a webpage interface whenever I am using the internet. I have enjoyed designing for the internet and I am motivated to continue learning and developing this skill.

Making My Website 'Live'

Once my website is created it needs a Server to become 'live' and active on the internet. The server acts as a host to run the website or files requested by the user and this relationship can be described as a client-server process. The server therefore performs tasks for the client and in return the client can connect to a network. The server I will be using is FileZilla, which is a free FTP (file transfer protocol) for the exchange of data and programme files across a network. I have also learnt about the use of IP addresses (internet protocol) which is a type of unique number given to every computer or device in order to be recognised or identified as a host.

The Final Website

My Website URL: studentnet.kingston.ac.uk/k1127531/

Embedding Iframes

Choosing the videos themselves involved searching for the type of content I wanted for each page and also for each era. I spent hours on Youtube researching what I wanted, and I had a set of criteria that was guiding my search.

1. Appropriate for age-group (including visuals and vocabulary)
2. Video length- too long and users will lose interest, too short and it will not be worth using
3. Relevant for page/era (e.g. videos on first computer on 1950's page)
4. Interesting, Funny and Colourful

 

(For example the video on this page is about Kid's of Today v 1970'S technology, therefore is suitable for this age group and involves this age group. It also provides humour as the children struggle to work the old technology.)

 

After I had chosen my videos, my next stage of production was to add the relevant videos to my pages, as a form of interactivity and sound. I first had to learn how to embed them by gathering the code from Youtube and adding it as an Iframe within the HTML. Once I had previewed my video I began using CSS to position and resize the video screen as layout is important in making the webpage look neat and organised. I also added a border around the video to box it in and give it a neat frame.

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.