1 00:00:00,000 --> 00:00:02,500 [Seminar] [Web Development: From Idea to Implementation] 2 00:00:02,500 --> 00:00:04,200 [Ben Kuhn] [Billy Janitsch] [Harvard University] 3 00:00:04,200 --> 00:00:07,250 [This is CS50] [CS50.TV] 4 00:00:07,250 --> 00:00:10,840 [Billy] Hi, I'm Billy and this is Ben. >>[Ben] Hi. 5 00:00:10,840 --> 00:00:12,840 We're going to be talking about web development today. 6 00:00:12,840 --> 00:00:14,840 [webdev] [Billy Janitsch and Ben Kuhn] 7 00:00:14,840 --> 00:00:16,840 A bit about us first. 8 00:00:16,840 --> 00:00:19,590 Ben is sort of the back-end guy. He makes things work. 9 00:00:19,590 --> 00:00:21,870 And then I go in and make them pretty. 10 00:00:21,870 --> 00:00:26,610 I'm largely involved with more front-end layout design kind of stuff, 11 00:00:26,610 --> 00:00:31,260 and Ben, on the other hand, knows what he's doing so he works on back-end stuff. 12 00:00:31,260 --> 00:00:34,050 Together we've made a few things. 13 00:00:34,050 --> 00:00:38,710 For instance, last year we worked on Gimblium which is an online game development studio. 14 00:00:38,710 --> 00:00:40,400 That was our final project for the class, 15 00:00:40,400 --> 00:00:42,780 and since then we've made Harvard Class 16 00:00:42,780 --> 00:00:47,860 which is an online framework for browsing and shopping courses at Harvard. 17 00:00:47,860 --> 00:00:53,180 >> We're going to start with this idea for our website. 18 00:00:53,180 --> 00:00:57,480 We're going to make Facebook, but for cats. 19 00:00:57,480 --> 00:00:59,520 Before you actually make this website, 20 00:00:59,520 --> 00:01:02,520 don't make this website because it's not good; but we'll use it as a framework 21 00:01:02,520 --> 00:01:05,349 and go through the process of how we take this idea 22 00:01:05,349 --> 00:01:07,450 and turn it into a real website we can use. 23 00:01:07,450 --> 00:01:11,940 We'll start by breaking the website down. 24 00:01:11,940 --> 00:01:13,190 Like you've been doing in CS50, 25 00:01:13,190 --> 00:01:17,360 you want to think about what are the actual components that go into this website. 26 00:01:17,360 --> 00:01:21,290 Basically turning it from an idea which is just sort of an abstract concept 27 00:01:21,290 --> 00:01:23,590 into a real, tangible thing that you could make. 28 00:01:23,590 --> 00:01:25,910 We start by asking some questions. 29 00:01:25,910 --> 00:01:28,070 What is this website? Why are we making it? 30 00:01:28,070 --> 00:01:30,670 What is it going to be used for? That sort of thing. 31 00:01:30,670 --> 00:01:33,660 In the case of Facebook Cat, 32 00:01:33,660 --> 00:01:37,730 we basically want a website that lets cats social network with each other. 33 00:01:37,730 --> 00:01:41,260 The idea being that they can post on each other's walls, 34 00:01:41,260 --> 00:01:43,510 they can make comments, that sort of thing. 35 00:01:43,510 --> 00:01:46,720 And that's where we come into the functional components. 36 00:01:46,720 --> 00:01:51,270 We now have this sort of framework of--we have user profiles, 37 00:01:51,270 --> 00:01:53,990 we have comments, and we can post. 38 00:01:53,990 --> 00:01:57,390 Perhaps someday we'll influent likes and that sort of thing. 39 00:01:57,390 --> 00:02:00,410 And we kind of want to prioritize these features going in. 40 00:02:00,410 --> 00:02:03,340 We want to say like, okay, it's really important that everyone has a profile 41 00:02:03,340 --> 00:02:06,440 and that everyone can post on each other's walls. 42 00:02:06,440 --> 00:02:08,509 Secondary to that, comments would be nice. 43 00:02:08,509 --> 00:02:10,180 Maybe later on we'll influent likes. 44 00:02:10,180 --> 00:02:13,700 So, you want to have an idea of what's fundamental to your project 45 00:02:13,700 --> 00:02:17,260 and what's sort of a more general feature that could be applied later. 46 00:02:17,260 --> 00:02:20,870 You want to sort of have a specific list in mind, 47 00:02:20,870 --> 00:02:24,090 but the project that you start with is not going to be the project that you finish with. 48 00:02:24,090 --> 00:02:27,100 In other words, things are going to change while you're developing the site, 49 00:02:27,100 --> 00:02:30,090 and you want to leave room for that. 50 00:02:30,090 --> 00:02:34,470 I'll turn it over to Ben who's going to talk a bit about structure. 51 00:02:34,470 --> 00:02:39,610 >> [Ben] I'm going to be talking about the more technical side of web development. 52 00:02:39,610 --> 00:02:42,370 Let's just go over some basics first. 53 00:02:42,370 --> 00:02:45,730 When you're doing a web app, 54 00:02:45,730 --> 00:02:50,470 the main division that you're going to have to have is 55 00:02:50,470 --> 00:02:52,700 you're going to have some stuff going on in the client side-- 56 00:02:52,700 --> 00:02:56,700 that is, the code that you're browser takes from the site 57 00:02:56,700 --> 00:03:01,910 and the JavaScript, HTML, CSS stuff. 58 00:03:01,910 --> 00:03:04,490 That's all on the client side. 59 00:03:04,490 --> 00:03:08,680 You're going to have other code that runs on the server side 60 00:03:08,680 --> 00:03:10,770 which keeps track of all the data that people send in to you, 61 00:03:10,770 --> 00:03:15,060 decides who to give what, stuff like that. 62 00:03:15,060 --> 00:03:20,380 This is just some terminology so that you guys are all familiar with what we're talking about. 63 00:03:20,380 --> 00:03:28,600 Beyond that division it's good to think of your web app in terms of 64 00:03:28,600 --> 00:03:32,500 a couple of distinct components. 65 00:03:32,500 --> 00:03:35,270 When you're doing web development 66 00:03:35,270 --> 00:03:41,710 one of the things that you should always be trying to do is to reduce complexity. 67 00:03:41,710 --> 00:03:45,710 The more complex your code is the more chance there is to make bugs, 68 00:03:45,710 --> 00:03:47,710 the harder it is to change later. 69 00:03:47,710 --> 00:03:50,140 So, if you can break up your app into some distinct functional areas 70 00:03:50,140 --> 00:03:57,640 that will--and you can reduce the sort of amount of cross-area communication-- 71 00:03:57,640 --> 00:04:03,530 that will help you a lot in the long run in terms of reducing bugs. 72 00:04:03,530 --> 00:04:07,950 >> To be concrete, usually people divide up a web app into-- 73 00:04:07,950 --> 00:04:13,190 these are kind of buzz words now, but they're still useful. 74 00:04:13,190 --> 00:04:17,940 You might have heard people talk about models, views, and controllers. 75 00:04:17,940 --> 00:04:23,210 Models are the actual data that your app is going to deal with. 76 00:04:23,210 --> 00:04:28,260 For example, in your Cat Facebook, your models would be-- 77 00:04:28,260 --> 00:04:35,340 you'd have a model for like posts, and a model for user profiles, stuff like that. 78 00:04:35,340 --> 00:04:41,090 Your views are how you present that data to your users. 79 00:04:41,090 --> 00:04:46,660 You might have 1 view for looking at a single post and all the comments 80 00:04:46,660 --> 00:04:51,720 and a different view for your wall that has a list of all the posts 81 00:04:51,720 --> 00:04:57,170 that are directed to you, and a different view for your news feed--stuff like that. 82 00:04:57,170 --> 00:05:00,610 Finally, you have the controllers which are basically when people send you posts 83 00:05:00,610 --> 00:05:03,310 and you make updates to your back-end system, 84 00:05:03,310 --> 00:05:06,400 you increment a bunch of counters, and whatever. 85 00:05:06,400 --> 00:05:07,860 Those are your controllers. 86 00:05:07,860 --> 00:05:11,030 >> I'm going to be talking mostly about models. 87 00:05:11,030 --> 00:05:14,030 Views are technically not that difficult and the issue is more with designing them 88 00:05:14,030 --> 00:05:22,040 Controllers are going to be specific to whatever you're designing. 89 00:05:22,040 --> 00:05:25,220 But there are some pretty general techniques you can use 90 00:05:25,220 --> 00:05:30,220 to make your models nicer and easier to work with that I think are very helpful. 91 00:05:30,220 --> 00:05:35,860 This is mostly going to be about how to deal with your web apps data in a nice way. 92 00:05:35,860 --> 00:05:40,420 The main issues with models 93 00:05:40,420 --> 00:05:44,540 are that they live on the client and the server and you have to figure out 94 00:05:44,540 --> 00:05:51,170 a) how to get them--all the relevant ones--from the server to the client, 95 00:05:51,170 --> 00:05:53,440 and b) how to keep them in sync. 96 00:05:53,440 --> 00:05:58,700 Your users are going to want to make some updates. 97 00:05:58,700 --> 00:06:00,470 They're going to want to make new posts. 98 00:06:00,470 --> 00:06:04,800 They're going to want to like things and stuff if you have likes. 99 00:06:04,800 --> 00:06:11,490 Those are the main technical challenges of dealing with models. 100 00:06:11,490 --> 00:06:15,680 The first thing that you're going to want to ask yourself is 101 00:06:15,680 --> 00:06:18,420 what kind of data goes in this model and what kind of queries are we going to want to do-- 102 00:06:18,420 --> 00:06:24,290 that is, how are we going to look at the models? 103 00:06:24,290 --> 00:06:26,940 For your Cat Facebook example, 104 00:06:26,940 --> 00:06:31,520 your post is going to have an author associated with it, 105 00:06:31,520 --> 00:06:35,660 some wall post text, and a recipient of the wall post. 106 00:06:35,660 --> 00:06:38,470 And then you might want to query that in a bunch of different ways. 107 00:06:38,470 --> 00:06:42,220 You would want to look at it by who wrote which post, 108 00:06:42,220 --> 00:06:46,620 by who received which post, maybe by the date they were posted. 109 00:06:46,620 --> 00:06:50,340 But if you're going to do it by date, then you have to add another field to your post 110 00:06:50,340 --> 00:06:52,490 of when it was actually posted. 111 00:06:52,490 --> 00:07:00,220 These 2 factors--what data you want to use and how you want to view it-- 112 00:07:00,220 --> 00:07:04,200 you should think about them first because they depend on each other, 113 00:07:04,200 --> 00:07:08,030 and it's going to be more difficult to add them later on. 114 00:07:08,030 --> 00:07:12,750 >> There are some other considerations. 115 00:07:12,750 --> 00:07:17,540 When you're thinking about how you deal with models on the server 116 00:07:17,540 --> 00:07:20,540 what you want to look at is-- 117 00:07:20,540 --> 00:07:27,440 you basically want to make the server as simple as possible. 118 00:07:29,440 --> 00:07:35,500 Doing stuff on the client side is generally much faster if you can do it purely on the client 119 00:07:35,500 --> 00:07:38,230 without doing any sort of network request. 120 00:07:38,230 --> 00:07:47,860 The idea is to do as many of the queries as you can on the client. 121 00:07:47,860 --> 00:07:51,560 The only problem with that 122 00:07:51,560 --> 00:07:54,160 is that if you request all of your data at the beginning 123 00:07:54,160 --> 00:07:57,160 then that's going to take a long time to load. 124 00:07:57,160 --> 00:08:02,290 So, the idea is to strike a happy medium between having enough data on the client 125 00:08:02,290 --> 00:08:07,640 that you can do most of your work there but not just fetching everything at once 126 00:08:07,640 --> 00:08:09,710 so that you get really slow load times at the beginning. 127 00:08:09,710 --> 00:08:12,610 For instance, for your cat data 128 00:08:12,610 --> 00:08:20,340 you would probably want to fetch a bunch of recent wall posts. 129 00:08:20,340 --> 00:08:23,790 You wouldn't want to fetch all of them because that could go back a couple of years. 130 00:08:23,790 --> 00:08:25,470 But you don't want to fetch them one at a time 131 00:08:25,470 --> 00:08:28,740 because that would introduce a lot of network overhead. 132 00:08:28,740 --> 00:08:33,620 >> It's often quite hard--once you have a database running-- 133 00:08:33,620 --> 00:08:37,210 it's often quite hard to change what data you have in it-- 134 00:08:37,210 --> 00:08:40,510 that is, add a new database column or something-- 135 00:08:40,510 --> 00:08:43,510 so one good strategy is actually just to keep a lot of your data in a text blob-- 136 00:08:43,510 --> 00:08:53,880 a JSON blob--JSON being JavaScript Object Notation-- 137 00:08:53,880 --> 00:08:58,330 The reason that's useful is because then you can add new properties 138 00:08:58,330 --> 00:09:01,920 to all of these JSON blobs without changing your database. 139 00:09:01,920 --> 00:09:06,860 The only downside to that is that if you have a bunch of fields 140 00:09:06,860 --> 00:09:09,890 that you added later on--like hidden in that JSON blob-- 141 00:09:09,890 --> 00:09:12,850 then it's harder to query them inside the database. 142 00:09:12,850 --> 00:09:17,690 For instance, if you later--if you had your post model that we discussed earlier 143 00:09:17,690 --> 00:09:25,380 with just the author, the recipient and the text-- 144 00:09:25,380 --> 00:09:29,000 you could also have a JSON blob and then if you later wanted to add a date field 145 00:09:29,000 --> 00:09:31,000 you wouldn't have to change your database. 146 00:09:31,000 --> 00:09:36,140 You could just add dates to all of the text fields. 147 00:09:36,140 --> 00:09:39,640 And then you would be able to look at those on the client side, 148 00:09:39,640 --> 00:09:42,430 but you wouldn't be able to query them on the server side 149 00:09:42,430 --> 00:09:44,430 because it's hidden inside that text. 150 00:09:44,430 --> 00:09:49,920 >> The other issue that you want to think about 151 00:09:49,920 --> 00:09:52,400 is how your client and your server are going to communicate. 152 00:09:52,400 --> 00:09:56,040 You usually want to keep this as simple as possible. 153 00:09:56,040 --> 00:10:02,230 You can just have like a get-me-this data request, 154 00:10:02,230 --> 00:10:09,140 a create-a-new-object thing, and an update-an-old-object request. 155 00:10:09,140 --> 00:10:12,930 And these would all be different URLs on a server that you-- 156 00:10:12,930 --> 00:10:20,030 that the browser would--you can use AJAX requests for all of these 157 00:10:20,030 --> 00:10:24,000 and either receive or post data. 158 00:10:24,000 --> 00:10:26,600 Again, for our Cat Facebook example, 159 00:10:26,600 --> 00:10:32,350 you could have that URL to get an individual post, 160 00:10:32,350 --> 00:10:39,750 and you'd have a URL for creating a new wall post 161 00:10:39,750 --> 00:10:45,670 and maybe a URL for uploading your profile picture, stuff like that. 162 00:10:45,670 --> 00:10:51,730 But again, that's to pre-fetch most of your data so that you don't have to keep 163 00:10:51,730 --> 00:10:53,360 making network requests. 164 00:10:53,360 --> 00:10:59,030 For that reason, you might not want to have that individual get request for a single post, 165 00:10:59,030 --> 00:11:03,210 and instead you would just want 1 get request for the entire wall. 166 00:11:03,210 --> 00:11:06,110 And then if you're trying to strike a balance because-- 167 00:11:06,110 --> 00:11:10,970 this is also going to depend on your application. 168 00:11:10,970 --> 00:11:13,430 Because if you're expecting that people only have 10 or 20 wall posts 169 00:11:13,430 --> 00:11:15,430 that will be fine. 170 00:11:15,430 --> 00:11:17,390 But if you're expecting they'll have thousands then that request would take too long, 171 00:11:17,390 --> 00:11:23,580 and so you might want to add a get-all-posts-since parameter. 172 00:11:23,580 --> 00:11:26,580 >> For all of these you're probably going to want to sync your data in JSON-- 173 00:11:26,580 --> 00:11:29,260 JavaScript Object Notation. 174 00:11:29,260 --> 00:11:34,600 Pretty much every language deals with JSON very well. 175 00:11:34,600 --> 00:11:40,880 JQuery has this nice getJSON function that will do all of the hard work for you. 176 00:11:40,880 --> 00:11:47,390 And on PHP there's also very nice JSON communication functions. 177 00:11:47,390 --> 00:11:52,660 So, that's probably the best format for sending your models back and forth. 178 00:11:52,660 --> 00:11:56,570 >> As an example of what we've talked about so far, 179 00:11:56,570 --> 00:12:00,520 here's an example flow for your Cat Facebook application. 180 00:12:00,520 --> 00:12:07,760 It starts off with your browser requesting the base website URL. 181 00:12:07,760 --> 00:12:15,470 The server probably would send over static HTML and some JavaScript and CSS. 182 00:12:15,470 --> 00:12:19,170 It's usually best not to do any rendering on the server. 183 00:12:19,170 --> 00:12:23,370 You probably don't want to-- 184 00:12:23,370 --> 00:12:28,360 what the server isn't doing there is going down the list of wall posts 185 00:12:28,360 --> 00:12:31,120 and generating some HTML for each one and sending that over. 186 00:12:31,120 --> 00:12:34,960 It's usually best to do that on the client side because otherwise 187 00:12:34,960 --> 00:12:38,580 every time you want to re-draw something, you have to make a server request. 188 00:12:38,580 --> 00:12:42,450 And that very quickly gives you a lot of overhead. 189 00:12:42,450 --> 00:12:47,430 It's usually best just to ship sends down static HTML 190 00:12:47,430 --> 00:12:50,660 and then JavaScript and CSS that will do the rendering on the client side. 191 00:12:50,660 --> 00:12:56,750 As soon as that stuff comes in, 192 00:12:56,750 --> 00:13:03,500 then you can have--in JavaScript--you can do requests for the wall data 193 00:13:03,500 --> 00:13:08,740 and stuff like that, and after that the server is basically just doing database queries 194 00:13:08,740 --> 00:13:10,740 and checking permissions. 195 00:13:10,740 --> 00:13:16,690 The only important thing is that it can't send over some other users wall posts 196 00:13:16,690 --> 00:13:19,220 that you're not allowed to see. 197 00:13:19,220 --> 00:13:28,050 It can basically be a very thin access layer to your database, 198 00:13:28,050 --> 00:13:32,820 and then all of the showing the data--all of the views and stuff-- 199 00:13:32,820 --> 00:13:37,280 those can happen in your browser, and then when you want to make a post or something 200 00:13:37,280 --> 00:13:40,000 you just send another request. 201 00:13:40,000 --> 00:13:45,350 >> There's also some fancy stuff you can do on top of this. 202 00:13:45,350 --> 00:13:49,550 In terms of more specific technical information, 203 00:13:49,550 --> 00:13:53,360 developing in plain JavaScript can be a little bit painful, 204 00:13:53,360 --> 00:13:56,220 so there are some libraries and tools that will help you a lot with that. 205 00:13:56,220 --> 00:14:03,690 I think you've all probably heard about jQuery which makes doing HTML rendering 206 00:14:03,690 --> 00:14:08,890 and manipulation a lot easier--have lots of fancy functions for fading in and out, 207 00:14:08,890 --> 00:14:12,020 and doing zippy animations. 208 00:14:12,020 --> 00:14:13,720 There's also this library called Underscore.js. 209 00:14:13,720 --> 00:14:20,760 It has a lot of useful utility functions, stuff that you would expect JavaScript to have 210 00:14:20,760 --> 00:14:24,740 that it really doesn't--things like shuffling an array, 211 00:14:24,740 --> 00:14:28,900 removing duplicates from a list, or flattening a list of lists. 212 00:14:28,900 --> 00:14:30,900 This is just a small code sample. 213 00:14:30,900 --> 00:14:36,520 Underscore has a ton of these nice functions that you wish you would have all the time. 214 00:14:36,520 --> 00:14:38,840 >> And then there's 1 more library that I'd like to spend a little bit of time on 215 00:14:38,840 --> 00:14:44,800 called Backbone.js because Backbone really helps you deal with models on the client side 216 00:14:44,800 --> 00:14:47,210 and a lot of the confusion that it can cause. 217 00:14:47,210 --> 00:14:53,550 Backbone gives you this concept of models and collections 218 00:14:53,550 --> 00:14:58,300 in JavaScript which are basically exactly like JavaScript objects 219 00:14:58,300 --> 00:15:04,900 in JavaScript arrays but they have events when you change their properties. 220 00:15:04,900 --> 00:15:09,090 Just like in JavaScript, you can have an event when a button gets clicked or something 221 00:15:09,090 --> 00:15:14,800 these Backbone models and Backbone collections will broadcast things like 222 00:15:14,800 --> 00:15:17,510 that when they change. 223 00:15:17,510 --> 00:15:22,270 That means that you can just write something like this snippet of code here-- 224 00:15:22,270 --> 00:15:27,530 this says, whenever you add anything to the posts array you redraw the whole wall. 225 00:15:27,530 --> 00:15:34,270 And this would say whenever a post's number of likes changes, 226 00:15:34,270 --> 00:15:38,970 you notify the user that somebody liked their post. 227 00:15:38,970 --> 00:15:45,210 Or whenever any property of a post changes you redraw the post. 228 00:15:45,210 --> 00:15:51,050 Stuff like that will save you tons of complexity because otherwise 229 00:15:51,050 --> 00:15:55,440 if you don't have some framework like this then every time in your code that you change 230 00:15:55,440 --> 00:16:04,280 anything about a post, you'd have to remember yourself to call all the render functions 231 00:16:04,280 --> 00:16:07,680 and stuff like that, and if you wanted to add something new that happened 232 00:16:07,680 --> 00:16:10,680 every time you modified a post you'd have to go through every place in your 233 00:16:10,680 --> 00:16:14,610 code that you modified a post and add that new thing. 234 00:16:14,610 --> 00:16:21,450 A framework like this will remove a lot of that between-layer communication 235 00:16:21,450 --> 00:16:28,280 that makes your code complex and hard to maintain. 236 00:16:28,280 --> 00:16:31,170 >> There's a little bit about views also. 237 00:16:31,170 --> 00:16:35,960 I'm going to leave most of this to Billy because they're technically not very difficult. 238 00:16:35,960 --> 00:16:43,540 Use jQuery for your views. It's practically like a necessity at this point. 239 00:16:43,540 --> 00:16:46,290 It just makes everything so much easier. 240 00:16:46,290 --> 00:16:48,290 There are a lot of libraries. 241 00:16:48,290 --> 00:16:49,970 If you have complicated user-interface elements, 242 00:16:49,970 --> 00:16:57,250 if you want an auto-complete thing or like one of those fancy multi-selectors-- 243 00:16:57,250 --> 00:17:04,790 if you want anything like that, you should probably just search around 244 00:17:04,790 --> 00:17:08,130 and you can find a good library that will do what you want. 245 00:17:08,130 --> 00:17:11,579 Billy will explain more about the actually difficult parts of views. 246 00:17:11,579 --> 00:17:17,530 Also, as a side note, Backbone has some functionality for making views communicate 247 00:17:17,530 --> 00:17:22,800 nicely with models--look at the documentation for all of these libraries, actually. 248 00:17:22,800 --> 00:17:28,270 Just look at the docs. They're very well written and easy to follow. 249 00:17:28,270 --> 00:17:33,890 In general, you can pretty much just Google if you have problems. 250 00:17:33,890 --> 00:17:36,370 There are a lot of people using them. 251 00:17:36,370 --> 00:17:42,020 I think this is as a final note. 252 00:17:42,020 --> 00:17:48,770 >> There are also some more advanced things that you can do 253 00:17:48,770 --> 00:17:53,400 if you're looking to make your web app extra awesome. 254 00:17:53,400 --> 00:17:59,760 You can do--the new HTML5 specification has a lot of fancy things you can do. 255 00:17:59,760 --> 00:18:05,780 Local storage--which is you can store data in the browser-- 256 00:18:05,780 --> 00:18:09,470 rather than having to go back and peruse the server for everything, 257 00:18:09,470 --> 00:18:12,470 you can keep some of it on the client and that even lets people-- 258 00:18:12,470 --> 00:18:20,850 in some cases it can even let you use the webpage offline. 259 00:18:20,850 --> 00:18:26,980 There's this thing called websockets which are a different kind of network communication 260 00:18:26,980 --> 00:18:30,930 where instead of just you make one request, you get response and you're done, 261 00:18:30,930 --> 00:18:35,240 you keep open a connection to the server and so you can do things like 262 00:18:35,240 --> 00:18:37,240 real-time updates. 263 00:18:37,240 --> 00:18:42,020 So, if you were trying to make a chat app, you could use websockets 264 00:18:42,020 --> 00:18:43,790 to communicate back and forth so that you wouldn't have to keep requesting, 265 00:18:43,790 --> 00:18:48,410 "Oh, server, did anyone send me a chat?" every 10 seconds or something. 266 00:18:48,410 --> 00:18:55,620 There's also an interesting HTML5 feature where you can make it look like 267 00:18:55,620 --> 00:18:58,340 the URL of the page is changing without ever having to actually reload it. 268 00:18:58,340 --> 00:19:03,230 You can use back and forward buttons without doing a bunch of network requests. 269 00:19:03,230 --> 00:19:14,660 Stuff like that is really useful in terms of making it speedy but also work like a web app should. 270 00:19:14,660 --> 00:19:17,680 >> There's also this thing called CoffeeScript. 271 00:19:17,680 --> 00:19:24,450 CoffeeScript is a different language, actually, that compiles down to JavaScript. 272 00:19:24,450 --> 00:19:30,080 You would write all your code in CoffeeScript, and then you run this compiler, 273 00:19:30,080 --> 00:19:33,300 and it spits out a JavaScript file that you can include in your webpage. 274 00:19:33,300 --> 00:19:38,860 The reason that CoffeeScript is nice is because it gets rid of a lot of the 275 00:19:38,860 --> 00:19:44,760 weird cases that JavaScript has where equals equals, 276 00:19:44,760 --> 00:19:51,130 and equals equals do different things, or like-- 277 00:19:51,130 --> 00:19:55,740 it has nicer syntax for dealing with arrays and functions. 278 00:19:55,740 --> 00:20:00,460 This is a little snippet of CoffeeScript that produces a list of all the squares 279 00:20:00,460 --> 00:20:04,900 from 10^2 to 1^2 in reverse order. 280 00:20:04,900 --> 00:20:08,410 As you can see, CoffeeScript often lets you express in 1 line 281 00:20:08,410 --> 00:20:10,890 what would take 5 lines of JavaScript. 282 00:20:10,890 --> 00:20:13,230 It can make things a lot easier. 283 00:20:13,230 --> 00:20:15,390 It's a little bit of new syntax to learn at first, 284 00:20:15,390 --> 00:20:18,010 but it definitely will make you more productive in the long run. 285 00:20:18,010 --> 00:20:22,050 >> You can also use other languages on the server than PHP-- 286 00:20:22,050 --> 00:20:27,570 languages like Ruby, Python, or there's even a project called node.js 287 00:20:27,570 --> 00:20:31,450 that will let you use JavaScript on the server. 288 00:20:31,450 --> 00:20:34,700 Personally, I really, really hate PHP. 289 00:20:34,700 --> 00:20:38,310 I just don't enjoy working with it. 290 00:20:38,310 --> 00:20:43,450 If you, too, think that it is an awful cluge of a language, 291 00:20:43,450 --> 00:20:46,160 then you can use one of these instead. 292 00:20:46,160 --> 00:20:54,780 In general, if you want to do something and you don't really know how you would do it, 293 00:20:54,780 --> 00:20:56,780 just search the Internet. 294 00:20:56,780 --> 00:20:59,990 There are tons and tons of resources especially on-- 295 00:20:59,990 --> 00:21:03,260 StackOverflow is a great one. 296 00:21:03,260 --> 00:21:06,400 It's this website where programmers ask each other questions. 297 00:21:06,400 --> 00:21:09,690 You might have run into it if you were having trouble on CS50 problem sets. 298 00:21:09,690 --> 00:21:16,820 And there are tons of libraries for doing pretty much anything you would want. 299 00:21:16,820 --> 00:21:21,710 If you want to do something and you don't know how to do it, 300 00:21:21,710 --> 00:21:23,710 don't assume that it's impossible. 301 00:21:23,710 --> 00:21:26,160 Just look around and you might find some good resources. 302 00:21:26,160 --> 00:21:29,280 >> As a general wrap up, 303 00:21:29,280 --> 00:21:33,650 the main takeaways are keep things simple. 304 00:21:33,650 --> 00:21:36,010 The more complex your code is at the beginning 305 00:21:36,010 --> 00:21:40,370 and the more you try and do fancy stuff, 306 00:21:40,370 --> 00:21:43,300 the longer it will take to get something actually functional 307 00:21:43,300 --> 00:21:46,480 and the harder it will be to change later. 308 00:21:46,480 --> 00:21:49,580 So, do things the dumb, easy way first. 309 00:21:49,580 --> 00:21:51,720 To go along with that, 310 00:21:51,720 --> 00:21:59,070 don't be scared of throwing away old code or cleaning it up a lot. 311 00:21:59,070 --> 00:22:05,320 In general, once you actually have something working, 312 00:22:05,320 --> 00:22:09,640 it's much easier to think about than when you're still in the beginning stages 313 00:22:09,640 --> 00:22:12,610 of how do I put this all together. 314 00:22:12,610 --> 00:22:17,500 It's best to make the dumbest possible design that works 315 00:22:17,500 --> 00:22:22,270 and then improve it iteratively than trying to get everything right the first time. 316 00:22:22,270 --> 00:22:28,330 In terms of client-server division, try and keep your server very simple-- 317 00:22:28,330 --> 00:22:33,030 just a database and some authentication and don't do any hard work there. 318 00:22:33,030 --> 00:22:37,540 Do all of your complicated stuff on the client side in the browser 319 00:22:37,540 --> 00:22:40,650 in JavaScript as much as you can. 320 00:22:40,650 --> 00:22:43,420 Look around for libraries that make your life better. 321 00:22:43,420 --> 00:22:46,850 Always better to use code that someone else wrote 322 00:22:46,850 --> 00:22:49,850 if you--and not to write it yourself. 323 00:22:49,850 --> 00:22:57,560 There's a lot of stuff on the Internet. Google is your best friend. 324 00:22:57,560 --> 00:22:59,560 Google is the programmer's best friend. 325 00:22:59,560 --> 00:23:07,620 Yeah, definitely don't be afraid to look around for stuff. 326 00:23:07,620 --> 00:23:11,860 All right. And over to Billy. 327 00:23:11,860 --> 00:23:14,600 >> [Billy] Actually, before I start with some design stuff, 328 00:23:14,600 --> 00:23:17,250 does anyone have any questions for Ben about anything that he talked about? 329 00:23:17,250 --> 00:23:20,290 Okay, good. 330 00:23:20,290 --> 00:23:22,220 Again, let us know if anything's not clear 331 00:23:22,220 --> 00:23:25,420 or if you'd like us to go over something a bit more. 332 00:23:25,420 --> 00:23:30,330 I'm going to step back a bit and talk about the more fundamental parts of design. 333 00:23:30,330 --> 00:23:34,840 Ben mentioned the model called--sorry, the model controller view system 334 00:23:34,840 --> 00:23:38,520 which is sort of the technical aspect, so I'm going to look at views specifically, 335 00:23:38,520 --> 00:23:42,930 and I'm going to start with how you'd design a view that looks nice. 336 00:23:42,930 --> 00:23:50,540 Here's kind of a really basic template for our Cat Facebook. 337 00:23:50,540 --> 00:23:54,190 I think there are some fundamentals in modern UI design 338 00:23:54,190 --> 00:23:56,190 that are worth picking up. 339 00:23:56,190 --> 00:23:58,210 You can notice there's a lot of white space all over the page, 340 00:23:58,210 --> 00:24:00,790 plenty of room for things. 341 00:24:00,790 --> 00:24:02,580 Don't feel like you have to squash things into a page. 342 00:24:02,580 --> 00:24:06,700 You want to leave lots of room open, and if you go to almost any modern website 343 00:24:06,700 --> 00:24:08,380 you'll see there's white everywhere. 344 00:24:08,380 --> 00:24:10,380 There's white in places you wouldn't expect. 345 00:24:10,380 --> 00:24:14,570 You have this color palette, and it's wise at the beginning 346 00:24:14,570 --> 00:24:17,880 to choose a color palette that you're going to work with and develop. 347 00:24:17,880 --> 00:24:22,250 You also--it helps to choose a typeface, and that way you're sort of working with 348 00:24:22,250 --> 00:24:24,450 these concrete fundamentals of design. 349 00:24:24,450 --> 00:24:26,910 You have your type, you have your colors, and then you can kind of 350 00:24:26,910 --> 00:24:29,380 fit everything else in as needed. 351 00:24:29,380 --> 00:24:37,710 So, as I said, with your color scheme you want to use the bolder colors of your color scheme 352 00:24:37,710 --> 00:24:40,320 sparingly. Headers are nice. Buttons are nice to have really big, flashy colors. 353 00:24:40,320 --> 00:24:43,710 But in general, if you have a website that has colors everywhere, 354 00:24:43,710 --> 00:24:47,250 all staring you in the face, it just looks cluttered, and it's no good. 355 00:24:47,250 --> 00:24:50,430 You want to generally use light colors. 356 00:24:50,430 --> 00:24:52,890 Try to, again, pick a pretty coherent color scheme. 357 00:24:52,890 --> 00:24:56,640 You can have these little splashes of lots of color-- 358 00:24:56,640 --> 00:25:00,240 that can look pretty nice, but you want to use them pretty sparingly. 359 00:25:00,240 --> 00:25:04,270 >> As I said, you want to be minimal. Less is almost always more. 360 00:25:04,270 --> 00:25:07,430 If you can display something or not display something, 361 00:25:07,430 --> 00:25:10,230 and you're kind of unsure whether it should be there by default-- 362 00:25:10,230 --> 00:25:13,400 probably you're best off leaving it out. You can always add it in later. 363 00:25:13,400 --> 00:25:16,620 Yeah, keep things simple. 364 00:25:16,620 --> 00:25:19,510 But most importantly, you want to consider multiple designs. 365 00:25:19,510 --> 00:25:23,520 Don't think that when you make a site, you have it in your head that you're going to 366 00:25:23,520 --> 00:25:26,310 make the site in a certain way, and it's going to look exactly like this. 367 00:25:26,310 --> 00:25:29,830 It's going to have the blue header at the top and the blue side bar 368 00:25:29,830 --> 00:25:32,670 and then the yellow sub-header thing. 369 00:25:32,670 --> 00:25:34,670 You want to make multiple templates. 370 00:25:34,670 --> 00:25:37,350 You can either--if you're good with Photo Shop, you can open that up and sort of 371 00:25:37,350 --> 00:25:39,600 design a website as you like it to look. 372 00:25:39,600 --> 00:25:41,680 If not, you can just use pen and paper, 373 00:25:41,680 --> 00:25:44,000 but scratch up multiple designs. 374 00:25:44,000 --> 00:25:47,000 You want to basically have a set up where you have lots of different designs, 375 00:25:47,000 --> 00:25:50,810 and if one ends up working, then that's great. 376 00:25:50,810 --> 00:25:53,370 If one ends up failing, then you always have another one to turn to. 377 00:25:53,370 --> 00:25:57,960 In general, don't feel like you should be constrained 378 00:25:57,960 --> 00:26:00,830 to whatever design you initially decide on. 379 00:26:00,830 --> 00:26:04,420 Designs are very variable, and part of the importance of the model 380 00:26:04,420 --> 00:26:09,480 controller view system is that you can swap in and out different views you want. 381 00:26:09,480 --> 00:26:13,510 You can sway the data one way, and then decide, oh, actually, that doesn't work that well. 382 00:26:13,510 --> 00:26:19,190 I think it's kind of too complicated or there's a part here that's not really working, 383 00:26:19,190 --> 00:26:22,150 so I'm just going to totally abandon this view and swap in a totally new one. 384 00:26:22,150 --> 00:26:24,790 We can still use the old models and the old controllers. 385 00:26:24,790 --> 00:26:27,490 We can do everything on the server and client as we would before. 386 00:26:27,490 --> 00:26:32,850 But the actual wave of the data as displayed is going to be slightly different. 387 00:26:32,850 --> 00:26:35,840 >> As far as actually implementing the design you want, 388 00:26:35,840 --> 00:26:39,330 once you have a few designs sketched out on paper or on Photo Shop or whatever, 389 00:26:39,330 --> 00:26:42,120 there are a number of tools that are made available to you. 390 00:26:42,120 --> 00:26:45,700 The first you're very familiar with which is your HTML, PHP, or whatever 391 00:26:45,700 --> 00:26:48,990 language you're using just to code the static pages on your website. 392 00:26:48,990 --> 00:26:51,990 You've worked a lot with HTML which kind of gives you these tags 393 00:26:51,990 --> 00:26:57,820 that you can put things into, and basically it's a way of organizing your content. 394 00:26:57,820 --> 00:27:00,990 For example, you have the header up there, so you're going to have a header tag, 395 00:27:00,990 --> 00:27:05,770 and it's going to have some text inside of it which is probably going to be in another tag. 396 00:27:05,770 --> 00:27:08,380 Then you have a sidebar maybe with some different links, 397 00:27:08,380 --> 00:27:10,160 and those are going to all be in separate tags. 398 00:27:10,160 --> 00:27:13,870 So, basically HTML at its heart is a way of dividing up the page how 399 00:27:13,870 --> 00:27:16,980 you eventually want to format it. 400 00:27:16,980 --> 00:27:18,980 So again, you've seen that before. 401 00:27:18,980 --> 00:27:20,540 You're pretty comfortable with working with it now 402 00:27:20,540 --> 00:27:23,120 given that you've done the last pset hopefully, 403 00:27:23,120 --> 00:27:26,150 so that should be no problem. 404 00:27:26,150 --> 00:27:31,280 >> Then you have CSS which basically handles all of the design static aspects. 405 00:27:31,280 --> 00:27:35,320 It would handle all of the colors, all of the positioning of different elements, 406 00:27:35,320 --> 00:27:36,840 where they go with respect to one another, 407 00:27:36,840 --> 00:27:41,530 how big they are, the different kinds of positionings that you would have-- 408 00:27:41,530 --> 00:27:46,030 in other words, you can have things fixed so that when you scroll down they stay, 409 00:27:46,030 --> 00:27:48,700 or you can have things relative to other elements. 410 00:27:48,700 --> 00:27:50,730 All of that sort of stuff is in CSS. 411 00:27:50,730 --> 00:27:54,630 Furthermore, you can do different decorations, you can have text colors, 412 00:27:54,630 --> 00:27:56,630 text effects, all of that kind of stuff. 413 00:27:56,630 --> 00:28:00,360 Ben gave a really good seminar on this last weekend, 414 00:28:00,360 --> 00:28:04,450 and so I would definitely check that out if you plan to be doing some fancy things with CSS. 415 00:28:04,450 --> 00:28:09,850 CSS3 is actually the newest version of CSS, and it can do all sorts of really nice things. 416 00:28:09,850 --> 00:28:14,750 It can do gradients; you can have nice, rounded corners; you can do all sorts of stuff 417 00:28:14,750 --> 00:28:17,940 to make your website look more modern and fancy. 418 00:28:17,940 --> 00:28:22,150 >> The next tool is JavaScript and jQuery which Ben talked a little bit about, 419 00:28:22,150 --> 00:28:24,150 but I'll get a little farther into. 420 00:28:24,150 --> 00:28:28,100 JavaScript, as you've worked with it a little bit, or at least seen it in lecture, 421 00:28:28,100 --> 00:28:31,870 is kind of a way of dynamically doing stuff in HTML. 422 00:28:31,870 --> 00:28:35,950 HTML, as you know, is static, so once you have HTML you can't modify it. 423 00:28:35,950 --> 00:28:40,050 But JavaScript, in some ways, is a way to be able to modify HTML. 424 00:28:40,050 --> 00:28:44,520 So you can do that, and that's great, but JavaScript really is a pain to work with. 425 00:28:44,520 --> 00:28:49,050 It's so long and obtuse and to do even the simplest things 426 00:28:49,050 --> 00:28:51,630 requires lots of lines of JavaScript. 427 00:28:51,630 --> 00:28:55,410 So, jQuery is basically a library for JavaScript that simplifies all of that. 428 00:28:55,410 --> 00:28:59,880 It says, okay, if you want to have a square box come from the left 429 00:28:59,880 --> 00:29:03,980 and fade into the page so that it's in the middle, in JavaScript that would take-- 430 00:29:03,980 --> 00:29:06,340 I don't know, a hundred lines to do, and it would be a pain, 431 00:29:06,340 --> 00:29:10,540 and you come out of it hating everything about web programming. 432 00:29:10,540 --> 00:29:15,380 JQuery you basically have the element-dot-fade-in, or something like that. 433 00:29:15,380 --> 00:29:18,580 So, very, very simple functions that will let you do all kinds of cool animations 434 00:29:18,580 --> 00:29:20,580 and that kind of thing. 435 00:29:20,580 --> 00:29:23,300 The other thing that these 2 are really good for is just doing dynamic things 436 00:29:23,300 --> 00:29:25,300 with the website. 437 00:29:25,300 --> 00:29:28,370 So, rather than just having your HTML page--which displays some data but doesn't actually 438 00:29:28,370 --> 00:29:32,130 do anything--JavaScript and jQuery will let you have buttons that you can click on, 439 00:29:32,130 --> 00:29:37,960 and you can drag elements and re-order them and sort them, and have new elements 440 00:29:37,960 --> 00:29:40,500 added or removed. You can add-delete, that sort of thing. 441 00:29:40,500 --> 00:29:44,570 So, jQuery does tons of cool things. 442 00:29:44,570 --> 00:29:48,840 And Vipul is actually giving a seminar on it today, I believe, at 5-o'clock, 443 00:29:48,840 --> 00:29:51,220 so if you can stick around for that long, that would--5 or 4? 444 00:29:51,220 --> 00:29:54,930 Four. Sorry. It's actually right after this, so I would recommend 445 00:29:54,930 --> 00:29:56,680 sticking around for it if you can. 446 00:29:56,680 --> 00:30:00,180 JQuery is super, super useful, and you'll be able to do lots of really nice things with it 447 00:30:00,180 --> 00:30:03,460 for pretty much any web development project. 448 00:30:03,460 --> 00:30:06,200 >> Now I'm going to get into kind of a distinction. 449 00:30:06,200 --> 00:30:08,210 I've been talking basically about user interface. 450 00:30:08,210 --> 00:30:11,510 User interface is just the design of the site. 451 00:30:11,510 --> 00:30:13,780 But there's sort of another concept which is user experience. 452 00:30:13,780 --> 00:30:15,900 The two are very different. 453 00:30:15,900 --> 00:30:19,440 Interface is definitely part of the experience. 454 00:30:19,440 --> 00:30:21,340 In other words, when you go to a site, you look at the interface. 455 00:30:21,340 --> 00:30:22,960 That's part of how you experience the site. 456 00:30:22,960 --> 00:30:24,960 But user experience is more than that. 457 00:30:24,960 --> 00:30:29,910 User experience is about what the impression that the user gets from your site is. 458 00:30:29,910 --> 00:30:31,910 So, obviously, interface is a part of that. 459 00:30:31,910 --> 00:30:35,340 And it's definitely a necessary part, but it's not sufficient. 460 00:30:35,340 --> 00:30:38,790 In other words, if you have a nice interface, and it's pretty and colorful and all of that, 461 00:30:38,790 --> 00:30:43,650 that's great; but if the user goes to your site, sees a pretty layout and it's confused by 462 00:30:43,650 --> 00:30:47,060 everything, has no idea how to do anything, then obviously you've made a really 463 00:30:47,060 --> 00:30:48,930 poor website. 464 00:30:48,930 --> 00:30:50,930 That's sort of where user experience comes in. 465 00:30:50,930 --> 00:30:54,570 I'm going to talk a bit about UX design--UX is short for user experience-- 466 00:30:54,570 --> 00:30:58,050 and kind of how you can make sure that you have a good user experience. 467 00:30:58,050 --> 00:31:04,330 The first point is that you may design a website where a user can do anything that 468 00:31:04,330 --> 00:31:06,820 that user possibly wants. 469 00:31:06,820 --> 00:31:08,940 But if the user can't figure out how to do those things-- 470 00:31:08,940 --> 00:31:12,850 in other words, if the user doesn't have a good idea when they go to your site of, 471 00:31:12,850 --> 00:31:17,660 "Oh, if I want to update my profile, then I click this button, or if I want to post on 472 00:31:17,660 --> 00:31:20,850 someone's wall, then I go to their wall and click on a little box." 473 00:31:20,850 --> 00:31:24,410 If the user doesn't know that, then you effectively haven't actually 474 00:31:24,410 --> 00:31:27,080 implemented that functionality correctly. 475 00:31:27,080 --> 00:31:30,900 Part of implementing a functionality is that the users are actually able to use it. 476 00:31:30,900 --> 00:31:34,810 And it might be frustrating--you might make a site, and it can do all kinds of 477 00:31:34,810 --> 00:31:37,810 wonderful things, but then you'll have people test it and say, "It can't do this. 478 00:31:37,810 --> 00:31:39,770 Why can't it do this?" and you'll say back to them, 479 00:31:39,770 --> 00:31:44,420 "Well, it can. You just have to go into the 7th drop-down menu on this obscure 480 00:31:44,420 --> 00:31:48,470 page that only is found by a link at the bottom-right-hand corner" or something. 481 00:31:48,470 --> 00:31:50,430 Obviously, you don't want that. 482 00:31:50,430 --> 00:31:53,420 You want it to be clear to your users what they're supposed to do, 483 00:31:53,420 --> 00:31:56,240 and it should be simple and intuitive for them. 484 00:31:56,240 --> 00:32:01,180 >> Another thing that you want to try to do is, if someone's going to go to your site 485 00:32:01,180 --> 00:32:05,520 and 9 out of 10 times do action A, and 1 out of 10 times do action B, 486 00:32:05,520 --> 00:32:08,950 you probably want to focus their experience on action A. 487 00:32:08,950 --> 00:32:12,240 In other words, you want to make it very, very clear how to do A. 488 00:32:12,240 --> 00:32:15,980 A should be front-and-center--go to the site, see it; oh, it's right there. 489 00:32:15,980 --> 00:32:20,850 Whereas B obviously you want to be clear, but you can leave it a bit more 490 00:32:20,850 --> 00:32:22,850 in the background. 491 00:32:22,850 --> 00:32:24,640 David gives a good example of this in lecture, 492 00:32:24,640 --> 00:32:26,640 which is the Boston T system. 493 00:32:26,640 --> 00:32:29,440 When you go to the Boston T and you want to buy a ticket, 494 00:32:29,440 --> 00:32:32,700 you have to get into 5 menus before you can actually purchase a ticket 495 00:32:32,700 --> 00:32:37,130 for a $2, $2.50 value, which is how much it takes to ride the subway 496 00:32:37,130 --> 00:32:39,130 in one direction. 497 00:32:39,130 --> 00:32:41,600 That's a problem because most people who are riding the subway 498 00:32:41,600 --> 00:32:44,880 probably just want to go to one place, buy their ticket, get on right away. 499 00:32:44,880 --> 00:32:47,550 It doesn't make sense that they have to go through lots of different menus 500 00:32:47,550 --> 00:32:49,550 to get there. 501 00:32:49,550 --> 00:32:51,760 A better user experience would be a quick button on the first page 502 00:32:51,760 --> 00:32:54,760 that just says, 'buy a one-way ticket,' and that would put in all of the standard 503 00:32:54,760 --> 00:32:58,550 default values; and then if someone wants to buy a different ticket than that, 504 00:32:58,550 --> 00:33:01,690 they still, of course, have the option to, but you've optimized for 505 00:33:01,690 --> 00:33:04,080 the common-use case which is really important. 506 00:33:04,080 --> 00:33:06,830 You can see examples of this on Facebook, right? 507 00:33:06,830 --> 00:33:09,410 If you go to Facebook and you want to post a status, 508 00:33:09,410 --> 00:33:11,710 it's right at the top which is what you often want to do. 509 00:33:11,710 --> 00:33:14,730 As soon as you enter the page, you can do the most common things that 510 00:33:14,730 --> 00:33:16,730 you want to do. 511 00:33:16,730 --> 00:33:17,550 If you want to do slightly more complicated things like, 512 00:33:17,550 --> 00:33:21,070 say I want to go to my friend's wall and post a picture on it-- 513 00:33:21,070 --> 00:33:24,810 which I'll want to do often, but not as often as posting status updates-- 514 00:33:24,810 --> 00:33:28,200 so in that case, I type their name in the box at the top, click on their profile, 515 00:33:28,200 --> 00:33:31,680 and then, still, it's right at the top there once I've gotten to their profile. 516 00:33:31,680 --> 00:33:38,240 Again, I've optimized in priority for the most common-use cases. 517 00:33:38,240 --> 00:33:41,800 >> Another important thing is that often people will sort of try to get around this 518 00:33:41,800 --> 00:33:44,890 by saying, okay, so I've made the site and people are finding it confusing, 519 00:33:44,890 --> 00:33:46,110 and that's a problem, right? 520 00:33:46,110 --> 00:33:49,210 Obviously, I don't want people to be confused by the content of my site. 521 00:33:49,210 --> 00:33:53,210 But the way to solve that is not to have something pop up saying, 522 00:33:53,210 --> 00:33:55,290 hey, I'm going to teach you how to use this site. 523 00:33:55,290 --> 00:33:58,130 Step 1--click this button. Step 2--go here. 524 00:33:58,130 --> 00:34:03,080 Sure, that's a way around it--it's a way that you can tell people what to do, but it's 525 00:34:03,080 --> 00:34:05,080 really not the optimal way. 526 00:34:05,080 --> 00:34:07,420 If I go to a website and suddenly I'm bombarded with this tutorial that's telling me 527 00:34:07,420 --> 00:34:11,739 what to do and where to go and all of that, that's not fun for me. 528 00:34:11,739 --> 00:34:13,739 It's not a good experience for me. 529 00:34:13,739 --> 00:34:17,130 It's kind of a pain. I want to just start doing stuff. 530 00:34:17,130 --> 00:34:19,449 People are going to close out of their dialog box, 531 00:34:19,449 --> 00:34:23,580 or get out of the tutorial, not know what to do, and then complain because 532 00:34:23,580 --> 00:34:25,580 you haven't told them what to do. 533 00:34:25,580 --> 00:34:29,530 The way to solve this is not by giving any kind of tutorial or directions-- 534 00:34:29,530 --> 00:34:31,530 anything like that. 535 00:34:31,530 --> 00:34:33,719 As much as you can avoid it, you really want to show the user what to do 536 00:34:33,719 --> 00:34:36,429 just by the nature of how the website is laid out. 537 00:34:36,429 --> 00:34:39,090 In other words, if I go to Facebook without logging in, 538 00:34:39,090 --> 00:34:40,920 the first thing that I see on the main page-- 539 00:34:40,920 --> 00:34:44,480 it's a little login box. So, duh. I have to log in. It's right there. 540 00:34:44,480 --> 00:34:48,030 Whereas, if I went to Facebook and I had to click a little link at the bottom 541 00:34:48,030 --> 00:34:51,920 that said 'log in' and the rest of the page was just some kind of picture or something, 542 00:34:51,920 --> 00:34:54,820 I wouldn't really know what to do, right? I would be confused. 543 00:34:54,820 --> 00:34:58,590 So, it could tell me to go down there and click the button to log in, 544 00:34:58,590 --> 00:35:01,080 or the log in button could be right at the top where I'm going to see it. 545 00:35:01,080 --> 00:35:04,780 You want to always be showing the user what to do, 546 00:35:04,780 --> 00:35:06,750 and that should be inherent in the page itself. 547 00:35:06,750 --> 00:35:09,880 >> When you're thinking about designs and mocking up different ways of 548 00:35:09,880 --> 00:35:13,810 expressing your site, you really want to think about what the users are going to 549 00:35:13,810 --> 00:35:19,380 be doing and how you can show them what to do. 550 00:35:19,380 --> 00:35:23,530 One last thing is testing is really, really important. 551 00:35:23,530 --> 00:35:27,400 It is great to get someone--get a friend, get someone you don't know even-- 552 00:35:27,400 --> 00:35:30,420 who's never seen the site before to use the site. 553 00:35:30,420 --> 00:35:33,650 Because you've been working on the site for hours, you've been staring at it, 554 00:35:33,650 --> 00:35:36,670 and you know exactly what to do so obviously you're going to be testing the 555 00:35:36,670 --> 00:35:39,520 things that you've been working on and that you know work. 556 00:35:39,520 --> 00:35:42,680 But if someone else comes along and uses the site that has never used it before, 557 00:35:42,680 --> 00:35:46,880 that's a unique experience because you have someone who has no prior knowledge 558 00:35:46,880 --> 00:35:51,530 of the site going into it, so they're going to have effectively no idea what to do 559 00:35:51,530 --> 00:35:54,890 or what kind of use cases are present for them. 560 00:35:54,890 --> 00:36:00,930 That's great. That's unique because they're essentially a person with a blank for a mind. 561 00:36:00,930 --> 00:36:03,750 They can tell you if something is confusing or unclear. 562 00:36:03,750 --> 00:36:07,580 They can give you an idea of precisely what the user experience of your site is. 563 00:36:07,580 --> 00:36:10,630 It can be very hard to tell that yourself, so definitely I would encourage you 564 00:36:10,630 --> 00:36:13,640 as you're developing your projects--if you're doing web-based projects-- 565 00:36:13,640 --> 00:36:18,290 to get people using the site as early as you have some kind of functional demo. 566 00:36:18,290 --> 00:36:25,330 >> Now I'm going to talk a little bit about how to manage a web development project. 567 00:36:25,330 --> 00:36:28,900 We've gone over how you can do the technical back-end side, 568 00:36:28,900 --> 00:36:31,050 how you can design a really good site, 569 00:36:31,050 --> 00:36:34,150 and that's great if you're working by yourself but-- 570 00:36:34,150 --> 00:36:37,300 even if you're working by yourself and especially if you're working on a team, 571 00:36:37,300 --> 00:36:39,580 project management becomes a big issue. 572 00:36:39,580 --> 00:36:42,340 You've sort of heard about project management in different forms since 573 00:36:42,340 --> 00:36:45,410 elementary school when you were told group work. 574 00:36:45,410 --> 00:36:46,820 You have to cooperate, communicate, all of that. 575 00:36:46,820 --> 00:36:49,620 That all still applies here, but there are some unique circumstances with 576 00:36:49,620 --> 00:36:54,910 computer science that you want to be aware of, and you want to make sure you handle well. 577 00:36:54,910 --> 00:36:58,050 I'll talk first a little bit about the team that you'll be in. 578 00:36:58,050 --> 00:37:03,280 It's very important to pick the right size of a team to be working on, 579 00:37:03,280 --> 00:37:05,890 and in your final project I think you have the option to choose 580 00:37:05,890 --> 00:37:08,610 between 1 and 4 people if I'm correct. 581 00:37:08,610 --> 00:37:12,050 You want to make sure that you're not just choosing the number of people 582 00:37:12,050 --> 00:37:14,950 that you want to work with because they're your friends. 583 00:37:14,950 --> 00:37:18,170 You want to choose a team that's a good size and that will get the job done. 584 00:37:18,170 --> 00:37:22,700 There's a trade off in having more people versus less people. 585 00:37:22,700 --> 00:37:25,320 If you have more people, obviously more work can be done 586 00:37:25,320 --> 00:37:28,450 because you have lots of people, lots of code, lots of ideas, 587 00:37:28,450 --> 00:37:29,870 and that's all great. 588 00:37:29,870 --> 00:37:32,590 But it also requires a lot more management and a lot more communication. 589 00:37:32,590 --> 00:37:34,720 In other words, if you have 4 people working on the same project 590 00:37:34,720 --> 00:37:39,200 and they're all editing the same code, more or less they all kind of need to know 591 00:37:39,200 --> 00:37:40,920 what's going on so it requires you-- 592 00:37:40,920 --> 00:37:44,580 if you add some new function you sort of have to tell people--I'm adding this, 593 00:37:44,580 --> 00:37:48,510 I'm changing this in this way--especially if you get into the really deep stuff 594 00:37:48,510 --> 00:37:52,730 like the models and the controllers that are actually going to influence how the site works. 595 00:37:52,730 --> 00:37:54,500 The whole team needs to be aware of it, 596 00:37:54,500 --> 00:37:58,140 so you need to make sure you're not choosing too big a team that's going to be hard 597 00:37:58,140 --> 00:37:59,970 to make that communication. 598 00:37:59,970 --> 00:38:02,930 You also don't want to choose a small enough team that you're not going to 599 00:38:02,930 --> 00:38:06,250 be able to communicate because it's just you. 600 00:38:06,250 --> 00:38:11,270 >> Another thing to consider is the balance of where people's skills are. 601 00:38:11,270 --> 00:38:14,350 It's great if you're all really good programmers. 602 00:38:14,350 --> 00:38:17,050 But if you're all back-end people, then your site isn't going to look very good 603 00:38:17,050 --> 00:38:20,860 because you have this great database, and it does super-fast search queries-- 604 00:38:20,860 --> 00:38:26,130 which is great--but when you go to it, it's like a 1990's site with red and blue 605 00:38:26,130 --> 00:38:30,370 everywhere, and that's no good either. 606 00:38:30,370 --> 00:38:34,210 Notice that Ben and I working as a team are very nice because I'm sort of more 607 00:38:34,210 --> 00:38:38,030 in the front end, we both interact in the middle-end, and Ben's really good with back-end stuff, 608 00:38:38,030 --> 00:38:43,550 so that works really well because we can design any site and basically the holes 609 00:38:43,550 --> 00:38:47,580 in that site that need to be filled can be filled by either one of us, or possibly both. 610 00:38:47,580 --> 00:38:50,210 You want to make sure that there are no holes in your team. 611 00:38:50,210 --> 00:38:51,180 It's okay if there's a bit of overlap. 612 00:38:51,180 --> 00:38:53,670 In other words, if you have 2 people that are both good with back end, 613 00:38:53,670 --> 00:38:57,250 that can be good as well because they can help each other with problems 614 00:38:57,250 --> 00:38:58,820 that they are having. 615 00:38:58,820 --> 00:39:02,590 It can be a problem if you only have 1 person who's responsible for a certain thing 616 00:39:02,590 --> 00:39:06,650 and they run into a problem, so you do want to have a little bit of overlap 617 00:39:06,650 --> 00:39:10,760 but you most importantly want to make sure that all of the possible holes are filled. 618 00:39:10,760 --> 00:39:17,550 >> The last thing--and this should be obvious, but it's often not. 619 00:39:17,550 --> 00:39:19,550 You really want to be having fun. 620 00:39:19,550 --> 00:39:23,360 The point of this final project in CS50 and often the point of web development in general 621 00:39:23,360 --> 00:39:26,360 is not to just do a job because it needs doing. 622 00:39:26,360 --> 00:39:29,140 You really want to be having fun, and you want to be making something 623 00:39:29,140 --> 00:39:31,180 that's motivating you to work on it. 624 00:39:31,180 --> 00:39:33,650 If whatever you're making is a pain to sit down and work on, 625 00:39:33,650 --> 00:39:35,650 then you're not choosing the right project. 626 00:39:35,650 --> 00:39:37,730 You want to choose something that you find interesting, 627 00:39:37,730 --> 00:39:41,150 you really want to see the result, you're excited when you get a new idea about 628 00:39:41,150 --> 00:39:44,700 something you could do--so there's all kinds of projects there that I'm sure 629 00:39:44,700 --> 00:39:47,290 you can find--everyone has something that would really intrigue them 630 00:39:47,290 --> 00:39:49,290 if they're doing a web-based project. 631 00:39:49,290 --> 00:39:52,210 I'll say it again right now. 632 00:39:52,210 --> 00:39:54,520 If your project seems like a pain and you don't want to work on it, 633 00:39:54,520 --> 00:39:57,260 choose another project. Choose something that really inspires you. 634 00:39:57,260 --> 00:40:00,260 >> Ben mentioned this concept of iteration a bit, and I want to go over it a bit. 635 00:40:00,260 --> 00:40:08,250 It's really important to work in spurts where you obtain something functional. 636 00:40:08,250 --> 00:40:13,420 It can be great if you have this plan for a website that's going to do A, B, and C, 637 00:40:13,420 --> 00:40:16,000 and eventually it'll get there. 638 00:40:16,000 --> 00:40:18,600 But you're stuck in this phase where you're working on it and working on it, 639 00:40:18,600 --> 00:40:23,330 but nothing's getting done. You don't have anything to see and a tangible, functional thing. 640 00:40:23,330 --> 00:40:27,940 What you really want to do as much as it seems kind of a pain sometimes to 641 00:40:27,940 --> 00:40:32,300 work on something and then sort of cap it off so that it's at least at a stable, running 642 00:40:32,300 --> 00:40:34,910 version even if it doesn't have all the features you want. 643 00:40:34,910 --> 00:40:37,690 And maybe there are some features that you really want to add but you just can't 644 00:40:37,690 --> 00:40:41,830 because you want to get this site to a functional point. 645 00:40:41,830 --> 00:40:44,400 And so you want to kind of have the whole development process look like that. 646 00:40:44,400 --> 00:40:47,810 You want to start somewhere functional--or essentially start with nothing-- 647 00:40:47,810 --> 00:40:49,890 but you want to get somewhere very basic and functional. 648 00:40:49,890 --> 00:40:54,940 And then again, make a sort of jump and get somewhere functional again. 649 00:40:54,940 --> 00:40:59,190 You'll slowly build up, and it might go a bit slower than it would otherwise, 650 00:40:59,190 --> 00:41:03,000 but in the long run if you're constantly stuck in this middle ground phase where you 651 00:41:03,000 --> 00:41:06,380 don't actually have anything working, it can be a really big frustration 652 00:41:06,380 --> 00:41:09,970 to work on your project because you're always so close to getting it working, 653 00:41:09,970 --> 00:41:12,130 and it's never actually working. 654 00:41:12,130 --> 00:41:14,810 You want to work in these functional spurts, 655 00:41:14,810 --> 00:41:17,950 and you also want to do some reflection after each one. 656 00:41:17,950 --> 00:41:21,260 In other words, once you're at a point where the site is now working-- 657 00:41:21,260 --> 00:41:24,790 it doesn't have everything you like but it does some things-- 658 00:41:24,790 --> 00:41:28,870 you want to think, okay, is this site accomplishing the goal that I set out to do? 659 00:41:28,870 --> 00:41:33,410 In other words, if the site is going to do X, is what I have working in the direction of X? 660 00:41:33,410 --> 00:41:36,450 Are all of the functionalities that I wanted there? 661 00:41:36,450 --> 00:41:39,340 And moreover, is it serving the overall purpose that I want? 662 00:41:39,340 --> 00:41:43,200 If you're finding that your site is starting to veer in a different direction 663 00:41:43,200 --> 00:41:47,330 or maybe things just kind of aren't working out, it may be time to shift gears a little bit. 664 00:41:47,330 --> 00:41:51,700 In other words, it's worth considering--it's worth throwing out ideas if necessary 665 00:41:51,700 --> 00:41:57,950 and considering am I really working towards what I want to be. 666 00:41:57,950 --> 00:42:00,760 >> I believe that's my next point. Don't be afraid to abandon ideas. 667 00:42:00,760 --> 00:42:03,750 Just because you spent lots of hours working on a feature 668 00:42:03,750 --> 00:42:07,890 and finally got it working but it really isn't going so well-- 669 00:42:07,890 --> 00:42:12,690 like it's not that useful or users are having trouble using it--that sort of thing-- 670 00:42:12,690 --> 00:42:15,300 don't be afraid to throw it away. 671 00:42:15,300 --> 00:42:17,650 It sucks that you've spent a lot of time working on it, 672 00:42:17,650 --> 00:42:21,870 but ultimately you don't want a site that's kind of put together by these pieces that 673 00:42:21,870 --> 00:42:25,380 sort of work but aren't that well served. 674 00:42:25,380 --> 00:42:27,990 Also, don't be afraid to embrace new ideas. 675 00:42:27,990 --> 00:42:30,050 If someone comes along and says, hey, that site looks really cool but 676 00:42:30,050 --> 00:42:32,290 wouldn't it even be great if it also did this? 677 00:42:32,290 --> 00:42:36,220 Just because that's something that you didn't intend and something that's not in your 678 00:42:36,220 --> 00:42:37,900 specs, something that you haven't set out to do, 679 00:42:37,900 --> 00:42:40,860 don't be afraid to take it on and then work with it. 680 00:42:40,860 --> 00:42:43,680 Because often the ideas that you run with throughout the course of development 681 00:42:43,680 --> 00:42:47,630 end up being the really cool features of the website. 682 00:42:47,630 --> 00:42:49,630 >> I've said this before. I'll say it again. 683 00:42:49,630 --> 00:42:51,630 Testers are super, super useful. 684 00:42:51,630 --> 00:42:56,350 Try to get people who have never seen the site before to log on and see what's going on 685 00:42:56,350 --> 00:42:59,080 because they can not only test the usefulness of the site and the user experience, 686 00:42:59,080 --> 00:43:02,070 but they can also test the functionality in ways that you can't. 687 00:43:02,070 --> 00:43:06,430 If you make some feature that does a certain thing 688 00:43:06,430 --> 00:43:11,620 and you know it's going to do that same thing correctly every single time, that's great. 689 00:43:11,620 --> 00:43:16,610 But it can often be hard to account for corner cases where a user might 690 00:43:16,610 --> 00:43:19,500 type something that you weren't expecting--precisely because you defined 691 00:43:19,500 --> 00:43:21,500 the features yourself. 692 00:43:21,500 --> 00:43:23,730 So, to have someone come on who has no idea how to use the site 693 00:43:23,730 --> 00:43:26,840 and to just break it in whatever ways they can do is really useful because you 694 00:43:26,840 --> 00:43:30,340 get an idea from a totally different perspective of what on your site is working 695 00:43:30,340 --> 00:43:33,300 and what needs repair. 696 00:43:33,300 --> 00:43:37,070 >> Last, I'm going to talk about some general good practices, 697 00:43:37,070 --> 00:43:42,470 and you've seen a lot of these in CS50, but they also really, really apply in a project setting. 698 00:43:42,470 --> 00:43:47,600 One is comments. Always comment your code especially if you're working on a big team. 699 00:43:47,600 --> 00:43:51,230 It can be so annoying to just have a giant block of code that someone's written 700 00:43:51,230 --> 00:43:54,230 and maybe it works, maybe it doesn't, but you have no idea what it does, 701 00:43:54,230 --> 00:43:58,010 so you have no idea whether it's useful or not or whether it should be there or not, 702 00:43:58,010 --> 00:44:00,200 and if you're working on something else it's even possible that you're working on 703 00:44:00,200 --> 00:44:06,590 the same thing, so just be very, very careful to be considerate of your peers 704 00:44:06,590 --> 00:44:09,710 and write code that's well documented. 705 00:44:09,710 --> 00:44:13,580 You don't have to go so far as to do the whole thing where like if you increment 706 00:44:13,580 --> 00:44:16,620 a counter have a comment that says, I'm adding 1 to this counter. 707 00:44:16,620 --> 00:44:20,450 It doesn't have to be that detailed, but for any function that you're ever writing 708 00:44:20,450 --> 00:44:23,160 you should have some documentation of what that function exactly does, 709 00:44:23,160 --> 00:44:25,140 what its inputs are, and what it should return. 710 00:44:25,140 --> 00:44:27,800 That way you can use other people's components of the site 711 00:44:27,800 --> 00:44:31,990 and you can work towards building something big. 712 00:44:31,990 --> 00:44:34,100 >> Another important thing is you want to do regular clean-ups. 713 00:44:34,100 --> 00:44:40,490 Code gets messy. Don't feel bad if your code is just totally unreadable and a giant mess. 714 00:44:40,490 --> 00:44:42,770 That happens in web development always. 715 00:44:42,770 --> 00:44:46,530 You're adding new features, removing old ones. Stuff is going to be there that shouldn't be. 716 00:44:46,530 --> 00:44:49,330 That's fine, but you want to make sure to deal with that regularly. 717 00:44:49,330 --> 00:44:53,430 You don't want to let it build up to the point where you just can't find anything 718 00:44:53,430 --> 00:44:56,430 in your code, and you have no idea what anything does. 719 00:44:56,430 --> 00:44:58,430 That's the case with HTML. 720 00:44:58,430 --> 00:44:59,490 Sometimes you'll end up with objects that don't contain anything, 721 00:44:59,490 --> 00:45:01,320 and you'll want to get rid of those. 722 00:45:01,320 --> 00:45:04,610 In CSS, you can be referring to elements that aren't there anymore, 723 00:45:04,610 --> 00:45:06,340 so you want to get rid of that code. 724 00:45:06,340 --> 00:45:09,900 In JavaScript, you might have removed something from the HTML. 725 00:45:09,900 --> 00:45:13,150 So, you want to make sure that you're always cleaning up, making things pretty 726 00:45:13,150 --> 00:45:17,450 as much as you can on a regular basis. 727 00:45:17,450 --> 00:45:21,060 >> Another really useful thing that I don't think is outlined very much in CS50 728 00:45:21,060 --> 00:45:23,430 but it's worth getting into is version control. 729 00:45:23,430 --> 00:45:27,180 The idea of version control is when you're basically keeping track of all the progress 730 00:45:27,180 --> 00:45:30,820 you've made towards your site and if at any point you realize, oh, this was working 731 00:45:30,820 --> 00:45:35,220 a while ago but it's not working any more, you can go back to previous versions 732 00:45:35,220 --> 00:45:37,720 and see what has changed since then and that sort of thing. 733 00:45:37,720 --> 00:45:41,670 The primary way to do that is with Git, and Git is this whole kind of system that 734 00:45:41,670 --> 00:45:46,390 I believe Tommy MacWilliam gave a seminar about last year. 735 00:45:46,390 --> 00:45:51,520 If you go into the CS50 seminars for 2011, you can see his seminar on that. 736 00:45:51,520 --> 00:45:57,070 The idea of Git is basically that at regular intervals you're making these commitments 737 00:45:57,070 --> 00:46:01,430 which are ways of saying the site's in a pretty stable version right now so 738 00:46:01,430 --> 00:46:05,910 I'm packaging it up and sending it away to a server, and then you can go to that server 739 00:46:05,910 --> 00:46:07,910 and look at all previous versions of your code and see how it's progressed 740 00:46:07,910 --> 00:46:12,210 and all that sort of good stuff. 741 00:46:12,210 --> 00:46:14,210 So, that's basically it. 742 00:46:14,210 --> 00:46:17,870 As far as web development, we're happy to stick around and answer any 743 00:46:17,870 --> 00:46:20,570 questions as far as our presentation. 744 00:46:20,570 --> 00:46:22,900 That's it. Thanks. >>[Ben] Thanks. 745 00:46:22,900 --> 00:46:28,480 [applause] 746 00:46:28,480 --> 00:46:30,950 >> [Billy] Staff, does anyone have any questions about things that we've covered 747 00:46:30,950 --> 00:46:33,950 or things that we've not covered that they were hoping we'd cover? 748 00:46:33,950 --> 00:46:35,950 We'd be happy to answer those. Anyone? 749 00:46:35,950 --> 00:46:50,360 [audience member] What are the pros and cons of using Ruby or using Python? 750 00:46:50,360 --> 00:46:58,660 [Ben] The question was, what are the pros and cons of using Ruby or Python 751 00:46:58,660 --> 00:46:59,900 instead of like PHP. 752 00:46:59,900 --> 00:47:11,340 The pros are that Ruby and Python are much better languages than PHP. 753 00:47:11,340 --> 00:47:14,920 At least in my opinion, and I think in a lot of other people's opinions as well. 754 00:47:14,920 --> 00:47:20,990 They were designed more for doing complex stuff, 755 00:47:20,990 --> 00:47:25,380 and less for whacking together web pages really quickly with 756 00:47:25,380 --> 00:47:28,400 a little bit of dynamic content. 757 00:47:28,400 --> 00:47:35,180 The cons are that there's a little bit of--there's more of a learning curve 758 00:47:35,180 --> 00:47:37,220 to get them set up. 759 00:47:37,220 --> 00:47:41,010 That is, like in PHP, you can just have an HTML file and you write less-than, 760 00:47:41,010 --> 00:47:43,060 question mark, and then you write some code, and then you write question mark, 761 00:47:43,060 --> 00:47:45,700 greater-than, and then you're done. 762 00:47:45,700 --> 00:47:50,300 In other languages like Ruby or Python, 763 00:47:50,300 --> 00:47:56,810 you have to go through a bit more work to get the initial site running. 764 00:47:56,810 --> 00:48:02,730 There's also--at least it used to be the case--that there's more documentation 765 00:48:02,730 --> 00:48:05,480 available for PHP just because there are more people using it. 766 00:48:05,480 --> 00:48:09,370 I think that's not as much of an issue anymore. 767 00:48:09,370 --> 00:48:12,520 There's certainly very good documentation for stuff like Ruby on Rails 768 00:48:12,520 --> 00:48:16,080 or Django for Python is the equivalent. 769 00:48:16,080 --> 00:48:25,910 PHP is the one that everyone's been using for years, and you know how it works. 770 00:48:25,910 --> 00:48:28,460 Ruby and Python are a little bit less mature. 771 00:48:28,460 --> 00:48:33,130 >> [audience member] If you were to choose between one of them to learn or pick up, 772 00:48:33,130 --> 00:48:36,130 which would you prefer? 773 00:48:36,130 --> 00:48:38,870 Honestly, I think that depends on the person. 774 00:48:38,870 --> 00:48:45,450 I'm sorry. The question was which would you pick for someone to learn? 775 00:48:45,450 --> 00:48:50,230 I find Python the nicest personally. 776 00:48:50,230 --> 00:48:55,360 There are a lot of people who--I did my first web dev project in Python and Django. 777 00:48:55,360 --> 00:49:00,300 There are a lot of people who like Ruby on Rails also. 778 00:49:00,300 --> 00:49:02,650 Probably more people who know Ruby on Rails. 779 00:49:02,650 --> 00:49:05,270 Honestly, I would just go with whatever the people around you know 780 00:49:05,270 --> 00:49:09,680 so that you have people to ask questions. 781 00:49:19,640 --> 00:49:24,170 >> The question was--on shared servers is it kind of hard to work on Python? 782 00:49:24,170 --> 00:49:26,170 That depends on your hosting. 783 00:49:26,170 --> 00:49:29,400 There are a number of web hosts that will post Python stuff. 784 00:49:29,400 --> 00:49:31,400 WebFaction does that, right? 785 00:49:31,400 --> 00:49:34,400 WebFaction is one that Billy and I have used for some projects. 786 00:49:34,400 --> 00:49:37,750 They're really great. They support most languages. 787 00:49:37,750 --> 00:49:40,020 But it's true that PHP is much more widely supported. 788 00:49:40,020 --> 00:49:45,210 So, if you're stuck on a web host that only does PHP, that's a good reason to use PHP. 789 00:49:45,210 --> 00:49:56,010 >> [audience member] I just got into learning how to query some databases, 790 00:49:56,010 --> 00:50:00,680 and I know my SQL is all over the place, but I recently got exposed to-- 791 00:50:00,680 --> 00:50:04,470 and you pointed it out. You see JSON and expandable databases. 792 00:50:04,470 --> 00:50:14,580 My SQL is still all over the place. How do you see that happening? 793 00:50:14,580 --> 00:50:21,330 Is there going to be a growing tendency for more expandable (inaudible)? 794 00:50:21,330 --> 00:50:30,100 The question was--do I think there's going to be a trend towards non-SQL databases. 795 00:50:30,100 --> 00:50:33,850 For instance, like MongoDB. I think that is definitely true. 796 00:50:33,850 --> 00:50:38,730 My advice was mostly mySQL-related here only because mySQL is 797 00:50:38,730 --> 00:50:40,950 industry standard. 798 00:50:40,950 --> 00:50:45,950 Personally, I much prefer databases that don't have schemos like MongoDB 799 00:50:45,950 --> 00:50:49,520 where you don't have the issue of, oh, I need to add another column. 800 00:50:49,520 --> 00:50:51,600 Woe is me, like whatever do I do? 801 00:50:51,600 --> 00:50:55,840 It's very hard to do that on mySQL, but when you have something like Mongo 802 00:50:55,840 --> 00:50:57,840 it's much nicer. 803 00:50:57,840 --> 00:51:03,780 The other nice thing about Mongo is that your records are actually JavaScript objects. 804 00:51:03,780 --> 00:51:10,110 There's no sort of conversion step where you need to take these database rows 805 00:51:10,110 --> 00:51:13,140 and turn them into a JavaScript object and then send them over the wire. 806 00:51:13,140 --> 00:51:20,290 I think stuff like that is going to be very, very useful for rapid web development in the future. 807 00:51:20,290 --> 00:51:23,060 >> [Billy] Something I would add which is just a general point is that 808 00:51:23,060 --> 00:51:26,580 don't feel like you should have learned all of the languages we've discussed 809 00:51:26,580 --> 00:51:28,580 from our seminar. 810 00:51:28,580 --> 00:51:30,560 Obviously the point is to give you an idea of what's out there, 811 00:51:30,560 --> 00:51:33,450 and if you're intrigued by any of the things we've mentioned you can Google them 812 00:51:33,450 --> 00:51:35,830 and read up on them. 813 00:51:35,830 --> 00:51:38,750 And as I mentioned, there are a few seminars that deal with precisely these things. 814 00:51:38,750 --> 00:51:41,660 There are even more seminars that I haven't mentioned that probably get into 815 00:51:41,660 --> 00:51:43,660 this stuff as well. 816 00:51:43,660 --> 00:51:46,610 The idea is that if you want to work on something, here are the tools at your disposal. 817 00:51:46,610 --> 00:51:51,630 Don't feel overwhelmed if you aren't really sure what these tools do exactly, 818 00:51:51,630 --> 00:51:54,830 but know that they're out there and that you can make wide use of them 819 00:51:54,830 --> 00:51:56,830 by Google. 820 00:51:56,830 --> 00:51:59,960 >> [audience member] What kind of things do you need to do to make sure your website 821 00:51:59,960 --> 00:52:02,530 looks good on mobile devices? 822 00:52:02,530 --> 00:52:05,590 [Billy] Mobile devices are a little hard. 823 00:52:05,590 --> 00:52:07,590 There's 2 ways you can approach it. 824 00:52:07,590 --> 00:52:11,500 The first way is that you actually have a mobile website. 825 00:52:11,500 --> 00:52:14,660 In other words, you perform some sort of detection at the beginning 826 00:52:14,660 --> 00:52:18,830 when the browser is making the request to your website which either says 827 00:52:18,830 --> 00:52:25,240 return this view--which will be the view for desktop or laptop browsers-- 828 00:52:25,240 --> 00:52:27,710 and this other view for mobile devices. 829 00:52:27,710 --> 00:52:33,090 That's a place where views are really nice in that you can pretty much swap the 830 00:52:33,090 --> 00:52:37,580 two out and have an interface that works really nicely on mobile devices 831 00:52:37,580 --> 00:52:40,770 and have a completely different one that works nicely on browser devices. 832 00:52:40,770 --> 00:52:43,770 The problem with that is it takes a long time because it means coding 833 00:52:43,770 --> 00:52:47,060 a totally different interface. 834 00:52:47,060 --> 00:52:49,720 The other way that you can do it is-- 835 00:52:49,720 --> 00:52:55,250 a lot of modern phones will display websites and try to render them as a browser would, 836 00:52:55,250 --> 00:52:57,680 and they do their best. 837 00:52:57,680 --> 00:53:04,340 You can kind of try to stay light on the amount of jQuery JavaScript you're using 838 00:53:04,340 --> 00:53:07,360 which tends to be where things can go wrong a little bit. 839 00:53:07,360 --> 00:53:13,430 This is sort of the way that you should use if you don't have that much time. 840 00:53:13,430 --> 00:53:18,540 If you do have the time to work on a mobile interface, that's obviously your best option. 841 00:53:18,540 --> 00:53:23,320 >> I think generally for CS50 projects, you're going to want to choose one or the other. 842 00:53:23,320 --> 00:53:27,990 In other words, you want to make a mobile app or you want to make a desktop website. 843 00:53:27,990 --> 00:53:32,200 And that sort of determines where you go with that. 844 00:53:32,200 --> 00:53:35,360 But if you want to expand it out later, probably your best bet is 845 00:53:35,360 --> 00:53:37,360 to make another interface for the other. 846 00:53:51,650 --> 00:53:56,340 I have a little bit of experience in developing WordPress-based sites. 847 00:53:56,340 --> 00:53:58,670 I hosted a personal website on WordPress for awhile. 848 00:53:58,670 --> 00:54:02,310 Those kinds of frameworks can be nice just as very basic things. 849 00:54:02,310 --> 00:54:07,050 Oftentimes you'll just run into a lot of customizability issues though. 850 00:54:07,050 --> 00:54:10,940 You'll want to have something look a certain way or be a certain way 851 00:54:10,940 --> 00:54:14,510 and you just can't because it's hard-wired into the system that 852 00:54:14,510 --> 00:54:17,480 this is how you have to do things which can be a bit of a problem. 853 00:54:17,480 --> 00:54:22,020 Since then I've kind of been more inclined to work with sites from the ground up. 854 00:54:22,020 --> 00:54:26,840 For things like blog databases and that sort of thing it's really not that hard to build a framework. 855 00:54:26,840 --> 00:54:29,970 If you're really stretched for time, you can of course use something like WordPress 856 00:54:29,970 --> 00:54:33,120 or that sort of thing for a blog. 857 00:54:33,120 --> 00:54:38,790 The kinds of things that blogs store and do are not really hard enough that 858 00:54:38,790 --> 00:54:41,500 if you're running into any of those kinds of things, you're probably best just to 859 00:54:41,500 --> 00:54:43,500 make an in-house version. 860 00:54:43,500 --> 00:54:48,350 >> I think that's about it, so thanks again for coming. 861 00:54:48,350 --> 00:54:51,960 We really enjoyed talking to you guys and hope that you learned some stuff. 862 00:54:51,960 --> 00:54:55,350 [Ben] We're happy to talk--we have to go but we're happy to talk more outside 863 00:54:55,350 --> 00:55:01,650 if you have another question. Thanks again. [applause] 864 00:55:03,750 --> 00:55:06,000 [CS50.TV]