Order instructions

How Does the Web Work
End Of Semester Project
The project is to be done in pairs, and it is due by July 11 at 23:59.
Pick a website and a single interaction that the user does in the website that results in network
communications. Draw a diagram or diagrams explaining how this communication works and how it
supports the interaction you chose.
This document contains an appendix explaining how to use the browser network panel to help you.
Choosing your project
• Pick a simple website.
• Pick a simple interaction – clicking a link, running a search, submitting a form, etc.
• It is highly recommended you send your selected website and interaction via email to the
teacher for approval before you start. We’ll let you know if you chose something too complex.
What to Include
The diagrams should contain the key components that take part in the communications, and depict how
information flows between components and which messages of the protocol are used to transmit this
information. Explain what causes each message to be sent, and what the browser does with responses it
gets1
. Make it clear that you understand what took place during the interaction.
• You may add text annotations to the diagrams or as footnotes
• If your chosen interaction results in a lot of messages being sent back and forth, focus on the
main 2-4 exchanges that support the interaction.
• There is no need to go deeper than the HTTP layer. However, extra credit will be given for
correctly identifying network names / addresses, and for correctly referencing IP, TCP and DNS
What to Submit
You need to submit a document that includes the following:
• URL of the original web page
• Description of the interaction itself in 1 sentence that clarifies exactly what you did.
• A screenshot of the web page before the interaction. You may highlight where the interaction is.
• A screenshot of the browser network panel after the interaction (see below)
• Your diagrams + footnotes
You may also include the screenshots as images in a ZIP or RAR file alongside the document, instead of
embedding them in the document itself.
Your submission is limited to 3 pages, excluding the 2 required screenshots.

1 Think of this as if you are telling a story of the communications. Everything that happens has a reason, and a
purpose, and your story should describe this thread of events.
Appendix – Using the Network Panel in the Browser Developer Tools
The network panel shows all the communications the browser is doing for the current web page. This
will help you understand which messages are being sent and their key details. The following explanation
is for Chrome. There are similar panels in Firefox, Microsoft Edge, Internet Explorer 11 and Firefox.
To open the network panel, you need to open Developer Tools by clicking F12 in Windows and CmdOpt-I
on a Mac. Once open, click on the Network tab. There are multiple controls in this panel and it
is recommended that you take a few minutes to familiarize yourselves with it before you start working
To make the most out of the network panel, do the following:
• Browse to you web page, take your “before” screenshot, and open the network panel.
• Check the “Disable Caching”, “Hide Data URLs” and “Preserve log” checkboxes2
.
• Right before your interaction, click “Clear rows” on the top left, to start from a clean panel
• Right after the interaction is done, take your “after” a screenshot
If it’s more convenient, you can move the developer tools to its own window or dock it to the bottom of
the browser (see the 3 vertical dots menu in the panel). A more detailed explanation can be found here:
https://developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading

2 This hides confusing behavior the browser does and makes sure rows aren’t cleared when a new page is loaded