Chris Valleskey

Facebook

Chris — Wed, 28 Jul 2010 05:53:57 +0000

I visit Facebook more often than I would care to admit. Maybe it’s because I’m tech-savvy, or maybe it’s because I love clicking the little red update notifications. In any case, while I was visiting the site tonight I noticed something called the Friend Finder on the home page’s sidebar.

Here’s what it looks like in case you don’t know what I’m talking about:

Now, I don’t know how popular this Friend Finder tool is. All I know is that I’ve never used it. And after refreshing the page a couple times only to see the friends change inside the box, I started to wonder something: Have these friends, the ones it says have used it…actually used it?

Nope!

I asked a few of my friends that were listed if they had ever used the service, and every one of them said they hadn’t. Now, I know I’m not alone when I say that some of the ways Facebook uses our information is wrong, and maybe even unethical. Honestly, this bothers me. Facebook used my friends, who hadn’t even used the service, to try and get me to use it.

What kind of company does that?

HTML5 Graph

Chris — Sat, 03 Jul 2010 05:58:11 +0000

I started this project after I heard about the tag that was included in the HTML5 spec. Since I wanted to learn more about HTML5 and the new things in it, I decided to focus on this particular tag and use it as a learning experience.

If you don’t know anything about the tag, it’s basically a blank slate that you can use to draw and display pretty much anything you want. Since JavaScript is used to define what is displayed, if you’re wanting to learn a bit more about JavaScript and future web topics (like I did), this is a great place to start.

Before we get started, if you want to see how the graph will look, here’s an example page that lets you check out some of the different features it has:

HTML5 Graph Example

How to use the graph

If you’ve ever worked with jQuery plugins, the way the graph works will be pretty familiar to you. However, please note: This does not require jQuery or any other JavaScript library to work.

Step 1: Adding the scripts

To load the script, you’ll need to add in a line to the top of your site’s code, inside the tag, like this:

A couple of notes about the code:

Be sure to change the src attribute on the first line so that it links to cv_graph.js.
‘id’: The id of the tag that the graph will load in to.
‘strokeStyle’: The color of the graph’s line.
‘fillStyle’: The fill color of the graph’s line.
‘call’: Function that is loaded to produce the number that will be displayed. The one above picks a random number between 25 and 75.

There are many more options that you can add to the graph to stylize it the way you want, but for this demonstration I’m just going to keep it pretty simple.

Step 2: Creating the canvas

Now the code will be loaded, so place a

After you have these two steps done, load up the page and see it work! Obviously, this will not work in Internet Explorer (yet!), so you’re going to have to use a modern web browser to experience this awesomeness.

If you want to try the graph out on your own site, or to just play around with, click the download button below to grab the source file:

Download cv_graph.js.zip (3kb)

One last note

For you guys who like to dig through the source, know that the graph can take static data instead of a constant stream of values. Also, it’s pretty easy to hook it up to server scripts so you can get different information. For example: I was able to create a graph that grabbed the local temperature every 30 minutes from a php script.

I plan on writing a blog post that will cover the more advanced features of the graph so that everyone can use them without having to read through the source code. Expect to see it soon.

As always, feel free to comment below!

Fillerama

Chris — Fri, 04 Jun 2010 04:09:19 +0000

This is a simple filler text generator. What makes it different or unique is that it takes quotes from characters in the animated series Futurama. If you don’t know much about the show, it’s pretty awesome, and I suggest you start watching it. In any case, here’s the link to the project:

Check out Fillerama

And in case you were wondering…

I intend to have a sort of structure and consistency for how my future project pages will look. Sorry if you think it looks bland.
The talented and awesome Matt Sauter, who helped me come up with the idea, has pledged to illustrate a suitable design for the page. I’m not going to bother him about it, though. Well, not too much.

The Lonely Amoeba

Chris — Sun, 30 May 2010 01:01:41 +0000

For our final Computer Illustration project this past Spring we were asked to make three illustrations that told a story. After thinking about it for a long time, I got a weird idea out of (seemingly) nowhere. My idea was to tell a story of an amoeba who was lonely, but then, unexpectedly, found a friend.

The first frame is of the amoeba. As you can tell, he is sad because everyone else has a friend except for him.

