Browser Test Report

In this post, I’ll be using two browsers, Safari and Chrome to test my JavaScript and jQuery galleries. The point of this is to look for any inconsistencies across two main browsers.

Google Chrome:
v 37.0.2062.94 (up to date as at 29/08/2014 @9:35pm) Screen Shot 2014-08-29 at 9.34.02 pm

 

Safari:
v 7.0.6 (up to date as at 29/08/2014 @9:35pm)

Screen Shot 2014-08-29 at 9.37.25 pm

JavaScript Gallery

Tested in Google Chrome

Screen Shot 2014-08-29 at 9.43.23 pm

 

Tested in Safari

Screen Shot 2014-08-29 at 9.46.37 pm

 

The two are strikingly similar, something I find different is the way that the images are rendered. The images seem a little ‘out of focus’ and they almost seem a different size. I feel like I’ve been staring at the screen for so long and I could be losing my mind. Something just doesn’t seem right with Safari. Chrome renders the images more nicely.
(Side note) I’ve just noticed my divs for the thumbnails have moved slightly I will fix these before submission.

Whether they’re rendered different or exactly the same, I still prefer Chrome. However, if I’m honest, I cannot spot any obvious difference.

jQuery Gallery

Tested in Chrome

Screen Shot 2014-08-29 at 9.58.49 pm

Tested in Safari

Screen Shot 2014-08-29 at 9.57.06 pm

 

The differences are small again. Here there is a slight deviation color/saturation of the main image, and the thumbnails are once again rendered slightly differently. Also, if I line the top of the webpages up, Safari is about 20px lower than Chrome. I am really unsure of why this is but it is.  The fonts render pretty much exactly the same in both galleries. The effects seem to all run exactly the same (if clicked in sync).

Other than these aspects. I can’t see any obvious difference in the JavaScript Gallery or the jQuery gallery.

Advertisements

Week 4 Work in Progress

meandwebmedia

Monday, 26th May:

Web Media is one of those classes that could make you eat a whole pizza. Another solid 9 hours on this website. Here is how it looks: Homepage     Page_1   1024px-S1e2_finn_angry_at_lsp1

This post will probably just be pictures, I’m so done.

Page_2

Page_3

Tuesday, 27th May:

10409528_689927501056015_2798697242815380745_n   Page_4   The computers in level 5 quit unexpectedly about 5-6 times an hour. So I tried to keep my cool but I ended up making this final page about 4 times because the computer hates me. GLEE_ANGRY

 

So I felt my assignment was getting a bit repetitive so I decided to make a different list for the last page out my layouts to show my variety of ‘skills’ at coding.

bdb3e80b09cdb3fd05a069b84fd50397_large

Page_5

I am so flipping ready to consume some food.
What day is it?

Wednesday, 28th May

I bought donuts and started coding today, just the HTML.
Because it is something that we have never really tried before I’m finding it difficult to differentiate between what I should have as a P or a header, as well as what to tag each paragraph (p1, p2, p3…) I think it will become clear when I start the CSS document but I can’t help but think I am doing this the long way. Obviously I could set a few as p1 and define rules that make them all the same size but for the time being I totally cannot think that way. I’m thinking I might actually make a guide line for myself before I get stuck into the HTML because I only wrote the homepage HTML this morning and it’s pretty straight forward.

There is also this little line under most of the example HTML documents that Matt has given us that looks something like this:

<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=9″ />

What is this? Someone please explain.

Also as a side note, I’m using C++ to code as I prefer it and think Dreamweaver is lazy, and you should only be lazy when you actually know what you’re doing. Which I don’t.

Capture

 

Go me! There is still a lot more I need to work on. I think I’m going to be here all day again..
I don’t think I’ve ever put this many hours into one assignment.

Layout Refinements & Junk

Homepage_2

 

^^ Ignore that big space at the bottom, if I crop it Photoshop crashes so I gave up trying.

Thursday, 29th May

what-is-html

 

What week are we in? Am I still writing in the correct WIP report? Who knows. So I think I finished my html… All of the pages seem to be working correctly now I just need to style them. I can’t help but think I am doing this the totally ineffective ‘long’ way. I guess I’ll move on to the CSS now? I’m not really sure if I’m ready but hey, will I ever really be? I guess first I’ll save everything out for web? The obvious move -.-

 

Reaction-GIF-Angry

 

