web technology and terminology

Web Technology & Terminology

Bruce Clary, McPherson College, McPherson, Kansas

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Internet

• International network of computers used to share data.

• Includes e-mail, bulletin boards, IM, newsgroups, databases, streaming audio and video–almost all of which can now be delivered through the WWW.

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

World Wide Web

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

World Wide Web

• The graphical interface that uses the Internet to share information.

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

World Wide Web

• The graphical interface that uses the Internet to share information.

• The WWW cannot exist without the Internet. The Internet can and does exist without the Web.

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

ProtocolsSets of rules that allow data to be shared via the Internet

• HTTP: HyperText Transfer Protocol• FTP: File Transfer Protocol

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

HTTPHyperText Transfer Protocol

The protocol, or rules, that move Web pages across the Internet and that link pages together

• One way transfer, server to browser• Stateless (which means no copy of the transfer is

saved on the server side)

FTPFile Transfer Protocol

The rules that move digital files across the Internet• Two way• Copies of transfers on both server and client sides

IPInternet Protocol

IP addresses are unique numbers that identify specific computers connected to the Internet.

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

• The rules that identify specific files available on the Internet

• The address beginning with the transfer protocol http:// in a browser address bar

• See pg. 22 in Robbins for parts of a URL address

URLUniform Resource Locator

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

http://bulldog.mcpherson.edu/~shordeo/ex_4-5.html

URLUniform Resource Locator

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Protocol

http://bulldog.mcpherson.edu/~shordeo/ex_4-5.html

URLUniform Resource Locator

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Protocol Host

http://bulldog.mcpherson.edu/~shordeo/ex_4-5.html

URLUniform Resource Locator

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Protocol DomainHost

http://bulldog.mcpherson.edu/~shordeo/ex_4-5.html

URLUniform Resource Locator

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Protocol

Site Name

DomainHost

http://bulldog.mcpherson.edu/~shordeo/ex_4-5.html

URLUniform Resource Locator

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Protocol

Site Name

DirectoryDomainHost

http://bulldog.mcpherson.edu/~shordeo/ex_4-5.html

URLUniform Resource Locator

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Protocol

Site Name

FileDirectoryDomainHost

http://bulldog.mcpherson.edu/~shordeo/ex_4-5.html

URLUniform Resource Locator

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Protocol

PathSite Name

FileDirectoryDomainHost

http://bulldog.mcpherson.edu/~shordeo/ex_4-5.html

URLUniform Resource Locator

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

DNSDomain Name System

Connecting to computers and Web sites through the Internet would be far more laborious and error-prone if it had to be done with IP addresses—e.g., 10.0.1.197). The DNS translates domain names (e.g., www.mcpherson.edu) that have meaning into an IP address.

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

• See pg. 31 in Robbins for illustration of HTTP requests and responses

How it all works

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Why are browsers different?

• Independently developed• Document Object Model (DOM) support varies• Each uses independent JavaScript engines• Multiple rendering engines drive layout &

appearance

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Multiple rendering engines

Trident Blink Gecko Web-Kit

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Browser consistency driven by Web Standards

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Browser consistency driven by Web Standards

• In 1990s, market share drives browser development

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Browser consistency driven by Web Standards

• In 1990s, market share drives browser development• Development of open-source browsers such as

Firefox and Opera in 2000s finally get attention of commercial browser developers

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Other ubiquitous Web technologies

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Other ubiquitous Web technologies

• JavaScript: A client-side scripting language (which means end-users can turn it off, disabling any parts of your Web page dependent upon scripting)

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Other ubiquitous Web technologies

• JavaScript: A client-side scripting language (which means end-users can turn it off, disabling any parts of your Web page dependent upon scripting)

• jQuery: A JavaScript library that can be called with just a few lines of code in your HTML pages

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Other ubiquitous Web technologies

• JavaScript: A client-side scripting language (which means end-users can turn it off, disabling any parts of your Web page dependent upon scripting)

• jQuery: A JavaScript library that can be called with just a few lines of code in your HTML pages

• PHP: Hypertext Preprocessor (originally, Personal Home Page

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Other ubiquitous Web technologies

• JavaScript: A client-side scripting language (which means end-users can turn it off, disabling any parts of your Web page dependent upon scripting)

• jQuery: A JavaScript library that can be called with just a few lines of code in your HTML pages

• PHP: Hypertext Preprocessor (originally, Personal Home Page

• CMS: Content Management System (e.g., Wordpress, Bulldog Connect, even Facebook)

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

More essential Web technologies

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

More essential Web technologies

• MySQL: Structured Query LanguageThe preceding “My” indicates that MySQL is Open Source and free for anyone to use

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

More essential Web technologies

• MySQL: Structured Query LanguageThe preceding “My” indicates that MySQL is Open Source and free for anyone to use

• XML: eXtensible Markup Language

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

More essential Web technologies

• MySQL: Structured Query LanguageThe preceding “My” indicates that MySQL is Open Source and free for anyone to use

• XML: eXtensible Markup Language• AJAX: Asynchronous JavaScript and XML

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION