1 of 25

Tutorial 1

CSCI 185: Analyze an Internet Platform

2 of 25

Announcements

  1. Tutorial 1 – submit to the Moodle by the end of class (you can have ‘til Sunday night but you shouldn’t need it).
  2. HW1 posted – due Wednesday at midnight (9/06)
  3. Next Monday – we will begin installing our code editor (VS Code) and building our first web pages. The readings have been posted.

3 of 25

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?

4 of 25

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?

5 of 25

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.

Browser

Browser

Browser

Web Server

6 of 25

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

7 of 25

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

8 of 25

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

9 of 25

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

10 of 25

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?

11 of 25

Activity 1

Analyzing Browser Server Communication

11

12 of 25

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?

13 of 25

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

14 of 25

Third Party Cookies

14

15 of 25

15

Browser’s Local Storage / Cookies

Information Services Website

Google

- Google-assigned user id

- Other metadata

Online shopping Website

Amazon

- Amazon-assigned user id

- Other metadata

X

- Third Party user id

- Third Party user id

Banner (Ad)

Tracking Company

Third Party Cookies

Banner (Ad)

16 of 25

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

17 of 25

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.”

18 of 25

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?

19 of 25

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).

20 of 25

Mission & Revenue of SM Companies, 2019

20

Mission Statement

Ads as % �of revenue

Facebook

“To give people the power to build community and bring the world closer together”

~98.5% [1]

Google

“To organize the world's information and make it universally accessible and useful”

~83.3% [2]

Twitter

“To give everyone the power to create and share ideas and information instantly without barriers”

~85.0% [3]

21 of 25

Why do we care about ads?!

22 of 25

How does the ad-based revenue model work?

  1. Platforms track and aggregate data about people into classes at scale
  2. Good at providing content producers & advertisers with fine-grained markets — and enabling them to spend as little or as much as they want
  3. Good at instrumenting engagement (but we don’t know how they do it)

22

23 of 25

How do ads shape our information & communication landscape?

  1. Platform gets paid every time a user “takes an action” in response to an ad
  2. So, platforms must match an ad with target users alongside “relevant” and/or engaging content
  3. We don’t know how they do this, but we do know that:�“Reliance on revenue from targeted advertising incentivises companies to design platforms that are addictive, that manufacture virality, and that maximize the information that the company can collect about its users.” (p. 43, Maréchal & Biddle)

23

24 of 25

Zubuff on the Business Model

“Surveillance-based business models have driven the distortion of our information environment in ways that are bad for us individually and potentially catastrophic for democracy.”

— p. 10, as quoted by Zuboff

24

25 of 25

Before you go…

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