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.