Untangling spring week1
Download as PPTX, PDF1 like453 views
This document provides an overview and agenda for an introductory course on web development. It introduces the basic hardware and protocols that power the internet, including switches, routers, IP addresses, DNS, and HTTP. It outlines the course goals of introducing web development teams and processes. The course structure is described, including weekly lectures, exercises, and group projects. The instructor's background is provided. Homework involving a video, system profiling, and setting up accounts is assigned to prepare for the next class.
Untangling spring week1
- 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 • The hardware that powers the internet • Basic internet protocols • Larger networks, load balancing, caching, content delivery networks • Web servers and HTTP • Wrap-up
- 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. COURSE STRUCTURE • Weekly lecture • 3 hours is a long time, so we’ll break it up with exercises • Group project • 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 (individual), 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 part 1 is due
- 7. GRADING • 11 Individual Exercises (5% each) 55% Due beginning of class time • 3 Team Projects (15% each) 45% Jan 25th, Mar 1st, Mar 29th • (first project is individual, but can be done in groups) • 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
- 8. RESOURCES • Syllabus https://heat.csc.uvic.ca/coview/outline/2017/Spring/CSC/101 • CourseSpaces - http://coursespaces.uvic.ca/my/ • 201701 23787 • 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 (all slides from this term are labeled “spring”, please feel free to peruse the others, though.)
- 9. 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 + command line exercise 2 What happens when someone searches for your website on google? pagerank SEO google analytics CanAssist project (project 1 assigned) HW: given a website, find 5 things you’d do to boost natural traffic + github install 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 HTML exercise HW: decide how to spend your marketing budget + HTML exercise
- 10. MODULE PREVIEW – WEEKS 4-6 4 How do you build an HTML page? Headers and bodies tags scripts Present project 1 (project 1 due) HW: build a personal webpage on github pages 5 javascript intro to js es6 editors and assistance (project 2 assigned) 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 canvas + JS exercises
- 11. MODULE PREVIEW – WEEKS 7-9 7 Making pages look pretty CSS Frameworks - react and bootstrap HW: build a simple bootstrap site 8 Where do I host, and how? Project 2 presentations Digital ocean Heroku AWS Google IBM Azure Project 2 due HW: host your project 2 site 9 Making pages smart Intro to services speech services chatbots natural language Project 3 assigned HW: build a website backend service
- 12. MODULE PREVIEW – WEEKS 10-12 10 databases and servers SQL NoSQL database services APIs HW: create a database 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! Project 3 presentations Project 3 due HW (turn in by end of class): give 2-3 pieces of constructive critical feedback for each presentation
- 13. QUESTIONS ABOUT THE STRUCTURE OF THE COURSE?
- 14. SHORT BREAK – WHY DO YOU WANT TO KNOW ABOUT THE WEB? http://chrisguillebeau.com/announcing-side-hustle- school
- 15. TECHNOLOGY STACKS AND A WEB INTRODUCTION WHEN YOU TYPE A URL INTO THE ADDRESS BAR, WHAT HAPPENS?
- 16. 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
- 17. LAYERS OF ABSTRACTION – AN ABSTRACT EXAMPLE • Differential equations • Calculus • Geometry • Algebra • Functions and logic • Counting and arithmetic
- 18. 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
- 19. WHAT HAPPENS WHEN YOU TYPE “FACEBOOK.COM” INTO THE ADDRESS BAR • Simple first version
- 20. 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?
- 21. SHORT BREAK • Questions? • Be back in 5! Another description of DNS https://www.youtube.com/watch?v=dE4rsNuG0aw
- 22. 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
- 23. HUBS – THE LEAST INTELLIGENT CONNECTION Everything is connected to everything else But it’s cheap, and easy
- 24. SWITCHES – A LITTLE BIT SMARTER
- 25. ROUTERS – SMARTER YET • DHCP and NAT • Dynamic Host Configuration Protocol • Network Address Translation NAT is also a rudimentary firewall
- 26. 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
- 27. ROUTER CONFIGURATION • Way more than is needed for this course – Quality of Service (QoS), logging, MAC address filtering, port forwarding, etc.
- 28. 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
- 29. A SHORT BREAK AND AN EXERCISE • Open 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/)
- 30. LARGER NETWORKS • Routing on the internet • Caching • Load balancing • Anycast • Content delivery networks (CDNs) • Network tools
- 31. 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
- 32. 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
- 33. 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
- 34. LOAD BALANCING
- 35. ANYCAST
- 36. CONTENT DELIVERY NETWORKS (CDNS)
- 37. 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
- 38. HTML AND HTTP • https://youtu.be/1K64fWX5z4U?t=61
- 39. HTTP PROTOCOL • Responses are the first thing to think about
- 40. WEB SERVERS • Apache • Nginx • IIS • Flask • Gunicorn • Express
- 41. NGINX EXAMPLE
- 42. 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?
- 43. EXERCISE • In 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?
- 44. PC ARCHITECTURE AND USER INTERFACES • Most of this course is about the web • But you’ll be using your laptop to access and create content for it, so understanding some of the computer internals is useful
- 45. HARDWARE COMPONENTS OF A COMPUTER
- 46. SOFTWARE COMPONENTS OF A COMPUTER Hardware and devices Graphics subsystem BIOS Operating system and device drivers Window manager Terminal and utilities Applications such as word processors, browser, etc.
- 47. TERMINAL (COMMAND SHELL, BASH SHELL) • We’ll be using the command line a lot in this class • It is the lowest normally accessed level of interaction with the computer • In many ways it’s simpler than a graphical user interface because it is so precisely defined • But that definition isn’t obvious until you learn about it, unlike a graphical user interface there is no easy discoverability of commands and features
- 48. FILES AND DIRECTORIES • Your 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 we’ll ignore those for now • In the command window (otherwise known and the terminal, or shell) you are always in a specific directory • You 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
- 49. SOME TERMINAL COMMANDS • After this week we’ll 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 “dir” • Once the git bash install has occurred we will use “ls” on both systems, for example
- 50. REDIRECTION OF COMMAND INPUT • command > filename Redirect command output (stdout) into a file • command >> filename Redirect command output and APPEND into a file • command < filename Redirect a file into a command • command1 | 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
- 51. EXAMPLES • To put the listing of a directory into a new file on a pc • “dir > output.txt” • Or to append to an existing file (creating a new one if it doesn’t exist) • “ls >> output.txt” • To get information about a computer • On the PC, “systeminfo” or on the mac, “system_profiler”
- 52. HOMEWORK 1 • Record 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.
- 53. 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 github account. This will be your developer’s portfolio, so we’ll start populating it! Install git on your computer (install “git bash” from https://git- scm.com/downloads) • Finally, please make sure you’ve gotten on the slack channel. Send me email at derekja@gmail.com to get access.