Upload
derek-jacoby
View
215
Download
0
Embed Size (px)
Citation preview
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 [email protected] 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 [email protected] 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 [email protected] 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.