Table of Contents:

What is the Internet?

As many of you already know, the Internet is a global network linking millions of computers and other devices together allowing data to be transferred through a two-part protocol called Transmission Control Protocol/Internet Protocol (TCP/IP). It is an international system of hardware--computers and cable, for example.

The two-part process that allows these computers to communicate begins with Internet Protocol (IP), which provides a method of moving packets of data and a system of unique addresses on the network to make it possible to deliver the data to the appropriate place. Transmission Control Protocol provides a way of testing the success of the data packet delivery. Just as delivering a package to your home or business requires that the sender have your correct address, delivering data electronically requires the sender have the receivers specific address, or IP address.

IP addresses are numerical: four sets of digits with up to three digits in each set, punctuated by decimals. For example, this is an IP address: 365.198.63.113. Some computers have fixed IP addresses; many do not and are regularly assigned new addresses. The mechanism for this is beyond the scope of this course, but it is important to note that IP addresses are sets of numbers following the above-mentioned pattern. However, numbers are difficult to remember, easy to mistype, and in the case of IP addresses, can change frequently, so a system of using Domain Name Service or DNS was developed. Domain names are typically descriptive to make them easier to remember and type accurately. www.washington.edu is an example of a domain name. These names are used as a practical way of mapping to the actual IP address.

So, to summarize, the Internet is a system of hardware devices that can communicate with each other using addresses.

What is the Web?

Often you hear people talk about the Internet and the World Wide Web, or Web, as if they were the same thing [Slide1] They are not. Whereas the Internet is a system of hardware, the Web is a system of software or application running on top of the Internet. It is best thought of as a network of documents transmitted on request over the Internet through what is called the Hypertext Transfer Protocol or HTTP.

Http can be used to transfer many types of files, but it is generally considered a collection of static and dynamic hypertext markup language (HTML) pages.

Static pages have content and html code that is fixed. The html code is used by browsers (another software application) to display structured and formatted documents.

Dynamic pages, on the other hand, contain processing code on the server that can create html code and Web page content dynamically, deliver that content and code to a Web server that returns it to the Web browser for viewing by the user.

Server-side processing requires specific applications, such as cgi scripts or application servers, such as Cold Fusion. You cannot simply invoke server-side processing by creating a page with a .cfm or .asp extension.

All of this brings us down to the Web pages, a collection of associated pages and dependent files such as images, style sheets, audio and video clips that have these distinct features:

·         They are based on hypertext  (can be linked to each other and other files)

·         They can support all kinds of media

·         They can be interactive; the viewer can act on the page

·         They can be designed visually to accomplish different purposes

We have a few more definitions to cover before moving directly into that design process.

  Web browser is the desktop application or client application used by the viewer to request and process Web pages. At a minimum, browsers parse HTML code and use the markup tags to render the pages as rich text with hyperlinks, imbedded images, and other media.  Browsers we are most familiar with are Microsoft’s Internet Explore (IE) and Netscape Navigator. IE has about 90% of the market with Netscape as the main alternative; however, there are other browsers that are well worth downloading and using, namely Mozilla, an open-source browser, and Opera. (Opera is based in Oslo, Norway and has done extensive work in making its browser more user friendly for the Chinese language.)

 All of these browsers do a great deal more than parse and render html code. They can:

·     Display graphics in several formats (gif, jpeg, png, for example).

·     Process Cascading Style Sheets

·  Interpret JavaScript to generate and manipulate content through client-side scripting

·     Work with plug-in applications to display other kinds of content, such as .pdf and Flash movies

Cross-Browser Compatibility

A major challenge for Web designers is that each of these browsers operate in a somewhat different way and support HTML, JavaScript and CSS to different degrees. In fact, different versions of the same browser may respond differently. What this means for the designer is that your page will probably look different in different browsers, and may not even function in some unless the difference among browsers are taken into consideration in the design.  Understanding and dealing with the differences among browsers is beyond the scope of this introductory course. However, for those who would like to pursue the topic further there are two Web sites well worth viewing:

http://hotwired.lycos.com/webmonkey/reference/browser_chart/

and http://www.webreview.com/browsers/browsers.shtml.

Web Servers

The final piece of the puzzle we need to understand is the Web server. Web servers are software applications that send files over the Web in response to requests from browsers. Each Web page usually requires several requests to the server: one for the page and additional requests for dependent files, such as images, and video clips.

For security reasons a Web server cannot send just any file that exists on the server. Access to files is restricted to the files located somewhere in the directory tree under a specific directory designated by the Web server administrator as the Web Document Root or Web Root. You will need to talk to your Web server administrator to find the name and path of your Web Root. In addition to the directories and files under the Web Root, your server administrator may create mappings to other “virtual” directories that may be located anywhere on the server or on a mapped network drive that is accessible to the server.