There is no time like CSS time!

heeeere we go

Step 1: Complete your HTML

CaptureStep 2: Have a tea break

200_s (1)Step 3: Actually start the CSS document.
I decided to being by loading in my fonts … it seemed the most logical thing to do.

cssStep 4: Cry

Step 5: Pull yourself together and make sure your HTML references your CSS correctly.. -.- 

css2

Colour Research.

So, I changed a lot of my colours so I feel like I should do a re-post on colour research.

WC

 

(All bookstores seem to have red websites – for this reason I want to use red as minimally as possible). Whicoulls webpage is mostly made up of block colours that are highly saturated but follow their logo colours. Because I don’t have a logo to choose my colours off of I thought I would pick an array of colours that don’t really related, but are not disgusting together. These colours will need to be close in hue, without shading.

BROWN

 

 

 

 

I want my colour pallet to be more fun and visually pleasing than boring white and red, I took a lot of inspiration for my website colour pallet from the template below.

a-book-apart

I have many assets to my proposed website, the only definite one I know I will have to create and use is the shelves. I will go with a set of three browns and later them up to create the illusion of shading to create the shelves. As for the rest of the colours, the colours below were ones that I found reoccurring in library websites, however I have changed the lightness and overall saturation value of them to make them ‘pop’ off of the page. This is my final pallet for my webpage.

COLOURS

Browser Test Report

Browser Specifications:

chrome explorer

Computer Specifications:

windows

Internet Explorer: Fixed Layout

ie_1

 

 

Chrome: Fixed Layout

chrome_1

 

 

 

 

BTR: Chrome vs Internet Explorer, Fixed Layout: No apparent inconsistencies, apart from a small issue with the footer moving in Internet explorer (as below [top chrome, bottom Internet Explorer]). I am unsure of what has caused this however it is the only inconstancy across the whole fixed webpage. Chrome seems to refresh faster than Internet Explorer.

chrome_2

ie_2

 

 

 

Internet Explorer: Fluid Layout

fluid-iePNG

Chrome: Fluid Layout

fluid-chrome

BTR: Chrome vs Internet Explorer, Fixed Layout: No obvious differences in webpage. Pages scroll the same and are saturated similarly (if not identical). Browsers both re-size at a similar speed and break at the same spot. Chrome however seems to refresh the page quicker than Internet Explorer. 

 

Concept Statement

Subject Area:

Hand-in-hand with the beginning of the university year comes, the need for poor, returning students to sell-on their old study books. If not retired to the bookshelf, these artefacts become a rather difficult item to spark interest in other than “lowest price buy now”. While trying to sell my Interpersonal Communications book for the second year in a row, I thought to myself, “maybe AUT should just offer a book store that buys and sells students text books”. This thought lead me to the branding of my webpage, “The Bookshelf”.

In a nutshell, my themes for the exemplar website was based around this idea of a website dedicated to selling on old textbooks. 

Style:

The style of my webpages could be called ‘minimalism’, however I’ve referred to it many times in posts as ‘minimalism, almost’. The colours are mostly block colours and block shapes are boldly defined with no drop-shadows, inner-shading and/or curvature. My colour pallet could be best described as ‘natural’, however used in a very unnatural way, (without shading) simple. My font choice is easily rationalised as “to look like a page from a book”. Within my coding I made the line-height drastic to emphasise the space between the lines of text to make it feel more like a physical page from a book. The choice of font is also serif, as it captures this idea more so than a san-serif font could. My illustrations are composited in such a way that makes it look as if the viewer is looking straight at a bookshelf. The background is textured to look like wallpaper and shelves are placed upon the page to make the background look like a wall. Books are then stacked on these shelves, which provided the framework for the paragraphs to sit underneath nicely. There are also other assets on the wall which make it feel a little more homely such as a 21st key and a fireplace at the bottom to enhance this feeling. 

Work in Progress Report 5.

Coding began today.
Apart from having a little woopsey with coding everything incorrectly and Matt being rather impressed with my ability to make a disaster work so well, today was a good day!

I managed to get my fixed layout working:

Capture

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

I’ll be moving onto my fluid layout tomorrow, for the most part I’ve got it working, but not to a point where I feel like putting it on wordpress. Also, it’s not quite fluid yet (hooray!) So I’ll be polishing it up tomorrow.

Just a little post for now, as more unravels tomorrow, I’ll post.

🙂