The second frame is of the amoeba in a sort of shock. Something is happening to him, but he doesn’t know what it is. Also, he has a strange pinkish-purple mass coming out of his side.

The third frame shows that the strange pink glob was…a friend! Now the lonely amoeba is lonely no more. The end.

Well, I hope you liked my short story. I do not consider myself an illustrator by any means, but I am happy with the way the project turned out. Feel free to leave a comment about it below!

Nighttime Panoramas

Chris — Wed, 05 May 2010 21:32:24 +0000

For my final project in my Photo 2 class, I decided to take panorama shots at night. Also, I decided that the shots would be taken in recognizable places around campus and around Huntington. My first idea for the project was to take really long exposure shots of the stars and capture how they moved across the sky, but my attempt at this was a failure. So, I decided to do something a little different, but still keep the nighttime aspect of my original concept. I think they turned out pretty well!

Campus at night

Before I had my final plan for what my project was going to be focused on, I walked around campus and took some shots of the roads, grass, and lights. After playing around with my camera’s settings, I was amazed to see how colorful the shots turned out to be, even though it was pretty dark out. Among other things, I took a couple cool photographs of lights. You might see them sometime on my flickr account eventually!

When I got back to my room, I stitched the shots I took of the road together and realized how awesome the picture looked when merged. Because of this, I went out the next night with a couple of my friends to take more shots around Huntington. This time, I knew I wanted to take panoramas, so I brought with me a tripod.

Next to the town hall

The finished shots, when printed out, are 26″ x 8″. I chose this size because it’s the biggest I can go without having to buy a separate sheet of matte board for each shot. Hey, I’m a college student, and those boards are expensive!

Intersection

All in all, I had a great experience doing these shots. A lot of the times when I see panoramas, they are taken in the day. I wanted to do something a little different, but still show off the visual eye-candy associated with panoramic shots. I think taking the shots during the night helped boost that effect.

As always, let me know what you think in the comments section below! And please, don’t hesitate to give negative feedback. That’s how I grow.

Next: A BowTie theme

Chris — Sun, 11 Apr 2010 23:01:22 +0000

This is a BowTie theme I created. I based it off of the included “Tab Horizontal Mini” theme. Feel free to download it below and let me know what you think!

Download Next, a theme for BowTie.

Screenshots

New design, and some other things

Chris — Fri, 05 Mar 2010 20:08:58 +0000

I liked my old site’s design. It was clean, stayed true to the grid I put it on, and overall felt like a great accomplishment for me to finally put it all together. However, there were some problems with it. Because of this, I’ve decided to update my site with a new design.

The old site was made as a partial experiment. Before creating it, I had never written a WordPress theme. By coincidence, I had recently created a clean looking design for the site. I decided the best thing to do would be to create for myself a new site, and at the same time learn how to use WordPress by writing my first theme.

One of the first iterations of the old site’s design:

I will miss my old site’s design, but I am looking forward to using this new one. Under the hood, this theme is much faster. The old site was horribly hard to modify, since I had no idea of how to properly write a WordPress theme back then!

Another change that you might notice is that I no longer have a Portfolio page. One reason I did this was that my old site wasn’t set up very well to make additions to the Portfolio section. Also, I felt like I wasn’t presenting my work as well as I should have, and I would rather not show my work at all than to display it in a poor manner.

Eventually, I plan on making a new page on this new site that will replace the Portfolio page. Instead of just posting a couple of pictures and a few lines of text, I plan on writing out my entire design process. An example of what I plan to do can be seen on my recent posting of the design process of the DOVA website. Look for more of these types of posts here in the future.

I plan on making changes to this site in the near future, so don’t freak out if things seem out of place. To end this post, I’m going to finish by showing a few designs I came up with for my site that didn’t make the cut. Enjoy!

My attempt at a 24 pixel line-height, and all serif fonts:

A very obvious grid layout:

The design I made months before making this one:

A clean design I just recently came up with:

Note: You will definitely see these designs be integrated in the future with either this site or others.

HU Student Widget

Chris — Tue, 02 Feb 2010 19:36:13 +0000

About a year ago I made a widget for checking your chapel credits and meal plan info. Well, I’m sure lots of you haven’t seen it before since I posted it on facebook. So, I’m posting it on here and will link to this post from now on. Below is the download link along with a cool picture of the widget in action.