List of Default Files

Order of Search can vary according to the way the list of default files is set up, so developers who provide a default page in each directory (which is a good practice) need to find out the default names and search order from the Web server administrator or create copies of the default page with several names. Usually, index.htm is the default page.

 If the server can’t find a default page, the server will return a listing of all files in the directory, unless directory browsing is denied. These days the majority of servers disallow directory browsing for security reasons.

 Web servers may process pages or initiate some kind of associated processing on the server for the following types of files:

• Server Side Includes (SSI):  Usually marked with the file extension .shtml are processed by the server before they are sent to the browser. SSI tags are processed to insert dynamic information such as the date or to launch external process such as database queries to generate dynamic content.

• Common Gateway Interface (CGI): These reside in a special directory under the Web document root (/cgi-bin) and are invoked by a browser request. CGI programs can perform processing of various kinds and return content in a generated Web page. They are most commonly associated with forms.

• Web Application Servers: Requested files with special extensions are passed to an application such as Cold Fusion. The application server processes any server-side processing code in the page and uses it to generate content returned to the Web server, which in turn sends it to the browser.

Uniform Resource Locator (URLS) is a form used in the browser to request a document from a Web server. It consists of:

·    The service identifier (most often http)

·    Host (IP address or DNS name)

·    Path

·    File Name

 Example: http://www.apec.org/infectious/index.html

The domain name directs the request to the appropriate server. The path is used by the Web server to locate the directory in the directory tree under the Web document root. The filename is used to identify the specific file requested. If no file name is specified the Web server will search for a default document.

The URL may also include:

·   A specific port number used by the Web server instead of the default port for http. The port number is appended to the domain name, separated from it by a colon (:). A port: is a specified area of memory on the system reserved for data involved in certain kinds of network communications.

