Client, Server, Browser and Internet
The first web page – World Wide Web (WWW), was invented by Tim Berners-Lee in 1989. The original purpose of building this web was to sharing information between scientists in universities and institutions around the world. To achieve this goal, Tim also created HyperText Markup Language (HTML) to provide the structure of a web page and identify links for rendering other web pages so we can jump through different web pages easily; web browser for collecting requests from the client and displaying documents from the server; and HyperText Transfer Protocol (HTTP) for transferring the request and service between the server and the browser through internet. This mode is known for the client-server architecture (see Figure 1) and we still follow this pattern today.
Client and Server: Computers connected to the web through internet are called clients or servers. The tablets, PCs, and smartphones we use every day are all clients. While servers, on the other hand, are computers that store web pages. For example, if I click a hypertext called “For More Information”, a new web page will pop up to show more of what I am searching for. This action from the client side will send a request to the server, and the server will find the site or html file mapped with “For More Information” and send back to the client. The process is much like when you borrow a book from a librarian and the librarian brings you the one you want out of thousands of books. A server can locate anywhere in the world, we can send request to different servers just like we can borrow books from different libraries all around the world.
Browser: Firefox, Safari, IE or Google Chrome, almost all of us have at least one web browser installed on our computers. Browsers are installed on the client computer and all the web browsers function as client, they play an essential role on building connection. Browser can simply be regarded as an interface. It fulfills the client-server architecture so we, as clients, have a place to send requests and servers have a place to show the results. This process is controlled by the browser render engine inside the browser, which could turn the HTML documents it receives into commands for the operating system and the operating system will display the content on the screen.
Internet: Internet is a link that connects all the servers and clients together. If using the same analogy of borrowing books from the library, the Internet is the road from home to the library, while the HTTP could be regarded as traffic regulation.
<!– fail to embed the video here–>
Video: How the internet works. [From: https://www.youtube.com/watch?v=7_LPdttKXPc]
However, the first web browser created by Tim Berners-Lee can’t support any client-side scripting, which means the visual effects of web pages rendered by this browser are simple and monotonous to some extent. But HTML is a markup language could “easily be extended to support passing program code to a web browser”.
var person = “John Doe”;
Figure 3: HTML head of https://glitch.com/~ustaobao. Line 15is the CDN link of AOS, which is used for triggering animation when you scroll down. All the animations in this web page are created by AOS. Line 18 is the CDN link of Shine.js, which is used for making creative font style.
Figure 4: initiate shine.js in JS file.
Figure 5: Part of the HTML tags with AOS.
While shine.js, on the other hand, need more specific description of what I want what to do. So I use getElementById as the previous example (see Figure 4, line 81), to endow the element <h1 id=“tryshine”> with Shine.js function (see Figure 5, line 48) make the sentence looks like this:
A Side Note of Web Design
The interactions that we take for granted today are actually carefully designed. Throughout human history, human interaction with the media has been largely one-sided [KGPDM1976]. From writing on slate or paper in ancient times to watching TV shows today, input and output are usually unilateral. Thus, web designers don’t have many direct patterns to draw from. Instead, all these designs have to borrow from the ways we use sign and symbol systems. When you click a button, the button will change the light and shade slightly just like when you press a button in real world. That’s a visual sign we detected for assuring valid click. Plus symbol for adding items, trash can icon for deleting. These are symbols refer to specific meanings. How to use these signs and symbols to make the appropriate interaction effect is crucial to the performance of the web page.
Aaron. (2009, February 19). How the Internet Works in 5 Minutes. https://www.youtube.com/watch?v=7_LPdttKXPc
Alen Kay and Adele Goldberg, (March 1977). “Personal Dynamic Media” in Computer, vol. 10, no. 3, pp. 31-41, doi: 10.1109/C-M.1977.217672.
Client/Server, the Internet, and WWW. (n.d.). Retrieved December 13, 2020, from http://www.robelle.com/www-paper/paper.html#servers
How the Web works. (n.d.). MDN Web Docs. Retrieved December 13, 2020, from https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works
Martin Irvine, (new) From Cognitive Interfaces to Interaction Designs with Touch Screens
Mustafa Abdelmogoud, (2019a, September 27). How the browser renders HTML & CSS. Medium. https://email@example.com/how-the-browser-renders-html-css-27920d8ccaa6
Peter J. Denning and Craig H. Martell, (2015). Design in Great Principles of Computing. The MIT Press.
Ron White, (2008). How Computer Works, 9th edition. Que Publishing.