Planet Wiki: Screenshots and Code Breakdown

Here is the finished Planet Wiki Homepage. The html code behind the page is
explained on the next paragraph. I decided to change my background image as
the sunset background was a small JPEG, causing it to become pixelated when I
stretched it to fit the aspect ratio of a Mac computer. I needed a bigger image
which could be stretched and still fit the screen it was being displayed on.

First, I linked the homepage to its own CSS document, as I wanted it to have a
different background image to the other pages. I did this using 'link
rel="stylesheet" href="homepage.css" type="text/css"/' code, linking it to its
own 'homepage.css' page. From there, I added the logo using the img src= tag,
added text using the header h1 tag and links using the href tag.

This is the 'Knowledge' page, displaying popular articles on the site. I created
several headers on this page using the h1 tag, wrote up sample paragraphs from
the articles with the 'p' tag, added links to other pages along the top of the page
and made several images into article page links by adding 'a href' in front of the
'img src' tag and adding an '</a>' tag at the end of the element, nesting the image
element inside the link element.

This is the 'Social page allowing the user to sign into their account and contact
other users. I created a header on this page, designed a placeholder sign in/sign
up box in Adobe Illustrator and exported it as a png for use on my site. I also
grabbed several copyright free images of people and put them into an unordered
image list using the 'ul' tag.

My Solutions page is probably the simplest page, meant to display practical
advice for tackling environmental issues. It has a header, a placeholder solutions
mind map that I also created in Illustrator and exported as a png, links to the
other pages along the top and a search bar.

The Search page allows users to search inside the site. I created a placeholder
search bar image in Illustrator, placed a header on this page, links to the other
pages and a paragraph underneath the search bar inviting users to 'Search the
Site'.

This Article pages is where the links on the knowledge page navigate to. I added
a header to this page, links, a body of text for the article and an image.

This code is the 'homepage.css' page. The site's homepage background image has
been placed within the 'html, body' tag and set to '100%' in size. This means it
will take up all of the screen, no matter how far the browser window is stretched.

On every page of the website, I decided to add a functional search bar in the top
left hand corner, to make it feel more like a real website. To do so, I added this
code to the html for each page, which created a search bar in the same position
on each one.

This is the search bar that was created by the code above.



This is a screenshot of me working on the placeholder sign up/ sign in box that I
then exported and placed on the 'Social' page. In its initial stages the box was
green, which I changed in favour of a bright blue, which was more eye catching,
and text was misaligned, so I went back and ensured everything was either
aligned left or centred.





I created this next button for the Knowledge page to direct users to the articles
displayed there. I designed it in Illustrator and turned it into a link by nesting the
image inside a href element, and linking it to the Article Page.

I grouped nearly all of the different elements on to my pages into separate divs.
Divs are boxes that surround content in html, and can be manipulated (given
characteristics and properties) in the corresponding CSS document. All of my
web pages, apart from the homepage, were linked to the same CSS document-
Main.css allowing me to format all of the divs within the same document. This
screenshot shows part of the html for the homepage. I have surrounded the
image with a div class. The name of the div class is used in the CSS document to
format the content inside the div class. Below, the screenshot is showing the CSS
code that is formatting the html image.

The position attribute states that the content inside the div, which is in this case
an image, can be layered on top of other divs. The z-index determines how high
on the stack of divs this div and the image within it will sit. Since I wanted to
layer the logo text div on top of this image div, I made the z-index for this div 40,
and made the z-index for the text div 50. Higher numbers mean the div is stacked
higher, so the text div sat on top of the image div on the homepage. The width
and height values dictate the size of the div, and therefore how large the image
can be stretched within the div, and the values left and top set it 183 pixels left
of the edge of its element and 108 pixels above the top of its element, aligning it
top left.

Planet Wiki: Test Results

I asked Dan and Alex to test my website, giving them separate scenarios to
navigate through the website and ensure everything was functional.

I asked Dan to navigate to the Article page. In order to do this, he clicked the
Knowledge link on the homepage, navigated to the Article Directory, and from
there, clicked on the title of one of the articles displayed there. All the links
worked well, and he commented that the navigation felt intuitive. However, he
did say that it felt odd that the pictures on the Article Directory werent also
clickable as the well as the links, as clicking images is an intuitive action for most
web users. Therefore, I used the code below to turn the images into links.


This code above used to make the images on the 'Knowledge' page into links, by
wrapping them in the 'a href' tags.

Dan also said that creating hover borders around my images would make the
clicking process more visually appealing, but I quickly discovered that creating
hover borders was a fairly complex and time consuming process, as I would have
had to define the borders around the divs my pictures were in before adding the
code in CSS. I didnt have time to make these changes, which was unfortunate,
but something I could plan time to do for future websites.

I gave Dan a new scenario, asking him to navigate to the Solutions page. This was
a much quicker process as it only involved clicking the Solutions link of the
homepage. The link worked, but Dan commented that the Solutions page could
be improved by adding links from each bubble of the mind map to different
pages. I hadnt planned any more pages in my sitemap, but if my site were to go
live, I would have added more pages and links to make it a fully functional site.

I asked Alex to create an account on the site. He clicked the Social link on the
homepage and navigated to the social page, where he found my placeholder sign
up/ sign in box. While he liked how to easy it was to find what you wanted on the
site, he said that it would be nice if you could actually type your details into the
sign in/up box. In order to improve this feature, I looked for some JavaScript
code to create fill in boxes that I could layer on top of the static boxes. I used this
code to create boxes where the user could flll in their name, email, and password.

This code created the three boxes under the tag form. I enclosed these three
form boxes in a div so I could manipulate their positions and their sizes, but I
found that trying to increase the sizes of these JavaScript boxes in CSS didnt
work, possibly because you would have to use JavaScript to format JavaScript
elements, rather than CSS.

One positive aspect of these Javascript boxes was that when I tested them, I
found that the password box, because I had specified it as a password box using
the input type=password code, turned the text typed into it into stars, as shown
in the screenshot below.



Overall, my testers found the website functional, yet somewhat visually lacking. I
corrected most of the issues they raised, but some issues I didnt have enough
time to tackle. In the future, I will have to plan my website using the knowledge I
have gained to allow me to add border highlights and avoid timing issues.