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