0
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Web Technology &
Terminology

Bruce Clary, McPherson College, McPherson, Kan...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Internet
•

International network of computers used to share
data.

•

Inclu...
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 in...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

World Wide Web
•

The graphical interface that uses the Internet to
share in...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Protocols
Sets of rules that allow data to be shared via the
Internet

•
•

...
HTTP
HyperText Transfer Protocol
The protocol, or rules, that move Web pages across
the Internet and that link pages toget...
FTP
File Transfer Protocol
The rules that move digital files across the Internet

•
•

Two way
Copies of transfers on both...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

IP
Internet Protocol
IP addresses are unique numbers that identify
specific ...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

URL
Uniform Resource Locator
•

The rules that identify specific files avail...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

URL
Uniform Resource Locator

http://bulldog.mcpherson.edu/~shordeo/ex_4-5.h...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

URL
Uniform Resource Locator
Protocol

http://bulldog.mcpherson.edu/~shordeo...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

URL
Uniform Resource Locator
Protocol

Host

http://bulldog.mcpherson.edu/~s...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

URL
Uniform Resource Locator
Protocol

Host

Domain

http://bulldog.mcpherso...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

URL
Uniform Resource Locator
Protocol

Host

Domain

http://bulldog.mcpherso...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

URL
Uniform Resource Locator
Protocol

Host

Domain

Directory

http://bulld...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

URL
Uniform Resource Locator
Protocol

Host

Domain

Directory

File

http:/...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

URL
Uniform Resource Locator
Protocol

Host

Domain

Directory

File

http:/...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

DNS
Domain Name System
Connecting to computers and Web sites through
the Int...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

How it all works
•

See pg. 31 in Robbins
for illustration of HTTP
requests ...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Why are browsers different?
•
•
•
•

Independently developed
Document Object...
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...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Browser consistency driven by Web
Standards
•
•

In 1990s, market share driv...
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 lan...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Other ubiquitous Web technologies
•

JavaScript: A client-side scripting lan...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Other ubiquitous Web technologies
•

JavaScript: A client-side scripting lan...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Other ubiquitous Web technologies
•

JavaScript: A client-side scripting lan...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

More essential Web technologies
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

More essential Web technologies
•

MySQL: Structured Query Language
The prec...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

More essential Web technologies
•

MySQL: Structured Query Language
The prec...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

More essential Web technologies
•

MySQL: Structured Query Language
The prec...
Web Technology and Terminology
Upcoming SlideShare
Loading in...5
×

Web Technology and Terminology

978

Published on

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
978
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Web Technology and Terminology"

  1. 1. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Web Technology & Terminology Bruce Clary, McPherson College, McPherson, Kansas
  2. 2. 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.
  3. 3. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION World Wide Web
  4. 4. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION World Wide Web • The graphical interface that uses the Internet to share information.
  5. 5. 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.
  6. 6. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Protocols Sets of rules that allow data to be shared via the Internet • • HTTP: HyperText Transfer Protocol FTP: File Transfer Protocol
  7. 7. HTTP HyperText 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)
  8. 8. FTP File Transfer Protocol The rules that move digital files across the Internet • • Two way Copies of transfers on both server and client sides
  9. 9. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION IP Internet Protocol IP addresses are unique numbers that identify specific computers connected to the Internet.
  10. 10. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION URL Uniform Resource Locator • 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
  11. 11. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION URL Uniform Resource Locator http://bulldog.mcpherson.edu/~shordeo/ex_4-5.html
  12. 12. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION URL Uniform Resource Locator Protocol http://bulldog.mcpherson.edu/~shordeo/ex_4-5.html
  13. 13. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION URL Uniform Resource Locator Protocol Host http://bulldog.mcpherson.edu/~shordeo/ex_4-5.html
  14. 14. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION URL Uniform Resource Locator Protocol Host Domain http://bulldog.mcpherson.edu/~shordeo/ex_4-5.html
  15. 15. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION URL Uniform Resource Locator Protocol Host Domain http://bulldog.mcpherson.edu/~shordeo/ex_4-5.html Site Name
  16. 16. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION URL Uniform Resource Locator Protocol Host Domain Directory http://bulldog.mcpherson.edu/~shordeo/ex_4-5.html Site Name
  17. 17. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION URL Uniform Resource Locator Protocol Host Domain Directory File http://bulldog.mcpherson.edu/~shordeo/ex_4-5.html Site Name
  18. 18. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION URL Uniform Resource Locator Protocol Host Domain Directory File http://bulldog.mcpherson.edu/~shordeo/ex_4-5.html Site Name Path
  19. 19. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION DNS Domain Name System Connecting to computers and Web sites through the Internet would be far more laborious and errorprone 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.
  20. 20. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION How it all works • See pg. 31 in Robbins for illustration of HTTP requests and responses
  21. 21. 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
  22. 22. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Multiple rendering engines Trident Blink Gecko Web-Kit
  23. 23. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Browser consistency driven by Web Standards
  24. 24. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Browser consistency driven by Web Standards • In 1990s, market share drives browser development
  25. 25. 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
  26. 26. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Other ubiquitous Web technologies
  27. 27. 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)
  28. 28. 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
  29. 29. 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
  30. 30. 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)
  31. 31. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION More essential Web technologies
  32. 32. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION More essential Web technologies • MySQL: Structured Query Language The preceding “My” indicates that MySQL is Open Source and free for anyone to use
  33. 33. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION More essential Web technologies • MySQL: Structured Query Language The preceding “My” indicates that MySQL is Open Source and free for anyone to use • XML: eXtensible Markup Language
  34. 34. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION More essential Web technologies • MySQL: Structured Query Language The preceding “My” indicates that MySQL is Open Source and free for anyone to use • • XML: eXtensible Markup Language AJAX: Asynchronous JavaScript and XML
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×