LIS 5315 Week 10 website commentary

Week 10

Discussion and commentary about website project:

This was a very interesting and productive class and I enjoyed honing my web design techniques. I was attempting to design a personal website that I could use to refer to later and which could help showcase my talent in a future job search. I had never used or designed a 3 column site before, and thought I would try. I wanted to keep the navigation on the left, because I find that to be the most prominent and almost expected place.

Color/ texture:

Originally I had wanted to do something with a parchment or paper textured background and maybe have a faint coffee stain over part of the page (almost like a water mark but the outline of a cup bottom and in a coffee or tea color but not too dark). I found that with my CSS coding the background image would not look right as it would stop at the footer but continue on the side columns. I decided that rather than completely change my coding I would go for another, simpler look. Also I found I would have to spend so much time in a graphic editor trying to get the texture for the background and coffee stain right, and I just didn’t have that kind of time.

I really like muted, earth tone colors so I went with greens and browns. I also through in a little complementary purple as it would stand out and add another dimension to the website. I used both the color scheme generator from well styled (http://www.wellstyled.com/tools/colorscheme2/index-en.html) and colors on the web (http://colorsontheweb.com) to pick colors that would look nice together. I kept this color scheme in my banner and added a bit of texture by using the Papyrus font and giving it a slightly three dimensional look with a drop shadow. This really helped to make the page not seem so flat. I think I would have liked to design a banner with some book graphics/ images, but again I found I was needing to spend so much time using a graphic design program which I was not comfortable doing anything in other than basic image resizing and text modifications.

Typography:

For the most part I wanted the text to be in a common font that was easy to read online. I went with a sans-serif for my smaller text in the paragraphs specifying Veranda then Arial and then general sans-serif. I wanted my H1 and H2 and H3 to stand out a bit so I specified Comic Sans MS first. This is supposed to be a widely supported font and as it also doesn’t use serifs it blends well with the paragraph font. As already mentioned I used Papyrus as my font choice in my banner. I really like that font as it reminds me of old texts and was tempted to use it throughout my website. However I don’t know how widely supported it is, and It is not easy to read in smaller sizes, especially on a computer screen. I settled for showcasing it in my banner, and it works well there.

Images:

I wanted to have some images to draw the attention as my pages have so much text. I own the photo of me with a Florida Scrub Jay so I used that, and I went to several free image sites looking for images. I finally chose some from Stock.xchng (www.sxc.hu). The ones I chose were free and had no special requirements other than they like a link back to the website from which they came (I put the link in my first page footer).

Scripts:

I did end up using some JavaScript items in my site. I imbedded a meebo widget which allows someone to leave a chat message or if I am logged in, we can chat live. I had seen this tool before and wanted to see how it worked. I also imbedded worldcat search boxes on some of my resource pages so a visitor can search for books I mention in libraries. Finally I used JavaScript for my navigation menu. I had tried to write the CSS coding for fly out menus but I could not get it to work in Internet Explorer. I found the site www.opencube.com which offers a free trial test of its quick menu tool. I found a nice expanding tree menu that works well, but the trial may end soon and I may get pop-ups saying that it is not paid for. I may end up eventually finding another source for the JavaScript menu. The major problem I foresee with the Script menu is that if I want to add a page, I have to completely redo my navigation menu. This could be a major problem if I get a script from a site which rotates which menus it offers freely. I may have to completely change the look.

Lessons learned:

I learned about some wonderful resources for web design in this class and will need to spend more time learning about CSS and JavaScript so I can utilize these more effectively in future websites. I attempted to use Dreamweaver to design this website, but am not comfortable enough with all the wonderful things it can do, so I found I spent most of my time editing the HTML code. In the future I need to spend some time playing with and reading tutorials so I can take advantage of Dreamweaver. The same thing goes for the graphic editor I am using. Gimp is working well for me, but I can only do basic things and have not been successful trying to design graphic banners with images and background images or textures using it. I can resize images easily and can create a text based banner image, but I need to learn more about the program.

When our class had a presentation session where folks showed their work in progress, I found myself being quite jealous of those with Macs using the Mac program iweb. The two folks who used it said it was so easy to drag and drop images and rotate them and give them special effects like drop shadows or curling edges. It seemed that it was a much easier tool to use than Dreamweaver.

This was a wonderful class, full of information and resources. I learned quite a bit and also learned how much more I have to learn. It is clearly an ongoing work in progress to design and maintain any website. Not only does one need to have skills in using many different software programs and understand multiple different coding techniques (at least rudimentary) but one must stay on –top of current trends. As fashions go in and out, hip designers need to go with the flow. Simple and classy websites will always work especially if their content keeps drawing visitors back (see W3Schools: http://www.w3schools.com/default.asp). However, savvy web surfers are often looking for and expect the latest innovations. If you are designing a website for a young, hip audience you need to be aware of the trends and use them effectively (see 2Advanced Studios http://2advanced.com/).

LIS 5315 Week 9

Week 9

Review the following websites:

FLASH:

FlashVista http://www.flashvista.com/

FlashVista provides a search engine to find some of the best flash sites and it also has a directory for flash links. This combination allows one to find some very neat websites that are using Flash well, and also find Flash resources such as tutorials and templates.

Flash Tutorials http://www.lukamaras.com/tutorials/cool-design/hitech-floating-menu.html

Lukamaras is designed for folks who are just learning flash. It provides tutorials that are quite detailed so anyone can follow the steps, but it also provides detailed explanations for those who already use Flash and know ActionScript. Best of all the tutorials are free. This particular URL is to a tutorial for creating a “cool hi-tech draggable floating menu”.

SitePal - Flash Avatars http://www.sitepal.com/

SitePal is a fee based service that will help you create a “fully customizable speaking avatar” which you can add to your website. There is a 15 day free trial and after that the lowest price is $9.95 per month. I am not sure if once you create an avatar using this you need to keep paying every month for it to keep working or not. That could get to be expensive.

FLASH SOFTWARE:

Adobe Flash http://www.adobe.com/products/flash/

Adobe Flash CS3 is a standard Flash tool, but like other Adobe/ Macromedia software it can be expensive ($699). There is a free trial available which could help someone decide if they really want to spend the money.

Swift http://www.erain.com/Products/swift3d/

Swift 3D is a vector tool that allows designers to create 3D animated images to use in Flash or other projects. It supposedly integrates with Adobe Flash and the files compress well. The full version is $299. If you have Adobe Flash, there is a plug-in/ extension called Swift 3D Xpress.

Swish http://www.swishzone.com/index.php

Swish offers a variety of software for Flash. They have SWISH Pix which allows one to create Flash photo albums; SWISH Studio2 –allows one to convert Flash movies to screensavers, EXEs, etc.; SWISH Video3 –allows one to convert videos to Flash and put it on the web; SWISH Jukebox –lets you convert MP3 files to Flash sound players; SWISH Max2 – has many tools to help you create interactive Flash animations; and Templates for SWISH Max which are designed by professionals and are royalty free. SWiSH Max2 is about $150.

SCRIPTS:

HotScripts http://www.hotscripts.com/

HotScripts is a directory service that collects and organizes web programming and related resources. It is aimed at webmasters and programmers who are seeking “dynamic development tools”. Some of the directory categories include: Ajax, C and C++. Flash, PHP, Ruby on Rails, XML, etc. The Flash category has over 2000 entries. One of the software items listed under Flash is for “Drop down, tab & vertical menus for Dreamweaver”. It uses DHTML and Flash to make really nifty website menus. There is a free trial and the price after that is $49.99 ($50) which seems reasonable if you create lots of websites or are constantly changing styles. The author of this product is listed as http://www.extendstudio.com.

MP3S:Basic info about MP3s http://www.soundstageav.com/mastersonaudio/20050201.htm

SoundStage AV is a very helpful site created as a resource for AV enthusiasts. This “masters on audio” article from Feb. 2005 called “So what is MP3, Anyway?” does a great job of explaining what MP3 is. Basically it is just a technique used to compress audio files so they can be stored and shared and transferred more easily.

How to create .M3U files and streaming audio http://www.selfseo.com/story-13698.php

This article posted by David Grant (5/01/2006), entitled “How to Stream Audio from your Website for Free” is quite useful. Streaming allows one to listen to the audio file before it has completely downloaded. This lets a visitor to a website begin to enjoy the music right away. Without the streaming the visitor must wait while the whole file downloads and then they have a copy on their computer (this can be against copyright laws). With a streaming file the visitor’s audio player (windows media, Real Audio player, etc.) will open and start playing the music but the file will not be saved to their computer. To set up streaming audio one simply creates a text file with a link to the MP3 file and then save that text file with the extension .m3u. The text file link has to be for the full URL so if the audio file was in a folder called mp3 and the file name was mymusic.mp3 then the link to put in the text file is http://mywebsitename.net/mp3/mymusic.mp3 then you save the text file as mywebsitemp3mymusic.m3u and make sure that both the actual music file and the text file are uploaded to the server.

Audacity - Free audio editor http://audacity.sourceforge.net/

Audacity is open source software which is free to use and allows one to record and edit audio. It even lets you create soundscapes yourself. There are special effects, a sound mixer, etc. One user review from the PC World article on Audacity (http://www.pcworld.com/downloads/file/fid,22513-order,1-page,1/description.html) mentioned this as a tool to fix bad audio on old cassette tapes. This is a great tool to use to convert those old tapes that you can no longer play in the car (or almost anywhere now). They can now become CDs or exist as digital files.

Musicovery Internet Radio http://musicovery.com/

Musicovery is a very “hip” styled internet radio. You can select a mood, genre, time period, etc. and listen to random music. If you register you can save favorites and have play lists. There are two versions, the free registration, which has Lo-Fi quality allows you to ban songs you don’t like and mark your favorites but does not give you direct access to the favorites. The premium membership provides the same but gives you direct access to your favorites, eliminates the ads, and provides Hi-Fi quality. The Premium membership starts at $4 per month. The interactive quality of the site makes me think that it is using JavaScript or perhaps Flash.

Pandora Internet Radio http://www.pandora.com/

Pandora is another free internet radio site which is sponsored by the Music Genome project. Their goal was to capture the “essence of music” and analyze thousands of songs and analyzed each musical attribute and then compiled all that data into this program to serve as a guide to the “music universe”. You register for free and then have stations listed by genre and can find out about the music you are listening to. Pandora also acts as a social networking site slightly by listing people who are listening to a song and what else they are listening to and allowing them to comment on a song.

FREE WEB EDITORS –

Amaya http://www.w3.org/Amaya/Amaya.html

Amaya is one of several complete web browsing and authoring tools. It allows the user to both create web pages and browse the internet for needed information and copy and paste it into their web pages. One can work on multiple documents at the same time and it helps with creating hypertext links.

Trellian http://www.trellian.com/webpage/

Trellian webpage is also a freeware application for composing websites. It has a drag and drop style interface and has the standard color highlighted HTML editor. It also has a build in spellchecker which is very handy. Another nice feature is the online “manual” which has all sorts of guide on how to use Trellian WebPage. This is fantastic, especially in a free product.

SeaMonkey http://www.seamonkey-project.org/

SeaMonkey offers a complete internet application suite which includes a web browser, advanced email / newsgroup, chat, and HTML editing. For the browser part it compares itself to Firefox. In addition to what SeaMonkey starts with, there are also other add-ons for more stuff.

FREE TEXT EDITORS:

http://www.thefreecountry.com/webmaster/htmleditors.shtml#htmleditors

This link is to a list of free text editors. Of the ones listed, I have used PSPad (http://www.pspad.com). It is free and allows one to edit HTML, PHP, Perl, JavaScript, etc. The color coding of HTML code and CSS makes it so much easier than regular Notepad. I designed my first website using this editor and it worked well. There are also many other HTML editors out there so you can play around and see which you like best.

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.