Web Design and Internet Literacy

Kathleen Eilers crandall

Camille Aidala

TIDE at ASD – June 22, 2000

Introduction – Presenters

Workshop leaders:• Kathleen Eilers crandall, Ph.D.

English professor at NTID; develops and uses web technologies for teaching reading, writing, computer technology, and education courses

• Camille AidalaInstructional Developer at NTID; provides design and development services for faculty, staff, and administrators

Introduction – Objectives

Objectives for this workshop:1. Understand how a web page works2. Design and produce a small web site (2 –

3 web pages) that includes: text, images, links, lists, tables, and communication contact.

3. Collect resources to assist you with continued skill development

Introduction – Participants

Survey of Participants

Purpose: to assist us in addressing your needs so we can start the hands-on activities at the level of your present needs and skills.

• Your Access

• Your Audience

• Your Experience

Introduction – Materials

Participants’ bookmark file including:• Materials developed for this workshop

– PowerPoint presentation– Directions for producing a basic web site

• Supplementary resources– Browsers– Web Development Tools– Lesson Plans – Educational Sites for Students – Research on Internet Use in Education

Bookmarks (Favorites) …

• Everyone should be at a computer that is connected to the Internet.

• Everyone should have their Web Design Web Design Workshop Workshop disk.

Loading Your Bookmarks

1. Open browser - Netscape

2. At the top menu bar, click on: Communicator, Bookmarks, and Edit Bookmarks

NOTE: Concepts are similar for the IE browser. (You would import favorites to use your bookmark file.)

Loading Your Bookmarks

3. In the bookmarks window, click on: File / Open Bookmarks File

4. You now see the bookmark file we gave you.

5. Close the Bookmarks window.

Managing Bookmarks

1. Go to this presentation: http://www.rit.edu/~kecncp/ASD-TIDE/WebDesign.htm

2. On the Location Toolbar, click the Bookmarks button, and then Add Bookmark, OR drag the location flag to the Bookmarks button.

3. This new bookmark is now at the bottom of your list.

Managing Bookmarks

4. You can have many bookmark lists, but only one list can be active at a time.

5. To save a bookmark list, click the Bookmarks button and choose Edit Bookmarks. Then, open the File menu and choose Save As.

Managing Bookmarks

6. You can use Help to learn more about bookmark lists.

7. Click F1 for Help. Click index and search for bookmarks.

How Does the Web Work?

• How do you learn best?– Direct exploration and

experimentation (student-directed)

– Watching, reading, listening to someone else tell you about it (teacher-directed)

– A combination of both

• How a Web Page Works

• What is the internet?(sites accessed June 2000)

Essential Terms

• As teachers, you realize that understanding is essential for learning.

• That means a set of mutually understood terms.

• Glossary of Internet Terms(site accessed June 2000)

Terms: Page & HTML

• Web page Web page – a text file that contains a set of HTML tags that tell a browser what to do.

• HTML (hyper text markup language)HTML (hyper text markup language) – a computer language that tells a web browser how a web page should be displayed. HTML tags do things like change the font color, arrange things in tables, display forms, embed graphics.

Terms: Browser & Server

• Web browserWeb browser – a computer program on your computer that knows how to go to a web server, get a web page, and interpret the HTML tags.

• Web server Web server – a piece of computer software that responds to a browser’s request and sends a page through the internet to a web browser on your computer.

Terms: Homepage & URL

• HomepageHomepage – the main web page for a business, organization, person or simply the main page out of a collection of web pages. Ex: “check out NTID’s new homepage.

• URL URL – uniform resource locator. The standard way to give the address (location) of any resource on the internet that is part of the world wide web (WWW). Ex: http://www.rit.edu/~418www/new/NTID.html.

(sites accessed June 2000)

Web Design – Prerequisites

Computer skill prerequisites

• Managing directories (folders) and files on your computer

• Using word processing

• Creating/manipulating images

• Using email

• Searching and browsing the internet

Web Design – Prerequisites

Planning prerequisites

• Knowing what you want users to do at your web site.

• Breaking down what you want to do into logical, meaningful parts for display.

• Understanding the procedures for creating, displaying, and maintaining a web site.

Web Development Cycle

2. Design a siteand a test plan

3. Prepare and code material

for web display4. Test and debug the pages

5. Makeavailable to

audience

6. Update

1. Analysis of site’s purpose

(objectives)

1: Analysis of Site’s Purpose

For this analysis, there are three questions to answer:

• Who are your potential users?• Why are they visiting your web site?• What do you want users to do at your web

site?

1. Analysis of Site’s Purpose

Worksheet

We will now complete the worksheet questions to illustrate how we planned the web site for this presentation. Participants can recreate this web site, use this site as a model, or create a totally new web site.

Example Scenario: Who

Who are potential users?• Participants in this workshop• People who would have liked

to attend this workshop• People who are curious about

this workshop1. Analysis of site’s purpose

(objectives)

Example Scenario: Why

Why are users visiting the web site?

