1 00:00:09,336 --> 00:00:10,756 >> This is CS50. 2 00:00:10,816 --> 00:00:15,146 This is the start of Week 8 and oh my god, have we got a lot 3 00:00:15,146 --> 00:00:16,856 of fun in store for the next few weeks. 4 00:00:16,856 --> 00:00:18,806 So by the end of today, you will be able 5 00:00:18,806 --> 00:00:21,696 to make this ridiculously annoying Internet medium called 6 00:00:21,696 --> 00:00:26,326 Hamster Dance, that has, who's soundtrack is available 7 00:00:26,326 --> 00:00:28,106 on the course's website under, lectures. 8 00:00:28,146 --> 00:00:31,096 But first a few announcements today before we get there. 9 00:00:31,096 --> 00:00:35,116 So one of your classmates is in the process of recruiting folks 10 00:00:35,116 --> 00:00:36,596 for the Harvard Digital Media Group. 11 00:00:36,596 --> 00:00:38,666 This is a group of students who get together, eat pizza, 12 00:00:38,966 --> 00:00:41,506 talk with themselves and with professionals in the industry 13 00:00:41,506 --> 00:00:43,396 about social, about digital media. 14 00:00:43,636 --> 00:00:47,546 If you would like to partake go to cs50.net and there's a sign 15 00:00:47,546 --> 00:00:49,896 up link on the course's home page at the moment. 16 00:00:50,156 --> 00:00:54,826 Also coming up is Hack Harvard, sponsored by the I3 Competition 17 00:00:54,826 --> 00:00:56,296 and the Undergraduate Counsel. 18 00:00:56,576 --> 00:00:59,416 The UC has put this together toward an end 19 00:00:59,416 --> 00:01:02,126 of giving you guys an off ramp from a course like CS50, 20 00:01:02,256 --> 00:01:04,906 so that if you tackle your final project over the next couple 21 00:01:04,906 --> 00:01:07,186 of months and you feel like, wow I'd really like to take this 22 00:01:07,186 --> 00:01:08,896 to the next level, I'd really like this 23 00:01:08,896 --> 00:01:12,306 to be the next Harvard FML or I Saw You Harvard or Facebook, 24 00:01:12,306 --> 00:01:13,296 beyond Harvard's campus. 25 00:01:13,576 --> 00:01:16,476 This is an opportunity to work during J-term with some 26 00:01:16,476 --> 00:01:17,656 of your friends or on your own. 27 00:01:17,656 --> 00:01:20,556 Perhaps you have some support from the Undergraduate Counsel 28 00:01:20,556 --> 00:01:23,326 in the I3 Competition so that if you need a bit of cash, 29 00:01:23,326 --> 00:01:25,486 if you need a bit of space, if you need a bit of advice, 30 00:01:25,486 --> 00:01:26,896 you have resources available 31 00:01:26,896 --> 00:01:29,056 to you well beyond the end of the semester. 32 00:01:29,056 --> 00:01:31,746 This is distinct from the CS50 Hackathon, to be clear, 33 00:01:31,986 --> 00:01:33,926 which is coming up in December and really is just going 34 00:01:33,926 --> 00:01:37,376 to be an opportunity for us as a course to get together from 8pm 35 00:01:37,376 --> 00:01:39,786 to 6am and work on final projects 36 00:01:39,786 --> 00:01:41,206 if you so choose to partake. 37 00:01:41,326 --> 00:01:43,366 So that's what's on the horizon there. 38 00:01:43,466 --> 00:01:46,446 The final project then. 39 00:01:46,676 --> 00:01:47,986 So this is the specification. 40 00:01:47,986 --> 00:01:49,886 There really should be no surprised since we talked 41 00:01:49,886 --> 00:01:52,126 about this in the first week and all the same information is 42 00:01:52,126 --> 00:01:55,216 in the syllabus, but do use this as your authoritative resource 43 00:01:55,216 --> 00:01:58,986 over the next couple of months as we plan for the final project 44 00:01:58,986 --> 00:02:02,286 and in turn the Hackathon and the CS50 Fair. 45 00:02:03,026 --> 00:02:03,776 You might be wondering, 46 00:02:04,066 --> 00:02:05,626 we haven't even done web programming, 47 00:02:05,626 --> 00:02:07,676 we haven't even finished the course, how am I supposed 48 00:02:07,676 --> 00:02:09,006 to figure out a project to work on? 49 00:02:09,216 --> 00:02:11,666 Well again, the goal of having this in your hands today is just 50 00:02:11,666 --> 00:02:12,826 to get you thinking about it. 51 00:02:12,826 --> 00:02:15,526 Gets you to start looking around campus, looking around you 52 00:02:15,526 --> 00:02:19,456 in life for possible ideas and it's also a chance to strike 53 00:02:19,456 --> 00:02:21,246 up a partnership with one or two friends, 54 00:02:21,526 --> 00:02:23,406 since the spec does allow you to work 55 00:02:23,406 --> 00:02:24,916 in a small team if you would like. 56 00:02:24,916 --> 00:02:27,556 So do read that over the course of this week and take note 57 00:02:27,556 --> 00:02:29,736 of the milestones, including a pre-proposal, 58 00:02:29,946 --> 00:02:32,006 which is simply an e-mail to your teaching fellow in a couple 59 00:02:32,006 --> 00:02:34,356 of weeks, that's just meant to get the juices flowing, 60 00:02:34,356 --> 00:02:36,846 give you an opportunity for a bit of preliminary feedback 61 00:02:36,846 --> 00:02:39,056 on the ideas you might be thinking about. 62 00:02:39,176 --> 00:02:42,496 Also, as we enter these last several weeks of the course, 63 00:02:42,496 --> 00:02:43,516 the goal is to make sure 64 00:02:43,516 --> 00:02:46,066 that you guys have some real world skills 65 00:02:46,066 --> 00:02:48,586 so that you don't exit the course and then wonder, 66 00:02:48,586 --> 00:02:49,816 how in the world am I ever going 67 00:02:49,816 --> 00:02:51,066 to write another computer program 68 00:02:51,066 --> 00:02:54,066 if I don't have a cloud.cs50.net account? 69 00:02:54,276 --> 00:02:56,206 Well rest assured that most everything we've been using 70 00:02:56,206 --> 00:02:58,106 in the course is very much industry standard. 71 00:02:58,106 --> 00:03:00,256 You can download most of the software we've been using 72 00:03:00,256 --> 00:03:02,996 onto your own laptops even and as a step toward that, 73 00:03:02,996 --> 00:03:06,996 you'll see that problem set 6, the spell checker tries 74 00:03:07,036 --> 00:03:08,916 to give you some exposure 75 00:03:08,916 --> 00:03:11,686 to just using perhaps a more user friendly tool. 76 00:03:11,686 --> 00:03:13,526 Some of you might be familiar with TextWrangler, 77 00:03:13,526 --> 00:03:15,436 it's a free text program for the Mac. 78 00:03:15,436 --> 00:03:16,866 It's similar in spirit to Notepad 79 00:03:16,866 --> 00:03:18,266 and those sorts of things. 80 00:03:18,266 --> 00:03:21,236 You can download it per problem set 6's directions. 81 00:03:21,276 --> 00:03:23,116 But what's really nice, if you never noticed, 82 00:03:23,386 --> 00:03:26,986 is that under it's file menu it actually supports opening files 83 00:03:26,986 --> 00:03:30,656 from an SFTP server and recall, that's a protocol you used 84 00:03:30,656 --> 00:03:34,056 for problem set 5 to move bitmap and jpeg files back and forth. 85 00:03:34,366 --> 00:03:37,356 So if I want to for instance, start working on problem set 6 86 00:03:37,356 --> 00:03:40,686 in my account, rather than have the file on my own laptop, 87 00:03:40,686 --> 00:03:43,456 I can go to, Open from SFTP server, 88 00:03:43,676 --> 00:03:48,266 I can type in cloud.cs50.net, I have to check the box for SFTP, 89 00:03:48,266 --> 00:03:51,596 lest it be insecure which won't work, my username and password. 90 00:03:51,596 --> 00:03:52,726 I then go ahead and click, Connect 91 00:03:53,146 --> 00:03:55,066 and what you see is a little graphical rendition 92 00:03:55,066 --> 00:03:58,106 of your home directory and I've got a bunch of junk in there, 93 00:03:58,106 --> 00:04:01,496 but right now I want pset6, maybe dictionary.c 94 00:04:01,496 --> 00:04:03,616 and now finally, all these weeks later, 95 00:04:03,616 --> 00:04:05,406 I have something that's a little more familiar, 96 00:04:05,406 --> 00:04:07,546 a little more versatile than something like Nano, 97 00:04:07,796 --> 00:04:10,886 so that you can now start work client side but still 98 00:04:10,886 --> 00:04:14,826 in a separate window by SSH-ing can you then run the familier 99 00:04:14,826 --> 00:04:15,846 commands like gdb and gcc 100 00:04:15,846 --> 00:04:18,896 and you can continue compiling your code 101 00:04:19,156 --> 00:04:20,506 in that familiar environment. 102 00:04:20,536 --> 00:04:21,816 But now you can do things 103 00:04:21,816 --> 00:04:25,196 like C syntax highlighted code client side, you can drag 104 00:04:25,196 --> 00:04:27,816 and cut and paste as usual and realize 105 00:04:27,846 --> 00:04:28,966 that though I'm using a Mac, 106 00:04:28,966 --> 00:04:32,896 there's a free program called Notepad++, which allows you 107 00:04:32,896 --> 00:04:35,096 to do something very similar in the PC world. 108 00:04:35,096 --> 00:04:37,586 So you don't have to do that, but do try to, 109 00:04:38,246 --> 00:04:39,676 do try your hand at that. 110 00:04:39,996 --> 00:04:42,776 So one comment then about this. 111 00:04:42,996 --> 00:04:45,506 So this isn't where I hang out at least, 112 00:04:45,506 --> 00:04:47,236 but this did come to our attention. 113 00:04:47,236 --> 00:04:48,336 An excerpt from Harvard FML. 114 00:04:48,336 --> 00:04:51,256 So I was in CS50 office hours for three hours last night 115 00:04:51,546 --> 00:04:54,476 and never got helped once, FML. 116 00:04:55,046 --> 00:04:57,296 So, I mean frankly, this is discouraging to see. 117 00:04:57,296 --> 00:04:59,666 Because this is certainly not the goal of having a team 118 00:04:59,666 --> 00:05:01,656 of 80 some odd teaching fellows in courses is 119 00:05:01,656 --> 00:05:04,486 to actually have you guys going unhelped in office hours. 120 00:05:04,826 --> 00:05:06,576 So realize this is a function of a couple of things. 121 00:05:06,576 --> 00:05:08,656 One, as many people as we are, 122 00:05:08,656 --> 00:05:10,476 we certainly have our own scheduling constraints 123 00:05:10,476 --> 00:05:13,226 that we do strive to spread out over the course of the week, 124 00:05:13,556 --> 00:05:17,136 but realize too that, if you are getting to office hours 125 00:05:17,136 --> 00:05:19,846 on Wednesday's and Thursday's in particular and you're finding 126 00:05:19,846 --> 00:05:22,306 that it's this crazy assembly line environment, 127 00:05:22,836 --> 00:05:25,076 realize that's kind of the nature of the beast 128 00:05:25,076 --> 00:05:27,436 and we do take care to have office hours earlier 129 00:05:27,436 --> 00:05:27,766 in the week. 130 00:05:27,876 --> 00:05:30,846 Fewer of them, on Monday's and Tuesday's and even Sunday's 131 00:05:31,096 --> 00:05:32,526 and do realize, if you're finding 132 00:05:32,526 --> 00:05:34,366 that you really need a more nurturing environment, 133 00:05:34,366 --> 00:05:36,886 frankly then this crazy Wednesday 134 00:05:36,886 --> 00:05:40,436 and Thursday nights environment allows for, do figure out a way 135 00:05:40,436 --> 00:05:42,866 to start the pset on Friday or on Sunday, 136 00:05:42,866 --> 00:05:45,536 so that you can take advantage of some greater attention 137 00:05:45,806 --> 00:05:48,106 that just by nature of the number of students 138 00:05:48,106 --> 00:05:50,426 on the class we can offer earlier in the week. 139 00:05:50,426 --> 00:05:53,326 But with that said, we recognize that it's one thing to say, 140 00:05:53,326 --> 00:05:56,636 please start earlier and it doesn't actually happen often. 141 00:05:56,906 --> 00:05:59,846 So we will also simultaneously adjust our hours to try 142 00:05:59,846 --> 00:06:02,556 to tail load things on Wednesday's and Thursday's 143 00:06:02,896 --> 00:06:04,796 to better handle the load. 144 00:06:04,796 --> 00:06:07,686 But do try to meet us halfway, since we are happy to work 145 00:06:07,686 --> 00:06:09,246 with you so individually. 146 00:06:09,766 --> 00:06:14,396 So, how do we get from nothing, an empty text file, to something 147 00:06:14,396 --> 00:06:15,666 like or hopefully frankly, 148 00:06:15,666 --> 00:06:16,866 something a little more compelling. 149 00:06:17,156 --> 00:06:18,726 So there's this thing called the Internet 150 00:06:18,916 --> 00:06:22,136 and today we start talking about it, the Web, 151 00:06:22,406 --> 00:06:24,796 but also other tools and languages. 152 00:06:24,796 --> 00:06:26,996 So we spent much of the semester focused on C, 153 00:06:26,996 --> 00:06:30,196 not because knowing C specifically is a lifelong 154 00:06:30,196 --> 00:06:30,906 skill, but rather 155 00:06:30,906 --> 00:06:33,546 that particular language we actually think does provide a 156 00:06:33,546 --> 00:06:35,546 very solid foundation for a lot 157 00:06:35,546 --> 00:06:38,986 of more common placed languages these days. 158 00:06:38,986 --> 00:06:41,036 I feel like I should probably move this off the screen, 159 00:06:41,036 --> 00:06:42,476 lest it become too mesmerizing. 160 00:06:42,926 --> 00:06:46,206 So we'll go back to this, which is very stimulating. 161 00:06:46,556 --> 00:06:49,526 So the goal really of the next couple of weeks is 162 00:06:49,526 --> 00:06:52,866 to help you realize that once you know one language like C, 163 00:06:52,866 --> 00:06:54,476 you can really boot strap yourself 164 00:06:54,476 --> 00:06:56,156 into other languages, other technologies. 165 00:06:56,156 --> 00:06:59,866 Again, as I said last week, I learned formerly C and C++ 166 00:06:59,866 --> 00:07:01,436 and a language called, LISP in CS50 167 00:07:01,436 --> 00:07:03,246 and 51 and then that was it. 168 00:07:03,416 --> 00:07:05,456 Ever since then I've picked up things as I go. 169 00:07:05,456 --> 00:07:07,606 I ask friends lots of questions, you Google around, 170 00:07:07,606 --> 00:07:09,716 you read a book, there's so many ways to learn this stuff. 171 00:07:10,016 --> 00:07:12,706 So one of the take aways for this week and next is going 172 00:07:12,706 --> 00:07:17,226 to be that you can absolutely pick up new languages quickly, 173 00:07:17,456 --> 00:07:19,756 once you understand the underlying fundamentals. 174 00:07:19,836 --> 00:07:22,276 So even though this week for the pset you're implementing this 175 00:07:22,276 --> 00:07:25,496 thing called a, hash table, next week you're going to just get 176 00:07:25,496 --> 00:07:28,146 to use a hash table, with one line of code 177 00:07:28,146 --> 00:07:30,876 and this language called PHP and another called JavaScript. 178 00:07:31,046 --> 00:07:33,116 We'll just give you a hash table whenever you want it. 179 00:07:33,116 --> 00:07:35,936 You won't need to implement that yourself from scratch. 180 00:07:35,936 --> 00:07:37,946 You can build on the shoulders of others 181 00:07:37,946 --> 00:07:40,806 and on years worth of other technology. 182 00:07:40,806 --> 00:07:42,446 So how do we get there? 183 00:07:42,736 --> 00:07:44,246 Well we need the right tool for the task. 184 00:07:44,446 --> 00:07:46,686 So today we introduce web programming and for 185 00:07:46,686 --> 00:07:47,796 that we have this language, PHP. 186 00:07:47,876 --> 00:07:50,486 This other language called, HTML, 187 00:07:50,486 --> 00:07:52,716 the latter of which is not a programming language 188 00:07:52,716 --> 00:07:54,946 because it can't tell the computer to do something, 189 00:07:55,226 --> 00:07:56,496 but it's a markup language 190 00:07:56,496 --> 00:07:57,816 and that it can tell the computer how 191 00:07:57,816 --> 00:07:59,376 to display something. 192 00:07:59,376 --> 00:08:01,096 It's an aesthetic language of sorts. 193 00:08:01,186 --> 00:08:03,686 But we need some place to put the code we're going 194 00:08:03,686 --> 00:08:04,786 to start writing and up 195 00:08:04,786 --> 00:08:07,146 until now you've been using cloud.SC50.net, 196 00:08:07,396 --> 00:08:09,476 even though you've been SSH-ing to that server, 197 00:08:09,676 --> 00:08:13,456 it turns out that it's available via another protocol called, 198 00:08:13,456 --> 00:08:16,316 HTTP and this is something you've been probably 199 00:08:16,316 --> 00:08:18,036 desensitized to over the years. 200 00:08:18,036 --> 00:08:21,156 But in the URL, in almost ever URL that you visit 201 00:08:21,156 --> 00:08:25,486 in a browser is, even if you didn't type it, http:// 202 00:08:25,486 --> 00:08:30,786 or https:// and that's, Hypertext Transfer Protocol, 203 00:08:31,046 --> 00:08:33,646 and this is just a language It's a set of, it's a protocol. 204 00:08:33,646 --> 00:08:37,206 A set of conventions that web browsers and web servers use 205 00:08:37,206 --> 00:08:40,316 to speak to one another in order to let you request a web page 206 00:08:40,526 --> 00:08:42,606 and let you get back that web page. 207 00:08:42,606 --> 00:08:44,496 And even though we've focus today and on Wednesday 208 00:08:44,726 --> 00:08:46,786 on the languages involved in this process, 209 00:08:46,786 --> 00:08:49,296 realize that there's some really juicy material in there 210 00:08:49,296 --> 00:08:51,656 and if you're liking computer science, realize you can go off 211 00:08:51,656 --> 00:08:53,956 in really neat directions in hardware and networking 212 00:08:54,206 --> 00:08:55,596 and we'll really just scratch the surface 213 00:08:55,656 --> 00:08:56,676 of some of that this week. 214 00:08:56,856 --> 00:08:58,546 But we need an Internet We need a bunch 215 00:08:58,546 --> 00:09:01,226 of computers somehow connected together that will get data 216 00:09:01,226 --> 00:09:04,546 from point A to point B and though this video you're 217 00:09:04,546 --> 00:09:06,486 about to see takes a few liberties 218 00:09:06,486 --> 00:09:10,086 with let's say accuracy, it does none the less paint a reasonable 219 00:09:10,126 --> 00:09:12,996 picture of what's actually going on on the Internet 220 00:09:13,146 --> 00:09:16,636 when data travels from point A to point B. 221 00:09:16,686 --> 00:09:19,436 So I give you, Warriors of the Net. 222 00:09:20,516 --> 00:09:25,196 [ video ] 223 00:09:25,696 --> 00:09:30,376 [ music ] 224 00:09:30,876 --> 00:09:34,836 >> He came with a message. 225 00:09:34,836 --> 00:09:34,903 [ music ] 226 00:09:34,903 --> 00:09:35,976 With a protocol. 227 00:09:35,976 --> 00:09:36,043 [Inaudible]. 228 00:09:36,043 --> 00:09:48,000 [ music ] 229 00:09:48,666 --> 00:09:51,886 He came to a world of cruel firewalls, 230 00:09:52,216 --> 00:09:57,136 uncaring routers and dangers far worse than death. 231 00:09:57,506 --> 00:10:05,596 He's fast, he's strong, he's TCP/IP and he's got your address. 232 00:10:07,896 --> 00:10:10,196 Warriors of the Net. 233 00:10:11,336 --> 00:10:12,956 >> So that's just the teaser trailer 234 00:10:12,956 --> 00:10:14,726 for what's actually a longer video 235 00:10:14,726 --> 00:10:16,086 that discusses how the Internet works. 236 00:10:16,086 --> 00:10:17,976 But for today, we're just going to take it at face value. 237 00:10:17,976 --> 00:10:19,516 That that is how the Internet works. 238 00:10:19,616 --> 00:10:19,996 All right? 239 00:10:19,996 --> 00:10:20,063 [ laughter ] 240 00:10:20,063 --> 00:10:23,856 So there is this, this protocol, this language called, TCP/IP, 241 00:10:23,856 --> 00:10:27,136 and this is again just a sort of standards that computers speak. 242 00:10:27,166 --> 00:10:30,076 Client computer like your laptops, server computers 243 00:10:30,076 --> 00:10:33,196 like the cloud, speak in order to move data from point A 244 00:10:33,196 --> 00:10:35,506 to point B. And what's neat about the Internet and networks 245 00:10:35,506 --> 00:10:37,296 in general is that there is years worth 246 00:10:37,296 --> 00:10:39,056 of interesting layering going on. 247 00:10:39,056 --> 00:10:40,806 We won't spend time on this in this class, 248 00:10:40,846 --> 00:10:43,536 but in CS143: Networks, we do spend more time on this. 249 00:10:43,846 --> 00:10:45,526 There's this layer called Ethernet. 250 00:10:45,566 --> 00:10:46,906 You're all probably familiar with the idea 251 00:10:46,906 --> 00:10:49,006 of an Ethernet cable, even if you don't use them anymore 252 00:10:49,216 --> 00:10:51,046 and that's pretty low level technology. 253 00:10:51,046 --> 00:10:54,086 Because it pretty much boils down to electricity flowing 254 00:10:54,086 --> 00:10:57,186 through a wire, actually transmitting what represent 0's 255 00:10:57,256 --> 00:11:00,166 and 1's and just to flash back to Week 0 and 1, 256 00:11:00,306 --> 00:11:01,656 well how do you actually send bits 257 00:11:01,766 --> 00:11:03,506 on a wire, bits on a network? 258 00:11:03,506 --> 00:11:06,296 You know is simple form you can imagine turning electricity on. 259 00:11:06,296 --> 00:11:08,226 So electrons are flowing to represent a 1 260 00:11:08,396 --> 00:11:10,226 and then turning it off, now you've got a 0. 261 00:11:10,226 --> 00:11:11,426 It's more sophisticated than that, 262 00:11:11,686 --> 00:11:14,386 but at least you can code 0's and 1's using electrical signal. 263 00:11:14,386 --> 00:11:15,626 So we'll take that for granted. 264 00:11:15,906 --> 00:11:19,026 Then on top of Ethernet you have something called IP, 265 00:11:19,096 --> 00:11:22,286 Internet Protocol, and this is a protocol, a set of standards, 266 00:11:22,496 --> 00:11:24,026 that says every machine 267 00:11:24,026 --> 00:11:26,376 on the Internet needs an unique address. 268 00:11:26,656 --> 00:11:31,846 A numeric address, generally known as an IP address. 269 00:11:32,036 --> 00:11:33,886 And this is just a number that's something 270 00:11:33,886 --> 00:11:36,496 of the form number.number.number.number. 271 00:11:36,696 --> 00:11:38,076 If you maintained your home router 272 00:11:38,076 --> 00:11:40,306 at home it probably looked a little something like this, 273 00:11:40,576 --> 00:11:42,976 because there are constraints on what numbers can be there. 274 00:11:42,976 --> 00:11:45,906 As an aside, each of those hash symbols represents an 9 275 00:11:45,956 --> 00:11:46,516 bit value. 276 00:11:46,516 --> 00:11:49,196 So that means each hash symbol is 0 through 255, 277 00:11:49,516 --> 00:11:50,546 with a few more constraints. 278 00:11:50,616 --> 00:11:54,026 The implication is that if you have 8 bits plus 8 bits plus 8 279 00:11:54,026 --> 00:11:55,816 bits plus 8 bits, that's 32, 280 00:11:55,816 --> 00:11:57,856 which gives us how many possible IP addresses? 281 00:11:57,856 --> 00:11:59,296 [ laughter ] 282 00:11:59,296 --> 00:12:04,266 It gives us 32 bits worth of address space, 283 00:12:04,266 --> 00:12:05,446 that means it gives us 4 billion. 284 00:12:05,446 --> 00:12:08,536 Right? 2 to the 32 is 4 billion possible IP addresses 285 00:12:08,536 --> 00:12:10,456 and scary thought, the world is running out. 286 00:12:10,666 --> 00:12:12,976 So there's a lot of doomsday sayers saying how things will 287 00:12:12,976 --> 00:12:14,966 start breaking down before long because we are running 288 00:12:14,966 --> 00:12:17,876 out of IP addresses, but thankfully there's a version 6 289 00:12:17,876 --> 00:12:20,456 of IP which uses 128 bit addresses, 290 00:12:20,716 --> 00:12:22,746 which will hopefully save the day when people start using it. 291 00:12:22,776 --> 00:12:25,496 But for now, all we care about is that there's Ethernet 292 00:12:25,496 --> 00:12:28,606 which gets data physically from A to B, there's IP which kind 293 00:12:28,606 --> 00:12:31,616 of assigns, which does assign an address to every computer 294 00:12:31,616 --> 00:12:34,416 on the Internet, much like the US Postal Service puts a unique 295 00:12:34,416 --> 00:12:37,446 address on your mailbox so mail can get from point A to point B, 296 00:12:37,756 --> 00:12:39,736 and then there's other mechanisms on top. 297 00:12:39,986 --> 00:12:40,946 One of them is called TCP. 298 00:12:41,016 --> 00:12:45,236 Hence the TCP IP protocol. 299 00:12:45,236 --> 00:12:49,026 TCP is just a protocol, a set of conventions that says, 300 00:12:49,386 --> 00:12:52,766 not only do I want data to flow from point A to point B, 301 00:12:53,026 --> 00:12:56,296 I want to make sure that data gets from point A to point B, 302 00:12:56,296 --> 00:13:00,046 so TCP's purpose in life is to keep track of all the data 303 00:13:00,046 --> 00:13:02,456 that flows across the Internet between points A and B 304 00:13:02,596 --> 00:13:05,766 and if any packets get lost or corrupted or dropped 305 00:13:05,766 --> 00:13:08,016 by a firewall, if they just disappear somewhere 306 00:13:08,016 --> 00:13:11,476 into the Ether so to speak, TCP's purpose in life is 307 00:13:11,476 --> 00:13:15,526 to tell my computer A, resend that same data to point B. 308 00:13:15,526 --> 00:13:18,636 And so this is why you either get an e-mail or you don't. 309 00:13:18,636 --> 00:13:20,426 You either download a file or you don't 310 00:13:20,426 --> 00:13:22,156 or at least part of a file. 311 00:13:22,456 --> 00:13:25,586 You don't necessarily get bits and pieces of an e-mail. 312 00:13:25,586 --> 00:13:27,076 It's mostly an all or nothing thing 313 00:13:27,076 --> 00:13:28,846 and that's largely the result of TCP. 314 00:13:29,196 --> 00:13:31,306 But there are other protocols that you can actually use. 315 00:13:31,536 --> 00:13:34,176 So we have Ethernet, we have IP, we have TCP 316 00:13:34,176 --> 00:13:36,096 and then finally we have HTTP. 317 00:13:36,096 --> 00:13:37,736 And so this layering is deliberate. 318 00:13:37,866 --> 00:13:41,026 The people whom invented HTTP, just wanted to assume 319 00:13:41,026 --> 00:13:43,206 that all this stuff on the bottom actually worked 320 00:13:43,206 --> 00:13:44,936 and got data from point A to point B, 321 00:13:45,136 --> 00:13:46,626 so we'll be focusing this week and next 322 00:13:46,626 --> 00:13:48,326 on using this highest level, 323 00:13:48,576 --> 00:13:52,016 HTTP and in turn this language called HTML. 324 00:13:52,086 --> 00:13:54,156 But just so you have a sense of what's really going 325 00:13:54,156 --> 00:13:56,216 on underneath the hood, I've gone ahead here 326 00:13:56,216 --> 00:13:57,836 and I've SSH-ed to a server. 327 00:13:58,176 --> 00:14:00,676 Let me go ahead and log back in and it turns out on a lot 328 00:14:00,676 --> 00:14:02,926 of Linux and Unix systems, there's a command called, 329 00:14:02,926 --> 00:14:05,386 Trace Route, which will trace the route between points A 330 00:14:05,386 --> 00:14:07,766 and B. What's actually pretty neat about this is 331 00:14:07,766 --> 00:14:10,306 that it helps us see if for diagnostic 332 00:14:10,306 --> 00:14:11,626 or pedagogical [assumed spelling] purposes, 333 00:14:11,626 --> 00:14:15,436 exactly what's going on between points A and B. 334 00:14:15,786 --> 00:14:18,466 So I do not obviously have a connection physically 335 00:14:18,466 --> 00:14:19,906 to say Stanford University. 336 00:14:19,906 --> 00:14:21,486 It's all the way over on the west coast. 337 00:14:21,686 --> 00:14:24,246 But there is this Internet and the Internet is composed of all 338 00:14:24,246 --> 00:14:26,676 of these things called routers, which are fancy computers 339 00:14:26,676 --> 00:14:29,486 that sit in data centers whose purpose in life it to take data 340 00:14:29,486 --> 00:14:32,756 in here, look at that data, look specifically at the IP address 341 00:14:32,756 --> 00:14:35,386 and realize oh, this IP address lives on the west coast, 342 00:14:35,576 --> 00:14:38,526 so a router then routes that packet that way, 343 00:14:38,576 --> 00:14:41,386 to the west coast and it might then reach another router 344 00:14:41,386 --> 00:14:42,496 who makes the same decision. 345 00:14:42,726 --> 00:14:45,956 So routers is kind of depicted by that little video there, 346 00:14:46,226 --> 00:14:47,926 move data in different directions. 347 00:14:47,926 --> 00:14:49,186 Left, right, top, down, 348 00:14:49,256 --> 00:14:51,556 depending on where they're destined geographically. 349 00:14:51,876 --> 00:14:54,426 So you can actually see these things called routers, 350 00:14:54,426 --> 00:14:56,616 not when you send an e-mail or pull up a web page, 351 00:14:56,846 --> 00:14:58,546 but if you do a bit of poking around. 352 00:14:58,546 --> 00:15:01,466 So I'm just at a command prompt here on a Linux system, 353 00:15:01,466 --> 00:15:03,376 that's owned by the Harvard Computer Society, 354 00:15:03,376 --> 00:15:04,496 one of the student groups on campus. 355 00:15:04,496 --> 00:15:05,626 I'm using them because most 356 00:15:05,626 --> 00:15:08,286 of FAS's systems don't let you do this, but their's do, 357 00:15:08,286 --> 00:15:09,736 which is a useful trick for this class. 358 00:15:09,736 --> 00:15:15,526 So I'm going to go ahead and run Trace Route, www.Stanford.edu 359 00:15:15,646 --> 00:15:17,916 and Enter and I see a whole bunch of output. 360 00:15:17,916 --> 00:15:19,756 Let me actually shrink this and rerun it. 361 00:15:19,756 --> 00:15:22,956 A whole bunch of output whereby every row 362 00:15:22,956 --> 00:15:26,086 in this output is numbered and this first row, 1, 363 00:15:26,276 --> 00:15:29,606 represents the first router on the Internet that my data, 364 00:15:29,796 --> 00:15:33,756 point A, reaches on it's way to point B, which is Stanford. 365 00:15:33,976 --> 00:15:36,386 So it looks like this first router doesn't have a name, 366 00:15:36,386 --> 00:15:38,396 because all I see are numbers in row 1 here. 367 00:15:38,626 --> 00:15:47,366 But it has an IP address 140.247., 140.247.89.130, 368 00:15:47,456 --> 00:15:48,976 that belongs presumably to Harvard. 369 00:15:48,976 --> 00:15:52,256 Because Harvard owns thousands of IP addresses, 370 00:15:52,256 --> 00:15:55,046 all of which start with 140.247. 371 00:15:55,266 --> 00:15:57,106 Now how long did it take to get to that router, 372 00:15:57,106 --> 00:15:59,446 which is probably in the science center or somewhere proximal? 373 00:15:59,726 --> 00:16:02,606 Looks like it took about 2 or 3 milliseconds and the fact 374 00:16:02,606 --> 00:16:03,756 that you see three numbers there, 375 00:16:04,006 --> 00:16:06,156 just means this program tried three times just 376 00:16:06,156 --> 00:16:08,406 to give me a sense of an average, 377 00:16:08,676 --> 00:16:09,776 in case there's an anomaly. 378 00:16:10,196 --> 00:16:11,086 Where does it go next? 379 00:16:11,416 --> 00:16:13,656 Well apparently this router, wherever it is, is connected 380 00:16:13,656 --> 00:16:18,106 to CoreSC1GWDL412, whatever that is. 381 00:16:18,376 --> 00:16:22,196 Well GW is shorthand notation for Gateway, which is synonymous 382 00:16:22,196 --> 00:16:25,226 with router, so it looks like Harvard has a second router, 383 00:16:25,226 --> 00:16:27,816 somewhere in the SC, Science Center, 384 00:16:28,016 --> 00:16:30,146 to which that router has some kind of connection. 385 00:16:30,406 --> 00:16:32,796 The next router is 128.103. 386 00:16:32,796 --> 00:16:35,796 something, that's also a prefix that Harvard owns. 387 00:16:36,196 --> 00:16:38,166 Any IP's in that range belong to Harvard. 388 00:16:38,346 --> 00:16:40,646 It doesn't have a name because the humans decided not 389 00:16:40,646 --> 00:16:41,746 to name it, but that's fine. 390 00:16:42,036 --> 00:16:46,906 But then we get to row 4, bdrgw, feels like Border Gateway, 391 00:16:46,906 --> 00:16:48,886 they're just being a little succinct with the names here. 392 00:16:48,886 --> 00:16:51,966 Gateway again is a router, border means it's 393 00:16:51,966 --> 00:16:54,326 on the periphery of Harvard's campus and sure enough, 394 00:16:54,326 --> 00:16:56,086 it's still in harvard.edu. 395 00:16:56,326 --> 00:16:57,806 But then it goes to row 5. 396 00:16:58,126 --> 00:17:02,206 nox300gw and this is actually something called Northern 397 00:17:02,206 --> 00:17:05,636 Crossroads, which is a super big data center in the northeast, 398 00:17:05,636 --> 00:17:09,256 where lots of Internet traffic comes into and then goes out of. 399 00:17:09,316 --> 00:17:11,006 So Harvard has a physical connection 400 00:17:11,006 --> 00:17:12,926 to this Northern Crossroads set up. 401 00:17:13,176 --> 00:17:15,046 Those guys in turn have a whole bunch 402 00:17:15,046 --> 00:17:17,016 of routers inside their network. 403 00:17:17,286 --> 00:17:18,546 But this is kind of interesting. 404 00:17:18,826 --> 00:17:21,576 Once we get from row 7 to row 8, 405 00:17:21,956 --> 00:17:23,256 where do we seem to be ending up? 406 00:17:24,246 --> 00:17:25,256 It looks like Kansas. 407 00:17:25,316 --> 00:17:28,136 So humans who run servers tend to name routers based 408 00:17:28,136 --> 00:17:31,396 on the geography or the nearest airport code, so KANS, 409 00:17:31,476 --> 00:17:34,036 I'm going to suppose is like you, Kansas. 410 00:17:34,086 --> 00:17:35,766 The next one is probably Houston. 411 00:17:35,766 --> 00:17:38,796 The other one, LOS, Los Angeles probably. 412 00:17:38,796 --> 00:17:41,746 And then after that, yes, LAX, denotes Los Angeles. 413 00:17:41,986 --> 00:17:43,946 So what's happened, which is really neat here, 414 00:17:44,216 --> 00:17:48,666 between rows let's say 7, which we know to be in the northeast 415 00:17:48,666 --> 00:17:52,016 and definitely row 10 or 11 where we're in LA, 416 00:17:52,436 --> 00:17:53,676 there is some kind of connection. 417 00:17:53,676 --> 00:17:56,446 Some really long wire between those two routers. 418 00:17:56,646 --> 00:17:59,366 Because notice how long it takes to get to row 11 here, 419 00:17:59,596 --> 00:18:02,336 80 milliseconds, which is up from 2 milliseconds 420 00:18:02,336 --> 00:18:03,856 when it was actually on Harvard's campus. 421 00:18:03,856 --> 00:18:07,146 So you can infer from the amount of time it's taking for the data 422 00:18:07,146 --> 00:18:10,666 to go from A to B, roughly how far these geographies are apart, 423 00:18:10,666 --> 00:18:12,366 assuming you're on super fast connections. 424 00:18:12,686 --> 00:18:16,096 These asterisks here just mean the router is in between point A 425 00:18:16,096 --> 00:18:18,206 and B, stopped paying attention to us. 426 00:18:18,246 --> 00:18:20,666 They started ignoring us at one point and that's generally 427 00:18:20,666 --> 00:18:22,256 for privacy or security reasons. 428 00:18:22,256 --> 00:18:23,186 But let's try another one. 429 00:18:23,186 --> 00:18:26,976 Let's go ahead and do Trace Route gmail.com. 430 00:18:26,976 --> 00:18:28,666 When you send an e-mail to someone at Gmail, 431 00:18:29,006 --> 00:18:30,506 looks like it's pretty close. 432 00:18:30,506 --> 00:18:34,006 Only 10 hops away, ten routers and it's a little harder 433 00:18:34,006 --> 00:18:35,746 to infer where this, oh LGA. 434 00:18:36,186 --> 00:18:38,896 Looks like Gmail has one or more routers, Google has one 435 00:18:38,896 --> 00:18:40,606 or more routers in New York. 436 00:18:40,636 --> 00:18:43,076 So it looks like Google has a data center somewhere 437 00:18:43,076 --> 00:18:45,556 on the east coast in New York, which makes intuitive sense 438 00:18:45,816 --> 00:18:48,296 and we get there in only 7 milliseconds. 439 00:18:48,436 --> 00:18:49,306 So that's pretty fast. 440 00:18:49,566 --> 00:18:50,236 What about CNN? 441 00:18:50,486 --> 00:18:52,466 Trace Route cnn.com. 442 00:18:52,936 --> 00:18:55,676 All right, here too we seem to be jumping around states. 443 00:18:55,676 --> 00:18:58,326 We're going from Harvard, to Boston, to New York, to DC, 444 00:18:58,406 --> 00:19:01,896 to Atlanta, to who knows where, but somewhere 445 00:19:01,896 --> 00:19:05,026 in there there is CNN's actual servers. 446 00:19:05,206 --> 00:19:07,656 But let's do one other trick, CNN.co.jp, 447 00:19:07,846 --> 00:19:10,886 which is the domain name for the Japanese version 448 00:19:10,886 --> 00:19:14,536 of CNN's website and what's kind of neat here if it cooperates, 449 00:19:14,856 --> 00:19:18,326 is we again go from Harvard, to Boston, to New York, New York 450 00:19:18,656 --> 00:19:22,846 and then wow, notice what's between rows 10 and 14. 451 00:19:24,756 --> 00:19:26,166 An ocean frankly. 452 00:19:26,366 --> 00:19:27,126 Right? So. 453 00:19:27,126 --> 00:19:27,286 [ laughter ] 454 00:19:27,286 --> 00:19:33,286 Right. We go from 7 milliseconds to 226 milliseconds and in fact, 455 00:19:33,806 --> 00:19:36,016 there is in fact Tokyo is embedded here 456 00:19:36,076 --> 00:19:36,876 in the domain name. 457 00:19:36,876 --> 00:19:41,836 So it looks like we're probably going over the Pacific Ocean, 458 00:19:41,836 --> 00:19:45,306 assuming that's what these stars are kind of hiding from us. 459 00:19:45,306 --> 00:19:46,756 Because I see no mention of Europe. 460 00:19:46,756 --> 00:19:47,916 Maybe if you go the long way, 461 00:19:47,916 --> 00:19:49,826 but in fact it might have hopped off the west coast. 462 00:19:49,826 --> 00:19:51,086 And you can play with this all day long. 463 00:19:51,366 --> 00:19:53,536 The routes can certainly change. 464 00:19:53,536 --> 00:19:55,526 This is what's nice about the Internet It was originally 465 00:19:55,526 --> 00:19:58,786 designed with militaristic goals in mind so that it's supposed 466 00:19:58,786 --> 00:20:00,336 to be resilient against failures. 467 00:20:00,336 --> 00:20:02,606 If you take out one or more of these routers, 468 00:20:02,746 --> 00:20:05,906 hopefully it's a nice mesh, as that video briefly showed, 469 00:20:06,096 --> 00:20:08,486 so that data can go off in different directions 470 00:20:08,486 --> 00:20:11,976 and this name, the World Wide Web, derives from this idea 471 00:20:11,976 --> 00:20:14,476 that there isn't just one connection between A and B, 472 00:20:14,626 --> 00:20:17,846 there is this web of connections that's fairly resilient these 473 00:20:17,876 --> 00:20:20,326 days, even when servers go down. 474 00:20:20,326 --> 00:20:21,926 So that's as much time as we'll spend 475 00:20:21,926 --> 00:20:24,756 on the underlying implementation 476 00:20:24,756 --> 00:20:27,516 of the Internet Henceforth we will now take for granted 477 00:20:27,766 --> 00:20:29,766 that there is this thing called an Internet 478 00:20:29,766 --> 00:20:32,446 So how do we actually go about using it? 479 00:20:32,446 --> 00:20:36,656 Well, when you pull up a Web browser, you are using a client, 480 00:20:36,656 --> 00:20:40,376 so this thing on the left, and a client is just the name given 481 00:20:40,376 --> 00:20:42,316 to any machine that's frankly not a server. 482 00:20:42,316 --> 00:20:45,356 The client, much like in a restaurant, request information 483 00:20:45,356 --> 00:20:47,606 of the server, the waiter or waitress, 484 00:20:47,856 --> 00:20:50,676 responds with that information or with that food. 485 00:20:50,676 --> 00:20:52,166 So it's the same kind of relationship. 486 00:20:52,476 --> 00:20:55,196 So here we just have a quick summary of what's going 487 00:20:55,196 --> 00:20:59,736 on when a web's browser connects to a web server and you can talk 488 00:20:59,736 --> 00:21:02,336 about machines being clients, my laptop is client, 489 00:21:02,336 --> 00:21:04,036 but you can also talk about software 490 00:21:04,036 --> 00:21:05,446 on a machine being a client. 491 00:21:05,536 --> 00:21:07,316 So a web browser is a client. 492 00:21:07,586 --> 00:21:09,566 It really reduces not to the physical thing 493 00:21:09,806 --> 00:21:13,066 but to what role they play in some two way relationship. 494 00:21:13,366 --> 00:21:15,346 So a client requests data of a server. 495 00:21:15,346 --> 00:21:16,846 What does it mean to request data? 496 00:21:17,506 --> 00:21:20,256 Well even though a normal person like us just goes 497 00:21:20,256 --> 00:21:22,656 to like cnn.com and then hits Enter. 498 00:21:22,966 --> 00:21:25,316 Well there's a little more technicality going 499 00:21:25,316 --> 00:21:26,376 on underneath the hood. 500 00:21:26,376 --> 00:21:27,946 What's really going on is 501 00:21:27,946 --> 00:21:32,596 that your browser is sending a message to cnn.com or rather 502 00:21:32,946 --> 00:21:35,586 to cnn.com's IP address, which you can figure 503 00:21:35,586 --> 00:21:37,916 out by asking something called a DNS server. 504 00:21:38,156 --> 00:21:40,196 So quick aside, there's these things called DNS, 505 00:21:40,416 --> 00:21:43,476 Domain Name System server, whose purpose in life is just 506 00:21:43,476 --> 00:21:45,886 to answer queries of the form, what is the IP address 507 00:21:45,886 --> 00:21:48,616 for cnn.com or here's an IP address, 508 00:21:48,906 --> 00:21:49,886 what is it's domain name? 509 00:21:50,076 --> 00:21:52,626 So it remaps those two things to one another. 510 00:21:52,916 --> 00:21:55,066 So once my browser knows the IP address, 511 00:21:55,066 --> 00:21:57,196 it sends a message frankly, as simple as this, 512 00:21:57,196 --> 00:22:00,916 get/ and then the language with which it wants to get it. 513 00:22:00,916 --> 00:22:02,876 So generally HTTP 1.1. 514 00:22:03,106 --> 00:22:04,226 What does, slash, denote? 515 00:22:04,426 --> 00:22:06,316 Well as you probably noticed in an URL, 516 00:22:06,436 --> 00:22:09,466 cnn.com almost always gets changed by your browser 517 00:22:09,746 --> 00:22:13,446 to cnn.com/ and if you go to cs50.net, 518 00:22:13,636 --> 00:22:17,456 it changes to cs50.net/, because / like on a local hard drive, 519 00:22:17,726 --> 00:22:20,016 generally denotes the route of the file system, 520 00:22:20,016 --> 00:22:22,206 much like on a Linux system it's similar in spirit 521 00:22:22,206 --> 00:22:24,556 to C: on a Window's PC. 522 00:22:24,896 --> 00:22:27,346 So that's the message that this client here 523 00:22:27,346 --> 00:22:29,576 on the left hand side, sends to the server. 524 00:22:29,716 --> 00:22:33,156 The server then responds with a whole bunch of text, 525 00:22:33,686 --> 00:22:36,836 with a text file containing a language called HTML. 526 00:22:37,126 --> 00:22:39,036 So HTTP is the protocol. 527 00:22:39,036 --> 00:22:41,146 The set of standards that says when you want 528 00:22:41,146 --> 00:22:43,826 to request a web page send a message like this 529 00:22:44,076 --> 00:22:45,146 from client to server. 530 00:22:45,616 --> 00:22:48,856 HTML is the language that just so happens 531 00:22:48,886 --> 00:22:51,116 to be embedded in the response. 532 00:22:51,326 --> 00:22:52,776 But as you know from using the Web, 533 00:22:52,776 --> 00:22:56,306 embedded in the response can be a graphic, a sound, a video. 534 00:22:56,496 --> 00:22:59,896 So HTTP doesn't care about what content's coming back, 535 00:22:59,976 --> 00:23:03,026 just how to request it and how to hand it back and we'll see 536 00:23:03,026 --> 00:23:04,736 that in more detail in just a moment. 537 00:23:04,956 --> 00:23:06,966 But let's see what kind of stuff is coming back. 538 00:23:07,126 --> 00:23:10,426 Well let's go to thecrimson.com and not focus so much 539 00:23:10,426 --> 00:23:13,886 on the content on the page, but the content underneath the hood. 540 00:23:14,166 --> 00:23:16,336 So I just went to Safari's view menu. 541 00:23:16,366 --> 00:23:18,436 You can do this with any browser and I'm going 542 00:23:18,436 --> 00:23:19,386 to scroll passed this fast, 543 00:23:19,576 --> 00:23:21,546 because the specifics aren't that interesting. 544 00:23:21,836 --> 00:23:25,296 But this gibberish or this Greek or however you want to view it, 545 00:23:25,296 --> 00:23:27,806 is something called HTML and in fact, 546 00:23:27,806 --> 00:23:30,086 it looks like there's some links on the Crimson's website 547 00:23:30,086 --> 00:23:32,706 to categories like, food and drink, football, for the moment, 548 00:23:32,706 --> 00:23:35,666 game recaps and they're all embedded in what looks 549 00:23:35,666 --> 00:23:38,646 like a fairly consistent structure. 550 00:23:38,646 --> 00:23:41,546 You've got an angled bracket, like a sideways triangle, 551 00:23:41,786 --> 00:23:45,896 the letter A, then the word class equals something, the href, 552 00:23:46,046 --> 00:23:48,246 turns out href is going to mean hyper reference 553 00:23:48,466 --> 00:23:50,236 and then a short URL. 554 00:23:50,396 --> 00:23:53,246 It's not a full URL because there's no mention of HTTP 555 00:23:53,496 --> 00:23:56,236 but the fact that these H ref's start with a slash here, 556 00:23:56,526 --> 00:23:58,666 just means that these URL's are relative 557 00:23:58,666 --> 00:24:01,696 to wherever the user currently is on the current server. 558 00:24:01,766 --> 00:24:03,836 Doesn't have to bounce the user to another server. 559 00:24:04,076 --> 00:24:05,306 We can do this for any website. 560 00:24:05,306 --> 00:24:09,186 If you go to cs50.net, oops, and view source, 561 00:24:09,536 --> 00:24:11,626 you'll see that too, our page is composed 562 00:24:11,626 --> 00:24:12,816 with the same kind of text. 563 00:24:12,976 --> 00:24:14,026 And this is the neat thing. 564 00:24:14,026 --> 00:24:16,066 It's a little scary at first perhaps, but the neat thing 565 00:24:16,066 --> 00:24:18,506 about the web is that it's so easy to learn new tricks 566 00:24:18,506 --> 00:24:20,256 and learn how other sites are implemented, 567 00:24:20,336 --> 00:24:22,106 because you can just look at their source code. 568 00:24:22,106 --> 00:24:24,916 And generally speaking, people don't consider HTML 569 00:24:25,146 --> 00:24:26,566 as intellectual content. 570 00:24:26,766 --> 00:24:30,076 Right? There's really not much intellectual ownership 571 00:24:30,106 --> 00:24:31,546 in the HTML you're marking up. 572 00:24:31,586 --> 00:24:32,986 There might be copyright of the data, 573 00:24:33,256 --> 00:24:35,316 but it's very much an environment where you can learn 574 00:24:35,316 --> 00:24:37,866 from the work of others and frankly, this is sort 575 00:24:37,866 --> 00:24:39,236 of the nature of the technology. 576 00:24:39,296 --> 00:24:42,716 If you are requesting data, as a web browser, for information 577 00:24:42,716 --> 00:24:46,936 from a server, the server obviously has to hand it to you 578 00:24:47,156 --> 00:24:51,206 so that you know actually what to show the user on the screen. 579 00:24:51,206 --> 00:24:53,956 Unlike programs written in C, where you have this opportunity 580 00:24:53,956 --> 00:24:57,646 to compile them into 0's and 1's, HTML is what we'll call 581 00:24:57,646 --> 00:25:00,926 and interpreted language, where it does not get turned into 0's 582 00:25:00,976 --> 00:25:03,866 and 1's from the server, rather it just gets sent raw. 583 00:25:03,866 --> 00:25:05,596 So when you're writing HTML source code 584 00:25:05,796 --> 00:25:09,066 and then request your web page from a browser to a server, 585 00:25:09,216 --> 00:25:12,346 what you get back is your HTML source code and that's going 586 00:25:12,386 --> 00:25:16,456 to be true for JavaScript and it's kind of going to be true 587 00:25:16,456 --> 00:25:18,396 for PHP, although thankfully with PHP, 588 00:25:18,396 --> 00:25:21,396 that language we'll see it executed on the server. 589 00:25:21,396 --> 00:25:25,196 It's not converted into 0's and 1's per say, but it is analyzed 590 00:25:25,276 --> 00:25:27,236 and executed on the server 591 00:25:27,416 --> 00:25:30,816 so that what the user sees is just some boring HTML output, 592 00:25:30,816 --> 00:25:33,966 not the intellectual property that is my PHP code. 593 00:25:33,966 --> 00:25:36,736 So in short for now, HTML is a mark up language. 594 00:25:36,736 --> 00:25:39,616 It's an aesthetic language that says how to display things 595 00:25:39,616 --> 00:25:41,456 on the screen and we'll start doing this ourselves 596 00:25:41,456 --> 00:25:44,516 in a moment, PHP is a true programming language, 597 00:25:44,516 --> 00:25:47,176 with four loops and wild loops and functions and variables 598 00:25:47,176 --> 00:25:49,736 and all of that with which you can implement logic 599 00:25:49,976 --> 00:25:53,006 and actually take input and produce output from a user. 600 00:25:53,266 --> 00:25:54,996 So let's actually see what's going 601 00:25:54,996 --> 00:25:58,886 on when I visit a site like, oh we can do the Hamster Dance. 602 00:25:59,296 --> 00:26:02,736 Let's go to, let me go ahead and open up Firefox. 603 00:26:02,736 --> 00:26:04,766 So even though the course doesn't really care what browser 604 00:26:04,766 --> 00:26:07,656 you like to use, you can use any one you want, 605 00:26:07,656 --> 00:26:10,446 Firefox frankly has a really nice set of development tools. 606 00:26:10,446 --> 00:26:12,986 So what you'll see in Problem Set 7 later this week, 607 00:26:13,226 --> 00:26:16,396 is that we recommend that you use some freely available tools. 608 00:26:16,396 --> 00:26:17,956 Because it really makes it easier, 609 00:26:17,956 --> 00:26:20,176 if not a little more fun, to develop websites. 610 00:26:20,176 --> 00:26:21,846 Because you can see a lot more of what's going 611 00:26:21,846 --> 00:26:23,696 on underneath the hood, specifically, 612 00:26:23,746 --> 00:26:25,346 I've installed something called Firebug, 613 00:26:25,426 --> 00:26:27,726 which literally puts a bug in the bottom right hand corner 614 00:26:27,726 --> 00:26:30,336 of my screen and then if I click it I get this menu 615 00:26:30,546 --> 00:26:32,406 that actually allows me to look at what's going 616 00:26:32,406 --> 00:26:34,726 on underneath the hood with various websites. 617 00:26:34,726 --> 00:26:36,346 Without having to look at the mess 618 00:26:36,596 --> 00:26:38,776 that I just showed you, the raw source code. 619 00:26:38,776 --> 00:26:43,246 So let's go ahead to I think it was called WebHamster.com? 620 00:26:43,976 --> 00:26:44,636 Yes, that's it. 621 00:26:44,956 --> 00:26:46,956 Let me pull up Firebug and it turns out, 622 00:26:46,956 --> 00:26:48,566 this web page is actually pretty simple. 623 00:26:48,566 --> 00:26:49,806 I'll show you the raw source code. 624 00:26:50,096 --> 00:26:52,716 This is sort of like websites 1990's style. 625 00:26:52,716 --> 00:26:54,026 It's pretty darn simple, 626 00:26:54,026 --> 00:26:55,916 even though you might not understand all the syntax yet, 627 00:26:56,436 --> 00:27:00,036 but if I go over to this tab here, the Net tab, 628 00:27:00,336 --> 00:27:01,586 notice what's about to happen. 629 00:27:01,586 --> 00:27:02,386 Right now it's blank. 630 00:27:02,386 --> 00:27:05,446 I'm going to reload the page and in a moment, I'm going to see, 631 00:27:05,506 --> 00:27:08,426 line by line, a referenced, 632 00:27:08,526 --> 00:27:12,366 a record of every file that's requested by an HTTP. 633 00:27:12,726 --> 00:27:16,126 So in other words, I can see what I predicted verbally, 634 00:27:16,396 --> 00:27:18,056 goes on any time you visit a web page. 635 00:27:18,056 --> 00:27:18,576 So here we go. 636 00:27:18,576 --> 00:27:20,936 Reload. And it looks like, sure enough, 637 00:27:21,236 --> 00:27:23,696 to download this web page, it was necessary 638 00:27:24,016 --> 00:27:26,376 to make six HTTP requests. 639 00:27:26,926 --> 00:27:29,586 Each of those requests is from browser to server, 640 00:27:29,586 --> 00:27:31,246 asking the server for a different file. 641 00:27:31,516 --> 00:27:32,806 Let's look at the very first one. 642 00:27:33,086 --> 00:27:35,696 It looks like the very first one is the original one 643 00:27:35,696 --> 00:27:39,316 that I typed, get the whole URL, WebHamster.com 644 00:27:39,556 --> 00:27:42,046 and now notice what comes back is this. 645 00:27:42,046 --> 00:27:44,216 Let me actually zoom out a little bit. 646 00:27:44,216 --> 00:27:47,316 Let me go ahead and show you this. 647 00:27:47,366 --> 00:27:52,876 View, got to click a little, tiny link here, view source. 648 00:27:53,296 --> 00:27:55,016 So it's a little small, so I'm going to zoom in. 649 00:27:55,216 --> 00:27:56,666 I kind of lied a moment ago 650 00:27:56,666 --> 00:28:00,046 when I said all the browser sends is get/http/version 651 00:28:00,046 --> 00:28:01,486 number, there's a few more details, 652 00:28:01,516 --> 00:28:03,586 but most of them are uninteresting in my defense. 653 00:28:03,886 --> 00:28:07,246 And so this first line is literally what my browser sent 654 00:28:07,416 --> 00:28:09,996 to the server WebHamster.com, after figuring 655 00:28:09,996 --> 00:28:12,476 out it's IP address and that is just shorthand notation 656 00:28:12,476 --> 00:28:14,146 for give me the default web page, 657 00:28:14,146 --> 00:28:16,096 give me the so-called homepage that lives 658 00:28:16,096 --> 00:28:17,626 by convention at just slash. 659 00:28:18,016 --> 00:28:20,836 But the browser did send some additional information that I, 660 00:28:20,836 --> 00:28:21,996 the human did not provide, 661 00:28:22,056 --> 00:28:24,806 this information sent any time you visit a web page 662 00:28:25,116 --> 00:28:29,096 Specifically the web browsers reminds the server what host 663 00:28:29,096 --> 00:28:31,836 name or what domain name the user actually typed 664 00:28:31,836 --> 00:28:32,516 into the browser. 665 00:28:32,726 --> 00:28:35,026 This is useful as an aside, because in the world, 666 00:28:35,416 --> 00:28:37,896 in the real world you can buy or you can pay, 667 00:28:37,936 --> 00:28:39,826 you can rent web hosting space. 668 00:28:39,826 --> 00:28:40,586 Storage space. 669 00:28:40,586 --> 00:28:42,076 Like a cloud account for websites. 670 00:28:42,466 --> 00:28:43,996 But they're on shared servers. 671 00:28:43,996 --> 00:28:46,626 Where a company might have ten or a hundred other customers, 672 00:28:46,626 --> 00:28:47,946 all with their own domain names. 673 00:28:48,306 --> 00:28:51,086 Thankfully anytime a browser requests a web page, 674 00:28:51,286 --> 00:28:53,756 it's supposed to tell the server, I want slash, 675 00:28:54,196 --> 00:28:57,386 but specifically for this web site, WebHamster.com 676 00:28:57,636 --> 00:29:01,466 and this way the server can distinguish my requests 677 00:29:01,466 --> 00:29:04,206 from another customer's request, from another customer's request. 678 00:29:04,206 --> 00:29:06,556 That's called shared web posting, which might pertain 679 00:29:06,556 --> 00:29:08,626 to some of your final projects if you guys decide to try 680 00:29:08,626 --> 00:29:09,836 to commercialize thereafter 681 00:29:09,836 --> 00:29:11,836 or just make them live on passed the course. 682 00:29:12,116 --> 00:29:14,506 Then there's this stuff, user agent, you might have heard 683 00:29:14,506 --> 00:29:16,796 that most websites know what browser you're using, 684 00:29:16,796 --> 00:29:19,496 what operating system you're using, 685 00:29:19,496 --> 00:29:20,816 what plug ins you have installed, 686 00:29:21,036 --> 00:29:23,626 that's because your browser is very willingly giving 687 00:29:23,626 --> 00:29:26,306 up that information every time you request a web page. 688 00:29:26,306 --> 00:29:29,226 Most any web site can tell you what version of Mac OS 689 00:29:29,226 --> 00:29:30,966 or Windows you're running, what browser you're running, 690 00:29:31,236 --> 00:29:33,326 as well as you're IP address, obviously, 691 00:29:33,326 --> 00:29:34,776 otherwise the data couldn't get back to you. 692 00:29:35,036 --> 00:29:37,166 So there's a lot of juicy information websites know 693 00:29:37,166 --> 00:29:37,596 about you. 694 00:29:37,866 --> 00:29:40,296 Some of this stuff is technical and not all that interesting. 695 00:29:40,296 --> 00:29:43,396 But it relates to how the page is encoded, whether 696 00:29:43,396 --> 00:29:45,876 or not it's compressed and a few other details. 697 00:29:45,936 --> 00:29:48,506 But what comes back ultimately, is the response. 698 00:29:48,596 --> 00:29:51,346 So if I actually scroll back up here and look 699 00:29:51,346 --> 00:29:55,146 at this response tab, you see exactly the source code 700 00:29:55,416 --> 00:29:56,026 that came back. 701 00:29:56,246 --> 00:29:57,376 So when you request an URL, 702 00:29:57,376 --> 00:30:00,756 what you're really getting back is a file that might be a gif, 703 00:30:00,756 --> 00:30:03,986 it might be a jpeg or it might be a text file who's file 704 00:30:03,986 --> 00:30:07,956 extension is usually by convention, .html and inside 705 00:30:07,956 --> 00:30:10,236 that text file is just a bunch of stuff like this. 706 00:30:10,576 --> 00:30:12,116 But it follows a common structure. 707 00:30:12,116 --> 00:30:14,386 Let me look at the very top of the server's response 708 00:30:14,676 --> 00:30:17,966 and we'll see that almost every website out there does 709 00:30:17,966 --> 00:30:21,686 in fact start with an open bracket, html closed bracket, 710 00:30:21,906 --> 00:30:24,866 then inside of that or next to that is open bracket head, 711 00:30:24,986 --> 00:30:28,046 for the head of the web page, followed by open bracket title 712 00:30:28,046 --> 00:30:30,546 and then the actual title and then this curiosity. 713 00:30:30,766 --> 00:30:33,196 It turns out that html is very panantic [assumed spelling]. 714 00:30:33,196 --> 00:30:35,716 When you tell the browser, start doing something, 715 00:30:36,256 --> 00:30:38,276 you almost always have to tell the browser later, 716 00:30:38,506 --> 00:30:39,786 stop doing something. 717 00:30:40,136 --> 00:30:42,916 So if I reinterpret what I'm seeing here, 718 00:30:42,916 --> 00:30:44,466 this open bracket html, 719 00:30:44,736 --> 00:30:48,156 this pretty much is the html telling the browser, 720 00:30:48,396 --> 00:30:49,476 here comes some html. 721 00:30:49,586 --> 00:30:51,526 Get ready to display it in the familiar way. 722 00:30:51,996 --> 00:30:54,606 Open bracket head closed bracket says to the browser, 723 00:30:54,606 --> 00:30:56,056 here comes the head of the web page, 724 00:30:56,056 --> 00:30:59,376 get ready to display the title and some other stuff. 725 00:30:59,376 --> 00:31:02,426 Here comes the title with open bracket title closed bracket, 726 00:31:02,726 --> 00:31:05,486 the title is to be Hamster Dance and that's the word, 727 00:31:05,486 --> 00:31:07,616 those are the words that you see at the very top of the window. 728 00:31:07,936 --> 00:31:10,666 But then when you have a tag, as these things are called, 729 00:31:10,666 --> 00:31:11,956 anything between brackets, 730 00:31:12,186 --> 00:31:13,686 angled brackets, is called a tag. 731 00:31:14,086 --> 00:31:17,436 Anytime that tag starts with a forward slash and then ends 732 00:31:17,436 --> 00:31:20,776 with the same word that the previous tag started with, 733 00:31:21,086 --> 00:31:22,226 that's kind of like the opposite. 734 00:31:22,616 --> 00:31:24,996 It says, stop displaying the title. 735 00:31:25,116 --> 00:31:28,916 So this is start the title, stop the title and so accordingly, 736 00:31:28,916 --> 00:31:31,246 this is generally called a start tag, the title tag, 737 00:31:31,516 --> 00:31:35,116 this is called an end tag or an open tag and a closed tag. 738 00:31:35,116 --> 00:31:36,126 So long as you have some notion 739 00:31:36,126 --> 00:31:38,246 of symmetry doesn't really matter what you call them. 740 00:31:38,616 --> 00:31:39,586 Then we have this thing. 741 00:31:39,586 --> 00:31:40,546 The body tag. 742 00:31:40,546 --> 00:31:43,036 So there's mainly two big parts to a web page. 743 00:31:43,036 --> 00:31:46,066 There's the head in which very little tends to go, 744 00:31:46,176 --> 00:31:49,096 like the title and then we'll see some stuff called cascading 745 00:31:49,166 --> 00:31:51,206 style sheets and some other stuff called JavaScript, 746 00:31:51,266 --> 00:31:53,576 but for the most part the head is very small. 747 00:31:53,576 --> 00:31:56,886 In the web page it's the body where is really 99% 748 00:31:56,886 --> 00:32:00,266 of the content usually, so the body tag says, 749 00:32:00,436 --> 00:32:02,476 here comes the body of the web page 750 00:32:02,736 --> 00:32:04,226 But notice this interesting thing. 751 00:32:04,586 --> 00:32:08,186 It turns out that tags, kind of like functions 752 00:32:08,286 --> 00:32:10,236 in C, can be parameterized. 753 00:32:10,556 --> 00:32:13,136 You can modify the default behavior of their, 754 00:32:13,886 --> 00:32:16,616 you can modify their default behavior by passing 755 00:32:16,616 --> 00:32:19,386 in something similar in spirit to argument or parameters, 756 00:32:19,656 --> 00:32:21,666 but in this world they're called attributes 757 00:32:21,986 --> 00:32:23,836 and any attribute is a key word, 758 00:32:23,836 --> 00:32:28,266 like bgcolor = quote unquote and then some value. 759 00:32:28,306 --> 00:32:32,716 So now you can probably guess, bgcolor is, background color. 760 00:32:32,756 --> 00:32:35,076 Why? Just some people, ten to fifteen years ago, 761 00:32:35,076 --> 00:32:37,886 decided this is what we'll denote the background color 762 00:32:37,886 --> 00:32:39,446 of a page, bgcolor for short 763 00:32:39,766 --> 00:32:41,146 and then there's this quote unquote. 764 00:32:41,146 --> 00:32:42,016 This is the value. 765 00:32:42,236 --> 00:32:44,676 Turns out you could have write hard coded words 766 00:32:44,676 --> 00:32:45,626 like quote unquote white, 767 00:32:45,786 --> 00:32:47,416 quote unquote black, quote unquote red. 768 00:32:47,586 --> 00:32:50,236 There's a few colors that are just so common 769 00:32:50,236 --> 00:32:51,846 that every browser knows what they are. 770 00:32:52,206 --> 00:32:54,266 But if you want to be a little more sophisticated, 771 00:32:54,446 --> 00:32:59,216 you can actually use hexadecimal notation and FFFFFF happens 772 00:32:59,216 --> 00:33:02,686 to represent, so white, that's a lot of red, that's a lot 773 00:33:02,686 --> 00:33:05,496 of green, that's a lot of blue, which together, like the spectra 774 00:33:05,496 --> 00:33:07,696 of light, gives you the white color. 775 00:33:07,696 --> 00:33:12,326 And if by contrast you did 000000, you'd get black and just 776 00:33:12,326 --> 00:33:17,806 like pset5, if you did FF0000, you would get a lot of red. 777 00:33:17,806 --> 00:33:20,206 So you can very quickly make some pretty hideous web pages 778 00:33:20,466 --> 00:33:23,746 but you can use these so called hexadecimal codes to be precise 779 00:33:23,856 --> 00:33:24,966 as to what they look like. 780 00:33:25,216 --> 00:33:27,536 So I'm not going to focus on too much more of this Web Hamster, 781 00:33:27,536 --> 00:33:29,516 because they're actually using a slightly older syntax. 782 00:33:29,836 --> 00:33:32,356 We're going to be using in the course or at least promoting 783 00:33:32,356 --> 00:33:34,956 in the course, the latest and greatest version of HTML, 784 00:33:34,956 --> 00:33:35,866 which is called HTML5. 785 00:33:36,486 --> 00:33:38,096 This is what Steve Jobs and others have kind 786 00:33:38,096 --> 00:33:39,866 of been stomping their foot about people using. 787 00:33:40,126 --> 00:33:43,456 The nice thing about HTML5 is it's a little simpler 788 00:33:43,736 --> 00:33:46,746 than HTML4, which is sort of last year's version. 789 00:33:46,976 --> 00:33:49,266 But I should disclaim that HTML5 as a language, 790 00:33:49,266 --> 00:33:50,476 isn't quite finalized. 791 00:33:50,556 --> 00:33:51,396 The world tends to take 792 00:33:51,396 --> 00:33:53,666 like five years before they ever decide on the new version 793 00:33:53,666 --> 00:33:54,976 of anything in the computer world. 794 00:33:55,366 --> 00:33:57,046 But if you've ever heard 795 00:33:57,046 --> 00:34:00,346 that iPhone's don't display Flash video 796 00:34:00,546 --> 00:34:04,496 but they do display HTML5, what that means is that websites 797 00:34:04,586 --> 00:34:06,076 that support, like the iPhone 798 00:34:06,076 --> 00:34:08,316 and these other devices have been designed 799 00:34:08,316 --> 00:34:09,676 with a certain version of the language. 800 00:34:09,676 --> 00:34:11,756 But the nice thing is it's by no means Apple specific, 801 00:34:11,756 --> 00:34:15,216 this language, HTML5, it just happens to be Apple decided. 802 00:34:15,386 --> 00:34:16,746 We're going to support this one. 803 00:34:16,746 --> 00:34:19,866 And it is to be sort of the next iteration. 804 00:34:19,906 --> 00:34:21,576 So we will teach you the latest and greatest. 805 00:34:21,876 --> 00:34:23,726 And with it you can actually do some neat things. 806 00:34:23,726 --> 00:34:26,866 So even though we're talking for the moment about a web browser, 807 00:34:27,116 --> 00:34:29,886 so this here, not to sound like an Apple fan boy here, 808 00:34:30,096 --> 00:34:34,996 this is an iPad, but using some fairly simple HTML 809 00:34:34,996 --> 00:34:37,816 and as we'll see next week, a language called JavaScript. 810 00:34:38,296 --> 00:34:39,716 This is not a native application. 811 00:34:39,716 --> 00:34:42,396 This isn't something I downloaded from the App Store, 812 00:34:42,586 --> 00:34:44,686 it's just a website that I'm visiting with Safari. 813 00:34:45,026 --> 00:34:47,256 And if my network cooperates and I hit Play here, 814 00:34:47,256 --> 00:34:50,756 what we did is we went ahead and implemented the same CS50, 815 00:34:50,756 --> 00:34:54,726 come on, the same CS50 video interface, 816 00:34:55,206 --> 00:34:57,566 come on, don't embarrass me. 817 00:35:00,516 --> 00:35:01,926 Try one more reload. 818 00:35:02,136 --> 00:35:03,056 Network is a little spotty. 819 00:35:03,856 --> 00:35:05,566 Come on. Play. 820 00:35:07,046 --> 00:35:09,046 Come on. There we go. 821 00:35:09,396 --> 00:35:12,186 OK, so if you've ever used CS50's videos 822 00:35:12,186 --> 00:35:14,906 that have the slide synchronized transcripts to the side, 823 00:35:15,096 --> 00:35:18,016 well we package this all up using the same language, HTML5. 824 00:35:18,016 --> 00:35:19,966 This other language for next week, namely. 825 00:35:19,966 --> 00:35:21,406 >> This is CS50. 826 00:35:21,406 --> 00:35:22,656 My name is David Malan. 827 00:35:22,656 --> 00:35:26,456 >> So that was some eight weeks ago. 828 00:35:26,696 --> 00:35:30,216 So in short, even though we'll focus conversationally mostly 829 00:35:30,216 --> 00:35:31,546 on web browsers, realize 830 00:35:31,546 --> 00:35:34,046 that these exact same technologies now are being used 831 00:35:34,046 --> 00:35:37,686 to design sites for Android, for iPhones, for Blackberry, 832 00:35:37,916 --> 00:35:39,576 this again is very distracting. 833 00:35:39,576 --> 00:35:41,066 Sorry about that. 834 00:35:41,136 --> 00:35:43,286 And so realize that what's really cool 835 00:35:43,286 --> 00:35:45,806 about the Web these days is just how universal it is. 836 00:35:45,806 --> 00:35:49,186 You don't have to worry about compiling your code for a Mac 837 00:35:49,186 --> 00:35:52,776 or for a PC, we're really now able to develop applications 838 00:35:53,016 --> 00:35:55,826 that are pretty much independent of the operating system 839 00:35:55,826 --> 00:35:58,686 and the hardware that the user actually has, 840 00:35:58,686 --> 00:36:00,176 which is pretty darn exciting. 841 00:36:00,176 --> 00:36:02,866 So let's make our simplest of web pages 842 00:36:02,866 --> 00:36:04,706 in this language called HTML. 843 00:36:04,706 --> 00:36:07,126 So we have set up the cloud in such a way 844 00:36:07,336 --> 00:36:09,266 that using your same current cloud accounts, 845 00:36:09,266 --> 00:36:12,606 you can start making websites and you can develop problems 846 00:36:12,606 --> 00:36:15,356 that seven and eighth year and also your final projects 847 00:36:15,386 --> 00:36:19,096 and know now too, if you would like to go out and get for $10 848 00:36:19,096 --> 00:36:23,026 or $20, sort of a fun domain name like, isawyouharvard.com 849 00:36:23,026 --> 00:36:25,666 or harvardfml.com, you can buy these things fairly 850 00:36:25,666 --> 00:36:27,536 inexpensively these days on a yearly basis. 851 00:36:27,876 --> 00:36:30,046 Realize that for final projects, we'll let you 852 00:36:30,046 --> 00:36:32,506 and we'll show you how to map that domain name 853 00:36:32,586 --> 00:36:36,786 to your cloud account so that when people visit mywebsite.com, 854 00:36:36,976 --> 00:36:39,426 it's actually being hosted on the cloud, 855 00:36:39,486 --> 00:36:41,116 even though the world knows your website 856 00:36:41,116 --> 00:36:43,126 under whatever favorite name you've chosen. 857 00:36:43,126 --> 00:36:44,896 The upside of this is that if you decide 858 00:36:44,896 --> 00:36:46,646 to continue your projects after the course 859 00:36:46,646 --> 00:36:49,066 or commercialize them, you can maintain that same branding 860 00:36:49,066 --> 00:36:51,506 and just move the website off of the cloud eventually 861 00:36:51,756 --> 00:36:53,096 to your own commercial web host 862 00:36:53,096 --> 00:36:54,646 and we'll show you how to do all of that. 863 00:36:54,936 --> 00:36:56,676 It's actually relatively easy. 864 00:36:56,746 --> 00:36:57,706 So I'm going to go ahead and do this. 865 00:36:57,836 --> 00:37:01,196 It turns out that on typically a Linux system, 866 00:37:01,526 --> 00:37:03,066 you can create a special directory. 867 00:37:03,166 --> 00:37:06,256 A directory who's name is public_html 868 00:37:06,566 --> 00:37:10,206 and the server is usually set up in a way that anything inside 869 00:37:10,206 --> 00:37:12,546 of that folder is accessible on the World Wide Web. 870 00:37:12,916 --> 00:37:17,026 So I'm going to go ahead and do mkdirpublic_html 871 00:37:17,026 --> 00:37:19,986 and next week's pset, Problem Set 7, we'll walk you 872 00:37:19,986 --> 00:37:21,646 through these steps, so today we'll go quickly. 873 00:37:21,886 --> 00:37:23,076 I'm going to go ahead and hit Enter. 874 00:37:23,386 --> 00:37:26,756 That will create for me a public_html directory, 875 00:37:26,756 --> 00:37:29,526 which I can then cd into, change directory, 876 00:37:29,796 --> 00:37:32,176 and now I'm in my public_html directory. 877 00:37:32,236 --> 00:37:34,046 There might be a few other commands you'll have to write 878 00:37:34,046 --> 00:37:35,626 and we'll walk you through those in the problem set, 879 00:37:35,886 --> 00:37:40,006 but now I have some storage space for my personal web page. 880 00:37:40,006 --> 00:37:41,936 So I'm going to go ahead and make my first web page 881 00:37:41,936 --> 00:37:43,356 or I'm going to go ahead and open Nano. 882 00:37:43,526 --> 00:37:45,166 But you could do this in TextWrangler, 883 00:37:45,206 --> 00:37:47,086 but just so that we're not Mac biased, I'll go ahead 884 00:37:47,086 --> 00:37:48,096 and use Nano for today. 885 00:37:48,096 --> 00:37:50,836 So I'm going to go ahead and create a file called, 886 00:37:51,426 --> 00:37:55,696 Hello.html, .html being the world's convention 887 00:37:55,756 --> 00:37:59,016 for the file extension for web pages and I'm going 888 00:37:59,016 --> 00:38:02,656 to start the page as follows, doctypehtml. 889 00:38:03,116 --> 00:38:07,346 So this is kind of a stupid habit you should get 890 00:38:07,346 --> 00:38:10,556 into which just tells the browser, this is the version 891 00:38:10,556 --> 00:38:12,086 of html that I'm using. 892 00:38:12,376 --> 00:38:13,846 In this case here, the fact 893 00:38:13,846 --> 00:38:15,496 that I've not mentioned a version number, 894 00:38:15,746 --> 00:38:18,106 it's going to imply to the server or to the browser, 895 00:38:18,336 --> 00:38:19,656 here comes some HTML5. 896 00:38:20,106 --> 00:38:22,326 But now that doesn't mean here comes a web page, 897 00:38:22,326 --> 00:38:24,116 even though the syntax looks similar, 898 00:38:24,206 --> 00:38:26,706 humans just did not make very good choices here, 899 00:38:27,356 --> 00:38:29,896 to tell the browser here comes a web page, 900 00:38:29,956 --> 00:38:33,206 I need to actually say, html and then I'm going 901 00:38:33,206 --> 00:38:35,066 to get a little ahead of myself and I'm going 902 00:38:35,066 --> 00:38:37,096 to preemptively close that tag. 903 00:38:37,096 --> 00:38:40,016 So this web page right now, completely uninteresting. 904 00:38:40,186 --> 00:38:41,976 Because it's saying, here comes a web page, 905 00:38:42,236 --> 00:38:43,346 there goes the web page. 906 00:38:43,346 --> 00:38:45,836 There's no content actually there but it's a good habit 907 00:38:45,836 --> 00:38:48,436 to get into, just like you might put a curly brace open 908 00:38:48,436 --> 00:38:51,016 and a close curly brace in your C code and then go back and fill 909 00:38:51,016 --> 00:38:52,796 in the blank, same idea here. 910 00:38:53,076 --> 00:38:55,886 So let me go ahead and set up the head of this web page. 911 00:38:56,096 --> 00:38:58,696 I'm going to similarly preemptively open a tag 912 00:38:58,826 --> 00:38:59,476 and close it. 913 00:39:00,066 --> 00:39:01,916 Again just like in C, it's good habit, 914 00:39:02,056 --> 00:39:04,966 but not technologically required to have white space 915 00:39:04,966 --> 00:39:07,286 and indentation, but do do it for the sake of style. 916 00:39:07,286 --> 00:39:10,616 I'm going to make a web page that says, hello world. 917 00:39:10,676 --> 00:39:13,666 And now I'm done with my title, so I kind of do the opposite. 918 00:39:13,666 --> 00:39:17,036 Open bracket slash title, with no spaces in there. 919 00:39:17,036 --> 00:39:18,586 It's all one big string. 920 00:39:18,866 --> 00:39:20,376 All right, that's the head of my web page. 921 00:39:20,376 --> 00:39:21,766 Now let me go ahead and make the body. 922 00:39:22,066 --> 00:39:24,506 Let me close the body and now inside 923 00:39:24,506 --> 00:39:26,036 of the body I'm just going to say again, 924 00:39:26,036 --> 00:39:30,726 hello world welcome to my homepage. 925 00:39:30,926 --> 00:39:33,096 Just something silly like that and that's it. 926 00:39:33,406 --> 00:39:35,696 That is all that's required to make a web page 927 00:39:35,696 --> 00:39:37,036 on the World Wide Web. 928 00:39:37,036 --> 00:39:39,286 And to be honest, it kind of testified to this, 929 00:39:39,646 --> 00:39:44,796 first learned HTML in like 1995, 96, I was in Math 20. 930 00:39:45,116 --> 00:39:48,836 My math CA who I got friendly with, we went to the basement 931 00:39:48,836 --> 00:39:49,676 of the Science Center one day. 932 00:39:49,676 --> 00:39:50,536 He was like hey, you want to learn. 933 00:39:50,536 --> 00:39:51,161 [ laughter ] 934 00:39:51,161 --> 00:39:51,786 [ applause ] 935 00:39:51,786 --> 00:39:57,726 Can I finish the story? 936 00:39:57,726 --> 00:39:58,076 [ laughter ] 937 00:39:58,076 --> 00:40:00,956 Can we go to the computer lab in the basement 938 00:40:00,956 --> 00:40:02,546 of the Science Center and he's like, 939 00:40:02,546 --> 00:40:03,826 hey you want to learn HTML? 940 00:40:03,826 --> 00:40:05,166 I'm like sure, I'd love to learn HTML. 941 00:40:05,576 --> 00:40:09,196 And so we logged into one of the. 942 00:40:09,196 --> 00:40:09,396 [ laughter ] 943 00:40:09,396 --> 00:40:12,096 We logged into one of the lab computers and no joke, 944 00:40:12,096 --> 00:40:15,376 like 20 minutes later I had the most horrific looking website 945 00:40:15,376 --> 00:40:17,246 on the Internet But that was testament 946 00:40:17,246 --> 00:40:20,166 to just how easy this stuff actually was. 947 00:40:20,626 --> 00:40:21,626 So with that said, 948 00:40:21,626 --> 00:40:25,146 let's actually recreate what my math CA and I did 949 00:40:25,146 --> 00:40:26,276 that day, here on stage. 950 00:40:26,276 --> 00:40:26,343 [ laughter ] 951 00:40:26,343 --> 00:40:29,556 I'm going to go ahead and save this file. 952 00:40:29,556 --> 00:40:32,126 So Control O or rather, Control X. 953 00:40:32,126 --> 00:40:33,566 So let's get it back to the command line. 954 00:40:33,876 --> 00:40:35,296 I've got, hello.html. 955 00:40:35,296 --> 00:40:38,776 If I do LS, notice that I do have a file, hello.html, 956 00:40:39,016 --> 00:40:41,236 I also preemptively put a lectures directory there, 957 00:40:41,266 --> 00:40:42,046 but never mind that. 958 00:40:42,436 --> 00:40:44,446 So I'm now going to go to my web browser and I'm going 959 00:40:44,446 --> 00:40:50,296 to open a new page and I'm going to go to http://cloud.cs50.net 960 00:40:50,296 --> 00:40:53,076 and this is slightly stupid convention syntactically, 961 00:40:53,076 --> 00:40:55,876 but the world decided that ~username, 962 00:40:56,086 --> 00:40:58,246 would represent username's homepage 963 00:40:58,246 --> 00:40:59,486 on this particular server. 964 00:40:59,756 --> 00:41:01,986 So my username here today is CS50. 965 00:41:02,256 --> 00:41:09,536 So I'm going to go to http://cloud.cs50.net/~cs50/ 966 00:41:09,926 --> 00:41:11,966 and then hit Enter and unfortunately, 967 00:41:12,446 --> 00:41:13,846 I get this weird looking listing. 968 00:41:13,846 --> 00:41:15,676 Well this is just the contents of that directory. 969 00:41:15,886 --> 00:41:18,576 Turns out that I made this directory world readable, 970 00:41:18,636 --> 00:41:19,896 which probably wasn't smart. 971 00:41:19,896 --> 00:41:22,576 Because now the whole world can see whatever files I happen 972 00:41:22,576 --> 00:41:23,586 to have in this directory. 973 00:41:23,586 --> 00:41:27,126 Maybe not a big deal because you shouldn't be putting private 974 00:41:27,126 --> 00:41:30,506 files in a public directory, but this is not the behavior I want. 975 00:41:30,506 --> 00:41:31,796 But wait a minute, I have to remember, 976 00:41:32,036 --> 00:41:34,796 the file I created was, hello.html, 977 00:41:35,106 --> 00:41:37,206 so we need to include that in the URL. 978 00:41:37,206 --> 00:41:41,246 So I'm going to go to /hello.html, Enter. 979 00:41:41,896 --> 00:41:43,216 Now, problem number two. 980 00:41:43,256 --> 00:41:45,356 So you don't have permission to access, 981 00:41:45,676 --> 00:41:47,836 hello.html, on this server. 982 00:41:47,986 --> 00:41:49,396 And notice some other curiosities. 983 00:41:49,396 --> 00:41:51,036 I'm being reminded of the name of the server. 984 00:41:51,036 --> 00:41:52,326 Statement of the obvious. 985 00:41:52,566 --> 00:41:53,456 But port 80. 986 00:41:53,456 --> 00:41:54,916 You actually might have seen this number 987 00:41:54,916 --> 00:41:57,176 in that little Warriors of the Net video a moment ago. 988 00:41:57,486 --> 00:42:00,046 Turns out that there are of course all these services 989 00:42:00,046 --> 00:42:02,706 on the Internet The Web, e-mail, instant messaging, 990 00:42:02,966 --> 00:42:07,096 VOIP services, all these fun applications that run on top 991 00:42:07,096 --> 00:42:10,466 of the Internet and I'm consciously putting my hand 992 00:42:10,466 --> 00:42:13,476 up here to distinguish it from Ethernet and IP and TCP and all 993 00:42:13,476 --> 00:42:15,756 that on top of the Internet, run all of these services 994 00:42:16,086 --> 00:42:18,236 and the only way a computer knows 995 00:42:18,326 --> 00:42:20,556 which service you actually want is 996 00:42:20,556 --> 00:42:21,966 that even though we didn't see it yet, 997 00:42:21,966 --> 00:42:26,086 any time a client connects to a server, it doesn't just connect 998 00:42:26,126 --> 00:42:29,146 to that IP address, it connects to a specific number. 999 00:42:29,146 --> 00:42:31,816 Something called a port number that's just a little hint 1000 00:42:31,816 --> 00:42:35,146 that says, not only do I want to connect to the cloud.cs50.net 1001 00:42:35,306 --> 00:42:37,936 or to cnn.com or the Crimson.com, 1002 00:42:38,206 --> 00:42:42,936 I specifically want the service that lives at port number 80 1003 00:42:43,306 --> 00:42:45,756 and port 80 by convention is the Web. 1004 00:42:45,966 --> 00:42:47,576 So 80 equals HTTP. 1005 00:42:47,576 --> 00:42:51,906 SSH you might have noticed, is what port number? 1006 00:42:52,796 --> 00:42:53,586 Twenty two. 1007 00:42:53,726 --> 00:42:55,596 So here already, we see how a server 1008 00:42:55,596 --> 00:42:59,236 like the cloud can have a web server on it running on port 80 1009 00:42:59,236 --> 00:43:03,566 and an SSH server running on it on port 22, because clients 1010 00:43:03,566 --> 00:43:07,376 like Putty and Terminal and now the Firefox and Safari, 1011 00:43:07,566 --> 00:43:11,866 know to send these additional numbers, 80 for Web, 22 for SSH, 1012 00:43:12,086 --> 00:43:13,866 now the server knows when it gets a request, 1013 00:43:13,866 --> 00:43:15,826 oh this should be handled by the web server, 1014 00:43:15,826 --> 00:43:17,806 oh this should be handled by the SSH server. 1015 00:43:17,806 --> 00:43:20,856 It's in this way that servers multiplex along multiple 1016 00:43:20,856 --> 00:43:23,406 requests that might be coming in on the same IP address. 1017 00:43:23,406 --> 00:43:24,986 So that's why we see 80 there. 1018 00:43:25,396 --> 00:43:28,026 Thankfully the world decided that in a web browser, 1019 00:43:28,026 --> 00:43:31,476 if you don't mention port 80, it's just assumed. 1020 00:43:31,476 --> 00:43:33,916 Otherwise our URL's would be unnecessarily ugly 1021 00:43:33,916 --> 00:43:36,416 and a little longer, but I can be pedantic [assumed spelling] 1022 00:43:36,466 --> 00:43:40,376 here and I can say after.net:80 and then hit Enter, 1023 00:43:40,586 --> 00:43:42,606 and that's actually going to lead to the same place. 1024 00:43:42,646 --> 00:43:45,086 It quickly disappears because it's inferred, 1025 00:43:45,416 --> 00:43:47,896 but it is in fact the same. 1026 00:43:47,896 --> 00:43:49,106 All right, still got a problem. 1027 00:43:49,106 --> 00:43:51,036 I'm really just stalling because I'm not sure what to do, 1028 00:43:51,156 --> 00:43:53,586 but wait a minute, I need to go back over to the server 1029 00:43:53,586 --> 00:43:57,436 and realize it's not enough to just say this folder is called, 1030 00:43:57,436 --> 00:44:00,426 public_html, I actually have to make sure that the files 1031 00:44:00,426 --> 00:44:02,136 within are world readable. 1032 00:44:02,476 --> 00:44:05,606 By default, I think we said in one of the earliest lectures, 1033 00:44:05,606 --> 00:44:08,986 when you create a file, it's owned by only you. 1034 00:44:09,206 --> 00:44:11,656 It's readable only by you and this is a good thing, 1035 00:44:11,656 --> 00:44:12,696 just for privacy sake. 1036 00:44:12,696 --> 00:44:14,726 You don't want to create some file and then have anyone 1037 00:44:14,726 --> 00:44:16,226 on the server be able to access it. 1038 00:44:16,506 --> 00:44:20,326 So here we see, recall from an earlier pset, is that output 1039 00:44:20,326 --> 00:44:23,446 of LS-L and notice on the left hand side here, 1040 00:44:23,446 --> 00:44:27,586 RW means read write, because it's RW all the way on the left, 1041 00:44:27,716 --> 00:44:30,876 that means only the owner, me, can read and write this file. 1042 00:44:31,176 --> 00:44:32,596 So I actually need to run a command 1043 00:44:32,596 --> 00:44:34,266 and there's a few commands I can run, 1044 00:44:34,526 --> 00:44:38,836 but generally they involve chmod, C H M O D, 1045 00:44:38,836 --> 00:44:42,806 for change mode and then I'm going to go ahead and say, A+R, 1046 00:44:43,096 --> 00:44:46,186 this means all, the whole world, plus R, read, 1047 00:44:46,426 --> 00:44:49,476 let the whole world read the file called, hello.html. 1048 00:44:49,846 --> 00:44:50,416 I hit Enter. 1049 00:44:50,776 --> 00:44:53,976 I then redo LS-L and now notice, sure enough, 1050 00:44:54,216 --> 00:44:56,986 I get read write access and then everyone else 1051 00:44:56,986 --> 00:44:59,116 in the world gets R, for read. 1052 00:44:59,516 --> 00:45:01,206 So now I'm going to go back to the website, 1053 00:45:01,686 --> 00:45:03,526 I'm going to go ahead and click reload 1054 00:45:04,076 --> 00:45:06,086 and wha-la [assumed spelling], my very first web page 1055 00:45:06,236 --> 00:45:08,596 on the Internet Well let's see quickly we can butcher this 1056 00:45:08,596 --> 00:45:10,386 and make it my first ugliest web page 1057 00:45:10,386 --> 00:45:12,136 on the Internet Well that's just some text, 1058 00:45:12,326 --> 00:45:13,306 but notice at the very top. 1059 00:45:13,426 --> 00:45:14,186 Here's the title. 1060 00:45:14,286 --> 00:45:16,896 So when I had the title tagged, inside my page, 1061 00:45:16,896 --> 00:45:18,836 that's where it ends up going, above the address bar. 1062 00:45:19,106 --> 00:45:21,676 Let's use bgcolor, this thing called an attribute. 1063 00:45:21,676 --> 00:45:23,066 So I'm going to re-open, hello.html. 1064 00:45:23,066 --> 00:45:26,256 I'm going to add some space there and say, 1065 00:45:26,256 --> 00:45:30,016 bgcolor equals quote unquote, let's say white. 1066 00:45:30,986 --> 00:45:32,776 Save. OK. Kind of pointless. 1067 00:45:32,816 --> 00:45:34,066 All right, so let's go back. 1068 00:45:34,856 --> 00:45:35,366 Let's say, black. 1069 00:45:35,946 --> 00:45:38,096 Save with Control O. OK, 1070 00:45:38,096 --> 00:45:39,686 pointless for a different reason. 1071 00:45:39,846 --> 00:45:41,646 Right? So you know, highlight the text, 1072 00:45:41,646 --> 00:45:43,246 but now I have a secret web page All right. 1073 00:45:43,246 --> 00:45:43,816 [ laughter ] 1074 00:45:43,816 --> 00:45:46,176 So, now I can do something like this. 1075 00:45:46,446 --> 00:45:48,456 Even though we saw all capital F's before, 1076 00:45:48,456 --> 00:45:49,976 doesn't matter, just be consistent. 1077 00:45:49,976 --> 00:45:51,436 All lowercase or all capitals. 1078 00:45:51,436 --> 00:45:52,526 This should give me what color? 1079 00:45:52,526 --> 00:45:54,436 All right, so this is red. 1080 00:45:54,436 --> 00:45:56,756 So again, even though in the bit mapped world 1081 00:45:56,756 --> 00:45:59,916 and Microsoft decided that an RGB triple would actually be 1082 00:45:59,916 --> 00:46:03,206 implemented as BGR for really no good compelling reason, 1083 00:46:03,486 --> 00:46:06,646 in the real world when you say RGB, you mean R G B. 1084 00:46:06,736 --> 00:46:09,606 So FF is R, 000 is GB. 1085 00:46:09,856 --> 00:46:10,916 So let's reload. 1086 00:46:10,996 --> 00:46:13,216 All right, it's getting pretty hideous. 1087 00:46:13,366 --> 00:46:16,006 Let's go ahead and try something else. 1088 00:46:16,146 --> 00:46:18,656 Let's say I want to make something bigger. 1089 00:46:18,906 --> 00:46:22,536 So it turns out I can use special tags called, H1. 1090 00:46:22,536 --> 00:46:25,956 So H1 stands for heading, 1 means the biggest heading. 1091 00:46:26,226 --> 00:46:28,606 I have to close it on the other side to be symmetric. 1092 00:46:28,606 --> 00:46:29,486 I'm going to save this. 1093 00:46:29,826 --> 00:46:32,826 And so now the text is going to stay the same, but the browsers 1094 00:46:32,826 --> 00:46:35,776 that support this language called HTML, have been designed 1095 00:46:35,776 --> 00:46:37,356 by their programmers to understand 1096 00:46:37,356 --> 00:46:41,276 that open bracket H1 means start making the following text big 1097 00:46:41,406 --> 00:46:42,556 and bold usually. 1098 00:46:42,646 --> 00:46:46,526 So if I reload the page now, in fact it is bigger and bolder. 1099 00:46:46,756 --> 00:46:48,986 If I want to put a second line of text, 1100 00:46:48,986 --> 00:46:52,196 let me go like this, H5. 1101 00:46:52,226 --> 00:46:54,456 H5 counter intuitively is smaller, so I'm going 1102 00:46:54,456 --> 00:46:57,756 to say now, Goodbye World! 1103 00:46:57,986 --> 00:47:00,006 Close H5. Save that. 1104 00:47:00,736 --> 00:47:01,546 Reload here. 1105 00:47:01,846 --> 00:47:03,326 And sure enough, it's smaller. 1106 00:47:03,586 --> 00:47:06,146 So I really haven't done anything terribly sexy, 1107 00:47:06,146 --> 00:47:08,806 but using now just this idea of a tag open and closed 1108 00:47:09,086 --> 00:47:10,646 and an attribute, can we start 1109 00:47:10,646 --> 00:47:13,296 to now control the construct of a web page. 1110 00:47:13,346 --> 00:47:17,626 So now why don't we go ahead and take a five minute break. 1111 00:47:17,836 --> 00:47:21,136 So before we continue our look at web programming, 1112 00:47:21,246 --> 00:47:22,866 this video is actually apropo [assumed spelling] 1113 00:47:22,866 --> 00:47:24,456 to the problem set that you just finished 1114 00:47:24,456 --> 00:47:26,286 or are still finishing up. 1115 00:47:26,386 --> 00:47:28,536 This is a video by some researchers 1116 00:47:28,536 --> 00:47:31,626 who presented novel techniques for resizing images. 1117 00:47:31,656 --> 00:47:34,796 But resizing images intelligently whereby you don't 1118 00:47:34,796 --> 00:47:38,116 just take an image that's too big and then crop it by cutting 1119 00:47:38,116 --> 00:47:40,516 out uninteresting parts of the photo over here 1120 00:47:40,776 --> 00:47:43,576 and you don't just scale it down thereby shrinking everything. 1121 00:47:43,786 --> 00:47:46,856 You try to remove some useless information like extra sky 1122 00:47:46,856 --> 00:47:48,636 or extra grass, that in terms 1123 00:47:48,636 --> 00:47:51,516 of information doesn't necessarily convey more meaning, 1124 00:47:51,756 --> 00:47:54,026 but doing this with a computer and doing this dynamically 1125 00:47:54,026 --> 00:47:56,596 with an arbitrary photograph, is non trivial. 1126 00:47:56,696 --> 00:47:59,516 You can certainly do it with Photo Shop and you can do it 1127 00:47:59,516 --> 00:48:01,626 by hand, touching things up, air-brushing things, 1128 00:48:01,916 --> 00:48:03,416 but there are algorithms that they presented 1129 00:48:03,416 --> 00:48:06,746 in a very well known research conference is 1130 00:48:06,746 --> 00:48:10,436 about doing this dynamically and actually reducing images 1131 00:48:10,436 --> 00:48:13,606 by throwing away content that again, does not contribute much. 1132 00:48:13,606 --> 00:48:15,956 So it's just about 4 minutes and it gets increasingly neat, 1133 00:48:15,956 --> 00:48:17,826 I think, some of the demonstrations that they show. 1134 00:48:17,826 --> 00:48:19,716 So one of your classmates passed this along to us. 1135 00:48:19,716 --> 00:48:20,186 [ video ] 1136 00:48:20,186 --> 00:48:22,376 >> Seam carving for content aware image resizing. 1137 00:48:24,326 --> 00:48:26,136 Digital media today has the ability 1138 00:48:26,136 --> 00:48:27,936 to support dynamic page layouts. 1139 00:48:28,446 --> 00:48:30,326 By changing the window or display size, 1140 00:48:30,576 --> 00:48:32,286 we can change the layout of a document. 1141 00:48:32,686 --> 00:48:34,706 However, images embedded in a document, 1142 00:48:34,886 --> 00:48:36,846 typically remain rigid in size and shape. 1143 00:48:37,266 --> 00:48:40,376 Resizing important to fit images into different displays. 1144 00:48:41,526 --> 00:48:44,136 Current techniques including cropping or scaling are limited 1145 00:48:44,136 --> 00:48:46,456 in their abilities to capture the image content. 1146 00:48:47,096 --> 00:48:51,326 We present a method for content-aware resizing of images. 1147 00:48:51,766 --> 00:48:54,986 Our technique enables resizing while adapting the image content 1148 00:48:54,986 --> 00:48:55,496 and layout. 1149 00:48:55,956 --> 00:48:57,506 This is sometimes called, retargeting. 1150 00:49:02,476 --> 00:49:06,386 We also define the flexible multi size representation 1151 00:49:06,386 --> 00:49:08,996 for images that supports continuous resizing. 1152 00:49:11,726 --> 00:49:14,646 An image can be shrunk in a non uniform manner while preserving 1153 00:49:14,646 --> 00:49:17,166 it's features, but it can also be extended beyond it's 1154 00:49:17,166 --> 00:49:20,696 original size. 1155 00:49:21,276 --> 00:49:23,526 Instead of scrolling through images that do not fit 1156 00:49:23,526 --> 00:49:26,016 in a given display, we gracefully resize them 1157 00:49:26,176 --> 00:49:30,836 to fit inside the window. 1158 00:49:31,406 --> 00:49:34,226 For example, assume that we need to change the width of an image. 1159 00:49:34,656 --> 00:49:36,766 The simplest way to do this is to remove columns 1160 00:49:36,766 --> 00:49:37,956 of pixels from the image. 1161 00:49:38,636 --> 00:49:41,036 The best column to remove would be the least noticeable 1162 00:49:41,036 --> 00:49:42,246 or least important column. 1163 00:49:43,596 --> 00:49:46,076 We can search for this column by defining and importance 1164 00:49:46,076 --> 00:49:47,416 or energy function on the image. 1165 00:49:47,716 --> 00:49:50,336 In this example we used the gradient magnitude of the image. 1166 00:49:51,576 --> 00:49:52,776 Next we look for the column 1167 00:49:52,776 --> 00:49:55,256 which contains the least energy and remove it. 1168 00:49:55,256 --> 00:49:57,416 However, using such an approach quickly leads 1169 00:49:57,416 --> 00:49:58,466 to serious artifacts. 1170 00:49:59,196 --> 00:50:01,086 Therefore instead of using rigid column, 1171 00:50:01,166 --> 00:50:04,666 we search for connected paths of pixels or seams, from one side 1172 00:50:04,666 --> 00:50:07,396 of the image to the other that contain the least energy. 1173 00:50:08,556 --> 00:50:11,446 This can be done using a simply dynamic programming algorithm 1174 00:50:11,486 --> 00:50:13,286 as described in the paper in both vertical 1175 00:50:13,286 --> 00:50:14,446 and horizontal directions. 1176 00:50:15,986 --> 00:50:18,766 Here is another example of an image, it's energy function 1177 00:50:18,766 --> 00:50:22,546 and the least noticeable horizontal and vertical seams. 1178 00:50:23,596 --> 00:50:27,016 By successively removing horizontal and vertical seams, 1179 00:50:27,116 --> 00:50:29,536 the image can be resized in a non uniform manner. 1180 00:50:30,846 --> 00:50:33,626 The order of seam removal in an image defines an order 1181 00:50:33,626 --> 00:50:34,786 on the pixels of the image, 1182 00:50:35,126 --> 00:50:38,236 by storing the simple indexing information we create content 1183 00:50:38,236 --> 00:50:39,666 to where multi size images. 1184 00:50:40,266 --> 00:50:46,776 In this image we color all pixels in order 1185 00:50:46,776 --> 00:50:49,786 of their seam removal from blue to red. 1186 00:50:52,016 --> 00:50:54,836 To enlarge an image we first calculate seams 1187 00:50:54,916 --> 00:50:56,376 as if we were to shrink the image. 1188 00:50:56,726 --> 00:50:58,016 Instead of removing these seams, 1189 00:50:58,016 --> 00:50:59,916 we insert new seams in these locations. 1190 00:51:00,436 --> 00:51:02,256 The pixels of the new seams are the average 1191 00:51:02,256 --> 00:51:11,436 of the pixels alongside of the new seam positions. 1192 00:51:11,596 --> 00:51:14,126 This enables a smooth transition between reducing 1193 00:51:14,126 --> 00:51:16,666 and enlarging the image size in multi size images. 1194 00:51:17,716 --> 00:51:25,576 We have tested different possible energy functions 1195 00:51:25,576 --> 00:51:27,526 for retargetting such as entropy [assumed spelling], 1196 00:51:27,666 --> 00:51:30,056 saliency [assumed spelling], histogram of grading direction 1197 00:51:30,136 --> 00:51:31,336 and eye movement measurements. 1198 00:51:31,766 --> 00:51:33,446 The results depend on the given image, 1199 00:51:33,576 --> 00:51:35,466 but simple gradient magnitude often gives 1200 00:51:35,556 --> 00:51:38,756 satisfactory results. 1201 00:51:39,596 --> 00:51:42,756 For certain contents such as faces, where the relations 1202 00:51:42,756 --> 00:51:44,276 between features are important [inaudible]. 1203 00:51:44,276 --> 00:51:44,546 [ laughter ] 1204 00:51:44,546 --> 00:51:47,616 A simple user interface enabling the designer 1205 00:51:47,616 --> 00:51:49,116 to protect these image areas. 1206 00:51:49,736 --> 00:51:52,276 The application is also used as an authoring tool 1207 00:51:52,386 --> 00:51:54,226 for creating multi sized images. 1208 00:51:55,636 --> 00:51:57,666 Note that in this specific example, 1209 00:51:57,666 --> 00:51:59,466 automatic face detection can be used 1210 00:51:59,466 --> 00:52:01,486 to identify the areas that need protection. 1211 00:52:02,916 --> 00:52:04,946 To illustrate another application for this tool, 1212 00:52:04,946 --> 00:52:07,266 we show a simple object removal procedure, 1213 00:52:07,726 --> 00:52:09,746 by adding negative weights to the energy 1214 00:52:09,746 --> 00:52:12,186 of an image the user can attract the seams to pass 1215 00:52:12,286 --> 00:52:13,966 through specific areas first. 1216 00:52:14,886 --> 00:52:16,266 By reducing the size of the image. 1217 00:52:16,266 --> 00:52:16,396 [ laughter ] 1218 00:52:16,396 --> 00:52:19,136 These areas are removed first, in effect, erasing them. 1219 00:52:19,306 --> 00:52:21,766 To retain it's original size, the image is enlarged 1220 00:52:21,766 --> 00:52:23,006 by using seam insertion. 1221 00:52:23,436 --> 00:52:25,456 Note that this technique changes the whole image 1222 00:52:25,456 --> 00:52:32,416 and does not simple erase the objects marked. 1223 00:52:32,416 --> 00:52:32,483 [ laughter ] 1224 00:52:32,483 --> 00:52:34,236 More examples can be found in the paper 1225 00:52:34,236 --> 00:52:35,526 and the supplemental materials. 1226 00:52:35,526 --> 00:52:36,856 [ laughter ] 1227 00:52:36,856 --> 00:52:42,336 Thank you for your attention. 1228 00:52:42,836 --> 00:52:49,036 [ applause ] 1229 00:52:49,536 --> 00:52:51,086 >> So it really is cool what's on the horizon. 1230 00:52:51,086 --> 00:52:53,326 A friend of mine is a photography expert 1231 00:52:53,326 --> 00:52:56,576 and he was recently called in by some lawyers to testify 1232 00:52:56,576 --> 00:52:58,686 in a case which involved answering the question, 1233 00:52:58,686 --> 00:53:01,266 was this video tape doctored or not. 1234 00:53:01,306 --> 00:53:02,486 I'd argue that it's probably going 1235 00:53:02,486 --> 00:53:04,346 to become increasingly difficult over the years 1236 00:53:04,346 --> 00:53:06,256 to actually distinguish photographs and videos 1237 00:53:06,256 --> 00:53:08,816 that were actually take of reality and ones that were 1238 00:53:08,816 --> 00:53:12,256 in fact air brushed or something much more sophisticated. 1239 00:53:12,256 --> 00:53:14,826 So some neat technologies are on the horizon. 1240 00:53:15,306 --> 00:53:16,946 So with that said, we're going to deal 1241 00:53:16,946 --> 00:53:21,426 with images more akin to this thing today. 1242 00:53:22,036 --> 00:53:24,076 Perhaps a little, oops a little simpler. 1243 00:53:24,436 --> 00:53:26,646 We have Hamster, so these are. 1244 00:53:26,646 --> 00:53:28,556 [ music ] 1245 00:53:28,556 --> 00:53:31,526 Those are images called jifs, jifs you might recall 1246 00:53:31,526 --> 00:53:33,786 from problem set 5 are one of the things we asked you about 1247 00:53:34,026 --> 00:53:35,706 and these are, if you're wondering what it means 1248 00:53:35,706 --> 00:53:37,736 to be animated, animate jiff's 1249 00:53:37,736 --> 00:53:40,746 and essentially an animated jiff is kind of like a mini movie 1250 00:53:40,746 --> 00:53:43,506 where it's just multiple images all tacked inside 1251 00:53:43,506 --> 00:53:45,726 of the same file and they just play according 1252 00:53:45,726 --> 00:53:47,646 to some schedule in looping fashion. 1253 00:53:47,646 --> 00:53:51,646 And here too there's an audio file called a wav file, W A V, 1254 00:53:51,956 --> 00:53:53,876 that is simply a song that's played on loop 1255 00:53:53,876 --> 00:53:55,326 on this particular website. 1256 00:53:55,426 --> 00:53:58,886 So how do you actually include these kinds of images though? 1257 00:53:58,886 --> 00:53:59,856 Well it's just HTML. 1258 00:53:59,856 --> 00:54:01,656 Again, just spoil what's underneath the hood here, 1259 00:54:01,866 --> 00:54:05,136 if I do look at the raw source, turns out that in addition 1260 00:54:05,216 --> 00:54:07,786 to the body tag, the head tag, the title tag, 1261 00:54:08,056 --> 00:54:09,776 there's also an image tag. 1262 00:54:09,776 --> 00:54:12,976 Img. Now what you'll see is even though people will say image 1263 00:54:13,126 --> 00:54:15,036 or longer words, generally a lot 1264 00:54:15,036 --> 00:54:17,316 of these tags are abbreviated just for efficiency sake. 1265 00:54:17,556 --> 00:54:19,886 So let's go ahead use such an image. 1266 00:54:19,886 --> 00:54:22,826 Let's not choose necessarily a hamster, but let's go ahead 1267 00:54:22,826 --> 00:54:26,876 to let's say, google.com and let's go to Google images 1268 00:54:27,256 --> 00:54:29,356 and let's choose, well let's do hamster. 1269 00:54:30,086 --> 00:54:30,786 Bigger hamster. 1270 00:54:30,786 --> 00:54:31,596 Let's use this guy. 1271 00:54:31,596 --> 00:54:32,326 He's pretty cute. 1272 00:54:33,266 --> 00:54:35,586 Let's go ahead and right click or control click. 1273 00:54:35,616 --> 00:54:36,696 There's different ways to do this. 1274 00:54:36,696 --> 00:54:39,526 Using SFPT of course, you could download images that for 1275 00:54:39,526 --> 00:54:42,216 which you have the appropriate copyright and such to download. 1276 00:54:42,216 --> 00:54:44,626 We're just going to borrow the hamster for just a moment here. 1277 00:54:45,146 --> 00:54:47,356 If I go into my web page now, recall that I have, 1278 00:54:47,356 --> 00:54:48,886 hello world and goodbye world. 1279 00:54:49,126 --> 00:54:51,606 Let me go ahead down below this and really, 1280 00:54:51,606 --> 00:54:53,566 for no compelling reason, add a hamster. 1281 00:54:53,666 --> 00:54:54,016 Image. 1282 00:54:54,016 --> 00:54:55,216 [ laughter ] 1283 00:54:55,216 --> 00:54:58,776 Source. So src is the special attribute that I know just 1284 00:54:58,776 --> 00:55:00,266 from having read the documentation, 1285 00:55:00,466 --> 00:55:03,146 that it modifies the behavior of the image tag, 1286 00:55:03,206 --> 00:55:05,536 specifically telling it what image to display. 1287 00:55:05,796 --> 00:55:08,236 All attributes, values have to be quoted, 1288 00:55:08,236 --> 00:55:10,536 either with double quotes or with single quotes. 1289 00:55:10,536 --> 00:55:12,256 Just be consistent throughout your files. 1290 00:55:12,256 --> 00:55:14,786 I'm going to go ahead now and paste that URL. 1291 00:55:15,106 --> 00:55:18,386 It kind of wraps around, but it in fact is, 1292 00:55:18,496 --> 00:55:19,826 that's one hell of an URL. 1293 00:55:20,066 --> 00:55:21,606 HowToTakeCareOfAHamster.com. 1294 00:55:21,786 --> 00:55:22,646 Guess it was available. 1295 00:55:23,026 --> 00:55:26,646 So let's go ahead and save this, hello.html, 1296 00:55:27,026 --> 00:55:29,626 let's reload this and there he is. 1297 00:55:29,846 --> 00:55:32,156 So now inside of our web page Now I'd argue, 1298 00:55:32,156 --> 00:55:34,256 this page is pretty ugly and it's ugly 1299 00:55:34,256 --> 00:55:35,666 because it's not centered. 1300 00:55:35,976 --> 00:55:38,566 Right? So I want to go ahead and center all of the text here. 1301 00:55:38,566 --> 00:55:38,846 [ laughter ] 1302 00:55:38,846 --> 00:55:41,956 So how do you go about centering? 1303 00:55:41,956 --> 00:55:43,516 Well one of the things you should be mindful 1304 00:55:43,516 --> 00:55:45,766 of when teaching yourself more about HTML, 1305 00:55:45,766 --> 00:55:47,126 we'll really just scratch the surface 1306 00:55:47,126 --> 00:55:48,426 in lectures and even in sections. 1307 00:55:48,426 --> 00:55:52,516 It gets very boring quickly to numerate dozens of tags 1308 00:55:52,516 --> 00:55:55,566 and attributes that exist, stuff is much easier picked up just 1309 00:55:55,566 --> 00:55:57,196 from a little reference that's online. 1310 00:55:57,196 --> 00:56:00,006 We've linked to several on cs50.net/resources. 1311 00:56:00,006 --> 00:56:02,226 It turns out there's a number of ways 1312 00:56:02,226 --> 00:56:03,666 to accomplish different tasks. 1313 00:56:03,666 --> 00:56:06,406 We're going to promote, at least in sections and lectures, 1314 00:56:06,406 --> 00:56:07,686 some of the simplest approaches, 1315 00:56:07,716 --> 00:56:08,926 some of the most common approaches. 1316 00:56:09,186 --> 00:56:12,196 But realize, because HTML has been around now for years 1317 00:56:12,196 --> 00:56:14,156 in version 1, version 2, version 5, 1318 00:56:14,636 --> 00:56:16,676 you'll see people taking different approaches. 1319 00:56:16,676 --> 00:56:18,216 Don't get confused by it. 1320 00:56:18,216 --> 00:56:20,536 Thankfully there's a tool that I'll show you in a moment, 1321 00:56:20,726 --> 00:56:22,966 which you can validate your HTML, 1322 00:56:23,006 --> 00:56:25,936 that will tell you does your code as written adhere 1323 00:56:25,936 --> 00:56:28,556 to current standards and it will point out syntax errors, 1324 00:56:28,826 --> 00:56:30,126 similar in spirit to what gcc 1325 00:56:30,126 --> 00:56:32,126 or even Valgrant [assumed spelling] might do for you. 1326 00:56:32,126 --> 00:56:33,896 So it's a nice debugging tool of sorts. 1327 00:56:33,896 --> 00:56:36,116 I'm going to go ahead now and specify this. 1328 00:56:36,816 --> 00:56:39,496 Centering these days, back in the day, on WebHamster, 1329 00:56:39,766 --> 00:56:40,456 you would just say this. 1330 00:56:40,586 --> 00:56:43,166 So this for various reasons has kind of fallen out of favor 1331 00:56:43,166 --> 00:56:48,186 in the web community and so you have to be a little more verbose 1332 00:56:48,596 --> 00:56:52,456 and what you can do now is center this content 1333 00:56:52,996 --> 00:56:54,426 by putting it in a div tag. 1334 00:56:54,426 --> 00:56:56,106 So two of the most common tags 1335 00:56:56,106 --> 00:56:58,596 in web development today are something called a div tag 1336 00:56:58,846 --> 00:57:00,266 and something called a span tag. 1337 00:57:00,316 --> 00:57:02,856 These are just structural tags. 1338 00:57:02,856 --> 00:57:05,376 Whereas H1 and H5 say, make this big and bold, 1339 00:57:05,616 --> 00:57:08,526 div and span just say, here comes some content. 1340 00:57:08,766 --> 00:57:11,426 Content that I want to style in some way. 1341 00:57:11,426 --> 00:57:14,846 So it allows you to group together related material, 1342 00:57:15,096 --> 00:57:18,396 not unlike in C, the idea of a struct, it's not quite the same. 1343 00:57:18,396 --> 00:57:19,696 But just a struct allows you 1344 00:57:19,696 --> 00:57:22,636 to encapsulate some similar information, the idea of a div 1345 00:57:22,636 --> 00:57:25,156 at least is to encapsulate some similar information. 1346 00:57:25,156 --> 00:57:28,516 So here the information I want is the following lines 1347 00:57:28,516 --> 00:57:29,436 of text and image. 1348 00:57:29,726 --> 00:57:32,896 So I can actually do something like this, div and now I'm going 1349 00:57:32,896 --> 00:57:35,166 to just indent this just to be proper and then 1350 00:57:35,166 --> 00:57:37,846 down here I'm going to go and close the div tag. 1351 00:57:38,016 --> 00:57:38,996 Now this is useless. 1352 00:57:38,996 --> 00:57:41,676 Notice that if I save the file, reload, 1353 00:57:41,926 --> 00:57:44,896 nothing has actually changed, but div stands for division. 1354 00:57:45,126 --> 00:57:46,576 So I'm going to temporarily do this. 1355 00:57:46,756 --> 00:57:49,286 It turns out that most tags support 1356 00:57:49,286 --> 00:57:51,856 and attribute called style, that as the name implies, 1357 00:57:51,856 --> 00:57:53,706 allows you to style them, aesthetically. 1358 00:57:53,966 --> 00:57:56,296 There's all sorts of stylization that you can add 1359 00:57:56,296 --> 00:58:00,266 to a tag including color and fonts size and margins 1360 00:58:00,266 --> 00:58:02,806 and background colors and borders. 1361 00:58:02,806 --> 00:58:04,656 A lot of purely aesthetic details. 1362 00:58:05,036 --> 00:58:08,166 One of them though is called background color. 1363 00:58:08,496 --> 00:58:11,846 So even though a moment ago I used bgcolor, this is kind 1364 00:58:11,846 --> 00:58:14,896 of the old school way of using this attribute called bgcolor. 1365 00:58:14,896 --> 00:58:17,226 Most people these days style almost all 1366 00:58:17,226 --> 00:58:19,086 of their content using this style attribute, 1367 00:58:19,126 --> 00:58:20,556 so that's a habit I'll now get into. 1368 00:58:20,976 --> 00:58:24,216 Background-color, allows me to change just the color 1369 00:58:24,216 --> 00:58:25,886 of this division of the page. 1370 00:58:26,136 --> 00:58:28,546 So let's just go for hideous and say, yellow. 1371 00:58:28,956 --> 00:58:30,746 So this div, which think 1372 00:58:30,746 --> 00:58:32,576 of as literally a division of the page. 1373 00:58:32,576 --> 00:58:33,816 They're always rectangle. 1374 00:58:33,816 --> 00:58:36,046 So the following rectangle that's fitting all 1375 00:58:36,046 --> 00:58:38,546 of the following content, the H1, the H5, and image, 1376 00:58:38,846 --> 00:58:40,396 should have a background color of yellow. 1377 00:58:40,526 --> 00:58:41,166 Let's save that. 1378 00:58:41,506 --> 00:58:43,806 Reload and sure enough, there it is. 1379 00:58:44,056 --> 00:58:45,436 Right? So this is not too far off 1380 00:58:45,436 --> 00:58:47,786 from what I made in 1995 frankly. 1381 00:58:47,786 --> 00:58:49,626 So notice there's some curiosities here. 1382 00:58:49,626 --> 00:58:51,606 In the top there's some margins 1383 00:58:51,606 --> 00:58:54,206 and these are frankly some stupid headaches when it comes 1384 00:58:54,206 --> 00:58:55,166 to browser development. 1385 00:58:55,406 --> 00:58:59,026 If we open this web page not only in Firefox, but Safari, 1386 00:58:59,056 --> 00:59:02,496 Internet Explorer and Chrome, odds are you would see stupid, 1387 00:59:02,496 --> 00:59:05,066 minute, little differences that nonetheless might tug 1388 00:59:05,066 --> 00:59:08,956 at the nit-picky side of you, whereby on Firefox, 1389 00:59:09,296 --> 00:59:11,556 feels like we have like a centimeter or so 1390 00:59:11,556 --> 00:59:13,736 of red pixels, a margin around this. 1391 00:59:14,046 --> 00:59:16,396 Well Internet Explorer, Microsoft might have decided, 1392 00:59:16,396 --> 00:59:18,626 not going to be a centimeter, going to be a half a centimeter. 1393 00:59:18,856 --> 00:59:21,176 So one of the headaches frankly early on in web development, 1394 00:59:21,316 --> 00:59:24,366 is just understanding some of the stupid differences frankly, 1395 00:59:24,366 --> 00:59:26,696 that the various browser manufacturers have made 1396 00:59:26,696 --> 00:59:28,466 when it comes to implementing these tags. 1397 00:59:28,746 --> 00:59:30,406 But for the most part, it's minor details. 1398 00:59:30,406 --> 00:59:31,676 Though we'll see in JavaScript 1399 00:59:31,676 --> 00:59:33,076 that sometimes it matters just a bit more. 1400 00:59:33,406 --> 00:59:35,976 Thankfully there exists libraries that we've discussed 1401 00:59:35,976 --> 00:59:38,776 in the context of C, that get rid of almost all 1402 00:59:38,776 --> 00:59:40,826 of these cross platform headaches. 1403 00:59:41,146 --> 00:59:43,206 So for now the point is just that I've made a division 1404 00:59:43,206 --> 00:59:45,116 of the page, but I haven't aligned it. 1405 00:59:45,116 --> 00:59:47,546 It turns out I want to say, text align. 1406 00:59:47,966 --> 00:59:50,126 So if you want to have multiple properties, 1407 00:59:50,376 --> 00:59:53,726 what I have just done here with background color:yellow, 1408 00:59:53,926 --> 00:59:57,526 this is a CSS, Cascading Style Sheet property 1409 00:59:57,826 --> 01:00:01,526 and that simply says, make the div background color yellow. 1410 01:00:01,706 --> 01:00:04,326 If I want another such property, I can simply say ; 1411 01:00:04,436 --> 01:00:08,416 and then I can say something like text-aligncenter 1412 01:00:08,886 --> 01:00:12,156 and this will align now all of the text inside 1413 01:00:12,156 --> 01:00:13,886 of that div as centered. 1414 01:00:13,886 --> 01:00:14,636 So let's save this. 1415 01:00:15,326 --> 01:00:18,056 Reload and sure enough, now things are centered. 1416 01:00:18,056 --> 01:00:20,356 And again, there's different ways to do this, but the point 1417 01:00:20,356 --> 01:00:23,566 for today is really to take away these ideas of tags 1418 01:00:23,566 --> 01:00:25,076 and we've been looking at some tags already, 1419 01:00:25,406 --> 01:00:28,166 attributes even though some of them have started to fall 1420 01:00:28,166 --> 01:00:31,236 out of favor, in favor of the style tag and then 1421 01:00:31,236 --> 01:00:32,856 as for these properties, well there's 1422 01:00:32,856 --> 01:00:35,586 so many different properties out there and it's actually nice 1423 01:00:35,756 --> 01:00:37,926 because almost always you can accomplish some goal 1424 01:00:38,066 --> 01:00:40,276 with a property who's name kind of says what it does, 1425 01:00:40,466 --> 01:00:43,546 but to pick up for these kinds of things, again be mindful 1426 01:00:43,546 --> 01:00:44,576 of resources like this. 1427 01:00:44,626 --> 01:00:48,086 If I go to the course's home page/resource and notice 1428 01:00:48,126 --> 01:00:50,666 that we have under here like a tutorial on CSS. 1429 01:00:51,186 --> 01:00:55,016 Again, CSS only refers to at the moment, these things inside 1430 01:00:55,016 --> 01:00:57,606 of quotes, inside of the style tags value. 1431 01:00:57,906 --> 01:01:01,456 And then we can go down here to HTML, where we have a bunch 1432 01:01:01,456 --> 01:01:03,936 of tutorials on HTML and tags thereof. 1433 01:01:03,936 --> 01:01:06,236 Just to give you a sense of this, let me go to HTML 1434 01:01:06,776 --> 01:01:10,836 and let me pull up let's see, 1435 01:01:10,946 --> 01:01:12,586 let's just give you a whirlwind tour. 1436 01:01:13,166 --> 01:01:14,526 So it turns out you can make tables. 1437 01:01:14,526 --> 01:01:17,016 Here is a silly little table for apples, bananas, oranges 1438 01:01:17,016 --> 01:01:19,296 and other, but you can have some tabular structures 1439 01:01:19,296 --> 01:01:20,616 in HTML with the right tags. 1440 01:01:20,616 --> 01:01:21,986 You can have these familiar lists, 1441 01:01:22,276 --> 01:01:23,756 you can have an automatically numbered list, 1442 01:01:23,756 --> 01:01:25,726 you can have a bulleted list here on the right hand side 1443 01:01:25,966 --> 01:01:27,286 and all of these are fairly easy. 1444 01:01:27,286 --> 01:01:29,596 So just for the sake of some arbitrary examples, 1445 01:01:29,596 --> 01:01:31,276 let's do a couple of more of these tags. 1446 01:01:31,556 --> 01:01:32,406 My page again. 1447 01:01:32,666 --> 01:01:35,716 I'm not shooting for pretty today, but let's suppose 1448 01:01:35,716 --> 01:01:37,646 that I actually want, goodbye world, 1449 01:01:37,836 --> 01:01:39,316 to take me away from this web page. 1450 01:01:39,316 --> 01:01:40,906 I want it to be a so-called hyper-link. 1451 01:01:41,156 --> 01:01:43,156 Well turns out making a hyper-link is actually 1452 01:01:43,156 --> 01:01:43,796 pretty easy. 1453 01:01:44,136 --> 01:01:45,866 So I can simply do something like this. 1454 01:01:45,866 --> 01:01:48,946 I'm going to get rid of the H5, though I could leave it, 1455 01:01:48,986 --> 01:01:50,266 but I just want to keep this simple. 1456 01:01:50,266 --> 01:01:52,956 I'm going to get rid of H5 and instead I'm going 1457 01:01:52,956 --> 01:01:55,476 to say you know what, the following should be an anchor. 1458 01:01:55,836 --> 01:01:59,256 A for anchor, hyper reference, where do I want to go? 1459 01:01:59,596 --> 01:02:01,976 Well anytime you leave a site it seems to go to like, 1460 01:02:01,976 --> 01:02:03,026 let's go to Disney.com. 1461 01:02:03,026 --> 01:02:06,916 All right, so now let's scroll over here, close bracket, 1462 01:02:07,516 --> 01:02:08,416 that's not actually true. 1463 01:02:08,746 --> 01:02:12,296 So when now when I click this text, goodbye world, 1464 01:02:12,496 --> 01:02:15,986 this should take me to the value of the HRF attribute, 1465 01:02:16,196 --> 01:02:17,916 which is this thing here. 1466 01:02:18,106 --> 01:02:20,146 So I seem to have implemented the very familiar idea 1467 01:02:20,146 --> 01:02:20,896 of a hyper-link. 1468 01:02:20,896 --> 01:02:22,276 So let me go back to my web page. 1469 01:02:22,346 --> 01:02:25,936 Reload. And hum, that was not what's intended. 1470 01:02:26,476 --> 01:02:29,176 So notice, the goodbye world, it moved, 1471 01:02:29,406 --> 01:02:31,086 but it seems to now be over here. 1472 01:02:31,506 --> 01:02:32,296 So why is this? 1473 01:02:32,396 --> 01:02:34,656 It looks like structurally I haven't changed the web page, 1474 01:02:34,966 --> 01:02:37,526 but a web browser is kind of stupid. 1475 01:02:37,526 --> 01:02:39,856 It only does what you tell it to do 1476 01:02:39,856 --> 01:02:41,316 with these things called tags. 1477 01:02:41,626 --> 01:02:46,136 And so in fact, even though it's implied by the H1 tag, 1478 01:02:46,136 --> 01:02:48,186 which is a heading tag, this is a heading. 1479 01:02:48,186 --> 01:02:50,826 So therefore give it it's own row, give it it's own line. 1480 01:02:51,116 --> 01:02:54,406 With most tags, they don't get their own line and this is good 1481 01:02:54,406 --> 01:02:56,856 because otherwise anytime you tried to co mingle tags 1482 01:02:56,856 --> 01:02:58,736 in a web page, everything would be on it's own line. 1483 01:02:58,736 --> 01:02:59,856 So that's not good behavior. 1484 01:03:00,136 --> 01:03:02,366 So if you really want there to be a line break, 1485 01:03:02,766 --> 01:03:05,896 in between that tag and that image, 1486 01:03:05,946 --> 01:03:08,816 I have to tell the browser, put line break here. 1487 01:03:08,906 --> 01:03:11,546 Open bracket, BR for break, closed bracket. 1488 01:03:11,786 --> 01:03:13,296 Says put a line break here 1489 01:03:13,536 --> 01:03:16,036 and now the browser will interpret this code literally. 1490 01:03:16,276 --> 01:03:20,186 If I reload, now sure enough, I have the link that's just 1491 01:03:20,186 --> 01:03:23,736 above the hamster and if I click this I'll be whisked away 1492 01:03:23,736 --> 01:03:27,796 to Disney.com, which currently looks like this apparently. 1493 01:03:29,136 --> 01:03:30,276 Anything interesting? 1494 01:03:30,946 --> 01:03:33,276 OK. No, all right, so. 1495 01:03:33,706 --> 01:03:35,086 So what are the take aways here? 1496 01:03:35,086 --> 01:03:37,606 So now we have another tag, this idea of this anchor, 1497 01:03:37,606 --> 01:03:39,456 which gives you the familiar hyper link. 1498 01:03:39,456 --> 01:03:41,556 Well what are some of the other familiar tags? 1499 01:03:41,556 --> 01:03:43,866 Any other feature of HTML you'd like to see? 1500 01:03:44,736 --> 01:03:46,286 These are kind of the biggies right, this is kind 1501 01:03:46,286 --> 01:03:48,326 of amazing frankly, what the world has constructed 1502 01:03:48,376 --> 01:03:49,446 with some fairly simple ones. 1503 01:03:49,446 --> 01:03:51,686 What was that? 1504 01:03:51,896 --> 01:03:53,606 Fonts. OK, good one actually. 1505 01:03:53,606 --> 01:03:54,386 Right now I seem 1506 01:03:54,386 --> 01:03:56,836 to be preferring Times New Roman everywhere, 1507 01:03:56,996 --> 01:04:00,076 but surely we have he ability to express other fonts and actually 1508 01:04:00,076 --> 01:04:02,856 that reduces to CSS and let me just pull up the reference 1509 01:04:02,856 --> 01:04:06,566 for CSS that we recommend on the site, though there are plenty 1510 01:04:06,566 --> 01:04:09,086 and plenty of resources online. 1511 01:04:09,336 --> 01:04:12,296 Let me go ahead to CSS, CSS tutorial 1512 01:04:12,606 --> 01:04:14,386 and let me choose styling fonts. 1513 01:04:15,086 --> 01:04:18,836 What you'll see is you have the ability per this tutorial, 1514 01:04:18,836 --> 01:04:21,376 which actually do rather than just talk about, 1515 01:04:21,586 --> 01:04:25,276 you have the ability to specify the font face, the font family 1516 01:04:25,276 --> 01:04:27,676 that you want to display text in, the font size, 1517 01:04:27,726 --> 01:04:30,316 the font color and a bunch of other details as well. 1518 01:04:30,316 --> 01:04:31,146 But there is a gotcha. 1519 01:04:31,486 --> 01:04:35,286 Just because you might have a font called Myriad Pro 1520 01:04:35,286 --> 01:04:38,546 on your computer, that doesn't mean that your millions 1521 01:04:38,546 --> 01:04:40,246 of users are similarly going to have the font. 1522 01:04:40,246 --> 01:04:42,666 So you're actually somewhat limited these days 1523 01:04:42,666 --> 01:04:45,296 to choosing frankly, ugly fonts like Times New Roman 1524 01:04:45,296 --> 01:04:48,226 or you know, old common fonts like Times New Roman, 1525 01:04:48,456 --> 01:04:52,306 but you at least have precision over, you can specify a list 1526 01:04:52,406 --> 01:04:55,536 of fonts that the browser should try to use in order 1527 01:04:55,676 --> 01:04:57,806 and use the first one that it actually finds. 1528 01:04:57,806 --> 01:05:01,826 In fact, if we look at let's say Facebook.com, 1529 01:05:01,826 --> 01:05:03,726 you'll see that this site actually looks a little 1530 01:05:03,726 --> 01:05:06,206 different on Mac's and PC's, also depending 1531 01:05:06,206 --> 01:05:07,706 on what fonts you have installed. 1532 01:05:07,706 --> 01:05:09,156 Because if I can find this, 1533 01:05:09,746 --> 01:05:13,596 let me see if I can make web development all the more real 1534 01:05:13,596 --> 01:05:17,936 here by reloading this page, clicking CSS, let me try this. 1535 01:05:17,936 --> 01:05:20,736 I'm going to try a little trick that we'll spend more time 1536 01:05:20,736 --> 01:05:24,006 on to come, but it looks like Facebook uses, 1537 01:05:24,006 --> 01:05:25,266 hopefully I can prove my point, yes. 1538 01:05:26,226 --> 01:05:28,906 Thankfully, Mark has chosen the default font 1539 01:05:28,906 --> 01:05:32,266 to be Lucinda Grand, followed by Tahoma if you don't have that, 1540 01:05:32,266 --> 01:05:34,466 followed by Veranda, followed by Ariel, 1541 01:05:34,466 --> 01:05:36,396 followed by the very generic Sans Serif 1542 01:05:36,646 --> 01:05:38,866 and Sans Serif just means without Serif's, 1543 01:05:38,866 --> 01:05:40,806 which means the little, cute little curves 1544 01:05:40,806 --> 01:05:42,066 that a font might have. 1545 01:05:42,376 --> 01:05:44,966 So this is Facebook's comma separated list of all 1546 01:05:44,966 --> 01:05:47,276 of the fonts the browser should try to use in order 1547 01:05:47,276 --> 01:05:49,646 to render their website and of course if you don't have some 1548 01:05:49,646 --> 01:05:51,726 of those fonts, you might see a slightly different variant 1549 01:05:51,726 --> 01:05:53,456 of this web page than someone else. 1550 01:05:53,496 --> 01:05:54,576 But actually the fact that I pulled 1551 01:05:54,576 --> 01:05:57,206 up Facebook here is actually a good teaser for one 1552 01:05:57,206 --> 01:05:58,976 of the most useful features of websites. 1553 01:05:58,976 --> 01:06:01,656 You don't just have hyper-links, you don't just have, 1554 01:06:02,116 --> 01:06:04,816 you don't just have images and other mark up, 1555 01:06:04,816 --> 01:06:07,586 you actually have the ability to take input from the user. 1556 01:06:07,586 --> 01:06:10,486 For instance here we have what appear to be text boxes, 1557 01:06:10,486 --> 01:06:12,436 up here we have what we call a check box, 1558 01:06:12,706 --> 01:06:16,556 down here we have a select menu or a drop down menu. 1559 01:06:16,596 --> 01:06:18,446 And so these are very familiar concepts. 1560 01:06:18,446 --> 01:06:21,026 We use them every day of the week most likely, 1561 01:06:21,026 --> 01:06:22,086 interacting with websites, 1562 01:06:22,346 --> 01:06:24,156 but with these very basic building blocks, 1563 01:06:24,156 --> 01:06:27,066 has the world built up some really neat capabilities. 1564 01:06:27,066 --> 01:06:29,396 So first the font, then the capabilities. 1565 01:06:29,446 --> 01:06:34,586 Suppose I really want to make let's say, goodbye, bigger. 1566 01:06:35,026 --> 01:06:38,076 So it turns out, I can go into this anchor tag 1567 01:06:38,446 --> 01:06:39,686 and I can add another attribute. 1568 01:06:39,926 --> 01:06:42,196 If you want to have multiple attributes you just separate 1569 01:06:42,196 --> 01:06:42,986 them by spaces. 1570 01:06:42,986 --> 01:06:46,336 So attribute equals quote unquote value space attribute 1571 01:06:46,336 --> 01:06:47,946 equals quote unquote value space. 1572 01:06:48,346 --> 01:06:51,796 So if I want to style this tag, I say style equals quote unquote 1573 01:06:51,986 --> 01:06:55,526 and then in the quotes I need to say something like fonts family 1574 01:06:55,866 --> 01:06:59,006 and let's do Tahoma, whatever that looks like 1575 01:06:59,006 --> 01:07:05,336 and then semi-colon font hyphen size colon let's say 96 points. 1576 01:07:05,426 --> 01:07:09,416 All right save and again it's just wrapping with Nano here, 1577 01:07:09,416 --> 01:07:10,926 but that is in fact all one line. 1578 01:07:10,926 --> 01:07:13,246 All right, I guess my font's a little big. 1579 01:07:13,476 --> 01:07:15,526 Let me go back to this hideous website, click reload 1580 01:07:15,526 --> 01:07:17,326 and it's gotten even bigger. 1581 01:07:17,406 --> 01:07:20,296 So again, you can do some real damage quickly with this, 1582 01:07:20,396 --> 01:07:22,926 but it also suggests that you have really precise control 1583 01:07:23,016 --> 01:07:25,976 over, it's actually not a bad web page now. 1584 01:07:26,076 --> 01:07:26,516 So now. 1585 01:07:26,516 --> 01:07:27,516 [ laughter ] 1586 01:07:27,516 --> 01:07:30,636 Now you have, we'll save this one. 1587 01:07:30,636 --> 01:07:33,826 All right, so now you have really precise control 1588 01:07:33,826 --> 01:07:35,216 over the rendition of the page 1589 01:07:35,216 --> 01:07:37,116 and so even though it feels a little messy, 1590 01:07:37,116 --> 01:07:39,616 frankly it is a little messy what we're building up here, 1591 01:07:39,776 --> 01:07:42,456 because we have HTML, we also have CSS 1592 01:07:42,456 --> 01:07:44,906 and the CSS is just inside of the quote marks. 1593 01:07:45,196 --> 01:07:48,226 These are two separate languages, HTML and CSS, 1594 01:07:48,256 --> 01:07:50,396 that are getting co mingled. 1595 01:07:50,716 --> 01:07:53,876 But realize that we can now actually get some input 1596 01:07:53,966 --> 01:07:54,706 from the user. 1597 01:07:54,706 --> 01:07:57,706 So literally, let me go to let's see, 1598 01:07:57,706 --> 01:08:00,506 lectures/8/source. 1599 01:08:00,996 --> 01:08:04,706 So literally the first thing that you might want 1600 01:08:04,706 --> 01:08:06,756 to do is get input from the user. 1601 01:08:07,096 --> 01:08:08,496 So here's how we might want 1602 01:08:08,496 --> 01:08:10,376 to re implement Google ourself, right. 1603 01:08:10,376 --> 01:08:13,706 This is pretty much what Google looked like back in 1999 or so. 1604 01:08:13,886 --> 01:08:16,166 Let's go ahead and take a look at this web page's source code. 1605 01:08:16,686 --> 01:08:18,876 And let's see how this site was implemented. 1606 01:08:18,876 --> 01:08:20,086 As an aside, before I forget, 1607 01:08:20,146 --> 01:08:22,886 I see that I accidentally capitalized doctype on all 1608 01:08:22,886 --> 01:08:25,806 of these print outs, I will go back and make them consistent. 1609 01:08:25,806 --> 01:08:28,136 Because I'm using lowercase for those doctype's up top. 1610 01:08:28,136 --> 01:08:29,976 So FYI, I will fix in the print outs. 1611 01:08:30,016 --> 01:08:33,096 But for now, notice how simple it is to implement Google. 1612 01:08:33,316 --> 01:08:35,486 Right? So we have the head at the top of the web page, 1613 01:08:35,806 --> 01:08:37,736 we then have a title called, Fake Google, 1614 01:08:37,736 --> 01:08:40,336 just so I don't upset them. 1615 01:08:40,606 --> 01:08:43,596 Now I have body and so in the body what did I do, 1616 01:08:43,596 --> 01:08:46,036 div style="text-align: center", 1617 01:08:46,036 --> 01:08:48,576 so this just means here comes a band of content, 1618 01:08:48,576 --> 01:08:49,446 a division of content. 1619 01:08:49,596 --> 01:08:51,116 Make it all centered and here is 1620 01:08:51,116 --> 01:08:54,216 where this is this annoying semantic inconsistency. 1621 01:08:54,456 --> 01:08:56,756 I'm saying textalign, but even things 1622 01:08:56,756 --> 01:08:58,066 like the button you just saw, 1623 01:08:58,296 --> 01:09:00,516 will also be centered as a result. 1624 01:09:00,596 --> 01:09:02,386 So there's some you know, there's some quirks 1625 01:09:02,386 --> 01:09:03,276 in the languages this year. 1626 01:09:03,536 --> 01:09:05,956 But textaligncenter means make everything centered. 1627 01:09:06,246 --> 01:09:09,086 I have an H1 tag which just means give me some big bold text 1628 01:09:09,086 --> 01:09:11,476 to say, Fake Google and then this new tag. 1629 01:09:11,836 --> 01:09:13,446 So here is yet another tag for us today. 1630 01:09:13,516 --> 01:09:15,856 There's a form tag, open bracket form, 1631 01:09:16,146 --> 01:09:18,996 the action attribute according to the manual says, 1632 01:09:18,996 --> 01:09:23,196 give me the URL of a program, a web based program 1633 01:09:23,426 --> 01:09:26,176 to which I should submit this user's form. 1634 01:09:26,456 --> 01:09:28,856 So apparently I kind of cut a corner here. 1635 01:09:28,856 --> 01:09:31,006 I didn't actually implement all of Google, I'm actually going 1636 01:09:31,006 --> 01:09:32,796 to submit this form to the real Google 1637 01:09:32,796 --> 01:09:33,826 and leverage their back end. 1638 01:09:34,216 --> 01:09:37,736 So here I have form action equals quote unquote this, 1639 01:09:38,036 --> 01:09:39,826 all right, so now close bracket. 1640 01:09:40,116 --> 01:09:42,116 Notice that the close form is down here. 1641 01:09:42,116 --> 01:09:45,176 So notice inside of this form is a bunch of input elements 1642 01:09:45,476 --> 01:09:48,316 and this is where we have these basic user interface mechanisms. 1643 01:09:48,546 --> 01:09:51,856 We have an input tag, a name I'm going to give q, 1644 01:09:51,986 --> 01:09:55,536 Q just meaning query, type="text", this means it's going 1645 01:09:55,536 --> 01:09:57,996 to be a text box and not a button or check box 1646 01:09:57,996 --> 01:09:58,836 or something like that. 1647 01:09:59,156 --> 01:10:01,386 Then I have a line break which just says, put the next thing 1648 01:10:01,386 --> 01:10:03,606 on the next line and what's the next thing. 1649 01:10:03,886 --> 01:10:05,546 There's another input type that I found 1650 01:10:05,546 --> 01:10:08,366 in the manual called type=submit and it turns 1651 01:10:08,366 --> 01:10:11,766 out you can label this submit input, which happens 1652 01:10:11,766 --> 01:10:14,156 to be rendered as a button with a value, 1653 01:10:14,356 --> 01:10:16,156 namely, Fake Google search. 1654 01:10:16,416 --> 01:10:17,816 So at the end result is 1655 01:10:17,816 --> 01:10:20,906 that I have a form not unlike Google version 1.0. 1656 01:10:20,906 --> 01:10:22,876 I can type in something like hamster here, 1657 01:10:23,136 --> 01:10:25,916 click Fake Google search and let's actually see what happens. 1658 01:10:25,916 --> 01:10:27,026 Well let me pull up Firebug, 1659 01:10:27,306 --> 01:10:29,366 just so I can sniff my own network traffic 1660 01:10:29,366 --> 01:10:30,346 and see what's going on. 1661 01:10:30,606 --> 01:10:33,686 I'm going to go ahead and click on Fake Google search 1662 01:10:33,886 --> 01:10:36,176 and notice what happens at top to the URL, 1663 01:10:36,176 --> 01:10:38,376 because of that action attribute. 1664 01:10:38,706 --> 01:10:39,496 Fake Google search. 1665 01:10:40,056 --> 01:10:42,026 Wha-la, I have implemented Google right, 1666 01:10:42,026 --> 01:10:43,746 I have my own front end now to Google, 1667 01:10:44,256 --> 01:10:45,716 but notice how this worked. 1668 01:10:46,256 --> 01:10:48,136 What's interesting is that I indeed ended 1669 01:10:48,136 --> 01:10:50,036 up at google.com, no surprise there. 1670 01:10:50,316 --> 01:10:51,546 But notice what the URL looks like, 1671 01:10:51,546 --> 01:10:54,856 http://www.google.com/search, 1672 01:10:55,076 --> 01:10:59,516 that was in my action attribute, ?Q=hamster. 1673 01:10:59,866 --> 01:11:04,086 So it turns out, when we've been using this special key word get, 1674 01:11:04,086 --> 01:11:08,086 get/, well you don't have to just get/, you can get/search 1675 01:11:08,286 --> 01:11:11,026 and in fact, if you add a question mark to almost any URL, 1676 01:11:11,456 --> 01:11:15,586 you can then pass in a ampersand separated list 1677 01:11:15,896 --> 01:11:17,286 of what are called, parameters. 1678 01:11:17,286 --> 01:11:19,546 So this is again just another word for the notion 1679 01:11:19,546 --> 01:11:23,096 of an argument or a parameter or it is a parameter, another word 1680 01:11:23,096 --> 01:11:25,316 for an argument but in the context of the web, 1681 01:11:25,666 --> 01:11:28,626 question mark means to the browser or to the server, 1682 01:11:28,856 --> 01:11:31,756 here comes some parameters, here comes some arguments. 1683 01:11:32,006 --> 01:11:33,026 What's the first argument? 1684 01:11:33,106 --> 01:11:34,696 q. What's its value? 1685 01:11:34,696 --> 01:11:36,106 Well it equals hamster. 1686 01:11:36,386 --> 01:11:38,866 And so this is the way that a web browser, 1687 01:11:39,056 --> 01:11:41,296 which is just a fairly dumb program sitting somewhere 1688 01:11:41,296 --> 01:11:43,116 on the Internet on my little old computer, 1689 01:11:43,426 --> 01:11:45,656 passes input into a web server. 1690 01:11:45,656 --> 01:11:48,606 Because web servers meanwhile, are designed to look 1691 01:11:48,606 --> 01:11:53,786 at the incoming requests and it see oh, get/search?q=hamster, 1692 01:11:54,156 --> 01:11:55,916 so the program that Google wrote, 1693 01:11:55,916 --> 01:11:58,836 which is probably written here in Python or a similar language, 1694 01:11:59,146 --> 01:12:02,816 they see oh, here's a parameter called q, q is hamster, 1695 01:12:02,816 --> 01:12:05,816 let me search my database for this keyword hamster, 1696 01:12:06,056 --> 01:12:09,166 find a big list, a link list or an array of all of the web pages 1697 01:12:09,196 --> 01:12:10,966 that match and then you know what I want to do, 1698 01:12:11,266 --> 01:12:14,566 I want to actually return to the user a web page, 1699 01:12:14,826 --> 01:12:16,046 little white lie I'm about to tell, 1700 01:12:16,196 --> 01:12:19,666 a web page that contains a whole bunch of HTML with which 1701 01:12:19,666 --> 01:12:21,746 to render that there web page. 1702 01:12:21,746 --> 01:12:23,386 Now it's a little white lie because Google 1703 01:12:23,386 --> 01:12:25,186 as you might have noticed, now has instant search 1704 01:12:25,186 --> 01:12:26,386 and all these fancy features, 1705 01:12:26,576 --> 01:12:29,216 where you actually don't download the HTML all at once 1706 01:12:29,216 --> 01:12:30,396 when you first visit the page, 1707 01:12:30,666 --> 01:12:33,226 rather they get it using a technology called, Ajax, 1708 01:12:33,226 --> 01:12:35,386 whereby it gets the data behind the scenes 1709 01:12:35,536 --> 01:12:37,826 and then immediately integrates it into the website. 1710 01:12:37,976 --> 01:12:40,646 But if I do this old school, and turn off instant search 1711 01:12:41,206 --> 01:12:43,226 and actually now research for hamster 1712 01:12:43,736 --> 01:12:48,056 and reload my page's source code, you'll notice that, 1713 01:12:48,056 --> 01:12:49,626 oh that's kind of a long thing. 1714 01:12:49,626 --> 01:12:51,246 Let's go and put this in to here. 1715 01:12:51,536 --> 01:12:56,336 This is the code, which is a mingling of HTML and JavaScript, 1716 01:12:56,336 --> 01:12:58,736 that I got back from Google's website, when I asked 1717 01:12:58,946 --> 01:13:00,896 for all web pages related to hamsters. 1718 01:13:00,896 --> 01:13:02,006 It's cryptic. 1719 01:13:02,006 --> 01:13:03,216 In fact, for someone like Google, 1720 01:13:03,216 --> 01:13:05,546 when you get a billion hits per day, if every hit, 1721 01:13:05,546 --> 01:13:07,116 this is actually a neat curiosity. 1722 01:13:07,196 --> 01:13:10,116 With someone like Google, if a programmer accidentally or just 1723 01:13:10,116 --> 01:13:12,666 to be nice and pretty, hits the space bar just 1724 01:13:12,666 --> 01:13:15,006 to indent something, that's one additional character, 1725 01:13:15,006 --> 01:13:18,326 one additional byte, magnified by a billion visits per day, 1726 01:13:18,326 --> 01:13:21,196 that's 1 gigabyte worth of downloads that Google now has 1727 01:13:21,196 --> 01:13:24,106 to incur and then spend for and so these days, 1728 01:13:24,106 --> 01:13:26,416 super fancy websites like Google and Facebook 1729 01:13:26,416 --> 01:13:28,086 which have a ridiculous amount of traffic 1730 01:13:28,116 --> 01:13:30,586 for which every little penny and every little bit counts, 1731 01:13:30,926 --> 01:13:33,016 they do what's called minify their source code. 1732 01:13:33,126 --> 01:13:34,476 So it's a little harder to learn 1733 01:13:34,476 --> 01:13:38,236 from these websites sometimes unless you use this tool 1734 01:13:38,306 --> 01:13:39,206 like Firebug. 1735 01:13:39,206 --> 01:13:42,796 If I go to Firebug and view this same web page down here, 1736 01:13:43,126 --> 01:13:44,676 notice one of the powers of Firebug. 1737 01:13:44,676 --> 01:13:47,586 No matter what, how big a mess someone's web page is, 1738 01:13:47,926 --> 01:13:50,546 notice what Firebug does is it clean it up for you. 1739 01:13:50,646 --> 01:13:53,616 So this is in fact how Google is implemented and as promised, 1740 01:13:53,886 --> 01:13:57,366 notice that they make ample use of these things called div tags. 1741 01:13:57,366 --> 01:13:59,596 It looks like they have a few other attributes like ID 1742 01:13:59,596 --> 01:14:02,236 and class, but we've really just scratched the surface. 1743 01:14:02,236 --> 01:14:05,666 What we'll tease you with today is this last thing here. 1744 01:14:05,986 --> 01:14:09,366 Literally, the very first thing I learned how to do 1745 01:14:09,556 --> 01:14:13,156 on with regard to web programming, was something 1746 01:14:13,156 --> 01:14:14,446 that looked like this. 1747 01:14:14,976 --> 01:14:18,756 Back in the day, you would walk across the yard to Wigglesworth, 1748 01:14:18,756 --> 01:14:21,346 hand in a piece of paper into a proctors drop box if you wanted 1749 01:14:21,346 --> 01:14:23,126 to register for a Freshman inter mural sport, 1750 01:14:23,456 --> 01:14:26,786 in 1996 we put the Freshman Inter mural Sports program 1751 01:14:26,976 --> 01:14:29,476 onto the Internet and it looked a little something like this. 1752 01:14:29,556 --> 01:14:29,926 Literally. 1753 01:14:29,926 --> 01:14:32,976 Although, I think I had like big pictures of soccer balls 1754 01:14:32,976 --> 01:14:34,046 and volley balls and image 1755 01:14:34,046 --> 01:14:35,346 in the background just to make it cool. 1756 01:14:35,596 --> 01:14:36,596 It wasn't so cool. 1757 01:14:36,596 --> 01:14:37,916 But I'll find that image for Wednesday. 1758 01:14:38,336 --> 01:14:42,076 But using these same building blocks, inputtype=text, 1759 01:14:42,076 --> 01:14:45,116 inputtype=submit, you can actually then take input 1760 01:14:45,116 --> 01:14:47,486 from the user, let them hit submit, get an email 1761 01:14:47,486 --> 01:14:49,476 to yourself, get their name added to the database, 1762 01:14:49,476 --> 01:14:50,816 all the sorts of things you might want 1763 01:14:50,816 --> 01:14:51,776 to do for final projects. 1764 01:14:52,316 --> 01:14:53,496 Some more on that on Wednesday.