Web Design Basics

1
Chapter 1

• Web Design Basics

2
Chapter Objectives

• Define the Internet and the World Wide Web
• Describe how data moves from one computer to
  another over the Internet
• Differentiate between a Web page and a Web site
• Describe a home page and a splash page
• Locate and access information on the World Wide
  Web

3
Chapter Objectives

• Discuss the public switched telephone network and
  its effect on Web design
• Describe an Internet service provider
• Identify Web design browser-related issues
• Describe the different Web page viewing devices
  available
• Identify the different types of Web sites

4
Chapter Objectives

• Discuss the impact of the Internet and Web
• Differentiate among the different types of Web
  sites
• Discuss methods for doing Web design research
• Describe the various tools for creating Web pages
  and Web sites
• Identify Web design roles

5
The Internet

• The Internet is a collection of networks, each of
  which is composed of a collection of smaller
  networks
• Most popular and fastest growing area in
  computing today

6
The Internet

• Networks connected with low-, medium-, and
  high-speed data lines
• The Internet backbone is a high-speed data line
  connecting major computing systems
• The last mile, the connection between your home
  and Internet Service Provider, is usually
  low-speed
• Telephone lines

7
The Internet
8
The World Wide Web

• Internet users access information by using a
  hyperlink, a software pointer that points to the
  computer where the information you request is
  located
• The collection of links throughout the Internet
  creates an interconnected network called the
  World Wide Web.

9
The World Wide Web

• Each computer within the Web containing
  information that can be referenced with a link is
  called a Web site
• A Web page is a specifically formatted electronic
  document containing graphics, text, and other
  information
• Jumping from one Web page to another is called
  surfing the Web

10
The World Wide Web

• Navigation by using links
• Links can bein the form oftext or graphics

11
The World Wide Web

• Web sites can be made up of splash pages and home
  pages

12
The World Wide Web

• A home page provides information about the Web
  sites purpose and content

13
The World Wide Web

• A splash page is a lead-in page often containing
  multimedia
• Multimedia is some combination of text, graphics,
  animation, audio, or video

14
Connecting to the Web

• Users access Web sites through the public
  switched telephone network (PSTN)
• Worldwide telephone system that handles
  voice-oriented phone calls
• Integral part of computer communications
• Network mostly uses digital technology

15
Connecting to the Web
16
Dial-Up Lines

• A dial-up line is a temporary connection that
  uses one or more analog phone lines
• Requires a modem on each end of the connection
• Communication ends when either modem hangs up

17
Dial-Up Lines

• Advantages
• Costs no more than regular phone call
• Computers at any two locations can establish a
  connection using a modem and telephone network
• Disadvantages
• Cannot control quality of connection
• Slow transfer rates

18
Dedicated Lines

• A dedicated line is a connection that always is
  established between two communications devices
• Can be analog or digital
• Quality, consistency, and speed of the connection
  is better than a dial-up line
• Businesses often use dedicated lines

19
Dedicated Lines

• A transfer rate is the speed at which a line
  carries data and information
• Measured in bits per second (bps)
• Kbps
• Mbps
• Gbps

20
Dedicated Lines

• Four popular types of digital dedicated lines
• ISDN lines
• Digital Subscriber Lines
• Cable Lines
• T-carrier Lines

21
ISDN Lines

• Integrated Services Digital Network
• ISDN allows a single telephone line to carry
  three or more signals (multiplexing)
• Faster than dial-up

22
DSL

• Digital Subscriber Line
• Transmits at fast speeds on existing standard
  copper telephone wiring
• Some installations can also provide a dial tone
• Asymmetric Digital Subscriber Line (ADSL)
• Faster to receive data than to send data
• Ideal for Internet users

23
Cable Television Lines

• Allows users to connect to the Internet through
  their cable line
• Rapid transfer rates using a cable modem
  connected to a CATV line

24
T-carrier Lines

• Any of several types of digital lines that carry
  multiple signals over a single communications
  line
• Extremely fast data transfer rates
• T1 Line
• Most popular T-carrier line
• T3 Line
• Equivalent to 28 T1 lines
• Internet backbone uses T3 lines

25
Service Providers

• Internet Service Provider (ISP)
• Has permanent Internet connection
• Provides temporary connections free or for a fee
• Point of Presence
• Regional ISP
• National ISP
• ATT, Earthlink, WorldCom

26
Service Providers

• Online Service Provider (OSP)
• Supplies Internet access and members-only
  features
• News, weather, financial data, games, travel
  guides
• America Online and The Microsoft Network
• Fees are slightly higher for an OSP than ISP

27
Service Providers

• Wireless Service Provider (WSP)
• Company that provides wireless Internet access to
  users with wireless modems or Web-enabled
  handheld computers or devices
• GoAmerica Communications, OmniSky, SprintPCS

28
Service Providers
29
Web Browsers

• A Web browser is a specific software program
  required to display Web pages

30
Web Browsers

• Access Web pages by entering its Uniform Resource
  Locator (URL) into the Web browsers address bar
• URL is comprised of the protocol, followed by the
  domain name
• Hypertext Transfer Protocol
• Domain name can be an IP address or a text
  version of this address

31
Web Browsers
32
Alternative Web Page Viewing Devices

• WebTV
• Incorporates Internet access into a television
  set
• Computer not required
• Owners can send email, shop online, surf the
  Internet, and chat with other viewers

33
Alternative Web Page Viewing Devices

• Handheld computers
• Wireless, portable computers
• Fits in the users hand
• Often use pen input
• Personal Digital Assistant (PDA)

34
Search Engines

