Week 3
September 9, 2010
One small step
“A journey of a thousand miles begins with a single step.”
-Ancient Chinese Proverb
Introduction
This week marks the end of the preliminaries and the beginning of designing my very first website. As I am sure it is with every website at this very early stage of development, it looks amateurish, clunky, and just plain ugly. But it is a beginning, and therein lies the promise of this humble jumble of words and images. After all, Neil Armstrong’s first space mission was a total disaster. Not only did Gemini 8 fail in its mission, the crew barely got home alive. But the lessons learned in that early disaster took Armstrong and company all the way to the moon.
Notes on Readings
MacDonald, Chapter 5
In Chapter 5, “XHTML Text Elements,” MacDonald discusses the ins and outs of formatting text for the web. He begins by explaining the difference between:
and
MacDonald explains that the use of Cascading Style Sheets (CSS) to apply typographical elements to an entire site is often far more efficient than manually formatting every single element. He then goes into the different types of XHTML elements. These include container elements (such as the <b> command that apply to a group of content items) vs. standalone commands (such as the <img> command that applies to a single item) and block elements (such as paragraphs that go inside the main body) vs. inline elements (such as images that go inside the block elements).
MacDonald then gives more detail on some of the basic items discussed in Chapter 2. He explains how paragraphs can be refined using non-breaking spaces and line breaks. He explains how more organization beyond basic headings can be added to a page using horizontal lines, pre-formatted text and block quotes. He also discusses how divisions and spans can be used to add even more organization in conjunction with CSS definitions.
MacDonald then moves on to discuss XHTML listing elements. These include:
- Ordered lists: Those that organize list items by sequential numbering.
- Unordered lists: Those that organize list items by bullet points.
- Definition lists: Those that display list items as dictionary definitions.
He also discusses start and type attributes and using nesting lists to create outlines.
MacDonald then explains the elements of inline formatting. He reviews italic, bold and underline script and explains how emphasis and strong commands can provide even more differentiation to text when paired with CSS definitions. He walks the reader through using super- and sub-scripting, teletype and special characters. MacDonald concludes the chapter with some tips for displaying non-English languages.
This chapter was very helpful to be reading when beginning my website. I decided to make an LIS resource site, and as such text will be paramount. With all of the information contained in this chapter I find I have even more control over the appearance of text in my site than I do with a Microsoft Word document. I expect that I will be referring back to this chapter often as I continue work on my website
MacDonald, Chapter 6
In Chapter 6, “Style Sheets,” MacDonald explains how to use CSS documents to tweak virtually every physical element of one’s site. He begins by explaining the 3 types of style sheets. These are:
- External: Those stored on a separate file and applied to several or all pages in a site.
- Internal: Those inserted in the <head> of a page and specific to a given page.
- Inline: Those inserted into the start tag of an XHTML element and specific to that element.
MacDonald then explains the elements of CSS rules and how each part of it works. Those parts are:
- Selector: Specifies the type of content the rule affects such as h1.
- Property: Specifies the type of formatting applied such as color.
- Value: Specifies the value of the property set in the rule such as blue.
MacDonald then discusses the various properties that affect the applications of CSS rules. These include:
- Cascade: If rules conflict, they will be applied according to the following order of precedence:
- Standard browser settings
- External style sheet
- Internal style sheet
- Inline style rule
- Inheritance: Commands that are applied to elements such as <body> will be applied to all sub-elements contained therein.
MacDonald then discusses the process of specifying colors with CSS. He explains the difference between background color and text color. He walks the reader through selecting colors by using color name, color code or Red-Green-Blue (RGB) values.
MacDonald moves on to the ins and outs of using fonts on the web. He explains the various elements of font to include family, size, weight, style, variant, text decoration and text transform. He describes the different types of fonts and explains how browser settings can affect the size of font visitors will see on their screen. He moves on to a discussion of alignment and spacing issues, borders and white space. MacDonald concludes with a discussion of how class selectors and class rules can be used to differentiate parts of a page, especially when used in conjunction with the <div> command.
This was the first chapter in this book that I experienced as lengthy and difficult to read. I expect that at this very early stage of development it is simply a case of too much information at this point. I am sure once I am ready to start fine-tuning my site I will go back to it and things will begin to make more sense. Despite that; it was still very interesting to get a look “behind the scenes” of what makes a web site unique.
Beaird, Chapter 1
In Chapter 1, “Layout and Design,” Beaird discusses the basics of web page appearance. He encourages the reader to look for the “happy medium” between usability and aesthetics. He names the parts of a web page users expect to see, which include the containing block, navigation bar, content block, footer and white space.
Beaird then moves on to discuss design theory. He explains the “rule of three” that governs what most people will find aesthetically pleasing in a site. He explains how concepts of balance and symmetry affect visitor perception. He discusses how unity can help pull together disparate elements of a page through the proximity of objects and repetition of similar features. He discusses how emphasis can be placed on parts of a page through the placement of objects towards the center, the continuation of elements in a given direction, the isolation of objects, contrast between varying elements and clever use of proportion.
Next, Beaird discusses page layout. He begins by walking the reader through the pros and cons of three traditional layout styles: left-column navigation, right-column navigation and three-column navigation. He then examines some emerging trends, to include the expanded use of footers and placing content on the left followed by two navigation bars. He continues the discussion with issues relating to fixed vs. liquid width navigation and screen resolution. He concludes the chapter with a “real-world” example of how he used the above-listed design principles to meet a clients needs.
Of all the chapters I have read for this class so far, this one has been the most enlightening for me. I have always been much more of a scientist than an artist, and this very helpful discussion of basic art principles is all quite new to me. Beaird uses a very beautiful “zen” style of both layout and writing in the book that helped me to absorb the information. These will certainly be very useful principles as I seek to design a site that is both pleasing to the eye as well as informative for my visitors.
Website Reviews
While the style of this site came across as very corporate, it was very informative. It was interesting to see how they used three-column navigation for the home page and left-column navigation for the others. It was also an interesting look at how websites get their names.
http://www.internettrafficreport.com/main.htm
All of the white space on this site was a bit distracting, but the main pieces of information were very easy to locate. I was very surprised to find out that Australia and South America have the most reliable internet connections in the world. I will definitely want to make sure my site is more “filled-in” than this one
http://www.internetworldstats.com/stats.htm
This was a very bare bones site and the designers were obviously concerned only with displaying the data. I will have to take steps to make my site more inviting to users. The statistics were good to know. The pop-up solicitation to sign up for the newsletter was rather annoying.
The home page of this site demonstrated Beaird’s “rule of three,” but in a rather soulless manner. There was an abundance of data, but the sheer volume of it made locating what might be helpful rather difficult. The other sites alternated between three columns and one, which I found rather disoriented as I navigated through. I will definitely want my website to display more unity.
This site seems to have found that happy medium between usability and aesthetics. There was a lot of data on virtually any topic that one cared to know about, but it was very well arranged and easy to find information on a given topic. It was designed very well, the differentiation of color on the home page especially caught my eye. This is definitely a good site to learn from.
http://www.nielsen-netratings.com/
The Nielsen site was very well designed, but not quite as informative as the others. It was obviously a corporate site with attracting new customers the main focus on the designers. Definitely a lot to learn here in terms of layout, but I will strive to inform in a far less solicitous manner.
http://usfweb2.usf.edu/ur/webadmin/webguide.html
This page was full of school spirit and regulations, but very lacking in design principles. I found out some interesting things and may even use the “official” USF colors in my page, but I must say that I am very glad these rules don’t apply to the myUSF intranet. The page scrolled down endlessly and certainly did not encourage visitors to read all the way through to the end.
Final Thoughts
I remember reading how Armstrong described the moment he first realized that he wanted to be a pilot in his autobiography. His father took him to a local pilot who gave rides for a fee just so his passengers could find out what it was like to fly. Most of the passengers were scared out of their wits, but young Neil knew that he had found his calling. All of the great journeys in this life begin exactly so, with a dream. As look at the tangled mess I hope to tame on my website, I dream a dream of what it can be. I remind myself that quite a few people have gone very far on a dream. Some even went all the way to the moon.
Until next time, take care of yourselves, and one another.
Farley
Leave a Reply
You must be logged in to post a comment.