Tutorial 1

CSCI 344: Analyze an Internet Platform

​

Announcements

1. Tutorial 1 – submit to the Moodle by the end of class.
2. HW1 posted – due Monday at midnight (1/23)
3. Next Wednesday – we will begin installing our code editor (VS Code) and building our first web pages. I will post assigned readings before the end of the day today.

Outline

1. What is a web browser and how does it work?
2. Activity 1: Examining Browser ↔ Server Communication
3. What are cookies?
4. Activity 2: what do platforms know about YOU?

Outline

• What is a web browser and how does it work?
• Activity 1: Using the network panel
• What are cookies?
• Activity 2: what do platforms know about YOU?

What is a web browser?

• A program that allows a user to locate, access, and display Web pages.
• What are some examples of browsers?
1. Safari, Firefox, Chrome, Microsoft Edge, and Opera
• In this class, we will be writing programs that browsers can understand.
• Think of your browser as the thing that’s reading and interpreting your code.

What Can a Browser Do?

Browsers have several different jobs...

1. They interact with servers to download / upload resources and data, including:
1. text files (HTML, CSS, and JavaScript files)
2. images
3. data files
4. video & audio files
5. And more!

These resources are stored temporarily in your browser’s cache (folder of files) until they are deleted – either manually or automatically.

Browsers can also create, delete, and modify server resources

6

What Can a Browser Do?

• They interpret instructions (that you will write) and render (i.e. “draw”) text, images, and graphics to the screen.
• They respond to user events via default behaviors or via custom behaviors that are controlled by JavaScript
• Write local data (cookies, local storage, password storage, history to your hard drive)

7

How a browser interprets files

Here are the steps that a browser follows to render an HTML page to the screen:

1. Pulls down the HTML file
2. Reads it, scans it for links to other resources, and then downloads linked / embedded files
3. As it pulls down resources, it redraws the screen with the information. The addition of new image, CSS, and JavaScript files usually triggers a screen redraw

Optional reading: Tali Garsiel and Paul Irish (2011). How Browsers Work: Behind the scenes of modern web browsers .

8

Using the Browser Inspector

Like with all programming, you will encounter errors as you develop your websites. The Browser Inspector is the very best resource that you have to help you resolve issues. It can help you...

• [TODAY] Examining the files that your browser retrieves
• [TODAY] Examining requests and responses (communications)
• Inspect and change HTML elements and CSS properties
• Help you identify JavaScript errors

9

Outline

• What is a web browser and how does it work?
• Activity 1: Examining Browser ↔ Server Communication
• What are cookies?
• Activity 2: what do platforms know about YOU?

Activity 1

Analyzing Browser ↔ Server Communication

11

Outline

• What is a web browser and how does it work?
• Activity 1: Examining Browser ↔ Server Communication
• What are cookies?
• Activity 2: what do platforms know about YOU?

Cookies

Cookies are small bits of text that a website can store on your local computer.

1. Traditionally, cookies have been used by the site you access (first-party cookies) to preserve some contextual information about your preferences to enhance user experience.
2. Third-party cookies are created by domains other than the one you are visiting directly.
1. Used by data brokers and ad networks to gather behavioral data
2. Live chat popups
3. By Social media buttons embedded in the website

https://clearcode.cc/blog/difference-between-first-party-third-party-cookies/#cookie-types

Third Party Cookies

video from WSJ

14

15

Browser’s Local Storage / Cookies

An effort to move away from third party cookies...

• Safari and Firefox at various stages of banning third-party cookies
• Google was planning to remove a widely used tracking technology from its Chrome web browser – despite complaints from rivals that rely on it to target ads at individuals.

“Google cited positive test results for a technology that analyzes users’ browsing habits on their own devices, without sending sensitive data to central servers, and said it expects to open outside testing of ad buys using the technology in the second quarter.”

• Keeps pushing back the date for sunsetting cookies
• Unclear that new tracking technologies will be any better

https://www.wsj.com/articles/google-progresses-plan-to-remove-third-party-cookies-11611581604

Bottom Line

“The debate over third-party cookies underscores a dilemma when it comes to regulating big tech companies: Protecting user privacy and promoting online competition can sometimes be at odds because one of tech’s most popular business models is targeting advertising at individuals based on their online behavior.”

https://www.wsj.com/articles/google-progresses-plan-to-remove-third-party-cookies-11611581604

Outline

• What is a web browser and how does it work?
• Activity 1: Examining Browser ↔ Server Communication
• What are cookies?
• Activity 2: what do platforms know about YOU?

Activity 2: what do platforms know about YOU?

Now that we know one of the mechanisms through which data are collected, do an activity – to see if we can figure out:

1. What data a platform has collected about you, and
2. How that data is used to assign you into various marketing categories (and whether those categories are accurate).

Before you go…

• Don’t forget to submit the answers to the Activity 2 questions to the Moodle!