1 00:00:00,000 --> 00:00:01,390 2 00:00:01,390 --> 00:00:04,890 >> [Música tocando] 3 00:00:04,890 --> 00:00:10,955 4 00:00:10,955 --> 00:00:12,580 DAVID J MALAN: Tudo bem, bem-vindo de volta. 5 00:00:12,580 --> 00:00:13,600 Este é CS50. 6 00:00:13,600 --> 00:00:15,540 Este é o fim de semana de sete. 7 00:00:15,540 --> 00:00:18,180 E é o fim desse limpador caça do conjunto de problemas de quatro 8 00:00:18,180 --> 00:00:19,220 que você pode se lembrar. 9 00:00:19,220 --> 00:00:21,650 Depois de se recuperar de todos esses JPEGs de pessoal, 10 00:00:21,650 --> 00:00:24,820 você foi desafiado, se você quiser, para fotografar-se com o maior número 11 00:00:24,820 --> 00:00:25,981 daquelas pessoas que você puder. 12 00:00:25,981 --> 00:00:28,480 Temos um monte de submissões ao longo das últimas semanas, 13 00:00:28,480 --> 00:00:32,980 de fato, algumas direito bastante antes do meio dia hoje, alguns dos quais são aqueles aqui, 14 00:00:32,980 --> 00:00:37,670 pego aqui em-- parece como-- Annenberg Salão no horário de expediente, um aqui 15 00:00:37,670 --> 00:00:39,530 em Lowell Casa com Nick. 16 00:00:39,530 --> 00:00:41,750 Aqui está Ramon ser pego no telefone. 17 00:00:41,750 --> 00:00:43,870 Isso foi numa CS50 almoço. 18 00:00:43,870 --> 00:00:46,840 Este foi Jason Skyping com um colega de classe mais criativo, 19 00:00:46,840 --> 00:00:48,280 que lhe telefonou desta forma. 20 00:00:48,280 --> 00:00:49,690 Nós não sabemos o que isso era. 21 00:00:49,690 --> 00:00:51,940 >> [Risos] 22 00:00:51,940 --> 00:00:54,570 >> DAVID J MALAN: Mas que vale a pena um gigabyte. 23 00:00:54,570 --> 00:00:56,960 Aqui é Chang, que literalmente, correu para fora do palco 24 00:00:56,960 --> 00:01:00,480 para evitar ser fotografado uma dia, mas foi finalmente capturado. 25 00:01:00,480 --> 00:01:02,050 Aqui é Nick. 26 00:01:02,050 --> 00:01:03,480 Aqui é Nick. 27 00:01:03,480 --> 00:01:04,080 Aqui é Nick. 28 00:01:04,080 --> 00:01:05,090 29 00:01:05,090 --> 00:01:07,670 E aqui é Alison para baixo pelos campos. 30 00:01:07,670 --> 00:01:11,840 E Zamyla mesmo foi encontrado em uma competição de salão. 31 00:01:11,840 --> 00:01:14,100 Então vamos passar por estas fotos, descobrir 32 00:01:14,100 --> 00:01:16,690 que apresentou o maior no mínimo, e recompensa 33 00:01:16,690 --> 00:01:20,662 um prêmio fabuloso, como prometido na spec. 34 00:01:20,662 --> 00:01:23,120 E nós também vamos acompanhar cerca de o espaço que foi envolvido. 35 00:01:23,120 --> 00:01:26,860 >> Um casal de announcements-- tão almoço é, novamente, nesta sexta-feira 13:15. 36 00:01:26,860 --> 00:01:30,420 Se você gostaria de se juntar a nós, De RSVP em que URL aqui. 37 00:01:30,420 --> 00:01:33,730 Jason aparece novamente aqui a partir de uma das seções de um par de anos 38 00:01:33,730 --> 00:01:35,510 volta, o que aconteceu cair no Halloween. 39 00:01:35,510 --> 00:01:38,950 E, de fato, ele se vestia como um abóbora nesse mesmo ano. 40 00:01:38,950 --> 00:01:42,700 Se você assistir a esta seção de sua seção a partir de 2011 41 00:01:42,700 --> 00:01:46,480 oito, se você está curioso, em CS50.tv, eu acho 42 00:01:46,480 --> 00:01:49,730 este foi o ano em que sua bomba de ar estava funcionando. 43 00:01:49,730 --> 00:01:52,490 >> Se você, em seguida, assistir a seção semelhante em 2012, 44 00:01:52,490 --> 00:01:55,620 você verá esta Jason muito esvaziado, uma vez que o fato já não funcionava, 45 00:01:55,620 --> 00:01:58,060 que é só para dizer nesta sexta-feira, se você 46 00:01:58,060 --> 00:02:02,720 gostaria de esculpir uma abóbora com Daven e Gabe e outros, RSVP para as cabeças 47 00:02:02,720 --> 00:02:04,480 no endereço cs50.harvard.edu. 48 00:02:04,480 --> 00:02:06,200 Promete ser uma grande diversão. 49 00:02:06,200 --> 00:02:08,660 Daven, dizem, tem esculpido abóboras toda a sua vida. 50 00:02:08,660 --> 00:02:11,930 Gabriel de o Brasil nunca tem esculpida uma abóbora para o Halloween. 51 00:02:11,930 --> 00:02:14,700 Então, seja lá com eles como ele aprende. 52 00:02:14,700 --> 00:02:16,830 >> Seminários, meanwhile-- assim que você vai aprender em breve 53 00:02:16,830 --> 00:02:20,650 sobre o que nossas expectativas são para o projeto final, que, essencialmente, 54 00:02:20,650 --> 00:02:23,150 vai se resumem a concepção e implementação de 55 00:02:23,150 --> 00:02:26,440 mais qualquer projeto de interesse para você, ainda sujeito à aprovação 56 00:02:26,440 --> 00:02:28,490 e orientação do seu companheiro de ensino. 57 00:02:28,490 --> 00:02:32,110 Perto do fim do semestre, nós introduzimos um número 58 00:02:32,110 --> 00:02:35,610 de seminários, que são aulas opcionais liderada pelos companheiros de ensino e Harvard 59 00:02:35,610 --> 00:02:38,570 pessoal, os amigos do curso em todo campus, sobre vários temas que 60 00:02:38,570 --> 00:02:41,470 são tangenciais à syllabus do curso subjacente 61 00:02:41,470 --> 00:02:45,590 mas mesmo assim o caso, divertido, e diferente para potenciais projetos finais. 62 00:02:45,590 --> 00:02:49,530 >> Por exemplo, em primeiro lugar, se você gostaria para se inscrever, siga para a URL lá. 63 00:02:49,530 --> 00:02:53,010 E esta é a programação para sozinho seminários deste ano. 64 00:02:53,010 --> 00:02:56,060 Mas percebemos que temos dezenas de seminários de anos passados, os quais 65 00:02:56,060 --> 00:02:59,774 estão ligados no menu Seminários opção do site do curso. 66 00:02:59,774 --> 00:03:02,190 Então, se você está pensando em indo além de sua zona de conforto 67 00:03:02,190 --> 00:03:05,060 ou pegar algumas novas habilidades, por exemplo, a programação iPhone 68 00:03:05,060 --> 00:03:08,100 aplicativos com Swift, uma nova linguagem da Apple ou Objective-C 69 00:03:08,100 --> 00:03:11,230 ou Android Apps ou programação [? cue?] lâmpadas, ou qualquer um dos tópicos 70 00:03:11,230 --> 00:03:15,490 aqui em cima e mais, devido verificação a página de inscrição. 71 00:03:15,490 --> 00:03:19,730 >> Então começamos e concluído em Segunda-feira com olhando para HTTP. 72 00:03:19,730 --> 00:03:22,675 Então HTTP refresher-- rápida, HyperText Transfer Protocol. 73 00:03:22,675 --> 00:03:24,045 Mas o que isso realmente significa? 74 00:03:24,045 --> 00:03:26,805 75 00:03:26,805 --> 00:03:27,930 O que isso realmente significa? 76 00:03:27,930 --> 00:03:30,665 77 00:03:30,665 --> 00:03:31,290 É que uma mão? 78 00:03:31,290 --> 00:03:33,074 79 00:03:33,074 --> 00:03:34,740 Eu sei que você está apenas coçando a cabeça. 80 00:03:34,740 --> 00:03:36,400 Mas você quer propor o que é HTTP? 81 00:03:36,400 --> 00:03:37,792 82 00:03:37,792 --> 00:03:40,576 >> Audiência: Como os computadores comunicar-se com [inaudível]. 83 00:03:40,576 --> 00:03:41,517 84 00:03:41,517 --> 00:03:43,100 DAVID J MALAN: eu perdi a última parte. 85 00:03:43,100 --> 00:03:45,774 Como os computadores se comunicam com-- 86 00:03:45,774 --> 00:03:47,325 >> Servidores de Internet: audiência. 87 00:03:47,325 --> 00:03:50,450 DAVID J MALAN: boa-- com internet servidores e, especificamente, servidores web. 88 00:03:50,450 --> 00:03:53,533 Porque lembre-se, há um monte de serviços na internet, alguns dos quais 89 00:03:53,533 --> 00:03:57,349 você usa provavelmente diariamente entre bate-papo e de mensagens, chat e web, e-mail, 90 00:03:57,349 --> 00:03:57,890 e semelhantes. 91 00:03:57,890 --> 00:04:00,900 E HTTP é apenas o protocolo que navegadores web 92 00:04:00,900 --> 00:04:03,750 falar ao se comunicar com servidores web, e vice-versa. 93 00:04:03,750 --> 00:04:05,580 E o analógico na mundo humano poderia ser, 94 00:04:05,580 --> 00:04:08,730 Eu estendo minha mão para apertar alguns outro ser humano do e ele ou ela 95 00:04:08,730 --> 00:04:11,970 reconhece, alargando a sua mão também. 96 00:04:11,970 --> 00:04:13,970 Então, isso é apenas um protocolo, um conjunto de convenções. 97 00:04:13,970 --> 00:04:15,630 >> E o que de fato são essas convenções? 98 00:04:15,630 --> 00:04:18,640 Bem, isso só se resume a envio de mensagens e para trás, 99 00:04:18,640 --> 00:04:19,770 como descrito aqui. 100 00:04:19,770 --> 00:04:22,520 E há um par de maneiras em qual você pode enviar essas mensagens. 101 00:04:22,520 --> 00:04:24,360 E talvez o mais comum é conhecido como get. 102 00:04:24,360 --> 00:04:26,510 E nós vamos ver um contraste para isso antes do tempo. 103 00:04:26,510 --> 00:04:30,010 >> Mas um pedido get a partir de um navegador ao servidor apenas se parece com isso. 104 00:04:30,010 --> 00:04:32,960 É um monte de texto que coloca dentro de um envelope virtual. 105 00:04:32,960 --> 00:04:35,854 Na parte externa do envelope que ir algumas peças de detalhes. 106 00:04:35,854 --> 00:04:37,770 O que precisa ir para a envelope, por assim dizer, 107 00:04:37,770 --> 00:04:41,820 a fim de obter um pedido como isso de mim para um servidor web? 108 00:04:41,820 --> 00:04:42,320 Sim. 109 00:04:42,320 --> 00:04:43,270 >> AUDIÊNCIA: O seu endereço de IP. 110 00:04:43,270 --> 00:04:45,890 >> DAVID J MALAN: O meu endereço IP no campo de, por assim dizer, 111 00:04:45,890 --> 00:04:49,490 e, é claro, o endereço IP do destinatário. 112 00:04:49,490 --> 00:04:52,710 Mas, no caso de um pacote de teia, precisamos de um pouco mais de detalhes 113 00:04:52,710 --> 00:04:55,254 Não é suficiente apenas para enviar um envelope para um servidor, 114 00:04:55,254 --> 00:04:57,670 porque esse servidor pode ser escuta para diferentes tipos 115 00:04:57,670 --> 00:04:59,180 do tráfego de internet. 116 00:04:59,180 --> 00:05:01,370 Então, o que mais precisamos além de IP do destinatário? 117 00:05:01,370 --> 00:05:02,723 118 00:05:02,723 --> 00:05:03,222 Sim? 119 00:05:03,222 --> 00:05:04,241 >> AUDIÊNCIA: É TCP? 120 00:05:04,241 --> 00:05:05,074 DAVID J MALAN: Good. 121 00:05:05,074 --> 00:05:06,470 TCP-- 122 00:05:06,470 --> 00:05:07,340 >> AUDIÊNCIA: Endereço. 123 00:05:07,340 --> 00:05:09,340 >> DAVID J MALAN: Endereço, ou porta, como é chamado. 124 00:05:09,340 --> 00:05:11,010 Perto, mas um número de porta TCP. 125 00:05:11,010 --> 00:05:12,220 E há um monte delas. 126 00:05:12,220 --> 00:05:14,310 Mas, certamente, o mais familiarizado deveria eventualmente 127 00:05:14,310 --> 00:05:17,590 ser de 80, que é o padrão utilizado para o tráfego da web. 128 00:05:17,590 --> 00:05:20,040 E outra familiarizado uma breve estará 443, 129 00:05:20,040 --> 00:05:24,280 que é usado para seguro web tráfego, URLs que começam com https. 130 00:05:24,280 --> 00:05:26,650 >> Então é isso que vai dentro desse envelope. 131 00:05:26,650 --> 00:05:29,780 E obter / significa apenas, dar me a página web padrão. 132 00:05:29,780 --> 00:05:32,700 Dá-me a raiz do disco dirigir no servidor web. 133 00:05:32,700 --> 00:05:36,050 E espero que, a web servidor irá responder com, OK 134 00:05:36,050 --> 00:05:39,630 eo número 200, que é apenas uma convenção diz que, sim, tudo 135 00:05:39,630 --> 00:05:40,470 é realmente OK. 136 00:05:40,470 --> 00:05:41,680 Aqui está a página. 137 00:05:41,680 --> 00:05:45,510 O tipo de página web vai ser de texto, mas, mais especificamente, HTML, 138 00:05:45,510 --> 00:05:47,010 que estamos prestes a mergulhar de volta para. 139 00:05:47,010 --> 00:05:49,877 E o dot dot dot apenas meios, aqui está o HTML. 140 00:05:49,877 --> 00:05:51,710 E é aí que nós pegar a história de hoje, 141 00:05:51,710 --> 00:05:55,740 realmente escrever HTML, HyperText Markup Language, que 142 00:05:55,740 --> 00:05:57,727 é a língua em que páginas da web são escritos. 143 00:05:57,727 --> 00:05:59,060 Não é uma linguagem de programação. 144 00:05:59,060 --> 00:06:01,270 Não há funções ou laços ou condições. 145 00:06:01,270 --> 00:06:03,800 É uma linguagem de marcação, bem novamente vemos hoje, 146 00:06:03,800 --> 00:06:07,240 que permite que você especifique como estruturar e estilizar 147 00:06:07,240 --> 00:06:09,300 esteticamente uma página web. 148 00:06:09,300 --> 00:06:11,470 >> Portanto, este foi o único e só página que realmente 149 00:06:11,470 --> 00:06:13,930 olhou, se brevemente, na segunda-feira. 150 00:06:13,930 --> 00:06:16,250 E observe alguns características mais salientes. 151 00:06:16,250 --> 00:06:20,170 Há um monte de abertura angular suporte e perto do suporte angular. 152 00:06:20,170 --> 00:06:23,160 Entre aqueles angular colchetes são palavras. 153 00:06:23,160 --> 00:06:25,660 E nós vamos começar chamando essas tags palavras. 154 00:06:25,660 --> 00:06:28,800 Cabeça suporte de forma aberta e suporte de cabeça fechada 155 00:06:28,800 --> 00:06:33,620 são as tags abertas e fechadas, ou as tags de início e fim 156 00:06:33,620 --> 00:06:37,660 respectivamente, de um elemento HTML, como vamos chamá-lo, chamado de cabeça. 157 00:06:37,660 --> 00:06:41,760 E o mesmo se aplica jargão ao corpo em HTML e assim por diante. 158 00:06:41,760 --> 00:06:43,970 >> E o que é bom é HTML-- e, na verdade, nós vamos 159 00:06:43,970 --> 00:06:47,187 passar terrivelmente pouco tempo com ele, porque você vai na maior parte apenas descobrir 160 00:06:47,187 --> 00:06:49,770 quais as características que ele tem quando você realmente tem um problema concreto 161 00:06:49,770 --> 00:06:52,820 para solve-- você vai descobrir que um navegador é muito burro. 162 00:06:52,820 --> 00:06:56,450 Ele só vai fazer-- não ao contrário um Computador-- o que você diga a ele para fazer. 163 00:06:56,450 --> 00:06:59,279 E assim, quando você tem aberto HTML suporte no topo 164 00:06:59,279 --> 00:07:01,320 ali, que, essencialmente Significa apenas que, hey, navegador, 165 00:07:01,320 --> 00:07:04,090 aqui vem uma página web escritas em HTML. 166 00:07:04,090 --> 00:07:06,130 >> Quando se vê suporte aberto cabeça, isso só significa que, 167 00:07:06,130 --> 00:07:10,350 hey, navegador, aqui vem a cabeça, ou a parte superior da minha página web. 168 00:07:10,350 --> 00:07:14,192 Quando se vê um suporte fechado cabeça, o que significa apenas, hey, 169 00:07:14,192 --> 00:07:15,150 é isso para a cabeça. 170 00:07:15,150 --> 00:07:16,420 Espera para outra coisa. 171 00:07:16,420 --> 00:07:18,878 E que outra coisa é aparentemente vai ser o corpo. 172 00:07:18,878 --> 00:07:22,630 E quando você não tem uma marca, como você tem apenas Olá, vírgula, mundo, 173 00:07:22,630 --> 00:07:26,610 que só vai ser um texto cru que em última análise, é apresentada no ecrã. 174 00:07:26,610 --> 00:07:29,220 >> Agora, você vai notar também o recuo aqui. 175 00:07:29,220 --> 00:07:32,160 Você provavelmente pode-se inferir como estamos estilizando-lo. 176 00:07:32,160 --> 00:07:34,850 Toda vez que eu abrir uma tag, por assim dizer, eu recuar. 177 00:07:34,850 --> 00:07:38,540 E cada vez que eu fecho uma tag, eu un-indent, 178 00:07:38,540 --> 00:07:40,690 similares em espírito à chaves. 179 00:07:40,690 --> 00:07:43,470 E além disso, eu sou do tipo de usar meu julgamento. 180 00:07:43,470 --> 00:07:48,380 Observe que eu não me incomodei bater Digite dentro dessa tag título. 181 00:07:48,380 --> 00:07:48,990 Por quê? 182 00:07:48,990 --> 00:07:51,920 Bem, eu apenas decidi que parecia um pouco mais limpo para mim, o ser humano, 183 00:07:51,920 --> 00:07:53,181 apenas para não incomodar a fazer isso. 184 00:07:53,181 --> 00:07:54,930 Então, novamente, há alguns julgamento chama apenas 185 00:07:54,930 --> 00:07:57,670 como há em C ou qualquer outra linguagem. 186 00:07:57,670 --> 00:08:04,110 >> Mas note também que este recuo presta-se a um modelo mental, 187 00:08:04,110 --> 00:08:05,670 para não complicar mais isso. 188 00:08:05,670 --> 00:08:07,020 Mas uma árvore, certo? 189 00:08:07,020 --> 00:08:09,290 Se você pensar em uma web página, aparentemente escrito 190 00:08:09,290 --> 00:08:12,050 assim, como sendo bem recuado dessa forma, 191 00:08:12,050 --> 00:08:17,390 você quase pode pensar o suporte aberto HTML tag suporte fechado é demarcar 192 00:08:17,390 --> 00:08:21,380 a raiz de um nó, uma árvore da família nó de estilo no estilo das árvores 193 00:08:21,380 --> 00:08:22,900 olhamos para sexta-feira passada. 194 00:08:22,900 --> 00:08:27,630 >> E, de fato, temos à direita aqui o que vamos chamar DOM, D-O-M, um documento 195 00:08:27,630 --> 00:08:31,680 modelo de objeto, uma maneira elegante de dizer uma árvore que representa esse HTML. 196 00:08:31,680 --> 00:08:36,140 E observe que o HTML tem, vamos dizer, como uma árvore de família, dois filhos. 197 00:08:36,140 --> 00:08:37,659 À esquerda é a cabeça. 198 00:08:37,659 --> 00:08:39,179 À direita está o corpo. 199 00:08:39,179 --> 00:08:44,220 >> E assim como um exercício de pensamento irracional, cabeça, é claro, tem quantas crianças 200 00:08:44,220 --> 00:08:46,070 de acordo com esta estrutura? 201 00:08:46,070 --> 00:08:48,200 Assim, apenas um, title-- e é por isso que temos 202 00:08:48,200 --> 00:08:50,580 a seta que vai da cabeça ao título. 203 00:08:50,580 --> 00:08:55,110 Então, é como se essa pessoa no árvore de família tinha apenas um filho. 204 00:08:55,110 --> 00:08:58,230 E, em seguida próprio título pode ser dito de ter um filho também. 205 00:08:58,230 --> 00:09:01,780 >> Lembre-se que o HTML tinha Olá, vírgula, mundo abaixo dela. 206 00:09:01,780 --> 00:09:06,090 E eu simplesmente tirado ele dentro de uma oval em vez de apenas um retângulo 207 00:09:06,090 --> 00:09:10,559 para transmitir semanticamente que, embora é um nó da árvore, por assim dizer, 208 00:09:10,559 --> 00:09:12,100 é uma espécie de fundamentalmente diferente. 209 00:09:12,100 --> 00:09:12,800 Não é uma tag. 210 00:09:12,800 --> 00:09:14,780 Ou, mais propriamente, não é um elemento. 211 00:09:14,780 --> 00:09:16,590 É apenas um nó de texto, se você quiser. 212 00:09:16,590 --> 00:09:18,990 Mas estes são completamente convenções humanas arbitrárias. 213 00:09:18,990 --> 00:09:23,180 Este é apenas agora a minha maneira de representando o que eu vou como um agregado 214 00:09:23,180 --> 00:09:24,340 chamar o documento. 215 00:09:24,340 --> 00:09:27,750 >> E como um aparte, a coisa em o super canto superior esquerdo, 216 00:09:27,750 --> 00:09:32,080 suporte aberto ponto de exclamação doc tipo HTML, esta parece ser uma marca, 217 00:09:32,080 --> 00:09:35,560 mas é o caso canto estúpido onde que é apenas lá, copiado e colado 218 00:09:35,560 --> 00:09:38,460 para indicar os navegadores esta é a versão 5 do HTML. 219 00:09:38,460 --> 00:09:41,540 O mundo continua a mudar o que o primeira linha de código em uma página deve ser. 220 00:09:41,540 --> 00:09:43,820 Isto apenas significa que a versão 5. 221 00:09:43,820 --> 00:09:45,950 Por isso, não chega a parecido com os outros. 222 00:09:45,950 --> 00:09:48,120 >> Tudo bem, então, com que disse, agora você vai apreciar 223 00:09:48,120 --> 00:09:50,767 esta bastante este estúpido tatuagem alguém tem. 224 00:09:50,767 --> 00:09:51,990 >> [Risos] 225 00:09:51,990 --> 00:09:54,210 >> DAVID J MALAN: Tudo bem, e agora vamos realmente mergulho 226 00:09:54,210 --> 00:09:55,710 em fazer algo com isso. 227 00:09:55,710 --> 00:09:58,610 Você deve se lembrar que a última vez Eu abri o Appliance CS50 228 00:09:58,610 --> 00:10:01,650 e eu fiz algo tão simples como abertura gedit. 229 00:10:01,650 --> 00:10:05,190 E eu salvo o arquivo, mesmo em meu desktop-- lugar nenhum especial-- 230 00:10:05,190 --> 00:10:05,870 como hello.html. 231 00:10:05,870 --> 00:10:07,100 232 00:10:07,100 --> 00:10:10,984 >> Então deixe-me fazer isso novamente-- hello.html Enter. 233 00:10:10,984 --> 00:10:13,900 E agora, neste arquivo, eu vou vá em frente e replicar o que acabamos de 234 00:10:13,900 --> 00:10:18,850 doc saw-- tipo html Então eu vou fazer aberto html suporte de suporte fechado. 235 00:10:18,850 --> 00:10:21,890 E então eu vou preventivamente abrir e fechar a tag. 236 00:10:21,890 --> 00:10:22,390 Por quê? 237 00:10:22,390 --> 00:10:23,598 Só para eu não esquecer mais tarde. 238 00:10:23,598 --> 00:10:26,850 É apenas uma boa prática, como abertura e fechando chaves de uma vez. 239 00:10:26,850 --> 00:10:28,900 >> E então o que veio a seguir? 240 00:10:28,900 --> 00:10:30,582 Você pode pensar a tatuagem. 241 00:10:30,582 --> 00:10:31,450 >> AUDIÊNCIA: A cabeça. 242 00:10:31,450 --> 00:10:32,500 >> DAVID J MALAN: A cabeça. 243 00:10:32,500 --> 00:10:36,020 E então, aqui, eu tinha o título, eu acho. 244 00:10:36,020 --> 00:10:39,886 E o título foi arbitrariamente, Olá, título próximo mundo. 245 00:10:39,886 --> 00:10:42,760 E então para cá, o corpo, de course-- então fechar a tag body. 246 00:10:42,760 --> 00:10:45,660 E depois é só um pouco redundante, Eu tive a mesma coisa aqui em baixo. 247 00:10:45,660 --> 00:10:47,150 >> Então, eu afirmo que esta é uma página web. 248 00:10:47,150 --> 00:10:49,050 Isso é algo que agora podia viver na web, 249 00:10:49,050 --> 00:10:51,925 embora, é claro, é literalmente vivendo no meu desktop agora. 250 00:10:51,925 --> 00:10:55,837 Mas, na verdade, se eu minimizar gedit, Vou ver no meu desktop em seu ícone. 251 00:10:55,837 --> 00:10:58,420 Mesmo que este seja o aparelho, você pode fazer isso no Mac OS 252 00:10:58,420 --> 00:11:01,580 sem TextEdit ou Windows com o bloco de notas mesmo. 253 00:11:01,580 --> 00:11:06,115 >> E se eu ir em frente e dê um duplo clique que mesmo, e select-- bem, vamos 254 00:11:06,115 --> 00:11:07,990 Não selecione isso porque Chrome não está abrindo. 255 00:11:07,990 --> 00:11:09,281 Vamos em frente e abra o Chrome. 256 00:11:09,281 --> 00:11:10,160 257 00:11:10,160 --> 00:11:14,040 E depois fazer Command-O para abrir E navegue até a área de trabalho 258 00:11:14,040 --> 00:11:15,320 e abrir esse arquivo. 259 00:11:15,320 --> 00:11:20,120 É assim que um navegador interpreta HTML, de cima para baixo, da esquerda para a direita. 260 00:11:20,120 --> 00:11:21,314 Ei, aqui está o navegador HTML. 261 00:11:21,314 --> 00:11:21,980 Aqui está a cabeça. 262 00:11:21,980 --> 00:11:23,250 Aqui é o título. 263 00:11:23,250 --> 00:11:24,090 Aqui está o corpo. 264 00:11:24,090 --> 00:11:26,620 E, de fato, é assim torna essa página web. 265 00:11:26,620 --> 00:11:27,800 >> Mas observe a URL. 266 00:11:27,800 --> 00:11:32,430 Nenhum de vocês pode puxar para cima este específico página em seus laptops agora, 267 00:11:32,430 --> 00:11:34,910 mesmo dentro de seu aparelho via que URL, 268 00:11:34,910 --> 00:11:40,130 porque file: // indica que é, na verdade, no meu sistema de arquivos, o meu disco rígido, 269 00:11:40,130 --> 00:11:40,990 não o seu. 270 00:11:40,990 --> 00:11:42,440 Então isso não é tudo o que útil. 271 00:11:42,440 --> 00:11:44,940 >> Vamos agora avançar para usando um servidor web real. 272 00:11:44,940 --> 00:11:48,309 E acontece que o CS50 Appliance é mais do que apenas um ambiente onde 273 00:11:48,309 --> 00:11:51,100 você pode escrever código C e compilar e executá-lo como se você estivesse fazendo. 274 00:11:51,100 --> 00:11:55,500 Também tem sido configurado pela equipe para representar um típico web 275 00:11:55,500 --> 00:11:58,290 servidor que está na internet, um que você pode pagar por 276 00:11:58,290 --> 00:12:00,210 ou um que está na chamada nuvem. 277 00:12:00,210 --> 00:12:02,600 >> E ele está correndo padrão livre de código aberto 278 00:12:02,600 --> 00:12:06,160 software, por exemplo, algo chamado de Apache, que é talvez 279 00:12:06,160 --> 00:12:08,700 ainda o mais popular da web software de servidor no mundo 280 00:12:08,700 --> 00:12:11,030 que milhares de sites usam hoje. 281 00:12:11,030 --> 00:12:13,420 E, ele também tem ainda software como o MySQL, 282 00:12:13,420 --> 00:12:16,240 que é um servidor de banco de dados que vai finalmente chegar a, 283 00:12:16,240 --> 00:12:18,330 que é só para dizer Eu posso começar a tratar 284 00:12:18,330 --> 00:12:22,040 meu aparelho como um servidor de pleno direito que eu não estou pagando para outro lugar. 285 00:12:22,040 --> 00:12:25,980 Ela só vive em meu próprio laptop para fins de desenvolvimento e de conveniência. 286 00:12:25,980 --> 00:12:27,870 >> Então, vamos em frente e tirar proveito desta. 287 00:12:27,870 --> 00:12:30,120 Eu estou indo para ir em frente e abrir uma janela de terminal. 288 00:12:30,120 --> 00:12:33,030 E eu estou indo para ir em frente e move-- na verdade, primeiro eu sou 289 00:12:33,030 --> 00:12:34,860 indo para navegar para a área de trabalho. 290 00:12:34,860 --> 00:12:36,400 Se eu fizer ls, há hello.html. 291 00:12:36,400 --> 00:12:37,022 292 00:12:37,022 --> 00:12:38,730 E eu estou indo para ir em frente e começar a usar 293 00:12:38,730 --> 00:12:40,800 um novo diretório temos não utilizado antes de hoje. 294 00:12:40,800 --> 00:12:46,840 >> hello.html-- Vou mover para ../vhosts para hosts-- virtual 295 00:12:46,840 --> 00:12:50,940 mais sobre isso no future-- e depois em um diretório chamado localhost, 296 00:12:50,940 --> 00:12:54,420 que é o apelido dado a quase qualquer computador, seja ele um Mac, PC, 297 00:12:54,420 --> 00:12:57,560 ou Linux, e em seguida especificamente em um diretório que nós, 298 00:12:57,560 --> 00:13:01,260 o pessoal já criado para você quando você baixou o aparelho chamado 299 00:13:01,260 --> 00:13:01,760 público. 300 00:13:01,760 --> 00:13:04,551 E, como o próprio nome sugere, nada Eu coloquei nesta pasta, em teoria, 301 00:13:04,551 --> 00:13:07,790 vai ser agora público, pelo menos para as pessoas 302 00:13:07,790 --> 00:13:10,030 que têm uma relação directa conexão com o meu computador. 303 00:13:10,030 --> 00:13:13,160 >> Então, agora deixe-me ir em frente e fazer cd para esse mesmo diretório 304 00:13:13,160 --> 00:13:15,490 para que eu possa ver o que está acontecendo e digite ls. 305 00:13:15,490 --> 00:13:17,630 E, de fato, essa é a única coisa lá dentro. 306 00:13:17,630 --> 00:13:23,250 Eu afirmo agora que porque eu ter colocado este arquivar hello.html dentro de um diretório 307 00:13:23,250 --> 00:13:26,940 chamado dentro de um diretório público chamado localhost dentro de um diretório 308 00:13:26,940 --> 00:13:29,810 vhosts chamados, que graças ao pessoal CS50 309 00:13:29,810 --> 00:13:34,390 foi pré-configurado para ser a raiz do seu servidor web, 310 00:13:34,390 --> 00:13:36,900 Eu posso agora espero fazer isso. 311 00:13:36,900 --> 00:13:38,390 >> Vou abrir uma nova aba. 312 00:13:38,390 --> 00:13:40,090 E eu estou indo para ir para não file: //. 313 00:13:40,090 --> 00:13:44,520 Eu vou usar real http / localhost, que 314 00:13:44,520 --> 00:13:47,470 mais uma vez, é o apelido para o meu próprio servidor. 315 00:13:47,470 --> 00:13:51,085 E então eu estou indo para ir para o nome do arquivo, só para ficar claro? 316 00:13:51,085 --> 00:13:52,680 317 00:13:52,680 --> 00:13:54,320 Onde está esta história, provavelmente, vai? 318 00:13:54,320 --> 00:13:56,066 319 00:13:56,066 --> 00:13:56,565 hello.html. 320 00:13:56,565 --> 00:13:58,350 321 00:13:58,350 --> 00:14:04,270 >> Portanto, em outras palavras, eu quero agora esta é o meu próprio computador, o meu próprio aparelho, 322 00:14:04,270 --> 00:14:05,660 como se fosse um servidor real. 323 00:14:05,660 --> 00:14:07,490 Seu apelido é localhost. 324 00:14:07,490 --> 00:14:10,210 Mas pense como localhost como Facebook.com google.com, o que for. 325 00:14:10,210 --> 00:14:11,600 É apenas o meu nome local. 326 00:14:11,600 --> 00:14:14,810 E, em seguida, a final que eu quero é no raiz do disco rígido, por assim dizer, 327 00:14:14,810 --> 00:14:17,729 ou a raiz do servidor web, ergo a barra e, em seguida, 328 00:14:17,729 --> 00:14:18,770 o hello.html nome do arquivo. 329 00:14:18,770 --> 00:14:19,880 330 00:14:19,880 --> 00:14:21,930 >> Deixe-me zoom e pressione Enter. 331 00:14:21,930 --> 00:14:24,266 E, de fato, existe agora a minha página web. 332 00:14:24,266 --> 00:14:25,390 Por isso, é um pouco diferente. 333 00:14:25,390 --> 00:14:26,880 E é tão assombroso. 334 00:14:26,880 --> 00:14:27,904 Esta é a versão antiga. 335 00:14:27,904 --> 00:14:29,070 Deixe-me encolher a fonte de volta. 336 00:14:29,070 --> 00:14:29,745 Este é o velho. 337 00:14:29,745 --> 00:14:30,890 Este é o novo. 338 00:14:30,890 --> 00:14:35,430 Mas o que está acontecendo fundamentalmente agora é que HTTP está sendo usado. 339 00:14:35,430 --> 00:14:39,344 >> Vamos fazer isso um pouco mais claro, ou, se você quiser, um pouco mais complicado. 340 00:14:39,344 --> 00:14:41,760 Deixe-me ir para o canto inferior direito canto do meu aparelho. 341 00:14:41,760 --> 00:14:44,000 E perceber que tudo isso tempo, tem havido um número. 342 00:14:44,000 --> 00:14:47,330 Esse é o endereço único do seu aparelho CS50. 343 00:14:47,330 --> 00:14:50,800 É um endereço privado, como implica a 172,16, 344 00:14:50,800 --> 00:14:53,860 que apenas significa que só você fisicamente pode acessar este servidor web. 345 00:14:53,860 --> 00:14:56,340 Tudo passa pelo firewall e bem protegido contra o resto 346 00:14:56,340 --> 00:14:58,130 do mundo por causa desta abordagem. 347 00:14:58,130 --> 00:15:01,920 >> E agora percebe que se eu for para Neste endereço, não no meu aparelho, 348 00:15:01,920 --> 00:15:04,340 mas no Mac OS-- eu vou para voltar para cá. 349 00:15:04,340 --> 00:15:05,930 Este é o meu Mac agora. 350 00:15:05,930 --> 00:15:08,460 E agora eu vou abrir esta versão do Chrome aqui. 351 00:15:08,460 --> 00:15:17,370 E eu estou indo para ir para http: //172.16.25 / E eu esqueço o rest-- 133. 352 00:15:17,370 --> 00:15:25,210 >> Então eu vou te visitar de meu Mac que o endereço IP /hello.html Enter. 353 00:15:25,210 --> 00:15:29,850 E agora eu vejo do meu Mac que o meu CS50 Appliance, que é 354 00:15:29,850 --> 00:15:32,600 Endereço IP é que número, é de fato se comportando 355 00:15:32,600 --> 00:15:34,320 como um servidor web na internet. 356 00:15:34,320 --> 00:15:36,944 Ele não tem um bom fácil se lembrar do nome como Facebook.com, 357 00:15:36,944 --> 00:15:40,370 mas ele está usando HTTP aparentemente, embora Chrome 358 00:15:40,370 --> 00:15:43,560 é uma espécie de simplificação do mundo para nós, mas não nos mostrando HTTP. 359 00:15:43,560 --> 00:15:46,210 Mas esta é realmente exatamente isso. 360 00:15:46,210 --> 00:15:48,470 Chrome é apenas poupar algum teclas digitadas nos dias de hoje. 361 00:15:48,470 --> 00:15:50,530 E é isso que vemos agora. 362 00:15:50,530 --> 00:15:51,890 >> Então, isso é muito bom e correto. 363 00:15:51,890 --> 00:15:53,740 Mas é uma página muito abaixo do esperado. 364 00:15:53,740 --> 00:15:56,230 Deixe-me entrar e fazer alguma coisa um pouco diferente agora. 365 00:15:56,230 --> 00:15:57,910 Então deixe-me voltar para gedit. 366 00:15:57,910 --> 00:16:00,580 E em vez de Olá, mundo, vamos colocar uma imagem. 367 00:16:00,580 --> 00:16:05,880 E eu reclamada antes-- deixe-me ir para o meu público diretório localhost. 368 00:16:05,880 --> 00:16:10,580 E deixe-me ir em frente e copiar um todo monte de arquivos a partir de hoje 369 00:16:10,580 --> 00:16:15,633 da minha pasta Dropbox em aqui. 370 00:16:15,633 --> 00:16:19,470 371 00:16:19,470 --> 00:16:21,680 >> Agora, se eu digitar ls, olhar em todos esses arquivos 372 00:16:21,680 --> 00:16:24,940 que eu tenha distribuído pelo site do curso com antecedência de hoje, 373 00:16:24,940 --> 00:16:26,830 uma das quais é ainda hello.html. 374 00:16:26,830 --> 00:16:27,830 Portanto, não há que um. 375 00:16:27,830 --> 00:16:30,730 E recordar este bobo do último cat.jpg tempo--. 376 00:16:30,730 --> 00:16:34,550 Então deixe-me tentar incorporar cat.jpg dentro da minha página web. 377 00:16:34,550 --> 00:16:37,690 >> Eu estou indo para ir em frente e fazer cat.jpg, salvar. 378 00:16:37,690 --> 00:16:38,950 Deixe-me voltar para o Chrome. 379 00:16:38,950 --> 00:16:41,140 E deixe-me ampliar o fonte e agora recarregar. 380 00:16:41,140 --> 00:16:43,090 381 00:16:43,090 --> 00:16:45,030 Opa, onde eu coloco isso? 382 00:16:45,030 --> 00:16:48,210 383 00:16:48,210 --> 00:16:51,520 Standby-- eu ainda tenho o velho versão da minha aberto desktop. 384 00:16:51,520 --> 00:16:56,020 Então deixe-me ir para o meu vhost, meu localhost, o meu público, e hello.html. 385 00:16:56,020 --> 00:16:57,320 386 00:16:57,320 --> 00:17:00,670 Então, agora deixe-me ir em frente e dizem cat.jpg interior do corpo 387 00:17:00,670 --> 00:17:02,830 onde eu quero que ele seja exibido e recarregar. 388 00:17:02,830 --> 00:17:04,560 Claro, isso não é correto. 389 00:17:04,560 --> 00:17:08,050 >> Então eu preciso dizer ao navegador um pouco mais deliberadamente o que eu quero que ele faça. 390 00:17:08,050 --> 00:17:10,210 Basta digitar o nome é obviamente não é suficiente. 391 00:17:10,210 --> 00:17:15,134 Então lembro que havia uma outra tag, imagem, img para breve. 392 00:17:15,134 --> 00:17:17,550 Isso é só porque os seres humanos não gosto das palavras cheias de tipos. 393 00:17:17,550 --> 00:17:19,050 E então o que podemos fazer source = "cat.jpg". 394 00:17:19,050 --> 00:17:21,470 395 00:17:21,470 --> 00:17:23,550 >> E agora eu vou fazer uma coisa diferente aqui. 396 00:17:23,550 --> 00:17:25,390 Apesar de todos nossas marcas, até agora, tem 397 00:17:25,390 --> 00:17:28,086 tinha essa noção de um tag de início e uma tag final, 398 00:17:28,086 --> 00:17:30,210 que realmente não faz sentido de uma imagem, certo? 399 00:17:30,210 --> 00:17:32,430 Uma imagem pode existir ou não existe. 400 00:17:32,430 --> 00:17:36,650 E assim os seres humanos têm vindo com uma convenção simples. 401 00:17:36,650 --> 00:17:40,310 Quando você tem uma marca que pode tanto começar e terminar no mesmo tempo-- 402 00:17:40,310 --> 00:17:43,790 ele pode estar vazia, então a speak-- apenas colocar a barra dentro da tag 403 00:17:43,790 --> 00:17:44,710 no final. 404 00:17:44,710 --> 00:17:45,776 405 00:17:45,776 --> 00:17:47,150 Agora deixe-me voltar para o meu browser. 406 00:17:47,150 --> 00:17:50,377 Hit Reload Porra, alguma coisa está errada. 407 00:17:50,377 --> 00:17:52,460 Você provavelmente já viu isso ocasionalmente na web, 408 00:17:52,460 --> 00:17:53,600 mesmo que não foi sua culpa. 409 00:17:53,600 --> 00:17:54,766 É culpa do servidor web. 410 00:17:54,766 --> 00:17:56,240 O que odes este parece indicar? 411 00:17:56,240 --> 00:17:57,450 412 00:17:57,450 --> 00:17:58,009 É quebrado. 413 00:17:58,009 --> 00:17:59,300 É aí que a imagem pertence. 414 00:17:59,300 --> 00:17:59,700 Sim? 415 00:17:59,700 --> 00:18:01,560 >> AUDIÊNCIA: Mas isso não acontece ter acesso à imagem. 416 00:18:01,560 --> 00:18:03,070 >> DAVID J MALAN: Não faz ter acesso à imagem. 417 00:18:03,070 --> 00:18:05,230 Isso, ou, pior ainda, talvez ele nem sequer existe. 418 00:18:05,230 --> 00:18:06,729 Vamos ver se não podemos diagnosticar isso. 419 00:18:06,729 --> 00:18:09,390 Lembre-se da última vez que se no Chrome, no aparelho, 420 00:18:09,390 --> 00:18:11,870 ou até mesmo no seu Mac ou PC, você vai para o menu desenvolvedor 421 00:18:11,870 --> 00:18:14,650 e ir para as Ferramentas de Desenvolvimento opção, que, provavelmente, você tem 422 00:18:14,650 --> 00:18:16,850 não muito usado ou nunca. 423 00:18:16,850 --> 00:18:20,780 E se eu for fazer uma rede e recarregue a página, 424 00:18:20,780 --> 00:18:24,110 vamos realmente olhar para o HTTP solicitações que estão sendo feitas. 425 00:18:24,110 --> 00:18:28,400 >> Parece que é hello.html OK, na verdade, daqui a 200. 426 00:18:28,400 --> 00:18:30,630 Mas é um cat.jpg 403. 427 00:18:30,630 --> 00:18:31,650 Portanto, não é um 404. 428 00:18:31,650 --> 00:18:33,490 Ficheiro provavelmente existe. 429 00:18:33,490 --> 00:18:35,250 403 significa proibido. 430 00:18:35,250 --> 00:18:37,790 Então, isso é um pouco confuso. 431 00:18:37,790 --> 00:18:42,340 Eu vou voltar a minha janela de terminal. 432 00:18:42,340 --> 00:18:43,700 Deixe-me aproximar-se aqui. 433 00:18:43,700 --> 00:18:44,750 E deixe-me fazer um ls. 434 00:18:44,750 --> 00:18:46,430 Há esses mesmos arquivos. 435 00:18:46,430 --> 00:18:49,410 >> Agora deixe-me fazer um ls-l, que você provavelmente 436 00:18:49,410 --> 00:18:53,350 utilizado antes de olhar para arquivo tamanhos talvez ou timestamps. 437 00:18:53,350 --> 00:18:55,590 E vemos um monte de informações esmagadora. 438 00:18:55,590 --> 00:18:57,040 Mas observe alguns detalhes. 439 00:18:57,040 --> 00:19:01,660 Aqui está hello.html neste remar aqui e aqui está cat.jpg. 440 00:19:01,660 --> 00:19:02,934 441 00:19:02,934 --> 00:19:05,850 E isso é apenas o aparelho sendo user friendly, destacando JPEG 442 00:19:05,850 --> 00:19:07,380 em roxo como este. 443 00:19:07,380 --> 00:19:11,470 Mas o que mais é diferente ao lado o tamanho do arquivo eo nome do arquivo? 444 00:19:11,470 --> 00:19:13,438 445 00:19:13,438 --> 00:19:14,754 >> AUDIÊNCIA: [inaudível]. 446 00:19:14,754 --> 00:19:16,920 DAVID J MALAN: Sim, não há dois a mais do até aqui R. 447 00:19:16,920 --> 00:19:20,170 Observe o que tem hello.html acontecendo. 448 00:19:20,170 --> 00:19:24,050 Assim, verifica-se que o nome de esse público diretório é importante. 449 00:19:24,050 --> 00:19:26,400 Qualquer coisa neste diretório pretende ser público. 450 00:19:26,400 --> 00:19:28,790 Mas não é suficiente só para soltar os arquivos lá. 451 00:19:28,790 --> 00:19:31,480 Você também precisa mudar o modo de os arquivos, 452 00:19:31,480 --> 00:19:35,180 alterar as permissões de o arquivo de forma pró-ativa não 453 00:19:35,180 --> 00:19:37,650 ser a configuração padrão, o que é que só posso ler 454 00:19:37,650 --> 00:19:39,220 e escrevê-lo, eu sendo o proprietário. 455 00:19:39,220 --> 00:19:43,540 Eu quero todo o mundo para todo mundo ser capaz de ler o meu arquivo, por assim dizer. 456 00:19:43,540 --> 00:19:44,950 Leia significa apenas visualizá-lo. 457 00:19:44,950 --> 00:19:49,780 >> E, de fato, como você verá no problema definir sete, que é o que significam estas de R. 458 00:19:49,780 --> 00:19:53,160 Média Estes dois de R deixar todo mundo o resto do mundo também lê-lo, 459 00:19:53,160 --> 00:19:55,300 especialmente agora que é neste diretório. 460 00:19:55,300 --> 00:19:59,620 Assim, a maneira mais simples de corrigir isso é ir para a minha rápida e fazer chmod para a mudança 461 00:19:59,620 --> 00:20:05,580 modo e, em seguida, fazer a + r, em conjunto, todos, todos, mais r para leitura, 462 00:20:05,580 --> 00:20:07,944 e depois cat.jpg Enter. 463 00:20:07,944 --> 00:20:10,360 Nada parece acontecer, o que normalmente significa uma coisa boa. 464 00:20:10,360 --> 00:20:13,850 Então ls-l novamente-- agora vamos olhar para cat.jpg. 465 00:20:13,850 --> 00:20:15,750 E essa permissão parecem ter mudado. 466 00:20:15,750 --> 00:20:18,670 Como um aparte, se você fizer uma erro e você, por exemplo, 467 00:20:18,670 --> 00:20:23,210 só fez your-- Eu não sabe-- ensaio acessível ao público por acidente, 468 00:20:23,210 --> 00:20:25,480 você pode fazer o oposto, chmod a-r. 469 00:20:25,480 --> 00:20:25,909 470 00:20:25,909 --> 00:20:28,200 Embora, francamente, não deveria estar no diretório público 471 00:20:28,200 --> 00:20:29,760 de qualquer maneira, se essa é a preocupação. 472 00:20:29,760 --> 00:20:32,475 >> Então agora vamos voltar para meu navegador e reload. 473 00:20:32,475 --> 00:20:32,904 474 00:20:32,904 --> 00:20:34,820 E eu vou clique o pequeno Ghostbusters 475 00:20:34,820 --> 00:20:38,030 símbolo para limpar a parte do tela para que possamos ver novas solicitações. 476 00:20:38,030 --> 00:20:40,630 E, de fato, é aqui Cat Grump de antes. 477 00:20:40,630 --> 00:20:43,010 Mas, mais importante, tecnicamente, não há 478 00:20:43,010 --> 00:20:45,565 o número 200, que significa que chegamos OK. 479 00:20:45,565 --> 00:20:47,190 Tudo bem, o que é muito bom e correto. 480 00:20:47,190 --> 00:20:48,940 Mas nós não estamos fazendo o melhor de websites, 481 00:20:48,940 --> 00:20:51,967 nem vamos tentar demasiado duro para tornar o mais extravagante dos sites hoje. 482 00:20:51,967 --> 00:20:54,550 Mas vamos pelo menos fazer algo Super familiarizado antes de chocalho 483 00:20:54,550 --> 00:20:56,030 fora algumas outras tags. 484 00:20:56,030 --> 00:20:58,470 Então suponho que eu não quero apenas um gato aqui. 485 00:20:58,470 --> 00:21:02,530 Suponha que eu realmente quero que isso gato para conectar-se a alguma coisa. 486 00:21:02,530 --> 00:21:07,210 >> Eu poderia, por exemplo, fazer algo assim. 487 00:21:07,210 --> 00:21:08,580 488 00:21:08,580 --> 00:21:12,890 uma para href âncora para hiper equals-- referência 489 00:21:12,890 --> 00:21:17,440 e vamos fazer alguma coisa como www.google.com perto 490 00:21:17,440 --> 00:21:19,540 citar próximo suporte. 491 00:21:19,540 --> 00:21:22,000 E agora procurar gatos. 492 00:21:22,000 --> 00:21:23,520 Fechar âncora tag. 493 00:21:23,520 --> 00:21:26,760 Portanto, este tem apenas um tipo de fundamentalmente novo detalhe. 494 00:21:26,760 --> 00:21:28,190 A etiqueta é claro, é diferente. 495 00:21:28,190 --> 00:21:31,770 É o nome de uma âncora para referência href ou hiper. 496 00:21:31,770 --> 00:21:35,269 >> Mas, mais importante, não há esta função sintática aqui. 497 00:21:35,269 --> 00:21:37,810 Isto é o que nós vamos começar a chamar não uma marca, mas um atributo. 498 00:21:37,810 --> 00:21:40,830 E um atributo é algo que modifica o comportamento de uma etiqueta. 499 00:21:40,830 --> 00:21:45,400 E esse atributo, href, meios modificar o comportamento desta âncora 500 00:21:45,400 --> 00:21:48,430 para que, quando ele for clicado, ele vai para este URL aqui. 501 00:21:48,430 --> 00:21:50,330 E, claro, que URL é o Google. 502 00:21:50,330 --> 00:21:53,951 >> Enquanto isso, o que é isso texto aqui vai ser? 503 00:21:53,951 --> 00:21:55,950 Bem, isso vai ser que o ser humano realmente 504 00:21:55,950 --> 00:21:58,470 vê como o sublinhado link, tão simples como isso. 505 00:21:58,470 --> 00:21:59,220 Então, vamos tentar isso. 506 00:21:59,220 --> 00:21:59,980 Deixe-me salvá-lo. 507 00:21:59,980 --> 00:22:01,650 Eu ainda estou em hello.html. 508 00:22:01,650 --> 00:22:05,360 Mas, nas versões on-line, você verá os nomes de arquivos reais que pré-preparados. 509 00:22:05,360 --> 00:22:06,805 Deixe-me ir em frente e recarregar. 510 00:22:06,805 --> 00:22:08,680 E agora é muito página decepcionante ainda. 511 00:22:08,680 --> 00:22:10,910 Mas se eu passar o mouse sobre há-- e é um pouco pequeno, 512 00:22:10,910 --> 00:22:13,576 mas- você pode ver na parte inferior canto esquerdo da tela, 513 00:22:13,576 --> 00:22:15,242 ele é de fato indo para google.com. 514 00:22:15,242 --> 00:22:19,280 E se eu clicar em que, será bata me caminho para a real Google. 515 00:22:19,280 --> 00:22:22,610 >> Mas note aqui uma oportunidade para exploração, assim como um aparte. 516 00:22:22,610 --> 00:22:25,150 E nós vamos voltar para outra questões de segurança antes do tempo. 517 00:22:25,150 --> 00:22:29,290 Porque não há essa dicotomia entre onde você vai eo que você diz, 518 00:22:29,290 --> 00:22:34,722 você poderia fazer algo assim isto-- http://www.google.com. 519 00:22:34,722 --> 00:22:37,134 OK, e agora se eu recarregar depois de salvar essa página, 520 00:22:37,134 --> 00:22:38,800 parece que eu estou indo para ir para o Google. 521 00:22:38,800 --> 00:22:40,966 Mas não há nenhuma razão que eu tem que ir ao Google, certo? 522 00:22:40,966 --> 00:22:47,460 Eu poderia realmente ir para algo como badguy.com, recarregue a página aqui. 523 00:22:47,460 --> 00:22:49,750 E notem, ele ainda se parece com o Google. 524 00:22:49,750 --> 00:22:52,020 E só se eu estiver afiada o suficiente para passar o mouse sobre aqui 525 00:22:52,020 --> 00:22:54,770 vejo que está mesmo indo para ir para um local diferente. 526 00:22:54,770 --> 00:22:57,400 >> Então, se você já ganhou um e-mail, especialmente 527 00:22:57,400 --> 00:22:59,610 um do Paypal, ou aparentemente do Paypal 528 00:22:59,610 --> 00:23:01,830 pedindo que você faça login para a sua conta, este 529 00:23:01,830 --> 00:23:06,380 É por isso que você nunca deve nunca clicar em links em e-mails, 530 00:23:06,380 --> 00:23:07,930 francamente, todos os links em e-mails. 531 00:23:07,930 --> 00:23:10,380 Se você sabe que tem real dinheiro no Paypal ou Banco 532 00:23:10,380 --> 00:23:14,250 da América ou Fidelity ou em qualquer site, digite-o manualmente no. 533 00:23:14,250 --> 00:23:17,530 Porque veja como é fácil enganar alguém para apresentar o que 534 00:23:17,530 --> 00:23:18,526 se parece com um link. 535 00:23:18,526 --> 00:23:20,400 Mas, na verdade, poderia ir absolutamente em qualquer lugar. 536 00:23:20,400 --> 00:23:23,301 >> E há muito mais ameaças do que isso. 537 00:23:23,301 --> 00:23:25,300 Na verdade, isso é um pouco de uma tangente agora, mas uma 538 00:23:25,300 --> 00:23:28,430 dos melhores que eu já vi que já foi fechado, 539 00:23:28,430 --> 00:23:34,060 é alguém levou as pessoas a-- então isso pode dizer, 540 00:23:34,060 --> 00:23:37,660 clique aqui para fazer login em sua conta, uma conta bancária. 541 00:23:37,660 --> 00:23:40,985 E este foi o banco do oeste. 542 00:23:40,985 --> 00:23:43,030 543 00:23:43,030 --> 00:23:44,250 >> Então, alguém comprou isso. 544 00:23:44,250 --> 00:23:47,090 E é um pouco mais fácil de ver lo em uma fonte mono espaçadas ampliada 545 00:23:47,090 --> 00:23:49,190 no em um projetor de 30 pés. 546 00:23:49,190 --> 00:23:51,720 Mas quando é pequena fonte em um e-mail que você está recebendo, 547 00:23:51,720 --> 00:23:54,690 isto parece bankofthewest.com, não bankofthevvest.com, 548 00:23:54,690 --> 00:23:58,230 que alguém tinha pago US $ 10 para comprar. 549 00:23:58,230 --> 00:24:00,840 E então, o que levou-os para o equivalente a algum site mal. 550 00:24:00,840 --> 00:24:05,540 >> E você vai ver demasiado-- realmente podemos fazer isto-- se eu ir para o site real, 551 00:24:05,540 --> 00:24:10,335 bankofthewest.com, novamente, recordação da última vez 552 00:24:10,335 --> 00:24:13,210 que, se esta é a sua página web e você está curioso para saber como ele funciona, 553 00:24:13,210 --> 00:24:15,610 certamente você pode ir para Ferramentas de desenvolvedor do Chrome. 554 00:24:15,610 --> 00:24:18,890 E você pode ver toda a HTML bem formatado lá. 555 00:24:18,890 --> 00:24:20,890 >> Mas, mais ao ponto, você cam-- vamos fechar 556 00:24:20,890 --> 00:24:24,760 isto-- você pode ir para Visualizar Desenvolvedor View Source. 557 00:24:24,760 --> 00:24:25,770 558 00:24:25,770 --> 00:24:28,350 Por que não posso simplesmente copiar tudo isso e então eu 559 00:24:28,350 --> 00:24:31,630 pode entrar em minha janela pouco gedit aqui e fazer minha própria página web. 560 00:24:31,630 --> 00:24:33,210 Salve esta em hello.html. 561 00:24:33,210 --> 00:24:36,770 E, provavelmente, isso vai quebrar, porque não é tão fácil normalmente. 562 00:24:36,770 --> 00:24:41,590 Mas agora, se eu recarregar minha própria página no minha própria CS50 Appliance e recarga bater, 563 00:24:41,590 --> 00:24:42,990 OK, algumas coisas quebrou. 564 00:24:42,990 --> 00:24:45,750 Mas eu estou muito perto de ter o meu próprio site bancário, certo? 565 00:24:45,750 --> 00:24:46,570 Tudo isto HTML-- 566 00:24:46,570 --> 00:24:47,370 >> [Risos] 567 00:24:47,370 --> 00:24:49,210 >> DAVID J MALAN: --Eu não actually-- e você 568 00:24:49,210 --> 00:24:52,210 sei que há alguém lá fora que seria, na verdade, clique nestes links também. 569 00:24:52,210 --> 00:24:54,864 Então, claramente, algumas coisas quebrou. 570 00:24:54,864 --> 00:24:56,780 Mas isso vai levar nos a uma discussão, 571 00:24:56,780 --> 00:25:00,810 desnecessariamente agora, quanto ao que CSS, folhas de estilo em cascata, são, 572 00:25:00,810 --> 00:25:03,410 e como você realmente baixar outros arquivos HTML 573 00:25:03,410 --> 00:25:06,140 e JPEG arquivos GIF que o site pode estar usando. 574 00:25:06,140 --> 00:25:07,960 Mas tudo isso é realizável. 575 00:25:07,960 --> 00:25:11,110 Mas realmente se resume a estes heurística muito simples. 576 00:25:11,110 --> 00:25:14,450 >> Então, agora vamos percorrer um par de outros exemplos de HTML 577 00:25:14,450 --> 00:25:16,680 só para lhe dar um sentido o que mais você pode fazer. 578 00:25:16,680 --> 00:25:18,670 Por exemplo, este é list.html. 579 00:25:18,670 --> 00:25:23,240 Suponha que eu queria fazer uma página da Web com uma lista de casas no quad. 580 00:25:23,240 --> 00:25:28,960 Eu poderia usar a tag ul para não ordenada lista e, em seguida, a criança item da lista 581 00:25:28,960 --> 00:25:33,760 e depois iterar over-- ou lista, rather-- as casas em questão. 582 00:25:33,760 --> 00:25:36,080 >> E se eu abrir isto, vamos fazer isso. 583 00:25:36,080 --> 00:25:40,670 Vamos não hello.html, mas para list.html. 584 00:25:40,670 --> 00:25:42,160 Caramba. 585 00:25:42,160 --> 00:25:43,000 Como faço para corrigir isso? 586 00:25:43,000 --> 00:25:45,679 587 00:25:45,679 --> 00:25:47,220 É o mesmo problema de antes, certo? 588 00:25:47,220 --> 00:25:52,510 Então deixe-me fazer oops-- chmod-- chmod a + r de list.html. 589 00:25:52,510 --> 00:25:54,610 590 00:25:54,610 --> 00:25:59,610 E agora, se eu voltar para o meu navegador e clique em Recarregar, lá está ele. 591 00:25:59,610 --> 00:26:02,360 Então, se você sempre quis fazer uma lista com marcadores, você pode fazer isso. 592 00:26:02,360 --> 00:26:06,210 Se você quer ser super chique e fazer uma lista ordenada, não uma lista não ordenada, 593 00:26:06,210 --> 00:26:10,170 mudar aqueles para ol, recarregue a página e Agora o navegador irá numerar isso por você. 594 00:26:10,170 --> 00:26:11,241 >> O que mais podemos fazer? 595 00:26:11,241 --> 00:26:13,990 Bem, um par de outros- se você tem longos parágrafos de texto-- 596 00:26:13,990 --> 00:26:15,698 por exemplo, alguns Texto em latim como isto-- 597 00:26:15,698 --> 00:26:20,730 e você quer que em alíneas separadas, aberto p, p perto da marca de parágrafo. 598 00:26:20,730 --> 00:26:22,010 E fazê-lo novamente e novamente. 599 00:26:22,010 --> 00:26:26,600 E se eu agora abrir este arquivo, paragraphs.html, bem, este 600 00:26:26,600 --> 00:26:27,570 está ficando chato. 601 00:26:27,570 --> 00:26:34,320 Então, agora vamos voltar para o meu alerta, chmod a r r estrelas + .html-- 602 00:26:34,320 --> 00:26:36,099 um bom curinga pouco por assim dizer. 603 00:26:36,099 --> 00:26:37,890 Deve corrigir todos estes problemas para mim. 604 00:26:37,890 --> 00:26:38,990 Vamos recarregar. 605 00:26:38,990 --> 00:26:40,500 Há três parágrafos. 606 00:26:40,500 --> 00:26:42,930 >> E agora vamos em frente e abrir um outro. 607 00:26:42,930 --> 00:26:44,310 Como sobre a mesa? 608 00:26:44,310 --> 00:26:46,440 Você vai notar olhares de mesa um pouco mais complexo. 609 00:26:46,440 --> 00:26:49,110 Mas é o mesmo idea-- tag aberta, tag aberta, 610 00:26:49,110 --> 00:26:51,360 aberto, aberto, aberto, perto tag, tag aberta. 611 00:26:51,360 --> 00:26:54,410 E estes acontecem em repouso por tabela, cuja fronteira é aparentemente 612 00:26:54,410 --> 00:26:58,500 vai ser uma espessura 1-- o que quer que linha da tabela means--, mesa 613 00:26:58,500 --> 00:27:00,320 dados, o que significa uma célula. 614 00:27:00,320 --> 00:27:03,840 E se eu voltar para o meu navegador aqui e ir para table.html, 615 00:27:03,840 --> 00:27:05,840 você pode ver algo assim, hediondo. 616 00:27:05,840 --> 00:27:07,840 Mas nós vamos chegar ao ponto onde podemos realmente 617 00:27:07,840 --> 00:27:09,260 tornar as coisas mais bonitas do que isso. 618 00:27:09,260 --> 00:27:10,530 >> Então deixe-me estipular por enquanto. 619 00:27:10,530 --> 00:27:11,870 Há grupos de mais tags. 620 00:27:11,870 --> 00:27:15,225 E HTML é maravilhoso para pegar porque, francamente, tudo o que você precisa fazer 621 00:27:15,225 --> 00:27:17,600 é olhar para as páginas da web existentes com o qual você está familiarizado. 622 00:27:17,600 --> 00:27:20,340 E você é como, oh, é assim que eles fizeram isso esteticamente. 623 00:27:20,340 --> 00:27:23,159 >> Ou você pode procurar qualquer linha de recursos a respeito de como funciona HTML, 624 00:27:23,159 --> 00:27:25,700 e você verá que há uma todo o vocabulário de outras tags. 625 00:27:25,700 --> 00:27:30,110 Mas com o modelo mental simples só que quase qualquer marca que você abrir 626 00:27:30,110 --> 00:27:33,620 tem de ser fechado, ele realmente é suficiente para ensinar a si mesmo 627 00:27:33,620 --> 00:27:36,950 HTML depois de entender estas idéias básicas de marcas 628 00:27:36,950 --> 00:27:40,520 e atributos ea boa formação que nós já conversamos sobre, 629 00:27:40,520 --> 00:27:44,697 nada de fechar para que possamos abrir para que não confunda um browser. 630 00:27:44,697 --> 00:27:46,780 Então, vamos agora dar isso para um nível mais interessante 631 00:27:46,780 --> 00:27:48,100 indo para o real. 632 00:27:48,100 --> 00:27:51,095 E vamos para o meu Mac aqui, para google.com. 633 00:27:51,095 --> 00:27:52,280 634 00:27:52,280 --> 00:27:54,020 E agora notice-- vamos fazer isso. 635 00:27:54,020 --> 00:27:57,280 Estou gongo para ir para Configurações, Configurações de pesquisa. 636 00:27:57,280 --> 00:28:01,070 Quero desativar esse instante irritante Resultados coisa onde se imediatamente 637 00:28:01,070 --> 00:28:02,450 começa respondendo a sua digitação. 638 00:28:02,450 --> 00:28:05,300 Vamos fazer isso de modo mais velha escola nós realmente ver o que está acontecendo. 639 00:28:05,300 --> 00:28:08,260 >> Então, eu estou indo para salvar a minha Configurações do Google aqui. 640 00:28:08,260 --> 00:28:11,160 E agora notice-- eu vou procurar algo como gatos. 641 00:28:11,160 --> 00:28:14,500 E ele ainda está fazendo auto completa aqui, mas com base em coisas 642 00:28:14,500 --> 00:28:15,970 pessoas digitou no passado. 643 00:28:15,970 --> 00:28:17,490 Mas observe o que vai acontecer. 644 00:28:17,490 --> 00:28:20,272 >> Na URL no momento é isso, apenas google.com. 645 00:28:20,272 --> 00:28:22,650 E tecnicamente, é barra. 646 00:28:22,650 --> 00:28:25,910 Google acaba de salvar um personagem e não nos que mostrar. 647 00:28:25,910 --> 00:28:30,400 Eles estão nos mostrando https, apenas ser super reconfortante de que estamos 648 00:28:30,400 --> 00:28:32,850 em uma página segura ou criptografados. 649 00:28:32,850 --> 00:28:35,690 >> Então deixe-me ir em frente e procurar gatos. 650 00:28:35,690 --> 00:28:37,670 Agora isso ficou muito esmagadora rapidamente. 651 00:28:37,670 --> 00:28:39,470 Olhe o tamanho desta URL. 652 00:28:39,470 --> 00:28:43,070 Mas verifica-se que a maioria deste material na URL é realmente bastante inútil. 653 00:28:43,070 --> 00:28:45,320 Vou começar a apagar coisas que eu não entendo. 654 00:28:45,320 --> 00:28:46,560 655 00:28:46,560 --> 00:28:47,360 Eu vejo gatos. 656 00:28:47,360 --> 00:28:48,470 Eu entendo gatos. 657 00:28:48,470 --> 00:28:50,380 Eu não sei por que os gatos estão lá novamente. 658 00:28:50,380 --> 00:28:52,620 Eu realmente não sei o que esse absurdo é. 659 00:28:52,620 --> 00:28:56,030 Então, eu estou indo só para manter destacando e exclusão de material 660 00:28:56,030 --> 00:28:59,905 que eu não entendo, destilando o URL em apenas isso. 661 00:28:59,905 --> 00:29:00,920 662 00:29:00,920 --> 00:29:02,270 >> Agora deixe-me se inserir novamente. 663 00:29:02,270 --> 00:29:03,814 Parece que o Google ainda trabalha. 664 00:29:03,814 --> 00:29:06,980 Então, por algum motivo, eles estão adicionando um monte de coisas para por padrão do seu URL. 665 00:29:06,980 --> 00:29:09,000 Mas não é estritamente necessário. 666 00:29:09,000 --> 00:29:10,340 Então, o que é bom sobre isso? 667 00:29:10,340 --> 00:29:13,630 Bem, deixe-me ir em frente e abrir Inspector do Chrome. 668 00:29:13,630 --> 00:29:15,960 Há um pouco de atalho do mouse para isso. 669 00:29:15,960 --> 00:29:17,360 >> Vá até a aba Rede. 670 00:29:17,360 --> 00:29:19,340 E agora deixe-me recarregar desta página mais uma vez. 671 00:29:19,340 --> 00:29:20,280 E eu estou me segurando Shift. 672 00:29:20,280 --> 00:29:22,520 Como um aparte, navegadores tendem a armazenar em cache ou salvar 673 00:29:22,520 --> 00:29:24,697 informações apenas por causa da eficiência. 674 00:29:24,697 --> 00:29:27,280 Mas, normalmente, segurando a tecla Shift e recarga vai obrigar tudo 675 00:29:27,280 --> 00:29:28,994 que começar de novo desde o início. 676 00:29:28,994 --> 00:29:30,410 E é isso que eu quero fazer aqui. 677 00:29:30,410 --> 00:29:33,550 >> E observe todos estes linhas que apenas apareceram. 678 00:29:33,550 --> 00:29:37,920 Acontece que em qualquer web página, pode haver apenas um arquivo 679 00:29:37,920 --> 00:29:43,500 involved-- hello.html-- ou não 52 pode ser, como no presente caso. 680 00:29:43,500 --> 00:29:45,820 Quando eu visitar google.com, Aparentemente, o meu navegador 681 00:29:45,820 --> 00:29:49,650 arranca 52 solicitações HTTP separadas. 682 00:29:49,650 --> 00:29:50,520 Por que é que? 683 00:29:50,520 --> 00:29:53,380 >> Bem, olhe para o que está dentro deste top web page up. 684 00:29:53,380 --> 00:29:55,620 Não há apenas texto, mas não há imagens reais 685 00:29:55,620 --> 00:29:57,130 de gatos mais para a direita. 686 00:29:57,130 --> 00:29:59,110 Há um logotipo colorido aqui em cima à esquerda. 687 00:29:59,110 --> 00:30:01,750 Há todos esses ícones por um microfone e assim por diante. 688 00:30:01,750 --> 00:30:05,130 Há um monte de peças, construindo blocos, peças scratch, se quiserem, 689 00:30:05,130 --> 00:30:06,250 a esta página web. 690 00:30:06,250 --> 00:30:10,310 E o que o navegador está fazendo em cima ficando o primeiro arquivo, que 691 00:30:10,310 --> 00:30:16,180 É esta linha aqui, é essencialmente iteração sobre o topo HTML 692 00:30:16,180 --> 00:30:19,880 para baixo, da esquerda para a direita, procurando coisas como tags de imagem ou de outras marcas 693 00:30:19,880 --> 00:30:23,160 que estão mencionando outros arquivos e quando se vê, vai e busca-los 694 00:30:23,160 --> 00:30:26,050 via HTTP, toda viável metáfora envelope, 695 00:30:26,050 --> 00:30:29,670 e, em seguida, exibe-os na local apropriado na página da web. 696 00:30:29,670 --> 00:30:33,370 >> Mas note aqui se concentrar em os primeiros gatos lance, busca, 697 00:30:33,370 --> 00:30:37,090 perceber que, na verdade, ele está usando HTTP 1.1. 698 00:30:37,090 --> 00:30:41,690 E, infelizmente, o Google Chrome agora na versão 39 699 00:30:41,690 --> 00:30:45,110 é o tipo de coisas emburrecimento e não nos mostrando os cabeçalhos reais. 700 00:30:45,110 --> 00:30:49,680 Mas o que foi de fato enviado é uma solicitação para não cortar, mas / search? q = gatos. 701 00:30:49,680 --> 00:30:52,830 702 00:30:52,830 --> 00:30:54,340 >> Agora, por que isso é importante? 703 00:30:54,340 --> 00:30:57,110 Bem, eu estou indo para inferir daí que se você Google 704 00:30:57,110 --> 00:31:01,520 suporta as consultas deste tipo, por que eu não implementar a minha própria pesquisa 705 00:31:01,520 --> 00:31:06,420 motor para CS50, mas apenas a parte dianteira final, apenas a interface gráfica do usuário. 706 00:31:06,420 --> 00:31:09,610 E nós vamos terceirizar o back-end, a busca real resulta para o Google. 707 00:31:09,610 --> 00:31:10,510 >> Então, como posso fazer isso? 708 00:31:10,510 --> 00:31:13,820 Bem, deixe-me ir para gedit aqui. 709 00:31:13,820 --> 00:31:19,180 E deixe-me ir em frente e abrir até, digamos, um novo arquivo. 710 00:31:19,180 --> 00:31:22,280 E eu estou indo para salvar esta temporariamente como busca-0.html. 711 00:31:22,280 --> 00:31:25,111 712 00:31:25,111 --> 00:31:27,860 E então, finalmente, vamos rápido frente ao que eu pré-preparados. 713 00:31:27,860 --> 00:31:30,190 >> E eu vou rapidamente chicote tipo doc 714 00:31:30,190 --> 00:31:33,840 html suporte aberto html perto html suporte. 715 00:31:33,840 --> 00:31:38,390 Então eu vou fazer a cabeça perto cabeça título aberto CS50 716 00:31:38,390 --> 00:31:40,150 Pesquisar em vez de pesquisa do Google. 717 00:31:40,150 --> 00:31:43,480 Aqui em baixo eu vou ter o corpo, aqui perto do corpo. 718 00:31:43,480 --> 00:31:45,835 E agora eu preciso CS50 Search. 719 00:31:45,835 --> 00:31:47,710 E, na verdade, vamos construir esta forma incremental. 720 00:31:47,710 --> 00:31:51,043 Eu estou indo para ir em frente e fechar esta e realmente colocá-lo em meu diretório público. 721 00:31:51,043 --> 00:31:52,730 Então me dê apenas um momento. 722 00:31:52,730 --> 00:31:55,390 busca-0.html-- eu vou temporalmente chamá-lo search.html. 723 00:31:55,390 --> 00:31:56,600 724 00:31:56,600 --> 00:31:59,750 Vou chmod um search.html + r. 725 00:31:59,750 --> 00:32:01,072 726 00:32:01,072 --> 00:32:02,280 E agora eu vou abri-lo. 727 00:32:02,280 --> 00:32:03,224 728 00:32:03,224 --> 00:32:04,390 Tudo bem, de modo que foi rápido. 729 00:32:04,390 --> 00:32:06,800 Mas o objectivo era simplesmente para nos levar ao ponto 730 00:32:06,800 --> 00:32:09,630 de ter este texto arquivo chamado search.html. 731 00:32:09,630 --> 00:32:10,940 732 00:32:10,940 --> 00:32:12,790 Portanto, não há muito para olhar ainda. 733 00:32:12,790 --> 00:32:16,970 Na verdade, se eu for para o meu navegador, e ir para search.html, isso é tudo o que é. 734 00:32:16,970 --> 00:32:17,720 Mas você sabe o quê? 735 00:32:17,720 --> 00:32:19,000 Eu posso ser um pouco amador. 736 00:32:19,000 --> 00:32:22,710 Eu li em um livro que há uma rubrica denominada tag h1. 737 00:32:22,710 --> 00:32:26,100 E eu estou indo para ir em frente e usar que h1 abrir e fechar h1. 738 00:32:26,100 --> 00:32:27,220 Atualizar a página. 739 00:32:27,220 --> 00:32:29,600 E agora é a maior e mais ousado, nem tudo o que interessante, 740 00:32:29,600 --> 00:32:32,399 mas pelo menos estruturalmente mais interessante. 741 00:32:32,399 --> 00:32:33,940 Mas agora deixe-me apresentar uma outra tag. 742 00:32:33,940 --> 00:32:36,500 Acontece lá fora é uma tag de formulário. 743 00:32:36,500 --> 00:32:38,400 E deixe-me fechar a tag. 744 00:32:38,400 --> 00:32:40,830 E verifica-se que há uma marca de entrada que 745 00:32:40,830 --> 00:32:44,600 tem um atributo chamado tipo, que é do tipo de campo de dados, 746 00:32:44,600 --> 00:32:45,200 se você quiser. 747 00:32:45,200 --> 00:32:47,050 E vai ser do tipo texto. 748 00:32:47,050 --> 00:32:52,200 E seu valor vai ser CS50 Search. 749 00:32:52,200 --> 00:32:53,850 Fechar tag. 750 00:32:53,850 --> 00:32:57,100 E não vai ser nenhuma noção de abrindo e fechando com marcas separadas. 751 00:32:57,100 --> 00:33:00,300 >> Deixe-me voltar para cá e ver o que está acontecendo, recarregar. 752 00:33:00,300 --> 00:33:01,380 Ficando interessante. 753 00:33:01,380 --> 00:33:02,950 Parece que é um campo de texto. 754 00:33:02,950 --> 00:33:04,080 755 00:33:04,080 --> 00:33:06,999 E na verdade, eu não queria colocar um valor lá ainda. 756 00:33:06,999 --> 00:33:10,040 Deixe-me voltar aqui e realmente começar livrar desse valor para mantê-lo simples. 757 00:33:10,040 --> 00:33:12,939 Em vez de um valor, o que eu queria para dar essa coisa era um nome. 758 00:33:12,939 --> 00:33:15,230 E eu não sei o que é, então eu vou voltar a isso. 759 00:33:15,230 --> 00:33:18,270 >> Mas abaixo disso, eu quero fazer input type = submeter. 760 00:33:18,270 --> 00:33:19,840 761 00:33:19,840 --> 00:33:22,120 E este valor será CS50 Search. 762 00:33:22,120 --> 00:33:24,850 E vamos ver porque eu mudou-se o valor para este. 763 00:33:24,850 --> 00:33:28,900 Quando eu recarregar, eu pareço ter agora os primórdios de minha própria pesquisa 764 00:33:28,900 --> 00:33:30,820 motor, super hediondo, embora, francamente, é 765 00:33:30,820 --> 00:33:34,260 não um arremesso longe do que Página padrão do Google parece. 766 00:33:34,260 --> 00:33:37,950 >> Se eu ir aqui e agora, eu posso digitar gatos e esperamos clique em Pesquisar. 767 00:33:37,950 --> 00:33:40,380 Mas eu não estou bem feito ainda, porque eu não implementaram, 768 00:33:40,380 --> 00:33:41,045 obviamente, um banco de dados. 769 00:33:41,045 --> 00:33:42,940 Eu não arrastou o web para resultados de pesquisa. 770 00:33:42,940 --> 00:33:44,840 Então eu preciso terceirizar que para o Google. 771 00:33:44,840 --> 00:33:46,290 Então, como posso fazer isso? 772 00:33:46,290 --> 00:33:49,170 >> Bem, primeiro de tudo eu precisa adicionar e ação 773 00:33:49,170 --> 00:33:58,460 atribuir a minha forma de tag que é http://www.google.com/search. 774 00:33:58,460 --> 00:34:01,180 E eu sei que só de ter inferida pelo olhar de perto 775 00:34:01,180 --> 00:34:02,505 em sua URL. 776 00:34:02,505 --> 00:34:03,380 E agora dar um palpite. 777 00:34:03,380 --> 00:34:09,090 O que deve este campo de texto provavelmente ser chamado, a partir de onde nós viemos 778 00:34:09,090 --> 00:34:09,754 de antes? 779 00:34:09,754 --> 00:34:11,896 780 00:34:11,896 --> 00:34:13,290 >> AUDIÊNCIA:? Q. 781 00:34:13,290 --> 00:34:14,370 >> DAVID J MALAN: q. 782 00:34:14,370 --> 00:34:17,800 E nós realmente não precisa pergunta marcá-lo sair, mas q é realmente isso, 783 00:34:17,800 --> 00:34:20,489 q para consulta provavelmente por padrão, apenas porque isso é 784 00:34:20,489 --> 00:34:23,060 o que Larry e Sergey veio com anos atrás. 785 00:34:23,060 --> 00:34:24,739 Então, agora deixe-me recarregue esta página. 786 00:34:24,739 --> 00:34:26,409 Não parece tão diferente. 787 00:34:26,409 --> 00:34:28,120 Mas agora veja o que acontece. 788 00:34:28,120 --> 00:34:32,360 >> Se eu digitar em gatos e clique CS50 busca e deixar ir, 789 00:34:32,360 --> 00:34:35,770 perceber eu me levado longe de real Google. 790 00:34:35,770 --> 00:34:38,150 Agora, o Google está sendo um pouco irritante em que eles são 791 00:34:38,150 --> 00:34:41,877 anexando um parâmetro adicional, se você, ao URL. 792 00:34:41,877 --> 00:34:43,960 É tudo o que está acontecendo automaticamente no lado do Google. 793 00:34:43,960 --> 00:34:48,730 >> A parte importante é que eu pareço ter gerado esta solicitação aqui. 794 00:34:48,730 --> 00:34:50,179 E, de fato, é isso que acontece. 795 00:34:50,179 --> 00:34:53,040 Quando você tem HTML que se parece com isso, este 796 00:34:53,040 --> 00:34:57,620 é uma espécie de desenvolvedores web notação por dizer, vá em frente e criar um formulário 797 00:34:57,620 --> 00:34:59,990 que quando ele é submetido, ele está indo para ir para este URL. 798 00:34:59,990 --> 00:35:03,430 E quando a URL tem proporcionado valores para coisas como q, 799 00:35:03,430 --> 00:35:05,440 não vão apenas para este URL. 800 00:35:05,440 --> 00:35:08,210 Na verdade, vá para a questão marca e então q = gatos. 801 00:35:08,210 --> 00:35:09,590 802 00:35:09,590 --> 00:35:13,060 Acrescente o parâmetro, o Parâmetro HTTP assim. 803 00:35:13,060 --> 00:35:15,590 >> E só para ser super precisa, o que está sendo inferida aqui- 804 00:35:15,590 --> 00:35:18,130 mas eu vou ser mais explicit-- é que o método que deseja usar 805 00:35:18,130 --> 00:35:22,270 é obter, em vez de algo como post, que vamos finalmente ver. 806 00:35:22,270 --> 00:35:27,710 Assim, em breve, simplesmente pela compreensão HTML e usando algumas tags bastante simples, 807 00:35:27,710 --> 00:35:30,610 agora podemos começar a criar nosso próprio usuário final frente 808 00:35:30,610 --> 00:35:32,850 de interface com uma pesquisa motor por trás dele. 809 00:35:32,850 --> 00:35:34,800 >> Mas isso, claro, é bastante hediondo. 810 00:35:34,800 --> 00:35:37,259 Então deixe-me realmente abrir uma versão um pouco melhor. 811 00:35:37,259 --> 00:35:39,800 Isso é o que eu preparado em avançar que tem alguns comentários. 812 00:35:39,800 --> 00:35:41,900 Mas você vai ver que eu praticamente recriou. 813 00:35:41,900 --> 00:35:44,150 Portanto, este já está disponível online. 814 00:35:44,150 --> 00:35:48,050 E eu fiz acontecer com preventivamente ir para https apenas para mantê-lo simples. 815 00:35:48,050 --> 00:35:50,610 >> E agora vamos abrir um próxima iteração deste. 816 00:35:50,610 --> 00:35:52,510 É a versão 1 em vez de 0. 817 00:35:52,510 --> 00:35:55,315 O que salta à vista como pouco diferente neste exemplo? 818 00:35:55,315 --> 00:35:59,480 819 00:35:59,480 --> 00:36:00,440 >> AUDIÊNCIA: [inaudível]. 820 00:36:00,440 --> 00:36:03,020 >> Sim, não há este centro align texto. 821 00:36:03,020 --> 00:36:04,590 Isto é um pouco estranho por aqui. 822 00:36:04,590 --> 00:36:06,150 Mas esta é realmente novo. 823 00:36:06,150 --> 00:36:07,800 E talvez adivinhar o que vai acontecer. 824 00:36:07,800 --> 00:36:11,730 Se eu ir para o meu navegador agora e visitar busca-1.html, 825 00:36:11,730 --> 00:36:13,090 é quase a mesma coisa. 826 00:36:13,090 --> 00:36:15,705 Mas é um passo mais perto de sendo um pouco mais bonita. 827 00:36:15,705 --> 00:36:19,150 Ainda é feio, mas mais bonita em que pelo menos, tudo está agora centrado. 828 00:36:19,150 --> 00:36:23,470 >> Assim, verifica-se que o que eu estou usando é uma outra língua completamente chamada 829 00:36:23,470 --> 00:36:25,680 CSS, folhas de estilo em cascata. 830 00:36:25,680 --> 00:36:28,310 E CSS, francamente, é uma espécie de, na minha opinião pessoal, 831 00:36:28,310 --> 00:36:29,775 uma linguagem atrozmente projetado. 832 00:36:29,775 --> 00:36:33,110 É muito chato para lembrar todos os vários detalhes. 833 00:36:33,110 --> 00:36:38,479 Mas é o que estiliza a toda web em todo o mundo hoje. 834 00:36:38,479 --> 00:36:39,270 Eu ofendi alguém. 835 00:36:39,270 --> 00:36:39,769 Tudo certo. 836 00:36:39,769 --> 00:36:43,180 Então, vamos voltar aqui e ver como estamos realmente usando isso. 837 00:36:43,180 --> 00:36:45,940 E ao que parece, pelo menos é na verdade, uma linguagem muito simples. 838 00:36:45,940 --> 00:36:49,470 É apenas pares de valores-chave, propriedades e valores, propriedades e valores. 839 00:36:49,470 --> 00:36:52,080 Na verdade, aqui é um tal propriedade e valor. 840 00:36:52,080 --> 00:36:55,890 >> Simplesmente usando o estilo atributo na minha tag corpo 841 00:36:55,890 --> 00:37:00,360 e dando-lhe um valor de um cólon palavra e outra palavra, 842 00:37:00,360 --> 00:37:03,730 ou uma propriedade e um valor, I pode afetar a estética 843 00:37:03,730 --> 00:37:06,210 da página web, não necessariamente da estrutura, no entanto, 844 00:37:06,210 --> 00:37:07,550 mas a estética do mesmo. 845 00:37:07,550 --> 00:37:10,960 E só por pesquisando por aí, eu percebo que as folhas de CSS, de estilo em cascata, 846 00:37:10,960 --> 00:37:14,170 suporta uma propriedade chamada text-align, cujo valor pode 847 00:37:14,170 --> 00:37:16,980 ser a esquerda, direita ou centro, por exemplo. 848 00:37:16,980 --> 00:37:19,990 >> Então agora quando eu recarregar Nesta página, o que eu consegui 849 00:37:19,990 --> 00:37:22,730 era uma página centrada, mas ainda bem feio. 850 00:37:22,730 --> 00:37:25,770 Vamos ir em frente e abrir até a versão 2 da Pesquisa. 851 00:37:25,770 --> 00:37:28,570 E agora percebe que fiz um pouco mais. 852 00:37:28,570 --> 00:37:33,760 Repare que até aqui dentro da cabeça tag, pode haver mais do que título. 853 00:37:33,760 --> 00:37:35,400 Na verdade, há uma marca de estilo. 854 00:37:35,400 --> 00:37:38,630 E é aí que ele só fica um pouco vendo CSS confuso às vezes. 855 00:37:38,630 --> 00:37:41,971 >> Observe que me parece ter algo que estruturalmente parece muito diferente. 856 00:37:41,971 --> 00:37:44,095 Mas aqui é o nome a tag Eu quero estilizado. 857 00:37:44,095 --> 00:37:47,570 Aqui estão os nossos velhos amigos crespos cintas e chaveta fechado. 858 00:37:47,570 --> 00:37:50,290 E então aqui é que propriedade e seu valor. 859 00:37:50,290 --> 00:37:56,300 >> Se eu carregar este arquivo, search2.html, o resultado final é idêntico. 860 00:37:56,300 --> 00:37:59,300 Mas é um passo em direção a uma melhor concepção. 861 00:37:59,300 --> 00:38:04,560 Ao fatorar o presente CSS, eu tenho não misturado com o meu HTML. 862 00:38:04,560 --> 00:38:07,560 E, de fato, como veremos, eu poderia reutilizar essas propriedades e valores. 863 00:38:07,560 --> 00:38:10,420 Se eu quisesse fazer cachos de partes da minha página web centrada, 864 00:38:10,420 --> 00:38:13,630 Eu não tenho que digitar style = text-align centro de todo o lugar. 865 00:38:13,630 --> 00:38:16,580 Eu posso colocar em um só lugar Talvez, como no topo. 866 00:38:16,580 --> 00:38:18,210 >> Mas mesmo isso não é o melhor design. 867 00:38:18,210 --> 00:38:21,720 Na verdade, uma das coisas que você vai aprender como você gastar mais e mais tempo com 868 00:38:21,720 --> 00:38:25,730 programação web é que quanto mais você puder modularizar coisas e fator de coisas 869 00:38:25,730 --> 00:38:30,610 como arquivos .h nós vamos fator material para fora, gosto helpers.c deixar-nos as coisas fator 870 00:38:30,610 --> 00:38:31,880 algumas Série de Exercícios atrás. 871 00:38:31,880 --> 00:38:34,200 Da mesma forma, poderíamos quer conseguir isso. 872 00:38:34,200 --> 00:38:37,920 >> Então, observe na versão três de search.html tenho 873 00:38:37,920 --> 00:38:40,610 limpa a cabeça de a página e basta colocar 874 00:38:40,610 --> 00:38:43,320 nesta, uma tag link, que contrariamente ao nome, 875 00:38:43,320 --> 00:38:44,700 não lhe dá um hiperlink. 876 00:38:44,700 --> 00:38:49,150 Ela liga para outro arquivo por meio de um href cujo valor, neste caso, 877 00:38:49,150 --> 00:38:51,586 é busca-3.css 878 00:38:51,586 --> 00:38:52,960 Então eu percebo que nós estamos indo rapidamente. 879 00:38:52,960 --> 00:38:54,600 Mas tudo que eu estou fazendo é uma espécie de mover as coisas. 880 00:38:54,600 --> 00:38:55,760 Deixe-me aberto busca-3.css. 881 00:38:55,760 --> 00:38:57,114 882 00:38:57,114 --> 00:38:58,530 Não é, nada realmente a ele. 883 00:38:58,530 --> 00:39:02,270 Eu apenas copiei e colei em um novo arquivo, assim como nós consignado material para fora 884 00:39:02,270 --> 00:39:03,509 em outros arquivos antes. 885 00:39:03,509 --> 00:39:05,300 E o result-- completamente underwhelming-- 886 00:39:05,300 --> 00:39:06,730 vai ser exatamente o mesmo. 887 00:39:06,730 --> 00:39:10,490 Mas estamos nos movendo toward-- não, não é. 888 00:39:10,490 --> 00:39:11,930 Oh, eu sei o porquê. 889 00:39:11,930 --> 00:39:13,790 >> Assim, parece ser um bug. 890 00:39:13,790 --> 00:39:15,010 E é em algum sentido. 891 00:39:15,010 --> 00:39:17,730 Mas deixe-me abrir o meu guia Rede. 892 00:39:17,730 --> 00:39:19,660 Deixe-me recarregar a página. 893 00:39:19,660 --> 00:39:23,315 Ah, por que o CSS não sendo aplicado? 894 00:39:23,315 --> 00:39:26,920 Bem, o arquivo CSS, da mesma forma, tem para ser legível, por assim dizer. 895 00:39:26,920 --> 00:39:28,440 E isso também está proibido. 896 00:39:28,440 --> 00:39:33,760 Então deixe-me fazer um chmod a + r da estrela dot CSS-- whoops-- 897 00:39:33,760 --> 00:39:37,067 estamos CSS ponto é apenas o extensão de arquivo para arquivos CSS. 898 00:39:37,067 --> 00:39:38,900 Agora deixe-me voltar para meu navegador e reload. 899 00:39:38,900 --> 00:39:40,910 OK, um pouco melhor. 900 00:39:40,910 --> 00:39:42,282 >> Agora deixe-me fazer uma última coisa. 901 00:39:42,282 --> 00:39:42,990 Em busca-4.html. 902 00:39:42,990 --> 00:39:44,550 903 00:39:44,550 --> 00:39:48,220 Eu tenho uma versão que eu só pensava era bem mais legal, ainda que forma mais 904 00:39:48,220 --> 00:39:48,980 complicada. 905 00:39:48,980 --> 00:39:50,690 Vejamos o resultado primeiro. 906 00:39:50,690 --> 00:39:52,290 Fechar esta para nos dar mais espaço. 907 00:39:52,290 --> 00:39:54,275 Altere isso para procurar-4, Enter. 908 00:39:54,275 --> 00:39:55,430 909 00:39:55,430 --> 00:39:57,200 >> E agora um monte de coisas estão quebrados. 910 00:39:57,200 --> 00:39:59,910 Eu vou voltar em meu diretório aqui. 911 00:39:59,910 --> 00:40:04,190 E agora eu estou indo só para fazer um chmod de um + r em um file-- 912 00:40:04,190 --> 00:40:07,450 porque eu sei que exists-- chamado logo.gif, que é uma imagem. 913 00:40:07,450 --> 00:40:08,590 E agora recarregar. 914 00:40:08,590 --> 00:40:11,040 E wow-- então agora eu sou bem perto, francamente, 915 00:40:11,040 --> 00:40:15,860 gostar da versão de 1999 do Google, e francamente, a versão 2014 do Google, 916 00:40:15,860 --> 00:40:16,360 certo? 917 00:40:16,360 --> 00:40:21,920 >> Por isso, agora vai para o seu site, em última instância, se eu procurar gatos. 918 00:40:21,920 --> 00:40:23,900 E de fato é. 919 00:40:23,900 --> 00:40:26,410 Mas o que eu faria diferente nesta versão 4? 920 00:40:26,410 --> 00:40:28,020 Portanto, não vamos alongar muito sobre isso aqui. 921 00:40:28,020 --> 00:40:30,100 Você verá isso em problema definir sete eventualmente. 922 00:40:30,100 --> 00:40:31,350 Mas repare que eu fiz algumas coisas. 923 00:40:31,350 --> 00:40:33,690 >> Eu apresentei uma div tag, que é a divisão, 924 00:40:33,690 --> 00:40:35,450 semelhante em espírito a um tag de parágrafo. 925 00:40:35,450 --> 00:40:38,220 Mas a divisão é igual, é aqui uma região rectangular invisível 926 00:40:38,220 --> 00:40:39,150 da tela. 927 00:40:39,150 --> 00:40:41,680 Vamos dar-lhe uma única identificador, um rodapé, apenas 928 00:40:41,680 --> 00:40:44,700 para que possamos falar sobre -lo noutro local no nosso HTML. 929 00:40:44,700 --> 00:40:47,952 Aqui está outra div da página cujo ID vai ser o conteúdo. 930 00:40:47,952 --> 00:40:49,160 É o conteúdo da página. 931 00:40:49,160 --> 00:40:51,090 E aqui é o cabeçalho da página. 932 00:40:51,090 --> 00:40:54,960 >> Em outras palavras, eu tenho essencialmente em HTML sou mentalmente 933 00:40:54,960 --> 00:40:57,700 vendo esta página da web como três componentes, um cabeçalho 934 00:40:57,700 --> 00:41:01,200 até aqui com este retângulo invisível, o conteúdo no meio, e, em seguida 935 00:41:01,200 --> 00:41:04,800 o rodapé abaixo, mesmo embora nós não vemos essas coisas. 936 00:41:04,800 --> 00:41:09,940 Porque eu quero na minha cabeça de página aqui, ou em um arquivo .css, 937 00:41:09,940 --> 00:41:11,460 Eu posso usar essa sintaxe. 938 00:41:11,460 --> 00:41:13,070 >> Header não é uma tag. 939 00:41:13,070 --> 00:41:17,060 É uma ID para que ele se transforma que fazendo #header, 940 00:41:17,060 --> 00:41:20,840 Agora eu posso aplicar uma ou mais Propriedades para o cabeçalho. 941 00:41:20,840 --> 00:41:24,130 Eu posso fazer o mesmo conteúdo, o mesmo para o conteúdo aqui. 942 00:41:24,130 --> 00:41:27,230 >> Assim, por exemplo, no rodapé, o aviso prévio todas estas propriedades estou adicionando. 943 00:41:27,230 --> 00:41:30,660 E eu sei que eles existem apenas pela leitura se sobre a documentação para CSS. 944 00:41:30,660 --> 00:41:33,450 Tamanho da fonte vai ser smaller-- de modo algum o tamanho da fonte relativa. 945 00:41:33,450 --> 00:41:34,741 O peso vai ser ousado. 946 00:41:34,741 --> 00:41:37,340 Margin-- quantos pixels em torno ele-- é de 20 pixels. 947 00:41:37,340 --> 00:41:38,590 E isso vai ser centrado. 948 00:41:38,590 --> 00:41:40,256 >> Mas agora, a página se parece com isso. 949 00:41:40,256 --> 00:41:42,840 Se eu não estiver satisfeito com minha cópia lá, 950 00:41:42,840 --> 00:41:46,560 Eu poderia fazer algo parecido com a cor vermelha. 951 00:41:46,560 --> 00:41:50,570 E então eu posso guardar este, reload, e agora eu tenho estilizado rodapé. 952 00:41:50,570 --> 00:41:54,130 Portanto, esta é apenas insinuando o poder do que você pode fazer em uma página da web 953 00:41:54,130 --> 00:41:55,510 para mudar as coisas ao redor. 954 00:41:55,510 --> 00:41:59,080 >> E ainda mais frio do que isso, se você quiser para bisbilhotar sites reais, 955 00:41:59,080 --> 00:42:00,810 você não pode mudá-los permanentemente. 956 00:42:00,810 --> 00:42:03,640 Mas se eu abrir Inspector do Chrome novamente 957 00:42:03,640 --> 00:42:07,610 e eu não vá para o lado esquerdo aqui, o que mostra HTML do Facebook, 958 00:42:07,610 --> 00:42:11,380 mas mostra à direita lado todo o seu CSS, 959 00:42:11,380 --> 00:42:13,789 você pode e mudar as coisas na mosca. 960 00:42:13,789 --> 00:42:15,080 Então deixe-me ir em frente e fazer isso. 961 00:42:15,080 --> 00:42:18,670 >> Deixe-me ir em frente e controle clique sobre esta palavra aleatória aqui, 962 00:42:18,670 --> 00:42:21,230 assinar e clique em Inspect Element. 963 00:42:21,230 --> 00:42:25,130 Chrome salta muito convenientemente para a tag h1 que o Facebook está usando. 964 00:42:25,130 --> 00:42:27,290 E observe aqui Facebook tem tipo de preguiçosamente 965 00:42:27,290 --> 00:42:29,960 codificado tamanho da fonte como uma propriedade aqui. 966 00:42:29,960 --> 00:42:33,530 >> Então, o legal é que que se eu realmente entrar aqui 967 00:42:33,530 --> 00:42:39,560 e dizer, oh, Facebook, eu não gosto que 64 pixels, podemos agora alterar Facebook. 968 00:42:39,560 --> 00:42:42,590 Claro, estamos apenas mudando-o para mim, pessoalmente, no momento. 969 00:42:42,590 --> 00:42:45,150 Mas este é apenas mais um ferramenta em nosso kit de ferramentas 970 00:42:45,150 --> 00:42:48,360 que vai nos permitir ajustar e descobrir e também diagnosticar 971 00:42:48,360 --> 00:42:49,729 questões em nossas próprias páginas web. 972 00:42:49,729 --> 00:42:52,270 E nós poderíamos ir da mesma forma ao longo do aqui, que é a mesma coisa. 973 00:42:52,270 --> 00:42:55,830 Se você realmente quiser começar a fantasia, eu Quer dizer, agora você pode realmente transformar a página 974 00:42:55,830 --> 00:42:57,380 e fazer coisas malucas. 975 00:42:57,380 --> 00:42:59,870 >> Então, por que tudo isso é útil? 976 00:42:59,870 --> 00:43:02,330 Bem, em última análise, estamos vai querer ser 977 00:43:02,330 --> 00:43:07,110 capaz de criar páginas web que são movidos por nossos próprios fins de volta, 978 00:43:07,110 --> 00:43:10,520 não apenas por Google e terceirização de back-end lá. 979 00:43:10,520 --> 00:43:13,510 Nós, na verdade, quer o valor, por exemplo, 980 00:43:13,510 --> 00:43:18,830 da ação de nosso motor de pesquisa atribuir a ir não para outra pessoa, 981 00:43:18,830 --> 00:43:24,270 mas para algo como search.php, onde search.php é em nosso próprio servidor, 982 00:43:24,270 --> 00:43:25,670 não no de outra pessoa. 983 00:43:25,670 --> 00:43:30,316 >> E assim, para chegar lá, nós realmente necessidade de introduzir uma nova língua. 984 00:43:30,316 --> 00:43:33,190 Então nós já olhou para um novo linguagem aqui, ou dois realmente, HTML 985 00:43:33,190 --> 00:43:33,700 e CSS. 986 00:43:33,700 --> 00:43:36,330 Mas eles realmente são apenas linguagens estruturais e estéticas. 987 00:43:36,330 --> 00:43:38,360 Eles não estão programando línguas per se. 988 00:43:38,360 --> 00:43:41,160 E isso é tanto formais tempo que vamos gastar com eles. 989 00:43:41,160 --> 00:43:44,910 Porque nós vamos começar agora a transição para o PHP. 990 00:43:44,910 --> 00:43:48,160 >> Então PHP é uma real linguagem de programação. 991 00:43:48,160 --> 00:43:50,750 É uma linguagem de script no sentido de que é 992 00:43:50,750 --> 00:43:52,855 pretende ser mais leve do que algo como C. 993 00:43:52,855 --> 00:43:56,082 E é uma linguagem interpretada, o que significa que ele não está compilado. 994 00:43:56,082 --> 00:43:58,790 Assim, em poucas palavras, o que significava quando usamos uma linguagem como C 995 00:43:58,790 --> 00:44:00,290 e tivemos que compilá-lo? 996 00:44:00,290 --> 00:44:02,120 O que significa para compilar o código fonte C? 997 00:44:02,120 --> 00:44:03,864 998 00:44:03,864 --> 00:44:04,780 AUDIÊNCIA: [inaudível]. 999 00:44:04,780 --> 00:44:06,184 DAVID J MALAN: Diga isso de novo? 1000 00:44:06,184 --> 00:44:07,100 AUDIÊNCIA: [inaudível]. 1001 00:44:07,100 --> 00:44:07,962 1002 00:44:07,962 --> 00:44:08,920 DAVID J MALAN: Perfeito. 1003 00:44:08,920 --> 00:44:10,180 Ele transforma-lo em binário. 1004 00:44:10,180 --> 00:44:14,200 Ele transforma em zeros e uns a partir do código fonte Inglês-like real. 1005 00:44:14,200 --> 00:44:16,424 E então nós podemos realmente executar esses zeros e uns 1006 00:44:16,424 --> 00:44:18,840 passando-os através do CPU com um duplo clique em um ícone 1007 00:44:18,840 --> 00:44:19,980 ou executar um comando. 1008 00:44:19,980 --> 00:44:23,770 >> PHP e Python e Ruby e Perl e JavaScript 1009 00:44:23,770 --> 00:44:26,250 e cachos de outro línguas são interpretadas 1010 00:44:26,250 --> 00:44:29,290 línguas, o que quer dizer você não compilá-los. 1011 00:44:29,290 --> 00:44:34,220 Em vez disso, você alimentá-los como entrada para um programa chamado um intérprete. 1012 00:44:34,220 --> 00:44:36,640 E isso intérprete, que alguém escreveu, 1013 00:44:36,640 --> 00:44:40,930 lê o código fonte superior para baixo, esquerda para a direita e apenas interpreta 1014 00:44:40,930 --> 00:44:43,000 essas linhas e faz o que você diz. 1015 00:44:43,000 --> 00:44:45,360 >> Então, se você encontrar um linha que diz impressão, 1016 00:44:45,360 --> 00:44:48,660 isso não significa necessariamente converter impressão para os zeros e uns correspondentes. 1017 00:44:48,660 --> 00:44:51,910 Ele só tem esse intérprete como um grande se a condição que diz: 1018 00:44:51,910 --> 00:44:56,110 se a instrução do programador é de impressão, em seguida, faça o seguinte. 1019 00:44:56,110 --> 00:44:58,170 Por isso, interpreta-o apenas por tipo de raciocínio 1020 00:44:58,170 --> 00:44:59,800 através do que você está dizendo que ele faça. 1021 00:44:59,800 --> 00:45:01,320 >> E PHP é uma das línguas. 1022 00:45:01,320 --> 00:45:05,310 E PHP anos atrás foi projetado precisamente para programação web. 1023 00:45:05,310 --> 00:45:08,160 E foi inicialmente um linguagem confusa muito desleixado. 1024 00:45:08,160 --> 00:45:10,940 E, de fato, há uma enorme quantidade de código PHP ruim lá fora. 1025 00:45:10,940 --> 00:45:13,520 Mas a própria linguagem amadureceu ao longo dos anos, 1026 00:45:13,520 --> 00:45:16,200 tanto que agora é na verdade, um maravilhoso próximo passo 1027 00:45:16,200 --> 00:45:19,970 pedagogicamente de C, porque é tão enervante familiar para tudo 1028 00:45:19,970 --> 00:45:22,380 você acabou de ver nas últimas semanas. 1029 00:45:22,380 --> 00:45:25,724 >> A única diferença inicial veremos é que não há função principal mais. 1030 00:45:25,724 --> 00:45:28,890 Quando você começar a escrever código, é só vai ser executado, não importa o quê, 1031 00:45:28,890 --> 00:45:30,220 como veremos em um momento. 1032 00:45:30,220 --> 00:45:33,320 Enquanto isso, aqui está o que um variável parece em PHP. 1033 00:45:33,320 --> 00:45:35,840 É um pouco diferente, mas apenas mal. 1034 00:45:35,840 --> 00:45:39,380 >> Em PHP, não há tipificação forte. 1035 00:45:39,380 --> 00:45:41,430 Há semanas digitação, que apenas significa que não 1036 00:45:41,430 --> 00:45:44,030 são tipos de dados como cordas e números e outras coisas. 1037 00:45:44,030 --> 00:45:47,030 Mas você não se incomoda especificando o que eles são mais. 1038 00:45:47,030 --> 00:45:48,980 PHP figuras-lo para você. 1039 00:45:48,980 --> 00:45:52,030 O sinal de dólar é apenas uma decisão que o povo fez PHP anos 1040 00:45:52,030 --> 00:45:54,890 atrás de tal forma que qualquer variável em PHP apenas começa com um sinal de dólar. 1041 00:45:54,890 --> 00:45:58,130 É realmente tipo de útil em que ele salta em você um pouco mais. 1042 00:45:58,130 --> 00:46:01,315 >> Mas depois disso, este é uma condição em PHP. 1043 00:46:01,315 --> 00:46:03,140 1044 00:46:03,140 --> 00:46:04,730 O que é diferente em relação C? 1045 00:46:04,730 --> 00:46:07,180 1046 00:46:07,180 --> 00:46:09,600 Truque question-- nada, que é realmente muito bom. 1047 00:46:09,600 --> 00:46:12,140 As expressões booleanas em PHP-- o mesmo. 1048 00:46:12,140 --> 00:46:19,354 As expressões booleanas com e contra ou, interruptores, loops, loops, loops-- OK, 1049 00:46:19,354 --> 00:46:20,270 este é diferente. 1050 00:46:20,270 --> 00:46:22,660 >> Assim, verifica-aí é um par de outros recursos do PHP. 1051 00:46:22,660 --> 00:46:25,243 Um deles é realmente isso, que é maravilhosamente conveniente. 1052 00:46:25,243 --> 00:46:29,250 Se $ números é uma matriz que você tem declarados previamente em um programa, 1053 00:46:29,250 --> 00:46:33,350 você tem essa fantasia para cada construto que em vez de fazer tudo isso 1054 00:46:33,350 --> 00:46:37,020 irritante I é igual a 0, I é menos do que isso, [? I ++?], 1055 00:46:37,020 --> 00:46:40,320 para cada um dos números como o número, onde cada desses valores sinal de dólar é apenas 1056 00:46:40,320 --> 00:46:42,790 uma variável, e esta última você pode pensar como I. 1057 00:46:42,790 --> 00:46:44,290 Você poderia chamá-lo de qualquer coisa que você quiser. 1058 00:46:44,290 --> 00:46:45,770 Chamei-a de número. 1059 00:46:45,770 --> 00:46:48,825 Isso vai iterar a matriz de números de chamada. 1060 00:46:48,825 --> 00:46:51,200 E em cada iteração, é vai atualizar automaticamente 1061 00:46:51,200 --> 00:46:54,340 para você o número cifrão variável para que você constantemente 1062 00:46:54,340 --> 00:46:58,210 ter acesso à variável que você deseja sem ter que fazer qualquer colchete 1063 00:46:58,210 --> 00:47:00,980 notação ou a indexação em uma matriz. 1064 00:47:00,980 --> 00:47:04,950 >> Além disso, ainda temos coisas como matrizes, que parecem quase o mesmo, 1065 00:47:04,950 --> 00:47:08,210 exceto que é muito comum, como veremos ver, tanto em PHP e JavaScript 1066 00:47:08,210 --> 00:47:10,750 para pré inicializar uma matriz usando colchetes. 1067 00:47:10,750 --> 00:47:12,040 C usa chaves. 1068 00:47:12,040 --> 00:47:15,330 Por isso, é um pouco diferente, embora nós realmente não usar esse truque muito. 1069 00:47:15,330 --> 00:47:20,090 >> Mas ainda mais poderosa, PHP tem matrizes associativas, 1070 00:47:20,090 --> 00:47:23,100 que é uma maneira extravagante de dizer tabelas de hash. 1071 00:47:23,100 --> 00:47:31,610 Na verdade, se você quiser declarar um hash mesa em PHP, ao contrário de C-- quantos 1072 00:47:31,610 --> 00:47:34,775 linhas de código demorou para realmente implementar uma tabela hash em C? 1073 00:47:34,775 --> 00:47:38,310 Ou quantas linhas de código é tomando para implementar uma tabela hash em C? 1074 00:47:38,310 --> 00:47:39,820 Por isso, é provavelmente muito, certo? 1075 00:47:39,820 --> 00:47:41,680 É uma dúzia, talvez 100 ou 200. 1076 00:47:41,680 --> 00:47:42,980 É trivial. 1077 00:47:42,980 --> 00:47:45,420 Ou ele está prestes a ser, como em breve você vai ver, não trivial 1078 00:47:45,420 --> 00:47:48,080 para implementar uma tabela hash [Inaudível] e também uma tentativa. 1079 00:47:48,080 --> 00:47:50,580 Mas em PHP-- e, francamente, eu provavelmente não deveria dizer isso 1080 00:47:50,580 --> 00:47:53,630 até Monday-- em PHP, se você quer uma mesa, feito. 1081 00:47:53,630 --> 00:47:56,431 Isso é um hash mesa-- assim com uma linha de código. 1082 00:47:56,431 --> 00:47:56,930 E 1083 00:47:56,930 --> 00:47:58,810 >> Um monte de línguas fazer isso. 1084 00:47:58,810 --> 00:48:00,190 Divirta-se com pset cinco. 1085 00:48:00,190 --> 00:48:01,980 Então, um monte de línguas fazer isso. 1086 00:48:01,980 --> 00:48:03,050 1087 00:48:03,050 --> 00:48:06,140 Eles dão-lhe essas abstrações que outras pessoas, outros programadores, 1088 00:48:06,140 --> 00:48:09,870 criamos para você, de modo que você pode estar em seus ombros 1089 00:48:09,870 --> 00:48:13,290 e começar a usar as idéias que são super convincente, como tabelas de hash e árvores 1090 00:48:13,290 --> 00:48:14,140 e tenta. 1091 00:48:14,140 --> 00:48:17,790 Mas você não tem que necessariamente implementar essas coisas você mesmo. 1092 00:48:17,790 --> 00:48:20,850 >> E assim, em última análise, o que vamos usar o PHP para 1093 00:48:20,850 --> 00:48:23,580 é potencialmente escrever programas da linha de comando chamada. 1094 00:48:23,580 --> 00:48:26,600 Poderíamos recriar cada programa nós escrevemos neste semestre, até agora, 1095 00:48:26,600 --> 00:48:30,410 exceto, talvez, Breakout, que utiliza SPL, o qual é específico para C no momento. 1096 00:48:30,410 --> 00:48:33,100 Mas todos os outros problemas definir, certamente Mario e César 1097 00:48:33,100 --> 00:48:35,300 e Vigenere e [? Crack?] E para a frente, nós 1098 00:48:35,300 --> 00:48:39,520 poderia re-implementar em PHP, e provavelmente um pouco mais facilmente. 1099 00:48:39,520 --> 00:48:43,050 >> Mas o que nós estamos indo em última análise, usar o PHP para programação web é. 1100 00:48:43,050 --> 00:48:46,420 E vamos introduzir próxima semana um modelo mental, um paradigma chamado 1101 00:48:46,420 --> 00:48:49,610 MVC, controlador de vista do modelo, que se você tiver feito a programação 1102 00:48:49,610 --> 00:48:51,610 antes em Python ou Ruby ou em outro lugar, você 1103 00:48:51,610 --> 00:48:54,112 poderia saber dessa equipe com Rails e Django e afins. 1104 00:48:54,112 --> 00:48:55,820 Mas se você é novo para isso também, você verá 1105 00:48:55,820 --> 00:48:59,652 que este é realmente um muito natural extensão da fatoração 1106 00:48:59,652 --> 00:49:01,360 e do tipo de projeto de código que nós temos 1107 00:49:01,360 --> 00:49:04,670 feito em C. Nós vamos agora aplicar algumas dessas lições para PHP 1108 00:49:04,670 --> 00:49:07,190 de modo que, em última análise, estamos implementar os nossos próprios sites. 1109 00:49:07,190 --> 00:49:09,080 E se você é uma espécie de hipnotizado ou espantado 1110 00:49:09,080 --> 00:49:10,954 que nós vamos fazer todo o tão rapidamente, 1111 00:49:10,954 --> 00:49:13,410 perceber que quase todos os semestre, cerca de 90% 1112 00:49:13,410 --> 00:49:16,560 de estudantes CS50, incluindo os quem nunca programou antes, 1113 00:49:16,560 --> 00:49:20,329 acabam fazendo projetos finais que são baseados em programação web. 1114 00:49:20,329 --> 00:49:23,120 E assim você vai ver que os retornos são altos nas semanas que virão. 1115 00:49:23,120 --> 00:49:24,965 Então, vamos vê-lo em seguida, na segunda-feira. 1116 00:49:24,965 --> 00:49:27,260 1117 00:49:27,260 --> 00:49:30,120 >> COLUNA 1: E agora, o Deep Pensamentos por Daven Farnham. 1118 00:49:30,120 --> 00:49:34,055 1119 00:49:34,055 --> 00:49:34,780 As tabelas de hash. 1120 00:49:34,780 --> 00:49:37,180 1121 00:49:37,180 --> 00:49:38,402 >> [Risos] 1122 00:49:38,402 --> 00:49:38,902