• To complete the workshop activities

• To learn how to produce a simple web site

1. Analysis of site’s purpose

(objectives)

Example Scenario: What

What do you want users to do?• Follow the workshop activities• Produce an attractive, functional

2 to 3 page web site • Get resources for continued

learning• Be able to contact the workshop

leaders1. Analysis of site’s purpose

(objectives)

Summary – Analysis of Purpose

Example ScenarioExample ScenarioPurpose: Provide information and directions to the

participants of this workshop so they can – Produce a 2 to 3 page web site that includes text,

images, links, lists, tables, and a communication contact

– Review and continue to learn from this presentation after leaving this conference

– Contact the workshop leaders.

2. Design a Site and a Test Plan

To accomplish this task, you should consider:• What is a logical flow of information?• How can you facilitate ease of use? • How can you present with visual clarity?• How should your files be arranged?• Will everything work right? (How will

you test your site?)2. Design a siteand a test plan

Principles: Information Flow

Organize your web site on paper.Good plans will:– Help you organize the content

that you have.– Indicate where there are gaps or

missing pieces.– Avoid time consuming and

costly mistakes.– Let you see possible logic

problems and design flaws.– Facilitate the sharing of ideas

with others.

2. Design a siteand a test plan

Ease of Use

Help your audience:• Write clear directions and information.• Be task centered and concise, not

unfocused or wordy.• Display a table of contents or an index

to allow users to navigate within your site. 2. Design a site

and a test plan

Ease of Use (cont.)Follow a consistent design throughout

your site:– Use similar logos, banners (headers), and

buttons.– Be consistent with margins, spacing, font

styles, and positioning.– Use colors and images to convey

meaning.Arrange screens in a logical way:

– Organize information from left to right, and from top to bottom.

– Group similar information visually.2. Design a siteand a test plan

Visual ClarityUse color purposefully and sparingly.

– Maintain similar color scheme; Don’t confuse users.

– Check visibility of the color combinations.

Limit number of fonts.– Not all computer have the same fonts

available.– Check readability of your fonts and font

sizes.2. Design a siteand a test plan

File ArrangementUse a project folder (main folder) on

your disk for your web site.– Create sub folders as needed.– Give files meaningful names and save

files to these folders • When you work on different

computers, copy the entire project folder.– Do not just copy files or subfolders.– This practice avoids errors and broken

links.2. Design a siteand a test plan

Folders and Files

Folders

Folder

Files

Files

Files

Files

Folder

Test PlanDo all the images appear? Do all the links work?Does the site appear correctly on different

browsers?Can users accomplish the site objectives?Do pages have good visibility and legibility?

2. Design a siteand a test plan

2. Design a Site and a Test Plan

Worksheet

We will now complete the worksheet questions to illustrate how we designed a site and test plan for the web site for this presentation.

Example Scenario: Flow

Elements from – Step 1: Summary – Analysis of Purpose

Workshopbookmarks

Workshoppresentation

Worksheets

Web Design and Internet Literacy

Workshop

2. Design a siteand a test plan

Homepage

Pages Linkedto Homepage

Example Scenario: Ease of Use

Web content will come from:• bookmark file• PowerPoint presentation• worksheetsFirst page of site will be a contents page with

links to the other three site pages.

2. Design a siteand a test plan

Example: Ease of Use (cont.)• Design or find a banner (header) for a

640 x 480 screen.• Headings twice as large as other text

with color to match banner and ornate type font

• White page background• Black, Ariel type font for text• Green links, blue previously accessed

links, red active links• Photos of participants and presenters

working, not larger than 1/3 height of screen (160 pixels)

2. Design a siteand a test plan

Example Scenario: Visual Clarity

All pages at the site will follow the same:• banner design• color scheme• font scheme

2. Design a siteand a test plan

Example Scenario: FilesSite will have only two folders (directories):• ASD-TIDE (Main folder)• Images (Sub folder of ASD-TIDE)ASD-TIDE folder will have four html files:• Bookmarks-WebDesign.htm • index.htm (This is the homepage.)• Survey of Workshop Participants.doc• Web Design and Internet Literacy.ppt• Worksheets-WebDesign.docImage folder will contain 5 picture files:• One banner• Five photos 2. Design a site

and a test plan

Main Folder – ASD-TIDE

Image Files

• Images are in different files from the html code.

• Image files are only referenced in the html file.

• This is different than in a word processing file. There images are typically part of the file.

TIDE-Banner.jpg

example-photo2.jpg

example-photo1.jpg

Camille.jpgKathy.jpg

Images

Example Scenario: Test PlanCheck that all the images appear and test all

links.Try the site on IE 5+ and Netscape 4+

browsers and at different screen resolutions.

Check objectives:– contents of this workshop are available– resources for further learning exist– users can contact the leaders of this

workshopCheck visibility and legibility of pages 2. Design a site

and a test plan

3. Prepare and Code Material

To accomplish this task, you will:• Design or collect and prepare graphics.• Collect and prepare photos. • Collect and prepare text content.• Prepare the html code for each of the web pages

