1 00:00:00,000 --> 00:00:02,500 [Powered by Google Translate] [Seminario] [Desenvolvemento web: Da idea á implementación] 2 00:00:02,500 --> 00:00:04,200 [Ben Kuhn] [Billy Janitsch] [Universidade de Harvard] 3 00:00:04,200 --> 00:00:07,250 [Isto é CS50] [CS50.TV] 4 00:00:07,250 --> 00:00:10,840 [Billy] Ola, eu son Billy e este é Ben. >> [Ben] Hi 5 00:00:10,840 --> 00:00:12,840 Nós imos estar fala de desenvolvemento web hoxe. 6 00:00:12,840 --> 00:00:14,840 [Webdev] [Billy Janitsch e Ben Kuhn] 7 00:00:14,840 --> 00:00:16,840 Un pouco sobre nós en primeiro lugar. 8 00:00:16,840 --> 00:00:19,590 Ben é o tipo de cara back-end. El fai as cousas funcionan. 9 00:00:19,590 --> 00:00:21,870 E entón eu entrar e facelos fermosos. 10 00:00:21,870 --> 00:00:26,610 Estou en gran parte implicada con máis front-end tipo de proxecto de deseño de cousas, 11 00:00:26,610 --> 00:00:31,260 e Ben, por outra banda, sabe o que está facendo para que funciona en cousas back-end. 12 00:00:31,260 --> 00:00:34,050 Xuntos fixemos algunhas cousas. 13 00:00:34,050 --> 00:00:38,710 Por exemplo, o ano pasado traballamos en Gimblium que é un estudo de desenvolvemento de xogos online. 14 00:00:38,710 --> 00:00:40,400 Ese era o noso proxecto final para a clase, 15 00:00:40,400 --> 00:00:42,780 e desde entón fixemos Harvard Clase 16 00:00:42,780 --> 00:00:47,860 que é unha estrutura en liña para navegación e cursos de compras en Harvard. 17 00:00:47,860 --> 00:00:53,180 >> Imos comezar con esa idea para o noso sitio. 18 00:00:53,180 --> 00:00:57,480 Nós imos facer o Facebook, pero para gatos. 19 00:00:57,480 --> 00:00:59,520 Antes de que realmente facer esta web, 20 00:00:59,520 --> 00:01:02,520 non fan esta web porque non é bo, pero imos usalo como un cadro 21 00:01:02,520 --> 00:01:05,349 e pasar polo proceso de como podemos levar esta idea 22 00:01:05,349 --> 00:01:07,450 e transformalo en un sitio real que podemos utilizar. 23 00:01:07,450 --> 00:01:11,940 Imos comezar por romper o sitio para abaixo. 24 00:01:11,940 --> 00:01:13,190 Como ten feito o CS50, 25 00:01:13,190 --> 00:01:17,360 quere pensar sobre cales son os compoñentes reais que van para o web. 26 00:01:17,360 --> 00:01:21,290 Basicamente transformando-o de unha idea que non é máis que unha especie de un concepto abstracto 27 00:01:21,290 --> 00:01:23,590 nunha cousa real e tanxible que podería facer. 28 00:01:23,590 --> 00:01:25,910 Comezamos a facer algunhas preguntas. 29 00:01:25,910 --> 00:01:28,070 ¿Que é este sitio? Por que estamos a facer iso? 30 00:01:28,070 --> 00:01:30,670 Que é o que vai ser usado? Ese tipo de cousas. 31 00:01:30,670 --> 00:01:33,660 No caso de Facebook Gato, 32 00:01:33,660 --> 00:01:37,730 que basicamente quere un sitio web que permite que gatos rede social co outro. 33 00:01:37,730 --> 00:01:41,260 A idea é que poden publicar en cerramento de cada un, 34 00:01:41,260 --> 00:01:43,510 poden facer comentarios, este tipo de cousas. 35 00:01:43,510 --> 00:01:46,720 E é aí onde entramos en compoñentes funcionais. 36 00:01:46,720 --> 00:01:51,270 Temos, agora, este tipo de estrutura de - temos perfís de usuario, 37 00:01:51,270 --> 00:01:53,990 temos comentarios, e podemos publicar. 38 00:01:53,990 --> 00:01:57,390 Quizais un día imos afluente gustos e ese tipo de cousas. 39 00:01:57,390 --> 00:02:00,410 E nós medio que quero priorizar estes recursos que van dentro 40 00:02:00,410 --> 00:02:03,340 Queremos dicir como, ok, é moi importante que todos teñan un perfil 41 00:02:03,340 --> 00:02:06,440 e que todos poidan publicar no paredes de cada un. 42 00:02:06,440 --> 00:02:08,509 Secundario para que, os comentarios sería bo. 43 00:02:08,509 --> 00:02:10,180 Quizais máis tarde imos afluente gustos. 44 00:02:10,180 --> 00:02:13,700 Entón, quere ter unha idea do que é fundamental para o seu proxecto 45 00:02:13,700 --> 00:02:17,260 eo que é unha especie de característica máis xeral que podería ser aplicado máis tarde. 46 00:02:17,260 --> 00:02:20,870 Quere que a sorte de ter unha lista específica en mente, 47 00:02:20,870 --> 00:02:24,090 mais o proxecto que comece con non será o proxecto que rematar con. 48 00:02:24,090 --> 00:02:27,100 Noutras palabras, as cousas van cambiar mentres está a desenvolver o sitio web, 49 00:02:27,100 --> 00:02:30,090 e quere deixar espazo para iso. 50 00:02:30,090 --> 00:02:34,470 Vou entrega-lo para Ben, que vai falar un pouco sobre a estrutura. 51 00:02:34,470 --> 00:02:39,610 >> [Ben] eu vou estar falando sobre o lado máis técnico de desenvolvemento web. 52 00:02:39,610 --> 00:02:42,370 Imos pasar por riba de algúns principios básicos en primeiro lugar. 53 00:02:42,370 --> 00:02:45,730 Cando está facendo unha aplicación web, 54 00:02:45,730 --> 00:02:50,470 a división principal que vai ter que ter é 55 00:02:50,470 --> 00:02:52,700 vai ter algo suceder no lado do cliente - 56 00:02:52,700 --> 00:02:56,700 ou sexa, o código que che navegador leva dende o sitio web 57 00:02:56,700 --> 00:03:01,910 eo JavaScript, HTML, CSS cousas. 58 00:03:01,910 --> 00:03:04,490 Isto é todo no lado do cliente. 59 00:03:04,490 --> 00:03:08,680 Terá outro código que se executa no lado do servidor 60 00:03:08,680 --> 00:03:10,770 que mantén o control de todos os datos que a xente envían para ti, 61 00:03:10,770 --> 00:03:15,060 decide quen dar o que, cousas así. 62 00:03:15,060 --> 00:03:20,380 Este é só un pouco de terminoloxía, de xeito que vostedes están familiarizados co que estamos a falar. 63 00:03:20,380 --> 00:03:28,600 Alén desa división, é bo pensar na súa aplicación web en termos de 64 00:03:28,600 --> 00:03:32,500 un par de compoñentes distintos. 65 00:03:32,500 --> 00:03:35,270 Cando está facendo desenvolvemento web 66 00:03:35,270 --> 00:03:41,710 unha das cousas que ten que estar sempre intentando facer é reducir a complexidade. 67 00:03:41,710 --> 00:03:45,710 Canto máis complexo o seu código é o máis posibilidades hai de facer erros, 68 00:03:45,710 --> 00:03:47,710 o que é máis difícil cambiar máis tarde. 69 00:03:47,710 --> 00:03:50,140 Entón, se pode romper a súa aplicación nalgunhas áreas funcionais distintas 70 00:03:50,140 --> 00:03:57,640 que vai - e pode reducir o tipo de cantidade de comunicación da zona de cross - 71 00:03:57,640 --> 00:04:03,530 que pode axudar moito no longo prazo en termos de redución de erros. 72 00:04:03,530 --> 00:04:07,950 >> Para ser concreto, xeralmente a xente divídense en unha aplicación web - 73 00:04:07,950 --> 00:04:13,190 estes son o tipo de palabras de moda agora, pero eles aínda son útiles. 74 00:04:13,190 --> 00:04:17,940 Pode ter oído a xente falaren sobre modelos, visualizacións e controladores. 75 00:04:17,940 --> 00:04:23,210 Os modelos son os datos reais que a súa aplicación vai a tratar con eles. 76 00:04:23,210 --> 00:04:28,260 Por exemplo, no seu gato Facebook, os seus modelos sería - 77 00:04:28,260 --> 00:04:35,340 que tería un modelo para as mensaxes como, e un modelo para perfís de usuarios, cousas así. 78 00:04:35,340 --> 00:04:41,090 As súas opinións son como presentar estes datos para os seus usuarios. 79 00:04:41,090 --> 00:04:46,660 Pode ter unha vista para mirar a un único post e todos os comentarios 80 00:04:46,660 --> 00:04:51,720 e unha visión diferente para a súa fábrica que ten unha lista de todas as mensaxes 81 00:04:51,720 --> 00:04:57,170 que son dirixidos a vostede, e unha visión diferente para o teu feed de noticias - cousas así. 82 00:04:57,170 --> 00:05:00,610 Por último, ten os controladores que son basicamente cando a xente enviar mensaxes 83 00:05:00,610 --> 00:05:03,310 e fai actualizacións para o sistema de back-end, 84 00:05:03,310 --> 00:05:06,400 vostede incrementa unha morea de contadores, e calquera que sexa. 85 00:05:06,400 --> 00:05:07,860 Estes son os seus controladores. 86 00:05:07,860 --> 00:05:11,030 >> Vou estar falando principalmente sobre os modelos. 87 00:05:11,030 --> 00:05:14,030 Visto que non son tecnicamente difíciles e a cuestión é máis co proxecto-los 88 00:05:14,030 --> 00:05:22,040 Controladores van ser específico para o que está designado. 89 00:05:22,040 --> 00:05:25,220 Pero hai algunhas técnicas moi xerais que pode usar 90 00:05:25,220 --> 00:05:30,220 para facer os seus modelos máis agradable e máis fácil de traballar que eu creo que son moi útiles. 91 00:05:30,220 --> 00:05:35,860 Isto é principalmente será sobre como xestionar os seus datos aplicacións web de forma agradable. 92 00:05:35,860 --> 00:05:40,420 Os principais problemas cos modelos 93 00:05:40,420 --> 00:05:44,540 son eles os que viven no cliente e do servidor e ten que descubrir 94 00:05:44,540 --> 00:05:51,170 a) como obtelos - todo relevantes - dende o servidor ao cliente, 95 00:05:51,170 --> 00:05:53,440 eb) como mantelos en sincronía. 96 00:05:53,440 --> 00:05:58,700 Os usuarios van querer facer algunhas actualizacións. 97 00:05:58,700 --> 00:06:00,470 Eles van querer facer novos artigos. 98 00:06:00,470 --> 00:06:04,800 Eles van querer gusta de cousas e cousas, se ten gustos. 99 00:06:04,800 --> 00:06:11,490 Estes son os principais retos técnicos de manexar modelos. 100 00:06:11,490 --> 00:06:15,680 O primeiro que vai querer preguntar a si mesmo é 101 00:06:15,680 --> 00:06:18,420 que tipo de datos vai neste modelo e que tipo de procuras que imos querer facer - 102 00:06:18,420 --> 00:06:24,290 é dicir, como é que imos ollar os modelos? 103 00:06:24,290 --> 00:06:26,940 Para o gato exemplo Facebook, 104 00:06:26,940 --> 00:06:31,520 seu post vai ter un autor asociado a el, 105 00:06:31,520 --> 00:06:35,660 texto pos parede, e un receptor da mensaxe no mural. 106 00:06:35,660 --> 00:06:38,470 E entón podes querer consultar que en unha morea de xeitos diferentes. 107 00:06:38,470 --> 00:06:42,220 Desexa miralo por que escribiu que post, 108 00:06:42,220 --> 00:06:46,620 por que recibiu o que publicar, quizais pola data en que foron publicados. 109 00:06:46,620 --> 00:06:50,340 Pero se está indo facelo por data, así que ten que engadir outro campo para o seu post 110 00:06:50,340 --> 00:06:52,490 de cando foi realmente lanzado. 111 00:06:52,490 --> 00:07:00,220 Estes dous factores - o que os datos que quere usar e como quere velo - 112 00:07:00,220 --> 00:07:04,200 ten que pensar sobre eles, en primeiro lugar porque dependen uns dos outros, 113 00:07:04,200 --> 00:07:08,030 e iso vai ser máis difícil para engadila los máis tarde. 114 00:07:08,030 --> 00:07:12,750 >> Existen algunhas outras consideracións. 115 00:07:12,750 --> 00:07:17,540 Cando está a pensar sobre como trata con modelos no servidor 116 00:07:17,540 --> 00:07:20,540 o que quere é mirar para - 117 00:07:20,540 --> 00:07:27,440 basicamente quere facer o servidor o máis sinxelo posible. 118 00:07:29,440 --> 00:07:35,500 Facer cousas no lado do cliente é xeralmente moito máis rápido se pode facelo só no cliente 119 00:07:35,500 --> 00:07:38,230 sen facer calquera tipo de solicitude de rede. 120 00:07:38,230 --> 00:07:47,860 A idea é facer o maior número de consultas que poida sobre o cliente. 121 00:07:47,860 --> 00:07:51,560 O único problema con que 122 00:07:51,560 --> 00:07:54,160 é que se pedir todos os seus datos no inicio 123 00:07:54,160 --> 00:07:57,160 logo que vai levar moito tempo para cargar. 124 00:07:57,160 --> 00:08:02,290 Entón, a idea é atopar un medio termo entre ter datos suficientes sobre o cliente 125 00:08:02,290 --> 00:08:07,640 que se pode facer a maioría do seu traballo alí, pero non só buscar todo dunha vez 126 00:08:07,640 --> 00:08:09,710 para que obteña os tempos de carga moi lento no inicio. 127 00:08:09,710 --> 00:08:12,610 Por exemplo, para o gato de datos 128 00:08:12,610 --> 00:08:20,340 probablemente quere buscar unha morea de mensaxes de parede recentes. 129 00:08:20,340 --> 00:08:23,790 Non quere incorporarse todos eles, xa que o que podería dar cara atrás un par de anos. 130 00:08:23,790 --> 00:08:25,470 Pero non quere busca-los un de cada vez 131 00:08:25,470 --> 00:08:28,740 porque iso ía introducir unha gran cantidade de sobrecarga da rede. 132 00:08:28,740 --> 00:08:33,620 >> Moitas veces é moi difícil - xa que ten unha base de datos en execución - 133 00:08:33,620 --> 00:08:37,210 moitas veces é moi difícil cambiar os datos que ten nel - 134 00:08:37,210 --> 00:08:40,510 ou sexa, engadir unha nova columna de base de datos ou algo así - 135 00:08:40,510 --> 00:08:43,510 así unha boa estratexia é, en realidade, só para manter unha morea de seus datos nun blob de texto - 136 00:08:43,510 --> 00:08:53,880 unha burbulla JSON - JSON sendo JavaScript Object Notation - 137 00:08:53,880 --> 00:08:58,330 A razón pola que isto é útil é porque entón podes engadir novas propiedades 138 00:08:58,330 --> 00:09:01,920 a todas estas burbullas JSON sen alterar o seu banco de datos. 139 00:09:01,920 --> 00:09:06,860 A única desvantaxe para iso é que se ten unha morea de campos 140 00:09:06,860 --> 00:09:09,890 que engadiu máis tarde - como oculto no que blob JSON - 141 00:09:09,890 --> 00:09:12,850 entón é máis difícil de consultalo-los dentro da base de datos. 142 00:09:12,850 --> 00:09:17,690 Por exemplo, se máis tarde - se tivo o seu modelo de post que discutir anteriormente 143 00:09:17,690 --> 00:09:25,380 só co autor, o destinatario eo texto - 144 00:09:25,380 --> 00:09:29,000 Tamén pode ter unha burbulla JSON e, a continuación, máis tarde quere engadir un campo de data 145 00:09:29,000 --> 00:09:31,000 non ten que cambiar o seu banco de datos. 146 00:09:31,000 --> 00:09:36,140 Podería só engadir as datas para todos os campos de texto. 147 00:09:36,140 --> 00:09:39,640 E entón sería capaz de ollar para aqueles no lado do cliente, 148 00:09:39,640 --> 00:09:42,430 pero non sería capaz de consultalo-los no lado do servidor 149 00:09:42,430 --> 00:09:44,430 porque está oculto dentro deste texto. 150 00:09:44,430 --> 00:09:49,920 >> A outra cuestión que quere pensar sobre 151 00:09:49,920 --> 00:09:52,400 É así que o seu cliente e servidor vai comunicarse. 152 00:09:52,400 --> 00:09:56,040 Vostede xeralmente queren manter este tan sinxelo que pode. 153 00:09:56,040 --> 00:10:02,230 Pode só ter como un me-get esta solicitude de datos, 154 00:10:02,230 --> 00:10:09,140 a crear a new-object cousa, e unha solicitude de actualización, un vello-obxecto-. 155 00:10:09,140 --> 00:10:12,930 E estes serían todos diferentes URLs nun servidor que - 156 00:10:12,930 --> 00:10:20,030 que o navegador - podes usar solicitudes de AJAX para todos estes 157 00:10:20,030 --> 00:10:24,000 e recibir ou datos de mensaxe. 158 00:10:24,000 --> 00:10:26,600 Unha vez máis, ao noso gato exemplo Facebook, 159 00:10:26,600 --> 00:10:32,350 podería ter a URL para obter unha mensaxe individual, 160 00:10:32,350 --> 00:10:39,750 e que tería unha URL para crear unha nova mensaxe no mural 161 00:10:39,750 --> 00:10:45,670 e quizais un URL para subir a súa foto do perfil, cousas así. 162 00:10:45,670 --> 00:10:51,730 Pero, de novo, iso é a pre-busca a maioría dos seus datos para que non ten que manter 163 00:10:51,730 --> 00:10:53,360 facer solicitudes de rede. 164 00:10:53,360 --> 00:10:59,030 Por esa razón, non pode querer ter esta solicitude get individual para un único post, 165 00:10:59,030 --> 00:11:03,210 e no seu lugar só quere unha solicitude get para a parede enteira. 166 00:11:03,210 --> 00:11:06,110 E entón, se está tentando atopar un equilibrio, pois - 167 00:11:06,110 --> 00:11:10,970 iso tamén dependerá da súa aplicación. 168 00:11:10,970 --> 00:11:13,430 Porque se está esperando que as persoas teñen só 10 ou 20 mensaxes de parede 169 00:11:13,430 --> 00:11:15,430 que se ve ben. 170 00:11:15,430 --> 00:11:17,390 Pero se está esperando que teñen miles entón esta proposta vai levar moito, 171 00:11:17,390 --> 00:11:23,580 e así que pode querer engadir un get-all-mensaxes-desde parámetro. 172 00:11:23,580 --> 00:11:26,580 >> Por todo iso probablemente vai querer sincronizar os datos en JSON - 173 00:11:26,580 --> 00:11:29,260 JavaScript Object Notation. 174 00:11:29,260 --> 00:11:34,600 Practicamente todas as linguas manexa JSON moi ben. 175 00:11:34,600 --> 00:11:40,880 JQuery ten esa función getJSON agradable que vai facer todo o traballo duro para ti. 176 00:11:40,880 --> 00:11:47,390 E no PHP hai tamén moi agradables funcións de comunicación JSON. 177 00:11:47,390 --> 00:11:52,660 Entón, iso é probablemente o mellor formato para o envío dos seus modelos e cara atrás. 178 00:11:52,660 --> 00:11:56,570 >> Como un exemplo do que falamos ata agora, 179 00:11:56,570 --> 00:12:00,520 aquí está un exemplo de fluxo para o gato aplicación de Facebook. 180 00:12:00,520 --> 00:12:07,760 Ela comeza co seu navegador solicitando a URL do sitio base. 181 00:12:07,760 --> 00:12:15,470 O servidor probablemente ía enviar máis de HTML estático e un pouco de JavaScript e CSS. 182 00:12:15,470 --> 00:12:19,170 Xeralmente é mellor non facer calquera procesamento do servidor. 183 00:12:19,170 --> 00:12:23,370 Probablemente non quere - 184 00:12:23,370 --> 00:12:28,360 que o servidor non está facendo alí vai para abaixo a lista de postos de parede 185 00:12:28,360 --> 00:12:31,120 e xerar algún código HTML para cada un e de envío que rematou. 186 00:12:31,120 --> 00:12:34,960 Xeralmente é mellor para facelo do lado do cliente, xa que en caso contrario 187 00:12:34,960 --> 00:12:38,580 cada vez que quere re-deseñar algo, ten que facer unha solicitude do servidor. 188 00:12:38,580 --> 00:12:42,450 E iso moi rapidamente dálle unha morea de arriba. 189 00:12:42,450 --> 00:12:47,430 Xeralmente é mellor só para navío envía HTML estático 190 00:12:47,430 --> 00:12:50,660 e logo, JavaScript e CSS que vai facer a renderización do lado do cliente. 191 00:12:50,660 --> 00:12:56,750 Así que o material chega, 192 00:12:56,750 --> 00:13:03,500 entón vostede pode ter - en JavaScript - podes facer pedidos para os datos de parede 193 00:13:03,500 --> 00:13:08,740 e cousas así, e despois de que o servidor está basicamente facendo consultas de bases de datos 194 00:13:08,740 --> 00:13:10,740 e comprobar os permisos. 195 00:13:10,740 --> 00:13:16,690 O único importante é que el non pode enviar máis algúns outros usuarios mensaxes de parede 196 00:13:16,690 --> 00:13:19,220 que non ten permiso para ver. 197 00:13:19,220 --> 00:13:28,050 Basicamente, pode ser unha capa de acceso a moi fina para a súa base de datos, 198 00:13:28,050 --> 00:13:32,820 e, a continuación, toda a mostrar os datos - todos os puntos de vista e outras cousas - 199 00:13:32,820 --> 00:13:37,280 quen poden ocorrer no seu navegador, e entón cando quere facer un post ou algo 200 00:13:37,280 --> 00:13:40,000 acaba de enviar outro pedido. 201 00:13:40,000 --> 00:13:45,350 >> Tamén hai algunhas cousas extravagantes que podes facer enriba diso. 202 00:13:45,350 --> 00:13:49,550 En termos de información técnica máis específicas, 203 00:13:49,550 --> 00:13:53,360 desenvolvemento en JavaScript simple pode ser un pouco doloroso, 204 00:13:53,360 --> 00:13:56,220 por iso hai algunhas bibliotecas e ferramentas que han axudar moito con iso. 205 00:13:56,220 --> 00:14:03,690 Eu creo que todos vostedes xa debe ter oído falar sobre jQuery que fai facer renderización HTML 206 00:14:03,690 --> 00:14:08,890 e manipulación moito máis doado - ten unha morea de funcións de fantasía para entrando e saíndo, 207 00:14:08,890 --> 00:14:12,020 e facer animacións zippy. 208 00:14:12,020 --> 00:14:13,720 Tamén esta biblioteca chamado Underscore.js. 209 00:14:13,720 --> 00:14:20,760 Ten unha morea de funcións de utilidade útil, cousas que esperar JavaScript ter 210 00:14:20,760 --> 00:14:24,740 que realmente doesnt - cousas como embaralhar un array, 211 00:14:24,740 --> 00:14:28,900 eliminación de duplicados de unha lista, ou achatamento unha lista de listas. 212 00:14:28,900 --> 00:14:30,900 Esta é só unha pequena mostra de código. 213 00:14:30,900 --> 00:14:36,520 Subliñado ten unha toneladas desas funcións interesantes que quere que tería todo o tempo. 214 00:14:36,520 --> 00:14:38,840 >> E despois hai unha biblioteca que me gustaría pasar un pouco de tempo en 215 00:14:38,840 --> 00:14:44,800 chamado Backbone.js por Backbone realmente axuda a xestionar modelos no lado do cliente 216 00:14:44,800 --> 00:14:47,210 e unha morea de confusión que isto pode causar. 217 00:14:47,210 --> 00:14:53,550 Backbone dálle ese concepto de modelos e coleccións 218 00:14:53,550 --> 00:14:58,300 en JavaScript que son basicamente exactamente como obxectos JavaScript 219 00:14:58,300 --> 00:15:04,900 en matrices de JavaScript, pero eles teñen eventos cando cambia as súas propiedades. 220 00:15:04,900 --> 00:15:09,090 Así como no Javascript, pode ter un evento cando un botón é premendo ou algo 221 00:15:09,090 --> 00:15:14,800 estes modelos Backbone e coleccións Backbone ha transmitir cousas como 222 00:15:14,800 --> 00:15:17,510 que cando cambian. 223 00:15:17,510 --> 00:15:22,270 Isto significa que pode simplemente escribir algo como este fragmento de código aquí - 224 00:15:22,270 --> 00:15:27,530 este di que, sempre que engadir calquera cousa para a matriz mensaxes que redeseñar toda a parede. 225 00:15:27,530 --> 00:15:34,270 E isto dicir sempre que o número de un posto de gusta de cambios, 226 00:15:34,270 --> 00:15:38,970 vostede notificar o usuario de que alguén gusta do seu post. 227 00:15:38,970 --> 00:15:45,210 Ou sempre que calquera propiedade dun posto de cambios que redeseñar o post. 228 00:15:45,210 --> 00:15:51,050 Cousas así vai aforrar toneladas de complexidade, porque se non 229 00:15:51,050 --> 00:15:55,440 se non ten un cadro coma este, a continuación, cada vez no seu código que cambie 230 00:15:55,440 --> 00:16:04,280 nada sobre un post, ten que lembrar-se de chamar todas as funcións fan 231 00:16:04,280 --> 00:16:07,680 e cousas así, e se quere engadir algo novo que pasou 232 00:16:07,680 --> 00:16:10,680 cada vez que modificou un post que ten que pasar por todas as partes na súa 233 00:16:10,680 --> 00:16:14,610 código que modificou un post e engadir que cousa nova. 234 00:16:14,610 --> 00:16:21,450 Unha estrutura como esta vai eliminar unha morea de que a comunicación entre capas 235 00:16:21,450 --> 00:16:28,280 que fai que o seu código complexo e difícil de manter. 236 00:16:28,280 --> 00:16:31,170 >> Hai algo sobre puntos de vista tamén. 237 00:16:31,170 --> 00:16:35,960 Vou deixar a maior parte deste para Billy, porque eles non son tecnicamente moi difícil. 238 00:16:35,960 --> 00:16:43,540 Use jQuery para os seus puntos de vista. É practicamente como unha necesidade neste momento. 239 00:16:43,540 --> 00:16:46,290 El só fai todo moito máis fácil. 240 00:16:46,290 --> 00:16:48,290 Hai unha gran cantidade de bibliotecas. 241 00:16:48,290 --> 00:16:49,970 Se ten complicado elementos de interface de usuario, 242 00:16:49,970 --> 00:16:57,250 se quere unha cousa auto-completa ou como unha desas varias selectores de fantasía - 243 00:16:57,250 --> 00:17:04,790 se quere algo así, probablemente debe só buscar por aí 244 00:17:04,790 --> 00:17:08,130 e pode atopar unha boa biblioteca que vai facer o que quere. 245 00:17:08,130 --> 00:17:11,579 Billy vai explicar máis sobre as partes realmente difíciles de puntos de vista. 246 00:17:11,579 --> 00:17:17,530 Ademais, como unha nota lateral, Backbone ten algunhas características para facer visualizacións comunicar 247 00:17:17,530 --> 00:17:22,800 moi ben con modelos - ollar a documentación para todas estas bibliotecas, en realidade. 248 00:17:22,800 --> 00:17:28,270 Basta ollar os docs. Son moi ben escrito e doado de seguir. 249 00:17:28,270 --> 00:17:33,890 En xeral, pode moi ben só Google se ten problemas. 250 00:17:33,890 --> 00:17:36,370 Hai unha gran cantidade de persoas que os utilizan. 251 00:17:36,370 --> 00:17:42,020 Eu creo que iso é como unha nota final. 252 00:17:42,020 --> 00:17:48,770 >> Tamén hai algunhas cousas máis avanzadas que podes facer 253 00:17:48,770 --> 00:17:53,400 se está a buscar para facer a súa aplicación web extra incrible. 254 00:17:53,400 --> 00:17:59,760 Podes facer - a nova especificación HTML5 ten unha morea de cousas extravagantes que podes facer. 255 00:17:59,760 --> 00:18:05,780 O almacenamento local - o que é que pode almacenar datos no navegador - 256 00:18:05,780 --> 00:18:09,470 en vez de ter que volver e ler o servidor para todo, 257 00:18:09,470 --> 00:18:12,470 pode manter un pouco a el no cliente e que permite incluso persoas - 258 00:18:12,470 --> 00:18:20,850 nalgúns casos, pode incluso deixar usar a páxina fóra de liña. 259 00:18:20,850 --> 00:18:26,980 Non hai esa cousa chamada websockets que son un tipo de comunicación de rede 260 00:18:26,980 --> 00:18:30,930 onde no canto de só lle facer unha petición, que obtén a resposta e está feito, 261 00:18:30,930 --> 00:18:35,240 manteña abrir unha conexión co servidor e para que poida facer cousas como 262 00:18:35,240 --> 00:18:37,240 actualizacións en tempo real. 263 00:18:37,240 --> 00:18:42,020 Entón, se estaba tentando facer unha aplicación de chat, pode utilizar websockets 264 00:18:42,020 --> 00:18:43,790 para comunicarse e para atrás de xeito que non ten que manter o solicitante, 265 00:18:43,790 --> 00:18:48,410 "Oh, servidor, alguén me enviar unha conversa?" cada 10 segundos ou algo así. 266 00:18:48,410 --> 00:18:55,620 Hai tamén un recurso de HTML5 interesante, onde podes facer parecer que 267 00:18:55,620 --> 00:18:58,340 a URL da páxina está cambiando, sen nunca ter que recargar-lo. 268 00:18:58,340 --> 00:19:03,230 Podes usar botóns Voltar e avanzar sen facer unha chea de peticións de rede. 269 00:19:03,230 --> 00:19:14,660 Cousas como esta é realmente útil en termos de facelo rápido, pero tamén funciona como unha aplicación web debería. 270 00:19:14,660 --> 00:19:17,680 >> Hai tamén unha cousa chamada CoffeeScript. 271 00:19:17,680 --> 00:19:24,450 CoffeeScript é unha linguaxe diferente, en realidade, que compila abaixo para JavaScript. 272 00:19:24,450 --> 00:19:30,080 Podería escribir todo o seu código en CoffeeScript, a continuación, executar este compilador, 273 00:19:30,080 --> 00:19:33,300 e el Cospe un arquivo JavaScript que pode incluír na súa páxina web. 274 00:19:33,300 --> 00:19:38,860 A razón que CoffeeScript é bo é porque se librar de unha chea de 275 00:19:38,860 --> 00:19:44,760 casos estraños que Javascript ten que equivale iguais, 276 00:19:44,760 --> 00:19:51,130 e iguais iguais facer cousas distintas, ou gusta - 277 00:19:51,130 --> 00:19:55,740 el ten unha sintaxe máis agradable para xestionar matrices e funcións. 278 00:19:55,740 --> 00:20:00,460 Este é un pequeno fragmento de CoffeeScript que produce unha lista de todas as prazas 279 00:20:00,460 --> 00:20:04,900 a partir de 10 ^ 2 a 1 ^ 2 en orde inversa. 280 00:20:04,900 --> 00:20:08,410 Como verás, CoffeeScript frecuentemente permítelle expresar nunha liña 281 00:20:08,410 --> 00:20:10,890 o que levaría 5 liñas de JavaScript. 282 00:20:10,890 --> 00:20:13,230 Pode facer cousas moito máis fáciles. 283 00:20:13,230 --> 00:20:15,390 É un pouco de nova sintaxe para aprender en primeiro lugar, 284 00:20:15,390 --> 00:20:18,010 pero definitivamente vai facer máis produtivo no longo prazo. 285 00:20:18,010 --> 00:20:22,050 >> Tamén pode usar outros idiomas no servidor de PHP - 286 00:20:22,050 --> 00:20:27,570 linguaxes como Ruby, Python, ou hai aínda un proxecto chamado node.js 287 00:20:27,570 --> 00:20:31,450 que permitirá que use JavaScript no servidor. 288 00:20:31,450 --> 00:20:34,700 Persoalmente, realmente, realmente odeio PHP. 289 00:20:34,700 --> 00:20:38,310 Eu só non me gusta de traballar con el. 290 00:20:38,310 --> 00:20:43,450 Se tamén cre que é unha cluge terrible dunha lingua, 291 00:20:43,450 --> 00:20:46,160 entón podes usar un destes no seu lugar. 292 00:20:46,160 --> 00:20:54,780 En xeral, se quere facer algo e realmente non sei como podería facelo, 293 00:20:54,780 --> 00:20:56,780 pode buscar en Internet. 294 00:20:56,780 --> 00:20:59,990 Hai toneladas e toneladas de recursos, sobre todo en - 295 00:20:59,990 --> 00:21:03,260 StackOverflow é un gran home. 296 00:21:03,260 --> 00:21:06,400 É o sitio onde os desenvolvedores preguntas uns a outros. 297 00:21:06,400 --> 00:21:09,690 Pode que executar para el, se estaba a ter problemas en conxuntos de problemas CS50. 298 00:21:09,690 --> 00:21:16,820 E hai toneladas de bibliotecas para facer practicamente calquera cousa que quere. 299 00:21:16,820 --> 00:21:21,710 Se queres facer algo e non sabe como facelo, 300 00:21:21,710 --> 00:21:23,710 non pense que é imposible. 301 00:21:23,710 --> 00:21:26,160 Basta ollar arredor e podes atopar uns bos recursos. 302 00:21:26,160 --> 00:21:29,280 >> Como un xeneral finalizar, 303 00:21:29,280 --> 00:21:33,650 os principais delivery son manter as cousas simples. 304 00:21:33,650 --> 00:21:36,010 Canto máis complexo o seu código está no inicio 305 00:21:36,010 --> 00:21:40,370 e canto máis lle tentar e facer cousas extravagantes, 306 00:21:40,370 --> 00:21:43,300 o que levará máis tempo para conseguir algo realmente funcional 307 00:21:43,300 --> 00:21:46,480 eo máis difícil será para cambiar máis tarde. 308 00:21:46,480 --> 00:21:49,580 Entón, fai as cousas da maneira burra, fácil primeiro. 309 00:21:49,580 --> 00:21:51,720 Para ir xunto con iso, 310 00:21:51,720 --> 00:21:59,070 non teña medo de xogar fora código antigo ou limpa-lo moito. 311 00:21:59,070 --> 00:22:05,320 En xeral, xa que o que realmente ten algo de traballo, 312 00:22:05,320 --> 00:22:09,640 é moito máis doado para pensar que cando aínda está en etapas iniciais 313 00:22:09,640 --> 00:22:12,610 de como fago para poñer todo iso xunto. 314 00:22:12,610 --> 00:22:17,500 É mellor facer o proxecto máis idiota posible que traballa 315 00:22:17,500 --> 00:22:22,270 e entón mellora-lo de forma iterativa do que tentar facer todo certo na primeira vez. 316 00:22:22,270 --> 00:22:28,330 En termos de división de cliente-servidor, e intentar manter o seu servidor moi simple - 317 00:22:28,330 --> 00:22:33,030 só unha base de datos e algúns de autenticación e non fago calquera traballo duro alí. 318 00:22:33,030 --> 00:22:37,540 Efectúe todas as súas cousas complicadas no lado do cliente no seu navegador 319 00:22:37,540 --> 00:22:40,650 en JavaScript, tanto como poida. 320 00:22:40,650 --> 00:22:43,420 Olhe arredor de bibliotecas que fan a súa vida mellor. 321 00:22:43,420 --> 00:22:46,850 Sempre é mellor usar o código que alguén escribiu 322 00:22:46,850 --> 00:22:49,850 se - e non para gravala-lo ti mesmo. 323 00:22:49,850 --> 00:22:57,560 Hai unha morea de cousas en Internet. Google é o seu mellor amigo. 324 00:22:57,560 --> 00:22:59,560 Google é o mellor amigo do programador. 325 00:22:59,560 --> 00:23:07,620 Si, definitivamente non teña medo de ollar ao redor para outras cousas. 326 00:23:07,620 --> 00:23:11,860 Todo ben. E ao longo de Billy. 327 00:23:11,860 --> 00:23:14,600 >> [Billy] De feito, antes de comezar con algunhas cousas deseño, 328 00:23:14,600 --> 00:23:17,250 Alguén ten algunha pregunta para Ben sobre calquera cousa que el falou? 329 00:23:17,250 --> 00:23:20,290 Correcto, bo. 330 00:23:20,290 --> 00:23:22,220 Unha vez máis, deixe-nos saber se algo non está claro 331 00:23:22,220 --> 00:23:25,420 ou se desexa nos pasar por riba de algo un pouco máis. 332 00:23:25,420 --> 00:23:30,330 Eu vou volver un pouco e falar sobre as partes máis fundamentais de deseño. 333 00:23:30,330 --> 00:23:34,840 Ben mencionar o modelo chamado - Sentímolo, o modelo de sistema de visión controlador 334 00:23:34,840 --> 00:23:38,520 que é unha especie de aspecto técnico, entón eu vou mirar a vista, en concreto, 335 00:23:38,520 --> 00:23:42,930 e eu vou comezar coa forma como proxectar unha visión que parece bo. 336 00:23:42,930 --> 00:23:50,540 Aquí é unha especie de modelo moi básico para o noso gato Facebook. 337 00:23:50,540 --> 00:23:54,190 Eu creo que hai algúns fundamentos en deseño de interface de usuario moderna 338 00:23:54,190 --> 00:23:56,190 que pagan a pena ir. 339 00:23:56,190 --> 00:23:58,210 Pode notar que hai unha morea de espazo en branco por toda a páxina, 340 00:23:58,210 --> 00:24:00,790 moito espazo para as cousas. 341 00:24:00,790 --> 00:24:02,580 Non sinto que ten para esmagar as cousas nunha páxina. 342 00:24:02,580 --> 00:24:06,700 Quere deixar moito espazo aberto, e se é en calquera sitio moderno 343 00:24:06,700 --> 00:24:08,380 vai ver que non hai branco en todas as partes. 344 00:24:08,380 --> 00:24:10,380 Hai branco en lugares que non esperaría. 345 00:24:10,380 --> 00:24:14,570 Ten esa paleta de cores, e é sabio ao comezo 346 00:24:14,570 --> 00:24:17,880 para escoller unha paleta de cores que vai traballar e desenvolverse. 347 00:24:17,880 --> 00:24:22,250 Tamén - el axuda a escoller un tipo de letra, e de que xeito está tipo de traballo con 348 00:24:22,250 --> 00:24:24,450 estes fundamentos concretos do proxecto. 349 00:24:24,450 --> 00:24:26,910 Ten o seu tipo, ten as súas cores, e entón pode tipo de 350 00:24:26,910 --> 00:24:29,380 caber todo na tan necesaria. 351 00:24:29,380 --> 00:24:37,710 Entón, como eu dixen, co seu esquema de cores que desexa utilizar as cores máis ousadas do seu esquema de cores 352 00:24:37,710 --> 00:24:40,320 con moderación. Cabeceiras son agradables. Botóns son agradables para ter realmente grandes, cores chamativas. 353 00:24:40,320 --> 00:24:43,710 Pero, en xeral, se tes un sitio web que ten as cores en todas as partes, 354 00:24:43,710 --> 00:24:47,250 todos mirando na cara, el só parece confuso, e iso non é bo. 355 00:24:47,250 --> 00:24:50,430 Quere usar xeralmente cores claras. 356 00:24:50,430 --> 00:24:52,890 Probe, unha vez máis, escoller un esquema de cores moi coherente. 357 00:24:52,890 --> 00:24:56,640 Pode que estes pequenos salpicaduras de moita memoria - 358 00:24:56,640 --> 00:25:00,240 que pode parecer moi bo, pero quere usalos moi moderación. 359 00:25:00,240 --> 00:25:04,270 >> Como dixen, quere ser mínima. Menos é sempre máis. 360 00:25:04,270 --> 00:25:07,430 Se pode amosar algo ou non presentar algo, 361 00:25:07,430 --> 00:25:10,230 e vostede é do tipo sen saber se el debe estar alí por defecto - 362 00:25:10,230 --> 00:25:13,400 probablemente é o mellor deixala fóra. Sempre pode engadir lo máis tarde. 363 00:25:13,400 --> 00:25:16,620 Si, manter as cousas simples. 364 00:25:16,620 --> 00:25:19,510 Pero o máis importante, quere considerar varios proxectos. 365 00:25:19,510 --> 00:25:23,520 Non pense que cando fai un sitio web, telo na súa cabeza que vai 366 00:25:23,520 --> 00:25:26,310 facer o sitio web dunha determinada maneira, e só pode ser exactamente así. 367 00:25:26,310 --> 00:25:29,830 Terá a cabeceira azul na parte superior ea barra lateral azul 368 00:25:29,830 --> 00:25:32,670 e entón a cousa sub-cabeçalho amarelo. 369 00:25:32,670 --> 00:25:34,670 Quere facer varios modelos. 370 00:25:34,670 --> 00:25:37,350 Pode - se é bo con Photo Shop, pode abrirse e que tipo de 371 00:25:37,350 --> 00:25:39,600 crear un sitio web como lle gusta de ollar. 372 00:25:39,600 --> 00:25:41,680 Se non, pode só usar papel e pluma, 373 00:25:41,680 --> 00:25:44,000 pero rabuñar a varios proxectos. 374 00:25:44,000 --> 00:25:47,000 Quere ter basicamente un set-up, onde ten lotes de proxectos diferentes, 375 00:25:47,000 --> 00:25:50,810 e se alguén acaba de traballo, entón iso é gran. 376 00:25:50,810 --> 00:25:53,370 Se alguén acaba fallando, entón sempre ten outro a quen recorrer. 377 00:25:53,370 --> 00:25:57,960 En xeral, non se senten como ten que ser limitado 378 00:25:57,960 --> 00:26:00,830 para calquera proxecto que inicialmente decidir. 379 00:26:00,830 --> 00:26:04,420 O deseño é moi variable, e de parte da importancia do modelo 380 00:26:04,420 --> 00:26:09,480 sistema de visión controlador é que pode cambiar dentro e fóra puntos de vista diferentes que quere. 381 00:26:09,480 --> 00:26:13,510 Pode influír os datos dun xeito, e entón decidir, oh, en realidade, iso non funciona moi ben. 382 00:26:13,510 --> 00:26:19,190 Eu creo que é tipo de demasiado complicado ou hai unha parte aquí que non está realmente traballando, 383 00:26:19,190 --> 00:26:22,150 entón eu só vou abandonar totalmente este punto de vista e de intercambio de forma totalmente nova. 384 00:26:22,150 --> 00:26:24,790 Aínda os podemos empregar os modelos antigos e os antigos controladores. 385 00:26:24,790 --> 00:26:27,490 Podemos facer todo no servidor e cliente como sería antes. 386 00:26:27,490 --> 00:26:32,850 Pero a onda real dos datos como presentado será lixeiramente diferente. 387 00:26:32,850 --> 00:26:35,840 >> Canto realmente aplicar o proxecto que quere, 388 00:26:35,840 --> 00:26:39,330 xa que ten algúns proxectos esbozados en papel ou Photo Shop ou calquera outra cousa, 389 00:26:39,330 --> 00:26:42,120 hai unha serie de ferramentas que están dispoñibles para ti. 390 00:26:42,120 --> 00:26:45,700 O primeiro que está moi familiarizado co que é o seu HTML, PHP, ou calquera outra cousa 391 00:26:45,700 --> 00:26:48,990 linguaxe que está a usar só para codificar as páxinas estáticas na súa páxina web. 392 00:26:48,990 --> 00:26:51,990 Vostede traballou moito con HTML, que tipo de dálle estas etiquetas 393 00:26:51,990 --> 00:26:57,820 que pode poñer as cousas en, e, basicamente, é unha forma de organizar o seu contido. 394 00:26:57,820 --> 00:27:00,990 Por exemplo, ten a cabeceira alí enriba, entón vai ter unha etiqueta de cabeceira, 395 00:27:00,990 --> 00:27:05,770 e só pode ter un texto dentro del o que probablemente vai ser noutra etiqueta. 396 00:27:05,770 --> 00:27:08,380 Así que ten unha barra lateral, quizais con algúns enlaces diferentes, 397 00:27:08,380 --> 00:27:10,160 e os que van ser todos en separar as etiquetas. 398 00:27:10,160 --> 00:27:13,870 Entón, basicamente HTML no seu corazón é unha forma de dividir a páxina como 399 00:27:13,870 --> 00:27:16,980 vostede eventualmente quere formato-lo. 400 00:27:16,980 --> 00:27:18,980 Entón, de novo, xa viu iso antes. 401 00:27:18,980 --> 00:27:20,540 Vostede é moi cómodo co traballo con el agora 402 00:27:20,540 --> 00:27:23,120 unha vez que fixo a última pset esperamos, 403 00:27:23,120 --> 00:27:26,150 de xeito que non debe ser problema. 404 00:27:26,150 --> 00:27:31,280 >> Entón tes CSS que basicamente se encarga de todos os aspectos de deseño estáticos. 405 00:27:31,280 --> 00:27:35,320 Sería xestionar todas as cores, todos do posicionamento de diferentes elementos, 406 00:27:35,320 --> 00:27:36,840 onde se atopan con respecto un ao outro, 407 00:27:36,840 --> 00:27:41,530 como son grandes, os distintos tipos de posicionamentos que tería - 408 00:27:41,530 --> 00:27:46,030 noutras palabras, pode que as cousas fixas de xeito que cando rolar para abaixo eles quedan, 409 00:27:46,030 --> 00:27:48,700 ou pode que as cousas con respecto a outros elementos. 410 00:27:48,700 --> 00:27:50,730 Todos este tipo de cousas é en CSS. 411 00:27:50,730 --> 00:27:54,630 Ademais, pode facer diferentes decoracións, pode ter as cores do texto, 412 00:27:54,630 --> 00:27:56,630 efectos de texto, todo este tipo de cousas. 413 00:27:56,630 --> 00:28:00,360 Ben deu un bo seminario sobre este último fin de semana, 414 00:28:00,360 --> 00:28:04,450 e entón eu sempre comprobar iso, se pretende estar facendo algunhas cousas extravagantes con CSS. 415 00:28:04,450 --> 00:28:09,850 CSS3 é realmente a máis nova versión do CSS, e pode facer todo tipo de cousas realmente agradables. 416 00:28:09,850 --> 00:28:14,750 Pode facer degradados, pode que agradables, cantos redondeados, pode facer todo tipo de cousas 417 00:28:14,750 --> 00:28:17,940 para facer o seu sitio web ollar máis moderno e chique. 418 00:28:17,940 --> 00:28:22,150 >> A seguinte ferramenta é Javascript e jQuery que Ben falou un pouco sobre, 419 00:28:22,150 --> 00:28:24,150 pero eu vou estar un pouco máis cara a dentro. 420 00:28:24,150 --> 00:28:28,100 JavaScript, como traballou con el un pouco, ou polo menos visto en clase, 421 00:28:28,100 --> 00:28:31,870 é unha especie de modo de facer cousas de forma dinámica en HTML. 422 00:28:31,870 --> 00:28:35,950 HTML, como vostede sabe, é estático, entón cando ten HTML non pode modificalo. 423 00:28:35,950 --> 00:28:40,050 Pero JavaScript, de certa forma, é un xeito de poder modificar HTML. 424 00:28:40,050 --> 00:28:44,520 Así, pode facelo, e iso é gran, pero JavaScript é realmente unha dor de traballar. 425 00:28:44,520 --> 00:28:49,050 É tan longo e obtuso e facer incluso as cousas máis simples 426 00:28:49,050 --> 00:28:51,630 require lotes de liñas de JavaScript. 427 00:28:51,630 --> 00:28:55,410 Entón, jQuery é basicamente unha biblioteca para JavaScript que simplifica todo isto. 428 00:28:55,410 --> 00:28:59,880 Ela di, todo ben, se quere ter unha caixa cadrada veñen de esquerda 429 00:28:59,880 --> 00:29:03,980 e desaparecer na páxina para que está no medio, en JavaScript que levaría - 430 00:29:03,980 --> 00:29:06,340 Eu non sei, cen liñas que facer, e que sería unha dor, 431 00:29:06,340 --> 00:29:10,540 e saír dela odiando todo sobre programación web. 432 00:29:10,540 --> 00:29:15,380 JQuery ten basicamente o elemento-dot-fade-in, ou algo así. 433 00:29:15,380 --> 00:29:18,580 Funcións Así, moi, moi simple que permiten que fai todo tipo de animacións divertidas 434 00:29:18,580 --> 00:29:20,580 e ese tipo de cousas. 435 00:29:20,580 --> 00:29:23,300 A outra cousa que estes dous son realmente bos para só está facendo cousas dinámicas 436 00:29:23,300 --> 00:29:25,300 co sitio. 437 00:29:25,300 --> 00:29:28,370 Entón, en vez de só ter a súa páxina HTML - que amosa algúns datos, pero en realidade non 438 00:29:28,370 --> 00:29:32,130 facer nada - Javascript e jQuery vai deixar que ten botóns que pode facer clic en, 439 00:29:32,130 --> 00:29:37,960 e pode arrastrar elementos e re-forma-los e clasificalos los, e ter novos elementos 440 00:29:37,960 --> 00:29:40,500 engadido ou eliminado. Podes engadir-delete, este tipo de cousas. 441 00:29:40,500 --> 00:29:44,570 Entón, jQuery fai toneladas de cousas legais. 442 00:29:44,570 --> 00:29:48,840 E Vipul está realmente dando un seminario sobre iso hoxe, eu creo que, en 5 horas, 443 00:29:48,840 --> 00:29:51,220 por iso, se pode ir por moito tempo, que sería - 5 ou 4? 444 00:29:51,220 --> 00:29:54,930 Catro. Sentímolo. En realidade, é nada máis iso, entón eu recomendado 445 00:29:54,930 --> 00:29:56,680 unirse ao redor para el se pode. 446 00:29:56,680 --> 00:30:00,180 JQuery é super, super útil, e vai ser capaz de facer unha chea de cousas moi legais con ela 447 00:30:00,180 --> 00:30:03,460 para practicamente calquera proxecto de desenvolvemento web. 448 00:30:03,460 --> 00:30:06,200 >> Agora vou entrar nunha especie de distinción. 449 00:30:06,200 --> 00:30:08,210 Estiven falando basicamente sobre interface de usuario. 450 00:30:08,210 --> 00:30:11,510 UI é só o deseño do sitio web. 451 00:30:11,510 --> 00:30:13,780 Pero hai outro tipo de concepto que é a experiencia do usuario. 452 00:30:13,780 --> 00:30:15,900 Os dous son moi diferentes. 453 00:30:15,900 --> 00:30:19,440 Interface é sempre parte da experiencia. 454 00:30:19,440 --> 00:30:21,340 Noutras palabras, cando vai a un sitio web, mira para a interface. 455 00:30:21,340 --> 00:30:22,960 Isto é parte como experimenta o sitio. 456 00:30:22,960 --> 00:30:24,960 Pero a experiencia do usuario é máis que iso. 457 00:30:24,960 --> 00:30:29,910 A experiencia do usuario é o que a impresión de que o usuario obtén a partir do seu sitio web é. 458 00:30:29,910 --> 00:30:31,910 Entón, obviamente, a interface é unha parte diso. 459 00:30:31,910 --> 00:30:35,340 E é sempre unha parte necesaria, pero non é suficiente. 460 00:30:35,340 --> 00:30:38,790 Noutras palabras, se ten unha interface agradable, e é fermosa e cor e todo iso, 461 00:30:38,790 --> 00:30:43,650 iso é óptimo, pero se o usuario vai para o seu sitio web, ve un esquema fermoso e é confundido por 462 00:30:43,650 --> 00:30:47,060 todo, non ten idea de como facer algo, entón, obviamente, fixo unha realidade 463 00:30:47,060 --> 00:30:48,930 pobre web. 464 00:30:48,930 --> 00:30:50,930 Ese é o tipo de experiencia do usuario onde vén dentro 465 00:30:50,930 --> 00:30:54,570 Vou falar un pouco sobre o proxecto UX - UX é curto para a experiencia do usuario - 466 00:30:54,570 --> 00:30:58,050 e tipo de como pode ter seguro de que ten unha boa experiencia do usuario. 467 00:30:58,050 --> 00:31:04,330 O primeiro punto é que pode crear un sitio onde un usuario pode facer calquera cousa que 468 00:31:04,330 --> 00:31:06,820 que o usuario posiblemente quere. 469 00:31:06,820 --> 00:31:08,940 Pero se o usuario non pode descubrir como facer isto - 470 00:31:08,940 --> 00:31:12,850 noutras palabras, se o usuario non ten unha boa idea cando eles van para a súa web de, 471 00:31:12,850 --> 00:31:17,660 "Oh, se eu queira actualizar o meu perfil, entón eu premer neste botón, ou se eu queira publicar en 472 00:31:17,660 --> 00:31:20,850 mural de alguén, entón eu vou para a súa obra e prema nunha caixinha ". 473 00:31:20,850 --> 00:31:24,410 Se o usuario non sabe diso, entón efectivamente non teñen, de feito, 474 00:31:24,410 --> 00:31:27,080 aplicados correctamente esta funcionalidade. 475 00:31:27,080 --> 00:31:30,900 Parte da implementación dunha función é que os usuarios son realmente capaces de usalo. 476 00:31:30,900 --> 00:31:34,810 E iso pode ser frustrante - que pode facer un sitio, e pode facer todo tipo de 477 00:31:34,810 --> 00:31:37,810 cousas marabillosas, pero despois vai ter xente probalo e dicir: "Non podo facelo. 478 00:31:37,810 --> 00:31:39,770 Por que non pode facer iso? ", E vai dicirlles cara atrás, 479 00:31:39,770 --> 00:31:44,420 "Ben, pode. Vostede só ten que ir ao menú desplegable 7 neste escuro 480 00:31:44,420 --> 00:31:48,470 páxina que só se atopa a unha ligazón na parte inferior dereita man "ou algo así. 481 00:31:48,470 --> 00:31:50,430 Obviamente, non quere iso. 482 00:31:50,430 --> 00:31:53,420 Quere que sexa claro para os usuarios o que eles deben facer, 483 00:31:53,420 --> 00:31:56,240 e debe ser sinxelo e intuitivo para eles. 484 00:31:56,240 --> 00:32:01,180 >> Outra cousa que quere probar facer é, se alguén está indo a ir para a súa web 485 00:32:01,180 --> 00:32:05,520 e 9 de cada 10 veces facer a acción A, e 1 de cada 10 veces facer a acción B, 486 00:32:05,520 --> 00:32:08,950 probablemente vai querer centrar a súa experiencia sobre a acción A. 487 00:32:08,950 --> 00:32:12,240 Noutras palabras, quere facelo moi, moi claro como facer A. 488 00:32:12,240 --> 00:32:15,980 Centro front-e-A debe ser - ir ao sitio web, velo, oh, é logo alí. 489 00:32:15,980 --> 00:32:20,850 Considerando B, obviamente, quere ser claro, pero pode deixar un pouco máis 490 00:32:20,850 --> 00:32:22,850 en segundo plano. 491 00:32:22,850 --> 00:32:24,640 David dá un bo exemplo diso na charla, 492 00:32:24,640 --> 00:32:26,640 que é o sistema de Boston t. 493 00:32:26,640 --> 00:32:29,440 Cando vai para o Boston T e quere mercar un billete, 494 00:32:29,440 --> 00:32:32,700 ten que comezar en 5 menús que poida realmente mercar un billete 495 00:32:32,700 --> 00:32:37,130 para un valor de US $ 2, US $ 2,50, que é o que hai que para andar de metro 496 00:32:37,130 --> 00:32:39,130 nunha dirección. 497 00:32:39,130 --> 00:32:41,600 Isto é un problema porque a maioría das persoas que están camiñando de metro 498 00:32:41,600 --> 00:32:44,880 probablemente só quero ir a un lugar, comprar o seu billete, incorporarse de inmediato. 499 00:32:44,880 --> 00:32:47,550 Non ten sentido que teñen que pasar por unha chea de menús diferentes 500 00:32:47,550 --> 00:32:49,550 para chegar alí. 501 00:32:49,550 --> 00:32:51,760 A mellor experiencia de usuario sería un botón rápido na primeira páxina 502 00:32:51,760 --> 00:32:54,760 que di: "mercar un billete só de ida", e que ía poñer en todos o estándar 503 00:32:54,760 --> 00:32:58,550 valores por omisión, e entón se alguén quere mercar un billete diferente do que iso, 504 00:32:58,550 --> 00:33:01,690 aínda que, por suposto, ten a opción de, pero óptimo para 505 00:33:01,690 --> 00:33:04,080 o caso de uso común que é realmente importante. 506 00:33:04,080 --> 00:33:06,830 Podes ver exemplos diso en Facebook, non? 507 00:33:06,830 --> 00:33:09,410 Se vai para o Facebook e queres publicar un estado, 508 00:33:09,410 --> 00:33:11,710 é ben na parte superior que é o que moitas veces quere facer. 509 00:33:11,710 --> 00:33:14,730 Así que entrar na páxina, pode facer as cousas máis comúns que 510 00:33:14,730 --> 00:33:16,730 quere facer. 511 00:33:16,730 --> 00:33:17,550 Se queres facer as cousas un pouco máis complicadas, como, 512 00:33:17,550 --> 00:33:21,070 dicir que eu quero ir para a parede do meu amigo e publicar unha foto dela - 513 00:33:21,070 --> 00:33:24,810 que eu vou querer facer moitas veces, pero non tan frecuentemente como publicar actualizacións de estado - 514 00:33:24,810 --> 00:33:28,200 Entón, nese caso, eu escribir o seu nome no cadro na parte superior, prema o seu perfil, 515 00:33:28,200 --> 00:33:31,680 e entón, aínda así, é ben na parte superior hai xa que comece o seu perfil. 516 00:33:31,680 --> 00:33:38,240 Unha vez máis, eu óptimo con prioridade para os casos de uso común máis. 517 00:33:38,240 --> 00:33:41,800 >> Outra cousa importante é que moitas veces as persoas van especie de tentar evitar este 518 00:33:41,800 --> 00:33:44,890 dicindo, ok, entón eu fixen o sitio e as persoas están atopando-se confuso, 519 00:33:44,890 --> 00:33:46,110 e iso é un problema, non? 520 00:33:46,110 --> 00:33:49,210 Obviamente, eu non quero que a xente se confunda co contido do meu sitio. 521 00:33:49,210 --> 00:33:53,210 Pero a forma de resolver iso non é ter algo emerxente dicindo: 522 00:33:53,210 --> 00:33:55,290 hey, eu vou ensinalo a usar este sitio. 523 00:33:55,290 --> 00:33:58,130 Paso 1 - prema neste botón. Paso 2 - prema aquí. 524 00:33:58,130 --> 00:34:03,080 Por suposto, iso é un xeito de evitar isto - é un xeito que pode dicir ás persoas o que facer, pero é 525 00:34:03,080 --> 00:34:05,080 realmente non é o camiño ideal. 526 00:34:05,080 --> 00:34:07,420 Se eu fose a un sitio web e de súpeto eu estou bombardeado con este tutorial que está me dicindo 527 00:34:07,420 --> 00:34:11,739 o que facer e onde ir e todo iso, iso non é divertido para min. 528 00:34:11,739 --> 00:34:13,739 Non é unha boa experiencia para min. 529 00:34:13,739 --> 00:34:17,130 É un tipo de dor. Quero só comezar a facer outras cousas. 530 00:34:17,130 --> 00:34:19,449 A xente está indo para pechar a caixa de diálogo, 531 00:34:19,449 --> 00:34:23,580 ou saír do tutorial, non sei que facer, e despois queixa-se porque 532 00:34:23,580 --> 00:34:25,580 non dixen a eles o que facer. 533 00:34:25,580 --> 00:34:29,530 A forma de resolver iso non é dando ningún tipo de tutorial ou direccións - 534 00:34:29,530 --> 00:34:31,530 algo así. 535 00:34:31,530 --> 00:34:33,719 Por máis que se pode evitalo, o que realmente quere amosar ao usuario o que facer 536 00:34:33,719 --> 00:34:36,429 só pola natureza da forma en que o sitio web e colocar para fóra. 537 00:34:36,429 --> 00:34:39,090 Noutras palabras, se eu for a Facebook sen iniciar sesión, 538 00:34:39,090 --> 00:34:40,920 o primeiro que vexo na páxina principal - 539 00:34:40,920 --> 00:34:44,480 é unha pequena caixa de inicio de sesión. Entón, duh. Eu teño para entrar e alí. 540 00:34:44,480 --> 00:34:48,030 Tendo en conta que, se eu fose para Facebook e eu tiña que premer algo ligazón na parte inferior 541 00:34:48,030 --> 00:34:51,920 que dixo 'log in' eo resto da páxina era só unha especie de imaxe ou algo así, 542 00:34:51,920 --> 00:34:54,820 Realmente non sei que facer, non? Quere ser confundido. 543 00:34:54,820 --> 00:34:58,590 Entón, podería dicir-me para ir alí en baixo e prema no botón para iniciar sesión, 544 00:34:58,590 --> 00:35:01,080 ou o rexistro no botón podería ser ben na parte superior, onde eu vou velo. 545 00:35:01,080 --> 00:35:04,780 Quere estar sempre mostrando ao usuario o que facer, 546 00:35:04,780 --> 00:35:06,750 e que debe ser inherente á propia páxina. 547 00:35:06,750 --> 00:35:09,880 >> Cando está a pensar en proxectos e ridiculizando a distintas formas de 548 00:35:09,880 --> 00:35:13,810 expresando o seu sitio, o que realmente quere pensar sobre o que os usuarios están indo a 549 00:35:13,810 --> 00:35:19,380 estar facendo e como pode amosar-lles o que facer. 550 00:35:19,380 --> 00:35:23,530 Unha última cousa é a proba é moi, moi importante. 551 00:35:23,530 --> 00:35:27,400 É gran ter alguén - ter un amigo, peza a alguén que non coñece aínda - 552 00:35:27,400 --> 00:35:30,420 que nunca viu o lugar antes de utilizar o sitio web. 553 00:35:30,420 --> 00:35:33,650 Porque se está a traballar no lugar por horas, que foi mirando para el, 554 00:35:33,650 --> 00:35:36,670 e vostede sabe exactamente o que facer entón, obviamente, vai estar probando o 555 00:35:36,670 --> 00:35:39,520 cousas que traballou e que sabe traballo. 556 00:35:39,520 --> 00:35:42,680 Pero, se alguén vén e usa o sitio web que nunca usou antes, 557 00:35:42,680 --> 00:35:46,880 iso é unha experiencia única, porque ten alguén que non ten coñecemento previo 558 00:35:46,880 --> 00:35:51,530 da web que entra nel, entón eles van ter efectivamente non sabía o que facer 559 00:35:51,530 --> 00:35:54,890 ou que tipo de casos de uso están presentes para eles. 560 00:35:54,890 --> 00:36:00,930 Isto é óptimo. Isto é único, porque son, esencialmente, unha persoa cun espazo en branco para a mente. 561 00:36:00,930 --> 00:36:03,750 Poden dicirlle se algo é confusa ou pouco clara. 562 00:36:03,750 --> 00:36:07,580 Poden lle dar unha idea do que exactamente a experiencia do usuario do seu sitio é. 563 00:36:07,580 --> 00:36:10,630 Pode ser moi difícil dicir que vostede mesmo, entón definitivamente que incentivos-lo 564 00:36:10,630 --> 00:36:13,640 como está a desenvolver os seus proxectos - se está facendo proxectos baseados na web - 565 00:36:13,640 --> 00:36:18,290 para levar a xente a usar o sitio, o máis cedo ten algún tipo de demostración funcional. 566 00:36:18,290 --> 00:36:25,330 >> Agora eu vou falar un pouco sobre como xestionar un proxecto de desenvolvemento web. 567 00:36:25,330 --> 00:36:28,900 Pasamos sobre como pode facer o lado back-end técnico, 568 00:36:28,900 --> 00:36:31,050 como pode crear un sitio moi bo, 569 00:36:31,050 --> 00:36:34,150 e iso é óptimo se está a traballar por si mesmo, pero - 570 00:36:34,150 --> 00:36:37,300 aínda se está a traballar por si mesmo e, sobre todo, se está a traballar nun equipo, 571 00:36:37,300 --> 00:36:39,580 xestión de proxectos tórnase un gran problema. 572 00:36:39,580 --> 00:36:42,340 Xa escoitou falar de tipo de xestión de proxectos en diferentes formas, dende 573 00:36:42,340 --> 00:36:45,410 escola primaria cando lle foi dito o traballo en grupo. 574 00:36:45,410 --> 00:36:46,820 Ten que cooperar, comunicar, todo isto. 575 00:36:46,820 --> 00:36:49,620 Isto todo aínda é aplicable aquí, pero hai algunhas circunstancias únicas con 576 00:36:49,620 --> 00:36:54,910 ciencia da computación que quere estar en conta, e quere estar seguro de tratar ben. 577 00:36:54,910 --> 00:36:58,050 Vou falar primeiro un pouco sobre o equipo que vai estar dentro 578 00:36:58,050 --> 00:37:03,280 É moi importante escoller o tamaño axeitado de un equipo para traballar en, 579 00:37:03,280 --> 00:37:05,890 e no seu proxecto final creo que tes a posibilidade de escoller 580 00:37:05,890 --> 00:37:08,610 entre 1 e 4 persoas, se eu estou correcto. 581 00:37:08,610 --> 00:37:12,050 Quere estar seguro de que non está só escollendo o número de persoas 582 00:37:12,050 --> 00:37:14,950 que quere traballar con eles, porque son os seus amigos. 583 00:37:14,950 --> 00:37:18,170 Quere escoller un equipo que é un bo tamaño e que comezará o traballo feito. 584 00:37:18,170 --> 00:37:22,700 Hai un off comercio de ter máis persoas contra menos persoas. 585 00:37:22,700 --> 00:37:25,320 Se tes máis xente, obviamente, máis traballo se pode facer 586 00:37:25,320 --> 00:37:28,450 porque ten unha morea de xente, unha morea de código, moitas ideas, 587 00:37:28,450 --> 00:37:29,870 e iso é todo gran. 588 00:37:29,870 --> 00:37:32,590 Pero tamén esixe moito máis de xestión e moito máis a comunicación. 589 00:37:32,590 --> 00:37:34,720 Noutras palabras, se ten catro persoas que traballan no mesmo proxecto 590 00:37:34,720 --> 00:37:39,200 e todos eles están a editar o mesmo código, máis ou menos que todo tipo de necesidade de saber 591 00:37:39,200 --> 00:37:40,920 o que está pasando para que require que - 592 00:37:40,920 --> 00:37:44,580 se engadir unha nova función que medio que teño para dicir á xente - estou engadindo este, 593 00:37:44,580 --> 00:37:48,510 Estou cambiando isto desta maneira - especialmente se entrar no cousas realmente profunda 594 00:37:48,510 --> 00:37:52,730 como os modelos e os controladores que están realmente indo para influír o xeito no que o sitio funciona. 595 00:37:52,730 --> 00:37:54,500 Todo o equipo ten que ser consciente de que, 596 00:37:54,500 --> 00:37:58,140 entón tes que asegurarse de que non está escollendo moi grande dun equipo que será difícil 597 00:37:58,140 --> 00:37:59,970 para facer esa comunicación. 598 00:37:59,970 --> 00:38:02,930 Tamén non quere escoller un equipo pequeno abondo para que non vai 599 00:38:02,930 --> 00:38:06,250 poder comunicarse, xa que é só vostede. 600 00:38:06,250 --> 00:38:11,270 >> Outra cousa a considerar é o balance de onde as habilidades das persoas son. 601 00:38:11,270 --> 00:38:14,350 É gran se é realmente todo bos programadores. 602 00:38:14,350 --> 00:38:17,050 Pero se é toda a xente de back-end, a continuación, o seu sitio non vai mirar moi bo 603 00:38:17,050 --> 00:38:20,860 porque ten este gran base de datos, e fai consultas de investigación super-rápido - 604 00:38:20,860 --> 00:38:26,130 o que é óptimo - pero cando vai para el, é como un sitio de 1990 con vermello e azul 605 00:38:26,130 --> 00:38:30,370 en todas as partes, e iso non é bo. 606 00:38:30,370 --> 00:38:34,210 Observe-se que Ben e eu traballando en equipo son moi agradables, porque eu son unha especie de máis 607 00:38:34,210 --> 00:38:38,030 no extremo dianteira, ambos interaccionan no medio-alta, e Ben é realmente bo co material de back-end, 608 00:38:38,030 --> 00:38:43,550 así que funciona moi ben porque podemos proxectar calquera sitio e, basicamente, os buratos 609 00:38:43,550 --> 00:38:47,580 nese sitio que teñen que ser cubertos pode ser cuberto por calquera de nós, ou posiblemente ambos. 610 00:38:47,580 --> 00:38:50,210 Quere estar seguro de que non hai buratos no seu equipo. 611 00:38:50,210 --> 00:38:51,180 Todo ben se hai un pouco de superposición. 612 00:38:51,180 --> 00:38:53,670 Noutras palabras, se ten 2 persoas que son boas con back-end, 613 00:38:53,670 --> 00:38:57,250 que pode ser bo, pero tamén porque poden axudarnos uns a outros con problemas 614 00:38:57,250 --> 00:38:58,820 que están tendo. 615 00:38:58,820 --> 00:39:02,590 Pode ser un problema se só ten unha persoa que é responsable dunha determinada cousa 616 00:39:02,590 --> 00:39:06,650 e se atopan con un problema, entón quere ter un pouco de superposición 617 00:39:06,650 --> 00:39:10,760 pero o máis importante quere estar seguro de que todos os posibles buracos son cubertos. 618 00:39:10,760 --> 00:39:17,550 >> A última cousa - e iso debería ser obvio, pero moitas veces non é. 619 00:39:17,550 --> 00:39:19,550 Quere realmente estar se divertido. 620 00:39:19,550 --> 00:39:23,360 O punto deste proxecto final en CS50 e moitas veces o punto de desenvolvemento web en xeral 621 00:39:23,360 --> 00:39:26,360 non é só para facer un traballo, porque cómpre facer. 622 00:39:26,360 --> 00:39:29,140 Realmente quere divertirse, e quere estar facendo algo 623 00:39:29,140 --> 00:39:31,180 que está motivando a traballar nel. 624 00:39:31,180 --> 00:39:33,650 O que está facendo é unha dor para sentir e traballar, 625 00:39:33,650 --> 00:39:35,650 entón non está escollendo o proxecto correcto. 626 00:39:35,650 --> 00:39:37,730 Quere escoller algo que considerar interesante, 627 00:39:37,730 --> 00:39:41,150 realmente quere ver o resultado, está animado cando comeza unha nova idea sobre 628 00:39:41,150 --> 00:39:44,700 algo que podería facer - polo que hai todo tipo de proxectos alí que eu estou seguro 629 00:39:44,700 --> 00:39:47,290 podes atopar - todo o mundo ten algo que realmente intriga-los 630 00:39:47,290 --> 00:39:49,290 se están facendo un proxecto baseado na web. 631 00:39:49,290 --> 00:39:52,210 Eu vou dicir iso de novo agora. 632 00:39:52,210 --> 00:39:54,520 Se o proxecto parece ser unha dor e non quere traballar con el, 633 00:39:54,520 --> 00:39:57,260 escoller outro proxecto. Escolla algo que realmente che inspira. 634 00:39:57,260 --> 00:40:00,260 >> Ben mencionou ese concepto de iteración algo, e quero pasar por iso un pouco. 635 00:40:00,260 --> 00:40:08,250 É moi importante traballar en chorros onde obter algo funcional. 636 00:40:08,250 --> 00:40:13,420 Pode ser gran se ten este plan a un sitio web que vai facer A, B, e C, 637 00:40:13,420 --> 00:40:16,000 e, finalmente, que vai chegar alí. 638 00:40:16,000 --> 00:40:18,600 Pero está preso nesta fase en que se está a traballar niso e traballar nel, 639 00:40:18,600 --> 00:40:23,330 pero nada está a ser feito. Non ten nada que ver e unha cousa tanxible, funcional. 640 00:40:23,330 --> 00:40:27,940 O que realmente quere facer, tanto como parece un tipo de dor, por veces, a 641 00:40:27,940 --> 00:40:32,300 traballar en algo e logo, tipo de cap-lo para que el sexa polo menos nun cortello, en execución 642 00:40:32,300 --> 00:40:34,910 versión, aínda que non ten todas as características que quere. 643 00:40:34,910 --> 00:40:37,690 E quizais hai algúns recursos que realmente quere engadir, pero simplemente non pode 644 00:40:37,690 --> 00:40:41,830 porque quere obter esta web a un punto funcional. 645 00:40:41,830 --> 00:40:44,400 E así que quere medio que ten todo o proceso de desenvolvemento parecido con iso. 646 00:40:44,400 --> 00:40:47,810 Quere comezar por algún lado funcional - ou esencialmente comezar con nada - 647 00:40:47,810 --> 00:40:49,890 pero quere chegar a algún lugar moi básico e funcional. 648 00:40:49,890 --> 00:40:54,940 E, de novo, facer unha especie de salto e chegar a algún lugar funcional de novo. 649 00:40:54,940 --> 00:40:59,190 Vostede lentamente vai construír, e que podería ir un pouco máis lento do que sería doutra forma, 650 00:40:59,190 --> 00:41:03,000 pero, a longo prazo, se está constantemente preso nesta fase medio termo onde 651 00:41:03,000 --> 00:41:06,380 en realidade, non ten nada de traballo, pode ser realmente unha gran frustración 652 00:41:06,380 --> 00:41:09,970 para traballar no seu proxecto, porque está sempre tan cerca de facelo funcionar, 653 00:41:09,970 --> 00:41:12,130 e nunca realmente traballando. 654 00:41:12,130 --> 00:41:14,810 Quere traballar nestes brotes funcionais, 655 00:41:14,810 --> 00:41:17,950 e tamén quere facer algunha reflexión despois de cada un. 656 00:41:17,950 --> 00:41:21,260 Noutras palabras, cando está nun punto onde o sitio está agora a traballar - 657 00:41:21,260 --> 00:41:24,790 non ten todo o que lle gusta, pero fai algunhas cousas - 658 00:41:24,790 --> 00:41:28,870 quere pensar, todo ben, é neste lugar realizar o obxectivo que me propuxen a facer? 659 00:41:28,870 --> 00:41:33,410 Noutras palabras, se o sitio vai facer X, é o que teño que traballar na dirección de X? 660 00:41:33,410 --> 00:41:36,450 Son todas as características que eu quería alí? 661 00:41:36,450 --> 00:41:39,340 E ademais, é que serve o propósito xeral que quero? 662 00:41:39,340 --> 00:41:43,200 Se pensas que o seu sitio está comezando a virar nunha dirección diferente 663 00:41:43,200 --> 00:41:47,330 ou que as cousas medio que non están funcionando para fóra, pode ser hora de cambiar de marcha un pouco. 664 00:41:47,330 --> 00:41:51,700 Noutras palabras, paga a pena considerar - paga a pena xogar fora ideas, se é necesario 665 00:41:51,700 --> 00:41:57,950 e tendo en conta que eu estou realmente a traballar para o que quero ser. 666 00:41:57,950 --> 00:42:00,760 >> Eu creo que este é o meu próximo punto. Non teña medo de abandonar ideas. 667 00:42:00,760 --> 00:42:03,750 Só porque gastou moitas horas traballando nun recurso 668 00:42:03,750 --> 00:42:07,890 e finalmente teño que traballar, pero realmente non está indo tan ben - 669 00:42:07,890 --> 00:42:12,690 como non é tan útil ou usuarios están a ter problemas para usalo - este tipo de cousas - 670 00:42:12,690 --> 00:42:15,300 Non teña medo de xogar fora. 671 00:42:15,300 --> 00:42:17,650 É unha merda que xa gastou moito tempo traballando niso, 672 00:42:17,650 --> 00:42:21,870 pero ao final non quere un sitio web que é unha especie de elaborada por esas pezas que 673 00:42:21,870 --> 00:42:25,380 tipo de traballo, pero non son moi ben servidos. 674 00:42:25,380 --> 00:42:27,990 Ademais, non teña medo de abrazar novas ideas. 675 00:42:27,990 --> 00:42:30,050 Se alguén vén e di, hey, que o sitio parece moi legal, pero 676 00:42:30,050 --> 00:42:32,290 non sería mesmo moi bo se el tamén fixo iso? 677 00:42:32,290 --> 00:42:36,220 Só porque iso é algo que non tiña a intención e algo que non está no seu 678 00:42:36,220 --> 00:42:37,900 especificacións, algo que non teña a intención de facer, 679 00:42:37,900 --> 00:42:40,860 Non teña medo de asumila e, a continuación, traballar con el. 680 00:42:40,860 --> 00:42:43,680 Porque moitas veces as ideas que executa con todo o curso do desenvolvemento 681 00:42:43,680 --> 00:42:47,630 acaban sendo as características moi legal da web. 682 00:42:47,630 --> 00:42:49,630 >> Eu xa dixen que antes. Eu vou dicir de novo. 683 00:42:49,630 --> 00:42:51,630 Testers son super, super útil. 684 00:42:51,630 --> 00:42:56,350 Probe conseguir que as persoas que nunca viron a páxina antes de facer sesión e ver o que está a suceder 685 00:42:56,350 --> 00:42:59,080 porque non só pode probar a utilidade da web e da experiencia do usuario, 686 00:42:59,080 --> 00:43:02,070 pero eles tamén poden probar a funcionalidade dunha forma que non pode. 687 00:43:02,070 --> 00:43:06,430 Se fai algunha característica que fai unha certa cousa 688 00:43:06,430 --> 00:43:11,620 e vostede sabe que vai facer o mesmo correctamente en cada momento, iso é gran. 689 00:43:11,620 --> 00:43:16,610 Pero moitas veces pode ser difícil de explicar casos de canto, onde A pode usuario 690 00:43:16,610 --> 00:43:19,500 escriba algo que non estaba esperando - precisamente porque marcou 691 00:43:19,500 --> 00:43:21,500 as características de si mesmo. 692 00:43:21,500 --> 00:43:23,730 Así, para que alguén veña de quen non ten idea de como utilizar o sitio web 693 00:43:23,730 --> 00:43:26,840 e só para rompe-lo de todos os xeitos que poden facer é realmente útil, porque 694 00:43:26,840 --> 00:43:30,340 ter unha idea a partir dunha perspectiva totalmente diferente do que o seu sitio está funcionando 695 00:43:30,340 --> 00:43:33,300 eo que ten que arranxar. 696 00:43:33,300 --> 00:43:37,070 >> Por último, vou falar sobre algunhas boas prácticas xerais, 697 00:43:37,070 --> 00:43:42,470 e xa viu unha morea deles en CS50, pero tamén moi, moi aplicar nun ambiente de proxecto. 698 00:43:42,470 --> 00:43:47,600 Un deles é comentarios. Sempre comentar o seu código, especialmente se está a traballar nunha gran equipo. 699 00:43:47,600 --> 00:43:51,230 Ela pode ser tan irritante ter só un bloque xigante de código que alguén está escrito 700 00:43:51,230 --> 00:43:54,230 e quizais funciona, quizais non, pero non ten idea do que fai, 701 00:43:54,230 --> 00:43:58,010 así que non ten idea se é útil ou non, ou se el debe estar alí ou non, 702 00:43:58,010 --> 00:44:00,200 e se está a traballar noutra cousa, é ata posible que estea traballando en 703 00:44:00,200 --> 00:44:06,590 o mesmo, polo que é moi, moi coidado para ser Grazas cos seus compañeiros 704 00:44:06,590 --> 00:44:09,710 e escribir código que é ben documentado. 705 00:44:09,710 --> 00:44:13,580 Non ten que ir tan lonxe a punto de facer a cousa toda que lle gusta, se incrementa 706 00:44:13,580 --> 00:44:16,620 un contador ten un comentario que di, eu estou engadindo 1 a este contador. 707 00:44:16,620 --> 00:44:20,450 Non ten que ser detallada, pero para calquera función que está sempre escribindo 708 00:44:20,450 --> 00:44:23,160 ten que ter algunha documentación sobre o que esta función fai exactamente, 709 00:44:23,160 --> 00:44:25,140 que as súas entradas son, eo que debe retornar. 710 00:44:25,140 --> 00:44:27,800 Desta forma, pode utilizar outros compoñentes do lugar das persoas 711 00:44:27,800 --> 00:44:31,990 e pode traballar no sentido de construír algo grande. 712 00:44:31,990 --> 00:44:34,100 >> Outra cousa importante é que quere facer limpezas regulares. 713 00:44:34,100 --> 00:44:40,490 Código queda confuso. Non se sinta mal se o seu código é só totalmente lexible e unha desorde xigante. 714 00:44:40,490 --> 00:44:42,770 Isto acontece en desenvolvemento web sempre. 715 00:44:42,770 --> 00:44:46,530 Está engadindo novas características, retirando os antigos. Cousas será alí que non debe ser. 716 00:44:46,530 --> 00:44:49,330 Isto é bo, pero quere estar seguro de tratar con isto con regularidade. 717 00:44:49,330 --> 00:44:53,430 Non quere deixar construír ata o punto en que simplemente non pode atopar calquera cousa 718 00:44:53,430 --> 00:44:56,430 no seu código, e non ten idea do que nada fai. 719 00:44:56,430 --> 00:44:58,430 Ese é o caso con HTML. 720 00:44:58,430 --> 00:44:59,490 Ás veces, vai acabar cos obxectos que non conteñen nada, 721 00:44:59,490 --> 00:45:01,320 e quere se librar deles. 722 00:45:01,320 --> 00:45:04,610 En CSS, pode estar referíndose a elementos que non están máis alá, 723 00:45:04,610 --> 00:45:06,340 así que quere se librar dese código. 724 00:45:06,340 --> 00:45:09,900 No JavaScript, pode ter eliminado algo do HTML. 725 00:45:09,900 --> 00:45:13,150 Entón, quere estar seguro de que está sempre limpando, facendo cousas ben 726 00:45:13,150 --> 00:45:17,450 tanto como pode nunha base regular. 727 00:45:17,450 --> 00:45:21,060 >> Outra cousa moi útil que eu non creo que se describe moito na CS50 728 00:45:21,060 --> 00:45:23,430 pero paga a pena metendo e control de versión. 729 00:45:23,430 --> 00:45:27,180 A idea de control de versión é cando está basicamente manter o control de todo o progreso 730 00:45:27,180 --> 00:45:30,820 que fixo a súa web e se nalgún momento entender, oh, este estaba a traballar 731 00:45:30,820 --> 00:45:35,220 hai un tempo, pero non funciona máis, pode volver a versións anteriores 732 00:45:35,220 --> 00:45:37,720 para ver o que cambiou desde entón, e este tipo de cousas. 733 00:45:37,720 --> 00:45:41,670 A principal forma de facelo é co Git, e Git é todo este tipo de sistema que 734 00:45:41,670 --> 00:45:46,390 Creo Tommy MacWilliam deu un seminario sobre o ano pasado. 735 00:45:46,390 --> 00:45:51,520 Se entrar en seminarios CS50 para 2011, se pode ver o seu seminario sobre iso. 736 00:45:51,520 --> 00:45:57,070 A idea do Git é, basicamente, que a regularidade que está facendo eses compromisos 737 00:45:57,070 --> 00:46:01,430 que son formas de dicir o sitio web está nunha versión bastante estable agora, entón 738 00:46:01,430 --> 00:46:05,910 Estou embalar-lo e envialo para lonxe para un servidor, e entón pode ir a ese servidor 739 00:46:05,910 --> 00:46:07,910 e ollar para todas as versións anteriores do seu código e ver como progresou 740 00:46:07,910 --> 00:46:12,210 e todo este tipo de cousas boas. 741 00:46:12,210 --> 00:46:14,210 Entón, é basicamente iso. 742 00:46:14,210 --> 00:46:17,870 Tanto como o desenvolvemento web, estamos felices en ir por aquí e responder a calquera 743 00:46:17,870 --> 00:46:20,570 cuestións, tanto como a nosa presentación. 744 00:46:20,570 --> 00:46:22,900 É iso aí. Grazas. >> [Ben] Grazas. 745 00:46:22,900 --> 00:46:28,480 [Aplausos] 746 00:46:28,480 --> 00:46:30,950 >> [Billy] Persoal, alguén ten algunha dúbida sobre as cousas que nós Cubrimos 747 00:46:30,950 --> 00:46:33,950 ou cousas que non cobren que eles estaban esperando que ía cubrir? 748 00:46:33,950 --> 00:46:35,950 Ficaríamos felices en responder aqueles. Calquera? 749 00:46:35,950 --> 00:46:50,360 [Membro do público] Cales son os pros e contras do uso de Ruby ou Python? 750 00:46:50,360 --> 00:46:58,660 [Ben] A cuestión era, cales son os pros e contras do uso de Ruby ou Python 751 00:46:58,660 --> 00:46:59,900 no canto de como PHP. 752 00:46:59,900 --> 00:47:11,340 As vantaxes son que Ruby e Python son moito mellores que as linguas PHP. 753 00:47:11,340 --> 00:47:14,920 Polo menos na miña opinión, e eu creo que unha morea de opinións doutras persoas tamén. 754 00:47:14,920 --> 00:47:20,990 Eles foron deseñados máis para facer cousas complexas, 755 00:47:20,990 --> 00:47:25,380 e menos a bater xuntos páxinas web moi rápido con 756 00:47:25,380 --> 00:47:28,400 un pouco de contido dinámico. 757 00:47:28,400 --> 00:47:35,180 Os contra son que hai un pouco de - hai máis de unha curva de aprendizaxe 758 00:47:35,180 --> 00:47:37,220 para obtelos creado. 759 00:47:37,220 --> 00:47:41,010 É dicir, como en PHP, pode só ter un ficheiro HTML e escribir menos que, 760 00:47:41,010 --> 00:47:43,060 punto de interrogação, e entón escribir un código, e entón escribir o punto de interrogación, 761 00:47:43,060 --> 00:47:45,700 maior-que, a continuación, está feito. 762 00:47:45,700 --> 00:47:50,300 Noutras linguaxes como Ruby ou Python, 763 00:47:50,300 --> 00:47:56,810 ten que pasar por un pouco máis de traballo para obter o sitio funciona de inicio. 764 00:47:56,810 --> 00:48:02,730 Tamén hai - polo menos adoitaba ser o caso - que hai máis documentación 765 00:48:02,730 --> 00:48:05,480 dispoñible para PHP só porque hai máis persoas a usalo. 766 00:48:05,480 --> 00:48:09,370 Eu creo que non é tanto un problema anymore. 767 00:48:09,370 --> 00:48:12,520 Hai certamente moi boa documentación para cousas como Ruby on Rails 768 00:48:12,520 --> 00:48:16,080 ou Django para Python é o equivalente. 769 00:48:16,080 --> 00:48:25,910 PHP é a que todo o mundo ten usado por anos, e xa sabe como funciona. 770 00:48:25,910 --> 00:48:28,460 Ruby e Python son algo menos maduros. 771 00:48:28,460 --> 00:48:33,130 >> [Membro do público] Se tivese que escoller entre un deles para aprender ou incorporarse, 772 00:48:33,130 --> 00:48:36,130 que prefire? 773 00:48:36,130 --> 00:48:38,870 Honesta, eu creo que depende da persoa. 774 00:48:38,870 --> 00:48:45,450 Sinto moito. A cuestión era o que escolle a alguén a aprender? 775 00:48:45,450 --> 00:48:50,230 Creo Python a máis fermosa persoalmente. 776 00:48:50,230 --> 00:48:55,360 Hai unha gran cantidade de persoas que - eu fixen o meu primeiro proxecto dev web en Python e Django. 777 00:48:55,360 --> 00:49:00,300 Hai unha morea de xente que quere Ruby on Rails tamén. 778 00:49:00,300 --> 00:49:02,650 Probablemente máis persoas souberen Ruby on Rails. 779 00:49:02,650 --> 00:49:05,270 Honesta, quere só de ir con o que a xente ao seu redor saben 780 00:49:05,270 --> 00:49:09,680 para que teña a xente a facer preguntas. 781 00:49:19,640 --> 00:49:24,170 >> A cuestión era - en servidores compartidos é medio difícil de traballar en Python? 782 00:49:24,170 --> 00:49:26,170 Iso depende da súa hospedaxe. 783 00:49:26,170 --> 00:49:29,400 Hai unha serie de provedores de Aloxamento que pode publicar cousas Python. 784 00:49:29,400 --> 00:49:31,400 WebFaction fai iso, non? 785 00:49:31,400 --> 00:49:34,400 WebFaction é aquel que Billy e eu usei para algúns proxectos. 786 00:49:34,400 --> 00:49:37,750 Son realmente grandes. Eles apoian a maioría dos idiomas. 787 00:49:37,750 --> 00:49:40,020 Pero é certo que o PHP é moito máis amplamente soportado. 788 00:49:40,020 --> 00:49:45,210 Entón, se está preso nun servidor que só fai PHP, que é unha boa razón para usar o PHP. 789 00:49:45,210 --> 00:49:56,010 >> [Membro do público] Eu só teño que aprender como consultar algúns bancos de datos, 790 00:49:56,010 --> 00:50:00,680 e sei que o meu SQL está en todo o lugar, pero eu comecei recentemente exposto a - 791 00:50:00,680 --> 00:50:04,470 e apuntou-a para fóra. Ve JSON e bases de datos expansíveis. 792 00:50:04,470 --> 00:50:14,580 My SQL aínda está en todo o lugar. Como ve o que está a suceder? 793 00:50:14,580 --> 00:50:21,330 É que vai haber unha tendencia crecente para máis expansível (inaudível)? 794 00:50:21,330 --> 00:50:30,100 A cuestión era - eu creo que vai ser unha tendencia para as bases de datos non SQL. 795 00:50:30,100 --> 00:50:33,850 Por exemplo, como MongoDB. Coido que é sempre certo. 796 00:50:33,850 --> 00:50:38,730 O meu consello foi principalmente relacionada co MySQL aquí só porque é MySQL 797 00:50:38,730 --> 00:50:40,950 estándar da industria. 798 00:50:40,950 --> 00:50:45,950 Persoalmente, eu prefiro moito máis as bases de datos que non teñen schemos como MongoDB 799 00:50:45,950 --> 00:50:49,520 onde non ten a cuestión de, oh, eu teño engadir outra columna. 800 00:50:49,520 --> 00:50:51,600 ¡Ai de min, como todo o que fago? 801 00:50:51,600 --> 00:50:55,840 É moi difícil facelo no MySQL, mais cando ten algo como Mongo 802 00:50:55,840 --> 00:50:57,840 é moito máis agradable. 803 00:50:57,840 --> 00:51:03,780 A outra cousa agradable sobre Mongo é que os seus rexistros son realmente obxectos JavaScript. 804 00:51:03,780 --> 00:51:10,110 Non hai ningún tipo de paso de conversión que precisa para tomar esas liñas de base de datos 805 00:51:10,110 --> 00:51:13,140 e transformalos en un obxecto Javascript e, a continuación, envialos ao longo do fío. 806 00:51:13,140 --> 00:51:20,290 Eu creo que este tipo de cousas vai ser moi, moi útil para o desenvolvemento web rápida no futuro. 807 00:51:20,290 --> 00:51:23,060 >> [Billy] Algo que me gustaría engadir que non é máis que un punto xeral é que 808 00:51:23,060 --> 00:51:26,580 non me sinto como ten que aprender todos os idiomas que discutir 809 00:51:26,580 --> 00:51:28,580 do noso seminario. 810 00:51:28,580 --> 00:51:30,560 Obviamente, o obxectivo é darlle unha idea do que está aí fóra, 811 00:51:30,560 --> 00:51:33,450 e se está intrigado con algunhas das cousas que eu mencionen que podes Google los 812 00:51:33,450 --> 00:51:35,830 e ler sobre eles. 813 00:51:35,830 --> 00:51:38,750 E, como eu mencionen, hai algúns seminarios que tratan precisamente esas cousas. 814 00:51:38,750 --> 00:51:41,660 Hai aínda máis seminarios que eu non teña mencionado que, probablemente, entrar en 815 00:51:41,660 --> 00:51:43,660 isto tamén. 816 00:51:43,660 --> 00:51:46,610 A idea é que, se quere traballar en algo, aquí están as ferramentas á súa disposición. 817 00:51:46,610 --> 00:51:51,630 Non se sente oprimido, se non está realmente certo o que estas ferramentas fan exactamente, 818 00:51:51,630 --> 00:51:54,830 pero sabemos que están aí fóra, e que pode facer uso de ancho deles 819 00:51:54,830 --> 00:51:56,830 por Google. 820 00:51:56,830 --> 00:51:59,960 >> [Membro do público] Que tipo de cousas que debe facer para garantir que o seu sitio web 821 00:51:59,960 --> 00:52:02,530 queda ben en dispositivos móbiles? 822 00:52:02,530 --> 00:52:05,590 [Billy] Os dispositivos móbiles son un pouco difícil. 823 00:52:05,590 --> 00:52:07,590 Hai dúas formas que pode achegarse a el. 824 00:52:07,590 --> 00:52:11,500 A primeira forma é que realmente ten un sitio para móbil. 825 00:52:11,500 --> 00:52:14,660 Noutras palabras, realizar algún tipo de detección, en principio 826 00:52:14,660 --> 00:52:18,830 cando o navegador está a facer a solicitude para a súa web ou que se 827 00:52:18,830 --> 00:52:25,240 voltar este punto de vista - que será o punto de vista para navegadores de escritorio ou portátil - 828 00:52:25,240 --> 00:52:27,710 e este outro punto de vista para dispositivos móbiles. 829 00:52:27,710 --> 00:52:33,090 É un lugar onde as vistas son moi bo no que pode moi ben cambiar o 830 00:52:33,090 --> 00:52:37,580 dous para fóra, e ten unha interfaz que funciona moi ben en dispositivos móbiles 831 00:52:37,580 --> 00:52:40,770 e ter un completamente diferente, que funciona ben en dispositivos navegador. 832 00:52:40,770 --> 00:52:43,770 O problema con isto é que leva moito tempo, porque iso significa codificación 833 00:52:43,770 --> 00:52:47,060 unha interface totalmente diferente. 834 00:52:47,060 --> 00:52:49,720 A outra forma que pode facer é - 835 00:52:49,720 --> 00:52:55,250 unha morea de teléfonos modernos ha amosar sitios e tentar tornalos como un navegador sería, 836 00:52:55,250 --> 00:52:57,680 e eles fan o mellor. 837 00:52:57,680 --> 00:53:04,340 Pode tipo de tentar quedar luz sobre a cantidade de JavaScript jQuery que está a usar 838 00:53:04,340 --> 00:53:07,360 que tende a ser o lugar onde as cousas poden dar mal un pouco. 839 00:53:07,360 --> 00:53:13,430 Esta é unha especie de xeito que pode usar se non ten moito tempo. 840 00:53:13,430 --> 00:53:18,540 Se ten o tempo para traballar nunha interface móbil, que é, obviamente, a súa mellor opción. 841 00:53:18,540 --> 00:53:23,320 >> Eu creo que xeralmente para proxectos de CS50, vai querer escoller un ou outro. 842 00:53:23,320 --> 00:53:27,990 Noutras palabras, quere facer unha aplicación móbil ou se quere facer un sitio de escritorio. 843 00:53:27,990 --> 00:53:32,200 E este tipo de determina onde vai con iso. 844 00:53:32,200 --> 00:53:35,360 Pero se quere expandir-lo máis tarde, probablemente a súa mellor aposta é 845 00:53:35,360 --> 00:53:37,360 para facer unha outra interface para o outro. 846 00:53:51,650 --> 00:53:56,340 Eu teño un pouco de experiencia en desenvolvemento de sitios baseados en WordPress. 847 00:53:56,340 --> 00:53:58,670 I aloxado unha web persoal en WordPress por algún tempo. 848 00:53:58,670 --> 00:54:02,310 Estes tipos de estruturas poden ser agradables cousas tan básicas. 849 00:54:02,310 --> 00:54:07,050 Moitas veces só vai executar nunha serie de preguntas de personalización aínda. 850 00:54:07,050 --> 00:54:10,940 Vai querer ter algo ollar unha determinada maneira ou de ser de certa forma 851 00:54:10,940 --> 00:54:14,510 e simplemente non pode porque é hard-Wired para o sistema que 852 00:54:14,510 --> 00:54:17,480 é así que ten que facer cousas que poden ser un pouco de un problema. 853 00:54:17,480 --> 00:54:22,020 Desde entón eu medio que ser máis inclinado a traballar con sitios a partir de cero. 854 00:54:22,020 --> 00:54:26,840 Para cousas como bases de datos do blog e este tipo de cousas non é realmente tan difícil de construír unha estrutura. 855 00:54:26,840 --> 00:54:29,970 Se está realmente se estendía por vez, pode, por suposto, usar algo como WordPress 856 00:54:29,970 --> 00:54:33,120 ou este tipo de cousas a un blog. 857 00:54:33,120 --> 00:54:38,790 Tipo de cousas que os blogs tenda e non son realmente difíciles o suficiente para que 858 00:54:38,790 --> 00:54:41,500 se está executando en calquera destes tipos de cousas, que é probablemente mellor só 859 00:54:41,500 --> 00:54:43,500 facer unha versión na casa. 860 00:54:43,500 --> 00:54:48,350 >> Eu creo que é sobre iso, entón grazas de novo por vir. 861 00:54:48,350 --> 00:54:51,960 Nós realmente nos gusta de falar con vós e espero que aprendeu algo. 862 00:54:51,960 --> 00:54:55,350 [Ben] Estamos felices en falar - temos a percorrer, pero estamos felices en falar máis do lado de fóra 863 00:54:55,350 --> 00:55:01,650 se ten outra pregunta. Grazas unha vez máis. [Aplausos] 864 00:55:03,750 --> 00:55:06,000 [CS50.TV]