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

Browser Test Report

chrome

 

Google Chrome on Windows

 

Page 1 Homepage

homepage chrome

Page 2 Beautiful Places

beaitifulplaces Chrome

 

Page 3 Internet

internet chrome

 

Page 4 Productivity

productivity chrome

 

Page 5 Photo and Video

photo chrome

 

firefox

 

 

Page 1 Homepage

homepage MF

 

Page 2 Beautiful Places

beautiful places MF

 

Page 3 Internet

internet MF

 

 

Page 4 Productivity

productivity mf

 

Page 5 Photo and Video

photo mf

 

 

Differences: Upon loading for the first time, Firefox loaded substantially quicker than Chrome. There are apparent difference is viewing the same page on different browsers. 

Firstly, the search bar button changes from ‘Submit’ in Google Chrome, to ‘Submit Query’ in Firefox. This is because I did not change the button from its default settings which differ from browser to browser. 

The second thing I noticed is that my hover states in Firefox do not all work, whereas in Chrome they do. I am unsure of why this is and I have gone through my CSS and added the !important tag to my hover states but it still does not work. I am unsure of what is over them even after inspecting elements so I feel as if this is a problem I cannot fix. 

In Firefox, the underlining bars for my anchor tags are about half the size that they are in Chrome, I would assume this is a browser defined rule and I don’t think I need to change it.

The in-line height seems to be different also, this can be seen in my homepage paragraph under ‘Welcome Reader’, the line-height seems to be larger in Firefox than in Chrome.  

For some reason, I have to resize my browsers to get them looking right, this is rather annoying and I am assuming I have not set up the body correctly. If I’m honest I am not sure how to fix this so I will just have to leave it. 

I also have an issue with large empty spaces at the end of my webpages, this is because of positioning and I cannot fix this, this error persists between both browsers.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Concept Statement, Assignment 2

largelogo

The Client

‘Top List’ is a feature list-based website, bringing readers informative lists in an ‘at-a-glance’ way.

‘Top List’ wanted to define themselves as an viable alternative to its messier counterparts Buzzfeed.com and other list based websites. The client wanted a simple yet sophisticated website design that would appeal to its target audience in both look and usability/functionality. The client has asked that the information be given to the viewer in bite-size portions and that the focus should lay in eye catching images and that the overall design of the website should not take away from the images portrayed on the website.

The client has also asked that their website is based off of their logo.
For this to work, the website must be heavy handed with thick borders and contrasted fonts with heavily sectioned portions of information so that the reader can differentiate between what sections they are looking at.

The Target Audience

The website is targeted at people whom use sites such as Buzzfeed and Facebook. The hope for Top List is that it would become a known source of list-based topics on social networking. Therefore, the target audience is widely anyone who uses Facebook – narrower, 14 to 34 years of age, particularly women. This target audience does not bring about any usability limitations as it is so broad. The website will be basic, and usability will depend on appeal generated by style and content.

Site Branding

The site has been branded in a very specific way. The sites layout is more straightforward and less cluttered than other list-based websites to maximise usability and appeal. The website is styled with only two fonts, a light san serif font and a heavier cursive, serif counterpart to balance each other out. The fonts are often backed by a thick black banner shape, this is repeated through the whole website to create a sense of unity between the webpages, but to also add to the ‘contrasted’ appeal of the website. The website uses thick ‘weighted’ borders throughout its entirety as another form of tying together the websites overall design. The website is also made of an ‘off-white’/beige colour, contrasted with a much darker counterpart ‘almost’ black. This is very different to the standard bring, almost-neon ‘interest generating’ colours normally associated with list based websites. The clients website has kept away from such colours as an attempt to stand out as well as appear to appeal to a more ‘sophisticated’ audience.

Words :410

APA Referencing

Images