• Software programs that find Web sites and Web
  pages
• Enter a keyword into a search engines text box
  to locate a Web page about a particular topic
• Directories classify Web pages into various
  categories

35
Search Engines

• Search services create their own Web site
  databases in different ways
• Spiders or robots
• Meta tags
• Special tags added to Web pages containing
  information on content

36
Portals

• Web sites that offer more than just search
  services
• E-mail, chat rooms, news and sports, etc.
• Excite, Lycos, AltaVista, and Yahoo!

37
Impact of the Internet and the Web

• Communication
• Education
• Entertainment
• Business

38
Communication

• Email
• Transfers messages and files
• Message can be communicated positively or
  negatively
• Web sites
• Delivers messages successfully and persuasively
• Site design requires much planning
• Trustworthiness, currency, and value

39
Education

• Formal and informal teaching and learning
• Enhances traditional teaching methods
• Instructors often publish syllabi, grades, and
  helpful information for research

40
Entertainment

• Entertainment web sites include music, videos,
  sports, games, and more
• It is important to identify what would appeal to
  your audience when developing an entertainment
  element

41
Business

• Electronic commerce (e-commerce) is the practice
  of conducting business activities online, such as
  product sales
• During Web design, always use features that would
  make the product or service desirable or necessary

42
Types of Web Sites

• Personal
• Organizational / Topical
• Commercial

43
Personal

• Limited developmental resources
• Uses
• Advertise employment credentials
• Meet new friends
• Share common interests
• Do not post information that can be misused

44
Organizational / Topical

• Organization Web sites contain information on
  particular organizations
• Topical Web sites contain information on the
  developers interests and hobbies
• Not all information is accurate

45
Commercial

• Used to promote and sell a product for a business
  via the Internet
• More complex commercial Web sites generally
  produce greater revenue
• Obtain product and service information from
  companys marketing department

46
Web Design Research

• Three major areas of research before developing a
  Web site
• How to develop a Web site that stands out
• How to identify your audience
• Which new Web technologies should you incorporate

47
Web Design Research

• Develop a Web Site That Stands Out
• Explore other Web sites and identify those that
  impress you
• Describe design elements that contributed to that
  positive impression
• Identify the means by which information was
  presented to you
• Describe what made the information easy to find
• List the reasons you would want to return

48
Web Design Research

• Identify Your Audience
• Are the visitors to your Web site members of your
  audience
• How did they come to your Web site
• Did they find what they were looking for
• Was there anything they did not like about your
  Web site
• Will they visit your Web site again

49
Web Design Research

• Incorporate New Web Technologies
• What specifically can this technology do to
  further the purpose of my Web site
• Will it appeal to my audience
• What will it cost to put into action
• How soon will I see a return on investing in this
  new technology
• What impact will adding this technology have on
  security and other Web site elements

50
Tools for Creating Web Pages

• Hypertext Markup Language (HTML)
• Scripts, Applets, Servlets, and ActiveX Controls
• JavaScript, VBScript, and Perl

51
Hypertext Markup Language

• Formatting language used to create Web pages
• Defines a Web page through tags or markups
• World Wide Web Consortium (W3C) sets standards
  for HTML and HTTP

52
Hypertext Markup Language
53
Scripts, Applets, Servlets, and ActiveX Controls

• Short programs that your visitors browsers run
• Browsers must support this technology
• Scripts, Applets, and Servlets exchange data
  between a computer and Web server utilizing the
  common gateway interface (CGI).

54
Scripts, Applets, Servlets, and ActiveX Controls

• Common Gateway Interface
• Defines how information is transferred
• Web Server communicates with database
• CGI Program manages data exchange

55
JavaScript, VBScript, and Perl

• Popular scripting languages utilized to write CGI
  programs or scripts
• With JavaScript and VBScript, you can design
  dynamic, highly interactive Web sites
• VBScript isnt compatible with Netscape
• Practical Extraction and Reporting Language
  (PERL) is frequently utilized for creating CGI
  programs or scripts

56
JavaScript, VBScript, and Perl
57
Extensible Markup Language (XML)

• Uses pre-defined or self-defined tags
• Defines content related to the information being
  described
• Facilitates the consistent sharing of information

58
Wireless Markup Language (WML)

• Subset of XML
• Used to design Web pages specifically for
  microbrowsers
• Wireless Application Protocol (WAP)

59
Web Authoring Packages

• Packages that automatically generate HTML code
• There are packages available for every level of
  expertise
• Microsoft FrontPage
• Adobe Go Live
• Macromedia Dreamweaver
• Macromedia Flash
• Microsoft Office Applications
• File Save as Web Page

60
Web Authoring Packages
61
Web Design Roles

• Web design can be done independently or with a
  partner or group
• Writer / Editor
• Multimedia Developer
• Artist / Graphic Designer
• Web Page Designer
• Web Programmer
• Webmaster

62
Chapter Review

• Define the Internet and the World Wide Web
• Describe how data moves from one computer to
  another over the Internet
• Differentiate between a Web page and a Web site
• Describe a home page and a splash page
• Locate and access information on the World Wide
  Web

63
Chapter Review

• Discuss the public switched telephone network and
  its effect on Web design
• Describe an Internet service provider
• Identify Web design browser-related issues
• Describe the different Web page viewing devices
  available
• Identify the different types of Web sites

64
Chapter Review

• Discuss the impact of the Internet and Web
• Differentiate among the different types of Web
  sites
• Discuss methods for doing Web design research
• Describe the various tools for creating Web pages
  and Web sites
• Identify Web design roles

65
Chapter 1 Complete