Tuesday, February 24, 2009

Journal 25&6: Hatred of stupid technology

I think I might want to kill the computer lab here at the Union (Student)...I tried 3 different computers (all Macs...I can't stand the Windows the U provides) to open Dreamweaver...and none of them frackin work!!!!!! AGHHHHH!!!!!!

Let me repeat that for emphasis:


*deep breathing exercises*

Not only could I not get Dreamweaver running, on all 3 of the puters I tried, the vertical scrolling ball on the mighty mouse didn't work...which starts out as a nuisance, turns into an irritation and finally blows the lid and makes the user furious...it's not that bad on a small screen because you can always just move quick to the side of the window...but on anything bigger than a 6x8hundred res screen, scrolling is a necessity and I will not be denied!!

So enough about MSU's half-arsed attempt to provide it's students with necessary technology...I have a very diabolical plan for my killer website...I'm probably going to put in more animated GIF's, a lot of illegible text, and...wait for it...an embedded, hidden and looped wav file that consists entirely of the intro of Baba O'Reiley by The Who...of course there's going to be some broken links, more "Chipmunked" videos and such.

For my secondary page, I'm gonna pull the good old angel in the clouds ploy...have everything in white with a white background...with a note at the top that tells the user to highlight everything in order to read things...and I'm gonna have more annoying sounds in the background...maybe some simple JavaScript things that pop up or something not sure yet

Thursday, February 19, 2009

Journal 22&4: Un Petit Update

Yeah, so last week seemed to come rolling right out of hell on some demented crazy train and took a huge, steaming dump all over my life, socially, academically and mentally...I had tests and a certain (vv) project (ahem) at the end of the week, I was having emotional issues with letting go of advertising and going to PW (pshh...yeah right), I was and am still trying to figure out what in the hail is wrong with my car (not running is one problem), I'm pretty sure that I saw my friends about twice, I'm still trying to catch up on sleep from last week and on top of it all, I still had homework in all of my classes...so pardon the laziness in posting a project for my week's journals...

So, for the update...I have done almost nothing productive this week to compensate for last week...I am managing to do some cool stuff with AI (Illustrator)...I learned how to make that cool text effect that you see on classic comic books (Effect>3D>Extrude & Bevel)...I was gonna show off with that by putting a pic in...but it's taking too long and I'm not feeling the enthusiasm 45 mins into it...I am also in the process of tracing a sketch I made for an ad with the pen tool...that's really fun (and by fun I mean tedious and time consuming)...I am wondering at this point just how much work I'm willing to do for a spec ad tho...

Oh! Fun stuff...for the State News staff photo this year, we are vectoring ourselves onto superheroes and then we will compile the pics together for the final proj...I'm pumped as I'm gonna be Syndrome from the Incredibles...w00t!!

I'm also going to be making a profile page for the State news...I might want to kill HTML by the end of this year...but I did notice that there is a copy of the JavaScript Bible at SN...YES!!!!!!

Sunday, February 15, 2009

Module 2 Paper AKA 17-21

So I thought that making my module 2 paper my journals for this week would be appropriate. I spent a lot of time on this paper...and every single other thing I had to do this week...

Module 2: Analyzing Web Code

A comparison of Time.com and Zeldman.com

The page I analyzed for Module 1 was Time.com, so I thought it fitting to analyze its underlying stricture for Module 2. I am comparing the code with that of Jeffery Zeldman’s site, zeldman.com. Zeldman is considered a God of sorts for web design and his site acts as much as a creative outlet and blog for Zeldman as a standard to which authors should compare their work. I am going to deviate slightly from the original assignment. I will be analyzing the CSS sheets used in the sites. I am pretty familiar with HTML, but not so much in CSS. As this assignment is to serve also as a reference sheet of sorts, I figured CSS would be a good substitute for HTML in my case.
In general, Jeffery Zeldman is my hero (of web design)…he is renowned in the field of web design and has a site viewed by thousands of people every day. His site reflects his prowess in web design and passion for user experience and learning. The first thing I would like to mention about his CSS sheet compared to TIME’s is the little disclaimers/explanations he leaves like easter eggs throughout the document. He fully intended for other people to look at his CSS code and learn from the way he went about designing his site. TIME, on the other hand, looks like an intern got carried away with the copy and paste button and then went through and changed what they needed. The code is sloppy, disorganized and unnecessarily redundant. It appears to me that TIME jumped on the web bandwagon as an afterthought and spent only as much time and money constructing the site as necessary to create a skeleton template…and have not had a major overhaul to their site or a significant update in quite some time.
In TIME’s defense, they do have a lot of information that has to be presented…which means a lot of formatting. And being a novice in CSS coding, I am not in the best position to be tearing their code or process apart. But all the same, I’m almost positive that there is a simpler and better way to lay this site out using CSS. It would also help if they put in little explainer tags to help future authors (including themselves) to know which things are which as Zeldman did.
I really enjoyed this assignment…main reason being that I use this sort of process for learning about web design on my own. I usually will go through the source code of a site to see how it works…maybe even open th e document in Dreamweaver’s split view and see which elements correlate to which lines of code.
I must admit, I read through Zeldman’s code more than TIME’s…mostly because the TIME CSS to me, seemed like a jumbled mess. Zeldman did a very good job with making his code accessible and readable. I did learn a lot from Zeldman’s code about the process of laying out using CSS. Background images and divs are key elements in contemporary layout design and Zeldman demonstrated perfectly how to use them. I also picked up some seemingly good shortcuts on how to code in attributes…especially background attributes…rath er than have several separate attributes such as an image attribute, a color attribute and so on, just have one background attribute tag with all of the attributes specified inside of it.
Here’s an example of what I mean:

div#wrapper {
background: transparent url(/i04/wrapinner.gif) top left repeat-y;

As per the rubric, here’s a lis t of reoccurring elements I found in both TIME and Zeldman.com.

• min-width—sets the minimum width of an element
• border—define the borders around an element
• display—sets how/if an element is displayed
• text-align—aligns the text in an element
• margin—define the space around elements
• padding—define the space between the element border and the element content
• color—defines the color o f an element, be it text, border or other
• font—defines the font of the text…usually supply the specific font as well as the root font and serif family
• width—sets the width of an element…usually div’s
• height—defines the height of something…usually div’s
• font-size—defines the font size…usually using the ‘em’ unit
• list-style—sets the type of the list-item marker (the bullet points)
• position—defines the pos ition of an element…like a picture or a div or whatnot
• line-height—sets the distance between lines of text…’em’ units work best
• letter-spacing—sets the distance between characters…’em’ works best
• text-transform—defines any special characteristics of the text…so you can make everything uppercase or small caps or whatnot
• background-color—sets the background color of an element
• a:visited—a pseudo class for hyperlinks that defines the appearance of visited links
• a:hover—a pseudo class for hyperlinks that defines the appearance of links when hovered over by a mouse

I feel very confident with using basic attributes like –color, -image, and –position—mainly to do with the fact that I have used programs dealing with visual elements like Photoshop and Illustrator, however, a nything dealing with text is still relatively foreign to me…I think it has to do with my inexperience with manipulating text…I am getting better at using text manipulating attributes however.
I would just like to say that W3C Schools is the BEST PLACE EVER to learn anything about anything web…from definitions to tutorials on how to do different tasks to basic walkthroughs and even learn how to get a certification in any web authoring language recognized by the W3C. This is where I got all of the information pertaining to the attributes and where I have been learning code. I constantly have a tab in my browser devoted to W3C Schools in the event I have a web-related question
So in short, TIME needs a major overhaul on their site, Jeffery Zeldman is a web authoring GOD and I have a long way to go before I can do anything close to what I have seen in this project.

• Very cluttered…every attribute has an identifier…makes it a pain if one was ever to go back in and edit it
• Lines and lines and lines of code
• Most images are actually in the CSS…especially for the RSS feeds and background images
• All the attribute id’s are individual…rather than consolidating them
• Color tags
• Text font families
• Margin/padding
• Links have their own id’s and colors and most have attributes for diff a:hover
• Images: default
• There’s a lot of information on how the page looks and how things are formatted

• clean and organized
• There are small explainer tags that describe the function of different things
• He seems to have designed the CSS with future editors and the common viewer in mind
• The images are also in CSS, but the tags are different…rather than have the tag as background-image, he consolidates all of the bkgd attributes into one tag…
• Color tags
• Text font families
• Margin/padding
• Links have their own id’s and colors and most have attributes for diff a:hover
• Images: url(local image path)
• There’s a lot of information on how the page looks and how things are formatted
• This version looks a lot cleaner and simpler to navigate
• Plus there are little explainers throughout the doc letting you know where you are

So there's my paper...and I'll get around to posting more progress later...when I actually have things to talk about...

Monday, February 09, 2009

Journal 16: Tabs and other things of interest

So for a while, I've wanted to learn how to make hyperlinks automatically open in new tabs...and how to make text appear as a comment when you hover over it...it's kind of frustrating not knowing how to do either...especially since I know as a user that it's nice knowing where a link is taking you before you click, and after you click, to not have the link take you away from the page you were viewing. You can do this already by right clicking the tab and saying open in new tab, but I want to make it more convenient for the more Layman user.

I went to Grand Rapids this weekend to meet with JMulls...it was loads of fun and I learned quite a bit about using RapidWeaver...it basically builds the site for you...which I think will be really useful in learning code because I can generate pages and then look at the source code for it and learn how to make my own code.

I also made a couple of contacts with guys that do the kind of stuff I'm getting into for a living...those should be really good to have around for questions and things of that nature.

Tuesday, February 03, 2009

Journal 14 &15: Apple Apple Apple

So big news...I heard from Apple today...about a month ago, I applied to be a Campus Rep and they finally got back to me! They want to talk to me tomorrow (Wed, 2/4/09), well, today now...

Anyway...Meeting with PC went well. We got a lot done...he really liked my mock-up, and aside from any major changes, ^^ is how it's gonna look...as you can see, it has a very calm, earthy feel...lots of greens and browns...and the text is grey sans rather than black serif. The NavBar is going to have a lot more on it than this however...I just didn't have time to go in and change anything since Sat...it's also going to be in drop down format with a gradient the same color as the far right...The 2 columns of text are going to be iFrames that scroll independently of the background (the trees and the gradient), which is going to stay static.

There are going to be a couple logos surrounding the banner, which is most likely going to change a little bit as well...I'm not sure about the font...I like the sans Helvetica, but I kind of want something more organic...not Papyrus organic...but something not as clean...Helvetica thruout doesn't seem to go right with the earthy motif.

There's also going to be a JS photo gallery as well as several php forms for prayer requests, CD ordering forms and more. This is going to be a biiiiiiiiig project...but I feel like when it's done, I will be 20 times the web designer I am right now...

I have been neglecting my digital portfolio lately...I should probably look into that...HAH!...like that's going to happen between the State News, classes, the GHBC site and possibly Apple...I kind of want to go in and redo it to look like a newspaper...predominently black and white with an Old English Banner...and NO TABLES!!!** I will use CSS for all of it...but that's gonna be a pet project that may end up being done this summer (which I will be spending in East Lansing beeteedubs). Eventually, I want it to become a personal homepage with a downloadable resume, the folio, and an info site about me...but again, this is something down the road...right now, I'm stuck in the mire of classes and work and trying to fit friends into the whole picture...I can't forget friends...that's what happened at the beginning of High School and that was possibly the worst time of my life...

But I'm not going to end on a depressing note so here's a synopsis of good things that have happened to me in the very short past:

  • I got hired at the State News as a graphic artist

  • I finally got GHBC to the planning stage and out of the gray maybe areas

  • Apple is considering me to be a Campus Rep

  • I finally was able to escape the clutches of Caf Work

  • I've got 2 gigs of cool new music to explore (all of which is legal)

  • I finally realized what I want to do with myself after college and found a path for that

  • I'm going to Grand Rapids to meet with one of my really good friends to learn more web stuff on Saturday!

  • All good things...and I'm happy to list them!

    **More into my feud with tables later