1 00:00:00,000 --> 00:00:01,390 2 00:00:01,390 --> 00:00:04,890 >> [REPRODUCCIÓN DE MÚSICA] 3 00:00:04,890 --> 00:00:10,955 4 00:00:10,955 --> 00:00:12,580 DAVID J MALAN: Muy bien, bienvenido de nuevo. 5 00:00:12,580 --> 00:00:13,600 Esto es CS50. 6 00:00:13,600 --> 00:00:15,540 Este es el fin de semana de siete. 7 00:00:15,540 --> 00:00:18,180 Y es al final de ese carroñero caza del problema fijó cuatro 8 00:00:18,180 --> 00:00:19,220 que se puede recordar. 9 00:00:19,220 --> 00:00:21,650 Después de la recuperación de todos los archivos JPEG de personal, 10 00:00:21,650 --> 00:00:24,820 que fueron impugnadas, si lo desea, para fotografiar a ti mismo con el mayor número 11 00:00:24,820 --> 00:00:25,981 de esas personas como puedas. 12 00:00:25,981 --> 00:00:28,480 Tenemos un montón de presentaciones durante las últimas semanas, 13 00:00:28,480 --> 00:00:32,980 de hecho, un buen número a la derecha antes del mediodía hoy en día, algunos de los cuales son los que están aquí, 14 00:00:32,980 --> 00:00:37,670 atrapado aquí en-- ve como-- Annenberg Hall en horas de oficina, uno aquí 15 00:00:37,670 --> 00:00:39,530 en Lowell Casa con Nick. 16 00:00:39,530 --> 00:00:41,750 Aquí está Ramón está atrapado en el teléfono. 17 00:00:41,750 --> 00:00:43,870 Esto fue en un almuerzo CS50. 18 00:00:43,870 --> 00:00:46,840 Este fue Jason Skyping con un compañero de clase más creativa, 19 00:00:46,840 --> 00:00:48,280 quien lo llamó por teléfono esta manera. 20 00:00:48,280 --> 00:00:49,690 No sabemos de qué se trataba. 21 00:00:49,690 --> 00:00:51,940 >> [Risas] 22 00:00:51,940 --> 00:00:54,570 >> DAVID J MALAN: Pero eso es digno de un gigabyte. 23 00:00:54,570 --> 00:00:56,960 Aquí es Chang, quien literalmente corrió fuera del escenario 24 00:00:56,960 --> 00:01:00,480 para evitar ser fotografiado uno día, pero finalmente fue capturado. 25 00:01:00,480 --> 00:01:02,050 Aquí es Nick. 26 00:01:02,050 --> 00:01:03,480 Aquí es Nick. 27 00:01:03,480 --> 00:01:04,080 Aquí es Nick. 28 00:01:04,080 --> 00:01:05,090 29 00:01:05,090 --> 00:01:07,670 Y aquí es Alison por los campos. 30 00:01:07,670 --> 00:01:11,840 Y Zamyla incluso se encontró en un concurso de baile. 31 00:01:11,840 --> 00:01:14,100 Así que vamos a ir a través de estas fotos, averiguar 32 00:01:14,100 --> 00:01:16,690 quien presentó el más la primera, y la recompensa 33 00:01:16,690 --> 00:01:20,662 un premio fabuloso, como prometido en la especificación. 34 00:01:20,662 --> 00:01:23,120 Y nosotros también pondremos sobre el espacio que estuvo involucrado. 35 00:01:23,120 --> 00:01:26,860 >> Un par de announcements-- así almuerzo es, de nuevo, este viernes a las 13:15. 36 00:01:26,860 --> 00:01:30,420 Si desea unirse a nosotros, Confirmar su asistencia a esa URL aquí. 37 00:01:30,420 --> 00:01:33,730 Jason vuelve a aparecer aquí de un de las secciones de un par de años 38 00:01:33,730 --> 00:01:35,510 de nuevo, lo que sucedió a caer en Halloween. 39 00:01:35,510 --> 00:01:38,950 Y, en efecto, se vistió como un calabaza ese año en particular. 40 00:01:38,950 --> 00:01:42,700 Si usted mira esta sección de su sección a partir de 2011 41 00:01:42,700 --> 00:01:46,480 ocho, si usted es curioso, en CS50.tv, creo 42 00:01:46,480 --> 00:01:49,730 este fue el año en el que su bomba de aire estaba funcionando. 43 00:01:49,730 --> 00:01:52,490 >> Si a continuación, ver el sección similar en el 2012, 44 00:01:52,490 --> 00:01:55,620 verá este Jason mucho desinfla, desde el traje ya no funcionaba, 45 00:01:55,620 --> 00:01:58,060 que no es más que decir este viernes, si lo 46 00:01:58,060 --> 00:02:02,720 gustaría tallar una calabaza con Daven y Gabe y otros, a los jefes de RSVP 47 00:02:02,720 --> 00:02:04,480 en dirección cs50.harvard.edu. 48 00:02:04,480 --> 00:02:06,200 Promete ser muy divertido. 49 00:02:06,200 --> 00:02:08,660 Daven, se nos dice, se ha forjado calabazas del todo de su vida. 50 00:02:08,660 --> 00:02:11,930 Gabriel de Brasil nunca tiene tallado una calabaza para Halloween. 51 00:02:11,930 --> 00:02:14,700 Así que estar allí con ellos a medida que aprende. 52 00:02:14,700 --> 00:02:16,830 >> Seminarios, meanwhile-- por lo que usted aprenderá pronto 53 00:02:16,830 --> 00:02:20,650 acerca de lo que nuestras expectativas son para el proyecto final, que en esencia 54 00:02:20,650 --> 00:02:23,150 se reducen a el diseño e implementación 55 00:02:23,150 --> 00:02:26,440 la mayoría de cualquier proyecto de interés para que, si bien sujeto a la aprobación 56 00:02:26,440 --> 00:02:28,490 y la orientación de su compañero de enseñanza. 57 00:02:28,490 --> 00:02:32,110 Hacia el final de la semestre, presentamos una serie 58 00:02:32,110 --> 00:02:35,610 de seminarios, que son las clases opcionales liderado por los becarios de enseñanza y de Harvard 59 00:02:35,610 --> 00:02:38,570 el personal, los amigos del curso a través de campus, sobre diversos temas que 60 00:02:38,570 --> 00:02:41,470 son tangencial a la programa subyacente del curso 61 00:02:41,470 --> 00:02:45,590 pero no obstante aplicable, diversión, y diferente para los proyectos finales potenciales. 62 00:02:45,590 --> 00:02:49,530 >> Por ejemplo, en primer lugar, si desea para registrarse, vaya a esa URL allí. 63 00:02:49,530 --> 00:02:53,010 Y esta es la alineación para seminarios solos de este año. 64 00:02:53,010 --> 00:02:56,060 Pero se dan cuenta que tenemos decenas de seminarios de año pasado, todos los cuales 65 00:02:56,060 --> 00:02:59,774 están vinculados en el menú Seminarios opción de la página web del curso. 66 00:02:59,774 --> 00:03:02,190 Así que si usted está pensando en yendo más allá de su zona de confort 67 00:03:02,190 --> 00:03:05,060 o recoger algunas nuevas habilidades, por ejemplo, la programación de iPhone 68 00:03:05,060 --> 00:03:08,100 aplicaciones con Swift, un nuevo idioma de Apple o de Objective-C 69 00:03:08,100 --> 00:03:11,230 o aplicaciones de Android o de programación [? cue?] bombillas, o cualquiera de los temas 70 00:03:11,230 --> 00:03:15,490 hasta aquí y más, debido cheque a la página de registro. 71 00:03:15,490 --> 00:03:19,730 >> Así que empezamos y concluimos en Lunes con mirar HTTP. 72 00:03:19,730 --> 00:03:22,675 Así HTTP refresher-- rápida, Protocolo de transferencia de hipertexto. 73 00:03:22,675 --> 00:03:24,045 Pero, ¿qué significa eso realmente? 74 00:03:24,045 --> 00:03:26,805 75 00:03:26,805 --> 00:03:27,930 ¿Qué significa eso realmente? 76 00:03:27,930 --> 00:03:30,665 77 00:03:30,665 --> 00:03:31,290 ¿Es eso una mano? 78 00:03:31,290 --> 00:03:33,074 79 00:03:33,074 --> 00:03:34,740 Sé que estás rascando la cabeza. 80 00:03:34,740 --> 00:03:36,400 Pero usted quiere proponer lo que HTTP es? 81 00:03:36,400 --> 00:03:37,792 82 00:03:37,792 --> 00:03:40,576 >> ¿Cómo las computadoras: Público comunicarse con [inaudible]. 83 00:03:40,576 --> 00:03:41,517 84 00:03:41,517 --> 00:03:43,100 DAVID J MALAN: me perdí la última parte. 85 00:03:43,100 --> 00:03:45,774 ¿Cómo se comunican los ordenadores con-- 86 00:03:45,774 --> 00:03:47,325 >> Servidores de Internet: audiencia. 87 00:03:47,325 --> 00:03:50,450 DAVID J MALAN: Good-- con internet servidores, y en concreto, los servidores web. 88 00:03:50,450 --> 00:03:53,533 Porque recuerdo, hay un montón de servicios en Internet, algunos de los cuales 89 00:03:53,533 --> 00:03:57,349 utiliza probablemente todos los días entre el chat y el mensaje, el chat y web, y correo electrónico, 90 00:03:57,349 --> 00:03:57,890 y similares. 91 00:03:57,890 --> 00:04:00,900 Y es sólo el HTTP protocolo que los navegadores web 92 00:04:00,900 --> 00:04:03,750 hablar cuando se comunica con servidores web, y viceversa. 93 00:04:03,750 --> 00:04:05,580 Y el análogo en el mundo humano que sea, 94 00:04:05,580 --> 00:04:08,730 Extiendo mi mano para estrechar algunas otra de humano y él o ella 95 00:04:08,730 --> 00:04:11,970 reconoce mediante la ampliación su mano también. 96 00:04:11,970 --> 00:04:13,970 Así que eso es sólo un protocolo, un conjunto de convenciones. 97 00:04:13,970 --> 00:04:15,630 >> Y lo que en verdad son esos convenios? 98 00:04:15,630 --> 00:04:18,640 Bueno, sólo se reduce a el envío de mensajes de ida y vuelta, 99 00:04:18,640 --> 00:04:19,770 como hemos representado aquí. 100 00:04:19,770 --> 00:04:22,520 Y hay un par de maneras en que puede enviar estos mensajes. 101 00:04:22,520 --> 00:04:24,360 Y tal vez el más común se conoce como GET. 102 00:04:24,360 --> 00:04:26,510 Y veremos un contraste a esto antes de tiempo. 103 00:04:26,510 --> 00:04:30,010 >> Sin embargo, una solicitud GET desde un navegador al servidor sólo se parece a esto. 104 00:04:30,010 --> 00:04:32,960 Es un montón de texto que pone dentro de un sobre virtual. 105 00:04:32,960 --> 00:04:35,854 En el exterior de ese sobre ir un par de piezas de detalles. 106 00:04:35,854 --> 00:04:37,770 Lo que tiene que ir en la sobre, por así decirlo, 107 00:04:37,770 --> 00:04:41,820 a fin de obtener una petición como esto de mí a un servidor web? 108 00:04:41,820 --> 00:04:42,320 Sí. 109 00:04:42,320 --> 00:04:43,270 >> AUDIENCIA: Tu dirección IP. 110 00:04:43,270 --> 00:04:45,890 >> DAVID J MALAN: Mi dirección IP en el campo, por así decirlo, 111 00:04:45,890 --> 00:04:49,490 y, por supuesto, la la dirección IP del destinatario. 112 00:04:49,490 --> 00:04:52,710 Pero en el caso de un paquete de web, necesitamos un poco más de detalle 113 00:04:52,710 --> 00:04:55,254 No es suficiente sólo para enviar un sobre a un servidor, 114 00:04:55,254 --> 00:04:57,670 porque dicho servidor podría ser escuchar para diferentes tipos 115 00:04:57,670 --> 00:04:59,180 del tráfico de Internet. 116 00:04:59,180 --> 00:05:01,370 Entonces, ¿qué más necesitamos además de IP del destinatario? 117 00:05:01,370 --> 00:05:02,723 118 00:05:02,723 --> 00:05:03,222 ¿Sí? 119 00:05:03,222 --> 00:05:04,241 >> AUDIENCIA: ¿Es 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 >> AUDIENCIA: Dirección. 123 00:05:07,340 --> 00:05:09,340 >> DAVID J MALAN: Dirección, o el puerto, como se le llama. 124 00:05:09,340 --> 00:05:11,010 Cerca, pero un número de puerto TCP. 125 00:05:11,010 --> 00:05:12,220 Y hay un montón de ellos. 126 00:05:12,220 --> 00:05:14,310 Pero sin duda el más debe familiarizarse con el tiempo 127 00:05:14,310 --> 00:05:17,590 sea ​​80, que es el valor por defecto que se utiliza para el tráfico de Internet. 128 00:05:17,590 --> 00:05:20,040 Y otra familiarizado uno pronto habrá 443, 129 00:05:20,040 --> 00:05:24,280 que se utiliza para web seguro el tráfico, las direcciones URL que comienzan con https. 130 00:05:24,280 --> 00:05:26,650 >> Así que esto es lo que pasa dentro de ese sobre. 131 00:05:26,650 --> 00:05:29,780 Y obtener / sólo significa, dar Me la página web por defecto. 132 00:05:29,780 --> 00:05:32,700 Dame la raíz del disco conducir en ese servidor web. 133 00:05:32,700 --> 00:05:36,050 Y es de esperar, la web servidor responderá con, OK 134 00:05:36,050 --> 00:05:39,630 y el número 200, que está justo una convención diciendo, sí, todo 135 00:05:39,630 --> 00:05:40,470 es de hecho bien. 136 00:05:40,470 --> 00:05:41,680 Aquí está la página. 137 00:05:41,680 --> 00:05:45,510 El tipo de la página web va a ser texto, pero más específicamente, HTML, 138 00:05:45,510 --> 00:05:47,010 que estamos a punto de sumergirse de nuevo en. 139 00:05:47,010 --> 00:05:49,877 Y el punto punto punto justo medios, aquí está el código HTML. 140 00:05:49,877 --> 00:05:51,710 Y ahí es donde estamos recoger la historia de hoy, 141 00:05:51,710 --> 00:05:55,740 realmente escribir HTML, HyperText Markup Language, que 142 00:05:55,740 --> 00:05:57,727 es el idioma en el que páginas web están escritas. 143 00:05:57,727 --> 00:05:59,060 No es un lenguaje de programación. 144 00:05:59,060 --> 00:06:01,270 No hay funciones o bucles o condiciones. 145 00:06:01,270 --> 00:06:03,800 Es un lenguaje de marcado, así de nuevo ver hoy en día, 146 00:06:03,800 --> 00:06:07,240 que le permite especificar cómo estructurar y estilizar 147 00:06:07,240 --> 00:06:09,300 estéticamente una página web. 148 00:06:09,300 --> 00:06:11,470 >> Así que este era el único y sólo la página que realmente 149 00:06:11,470 --> 00:06:13,930 mirado, aunque brevemente, el lunes. 150 00:06:13,930 --> 00:06:16,250 Y notar algunos características sobresalientes. 151 00:06:16,250 --> 00:06:20,170 Hay un montón de ángulo abierto soporte y cerca del soporte en ángulo. 152 00:06:20,170 --> 00:06:23,160 Entre aquellos en ángulo paréntesis son palabras. 153 00:06:23,160 --> 00:06:25,660 Y vamos a empezar llamar a esas etiquetas de las palabras. 154 00:06:25,660 --> 00:06:28,800 Así cabeza soporte abierto y la cabeza del soporte cerrado 155 00:06:28,800 --> 00:06:33,620 son las etiquetas de apertura y cierre, o las etiquetas de inicio y fin 156 00:06:33,620 --> 00:06:37,660 respectivamente, de un elemento HTML, como lo vamos a llamar, llamada cabeza. 157 00:06:37,660 --> 00:06:41,760 Y se aplica la misma jerga al cuerpo en HTML y así sucesivamente. 158 00:06:41,760 --> 00:06:43,970 >> Y lo que es interesante es HTML-- y, de hecho, vamos a 159 00:06:43,970 --> 00:06:47,187 pasar terriblemente poco tiempo en él, porque vas a la mayoría sólo averiguar 160 00:06:47,187 --> 00:06:49,770 qué características tiene cuando realmente tienen un problema concreto 161 00:06:49,770 --> 00:06:52,820 a solve-- usted encontrará que un navegador es bastante tonto. 162 00:06:52,820 --> 00:06:56,450 Es sólo va a hacer-- no muy diferente un computer-- lo que usted le dice que haga. 163 00:06:56,450 --> 00:06:59,279 Y así, cuando usted tiene abierto HTML soporte en la parte superior 164 00:06:59,279 --> 00:07:01,320 allí, que esencialmente sólo significa, bueno, navegador, 165 00:07:01,320 --> 00:07:04,090 aquí viene una página web escrito en HTML. 166 00:07:04,090 --> 00:07:06,130 >> Cuando se ve el soporte abierto cabeza, que sólo significa, 167 00:07:06,130 --> 00:07:10,350 oye, navegador, aquí viene la cabeza, o la parte superior de mi página web. 168 00:07:10,350 --> 00:07:14,192 Cuando se ve un soporte cerrado cabeza, que sólo significa, bueno, 169 00:07:14,192 --> 00:07:15,150 eso es todo por la cabeza. 170 00:07:15,150 --> 00:07:16,420 En espera de algo más. 171 00:07:16,420 --> 00:07:18,878 Y ese algo más es al parecer va a ser el cuerpo. 172 00:07:18,878 --> 00:07:22,630 Y cuando usted no tiene una etiqueta, al igual que Tiene apenas hola, coma, mundo, 173 00:07:22,630 --> 00:07:26,610 que sólo va a ser texto sin formato que en última instancia, se visualiza en la pantalla. 174 00:07:26,610 --> 00:07:29,220 >> Ahora, usted notará demasiado la indentación aquí. 175 00:07:29,220 --> 00:07:32,160 Usted probablemente puede inferir cómo estamos estilizar ella. 176 00:07:32,160 --> 00:07:34,850 Cada vez que abro una etiqueta, por así decirlo, me sangría. 177 00:07:34,850 --> 00:07:38,540 Y cada vez que cerrar una etiqueta, yo no-guión, 178 00:07:38,540 --> 00:07:40,690 similares en espíritu a las llaves. 179 00:07:40,690 --> 00:07:43,470 Y más allá de eso, estoy un poco de utilizar mi juicio. 180 00:07:43,470 --> 00:07:48,380 Tenga en cuenta que no me molesté en golpear Introduzca el interior de esa etiqueta del título. 181 00:07:48,380 --> 00:07:48,990 ¿Por qué? 182 00:07:48,990 --> 00:07:51,920 Bueno, yo decidí que parecía un poco más limpio para mí, el ser humano, 183 00:07:51,920 --> 00:07:53,181 para no molestar a hacer eso. 184 00:07:53,181 --> 00:07:54,930 Así que de nuevo, hay un poco de llama juicio justo 185 00:07:54,930 --> 00:07:57,670 como existe en C o en cualquier idioma. 186 00:07:57,670 --> 00:08:04,110 >> Pero nótese también que esta sangría se presta a un modelo mental, 187 00:08:04,110 --> 00:08:05,670 no sobre lo complican. 188 00:08:05,670 --> 00:08:07,020 Pero un árbol, ¿no? 189 00:08:07,020 --> 00:08:09,290 Si usted piensa en una web página, al parecer escrito 190 00:08:09,290 --> 00:08:12,050 así, como bien sangría de esa manera, 191 00:08:12,050 --> 00:08:17,390 casi se puede pensar en el soporte abierto HTML tag soporte cerrado se delimitan 192 00:08:17,390 --> 00:08:21,380 la raíz de un nodo, un árbol de familia nodo de estilo en el estilo de los árboles 193 00:08:21,380 --> 00:08:22,900 vimos el viernes pasado. 194 00:08:22,900 --> 00:08:27,630 >> Y, de hecho, tenemos a la derecha aquí lo que vamos a llamar a un DOM, D-O-M, documento 195 00:08:27,630 --> 00:08:31,680 modelo de objetos, una forma elegante de decir un árbol que representa que el HTML. 196 00:08:31,680 --> 00:08:36,140 Y note que HTML tiene, vamos a decir, como un árbol de familia, dos hijos. 197 00:08:36,140 --> 00:08:37,659 A la izquierda está la cabeza. 198 00:08:37,659 --> 00:08:39,179 A la derecha está el cuerpo. 199 00:08:39,179 --> 00:08:44,220 >> Y así como un ejercicio de pensamiento sin sentido, cabeza, por supuesto, tiene cuántos niños 200 00:08:44,220 --> 00:08:46,070 de acuerdo a esta estructura? 201 00:08:46,070 --> 00:08:48,200 Así que sólo uno, título-- y es por eso que tenemos 202 00:08:48,200 --> 00:08:50,580 la flecha que va desde la cabeza hasta el título. 203 00:08:50,580 --> 00:08:55,110 Así que es como si esa persona en el árbol de la familia tenía sólo una cría. 204 00:08:55,110 --> 00:08:58,230 Y a continuación, el título en sí puede se dice que tiene un niño también. 205 00:08:58,230 --> 00:09:01,780 >> Recordemos que el HTML tenía hola, coma, mundo debajo de ella. 206 00:09:01,780 --> 00:09:06,090 Y he simplemente dibujado dentro de un ovalada en lugar de sólo un rectángulo 207 00:09:06,090 --> 00:09:10,559 transmitir semánticamente que aunque se trata de un nodo en el árbol, por así decirlo, 208 00:09:10,559 --> 00:09:12,100 es una especie de fundamentalmente diferente. 209 00:09:12,100 --> 00:09:12,800 No es una etiqueta. 210 00:09:12,800 --> 00:09:14,780 O más bien, no es un elemento. 211 00:09:14,780 --> 00:09:16,590 Es sólo un nodo de texto, si se quiere. 212 00:09:16,590 --> 00:09:18,990 Pero estos son completamente convenciones humanas arbitrarias. 213 00:09:18,990 --> 00:09:23,180 Esto es sólo ahora mi forma de que representa lo que voy como un agregado 214 00:09:23,180 --> 00:09:24,340 llamar el documento. 215 00:09:24,340 --> 00:09:27,750 >> Y como un aparte, la cosa a la súper de la esquina superior izquierda, 216 00:09:27,750 --> 00:09:32,080 soporte abierto signo de exclamación doc tipo HTML, esto se parece a una etiqueta, 217 00:09:32,080 --> 00:09:35,560 pero es el caso estúpido esquina donde eso es justo allí, copiar y pegar 218 00:09:35,560 --> 00:09:38,460 para indicar los navegadores esta es la versión de HTML 5. 219 00:09:38,460 --> 00:09:41,540 El mundo no deja de cambiar lo que el primera línea de código en una página debe ser. 220 00:09:41,540 --> 00:09:43,820 Esto sólo significa que la versión 5. 221 00:09:43,820 --> 00:09:45,950 Por lo que no bastante parecerse a los demás. 222 00:09:45,950 --> 00:09:48,120 >> Muy bien, así que con eso Dijiste, podrás apreciar ahora 223 00:09:48,120 --> 00:09:50,767 esta bastante este estúpido tatuaje alguien consiguió. 224 00:09:50,767 --> 00:09:51,990 >> [Risas] 225 00:09:51,990 --> 00:09:54,210 >> DAVID J MALAN: Muy bien, y ahora vamos a realmente buceo 226 00:09:54,210 --> 00:09:55,710 a hacer algo con esto. 227 00:09:55,710 --> 00:09:58,610 Usted recordará que la última vez Abrí la Appliance CS50 228 00:09:58,610 --> 00:10:01,650 y yo hice algo como simple como abrir gedit. 229 00:10:01,650 --> 00:10:05,190 Y he salvado el archivo, incluso en mi desktop-- ninguna parte 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 >> Así que permítanme hacer eso nuevo-- hello.html Intro. 233 00:10:10,984 --> 00:10:13,900 Y ahora en este archivo, que voy a seguir adelante y repetir lo que acabamos de 234 00:10:13,900 --> 00:10:18,850 saw-- tipo doc html Entonces voy a hacer abierta html soporte soporte cerrado. 235 00:10:18,850 --> 00:10:21,890 Y luego voy a preventivamente abrir y cerrar la etiqueta. 236 00:10:21,890 --> 00:10:22,390 ¿Por qué? 237 00:10:22,390 --> 00:10:23,598 Sólo para que no me olvido más tarde. 238 00:10:23,598 --> 00:10:26,850 Es sólo una buena práctica, al igual que la apertura y el cierre de llaves todos a la vez. 239 00:10:26,850 --> 00:10:28,900 >> Y entonces, ¿qué vino después? 240 00:10:28,900 --> 00:10:30,582 Usted puede pensar en el tatuaje. 241 00:10:30,582 --> 00:10:31,450 >> AUDIENCIA: La cabeza. 242 00:10:31,450 --> 00:10:32,500 >> DAVID J MALAN: La cabeza. 243 00:10:32,500 --> 00:10:36,020 Y luego aquí, yo tenía el título, creo. 244 00:10:36,020 --> 00:10:39,886 Y el título fue arbitrariamente, hola, cerca del título mundial. 245 00:10:39,886 --> 00:10:42,760 Y luego aquí abajo, el cuerpo, de supuesto-- entonces cerramos la etiqueta body. 246 00:10:42,760 --> 00:10:45,660 Y a continuación, sólo un poco redundante, Tuve la misma cosa aquí abajo. 247 00:10:45,660 --> 00:10:47,150 >> Así que yo sostengo que esta es una página web. 248 00:10:47,150 --> 00:10:49,050 Esto es algo que ahora podrían vivir en la web, 249 00:10:49,050 --> 00:10:51,925 aunque, por supuesto, que es, literalmente, viviendo en mi escritorio en este momento. 250 00:10:51,925 --> 00:10:55,837 Pero de hecho, si puedo minimizar gedit, Voy a ver en mi escritorio en su icono. 251 00:10:55,837 --> 00:10:58,420 A pesar de que este es el aparato, usted puede hacer esto en Mac OS 252 00:10:58,420 --> 00:11:01,580 sin TextEdit o Bloc de notas de Windows con incluso. 253 00:11:01,580 --> 00:11:06,115 >> Y si me voy por delante y haga doble clic que, incluso, y select-- bien, vamos a 254 00:11:06,115 --> 00:11:07,990 No seleccione que debido Chrome no está abriendo. 255 00:11:07,990 --> 00:11:09,281 Vamos a seguir adelante y abrir Chrome. 256 00:11:09,281 --> 00:11:10,160 257 00:11:10,160 --> 00:11:14,040 Y luego hacer Comando + O para abrir Y navegar a mi escritorio 258 00:11:14,040 --> 00:11:15,320 y abrir ese archivo. 259 00:11:15,320 --> 00:11:20,120 Así es como interpreta un navegador HTML, de arriba a abajo, de izquierda a derecha. 260 00:11:20,120 --> 00:11:21,314 Hey, aquí está el navegador HTML. 261 00:11:21,314 --> 00:11:21,980 Aquí está la cabeza. 262 00:11:21,980 --> 00:11:23,250 Aquí está el título. 263 00:11:23,250 --> 00:11:24,090 Aquí está el cuerpo. 264 00:11:24,090 --> 00:11:26,620 Y, de hecho, así es como que hace que la página web. 265 00:11:26,620 --> 00:11:27,800 >> Pero note la URL. 266 00:11:27,800 --> 00:11:32,430 Ninguno de ustedes podría levantar este específico página en sus ordenadores portátiles en estos momentos, 267 00:11:32,430 --> 00:11:34,910 incluso en el interior de su aparato a través de dicha URL, 268 00:11:34,910 --> 00:11:40,130 porque file: // indica que es en realidad en mi sistema de archivos, el disco duro, 269 00:11:40,130 --> 00:11:40,990 no el tuyo. 270 00:11:40,990 --> 00:11:42,440 Así que esto no es del todo útil. 271 00:11:42,440 --> 00:11:44,940 >> Ahora vamos a avanzar hacia utilizando un servidor web real. 272 00:11:44,940 --> 00:11:48,309 Y resulta que el CS50 Appliance es algo más que un entorno en el 273 00:11:48,309 --> 00:11:51,100 usted puede escribir código en C y compilar y ejecutarlo como que has estado haciendo. 274 00:11:51,100 --> 00:11:55,500 También se ha configurado por el personal para representar una red típica 275 00:11:55,500 --> 00:11:58,290 servidor que está en el Internet, uno que podría pagar por 276 00:11:58,290 --> 00:12:00,210 o uno que está en la llamada nube. 277 00:12:00,210 --> 00:12:02,600 >> Y se está ejecutando libre de código abierto estándar 278 00:12:02,600 --> 00:12:06,160 software, por ejemplo, algo llamado Apache, que es tal vez 279 00:12:06,160 --> 00:12:08,700 todavía la web más popular software de servidor en el mundo 280 00:12:08,700 --> 00:12:11,030 que miles de sitios web utilizan hoy en día. 281 00:12:11,030 --> 00:12:13,420 Y también tiene incluso software como MySQL, 282 00:12:13,420 --> 00:12:16,240 que es un servidor de base de datos que con el tiempo vamos a llegar, 283 00:12:16,240 --> 00:12:18,330 que no es más que decir Puedo empezar a tratar 284 00:12:18,330 --> 00:12:22,040 mi aparato como un servidor de pleno derecho que yo no estoy pagando por otra parte. 285 00:12:22,040 --> 00:12:25,980 Sólo vive en mi propio ordenador portátil para con fines de desarrollo y de conveniencia. 286 00:12:25,980 --> 00:12:27,870 >> Así que vamos a seguir adelante y tomar ventaja de esto. 287 00:12:27,870 --> 00:12:30,120 Voy a seguir adelante y abrir una ventana de terminal. 288 00:12:30,120 --> 00:12:33,030 Y yo voy a seguir adelante y move-- realidad, en primer lugar yo soy 289 00:12:33,030 --> 00:12:34,860 ir a navegar a mi escritorio. 290 00:12:34,860 --> 00:12:36,400 Si hago ls, hay hello.html. 291 00:12:36,400 --> 00:12:37,022 292 00:12:37,022 --> 00:12:38,730 Y yo voy a ir adelante y empezar a utilizar 293 00:12:38,730 --> 00:12:40,800 un nuevo directorio que hemos no se utiliza antes de hoy. 294 00:12:40,800 --> 00:12:46,840 >> hello.html-- voy a mover a ../vhosts para hosts-- virtuales 295 00:12:46,840 --> 00:12:50,940 más sobre esto en el futuro-- y después en un directorio llamado localhost, 296 00:12:50,940 --> 00:12:54,420 que es el apodo dado a casi cualquier ordenador, ya sea un Mac, PC, 297 00:12:54,420 --> 00:12:57,560 o Linux, y luego específicamente en un directorio que nosotros, 298 00:12:57,560 --> 00:13:01,260 el personal ya creado para usted cuando descargó el aparato llamado 299 00:13:01,260 --> 00:13:01,760 público. 300 00:13:01,760 --> 00:13:04,551 Y como su nombre lo sugiere, nada Me puse en esta carpeta, en teoría, 301 00:13:04,551 --> 00:13:07,790 va a ser ahora público, al menos a las personas 302 00:13:07,790 --> 00:13:10,030 que tienen una directa conexión con el ordenador. 303 00:13:10,030 --> 00:13:13,160 >> Así que ahora me dejes ir por delante y hacer cd a ese mismo directorio 304 00:13:13,160 --> 00:13:15,490 para que yo pueda ver lo que hay pasando y ls tipo. 305 00:13:15,490 --> 00:13:17,630 Y, de hecho, esa es la Lo único en que hay. 306 00:13:17,630 --> 00:13:23,250 Afirmo ahora que ya he puesto este hello.html presentar dentro de un directorio 307 00:13:23,250 --> 00:13:26,940 llamado público dentro de un directorio llamado localhost en el interior de un directorio 308 00:13:26,940 --> 00:13:29,810 llamados vhosts, que gracias al personal CS50 309 00:13:29,810 --> 00:13:34,390 ha sido pre-configurado para ser la raíz de su servidor web, 310 00:13:34,390 --> 00:13:36,900 Puedo espero hacer ahora esto. 311 00:13:36,900 --> 00:13:38,390 >> Voy a abrir una nueva pestaña. 312 00:13:38,390 --> 00:13:40,090 Y yo voy a ir a no presentar: //. 313 00:13:40,090 --> 00:13:44,520 Voy a utilizar real http / localhost, que 314 00:13:44,520 --> 00:13:47,470 de nuevo, es el apodo para mi propio servidor. 315 00:13:47,470 --> 00:13:51,085 Y luego me voy a ir a lo el nombre del archivo, sólo para ser claros? 316 00:13:51,085 --> 00:13:52,680 317 00:13:52,680 --> 00:13:54,320 ¿Dónde está esta historia probablemente va? 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 >> Así que en otras palabras, quiero ahora esto es mi propio ordenador, mi propio aparato, 322 00:14:04,270 --> 00:14:05,660 como si se trata de un servidor real. 323 00:14:05,660 --> 00:14:07,490 Su apodo es localhost. 324 00:14:07,490 --> 00:14:10,210 Pero pensar en localhost como como Facebook.com google.com, lo que sea. 325 00:14:10,210 --> 00:14:11,600 Es sólo mi nombre local. 326 00:14:11,600 --> 00:14:14,810 Y luego la final lo que quiero es en la raíz del disco duro, por así decirlo, 327 00:14:14,810 --> 00:14:17,729 o la raíz del servidor web, ergo la barra diagonal y después 328 00:14:17,729 --> 00:14:18,770 el nombre del archivo hello.html. 329 00:14:18,770 --> 00:14:19,880 330 00:14:19,880 --> 00:14:21,930 >> Permítanme Alejar y pulsa enter. 331 00:14:21,930 --> 00:14:24,266 Y, en efecto, no es ahora mi página web. 332 00:14:24,266 --> 00:14:25,390 Así que es un poco diferente. 333 00:14:25,390 --> 00:14:26,880 Y es igual de decepcionante. 334 00:14:26,880 --> 00:14:27,904 Esta es la versión antigua. 335 00:14:27,904 --> 00:14:29,070 Déjame reducir el tamaño del tipo de letra espalda. 336 00:14:29,070 --> 00:14:29,745 Esta es la edad. 337 00:14:29,745 --> 00:14:30,890 Esta es la nueva. 338 00:14:30,890 --> 00:14:35,430 Pero lo que está sucediendo, fundamentalmente, ahora es que se está utilizando HTTP. 339 00:14:35,430 --> 00:14:39,344 >> Vamos a hacer esto un poco más claro o, si se quiere, un poco más complicado. 340 00:14:39,344 --> 00:14:41,760 Déjame ir a la parte inferior derecha esquina de mi aparato. 341 00:14:41,760 --> 00:14:44,000 Y darse cuenta de que todo esto tiempo, ha habido un número. 342 00:14:44,000 --> 00:14:47,330 Esa es la dirección única de su Appliance CS50. 343 00:14:47,330 --> 00:14:50,800 Es una dirección privada, como se deduce de la 172.16, 344 00:14:50,800 --> 00:14:53,860 que sólo significa que usted sólo físicamente puede acceder a este servidor web. 345 00:14:53,860 --> 00:14:56,340 Todo es un cortafuegos y muy bien protegida del resto 346 00:14:56,340 --> 00:14:58,130 del mundo a causa de este direccionamiento. 347 00:14:58,130 --> 00:15:01,920 >> Y ahora note aunque si voy a esta dirección, no en mi aparato, 348 00:15:01,920 --> 00:15:04,340 pero en Mac OS-- voy volver por aquí. 349 00:15:04,340 --> 00:15:05,930 Este es mi Mac ahora. 350 00:15:05,930 --> 00:15:08,460 Y ahora voy a abrir esta versión de Chrome aquí. 351 00:15:08,460 --> 00:15:17,370 Y yo voy a ir a http: //172.16.25 / Y me olvido de la rest-- 133. 352 00:15:17,370 --> 00:15:25,210 >> Así que voy a visitar de mi Mac que la dirección IP /hello.html Intro. 353 00:15:25,210 --> 00:15:29,850 Y ahora que veo desde mi Mac que mi CS50 Appliance, que es 354 00:15:29,850 --> 00:15:32,600 Dirección IP es que número, es, en efecto comportándose 355 00:15:32,600 --> 00:15:34,320 como un servidor web en el Internet. 356 00:15:34,320 --> 00:15:36,944 No tiene un bonito fácil recordar el nombre como Facebook.com, 357 00:15:36,944 --> 00:15:40,370 pero se está utilizando HTTP al parecer, a pesar de que Chrome 358 00:15:40,370 --> 00:15:43,560 es una especie de simplificación del mundo para nosotros, pero no nos muestra HTTP. 359 00:15:43,560 --> 00:15:46,210 Pero esto es de hecho exactamente eso. 360 00:15:46,210 --> 00:15:48,470 Chrome se acaba salvando algunos pulsaciones en estos días. 361 00:15:48,470 --> 00:15:50,530 Y eso es lo que ahora vemos. 362 00:15:50,530 --> 00:15:51,890 >> Así que eso es todo bien y bueno. 363 00:15:51,890 --> 00:15:53,740 Pero es una página bastante decepcionante. 364 00:15:53,740 --> 00:15:56,230 Déjame ir y hacer algo un poco diferente ahora. 365 00:15:56,230 --> 00:15:57,910 Así que permítanme volver a gedit. 366 00:15:57,910 --> 00:16:00,580 Y en vez de hola, mundo, vamos a poner una imagen. 367 00:16:00,580 --> 00:16:05,880 Y yo reclamé desde antes-- dejarme ir en mi directorio público localhost. 368 00:16:05,880 --> 00:16:10,580 Y déjame ir adelante y copio un toda montón de archivos a partir de hoy 369 00:16:10,580 --> 00:16:15,633 de mi carpeta de Dropbox en aquí. 370 00:16:15,633 --> 00:16:19,470 371 00:16:19,470 --> 00:16:21,680 >> Ahora bien, si escribo ls, mirar en todos estos archivos 372 00:16:21,680 --> 00:16:24,940 que he distribuido por la el sitio web del curso antes de hoy en día, 373 00:16:24,940 --> 00:16:26,830 uno de los cuales es todavía hello.html. 374 00:16:26,830 --> 00:16:27,830 Así que hay que uno. 375 00:16:27,830 --> 00:16:30,730 Y recordar este tonto de última cat.jpg tiempo--. 376 00:16:30,730 --> 00:16:34,550 Así que voy a tratar de integrar cat.jpg dentro de mi página web. 377 00:16:34,550 --> 00:16:37,690 >> Voy a seguir adelante y hacer cat.jpg, ahorrar. 378 00:16:37,690 --> 00:16:38,950 Permítanme volver a Chrome. 379 00:16:38,950 --> 00:16:41,140 Y permítanme zoom en la fuente y ahora recargar. 380 00:16:41,140 --> 00:16:43,090 381 00:16:43,090 --> 00:16:45,030 Vaya, donde pongo esto? 382 00:16:45,030 --> 00:16:48,210 383 00:16:48,210 --> 00:16:51,520 Standby-- Todavía tengo la edad versión de mi escritorio abierto. 384 00:16:51,520 --> 00:16:56,020 Así que me dejes ir a mi host virtual, mi localhost, mi público, y hello.html. 385 00:16:56,020 --> 00:16:57,320 386 00:16:57,320 --> 00:17:00,670 Así que ahora me dejes ir por delante y decir cat.jpg interior del cuerpo 387 00:17:00,670 --> 00:17:02,830 donde yo quiero que sea mostrado y volver a cargar. 388 00:17:02,830 --> 00:17:04,560 Por supuesto, esto no es correcto. 389 00:17:04,560 --> 00:17:08,050 >> Así que tengo que decirle al navegador un poco más deliberadamente lo que yo quiero que haga. 390 00:17:08,050 --> 00:17:10,210 Simplemente escribiendo el nombre es obviamente no suficiente. 391 00:17:10,210 --> 00:17:15,134 Así que recuerda que había otro etiqueta, imagen, img, para abreviar. 392 00:17:15,134 --> 00:17:17,550 Eso es simplemente porque los seres humanos no les gusta las palabras llenas de tipos. 393 00:17:17,550 --> 00:17:19,050 Y luego podemos hacer fuente = "cat.jpg". 394 00:17:19,050 --> 00:17:21,470 395 00:17:21,470 --> 00:17:23,550 >> Y ahora me voy a hacer una cosa diferente aquí. 396 00:17:23,550 --> 00:17:25,390 A pesar de que todos nuestras etiquetas hasta el momento tienen 397 00:17:25,390 --> 00:17:28,086 tenido esta noción de un comenzar la etiqueta y una etiqueta final, 398 00:17:28,086 --> 00:17:30,210 que en realidad no hacen sentido de una imagen, ¿verdad? 399 00:17:30,210 --> 00:17:32,430 Una imagen es o existe o no existe. 400 00:17:32,430 --> 00:17:36,650 Y por lo que los seres humanos han llegado con una convención más simple. 401 00:17:36,650 --> 00:17:40,310 Cuando usted tiene una etiqueta que puede tanto empezar y terminar al mismo tiempo-- 402 00:17:40,310 --> 00:17:43,790 puede estar vacío, por lo que sólo speak-- poner la barra diagonal dentro de la etiqueta 403 00:17:43,790 --> 00:17:44,710 en el final. 404 00:17:44,710 --> 00:17:45,776 405 00:17:45,776 --> 00:17:47,150 Ahora voy a volver a mi navegador. 406 00:17:47,150 --> 00:17:50,377 Hit Recargar Maldita sea, algo está mal. 407 00:17:50,377 --> 00:17:52,460 Usted probablemente ha visto esto de vez en cuando en la web, 408 00:17:52,460 --> 00:17:53,600 aunque no ha sido culpa tuya. 409 00:17:53,600 --> 00:17:54,766 Es culpa del servidor web. 410 00:17:54,766 --> 00:17:56,240 ¿Qué odas este parece indicar? 411 00:17:56,240 --> 00:17:57,450 412 00:17:57,450 --> 00:17:58,009 Es roto. 413 00:17:58,009 --> 00:17:59,300 Ahí es donde la imagen pertenece. 414 00:17:59,300 --> 00:17:59,700 ¿Sí? 415 00:17:59,700 --> 00:18:01,560 >> AUDIENCIA: Pero no lo hace tener acceso a la imagen. 416 00:18:01,560 --> 00:18:03,070 >> DAVID J MALAN: No hace tener acceso a la imagen. 417 00:18:03,070 --> 00:18:05,230 Eso, o peor aún, tal vez que ni siquiera existe. 418 00:18:05,230 --> 00:18:06,729 Vamos a ver si no podemos diagnosticar eso. 419 00:18:06,729 --> 00:18:09,390 Recordemos de la última vez que si en Chrome, en el aparato, 420 00:18:09,390 --> 00:18:11,870 o incluso en tu Mac o PC, vas al menú de desarrollador 421 00:18:11,870 --> 00:18:14,650 e ir a las Herramientas de Desarrollo opción, que probablemente tienes 422 00:18:14,650 --> 00:18:16,850 no se utiliza mucho o nunca. 423 00:18:16,850 --> 00:18:20,780 Y si voy a la red y volver a cargar la página, 424 00:18:20,780 --> 00:18:24,110 vamos a ver la realidad de HTTP peticiones que se están realizando. 425 00:18:24,110 --> 00:18:28,400 >> Parece que es hello.html de hecho bien, por lo tanto, el 200. 426 00:18:28,400 --> 00:18:30,630 Pero cat.jpg es un 403. 427 00:18:30,630 --> 00:18:31,650 Así que no es un 404. 428 00:18:31,650 --> 00:18:33,490 File probablemente existe. 429 00:18:33,490 --> 00:18:35,250 403 significa prohibido. 430 00:18:35,250 --> 00:18:37,790 Así que esto es un poco confuso. 431 00:18:37,790 --> 00:18:42,340 Voy a volver a mi ventana de terminal. 432 00:18:42,340 --> 00:18:43,700 Permítanme acercarse hasta aquí. 433 00:18:43,700 --> 00:18:44,750 Y déjame hacer un ls. 434 00:18:44,750 --> 00:18:46,430 Hay esos mismos archivos. 435 00:18:46,430 --> 00:18:49,410 >> Ahora déjame hacer un ls-l, que usted probablemente 436 00:18:49,410 --> 00:18:53,350 utilizado antes de mirar a archivo tamaños o tal vez las marcas de tiempo. 437 00:18:53,350 --> 00:18:55,590 Y vemos un montón de información abrumadora. 438 00:18:55,590 --> 00:18:57,040 Pero notar algunos detalles. 439 00:18:57,040 --> 00:19:01,660 Aquí está hello.html en este remar aquí y aquí está cat.jpg. 440 00:19:01,660 --> 00:19:02,934 441 00:19:02,934 --> 00:19:05,850 Y es sólo el aparato siendo fácil de usar, poniendo de relieve JPEG 442 00:19:05,850 --> 00:19:07,380 en púrpura como este. 443 00:19:07,380 --> 00:19:11,470 Pero ¿qué otra cosa es diferente al lado el tamaño del archivo y el nombre del archivo? 444 00:19:11,470 --> 00:19:13,438 445 00:19:13,438 --> 00:19:14,754 >> AUDIENCIA: [inaudible]. 446 00:19:14,754 --> 00:19:16,920 DAVID J MALAN: Sí, hay dos de aquí R más. 447 00:19:16,920 --> 00:19:20,170 Note lo que ha hello.html pasando. 448 00:19:20,170 --> 00:19:24,050 Así que resulta que el nombre de este directorio público es importante. 449 00:19:24,050 --> 00:19:26,400 Cualquier cosa en este directorio está destinado a ser público. 450 00:19:26,400 --> 00:19:28,790 Pero no es suficiente sólo para soltar los archivos en allí. 451 00:19:28,790 --> 00:19:31,480 También es necesario cambiar el modo de los archivos, 452 00:19:31,480 --> 00:19:35,180 cambiar los permisos de el archivo en forma proactiva no 453 00:19:35,180 --> 00:19:37,650 ser la configuración por defecto, que es que sólo puedo leer 454 00:19:37,650 --> 00:19:39,220 y escribir, yo siendo el propietario. 455 00:19:39,220 --> 00:19:43,540 Quiero que todo el mundo a todo el mundo ser capaz de leer mi archivo, por así decirlo. 456 00:19:43,540 --> 00:19:44,950 Leer sólo significa verlo. 457 00:19:44,950 --> 00:19:49,780 >> Y, de hecho, como se verá en el problema establece siete, eso es lo que media de estos R. 458 00:19:49,780 --> 00:19:53,160 Significan estos dos R que todo el mundo otra parte del mundo también leerlo, 459 00:19:53,160 --> 00:19:55,300 sobre todo ahora que que es en este directorio. 460 00:19:55,300 --> 00:19:59,620 Así que la forma más sencilla de solucionar este problema es ir a mi pronta y hacer chmod para el cambio 461 00:19:59,620 --> 00:20:05,580 modo y luego hacen un + r, en conjunto, todos, todos, además de r para lectura, 462 00:20:05,580 --> 00:20:07,944 y luego cat.jpg Intro. 463 00:20:07,944 --> 00:20:10,360 Nada parece suceder, que por lo general significa una buena cosa. 464 00:20:10,360 --> 00:20:13,850 Así ls-l nuevo-- ahora echemos un vistazo a cat.jpg. 465 00:20:13,850 --> 00:20:15,750 Y este permiso parecen haber cambiado. 466 00:20:15,750 --> 00:20:18,670 Como acotación al margen, si usted hace una error y que, por ejemplo, 467 00:20:18,670 --> 00:20:23,210 Acabo de hacer tu-- No sé-- ensayo públicamente accesible por accidente, 468 00:20:23,210 --> 00:20:25,480 usted puede hacer lo contrario, chmod a-r. 469 00:20:25,480 --> 00:20:25,909 470 00:20:25,909 --> 00:20:28,200 Aunque, francamente, no debería estar en el directorio público 471 00:20:28,200 --> 00:20:29,760 de todos modos, si esa es la preocupación. 472 00:20:29,760 --> 00:20:32,475 >> Así que ahora vamos a volver a mi navegador y recarga. 473 00:20:32,475 --> 00:20:32,904 474 00:20:32,904 --> 00:20:34,820 Y yo voy a hacer clic el pequeño Cazafantasmas 475 00:20:34,820 --> 00:20:38,030 símbolo para borrar la parte de la pantalla para que podamos ver nuevas solicitudes. 476 00:20:38,030 --> 00:20:40,630 Y, de hecho, aquí está Gato gruñón de antes. 477 00:20:40,630 --> 00:20:43,010 Pero lo más importante, técnicamente, no es 478 00:20:43,010 --> 00:20:45,565 el número 200, que significa que conseguimos en Aceptar. 479 00:20:45,565 --> 00:20:47,190 Muy bien, así que eso es todo bien y bueno. 480 00:20:47,190 --> 00:20:48,940 Pero no estamos haciendo el mejor de los sitios web, 481 00:20:48,940 --> 00:20:51,967 ni vamos a probar demasiado difícil hacer el más lujoso de los sitios web de hoy en día. 482 00:20:51,967 --> 00:20:54,550 Pero vamos a por lo menos hacer algo súper familiarizados antes traqueteo 483 00:20:54,550 --> 00:20:56,030 fuera de algunas otras etiquetas. 484 00:20:56,030 --> 00:20:58,470 Así que supongo que no sólo quiero un gato aquí. 485 00:20:58,470 --> 00:21:02,530 Supongamos que realmente quiero esto gato para enlazar a algo. 486 00:21:02,530 --> 00:21:07,210 >> Yo podría, por ejemplo, hacer algo como esto. 487 00:21:07,210 --> 00:21:08,580 488 00:21:08,580 --> 00:21:12,890 una para href ancla para equals-- referencia hiper 489 00:21:12,890 --> 00:21:17,440 y vamos a hacer algo como www.google.com cerca 490 00:21:17,440 --> 00:21:19,540 citar corchete de cierre. 491 00:21:19,540 --> 00:21:22,000 Y ahora buscar gatos. 492 00:21:22,000 --> 00:21:23,520 Cerrar etiqueta de anclaje. 493 00:21:23,520 --> 00:21:26,760 Así que esto tiene solamente una especie de fundamentalmente nuevo detalle. 494 00:21:26,760 --> 00:21:28,190 La etiqueta, por supuesto, es diferente. 495 00:21:28,190 --> 00:21:31,770 Es el nombre de una de ancla referencia href o hiper. 496 00:21:31,770 --> 00:21:35,269 >> Pero lo más importante, no hay esta característica sintáctica aquí. 497 00:21:35,269 --> 00:21:37,810 Esto es lo que vamos a empezar a llamar no una etiqueta, sino un atributo. 498 00:21:37,810 --> 00:21:40,830 Y un atributo es algo que modifica el comportamiento de una variable. 499 00:21:40,830 --> 00:21:45,400 Y este atributo, href, medios modificar el comportamiento de este anclaje 500 00:21:45,400 --> 00:21:48,430 de modo que cuando se hace clic, que va a esta URL aquí. 501 00:21:48,430 --> 00:21:50,330 Y, por supuesto, que la URL es Google. 502 00:21:50,330 --> 00:21:53,951 >> Mientras tanto, ¿qué es esto texto aquí va a ser? 503 00:21:53,951 --> 00:21:55,950 Bueno, eso va a ser lo que la realidad humana 504 00:21:55,950 --> 00:21:58,470 ve como el subrayado enlace, tan simple como eso. 505 00:21:58,470 --> 00:21:59,220 Así que vamos a probar esto. 506 00:21:59,220 --> 00:21:59,980 Permítanme guardarlo. 507 00:21:59,980 --> 00:22:01,650 Todavía estoy en hello.html. 508 00:22:01,650 --> 00:22:05,360 Sin embargo, en las versiones en línea, verás los nombres de los archivos reales que previamente preparada. 509 00:22:05,360 --> 00:22:06,805 Déjame ir por delante y volver a cargar. 510 00:22:06,805 --> 00:22:08,680 Y ahora es un muy página decepcionante aún. 511 00:22:08,680 --> 00:22:10,910 Pero si se ciernen sobre allí-- y que es un poco pequeña, 512 00:22:10,910 --> 00:22:13,576 pero- se puede ver en la parte inferior esquina izquierda de la pantalla, 513 00:22:13,576 --> 00:22:15,242 que ha hecho de ir a google.com. 514 00:22:15,242 --> 00:22:19,280 Y si hago clic en eso, lo hará me bata camino a la real Google. 515 00:22:19,280 --> 00:22:22,610 >> Pero nótese aquí una oportunidad para la explotación, así como un aparte. 516 00:22:22,610 --> 00:22:25,150 Y volveremos a otra temas de seguridad dentro de poco. 517 00:22:25,150 --> 00:22:29,290 Porque no esta dicotomía entre el lugar donde vas y lo que usted dice, 518 00:22:29,290 --> 00:22:34,722 usted podría hacer algo como esto-- http://www.google.com. 519 00:22:34,722 --> 00:22:37,134 Bien, y ahora si vuelvo a cargar después de guardar esa página, 520 00:22:37,134 --> 00:22:38,800 parece que me voy a ir a Google. 521 00:22:38,800 --> 00:22:40,966 Pero no hay ninguna razón por la que tener que ir a Google, ¿no? 522 00:22:40,966 --> 00:22:47,460 De hecho, me podría ir a algo así como badguy.com, vuelva a cargar la página aquí. 523 00:22:47,460 --> 00:22:49,750 Y fíjense, todavía se ve como Google. 524 00:22:49,750 --> 00:22:52,020 Y sólo si estoy fuerte lo suficiente para asomar por aquí 525 00:22:52,020 --> 00:22:54,770 puedo ver que es incluso ir a ir a un lugar diferente. 526 00:22:54,770 --> 00:22:57,400 >> Así que si alguna vez has metido un correo electrónico, en especial 527 00:22:57,400 --> 00:22:59,610 uno de Paypal, o aparentemente de PayPal 528 00:22:59,610 --> 00:23:01,830 pidiéndole que ingrese en su cuenta, esta 529 00:23:01,830 --> 00:23:06,380 es por eso que nunca debe nunca haga clic en enlaces en correos electrónicos, 530 00:23:06,380 --> 00:23:07,930 francamente, los enlaces en los correos electrónicos. 531 00:23:07,930 --> 00:23:10,380 Si usted sabe que tiene real dinero en Paypal o Banco 532 00:23:10,380 --> 00:23:14,250 de América o fidelidad o cualquier sitio web, escribir manualmente en. 533 00:23:14,250 --> 00:23:17,530 Debido a que se vea lo fácil que es engañar a alguien en la presentación de lo que 534 00:23:17,530 --> 00:23:18,526 se parece a un enlace. 535 00:23:18,526 --> 00:23:20,400 Pero lo que realmente podía ir absolutamente en cualquier sitio. 536 00:23:20,400 --> 00:23:23,301 >> Y hay mucho más amenazas que esto. 537 00:23:23,301 --> 00:23:25,300 De hecho, este es un poco de una tangente ahora, pero uno 538 00:23:25,300 --> 00:23:28,430 de los mejores que he visto que ya se ha cerrado, 539 00:23:28,430 --> 00:23:34,060 es alguien llevado a la gente a-- por lo que este podría decir, 540 00:23:34,060 --> 00:23:37,660 haga clic aquí para acceder a su cuenta, una cuenta bancaria. 541 00:23:37,660 --> 00:23:40,985 Y este fue el Banco de Occidente. 542 00:23:40,985 --> 00:23:43,030 543 00:23:43,030 --> 00:23:44,250 >> Así que alguien compró esto. 544 00:23:44,250 --> 00:23:47,090 Y es un poco más fácil de ver que en una fuente mono espaciada zoom 545 00:23:47,090 --> 00:23:49,190 en en un proyector de 30 pies. 546 00:23:49,190 --> 00:23:51,720 Pero cuando es pequeña fuente en un dirección de correo electrónico que usted está recibiendo, 547 00:23:51,720 --> 00:23:54,690 esto parece bankofthewest.com, no bankofthevvest.com, 548 00:23:54,690 --> 00:23:58,230 que alguien había pagado $ 10 a comprar. 549 00:23:58,230 --> 00:24:00,840 Y entonces lo que les llevó a la equivalente a una mala página web. 550 00:24:00,840 --> 00:24:05,540 >> Y verás también-- realidad que podemos hacer esto-- si voy a la página web real, 551 00:24:05,540 --> 00:24:10,335 bankofthewest.com, de nuevo, el recuerdo de la última vez 552 00:24:10,335 --> 00:24:13,210 que si esta es su página web y usted es curioso en cuanto a cómo funciona, 553 00:24:13,210 --> 00:24:15,610 que sin duda puede ir a Herramientas para desarrolladores de Chrome. 554 00:24:15,610 --> 00:24:18,890 Y usted puede ver toda la HTML con un formato agradable allí. 555 00:24:18,890 --> 00:24:20,890 >> Pero más al punto, usted cam-- Cerremos 556 00:24:20,890 --> 00:24:24,760 esto-- usted puede ir para Ver Desarrollador Ver código fuente. 557 00:24:24,760 --> 00:24:25,770 558 00:24:25,770 --> 00:24:28,350 ¿Por qué no puedo simplemente copio todo eso y entonces yo 559 00:24:28,350 --> 00:24:31,630 puede entrar en mi pequeña ventana gedit aquí y hacer mi propia página web. 560 00:24:31,630 --> 00:24:33,210 Guarde esto en hello.html. 561 00:24:33,210 --> 00:24:36,770 Y probablemente esto va a romper, porque no es tan fácil por lo general. 562 00:24:36,770 --> 00:24:41,590 Pero ahora si vuelvo a cargar mi propia página en mi propia CS50 Appliance y recarga golpear, 563 00:24:41,590 --> 00:24:42,990 Bueno, algunas cosas se rompió. 564 00:24:42,990 --> 00:24:45,750 Pero estoy bastante cerca de tener mi propio sitio web bancario, ¿verdad? 565 00:24:45,750 --> 00:24:46,570 Todo esto HTML-- 566 00:24:46,570 --> 00:24:47,370 >> [Risas] 567 00:24:47,370 --> 00:24:49,210 >> DAVID J MALAN: --Yo no actually-- y usted 568 00:24:49,210 --> 00:24:52,210 saben que hay alguien por ahí que sería realmente haga clic en estos enlaces también. 569 00:24:52,210 --> 00:24:54,864 Así que claramente, algunas cosas se rompió. 570 00:24:54,864 --> 00:24:56,780 Pero eso va a conducir nosotros en una discusión, 571 00:24:56,780 --> 00:25:00,810 innecesariamente en este momento, en cuanto a lo CSS, hojas de estilo en cascada, son, 572 00:25:00,810 --> 00:25:03,410 y cómo en realidad descargar los otros archivos HTML 573 00:25:03,410 --> 00:25:06,140 y JPEG archivos GIF que el sitio web podría estar utilizando. 574 00:25:06,140 --> 00:25:07,960 Pero todo eso es realizable. 575 00:25:07,960 --> 00:25:11,110 Pero lo que realmente se reduce a estas muy simples heurísticas. 576 00:25:11,110 --> 00:25:14,450 >> Así que ahora vamos a leerlo a través de un par de otros ejemplos de HTML 577 00:25:14,450 --> 00:25:16,680 sólo para darle un sentido de qué otra cosa se puede hacer. 578 00:25:16,680 --> 00:25:18,670 Por ejemplo, este es list.html. 579 00:25:18,670 --> 00:25:23,240 Supongamos que yo quería hacer una página web con una lista de casas en el patio. 580 00:25:23,240 --> 00:25:28,960 Podría utilizar la etiqueta ul para desordenada lista y entonces el niño elemento de la lista 581 00:25:28,960 --> 00:25:33,760 y luego iterar over-- o lista, rather-- las casas en cuestión. 582 00:25:33,760 --> 00:25:36,080 >> Y si abro esto, vamos a hacer esto. 583 00:25:36,080 --> 00:25:40,670 Vamos a no hello.html, pero a list.html. 584 00:25:40,670 --> 00:25:42,160 Maldita sea. 585 00:25:42,160 --> 00:25:43,000 ¿Cómo puedo solucionar esto? 586 00:25:43,000 --> 00:25:45,679 587 00:25:45,679 --> 00:25:47,220 Es el mismo problema que antes, ¿verdad? 588 00:25:47,220 --> 00:25:52,510 Así que déjame hacer 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 Y ahora si me voy de vuelta a mi navegador y haga clic en Actualizar, ahí está. 591 00:25:59,610 --> 00:26:02,360 Así que si alguna vez has querido hacer una lista con viñetas, se puede hacer eso. 592 00:26:02,360 --> 00:26:06,210 Si quieres ser super lujoso y hacer una lista ordenada, no una lista desordenada, 593 00:26:06,210 --> 00:26:10,170 cambiar aquellos a ol, vuelva a cargar la página, y ahora el navegador numerar por usted. 594 00:26:10,170 --> 00:26:11,241 >> ¿Qué más podemos hacer? 595 00:26:11,241 --> 00:26:13,990 Bueno, un par de otros-- si tienes largos párrafos de texto-- 596 00:26:13,990 --> 00:26:15,698 Por ejemplo, algunos Texto latino como esto-- 597 00:26:15,698 --> 00:26:20,730 y quiere que en párrafos separados, p abierto, cerca de p para la etiqueta de párrafo. 598 00:26:20,730 --> 00:26:22,010 Y hacerlo una y otra vez. 599 00:26:22,010 --> 00:26:26,600 Y si ahora abro este archivo, paragraphs.html, bueno, esto 600 00:26:26,600 --> 00:26:27,570 es cada vez molesto. 601 00:26:27,570 --> 00:26:34,320 Así que ahora vamos a volver a mi pronta, chmod a + r r estrella .html-- 602 00:26:34,320 --> 00:26:36,099 un pequeño comodín por así decirlo. 603 00:26:36,099 --> 00:26:37,890 Se debe solucionar todos estos problemas para mí. 604 00:26:37,890 --> 00:26:38,990 Vamos a volver a cargar. 605 00:26:38,990 --> 00:26:40,500 Hay tres párrafos. 606 00:26:40,500 --> 00:26:42,930 >> Y ahora vamos a seguir adelante y abrir otro. 607 00:26:42,930 --> 00:26:44,310 ¿Qué hay de mesa? 608 00:26:44,310 --> 00:26:46,440 Se dará cuenta de las miradas de mesa un poco más complejo. 609 00:26:46,440 --> 00:26:49,110 Pero es la misma idea-- etiqueta abierta, etiqueta abierta, 610 00:26:49,110 --> 00:26:51,360 abierto, abierto, abierto, cerca de la etiqueta, etiqueta abierta. 611 00:26:51,360 --> 00:26:54,410 Y esto sucede en reposo durante tabla, cuya frontera es aparentemente 612 00:26:54,410 --> 00:26:58,500 va a ser un espesor 1-- cualquier que significa: fila de la tabla, tabla 613 00:26:58,500 --> 00:27:00,320 datos, lo que significa una célula. 614 00:27:00,320 --> 00:27:03,840 Y si vuelvo a mi navegador aquí e ir a table.html, 615 00:27:03,840 --> 00:27:05,840 se puede ver algo así, horrible. 616 00:27:05,840 --> 00:27:07,840 Pero vamos a llegar al punto donde podamos realmente 617 00:27:07,840 --> 00:27:09,260 hacer las cosas más bonitas que eso. 618 00:27:09,260 --> 00:27:10,530 >> Así que permítanme estipulo por ahora. 619 00:27:10,530 --> 00:27:11,870 Hay racimos de más etiquetas. 620 00:27:11,870 --> 00:27:15,225 Y HTML es maravilloso para recoger porque, francamente, todo lo que tiene que hacer 621 00:27:15,225 --> 00:27:17,600 es mirar a las páginas web existentes con el que está familiarizado. 622 00:27:17,600 --> 00:27:20,340 Y usted es como, ¡oh, así es como lo hicieron estéticamente. 623 00:27:20,340 --> 00:27:23,159 >> O usted puede buscar cualquier línea de recursos en cuanto a cómo funciona el HTML, 624 00:27:23,159 --> 00:27:25,700 y verás que hay una todo el vocabulario de otras etiquetas. 625 00:27:25,700 --> 00:27:30,110 Pero con el modelo mental sencillo solo que casi cualquier etiqueta se abre 626 00:27:30,110 --> 00:27:33,620 tiene que ser cerrado, lo que realmente no es suficiente para enseñar a uno mismo 627 00:27:33,620 --> 00:27:36,950 HTML después de entender estas ideas básicas de etiquetas 628 00:27:36,950 --> 00:27:40,520 y atributos y la buena formación que hemos hablado, 629 00:27:40,520 --> 00:27:44,697 nada de cerrar para que podamos abrir para que no confundamos un navegador. 630 00:27:44,697 --> 00:27:46,780 Así que vamos a tomar ahora esta a un nivel más interesante 631 00:27:46,780 --> 00:27:48,100 por ir a la real. 632 00:27:48,100 --> 00:27:51,095 Y vamos a ir a mi Mac aquí, a google.com. 633 00:27:51,095 --> 00:27:52,280 634 00:27:52,280 --> 00:27:54,020 Y ahora notice-- vamos a hacer esto. 635 00:27:54,020 --> 00:27:57,280 Estoy gong para ir a Configuración, Configuración de búsqueda. 636 00:27:57,280 --> 00:28:01,070 Quiero desactivar esta instantánea molesto resultados cosa donde inmediatamente 637 00:28:01,070 --> 00:28:02,450 comienza respondiendo a su escritura. 638 00:28:02,450 --> 00:28:05,300 Vamos a hacer esta escuela más viejo, así vemos realmente lo que está pasando. 639 00:28:05,300 --> 00:28:08,260 >> Así que me voy a salvar mi La configuración de Google aquí. 640 00:28:08,260 --> 00:28:11,160 Y ahora notice-- voy a buscar algo como gatos. 641 00:28:11,160 --> 00:28:14,500 Y todavía está haciendo auto completa aquí, pero sobre la base de las cosas 642 00:28:14,500 --> 00:28:15,970 la gente ha escrito en el pasado. 643 00:28:15,970 --> 00:28:17,490 Pero darse cuenta de lo que va a pasar. 644 00:28:17,490 --> 00:28:20,272 >> En la dirección URL en el momento es esto, sólo google.com. 645 00:28:20,272 --> 00:28:22,650 Y técnicamente, es barra. 646 00:28:22,650 --> 00:28:25,910 Google acaba de salvar a un personaje y no nosotros que mostrar. 647 00:28:25,910 --> 00:28:30,400 Ellos nos están mostrando https, sólo a ser super tranquilizador que estamos 648 00:28:30,400 --> 00:28:32,850 en una página segura o cifrada. 649 00:28:32,850 --> 00:28:35,690 >> Así que déjame ir por delante y la búsqueda de los gatos. 650 00:28:35,690 --> 00:28:37,670 Ahora bien, esto se puso muy abrumadora rápidamente. 651 00:28:37,670 --> 00:28:39,470 Mira la longitud de esta URL. 652 00:28:39,470 --> 00:28:43,070 Pero resulta que la mayor parte de este material en el URL es en realidad bastante inútil. 653 00:28:43,070 --> 00:28:45,320 Voy a empezar a borrar cosas que no entiendo. 654 00:28:45,320 --> 00:28:46,560 655 00:28:46,560 --> 00:28:47,360 Veo gatos. 656 00:28:47,360 --> 00:28:48,470 Entiendo gatos. 657 00:28:48,470 --> 00:28:50,380 No sé por qué los gatos son allí de nuevo. 658 00:28:50,380 --> 00:28:52,620 Realmente no lo sé lo que es esta tontería. 659 00:28:52,620 --> 00:28:56,030 Así que sólo voy a mantener destacando y eliminación de la materia 660 00:28:56,030 --> 00:28:59,905 que yo no entiendo, destilación de la URL en sólo esto. 661 00:28:59,905 --> 00:29:00,920 662 00:29:00,920 --> 00:29:02,270 >> Ahora voy a conseguir entrar de nuevo. 663 00:29:02,270 --> 00:29:03,814 Parece que Google sigue funcionando. 664 00:29:03,814 --> 00:29:06,980 Así que, por alguna razón, están agregando un montón de cosas que por defecto de su URL. 665 00:29:06,980 --> 00:29:09,000 Pero no es estrictamente necesario. 666 00:29:09,000 --> 00:29:10,340 Así que lo que es bueno acerca de esto? 667 00:29:10,340 --> 00:29:13,630 Bueno, déjame ir por delante y abrir el inspector de Chrome. 668 00:29:13,630 --> 00:29:15,960 Hay un pequeño atajo de ratón para ello. 669 00:29:15,960 --> 00:29:17,360 >> Ir a la ficha Red. 670 00:29:17,360 --> 00:29:19,340 Y ahora permítanme recargo esta página una vez más. 671 00:29:19,340 --> 00:29:20,280 Y yo estoy sosteniendo Shift. 672 00:29:20,280 --> 00:29:22,520 Como acotación al margen, navegadores tienden a almacenar en caché o guardar 673 00:29:22,520 --> 00:29:24,697 información sólo por el bien de la eficiencia. 674 00:29:24,697 --> 00:29:27,280 Pero por lo general, Shift y la celebración de recarga obligará a todo lo 675 00:29:27,280 --> 00:29:28,994 para empezar de nuevo desde el principio. 676 00:29:28,994 --> 00:29:30,410 Y eso es lo que quiero hacer aquí. 677 00:29:30,410 --> 00:29:33,550 >> Y cuenta todos estos filas que sólo aparecían. 678 00:29:33,550 --> 00:29:37,920 Resulta que en cualquier web determinada página, puede que haya un solo archivo 679 00:29:37,920 --> 00:29:43,500 involved-- hello.html-- o no podría ser 52, como en este caso. 680 00:29:43,500 --> 00:29:45,820 Cuando visito a google.com, al parecer, mi navegador 681 00:29:45,820 --> 00:29:49,650 arranca 52 peticiones HTTP separadas. 682 00:29:49,650 --> 00:29:50,520 Porqué es eso? 683 00:29:50,520 --> 00:29:53,380 >> Bueno, mira lo que hay dentro de esta página web hasta la parte superior. 684 00:29:53,380 --> 00:29:55,620 No hay sólo texto, pero no hay imágenes reales 685 00:29:55,620 --> 00:29:57,130 de gatos de más a la derecha. 686 00:29:57,130 --> 00:29:59,110 Hay un logotipo colorido hasta aquí a la izquierda. 687 00:29:59,110 --> 00:30:01,750 Hay todos estos iconos para un micrófono y así sucesivamente. 688 00:30:01,750 --> 00:30:05,130 Hay una gran cantidad de piezas, construcción de bloques, piezas de arañazos, si se quiere, 689 00:30:05,130 --> 00:30:06,250 a esta página web. 690 00:30:06,250 --> 00:30:10,310 Y lo que el navegador está haciendo en consiguiendo el primer archivo, que 691 00:30:10,310 --> 00:30:16,180 es esta fila aquí, es esencialmente iteración en la parte superior de HTML 692 00:30:16,180 --> 00:30:19,880 a abajo, de izquierda a derecha, en busca de cosas como las etiquetas de imagen u otras etiquetas 693 00:30:19,880 --> 00:30:23,160 que están mencionando otros archivos y cuando se los ve, va y les va a buscar 694 00:30:23,160 --> 00:30:26,050 a través de HTTP, toda viable metáfora sobre, 695 00:30:26,050 --> 00:30:29,670 y luego los muestra en la ubicación adecuada en la página web. 696 00:30:29,670 --> 00:30:33,370 >> Pero nótese aquí si me centro en los primeros gatos tiro, búsqueda, 697 00:30:33,370 --> 00:30:37,090 cuenta de que, de hecho, está utilizando HTTP 1.1. 698 00:30:37,090 --> 00:30:41,690 Y, por desgracia, Google Chrome ahora en la versión 39 699 00:30:41,690 --> 00:30:45,110 es una especie de embrutecimiento y cosas no nos muestra los encabezados reales. 700 00:30:45,110 --> 00:30:49,680 Pero lo que en verdad es enviado una solicitud por no recortar, pero / búsqueda? q = gatos. 701 00:30:49,680 --> 00:30:52,830 702 00:30:52,830 --> 00:30:54,340 >> Ahora, ¿por qué es tan importante? 703 00:30:54,340 --> 00:30:57,110 Bueno, yo voy a deducir de esto que si Google 704 00:30:57,110 --> 00:31:01,520 apoya las consultas de esta forma, ¿por qué No puedo implementar mi propia búsqueda 705 00:31:01,520 --> 00:31:06,420 motor para el CS50, pero sólo la parte delantera final, sólo la interfaz gráfica de usuario. 706 00:31:06,420 --> 00:31:09,610 Y vamos a externalizar la parte de atrás, la búsqueda real da lugar a Google. 707 00:31:09,610 --> 00:31:10,510 >> Entonces, ¿cómo puedo hacer esto? 708 00:31:10,510 --> 00:31:13,820 Bueno, déjame ir en gedit aquí. 709 00:31:13,820 --> 00:31:19,180 Y déjame ir por delante y abro hasta, digamos, un nuevo archivo. 710 00:31:19,180 --> 00:31:22,280 Y me voy a guardar este temporalmente como búsqueda 0.html. 711 00:31:22,280 --> 00:31:25,111 712 00:31:25,111 --> 00:31:27,860 Y luego, finalmente, vamos rápido adelante a la que yo ya preparados. 713 00:31:27,860 --> 00:31:30,190 >> Y yo voy a azotar rápidamente tipo doc 714 00:31:30,190 --> 00:31:33,840 html soporte abierto html cerca soporte html. 715 00:31:33,840 --> 00:31:38,390 Entonces me voy a hacer la cabeza cerca de la cabeza del título abierto CS50 716 00:31:38,390 --> 00:31:40,150 Buscar en lugar de la búsqueda de Google. 717 00:31:40,150 --> 00:31:43,480 Aquí abajo voy a tener el cuerpo, aquí abajo cerca del cuerpo. 718 00:31:43,480 --> 00:31:45,835 Y ahora necesito CS50 Buscar. 719 00:31:45,835 --> 00:31:47,710 Y, de hecho, vamos a construir esta forma incremental. 720 00:31:47,710 --> 00:31:51,043 Voy a seguir adelante y cerrar esto y en realidad lo puso en mi directorio público. 721 00:31:51,043 --> 00:31:52,730 Así que me dan sólo un momento. 722 00:31:52,730 --> 00:31:55,390 búsqueda-0.html-- voy a temporalmente llamarlo search.html. 723 00:31:55,390 --> 00:31:56,600 724 00:31:56,600 --> 00:31:59,750 Voy a chmod un search.html + r. 725 00:31:59,750 --> 00:32:01,072 726 00:32:01,072 --> 00:32:02,280 Y ahora me voy a abrirlo. 727 00:32:02,280 --> 00:32:03,224 728 00:32:03,224 --> 00:32:04,390 Muy bien, así que eso fue rápido. 729 00:32:04,390 --> 00:32:06,800 Pero el objetivo era simplemente para llevarnos al punto 730 00:32:06,800 --> 00:32:09,630 de tener este texto archivo llamado search.html. 731 00:32:09,630 --> 00:32:10,940 732 00:32:10,940 --> 00:32:12,790 Así que no hay mucho que ver todavía. 733 00:32:12,790 --> 00:32:16,970 De hecho, si me voy a mi navegador, y ir a search.html, eso es todo lo que es. 734 00:32:16,970 --> 00:32:17,720 Pero ¿sabes qué? 735 00:32:17,720 --> 00:32:19,000 Puedo ser un poco más lujoso. 736 00:32:19,000 --> 00:32:22,710 Leí en un libro que hay una etiqueta de encabezado llamado h1. 737 00:32:22,710 --> 00:32:26,100 Y yo voy a seguir adelante y utilizar ese h1 h1 se abren y cierran. 738 00:32:26,100 --> 00:32:27,220 Actualizar la página. 739 00:32:27,220 --> 00:32:29,600 Y ahora es más grande y más audaz, no tan interesante, 740 00:32:29,600 --> 00:32:32,399 pero al menos estructuralmente más interesante. 741 00:32:32,399 --> 00:32:33,940 Pero ahora permítanme presentarles a otra etiqueta. 742 00:32:33,940 --> 00:32:36,500 Resulta que hay una etiqueta de formulario. 743 00:32:36,500 --> 00:32:38,400 Y permítanme cerrar esa etiqueta. 744 00:32:38,400 --> 00:32:40,830 Y resulta que hay una etiqueta de entrada que 745 00:32:40,830 --> 00:32:44,600 tiene un atributo llamado tipo, que es el tipo de datos del campo, 746 00:32:44,600 --> 00:32:45,200 si se quiere. 747 00:32:45,200 --> 00:32:47,050 Y va a ser de tipo texto. 748 00:32:47,050 --> 00:32:52,200 Y su valor se va ser CS50 Buscar. 749 00:32:52,200 --> 00:32:53,850 Cerrar la etiqueta. 750 00:32:53,850 --> 00:32:57,100 Y no va a haber ninguna noción de apertura y cierre con separar las etiquetas. 751 00:32:57,100 --> 00:33:00,300 >> Permítanme volver aquí y ver lo que está pasando, vuelva a cargar. 752 00:33:00,300 --> 00:33:01,380 Conseguir interesante. 753 00:33:01,380 --> 00:33:02,950 Parece que se trata de un campo de texto. 754 00:33:02,950 --> 00:33:04,080 755 00:33:04,080 --> 00:33:06,999 Y en realidad, yo no quería para poner un valor todavía. 756 00:33:06,999 --> 00:33:10,040 Permítanme volver aquí y realmente obtengo deshacerse de este valor para que sea sencillo. 757 00:33:10,040 --> 00:33:12,939 En lugar de un valor, lo que quería para dar esta cosa era un nombre. 758 00:33:12,939 --> 00:33:15,230 Y yo no sé lo que es, así que voy a volver a eso. 759 00:33:15,230 --> 00:33:18,270 >> Pero debajo de eso, quiero hacer input type = enviar. 760 00:33:18,270 --> 00:33:19,840 761 00:33:19,840 --> 00:33:22,120 Y este valor será CS50 Buscar. 762 00:33:22,120 --> 00:33:24,850 Y vamos a ver por qué movido el valor a este. 763 00:33:24,850 --> 00:33:28,900 Cuando vuelvo a cargar, me parece que ahora tienen los inicios de mi propia búsqueda 764 00:33:28,900 --> 00:33:30,820 motor, super horrible, aunque, francamente, es 765 00:33:30,820 --> 00:33:34,260 no un tiro lejos de lo que Página predeterminada de Google se parece. 766 00:33:34,260 --> 00:33:37,950 >> Si voy aquí ahora, yo puedo escribir gatos y ojalá haga clic en Buscar. 767 00:33:37,950 --> 00:33:40,380 Pero no estoy muy hecho todavía, porque no he implementado, 768 00:33:40,380 --> 00:33:41,045 obviamente, una base de datos. 769 00:33:41,045 --> 00:33:42,940 No he rastreado la Web de resultados de búsqueda. 770 00:33:42,940 --> 00:33:44,840 Así que tengo que subcontratar que Google. 771 00:33:44,840 --> 00:33:46,290 Entonces, ¿cómo lo hago? 772 00:33:46,290 --> 00:33:49,170 >> Bueno, en primer lugar me que tenga que agregar y acción 773 00:33:49,170 --> 00:33:58,460 atribuir a mi forma de etiqueta que es http://www.google.com/search. 774 00:33:58,460 --> 00:34:01,180 Y sé que sólo por tener inferida por mirar de cerca 775 00:34:01,180 --> 00:34:02,505 en su URL. 776 00:34:02,505 --> 00:34:03,380 Y ahora tomar una conjetura. 777 00:34:03,380 --> 00:34:09,090 ¿Qué le debo este campo de texto, probablemente, ser llamado, sobre la base de dónde venimos 778 00:34:09,090 --> 00:34:09,754 desde antes? 779 00:34:09,754 --> 00:34:11,896 780 00:34:11,896 --> 00:34:13,290 >> AUDIENCIA:? Q. 781 00:34:13,290 --> 00:34:14,370 >> DAVID J MALAN:? Q. 782 00:34:14,370 --> 00:34:17,800 Y en realidad no necesitamos pregunta marcar resulta, pero q es de hecho, 783 00:34:17,800 --> 00:34:20,489 q para consulta probablemente por De forma predeterminada, sólo porque eso es 784 00:34:20,489 --> 00:34:23,060 lo que Larry y Sergey se le ocurrió hace años. 785 00:34:23,060 --> 00:34:24,739 Así que ahora déjame volver a cargar esta página. 786 00:34:24,739 --> 00:34:26,409 No se ve tan diferente. 787 00:34:26,409 --> 00:34:28,120 Pero ahora observen lo que sucede. 788 00:34:28,120 --> 00:34:32,360 >> Si escribo en gatos y clic CS50 Buscar y dejar ir, 789 00:34:32,360 --> 00:34:35,770 noto consigo llevaron distancia a real Google. 790 00:34:35,770 --> 00:34:38,150 Ahora, Google está siendo un poco molesto en que están 791 00:34:38,150 --> 00:34:41,877 añadiendo un parámetro adicional, si se quiere, a la dirección URL. 792 00:34:41,877 --> 00:34:43,960 Eso es todo suceso de forma automática en el lado de Google. 793 00:34:43,960 --> 00:34:48,730 >> La parte importante es que me parece haber generado esta petición aquí. 794 00:34:48,730 --> 00:34:50,179 Y, en efecto, eso es lo que pasa. 795 00:34:50,179 --> 00:34:53,040 Cuando usted tiene que HTML se parece a esto, este 796 00:34:53,040 --> 00:34:57,620 es una especie de notación de los desarrolladores web por decir, seguir adelante y crear un formulario 797 00:34:57,620 --> 00:34:59,990 que cuando se presentó, que va a ir a esta dirección URL. 798 00:34:59,990 --> 00:35:03,430 Y cuando la URL ha proporcionado valores para cosas como q, 799 00:35:03,430 --> 00:35:05,440 no ir solo a esta dirección URL. 800 00:35:05,440 --> 00:35:08,210 En realidad, pase a la pregunta marca y entonces q = gatos. 801 00:35:08,210 --> 00:35:09,590 802 00:35:09,590 --> 00:35:13,060 Anexar el parámetro, el Parámetro HTTP así. 803 00:35:13,060 --> 00:35:15,590 >> Y sólo para ser super exacto, lo que está siendo inferir aquí-- 804 00:35:15,590 --> 00:35:18,130 pero voy a estar más explicit-- es que el método que quiero usar 805 00:35:18,130 --> 00:35:22,270 es conseguir, en lugar de algo como puesto, que finalmente nos veremos. 806 00:35:22,270 --> 00:35:27,710 Así que en resumen, sólo por la comprensión HTML y el uso de algunas etiquetas bastante simples, 807 00:35:27,710 --> 00:35:30,610 ahora podemos empezar a crear nuestro propio usuario final frente 808 00:35:30,610 --> 00:35:32,850 interfaz con una búsqueda motor detrás de él. 809 00:35:32,850 --> 00:35:34,800 >> Pero esto, por supuesto, es bastante horrible. 810 00:35:34,800 --> 00:35:37,259 Así que déjame en realidad abro un poco mejor versión. 811 00:35:37,259 --> 00:35:39,800 Este es el que yo preparé en avanzar que tiene algunos comentarios. 812 00:35:39,800 --> 00:35:41,900 Pero verás que yo más o menos recreado. 813 00:35:41,900 --> 00:35:44,150 Así que esto ya está disponible en línea. 814 00:35:44,150 --> 00:35:48,050 Y fue así que de forma preventiva ir a https sólo para mantener las cosas simples. 815 00:35:48,050 --> 00:35:50,610 >> Y ahora vamos a abrir un siguiente iteración de este. 816 00:35:50,610 --> 00:35:52,510 Es la versión 1 en lugar de 0. 817 00:35:52,510 --> 00:35:55,315 Lo que salta a la vista como poco diferente en este ejemplo? 818 00:35:55,315 --> 00:35:59,480 819 00:35:59,480 --> 00:36:00,440 >> AUDIENCIA: [inaudible]. 820 00:36:00,440 --> 00:36:03,020 >> Sí, hay un centro de alineación de texto. 821 00:36:03,020 --> 00:36:04,590 Esto es un poco raro aquí. 822 00:36:04,590 --> 00:36:06,150 Pero esto es realmente nuevo. 823 00:36:06,150 --> 00:36:07,800 Y tal vez de adivinar lo que va a suceder. 824 00:36:07,800 --> 00:36:11,730 Si voy a mi navegador ahora y visitar búsqueda-1.html, 825 00:36:11,730 --> 00:36:13,090 es casi la misma cosa. 826 00:36:13,090 --> 00:36:15,705 Pero es un paso más cerca de siendo un poco más bonito. 827 00:36:15,705 --> 00:36:19,150 Todavía es feo, pero más bonito en que al menos todo lo que ahora está centrado. 828 00:36:19,150 --> 00:36:23,470 >> Así que resulta que lo que estoy usando es otro idioma por completo llamado 829 00:36:23,470 --> 00:36:25,680 CSS, hojas de estilo en cascada. 830 00:36:25,680 --> 00:36:28,310 Y CSS, francamente, es una especie de, en mi opinión personal, 831 00:36:28,310 --> 00:36:29,775 un lenguaje diseñado atrozmente. 832 00:36:29,775 --> 00:36:33,110 Es muy molesto para recordar todos los diversos detalles. 833 00:36:33,110 --> 00:36:38,479 Pero es lo que estiliza la en toda la Web en todo el mundo hoy en día. 834 00:36:38,479 --> 00:36:39,270 He ofendido a alguien. 835 00:36:39,270 --> 00:36:39,769 Bien. 836 00:36:39,769 --> 00:36:43,180 Así que vamos a volver aquí y ver cómo en realidad estamos usando esto. 837 00:36:43,180 --> 00:36:45,940 Y resulta que, por lo menos es en realidad un lenguaje bastante simple. 838 00:36:45,940 --> 00:36:49,470 Es sólo pares de valores clave, propiedades y valores, propiedades y valores. 839 00:36:49,470 --> 00:36:52,080 De hecho, aquí está uno dicha propiedad y el valor. 840 00:36:52,080 --> 00:36:55,890 >> Simplemente usando el estilo atribuir en mi cuerpo de la etiqueta 841 00:36:55,890 --> 00:37:00,360 y que le da un valor de un de colon palabra y otra palabra, 842 00:37:00,360 --> 00:37:03,730 o una propiedad y un valor, Puedo afectar la estética 843 00:37:03,730 --> 00:37:06,210 de la página web, no necesariamente la estructura, sin embargo, 844 00:37:06,210 --> 00:37:07,550 pero la estética de la misma. 845 00:37:07,550 --> 00:37:10,960 Y con sólo buscar en Google alrededor, me doy cuenta que las hojas CSS, de estilo en cascada, 846 00:37:10,960 --> 00:37:14,170 apoya una propiedad llamada text-align, cuyo valor puede 847 00:37:14,170 --> 00:37:16,980 ser izquierda, derecha o centro, por ejemplo. 848 00:37:16,980 --> 00:37:19,990 >> Así que ahora, cuando vuelvo a cargar esta página, lo que me hizo llegar 849 00:37:19,990 --> 00:37:22,730 era una página centrado, pero aún así es bastante feo. 850 00:37:22,730 --> 00:37:25,770 Vamos a seguir adelante y abrir hasta la versión 2 de Buscar. 851 00:37:25,770 --> 00:37:28,570 Y ahora noto que he hecho un poco más. 852 00:37:28,570 --> 00:37:33,760 Nótese que hasta aquí dentro de la cabeza etiqueta, no puede haber más de título. 853 00:37:33,760 --> 00:37:35,400 De hecho, hay una etiqueta de estilo. 854 00:37:35,400 --> 00:37:38,630 Y aquí es donde se acaba de crear una poco CSS visión desordenada a veces. 855 00:37:38,630 --> 00:37:41,971 >> Tenga en cuenta que me parece que tienen algo que estructuralmente se ve muy diferente. 856 00:37:41,971 --> 00:37:44,095 Pero aquí está el nombre de la etiqueta quiero estilizado. 857 00:37:44,095 --> 00:37:47,570 Aquí están nuestros viejos amigos rizado aparatos ortopédicos y corchete cerrado. 858 00:37:47,570 --> 00:37:50,290 Y entonces aquí es que propiedad y su valor. 859 00:37:50,290 --> 00:37:56,300 >> Si se me carga este archivo, search2.html, el resultado final es idéntico. 860 00:37:56,300 --> 00:37:59,300 Pero es un paso hacia un mejor diseño. 861 00:37:59,300 --> 00:38:04,560 Por factorizar este CSS, tengo no mezclada con mi HTML. 862 00:38:04,560 --> 00:38:07,560 Y, de hecho, como veremos, que podía reutilizar estas propiedades y valores. 863 00:38:07,560 --> 00:38:10,420 Si yo quería hacer ramos de partes de mi página web centrados, 864 00:38:10,420 --> 00:38:13,630 Yo no tengo que escribir style = text-align centro de todo el lugar. 865 00:38:13,630 --> 00:38:16,580 Puedo poner en un solo lugar Tal vez, como en la parte superior. 866 00:38:16,580 --> 00:38:18,210 >> Pero incluso esto no es el mejor diseño. 867 00:38:18,210 --> 00:38:21,720 De hecho, una de las cosas que usted aprenderá a medida que pasan más y más tiempo con 868 00:38:21,720 --> 00:38:25,730 programación web es que cuanto más se puede modularizar las cosas y las cosas de factores fuera 869 00:38:25,730 --> 00:38:30,610 como archivos .h dejarnos factor de materia hacia fuera, helpers.c gustaría dejar que nos cosas de factores fuera 870 00:38:30,610 --> 00:38:31,880 Hace un par de conjuntos de procesadores. 871 00:38:31,880 --> 00:38:34,200 Del mismo modo, podríamos desee para lograr esto. 872 00:38:34,200 --> 00:38:37,920 >> Así que notar en la versión tres de search.html tengo 873 00:38:37,920 --> 00:38:40,610 limpiado la cabeza de la página y sólo hay que poner 874 00:38:40,610 --> 00:38:43,320 en este, una etiqueta de enlace, que A pesar del nombre, 875 00:38:43,320 --> 00:38:44,700 no te da un hipervínculo. 876 00:38:44,700 --> 00:38:49,150 Vincula a otro archivo a través de un href cuyo valor en este caso, 877 00:38:49,150 --> 00:38:51,586 es la búsqueda-3.css 878 00:38:51,586 --> 00:38:52,960 Entonces me doy cuenta de que vamos rápidamente. 879 00:38:52,960 --> 00:38:54,600 Pero todo lo que estoy haciendo es una especie de mover las cosas. 880 00:38:54,600 --> 00:38:55,760 Déjame abierto búsqueda 3.css. 881 00:38:55,760 --> 00:38:57,114 882 00:38:57,114 --> 00:38:58,530 Ahí está, nada realmente a ella. 883 00:38:58,530 --> 00:39:02,270 Acabo de copiar y pegar en un nuevo archivo, al igual que nos factorizada cosas fuera 884 00:39:02,270 --> 00:39:03,509 en otros archivos antes. 885 00:39:03,509 --> 00:39:05,300 Y el result-- completamente underwhelming-- 886 00:39:05,300 --> 00:39:06,730 va a ser exactamente lo mismo. 887 00:39:06,730 --> 00:39:10,490 Pero nos estamos moviendo toward-- no, no lo es. 888 00:39:10,490 --> 00:39:11,930 Oh, yo sé por qué. 889 00:39:11,930 --> 00:39:13,790 >> Por lo tanto, parece ser un error. 890 00:39:13,790 --> 00:39:15,010 Y es en algún sentido. 891 00:39:15,010 --> 00:39:17,730 Pero permítanme abrir mi ficha Red. 892 00:39:17,730 --> 00:39:19,660 Permítanme volver a cargar la página. 893 00:39:19,660 --> 00:39:23,315 Ah, ¿por qué no se está aplicando la CSS? 894 00:39:23,315 --> 00:39:26,920 Bueno, el archivo CSS, del mismo modo, tiene para ser legible mundo, por así decirlo. 895 00:39:26,920 --> 00:39:28,440 Y también está prohibido. 896 00:39:28,440 --> 00:39:33,760 Así que déjame hacer un chmod a + r de estrella dot CSS-- whoops-- 897 00:39:33,760 --> 00:39:37,067 estamos CSS punto es sólo el extensión de archivo para los archivos CSS. 898 00:39:37,067 --> 00:39:38,900 Ahora voy a volver a mi navegador y recarga. 899 00:39:38,900 --> 00:39:40,910 Bien, un poco mejor. 900 00:39:40,910 --> 00:39:42,282 >> Ahora déjame hacer una última cosa. 901 00:39:42,282 --> 00:39:42,990 En busca-4.html. 902 00:39:42,990 --> 00:39:44,550 903 00:39:44,550 --> 00:39:48,220 Tengo una versión que me acaba de ocurrir era manera más fría, aunque de forma más 904 00:39:48,220 --> 00:39:48,980 complicado. 905 00:39:48,980 --> 00:39:50,690 Veamos el resultado en primer lugar. 906 00:39:50,690 --> 00:39:52,290 Cerrar esta para darnos más espacio. 907 00:39:52,290 --> 00:39:54,275 Cambiar esta a la búsqueda-4, Enter. 908 00:39:54,275 --> 00:39:55,430 909 00:39:55,430 --> 00:39:57,200 >> Y ahora un montón de cosas están rotas. 910 00:39:57,200 --> 00:39:59,910 Voy a volver en mi directorio aquí. 911 00:39:59,910 --> 00:40:04,190 Y ahora sólo voy a hacer un chmod de a + r en un file-- 912 00:40:04,190 --> 00:40:07,450 porque sé que exists-- llama logo.gif, que es una imagen. 913 00:40:07,450 --> 00:40:08,590 Y ahora recargar. 914 00:40:08,590 --> 00:40:11,040 Y wow-- así que ahora estoy muy cerca, francamente, 915 00:40:11,040 --> 00:40:15,860 al igual que la versión 1999 de Google, y francamente, la versión 2014 de Google, 916 00:40:15,860 --> 00:40:16,360 ¿verdad? 917 00:40:16,360 --> 00:40:21,920 >> Así que es ahora ir a su sitio web, en última instancia, si la búsqueda para los gatos. 918 00:40:21,920 --> 00:40:23,900 Y de hecho lo es. 919 00:40:23,900 --> 00:40:26,410 Pero lo hice de manera diferente en esta versión 4? 920 00:40:26,410 --> 00:40:28,020 Así que no vamos a insistir demasiado en ello aquí. 921 00:40:28,020 --> 00:40:30,100 Usted verá esto en un problema establecer siete eventualmente. 922 00:40:30,100 --> 00:40:31,350 Pero noto que hice un par de cosas. 923 00:40:31,350 --> 00:40:33,690 >> Yo presenté un div etiqueta, que es la división, 924 00:40:33,690 --> 00:40:35,450 similares en espíritu a una etiqueta de párrafo. 925 00:40:35,450 --> 00:40:38,220 Pero una división es igual, aquí está una región rectangular invisible 926 00:40:38,220 --> 00:40:39,150 de la pantalla. 927 00:40:39,150 --> 00:40:41,680 Vamos a darle un único identificador, un pie de página, sólo 928 00:40:41,680 --> 00:40:44,700 para que podamos hablar de en nuestro HTML en otro lugar. 929 00:40:44,700 --> 00:40:47,952 Aquí hay otro div de la página cuyo ID va a ser contenido. 930 00:40:47,952 --> 00:40:49,160 Es el contenido de la página. 931 00:40:49,160 --> 00:40:51,090 Y hasta aquí es la cabecera de la página. 932 00:40:51,090 --> 00:40:54,960 >> En otras palabras, no tengo esencialmente en HTML soy mentalmente 933 00:40:54,960 --> 00:40:57,700 visualización de esta página web como tres componentes, una cabecera 934 00:40:57,700 --> 00:41:01,200 hasta aquí con este rectángulo invisible, el contenido en el medio, y luego 935 00:41:01,200 --> 00:41:04,800 el pie de página abajo, incluso aunque no vemos esas cosas. 936 00:41:04,800 --> 00:41:09,940 Porque quiero en mi cabeza de La página de aquí, o en un archivo .css, 937 00:41:09,940 --> 00:41:11,460 Puedo usar esta sintaxis. 938 00:41:11,460 --> 00:41:13,070 >> Encabezado no es una etiqueta. 939 00:41:13,070 --> 00:41:17,060 Es una identificación para que se ponga que haciendo #header, 940 00:41:17,060 --> 00:41:20,840 Ahora puedo aplicar uno o más propiedades a la cabecera. 941 00:41:20,840 --> 00:41:24,130 Yo puedo hacer el mismo contenido, el mismo para el contenido aquí. 942 00:41:24,130 --> 00:41:27,230 >> Así, por ejemplo, en el pie de página, aviso todas estas propiedades que estoy añadiendo. 943 00:41:27,230 --> 00:41:30,660 Y sé que existen sólo por la lectura arriba en la documentación para el CSS. 944 00:41:30,660 --> 00:41:33,450 Tamaño de la fuente va a ser smaller-- por lo que algunos tamaño de la fuente relativa. 945 00:41:33,450 --> 00:41:34,741 El peso va a ser audaces. 946 00:41:34,741 --> 00:41:37,340 Margin-- cuántos píxeles alrededor it-- es de 20 píxeles. 947 00:41:37,340 --> 00:41:38,590 Y va a estar centrado. 948 00:41:38,590 --> 00:41:40,256 >> Pero en este momento, la página se parece a esto. 949 00:41:40,256 --> 00:41:42,840 Si no estoy satisfecho con mi copia allí mismo, 950 00:41:42,840 --> 00:41:46,560 Yo podría hacer algo como color rojo. 951 00:41:46,560 --> 00:41:50,570 Y entonces puedo guardar este, vuelva a cargar, y ahora he stylized el pie de página. 952 00:41:50,570 --> 00:41:54,130 Así que esto es sólo insinuando el poder de lo que puede hacer en una página web 953 00:41:54,130 --> 00:41:55,510 de cambiar las cosas. 954 00:41:55,510 --> 00:41:59,080 >> E incluso más frío que esto, si usted quiere a hurgar con los sitios web reales, 955 00:41:59,080 --> 00:42:00,810 no se puede cambiar permanentemente. 956 00:42:00,810 --> 00:42:03,640 Pero si abro Inspector de Chrome de nuevo 957 00:42:03,640 --> 00:42:07,610 y yo no voy a la izquierda aquí, lo que muestra el código HTML de Facebook, 958 00:42:07,610 --> 00:42:11,380 pero muestra a la derecha lado toda su CSS, 959 00:42:11,380 --> 00:42:13,789 usted puede y cambiar las cosas sobre la marcha. 960 00:42:13,789 --> 00:42:15,080 Así que déjame ir adelante y hacer esto. 961 00:42:15,080 --> 00:42:18,670 >> Déjame ir por delante y control haga clic en esta palabra al azar aquí, 962 00:42:18,670 --> 00:42:21,230 firmar, y haga clic en Inspeccionar Elemento. 963 00:42:21,230 --> 00:42:25,130 Chrome salta muy convenientemente a la etiqueta h1 que Facebook está usando. 964 00:42:25,130 --> 00:42:27,290 Y notar aquí Facebook tiene tipo de perezosamente 965 00:42:27,290 --> 00:42:29,960 codificado tamaño de la fuente como una propiedad aquí. 966 00:42:29,960 --> 00:42:33,530 >> Así que la cosa fresca, aunque es que si yo realmente voy aquí 967 00:42:33,530 --> 00:42:39,560 y dicen, oh, Facebook, no me gusta que 64 píxeles, que ahora pueden cambiar de Facebook. 968 00:42:39,560 --> 00:42:42,590 Por supuesto, sólo estamos cambiándolo para mí personalmente en el momento. 969 00:42:42,590 --> 00:42:45,150 Pero esto es sólo otro herramienta en nuestra caja de herramientas 970 00:42:45,150 --> 00:42:48,360 que va a permitir a nosotros para modificar y averiguar y también diagnosticar 971 00:42:48,360 --> 00:42:49,729 asuntos en nuestras propias páginas web. 972 00:42:49,729 --> 00:42:52,270 Y del mismo modo podríamos ir más aquí, que es la misma cosa. 973 00:42:52,270 --> 00:42:55,830 Si usted realmente desea conseguir la suposición, yo decir, ahora que realmente puede mutar la página 974 00:42:55,830 --> 00:42:57,380 y hacer cosas locas. 975 00:42:57,380 --> 00:42:59,870 >> ¿Por qué es todo esto útil? 976 00:42:59,870 --> 00:43:02,330 Pues bien, en última instancia, estamos va a querer ser 977 00:43:02,330 --> 00:43:07,110 capaz de crear páginas web que son impulsados ​​por nuestros propios fines de espalda, 978 00:43:07,110 --> 00:43:10,520 no sólo por Google y la externalización de la final de vuelta allí. 979 00:43:10,520 --> 00:43:13,510 En realidad queremos que el valor, por ejemplo, 980 00:43:13,510 --> 00:43:18,830 de la acción de nuestro motor de búsqueda atribuir a ir no a otra persona, 981 00:43:18,830 --> 00:43:24,270 sino a algo como search.php, donde search.php está en nuestro propio servidor, 982 00:43:24,270 --> 00:43:25,670 no en otra persona. 983 00:43:25,670 --> 00:43:30,316 >> Y así, para llegar allí, que en realidad que tenga que introducir un nuevo lenguaje. 984 00:43:30,316 --> 00:43:33,190 Así que ya hemos visto en un nuevo idioma aquí, o dos realmente, HTML 985 00:43:33,190 --> 00:43:33,700 y CSS. 986 00:43:33,700 --> 00:43:36,330 Pero lo que realmente son sólo idiomas estructurales y estéticas. 987 00:43:36,330 --> 00:43:38,360 No están programando idiomas per se. 988 00:43:38,360 --> 00:43:41,160 Y eso es lo más formal, tiempo que vamos a pasar sobre ellos. 989 00:43:41,160 --> 00:43:44,910 Debido a que vamos a empezar ahora para la transición a PHP. 990 00:43:44,910 --> 00:43:48,160 >> Así que PHP es un real lenguaje de programación. 991 00:43:48,160 --> 00:43:50,750 Es un lenguaje de scripting en el sentido de que es 992 00:43:50,750 --> 00:43:52,855 destinado a ser un peso más ligero que algo como C. 993 00:43:52,855 --> 00:43:56,082 Y es un lenguaje interpretado, lo que significa que no está compilado. 994 00:43:56,082 --> 00:43:58,790 Así que en pocas palabras, ¿qué significaba cuando utilizamos un lenguaje como C 995 00:43:58,790 --> 00:44:00,290 y tuvimos que compilarlo? 996 00:44:00,290 --> 00:44:02,120 ¿Qué significa para compilar el código fuente en C? 997 00:44:02,120 --> 00:44:03,864 998 00:44:03,864 --> 00:44:04,780 AUDIENCIA: [inaudible]. 999 00:44:04,780 --> 00:44:06,184 DAVID J MALAN: Dígalo otra vez? 1000 00:44:06,184 --> 00:44:07,100 AUDIENCIA: [inaudible]. 1001 00:44:07,100 --> 00:44:07,962 1002 00:44:07,962 --> 00:44:08,920 DAVID J MALAN: Perfecto. 1003 00:44:08,920 --> 00:44:10,180 Se convierte en binario. 1004 00:44:10,180 --> 00:44:14,200 Se convierte en ceros y unos a partir del código fuente Inglés-como real. 1005 00:44:14,200 --> 00:44:16,424 Y entonces podemos realmente ejecutar esos ceros y unos 1006 00:44:16,424 --> 00:44:18,840 haciéndolos pasar a través de la CPU haciendo doble clic en un icono 1007 00:44:18,840 --> 00:44:19,980 o ejecutar un comando. 1008 00:44:19,980 --> 00:44:23,770 >> PHP y Python y Ruby y Perl y JavaScript 1009 00:44:23,770 --> 00:44:26,250 y racimos de otro lenguas se interpretan 1010 00:44:26,250 --> 00:44:29,290 lenguas, lo que es decir no compila ellos. 1011 00:44:29,290 --> 00:44:34,220 Más bien, les das de comer como entrada a un programa que se llama un intérprete. 1012 00:44:34,220 --> 00:44:36,640 Y ese intérprete, que alguien más escribió, 1013 00:44:36,640 --> 00:44:40,930 lee el código fuente de arriba a abajo, izquierda a derecha y sólo interpreta 1014 00:44:40,930 --> 00:44:43,000 esas líneas y hace lo que dice. 1015 00:44:43,000 --> 00:44:45,360 >> Así que si te encuentras con un línea que dice de impresión, 1016 00:44:45,360 --> 00:44:48,660 no convierte necesariamente impresión a los ceros y unos correspondientes. 1017 00:44:48,660 --> 00:44:51,910 Sólo tiene este intérprete como si un estado grande que dice: 1018 00:44:51,910 --> 00:44:56,110 si las instrucciones del programador es impresión, y luego hacer lo siguiente. 1019 00:44:56,110 --> 00:44:58,170 Por lo tanto, lo interpreta sólo por tipo de razonamiento 1020 00:44:58,170 --> 00:44:59,800 a través de lo que usted está diciendo que haga. 1021 00:44:59,800 --> 00:45:01,320 >> Y PHP es uno de estos idiomas. 1022 00:45:01,320 --> 00:45:05,310 Y hace años PHP fue diseñado precisamente para la programación web. 1023 00:45:05,310 --> 00:45:08,160 Y fue inicialmente un lenguaje desordenado muy descuidado. 1024 00:45:08,160 --> 00:45:10,940 Y, en efecto, hay una enorme cantidad de mal código PHP por ahí. 1025 00:45:10,940 --> 00:45:13,520 Pero la propia lengua ha madurado con los años, 1026 00:45:13,520 --> 00:45:16,200 tanto es así que ahora es en realidad un maravilloso paso siguiente 1027 00:45:16,200 --> 00:45:19,970 pedagógicamente de C porque es tan condenadamente familiar para todo 1028 00:45:19,970 --> 00:45:22,380 usted acaba de ver en las últimas semanas. 1029 00:45:22,380 --> 00:45:25,724 >> La única diferencia inicial ya veremos es que no hay función principal ya. 1030 00:45:25,724 --> 00:45:28,890 Al iniciar la escritura de código, es sólo va a conseguir ejecutado no importa qué, 1031 00:45:28,890 --> 00:45:30,220 como veremos en un momento. 1032 00:45:30,220 --> 00:45:33,320 Mientras tanto, esto es lo que un la variable se ve como en PHP. 1033 00:45:33,320 --> 00:45:35,840 Es un poco diferente, pero sólo apenas. 1034 00:45:35,840 --> 00:45:39,380 >> En PHP, no hay tipado fuerte. 1035 00:45:39,380 --> 00:45:41,430 No hay semana escribiendo, que sólo significa que hay 1036 00:45:41,430 --> 00:45:44,030 son los tipos de datos, como las cadenas y los números y otras cosas. 1037 00:45:44,030 --> 00:45:47,030 Pero no te molestes especificando lo que son más. 1038 00:45:47,030 --> 00:45:48,980 PHP se lo imagina para usted. 1039 00:45:48,980 --> 00:45:52,030 El signo del dólar es sólo una decisión que las personas hacen de PHP años 1040 00:45:52,030 --> 00:45:54,890 hace de tal manera que cualquier variable en PHP sólo comienza con un signo de dólar. 1041 00:45:54,890 --> 00:45:58,130 Es en realidad un poco útil, ya que que salta a la vista un poco más. 1042 00:45:58,130 --> 00:46:01,315 >> Pero después de eso, este es una condición en PHP. 1043 00:46:01,315 --> 00:46:03,140 1044 00:46:03,140 --> 00:46:04,730 ¿Qué es diferente en comparación con C? 1045 00:46:04,730 --> 00:46:07,180 1046 00:46:07,180 --> 00:46:09,600 Truco pregunta-- nada, que es realmente agradable. 1047 00:46:09,600 --> 00:46:12,140 Expresiones booleanas en PHP-- la misma. 1048 00:46:12,140 --> 00:46:19,354 Expresiones booleanas con y frente a o, los interruptores, los bucles, los bucles, loops-- Aceptar, 1049 00:46:19,354 --> 00:46:20,270 este es diferente. 1050 00:46:20,270 --> 00:46:22,660 >> Así que resulta que hay un par de otras funciones en PHP. 1051 00:46:22,660 --> 00:46:25,243 Uno de ellos es en realidad este, que es maravillosamente cómoda. 1052 00:46:25,243 --> 00:46:29,250 Si $ números es una matriz que tienes declarado previamente en un programa, 1053 00:46:29,250 --> 00:46:33,350 usted tiene esta fantasía para cada construcción que en lugar de hacer todo eso 1054 00:46:33,350 --> 00:46:37,020 me molesta es igual a 0, I es menos que esto, [? I ++?], 1055 00:46:37,020 --> 00:46:40,320 para cada uno de los números como el número, donde cada de esos valores de signo de dólar es simplemente 1056 00:46:40,320 --> 00:46:42,790 una variable, y el segundo usted puede pensar como yo 1057 00:46:42,790 --> 00:46:44,290 Se le podría llamar lo que quieras. 1058 00:46:44,290 --> 00:46:45,770 Lo llamé número. 1059 00:46:45,770 --> 00:46:48,825 Esto va a iterar sobre la matriz llama números. 1060 00:46:48,825 --> 00:46:51,200 Y en cada iteración, es va a actualizar de forma automática 1061 00:46:51,200 --> 00:46:54,340 para que el número de la muestra de dólar variable de modo que usted constantemente 1062 00:46:54,340 --> 00:46:58,210 tener acceso a la variable que desea sin tener que hacer ningún corchete 1063 00:46:58,210 --> 00:47:00,980 la notación o la indexación en una matriz. 1064 00:47:00,980 --> 00:47:04,950 >> Más allá de eso, incluso tenemos cosas como matrices, que parecen casi lo mismo, 1065 00:47:04,950 --> 00:47:08,210 excepto que es muy común, como veremos ver, tanto en PHP y JavaScript 1066 00:47:08,210 --> 00:47:10,750 de comprobar la validez inicializar una matriz utilizando corchetes. 1067 00:47:10,750 --> 00:47:12,040 C utiliza llaves. 1068 00:47:12,040 --> 00:47:15,330 Así que es ligeramente diferente, aunque nosotros no lo utilizamos mucho ese truco. 1069 00:47:15,330 --> 00:47:20,090 >> Pero incluso con más fuerza, PHP tiene matrices asociativas, 1070 00:47:20,090 --> 00:47:23,100 que es una forma elegante de decir las tablas hash. 1071 00:47:23,100 --> 00:47:31,610 De hecho, si usted quiere declarar un hash mesa en PHP, a diferencia de en cuántos C-- 1072 00:47:31,610 --> 00:47:34,775 líneas de código se tarda en realmente implementar una tabla hash en C? 1073 00:47:34,775 --> 00:47:38,310 O el número de líneas de código es tomar para implementar una tabla hash en C? 1074 00:47:38,310 --> 00:47:39,820 Así que es probable que sea mucho, ¿verdad? 1075 00:47:39,820 --> 00:47:41,680 Es unas pocas docenas, tal vez 100 o 200. 1076 00:47:41,680 --> 00:47:42,980 Es trivial. 1077 00:47:42,980 --> 00:47:45,420 ¿O se trata de ser, como pronto verás, no trivial 1078 00:47:45,420 --> 00:47:48,080 para implementar una tabla hash [Inaudible] y también una oportunidad. 1079 00:47:48,080 --> 00:47:50,580 Pero en PHP-- y francamente, probablemente no debería decir esto 1080 00:47:50,580 --> 00:47:53,630 hasta Monday-- en PHP, si quieres una mesa, hecho. 1081 00:47:53,630 --> 00:47:56,431 Eso es un hash table-- así con una línea de código. 1082 00:47:56,431 --> 00:47:56,930 Y 1083 00:47:56,930 --> 00:47:58,810 >> Una gran cantidad de idiomas que hacer. 1084 00:47:58,810 --> 00:48:00,190 Diviértete con pset cinco. 1085 00:48:00,190 --> 00:48:01,980 Así que una gran cantidad de idiomas hacer esto. 1086 00:48:01,980 --> 00:48:03,050 1087 00:48:03,050 --> 00:48:06,140 Te dan estas abstracciones que otras personas, otros programadores, 1088 00:48:06,140 --> 00:48:09,870 han creado para usted por lo que usted puede estar parado sobre sus hombros 1089 00:48:09,870 --> 00:48:13,290 y comenzar a usar las ideas que son super convincente, como tablas y árboles de hash 1090 00:48:13,290 --> 00:48:14,140 y trata. 1091 00:48:14,140 --> 00:48:17,790 Pero usted no tiene necesariamente que poner en práctica esas cosas por ti mismo. 1092 00:48:17,790 --> 00:48:20,850 >> Y así, en última instancia, lo que vamos a usar PHP para 1093 00:48:20,850 --> 00:48:23,580 está potencialmente escribir programas de la llamada de línea de comandos. 1094 00:48:23,580 --> 00:48:26,600 Podríamos recrear cada programa hemos escrito este semestre hasta el momento, 1095 00:48:26,600 --> 00:48:30,410 excepto tal vez Breakout que utiliza SPL, que es específico a C en el momento. 1096 00:48:30,410 --> 00:48:33,100 Pero todos los demás problemas configurado, sin duda Mario y César 1097 00:48:33,100 --> 00:48:35,300 y Vigenére y [? Grieta?] Y en adelante, nos 1098 00:48:35,300 --> 00:48:39,520 podría volver a poner en práctica en PHP, probablemente un poco más fácilmente. 1099 00:48:39,520 --> 00:48:43,050 >> Pero lo que estamos en última instancia, va usar PHP para programación web es. 1100 00:48:43,050 --> 00:48:46,420 Y vamos a introducir próximo semana un modelo mental, un paradigma llamado 1101 00:48:46,420 --> 00:48:49,610 MVC, controlador de vista de modelo, que si has hecho la programación 1102 00:48:49,610 --> 00:48:51,610 antes en Python o Rubí o en otro lugar, usted 1103 00:48:51,610 --> 00:48:54,112 podría saber de este equipo con Rails y Django y similares. 1104 00:48:54,112 --> 00:48:55,820 Pero si usted es nuevo en esto también, usted verá 1105 00:48:55,820 --> 00:48:59,652 que este es en realidad una muy natural extensión de la factorización 1106 00:48:59,652 --> 00:49:01,360 y el tipo de diseño de código que hemos 1107 00:49:01,360 --> 00:49:04,670 estado haciendo en C. Vamos a ahora aplicar algunas de esas lecciones a PHP 1108 00:49:04,670 --> 00:49:07,190 por lo que, en última instancia, somos la implementación de nuestros propios sitios web. 1109 00:49:07,190 --> 00:49:09,080 Y si usted es una especie de hipnotizado o sorprendido 1110 00:49:09,080 --> 00:49:10,954 que vamos a hacer todo el tan rápidamente, 1111 00:49:10,954 --> 00:49:13,410 darse cuenta de que casi todos los semestre, casi el 90% 1112 00:49:13,410 --> 00:49:16,560 de estudiantes CS50, incluidos los que nunca han programado antes, 1113 00:49:16,560 --> 00:49:20,329 terminar haciendo proyectos finales que se basan en la programación web. 1114 00:49:20,329 --> 00:49:23,120 Y por lo que verá que los retornos son altos en las próximas semanas. 1115 00:49:23,120 --> 00:49:24,965 Así que vamos a ver a continuación, el lunes. 1116 00:49:24,965 --> 00:49:27,260 1117 00:49:27,260 --> 00:49:30,120 >> ALTAVOZ 1: Y ahora, Deep Pensamientos de Daven Farnham. 1118 00:49:30,120 --> 00:49:34,055 1119 00:49:34,055 --> 00:49:34,780 Las tablas hash. 1120 00:49:34,780 --> 00:49:37,180 1121 00:49:37,180 --> 00:49:38,402 >> [Risas] 1122 00:49:38,402 --> 00:49:38,902