Week 12
November 21, 2010
One giant leap
“To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment.”
- Ralph Waldo Emerson
At long last, it is finished. My website is published and freely available for all the world to see. It is so very different from those first exercises, and now I can only hope that some other graduate student will find some use in it. It is a tool for learning, but it is a unique expression of my own personality at the same time. As the semester comes to a close I feel I have accomplished my goals and I can move on with confidence. Already I am laying out the blueprints for my next site, but now the time has come to say goodbye to this course, to the work on this site, and to this blog. Let it be known that on this day a hopeful graduate student first made a little bit of the World Wide Web his own.
I came in peace for all mankind.
Farley
Week 11
November 9, 2010
The finishing touches
“Art is never finished, only abandoned.”
- Leonardo da Vinci
Introduction
It is almost over. Much care has gone into the production of my web site. Many long hours spent agonizing over the merits of the smallest of creative decisions. Towards the end I find the hardest part is resisting the urge to perfectionism. It is hard to know when the time has come to declare a given work good enough and walk away. But there will always be deadlines, and there will always be a new project beckoning, and so it must be done.
Website Review
www.smartwebby.com/web_site_design
Smart Webby definitely has a lot of helpful articles on a number of topics. I felt much more comfortable with my own design decisions after reading their Web Design Tips article. I will definitely make sure to include a lot of well-placed white space and use fonts on the “safe list” on every website I am involved with in the future. Some of there Dreamweaver Templates looked pretty nice but I am not sure about having a “designed by smartwebby.com” tag on every page.
Final Thoughts
A web site, as with every creative work, is never truly finished. Of course there is always one more stroke that can be made. One more minor tweak, another small improvement that might just be the difference between a pedestrian work and a true masterpiece. While this urge can make one’s creation more beautiful, it can also make it quite overdone. Sometimes the best artist is the one who knows when it is time to walk away.
Until next time, take care of yourselves, and one another.
Farley
Week 10
November 2, 2010
Use your imagination
“Human achievement is limited only by human imagination.”
- Albert Einstein
Introduction
This week’s assignment focused on beautiful web designs, and I found my thoughts drawn to the imagination necessary to produce it. To me, the most beautiful thing about web design is the ability to transfer one’s imagination onto the screen for all to see. As my website grows very near to completion I find that I am overwhelmed by the limitless possibilities for the next one and the one after that. All of the very best achievements in art and science have come about as the result of imagination, and now we have the ability to share it with one another instantly.
Website Reviews
CSS Remix was a collection of very beautiful sites. This kind of design is definitely beyond my current skill level but it is definitely something to work for. I especially liked the gorgeous mix of images and fonts on the Lost World’s Fairs site.
CSS Nature had some very appealing nature designed sites listed. The About Trees site did an especially wonderful job of design with an organic theme. If I ever find myself with money to spend on a design template it will most likely be their Sheriff “eco template”.
CSS Moon had a beautifully designed site that pointed the way to plenty more. Their header was very nice and I was impressed with the mouseover event of site previews the mouse was over being displayed in the header. Their templates looked nice but $49 is just a tad out of my price range.
The Oriental Gallery was a great collection of wonderfully designed sites that most Americans would never come into contact with. I think it is a great idea to look to other cultures for artistic perspectives one has not considered. DCM Entertainment had an especially impressive site. It took a while to load but the brilliant animation more than justified the wait.
CSS Blaze was another very interesting web gallery. I liked the option to search by color as well as category. {6creations had an especially impressive site. If I ever hire a web designer it will most likely be them.
UniqueCSS is definitely a site that lives up to its name. There were only 4 sites profiled but they all demonstrated a great deal of creativity. My vote went to www.hippoapp.com. The interactive animation features definitely got my attention.
The CSS Based Web Design Gallery was another beautiful collection of web sites that was presented very well. Simplicity is definitely beautiful to find in this age of overdone websites. 61pixels demonstrated an especially beautiful mix of image and texture.
One Page Love is an interesting site with a wonderful concept. Digital sprawl has reached the point that many sites have become difficult to navigate, I was glad to see focus on simplicity. The page for Javierandrés Mesa is especially well done. The texture is beautiful and the grungy look works very well.
Cool Websites was a well-done site that lives up to their promise. Their design is deceptively simple but proves that websites do not have to be overdone to look good. The use of reflections especially gave it a wonderful texture. My vote went to Big Spaceship. They have a great black and red design, nice typography and some beautiful 3D artwork on display.
Final Thoughts
My nearly completed website is a wonderful testament to what is, and all of the beautiful sites that I have reviewed show what can be. As my hard work begins to pay off, I see how the web can be used to translate imagination into reality. The human mind is a very powerful engine to create, communicate and enlighten. Imagination is the fuel that fires that engine.
Until next time, take care of yourselves, and one another.
Farley
Week 9
October 21, 2010
End of line
“Every new beginning comes from some other beginning’s end.”
- Seneca
Introduction
This was a week of endings. After many weeks it felt rather strange to have no textbook readings. The planning stages of my website development are completely at an end. I can see very clearly in my mind’s eye what the finished product will look like, and design work on the majority of the pages has ended as well. I am always saddened by endings and long for a sense of the familiar. But every ending carries with it a new beginning, and with every beginning is hope.
Website Reviews
FlashVista was an interesting site with a lot of resources available. I was not quite sure how some of them were related to Flash, but if nothing else it showed me how versatile a tool Flash is. The tutorials were especially helpful.
http://www.lukamaras.com/tutorials/cool-design/hitech-floating-menu.html
The floating menu tutorial was quite long and involved but the final product looked very beautiful. I did not quite understand all of it and it seems to be giving instructions to using software that I do not have. It is definitely something that I would like to learn to do someday and it showed how very involved and difficult Flash is to use.
SitePal was an amazing and somewhat unsettling site. The avatars were realistic to the point that it made me a bit uneasy. Still, it looks like a feature that could be combined with “semantic web” technology to improve navigability and accessibility by leaps and bounds. I don’t think I would want to pay $10 a month for it however.
http://www.adobe.com/products/flash/
The Adobe Flash site was beautifully designed and certainly looked very impressive. Like all Adobe products, however, the price tag caused sufficient sticker shock to dissuade me from even considering a purchase. Even an educational license was way outside of my price range, and I don’t think immersive 3D imaging is a necessary enough component of a website to merit the cost.
http://www.erain.com/Products/swift3d/
Swift 3D is another software that looked very impressive. The reflections and shadows certainly make the images look very convincing. It was not nearly as expensive as Adobe Flash, but it was still well outside of my price range.
http://www.swishzone.com/index.php
SWiSH was another site full of beautifully designed 3D graphics. Their MiniMax3 product was almost affordable as well. If I ever decide to purchase Flash software, this will most likely be it.
The HotScripts site is impressive with the sheer volume of scripts available. Looking through their JavaScript folder I didn’t see anything that I thought would really improve my site. It is definitely good to know it is there however.
http://www.soundstageav.com/mastersonaudio/20050201.htm
The SoundStageAV site contained some very interesting information. I found the history of the format especially interesting and it is good to know the information on how people react to certain wavelengths of sound as well. I do not plan on any audio component to my site, but this will definitely be helpful should I do so in the future.
http://www.selfseo.com/story-13698.php
The information on streaming audio looks very useful. The instructions do not seem to be that complicated and were quite easy to understand. If I ever decide to set up streaming audio I will definitely look into this method.
http://audacity.sourceforge.net/
Audacity definitely looks like very impressive software. I am very glad that software like this is available on an open source basis. If I should ever require sound editing then I will certainly start here.
Musicovery is a very beautifully designed site and the concept looked interesting. I did not want to sign up for an account due to spam concerns, so I did not get to test it very much. It did look like an interesting way to find some of those “deeper cuts” that never get played on traditional radio.
Pandora was a very impressive site. I have heard about it often but this was my first experience with it. As soon as i logged in it began playing music that I liked based on artists I had “liked” on my facebook page. It definitely looks like Pandora is deserving of it’s reputation.
http://www.w3.org/Amaya/Amaya.html
Amaya looks like a very easy to use WYSIWYG web editor. I don’t see myself using it as I have become somewhat spoiled by Dreamweaver’s split view option that allows me to make changes to the code and see the effects of those changes simultaneously. I would recommend it to friends who have no prior experience with web design.
http://www.trellian.com/webpage/
Trellian looks like a very useful code entry module. It would definitely be easier to use than notepad and the color change and automatic indentation features would be very appreciated. I would miss the ability to see the code I am entering being rendered in real time that I enjoy with Dreamweaver though.
http://www.seamonkey-project.org/
Of all of the free editors I have looked at so far, SeaMonkey definitely looks like the best. The ability to see the XHTML code as well as a browser preview would be quite helpful. I have been a fan of Firefox for many years and I am very glad to see that Mozilla offers a Web editor as well. If I ever need an alternative to Dreamweaver, SeaMonkey will be it.
Final Thoughts
As my journey comes nearer to the end than the beginning, I must say I am nearly as excited now as I was when I first started. The biggest problem I am having is resisting the urge to perfectionism. I find myself having to evaluate features that I am learning and only including those that would make a genuine contribution to the site. I believe this to be related to my love of this journey and my desire for it to continue. But all good things must come to an end, and there will always be a new road beckoning the expectant traveller.
Until next time, take care of yourselves, and one another.
Farley
Week 8
October 12, 2010
Speak to me
“To effectively communicate, we must realize that we are all different in the way we perceive the world and use this understanding as a guide to our communication with others.”
- Anthony Robbins
Introduction
This weeks readings focused on the use of images and sounds to improve the way that websites can be used to communicate with others. I found my thoughts drawn towards the topic of communication. Every human being is unique. We all learn and acquire information in subtly different ways. Different people can have different perspectives of the exact same phenomena. What makes the internet such a powerful tool for communications is the way in which so many different mediums of communication (sound, writing, images, etc.) can be brought together and woven into a common message. This is most likely why so many people in this world know use the internet as their primary source of information, and this percentage grows with each passing year.
Notes on Readings
MacDonald, Chapter 15
In Chapter 15, “Fancy Buttons and Menus,” MacDonald instructs the reader in using JavaScript to create interactive site navigation features. Fancy buttons are generated by taking graphical images and using JavaScript to tie two or three images to a button that changes when the user drags their mouse over it (or clicks on it). There are many websites where one can generate button images for free such as www.buttongenerator.com. One picks from a list of buttons (many of which are free), creates two versions of it (the original image and the mouse-over image), adds text (each line of text will be a separate button) and aligns everything so that the buttons can be used as a single menu. One must download each image separately. Once the images are saved, add the JavaScript into the XHTML files. Creating array lists simplifies the coding as URLs for the images only need to be typed in once (lists in JavaScript always begin with 0). The ChangeImage function is then used to swap the two images on mouseover and mouseout events. Pre-loading the images will insure that these events happen rapidly. Dreamweaver simplifies the creation. One simply selects Insert→Image Objects→Rollover Image and selects the images used and URL the link will lead to.
For larger websites that require many links to navigate, the use of collapsible menus is recommended. One creates <span> elements for the main menu and <div> elements for the sub-menus. One then uses the MakeVisible( ) JavaScript function so that sub-menus appear as a mouseover event and disappear as a mousout event. This feature is highly complex and the use of third party menus is recommended. One will download several files in .js format that can be customized. One then uses a series of <script> commands based on the readme file to place the menu on the desired location on the page.
This chapter was a lot to take in. I find it mind-boggling that instructions this complicated are needed merely to add two features to a site. I suppose there is a lesson in that, however; websites are a complicated animal and nothing is ever simple. JavaScript is still looking like Danish to me so adding some new features should give me some much needed practice. While my site is not really big enough to require collapsible menus, I believe that using “fancy” buttons instead of simple links will likely improve the aesthetics of my site.
MacDonald, Chapter 16
In Chapter 16, “Audio and Video,” MacDonald gives a brief tutorial on the inclusion of multimedia elements in a site. One method is to include a link to an audio or video file hosted on one’s own web server. When a visitor clicks the link they will download the file. Embedding the files allows for the integration of multimedia onto the web page itself. One can store such files on their own server or use hosted multimedia from a third-party server. Using the <embed> element will create a player in the visitors web browser. Use of the autoplay="false" attribute is highly recommended as it gives the visitor control over playback and will stop the downloading of multimedia files from slowing down page loads. The <bgsound> element can be used in conjunction with JavaScript to create sound effects for a page but only in Internet Explorer version 5 and later. Free MP3 players such as E-phonic can be used to add better graphics and more functions to a sound player.
Video content has become very popular in recent years although it is very challenging. Video files tend to be rather large and are made in an array of file formats. Use of a video host such as YouTube is highly recommended in order to produce video clips that will play in most browsers and will not require a great deal of storage and bandwidth from one’s own web server. First, one must prepare the video clip. Compressing the file prior to uploading is recommended as YouTube has a 1 GB limit per clip. Then sign up for a YouTube account and upload the video. One will be provided with a few lines of XHTML to copy and paste in the desired location of the video player on the web page.
I found this chapter to be much more readable than the last one and also very, very helpful. Everyone has different learning styles, and multimedia can be used to accommodate more than one in an educational website. I had always thought of YouTube as a site where people posted videos of dancing babies and cats with bacon taped to them, but the informative applications MacDonald pointed out will be quite useful. I definitely feel like the information in this chapter will help me make several improvements to my site.
Website Reviews
http://en.wikipedia.org/wiki/Wikipedia:Public_domain_image_resources
I have always loved WikiMedia’s understated blue, black and white color scheme. The layout is very readable and easy to navigate. This is a wonderful source for public domain images, it is certainly a great resource for imagery.
http://www.libraryspot.com/images.htm
The library spot website contained some distracting and clashing yellows and more than half the screen was blank on my monitor. A lot of the image resources were the same as on the WikiMedia page, I did not notice any original resources. There was a link to AltaVista, which leads me to wonder how long it has been since this site has been maintained.
The read write web site has a beautiful red and black color scheme with a very readable three-column layout. The content was rather journalistic in nature and not particularly helpful for me as it dealt with such topics as mobile apps and reactions to the film “The Social Network.” Their article on the top ten YouTube videos was rather interesting if somewhat depressing.
The footnote site was very busy with a distracting amount of images and text blocks shoved in together rather close. The search feature was very slow and difficult to use. I had to add a great deal of refinements to any search before it pulled up anything but a long list of redacted government documents.
http://www.adobe.com/products/photoshop/index.html
The Photoshop website was very slick, commercial and obviously intended as an extended advertisement of their product. I have looked into using Photoshop before but I fail to see how the functionality justifies the outrageous price tag. Visiting this site renews my commitment not to use Photoshop if I can possibly help it.
http://www.adobe.com/products/fireworks/
The Fireworks website showcases the same buy-it-now commercialism found on the Photoshop website. Granted this product is much more affordable, but I am not convinced that it would be wise to part with so much money just for pretty pictures. I will stick with the free options for the time being.
The GIMP site is very well done. The dark colors are easy on the eyes, a few dashes of orange catches the visitor’s eyes subtly, the animated header is fun and aesthetically pleasing, the layout is very readable and the “web 2.0″ theme is very well done. The appearance of the GIMP site is a very good reason for using it.
The GIMPshop website was not nearly as well done as the main GIMP site. The header demonstrated a very clever use of novelty fonts, but all of the white space left this site looking sloppy as opposed to the high-tech feel of the main site. I believe I will stick with standard GIMP for now.
Final Thoughts
Now that mass communication has proliferated to the degree it has, it will soon become much more important. The user-programmable “web 2.0″ is still a relatively new phenomenon, and it’s impact will be unknown for years to come. Mass media that is controlled by real people instead of corporations is surely a blessing, and user education is very necessary to help all take full advantage of the new technology. Now we can all speak our minds, and perhaps we can finally hear what we have to say to one another.
Until next time, take care of yourselves, and one another.
Farley
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
Week 6
September 28, 2010
Hands holding hands
“What should young people do with their lives today? Many things, obviously. But the most daring thing is to create stable communities in which the terrible disease of loneliness can be cured.”
- Kurt Vonnegut
Introduction
This week’s readings focused on attracting visitors to one’s site and knitting them together into a community. This got me thinking on the subject of community. The internet has taken a lot of flack for giving people the illusion of community, as remote interaction through email or facebook status updates is a far more remote and less meaningful form of interaction than talking face to face. But to focus on the downside would be to ignore the benefit. The ability to reach out and touch someone, instantly, anywhere in the world is certainly a tremendous asset. One can find a community of people on the web who share just about any interest, from collecting comic books to third world development. It is important to remember that technology is but a tool, it is how we use it that carries a moral connotation
Notes on Readings
MacDonald, Chapter 11
In Chapter 11, “Attracting Visitors,” MacDonald discusses methods for encouraging users to visit a site as well as tracking visitation data to optimize a site. One promotional method is reciprocal links, in which webmasters each agree to post links to the others site within their own. An alternative is to join a Web ring. This will add a tool for mutual browsing to a group of sites dealing with a similar topic. Also, one can add links to their site on discussion board postings. Webmasters are also advised to update their sites continually in order to attract repeat visitors.
Meta elements can add descriptive information to web pages that are not visible to visitors but may boost search rankings. They are placed within the <head> element (next to <title>). They can be used to add descriptions or keywords to the page’s metadata. Descriptions will be a part of search engine result displays. Keywords should include subjects, synonyms and alternative terms (e.g. <mata name="keywords" content="library and information science, library, information, library science, information science, library science resources, information science resources, library and information science resources, history, library history, student resources, graduate student resources, library school resources" />).
Directories are lists of sites grouped by topic and edited by humans. Getting a site listed in a directory can attract new visitors and boost search rankings. The largest is the open directory project at http://dmoz.org. Search engines are the most commonly used tool for finding information on the web, and Google is the most commonly used search engine. Most sites are indexed within a month, but one can submit a url to Google to have it added to the index. Rankings are based on a system called PageRank. This ranks sites based on several factors, to include:
- How many sites link to it
- How high the PageRank of linking sites are
- How many links the linking sites have
In order to gauge the effectiveness of site marketing strategies one must keep track of visitation statistics. Many premium web hosts will include tools for doing so. If not then one can use Google Analytics for free. A webmaster will register a site and receive a few lines of JavaScript code to add to the XHTML (at the end of the <body> element, just before the </body> command). Google’s servers will then track site usage and make those statistics available online. It will monitor the number of visitors, how visitors got to the site,time and duration of visit as well as (estimated) geographic location.
This was a very useful chapter that I will certainly refer to should I ever find myself working on a larger web project. It will be interesting to add meta elements to my site and see what that does to it’s Google ranking. Google Analytics looks like a very useful tool. I look forward to learning it’s use now and will definitely put it to good use in future projects. The only drawback seems to be that one can quite easily end up obsessively following their site statistics at all hours of the day and night.
MacDonald, Chapter 12
In Chapter 12, “Letting Visitors Talk to You (and Each Other),” MacDonald advises the reader on building tools for personal interactions into sites. The first step is allowing visitors to email the author. This can be done with a mailto link; a standard <a> element with hyper-references proceeded by mailto: and then and email address. One can add subject lines and body text, but no punctuation is allowed and %20 must be used instead of spaces (e.g. <a href="mailto:fjenkins@mail.usf.edu?subject=Site%20Feedback&body=I%20love%20your%20site">Email Me</a>).
XHTML forms allow for standardized replies. All parts of a form must be contained in the <form> element (placed in the <body> section). Most elements are added with the <input> command, with different attributes displaying different tools (e.g. <input type="checkbox" />). If the text spans more than one line the <textarea> command must be used instead. One can have a form emailed by adding a submit button (e.g. <input type="submit" value="OK" />) and putting a mailto link in the <form> command (e.g. <form action="mailto:fjenkins@mail.usf.edu" method="post" enctype="text/plain">). Option buttons can be added with a “radio” type input, one must add a “name” attribute with the same name for a group of buttons of which only one can be selected. Drop-down menus can be created with the <select> element. A separate <option> value must be placed in the container for every selectable option desired. For example:
<select name="ReferredBy">
<option value="Friend">A Friend</option>
<option value="Google">Google Search</option>
</select>
If a visitor were to select “Google Search” from the drop-down menu, then the email would contain the line ReferredBy=Google.
Discussion forums can allow visitors to exchange tips, interact with one another and provide feedback to site creators. Usually only very large organizations will host their own forums. One can use a third-party provided forum, but usually this will result in ad displays on discussion pages. Google Groups provides free discussion forums with a minimum of advertising.
I found this chapter to be very relevant and full of helpful information. After all, the purpose of the internet is to be a tool for communication. If visitors to my site have no way of interacting with me then really I have failed in my goal to communicate. The site I am working on now will definitely not be big enough to merit a discussion forum, and I seriously doubt anyone would be interested in a Google Group on a small student project, but I will at least give my visitors a link to email me. The rest will serve as a useful reference should I ever find myself working on a much larger project.
Beaird, Chapter 4
In Chapter 4, “Typography,” Beaird discusses how typesetting issues can affect the look and feel of a site. The safe list is the 9 fonts that will display on every operating system, they are:
- Arial
- Arial Black
- Comic Sans MS
- Courier new
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
Displaying text in images assures that every viewer will see the original typeface, but this can be a laborious process. sIFR is a program that uses Flash and JavaScript to insure uniform display of text
Some commonly used typographical terms are:
- Baseline: The imaginary line on which most characters sit
- Cap Height: The height of all capital letters
- Crossbar: Stroke that connects two lines in “A” and “H”
- Serif: Finishing stroke at the bottom and top of certain letters
- Meanline: Top edge of most lowercase letters
- Bowl: Rounded curve enclosing negative (empty) space
- Descender: Lower portion of some lowercase letters that extends below the baseline
- Counter: Negative space within certain letters
- Stem: Main vertical or diagonal strokes of certain letters such as “L” or “W”
- Tittle: Dot above lowercase “i” and “j”
- Terminal: End of a stem or stroke with no serif
- Ascender: Extension on some lowercase letters rising above the meanline
- Leg: Lower angled strokes in “K,” “R” and “Q”
- Ligature: Combination of characters
- X-Height: Distance between baseline and meanline
Letter-spacing is a CSS property that can adjust spacing between letters, word-spacing can adjust spacing between words, and line-height can adjust spacing between lines of text. Distinct types of fonts include:
- Serif: Mostly used for headings
- Sans-Serif: Mostly used for body
- Handwritten: Used to give sites a more personalized feel
- Fixed-Width Fonts: Mainly used to assure that numbers and lines of code line up
- Novelty: Mainly used for decorative purposes
- Dingbat: Can be used as supportive graphics and icons
The right font for a given site depends on the kind of feeling one wishes to evoke. Font size can be set using pixels (although this can cause text to be non-resizable for some viewers), em spaces or a percentage of default size. Most non-ASCII characters and some used for XHTML coding must be displayed using an entity code (such as < for the less than [<] sign).
This has been my favorite chapter of Beaird’s book so far. While I have never had much faculty with the visual arts, typography has always been a subject that held much fascination for me. While not exactly a “typophile,” I found it enjoyable as well as useful to compare the different types of font to see what kind of feelings they evoked. I have always used a very standard 12-point Times New Roman font for just about everything I have produced in the past, but I believe with this site I will experiment a little. I will most likely try a larger serif for headings, perhaps even a handwritten font for the topmost titles of pages, with a more readable sans-serif font for the body.
Website Reviews
Urban Dirty is a fascinating, if somewhat risqué, site with a dark counterculture feel to it. The use of the novelty font for their logo gave it a distinct branding while the text was in a very readable sans-serif font. The layout left a little to be desired, as the left-centering left nearly half a screen of white space on my widescreen monitor.
http://www.flickr.com/groups/564994@N20/
The Best Textures Flickr group contained many fascinating images that would certainly be very useful in web design. The site has a very bare-bones look to it, and is obviously not a professional site. I was slightly puzzled that the images would be so small in a Flickr group site as that is the raison d’être of Flickr.
http://www.flickr.com/photos/torley/collections/72157594588432564/
The Torley Textures site was another fascinating collection of images. Most look like they would be too busy and distracting to be of much use for a web page, but I definitely saw a few diamonds in the rough. With so many images, however, sorting through them and testing them to find which would work is likely to be time-consuming for any who try
http://browse.deviantart.com/resources/textures/
deviantART was another fascinating site with a wide variety of images available. The layout was much more suited for widescreen monitors, making it easier for me to browse the images. Most were rather large, but a few could make useful backgrounds with some compression and tiling.
Texture King had some original ideas for textured backgrounds. The site was mostly understated with some clever splashes of orange that drew the viewers attention nicely. Most of the images looked to big to be used without some additional work, but the inability to preview prior to downloading made it difficult to judge.
http://www.grungetextures.com/
Texture King has a very beautifully designed website with an analogous brown color scheme that worked very well. They definitely seemed to focus more on artificial than natural backgrounds, which I found somewhat disappointing. Some of the free images could be put to good use by a creative designer, but the site seemed focused on selling their pay-per-download images.
http://www.smashingmagazine.com/2008/01/29/grunge-style-in-modern-web-design/
The Smashing Magazine piece on the “grunge” style was very well done and contained many eye-catching examples. I found it fascinating that their site maintains a very “web 2.0″ look even as they declare it a passing trend. Most of the examples they showed seemed rather busy, personally I prefer sites with more simplicity. I did find the W-Enter Textures to be great example of how the style could be done without giving the viewer a headache.
http://vandelaydesign.com/blog/design/photoshop-tutorials-textures/
The Vandelay Design site was beautifully designed with a wonderful use of the achromatic color color scheme. Their ideas for design looked very interesting, if terribly overstated in a few cases. I do not have photoshop and I am not likely to be able to afford it any time soon, however, so for now I will have to make do.
http://www.modernlifeisrubbish.co.uk/article/2007-more-web-design-trends-and-cliches
The 2007 Web Trends page design mostly kept it simple, although the orange and brown colors seemed to clash rather badly. I completely agreed with the author’s take on overdone site design, I find it more annoying than inviting. His point about dark grey backgrounds was well-made, I have decided on a similar design scheme for my site.
http://www.smashingmagazine.com/2007/03/10/web-20-tutorials-round-up/
The Web 2.0 Tutorials Round-Up was another fascinating look at recent design trends. The sheer volume of the collection was rather impressive, although the amount of scrolling time it takes to reach the bottom doesn’t exactly invite the viewer to take a look at everything. Most of the tutorials seemed to be focused on Photoshop, so I don’t know if they will be of much use to me.
http://www.modernlifeisrubbish.co.uk/article/screen-resolutions-and-aspect-ratios-worldwide
The Modern Life article on average screen ratios resolutions and aspect ratios was fascinating and very informative. The author’s point is well made, most of the sites I visit seem a poor fit to my high resolution widescreen monitor. Still, I would hate to put off any visitors, so I will seek a design that will work well with all size monitors.
Final Thoughts
When it comes to building community, the internet giveth and the internet taketh away. Is it better to interact remotely with many people from many cultures, or would we be better served by going outside and talking to others in our own communities? It is up to us to find the right balance. The ability for exposure to people from different parts of the globe and walks of life certainly promotes understanding and peace in the world, and that is a good thing. But it would not be good to neglect our own communities, and perhaps we the people of the World Wide Web should be directing our resources to raising awareness of community issues. After all, this power of instant, worldwide communication gives us the power to change the world, and it’s in our hands.
Until next time, take care of yourselves, and one another.
Farley
Week 5
September 22, 2010
Everything that rises must converge
“A rare experience of a moment at daybreak, when something in nature seems to reveal all consciousness, cannot be explained at noon. Yet it is part of the day’s unity.”
- Charles Ives
Introduction
This week’s readings focused on the subjects of pulling all of the disparate pages and elements of a site together into one. I found my thoughts drawn to the subject of unity. Certainly web technology brings with it many promises of unity. The unity of man and machine, the unity of all of the world’s peoples drawn together by a common communication medium. Unity is also a very important principle of design. As I lace together the pages of my site one by one, I seek that unity of ideas that can draw together designer and user
Notes on Readings
MacDonald, Chapter 9
In Chapter 9, “Page Layout Tools,” MacDonald instructs the reader in dividing a web page into parts. He names the two methods by which this can be achieved, using an invisible table and using CSS rules for a style-based layout. He explains the difficulty inherent in designing pages for multiple screen sizes as well as the two options for doing so:
- Proportional Sizing: The layout will shrink or expand depending on the size screen it is being viewed on; reduces white space but can cause text to appear very large or very small
- Fixed Size: The layout will always look the same but must be reasonable for a variety of different browser settings
Next, MacDonald discusses the element of tables on web pages. The entire table must be contained in a <table> element, every row within a <tr> element, headings (optional) within a <th> element, and the information in each column within a <td> element. Borders can be added with border attributes (e.g. <table border=”1″>) and default borders can be changed with CSS style rules. The table’s dimensions can be specified either as a percentage of the window (relative) or as a specific number of pixels (absolute).
MacDonald then explains how the <table> element can be used to position virtually every element of a table on the page. However, this is not recommended for large sites as even minor changes will need to be copied onto every page. The preferred method is to use the <div> element in conjunction with CSS style rules, thus changes to a linked .css file will be applied to every page in the site. A contextual selector can be used to affect only certain elements next to one another in the type selector (e.g. ul b { color : red } will make only bold text in unorganized lists appear red). An id selector can be used to specify a rule appearing only once. This is done by using a pound sign rather than a period to specify the rule name (e.g. div#Menu means that the Menu divider can only be used once in a page) and by using id= rather than class= in the attribute field.
MacDonald moves on to discuss different ways <div> commands can be used to divide a page. The float : right or float : left style rules can be used to create floating boxes of text. A z-index style rule can be used to layer various elements. The browser will always display the element with the greatest z-index on top. MacDonald concludes with tips for combining relative and absolute values.
While I have been using <div> elements and CSS style rules to organize my site, it is good to know more options available with the method. One disadvantage of using Dreamweaver is that it is so user-friendly that sometimes I will adopt a given method without understanding the principles underlying it, thus I will often be unaware of the alternatives. MacDonald definitely made the invisible table method sound like more trouble than it is worth, so I will definitely it on my site. Still, it is helpful to know how to display information in tables. I doubt there will be any on my site but it is a useful future reference kind of item.
MacDonald, Chapter 10
In Chapter 10, “Multipart Pages,” MacDonald discusses the ins and outs of building sites with many web pages that share a similar appearance. The 3 methods for synchronizing page layout are:
- Server-Side Includes: Will copy contents of one page into others but is not supported on all types of web servers
- Frames: Will display more than one web page in the same browser window, frowned upon and complicated method
- Templates: Dreamweaver and Microsoft Expression Web features that allows one to create content in one page that is repeated to every page on the site, method is application-specific
Server-Side Includes (SSIs) are instructions for a Web server to include common content (not style) on every page of a site. One will save a file with part of an XHTML document (e.g. menu.htm) and then use a command to insert these lines into the web pages (e.g. <!–#include file=”menu.htm–>. However, this will not work in files labeled .htm or .html. One must append files for Apache servers as .shtm or .shtml and files for Microsoft IIS Web servers as .asp or .aspx. Files saved on a client hard drive cannot be previewed with the inserted content.
Frames must be contained within the <frameset> element. Frame column or row distance must be set by percentage of window or as pixel values (an * can be used to denote “all remaining” when absolute values are used). All frames must be given in a named attribute (e.g. Menu) and a source attribute (e.g. menu.htm). All links must specify in which frame the new page is opened in a target attribute (e.g. <a href=”welcome.htm” target=”Main”>Welcome</a>). A target=”_blank” specification will open a new window for the link. Frames will have a resizable border by default, this can be eliminated with frameborder=”0″ and noresize=”noresize” attributes. Scroll bars will appear for each frame with content too large to be viewed in one window (this can be eliminated with a scrolling=”no” attribute). It is a good idea to include <noframes> elements in case a viewers browser does not support frames
Page templates are a simpler tool for batch editing. They can be time consuming as the editor will need to apply changes to every file, and fragile as it depends on a few comments it is easy to accidentally delete. First, one simply selects File → New → Blank Page → XHTML Template → Create. Then the designer will create an XHTML file as normal but insert comments (e.g. <!–TemplateBeginEditable name=”body”–> and <!–TemplateEndEditable–>) in between the regions one wants to appear different on each page (typically the title and main content areas). MocDonald concludes the chapter by warning the reader of the many subtleties involved in using this method.
This chapter certainly gave me an appreciation of the many complexities involved with technology in general and web design in particular. I feel very fortunate to be starting small, as managing larger sites is definitely a daunting task. In particular the frames method struck me as being horrendously complicated, I doubt I will use it if I should find myself attempting to create a larger site. MacDonald did a wonderful job of pointing out the quirks of each of the methods described, and there is certainly a valuable lesson to be learned about paying attention to detail.
Beaird, Chapter 3
In Chapter 3, “Texture,” Beaird discusses the elements of digital imaging for the web. He begins with the basics to include:
- Points: The most basic unit of form
- Lines: Several points joined together
- Shapes: Lines that are joined together
Shape can be used to make web sites look more inviting in a variety of ways. Rounding the corners of squares and rectangles give sites a more organic feel. One test of shape is the economy of line, which involves tracing over a picture to see if the outline still looks complete. Three dimensional concerns include:
- Perspective: Smaller objects appear farther away
- Proportion: Size can represent distance as well
- Light and Shadow: Can be used to make objects appear fuller and more noticeable
Patterns can be used to add texture to sites with very little storage through tiled backgrounds. Background images can be patterned in a similar manner, either across the whole page or only the x- or y-axis. Several elements are combined to form a distinctive style. The appearance of age can convey a sense of nostalgia. Light animations can create a child-friendly page. Large type and generous use of white space can give a site an advanced “web 2.0″ look. Beaird concludes with a recommendation to read up on art history to get a feel for exploring new artistic territory and giving examples from his Florida Country Tile project.
As always, Beaird gave me a lot to think about. I found it particularly helpful to think of web images as a collection of dots, lines and shapes. His suggestion to look to art history for further information regarding the development of style I also found helpful and I certainly plan to do so as soon as I get time. I feel like at this point I have a relatively firm grasp on the science of web design, but I have always been somewhat of a stranger to art in all of its forms. I am very grateful for a book like this one that can use something I know to connect me to the principles of art.
Website Review
Colors on the web was a very beautiful site with an organic design that reminded me of the rainbow of light coming out of the prism. I found the part on the physics of colors very interesting, it made me wonder why a color wheel based on the electromagnetic spectrum is not used. The color wizard and “spin the color wheel” tools I found very useful and will most likely take advantage of in future endeavors. I was somewhat annoyed that the color basics and color scheme library was not available, but I am sure that once the author completes the reworking of the site referenced on the blog it will be an even more useful reference.
Final Thoughts
In many ways it is at a beginning rather than at an end that the underlying unity of all things is apparent. As my site begins to take shape, the possibilities begin to crystallize in my mind and I see how it can fit into the larger universe of art and science, technology and communication. Soon it’s time will come, others will share in it and the joy of my creation shall be complete. Then it’s time too shall pass, and I shall move on to other things, but always there will be new creations. New territories to explore. New vistas of the mind to expand the consciousness and take away the breath. The server space will be recycled, and another student will know the joy of creation that I have found. Birth, death, and rebirth; such is the cycle of time that we all are a part of.
Until next time, take care of yourselves, and one another.
Farley
Week 4
September 14, 2010
A work of beauty
“In every man’s heart there is a secret nerve that answers to the vibrations of beauty.”
- Christopher Morley
Introduction
This weeks readings were mostly focused on designing websites that are aesthetically pleasing. Certainly this is a topic of the utmost importance to web design. When done properly, the appearance of a website can draw in users and direct their attention to helpful information. Research has shown that users will learn more from websites they find aesthetically pleasing. But to me aesthetics is a topic that goes beyond the surface. Beauty can suffuse life with meaning that is more powerful than that which can be described with mere words. The creation of beauty is a noble undertaking, and I remind myself to strive always to bring a little bit of beauty into a cold and barren world as I seek to carve out my own niche on the web.
Notes on Readings
MacDonald, Chapter 7
In Chapter 7, “Adding Graphics,” MacDonald discusses the ins and outs of adding images to websites. He begins with a description of the <img> command, to include adding alternate text, titles and sizes. He then moves on to the image file formats used on the web, which include:
- GIF: Used for text displays with few colors (such as logos)
- JPEG: Used for photos and other images that require compression
- PNG: Suitable for all kinds of images but does not compress well
MacDonald then explains that these are raster graphics which display images as grids of dots as opposed to vector graphics which display images as mathematically rendered shapes. He moves on to a discussion of compression; reducing the amount of disk space required to store an image. He explains that GIF and PNG files are lossless, preserving image quality but inhibiting compression, while JPEG files are lossy, allowing greater compression but often at the cost of image quality.
Next MacDonald discusses including images in the page. He gives instructions on using CSS style properties to include inline images with wrapping text. He explains how to use the <span> element to add pictures with captions. He also instructs the reader in using thumbnails to create tiled backgrounds and larger images to create “watermark” backgrounds. He explains how the <div> command can be used to create backgrounds for for other elements on the page and CSS properties can be used to create graphical bullets in lists. MacDonald concludes the chapter with tips for finding free art on the web.
This chapter was rather enlightening for me, especially the description of image file formats. I had always thought that an image is an image and had no idea how much difference in display the file format made. The discussion of compression and creating thumbnails will be especially helpful as I create my website. The inclusion of images helps users to remember information by giving them another reference beyond text, and this chapter will help me do so in a manner that will draw the users attention.
MacDonald, Chapter 8
In Chapter 8, “Linking Pages,” MacDonald instructs the reader in the use of hyperlinks to pull many pages together into a single website. He begins by explaining the use of the anchor (<a>) element. He explains the difference between internal links (to other pages on the same site) and external links (to other websites). He also notes the difference between relative URLs (using file paths, only used for internal links) and absolute URLs (using the full http:// address).
MacDonald then moves on to a discussion of the relationship between file directories and relative URLs. He explains how to move down into a subfolder (using a subfolder/filename.htm specification) and up into a rootfolder (using a /rootfolder/filename.htm description). He also discusses linking to other types of content. Next, he instructs the reader in building links into images or parts of an image using an image map. He moves on to a discussion of adding bookmarks to parts of pages (such as in an FAQs section) by adding the # sign to anchor hyper-references (using the <a href=”pagename.htm#bookmarkname”>bookmarkname</a> format). MacDonald concludes with instructions for checking links for ongoing site management.
This was a very useful chapter. Hyperlinks are what really differentiate websites from other information sources as they allow users to gather many different types of information rapidly. I know I stop paying attention to websites when I find a whole bunch of broken links. I hope to include many helpful links in my site, but I will need to be very vigilant in checking them. The descriptions of automated tools to check links I found especially helpful.
Beaird, Chapter 2
In Chapter 2, “Color,” Beaird explains the centrality of color to web design. He begins by discussing psychological associations with certain colors to include:
- Red: Historically associated with passion, it can stimulate adrenaline and blood pressure
- Orange: Historically associated with food, it can stimulate metabolism and appetite
- Yellow: Historically associated with activity, it is very noticeable
- Green: Historically associated with nature, it is generally experienced as soothing and hopeful
- Blue: Historically associated with depression, it tends to be experienced as very calmning
- Purple: Historically associated with royalty, it is the least commonly used color and tends to stand out
- White: Historically associated with purity, it is useful for creating contrast
- Black: Historically associated with evil, it is can be used for forceful displays
Beaird then discusses other concerns, to include:
- Color Temperature: Red to yellow colors denote warmth and green to blue colors denote coolness
- Color Value: Lightness and darkness in color can be used to create dichotomy
- Color Saturation: Bright colors stand out and dull colors can be calmning
Beaird moves on to discuss the difference between primary, secondary and tertiary colors. He explains how color wheels can be used to choose color schemes. These can include:
- Monochromatic: Schemes that use variations on a single color
- Analogous: Using colors adjacent to one another on the color wheel
- Complementary: Using colors located opposite one another on the color wheel
- Split-Complementary: Using 2 analogous colors and another that is complementary to the pair
- Triadic: Using colors located equidistant from one another on the color wheel
- Tetradic: Using a scheme of 4 colors, 2 of which are analogous to the other 2 and the pairs being complementary to one another
Beaird explains how hexidecimal notation is used to display color on the web. He concludes with a description of how his own color selection informed the design of the Florida Country Tile site.
As I have not taken an art class since elementary school, this chapter contained a lot of information that was completely new to me. The psychological associations with color I found especially helpful, as even the color scheme itself can be used to convey information to users. The use of the color wheel was also rather helpful. Having no background in art whatsoever, I will need all the help I can get in making color selections.
Website Reviews
http://webstyleguide.com/index.html
The Web Style guide is a very attractively designed site with a very inviting, muted color scheme. I was blown away by all of the informative content as well. The navigation bars makes the book very easy to both browse and read through. While much of what I looked at was a little too advanced for me at this stage, I am sure it will be very helpful for me to have this page as a resource once these issues become pressing concerns for me.
http://universalusability.com/access_by_design/index.html
Universal Usability is a very simply and elegantly designed site with a calming blue border and muted yellow frames that draws the users attention very well. The content was similar to the previous site, but will also make a handy reference as work on my site progresses. Horton certainly raises many valid concerns I will need to keep in mind as I seek to create sites that all can benefit from.
Garret’s site site is very bare-bones, with just enough enough color splashed in to subtly grab the users attention in a few key areas. While there was not as much free content available here as the previous two sites, there was enough to give one a solid introduction to the principles of information architecture. I found the visual vocabulary for interaction design to be particularly helpful.
http://www.smashingmagazine.com/2008/05/08/now-more-than-ever-50-more-excellent-blog-designs/
Smashing Magazine is a mostly achromatic site with just enough orange and blue thrown in to make for a nice contrast. The blogs they reviewed were another story entirely. Most were so busy and crammed full of stuff that the actual content just seemed to be an afterthought. Some were truly breathtaking however, particularly Antiphrasis.
Final Thoughts
Form follows function in so very many aspects of American life. Architecture and city planning seems so boxy and unoriginal. Most of the writing one encounters on a daily basis seems to take so little pleasure in the written words. Television and cinema mostly follow uninspired cookie-cutter convention. However, it is this very lack of creativity that makes true works of art such a sublime and moving experience when encountered. The new technology gives us all a wonderful flexibility in sharing our own creations with the world. If we are touched by such grace, those creations will be beautiful.
Until next time, take care of yourselves, and one another.
Farley
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