Download ch3 - FTP Directory Listing

Chapter 3
Planning the Site
Principles of Web Design, 4th Edition
Objectives
•
•
•
•
•
•
•
•
•
•
•
Create a site specification
Identify the content goal
Analyze your audience
Build a Web site development team
Create conventions for filenames and URLs
Set a directory structure
Create a site storyboard
Publish your Web site
Test your Web site
Refine and update your content
Attract notice to your Web site
Principles of Web Design, 4th Edition
3-2
Create a Site Specification
Principles of Web Design, 4th Edition
3-3
Create a Site Specification
• Answer the following questions:
– Why are you building the Web site?
– Can you write a two- or three-paragraph
mission statement that briefly states the site’s
goals?
– What do you envision as the goal of the site?
– What do you (or your company or
organization) hope to gain from creating and
maintaining a Web site?
Principles of Web Design, 4th Edition
3-4
Create a Site Specification
(continued)
• Answer the following questions (continued):
– How will you judge the success of the site?
What are the measuring factors you can use
to assess the effectiveness of the site?
– Who is the target audience? What
characteristics do they share? How will you
find out more about them?
– What are the limiting technical factors
affecting your site?
Principles of Web Design, 4th Edition
3-5
Identify the Content Goal
Principles of Web Design, 4th Edition
3-6
Identify the Content Goal
• Examine closely what type of site you are
building
• Your objectives and your users’ objectives
may be quite different
• Adopt your users’ perspective
• Think about the type of content you’re
presenting and look to the Web for examples
of how best to present it
Principles of Web Design, 4th Edition
3-7
Identify the Content Goal
(continued)
• Types of web sites:
–
–
–
–
–
–
–
–
–
Billboard
Publishing
Portal
Special interest
Blog
Virtual gallery
E-commerce, catalog, online shopping
Product support
Intranet/Extranet
Principles of Web Design, 4th Edition
3-8
Analyze Your Audience
Principles of Web Design, 4th Edition
3-9
Analyze Your Audience
• Produce an audience definition:
– What is it that users want when they come to
your site?
– How can you attract them and entice them to
return for repeat visits?
– What type of computer and connection speed
do your typical visitors have?
Principles of Web Design, 4th Edition
3-10
Analyze Your Audience
(continued)
• Who are the typical members of your
audience?
–
–
–
–
Are they male or female?
What level of education do they have?
What is their reading and vocabulary level?
What level of technical aptitude do they have?
• Why do people come to your site?
– Do they want information?
– Do they want to download files?
– Are they looking for links to other Web sites?
Principles of Web Design, 4th Edition
3-11
Analyze Your Audience
(continued)
• Do you have a captive audience, such as a
base of loyal customers that want up-to-date
information?
• Are you designing for an intranet, where users
are employees of an organization?
• Will other sites link to your site, or will your site
provide links? If people unfamiliar with the site
visits, will they know what you offer?
Principles of Web Design, 4th Edition
3-12
Analyze Your Audience
(continued)
• How often will users return to your site? Do
they have a reason to come back?
• What computing platform do your users
have?
– What is their typical connection speed?
– What type of browser do they use?
– If you are on an intranet, is there a standard
for browsers, connection, and screen
resolution?
Principles of Web Design, 4th Edition
3-13
Analyze Your Audience
(continued)
• Whose skills do you need to build the site?
• Who will create the graphics, code the
pages, and write the text?
• Do you have the talent and economic
resources that you need?
Principles of Web Design, 4th Edition
3-14
Principles of Web Design, 4th Edition
3-15
Build a Web Site
Development Team
Principles of Web Design, 4th Edition
3-16
Build a Web Site Development
Team
• The following roles are necessary:
–
–
–
–
–
–
–
Server administrators
HTML coders
Designers
Writers and information designers
Software programmers
Database administrators
Marketing
Principles of Web Design, 4th Edition
3-17
Create Conventions for
Filenames and URLs
Principles of Web Design, 4th Edition
3-18
Create Conventions for
Filenames and URLs
• Plan your file-naming conventions for your
site
• Talk to your system administrator and find
out what type of operating system your Web
server uses
• Typically you’ll develop your Web site locally
on a PC or Macintosh; you will upload the
files to the Web server as the last step in the
publishing process
Principles of Web Design, 4th Edition
3-19
Create Conventions for
Filenames and URLs
(continued)
• If the Web server runs a different operating
system from your local development system,
transferring your files to the server may
break local URL links because of either file
name or directory structure inconsistencies
Principles of Web Design, 4th Edition
3-20
Principles of Web Design, 4th Edition
3-21
Naming Files
• Case Sensitivity — Use lowercase for all file
names and in the HTML code
• Character Exceptions — Leave out special
characters such as /, \, &, and *
• File Extensions — Use the correct threeletter extension
Principles of Web Design, 4th Edition
3-22
Solving the Filename Dilemma
• The International Standards Organization
(ISO) standard specifies a maximum of eight
letters followed by a period and a three-letter
extension
• Allowed characters are letters, numbers, and
the underscore character
Principles of Web Design, 4th Edition
3-23
Solving the Filename Dilemma
(continued)
• Here are some valid file name examples:
–
–
–
–
mypage.htm
chap_1.htm
picture1.jpg
logo.gif
Principles of Web Design, 4th Edition
3-24
The Default Main Page Name
• Every Web site has a default main page that
displays when the browser requests the
directory of the site rather than a specific file
• Before you start coding, check with your
system administrator to verify the main page
file name
• index.htm is the most common default main
page name
Principles of Web Design, 4th Edition
3-25
Using URLs
• Absolute URL — Includes the protocol,
domain name, path, and filename; refers to
another server on the Internet
• Relative URLs — Omits the protocol and
domain name; refers to a file that resides on
the same server
Principles of Web Design, 4th Edition
3-26
Principles of Web Design, 4th Edition
3-27
Set a Directory Structure
Principles of Web Design, 4th Edition
3-28
Set a Directory Structure
• A typical Web server has a user area that
contains folders for each user
• Your files are stored in your user area
• The directory structure of the Web server
affects the format of your site’s URL
Principles of Web Design, 4th Edition
3-29
Principles of Web Design, 4th Edition
3-30
Set a Directory Structure
• When you buy a domain name, the name
you choose is an alias that points to your
actual location on the Web server
Principles of Web Design, 4th Edition
3-31
Principles of Web Design, 4th Edition
3-32
Build a Relative File Structure
• You will most likely build your Web site on a
computer that is different from the computer
that will be hosting your site
• Keep this in mind when you are designing
the directory and file structure
• Because your files will be transferred to
another computer, any URLs you specify to
link to other pages in your site must include
paths that are transferable
Principles of Web Design, 4th Edition
3-33
Build a Relative File Structure
(continued)
• Relative paths tell the browser where a file is
located relative to the document the browser
is currently viewing
Principles of Web Design, 4th Edition
3-34
Principles of Web Design, 4th Edition
3-35
Principles of Web Design, 4th Edition
3-36
Principles of Web Design, 4th Edition
3-37
Create a Site Storyboard
Principles of Web Design, 4th Edition
3-38
Create a Site Storyboard
• Plan your site by creating a flowchart
• This preliminary step is one of the most
important that you take in planning your site
Principles of Web Design, 4th Edition
3-39
Linear Structure
• The linear information structure lets you
guide the user along a path
• This structure lends itself to book-type
presentations or content that requires the
user to follow a predefined path
Principles of Web Design, 4th Edition
3-40
Principles of Web Design, 4th Edition
3-41
Tutorial Structure
• The tutorial structure is perfect for computerbased training content such as lessons,
tutorials, or task-oriented procedures
Principles of Web Design, 4th Edition
3-42
Principles of Web Design, 4th Edition
3-43
Web Structure
• Many smaller Web sites follow the Web
structure, which offers links to and from
every page in the site
• This allows the user to jump freely to any
page from any other page
Principles of Web Design, 4th Edition
3-44
Principles of Web Design, 4th Edition
3-45
Hierarchical Structure
• The hierarchical structure is probably the
most common information design
• It lends itself to larger content collections
because the section pages break up and
organize the content at different levels
throughout the site
Principles of Web Design, 4th Edition
3-46
Principles of Web Design, 4th Edition
3-47
Cluster Structure
• The cluster structure is similar to the
hierarchical structure, except that every topic
area is an island of information unto itself,
with all pages in each cluster linked to each
other
Principles of Web Design, 4th Edition
3-48
Principles of Web Design, 4th Edition
3-49
Catalog Structure
• The catalog structure accommodates
electronic shopping
• The user can browse or search for items and
view specific information about each product
on the item pages
Principles of Web Design, 4th Edition
3-50
Principles of Web Design, 4th Edition
3-51
Publish Your Web Site
Principles of Web Design, 4th Edition
3-52
Publishing Your Web Site
• To make your site live, you transfer your Web
site files to a Web server
• Unless your company or organization has a
Web server, you’ll have to use the services of
a Web hosting provider
• After you choose a server to host your files,
you’ll need to select file transfer software and
upload the Web site files from your
development machine to the Web server
Principles of Web Design, 4th Edition
3-53
Choose a Web Hosting Service
Provider
• An important decision is your choice of Web
hosting service or Internet Service Provider
(ISP)
• This is the company that hosts your Web
pages on a Web server
• Web hosting services provide Web server
space only, and may be more capable of
hosting a complex commercial site
Principles of Web Design, 4th Edition
3-54
ISP Checklist
• Is the ISP local or national?
• Does the ISP have enough local points of
presence (POPs) in my area code?
• Does the ISP offer technical support? When
is support staff available?
• How many e-mail addresses do I get with an
account?
• Does the ISP provide software, such as an
FTP client?
Principles of Web Design, 4th Edition
3-55
ISP Checklist (continued)
• Does the ISP support the latest connection
technologies such as DSL or cable?
• Does the ISP offer enhanced services, such
as SQL database support, Secure Socket
Layer, CGI scripting, and multimedia
technology?
Principles of Web Design, 4th Edition
3-56
Upload Files with the File
Transfer Protocol
• To publish your pages on the Web, you must
send your HTML, image, and other files to the
Web server
• To do this, you need File Transfer Protocol
(FTP) software, often called an FTP client
Principles of Web Design, 4th Edition
3-57
Upload Files with the File
Transfer Protocol (continued)
• To upload your files, start your FTP program
and connect to your Web server using the
FTP information provided by your service
provider
• Select the files that you want to upload in
your local directory listing and transfer them
to the server
• Once the files have reached the Web server,
they are immediately available for access on
the Web
Principles of Web Design, 4th Edition
3-58
Test Your Web Site
Principles of Web Design, 4th Edition
3-59
Testing Considerations
• Remember to test for the following Web
design variables:
•
•
•
•
Multiple browsers
Multiple operating systems
Connection speeds
Display types
Principles of Web Design, 4th Edition
3-60
User Testing
• Vary your subjects
• Formalize your testing
• Develop a feedback form
Principles of Web Design, 4th Edition
3-61
Develop a Feedback Form
• Did you find the information you needed?
• Was it easy or difficult to find the information
you needed?
• Did you find the site visually attractive?
• Did you find the content easy to read?
• Did you find the site easy to navigate?
Principles of Web Design, 4th Edition
3-62
User Feedback Questions
• Did you think the information was presented
correctly?
• Did the information have enough depth?
• What area of the site did you like the best?
• What area of the site did you like the least?
• Would you recommend the site to others?
Principles of Web Design, 4th Edition
3-63
Refine and Update Your
Content
Principles of Web Design, 4th Edition
3-64
Refine and Update Your
Content
• Refine your content and presentation based
on your user’s feedback
• Analyze your visitors and their preferences
when they visit
• Plan for ongoing maintenance of your site
• Plan for major site design changes on a
regular basis
Principles of Web Design, 4th Edition
3-65
Attract Notice to Your Web Site
Principles of Web Design, 4th Edition
3-66
Leveraging Search Engines
• Search engines are software programs that
search out and index Web sites in a catalog
• Not all search engines are alike, so the way
they search and catalog differs greatly
Principles of Web Design, 4th Edition
3-67
Working with Search Engines
•
•
•
•
Use meaningful titles
Be careful with frames
Use alt text with images
Submit your URL to different search engines
Principles of Web Design, 4th Edition
3-68
Summary
•
•
•
•
•
Start with pencil and paper
Write a site specification document
Analyze your audience
Focus your site on the user’s needs
An effective site is more commonly the result
of a team effort
• Create portable file-naming conventions
• Build a relative file structure
Principles of Web Design, 4th Edition
3-69
Summary (continued)
• Select a basic information structure for your
site and then customize it based on your
content
• Shop carefully and compare features when
you are looking for a Web host
• Consider the future disk space and
technology needs of your content
• Download and learn to use an FTP client for
use in the often-repeated task of transferring
files to your Web site
Principles of Web Design, 4th Edition
3-70
Summary (continued)
• Test your site against the basic Web
variables:
–
–
–
–
Browser
Operating system
Display resolution
Connection speed
• Test your Web site with a variety of users
• Plan for the maintenance, upkeep, and
redesign of your Web site
• Keep your content up to date
Principles of Web Design, 4th Edition
3-71