Project Two: Reflection

I think at the beginning of this project I was on a roll with the designing and coding of my website. I wanted to spend all my time working on it but now I am just over it. I find it hard coming up with ideas and then not actually being able to code it because it involves stuff we learn more next year. I am glad I still managed to create myself abit of an image gallery even though its not at all like what I originally came up with in my mind. I am happy with how the overall website looks. I think it is very user friendly and easy on the eyes which I think is really important. Things I would do differently is probably have a drop down menu at the top so you know what each menu contains and carry my icons on the homepage on through to other pages. I think if I was to do this again I would take a more sketch/ hand drawn kinda approach to it, just to create abit more of a connection to the fact it is a handbook for art, design and media students. I would have also liked to have had an animation of a moving truck going across the different pages, that you could click on and would link you to a page that tells you what to do if you are moving house, Just to be abit funny.

Project Two: Testing in other browsers

I have tested my website in Safari, Google Chrome and Firefox and it mostly works how its suppose too.

My main problem has been that Safari doesn't load the hexagon shapes on the home page but the other two browsers do, unless Google Chrome isn't running its latest version. My image gallery did work in all the browsers but has now decided not too as mentioned in a previous post. It works sometimes and not others.

Apart from those two things everything works perfectly. I have noticed that when I run the website on a desktop computer elements on the page like the bottom 'hexagon bar' and 'main headings' aren't aligned on the page where they should be but when you open it on a laptop they are all in the correct place. This only happens sometimes too and only on some of the pages.

Firefox has proven to be the most reliable browser for running my website.

Project Two: Final Touches

Over the last week I finished the last of my web pages and spent today checking all my links and making sure everything was consistent throughout the pages. I managed to apply a white page border to each of the pages which was cool since that was part of my original design. I ended up using the following code to achieve this.

#contanier

{

margin: 0 auto;

background-size:contain;

border:20px solid white; 

height:100%;

background-color:#EAEAEA; /*grey*/

font-family:'Roboto', sans-serif;

font-weight:300; /* roboto light */

}

The code highlighted in red in specific to the border. When you zoom in and out on any size screen the border remains the same.

Here is a screen shot of how it looks on a laptop screen. 

I also added in an extra table under the calendar heading of key dates I thought were important to have as a 'quick view' without having to download the wall planner I provided.

 

I was having problems with my sitemap page it was opening up differently depending on the size of the screen I was using. I realised that I needed to add a div specifically for the text that sat inside the 'main content' div. This worked and solved my problem. I also ended up just making the div margin: 0 auto; to make it inline with the heading. This has meant that some of the options go onto another line like shown above. I don''t think that matters though. It is quite normal for it to look like that on sitemaps.

Project Two: Image gallery revised

Today I re did my image gallery using some Java script. My original gallery wasn't able to be used in Google Chrome. I have now completed my image gallery. I had to use some code "javaScript=:void(0)" to stop the page linking to the top every time I clicked on a thumbnail. Everything was working perfectly in both Google Chrome and Firefox while at WITT today but when I came home and opened it on my laptop the images would no longer load with the "onClick" function but would if I changed it to "onmouseover". It makes no sense why this is happening. I have made sure that I am using the latest versions of each of the browsers. I am going to check tomorrow at WITT to see if it still works on the computers there using the "onClick" otherwise I will just change it to "onmouseover". Frustrating!!!!

Project Two: Student gallery page

I have finished making my image gallery. The way it works it that when you click on one of the thumbnails it will show that image in the 'main' container. I have just selected a few images from the courses available and given the students name who created the work, what level of study and what paper it was for. I would imagine this image gallery to be updated each term or semester with relevant work relating to the papers on offer during that semester.

The only problem I have noticed with the image gallery so far is that it doesn't work in Google Chrome but it does in Safari and Firefox. This is annoying because in Safari all the hexagons on the homepage don't appear in Safari but they do in Google Chrome and Firefox. So I think at the moment Firefox is the only browser where my whole website runs correctly. I have checked all the browsers to see that I am running the most updated version as this had been the problem previously but I am running the latest version of them all. Hopefully it just requires me adding a piece of extra code.