Skip to content

Stataywhit's Blog

Just another WordPress.com site

Category Archives: Uncategorized

Today was a sad day. I’m just going to put it out there. I have tried to dismiss that the day would come when my volkswagon beetle would kapoot.

But it’s dead and our one car family is now a no car family. The economy has not effected my life more than the last three months. I see now why “they” call it the hard times.

It gives me some perspective as to how ignorant I was of situations.

My Bug died on the side of the road last night at approximately 9:00pm. We were on our way back from picking up Kevin’s daughter, Catie-Claire in Tyler Texas. Not two miles from the city limit, I ran over a large piece of metal spanning the whole right lane. We all three calmed ourselves down as we heard another and then another car hit this piece of metal and join us on the side of the road. Lucky for them, blowouts were their problem. The bug’s oil pan was sliced open, transmission dislodged and rear axel bent.

However, we have great friends here in Dallas that came to our rescue and brought us to safety. Today, I had no choice but to salvage the car. I had already paid 4 times the car’s worth in repairs in the last 2 years and I just couldn’t do it anymore.

So for our memorial day weekend, we will be shopping for cars.. something I should have thought about doing 2 months ago.

As they say…Hind sight… well I’m not even going to finish that one 🙂

I like the idea of Microformats. It’s in a sense recycling code that is already standard in order to retrieve information from a site using attributes like class’s and rel’s

I felt a little overwhelmed with the idea, but after some research I think putting a microformat in with the blog on my site, it will help network with others and share my information (contact, posts, whatnot) with them.

Some people can use microformats for geographic locations to find for example a puppy or kitten in the area.

Here is an excerpt from Wikipedia over under construction microformats:

Among the many proposed microformats, the following are undergoing active development:
hAudio – for audio files and references to released recordings
citation – for citing references
currency – for amounts of money
figure – for associating captions with images
geo extensions – for places on Mars, the Moon, and other such bodies; for altitude; and for collections of waypoints marking routes or boundaries
species – For the names of living things (already used by Wikipedia and the BBC Wildlife Finder)
measure – For physical quantities, structured data-values

Honestly, they seem a little superfluous for my site, but possibly could use it for the blog portion on the website. I will do some more investigation to see if I can use these microformats in an efficient way for me.

CSS3 tags for review today include: border-radius, box shadow, text shadow, RGBA colors, multiple backgrounds, opacity, mulit-column layouts, transitions, and 2d transformations.

