Week 8: Wednesday - CS50 2011 - Harvard University

Key Takeaways

this is cs50 and the end of week eight so just a couple of quick fyis as announced on Monday this is now final project season where you start thinking about what you would like to do for your own final project as part of that process there's a pre-proposal due in a couple of weeks and this really is as simple as sending an email to your TF and just bouncing ideas off of him or her do look to the PDF that's posted on the course's homepage now as to the particulars but this is really just an opportunity to start thinking about what you might want to do seminars too the schedule is in the process of being put together and if you would like to register for any of the seminars linked on the course's homepage by all means feel free to do so they will all be filmed and then also a word on apis because this is an acronym you'll see in the PDF of the final project specification and we'll come back to this over the next couple weeks in the context of web programming but an API is just an application programming interface we mentioned this very early in the semester as the name given to to code and data sets that other people generally on the internet these days make available for people like us to integrate with case in point if you've used cs50's core shopping tool Harvard courses well and you've logged into that site most likely with Facebook and that's thanks to the Facebook API for authentication there's a similar API for the like button there are apis with which you can automatically send emails or text messages with which you can access dining hall menu shuttle schedules and the like so realize that that URL even if the technicalities don't make a good amount of sense just yet know that they soon will so on problem set five we asked you to critic critique some piece of Hardware or software or generally a user interface whether on campus or Beyond you all had a lot of critiques shall we say a lot to say we thought we'd excerpt just a couple of them one of my favorites was this one if only because 618 people would disagree so that's the uh the stack of papers there but some of them were all actually almost all of them were quite thoughtful and actually quite detailed and know already they have been escalated up to the powers that be so that hopefully we as a class can chip away at any of the concerns you've had with poor design so one of them the most polite ones we got too uh was this one which I enjoyed um no one else really sort of like qualified their thoughts with such respect as this one here but it was a nice a very gentle one another favorite of mine uh critiqued the elevator in Mather house which apparently when you take it up from first floor to top floor it just then stays there and apparently no one really ever takes the elevator down so the side effect of this behavior is that the elevator always stays on the fourth floor by default so you always have to wait for it on the first floor so a very apt uh commentary there this one too was one of my favorite critiques um this student has trouble turning on the TV in the candidate common room but In fairness if you do read on their critique is quite Justified um I'll wave my hands at some of the particulars here but it sounds like there's a whole lot of buttons and a whole lot of unnecessary complexity simply to watch a show that you would like um and one of the recurring themes as it related to cs50 actually related to the cs50 Appliance um you know by default when you boot up the appliance the window is actually deliberately rather small the idea being that this way it works on anyone's laptop these days with high probability but you can actually enlarge the screen just clicking the little button in the top right corner is not sufficient though because the appliance is running its own operating system and technically that operating system by default doesn't know it's inside of a virtual machine Linux Fedora Linux just as soon assumes that it's running on a piece of bare metal an actual computer so for it to take advantage of your full screen and something called your graphics card or your video driver you actually have to kind of train the appliance to know a little something about your Mac or your PC or your Linux box and the trick for doing so is something called guest editions so guest editions are software for free that come with virtualbox that you can install inside of the appliance and once you do and restart the appliance just once then it will fill the screen just as I've been doing all semester here in lecture and the documentation for doing so if you would like to go that route if you haven't already is available at the cs50 manual at that address there so realize there is that solution and plenty of others there as well all right so without further Ado and actually just to paint a picture of the depth of the comments we went ahead and went through the 600 plus critiques that were submitted and then we excerpted for public display only those that related to Harvard so that we could forward them up to the powers that be and also allow you to sort of empathize with each other or see the sort of themes that arose I actually first exported all this data as an Excel file then started reading through it and sort of delighting in all of the critiques and then very quickly got overwhelmed and bored with just like my God all the copying and pasting I was trying to do into the course's website so it turns out I took in cs50 so I wrote a little program and started searching for programmatically not with just control F but writing code that searched for a few themes I realized that I could very quickly turn through the results by searching for my.harvard pre-term planning tool was another good expression to search for um another one was anything relating to Dining Services another was plan of study sectioning and a whole bunch of others and it was actually quite fun to see this because every time I would add another if condition in the code saying if this student mentioned my.harvard put them at this point in the website the numbers would go from like 600 down to like 500 comments and then down to 400 comments so it really is Testament frankly with what you can do with just a little bit of PHP which is the language we will introduce today so for more on this and quite the opportunity for procrastination you can read through all of your classmates critique on things here at Harvard so hopefully collectively as a class even that's getting long hopefully as a class we can do a little something about that indeed for your final projects if you see something on campus that sucks fix it build it yourself whether it's some cs50 tool or something else on campus and we'll see what we can do about making real people use it so my favorite thing in high school frankly was watching movies in class um so um this is not a full-fledged movie it's actually just a center so minutes but as promised this will peel back the hood of the internet and show us a much more interesting detail how things underneath the hood work but just a few pieces of jargon so that you know what to expect here so we talked on Monday about tcpip and even though we didn't talk about the TCP part we did talk about the IP part Internet Protocol and that generally related to this fact that every computer on the internet had is an IP address a unique address that identifies it so that packets data can get to it from routers across the internet now the TCP we didn't tease apart but it does a bunch of things one of which is that this is a protocol that guarantees delivery for instance if with IP just because I extend or in the real world just because I extend my hand out like this doesn't mean that the other person is necessarily going to acknowledge my hand being extended and they're not necessarily going to shake it TCP metaphorically will just keep re-extending my hand until uh the other end the server actually replies so TCP guarantees delivery and the other thing that it does is it allows you to do multiple things on one server at a time so a server these days can be a web server but it also can be a mail server or an instant messaging server but if data is just arriving at an IP address it's not going to be obvious perhaps whether this is an email or an instant message or something else so it turns out that when you address one of these virtual envelopes thanks to tcpip it's not just the IP address that gets written on the envelope and your IP address in the from address there's also a unique number that's put on that envelope called a port number and you might generally have seen that the port number for web services on the Internet is the number 80. and the port number for anything secure on the internet with https is 443. email is 25 SSH is 22. FTP is 21 and if most of these acronyms are sort of over your head that's fine but know that this is the mechanism by which browsers send data to a server and on this envelope say by the way this is number 80 poor 80 so make sure it goes to the web server and not say the mail server or something else and this Opera this uh this feature of port numbers is also such an easy way frankly for Harvard to keep you from doing things in your dorm rooms on your computers that they don't want you to do right one of the reasons you can't really put your Wii on the network and actually play networked games by default is because Harvard is filtering out some of the traffic and they're doing this by a couple of mechanisms but one of which could very well be based on port numbers if Harvard just wanted to unilaterally say no more web access for anyone but you can send email all they would have to do is configure their routers or more specifically firewalls to disallow any packets flowing through harvard.edu that have the number 80 in them and corporate firewalls do this much more so and we'll talk later next week likely about this tool that came out last year called firesheep which actually allows you to sniff traffic and how that actually works and relates to this although that tool operates at a higher level so you're about to see glimpses at routers at packets at uh uh at switches a switch is just a device that you can plug multiple computers together in and then the so-called firewall which you all have at home or even on your computers and software which just keeps bad stuff out and good stuff in so without further Ado I give you how the internet actually with some uh simplifications works foreign foreign for the first time in history people and are working together realizing a dream a uniting force that knows no geographical boundaries without regard to race Creed or color a new era where communication truly brings people together this is the dawn of the net want to know how it works click here to begin your journey into on that link you started a flow of information this information travels down into your own personal mailroom where Mr IP packages it labels it and sends it on its way each packet is limited in its size the mail room must decide how to divide the information and how to package it the package needs a label containing important information such as cinder's address receiver's address and the type of packet it is because this particular packet is going out onto the internet it also gets an address for the proxy server which has a special function as we'll see later the packet is now launched onto your local area network or Lan this network is used to connect all the local computers routers printers etc for information exchange within the physical walls of the building a pretty uncontrolled place and unfortunately accidents can happen the highway of the land is packed with all types of information these are IP packets Novell packets Apple talk packets they're going against traffic as usual the local router reads the address and if necessary lifts the packet onto another Network ah the router a symbol of control in a seemingly disorganized World here yeah very systematic uncaring methodical conservative and sometimes not quite up to speed but at least he is exact for the most part foreign as the packets leave the router they make their way into the corporate internet and head for the router switch a bit more efficient than the router the router switch plays fast and loose with IP packets definitely routing them along their way a digital Pinball Wizard if you will oh here we go as packets arrive at their destination they're picked up by the network interface ready to be sent to the next level in this case the proc the proxy is used by many companies as sort of a middleman in order to lessen the load on their internet connection and for security reasons as well as you can see the packets are all of various sizes depending upon their content foreign the proxy opens the packet and looks for the web address or URL depending upon whether the address is acceptable the packet is sent on to the internet there are however some addresses which do not meet with the approval of the proxy that is a corporate or management guidelines these are summarily dealt with we'll have none of that for those who make it on the road again foreign next up the firewall the corporate firewall serves two purposes it prevents some rather nasty things from the internet from coming into the intranet and it can also prevent sensitive corporate information from being sent out onto the internet once through the firewall a router picks up the packet and places it onto a much narrower Road or bandwidth as we say obviously the road is not broad enough to take them all now you might wonder what happens to all those packets which don't make it along the way well when Mr IP doesn't receive an acknowledgment that a packet has been received in due time he simply sends a replacement packet packet we are now ready to enter the world of the internet a spider web of interconnected networks which span our entire Globe here routers and switches establish links between Networks now the net is an entirely different environment than you'll find within the protected walls of your land out here it's the wild west plenty of space plenty of opportunities plenty of things to explore and places to go thanks to very little control and regulation new ideas find fertile soil to push the envelope of their possibilities but because of this Freedom certain dangers also lurk you'll never know when you'll meet the dreaded ping of special version of a normal request ping which some idiot thought of to mess up unsuspecting hosts the paths our packets take may be via satellite telephone lines Wireless or even transoceanic cable they don't always take the fastest or shortest routes possible but they will get there they eventually maybe that's why it's sometimes called the worldwide weight but when everything is working smoothly you can circumvent the globe five times over at the drop of a hat literally and offer the cost of a local call or less near the end of our destination we'll find another firewall upon your perspective as a data packet our wall could be could be Bastion of security or a dreaded adversary it all depends on which side you're on and what your intentions are the firewall is designed to let in only those packets that meet its criteria this firewall is operating on ports 80 and 25. all attempts to enter through other ports are closed for business Port 25 is used for mail packets while Port 80 is the entrance for packets from the internet to the web server inside the firewall packets are screened more thoroughly some packets make it easily through customs well others look just a bit dubious while the firewall officer is not easily fooled such as when this ping of death package yeah tries to disguise itself as a normal ping packet it's okay no problem have a nice day we are here bye for those packets lucky enough to make it this far the journey is almost over it's just a lineup on the interface to be taken up into the web server nowadays a web server can run on many things from a Mainframe to a webcam to the computer on your desk why not your refrigerator with a proper setup you can find out if you have the makings for chicken cacciatore or if you have to go shopping remember this is the dawn of the net almost anything's possible yeah one by one the packets are received opened and unpacked the information they contain that is your request for information is sent onto the web server application the packet itself is recycled ready to be used again and filled with your requested information addressed and sent out on its way back to you back past the firewall routers and on through to the internet back through your corporate firewall and on to your interface ready to supply your web browser with the information you requested that is this film pleased with their with their efforts trusting in a better world our trusty data packets ride off blissfully into the sunset of another day knowing fully they have served their masters will Now isn't that a happy ending so it does take some Liberties however hopefully even though we've been talking about packets and data in IP in Fairly abstract terms at least now you do have some visuals to latch onto as it relates to data actually getting from point A to point B are there any questions about the internet or that film yes when it says packets are what recycle that's one of these Liberties that doesn't really happen you don't really reuse bits you just recreate them so I think someone too with a lot of that film was having a lot a little too much fun with making their Graphics because kind of it's like all right we're done painting the packet um move on all right so yeah um so a ping of death actually so that does relate to something we looked at Monday when we looked at trace route that tool that showed us the path between point A and B the type of packet we were actually sending is something called a ping packet or more technically an icmp packet and that is a packet that is sometimes blocked that's why we saw the Stars instead of actual IP addresses and a ping of death is essentially a ping that's bigger than it's supposed to be according to the specification and years ago in particular computers were just not designed some computers were not designed with sufficient error checking so simply sending a packet too many bits over the internet to a server could just cause it to crash because it essentially overflows a buffer so they've rather fallen out of Vogue since all right so so we looked at HTML and this is itself just a markup language not a programming language but it allows us to start constructing web pages but only static web pages everything we did on Monday I had to manually type into my text editor G edit I then saved it and then I pulled it up in a web browser and recalled it even though it was inside of my Appliance the appliance is configured just like one of these web servers so it's addressed locally is localhost but if we were to give it a public IP address as you'll be able to do for your final project then we could actually anyone on the internet could actually visit that thing so recall that we did some fairly simple if ugly designs if I go into the appliance and I go into my J Harvard directory recall that we created this thing called public underscore HTML it's a little oddly named but that's sort of the global standard different web servers can call it different things but most servers do call it public HTML and then inside of here we left off with eyes.png which is is a graphics file in index.html and the latter is the thing that we actually wrote and the structure of this recall was as follows at the very top of this file we had an HTML doctype declaration so even though it has the Open brackets it's not technically a tag but that's sort of an uninteresting detail but all of these other things are in fact tags and the pattern was Open Bracket something close bracket unless a Tag's Behavior was to be modified by something called an attribute and attributes have values so the general Syntax for that was to say Open Bracket name of the tag space name of the attribute equals quote unquote and then the value of the attribute and you could have more attributes if HTML allows you you could have Foo equals bar in x equals y you simply separate them in this manner by spaces but you would look to some documentation or online reference to see what are the legitimate attributes for that particular tag and then we introduced one other thing that syntactically was a little different and that's because this is a slightly more modern feature of the web so we introduced a div tag which is just an invisible division a rectangle and these just typically help with layout of a page even though functionally they're not doing a huge amount here but if I wanted to make everything inside of this div tag a certain stylization like make everything red text well I can use something called CSS cascading style sheets and this is just a slightly more modern language still a markup of sorts not a programming language that allows you to sort of fine-tune the Aesthetics of your web page back in the day and frankly when that movie was made the only way you could really stylize your page is by saying fonts size equals quote unquote one font size equals two font size equals six and I think seven was the maximum size but these were all relative and folks like Netscape and Internet Explorer and other browsers just kind of arbitrarily decided that font size 6 will be oh I don't know 48 points and font size 2 will be 10 point but it was completely arbitrary and so if you pulled up a web browser to visit some web page and then looked at that same page in a different browser might look very very different so CSS was introduced for among other reasons to try to standardize the Aesthetics of web pages and make it a little easier to structure them so the pattern that is followed for these things called CSS properties is that they generally go in between quotes as values of the style attributes so the style attributes a little special and that you can put almost anything you want in these quotes from CSS and CSS says find the name of the property colon and then the value of the property so syntactically this is like mixing one language inside of another so it's a little odd at first but we're about to introduce a third language today so realize that what might still look like Greek actually just gets a little more familiar over time and in fact anytime you want to pick up some more tags it really will be as simple as Googling looking up one of the recommended resources on the course's website we're not going to introduce you to all of the possible HTML tags because this is just not all that interesting in fact all what we have here is pretty much representatives of all the HTML tags because we have the nesting idea where this is the unordered list with a list item we have a tag within a tag here with this anchor tag we have hyper references for links we have images so we have at least some of those most popular features of the web and even some of these do have attributes and then the anomaly recall was this guy the BR for line break tag and he was anomalous because he didn't have what he didn't have a closed tag and you could put it there that would be okay it just looks or feels a little silly you might see this but again this is sort of conceptually silly because it's a line break it's either there or not it's some Atomic concept it doesn't start and then end so you don't really need this but realize you might also see it written as this which is also okay you might see this slash at the end of the tag but inside of it and this too would be called an empty tag but for HTML5 the latest version of HTML folks decided that some of these conventions were just unnecessary typing so let's just say Open Bracket BR closed bracket and how do you know this honestly you consult the manual you consult some resource and in problem set seven we'll point you at some specific ones and the resources page already has a few of those so this then is sort of a canonical web page it is valid in that it's all correct it's indented which means it's nicely readable and know that we could do this if we wanted to check our web page I'm going to go ahead and copy this HTML L I'm going to go to validator.w3.org which is the website of the standards organization bunch of volunteers who essentially try to standardize the web in various languages and you can see that you can validate by something called a URI which is just sort of a more General uh URL it's essentially synonymous for our purposes you can validate a file by uploading an HTML file or you can validate your HTML by directly inputting it so I'm going to go ahead and just paste this in here so notice I've just pasted in the contents of a web page I'm going to go ahead and click check and what's nice about this tool and which will what will be very handy for problem set 7 and 8 in the final project is it's a nice little sanity check it will literally check your code and say yes this is good in green or you have some issues and if you have some issues you can scroll down and actually read what those issues are But realize that you're not going to be able to use the validator and tell it that the URL of your page is HTTP colon slash localhost slash tilde J Harvard because again local co-host is on your own machine it's not on the internet which means some website like that can't access it so realize that dichotomy there all right so let's make a slightly fancier web page and notice that what I've introduced here is just a couple of more tags I've got my body tag but inside of it now I've got some anchor tag and some H1 tags so the anchor tag just for demonstration purposes just has an empty href I don't really care what the URL is so I omitted it H1 stands for heading one and historically heading one made text on a page big and bold what a big means was not well defined it might have been 48 point it might have been smaller might have been bigger so here too is why CSS was invented so we have two tags though inside of the body and the point of this little snippet is to say that you can maybe kind of start to think of this now as a tree a data structure the indentation is for aesthetic purposes and readability but if you think about it ignore the doctype at the very top and focus only on the HTML element HTML says there can only be one root element so to speak and that element must be called HTML in all lowercase Open Bracket HTML close bracket and now if you look to the right and below it everything is indented but this indentation kind of suggests a hierarchy right the children of HTML if we infer from the indentation seem to be tagged called head and another tag called body and so we can actually think of the HTML tag or let's call it in elements now to make it more like a data structure the HTML element has two children head and body uh body in turn has two children the a the a element and the H1 elements and if we really want to get technical even the H1 element has a child but it's just a textual child it's literally the string Myspace header but we can think of that now as a tree so even though we've kind of written this top to bottom left to right we could redraw it either on paper or in memory as a more familiar tree structure so not a binary tree it's just a coincidence that some of these things have two children certainly a web page can have any number of children but if we kind of sketch this out as a tree first I just need some special note at the very top for reasons we won't get into now but the one that's important is this so-called root element called HTML it has two children so I drew two lines from to the over to the left to the right one is for head one is for body if we then look at head the head element has a one child called title and the title element has one child a textual one that whose value is just quote unquote my title and over here body is the same kind of story has two children a and H1 each of them has one child but notice this href why even though this is an arbitrary picture this isn't any kind of standard way to draw something why though did I draw probably this attribute called href off to the left and not below the anchor tag I feel like there's some murmuring here so just yeah yeah because it's like kind of part of the a tag and it's definitely not a child right it's not a tag unto itself it's not below it and indented so we at least need to draw in some other way and this is important only insofar as you think about how to implement this in a programming language if we are actually going to implement God forbidden c a web page like this we could actually create something called a node you know using a typedef and a struct and inside of that type def struct would have to be maybe the name of the element and maybe one or more pointers to its children but then also the notion of one or more attributes as well so this picture should conjure up at least potential design opportunities here even though in practice we're not going to use C with regard to the web rather we're going to use a language called PHP but when we get to JavaScript in a week or so this picture will actually become quite compelling because JavaScript itself is a programming language that's going to run inside of a browser that will write this code and it's going to manipulate the so-called Dom document object model so this tree that's depicted did here henceforth will refer to as a Dom and what's nice about JavaScript and what makes today's website so sexy compared to what they were five and ten years ago is because using this programming language called JavaScript you can take a tree like this and insert new nodes and remove nodes and move things around and make the website much much much more Dynamic right case in point you know we've all kind of gotten fairly used to something like Google Maps and if we search for 33 Oxford Street Cambridge Mass and hit enter a few interesting but things just happen that we now take for granted one there's clearly some autocomplete going on and my own computer definitely doesn't know about all possible 33 Oxford streets in the world so there's definitely some client server interaction going on there what does that mean there's a bunch of HTTP requests that just went from my browser to Google and back and they were giving me these little hints but what's compelling about this interface recall is that it's not reloading right there's still a lot of websites out there where if you want to see more content or look something up you click like a submit button or you click a link the whole page goes white for a moment and then the something starts spinning in your toolbar and then bam you see the results or and then you hit the back button or click another link right these websites are becoming increasingly uh user unfriendly because the bar has been raised by sites like Google because Google's using a technology called Ajax which is the use of JavaScript among other things and even this right you might not recall using something like MapQuest which is one of the first map tools out there or even Yahoo Maps where if you wanted to go up or down or left or right you click a stupid arrow and then that part of the map reloads and then you click it again and click it again and just a few years ago it was a really powerful thing when Google started actually you know letting you click and drag so that the whole website is not reloading just the contents of this Frame and now there's even Google Earth which makes things even more fancy and more 3D and interactive so the web is really getting much much more interesting so over the next couple of weeks we're are going to learn how these things work and how you can make them do your own bidding so without further Ado let's introduce just a couple more sort of mental things for with which to proceed and then dive into this programming language PHP so this is just the slightly more complex example of HTML that allows you to include other files in your web page so recall sharp include from C which allows you to include a header file inside of your own C file well HTML has a similar mechanism whereby if you want to put all of your cascading style sheet information font color red font color font size 24 point and so forth if you want to actually put it for design reasons in a separate file you can do that in a file called say styles.css which is also going to be in your public HTML directory and if you want to tell a browser that hey by the way you have to go and load another file before showing the user this web page you can use the link tag here link and then relve for relation equals style sheet and then href here is not a link it's saying go grab this other file called styles.css from the server and then use it to display this web page and we'll see in a moment what something like this might look like below that you see a script tag and you might be able to infer from this that this relates to this language called JavaScript so in a week or two when we're writing JavaScript code if we want to integrate it into our web page but not just copy and paste it into the actual HTML file but keep it separate for good design purposes and readability similarly can we include a file like this now just to give an example of how this works if we go to say even cs50.net and I just happen to know from the source code that if I go into let's see styles.styles.css that's not it I don't seem to know let's do this I don't remember where we put it so I'm going to go ahead and right click or control click view page source and you'll see that there's a whole bunch of stuff going on here and the formatting is actually pretty messy because a lot of the cs50 website is generated by a computer by programs written in PHP so we don't ever really manually type this out so if I kind of scroll through this and it's actually a little messy here that's what I was looking for I wanted this link tag which says the stylization for cs50's website is apparently in a folder called CSS not Styles that's what I got wrong and in a file called styles.css so let's go there so let me update the URL to be that and hit enter and what we'll see in here is more complexity than we'll dive into for now but you see a whole bunch of things let's find a simple one like this so you might recall that atop the course's website are often these things called announcements at the very top of the page and right here we have a mention of problem set five problem set six and so forth and this box always has a little FYI logo up there it's kind of gray background and Blue Links well the means by which we did this was in here law long story short we have a div somewhere in the page for this rectangular set of announcements we gave it what's called an ID which is just a unique identifier so that we could say there might be a dozen divs on the page this is the one we want to stylize so div sharp sign FYI and then the open quote open curly brace close curly brace and inside of that is again this thing called the CSS property the font size of those announcements we decided should be 77 percent now what does that mean well we gave some thought to what the default font size should be on the website and decided the announcement should be 77 percent the size of the default size and then how about this div sharp sign FYI a well a is the anchor tag this just refers to the very specific div in the web page where the announcements go well this is what gives the announcements their color the specific color we're using which is a light blue and text decoration none you might recall that on the web by default most links are underlined just to draw attention to them but this is falling out of Vogue so the means by which you disable underlining is a CSS property called text decoration colon none do not decorate the links and so this is again just a teaser of the sorts of things you can see and just realize that the cs50 site is more complex than a typical one and frankly if we go to something like Facebook let me go ahead and pull up view page Source I mean you'll see a whole bunch of HTML here also machine generated so it's a bit messy to read but if we scroll to the very top there's the doctype so that part of our story is true thus far that that's part of the web HTML is there there's some other attributes that we haven't used but those don't really change the story there it is title welcome to Facebook log in sign up or learn and here is some CSS so let's see what Mark and Company have been writing in the way of CSS if we go let's choose this I have no idea what this file name means but I'm going to copy the URL paste it and it looks like someone at Facebook wrote all of this CSS if I take this one here someone at Facebook wrote all of this CSS and again not interesting to glance at except there are some sort of self-explanatory things things about background images so that's how they have some image on the screen things about with and so forth and then if we go to JavaScript just as a teaser for next week let's go into this cryptically named URL here is a whole bunch of JavaScript code that someone wrote lets you completely freak out as to what's on the horizon um they wrote this JavaScript and then what did what's called obfuscating it or minifying it for reasons of bandwidth and cost and also sometimes intellectual property you might write JavaScript code in a very readable way this is not gonna this is not what we're going to write you use nice indentation nice variable names nice function names and the like but when it comes time to post that code on the internet clearly any random guy with a browser can look at it and also white space is useless for a computer it's only really useful for a human so to save money because transferring data certainly on Facebook scale costs money over time because they have to pay someone to transfer data and because they don't necessarily want Myspace or someone else copying all of their fancy features out right you can Minify it which does not make it impossible for smart people to figure out how your code works but it raises the bar and this too is a theme in security and intellectual property in general you really he can't keep someone from figuring out or understanding or even duplicating your handiwork but you can at least raise the bar so that it's more time consuming or more expensive than to figure it out than it would be if they just started from scratch and wrote it themselves but the exception there relates to anything server side so HTML CSS and as we'll see JavaScript is all client-side so to speak it's in the browser all the PHP we write all of the data based stuff we do is going to be server side and that's where really the intellectual property is and frankly Facebook's value is in its data and it's in its users not in some random JavaScript code that they've been writing as much as that might please users so let's take a look now at a familiar website and see if we can't Implement a little something like it ourselves so here is google.com I'm going to go ahead and do one thing first because Google is getting a little too fancy for its own good I'm going to go to search settings and I'm going to turn off Google instance Google instant as you may know is a feature introduced a few months ago and it all of a sudden like shows you your search results before you hit enter I want to kind of do an old school style so we don't get ahead of ourselves because I want to actually have to click a submit button before we actually search for something so here we have now the Google home page and I'm going to go ahead and search for something like Harvard enter and voila once I hit enter Harvard thankfully is the top hit here so now we actually see the page of search results but how did this happen well let's look a little closer here's before obviously the default home page and here's the URL notice that Chrome is being a little excessively user friendly what's really there is this but for reasons that Aesthetics and simplicity a lot of browsers are just hiding this but HTTP colon slash is implicitly there and now notice when I actually click submit after searching for Harvard enter notice that the URL changes to something much much more complex but it's all related to what I just did let me go ahead and copy this let me go ahead and open just a temporary text file file and paste this in just so we can see it a little more clearly and it's definitely an ugly URL but let's just throw away anything that confuses us so I have no idea what this is but it seems like it relates to English en is generally the um this shorthand notation for English Source I don't really know what HP is so I'm going to delete that b i w don't know what that is bih maybe Heights maybe there's a width thing going on here okay Q equals Harvard sounds familiar so Q query probably so let's leave that let me I don't oq I didn't type oq so let's get rid of that no idea what this is definitely have no idea what this number is so Google's doing a lot of stuff right they do advertising that's the technical explanation so this though this was like version one when Larry and Sergey first made Google it really did work as simply as this with one input coming from the user before all this era of advertising and the like and user tracking so let's see what happens if I just take this URL go back to a browser click enter so it actually still works so even sort of old school style this URL works and this is nice because I can kind of wrap my mind around this URL the other one's a little overwhelming so notice that by default the text field is being filled in with the word Harvard at the top I have google.com search question mark Q equals Harvard so let's tease these things apart so the domain name here is www.google.com um slash denotes the root of the hard drive the server that Google's using now in reality they have thousands of servers but let's simplify one server and so in that server's hard drive is apparently a file called search and that file is a program maybe it's written in PHP python C C plus plus who knows right now though generally Google does a lot of stuff in Python and other languages so slash search is the program and it turns out that the convention on the web is anytime you have a question mark after that question mark are the inputs to the server so just as in C you can provide inputs via the command line or or by using get string or similar and waiting at a prompt and typing enter the web the web Works in such a way that servers take input by way of URLs with question marks and then key value pairs after them so Q is the key equal sign separates it from its value which in this case is Harvard and if you have multiple ones they're separated by Ampersand so if I had x equals Y and W equals z we would just separate them by ampersands and that was I deleted recall a whole bunch of ampersands so that's how Google's apparently working but how did the web page lead me to that URL I didn't click a link I typed in the word Harvard hit enter and then magically this URL changed so let's go back to Google's home page and see if we can't make a little bit of sense of it so I'm going to view page source and oh my God this is going to be a lot of stuff to delete right so as an aside especially someone like Google there's fascinating scalability effects here if someone at Google so much just hits the space bar once which creates a single byte of white space and then everyone in the world proceeds to download that home page in the day suppose Google gets a billion hits the mere fact that some programmer hit the space bar means one billion extra bytes were sent from Google throughout the whole world that's a gigabyte just because someone hit the space bar so one of the things Facebook and Google and all of these big sites do is again they Minify their code they throw away white space they automatically shrink variable names so that it's not readable both for obscurity purposes but also for financial purposes so let's scroll down oh my God a lot of HTML here but that's okay let me actually go inside of the appliance and use a different browser because by default Firefox recall comes with some tools pre-installed we used one on Monday called live HTTP headers which just let us sniff the traffic going from browser to server and back but today I want to use an even more popular tool called Firebug so Firebug is a free plug-in for Firefox comes in the appliance but you can download it for your Mac or PC and what it allows you to do is actually look inside of web pages a little more neatly so I'm going to go ahead and again disable instant search because I want the old school Behavior save preferences and now I'm inside of uh the appliance I'm at google.com I'm going to right click or control click and notice once you install Firebug you have a special menu here that shows up called inspect element I'm going to click this and what this does is it opens a little window at the bottom of the browser that does a bunch of things but most of the most useful is it just cleans everything up it adds white space it adds indentation so as you're trying to learn how websites work or if you're trying to borrow someone else's design you can actually see much more neatly in this way so here we have the doctype Declaration here's the HTML tag here's the head tag and notice I can even collapse these things just to help stay sane as I'm exploring this so let's go into the body here it looks like there is a div tag an iframe tag a center tag you know I don't know what most of these are yet but Center probably means make this centered so we keep going keep going and here's the interesting one today so websites become Dynamic when they actually take user inputs they have text fields or drop down menus or checkboxes is all of these very familiar mundane things but this is what now makes the web interesting because the page can change every time I visit it if it has something called a form so if I scroll down here apparently there's a tag in HTML called form it can take a bunch of attributes one of which is name one of which is action well action has a value and the action attribute is defined in HTML documentation as being the URL to which you will be sent upon submitting a form so read the skim the manual that's what it says so this is sort of a shorthand URL because there's no HTTP colon slash the browser is going to assume that slash search refers to whatever server got me to this point it's going to assume the default of google.com now there's a bunch of distractions in here and apparently the this is the source of some of those crazy names we saw input oq AQ aqi AQL and so forth we'll notice that these are all hidden Firebug is being friendly and trying to gray them out just to draw my attention to the fact that these are inputs that are there but Google put them there they're not things that I can see but I want to see q and the form that I'm actually filling out so it turns out there's a table tag in HTML there's a table body tag there's a table row tag there's a table data tag and if I keep going in here notice that okay finally something a little more familiar there's more divs there's a br input but this is interesting there's an input tag an input tag that takes a bunch of attributes one of which is type equals submit this is what makes it a button that's clickable another of which is value so if you've ever wondered where the label from a button comes from actually no one's probably ever wondered that but now if you want to know the the label on these clickable buttons is coming precisely from this HTML and that I'm feeling lucky button that's been part of Google's history is right here as well now as an aside the nice thing about Firebug 2 is that you can actually Tinker with a website I can even say uh you know I can go into the HTML here and I can say I'm feeling say unlucky enter and voila I've changed google.com um obviously not I've just changed it locally but the value here is that I can actually Tinker with my websites with others just to understand how they work if you pull up google.com now it will still say I'm feeling lucky so what's the takeaway here it seems that this is the beginning of a dynamic website that is really a program it's a form this is the means by which we're getting input and now Google's providing the back end intelligence for searching so let's see if I can't now leverage the same idea and reinvent this wheel and customize it for my my own website uh let me go into um G edit here let me go ahead and create a new file I'm going to save this as google.html enter I'm going to go ahead and then do a bunch of familiar actually I'm going to go ahead and copy paste and then change some things so I'm going to call this cs50 search we're going to ditch yesterday's pink backgrounds we're going to get rid of all of this in fact so let's just get to the bare bones of a website here so now we have something pretty minimal and now I'm going to borrow this new trick I'm going to say I like that Center tag that's kind of friendly so let's do that and now I'm going to do a form tag a form needs a name it actually doesn't need a name so I'm going to skip that one but it needs an action search let me close this tag form and then this form has to have a few things and we didn't look at this one explicitly but there was another input type equals text and what was its thing let's take a look back at the HTML let's do a quick control click or right click and actually if you click on specific things