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.

Font Selection Research Post

What I want to talk about in this research post is what I am looking for in a font. I want to collect a few different fonts and perhaps load them all in and see how they look on the webpage and go from there. Originally, what I was after was a serif ‘book style’ font to mimic the idea of a cook book. I’ve had a trudge through Dafont.com and FontSquirrel.com and the following are a few of the fonts that appealed to me.

Florence 
http://www.dafont.com/florence2.font

florence

What I particularly like about this font is that it is like a standard cook book, almost text book font, but it is italic. The letters seem to have awkward spacings and I find myself looking at this font a lot feeling as if it could be so much better. I am unsure of whether or not I will actually use this font. It was the first one I found that I really liked but the more I look at it, the more that awkward spacing stands out. It is something that I can fix, but not really something I want to fix. I also feel as if this font is very stretched out which is unappealing.

Ahellya
http://www.dafont.com/ahellya.font

Ahellya

I must admit I do like Ahellya also. I find the thickness of the font a little off, but something just seems to work about it. The spacing of the font letter to letter is quite good in the italic font but not so much in the regular (although I do believe this may just be my eyes playing tricks on me because of the change in thickness around the curvature of the font). I’m not a huge fan of the normal font, however the italic font is very nice and I feel as if the change in thickness could really help the font stand out against a picture (if it was white). The idea that I may use this font in ‘almost black’ makes me a little weary of this altering thickness as the darker I go, the more this will stand out.

Night Still Comes
http://www.dafont.com/night-still-comes.font

NightStillComes

Yes yes yes. I love this font! And I love how many variations it comes in. It is not often you find a font that allows you to bold it and italic it, but bold-italic!? Ahh. Superb. The spacing between the letters of this font is perfect in normal, italic and bold. This font just works. It will probably be the font I go with in the end.

Timeless
http://www.dafont.com/timeless.font

timeless

I feel a little bit of a struggle coming on to talk about the last two fonts seeming as the previous font was so good, but I will. This font is nice in its spacing letter to letter (however it could be like 2px smaller). However the bold is just wrong, so so wrong. It’s far to thick for a serif font.

Fine Style
http://www.dafont.com/fine-style.font

finestyle

I am a little bit torn. I really love the height of this font, it looks outstanding, however there are no variations of this font, and I have multiple lines of text to write. Something that could work is using this font as a title font and using Night Still Comes as a sort of ‘accent’ font that would only be used for the lines below the title. This is something I will address in my Work in Progress Report.

Where to from here? Time to see how they look on the page! Like my mum always said, everything looks like crap on the hanger, you’ve got’a try it on!

 

FlorenceFlorence

 

 

AhellyaAhellya

 

Night_Still_ComesNight Still Comes

 

 

TimelessTimeless

 

Fine_StyleFine Style

 

It annoys me how right she was, Fine Style was probably my least favourite (next to timeless) but looking at it on the caption it really looks great! Florence was probably my second favourite but looking at it on the image, it looks horrible! Especially the caption. I’m thinking perhaps Night Still Comes, with a Fine Style caption, or even a caption that isn’t italic. I think I might have a combination of fonts but I definitely think Night Still Comes will be my title font.

layout-main-image_01It just looks so dang good. 🙂

 

Work in Progress, Week 6. How Do You Eat an Elephant?

Apparently the answer is: one bite at a time.

tumblr_m0kszc3EmL1qc2qcs

 

 

So, I’m still sick, hella sick.

I-M-SICK-adventure-time-with-finn-and-jake-34959556-300-200
But, I’ve managed to produce, something?

HTML:

sugar

HTML

CSS:
spice

CSS

and that created:
everything nice

gallery

But then, the fire nation attacked. (too many cartoon quotes!)

chemical

js

So far, I’ve managed to get my Js working without many hiccups, apart from that one that I don’t really want to talk about BUT THATS FINE! THATS IN THE PAST NOW. I’m going to make a few changes to the play menu because it looks like poop but watch this space.