Brenn, M. (n.d.). Budapest. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/aigle_dore/8130461936/in/photolist-djcFWu-djcHTx-djcHNi-dosD44-djcHQP-djcJcZ-dosAV4-dosJH5-dosK5d-djcG1A-dosDTt-dosBEx-dosE4H-3QsUBG-dosBmM-djcJ3i-dosMvh-dosKFo-dosBzM-dosJLA-djcJ76-dosDeD-idiMi7-dosMMo-xaKhe-5WsZWS-8fqtSy-ne

Brenn, M. (2011, March 10). Rome. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/aigle_dore/5481288261/in/photolist-8Yx1PF-8sPThK-9mn332-5eRhwN-e7M5Qx-7cSb1j-5eLRAK-9DE7Sn-5eRdQA-ee4Pqm-dX3pfa-gxKEJV-edY8X6-5eRhi9-5eRid5-dFK7Vx-bZ2vcS-8KsL9i-kFTMex-861rbE-8YVbRy-gPVeu1-9mq7C3-amq7nN-fBUc8V-gxGmX9-euuZX-6Z

Bruneke, M. (2014, January 21). mystery man. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/93852381@N08/12066570465/in/photolist-uU4BA-e2psYa-bSjsAi-5mseya-6Y7nup-johk1n-bsVy1g-2wf3x5-7at1vt-3ftCoJ-61kJEg-6wsao-k4UCmP-g4d3hC-4tiBJ8-fp63wn-6U3Myp-diPXPQ-61kJDv-95XVLe-gPcEH-n5nx4H-coadFo-j4rWHb-6tsDhH-dARB6Y-6eU5Uy-5

Efx, V. (2008, November 19). Furby.Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/vox_efx/3043682336

Photography. (2014, June 4). Trading stocks on a computer. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/101332430@N03/9681097378/in/photolist-fKu9Y3-6fmpu1-4iNNn5-LmwLk-5uTdu3-8GyC7d-6Hir3z-4pXePq-atujdm-y3jK-5myRok-aD3qS5-5CvT2b-6KShDQ-89NEv7-eeVhCf-dRc9NR-bBgSvi-5XEL3A-9ZA2Jx-9czfc7-9iPxQL-7M6Jvx-xKQMn-729b4-jNznTt-c19Fuo-29d

Pal, A. (2013, August 29). iPhone Photography. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/ashtonpal/9624479689

Pavlosky, O. (n.d.). Home. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/olenkaolja/1156694752

Revilla, R. (2009, November 10). Teenage Mutant Baby Turtle. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/rafastarix/4094202426/in/photolist-7eMRK1-dsWMwB-6vw4uC-99nr9S-fkcA9e-nhrwzd-ntDt2T-ftzmhy-agfszm-6Ap7Dd-f7V6W-mutdJj-nyWQPu-dsWYch-daRjsV-dsrNx2-6f5m4C-dQUAsj-8nQC6D-edF4dA-nyWPNS-66wjN3-59NHJd-cDuZLs-aPkVqT-ddN3ir-e6MULj-e6

Schmidt, M. (2014, January 10). ‘Dita’ Gown . Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/51579195@N02/8539902776/in/photolist-e1Dez3-5y22Eq-jZebkb-95hFtg-7KczMG-j6phyC-aiJwLB-fzcYbq-bn4dCe-95k9Ry-dWAB8j-dHaFzA-edSjhL-edSjro-iRa9NY-8eTTwq-7UmvrX-edSjd1-edSjdY-85Asza-dhEnFg-jZ8RGP-95kLmd-edSjeQ-edSjbE-j6hdhV-LDdyo-

Unknown, A. (n.d.). Working. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/v-neck/5712https://www.flickr.com/photos/a1ex/3316800986010773

Unknown, A. (2012, February 19). Hiroshima City. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/freedomiiphotography/6203111667/in/photolist-as9yZa-dQmXH4-drS9D-9NcPYb-b7TCV2-hFAK3t-h8FX3R-jxHGNz-bWaTyN-rKbAM-c6o7ad-4aBY2-hoUzcc-6fjzqc-bv32cX-dLqpUe-dyD2F2-vZufX-a2gsdU-fmQazK-7W6HUJ-fGwBwm-aiPHZs-dRHg3L-8m6HNR-jzkXhs-e5

