Untangling the web week1
-
Upload
derek-jacoby -
Category
Internet
-
view
310 -
download
1
Transcript of Untangling the web week1
![Page 1: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/1.jpg)
UNTANGLING THE WEBCLASS 1 – INTRODUCTION TO THE COURSE
THE HARDWARE AND PROTOCOLS THAT POWER THE WEBINTERVIEW QUESTION: WHAT HAPPENS WHEN YOU TYPE A URL IN THE
SEARCH BAR?
![Page 2: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/2.jpg)
AGENDA FOR TONIGHT• Intro to the course and instructors• First section
• The hardware that powers the internet• Basic internet protocols
• Second section• Larger networks, load balancing, caching, content delivery networks
• Third section• Web servers and HTTP
• Wrap-up and group time
![Page 3: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/3.jpg)
HIGH LEVEL GOALS
• Introduce you to the web and web software development• Learn how web development teams work together• Understand customers and applications• Start to build a development portfolio
![Page 4: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/4.jpg)
WHAT THIS COURSE IS NOT
• It is not a rigorous introduction to software development• We won’t talk too much about data structures, Big-O notation, memory efficiency
• It is not the end of the road, but just barely a beginning• Academic computer science, bootcamps, practical experience
• It is not a Lean Launchpad style business accelerator• We’ll talk about what you want to do to launch a web business, but I do not expect
the group projects you do in the class to be the basis of that business. If you hit a home run out of the gate, of course, that’s great too! But it is not the goal or expectation.
![Page 5: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/5.jpg)
INSTRUCTOR BIO – DEREK JACOBY
• Recent computer science PhD at Uvic, but in the field since the early 90’s• 10 years at Microsoft, mostly in Microsoft Research working on speech
recognition• Development, user research, program management were all roles I filled
• Singularity University graduate• Focus areas
• Web development• Bioinformatics• Data visualization
![Page 6: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/6.jpg)
INSTRUCTOR BIO – YVONNE COADY
• Full professor at Uvic• Has taught this course twice before• Specialization areas include systems architecture,
containerization, cloud computing, and high capacity networks
• http://webhome.cs.uvic.ca/~ycoady/index.html
![Page 7: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/7.jpg)
COURSE STRUCTURE
• Weekly lecture• 3 hours is a long time, so we’ll break it up with exercises
• Group project• Won’t come up for a couple weeks, but start thinking about groups. • Ideal group size is 3-4, but smaller or a bit larger is fine too.• The project is in 3 parts – defining a website concept, writing a website front-
end, writing a website back-end• Ideal is to stay with the same group for the entire time, but if necessary
switching can occur after week 7 where part 1 is due
![Page 8: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/8.jpg)
GRADING• 11 Individual Exercises (5% each) 55% Due beginning of
class time• 3 Team Projects (15% each) 45% October 17,
November
• Grading SystemF D C C+ B- B
B+ A- A A+0-49 50-59 60-64 65-69 70-72 73-76 77-79 80-84 85-89 90-100
![Page 9: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/9.jpg)
RESOURCES
• CourseSpaces - http://coursespaces.uvic.ca/my/• 20160813940• Will be used for a list of resources, class notes, grades, etc.
• Uvic mailing list• I will use it only for schedule or location changes unless the slack channel below has problems
• Slack – please send me email at [email protected] with the title “slack access” and I’ll add you
• https://untangling.slack.com/
• Slides• http://www.slideshare.net/derekja
![Page 10: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/10.jpg)
CLASS LOCATION
• When we put this course together we expected primarily non-Uvic folks so downtown made sense. On Sept 14, 21, Oct 5, and Nov 2 and 30th this downtown location is unavailable. Uvic has a nice smart classroom available for us – group tables with computers which can be shared with a central display.
• Option 1: we stay downtown on all other nights where it is available here, go to Uvic for the remainder
• Option 2: we move to Uvic for all the classes
![Page 11: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/11.jpg)
MODULE PREVIEW – WEEKS 1-3
1 What happens when you type a URL in the address bar? switches and routers dhcp and IP addresses firewalls servers dns and registrars cdn's cloud services
HW: video yourself answering an interview question
2 What happens when someone searches for your website on google? pagerank SEO google analytics
HW: given a website, find 5 things you’d do to boost natural traffic
3 Where can you buy paid advertising and how does it work? google adwords facebook buying clicks and followers SaaS and PaaS lifetime value of a customer
HW: decide how to spend your marketing budget
![Page 12: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/12.jpg)
MODULE PREVIEW – WEEKS 4-64 How do you build an HTML page? Headers and bodies tags scripts Source code control
(project 1 assigned – must have groups formed)
HW: build a personal webpage on github pages
5 javascript intro to js es6 editors and assistance
HW: answer some common javascript interview questions
6 UX design and collaboration user stories user research lean methodologies business model canvas MVP hackathons scrums agile
HW: create a business model cavas (for any project, can be for group project but must be done individually)
![Page 13: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/13.jpg)
MODULE PREVIEW – WEEKS 7-9
7 Making pages look pretty CSS Frameworks - react and bootstrap
Project 1 dueProject 2 assigned
HW: build a simple bootstrap site
8 Where do I host, and how? Digital ocean Heroku AWS Google IBM Azure
HW: no assignment planned for this week
9 Making pages smart Intro to Bluemix speech services chatbots natural language
HW: build a bluemix website
![Page 14: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/14.jpg)
MODULE PREVIEW – WEEKS 10-12
10 databases and servers SQL NoSQL database services APIs
Project 3 assigned
HW: create a database on bluemix and use it to populate a web page
11 JSON and communications RESTful APIs stateless servers
HW: create a JSON API for a service and show it in use
12 Pitch day! Giving useful feedback Learn to kill your babies!
Projects 2 and 3 due
HW (turn in by end of class): give 2-3 pieces of constructive critical feedback for each presentation
![Page 15: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/15.jpg)
QUESTIONS ABOUT THE STRUCTURE OF THE COURSE?
![Page 16: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/16.jpg)
TECHNOLOGY STACKS AND A WEB INTRODUCTIONWHEN YOU TYPE A URL INTO THE ADDRESS BAR, WHAT HAPPENS?
![Page 17: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/17.jpg)
LAYERS OF ABSTRACTION – A CONCRETE EXAMPLE
• User interface/end user interaction• Case design, hardware layout• Electronics design – planning circuit boards, component selection• Chip design – creating a microprocessor, memory, ASICs, etc.• Physics and chemistry – how electrons move
![Page 18: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/18.jpg)
LAYERS OF ABSTRACTION – AN ABSTRACT EXAMPLE
• Differential equations• Calculus• Geometry• Algebra• Functions and logic• Counting and arithmetic
![Page 19: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/19.jpg)
LAYERS OF ABSTRACTION IN WEB DEVELOPMENT
Physics and electronics – chip design, circuit boards, etcServers, routers, access points, networking hardware, fibre and other connections
Wire protocols, connection standards, low level networking firmware
TCP/IP, DHCP, DNS, ICMP, UDPHTTP, web servers, streaming protocols, chat protocols, etc. Backend software, databases, microservicesFront-end software, UI frameworks, client hardware
USER NEEDS BUSINES
S MODELS
ADVERTISING SEARCH
ENGINE OPTIMIZATION
USABILITY
INTERACTION MODELS
USER INTERFACE DESIGN
![Page 20: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/20.jpg)
WHAT HAPPENS WHEN YOU TYPE “FACEBOOK.COM” INTO THE ADDRESS BAR• Simple first version
![Page 21: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/21.jpg)
https://www.khanacademy.org/partner-content/code-org/internet-works/v/the-internet-ip-addresses-and-dns
But wait, what are IP addresses? What’s a DNS server?
![Page 22: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/22.jpg)
SHORT BREAK
• Questions?
• Be back in 5!
https://www.youtube.com/watch?v=dE4rsNuG0aw
![Page 23: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/23.jpg)
ROUTERS, SWITCHES, AND HUBS OH MY!
• How does my computer connect to the internet?• First, a wired computer.• Every computer gets an IP address, but not necessarily one
that connects to the general internet.• Let’s first look at how the computers around you connect to
each other
![Page 24: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/24.jpg)
HUBS – THE LEAST INTELLIGENT CONNECTION
Everything is connected to everything elseBut it’s cheap, and easy
![Page 25: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/25.jpg)
SWITCHES – A LITTLE BIT SMARTER
![Page 26: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/26.jpg)
ROUTERS – SMARTER YET• DHCP and NAT
• Dynamic Host Configuration Protocol• Network Address Translation
NAT is also a rudimentary firewall
![Page 27: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/27.jpg)
DHCP – MORE DETAILS
• Every network interface has a MAC address. This is a hardware address (although it can sometimes be overridden in software)
• The MAC address must be unique inside a local address space and is the basis for requests to the DHCP server
• This DHCP request and acknowledge pattern is one we’ll see again
![Page 28: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/28.jpg)
ROUTER CONFIGURATION• Way more than is needed for this course – Quality of Service
(QoS), logging, MAC address filtering, port forwarding, etc.
![Page 29: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/29.jpg)
WIRELESS CLIENTS
• Only a little bit different. A Wi-Fi access point is generally integrated with a router.
• Each access point broadcasts an SSID – Service Set Identifier• There are also more variants of wireless security since
physical access isn’t needed to connect
![Page 30: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/30.jpg)
EXERCISE
• Break up into groups of 5• If we don’t split up evenly, groups may be as large as 7 or as small as 3• Each of you will be playing at least one role
• Client• DHCP• DNS• Router• Web servers
• When you have groups formed, I’ll come hand around game cards
![Page 31: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/31.jpg)
EXERCISE SCENARIOS
• 1: The client requests www.facebook.com• 2: The client requests www.facebook.com/zuck• 3: The client requests www.somemissingwebsite.com
![Page 32: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/32.jpg)
QUESTIONS AND A SHORT BREAK
![Page 33: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/33.jpg)
DEBRIEF ON EXERCISE 1
![Page 34: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/34.jpg)
LARGER NETWORKS
• Routing on the internet• Caching• Load balancing• Anycast• Content delivery networks (CDNs)• Network tools
![Page 35: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/35.jpg)
ROUTING AND RELIABILITY
• We’ve talked about routers in local networks, but they also drive the internet
• https://www.khanacademy.org/partner-content/code-org/internet-works/v/the-internet-packet-routers-and-reliability
![Page 36: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/36.jpg)
PORTS AND PROTOCOLS
• Ports are like a door in an apartment building – arbitrarily assigned but if you knock on the wrong one you’ll never find who you’re looking for
• We’ve talked about TCP/IP but other protocols exist• UDP• ICMP• Multicast• SIP
![Page 37: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/37.jpg)
CACHING
• We’ll talk about headers later• But basically it is largely up to the page whether or not it can
be cached• Other network elements can cache too
![Page 38: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/38.jpg)
LOAD BALANCING
![Page 39: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/39.jpg)
ANYCAST
![Page 40: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/40.jpg)
CONTENT DELIVERY NETWORKS (CDNS)
![Page 41: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/41.jpg)
NETWORK TOOLS
• Complex and expensive tools• IBM Tivoli, Aruba, etc
• Free and easy tools• https://www.whatismyip.com/• Ping, traceroute, etc (local or through nwtools.com)
• Some very powerful tools are also free• Wireshark, https://www.wireshark.org/
![Page 42: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/42.jpg)
NETWORK TOOLS
![Page 43: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/43.jpg)
NETWORK TOOLS EXERCISE
• Go to nwtools.com• Compare the following on ping and traceroute
• google.com• 8.8.8.8• uvic.ca• facebook.com• aport.ru• 127.0.0.1
• What made sense? What was weird?
![Page 44: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/44.jpg)
QUESTIONS
• And a short break
![Page 45: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/45.jpg)
DEBRIEF ON EXERCISE 2
![Page 46: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/46.jpg)
HTTP AND WEB SERVERS• We’ve come right back up to that line I mentioned
Physics and electronics – chip design, circuit boards, etcServers, routers, access points, networking hardware, fibre and other connections
Wire protocols, connection standards, low level networking firmware
TCP/IP, DHCP, DNS, ICMP, UDPHTTP, web servers, streaming protocols, chat protocols, etc. Backend software, databases, microservicesFront-end software, UI frameworks, client hardware
USER NEEDS BUSINES
S MODELS
ADVERTISING SEARCH
ENGINE OPTIMIZATION
USABILITY
INTERACTION MODELS
USER INTERFACE DESIGN
![Page 47: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/47.jpg)
HTML AND HTTP
• https://youtu.be/1K64fWX5z4U?t=61
![Page 48: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/48.jpg)
HTTP PROTOCOL
• Responses are the first thing to think about
![Page 49: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/49.jpg)
WEB SERVERS
• Apache• Nginx• IIS• Flask• Gunicorn• Express
![Page 50: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/50.jpg)
NGINX EXAMPLE
![Page 51: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/51.jpg)
WEB SERVERS• Web servers basically serve up files• Many of those are HTML files, but also media files, text files,
etc.• The HTTP response codes are important, for instance it would
be very easy to configure a particular page with two different entry points, but much better to configure one of them to return a 301 and then serve the page up from only a single location. This is because of the way search engines work. Want to try and find an answer as to why for next week?
![Page 52: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/52.jpg)
3RD EXERCISE
• Break into pairs• Decide who is going to interview first• The first interviewer asks:• from a front-end developer perspective, what happens when
you type facebook.com in the address bar? what about when you misspell it as fcebook.com? how about facebook.com/somemissingpage.htm?
![Page 53: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/53.jpg)
3RD EXERCISE
• Now swap roles• The second interviewer asks:• from a networking perspective, what happens when you type
facebook.com in the address bar? What if you’re on a wireless computer behind a firewall? Facebook has a CDN, does that change your answer?
![Page 54: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/54.jpg)
WRAP UP
• Student intros• Homework
• Record a video of yourself answering the “what happens when you type facebook.com into the address bar” question. Before answering it describe your ideal web job and how that effects how you answer.
• Create a youtube channel for yourself and add the video, leave it unlisted or public as you prefer (can host elsewhere, or even bring a usb stick to class, if you need to)
• Send the link to Derek at [email protected] by the start of class on the 12th.
![Page 55: Untangling the web week1](https://reader033.fdocuments.us/reader033/viewer/2022051006/5881fe9f1a28abb4748b6f7f/html5/thumbnails/55.jpg)
GETTING READY FOR NEXT WEEK• First, make yourself a google account if you don’t already
have one. We’ll use this for google analytics next week.• Second, make a nitrous.io account. This is a free account
which we’ll use for hosting projects.• Third, make a github account. This will be you developer’s
portfolio, so we’ll start populating it!• Finally, please make sure you’ve gotten on the slack channel.
Send me email at [email protected] to get access.