Untangling the Web

Untangling the WebClass 1 Introduction to the courseThe hardware and protocols that power the webInterview Question: What happens when you type a URL in the search bar?

Agenda for tonightIntro to the courseThe hardware that powers the internetBasic internet protocolsLarger networks, load balancing, caching, content delivery networksWeb servers and HTTPWrap-up

High level goalsIntroduce you to the web and web software developmentLearn how web development teams work togetherUnderstand customers and applicationsStart to build a development portfolio

What this course is notIt is not a rigorous introduction to software developmentWe wont talk too much about data structures, Big-O notation, memory efficiencyIt is not the end of the road, but just barely a beginningAcademic computer science, bootcamps, practical experienceIt is not a Lean Launchpad style business acceleratorWell 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, thats great too! But it is not the goal or expectation.

Instructor Bio Derek JacobyRecent computer science PhD at Uvic, but in the field since the early 90s10 years at Microsoft, mostly in Microsoft Research working on speech recognitionDevelopment, user research, program management were all roles I filledSingularity University graduateFocus areasWeb developmentBioinformaticsData visualization

Course structureWeekly lecture3 hours is a long time, so well break it up with exercisesGroup projectIdeal group size is 3-4, but smaller or a bit larger is fine too.The project is in 3 parts defining a website concept (individual), writing a website front-end, writing a website back-endIdeal is to stay with the same group for the entire time, but if necessary switching can occur after part 1 is due

grading11 Individual Exercises (5% each)55%Due beginning of class time3 Team Projects (15% each)45%Jan 25th, Mar 1st, Mar 29th(first project is individual, but can be done in groups)Grading System

FDCC+B-BB+A-AA+0-4950-5960-6465-6970-7273-7677-7980-8485-8990-100

ResourcesSyllabus https://heat.csc.uvic.ca/coview/outline/2017/Spring/CSC/101CourseSpaces - http://coursespaces.uvic.ca/my/201701 23787Will be used for a list of resources, class notes, grades, etc.Uvic mailing listI will use it only for schedule or location changes unless the slack channel below has problemsSlack please send me email at derekja@gmail.com with the title slack access and Ill add youhttps://untangling.slack.com/Slideshttp://www.slideshare.net/derekja (all slides from this term are labeled spring, please feel free to peruse the others, though.)

Module preview weeks 1-31 What happens when you type a URL in the address bar?switches and routersdhcp and IP addressesfirewallsserversdns and registrarscdn'scloud services

HW: video + command line exercise2 What happens when someone searches for your website on google?pagerankSEOgoogle analytics CanAssist project

(project 1 assigned)

HW: given a website, find 5 things youd do to boost natural traffic + github install

3 Where can you buy paid advertising and how does it work?google adwordsfacebookbuying clicks and followersSaaS and PaaSlifetime value of a customer HTML exercise

HW: decide how to spend your marketing budget + HTML exercise

Module preview weeks 4-64 How do you build an HTML page?Headers and bodiestagsscriptsPresent project 1

(project 1 due)

HW: build a personal webpage on github pages

5 javascriptintro to jses6editors and assistance

(project 2 assigned)

HW: answer some common javascript interview questions6 UX design and collaborationuser storiesuser researchlean methodologiesbusiness model canvasMVPhackathonsscrumsagile

HW: create a business model canvas + JS exercises

Module preview weeks 7-97 Making pages look prettyCSSFrameworks - react and bootstrap

HW: build a simple bootstrap site8 Where do I host, and how?Project 2 presentations Digital oceanHerokuAWSGoogleIBMAzure

Project 2 due

HW: host your project 2 site

9 Making pages smartIntro to servicesspeech serviceschatbotsnatural language

Project 3 assigned

HW: build a website backend service

Module preview weeks 10-1210 databases and serversSQLNoSQLdatabase servicesAPIs

HW: create a database and use it to populate a web page11 JSON and communicationsRESTful APIsstateless 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! Project 3 presentations

Project 3 due

HW (turn in by end of class): give 2-3 pieces of constructive critical feedback for each presentation

Questions about the structure of the course?

Short break why do you want to know about the web?

http://chrisguillebeau.com/announcing-side-hustle-school

Technology stacks and a web introductionWhen you type a url into the address bar, what happens?

Layers of abstraction a concrete exampleUser interface/end user interactionCase design, hardware layoutElectronics design planning circuit boards, component selectionChip design creating a microprocessor, memory, ASICs, etc.Physics and chemistry how electrons move

Layers of abstraction an abstract exampleDifferential equationsCalculusGeometryAlgebraFunctions and logicCounting and arithmetic

Layers of abstraction in web developmentPhysics and electronics chip design, circuit boards, etcServers, routers, access points, networking hardware, fibre and other connectionsWire protocols, connection standards, low level networking firmwareTCP/IP, DHCP, DNS, ICMP, UDPHTTP, web servers, streaming protocols, chat protocols, etc. Backend software, databases, microservicesFront-end software, UI frameworks, client hardwareUSER NEEDSBUSINESS MODELSADVERTISINGSEARCH ENGINE OPTIMIZATIONUSABILITYINTERACTION MODELSUSER INTERFACE DESIGN

What happens when you type facebook.com into the address barSimple first version

https://www.khanacademy.org/partner-content/code-org/internet-works/v/the-internet-ip-addresses-and-dnsBut wait, what are IP addresses? Whats a DNS server?

