Web Design,3rd Edition

1The Environmentand the Tools1The Environmentand the Tools

Chapter Objectives

Describe the Internet and the World Wide Web Discuss ways to access the Internet and the Web Categorize types of Web sites Identify Web design tools Explain Web design roles

Chapter 1: The Environment and the Tools 2

The Internet and the World Wide Web The Internet is a worldwide public network that

connects millions of private networks A network is composed of several computers,

printers, and data file storage devices connected together to share computing resources and data

Internet 2 is a major cooperative initiative among academia, industry, and the government to increase the Internet’s possibilities and correct some of its challenges

Chapter 1: The Environment and the Tools 3

The Internet and the World Wide Web

Chapter 1: The Environment and the Tools 4

The Internet and the World Wide Web

The World Wide Web (WWW or Web) consists of Internet-connected computers called Web servers on which Web pages are stored

A Web site is a group of related Web pages– Starts with a home page– Pages are linked together with a hyperlink, or link

Surfing the Web

Chapter 1: The Environment and the Tools 5

Influence on Society

Communication

Education

Entertainment and News

Business

Chapter 1: The Environment and the Tools 6

Communication

Chapter 1: The Environment and the Tools 7

Bookmarking / favorites Electronic mail (e-mail) Internet Relay Chat (IRC) Web-based chat IM chat Collaborative workspaces Virtual meeting spaces Weblog (blog)

– Video sharing (video blogging)

Communication

Social networkingSocial bookmarkingMassively multiplayer online games (MMOGs)3D virtual worlds

Chapter 1: The Environment and the Tools 8

Education

Formal and informal teaching and learning

Enhances traditional teaching methods– Instructors often publish

syllabi, grades, Web page links for research, and more for their students

Chapter 1: The Environment and the Tools 9

Entertainment

Popular entertainment sites include music, videos, sports, games, and more

News Web sites allow you to read news stories, and some even allow you to watch video clips – Some provide interactive

elements

Chapter 1: The Environment and the Tools 10

Business

Electronic commerce (e-commerce) is the practice of conducting business transactions online, such as shopping– Business-to-consumer (B2C)

• Banking, purchases

– Business-to-business (B2B)• Majority of e-commerce

– Consumer-to-consumer (C2C)• eBay, craigslist

Chapter 1: The Environment and the Tools 11

Ways to Access the Internet and the Web

One way to access Web sites is through the public switched telephone network (PSTN)– Worldwide telephone system that handles voice-

oriented telephone calls– Integral part of computer communications– Data, instructions, and information can be sent

using dial-up lines or dedicated lines

Chapter 1: The Environment and the Tools 12

Ways to Access the Internet and the Web

Chapter 1: The Environment and the Tools 13

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 Two versions of Internet access using dial-up lines

– Regular dial-up• Slowest and unusual for many of today’s online activities

– High-speed dial-up• Uses acceleration servers

Chapter 1: The Environment and the Tools 14

Digital Dedicated Lines

A dedicated line is a connection that always is established between two communications devices

Can be analog or digitalQuality, consistency, and speed of the

connection are better than a dial-up lineBusinesses often use dedicated lines

Chapter 1: The Environment and the Tools 15

Dedicated Lines

Three popular types of digital dedicated lines– Integrated Services Digital Network (ISDN)– Digital Subscriber Lines (DSL)

• Asymmetric digital subscriber line (ADSL)

– T-carrier Lines• T-1 line• Fractional T-1 line• T-3 line

Chapter 1: The Environment and the Tools 16

ISDN Lines

Integrated Services Digital NetworkISDN allows a single telephone line to carry

three or more signals (multiplexing)Faster than dial-up

Chapter 1: The Environment and the Tools 17

DSL

Digital Subscriber Line– Transmits at fast speeds on existing standard

copper telephone wiring– Some installations can provide a dial tone

Asymmetric Digital Subscriber Line (ADSL)– Faster to receive data than to send data– Ideal for Internet users

Chapter 1: The Environment and the Tools 18

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– Fractional T1

T3 Line– Equivalent to 28 T1 lines

Chapter 1: The Environment and the Tools 19

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

Chapter 1: The Environment and the Tools 20

Fixed and Mobile Wireless Access

Internet connectivity for users who do not have access to services such as DSL or cable

Satellite technology used instead of telephone lines

Radio signals provide high-speed connection– Wireless fidelity (Wi-Fi)

Chapter 1: The Environment and the Tools 21

Internet Service Providers

Internet Service Provider (ISP)– Has permanent Internet connection– Provides temporary connections– Regional ISP– National ISP

• Earthlink

Chapter 1: The Environment and the Tools 22

Web Browsers

A Web browser is a specific software program that requests, downloads, and displays Web pages stored on a Web server

Chapter 1: The Environment and the Tools 23

Web Browsers

Access a Web page by entering its Uniform Resource Locator (URL) into the Web browser’s Address bar

