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.

http://www.readwriteweb.com/

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.

http://www.footnote.com/

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.

http://www.gimp.org/

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.

http://www.gimpshop.com/

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