The definitions are as follows (brought to you by css3.info:

1. border-radius:”The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.”

this info came from css-class.com and is really neat to see what you can do with border-radius. This may have some to do with the 2d transformations as well.

I’ve used border-radius before. It seems a little difficult at first, but when you get the hang of what means what (as all things in coding) it is okay to handle for a newbie like me.

2. box shadow: “The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset.
Browser support is growing of late with Mozilla (Firefox), Webkit (Safari/Chrome/Konqueror), Opera and the IE9 Platform Preview all offering a decent implementation of the spec, although Mozilla and Webkit still require their respective -moz- and -webkit- prefixes (note Mozilla Firefox 4.0+ no longer requires the -moz- prefix).”

The box shadow is something I am oober excited about. I don’t know if I will be using it in my portfolio site, but will be using in other sites that I’ll be working on in the future. A big enhancement in the web visually is allowing things to have depth on the screen. Presenting depth one can achieve a real look for users.

3. text shadow: “CSS3 finally eliminates the need for Photoshop when all you want to do is a simple shadow…Note: This feature is NOT new in CSS3; it was originally proposed in CSS2. Safari had it from version 1, however!”

I am not really a fan of text shadow even in my own print design. However, the effects you can achieve using text shadow could be the “flame” effect, which does seem pretty neat, but a little unnecessary. To see this go to css.info

4.RGBA colors: “CSS3 has added a new feature to color setting. Next to rgb you can now also use rgba. The “a” in this
property-name stands, for, you guessed it: alpha. This new feature allows us to specify an opacity value for a color. This one could
make life for webdevelopers a lot easier…
So far, this has only been implemented in Safari 3, and works in the latest Firefox 3 pre-alpha’s.”

This seems like a pretty handle tool. I may use it in my design for hovers, if it is used that way at all.

5.Multiple backgrounds: “CSS3 allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list.
Browser support for multiple backgrounds is relatively widespread with Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature.”

I may have a couple instances where this will aid me. I wonder if It will eliminate the faux-column that I have become so accustomed to use. We will have to see. It’s a great tool that I probably will use on my site.

6.opacity: This, from what I gathered will be a lot like RGBA colors.

7.multiple-column layouts: “W3C offers a new way to arrange text “news-paper wise”, in columns. Multi-column layout is actually a module on its own. It allows a webdeveloper to let text be fitted into columns, in two ways: by defining a width for each column, or by defining a number of columns. The first would be done by column-width, the latter by column-count. To create a space between the columns, you need to specify a width for column-gap.
Multi-column layout is currently only supported in Mozilla based browsers and Safari 3, who have prefixed the properties with respectively -moz- and -webkit-. ”
I will definitely be using this on all of my pages. The floats that I use are getting old! They are pretty easy, but maybe this will allow for more ease.

8.transitions: these are just the best thing that happened to css! I am going to use this to subtly change my linked pictures to add titles and a transparent color over them. This will be quite fun to try. There are tons of ways to use this, and I will have to do more research in order to grasp and talk about them.

9/ 2d transformations: this is extreme! With 2d transformations you can do things that you never thought (or I thought) possible with CSS. but, you can move things like you would or that I’ve seen on flash pages. It’s rather neat. The link css-class.com will lead you to this.

Gosh. I think I’ve spent more time in front of a computer this week than I have in the past three months. I am getting started on redesigning my portfolio site and researching other portfolios is taking an extraordinary amount of time. The fact of the matter is, I don’t think I’ve seen but a couple of site that have blown me away. (I probably shouldn’t speak so condescending towards the “experts”. But, I’m frankly disappointed.

As a student of web design and a natural perfectionist, I have found a couple of sites that are quite nice in the context of navigation and overall aesthetic. There are as follows:
Jason Santa Maria
Ole Martin Kristiansen
Elliot Jay Stocks

All of these great references were given to me from an even greater two-part screencast from Elliot Jay Stocks:
Part 1: How to Design a Portfolio Website
Part 2: How to Design a Portfolio Website

I have to mention that starting out learning to code, it is quite hard to find well coded websites, for a student doesn’t know right away what is proper coding and what is not. However, watching this two part series, I think you will agree that the information given allows one to respect and trust the websites referenced.

There were many great points Mr. Stocks presented in his talk, including:

the structure of a website paralleling that of a storyline:

1. The Exposition : The Structure of Grid of a webpage
2. Rising Action : “Pleasing Tension” (unusual or unexpected grid/layout)
3. Climax : Stand-out element, like a quote or a screenshot of a portfolio item
4. Falling Action : Balance of Layout
5. Denouement : the Overall Aesthetic

Other important points

1. It is important to link your work to a working site that displays the design you made. “You put in the hard work, now show it off.” This is also important in that it validates you actually worked for the client you said you did.
2. Show featured work on the homepage: give the user at least 3 different types of work: that way you can show the user right off the bat that you do several different areas of design or styles.
3. Think of your website having outer and inner pages: where the outer pages are more general and the inner pages give details
4. Give Case Studies when necessary : this is a thought that I really want to implement in my site. This gives your ideas and inspirations behind the work you did. It shows the user that you do have a brain and can think critically to come up with a great solution. On Ole Martin Kristiansen’s page, however, I believe that he puts too much emphasis on his opinion and doesn’t let the viewer get to their own. He makes it seem that he is a little on the cocky side and unapproachable. However, on Elliot Jay Stocks’ site, he explains very briefly his inspiration and concept behind the designs and leaves the viewer to come to their own opinion of the work, which is the approach I will be using most definitely.
5. Use a grid! This has been instilled in my brain as an advertising/graphic design student from day one. In Mr. Stocks’ presentation he shows how he made his site using grids and sticking to them. The result is clean, with an easy eye-flow.

In Conclusion

It’s a crazy order of things when you start making your very own website, the ideas, the designs, the inspirations seem endless. But, when you start putting pencil to paper, the endless nature of it seems to narrow in and you feel quite limited. It’s great to keep a fresh eye and take many breaks, giving yourself time to relax from the crazy research and preparation this kind of work entails. Then, when you get back in the swing of things, the design will have the same feel of inspiration and endless possibilities.

That’s all for now. The next blog entry will go over typography on the web. Be looking for it!

This week’s assignment is researching HTML5 websites in order to understand how the new tags are being used. The first site http://urustar.net/ has a clean minimal page website (as I was seeing in a lot of the websites coded in HTML5).

I like the notes that were given on this site, like the ones that follow:

This one had notes that indicated what each function for tags. Like section was the start of the page, or the “page section”

header id=”first”
this is not very semantic, but it’s using an html5 tag. Next is the hgroup. Not sure what hgroup does…looks like a category for items that go in the header.

The links were attached to the same document, indicated with a # sign. He used it differently than what I did in homework last week…I put the index.html#… not # to begin the url. I do not know if this is a shortcut in the old html or the html5 function.

The coder used the new nav tag for the links section

Not concerning code, but rather the navigation. I am confused how they have two different kinds of links that are for portfolio and contact us. It is in the nav section and also the div id=”menu” as well. It is kind of confusing to me, but the viewer may not even notice it.

The section tag is used for the about us section again, kind of like a div with an id. It’s breaking up content into “sections.”

The

tag is used again in the about us section. I didn’t realize that you could use the header tag more than once, and without an id in the about us section. It’s function is just to show emphasis on a heading I am guessing.

The

As I looked for the required blog reading of “progressive enhancement” and “graceful degradation” I was struck by a lot of jargon that I did not know… go figure an advertising student in a web design class! ha! Getting back on subject, there was finally one that I found that I could somewhat understand. http://ptspts.blogspot.com/2010/12/on-browser-compatibility-issues.html
His syntax and Layman’s terminology really kept me reading and I learned or I think I learned more about the appropriate work flow and awareness between browsers.
The blogger had great references including jQuery source code
and the HTML validator.
The main point he was getting across (I’m assuming it’s a he..) was the workflow, the workflow, and yes the workflow. He kept repeating himself in different methods on the sequence of things (i.e. fixing problems before you go on, testing and retesting).
He went over the basic browser similarities, which I was happy to know. I somewhat understood most of them. Here are a few notes that were great points:
All main browsers (Google Chrome, Firefox, Safari, Opera and Konqueror) are very similar to each other except for Internet Explorer.
“Google Chrome, Safari and Konqueror are even more similar to each other, because they share the same original code base (KHTML in Konqueror, which WebKit in Safari is based on, which WebKit in GoogleChrome is based on).
Rendering (application of CSS) in most main browsers in much more similar to each other when they render the web page in standards compliant mode rather than in quirks mode. So to get rid of many incompatibilities, just make sure that the browser renders the page in standards compliant mode.
To enable standards compliant mode, just start your HTML with a doctype (right at the beginning of the file). To get HTML 4.01 transitional, prepend this to your HTML file:

Make sure your editor saves the HTML file in UTF-8 encoding (character set), without the byte order mark (BOM).”

I need to do some more research, for it seems when I start reading this material, I have had to look up what some words mean. Ah, the days of the student and flipping through three books at a time… it’s the life!

This week, as opposed to last week, I did enjoy the fresh air of newness. Disc golf is the game and fun is the only option. On sunday, my boyfriend, two of his friends, and I ventured to the UTD disc golf course. It’s located at the school’s entrance, which made it easy for a group of no-direction people!

When we got out of the car, the boys handed my a small-pie-sized disc. Nothing what I had imagined. It was heavier than a regular frisbee, which I had pictured in my mind throwing. However, we did warm-up with a “regular” frisbee. This is quite important, being that you will need to throw a bit.

After an hour and nine “holes”, the boys were wining about losing against a girl-newcomer. Yes, I did beat them, by one stroke. They actually were very congratulatory and my boyfriend offered my disc golf skills to their summer team. How nice :).

It was a nice addition to a relaxing Sunday. However, I am used to the high impact and endurance from playing ultimate frisbee, so this sport may not be my number one choice to go to, but still an option for a weekend or something to do after a long day at work!