LIS 5315 Week 8

Week 8

Creating Web Sites ch. 15& 16:

Chapter 15- “Fancy Buttons & Menus”. Fancy buttons and interactive menus are becoming symbolic of contemporary web design. These features add “pop” and “pizzazz” to what may otherwise be a flat looking website. These features are now almost expected to be seen on good websites. For smaller sites, fancy buttons may work well, but for larger sites, interactive menus, often with sub-menus, are the way to go.

While ordinary links work just fine, they can be dull looking and many creative websites use some form of a graphical button (image file) that has been turned into a link. If you put an image inside an anchor tag for a button you will want to get rid of the blue border by changing the CSS border-style attribute to none. If you wish to have your buttons change when the mouse is rolled over them (similar to a hover style in CSS) you will need to use JavaScript. To make the buttons you need patience and a graphic editor or use an online program. Fortunately there are many button generator programs to help make fancy buttons. Some include: www.buttongenerator.com, http://cooltext.com/ButtonBrowse.aspx, etc.

There are also many fancy JavaScript menus available at sites such as Dynamic Drive www.dynamicdrive.com/dynamicindex1, or Open Cube www.opencube.com which I have found successful.

Chapter 16- “Audio & Video”. Multimedia is all the rage. Sites filled with sounds and motions are becoming more popular as more and more animations, music files, and small movies are added to websites. However, one must be careful to use these tools appropriately; otherwise no one will come back to your site.

Many multimedia abuses abound on the web, including: flashing banner ads, annoying background music, pop-ups, wasteful intro pages, and commercials which eat up bandwidth. The point is don’t use flashy multimedia options unless it makes sense. If you are a musician trying to offer samples of your work, then music files make sense. If you just like a certain song and want to have it playing in the background when people go to your website, think twice. Not everyone shares your taste and many might immediately leave your site never to return. If you insist on background music, at least make it very easy for someone to turn the music off.

One can link or embed a multimedia file. To link, one simply uses the anchor tags and points to the file which is uploaded onto the server with the rest of the website files. Embedding multimedia is more advanced and tries to integrate the HTML content with the music or video content. Some files may not be supported by a visitor’s browser making this more difficult. Types of multimedia files include:

• MIDI –Musical instrument Digital Interface—small, low quality synthesized music.
• WAV & MP3 –Digital audio of a much better quality. WAV files are huge and thus not good for websites. MP3s are much smaller but most browsers don’t directly support them.
• MPEG, AVI, MOV, WMV—digital video files allow you to show full video ranging from jerky, thumbnail size to DVD quality. The files are huge and thus one needs to compress, shrink, and reduce the size with video editing software.
• GIV—animated gif files are small, widely supported ways of making small animations, spinning text, flapping butterflies, etc.
• Flash –Flash animation is designed just for the web. It is vector-based, meaning it is made out of animated shapes rather than a series of video frames. They can also be interactive and thus there are small games and menus using flash. To do this you need special software and flash is a plug-in, meaning that not all browsers support it.

Review the following websites:

Wiki Public Domain Image Resources - http://en.wikipedia.org/wiki/Wikipedia:Public_domain_image_resources

This Wikipedia source has a great listing of sources of potentially free photos. Many of them are public domain source. Some are from books that are old enough to now be public domain; some are vintage postcards, etc. Depending upon the type of image you are looking for, some of these options may work well. One site in particular, Old Book illustrations (http://www.oldbookillustrations.com) is rather impressive. It provides a wide range of illustrations scanned from old books. Most of the works are from artists who have been dead for more than 70 years, which puts the work in public domain. They do ask that if you use a picture on a website, to link back to them as common courtesy. One of the great things about this site is that it is searchable. In addition it has its gallery laid out in a handy way with categories easily accessible for quick browsing.

LibrarySpot.com Image Resources - http://www.libraryspot.com/images.htm

Amongst other things, Library Spot provides a page with links to different image sources. Some of these are simply search engines such as Google, which offer image searches. Other resources are searchable collections such as the American Memory project of the Library of Congress.

Deep Web Resources:

Read Write Web - http://www.readwriteweb.com/

Read Write Web is a weblog with a focus on web technology news including reviews and analysis. It claims to be one of the most widely read (and respected) blogs in the world and it is probably correct. Many of the current posts seem to be blogging news such as an entry on Mapstraction about map mashups in which one can apparently combine maps from different mapping providers together. Another entry talks about a US distric court judge ordering Google to hand over data on every YouTube user including username, IP address, and lists of videos watched. All this because Viacom is seeking $1billion in damages from alleged copyright violations on YouTube.

Footnote.com (Historical Image Resources) - http://www.footnote.com/

Footnote is a database of image files of some historic content. Many of the files are text images and are of old documents and quite useful for genealogists and historians. One can search for images or browse and images can be printed, annotated, downloaded, etc. One can create a spotlight or story page highlighting something you have found. Among the free titles are: Project Blue Book which contains 13,000 government UFO reports of sightings etc. and Pennsylvania Archives which provides 100,000 pages from 1664-1880 and can be invaluable to someone interested in Pennsylvania historical events.

Tools:

Adobe Photoshop - http://www.adobe.com/products/photoshop/index.html

The latest of the industry standard graphic editor is Adobe Photoshop CS3 (and CS3 extended). These supposedly have improvements over CS2, offer live filters, easier black and white conversion, 3D and motion support and the ability to edit 3D content and place it in 2D compositions (in the extended version), and many more features. Of course you must pay $649 for the regular CS3 and $999 for the extended version. Actually there are many versions of Photoshop and they have a feature where you pick out what you do and they will tell you which edition is best for your needs. One option is “Graphic designers, web designers, and artists”. For this group the Adobe Photoshop CS3 is recommended. However, if you just like to take quick photos and share them online, then Photoshop express is recommended. This version is integrated with flickr. This version also appears to be free. One must sign up to use it but there is no listed cost.

Adobe Fireworks - http://www.adobe.com/products/fireworks/

Adobe Fireworks is software designed to accelerate web design by allowing one to quickly create and optimize images for the web. It allows one to edit vector and bitmap images and has many prebuilt assets. It also integrates with Dreamweaver CS3, Illustrator CS3, Photoshop CS3 and flash CS3.

Gimp - http://www.gimp.org/

This is a free, open source software program that does just about everything Photoshop can. It is designed as an alternative graphic editing program that will not cost an arm and a leg. It is quite useful and it even has a version (GimpShop) that mimics Photoshop even more so one can use a Photoshop tutorial without many modifications.

GimpShop - http://www.gimpshop.com/

Simply put, this is a version of the free open source Gimp graphic editor that mimics Photoshop so GimpShop users can follow the Photoshop tutorials easily. This is a great asset.