15_minutes_later

And it’s all done 🙂

Screen Shot 2014-08-29 at 9.43.23 pm

 

This is just my Js gallery, so far the thumbnails have a :hover which causes them to drop opacity making it seem as if they;re highlighting. The buttons now all have cursors (pointers) that make it more obvious when you’re hovering over something with clickable traits.

QOTQ_LSP_290

After all this, I started work on my jQuery. I basically just took what I already had in my Js gallery and made it animate better for more fluid transitions. .fadeIn(); and fadeOut(); worked a treat with clear interval set FIRST instead of LAST … Thanks Matt.
I don’t really have a lot of jQuery, and I though my work looked a little, messy. So I decided that I could compact my code by adding for loops. Well I guess I didn’t really decide.. Matt looked at my code and just said outloud what I didn’t want him to say, which was “your code is messy, use a loop”

original-31

 

“Use a loop” he said, “difference between an A and an A+” he said, “it will be fun”, he said.
He didn’t say that last bit, because it totally wasn’t fun.
not for one second.

I eventually* realised how the heck these things worked, and after some solid tantrums and closing Dreamweaver in a huff, I got going.

*3 hours and 30 minutes later

I guess it paid off, I crushed something like 60 lines of code (js and jQuery) into less than 10.
I’m trying to be mysterious because I totally nailed it and I feel like it’s a triumph and I’m not sharing ^_^
But if you ask me nicely I might.

So, I just have one more thing to address before hand-in: how the hell do you fail gracefully?

tumblr_mbyz7sOHj21roexp8o1_500

Screen Shot 2014-08-29 at 10.48.12 pm

 

I guess it’s sort of graceful?
Were we supposed to write something like <p>Yo’ Homie, You dun gone disabling yo’ Js meng. Reenable dat shit, fo’real.</p>
Cause, I didn’t. But I have the overwhelming urge to Ps a picture of Matt with a tag that says something along those lines spelt out in cat gifs.. If only I had the time, and if that didn’t sound totally creepy.

Anyway, this is it styled and finished ^^ (yes my USB is called GOLDMEMBER)

Screen Shot 2014-08-31 at 7.14.47 pm

MOVING ON!
I think I’m basically done..

Time to validate my code!
http://jigsaw.w3.org/css-validator/

Screen Shot 2014-08-31 at 7.32.59 pm

Um, I can’t actually find an HTML or JS validator.
If anyone finds one before hand it can you please link it to me in the comment section!
Thanks.

 

When all your code works:

 

 

Sadly, with me finishing this assignment and reaching my week 6 work in progress, that means that there will be no more progress on this piece. So I guess this is my last post for the Js and jQuery galleries. It’s been … .. . I don’t think fun is the right word. I guess, challenging. I mean I really do understand HTML and CSS, but JS … What sort of drank was that person on when they wrote that? I think it would take a lot of practice to understand and I’m not sure I’ll ever reach a stage where I can code JS thoughtlessly.. Its very, very difficult for a beginner, and thats what I had to keep reminding myself of – I’m new here, I’m just starting out and this is all learning. We can’t be expected to know what we’re expected to learn until we learn it. Luckily for us we are graced with some amazing tools for learning and some brilliant minds who take time to sit down and help us take a deep breath before we touch the keys.

So adieu, farewell.
and good riddance
(not really, it has been fun)
🙂

– H T F M L 

Work in Progress, Week 5.

I’m sick, really sick. Like 28 days later, probably patient zero sick.

Not a lot to add this week, I feel like I’ve been running around in circles trying to get stuff to work, but it just wont. I really don’t know what I’m doing here. I’ve spent the week going through the PowerPoints and reading up on Js online, as well as talking to a few people who know a bit about it and I still feel none the wiser.

All I know is I burnt my vegetables writing this post, and that makes me almost as upset as Js does.

So yeah, I’ve started my Js, and finished my research posts this week.
Not a lot to say really.

