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.

LIS 5315 Week 7

Week 7

Creating Web Sites ch. 13& 14:

Chapter 13-“Making money with your site”: Internet commerce is a huge industry. This chapter focuses on some things you will need to consider if you want to sell things online using your website. If you sell actual products, you need a virtual shopping cart so your customers can collect the items they wish to purchase, and you need a way to take payments – PayPal is a front runner in web transactions for small businesses.

The internet also offers other opportunities to make money by selling ad spaces on your website. Two popular affiliate programs are Google Adwords and Amazon Associates. Both these programs allow you to earn a small bit of cash when your site users click on their ads.

Chapter 14-“JavaScript & DHTML”: According to this chapter, JavaScript is a programming language which can be used to create interactive features on your website. JavaScript can be used to dynamically effect HTML, you can have text grow and shrink, have something happen when a user rolls the mouse over a certain area, use JavaScript to transform text into a special font that your user may not have on their computer, and many other things. JavaScript can help with forms and prevent someone from going any further until they complete certain sections. JavaScript can react to actions and do things when a user clicks on a picture etc. Modern browsers all recognize JavaScript, but it is possible for a user to turn off the JavaScript so one should make sure the website still looks okay if the JavaScript is disabled.

Principles of beautiful web design ch. 5:

Chapter 5-“Imagery”: There are many concerns dealing with imagery. One must consider file types, resolution, sources of photography, as well as artistic aspects. Any picture image (as opposed to text image file) on a website immediately draws the viewer in and gets them to consider the content. You want images to be: relevant, interesting, and appealing visually.

One must find legitimate sources for any images one wants to use. The 3 options are: create it yourself, buy stock images, or hire a professional. Doing it yourself can be fun and possibly cheaper, but takes considerable time. Purchasing stock images can be expensive although not always. Free images are available but make sure your use falls within the guidelines.

Review the following websites:

I Love Typography (resource site) http://ilovetypography.com/

