Behind the Plug

1. Behind the Plug 0001: How does the ‘net go?

2. Introduction • Russ White • russ@riw.us • Over 20 years in the computer world • “Been there, done that —have the t-shirt” • Books, standards, patents, CCIE, CCDE, CCAr, MS/IT, blah, blah, blah… • I’m not good at remembering names • I’m not good at icebreakers • We’ll muddle through, somehow • Lori White • My lovely wife… • She knows something about computers, too • Don’t let her fool you!

3. Housekeeping • Don’t hesitate to ask questions! • The only dumb question is the one you didn’t ask • No formality here… • Some of this can be very deep and hard to understand • Most of this is stuff you’re not going to learn in a CompSci class in college • I teach occasionally at NC State • This isn’t stuff you’ll learn there

4. How’s it Go?

5. How’s it Go? This is HTML, which is a markup language, not a programming language!

6. Two Questions… • How does the computer know how to build what you see from the code it actually receives? • Where does the computer get the code to build what you see on the screen? • Let’s deal with these one at a time… • The first one we’ll skim over in this session • The second one is the remainder of this class

7. How a Computer Works • A computer is essentially nothing more than a processor and memory • The processor just does math –that’s it! • Yes, you are smarter than your computer is • The memory, well, it remembers things (oddly enough) • That’s it? Yes, that’s all there is… Processor Memory

8. How a Computer Works • The memory in a computer is actually broken into multiple pieces or sections with various names • Segments, registers, and windows, oh my! • Whatever! • If you ever learn to code, you’ll have to learn what each of these things are, but we’re not going to worry too much about it here… • Each piece of memory does something special • This is all we need to know for right now

9. How a Computer Works Processor Memory Text: This contains the instructions for the processor (the code) Device: Put data and instructions here, and your computer might “paint” on the printer, or make a phone call, or interact with some other external device Video: Each piece of memory here represents one dot, or pixel, on your computer screen; if you set these right, you can make words, pictures, etc., on the monitor

10. How a Computer Works • The processor’s “instruction set” is very rudimentary • Much like the average cat’s “instruction set” • Eat, drink, be cute, claw your chair –there’s not a large number of things a cat knows how to do • For instance… • To put a red dot at a specific location on the computer screen put the number FF0000 into memory location “x”

11. How a Computer Works • But no-one likes to draw using a single dot at a time… • We want to draw a circle, or a square, or whatever… • The operating system collects these instructions into sets • These sets of instructions are called an application programming interface (API) • This is called abstraction

12. Acronym Warning • Geeks love acronyms (even if they’re not really acronyms!) • Some (most) of them are abbreviations or initialisms • We just call them all acronyms • “Geeks ain’t no good at grammar!” • In the computer world, you often get into “acronym overload” • Don’t sweat it • I don’t know what they all mean, either! • http://www.acronymfinder.com/ is your friend (avengers group captain blue)

13. A Word on Abstraction • Now, back to our regularly scheduled program… • This bundling of instructions to perform specific actions is called abstraction • This is the most important concept you will encounter in the world of computers • Everything is about abstraction! • And I mean everything! • “I abstract, therefore I am.” –Dante’s not-so-famous brother

14. A Word on Abstraction Car Steering as an Example

15. A Word on Abstraction Car Steering as an Example

16. A Word on Abstraction Car Steering as an Example • The steering system in a typical car is apparently very complex • Lots of electrical/electronic circuits • Lots of pumps and other hydraulic stuff • Lots of fancy mechanical connections • But what is your interface to this entire system?

17. A Word on Abstraction Car Steering as an Example That’s abstraction! This is the car’s “steering system API”

18. Putting it all Together <p>Colonial Baptist Church</p> Paint “Colonial” at location (x,y) on the screen A “C” has this specific pattern of black and white dots Put 000000 in memory location x Turn this pixel black The instructions in the web page say to print “Colonial Baptist Church” on the screen (monitor)

19. Putting it all Together <p>Colonial Baptist Church</p> API Paint “Colonial Baptist Church” at (x,y) on the screen A “C” has this specific pattern of black and white dots Put 000000 in memory location x Turn this pixel black The web browser (an application) interprets this request, and uses the API into the operating system to perform the request

20. Putting it all Together <p>Colonial Baptist Church</p> API Paint “Colonial Baptist Church” at (x,y) on the screen API A “C” has this specific pattern of black and white dots Put 000000 in memory location x Turn this pixel black The application consults the “font engine” (an application) to figure out how to make each character

21. Putting it all Together <p>Colonial Baptist Church</p> API Paint “Colonial Baptist Church” at (x,y) on the screen API A “C” has this specific pattern of black and white dots API Put 000000 in memory location x Turn this pixel black The operating system then tells the processor how to move the right information into the right memory locations to make each character

22. Putting it all Together <p>Colonial Baptist Church</p> API Paint “Colonial Baptist Church” at (x,y) on the screen API A “C” has this specific pattern of black and white dots API Put 000000 in memory location x API Turn this pixel black The monitor reads the memory locations, and turns the right pixels the right colors on the screen… And what you see is a set of words

23. Putting it all Together • This all seems to be complex because of the number of layers • The brow-ser connected to the, operating system • The operating system connected to the, processor • The processor connected to the, memory • The memory connected to the, monitor • (You know the tune, of course…)

24. Putting it all Together • The point of all these layers is to make it simple • When you’re driving, you don’t want to think about how to make the wheels move right and left • So, you build a system for steering, and make a simple interface that controls the complex system • If you think about how the steering works while you’re driving, you’ve defeated the purpose of the entire exercise • Don’t overthink the layers, in other words • Use them for what they’re designed for –to make these complex systems easier to understand

25. An Important Note • The computer doesn’t “know” it’s printing a “word” on the screen • Computers don’t know what “words” are • We have a natural human tendency to “anthropomorphize” computers • Computers are not conscious • Computers are not self-conscious • Computers don’t make decisions • Computers don’t make rules, or enforce them, or much of anything else • Computers do two things • They do math • They remember things • That’s it!

26. Putting it all Together HTML Markup (Web Page) Java Applet Flash SWF Web Browser Operating System Processor Memory Monitor Printer … Network Card

27. Putting it all Together HTML Markup (Web Page) Java Applet Flash SWF Where does this come from? Web Browser Operating System Processor Memory Monitor Printer … Network Card