in your site.

Example Scenario: Materials

• Design appropriate banner (header)• Collect and prepare photos of participants and

presenters.• Collect and prepare text materials

– write content materials (presentation file)– prepare resources (bookmark file)– workshop worksheets (MS Word file)

3. Prepare andcode material

for web display

Design Banner (Header)

You can use a pre-existing banner from your school or department.

You can design a banner in a graphics program.You can get a free banner from Internet sources.

See your bookmark file.– http://www.flamingtext.com– http://www.freewebtemplates.com/banners/index.shtml

We will use a TIDE banner that we prepared for this demonstration.

(sites accessed June 2000)

3. Prepare andcode material

for web display

TIDE Banner

Collect and Prepare Photos

You may want to use photos from your personal or your school’s existing collection.

• Demo of scanning traditional photos • HP Tutorials – How to Scan a PhotoYou may need to collect new pictures.• Demo of digital camera (Sony Mavica) to

collect photos of workshop participants(sites accessed June 2000)

3. Prepare andcode material

for web display

Text Materials

Content materials:• You will probably have your materials already

prepared in a word processor format or in a presentation format, which can be converted to html.

• You may want to point students to outside resources. See your bookmark file for Lesson Plan sites and other education resources.

3. Prepare andcode material

for web display

Example Scenario: Text Materials

Content materials:

– This presentation– Bookmarks– Worksheets

3. Prepare andcode material

for web display

Prepare the Html Code

This is most easily done by:• A good html editor (so you don’t need to learn the

html code)• The use of programs that convert a word

processing document, a presentation, a spreadsheet, a database into html code

3. Prepare andcode material

for web display

Html Editors

• Full-feature Editors: – MS FrontPage– Micromedia Dreamweaver

• Basic-feature Editors:– Netscape Composer (free with Netscape Browser)– MS FrontPage Express (on most MS Office disks)

Using an Html Editor

Basic skills:1. Typing in new text2. Inserting images3. Adding links4. Making a list5. Using tables6. Including an email contact

3. Prepare andcode material

for web display

Using an Html Editor

Tutorials:

• http://www.trainingtools.com/• Netscape Composer) (from Auburn)

• Dreamweaver (from RIT)

• FrontPage (from Digital Education Network)

(sites accessed June 2000)3. Prepare andcode material

for web display

Example Scenario: Html Editor

• The HTML for this presentation Homepage was developed with an html editor.

• You can use this as a template for your own web page

Presentation Homepage

Save it on your disk.

Demo of Basic Skills

Demo 1: Typing in new text

Demo 2: Inserting images

Demo 3: Adding links

Demo 4: Making a list

Demo 5: Using tables

Demo 6: Including an email contact 3. Prepare andcode material

for web display

Converting files

Any Microsoft Office application can be changed into html by using Save As Web Page.

• Word documents• PowerPoint presentations• Excel spreadsheets• Access databases• Publisher publications

Office 2000 does this well.Example 3. Prepare and

code materialfor web display

4. Test and Debug the Pages

• Test everything before you upload your pages to a server.

• Follow your test plan.

• You may need to return to portions of:– Step 2: Design a site and a test plan, or to– Step 3: Prepare and code material

5. Make Available to Audience

The final step is uploading your html files and the related dependent files to a server.

Your school may want to review your web pages before you can upload them to the school’s web server.

To do this, you can use your web editor (Netscape Composer, FrontPage, Dreamweaver) or an FTP program such as WS_FTP. (site accessed June 2000)

Uploading

Before uploading, you will need:• A way to connect to the internet (an ISP – Internet

Service Provider)• The address of the host computer and the

operating system used by that computer• An account with adequate space on a host

computer (a web server) that is open to the web• A folder (directory) on the host computer to which

you have access

Free ISP and Web Space

Some Examples• free ISP:

– FreeLane – www.FreeLane.com – Juno – www.juno.com

• free space on a web server: – www.geocities.com

• free email account:– www.hotmail.com

Test Pages (Site) Online

Do not forget to test your pages after you have uploaded your html files and the related dependent files.

If you find broken links or other problems:– Go back to the pages on your offline computer.

– Locate the needed changes and edit the pages.

– Retest the pages on your computer

– Upload the files again to the web server computer

– Retest the pages online.

6. Update

• Establish a regular maintenance schedule.

• Keep pages that are open to the public as current as possible.

• Remember your web pages are a direct reflection of you and your school.

Happy webbing !

Presenters: Kathleen Eilers crandall

NTID English Department

Rochester Institute of Technology

Rochester, NY 14623

Phone: (716) 475-5111

Fax: (716) 475-6500

Email: kecncp@rit.edu

Web: http://www.rit.edu/~kecncp

Camille Aidala

NTID Department of Educational Resources

Rochester Institute of Technology

Rochester, NY 14623

Phone: (716) 475-6028

Fax: (716) 475-6500

Email: clansr@rit.edu