Week 3 Notes

Week 3 Notes here!
Here is link to Tuesday's lecture slides: https://ics3.zulipchat.com/user_uploads/42198/3a60G8ban8iD94UW9DKb37XW/ICS-3-Week-3-Tuesday-Public.pdf

Here is the link to Thursday's lecture slides: https://ics3.zulipchat.com/user_uploads/42198/zqRA2cgxK6qOFoDBn_EMRP70/ICS-3-Week-3-Thursday-Public.pdf

News of the Week: Etsy Strike
On February 24, 2021, Etsy--an American e-commerce company where retailers sell handsome, vintage, or craft items--CEO Josh Silverman announced that the company planned to increase transaction fees and other changes for Etsy sellers. Increasing transaction fees means lowering the price of sellers' products. In response, more than ten thousand Etsy sellers close down their shops to join the protest Etsy strike against the company's announcement from April 11 to 18 to satisfy their conditional demands. This organization of protesters has created the website, https://etsystrike.org/.
 * Better treatment for sellers

Class Discussion

 * internet is many different type of service
 * The internet is multiple services and is ~15 years older
 * Www is only web page based service
 * Internet is going to browser and then going to web page
 * Is that the same?
 * Few say this
 * Internet is service vs. Www is more like a domain
 * WWW is a software application that can be run over network-connected computers

Lecture

 * What’s the difference
 * The web is essentially a software application or program level tool
 * Computers connected and communicating is the Internet
 * Web software creates web server
 * Akin to a game or productivity server on a computer



Structure of the Web

 * Web server serves content using a format called HTML (Hypertext Markup Language)
 * Gives information based on what's requested
 * HTTP: Hypertext Transfer Protocol
 * HTML is requested by a computer, transmitted using HTTP, and we get HTML pages to look at
 * Url: uniform resource locator
 * a URL functions as an address to tell a browser which server to connect to
 * The World Wide Web was created by Tim Berners-Lee
 * Tim was Featured in London Olympics Ceremony, as he is very popular there for the work he's done

Tim Berners Lee

 * Created the first web page ever made
 * His web page initially went live in 1990
 * Physicist working at Cern
 * Written by HTML
 * Web pages were simple text documents connected by hyperlinks
 * Prior to webpages, sharing information was difficult
 * Different computers had different programs
 * Had to log into specific computers to get information
 * Lee's webpage was designed to remove these barriers
 * "I found it frustrating that in those days, there was different information on different computers, but you had to log on to different computers to get at it. Also, sometimes you had to learn a different program on each computer. So finding out how things worked was really difficult. Often it was just easier to go and ask people when they were having coffee.” - Tim Berners-Lee
 * Recognized that there was an opportunity to make everything easier. He wanted to make a space where everyone could collaborate together.

The Modern Browser

 * New capabilities to HTML
 * Was able to create a WEB of PAGES that connect to each other
 * New tools
 * Mosaic was considered the first real web browser
 * Introduced images and forums
 * Mosaic could transmit data back to a web server



The Uniform Resource Locator (URL)

 * HTTPS
 * S for secure
 * HTML
 * URLs are composed of protocols, hosts, and resources
 * Protocols explain how to handle the information (i.e. HTTPS)
 * Hosts explain who has the information (the server you want to connect to)
 * The resource specifies what information you want (specific section of the website)
 * How to go from IP address to URL

The Domain Name System (DNS)

 * A system for assigning human readable names to machine readable data
 * Bridges the gap between the user and the interface
 * Functions as a sort of "phone book" for the internet by connecting a name to a number

Hypertext Transfer Protocol (HTTP)

 * An application layer protocol (similar to NNTP or SMTP)
 * Operates using a request and response paradigm for message exchange
 * It is "stateless" - HTTP does not retain information about the state of a message exchange
 * The most important number is "200 OK", which means that you have successfully requested a page.

Hypertext Markup Language (HTML)

 * HTML is a format that encodes text in a language that communicates intent.



Timeline to the Modern Web

 * 1994 - Netscape Web Browser Released by creators of Mosaic; Mosaic, Prodigy & AOL lose relevance due to switching to Netscape, CSS and cookies are created
 * 1995 - JavaScript released; enabled dynamic behavior for static websites
 * 1995 - Internet Explorer Released by Microsoft to compete w/ Netscape, included JScript (partial clone of JavaScript)
 * 1996 - CSS support began to be implemented in browsers, IE increased in popularity
 * 2000 - Microsoft Wins, controlling 95% of the web browser market share thanks to IE, the government even considered "raking it up" due to the domination
 * 2005 - AJAX; ability to communicate w/ a web server w/o having to reload a web page

[Cookies]

 * A small file placed on local computer by request of visited web page
 * EVERYWHERE in our life
 * Add statefulness to web pages by storing data on user computer
 * Prior to cookies, there was no way to retain information from webpages that you visited
 * Facilitate retrieving information from the database

Web Framework

 * Various groups developed "Frameworks" in order to manage the complexity
 * Framework could help reduce repetitive tasks and hide complexity
 * JQuery was the first widely popular framework

AJAX and the Modern Web

 * Prior to AJAX (Asynchronous JavaScript and XML), a web page was required to refresh or reload a page to update its state
 * Automates the exchange of information between the server and the webpage (the user does not have to do anything)
 * Using AJAX, requests could be made "behind the curtain" so that a user did not have to wait or even notice a page reload
 * AJAX offered: endless scroll; real-time communication; live updates; and presence (knowing whether someone is currently active)
 * AJAX demonstrated the utility of asynchronous communication between the web browser and web server
 * Led to further innovations like web sockets
 * Today, web sockets are behind most forms of real-time collaboration (i.e. Google Docs)
 * Through web sockets, information can be freely moved between user browsers and a server

Data Storage

 * Example of modern structure for data exchange and storage
 * A Data Store or Database is a software application that supports efficient stateful retention and retrieval of information
 * Modern web browsers also support data storage, typically in the form of key/value pairs

Guidelines and Evaluation Tools

 * AXE: https://www.deque.com/axe/
 * Web Accessibility Evaluation Tools List: https://www.w3.org/WAI/ER/tools/
 * WCAG (Web Content Accessibility Guidelines)
 * WAVE: https://wave.webaim.org/

Legal Requirements

 * Some laws do exist to support accessibility on the Internet
 * Title II and Title III of the Americans with Disabilities Act (ADA) and Section 508 of the Rehabilitation Act of 1973
 * Sect. 508 amends Rehabilitation Act to include electronic info and services
 * Limited to federal agencies, but serves as an example for commercial and other non-governmental services