Unknown, M. (n.d.). Facebook. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/melenita/9386166498

 

Websites

Draw a Stickman: Episode 2. (n.d.). Draw a Stickman. Retrieved May 19, 2014, from http://www.drawastickman.com

Pewdiepie. (n.d.). Happy Wheels.YouTube. Retrieved May 19, 2014, from http://www.youtube.com/embed/tNwFexjnbyM

RoosterTeeth. (n.d.). Rage Quit Happy Wheels. YouTube. Retrieved May 19, 2014, from http://www.youtube.com/embed/GsSya4K95jk

Smoosh. (n.d.). Smoosh Plays Happy Wheels. YouTube. Retrieved May 19, 2014, from http://www.youtube.com/embed/4H_oB3VArBg

TAKE ME. (n.d.). The Useless Web. Retrieved May 19, 2014, from http://www.theuselessweb.com

Totaljerkface.com – Home Of Happy Wheels – Happy Wheels. (n.d.).Totaljerkface.com – Home Of Happy Wheels – Happy Wheels. Retrieved May 19, 2014, from http://www.totaljerkface.com/happy_wheels.tjf

Work in Progress, Week 6

I spent all of yesterday coding and working on 3D only to attempt to drive home and crash my car. It was a good day all round! But I’m still breathing (and smiling) so the show must go on.

45ob5YVexcept my car.

Right now I’m backing up all 13.9 gigs of my university work, so I’ve got a little bit of time to talk about how I’m finding the assignment so far:

I feel like not a lot of emphasis was put on the actual layout of the websites we are making. In essence the layouts are the most important part of our webpage and the point of creating a nice, yet functional layout was sort of breezed over. I understand that we all should have taken Visual Communications to get into Web Media but I feel layouts are something you never really get right and if we are building a house on unstable foundations then we probably shouldn’t be building the house at all. I guess I’m making a point of this because I really enjoy the Photoshop side of this degree and feel as if not everyone does due to a lack of understanding of the programme. Yes, we took Visual Communications, no it didn’t teach us anything (may I point out the first lesson titled ‘Introduction to Photoshop’ in Visual Communications was a 2 hour long PowerPoint presentation followed by an hour of showing the class how to open Photoshop in Windows and Mac, then close without saving).

I understand it wouldn’t make much sense for a ‘Web Media’ class to teach Photoshopping, however I do feel as if a lot of students ran into snags from the get-go with their layouts which could have been a tad bit better if they knew a bit more about Photoshop. Anyone can code, (not a l of people can code correctly [me]), but not everyone can create a visually pleasing identity for a website.

686643

On the upside, I’ve never had more fun failing at something before in my life. This has to be the most rewarding paper I think I have ever encountered. Regardless of the marks, there is something like a quite victory every time you refresh and that one div is exactly where you want it to be – the time spent is a small price to pay.

 

Okay, now to the actual assignment: Hows it going? Good. Okay. Average. I’m currently working on my third webpage which seems to be coming along nicely. I’m hearing of some people just starting their HTML now .. and I’m like

FXMAte4

 

I just finished embedding my Youtube videos, if anyone is stuck on this check out this link: http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480061
The only issue is you might need to add HTTP: before the website in the source (SRC) section. When you copy the embed link from Youtube it doesn’t give you the full http://—– link, just make sure you’ve got that bit or it wont work ^^

So yeah, this is what it looks like (I’ve had a lot of people ask for help with this so I thought I would post my HTML, just don’t copy it exctly ^^)

YOUTUBEMEBED

 

youtube

 

Yeah, so it’s 10:13pm and my mouse has stopped working – which is great.
Alt Tab all day.

 

Thursday 12th June, 27 hours till hand in