Short breakQuestions?

Be back in 5!

Another description of DNShttps://www.youtube.com/watch?v=dE4rsNuG0aw

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.Lets first look at how the computers around you connect to each other

Hubs the least intelligent connection

Everything is connected to everything elseBut its cheap, and easy

Switches a little bit smarter

Routers smarter yetDHCP and NATDynamic Host Configuration ProtocolNetwork Address Translation

NAT is also a rudimentary firewall

DHCP more detailsEvery 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 serverThis DHCP request and acknowledge pattern is one well see again

Router configurationWay more than is needed for this course Quality of Service (QoS), logging, MAC address filtering, port forwarding, etc.

Wireless clientsOnly a little bit different. A Wi-Fi access point is generally integrated with a router.Each access point broadcasts an SSID Service Set IdentifierThere are also more variants of wireless security since physical access isnt needed to connect

a short break and an exerciseOpen a terminal (start menu, cmd on PC)(Application->utilities->terminal on Mac)Find your ip address (on PC, type ipconfig) (on Mac, type ifconfig)Is that IP address on the main internet or is it granted by a wifi access point?What is your external IP address? (go to https://www.whatismyip.com/)

Larger networksRouting on the internetCachingLoad balancingAnycastContent delivery networks (CDNs)Network tools

Routing and reliabilityWeve 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

Ports and protocolsPorts are like a door in an apartment building arbitrarily assigned but if you knock on the wrong one youll never find who youre looking forWeve talked about TCP/IP but other protocols existUDPICMPMulticastSIP

cachingWell talk about headers laterBut basically it is largely up to the page whether or not it can be cachedOther network elements can cache too

Load balancing

anycast

Content delivery networks (CDNs)

http and web serversWeve come right back up to that line I mentionedPhysics and electronics chip design, circuit boards, etcServers, routers, access points, networking hardware, fibre and other connectionsWire protocols, connection standards, low level networking firmwareTCP/IP, DHCP, DNS, ICMP, UDPHTTP, web servers, streaming protocols, chat protocols, etc. Backend software, databases, microservicesFront-end software, UI frameworks, client hardwareUSER NEEDSBUSINESS MODELSADVERTISINGSEARCH ENGINE OPTIMIZATIONUSABILITYINTERACTION MODELSUSER INTERFACE DESIGN

html and httphttps://youtu.be/1K64fWX5z4U?t=61

Http protocolResponses are the first thing to think about

Web serversApacheNginxIISFlaskGunicornExpress

Nginx example

Web serversWeb servers basically serve up filesMany 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?

exerciseIn pairs, answer the question: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?

PC Architecture and user interfacesMost of this course is about the webBut youll be using your laptop to access and create content for it, so understanding some of the computer internals is useful

Hardware Components of a computer

Software components of a computerHardware and devicesGraphics subsystemBIOSOperating system and device driversWindow managerTerminal and utilitiesApplications such as word processors, browser, etc.

Terminal (command shell, bash shell)Well be using the command line a lot in this classIt is the lowest normally accessed level of interaction with the computerIn many ways its simpler than a graphical user interface because it is so precisely definedBut that definition isnt obvious until you learn about it, unlike a graphical user interface there is no easy discoverability of commands and features

Files and directoriesYour hard drive contains files (packages with stuff in them, either text or binary data) and directories (containers of files)There are also links, or shortcuts, but these are really just a special kind of file so well ignore those for nowIn the command window (otherwise known and the terminal, or shell) you are always in a specific directoryYou can always tell what that directory is with the command pwd (which stands for Present Working Directory)In windows, names are not case-sensitive, but on unix and mac they are, so be careful of case

Some terminal commandsAfter this week well all be using the git bash command window, which will be more similar between mac and pc. A detailed command line reference is found at http://ss64.com/To get the directory listing, on mac it is ls and on the pc it is dirOnce the git bash install has occurred we will use ls on both systems, for example

Redirection of command inputcommand > filename Redirect command output (stdout) into a filecommand >> filename Redirect command output and APPEND into a filecommand < filename Redirect a file into a commandcommand1 | command2 Redirect stdout of command1 to command2

These work the same on all shells, but after you install bash, use that and reference the page here: http://ss64.com/bash/syntax-redirection.html

examplesTo put the listing of a directory into a new file on a pcdir > output.txtOr to append to an existing file (creating a new one if it doesnt exist)ls >> output.txtTo get information about a computerOn the PC, systeminfo or on the mac, system_profiler

Homework 1Record a video of yourself answering the what happens when you type facebook.com into the address bar question.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)In a command window, execute the systeminfo command (PC) or system_profiler command (Mac) piping it into a text file. Look at the text file. How much RAM do you have?Next pipe the free disk space information into that file. How much disk space do you have?Send the textfile, amount of RAM and disk space, and the video link to Derek at derekja@gmail.com by the start of class 2.

Getting ready for next weekFirst, make yourself a google account if you dont already have one. Well use this for google analytics next week.Second, make a github account. This will be your developers portfolio, so well start populating it! Install git on your computer (install git bash from https://git-scm.com/downloads)Finally, please make sure youve gotten on the slack channel. Send me email at derekja@gmail.com to get access.

Candy Heart Hustle Becomes Six-Figure Second IncomeSide Hustle School2016Podcast360752.28ENG - Unable to find branded candy hearts for a client, a marketing executive decides to make her own.