URL is comprised of the protocol, domain name and top-level domain designation– Hypertext Transfer Protocol (HTTP)– Domain name can be an IP address or a text

version of this address

Chapter 1: The Environment and the Tools 24

Web Browsers

Chapter 1: The Environment and the Tools 25

Alternative Web Page Viewing Devices Smartphones

– Can be used as a regular cell phone and offers other features

Personal digital assistant (PDA)– Popular type of handheld

computer used to manage personal information and access the Internet

Chapter 1: The Environment and the Tools 26

Types of Web Sites

Personal Organizational / Topical

Commercial

Chapter 1: The Environment and the Tools 27

Personal

Limited developmental resources Uses

– Advertise employment credentials– Meet new friends– Share common interests

Do not post information that can be misused

Chapter 1: The Environment and the Tools 28

Organizational / Topical

Organization Web sites contain information on particular organizations

Topical Web sites contain information on the developer’s interests and hobbies

Not all information is accurate

Chapter 1: The Environment and the Tools 29

Commercial

Used to promote and sell a product or service

More complex commercial Web sites generally produce greater revenue

Chapter 1: The Environment and the Tools 30

Search Tools Web-based search tools

– Search engines-locates a Web page using keywords (Google)• Keywords or phrase

– Metasearch engines-uses multiple search engines’ indexes (Dogpile)– Search directories-build Web page index using human interaction (Open

Directory Project) Search engine might use a variety of methods to create its index (Web site

database)– Spiders or robots—software that browses the Web to search for new

pages– Meta tags-special codes on Web pages containing keywords

Search engine optimization (SEO)-increase potential that page appears high on results list

Subject directories

Chapter 1: The Environment and the Tools 31

Search Tools

Chapter 1: The Environment and the Tools 32

Portals

A portal is a Web site that offers a starting point for accessing information– General consumer portal-AOL, MSN– Personal portal-My Yahoo!– Vertical portal-specific area of interest-USA.gov– Corporate portal-entry point

For company’s employees

Chapter 1: The Environment and the Tools 33

Web Design Tools New “Hot” Technologies 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? 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?

Chapter 1: The Environment and the Tools 34

Markup Languages

Hypertext Markup Language (HTML)Extensible Markup Language (XML), Extensible HTML (XHTML)Wireless Markup Language (WML)

Chapter 1: The Environment and the Tools 35

Hypertext Markup Language

Markup language used to create Web pagesDefines a Web page through tags or markupsWorld Wide Web Consortium (W3C) sets

standards for HTML

Chapter 1: The Environment and the Tools 36

Extensible Markup Language (XML), Extensible HTML (XHTML), and Wireless Markup Language (WML)

XML uses markups to define the content of a Web page

XHTML is a markup language that is a combination of the features of XML and HTML

WML is a subset of XML– Used to design Web pages for microbrowsers

Chapter 1: The Environment and the Tools 37

Cascading Style Sheets

Standardize the presentation of the content by applying styles to such elements– Type– Margins– Positioning– Colors

Chapter 1: The Environment and the Tools 38

Scripting Languages

Used to make Web pages dynamic and interactive Short programs that run on the server or the browser Browsers must support this technology Scripting languages

– JavaScript– Active Server Pages (ASP)– PHP: Hypertext Preprocessor (PHP)– MySql

Active content Malware

Chapter 1: The Environment and the Tools 39

Text and HTML Editors

A text editor is software used to create plain (ASCII) text files

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®

– BBEdit®

– NoteTab®

Chapter 1: The Environment and the Tools 40

WYSIWYG

What you see is what you get Packages that automatically generate HTML code There are packages available for every level of

expertise– Adobe GoLive®

– Adobe Dreamweaver®

– Microsoft Expression Web®

Chapter 1: The Environment and the Tools 41

Web Templates and Other Design Technologies A Web template is a predesigned model that can be

customized for fast Web site or Web page creation or updating

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

A content management system (CMS) facilitates the management of Web content development– Content repository

Chapter 1: The Environment and the Tools 42

Web Design Roles

Web design can be done independently or with a partner or group

Creative Role– Content writer / editor-create, revise text– Web page designer-create Webpage– Web artist / graphic designer-create original art,

photographs– Multimedia producer-design and produce

animation, digital video, other media

Chapter 1: The Environment and the Tools 43

Web Design Roles

Hi-Tech Role-Web site’s functionality and security– Web programmer-skilled in scripting languages, handle

form data– Database developer-plan, create, maintain complex

databases– Network / security administrator-protect network from

internal and external threats

Oversight Role-managerial and admin. issues– Content managers-determine overall goal, review content– Webmaster-can assume all roles in small business setting,

broad range of skills

Chapter 1: The Environment and the Tools 44

Chapter Summary

Describe the Internet and the World Wide Web Discuss ways to access the Internet and the Web Categorize types of Web sites Identify Web design tools Explain Web design roles

Chapter 1: The Environment and the Tools 45

Web Design,3rd Edition

1The Environmentand the Tools1The Environmentand the Tools