Leah Urbank

Class

Critique day is here! I came in pretty confident, but as soon as my webpage went up on the projector, it all jumbled up and changed a lot. I suppose I was used to working on my own screen, where I had it just where I wanted it, but I know now that I can’t depend on that.

The quick fix I need to do to the Hair Color website is change the outermost div so it’s smaller, so the webpage is not as wide. I also need to overall just make the whole damn thing better, because it’s pretty rough right now. I’ll need to change the scaling down system, and maybe start over and try with mobile first on my own time.

Class

I’m wrapping up some of the last touches on my website, and adding various projects from past graphic design classes to the portfolio website.

I realize now that I’ll probably have to redo some of the documentation for paintings and other fine art projects, because I realize that those classes never had me record anything for a portfolio. Photography is easy to put up, as I can just export the images from lightroom (making sure they’re the right size), and put them up.

It took me a while to figure out how to work the wordpress site, and find out what each different page did, but I’m glad I got it all up and running.

Class

I still haven’t gotten my hover function for my color wheel to work correctly. I want to make the color wheel function by the hover function. While I can get the images to hover and to appear, I can’t get them to go the right position or make them not be cut off when I hover over the circle.

I have the overflow as visible, but it still gets cut off at the edge of the div, and I admit I don’t really know what to do about it. The over function works with dot itself, but the image that appears is no good. Perhaps it’s because the image that I want to appear is a background image, and it can’t appear outside of the div that it’s in.

Oh well, I’ll figure it out one way or another.

Class

I have my accordions for my tutorial working, and the class today was a work day, where Colleen came around and checked where we were and how we were doing. I’ve decided to combine the two different swatches together, so you can overlay the hair color and the dye color in one place, rather than flipping back and forth constantly. This has lead me to do some reconstruction on the configuration of the buttons, and I’ve managed to get them where I want them.

It’s quite tricky moving things around to where I want them. There’s a lot of negative margins going on, not gonna lie.

Presentation

I gave my presentation, and it was just a quick run through of my term, talent, and technology. If the reader of the post has still not checked out Snow Fall, I still highly recommend giving it a look through, even if the story doesn’t get read. Although the story is equally good, and educational.

Class

I’ve bought a WordPress theme, and successfully installed it. Although it wasn’t a big seller, the reviews were really good and the creator really seemed to help people and take suggestions for updates. The website is up and working, although it only has dummy posts and portfolios.

I plan on putting all sorts of my artwork on there, despite not all of it being graphic design, because I’m really proud of my other work, and I want to display them. If anyone wants to visit it, you can find it here. The theme is called Pine Cone, and it was on a list of recommended themes, and I though it was really cute.

We also were dismissed early to go and see Fred Dust, which was quite interesting. I really loved when they were talking about giving people the worst kinds of service, and they made a dummy restaurant and treated them like how they treated their patients. It was really quite clever, and I thought it was really gutsy to do something like that to the people that are paying you to do something. He kind of had to cut it short, but it was fun, nonetheless.

Presentation

Class

I’ve finally managed to make the icons in the color wheel automatically arrange into a circle. It’s also the jquery, and it’s annoying that Dreamweaver doesn’t show what they look like in a circle. Instead, if I want to see them, I have to preview it in the browser every single time. I guess that’s alright for seeing if anything else has broken while I’m fiddling with things, but it’s annoying nonetheless.

Class

After some research into the horizontal navigation bars, I have managed to get the navigation anchored throughout the page. When one term is clicked, it automatically goes down to the anchored point, so viewers of the website would not have to scroll through if the did not want to.

It ended up being a pretty simple solution, and I was glad that the code and functionality was not too complicated. I have written it below:

<div id=”nav”>
<ul>
<li><a class=”navbar” href=”#top”>Top</a></li>
<li><a class=”navbar” href=”#how_it_works_section”>How it Works</a></li>
<li><a class=”navbar” href=”#color_section”>Color</a></li>
<li><a class=”navbar” href=”#tutorial_section”>Tutorial</a></li>
<li><a class=”navbar” href=”#maintain_section”>Maintain</a></li>
</ul>
</div>

<a name=”color_section”></a>

I also have plans to animate it, so the jump isn’t so sudden and it just whisks you through the page.

Class

In class, we have begun to truly work on our websites. I’m working in the way that I work best, from top to bottom.

I have the background as a fixed image, so when you scroll, the content moves above the image and doesn’t move. It also scales with the website the best it can, so there’s never any edges that are naked without the background image.

Reading

Chapter 17 is about improving CSS habits.

I kind of wish we had gone over this in class, as it’s better to form good habits ahead of time rather than try to re-educate ourselves out of bad ones.

One thing I’ll try to do from now on is adding CSS comments as I go, that explains what I’m doing, so when I go back to it to try to improve it, I won’t be completely lost.

Naming styles on purpose is also something I will work on doing, so if it breaks and looks different, I’ll still be able to figure out what it was and what I can do to fix it. There’s no point in naming something, if that name doesn’t make any sense.

Classwork

For the website I am building, I have decided to build the entire thing, as I don’t have any animation that’s intense. I don’t really have much animation at all, really.

Reading

Chapter 16 of the reading is touching on something we have not even considered in class, although now that I have touched on it, I can see how important it is. This chapter talks about the version of the website for printing and how you have to create another version of the website for the printer to actually print.

While there are many different stylesheets that can be made through the magic of CSS, the most common are all, screen, and print.

All applies to literally all the different types of devices, so the website you are creating will attempt to format itself the same way, despite it being a projector, a screen, or a printer.

Screen styles display are only for the computer monitors.

Print styles apply when the page is printed, like recipe websites that provide a more printer friendly version of their site.

It’s kinda the same as adding a normal stylesheet, and you can just name it ‘print’ rather than the default ‘stylesheet’.

ex) <link rel=”stylesheet” media=”print” href=”print.css”/>

While this isn’t going to come into play right now for our current project, this will be hand to know going in to the future. It’s also nice that this has been brought up, because we have not considered it in class.

Classwork

Working in class has shown me that arranging icons in a circle is incredibly difficult, and I don’t particularly recommend it to anyone. I’ve had to work through some jquery and other functions, but I’m glad it’s forced me to learn some of these things. I definitely think I’ll have to review/re-learn everything later, though.