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

 

 

 

 

Work in Progress Week 1, Layout and Such.

22/07/2014

Back to the daily grind.
Day one.
Week one.

I’ll start off this work in progress report with an idea of simplicity. After looking at some of the previous students works Matt showed us in class I decided the ones I didn’t like we’re too stylised, or too cluttered and so on. The way I want to present my gallery is simple and contrasted.

I imagine this post will be a little bit of word vomit as I haven’t actually done any research yet so I am basically throwing down some ideas just so I don’t actually forget them.

Ordered Chaos Begins: 

I thought a good place to start would be with the brief once I had my idea, or some form of idea. I guess I should probably explain my idea too. My idea is to have a very plain website, white on white. I want to make a gallery of well presented food, like professionally photographed food photographed from a birds eye view on a white plate, on a white background, with a white website background. I don’t want the edges of the gallery to be visible, I guess I want the size of the gallery to be a mystery. I guess it all sounds a little plain, but I think with a good font it could look really classy and clean.

I’ll have a few examples of what I want to make in my research, I also imagine I might actually change my mind, but for the time being this is it.

I must also add, I don’t plan to submit a picture and some text, there will be more to it.. I’m just going for a very clean and very simple appeal with a nice contrasted font.. Not quite black on white but something similar. It’s sort of hard to verbalise what I am going for but I really just wanted to get pen to paper before I filled my head up with ideas.

I have also created my first wireframe layout and thought a little bit about how I want my gallery to behave.

20140722-210336-75816078.jpg

I want my smaller images frost over when us selected, but when you scroll over them they’re I’m full colour. An issue I feel is that white in white with frosted images may not actually work.. It’s something I am planning to look at in my mock ups. For now it’s just a collection of thoughts that need further research. But hey, an ideas an idea.

 

If white on white is going to look a little, basic.. then I guess I could just get some really nice classy and clean pictures to put in my gallery and work from there. I think I have a good idea of how I want it to look but I imagine this will change after my research.

I think for today I will look at some fonts I like and perhaps some images, and wire frame layouts. That should keep me busy 🙂

 

Wire frame Layouts:

This is in relation to my first research post, these are the wire frames I created after looking at other galleries. I have finalised an idea but I am still open to suggestion and changes may still happen. It is hard to describe my train of thought as I sort of just sat on Photoshop for an hour getting a layout I liked. This is the step by step progression, starting with three-four main ideas all smashed together.

Layout One:

wf_01

Layout Two:

wf_02

 

Layout Three:

wf_03

 

Layout One Refinements/Final Idea:

Work in Progress

wf_05

wf_07

 

For the purpose of showing you where this is going, I’ve made this to further visually describe where I am going with this assignment:

 

wireframewithimagesAll images credited to: http://www.eviabeler.com/food-photography/
Something I will also say is that the colors look WAY different on wordpress.. They look a lot better on Photoshop.
I think this is just my computer.

I’m going to probably start looking for my images and think a little more about where the logo is. Something that isn’t really working is the size. I need to do something to make the main image stand out a little more. Now I’m just playing around and uploading pictures of layout ideas

 

wireframewithimages_02

 

Personally, I think I need to do a little more research first and then tackle this. For now, this is still just organised chaos.