· Named anchor appended to the filename and separated from it by a pound (#) sign

·   A query string consisting of one or more name=value pairs, separated by ampersand (&). The entire query string is appended to the end of the URL and separated by a question mark

Client-Side Web Technologies

The term “client-side” refers to technologies that exist on the users desktop, laptop or pda. They include:

• HTML: A set of tags inserted into a text file to indicate the logical structure of a document.

• Syntax of a HTML tags

All tags that contain contextual content require closing tags [Slide2].  Empty tags (tags that do not contain content) <br> must be closed under XHTML by including a forward slash at the end of the tag:

 <im src=”image1.gif” />

XHTML is a version of HTML refined to adhere to requirements of the XML languages. Attributes should be enclosed in quotation marks. XHTML is case sensitive; must use lower case; HTML is not a case sensitive, but it is good practice to use lower case.

• Structure of an HTML Page:  All html text begin with the following structure: <html>, <head>, <title>, </head>, <body>, </body>, </html>. [Slide3], [Slide4], [Slide5].

• Structure of a Link [Slide6], [Slide7]

  <a href=”the url you want to link to”>

• Javascript

JavaScript offers a way to make your Web pages interactive. Some of the things you can do with JavaScript are:

• process data collected in HTML forms right on the user's computer, without involving a server
• mouse rollovers
• popup menus
• animation

 Dreamweaver contains many pre-written JavaScript programs called behaviors, which simplifies the process of including JavaScript on your site. However, like HTML, the more familiar you are with the language the better able you are to debug your pages. Learning JavaScript is beyond the scope of this short course. [Slide8]

Summary of Web Possibilities and Limitations

Now that we have a cursory understanding of the Web environment, we can synthesize these into basic tenants that the Web designer needs to keep in mind:

 •         The Web is nonlinear. Hyperlinks make it not only possible, but easy, for a user to move off your page or access your page in unexpected ways. You cannot assume that your user starts at a particular point and moves along a predictable path. The designer needs to make the site comprehendible from any entry point and to assist the user in finding the information he is seeking from any point.

•         Page Layout is not necessarily under the designer’s control. With so many browsers, so many devices (desktop, laptop, pda), and so much freedom for the user to set his owner viewer preferences for screen size and font, etc., the successful designer must build adaptability and flexibility in.

 •         HTML’s capabilities are changing all the time. The World Wide Web Consortium (W3C) was created in October 1994 develops specifications, guidelines, software, and tools to lead the Web to its full potential. W3C has around 500 member organizations from all over the world and has earned international recognition for its contributions to the growth of the Web. To learn more about its scope and specifications, go to its Web site at <http://www.w3.org/>

•         Download time sets the standard. Web users are impatient. If it takes too long to download your Web site a potential user may move on before even looking at your pages. Before incorporating dense graphics, animation and video clips, consider the hardware capabilities of the majority of your audience. Do most have fast (T1) connections or modem connections? What is their modem speed? Use best practices for incorporating graphics, etc. into your site to minimize downloading time.

 •      Tools are improving. We are standing in a moving stream. What was the standard just a year ago is now history. Web editing tools such as Dreamweaver are continually improving as are browsers and servers.[Slide9]

The Web Design Process

 1.      Managing the project:

A Web site is a never-ending job. Content must be kept fresh to keep users coming back. Links to resources outside your site must be check regularly; the URL can change or become unavailable. The largest task in maintain a Web site is communicating: Everyone involved in the project needs to know what is going on. Often too little time is factored in for maintenance. If this happens the site will gradually fall into disuse. General project management principles apply to Web site management:

            Cost: Money, management time, opportunity costs

            Time:  Total number of man-hours spent on the project

Quality:  Define project success for yourself. It could be commercial success, meeting certain specifications, or leading the way for innovation or all three.

If one of these factors is affected it will have an impact on the others. It is important to keep the mindset that one thing cannot change without consequent effects on other aspects of the project. It is the responsibility of the project manager to maintain the best possible balance between these three factors and to keep all team members informed.[Slide10]

2.    Defining the Site’s Goals: 

What are the objectives of your Web site? Who is the audience? [Slide11] What is their level of sophistication regarding the topic area? What is their level of sophistication regarding computer use?  At the end of this stage, everyone involved with the project should have a clear understanding of what is being developed, for whom, and why. Answers to these questions will determine the technical needs as well as the look and feel of your site.

3.   Information architecture:

Now that the goals of the site and the audience are defined a blueprint can be created. Information architecture refers to creating the foundation, structure and blueprint for your entire site. It answers two basic questions: What content is needed? What functionality is required? [Slide12]

Content can be static, like copyright notices, privacy statements, membership rules or logons, or dynamic, the material that keeps your viewers coming back and current.

Once you have gathered the pieces of your site you need to organize them. Story boarding with a team is an ideal way of grouping and labeling content. I like to use post-it notes with various colors representing navigation levels or topics. On each post-it is a content heading or subheading. As the group discusses the organization and tries to envision themselves as the user new groupings and label names will emerge. With post-it notes arranged on a large board you can move items around and re-group them until you come up with an organization your team agrees on.

 Then it is time to list the function requirements of each grouping. I initially add these to the storyboard using post-its and then transfer the functionality requirements to a list.

 The questions you and your team will be asking in the storyboarding process include: What are the major sections? Are these appropriate to use as the global navigation system that appears on every page of the site. It’s best to keep the number of global navigation elements between five and seven. You may want to incorporate your organization’s logo into the global navigation system as a link back to your home page.

Once the team has decided on content structure you can move ahead with creating a visual design or mock-up of your site. If you are working with a graphic designer, they may provide you with a mock-up created in Pagemaker or another layout software program that you would use in Dreamweaver as a tracing element.

4.      Creating the content:

Typically I gather all of my content in an assets folder with a subfolder for images. It simplifies the linking process, helps avoid project stop and starts, and keeps your site organization  relatively simple to gather and organize your content before beginning the production process.

5.      Programming and scripting:

This step is self explanatory and refers back to your list of functionality requirements. 

 6.      Production:

Putting it all together, the design, content, functions, links. You should invite members of your team as well as people who have not been involved in the planning process to use your site at a test location and report to you any elements that aren’t functioning or structures that are confusing.

 7.      Publishing:

This is usually the simplest step, a matter of uploading your site (with its structure intact) to a public server and letting people know it is there.

 Creating User-Friendly Content

As you may have noticed throughout this discussion I have referred to a Web site’s audience as users, not readers. This is an intentional distinction and important to remember when creating a Web page. Usability studies have shown that most Web users do not read the page as they would a book. Instead, they scan it, looking for and moving toward the information nuggets they want. Keep this in mind when writing for the Web. Use short, clear labels and sentence structure. Test your material on a test audience. [Slide13]

 •         Create scannable text

Reading from a computer screen is tiring and approximately 25 percent slower than reading from paper [Slide14]. People looking for information on the Web are usually in a hurry. They don’t want to work hard to find information. To help them, highlight keywords and use short, meaningful subheads. [Slide15]

 •         Inverted pyramid writing style

When you do need to prepare longer text documents, be as concise and objective as possible. Aim for half the word count as you would use in print. Using the traditional journalism style of the inverted pyramid is effective on the Web [Slide16]. It means putting the most important elements first. Start with your conclusion, and provide layers of increasing detail as you drill through the article. The first paragraph could contain the essential basics: who, what, when and where, information that would be considered.  How and why can be elaborated in subsequent paragraphs. Basically, the punch line is first, not last. If the reader wants more detail, they can read further into the article, but they have a general understanding from the first paragraph.

You will want to call attention to key information and offer it in small packets of information that link to increased detail. As much as possible, avoid scrolling material. [Slide17]

 •         Keep design simple

Overly busy designs or complex designs with multiple fonts and images make it difficult for the user to find and move through the information. Remember, Web users are impatient.

•         Continually update pages

Nothing discourages repeat visits that stale information and broken links. You must create content that will keep your users coming back and invest the time daily, weekly or monthly in updating the information and maintaining the pages functioning.

     •         Test on users

No one is more familiar with your site and your content than you are. What seems intuitive to you may have your audience baffled. Ask people who represent various characteristics of your potential audience to review your site and give you critical feedback. Their comments, and your response to them, may be the difference between a successful and unsuccessful site. They will see things you don’t see and raise questions you hadn’t thought of.

·         Academic Writing: The Exception

There is one important exception to these rules of writing for the Web, and that is academic writing. This may seem like an exception, but actually it follows a more fundamental rule: respect your audience. An academic audience is most likely to respond to Web content that respects academic traditions. To lend credibility to your Web-published research follow the style on the most prestigious journals in your field. In the case of long documents, academic or otherwise, the user is likely to print the report to read it, rather than read online. Be sure to provide them with a print-friendly version. [Slide18]. Take advantage of the Web’s strengths, even on academic sites: show, don’t tell by using graphics and other media; and link to related material. [Slide19]

Usability

Usability is a major topic in Web design and its concepts are changing rapidly as more and more people become familiar with working online. Dr. Jakob Nielsen, of Nielsen Norman Group, has studied and written extensively on usability. His Web site < http://www.useit.com/> can be very informative in exploring this topic.

For the purposes of this course we will briefly review is list of 10 common design mistakes before we get into the workshop portion of the course and design our own Web pages.

•      Using frames: A frame essential combines two or more Web pages into one, with each section or frame having s distinct URL. This presents a difficulty in saving and/or printing the page. It is often difficulty for the user to know whether they have selected the entire page or only a frame. The result being that they are not able to print or save the desired material easily.

•  Using cutting-edge technology:  Innovation is great, but it is often better to allow others to perfect the new technology before you dive in. Technology that works intermittently can be very frustrating to users and may be beyond the hardware capacity of their equipment. To attract and keep users to your site, minimize their frustrations.

• Scrolling text, marquees, and constantly running animations: These are more popular in some cultures than others, so the key here is to know your audience and know their technical limitations. Simplicity is often more inviting than complexity. Use these techniques to the extent that they help your users find what they are looking for and navigate through your site.

•  Complex URLs: To the extent possible, keep your URL simple and meaningful. If your server administrator assigns you a long URL, discuss with them the possibility of mapping to it through a simpler one. [Slide20]

•  Orphan pages:  Don’t loose your audience in cyberspace. Make sure each of your pages links back to your home page. If you are linking off your site, have that second site open in a separate window so your site remains on the screen in the background, and they can always get back to your site.

•  Long scrolling pages: We discussed this earlier. Simplicity rules.

•  Lack of navigation support: Good testing is invaluable. Your test audience may have difficulty navigating your site in ways that may surprise you. Better to be surprised in the test phase than when you are online.

•  Non-standard link colors: People have come to identify blue with links, although as users are getting more sophisticated they are less baffled by nontraditional link colors. Again, the key element is to know your audience, and don’t let clever design minimize the user experience.

•  Outdated information: Probably the only thing worse than no information is misinformation. Creating a Web site is a commitment to maintaining it. Make sure the links, addresses, phone numbers, names and other content are accurate and current.

•  Overly long download times: Your audience is lost before you’ve drawn them in, if they give up before they have downloaded your page. Graphics are the biggest culprits so it is worthwhile to take the time to learn how to prepare graphics for the Web so you can get the optimal image using the minimal memory. [Slide21]

Conclusion

Creating an effective Web site requires an understanding of the concepts we have discussed here and an understanding of html scripting (and JavaScripting for interactive pages). With these tools you can create a Web page in any text editor, such as Microsoft’s notepad and upload them to a Web server. It is not necessary to buy or use HTML editing software. However, many people prefer to use HTML editing software because it can make the process of creating and maintaining a Web site considerably quicker.