The first week of the untangling the web introduction to web programming course.

1. UNTANGLING THE WEB
CLASS 1 – INTRODUCTION TO THE COURSE
THE HARDWARE AND PROTOCOLS THAT POWER THE WEB
INTERVIEW QUESTION: WHAT HAPPENS WHEN YOU TYPE A URL IN THE
SEARCH BAR?

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

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

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

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

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

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

8. GRADING
• 11 Individual Exercises (5% each) 55% Due beginning of
class time
• 3 Team Projects (15% each) 45% October 17,
November
• Grading System
F 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

9. 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 derekja@gmail.com with the title “slack access”
and I’ll add you
• https://untangling.slack.com/
• Slides
• http://www.slideshare.net/derekja

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

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

12. MODULE PREVIEW – WEEKS 4-6
4 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)

13. MODULE PREVIEW – WEEKS 7-9
7 Making pages look pretty
CSS
Frameworks - react and
bootstrap
Project 1 due
Project 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

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

15. QUESTIONS ABOUT THE STRUCTURE OF
THE COURSE?

16. TECHNOLOGY STACKS AND A WEB
INTRODUCTION
WHEN YOU TYPE A URL INTO THE ADDRESS BAR, WHAT HAPPENS?

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

18. LAYERS OF ABSTRACTION – AN ABSTRACT
EXAMPLE
• Differential equations
• Calculus
• Geometry
• Algebra
• Functions and logic
• Counting and arithmetic

19. LAYERS OF ABSTRACTION IN WEB
DEVELOPMENT
Physics and electronics – chip design, circuit boards, etc
Servers, routers, access points, networking hardware, fibre and other
connections
Wire protocols, connection standards, low level networking firmware
TCP/IP, DHCP, DNS, ICMP, UDP
HTTP, web servers, streaming protocols, chat protocols, etc.
Backend software, databases, microservices
Front-end software, UI frameworks, client hardware
USER
NEEDS BUSINES
S
MODELS
ADVERTISIN
G
SEARCH
ENGINE
OPTIMIZATION
USABILIT
Y
INTERACTION
MODELS
USER INTERFACE
DESIGN

20. WHAT HAPPENS WHEN YOU TYPE
“FACEBOOK.COM” INTO THE ADDRESS BAR
• Simple first version

21. 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?

22. SHORT BREAK
• Questions?
• Be back in 5!
https://www.youtube.com/watch?v=dE4rsNuG0aw

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

24. HUBS – THE LEAST INTELLIGENT
CONNECTION
Everything is connected to everything else
But it’s cheap, and easy

25. SWITCHES – A LITTLE BIT SMARTER

26. ROUTERS – SMARTER YET
• DHCP and NAT
• Dynamic Host Configuration Protocol
• Network Address Translation
NAT is also a rudimentary
firewall

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

28. ROUTER CONFIGURATION
• Way more than is needed for this course – Quality of Service
(QoS), logging, MAC address filtering, port forwarding, etc.

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

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

31. EXERCISE SCENARIOS
• 1: The client requests www.facebook.com
• 2: The client requests www.facebook.com/zuck
• 3: The client requests www.somemissingwebsite.com

32. QUESTIONS AND A SHORT BREAK

33. DEBRIEF ON EXERCISE 1

34. LARGER NETWORKS
• Routing on the internet
• Caching
• Load balancing
• Anycast
• Content delivery networks (CDNs)
• Network tools

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

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

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

38. LOAD BALANCING

39. ANYCAST

40. CONTENT DELIVERY NETWORKS (CDNS)

41. 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/

42. NETWORK TOOLS

43. 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?

44. QUESTIONS
• And a short break

45. DEBRIEF ON EXERCISE 2

46. HTTP AND WEB SERVERS
• We’ve come right back up to that line I mentioned
Physics and electronics – chip design, circuit boards, etc
Servers, routers, access points, networking hardware, fibre and other
connections
Wire protocols, connection standards, low level networking firmware
TCP/IP, DHCP, DNS, ICMP, UDP
HTTP, web servers, streaming protocols, chat protocols, etc.
Backend software, databases, microservices
Front-end software, UI frameworks, client hardware
USER
NEEDS BUSINES
S
MODELS
ADVERTISIN
G
SEARCH
ENGINE
OPTIMIZATION
USABILIT
Y
INTERACTION
MODELS
USER INTERFACE
DESIGN

47. HTML AND HTTP
• https://youtu.be/1K64fWX5z4U?t=61

48. HTTP PROTOCOL
• Responses are the first thing to think about

49. WEB SERVERS
• Apache
• Nginx
• IIS
• Flask
• Gunicorn
• Express

50. NGINX EXAMPLE

51. 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?

52. 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?

53. 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?

54. 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 derekja@gmail.com by the start of class on the
12th.

55. 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 derekja@gmail.com to get access.