This is a class project for my USF MLIS class. LIS 5315 uses the following texts:

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.

This blog is a weekly review of assigned materials (text readings and website reviews).

Welcome to week one!

Week 1

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.

Advertisements