For 'On Time' tutor
Super Jules
This is an electronic version of the print textbook. Due to electronic rights restrictions, some third party content may be suppressed. Editorial review has deemed that any suppressed
content does not materially affect the overall learning experience. The publisher reserves the right to remove content from this title at any time if subsequent rights restrictions require it. For valuable information on pricing, previous editions, changes to current editions, and alternate formats, please visit www.cengage.com/highered to search by ISBN#, author, title, or keyword for materials in your areas of interest.
Web Design: Introductory, Fourth Edition
Gary B. Shelly
Jennifer T. Campbell
Vice President, Publisher: Nicole Pinard
Executive Editor: Kathleen McMahon
Product Manager: Nada Jovanovic
Associate Product Manager: Caitlin Womersley
Editorial Assistant: Angela Giannopoulos
Developmental Editor: Amanda Brodkin
Director of Marketing: Elisa Roberts
Marketing Manager: Tristen Kendall
Marketing Coordinator: Adrienne Fung
Production Director: Patty Stephan
Content Project Manager: Matthew Hutchinson
Art Director: Marissa Falco
Cover designer: Joel Sadagursky Text designer: Joel Sadagursky
Technology Project Manager: Chris Conroy
Print Buyer: Julio Esperas
Copyeditor: Karen Annett
Proofreader: Kathy Orrino
Indexer: Rich Carlson
Compositor: PreMediaGlobal
Printer: RRD Menasha
© 2012 Course Technology, Cengage Learning
ALL RIGHTS RESERVED. No part of this work covered by the copyright herein may be reproduced, transmitted, stored or used in any form or by any means graphic, electronic, or mechanical, including but not limited to photocopying, recording, scanning, digitizing, taping, Web distribution, information networks, or information storage and retrieval systems, except as permitted under Section 107 or 108 of the 1976 United States Copyright Act, without the prior written permission of the publisher.
For product information and technology assistance, contact us at
Cengage Learning Customer & Sales Support, 1-800-354-9706
For permission to use material from this text or product, submit all requests online at cengage.com/permissions
Further permissions questions can be emailed to [email protected]
Library of Congress Control Number: 2011924478
ISBN-13: 978-0-538-48240-0
ISBN-10: 0-538-48240-0
Course Technology
20 Channel Center Street
Boston, Massachusetts 02210
USA
Cengage Learning is a leading provider of customized learning solutions with office locations around the globe, including Singapore, the United Kingdom, Australia, Mexico, Brazil, and Japan. Locate your local office at: international.cengage.com/region
Cengage Learning products are represented in Canada by Nelson Education, Ltd.
For your course and learning solutions, visit www.cengage.com
Course Technology, the Course Technology logo, and the Shelly Cashman Series® are registered trademarks used under license.
To learn more about Course Technology, visit www.cengage.com/ coursetechnology
Purchase any of our products at your local college store or at our preferred online store www.cengagebrain.com
Microsoft and Expression are registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. Course Technology, a part of Cengage Learning, is an independent entity from the Microsoft Corporation, and not affiliated with Microsoft in any manner.
Adobe, the Adobe logos, and Dreamweaver are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. THIS PRODUCT IS NOT ENDORSED OR SPONSORED BY ADOBE SYSTEMS INCORPORATED, PUBLISHER OF DREAMWEAVER.
Printed in the United States of America 1 2 3 4 5 6 7 17 16 15 14 13 12 11
1 The Environment
and the Tools
Introduction
Designing and building a Web site is no longer a difficult, intimidating undertaking; evolving Web technologies have simplified the job. Applying Web technologies is only part of what is required to produce a successful site. A Web site that successfully communicates, educates, entertains, or provides a venue for conducting business transactions also requires good Web design. This book explains the basic elements of good Web design and shows you how to develop effective Web sites and pages for specific purposes or audiences. Chapter 1 begins the process by describing the Internet and the World Wide Web. Next, you learn about the various ways users connect to the Internet. The chapter then describes different types of Web sites and the tools for creating them. Finally, the chapter discusses the various roles, responsibilities, and skills essential to successful Web design.
Objectives
After completing this chapter, you will be able to:
1. Describe the Internet and the |
3. Categorize types of Web sites |
|
World Wide Web |
4. Identify Web design tools |
|
|
|
|
2. Discuss ways to access the Internet |
5. Explain Web design roles |
|
and the Web |
|
|
|
|
|
2 Chapter 1 The Environment and the Tools
The Internet and the World Wide Web
A computer network is composed of computers, printers, and data storage devices con-nected to enable the sharing of computing resources and data. Private computer networks are found everywhere — in home offices, in student computer labs, in Internet cafés, and in the offices of organizations and businesses around the world. The Internet is a world-wide public network (Figure 1-1) that connects millions of these private networks. For example, on a college campus, the student lab network, the faculty computer network, and the administration network can all connect to the Internet.
Q&A |
@SOURCE |
What is Web 2.0?
The term Web 2.0 defines the “next generation” Web that supports Web-based services such as online advertising models tied to search keywords, search engine optimization methods, the syndication of Web site content, and blogs.
Internet Society (ISOC)
For more information about the Internet, visit the Web Design 4 Chapter 1 Student Online Companion Web page at www
.cengagebrain.com, and then click Internet Society (ISOC) in the @Source links.
Figure 1-1 The Internet is a worldwide public network that connects private networks.
Internet2
Internet2 is a major cooperative initiative among academia, industry, and government agencies to increase the Internet’s capabilities and solve some of its challenges.
The nonprofit initiative has more than 200 university, corporate, government, and international members and sponsors devoted to developing and using new and emerging network technologies that facilitate research and education.
The World Wide Web (Web) is a part of the Internet that consists of Internet-connected computers called Web servers that store electronic documents called Web pages. A Web page is a specially formatted document that can contain images, text, interactive elements, and hyperlinks, which are links to other pages. A Web site is
a group of related Web pages. A Web site’s primary page, or home page, typically introduces the Web site and provides information about the site’s purpose and con-tent. Figure 1-2 illustrates the home page of Jive Software, a company that develops business collaboration software.
logo
navigation elements
hyperlink to additional site content
The Internet and the World Wide Web 3
}
Figure 1-2 A Web site’s primary page is its home page.
A hyperlink, or simply a link, is a word, phrase, or image (Figure 1-3) that connects Web pages. You often can identify a text link by its appearance. Text links usually are underlined or differ in color from the rest of the text. An image link might be more difficult to visually identify; however, pointing to either a text or image link with the mouse pointer changes the pointer from an arrow to a hand pointer. When you click a link with the hand pointer, you might view a picture or video, listen to a song, jump to a different Web page at the same site, or jump to a Web page at a different site. Exploring the Web
by jumping from one Web page to another is sometimes called browsing or surfing the Web. To indicate visually that you have previously clicked a text link, the color of a clicked text link might change. You can see this change in color when you return to the page containing the clicked link.
Q&A |
Who originally created the World Wide Web?
Tim Berners-Lee, a programmer at CERN in Switzerland, is credited with the early vision and technological developments that
led to today’s World Wide Web.
Whether you choose to indicate hyperlinks in text by color, bold, or underline, |
|
|
|
|
|
DESIGN |
|
|
|
|
|
be consistent throughout your site. |
|
|
|
|
|
|
|
|
|
TIP |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Browse Selection link
page that opens when you click Browse Selection link
home page
Figure 1-3 Web pages at the same site or across different sites are connected by links.
4 Chapter 1 The Environment and the Tools
|
Design your Web site so that it communicates trustworthiness, timeliness, |
|
DESIGN |
|
|
|
and value. |
|
|
|
|
TIP |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Q&A |
|
What is cloud |
|
|
|
computing? |
|
|
|
The term cloud |
|
|
|
|
|
|
|
computing refers |
|
|
|
to an environment |
|
|
|
where files and |
|
|
|
software are stored |
|
|
|
and shared online. |
|
|
|
For example, using |
|
|
|
Google Docs™, an |
|
|
|
online software suite, |
|
|
|
you can edit, save, and |
|
|
|
share documents, such |
|
|
|
as word-processing |
|
|
|
or spreadsheet files, |
|
|
|
without downloading |
|
|
|
either the software |
|
|
|
or the files to your |
|
|
|
computer. |
|
Q&A |
|
Is the Internet’s |
|
|
|
|
|
|
|
societal influence |
|
|
|
all good? |
|
|
|
|
|
|
|
Many things are easier |
|
|
|
due to advances in |
|
|
|
the Internet and |
|
|
|
technology. However, |
|
|
|
being constantly |
|
|
|
connected has its price. |
|
|
|
In the past, employees’ |
|
|
|
workdays were done |
|
|
|
when they physically |
|
|
|
left the office, but now |
|
|
|
they can be expected |
|
|
|
to keep on top of |
|
|
|
work-related |
|
|
|
communication during |
|
|
|
what used to be |
|
|
|
personal, family, or |
|
|
|
leisure time. Human |
|
|
|
relationships can be |
|
|
|
negatively affected by |
|
|
|
the need to constantly |
|
|
|
check e-mail, sports |
|
|
|
scores, or text |
|
Although the terms Internet and Web frequently are used interchangeably, remember that the Internet and the Web are not one and the same. As stated previously, the Internet is a worldwide public network that links private networks. The Internet gives users access to a variety of resources for communication, research, file sharing, and commerce. The Web, a subset of the Internet, is just one of those resources.
Influence on Society
Today, friends, families, and business professionals exchange millions of electronic messages and share information using the Internet and the Web. Students frequently turn to the Web to research topics for reports, to access podcasts or transcripts of lectures, or to collaborate on a group project. Additionally, people of all ages access the Internet and the Web for entertainment by playing interactive Web games, listening to Internet radio, and viewing television programs and movies on their computers. Consumers save money on gas and avoid crowds, parking problems, and long lines by shopping and banking online. Businesses that interact with their suppliers and customers using Internet and Web technologies can be more productive and profitable. Businesses can also use tools such as videoconferencing to avoid costs associated with business travel or to allow employees to telecommute. The Internet and the Web have significantly influenced the way the world communicates, educates, entertains, and conducts business.
COMMUNICATION Individuals and organizations of all types use Web sites to communicate ideas and information. By effectively designing Web pages and selectively choosing content, you can ensure that your site’s Web pages deliver the site’s message successfully and persuasively. When a Web page’s design and content communicate trust-worthiness, timeliness, and value (as is the case with the site in Figure 1-4), you are more likely to save a link to the page, called a bookmark or favorite, for future reference. On the other hand, you quickly will move on from a Web site if its pages are poorly designed or the content appears unreliable, outdated, or trivial.
Figure 1-4 The MSNBC home page communicates up-to-date, accurate
The Internet and the World Wide Web 5
Other communication options that rely on Internet and Web technologies include e-mail, blogging, social networking, social bookmarking, chat, instant messaging, virtual meetings and collaborative workspaces, video sharing, interactive gaming, and 3D virtual worlds.
Businesses and individuals rely heavily on electronic messages called electronic mail or e-mail. Popular e-mail software, such as Mozilla® Thunderbird®, Microsoft Outlook®, Google’s Gmail™, or Windows Live Mail®, allows users to attach graphics, video, sound, and other computer files to e-mail messages. E-mail is a fast and inexpensive online communication tool.
Internet Relay Chat (IRC) and Web-based chat are communication technologies that provide a venue, such as a chat room, where people with common interests can exchange text, video, or multimedia messages in real time. Instant messaging, also called IM chat, is another popular way individuals can exchange one-to-one messages in real time using a chat window that is only visible to those participating in the chat. Examples of IM chat programs are AOL Instant Messenger® (AIM), Yahoo! Messenger, Windows Live Messenger®, ICQ®, and Trillian™ (Figure 1-5). The difference between
IRC and IM is that IRC chats are public exchanges between two or more people in a chat room who do not necessarily know each other. With an IM program, you chat privately with people you know.
contacts list
chat window
Q&A |
Q&A |
What is Google Buzz?
Google Buzz™ integrates social networking and messaging technologies with Gmail. It allows users to follow one another’s messages and to share pictures and information using Flickr, Twitter, YouTube, Blogger, and more.
Is IM private?
With any technology, be aware that anything you type and any video or photo you post could be shared with others, even if you consider the exchange to be private. The person you are chatting with, or a third party with access to your computer or with whom you are connected on IM, could post the exchange for others to see without your permission or knowledge.
Figure 1-5 IM chat programs allow users to exchange private messages in real time.
Technology vendors, such as Microsoft, WebEx, and GoToMeeting (Figure 1-6 on the next page), provide access to collaborative workspaces or virtual meeting spaces, which are Web sites that allow users to communicate with each other using text, audio, video, whiteboard, and shared files without leaving their own desks. Collaborative workspaces are typically used in business settings. Businesses that use collaborative workspaces and virtual meeting spaces can both improve employee productivity and reduce expenses.
6 Chapter 1 The Environment and the Tools
Figure 1-6 Collaborative workspaces support teamwork from remote locations.
A blog (short for Weblog), such as the Huffington Post or the CNET News Blog (Figure 1-7), is an online journal or diary to which readers can add their own commentary. Millions of people go online to share ideas and information by hosting and participating in blogs — a process called blogging. Video sharing Web sites, sometimes called
video blogging sites, such as YouTube and Vimeo (Figure 1-7), allow users to share and comment on personal and professional videos.
Figure 1-7 Text and video blogging sites allow Web users to share ideas, information, and video files.
Social networking is the term used to describe sites, such as Twitter, classmates.com, Facebook, and LinkedIn (Figure 1-8 on the next page), that allow participants to create
a personal network of friends or business contacts. Users then use communication tools provided by the site to interact with those in their personal network. Social bookmarking, provided by sites such as FuzzFizz, Newsvine, Fark, StumbleUpon, and Digg (Figure 1-8), allows users to share their Web page favorites, bookmarks, and tags — keywords that reference specific images or documents — with others.
The Internet and the World Wide Web 7
Figure 1-8 Social networking sites and social bookmarking sites allow users to share information with one another.
Gamers by the millions interact with each other by playing massively multiplayer |
Q&A |
|
|
What does it mean |
|
||
|
|
|
|
|
|
||
online games (MMOGs), such as Lineage® and World of Warcraft (Figure 1-9). Others |
|
|
|
to “go viral”? |
|
||
create alternative personas that live their lives in 3D virtual worlds, such as Second Life® |
|
|
|
An article, blog entry, |
|
||
|
|
|
|
Web site, or video that |
|
||
or Entropia Universe® (Figure 1-9). |
|
|
|
|
|
||
|
|
|
|
is viewed and then |
|
||
|
|
|
|
|
|
shared by many users |
|
|
|
|
|
|
|
with others using social |
|
|
|
|
|
|
|
networking, blogs, and |
|
|
|
|
|
|
|
mass media is said to |
|
|
|
|
|
|
|
have “gone viral.” |
|
|
|
|
Q&A |
|
|
What is a wiki? |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
A wiki is a group of |
|
|
|
|
|
|
|
related Web pages |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
to which content can |
|
|
|
|
|
|
|
be added, edited, |
|
|
|
|
|
|
|
or deleted by its |
|
|
|
|
|
|
|
users using a Web |
|
|
|
|
|
|
|
browser. A well-known |
|
|
|
|
|
|
|
example of a wiki is |
|
|
|
|
|
|
|
Wikipedia, an online |
|
Figure 1-9 Millions of gamers enjoy MMOGs and 3D virtual worlds. |
|
|
|
encyclopedia. |
|
||
|
|
|
|
|
|
||
EDUCATION The Web offers exciting, challenging new avenues for formal and |
|
|
|
|
|
||
informal teaching and learning. If you always wanted to know exactly how airplanes fly, |
|
|
|
|
|
||
or dreamed of becoming a pastry chef, or wanted to learn how to protect against com- |
|
|
|
|
|
||
puter hackers, turn to the Web. The Web also can enhance traditional teaching methods. |
|
|
|
|
|
||
Instructors often use the Web to publish podcasts or videos of lectures, Web page links |
|
|
|
|
|
||
for research, syllabi and grades, and more for their students. Web sites, such as those |
|
|
|
|
|
||
shown in Figure 1-10 on the next page, offer a wide variety of online courses. MIT Open |
|
|
|
|
|
||
Courseware publishes all of the educational materials from its courses online, including |
|
|
|
|
|
||
homework and video lectures, so that they are free and open to everyone. |
|
|
|
|
|
8 Chapter 1 The Environment and the Tools
Figure 1-10 The Web offers formal and informal teaching and learning opportunities.
DESIGN TIP
Any formal or informal educational Web site should contain content that is timely, accurate, and appealing. Such sites also should include elements to provide feedback, maintain records, and assess learning.
ENTERTAINMENT AND NEWS Millions of people turn to the Web daily for entertainment and news because of the Web’s unique ability to provide interactive multimedia experiences and continually updated content. Popular entertainment sites offer music, videos, sports, games, and more. For example, you can use the Web to watch last night’s episode of your favorite television program, check out entertainment news at IMDb (Figure 1-11), play fantasy baseball at mlb.com, or interact with a virtual pet at webkinz.com (Figure 1-11). Sophisticated entertainment and news Web sites often partner with other technologies. For example, NBC and MSNBC television partner their programming
with the MSNBC Web site. At the MSNBC Web site, you can read news stories or watch news clips or video clips from programs that originate on NBC and MSNBC television. Additionally, the MSNBC Web site provides interactive elements, such as the ability to cast a vote about a current news topic being discussed on MSNBC television.
Figure 1-11 Entertainment and news are available with continually updated multimedia content.
DESIGN TIP
Include methods to share your site’s content by providing links to send content using e-mail, post to the user’s Facebook page, RSS feed, or Twitter account, as well as link to related content that site users would find interesting and relevant.
The Internet and the World Wide Web 9
BUSINESS Electronic commerce or e-commerce encompasses a wide variety of online business activities, including consumer shopping and investing and the exchange of business data and transactions within a company or among multiple companies. For example, a pet groomer might offer his or her services using an e-commerce Web site where a pet owner could find valuable information, such as the groomer’s telephone number, location, list of services, and rates charged; the pet owner could then schedule an appointment online. At the other end of the e-commerce spectrum, a large manufacturing company could use the Internet and the Web to communicate policies and procedures to its employees, exchange business information with its vendors and other business partners, process sales transactions, and provide online support to its customers.
Business transactions that take place between an online business and an individual consumer are called business-to-consumer (B2C) e-commerce transactions. Today, millions of consumers rely on B2C e-commerce Web sites (Figure 1-12) to purchase an endless assortment of products and services and to conduct such financial transactions as banking and investing.
Figure 1-12 B2C e-commerce involves the sale of products and services directly to consumers.
The majority of e-commerce occurs in the corporate world and is called business-to-business (B2B) e-commerce. In B2B e-commerce, products, services, and business data are exchanged between businesses, such as those shown in Figure 1-13.
Figure 1-13 B2B e-commerce involves the sale of products and services and the exchange of data between businesses.
10 Chapter 1 The Environment and the Tools
A third type of e-commerce is consumer-to-consumer (C2C) e-commerce. In C2C e-commerce, business transactions occur between consumers. Examples of C2C e-commerce include online auctions and person-to-person classified ads. eBay (Figure 1-14) and craigslist are examples of an online auction and classified ad site, respectively. Etsy is a C2C (Figure 1-14) site where crafters and artists can sell directly to consumers.
Figure 1-14 C2C e-commerce involves the sale or exchange of products and services between consumers.
Other organizations, such as nonprofit charities and government agencies, also employ B2C and B2B technologies to provide information and services to their constituencies.
DESIGN TIP
To develop an e-commerce Web site, you must determine the potential customers for your products or services. Categorize your items or provide a search feature so customers can easily find what they need. Additionally, you must decide which e-commerce technologies, such as shopping cart and credit card processing technologies, are best suited for your e-commerce site.
Ways to Access the Internet and the Web
Users access the Internet and Web using a variety of means. In the past, the most common way to access the Internet was using a dial-up telephone line. Today, faster access methods, including digital dedicated lines, cable broadband, and wireless transmissions, are increasingly the access method of choice for both individuals and organizations.
The speed at which data can travel from one device to another is called the transfer rate, which is expressed as bits per second (bps) — that is, the number of bits the line can transmit in one second. Transfer rates range from thousands of bits per second (called kilobits per second or Kbps) to millions of bits per second (called megabits per second or Mbps). A faster transfer rate translates into more expensive Internet access. Transfer rate has a direct impact on the user’s experience with a Web site; the effect of Internet access speeds on Web design considerations is discussed in Chapter 2.
Cable Internet Access
Cable television (CATV) lines enable home or business users to connect to the Internet over the same coaxial cable that delivers television transmissions (Figure 1-15). Data can travel very rapidly through a cable modem connected to a CATV line, typically moving at speeds from 5 to 7 Mbps (download). Then, using a splitter, the line from the
Ways to Access the Internet and the Web 11
cable company is directed to both the television and computer. Cable Internet access is typically available only in urban and suburban areas.
data line from cable company
line splitter
computer
Q&A |
What is broadband?
The term broadband defines high-speed data transmissions over a communication channel that can transmit multiple signals at one time. ISDN, ADSL, and CATV Internet access are all examples of broadband Internet access.
television
cable modem
Figure 1-15 Cable Internet access requires a line splitter and cable modem.
Fixed and Mobile Wireless Access
Fixed wireless is Internet connectivity service that uses satellite technology. Radio signals transferred between a transmitting tower and an antenna on a house or business provide a high-speed connection. People on the go can access the Internet and Web using mobile wireless technologies, which include radio signals, wireless fidelity (Wi-Fi) technologies, cellular telephones, and wireless providers’ broadband networks. Wi-Fi provides wireless connectivity to devices within a certain range. A Wi-Fi network may
be password protected or freely available.
Standards for mobile communications, including voice, mobile Internet access, video calls, and mobile TV, are classified by generation. 3G, the third generation, provides mobile broadband access to devices such as laptop computers and smartphones. To be classified as 3G, a device must support speech and data services, as well as data rates of at least 200 kbps (kilobits per second). Industry analysts expect that 4G systems will be widely available by 2013. 4G systems will support services such as gaming and streamed multimedia, and are currently being tested and offered in a few cities and countries.
Mobile devices that provide Internet access include laptop computers, smartphones, personal digital assistants (PDAs), or other handheld devices. These devices use an internal antenna or wireless card to connect to the Internet either at a hot spot, a location that provides public Internet access, or directly to a wireless provider’s network. You can pay for mobile access on a per-Kb basis; however, most users buy a flat-rate monthly plan that allows unlimited text and data usage. Such plans typically start around $30 per month.
Q&A |
What is Bluetooth?
Bluetooth is a popular, short-range wireless connection that uses radio frequency to transmit data between two electronic devices, such as a smartphone and an earpiece.
Telephone Lines Access
The Public Switched Telephone Network (PSTN) used to be the main way all users connected to the Internet; high-speed telephone access is still commonly used, in spite of developments in mobile and broadband systems. Although initially built to
handle voice communications, the telephone network is also an integral part of computer communications. Data, instructions, and information can travel over the telephone network over dial-up lines or dedicated lines, which are described in the following sections.
12 Chapter 1 The Environment and the Tools
DIAL-UP LINES A dial-up line is a temporary connection that uses analog telephone lines. Because of its slow access speed, dial-up access is the least popular Internet access method and is rarely used in business. Similar to using the telephone to make a call, a modem at the sending end dials the telephone number of a modem at the receiving end. When the modem at the receiving end answers the call, a connection is established and data can be transmitted. Internet access using a dial-up line comes in two versions: regular dial-up and high-speed dial-up.
DESIGN TIP
Although large images and multimedia elements on Web pages can degrade the audience’s viewing experiences at slower Internet access speeds, most sites assume users have high-speed dial-up, cable, or wireless connectivity.
DIGITAL DEDICATED LINES Unlike a dial-up line in which the connection is reestablished each time it is used, a dedicated line is a constant connection between two communications devices that uses the local telephone network. This constant connection provides a higher-quality connection than a dial-up line, better suited for
viewing or listening to streaming media — video or sound that downloads to a computer continuously to be watched or listened to in real time, and other common Internet uses. Businesses often use dedicated lines to connect geographically distant offices. Dedicated lines can be either analog or digital; however, digital lines increasingly are connecting home and business users to networks around the globe because they transmit data and information at faster rates than analog lines. Three popular types of digital dedicated lines are Integrated Services Digital Network (ISDN) lines, digital subscriber lines (DSL), and T-carrier lines.
Integrated Services Digital Network (ISDN) is a set of standards for digital transmission of data over standard copper telephone lines. With ISDN, the same telephone line that could carry only one computer signal now can carry three or more signals at once, through the same line, using a technique called multiplexing.
Multiplexing allows for more data to be transmitted at the same time over the same line. For the small business and home user, an ISDN line provides faster data transmission than a dial-up telephone line at a modest increase in monthly cost.
DSL is another digital line alternative for the small business or home user. A digital subscriber line (DSL) transmits at fast speeds on existing standard copper telephone wiring. Some of the DSL installations can provide a dial tone, so you can use the line for both voice and data. An asymmetrical digital subscriber line (ADSL) is a type of DSL that supports faster transmissions when receiving data than when sending data. ADSL is ideal for Internet access because users generally download more data from the Internet than they upload.
A T-carrier line is any of several types of digital lines that carry multiple signals over a single communications line. Whereas a standard dial-up telephone line carries only one signal, digital T-carrier lines use multiplexing so that multiple signals can share the telephone line. T-carrier lines provide extremely fast data transfer rates. The most popular T-carrier line is the T-1 line. Businesses often use T-1 lines to connect to the Internet. A fractional T-1 line is a less-expensive, albeit slower, connection option for home owners and small businesses. Instead of a single owner, a fractional T-1 is shared with other users. A T-3 line is equal in speed to 28 T-1 lines. T-3 lines are the most expensive connection method. Main users of T-3 lines include large companies, telephone companies, and service providers connecting to the Internet backbone.
Ways to Access the Internet and the Web 13
Internet Service Providers
An Internet service provider (ISP) is a business that has a permanent Internet connection and provides temporary Internet connections to individuals and companies using one or more access methods: dial-up, high-speed dial-up, broadband, or wireless. ISPs are either regional or national. A regional ISP, such as NetNITCO (Figure 1-16), provides Internet access for customers (individuals or businesses) in a specific geographic area. A national ISP provides Internet access in most major cities and towns nationwide. National ISPs may offer more services and generally have larger technical support staffs than regional ISPs. An example of a national ISP is EarthLink (Figure 1-17). A cable company, such as Verizon, can be an ISP as well as provide cable television and telephone access; negotiating one price for all of those services can save you money and hassle, but can provide limited options if you are tied into one provider for all three because you can only choose from within the plans for each service offered by that provider.
@SOURCE |
ISPs
For a comparison of Internet service providers (ISPs), visit the Web Design 4 Chapter 1 Student Online Companion Web page at www
.cengagebrain.com and then click ISPs in the @Source links.
Figure 1-16 A regional ISP provides Internet access for homes and businesses in a specific geographical area.
Figure 1-17 A national ISP provides Internet access for homes and businesses across the United States.
14 Chapter 1 The Environment and the Tools
@SOURCE |
Web Browsers
For more information about popular
Web browsers, visit the Web Design 4 Chapter 1 Student Online Companion Web page at www
.cengagebrain.com and then click Web Browsers in the @Source links.
Web Browsers
To view Web pages, you need a Web browser, also called a browser, which is a software program that requests, downloads, and displays Web pages stored on a Web server. Although there are many browsers available, most of them share common features, such as an Address bar, a Favorites list, a History list, tabs that open multiple pages in one browser window, and Back and Forward buttons for navigating. As of this writing, Microsoft Internet Explorer (Figure 1-18) remains the most widely used browser software, with approximately 50 percent of the browser market. The Web page illustrations in this text use Internet Explorer version 9. Mozilla Firefox (Figure 1-18) is the next-most-popular Web browser software, with approximately 27 percent of the browser market. Google released its Chrome browser
in 2008; Google has about 10 percent of the market. The remaining 13 percent of the browser market is divided among other browsers, including Opera and Safari.
Address bar
links
search box |
links |
Figure 1-18 Mozilla Firefox and Microsoft Internet Explorer are examples of Web browsers.
DESIGN TIP
A Web page might appear differently depending on the browser type or version, so you should test your pages with different browsers as you develop your Web site. For example, features of your site that work within the Internet Explorer 9 browser might not work in earlier versions, such as Internet Explorer 6.
You can access a Web page by entering its unique address, called the Uniform Resource Locator (URL), in a browser’s Address bar. At a minimum, a URL consists of a domain name and a top-level domain designation. Many URLs also include folder and file designations indicating the path to a specific Web page. If included, folder and file names are separated by forward slash characters following the top-level domain designation. Figure 1-19 illustrates the URL or path to the news page on boston.com.
protocol |
|
|
domain name |
|
|
folder |
|
|||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
http://www.boston.com/news
Figure 1-19 A URL identifies a computer on the Internet.
Ways to Access the Internet and the Web 15
An IP address is the numeric address for a computer connected to the Internet. Every device in a computer network has an IP address. The Internet Assigned Numbers Authority (IANA) works with regional and local entities to assign IP addresses. A domain name is the text version of a computer’s numeric IP address. Companies known as domain name registrars are responsible for assigning domain names. A top-level domain (TLD) designation (Figure 1-20) indicates the type of organization or general domain — commercial, nonprofit, network, military, and so forth — for which the domain name is registered. Some countries have their own TLDs, such as Australia (.au), France (.fr), and Canada (.ca).
Top-Level Domains
Top-Level |
|
Top-Level |
|
Domain |
Domain Type |
Domain |
Domain Type |
.aero |
Air-transportation industry |
.jobs |
Human resources managers |
|
|
|
|
.asia |
Asia Pacific community |
.mil |
U.S. military |
|
|
|
|
.biz |
Businesses |
.mobi |
Consumers and providers of |
|
|
|
mobile products and services |
|
|
|
|
.cat |
Catalan linguistic community |
.museum |
Museums |
|
|
|
|
.com |
Commercial, personal |
.name |
Individuals |
|
|
|
|
.coop |
Cooperative associations |
.net |
Network providers |
|
|
|
|
.edu |
Postsecondary institutions |
.org |
Noncommercial community |
|
|
|
|
.gov |
U.S. government |
.pro |
Credentialed professionals |
|
|
|
|
.info |
General information |
.tel |
Business and individual contact data |
|
|
|
|
.int |
International treaty organization |
.travel |
Travel industry |
|
|
|
|
Figure 1-20 Top-level domains identify the type of organization or general domain for which a domain name is registered.
In a URL, the domain name and top-level domain designation are preceded by a protocol, or rule, that specifies the format to be used for transmitting data. For
Web pages, that protocol is the Hypertext Transfer Protocol (HTTP), which is the communications standard for transmitting Web pages over the Internet. You can type the protocol when you enter the Web page domain name and top-level domain designation in the browser’s Address bar; however, it is generally not necessary to do so. Most Web browsers will insert the HTTP protocol automatically as the requested Web page is downloaded into the browser.
Q&A |
Who controls the registration of domain names?
The Internet Corporation for Assigned Names and Numbers (ICANN) controls the Domain Name System (DNS) and the registration of domain names through its accredited registrars, such as Network Solutions or register.com.
Select a short, easy-to-remember domain name that ties directly to a site’s purpose or publisher’s name or is hard to forget. Examples of effective domain names include webkinz.com (social network for kids), business.com (business-oriented search directory), and ask.com (search tool).
DESIGN TIP
16 Chapter 1 The Environment and the Tools
YOUR Exploring Domain Name Registration
TURN
1. Identify three to five possible domain names for a computer repair business.
2. Visit the Web Design 4 Chapter 1 Student Online Companion Web page at www.cengagebrain.com and click register.com in the Your Turn links.
3. Type each of the potential domain names in the Get a Domain Name text box; click the Get a Domain Name list box arrow,
and select the top-level domain of your choice. Then click the Find It button
to search existing domain names and determine if your entered domain name is available.
4. Report back to your class on the results of your domain name search. If asked to do so by your instructor, print each of the domain name search results pages.
Alternative Web Page Viewing Devices
In addition to viewing Web pages on a desktop or laptop computer, you also can view Web pages using a handheld computer. Handheld computers, such as Apple’s iPad, shown in Figure 1-21, are wireless, portable computers designed to fit in a user’s hand.
A personal digital assistant (PDA) is a type of handheld computer used to manage personal information and access the Internet; today, most PDAs are smartphones. A smartphone is a mobile phone that offers other features, such as a camera, calendar, and Internet access for e-mail, music downloads, and access to Web pages in addition to cellular voice telephone service (Figure 1-22). Netbooks are small, lightweight, and inexpensive laptops.
Figure 1-21 Handheld computers also Figure 1-22 Smartphones offer
provide portable Internet access. mobile access to the Internet
and the Web.
DESIGN TIP
Some of your site visitors might be viewing your pages using a microbrowser on a handheld computer or smartphone. Limiting site graphics and keeping text brief and to the point can enhance their viewing experience. You can also create a version of your Web site specifically for smartphones or mobile devices.
Types of Web Sites 17
Types of Web Sites
The types of sites found on the Web can be categorized as personal, organizational/ topical, and commercial. A Web site’s type differs from a Web site’s purpose. The type is defined as the category of site, and is determined by the company or individual
responsible for the site’s creation. The purpose of a site is its reason for existence — often, that reason is to sell products, but it could also be to share information, collect feedback, or some other purpose. Defining purpose is discussed in detail in Chapter 3. An overview of personal, organizational/topical, and commercial Web sites follows, along with the individual design challenges they present.
Personal Web Sites
Individuals create their own personal Web sites for a range of communication purposes. You might use a personal Web site to promote your employment credentials, share news and photos with friends and family, or share a common interest or hobby with fellow enthusiasts. Depending on your site’s purpose, you might include your résumé, blog, photo gallery, biography, e-mail address, or a description of whatever you are passionate about — from Thai food to NASCAR racing.
Creating a personal Web site is typically less complex than creating other types of sites, and you might have limited software, hardware, and other resources compared with creators of commercial sites. Working independently means you must assume all the roles necessary to build the Web site. Web roles are discussed later in this chapter. Despite these challenges, you can publish a successful Web site to promote yourself and your services, or simply tell the world what you are all about. You can also use a content management system, discussed later in the chapter, to allow you to focus on the content of your site and not its structure. The Web already offers a range of tools for creating personal sites; blogging or social net-working tools are free alternatives to creating a personal Web site; Facebook can allow
you to communicate and share information with your friends; LinkedIn can present your résumé, references, and business connections to potential employers.
Do not include personally identifiable information that can be misused, such as a Social Security number, on a personal Web site. Be careful what you put online, whether it is on a personal Web site or a social networking site. Employers, college recruiters, and anyone with an Internet connection can find information, posts, or photos quite easily, even with privacy settings enabled.
DESIGN TIP
Organizational and Topical Web Sites
An organizational Web site is one that is owned by any type of group, association, or organization, whether it is a professional or amateur group. For example, if you belong to the Advertising Photographers Association of North America, you might volunteer to create an organizational Web site to promote member accomplishments or to encourage support and participation. Conversely, as a photographer, you might choose to design
a site devoted to black-and-white photography to share your knowledge with others, including tips for amateurs, photo galleries, and online resources. A site that is focused on a specific subject is called a topical Web site. The purpose of both types of sites is to provide a resource about a subject.
18 Chapter 1 The Environment and the Tools
@SOURCE |
Evaluating Content
For more information on critical evaluation of Web page content, visit the Web Design 4 Chapter 1 Student Online Companion Web page at www
.cengagebrain.com and click Evaluating Content in the @Source links.
Professional, nonprofit, international, social, volunteer, and various other types of organizations abound on the Web, as do Web sites devoted to diet and nutrition, health, entertainment, arts and humanities, sports, various hobbies, and many additional topics. An organization that lacks funding might encounter the same challenges creating its site as an individual creating a Web site — specifically, limited resources, including people to create and maintain the site. As you browse the Web, you will find that some organizational and topical Web sites lack accurate, timely, objective, and authoritative content. You must always carefully evaluate a Web site’s content for these four elements. Figure 1-23 shows an example of an organizational Web site.
Figure 1-23 The World Health Organization (WHO)’s organizational site.
|
|
|
Take care to ensure that your Web pages contain accurate, current, objective, |
|
DESIGN |
|
|
|
|
|
|
|
and authoritative content. |
|
|
|
|
|
|
|
TIP |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Commercial Web Sites
The goal of many commercial Web sites is to promote and sell products or services of a business, from the smallest home-based business to the largest international enter-prise. The design and content of a large enterprise’s Web site might be much more sophis-ticated and complex than that of a small business’s Web site. Figure 1-24 contrasts the home page for a large B2B enterprise, SAP, which sells and supports software, with that of a small B2C business, Hometown Favorites, which offers hard-to-find food products.
In addition to sites that promote and sell products or services, commercial Web sites also include sites that generate their revenue largely from online services like advertising, such as search tool sites and portal sites.
Types of Web Sites 19
Figure 1-24 Commercial Web sites promote and sell products and services.
SEARCH TOOLS Search tools are Web sites that locate specific information on the Web based on a user’s search requirements. Such tools include search engines, metasearch engines, and search directories.
A search engine is a Web-based search tool that locates a Web page using a word or phrase found in the page. To find Web pages on particular topics using a popular search engine, such as Google, Bing, or ask.com, you enter a term or phrase, called a keyword, in the search engine’s text box and click a button usually labeled Search or Go. The search engine compares your search keywords or phrases with the contents of its database of pages and then displays a list of relevant pages. A match between a keyword search and the resulting occurrence is called a hit.
A search engine might use a variety of methods to create its Web site database, called its index. For example, most search engines use software spiders or robots, which are programs that browse the Web for new pages and then add the pages’ URLs and other information to their indexes. Some search engines might also use meta tags to build their indexes. Meta tags, which are special codes added to Web pages, contain information such as keywords and descriptive data regarding a page. Other search engines might also use the information in a Web page title — the text that appears in the browser title bar when a Web page downloads — or keywords in the page text to index a page.
A metasearch engine is a search engine, such as Mamma or Dogpile, that performs a keyword search using multiple search engines’ indexes. Figure 1-25 shows an example of a key-word search using the popular search engine Google. Figure 1-26 illustrates the same keyword search using the Dogpile metasearch engine.
Q&A |
What does it mean to google?
As the Google search engine rose in popularity, it
became a generalized trademark, such as zipper or Kleenex, meaning that the company name is used to describe a general product or service. The 2006 Oxford English Dictionary included the term ‘google’ to refer to searching for information on the
Internet.
search results
earch box
Figure 1-25 A keyword search using a search engine returns a list of Web pages related to the keyword or phrase.
20 Chapter 1 The Environment and the Tools
search box
search results
Figure 1-26 A metasearch engine searches the indexes of multiple search engines.
Search engine optimization (SEO) is the process of designing a Web page to increase the likelihood that the page will appear high in a search engine’s search results list. Search engine optimization tools include meta tags, descriptive page titles, relevant inbound links from other sites, and clearly written text. You learn more about SEO in Chapter 7.
|
Adding meta tags to your Web pages and carefully crafting each Web page |
|
DESIGN |
|
|
|
title can increase the probability that your pages will be included in many |
|
|
|
|
TIP |
|
|
|
search engines’ indexes and that your pages will appear in search results lists |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
for important keywords and phrases. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Q&A |
When should I use a search directory or search engine?
Search directory entries are reviewed and categorized
by humans, so if you are looking for information on a specific topic, a directory is a good
place to start. Search engines will return a wider array of results, but might not be as accurate.
In addition to designing and writing your content for SEO, you can include paid or sponsored placements in your site marketing plan. In a paid or sponsored placement, the site publisher pays the search engine a fee to list their pages at or near the top of the search results list when a visitor uses specific keywords. Figure 1-25 illustrates
a Google search results list for the phrase, Web design; paid placements are search results that are called sponsored links and are positioned prominently above and to the right of the list. You learn more about using paid or sponsored placement as a market-ing tool in Chapter 7.
Unlike a search engine, a search directory builds its Web page index using human interaction. Site owners can submit Web site information to a search directory. The search directory’s editors review pages they find or that are submitted to them, classifying them into categories such as arts and entertainment, jobs, health and fitness, travel, news, and so forth. The search directory’s own Web pages present a hierarchy of links — from the most general to the most specific to the owner-submitted pages. Site directories can be general, or cover only specific topics. Site directories also can include paid links within their results.
To use a search directory, such as the Open Directory Project (Figure 1-27), you can click category and subcategory links in turn to work your way from the top of the
hierarchy to eventually find Web pages with useful information about a specific topic. For example, clicking the Food link in the search directory’s general Recreation category link leads to a Web page with additional links to Food subcategories, such as Spicy, which you can click to see further categories and more specific results.
Types of Web Sites 21
hierarchy of categories and subcategories
Figure 1-27 A search directory provides a hierarchy of linked categories and subcategories.
Exploring a Search Directory
1. Visit the Web Design 4 Chapter 1 Student Online Companion Web page at www.cengagebrain.com and click dmoz in the Your Turn links to view the Open Directory Project’s home page.
2. Click the Computers link and then follow the subcategory links to drill down through the hierarchy to locate pages on basic Web
design. Return to the home page and click the suggest URL link at the top of the page. Review the requirements for submitting Web page information to the directory.
3. Write two to three paragraphs that explain how you would submit a new site’s pages to the Open Directory Project.
YOUR
TURN
Today, many popular search tools are hybrids that combine a search engine with a search directory. Additionally, some search tools actually provide the Web page indexes used by other search tools. Because search tools’ Web page indexes are created in a variety of ways, the indexes can vary substantially from search tool to search tool. For best results, you should become comfortable searching the Web for specific information using more than one search tool.
PORTALS Portals — Web sites that offer a starting point for accessing information — can be categorized as general consumer portals, personal portals, vertical or industry portals, and corporate portals. A general consumer portal site offers a variety of features, including search services, e-mail, chat rooms, news and sports, maps, and online shopping. Many Web users begin their Web-based activities, including searching for specific information, from a portal, often setting a portal as a personal home page. Two early ISPs — AOL and MSN — and some of the Web’s original search tools, such as Excite and Yahoo!, have evolved into general consumer portals. A personal portal is a version of a general consumer portal, such as MyYahoo!, which a user can customize for personal preferences. A vertical portal, such as usa.gov or farms.com (Figure 1-28 on the next page), provides a starting point for finding information about specific areas of
22 Chapter 1 The Environment and the Tools
interest — in these two examples, information and links to U.S. government agency Web sites and farming topics, respectively. A corporate portal, run on a company’s intranet, provides an entry point for a company’s employees and business partners into its private network. A hyperlocal portal, such as suzysaid.com (Figure 1-28), provides information about and is written by someone living in a specific geographical area.
links to additional
content or external sites
Figure 1-28 Hyperlocal and vertical portals offer a variety of services, links, and information.
YOUR
TURN
Exploring Consumer Portals
1. Visit the Web Design 4 Chapter 1 Student Online Companion Web page at www.cengagebrain.com and click Excite, AOL, MSN, and SuzySaid in the Your Turn links to view the portal pages.
2. Review the features offered by each of the portals. Identify the five features you believe are common to most portals.
3. Write a report that discusses how analyzing the features of existing portal sites can help
you plan the content for a new consumer portal site.
4. Write a paragraph about how you might design a hyperlocal portal for your area. Include details such as the geographical area it will encompass, the intended audience (for example, parents, foodies, or outdoor enthusiasts), and sample content.
Web Design Tools
Web technology is constantly changing — a new browser feature or a wireless handheld device seemingly revolutionizes the way the world accesses the Internet. As soon as these new technologies surface, some Web designers charge ahead to implement these latest advances at their sites. Web sites should undoubtedly implement Web technology that represents true improvement; however, it is important to first determine the merit of new technologies. As a Web designer, you should ask the following questions:
· Does the new technology meet currently accepted standards for Web development and design?
· What specifically can the new technology do to further the purpose of my Web site?
· How will implementation of the new technology affect my Web site’s visual appeal, accessibility, and usability?
Web Design Tools 23
· What impact will adding this technology have on security and other Web site elements?
· What are the direct and indirect costs of implementing the new technology?
· How soon will I see a return on investing in this new technology?
After evaluating the impact the new technologies will have on your Web site, you can then make an informed decision about implementing the technologies.
Make sure to integrate any new technologies with the design, features, and content of your site. Only add the new technology if it will enhance the browsing experience for site visitors.
DESIGN TIP
Various tools are available to create Web pages and add dynamic content, animation, and interactivity. These tools differ as to the skills and knowledge required to use them and the results they produce. The tools include markup languages, Cascading Style Sheets (CSS), scripting languages, text editors, HTML editors, WYSIWYG editors, and Web templates.
Markup Languages
A markup language is a coding system that uses tags to provide instructions about the appearance, structure, and formatting of a document. The markup languages used to create Web pages are HTML, XML, XHTML, and WML.
HTML The Hypertext Markup Language (HTML) is a markup language used to create Web pages. The most current HTML standard is HTML 4.01, which specifies, among other things, that HTML tags must be in lowercase, surrounded by brackets, and inserted in pairs. You can check out Appendix B in the back of this book for more information on HTML 4.01 tags and tag modifiers, called attributes. A tag defines the target, such as <font>….</font>, and the attribute defines the aspect of the target, such as the color, point size, or weight of a font. Technology standards for the Web are set by the World Wide Web Consortium (W3C). The W3C, through an HTML working group, continues to pursue advancements in the HTML standard.
The HTML markup language defines how Web page elements are formatted and organized using predefined codes called HTML tags. For example, the <html> ….</html> tag pair indicates the beginning and the end of a Web page, respectively. The <b> ….</b> HTML tag pair indicates the text between the tags is set in bold. When a Web page is downloaded into a browser, the browser reads and interprets the HTML tags to display the page with organized and formatted text, images, and links.
Even if you are designing a Web site using a content management system or WYSIWYG editor (both described later in this chapter) that does not require the use of markup codes, it is important to understand the basic principles of markup languages to understand how Web pages are coded.
DESIGN TIP
24 Chapter 1 The Environment and the Tools
XML The Extensible Markup Language (XML) is a markup language that uses both predefined and customized tags to facilitate the consistent sharing of information, especially within large groups. Whereas HTML defines the appearance and organization of Web page content, XML defines the content itself. For example, using XML, a programmer can define the custom tag <serialnum> to indicate that the information following the tag is a product serial number.
XHTML The HTML 4.01 standard has been rewritten to combine the features of both HTML and XML as the Extensible Hypertext Markup Language (XHTML). Web pages created using XHTML display better than HTML-coded pages when viewed on smartphones and other handheld computers. Another benefit is that pages created with XHTML avoid user-access issues experienced by many users who view Web pages using assistive technologies (including screen reader software).
WML The Wireless Markup Language (WML) is an XML-based markup language used to design Web pages specifically for microbrowsers on handheld computers, PDAs, and smartphones. WML uses Wireless Application Protocol (WAP) to allow Internet access by wireless devices.
YOUR
TURN
Exploring a Web Page’s Underlying Markup Language
1. Start your browser and type the URL of the Web page of your choice in the Address bar.
2. View the Web page’s underlying markup tags in a new window. (Hint: right-click the page, then click View Source or View Page Source.)
3. Scroll the window to view the markup tags. If instructed to do so, print the document, then close the window.
4. If you have printed the document, use Appendix B to identify several of the markup tags.
@SOURCE |
Scripting Languages
For more information about scripting languages that can create customized, interactive Web pages, visit the Web Design 4 Chapter 1 Student Online Companion Web page at www
.cengagebrain.com and click Scripting Languages in the @Source links.
Cascading Style Sheets
A Cascading Style Sheet (CSS) is a document that uses rules to standardize the appearance of Web page content by defining styles for such elements as font, margins, positioning, background colors, and more. By storing the style rules in a separate document, a Web site designer can attach the style sheet to multiple site pages; any changes made to the style sheet are automatically applied to the associated Web pages. Cascading refers to the order in which the different styles are applied. Chapter 4 discusses CSS in greater detail.
|
Apply Cascading Style Sheets (CSS) to ensure that all the pages at a site have the |
|
DESIGN |
|
|
|
same look. |
|
|
|
|
TIP |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Web Design Tools 25
Scripting Languages
Scripting languages are programming languages used to write short programs, called scripts, that execute in real time at the server or in the Web browser when a Web page is downloaded. Scripts are used to make Web pages dynamic and interactive by adding such features as multimedia, animation, and forms or by connecting Web pages to underlying databases. JavaScript, Active Server Pages (ASP), PHP: Hypertext Preprocessor
(commonly abbreviated as PHP), and MySql are examples of scripting languages.
@SOURCE |
Active Content Threats
For more information about active content threats, visit the Web Design 4 Chapter 1 Student Online Companion Web page at www.cengagebrain
.com and click Active Content Threats in the @Source links.
A Web designer might choose to purchase ready-made scripts to perform routine or common functions, such as e-commerce shopping carts, FAQs (frequently asked questions) lists, and banner ad management. Such scripts are available on CDs or by download from commercial Web sites.
DESIGN TIP
Web page content created by a scripting language such as JavaScript and ASP is also called active content. Unfortunately, active content can be used by hackers to transmit malware. Malware is malicious software, including computer viruses and Internet worms, which can infect a single computer or an entire network. From a design perspective, be aware that visitors’ Web browsers might block active content by default, requiring visitors to actively instruct their browsers to display the content.
Text and HTML Editors
You can create a simple Web page by typing HTML tags and related text into a document created in a plain text editor, such as Notepad (Figure 1-29), the text editor available with the Windows operating system. A text editor is software used to create plain (ASCII) text files. Some Web designers or programmers prefer to use an HTML editor to create Web pages. An HTML editor is a text editor enhanced with special features that are used to more easily insert HTML tags and their attributes. HTML-Kit, CoffeeCup (Figure 1-29), BBEdit, and NoteTab are examples of HTML editors.
|
|
|
} |
|
|
|
|
|
|
|
|
|
text editors enable you |
|
|
|
|
|
to view and edit the code |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
HTML editors have tools to assist you in editing and entering HTML code
Figure 1-29 Text and HTML editors are used to create Web pages.
26 Chapter 1 The Environment and the Tools
WYSIWYG Editors
Many Web designers use WYSIWYG editors, such as Adobe® Dreamweaver®, InnovaStudio WYSIWYG Editor©, Ephox® EditLive!, and Microsoft® Expression Web®, to create Web pages. WYSIWYG stands for “what you see is what you get.” Inserting and formatting text and inserting images or links in a Web page using a WYSIWYG editor is similar to creating a document in a word processor, such as Microsoft Word. Additionally, using a WYSIWYG editor to create Web pages eliminates the need to learn a markup language, which can involve complex coding procedures, because the WYSIWYG editor automatically generates the underlying markup language tags as you insert and format text, images, and links. Most WYSIWYG editors also allow you to view and manipulate the underlying HTML code, if desired. Additional benefits of using WYSIWYG editors include the capability to create Web pages rapidly and the opportunity to become familiar with HTML at a pace you choose.
If you are looking for a professional-strength WYSIWYG editor to create and manage complex, interactive, and animated Web pages, either Microsoft Expression Web (Figure 1-30) or Adobe Dreamweaver (Figure 1-30) would be a good choice. Expression Web and Dreamweaver offer sophisticated Web site design, publishing, and management capabilities. Software vendors who create WYSIWYG editors often provide additional support and resources at their sites, such as clip art and multimedia, training seminars, user forums, and newsletter subscriptions.
design window shows page
list of site files and folders
panels assist in creating and applying CSS rules
properties for a page object are easy to view and edit
Figure 1-30 Microsoft Expression Web and Adobe Dreamweaver are used to create and manage complex, interactive Web pages.
Using a WYSIWYG editor does present some challenges, however. Although most WYSIWYG editors have a preview option to simulate how a Web page looks in a browser, in fact, the page might look quite different when viewed with various versions of different browsers. The inconsistent display is attributable to proprietary, nonstandard code generated by some WYSIWYG editors that has prompted some critics to claim WYSIWYG editors should really be called WYSINWYG editors — “what you see is not
what you get.” A second challenge is that some WYSIWYG editors insert unnecessary code, creating larger, slower-loading Web pages. Finally, some WYSIWYG editors — especially older versions — might not adhere to the latest markup language standards. Inconsistent display between Web browsers and browser versions is discussed in more detail in Chapter 2. Even if your WYSIWYG editor includes tools for previewing, accessibility checking, and compatibility checking, you should still perform any necessary testing before launching your site.
Web Design Tools 27
Web Templates and Other Design Technologies
With little or no knowledge of HTML or other Web design tools, users can quickly create a Web site and its pages using a Web template or a content management system.
A Web template is a predesigned model Web page that you can customize for fast Web site or Web page creation or updating. Some B2B Web hosting sites, such as Yahoo! Small Business and Homestead, provide Web templates (in addition to hosting services) that make it quick and easy for a small business owner to create his or her e-commerce site, focusing on the Web page’s content rather than on the design details.
Other sites, such as DreamTemplate, TemplateWorld, and TemplateMonster, sell an enormous variety of predesigned Web templates for creating personal, organizational/ topical, and commercial Web sites. Additionally, a number of sites, such as PixelMill or Expression Graphics, sell Web templates designed to be easily modified in a specific WYSIWYG editor, such as Dreamweaver. Finally, many WYSIWYG editors, such as Expression Web (Figure 1-31), also provide Web templates for fast site and page creation.
sample image
placeholder text
sample site
navigation template includes
design elements such
as page background
Figure 1-31 Web templates are customizable model Web pages.
In addition to creating public Web pages with templates, site designers can use Web templates to control the look and function of all the pages at internal Web sites on a company’s intranet. An intranet is a private network within a large organization or commercial entity that uses Internet and Web technologies to share information among only its members, employees, or business partners.
For example, a company might allow employees in the Human Resources Department, who have no Web design experience or programming expertise, to add Web pages or update content on existing Web pages related to the human resources department. In this instance, employees might be required to use specific Web templates to ensure that all internal Web pages are consistent in appearance and function.
A content management system (CMS) is a software system that provides authoring and administrative tools that enable the management of Web content development, including authoring, reviewing, editing, and publishing. Content providers working within a CMS use Web templates and style sheets to efficiently add or update Web page content on the fly. The templates, style sheets, and other frequently used content elements, such as a logo graphic, are stored in a database called a content repository. Templates and
28 Chapter 1 The Environment and the Tools
@SOURCE |
Web Design Training
For more information about certifications that can help you train for a career in Web Design, visit the Web Design 4 Chapter 1 Student Online Companion Web page at www.cengagebrain
.com and click Web Design Certifications in the @Source links.
other items are called up from the content repository as needed. Autonomy Interwoven Teamsite and Typo3 are two examples of robust content management system software applications.
Other Web design technologies support communication and collaboration among Web users; these include technologies for incorporating blogs, wikis, social networking, social bookmarking, and collaborative workspaces. For example, Microsoft® Office SharePoint Designer® 2010 is a professional WYSIWYG editor designed for the Microsoft® SharePoint Server® and Windows® SharePoint® services environment. You can use SharePoint Designer 2010 to create interactive Web sites that allow employees to collaborate over the Web from any location. Employees can use tools such as shared workspaces, blogs, and wikis and manage and share document libraries. Many other technology companies, such as IBM, Cisco, and Jive, also offer technologies designed to provide Web-based communication and collaboration.
Web Design Roles
From the smallest personal site devoted to a favorite hobby or special interest to the largest commercial site incorporating advanced multimedia elements, Web sites are planned and developed by people working independently, in small groups, or as part of a large team. Ongoing communication between Web development team members is crucial to the success of any Web site design project that involves multiple participants.
Depending on the circumstances and the complexity of the Web development project, you might take on one or more of the following Web design roles.
Creative Roles
If you assume a creative role, your focus primarily will be on how the site looks and feels. Jobs in the creative role category include content writer/editor, Web designer, artist/ graphic designer, and multimedia producer.
As a content writer/editor, you create and revise the text that visitors read when they visit a Web site, and choose the links, images, video, or other media that enhances your text content. To achieve your Web site’s purpose, you must write specifically for the Web environment and a targeted Web audience. Text simply cut and pasted from a print publication into an HTML document will not effectively deliver the message you want to send. Writing for the Web environment and targeting an audience are detailed in Chapters 2 and 3, respectively. To fill a content writer/editor position, an employer frequently looks for a highly creative applicant with a liberal arts background and demonstrated print and Internet writing experience.
As a Web page designer, your primary role is to convert text, images, and links into Web pages using tools such as markup languages; CSS; and text, HTML, and WYSIWYG editors. Your responsibilities also might include graphic design and Web site setup and maintenance. To be a marketable Web page designer, you must communicate effectively, have a thorough knowledge of Web page design technologies, have graphic design talent, and possess some programming skills. This role requires a solid understanding of how Web pages and browsers interact.
The role of a Web artist/graphic designer is to create original art such as logos, stylized typefaces, and avatars or props for 3D virtual worlds. You also might prepare photographs and other graphic elements and redesign print publications for the Web environment. In the workforce, this highly creative role demands experience with high-end illustration and image-editing software, such as Adobe Illustrator CS5 or
Adobe Photoshop CS5, as well as specialty hardware, such as scanners and digital cameras. Chapter 5 discusses typeface and graphics in detail.
As a multimedia producer, you design and produce animation, digital video and audio, 2D and 3D models, and other media elements to include in a Web site. This role demands knowledge of, and experience with, sophisticated hardware and software, as well as familiarity with art theory and graphic design principles.
High-Tech Roles
If you play a high-tech role, your focus will be primarily on a Web site’s functionality and security. Examples of types of jobs in the technical role category include Web programmer/database developer and network/security administrator.
A Web programmer must be highly skilled in scripting languages, such as JavaScript, Active Server Pages (ASP), PHP: Hypertext Preprocessor, and MySql. These languages are used to create interactive and dynamic Web pages; they also handle form data. A database developer must possess the technical skills to plan, create, and maintain databases of varying complexity. Because the corporate world relies so heavily on databases to conduct day-to-day business, a database developer also needs to know how to integrate databases successfully with company Web pages.
A network/security administrator is responsible for ensuring the day-to-day functionality of the network and protecting it from internal and external threats. Duties and responsibilities include ongoing network inspection, maintenance, and upgrades. Regarding security, an administrator must be aware of security alerts and advisories, protect the network with intrusion-detection software, and have a fully developed plan of action if the security of the network is compromised.
Oversight Role
If you assume an oversight role, your focus is on managerial and administrative issues. Examples of types of jobs in the oversight role category include content manager and Webmaster.
The need for content managers has emerged in the corporate world primarily because of the growth in size and complexity of corporate sites. A content manager may determine the overall content goal; review content to assess its relevancy to the goal and ensure its accuracy and timeliness; ensure that content is published or removed expediently; and identify, implement, maintain, and provide support and training for a
content management system (CMS). All sites need to go through a testing process; testers examine the Web site for usability across different browsers and devices.
The responsibilities of a Webmaster vary dramatically, depending primarily on the staffing and other resources devoted to developing and maintaining a Web site. If working independently, the Webmaster assumes all the roles. In an organizational or business setting, the Webmaster might oversee a Web development team comprising some or all of the creative and technical roles’ job types. A corporate Webmaster often assumes the responsibilities for both the sites that are on the Internet and an intranet. A Webmaster, therefore, must have a broad range of skills and knowledge, including familiarity with databases, markup and scripting languages, content development, creative design, marketing, and growth and maintenance of the hardware connecting computers and users. Sometimes the Webmaster takes on the role of the system architect. A system architect determines the structure and technical needs required to build, maintain, and expand the Web site.
Web Design Roles 29
30 Chapter 1 The Environment and the Tools
YOUR Exploring Web Design Roles
TURN
1. Visit the Web Design 4 Chapter 1 Student Online Companion Web page at www.cengagebrain.com and click Monster in the Your Turn links.
2. Search the Monster site for jobs related to three of the Web design roles discussed in this chapter.
3. Summarize your research in a report by listing the job description, skill requirements,
salary information, and job location for at least two job postings for each of the three Web design roles you would be interested in. Compare the skills needed for the job with your own skill set; what additional training will you need?
Chapter Review
The Internet is a worldwide public network that links millions of private networks. The highly visual, dynamic, and interactive World Wide Web is a subset of the Internet. The Internet and the Web have dramatically changed the communication, education, entertainment, and business practices of millions of people worldwide.
Users can access the Internet and the Web over cable television lines or through the Public Switched Telephone Network (PSTN) over dial-up or dedicated lines. Fixed wireless connections are used where DSL or cable access is not available. Laptops and handheld devices, such as PDAs and smartphones, access the Internet using mobile wireless connectivity methods. Internet service providers (ISPs) provide Internet connections to individuals, businesses, and other organizations.
A Web browser, or browser, is a software program that requests, downloads, and displays Web pages. To view a Web page, enter its unique address, called a Uniform Resource Locator (URL) in the browser’s Address bar. The two most popular Web browsers are Microsoft Internet Explorer and Mozilla Firefox. Alternatives to traditional computer-based access using desktop or laptop computers include handheld computing devices and smartphones.
Web sites can be categorized as personal, organizational/topical, or commercial. Commercial Web sites include B2C, B2B, and C2C e-commerce sites; entertainment/ news; search tools; and portal sites.
Web design technologies include markup languages, Cascading Style Sheets (CSS), scripting languages, text and HTML editors, WYSIWYG editors, and predesigned Web templates and content management systems.
Depending on resources, developing a Web site might be the job of an individual person, two or three people, or a large Web development team. Although actual titles vary and responsibilities can overlap, the primary Web design roles include creative, high-tech, and oversight.
After reading the chapter, you should know each of these key terms.
Chapter Review 31
TERMS TO
KNOW
3D virtual world (7)
3G (11)
4G (11)
active content (25)
Active Server Pages (ASP) (25) Adobe Dreamweaver (26)
asymmetrical digital subscriber line (ADSL) (12) attributes (23)
blog (6) blogging (6) bookmark (4) browser (14)
browsing the Web (3) business-to-business (B2B) e-commerce (9)
business-to-consumer (B2C) e-commerce (9) cable television (CATV) lines (10) Cascading Style Sheets (CSS) (24)
cloud computing (4) collaborative workspace (5) commercial Web site (18)
consumer-to-consumer (C2C) e-commerce (9) content management system (CMS) (27) content manager (29)
content repository (27) content writer/editor (28) corporate portal (22) database developer (29) dedicated line (12) dial-up line (12)
digital subscriber line (DSL) (12) domain name (15) e-commerce (9)
electronic commerce (9) electronic mail (5) e-mail (5)
Extensible Hypertext Markup Language (XHTML) (24)
Extensible Markup Language (XML) (24) favorite (4)
fixed wireless (11) fractional T-1 line (12)
general consumer portal (21) handheld computer (16)
hit (19)
home page (2) hot spot (11) HTML editor (25) HTML tags (23) hyperlink (3)
hyperlocal portal (22)
Hypertext Markup Language (HTML) (23) Hypertext Transfer Protocol (HTTP) (15) IM chat (5)
index (19)
instant messaging (5)
Integrated Services Digital Network (ISDN) (12)
Internet (2)
Internet2 (2)
Internet Relay Chat (IRC) (5) Internet service provider (ISP) (13) intranet (27)
IP address (15) JavaScript (25) Kbps (10) keyword (19) link (2) malware (25)
markup language (23)
massively multiplayer online game (MMOG) (7)
Mbps (10)
metasearch engine (19) meta tag (19)
Microsoft Expression Web (26) mobile wireless (11) multimedia producer (29) multiplexing (13)
MySql (25) national ISP (13) netbook (16) network (2)
network/security administrator (29) organizational Web site (17) personal digital assistant (PDA) (16) personal portal (21)
personal Web site (17)
PHP: Hypertext Preprocessor (PHP) (25) protocol (15)
Public Switched Telephone Network (PSTN) (11)
regional ISP (13) robot (19) script (25)
scripting languages (25) search directory (20) search engine (19)
search engine optimization (SEO) (20) smartphone (16)
social bookmarking (7) social networking (6) spider (19)
streaming media (12) surfing the Web (3) system architect (29) T-1 line (12)
32 Chapter 1 The Environment and the Tools
T-3 line (12) |
Web artist/graphic designer (28) |
T-carrier line (12) |
Web-based chat (5) |
tag (6) |
Web browser (14) |
tester (29) |
Web page (2) |
text editor (25) |
Web page designer (28) |
topical Web site (17) |
Web programmer (29) |
top-level domain (TLD) (15) |
Web server (2) |
transfer rate (10) |
Web site (2) |
Uniform Resource Locator (URL) (14) |
Web template (27) |
vertical portal (21) |
Webmaster (29) |
video blogging (6) |
wireless fidelity (Wi-Fi) (11) |
video sharing (6) |
Wireless Markup Language (WML) (24) |
virtual meeting space (5) |
World Wide Web (Web) (2) |
Web 2.0 (4) |
WYSIWYG editor (26) |
|
|
TEST YOUR
KNOWLEDGE
Complete the Test Your Knowledge exercises to solidify what you have learned in the chapter.
Matching Terms
Match each term with the best description.
1. Web page
2. browser
3. search directory
4. hyperlink
5. e-commerce
6. HTTP
7. hyperlocal portal
8. XML
9. content management system (CMS)
10. Internet service provider (ISP)
11. Uniform Resource Locator (URL)
12. spider
a. The communication standard used to transmit data on the Web.
b. A Web page’s unique text address.
c. The conducting of a variety of business activities online, including shopping, investing, and the exchange
of data and services between business partners.
d. A Web-based tool used to locate editor-chosen Web pages based on keywords or phrases.
e. A business that has a permanent Internet connection and provides temporary connections to individuals and companies for a fee.
f. A specifically formatted electronic document that contains text, graphics, and other information and is linked to similar, related documents.
g. A markup language used to define Web site content.
h. A word, phrase, or graphical image that connects pages at the same site or pages across different sites.
i. A site that is written about, for, and by members of a specific geographical location.
j. A software program used to request, download, and display Web pages.
k. A program that searches the Web for new pages in order to create or update a search index.
l. A software program that provides Web site authoring and administrative tools.
Chapter Review 33
Short Answer Questions
Write a brief answer to each question.
1. Describe the relationship between the Internet and the World Wide Web.
2. Describe the difference between a search engine and a search directory.
3. Define the following terms: CATV lines, fixed wireless, mobile wireless, dedicated lines, and dial-up Internet access.
4. Explain how the following e-commerce categories are similar and how they differ: business-to-consumer (B2C), business-to-business (B2B), and consumer-to-consumer (C2C).
5. Describe briefly the following tools for creating Web sites and Web pages: HTML, XHTML, text and HTML editors, WYSIWYG editors, Web templates, and content management systems (CMS).
6. Identify the primary responsibilities associated with each of the following Web design roles: content writer/editor, artist/graphic designer, Web page designer, Web programmer/database developer, and content manager.
7. Define the following terms: Internet Relay Chat (IRC), instant messaging (IM), blog, e-mail, and collaborative workspace.
8. Define the following terms: Uniform Resource Locator (URL), IP address, domain name, top-level domain, and Hypertext Transfer Protocol (HTTP).
Test your knowledge of chapter content and key terms.
Instructions: To complete the Learn It Online exercises, start your browser, click the Address bar, and then visit the Web Design 4 Chapter 1 Student Online Companion page at www.cengagebrain.com. When the Web Design Learn It Online page is displayed, click the link for the exercise you want to complete and then read the instructions.
LEARN IT
ONLINE
Chapter Reinforcement
TF, MC, and SA
A series of true/false, multiple-choice, and short-answer questions that test your knowledge of the chapter content.
Who Wants To Be a
Computer Genius?
An interactive game that challenges your knowledge of chapter content in the style of a television quiz show.
Flash Cards Wheel of Terms
An interactive learning environment An interactive game that challenges your
where you identify chapter key terms knowledge of chapter key terms in the style
associated with displayed definitions. of the television show Wheel of Fortune.
Practice Test Crossword Puzzle Challenge
A series of multiple-choice questions that test your knowledge of chapter content and key terms.
A crossword puzzle that challenges your knowledge of key terms presented in the chapter.
34 Chapter 1 The Environment and the Tools
TRENDS
Investigate current Web design developments with the Trends exercises.
Write a brief essay about each of the following trends, using the Web as your research tool. For each trend, identify at least one Web page URL used as a research source. Be prepared to discuss your findings in class.
1 Cloud Computing
Cloud computing affects how users store, access, and share files and software. Research the latest cloud computing trends and technologies. Use Google Docs to write your findings and submit it to your instructor.
AT ISSUE
2 Social Networking and Bookmarking
How do social networking and bookmarking sites such as Facebook and Digg affect Internet users’ personal interactions with the Internet? As a Web designer, how can you take advantage of these trends? Visit at least one social networking and social bookmarking site to see how users share information. Identify at least one site that encourages and provides opportunities for users to share content using these technologies.
Challenge your perspective of Web design and surrounding technology with the @Issue exercises.
Write a brief essay in response to the following issues, using the Web as your research tool. For each issue, identify at least one Web page URL used as a research source. Be prepared to discuss your findings in class.
1 Impact on Lifestyle
With developments in technology such as smartphones, people are constantly able to stay connected. Whether by phone calls, text messages, alerts from Web sites about new content, or social networking sites such as Facebook and Twitter, technology provides many distractions. How do these developments enhance daily life? How have they changed daily life from five or ten years ago? What is a negative impact? Discuss the impact of technology on your lifestyle and that of those around you.
2 Protecting Your Privacy
Social networking and blogging sites make it easy to share information, photos, links, and videos. However, you should use caution before publishing or uploading any content. Explore the privacy policies of two social networking or blogging sites.
What measures would you take to protect yourself when using these sites? Discuss the advantages and disadvantages of using these sites.
Chapter Review 35
Use the World Wide Web to obtain more information about the concepts |
HANDS ON |
|
|
|
|
in the chapter with the Hands On exercises. |
|
|
1 Explore and Evaluate: A Portal
Browse the Web to locate a portal. Follow links from the home page to view at least three related pages at the site. Then answer the following questions; be prepared to discuss your answers in class.
a. Who owns the site and what is its URL?
b. Is it a general consumer portal, a vertical portal, or a corporate portal?
c. Were the home page and related pages visually appealing? If yes, why? If no, why not?
d. Does the portal have an overall focus?
e. How easy was it to navigate to related pages using the home page links?
f. Identify the type of pages you were led to; were they related to the portal site or were they separate sites?
g. Were you able to identify any advertisements or paid promotional placements?
h. How long did it take for you to find useful information at the site?
2 Search and Discover: E-Commerce Web Sites
Using the Google search tool, perform a keyword search to identify two commercial Web sites: a B2C site that sells sports equipment and a B2B site that sells Web design services. Follow links from each site’s home page to view the specific product or service pages of your choice at each site. Then write a report that answers the following questions for each site.
a. Who owns the site and what is its URL?
b. Is the site’s domain name an effective marketing tool? If yes, why? If no, why not?
c. What type of customer does the site target?
d. Was the site’s home page visually appealing? If yes, why? If no, why not?
e. Was it easy to find the product or service pages using home page links?
f. Were the products or service pages visually appealing? If yes, why? If no, why not?
g. Was it easy to find useful information about a specific product or service?
h. Would you purchase a product or service from the B2C site? If yes, why? If no, why not?
i. Does the B2B site offer any type of validation, such as customer testimonials or designer certifications, that helps establish the site’s authority and credibility? Is there any indication that design services offered at the site follow current Web design standards?
j. How does your personal experience at each site inform your approach to designing an e-commerce site?
36 Chapter 1 The Environment and the Tools
TEAM |
Work collaboratively to reinforce the concepts in the chapter with the Team |
|
APPROACH |
|
|
|
Approach exercises. |
|
|
|
|
1 Survey Search Engines
Pair up with two classmates and work as a team to conduct two different searches each using a different search engine, such as Google, ask.com, and Mamma. Assign one search engine to each team member, and decide as a group on two different keyword searches to perform.
a. Perform two keyword searches using the same keyword or phrase. Compare the search results returned by each search engine.
b. Answer the following questions:
• Are the Web pages listed in the search results lists the same or different?
• How do the search results from the Mamma metasearch engine differ from the search results returned by the other search engines?
c. How can you use a similar exercise to identify appropriate meta tag keywords and descriptive Web page titles when planning a Web site?
d. How do sponsored links affect search results? Are the sponsored links identified? Then, as a team, create a report indicating your team’s search results.
CASE
STUDY
2 Team and Client Communication Challenges
Join with four or five classmates to establish a mock Web development team. Assume the Web development team has been hired by a client to plan and create a B2C e-commerce Web site. Each team member should choose one or more of the creative, high-tech, or oversight roles discussed in this chapter. Then use the Web to research current challenges that individuals in each role might face, and identify potential resolutions to those challenges. Next, as a team, brainstorm communication issues that might arise among team members and between the team members and the client. Identify ways to resolve any potential communication issues. Finally, prepare a detailed report describing potential design and communication challenges and the team’s approach to handling them. Submit the report to your instructor and be prepared to present your report to the class.
Apply the chapter concepts to the ongoing development process in Web design with the Case Study.
The Case Study is an ongoing development process using the concepts, techniques, and Design Tips presented in each chapter.
Background Information
You now will begin the process of designing your own personal, organizational/topical, or commercial Web site. As you progress through the chapters in this book, you will learn how to use design as a tool to create effective Web pages and sites. At each chapter’s conclusion, you will receive instructions for completing another segment of the ongoing design process.
The following are suggestions for Web site topics. Choose one of these topics or determine your own. Select a topic that you find interesting, feel knowledgeable about, or are excited about researching.
1. Personal Web Site
· Share a hobby or special interest: music, remote control cars, mountain biking, fantasy sports, or other
2. Organizational/Topical Web Site
· Increase support and membership for: Habitat for Humanity, Red Cross, or a campus organization
· Promote awareness of: health and fitness, endangered species, financial assistance for college
3. Commercial Web Site
· Start a new business: childcare or dog walking, or expand an existing business with a Web presence
· Sell a service: tutoring, Web design, graphic design, home maintenance
· Sell a product: DVD labels, workout programs or gear, beauty/boutique products
The evaluation of your completed Web site, which will consist of 5 to 10 pages, will be based primarily on the application of good Web design concepts.
Chapter 1 Assignment
Follow Steps 1–6 to complete and submit a one-page report in preparation for developing your Web site.
1. Identify which type of Web site you will design — personal, organizational/topical, or commercial. Write a brief paragraph describing the site’s overall purpose and its targeted audience. Create a name for your site.
2. List at least three general goals for your Web site. You will fine-tune these goals into a mission statement in a subsequent chapter.
3. List elements in addition to text — photos, music, animation, and so forth — that you could include on your Web site to support your general goals.
4. Identify the design tools you expect to use to develop your Web site.
5. Identify an available domain name and URL for your site.
6. Submit your report to your instructor and be prepared to discuss your report with the class.
Chapter Review 37
A Design
APPENDIX
Tips
Summary of Design Tips
This appendix lists in chapter sequence the Design Tips presented throughout this book. The first column contains a general tip description, the second column contains the page number on which the Design Tip is found, and the third column contains the tip text.
Description |
Page |
Tip Overview |
|
Chapter 1 |
|
|
|
|
Hyperlinks |
Page 3 |
Whether you choose to indicate hyperlinks in text by color, |
|
|
bold, or underline, be consistent throughout your site. |
|
|
|
Communication |
Page 4 |
Design your Web site so that it communicates trustworthiness, |
|
|
timeliness, and value. |
|
|
|
Educational site |
Page 8 |
Any formal or informal educational Web site should contain |
content |
|
content that is timely, accurate, and appealing. Such sites |
|
|
also should include elements to provide feedback, maintain |
|
|
records, and assess learning. |
|
|
|
Connectivity |
Page 8 |
Include methods to share your site’s content by providing |
|
|
links to send content using e-mail; post to the user’s Facebook |
|
|
page, RSS feed, or Twitter account; as well as link to related |
|
|
content that site users would find interesting and relevant. |
|
|
|
E-commerce products |
Page 10 |
To develop an e-commerce Web site, you must determine the |
and technologies |
|
potential customers for your products or services. Categorize |
|
|
your items or provide a search feature so customers can |
|
|
easily find what they need. Additionally, you must decide |
|
|
which e-commerce technologies, such as shopping cart and |
|
|
credit card processing technologies, are best suited for your |
|
|
e-commerce site. |
|
|
|
Images and |
Page 12 |
Although large images and multimedia elements on Web |
multimedia |
|
pages can degrade the audience’s viewing experiences at |
|
|
slower Internet access speeds, most sites assume users have |
|
|
high-speed dial-up, cable, or wireless connectivity. |
|
|
|
Browser variations |
Page 14 |
A Web page might appear differently depending on the |
|
|
browser type or version, so you should test your pages with |
|
|
different browsers as you develop your Web site. For example, |
|
|
features of your site that work within the Internet Explorer 9 |
|
|
browser might not work in earlier versions, such as Internet |
|
|
Explorer 6. |
|
|
|
Description |
Page |
Tip Overview |
Domain names |
Page 15 |
Select a short, easy-to-remember domain name that ties |
|
|
directly to a site’s purpose or publisher’s name or is hard to |
|
|
forget. Examples of effective domain names include webkinz. |
|
|
com (social network for kids), business.com (business-oriented |
|
|
search directory), and ask.com (search tool). |
|
|
|
Microbrowsers |
Page 16 |
Some of your site visitors might be viewing your pages using |
|
|
a microbrowser on a handheld computer or smartphone. |
|
|
Limiting site graphics and keeping text brief and to the point |
|
|
can enhance their viewing experience. You can also create |
|
|
a version of your Web site specifically for smartphones or |
|
|
mobile devices. |
|
|
|
Personally identifiable |
Page 17 |
Do not include personally identifiable information that can be |
information (PII) |
|
misused, such as a Social Security number, on a personal Web |
|
|
site. Be careful what you put online, whether it is a personal |
|
|
Web site or a social networking site. Employers, college |
|
|
recruiters, and anyone with an Internet connection can find |
|
|
information, posts, or photos quite easily, even with privacy |
|
|
settings enabled. |
|
|
|
Value-added content |
Page 18 |
Take care to ensure that your Web pages contain accurate, |
|
|
current, objective, and authoritative content. |
|
|
|
Search engine |
Page 20 |
Adding meta tags to your Web pages and carefully crafting |
optimization (SEO) |
|
each Web page title can increase the probability that your |
|
|
pages will be included in many search engines’ indexes and |
|
|
that your pages will appear in search results lists for important |
|
|
keywords and phrases. |
|
|
|
Integrating new |
Page 23 |
Make sure to integrate any new technologies with the |
technologies |
|
design, features, and content of your site. Only add the new |
|
|
technology if it will enhance the browsing experience |
|
|
for site visitors. |
|
|
|
Markup languages |
Page 23 |
Even if you are designing a Web site using a content |
|
|
management system or WYSIWYG editor that does not require |
|
|
the use of markup codes, it is important to understand the |
|
|
basic principles of markup languages to understand how Web |
|
|
pages are coded. |
|
|
|
Cascading Style Sheets |
Page 24 |
Apply Cascading Style Sheets (CSS) to ensure that all the pages |
(CSS) |
|
at a site have the same look. |
|
|
|
Scripts |
Page 25 |
A Web designer might choose to purchase ready-made scripts |
|
|
to perform routine or common functions, such as e-commerce |
|
|
shopping carts, FAQs (frequently asked questions) lists, and |
|
|
banner ad management. Such scripts are available on CDs or |
|
|
by download from commercial Web sites. |
|
|
|