I made some thermonuclear garlic bread for lunch. Thats how you know this is getting real, crap food. Anyway, I made a bit of progress last night but I’m still not finished. I left the two most similar pages till last so I can make one and then change all of the links and such for the second one so it shouldn’t take me days. I still need to do my write ups but that is okay, I’ll leave them and my browser test reports till tomorrow. Unfortunately I’m starting a little bit later today because I had to sort out my car this morning from my assignment-stress accident (thats right university, I blame you) haha! But hopefully I can get it finished today. The hardest part about this assignment so far has been how slow my computer is when adjusting photoshop documents, but its still better than the crash-city-computers on level 5 (PNGs watch out).

11:55pm

I went on a little coding tangent and didn’t actually post anything about my progress, but I can now say it is all over (coding at least). I think I’ll do my Browser Test Reports tonight and then go to bed. I have an issue where I changed something from my mock ups to my final output (I changed by header image) and I am worried that it is too different – I may need to re-address my layouts, or perhaps just leave it to show that there was a creative process while coding and I was always thinking about my layout and how I could make it better.

So, this is where it ends – this is my final work in progress report as there is no more work to progress on. Till semester 2, goodbye WordPress.

 

Work in Progress Report, Week 5

Friday, 30th May

I love Fridays! Means I can begin a new post and leave my last messy one behind.
So I started coding and I have run into a few snags. I ended up cleaning up my obviously messy HTML so that my CSS wouldn’t be as cray but it seems now that my fonts aren’t working and my images wont load which makes me think perhaps I’m not references the files correctly, bugger. I’ve decided to spend the day at home because I’m a little under the weather so I’m drinking tea and coding.. I really couldn’t think of a better way to spend my afternoon (sorry I’m babbling, I am waiting for the Dreamweaver trial to install but it doesn’t seem to be working).

 

55831-WHY-MUST-LIFE-BE-SO-HARD-Homer-3HZt

 

I have to admit, I really don’t understand why my images and fonts are not loading, they’re referenced correctly as far as online tutorials seem to show me and I’ve swapped to Dreamweaver to make sure I am using the correct rules and I’ve even looked over my last assignment trying to figure this out. I can’t go any further because nothing will be the right size.. I guess I can try to code around the issue and just wait for an answer, but I feel like I’m just sitting here staring at this page thinking “why the heck are you not working?”

Another issue, I’ve never wanted to go out and purchase another screen so badly as I do right now. So hard to code on one screen -.-

8hourslaterplanktonsregular

 

Okay, the fonts still aren’t working and neither are the images. I don’t know what I’m forgetting but I’m going to punch someone when I realise. For the time being (until I can cry to Matt), I’ll just bump things around.

Capture

 

dog

 

 

After having a chat to Matt, I decided I am completely stupid. I’ll tell you all what I did so you don’t make the same mistake. I didn’t path my images like they were coming from the CSS, but from the HTML.. All I needed to add was the ‘../’ before images.

Well shit

tumblr_mu1veu6CuY1s6vke6o5_500

 

We back now though ^ ^
Lets open up this code.

lets-open-this-pit

So, it’s 6:50pm, I think I’ve been bumping shit around since about 1pm.. and this is how it is looking. ^ ^

Capture2

As you can see, I changed the dotted border because Photoshop was clipping the image. I was told this was to do with not using the correct version of Photoshop (32 as opposed to 64) – but I am using 64, and the issue has persisted though both my personal laptop and the university computers so I just gave up and just took it out. Looks better and means I can play around with the menu on the homepage however the menu bar will go back to its normal positioning on the other pages.

11:05pm,
4th June, 2014

Feels like an episode of 24, except why am I still awake? I think my homepage is done, but I still need to make a few changes to it… Like I think my header needs a background.. & my footer actually needs to say something (I guess)
Wtf do you normally write on a footer?

1

 

2

 

3

 

giphy

 

Thursday, 5th June

On a side note, “Matt, I am sorry.. I did the thing again when I made 1 mistake and I coded my whole page around it” .. I’ve spent the morning fixing my massive screw up last night. I think I pushed myself too far.. I was waaaaaayy to tired to code but yeah ^ ^
But I fixed it.. I had to change all my positioning from absolute to relative (again) and well I don’t wana brag but it totally worked.

Swag-Gif-17

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