This truly is a website for those who love typography and fonts. There are pictures of fonts, photos of fonts in use (karmann ghia written on the side of the car uses a unique font), and lots and lots of links to articles about fonts. There are also many links to font shops (i.e. www.fontfont.com) where one can purchase fonts. There is an interesting article on “What the font” which is a website where you can upload an image of a font and it will try to identify it for you. You must save the font in question as an image and then upload it (see http://www.myfonts.com/WhatTheFont/). This could be quite useful to someone in design who has seen the perfect font to use for a project but doesn’t know the name and thus can’t find where to purchase this font. Another interesting article is “So you want to create a font” by Alec Julien (10/22/2007) http://ilovetypography.com/2007/10/22/so-you-want-to-create-a-font-part-1/. This gives a quick review of several font editing programs available (one of which you must have), plus things to think about if you really want to get into designing your own fonts. Actually, it is quite interesting, and although I understand what serifs and kerning mean, I admit I forget what tildes and eths are.

I Love Typography: 15 Examples of Excellent Web Typography http://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/

This is part one of a two part article on examples of typography on websites. The author, Johno (this is a screen name from the comments and seems to be the author) has collected 15 websites which make “excellent use of type”. Part two will take a closer look at some of these sites. A List Apart (www.alistapart.com) is a site for people who make websites and is on the short list. Many of these sites are for font companies (Font Shop www.fontshop.com), professional designers or illustrators (Bear Skin Rug Shop- Kevin Cornell http://www.bearskinrug.co.uk/_store/). These are all really great sites and are just so much fun to look at because the images and fonts work so well together to create a wonderful overall style.

Typographica (Typography Journal and News) http://typographica.org/

Typographica is a journal of the typography world. It features news, reviews, commentary and such about fonts and typographic design. There is a book review of “Dangerous Curves” by Doyald Young, an interview with Cyrus Highsmith who is a designer at Font Bureau in Boston, and an article on favorite Typefaces of 2007. This is an annual review which invites 25 of the best graphic and type designers to pick their favorite font releases. Thirty typefaces are displayed in a thumbnail type image and one can click on that to get more details about that entry. I liked the Blaktur typeface by Ken Barber. It is reminiscent of the old blackletter typefaces but is modernized and slightly easier to read. Another favorite is Olicana by Nick Cooke. This is an attempt at mimicking someone writing with a quill pen and it comes with optional ink splotches one can apply to the text. It is fun and legible too. It really does simulate the flow of ink and would potentially be wonderful as added flair on a website—maybe for headings.

Microsoft Typography (resource site) http://www.microsoft.com/typography/default.mspx

This is a good source of typographic information produced by Microsoft. Their Typography group develops fonts and font technology and they have many resources for those interested in typography. Their site is very nicely laid out with main categories: About fonts, Resources, Developing Fonts, links/ news, and tools. They offer a free font property extension and a web embedding font tool. The Disagreeably Facetious Type Glossary (http://www.microsoft.com/typography/glossary/content.htm) is quite funny and enlightening too.

ABC Typography (virtual museum) http://abc.planet-typography.com/

This is a virtual museum of typography. There are 4 sections: classical typefaces (1480-1890), 20^th century typefaces, contemporary or modern typefaces, and unclassified or miscellaneous. This is a fascinating look at fonts over the centuries. It is quite easy to scroll through and pick fonts to view. The typeface is displayed and then it is used in a quote so you can see the same sentence in all the fonts. There is some brief background information about each font and then quick details such as when it was created, in which country, who the creator was, etc.

A List Apart: Typography (tutorials) http://www.alistapart.com/topics/design/typography/

This website is written for people who make websites. One of their topics is typography and they provide information such as how to size text using CSS, dynamic text replacement, or elastic design. As always, this is an excellent source for tutorials, articles, and answers to website design related issues.

TypoGraphic (history of type) http://www.rsub.com/typographic/

This website outlines the history of letters and typography as well as providing an anatomy of letterforms and a gallery. The studies section discusses legibility, spacing, type as image, and meaning. The aim is to illustrate the importance of typography and explore how it is used in the digital era. This provides important insight into the online use and value of type and typography.

Digital Magazine: CSS Typography (resource) http://www.digital-web.com/articles/css_typography/

This article from Digital Web Magazine by Garrett Dimon discusses typography and how CSS can be used to select type faces. Dimon also points out that there are other options including: font embedding, JavaScript, and image replacement technique. With CSS you can control not just the font types, but also the line-height and letter-spacing. One site mentioned it Typetester (http://typetester.maratz.com/). Typetester lines up 3 columns and allows you to choose different fonts to view in each. This allows you to test legibility and play with the size, alignment, word spacing, leading space, background color, and text color. This is an excellent way to help decide which fonts would work best for your site.

Noupe.com: CSS Tutorials http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html

This is a CSS tutorial from Noupe which addresses more than 20 common CSS bugs (usually related to IE) and ways to fix the problems. This is a handy site when trying to work out CSS issues.

DesignSnips (Examples of Good Web Design) http://designsnips.com/

This site collects examples of good web design and separates them into categories that can be browsed. Some categories are: depth effects, illustration, textures, hover effects, logos, navigation, typography, colors, breadcrumbs, banners, buttons, etc. This can be quite handy when developing a website as it provides inspiration and ideas that work.

LIS 5315 Week 6

Week 6

Creating Web Sites ch. 11& 12:

Chapter 11-“Attracting Visitors”. This chapter focuses on how to promote your website and ensure it is regularly indexed by search engines. Before you start promoting your site, make sure it is complete and is a good design. Try to have features that will keep people coming back. A discussion forum is a way to do this. Build a community by sharing links with similar minded folks. Update meta tags with a site description and key words. Submit your website to internet directories and search engines. To successfully climb the ranks you need statistics such as how many people visit your site and how long they stay.

Using reciprocal links is a good way to connect and get your website noticed. You agree to link to a site and they agree to link back to yours. In order to keep visitors coming back you need to have excellent content that changes regularly and in a noticeable manner. Updating once a month is not enough, it needs to be updated 2-3 times a week for a really popular site.

Web server logs provide the most detailed information about site visitors. It includes information such as: time visitor came, IP address, their browser, what site referred them, if they got any error messages, pages ignored, pages they liked, etc. These logs are much more detailed than the web traffic analysis that is offered by a web host. In order to use the web server log you must feed the data into a log analysis program. If you can’t do all this you can try a free hit counter service. Some are visible on the page and others are invisible. www.statcounter.com offers a free hit counter without an image.

Chapter 12-“letting visitors talk to you & each other”. For a site to really fit in and be popular you need to participate with your visitors. It is important to have a form of dialog. Discussion forums or chat boards help visitors keep coming back and this helps to establish a community. Get feedback from visitors about what they like and don’t like and fix your site accordingly. Make it so you can be contacted by having email links, or forms. Google groups offers a way of freely setting up a group for discussion which is easy to moderate.

Principles of beautiful web design ch. 4:

Chapter 4-“Typography”. Web design is all about communication and one of the main ways we communicate is by written word which is why typography is so important. We may not put much thought into it now, but creating a font or designing a single letter actually takes a great deal of thought. The angle of the curve, the thickness of a line, the amount of white or negative space –these are all important in letter design.

There are tons of fonts out there, but for a website all that matters is what your users have installed on their computer at the time (which of course you can’t know for sure). This can be quite limited so the font-family property of CSS is very handy. It allows you to choose your ideal font and then specify backups. For example, you might prefer Futura, but list Veranda, Arial and finally any sans-serif font. However, it is important to realize that if your ideal font is a drastic change from the backups (takes up significantly more or less space) it might drastically change how your website looks (tables and columns could be messed up, etc.). For this reason, it is best to preview how your website would look with the generic font also to make sure it still works. If it is vital to use a particular font, this can be done with an image file. This technique is often used for fancy lettered banners or headers.

Review the following websites:

Urban Dirty http://urbandirty.com/

This website offers free texture stock photos which are licensed under the creative commons license. There is an option to make a donation, but other than that the images are free, just mention that you got them from Urban Dirty. There is a search option where you can search for how a photo was tagged. Most of the options are cement, paint, wood, etc. The search is fairly rudimentary, but it does work.

Best Textures Flickr Group http://www.flickr.com/groups/564994@N20/

This is similar to Urban Dirty, but there is a greater variety of textures not just urban type textures. This is actually a
Flikr group which pools together themed photos and has discussions etc. You must join the group to add items, but not to view. The images all appear free, but some artists have their own statement (i.e. free but please credit me, etc.). There are also other Flickr Groups with texture images.

Torley Textures http://www.flickr.com/photos/torley/collections/72157594588432564/

This is another flikr site that offers textures. These are offered as free and are seamless so one can tile them easily without it showing. All of the textures offered in the Torley collection are 512x512 and are in lossless PNG format. One nice thing about this collection is that the textures are grouped in smaller collections by color. One is a collection of greens, another of pinks and reds, and another is black and white. This is helpful if you have an idea of what color scheme you want to use and are looking for some matching texture. The rest of the mini collections are not by color, but the smaller collections make it easier to browse through since they aren’t really searchable.

Deviant Art Textures http://browse.deviantart.com/resources/textures/

The direct link to browse textures did not work, I had to go to http://deviantart.com and then click browse or search myself. Under the collections option is a collection called Best Textures. These texture stock photos are quite wonderful and run a wide gamut of what is offered. Each artist has their own stipulations, but most artists allow you to use them for free if you credit them, or provide a link back to the image. Just doing a browse search for keyword texture will turn up many wonderful textures (especially the ones labeled “in Miscellaneous”), but some aren’t really textures by themselves. This is really a wonderful source for any art, and very good for inspiration for any artist.

Texture King http://www.textureking.com/

This is another good source for texture photo stock. It is a project by someone known as REH3design and seems to be somewhat up to date. The last update for the news and posted photos was 2 months ago. Some of the other texture sites were more frequently updated. Texture king has a nice broad category list to choose from: grunge, liquids, metals, miscellaneous, paint, plaster, plastic/ rubber, rust, stone/ rock, & wood/ plant. These are all wonderful selections but they are zip files so they take a few more clicks to download.

Grunge Textures http://www.grungetextures.com/

Grunge Textures is a site devoted to textures in the grunge category. All of their pictures are high resolution (2400 px x 1800 px minimum) in jpg format. They use creative commons licensing so the image are free for non-profit personal use as long as there is a link back to www.grungetextures.com. The categories for browsing and searching are reasonable and include: aircraft aluminum, concrete textures, graffiti & vandalism, metal textures, paper & cardboard, etc.

Grunge Style http://www.smashingmagazine.com/2008/01/29/grunge-style-in-modern-web-design/

This is a wonderful article on trends in web design and a special focus on grunge. The author does not see grunge becoming the major trend that web 2.0 design was. There are some examples of grunge type design. Some are more subtle than others, but all have a “worn” feel to them. This website also provides links to some free fonts that work in the grunge style. There are also links to texture sites and tutorials as well.

Photoshop Tutorials on Creating Textures http://vandelaydesign.com/blog/design/photoshop-tutorials-textures/

This website offers a great collection of tutorials and guides on designing your own texture background in Photoshop. If you do not have Photoshop, you are not completely left out. The free graphic program Gimp, offers a version (gimpshop) that closely mimics Photoshop so you can use the tutorials ( www.gimpshop.com). Unfortunately that URL has been suspended. Another site which looks like it may offer downloads of gimpshop is http://thegimpshop.net/.

2007 Web Design Trends http://www.modernlifeisrubbish.co.uk/article/2007-more-web-design-trends-and-cliches

This entry (dated 10 December, 2007), highlights 6 current trends in web design and provides links to examples. The trends include:

• Cute cartoons and mascots
• Swirls, drips & flourishes
• Broken borders
• Oversize RSS icons
• High-Texture designs
• Rich colours with dark grey background

Some of these trends I like, and others not so much. If they are used in a subtle way, even my “not favorite” trends aren’t bad, but when overdone, they could be disasters.

Web 2.0 Tutorials http://www.smashingmagazine.com/2007/03/10/web-20-tutorials-round-up/

This is another issue of smashing magazine which gathers several tutorials together. Most are basically Photoshop or Photoshop-based tutorials for making web graphics. This is great if you have Photoshop, but if not they are only mildly helpful. The Gimpshop is a possible alternative if you can find it.

Screen Resolutions Worldwide http://www.modernlifeisrubbish.co.uk/article/screen-resolutions-and-aspect-ratios-worldwide

This site provides a world view of screen resolution and aspect ratio (widescreen or not) tendencies. India had the lowest resolution with an average approximately 1024x768 (0.872 megapixels). Scandinavia and Central Europe had the highest resolutions with Switzerland averaging 1280x1024 (1.306 megapixels). The US, Denmark, Belgium and Italy are more likely to have widescreen monitors, whereas Russia does not and has vertical resolution available.

LIS 5315 Week 5

Week 5

Creating Web Sites ch. 9& 10:

Chapter 9- “Page layout tools: Tables & Styles”. In the early days of HTML and web pages, invisible tables enabled the alignment of text and pictures in a nice grid structure. Since the advent of style sheets, tables are giving way because they are too awkward to manage.
If you use tables, most browsers only show a solid black line for table borders. If you want something else, you should create a borderless table and then apply borders to the table and td, th attributes in a style sheet. If you do have tables with borders, be aware that any empty cells will collapse and disappear. To prevent this collapse, fill in the cell with a non-breaking space ( ).
When writing HTML that is going to be positioned using style sheets, it is important to divide up your different sections using div tags (division) and class tags. To really see how style sheets can effect a page, go to CSS Zen Garden (http://www.csszengarden.com/). Each page in the gallery has the same HTML, the only difference is the style sheet applied.


Chapter 10- “Frames”. Frames help large websites keep a common element (often a navigation bar) in the same place on every page. If you use tables or div tags to do this, you must copy and paste a lot of data onto every page. Using frames avoids this by allowing you to show more than one web page in the same browser window. HTML allows you to split the browser screen into different regions called frames.
There are some negatives about frames however:

• Confuse search engines –robots don’t know how to navigate and report the right information back.
• Frame abuse –not seen much anymore, but some folks used frames to keep part of their website visable when a user clicked on an external link.
• Future compatibility and accessibility –latest versions of XHTML do not support frames, and frames are not easily used by users with screen reading devices.
  Less effective URLs –users cannot get a URL to a specific page only the first page and then they have to click through everything to find what they were looking for.
  
  
  Principles of beautiful web design ch. 3:
  
  Chapter 3- “Texture”. Texture in a website refers to an image, usually used as a background, which imitates the appearance and “feel” of an object (like a brick wall, wood, soap bubbles, etc.). Even a simple line can be used to create feelings. A diagonal line (or series of diagonal lines) gives a sense of movement and draws the attention more than horizontal lines.
  
  One can use oval or circular background image behind text to create the illusion of a circular block of text. There are many websites devoted to trying to round the corners of text block boarders by CSS, JavaScript, or the use of background images.
  Using light and shadow, one can give depth and dimension to objects such as menu buttons, bullets, etc. One can utilize different textures and images to give a certain “feel” to a website. One example is an “antique” or “worn” look, created using “folded” or “torn” corners of boarders to simulate old or torn paper; the use of “watermarks” or “coffee stains” on the background of the website; and many other creative ideas to promote a “feel”.
  
  
  Review the following websites:
  
  Colors on the Web http://colorsontheweb.com/
  
  “Colors on the web” focuses on the use of colors in design and especially as it is applied to web page design. Many topics are covered including: color theory, color wheel, color combinations, color physics, and colors on the web. The page itself seems to have a nice red and white feel, but does have a lot of ads both on the left and right sides. While these do make the web page more jumbled, they are very appropriate since all have to do with the theme of color or color theory and offer a wide variety of “color” resources available on the internet. Colors on the web (COTW) offers a color wizard which will help generate matching color schemes; a color wheel to generate random color combinations to stimulate creativity; and a contrast analyzer to determine if there is enough contrast in colors (especially good for determining if text will be legible on a color background).

LIS 5315 Week 4

Week 4

Creating Web Sites ch. 7& 8:

Chapter 7-“Adding Graphics”. Often there are many more images at work on a web page than one would think. Often text used in headings, banners and sometimes navigation is actually an image file.

In HTML, the alt attribute should be used to describe the picture in case it isn’t visible. Some browsers use this text for a pop-up description. To avoid this (or make sure you can select the text that will show in the pop-up), use the title attribute to specify what you DO want to pop up as a title.

Picture size is important, both its dimensions (how much space it takes up in the browser) and its file size (the number of bytes required to store the image). Don’t use the height and width attributes to resize an image, it will turn out badly. Rather match the height and width attributes to the actual height and width of the image—it will improve the way the web page loads.

There are 3 file formats for web graphics:

• .gif – for images with small number of colors (logos, bullets, clip art).
• .jpeg –for photos with lots of colors, not good for text or line art.
• .png –works for all sorts of images but doesn’t compress as well as .jpeg and old browsers can’t read it.

Chapter 8- “Linking Pages”. Links are an important aspect of web pages (links make the internet a net). There are internal links which lead to other pages or sources within a website, and external links which lead to other websites. To make an external link open in a new page, use the target attribute (target=”_blank”) this formula will open a new window instead of leaving your website.

Programs such as Dreamweaver have link checkers which can go through and scan all your web pages to test links and make sure they work. If you change the name of your site, or page, or folders it can mess up anyone linking to the page previously. Using a redirect will help anyone trying to find the website.

Principles of beautiful web design ch. 2:

Chapter 2- “color”, describes the psychology of color. Different colors produce different behavioral and emotional effects.

• RED- excitement, a dramatic and rich color. Darker reds (burgundy, maroon)—rich, indulgent; earthly-brown reds –harvest and fall.

• ORANGE- active and energetic. It can symbolize happiness, sun, creativity, etc. It also stimulates appetite and metabolism.

• YELLOW- active and visible. It symbolizes happiness and energy.

• GREEN- the color of nature. It represents growth, freshness, and hope and is soothing.

• BLUE- openness, intelligence, faith. It can be calming and appetite reducing. It can also be a symbol of bad luck or trouble but is also representative of sky and sea. It can also give a sense of stability.

• PURPLE- often represented royalty or power. It can symbolize wealth or extravagance and is associated with flowers, and gemstones.

• WHITE- represents perfection, light, and purity. It often symbolized cleanliness.

• BLACK- can represent death and darkness, but also power, elegance, and strength.

These are just some of the things to consider when selecting a palette of colors for a website. One can design in monochromatic, analogous, or complementary color schemes. All of these have merit. There is a color scheme generator from Well Styled (http://www.wellstyled.com/tools/colorscheme2/index-en.html).

Review the following websites:

Web Style Guide, 2nd Ed. - http://webstyleguide.com/index.html

Web Style Guide is an online book which covers many aspects of style and design for websites. There is information on the process and planning aspect that should go into a website design before the coding happens. Also covered are: interface, site design, page design, typography, editorial style, graphics, and multimedia. At the very top is a link to new information on universal usability (http://universalusability.com/). Universal usability is different from universal accessibility—accessibility means that the content functions, or is within reach of all users. Usability means that the content and functionality is not only accessible, but useable by everyone. Web Style Guide is a thorough look at all the details that go into a good website design, whether one is doing a personal page or a large, institutional / corporate website.

Universal Usability http://universalusability.com/access_by_design/index.html

The Universal Usability site is linked to by the Web Style Guide site. It covers a variety of topics with the goal being to make a website that is usable by everyone, not just accessible. Topics include: text, images, data tables, layout tables, frames, lists, forms, links, color, audio and video, interactivity, editorial style, and page layout.

As an example, it is recommended that plain text be used for text, with styling done through CSS. The users should be able to adjust the text size as needed so text elements should be sized using relative measurements like percentages or ems (headings could be 125% larger than normal paragraph text).

Frames and layout tables should be avoided (especially frames) because they make printing, bookmarking and returning to pages more difficult. Some non-visual users also have problems with tables and frames if the content is not clearly labeled.

JJ.net (User-Experience Designer Jesse James Garrett) http://www.jjg.net/ia/

This is the site of Jesse James Garrett and his collection of resources related to information architecture and experience design. The layout of this site is simple but very functional. There are no large photo-type graphics but rather small gif-type images to lend color and act as links. User experience is important and Garrett provides a model of things to consider in order to create a successful user experience on a website.

Garrett has a link to the website for Adaptive Path (which he founded) in which he describes the “Nine pillars of successful web teams”. The nine areas which need to be represented and thought about are:

• User research
• Site strategy
• Technology strategy
• Content strategy
• Abstract design
• Technology implementation
• Content production
• Concrete design
• Project management

All of Garrett’s work is centered on the user and how to make the system work for them. If the user is happy and benefits, then the company or organization will have been successful.

Smashing Magazine: Top 50 Blog Designs - http://www.smashingmagazine.com/2008/05/08/now-more-than-ever-50-more-excellent-blog-designs/

This article on blog designs is really amazing. It is a great view at some of the really creative blogs from a design perspective. Some actually look more like full blown websites than “blogs” but I suppose really a blog is a website; it is just that most of its material is frequently and regularly updated (i.e. daily and weekly as opposed to bi-monthly, yearly or never).

There seemed to be a lot more creative, artsy license taken in these blog designs with creative images used freely. As long as the text content was visible and readable, then the blog worked. Sketchblog (http://www.rob-sheridan.com/sketchblog/) was rather amazing as it is done by an artist and offered a glimpse of how he completes a “sketch” through step-by-step instructions.

LIS 5315 Week 3

Week 3

Creating Web Sites ch. 5& 6:

Chapter 5- “HTML Text Tags”. HTML gives you less control than a word processor (MS Word etc.). You, the creator, do not get to determine every nuance of how your web page looks because part of that is dependent on the viewer’s browser. HTML does allow one to categorize items to facilitate the meaning as part of the mark up. One can label something a heading, subheading, paragraph, list, etc. and one can give a word, or paragraph emphasis. There are two different ways to tag or mark up a web page’s content:

• Structuring- arrange sections like headings, paragraphs, and lists.
• Formatting- make the sections look different (color, font, etc.)

In order to do this, HTML has two types of tags:

• Logical or idiomatic tags—describe the content (heading, list, etc.)
• Physical or typographic tags—formatting such as italics, bold, underline, etc.
• Many of HTML’s physical tags are being replaced by CSS style rules.

Chapter 6-“Style Sheets”. This is where much of the creative design fun comes into play. Style sheets are separate rules that tell the browsers how to format all the marked up text. There are three types of style sheets:

• External—this is stored in a separate file and is linked to the HTML page. It is very powerful and allows many pages to be changed simultaneously just by changing the external style sheet.
• Internal—this is imbedded in the HTML page. It only affects the styles of the page it is imbedded in so one must update the style on each page individually.
• Inline—this inserts a style or formatting rule inside an HTML tag. It is not very convenient because in order to change the style one must hunt down the rule hidden amongst all the HTML tags and content.
  

Principles of beautiful web design ch. 1:

Chapter 1- “Layout & Composition”. This chapter discuses the overall design process and gives some guidelines for good design. The design should not hinder the access to content.

• Users are pleased by the design but drawn to the content
• Intuitive navigation will help users access the content easily
• Each page should be recognized as part of the same website—keep continuous themes, colors, fonts, logos, etc.

The rule of thirds design principle aids in creating aesthetically pleasing designs. This is a simplistic breakdown of the golden ratio rule of art. The golden ratio will divide a space so one part is twice the size of the other. For some reason this seems to be a pleasing ratio. By designing a website on a grid, one can try to use this “rule of thirds”.

Review the following websites:

ICANN - http://www.icann.org/

The ICANN (Internet Corporation for Assigned Names and Numbers) site coordinates the database of unique internet addresses (names or numbers) worldwide. ICANN began in 1998 and is why we can have a global internet. This non-profit group consists of numerous individuals spread across the globe who maintain a secure, stable and interoperable internet. Its job is to coordinate the internet’s naming system. Among the many offerings on their site are: a glossary of internet terminology, and domain name dispute resolution policies.

Web Stats –

Internet Traffic Report: - http://www.internettrafficreport.com/main.htm

Internet Traffic Report is one of several websites that offer statistics on internet usage. This particular site analyzes the world data flow and displays it as a value between zero and 100: the higher the number the faster and more reliable the connections. Each continent is given a value and a trend arrow (most being up or static). Only 5 regions are listed: Asia, Australia, Europe, North America, and South America – with Africa being noticeably absent. North America is rated highest with 88 but is static; Asia, Europe, and South America are in the 60s and 70s but growing. Australia is rated 82 and is static. Clicking on a region will provide more detailed information about specific routers and their traffic.

Internet World Stats: - http://www.internetworldstats.com/stats.htm

Internet World Stats provides usage and population statistics for internet users. The main page features world stats, but there are links to statistics for: Africa, America, Asia, Europe, EU, Middle East, and Oceania. As of today (5/28/08) the most recent world statistics are from March 2008. For each region 6 items are tracked: population (2008 est.), population % of world, internet usage, % population who use internet (penetration), usage % of world, and usage growth 2000-2008. North America has the highest % of population who use internet (73.1%), but Asia with its large population has the highest usage % of world (37.6%). Africa and the Middle East have usage growth from 2000-2008 over 1000%. Interestingly, when one looks at individual countries with highest internet penetration rate, the United States ranks 4th behind Sweden, Hong Kong, and Denmark.

CAIDA Internet Infrastructure: - http://www.caida.org/home/

The CAIDA site (Cooperative Association for Internet Data Analysis) promotes the engineering and maintenance of a strong international internet structure by providing tools and analyses. There is a fascinating visualization of IPv4 AS level topology. Honestly, I am not sure entirely what this means, but it seems to be a visualization of a two week snapshot of the internet by graphing IP addresses and links in traceroute paths. It reminds me of a spirograph drawing toy I played with as a child. There is also a chart of Geographic region of ASes as determined by NetAcuity plotted against number of ASes (Average peering degree), skitter August 2007. Again I am not sure what average peering degrees are but this is definitely a place to go for internet technical data.
CAIDA also offers quite a number of tools that fall under the categories of: measurement, taxonomy, utilities, and visualization. These all help folks plot, plan, view, and understand the various intricacies of the internet.

Pew (non-profit research center): - http://pewresearch.org/

Pew Research Center is a very up to date (last updated today 5/29/2008) site that gives access to trends, facts and statistics that shape the world. They do political polls, statistics on religion, research and analysis of news media, social trends, international opinion polls, etc. For those working with the internet and web design, Pew’s information on internet and information technology trends are probably the most appropriate.

Nielson Net Ratings: (private research center) - http://www.nielsen-netratings.com/

Nielsen is known as a leading market researcher and this is their internet ratings and research site. They offer many solutions to common business internet issues:

• Examine the audience and traffic to your website
• Reach the audience you are trying to target
• Optimize your advertising strategy
• Benchmark your site
• Customized research for your business needs
  
  
  USF –
  
  USF Web Style Guidelines http://usfweb2.usf.edu/ur/webadmin/webguide.html
  
  This web page efficiently outlines the rules and regulations of official USF web pages. There are many policies which must be adhered to if one is setting up an official USF page, but personal pages are given more leeway than department or publicly viewed pages officially representing the school. This guideline site lists the definitions of an official page and the legal requirements. In particular, the university logo is discussed. It is required to be on all official pages and must be located on the top- preferably upper left corner of banner. One must download an official logo which adheres to the official colors and sizes. Each logo must link to the USF home page and it is forbidden to use the USF official seal on any web page. Like any company, the university is trying to make all official pages somewhat uniform. It is important for viewers to be able to tell that any official page they are linked to is clearly connected through similar themes and colors.

LIS 5315 Week 2

Week 2

Creating Web Sites ch. 3& 4:

Chapter 3- “Putting your page on the web”, is a wonderful explanation of web hosting. It describes domain names and how to register them, as well as things to look for in a web hosting company. There are some tips on choosing a domain name such as trying to keep it as close as possible to an existing company or business name. Ideally they should be the same, but this is not always possible. There is a discussion of top level domain names (.com, .org, .net, .biz, etc.) with the verdict seeming to be that .com is the way to go. It is what most people expect, especially for a business. If one has a non-profit company, then .org may be just as good. For a personal site, .net may be okay too, but the emphasis was .com.

As stated in this chapter, most people only need the lowest level of web hosting (bandwidth, space, etc.) unless one is offering many large files (audio, large photographs) for downloading purposes. There is a handy web host checklist offered for those who are new to having their own hosted site. Two sites are mentioned (http://aplus.net and http://www.brinkster.com) as web hosting options, but there are many others. It is best to avoid the free ones, although some ISPs (internet service providers) offer free space that is okay until you are ready for your own.

Chapter 4- “Power tools” is all about creating a first page in an HTML editor. Most people use either an HTML text editor or WYSIWYG editor. Some free ones such as NVU are mentioned but this is really phasing out and is replace by Komposer. The rest of the chapter discusses the use of Dreamweaver or frontpage with a brief exercise. This exercise is a bit confusing. You are to type a previously demonstrated page’s text into an HTML editor. It is assumed you are using frontpage or Dreamweaver as those are what the screen shots are from. The exercise instructions are interspersed with the screen shots which make it harder for someone who is using a different editor (or even a different version of the one shown) to follow. At the end FTP is shown but in a very confusing way. It assumes that you have already gone out and bought host space and a domain and is using FTP. If one is using a student site (such as at USF) one needs to know SSH and have it downloaded. Fortunately there is a very good tutorial for USF students in how to upload to their allotted space.


Review the following websites:


W3 Consortium: http://www.w3.org/
The World Wide Web Consortium (W3C) has a very full and up to date website. In spite of the fact that there are lots of things going on, it seems fairly straightforward to navigate. There is a large horizontal navigation bar at the top with clear indications. In the top of the right column is a search box for the site.
W3C develops web technologies and tries to keep the web running at full potential. This site is a place to go for information on news and technologies and new ways to communicate. At the bottom of the left column there is a box titled W3C A to Z which lists different topics in alphabetical order. This makes it quite easy to find information related to CSS or HTML for example. Under CSS there is even more information such as learning CSS (they offer tutorials), different authoring tools, the specs for CSS versions 1, 2, and 3, etc. There are not a lot of graphics and images on this website, but it is full of useful information and seems to be accessible to most.

W3Schools: http://www.w3schools.com/default.asp

W3Schools is the powerhouse of tutorials. Sponsored by W3C, this site is all about free web building tutorials from the very basic HTML and basic CSS to more advanced browser and server scripting tutorials (AJAX, SQL, PHP, etc.). The basic topics are listed down the left side and, once selected the main content of the tutorial will be in the center. It is quite easy to skip ahead or find a specific topic to view.
Under CSS, there are many tutorials both basic, and advanced covering beginning syntax and pseudo-class. There are numerous examples covering background, text, font, borders, padding, lists, etc. These are invaluable resources to both beginners and intermediate or those trying to problem solve, or try something new.

USF specific tutorials: http://www.cas.usf.edu/lis/distance/tutorials/

The main tutorial page is very easy to follow with columns for: general topics, USF OASIS, myUSF/ Blackboard, and student web page. I viewed two tutorials: Printing from blackboard and SSH files. Both were made using some sort of video type of software, such as captivate. One could watch screen shots as the cursor was moved to what needed to be clicked on and there were text caption boxes with important information so one did not need to have audio. The printing from black board was nicely done as if fit in the computer screen without scrolling and the important information boxes were place in the center in yellow so they stood out. The SSH files was not as good because in order to access the controls, one had to scroll down and then could not see what was being demonstrated at the top of the screen. In general the information was quite useful and the main tutorial page made it easy to find what was needed all in one place.

LIS 5315 Instruc. Graphics Week 1

Greetings!!

This is a weekly review of material (texts and website reviews) for a class project.

Library and Information Science (LIS) 5315 Instructional Graphics (University of South Florida-- USF) uses the following text books:

Beaird, J. (2007). The principles of beautiful web design. SitePoint.

MacDonald, M. (2005). Creating web sites: The missing manual. Pogue Press.

Robbins, J.N. (2007). Learning web design: A beginners guide to (x)html, style sheets, and graphics, 3rd ed. O’Reilly Media Inc.

Welcome to week one-

Creating Web Sites ch. 1, 2, & 17:

Chapters 1 and 2 provide a good overview of what the web is, what HTML is and key points to consider when contemplating designing a website. MacDonald mentions many types of websites and encourages one to think about which type one is looking for before starting the design. One must think of the type of website needed and the intended audience.

• Personal site: about you or something you did
• Online diary aka BLOG: personal website with frequent, diary or journal-like entries. Blog is short for web log.
• Resume site: this is a more professional, career building tool than the personal site.
• Topical site: a website on a topic; could be a hobby or interest such as music (or a particular group), an artist, food, etc.
• Event sites: these are often temporary or evolve into another type. They are designed to promote a happening such as a conference, wedding, graduation, etc.
• Promotion site: this could be similar to a resume site but used to promote a creation (new book, CD, etc).
• Small business/ commercial site: this category is probably a good percentage of the .com domain. This type of website is designed to sell a product and companies like paypal and yahoo can make it easier for a small business owner to set up a website with a “shopping cart” and to accept credit card payments.

Chapter 17 focuses on blogs (web logs). Blogs are a special type of web page. They are personal and reflect the author’s opinion but can cover a variety of topics (personal diary, hobbies, work-based, random musings, etc.). Blogs are usually organized in a chronological order, often with the most recent entry first. Unlike many web pages which can sit unchanged, blogs are frequently updated, sometimes hourly! Blogs can start a conversation by tying in other related blogs by links.

Types of blogs include:

• Hosted blog: user signs up with blog provider and fills out form to add entry. This is usually the easiest method for those new to blogging. See: MSN Spaces (http://spaces.msn.com), Radio UserLand (http://radio.userland.com), TypePad (http://typepad.com), Live Journal (www.livejournal.com), Xanga (www.xanga.com), etc.

• Self-hosted blog: the blogger has her/his own server and server software which they use. This provides the most flexibility but is also the most difficult.

• Remote weblog system: this is a combination of hosted blog and self-hosted blog. The user uses a blogging system from a blog provider but has a choice where the blog files are stored. See blogger (www.blogger.com), WebCrimson (www.webcrimson.com).

The rest of the chapter walks the reader through the steps of creating a blog using Blogger. The instructions are easy to follow and make it easy for anyone to get started.

Principles of Beautiful Web Design preface:

The preface does what a good preface should—it provides a nice overview of what is contained inside. The author, Beaird, compares remodeling a bathroom to designing a website:

• Good design means thinking about the relationships of all the elements and looking for balance.

• Good designs are timeless—classic designs work well again and again, they don’t use the latest fads and do-dads just to impress or because they can.

• Finishing touches are important. Just as curb appeal is important to a property, finishing touches can really make a website look and be well designed.

This is a shorter book which covers five basic topics: layout, color, texture, typography, and imagery. These are the elements that will need to be considered in designing a website.

Review the following websites:

Texts -

Principles of Beautiful Web Design site: http://www.principlesofbeautifulwebdesign.com/index.php

The site opened on a “CSS Naked Day” celebration with all the stylesheets removed. This is a neat way to demonstrate what CSS (Cascading Style Sheets) does, but may be a bit confusing for someone who never used or heard of CSS before. There is obviously a huge difference between the website without CSS and with the stylesheets and it is an excellent demonstration to open the site without CSS and experience the difference yourself.

The design for this page is great in that it is kept small. There is no need to scroll horizontally and only minimally in the vertical direction. This is done through some very neat coding which allows the information for the 5 topics (layout, color, texture, typography, and imagery) to appear in the same place on the page when the word is rolled over with the mouse. The added graphic arrows add to the whole presentation.

Creating Websites: The Missing Manual: http://missingmanuals.com/cds/creatingwstmm/

This site is not cluttered but full of information. The left side bar provides information about other “missing manual” books and allows searching. There is all information on blogs, newsletters, and contact information which is easy to find. The main section of the page is devoted to examples for various chapters from the Creating Websites book.

The upper right provides a neat search option by Safari. One can put a key word in and search for that topic in Creating Websites. I tried putting in “css” and got numerous results. This is a very handy and easy to use tool. Each chapter has numerous links to website for examples, or to download handy items. There is a list of browsers (in case one needs a new one), links ot free blog sites, and many more resources. This is a wonderful list of resources for someone new to web design.

Free design software –

Nvu: http://nvudev.com/index.php

Nvu (pronounced N-view) is an open source WYSIWYG web editor program. It is free to use, but does take donations. A WYSIWYG editor is a “What You See Is What You Get” type of editor much like MS Word or other word processing editors. You do not need to know HTML or CSS coding to use this type of editor, but it does help. Nvu has some nice features including:

• An integrated file management system- uses FTP to let you edit web pages directly from the site.

• Produces reliable HTML code to work with popular browsers: this implys that the code produced with work with the notoriously quirky yet popular Internet Explorer (IE) browsers.

• You can go from WYSIWYG to HTML editing just by clicking a tab

• You can work on multiple pages through the use of tabs

• Supports templates

• Works with Linux, MS windows, and Apple Macintosh

The Nvu website has screenshots, resources for developers, links to downloads, and very important for new users, a FAQ page. This page has links to learning to use Nvu to build a website, Demos on creating good websites using Nvu, and an area for questions about HTML or Websites.

Komposer: http://www.kompozer.net/

Komposer is another WYSIWYG web authoring program. Like Nvu it is free. In fact its list of features is almost identical to Nvu!

• Has integrated file management using FTP- log on to your website and edit the pages directly.

• HTML codes are reliable with most popular browsers- this (as with Nvu) implies that the codes will work with the ever popular but notoriously quirky IE browsers.

• Tabs allow you to go between WYSIWYG and HTML editors easily.

• Tabs are used to allow one to work on multiple pages easily.

• Supports templates, forms, tables, etc.

While the Kompozer site doesn’t have the blog information that the Nvu site has, it does give a more detailed description of the features such as CSS editor, color picker, and spell checker.

There is a reason Kompozer and Nvu are similar; Kompozer is a spinoff of Nvu and both thanks Daniel Glazman (Nvu creator) and says that Nvu is not being updated or fixed anymore whereas Kompozer is. Yet on the Nvu FAQ page, it states the Nvu project is still active. However, it says that Glazman is developing the next generation HTML editor which may mean that Nvu is NOT being updated, but a new editor is in the works.

All that being said, both seem to be good alternatives to more expensive tools such as Dreamweaver. I have used Kompozer a little bit and it works but one must be prepared to explore and figure out how everything works.

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

Gimp is a graphics program that is similar to Adobe Photoshop. Like Nvu and Kompozer, it is a free open source program. Like Photoshop, it allows for multiple layers and effects for photos. I have used this program very successfully, although I have barely touched the surface of what it can do.

With no experience using graphics programs, I relied heavily on Gimp’s help and tutorials. I found it simple to resize large photos to various sized for the web (which is mostly what I used it for). I also created some custom bullet points and buttons, and played with text graphics for a banner. Like Nvu and Kompozer, if one is to truly take advantage of what Gimp offers, one must spend time learning what it can do.

Tutorials –

Smashing Magazine - design magazine with helpful tutorials: http://www.smashingmagazine.com/

This is a very busy website but seems to be kept under control by clear boundaries. The Right side column is quite wide and holds all the ads and sponsors. The Left side is the main content of the magazine. The navigation bar is way up at the top, but is clear and allows one to select main categories of interest, such as: graphics, showcases, inspiration, fonts, how-to, CSS, tutorials, etc.

Under the “tools” section there are several reviews of different code editors and WYSIWYG editors. This type of information can be very useful to someone new, or someone looking for a new tool to use who is not sure of all the free share ware options available.

Cutting Edge Design –

2Advanced Studios:

http://2advanced.com/

This is an amazing website that is almost like being in a movie or at least watching one. Navigating through this site made me feel transported to the future. The navigation bars and text seem to simulate an advanced computer/robot in a star trek/terminator way. A wonderful futuristic picture fills the screen while the majority of the navigation array is hidden until your mouse glides over it. When the mouse hovers, a whole transparent box drops down with many options clearly listed. One can look at projects (websites designed) by 2Advanced and just be amazed. This is obviously advanced, specialized work and is not appropriate for all situations. While I may enjoy the futuristic feel, the majority of library patrons may find it very hard to navigate a library online catalog (OPAC) if it looked like this. The navigation font is particularly small and many might have a hard time reading it.

FWA - Favorite Website Awards:

http://www.thefwa.com/

This is a compilation of award winning websites, newsletters, wallpaper, etc. The “winners” page has the entire FWA winners’ database from the beginning in 2000. The “Site Of The Day” (SOTD) is labeled with a yellow ribbon and the Site Of The Month (SOTM) winners have a maroon ribbon. Blue ribbons identify sites that won People’s Choice Awards or Site Of The Year awards. There are some very amazing sites, but most are games or flash stuff rather than informational. Some are a little of both, but most are commercial and are advertisements of some sort. It is a great example of what can be done online.

Web Pages that Suck:

http://www.webpagesthatsuck.com/

This website lists and has links to really bad websites. Some are bad because of color or general design issues and some are bad because of navigation issues. All of the “showcased” sites have comments which explain the issue. In some cases the link is to an archived site because the original has been removed (usually with good reason). I did notice that some of the links were to improved sites. It was interesting to see how a site was changed to make it work, however you can only judge the changed based on the screen shot image from the “bad design version”.

For someone new to web design, this is an interesting look at things to avoid doing. The worst websites of 2007 are categorized on the left side bar. The “top 10” for worst website and worst uses of web site navigation are first. There is also a category for worst nonprofit web site. The contenders for 2008 are listed below the “winners” of 2007. There are also some daily examples of bad design and a category for “biggest mistakes in web design 1995-2015”.

Blogs -

Blog@USF:

http://blog.usf.edu/

This is the USF official blog site for use by students with a mail.usf.edu account. One uses one’s net id to logon. The USF blog site is based on WordPress and has a digital photo album capability. It uses Feed Reader and can mesh with del.icio.us accounts and with flickr. Blog@USF uses Texturize for HTML markup.

Blogger:

https://www.blogger.com/start

Blogger is the blog site discussed in MacDonald’s Creating Web Sites. It started as a small company in 1999 and survived the dot com bust barely. They were doing well again and in 2002 Google made an offer to buy them. Blogger is now a small team within Google and it seems to be working well for them.

The main page has a logon area and an area to sign up. The main feature, though, is a walk through explanation of what a blog is and what blogger offers. Some typical features are templates, custom colors, and drag-and-drop page elements. Like other blog services one can also upload photos.

WordPress:

http://wordpress.com/

WordPress offers free blog hosting of public and private blogs. There are many themes to choose from and allows you to tag your posts (everybody love cataloging) so they can be found in the archives. WordPress has spell check options and allows photos to be uploaded easily. One can even embed videos (YouTube, Google, etc.).

Zoho Writer:

http://writer.zoho.com/jsp/home.jsp?serviceurl=%2Findex.do

This is an online word processor (think Google Docs) which allows collaborative editing of documents and online storage. You don’t need to worry about trying to save a document and then hope that the next computer you use has the software to open the files. All you need to do is go online and access all your documents. It even accepts imported files from MS Word, OpenOffice, HTML, RTF, etc.