Transcript Web Design and Internet Literacy

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 Aidala
Instructional 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 works
2. 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
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 (studentdirected)
– 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 – a text file that contains a set of
HTML tags that tell a browser what to do.
• 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 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 – 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
• Homepage – 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 – 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
1. Analysis of
site’s purpose
(objectives)
6. Update
2. Design a site
and a test plan
5. Make
available to
audience
3. Prepare and
code material
for web display
4. Test and
debug the pages
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 workshop
1. 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
1. Analysis of
site’s purpose
(objectives)
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
leaders
Summary – Analysis of Purpose
Example Scenario
Purpose: 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 site
and a test plan
Principles: Information Flow
Organize your web site on paper.
2. Design a site
and a test plan
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.
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:
2. Design a site
and a test plan
– Organize information from left to right,
and from top to bottom.
– Group similar information visually.
Visual Clarity
Use 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 site
and a test plan
File Arrangement
Use 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 site
and a test plan
Folders and Files
Folder 
Folder
Folders 

Files 
Files
Files 
 Files
Test Plan
Do 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 site
and 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
Web Design and
Internet Literacy
Workshop
Workshop
bookmarks
Workshop
presentation
Pages Linked
to Homepage
Homepage
Worksheets
2. Design a site
and a test plan
Example Scenario: Ease of Use
Web content will come from:
• bookmark file
• PowerPoint presentation
• worksheets
First page of site will be a contents page with
links to the other three site pages.
2. Design a site
and 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 site
and 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 site
and a test plan
Example Scenario: Files
Site 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.doc
Image 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.
Images
TIDE-Banner.jpg
example-photo1.jpg 
example-photo2.jpg
Kathy.jpg
Camille.jpg
Example Scenario: Test Plan
Check 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
workshop
Check 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 and
code 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 and
code 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 Photo
You may need to collect new pictures.
• Demo of digital camera (Sony Mavica) to
collect photos of workshop participants
(sites accessed June 2000)
3. Prepare and
code 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 and
code material
for web display

Example Scenario: Text
Materials
Content materials:
– This presentation
– Bookmarks
– Worksheets
3. Prepare and
code 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 and
code 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 text
2. Inserting images
3. Adding links
4. Making a list
5. Using tables
6. Including an email contact
3. Prepare and
code 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 and
code 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 and
code 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 material
for 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
Camille Aidala
NTID English Department
NTID Department of Educational Resources
Rochester Institute of Technology
Rochester Institute of Technology
Rochester, NY 14623
Rochester, NY 14623
Phone: (716) 475-5111
Phone: (716) 475-6028
Fax: (716) 475-6500
Fax: (716) 475-6500
Email: [email protected]
Email: [email protected]
Web: http://www.rit.edu/~kecncp