How the Web Works: Lecture 1

This talk was designed for a class (98-135) taught at Carnegie Mellon University in Spring 2010.

Transcript

2. Lecture 1 Introduction & Building Blocks
3. Abhinav
4. Abhinav CS + HCI Sophomore
5. Abhinav CS + HCI Sophomore Dabbled with Online Biz.
6. Abhinav CS + HCI Sophomore Dabbled with Online Biz. Likes AI, ML, Theory
7. Abhinav CS + HCI Sophomore Dabbled with Online Biz. Likes AI, ML, Theory ... and Photography
8. Abhinav CS + HCI Sophomore Dabbled with Online Biz. Likes AI, ML, Theory ... and Photography ... and Star Wars!
9. Abhinav CS + HCI Sophomore Dabbled with Online Biz. Likes AI, ML, Theory ... and Photography ... and Star Wars! ... and Teaching?
10. You 38% 28% 23% 3% 4%4% SCS CIT HSS TSB CFA Others
11. You 70+ Students 38% 28% 23% 3% 4%4% SCS CIT HSS TSB CFA Others
12. You 70+ Students All Colleges except MCS 38% 28% 23% 3% 4%4% SCS CIT HSS TSB CFA Others
13. You 70+ Students All Colleges except MCS How the Web Works? 38% 28% 23% 3% 4%4% SCS CIT HSS TSB CFA Others
14. You 70+ Students All Colleges except MCS How the Web Works? Basic Programming 38% 28% 23% 3% 4%4% SCS CIT HSS TSB CFA Others
15. You 70+ Students All Colleges except MCS How the Web Works? Basic Programming Insanely Smart! 38% 28% 23% 3% 4%4% SCS CIT HSS TSB CFA Others
17. Not In the Class? Waitlist Size: 8 Everyone should get in Didn’t register otherwise? No Problem, email me.
18. Grades Pass / Fail Doesn’t Affect GPA Based on 5 Homeworks Guided Tutorials Optional Mini-Projects Passing is Easy!
20. Communication Website cmuwebworks.com Twitter twitter.com/cmuwebworks Facebook facebook.com/cmuwebworks Email abhinav@cmuwebworks.com Talk That’ll make me really happy =)
21. Communication Website cmuwebworks.com Twitter twitter.com/cmuwebworks Facebook facebook.com/cmuwebworks Email abhinav@cmuwebworks.com Talk That’ll make me really happy =)
22. Course Structure Web Development 6 Social Web 2 The Next Big Thing 2 Monetization 2 Security 2
23. Course Structure
24. Course Structure
25. This Course Isn’t Web Apps (15-437) Science of the Web (15-396) Networks (15-441) App. Design and Dev. (67-272)
26. This Course Is A Bit of Everything Distinct Components Know how things work Find your interest Kickstart your learning
27. Office Hours After Class | Email
28. Office Hours After Class | Email I’m Bored, Please Entertain Me!
29. The Internet
30. 1969 Based on Packet Switching First Link: Stanford & UCLA First message “login” Arpanet
33. 1971 Ray Tomlinson Over ARPANet user@12.34.553.21 No domains back then Email
34. 1977 That awful screech! Dennis Hayes Dale Heatherington Sold to Hobbyists PC Modem
35. In 1982 Something monumental happened at CMU...
37. 1984 Domain Name System 128.2.4.14 became www.cmu.edu Email user@host.com DNS
38. 1988 Internet Relay Chat Real time communication Led to Instant Messaging Still widely used #cslounge on Freenode IRC
39. 1989 Proposed at CERN Tim Berners-Lee First Webpage (1991) http://nxoc01.cern.ch/hypertext/WWW/TheProject.html HTTP, HTML, URLs WWW
40. 1993 Graphical Web Browser Non-technical audience Netscape released 1994 Started the dot-com Boom Mosaic
41. 1996 Jack Smith, Sabeer Bhatia Email in a Browser Portable Access Sold to Microsoft $400m Hotmail
42. 1996 Jack Smith, Sabeer Bhatia Email in a Browser Portable Access Sold to Microsoft $400m Hotmail
43. 1998 Larry Page, Sergey Brin Rank based on Popularity Popularity ~ Incoming Links We’ll talk about PageRank Google
44. 2000 $5 Trillion value lost Get-rich-fast didn’t work Prefix investing Wikipedia It! Dot-Com Bust
45. 2004 Rich (Javascript, AJAX) User-Driven (Social) Facebook, Digg YouTube (2005) Web 2.0
46. Building an Internet
48. Hub
49. Hub
50. Hub
51. Hub
52. Hub
53. Hub Slavish, Slow Built into most home routers. Single Protocol (ex. Ethernet)
54. Hub Hub Hub Hub
55. Hub Hub Hub Hub Bridge Bridge
56. Bridge 1 2 3
57. Bridge 1 2 3
58. Bridge 1 2 3 for 3
59. Bridge 1 2 3
60. Bridge 1 2 3
61. Bridge Knows where to send data Saves bandwidth Single Protocol ex. Ethernet Built into some routers
62. Hubs + Bridges = LAN Simplified View
64. Router
65. Router I talk in TCP/IP
66. Routers Talk across Protocols Uses protocol software Standardizes Communication TCP/IP for the Internet Internet: Ad-Hoc Network Think of ISP as a big router!
67. TCP/IP Transfer Control Protocol / Internet Protocol Handles All Internet Communication
68. TCP/IP Transfer Control Protocol / Internet Protocol Handles All Internet Communication FTP File Transfer Protocol Transferring Files HTTP Hypertext Transfer Protocol Usually for Webpages http://www.google.com SSH Secure Shell Remote Control Computers Remember C@CM?
69. TCP/IP Transfer Control Protocol / Internet Protocol Handles All Internet Communication FTP File Transfer Protocol Transferring Files HTTP Hypertext Transfer Protocol Usually for Webpages http://www.google.com SSH Secure Shell Remote Control Computers Remember C@CM? XMPP Extensible Messaging and Presence Protocol (HTTP Binding) Gmail Chat REST Representational State Transfer Facebook/Twitter/YouTube API
71. HTTP
72. User Web Server
73. User Web Server I want to see webpage.com
74. User Web Server I want to see webpage.com I only understand HTTP
75. User Web Server
76. User Web Server <HTTP REQUEST> webpage.com
77. User Web Server <HTTP REQUEST> webpage.com That wont work either, what kind of request?
78. Types of Requests But 98135 cares about: GET POST PUT DELETE There’s 8 kinds of HTTP Requests! http://en.wikipedia.org/wiki/HTTP_request#Request_methods
79. GET Tries to “get” content from an address Parameters (if any) inside the address Server processes params Ex. Google GET www.google.com/
80. GET Tries to “get” content from an address Parameters (if any) inside the address Server processes params Ex. Google GET www.google.com/?q=abhinav
81. POST Tries to “submit” information to address. Parameters (usually exist) not shown in address Can transmit data like pictures and other files Used in forms Breaks “back” & “forward” POST login.facebook.com USER: user@gmail.com PASSWORD: my_pass123
82. Quick Questions Logging in to Facebook Ask Wikipedia for “Dogs” Requesting Bank Balance Getting Course Information Hmmm, GET or POST?
83. PUT & DELETE Uh Oh! Rarely used, but important! Not seen in web browsers Used by REST Wait until we use APIs Facebook/Twitter Integration No Problem!
84. HTTPFox Mini Project 1
85. HTTPFox Mini Project 1 Optional, But really cool!
86. Coming Soon
87. Week 2 Week 3 <html>
88. Communication Website cmuwebworks.com Twitter twitter.com/cmuwebworks Facebook facebook.com/cmuwebworks Email abhinav@cmuwebworks.com
89. http://www.uark.edu/misc/lampinen/grades.gif http://www.flickr.com/photos/listorama/2312189207/in/photostream/ http://www.blogcdn.com/macblog.aol.com/media/2008/09/aol_logo.png http://jaypeeonline.net/images/netgear_superg_back.jpg Photo Credits http://www.fuelinteractive.com/blog/800px-Web_2.0_Map.svg.png http://upload.wikimedia.org/wikipedia/commons/2/29/Mazda_rx-8_under_the_hood.jpg http://sixrevisions.com/resources/the-history-of-the-internet-in-a-nutshell 15-213 Lecture Slides http://images.apple.com/hk/en/timecapsule/images/wireless_wirelessicon_20080115.png http://regmedia.co.uk/2006/03/08/google_whiteboard_large.jpg