Work in Progress Week 4, dlrow olleH

Day 22: They still haven’t realised I have no idea what I’m doing.

CaptureThanks guys, you make my life better than spaghetti.

However, I must be brief. Our ISP thinks its a good idea to disconnect our internet regularly, and when I say regularly, I mean 4-5 times an hour. Not a lot of progress this week. Polished off my HTML and renamed a whole bunch of files so they were easier to get me head around when it got down to Js. Finished my CSS as well.. Now I just need to conquer this beast of Js.

Beast

The proof is in the progress!

Screen Shot 2014-08-25 at 8.23.31 pm

Screen Shot 2014-08-25 at 8.23.44 pm

 

I get I’m being a little brief with these posts but as a lot of you will know there are SO MANY ASSIGNMENTS going on right now.

GLHF 🙂

Work in Progress Week 3, I’m a div-a-naire.

How it really feels to do JavaScript:

damn_almost_nailed_it_part_4_04

I actually started working on my CSS and HTML last week, but I thought I would leave it till this weeks Work in Progress report.

I’ve saved out all of my images for the web and downloaded all of my font-face kits and implemented them in the CSS, they seem to be working fine this time, (probably only because I actually don’t have to navigate them out of a stylesheet folder).

I’ve written all of my HTML and its also fine, didn’t really have any issue writing it. Just sat down with a cup of tea and wrote it out in about 40min.

coding

 So many divs,

I’m div-a-rich
I’m a div-a-naire

10002876

Not having internet at home is meaning I am falling behind a little with my research which scares me, but I should be fine. I’m coming into University every day so that I can get enough done to feel okay about sitting at home doing nothing. I don’t even div-a-shit.

Word.

So, here is my CSS as well.. Nothing flash, just loaded in my fonts.

coding2

I don’t even think I’ll use them all.. But I am undecided of which one I want to use so my plan is to ask people what they think. Would probably be just as easy to do in Photoshop but I figured once I make a decision I just have to delete the other two to three fonts.

And here is my JavaScript

js

Nailed-it-o

 

Work in Progress Week 2, Introduction to Js.

After the introduction to JavaScript I feel …okay.

giphy
I feel like my background in game design and coding (more of a hobby if I am honest) is really helping.
Seeming as I am self taught, it is cool to see exactly what I know but in technical terms, and seeing how it all relates to web. The thing that really gets me here is how striking the similarities are. Are most newer languages just a branch off of JavaScript? With different syntax?

 http://www.pictaculous.com/    A really cool website I saw while browsing someone elses blog was Pictaculous, a website that defines the colors you should use based on an image you want to use on a website. I think my idea here will be to color grade all of my images and then use this website to define my pallet (even though I already have one in mind) .

Lets talk JavaScript! What I have gathered (correct me if I am wrong) is that a variable (var) is a container to hold a value, like a cup… A function()  is defined as something that can be called on at a later time. And an event<> runs a function (typically) after a defined .. thing.

tumblr_mtjjfj9CuU1ryu3g1o1_500

 

What I want to begin with today is looking at my chosen pictures for my gallery and getting them to a state where they all look ‘unified’, so they work together nicely, having similar saturations, hues and levels.

 

Week2Layout

 

These are my chosen images, Photoshoped to look unified as well as looking softer. There is this craze at the moment of photographs with low contrast so I wanted to mimic that. I really like the low contrast and flatness of these photographs, I think it portrays some really nice ideas. It also is an easy way to make all of the images look unified as if they were all taken by the same person, or at the same time. What I worked on from here was my wireframe. I realised that I wanted all of my images to be landscape, however these are portrait. So I had to re-address my wireframe. Basically all I did was flip my wireframe so that the images ended up being portrait.

Week2Layout_02

 

I also added a few circles on the side so that I could play around with where the logo would go, but ended up deleting them as it looked sort of tacky. I sort of just worked for an hour and didn’t really think to much about it. So, here are my steps.

 

 

Week2Layout_03