Week 7
October 6, 2010
Life’s a journey
“Focus on the journey, not the destination. Joy is found not in finishing an activity but in doing it.”
- Greg Anderson
Introduction
Here at the halfway point of my journey onto the World Wide Web, I feel the need to pause for reflection. My website is coming along nicely, I have a beautiful home page ready to greet my visitors and a good idea of what I want the content pages to look like. This week I learned how to add images and interactivity to make my site a more enjoyable experience for those who make use of it. Making all of these decisions, adding all of these features, each one is a step on this long journey. Even publishing the finished product will be but a milestone along this road, as I hope to use what I have learned for the informational and educational benefit of all humankind.
Notes on Readings
MacDonald, Chapter 13
In Chapter 13, “Making Money with Your Website,” MacDonald instructs the reader in generating revenue through their website. Methods for doing so include donations, advertisements, affiliate programs, sales and paid content. The simplest method for adding advertisements is through Google AdSense, as ads will be unobtrusive and tailored to the site content. One must only sign up with a Google account, choose a layout and color scheme suitable for their site design and copy and paste a few lines of JavaScript to the XHTML files. Payment is made on a per-click basis. Another option is to include a Google search bar and one will receive a modest fee every time visitors click on a sponsored search result.
Affiliate programs such as Amazon Associates simply requires the placement of links to products on retail sites. One will receive a small commission (typically around 4%) for all purchases made by visitors who follow the links. If one is selling their own products, then they will need to allow customers to pay with a credit card. The simplest and safest method for doing so is by using PayPal. This allows customers to submit payment securely and site designers can customize the form and cart views that customers will see.
This chapter did not strike me as particularly relevant, at least not for my purposes. While commerce is a significant driving force on the internet, my goal is to educate and inform with my sites. Advertisements would certainly have no place on a library website, as driving away even a single user would constitute a failure for libraries. I will keep MacDonald’s instructions in mind should I ever change mine, but I hope to generate knowledge rather than income through my web presence.
MacDonald, Chapter 14
In Chapter 14, “JavaScript: Adding Interactivity,” MacDonald gives a brief tutorial in using JavaScript code to build more fully featured websites. All JavaScript code must be placed within the <script> element. Generally functions will be defined in the <head> section and called in the <body> section. The <noscript> element can be used to place text that will be displayed in non-JavaScript enabled browsers (it functions similar to “alt” tags in the <img> element). Elements of JavaScript include:
- Variables: Information such as text or numbers that can be modified easily and called for later
- Functions: Instructions for performing a series of operations that can be written once and ran anywhere
Scripts can be stored on an external .js file and ran on several pages.
JavaScript can be used to change elements such as displayed images or text properties in real time. One can also use interactive events such as text displays. Events can be fired by such user interactions as moving the mouse over a link. Collapsible text can be used to hide text on a page until the user calls for it. JavaScript can also be used to build interactive forms that will generate output based on user input. MacDonald concludes the chapter by pointing out the wealth of JavaScript resources freely available on the web.
This chapter was filled with useful information but was very difficult to comprehend. I had gotten so used to using a nice simple mark-up language that adding in an object-oriented language just did not compute at first. I read the chapter twice and was very careful to do all of the exercises slowly and think about what was at play in every step. Still, I feel like I have a lot of work to do before I can really wrap my head around JavaScript. I feel like it is important to do so, however, as at this point it feels like I have exhausted the capabilities of XHTML to improve my site.
Beaird, Chapter 5
In Chapter 5, “Imagery,” Beaird discusses the various aesthetic, technical and legal issues involved in image inclusion in professional websites. Readers are cautioned to always select images that are relevant to the site and that users will find interesting and appealing. Three sources of images for websites are:
- Images that one takes or creates personally
-
Stock Photography from sources that are:
- Free: There are many free image sources on the web but they are typically of low quality and take a while to sift through
- Royalty-free: Images a user pays one flat fee for and can use in multiple projects
- Rights-managed: Highest quality stock images but they can be expensive and typically only used once
- Images one hires a professional to create; this is the most expensive option but will give one high quality images with more flexibility on aesthetics and usage rights
Using images found on a Google search in a for-profit site is a bad idea as these pictures are rarely in the public domain. Using hotlinks to display images is quite rude as it uses up a great deal of bandwidth on the host server. Using free clip are will cause a site to look rather unprofessional.
Images will often need to be touched up before they can be used. Cropping can remove distracting elements from an image and give central elements more prominence. A mask can be used to draw the viewers attention by using only part of the picture. One can knock-out part of an image an place it in another context. Adobe Photoshop software can be used to make subtle improvements to images. One can add borders, create multi-layered images, and adjust the brightness and contrast. Color can be changed with adjustments to hue, brightness or by applying various filters. CSS can be used to apply borders or padding uniformly throughout the site. Beaird concludes the book by encouraging readers to come up with their own ideas rather than just blindly following the latest design trends.
While Beaird did discuss some aesthetic issues related to imagery that I did find helpful, I felt that the majority of this chapter really did not apply to what I am doing. For one thing, I am not creating a for-profit website and have no desire to do so ever. For another, I do not have photoshop and cannot afford it. I doubt that any libraries I end up working at would be willing to part with that kind of cash just for pretty pictures either, making it very unlikely I will ever be using the techniques described here. Also, a lot of the nuts and bolts issues related to file formats have already been covered in more depth in the MacDonald text.
Website Reviews
I love typography is an interested site with a muted color theme that looked like a blog with a few more features added in. There were many interesting articles and typefaces available. However, after all of the issues discussed in the Beaird text I think I will stick to the safe list, at least for now.
http://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/
The 15 excellent examples of web typography contained some impressive visuals that definitely gave me a lot to think about. They all looked very involved however, and likely took some expensive software to develop. I especially liked the Design Can Change site, it was an excellent example of how art can have a higher purpose.
Typographica is another beautifully understated site with a design that conjures up pleasant memories of old books and newspapers. I was very impressed with how the designers seamless blended so many images in a manner that they appeared as text. The manner in which links were bolded and underlined at the bottom gave that part a very awkward look though.
http://www.microsoft.com/typography/default.mspx
Microsoft Typography, like everything that comes from Microsoft, struck me as rather self-serving and self-congratulatory. I can’t help but wonder why Internet Explorer is so very limited in font display if all the claims on this site are really true. It does strike a hopeful tone with all the talk of type development and the new fonts on Windows 7, but I have a very hard time believing a single word that Microsoft says.
http://abc.planet-typography.com/
The abc typography site has a very beautiful, minimalist design with a shifting color scheme that works very well. A lot of the links were broken, which I found annoying. But it definitely had some interesting information and free resources.
http://www.alistapart.com/topics/design/typography/
A list apart has an interesting three-tiered layout with an achromatic color scheme that works very well. It was left-aligned as opposed to centered, which created a great deal of distracting whitespace on my widescreen monitor. There were definitely a lot of interesting resources, perhaps even a workaround for the justification problems Beaird pointed out.
http://www.rsub.com/typographic/
typoGRAPHIC contains some interesting imagery but is very short on content. The timeline mostly recorded the births and deaths of individuals without making any comment on their contributions or why such information was relevant. The anatomy portion required a plug-in that I was unable to install, something that always annoys me about a website when I encounter it.
http://www.digital-web.com/articles/css_typography/
Digital web magazine was the opposite of the previous site, short on aesthetics but high in good, relevant content. The design was very bare bones and, again, the left-alignment as opposed to centering of content I find very distracting to to the overwhelming amount of whitespace it produces. I like the focus on readability and comprehension. After all, the purpose of the World Wide Web is to be a tool for communication and these things will allow people to communicate better on the web.
http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
The Noupe design blog is a very beautifully textured site with some great advice. I certainly wish more web designers would read the advice on centering elements. I found it hilarious that so much of the topics dealt with bugs in Internet Explorer. I have no idea why so many people use it given how many problems are associated with that software.
Design snips has a beautiful minimalist design with a red and black color scheme that works very well. A lot of the featured designs were very impressive, I am glad to see that not everybody gives kudos to comically overdone sites. I was particularly impressed with Alex Buga’s site; the use of color and user interactions was just wonderful.
Final Thoughts
I must say that I am enjoying my foray out into the great big internet. It is very satisfying to see my efforts beginning to bear fruit. In a lot of ways I don’t want it to end, but I deal with these feelings by focusing on my next efforts once I have mastered the basics. Developing a skill is a never-ending process, and one never should be content with their current level of knowledge. Life’s a journey, not a destination.
Until next time, take care of yourselves, and one another.
Farley
Leave a Reply
You must be logged in to post a comment.