Download the HUwidget

Please, let me know if you have any problems with it, and feel free to let me know how it works for you. Thanks!

Design Process: Department of Visual Arts Website

Chris — Mon, 28 Dec 2009 02:29:49 +0000

For my Web Design class at school we were asked to come up with a site for our final project. Our first step was to decide what our subject would be for our website.

The first idea that I thought of was more of a commentary on the class as a whole; I wanted to make a site about web standards and good web design practices. If you’ve talked to me at all about the class you’ll know what I’m talking about. In the future I might write about it so everyone can know what we went through (It really was that bad). This idea was actually taken and made into a website with my roommate Jake. Although the site is now stagnant, for the time that we were updating it we had a good time and learned a lot of things.

My second idea was to do a design (well more of a redesign since it was already made, but not put online yet) of the Department of Visual Arts website for the art department at my school. This idea I knew would take a lot of work, and would require a lot of time outside of class for me to get it done, especially since we were assigned our final project about 3 weeks before it was due! As you can probably guess from the title of this post, this is the option that I decided to do.

The process I went through is similar to what is explained in an article written by UXMAG called The Layers of Design: the style layer. In it the article describes the layers of design when creating a website. I have grouped my process into the layers that they described.

Information Architecture

This layer is all about defining what content will be on the site, and where it should be placed so that the user can get to the information that they want quick and without problems. I wanted to have a complete navigation of the site in the footer so that the visitor could quickly jump to any page on the site with a single click. Also, I wanted to have contact info on every page so that the viewer could quickly click on any page to see contact info. To visualize this, I created several wireframes to show how content could be placed on the site. This is the wireframe I created for the homepage.

Interface Behaviors

Among other things, I really wanted this site to “pop” visually. One of the things I did to achieve this was to have a stylized drop-down menu for several of the menu items on the top navigation.

Visual Hierarchy of the Content

For the home page, I decided on putting featured gallery pictures and other important things into a slideshow. Also, older galleries or featured items were placed into smaller, but still visually important boxes. Lastly, the navigation and contact info at the bottom allows the visitor to quickly access any other page on the site, or see how to contact the school. On each page I tried to make it as noticeable as possible that certain things like titles and such were important.

This is the finished design of the home page, which I created in Photoshop. The colors I used were picked to try and provide as much contrast between each other, but without making your eyes hurt! I also tried to use some green in the design, since that is the school’s main color.

Layout

Ever since I learned about grid systems, I’ve been meticulously designing on a grid. Some people might say that a grid is restrictive, but I think that’s crazy. If anything, grids provide a framework that, if used correctly, can really make a big impact on your designs.

Below is the home page with the grid visible. I used a grid of 12 columns, each one 60 pixels wide, and with a 20 pixel right margin on each of them except the last. This added up to make the page a total of 940 pixels wide, which is small enough to fit on a 1024×768 monitor.

Style

The site’s background is almost white, but with a touch of green. I originally planned for the colors of the site to change according to the seasons, and if the site was actually developed I would probably turn that idea into a reality. As I said before, I wanted to make the site’s design pop, but I also wanted to ensure that it was accessible and readable (after all, who wants to read something if it gives you a headache!). To do this, I decided on putting textual content in a white box, and used a dark grey for the text.

In Conclusion

This project took a lot of time, but it’s probably one of the first projects I’ve creating for a class that I can actually look back on and appreciate. I spent a ton of time on it, and I’m amazed that I was able to get it completed in time. I hope you guys like it as well!

If you want, feel free to check out the complete site. If you have anything to say about the site or the process I went through when creating it, feel free to post a comment below!

Ordered Some Shirts

Chris — Thu, 10 Dec 2009 04:23:27 +0000

So…the awesome and cool Matt Sauter surprised me today with an early Christmas gift, and I can now say I am going to be the proud owner of my first five Threadless tshirts! Since I was excited and all, and knowing that I have not updated my blawg in a while, I have decided to show off the shirts I got.

Art Is My Weapon

When Pandas Attack

Breakthrough

Mister Mitten’s Big Adventure

Art No War

Thanks again Matt!