>> [REPRODUCCIÓN DE MÚSICA]
DAVID J MALAN: Muy bien, bienvenido de nuevo.
Esto es CS50.
Este es el fin de semana de siete.
Y es al final de ese carroñero caza del problema fijó cuatro
que se puede recordar.
Después de la recuperación de todos los archivos JPEG de personal,
que fueron impugnadas, si lo desea, para fotografiar a ti mismo con el mayor número
de esas personas como puedas.
Tenemos un montón de presentaciones durante las últimas semanas,
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í,
atrapado aquí en-- ve como-- Annenberg Hall en horas de oficina, uno aquí
en Lowell Casa con Nick.
Aquí está Ramón está atrapado en el teléfono.
Esto fue en un almuerzo CS50.
Este fue Jason Skyping con un compañero de clase más creativa,
quien lo llamó por teléfono esta manera.
No sabemos de qué se trataba.
>> [Risas]
>> DAVID J MALAN: Pero eso es digno de un gigabyte.
Aquí es Chang, quien literalmente corrió fuera del escenario
para evitar ser fotografiado uno día, pero finalmente fue capturado.
Aquí es Nick.
Y aquí es Alison por los campos.
Y Zamyla incluso se encontró en un concurso de baile.
Así que vamos a ir a través de estas fotos, averiguar
quien presentó el más la primera, y la recompensa
un premio fabuloso, como prometido en la especificación.
Y nosotros también pondremos sobre el espacio que estuvo involucrado.
>> Un par de announcements-- así almuerzo es, de nuevo, este viernes a las 13:15.
Si desea unirse a nosotros, Confirmar su asistencia a esa URL aquí.
Jason vuelve a aparecer aquí de un de las secciones de un par de años
de nuevo, lo que sucedió a caer en Halloween.
Y, en efecto, se vistió como un calabaza ese año en particular.
Si usted mira esta sección de su sección a partir de 2011
ocho, si usted es curioso, en CS50.tv, creo
este fue el año en el que su bomba de aire estaba funcionando.
>> Si a continuación, ver el sección similar en el 2012,
verá este Jason mucho desinfla, desde el traje ya no funcionaba,
que no es más que decir este viernes, si lo
gustaría tallar una calabaza con Daven y Gabe y otros, a los jefes de RSVP
en dirección cs50.harvard.edu.
Promete ser muy divertido.
Daven, se nos dice, se ha forjado calabazas del todo de su vida.
Gabriel de Brasil nunca tiene tallado una calabaza para Halloween.
Así que estar allí con ellos a medida que aprende.
>> Seminarios, meanwhile-- por lo que usted aprenderá pronto
acerca de lo que nuestras expectativas son para el proyecto final, que en esencia
se reducen a el diseño e implementación
la mayoría de cualquier proyecto de interés para que, si bien sujeto a la aprobación
y la orientación de su compañero de enseñanza.
Hacia el final de la semestre, presentamos una serie
de seminarios, que son las clases opcionales liderado por los becarios de enseñanza y de Harvard
el personal, los amigos del curso a través de campus, sobre diversos temas que
son tangencial a la programa subyacente del curso
pero no obstante aplicable, diversión, y diferente para los proyectos finales potenciales.
>> Por ejemplo, en primer lugar, si desea para registrarse, vaya a esa URL allí.
Y esta es la alineación para seminarios solos de este año.
Pero se dan cuenta que tenemos decenas de seminarios de año pasado, todos los cuales
están vinculados en el menú Seminarios opción de la página web del curso.
Así que si usted está pensando en yendo más allá de su zona de confort
o recoger algunas nuevas habilidades, por ejemplo, la programación de iPhone
aplicaciones con Swift, un nuevo idioma de Apple o de Objective-C
o aplicaciones de Android o de programación [? cue?] bombillas, o cualquiera de los temas
hasta aquí y más, debido cheque a la página de registro.
>> Así que empezamos y concluimos en Lunes con mirar HTTP.
Así HTTP refresher-- rápida, Protocolo de transferencia de hipertexto.
Pero, ¿qué significa eso realmente?
¿Qué significa eso realmente?
¿Es eso una mano?
Sé que estás rascando la cabeza.
Pero usted quiere proponer lo que HTTP es?
>> ¿Cómo las computadoras: Público comunicarse con [inaudible].
DAVID J MALAN: me perdí la última parte.
¿Cómo se comunican los ordenadores con--
>> Servidores de Internet: audiencia.
DAVID J MALAN: Good-- con internet servidores, y en concreto, los servidores web.
Porque recuerdo, hay un montón de servicios en Internet, algunos de los cuales
utiliza probablemente todos los días entre el chat y el mensaje, el chat y web, y correo electrónico,
y similares.
Y es sólo el HTTP protocolo que los navegadores web
hablar cuando se comunica con servidores web, y viceversa.
Y el análogo en el mundo humano que sea,
Extiendo mi mano para estrechar algunas otra de humano y él o ella
reconoce mediante la ampliación su mano también.
Así que eso es sólo un protocolo, un conjunto de convenciones.
>> Y lo que en verdad son esos convenios?
Bueno, sólo se reduce a el envío de mensajes de ida y vuelta,
como hemos representado aquí.
Y hay un par de maneras en que puede enviar estos mensajes.
Y tal vez el más común se conoce como GET.
Y veremos un contraste a esto antes de tiempo.
>> Sin embargo, una solicitud GET desde un navegador al servidor sólo se parece a esto.
Es un montón de texto que pone dentro de un sobre virtual.
En el exterior de ese sobre ir un par de piezas de detalles.
Lo que tiene que ir en la sobre, por así decirlo,
a fin de obtener una petición como esto de mí a un servidor web?
Sí.
>> AUDIENCIA: Tu dirección IP.
>> DAVID J MALAN: Mi dirección IP en el campo, por así decirlo,
y, por supuesto, la la dirección IP del destinatario.
Pero en el caso de un paquete de web, necesitamos un poco más de detalle
No es suficiente sólo para enviar un sobre a un servidor,
porque dicho servidor podría ser escuchar para diferentes tipos
del tráfico de Internet.
Entonces, ¿qué más necesitamos además de IP del destinatario?
¿Sí?
>> AUDIENCIA: ¿Es TCP?
DAVID J MALAN: Good.
TCP--
>> AUDIENCIA: Dirección.
>> DAVID J MALAN: Dirección, o el puerto, como se le llama.
Cerca, pero un número de puerto TCP.
Y hay un montón de ellos.
Pero sin duda el más debe familiarizarse con el tiempo
sea ​​80, que es el valor por defecto que se utiliza para el tráfico de Internet.
Y otra familiarizado uno pronto habrá 443,
que se utiliza para web seguro el tráfico, las direcciones URL que comienzan con https.
>> Así que esto es lo que pasa dentro de ese sobre.
Y obtener / sólo significa, dar Me la página web por defecto.
Dame la raíz del disco conducir en ese servidor web.
Y es de esperar, la web servidor responderá con, OK
y el número 200, que está justo una convención diciendo, sí, todo
es de hecho bien.
Aquí está la página.
El tipo de la página web va a ser texto, pero más específicamente, HTML,
que estamos a punto de sumergirse de nuevo en.
Y el punto punto punto justo medios, aquí está el código HTML.
Y ahí es donde estamos recoger la historia de hoy,
realmente escribir HTML, HyperText Markup Language, que
es el idioma en el que páginas web están escritas.
No es un lenguaje de programación.
No hay funciones o bucles o condiciones.
Es un lenguaje de marcado, así de nuevo ver hoy en día,
que le permite especificar cómo estructurar y estilizar
estéticamente una página web.
>> Así que este era el único y sólo la página que realmente
mirado, aunque brevemente, el lunes.
Y notar algunos características sobresalientes.
Hay un montón de ángulo abierto soporte y cerca del soporte en ángulo.
Entre aquellos en ángulo paréntesis son palabras.
Y vamos a empezar llamar a esas etiquetas de las palabras.
Así cabeza soporte abierto y la cabeza del soporte cerrado
son las etiquetas de apertura y cierre, o las etiquetas de inicio y fin
respectivamente, de un elemento HTML, como lo vamos a llamar, llamada cabeza.
Y se aplica la misma jerga al cuerpo en HTML y así sucesivamente.
>> Y lo que es interesante es HTML-- y, de hecho, vamos a
pasar terriblemente poco tiempo en él, porque vas a la mayoría sólo averiguar
qué características tiene cuando realmente tienen un problema concreto
a solve-- usted encontrará que un navegador es bastante tonto.
Es sólo va a hacer-- no muy diferente un computer-- lo que usted le dice que haga.
Y así, cuando usted tiene abierto HTML soporte en la parte superior
allí, que esencialmente sólo significa, bueno, navegador,
aquí viene una página web escrito en HTML.
>> Cuando se ve el soporte abierto cabeza, que sólo significa,
oye, navegador, aquí viene la cabeza, o la parte superior de mi página web.
Cuando se ve un soporte cerrado cabeza, que sólo significa, bueno,
eso es todo por la cabeza.
En espera de algo más.
Y ese algo más es al parecer va a ser el cuerpo.
Y cuando usted no tiene una etiqueta, al igual que Tiene apenas hola, coma, mundo,
que sólo va a ser texto sin formato que en última instancia, se visualiza en la pantalla.
>> Ahora, usted notará demasiado la indentación aquí.
Usted probablemente puede inferir cómo estamos estilizar ella.
Cada vez que abro una etiqueta, por así decirlo, me sangría.
Y cada vez que cerrar una etiqueta, yo no-guión,
similares en espíritu a las llaves.
Y más allá de eso, estoy un poco de utilizar mi juicio.
Tenga en cuenta que no me molesté en golpear Introduzca el interior de esa etiqueta del título.
¿Por qué?
Bueno, yo decidí que parecía un poco más limpio para mí, el ser humano,
para no molestar a hacer eso.
Así que de nuevo, hay un poco de llama juicio justo
como existe en C o en cualquier idioma.
>> Pero nótese también que esta sangría se presta a un modelo mental,
no sobre lo complican.
Pero un árbol, ¿no?
Si usted piensa en una web página, al parecer escrito
así, como bien sangría de esa manera,
casi se puede pensar en el soporte abierto HTML tag soporte cerrado se delimitan
la raíz de un nodo, un árbol de familia nodo de estilo en el estilo de los árboles
vimos el viernes pasado.
>> Y, de hecho, tenemos a la derecha aquí lo que vamos a llamar a un DOM, D-O-M, documento
modelo de objetos, una forma elegante de decir un árbol que representa que el HTML.
Y note que HTML tiene, vamos a decir, como un árbol de familia, dos hijos.
A la izquierda está la cabeza.
A la derecha está el cuerpo.
>> Y así como un ejercicio de pensamiento sin sentido, cabeza, por supuesto, tiene cuántos niños
de acuerdo a esta estructura?
Así que sólo uno, título-- y es por eso que tenemos
la flecha que va desde la cabeza hasta el título.
Así que es como si esa persona en el árbol de la familia tenía sólo una cría.
Y a continuación, el título en sí puede se dice que tiene un niño también.
>> Recordemos que el HTML tenía hola, coma, mundo debajo de ella.
Y he simplemente dibujado dentro de un ovalada en lugar de sólo un rectángulo
transmitir semánticamente que aunque se trata de un nodo en el árbol, por así decirlo,
es una especie de fundamentalmente diferente.
No es una etiqueta.
O más bien, no es un elemento.
Es sólo un nodo de texto, si se quiere.
Pero estos son completamente convenciones humanas arbitrarias.
Esto es sólo ahora mi forma de que representa lo que voy como un agregado
llamar el documento.
>> Y como un aparte, la cosa a la súper de la esquina superior izquierda,
soporte abierto signo de exclamación doc tipo HTML, esto se parece a una etiqueta,
pero es el caso estúpido esquina donde eso es justo allí, copiar y pegar
para indicar los navegadores esta es la versión de HTML 5.
El mundo no deja de cambiar lo que el primera línea de código en una página debe ser.
Esto sólo significa que la versión 5.
Por lo que no bastante parecerse a los demás.
>> Muy bien, así que con eso Dijiste, podrás apreciar ahora
esta bastante este estúpido tatuaje alguien consiguió.
>> [Risas]
>> DAVID J MALAN: Muy bien, y ahora vamos a realmente buceo
a hacer algo con esto.
Usted recordará que la última vez Abrí la Appliance CS50
y yo hice algo como simple como abrir gedit.
Y he salvado el archivo, incluso en mi desktop-- ninguna parte especial--
como hello.html.
>> Así que permítanme hacer eso nuevo-- hello.html Intro.
Y ahora en este archivo, que voy a seguir adelante y repetir lo que acabamos de
saw-- tipo doc html Entonces voy a hacer abierta html soporte soporte cerrado.
Y luego voy a preventivamente abrir y cerrar la etiqueta.
¿Por qué?
Sólo para que no me olvido más tarde.
Es sólo una buena práctica, al igual que la apertura y el cierre de llaves todos a la vez.
>> Y entonces, ¿qué vino después?
Usted puede pensar en el tatuaje.
>> AUDIENCIA: La cabeza.
>> DAVID J MALAN: La cabeza.
Y luego aquí, yo tenía el título, creo.
Y el título fue arbitrariamente, hola, cerca del título mundial.
Y luego aquí abajo, el cuerpo, de supuesto-- entonces cerramos la etiqueta body.
Y a continuación, sólo un poco redundante, Tuve la misma cosa aquí abajo.
>> Así que yo sostengo que esta es una página web.
Esto es algo que ahora podrían vivir en la web,
aunque, por supuesto, que es, literalmente, viviendo en mi escritorio en este momento.
Pero de hecho, si puedo minimizar gedit, Voy a ver en mi escritorio en su icono.
A pesar de que este es el aparato, usted puede hacer esto en Mac OS
sin TextEdit o Bloc de notas de Windows con incluso.
>> Y si me voy por delante y haga doble clic que, incluso, y select-- bien, vamos a
No seleccione que debido Chrome no está abriendo.
Vamos a seguir adelante y abrir Chrome.
Y luego hacer Comando + O para abrir Y navegar a mi escritorio
y abrir ese archivo.
Así es como interpreta un navegador HTML, de arriba a abajo, de izquierda a derecha.
Hey, aquí está el navegador HTML.
Aquí está la cabeza.
Aquí está el título.
Aquí está el cuerpo.
Y, de hecho, así es como que hace que la página web.
>> Pero note la URL.
Ninguno de ustedes podría levantar este específico página en sus ordenadores portátiles en estos momentos,
incluso en el interior de su aparato a través de dicha URL,
porque file: // indica que es en realidad en mi sistema de archivos, el disco duro,
no el tuyo.
Así que esto no es del todo útil.
>> Ahora vamos a avanzar hacia utilizando un servidor web real.
Y resulta que el CS50 Appliance es algo más que un entorno en el
usted puede escribir código en C y compilar y ejecutarlo como que has estado haciendo.
También se ha configurado por el personal para representar una red típica
servidor que está en el Internet, uno que podría pagar por
o uno que está en la llamada nube.
>> Y se está ejecutando libre de código abierto estándar
software, por ejemplo, algo llamado Apache, que es tal vez
todavía la web más popular software de servidor en el mundo
que miles de sitios web utilizan hoy en día.
Y también tiene incluso software como MySQL,
que es un servidor de base de datos que con el tiempo vamos a llegar,
que no es más que decir Puedo empezar a tratar
mi aparato como un servidor de pleno derecho que yo no estoy pagando por otra parte.
Sólo vive en mi propio ordenador portátil para con fines de desarrollo y de conveniencia.
>> Así que vamos a seguir adelante y tomar ventaja de esto.
Voy a seguir adelante y abrir una ventana de terminal.
Y yo voy a seguir adelante y move-- realidad, en primer lugar yo soy
ir a navegar a mi escritorio.
Si hago ls, hay hello.html.
Y yo voy a ir adelante y empezar a utilizar
un nuevo directorio que hemos no se utiliza antes de hoy.
>> hello.html-- voy a mover a ../vhosts para hosts-- virtuales
más sobre esto en el futuro-- y después en un directorio llamado localhost,
que es el apodo dado a casi cualquier ordenador, ya sea un Mac, PC,
o Linux, y luego específicamente en un directorio que nosotros,
el personal ya creado para usted cuando descargó el aparato llamado
público.
Y como su nombre lo sugiere, nada Me puse en esta carpeta, en teoría,
va a ser ahora público, al menos a las personas
que tienen una directa conexión con el ordenador.
>> Así que ahora me dejes ir por delante y hacer cd a ese mismo directorio
para que yo pueda ver lo que hay pasando y ls tipo.
Y, de hecho, esa es la Lo único en que hay.
Afirmo ahora que ya he puesto este hello.html presentar dentro de un directorio
llamado público dentro de un directorio llamado localhost en el interior de un directorio
llamados vhosts, que gracias al personal CS50
ha sido pre-configurado para ser la raíz de su servidor web,
Puedo espero hacer ahora esto.
>> Voy a abrir una nueva pestaña.
Y yo voy a ir a no presentar: //.
Voy a utilizar real http / localhost, que
de nuevo, es el apodo para mi propio servidor.
Y luego me voy a ir a lo el nombre del archivo, sólo para ser claros?
¿Dónde está esta historia probablemente va?
hello.html.
>> Así que en otras palabras, quiero ahora esto es mi propio ordenador, mi propio aparato,
como si se trata de un servidor real.
Su apodo es localhost.
Pero pensar en localhost como como Facebook.com google.com, lo que sea.
Es sólo mi nombre local.
Y luego la final lo que quiero es en la raíz del disco duro, por así decirlo,
o la raíz del servidor web, ergo la barra diagonal y después
el nombre del archivo hello.html.
>> Permítanme Alejar y pulsa enter.
Y, en efecto, no es ahora mi página web.
Así que es un poco diferente.
Y es igual de decepcionante.
Esta es la versión antigua.
Déjame reducir el tamaño del tipo de letra espalda.
Esta es la edad.
Esta es la nueva.
Pero lo que está sucediendo, fundamentalmente, ahora es que se está utilizando HTTP.
>> Vamos a hacer esto un poco más claro o, si se quiere, un poco más complicado.
Déjame ir a la parte inferior derecha esquina de mi aparato.
Y darse cuenta de que todo esto tiempo, ha habido un número.
Esa es la dirección única de su Appliance CS50.
Es una dirección privada, como se deduce de la 172.16,
que sólo significa que usted sólo físicamente puede acceder a este servidor web.
Todo es un cortafuegos y muy bien protegida del resto
del mundo a causa de este direccionamiento.
>> Y ahora note aunque si voy a esta dirección, no en mi aparato,
pero en Mac OS-- voy volver por aquí.
Este es mi Mac ahora.
Y ahora voy a abrir esta versión de Chrome aquí.
Y yo voy a ir a http: //172.16.25 / Y me olvido de la rest-- 133.
>> Así que voy a visitar de mi Mac que la dirección IP /hello.html Intro.
Y ahora que veo desde mi Mac que mi CS50 Appliance, que es
Dirección IP es que número, es, en efecto comportándose
como un servidor web en el Internet.
No tiene un bonito fácil recordar el nombre como Facebook.com,
pero se está utilizando HTTP al parecer, a pesar de que Chrome
es una especie de simplificación del mundo para nosotros, pero no nos muestra HTTP.
Pero esto es de hecho exactamente eso.
Chrome se acaba salvando algunos pulsaciones en estos días.
Y eso es lo que ahora vemos.
>> Así que eso es todo bien y bueno.
Pero es una página bastante decepcionante.
Déjame ir y hacer algo un poco diferente ahora.
Así que permítanme volver a gedit.
Y en vez de hola, mundo, vamos a poner una imagen.
Y yo reclamé desde antes-- dejarme ir en mi directorio público localhost.
Y déjame ir adelante y copio un toda montón de archivos a partir de hoy
de mi carpeta de Dropbox en aquí.
>> Ahora bien, si escribo ls, mirar en todos estos archivos
que he distribuido por la el sitio web del curso antes de hoy en día,
uno de los cuales es todavía hello.html.
Así que hay que uno.
Y recordar este tonto de última cat.jpg tiempo--.
Así que voy a tratar de integrar cat.jpg dentro de mi página web.
>> Voy a seguir adelante y hacer cat.jpg, ahorrar.
Permítanme volver a Chrome.
Y permítanme zoom en la fuente y ahora recargar.
Vaya, donde pongo esto?
Standby-- Todavía tengo la edad versión de mi escritorio abierto.
Así que me dejes ir a mi host virtual, mi localhost, mi público, y hello.html.
Así que ahora me dejes ir por delante y decir cat.jpg interior del cuerpo
donde yo quiero que sea mostrado y volver a cargar.
Por supuesto, esto no es correcto.
>> Así que tengo que decirle al navegador un poco más deliberadamente lo que yo quiero que haga.
Simplemente escribiendo el nombre es obviamente no suficiente.
Así que recuerda que había otro etiqueta, imagen, img, para abreviar.
Eso es simplemente porque los seres humanos no les gusta las palabras llenas de tipos.
Y luego podemos hacer fuente = "cat.jpg".
>> Y ahora me voy a hacer una cosa diferente aquí.
A pesar de que todos nuestras etiquetas hasta el momento tienen
tenido esta noción de un comenzar la etiqueta y una etiqueta final,
que en realidad no hacen sentido de una imagen, ¿verdad?
Una imagen es o existe o no existe.
Y por lo que los seres humanos han llegado con una convención más simple.
Cuando usted tiene una etiqueta que puede tanto empezar y terminar al mismo tiempo--
puede estar vacío, por lo que sólo speak-- poner la barra diagonal dentro de la etiqueta
en el final.
Ahora voy a volver a mi navegador.
Hit Recargar Maldita sea, algo está mal.
Usted probablemente ha visto esto de vez en cuando en la web,
aunque no ha sido culpa tuya.
Es culpa del servidor web.
¿Qué odas este parece indicar?
Es roto.
Ahí es donde la imagen pertenece.
¿Sí?
>> AUDIENCIA: Pero no lo hace tener acceso a la imagen.
>> DAVID J MALAN: No hace tener acceso a la imagen.
Eso, o peor aún, tal vez que ni siquiera existe.
Vamos a ver si no podemos diagnosticar eso.
Recordemos de la última vez que si en Chrome, en el aparato,
o incluso en tu Mac o PC, vas al menú de desarrollador
e ir a las Herramientas de Desarrollo opción, que probablemente tienes
no se utiliza mucho o nunca.
Y si voy a la red y volver a cargar la página,
vamos a ver la realidad de HTTP peticiones que se están realizando.
>> Parece que es hello.html de hecho bien, por lo tanto, el 200.
Pero cat.jpg es un 403.
Así que no es un 404.
File probablemente existe.
403 significa prohibido.
Así que esto es un poco confuso.
Voy a volver a mi ventana de terminal.
Permítanme acercarse hasta aquí.
Y déjame hacer un ls.
Hay esos mismos archivos.
>> Ahora déjame hacer un ls-l, que usted probablemente
utilizado antes de mirar a archivo tamaños o tal vez las marcas de tiempo.
Y vemos un montón de información abrumadora.
Pero notar algunos detalles.
Aquí está hello.html en este remar aquí y aquí está cat.jpg.
Y es sólo el aparato siendo fácil de usar, poniendo de relieve JPEG
en púrpura como este.
Pero ¿qué otra cosa es diferente al lado el tamaño del archivo y el nombre del archivo?
>> AUDIENCIA: [inaudible].
DAVID J MALAN: Sí, hay dos de aquí R más.
Note lo que ha hello.html pasando.
Así que resulta que el nombre de este directorio público es importante.
Cualquier cosa en este directorio está destinado a ser público.
Pero no es suficiente sólo para soltar los archivos en allí.
También es necesario cambiar el modo de los archivos,
cambiar los permisos de el archivo en forma proactiva no
ser la configuración por defecto, que es que sólo puedo leer
y escribir, yo siendo el propietario.
Quiero que todo el mundo a todo el mundo ser capaz de leer mi archivo, por así decirlo.
Leer sólo significa verlo.
>> Y, de hecho, como se verá en el problema establece siete, eso es lo que media de estos R.
Significan estos dos R que todo el mundo otra parte del mundo también leerlo,
sobre todo ahora que que es en este directorio.
Así que la forma más sencilla de solucionar este problema es ir a mi pronta y hacer chmod para el cambio
modo y luego hacen un + r, en conjunto, todos, todos, además de r para lectura,
y luego cat.jpg Intro.
Nada parece suceder, que por lo general significa una buena cosa.
Así ls-l nuevo-- ahora echemos un vistazo a cat.jpg.
Y este permiso parecen haber cambiado.
Como acotación al margen, si usted hace una error y que, por ejemplo,
Acabo de hacer tu-- No sé-- ensayo públicamente accesible por accidente,
usted puede hacer lo contrario, chmod a-r.
Aunque, francamente, no debería estar en el directorio público
de todos modos, si esa es la preocupación.
>> Así que ahora vamos a volver a mi navegador y recarga.
Y yo voy a hacer clic el pequeño Cazafantasmas
símbolo para borrar la parte de la pantalla para que podamos ver nuevas solicitudes.
Y, de hecho, aquí está Gato gruñón de antes.
Pero lo más importante, técnicamente, no es
el número 200, que significa que conseguimos en Aceptar.
Muy bien, así que eso es todo bien y bueno.
Pero no estamos haciendo el mejor de los sitios web,
ni vamos a probar demasiado difícil hacer el más lujoso de los sitios web de hoy en día.
Pero vamos a por lo menos hacer algo súper familiarizados antes traqueteo
fuera de algunas otras etiquetas.
Así que supongo que no sólo quiero un gato aquí.
Supongamos que realmente quiero esto gato para enlazar a algo.
>> Yo podría, por ejemplo, hacer algo como esto.
una para href ancla para equals-- referencia hiper
y vamos a hacer algo como www.google.com cerca
citar corchete de cierre.
Y ahora buscar gatos.
Cerrar etiqueta de anclaje.
Así que esto tiene solamente una especie de fundamentalmente nuevo detalle.
La etiqueta, por supuesto, es diferente.
Es el nombre de una de ancla referencia href o hiper.
>> Pero lo más importante, no hay esta característica sintáctica aquí.
Esto es lo que vamos a empezar a llamar no una etiqueta, sino un atributo.
Y un atributo es algo que modifica el comportamiento de una variable.
Y este atributo, href, medios modificar el comportamiento de este anclaje
de modo que cuando se hace clic, que va a esta URL aquí.
Y, por supuesto, que la URL es Google.
>> Mientras tanto, ¿qué es esto texto aquí va a ser?
Bueno, eso va a ser lo que la realidad humana
ve como el subrayado enlace, tan simple como eso.
Así que vamos a probar esto.
Permítanme guardarlo.
Todavía estoy en hello.html.
Sin embargo, en las versiones en línea, verás los nombres de los archivos reales que previamente preparada.
Déjame ir por delante y volver a cargar.
Y ahora es un muy página decepcionante aún.
Pero si se ciernen sobre allí-- y que es un poco pequeña,
pero- se puede ver en la parte inferior esquina izquierda de la pantalla,
que ha hecho de ir a google.com.
Y si hago clic en eso, lo hará me bata camino a la real Google.
>> Pero nótese aquí una oportunidad para la explotación, así como un aparte.
Y volveremos a otra temas de seguridad dentro de poco.
Porque no esta dicotomía entre el lugar donde vas y lo que usted dice,
usted podría hacer algo como esto-- http://www.google.com.
Bien, y ahora si vuelvo a cargar después de guardar esa página,
parece que me voy a ir a Google.
Pero no hay ninguna razón por la que tener que ir a Google, ¿no?
De hecho, me podría ir a algo así como badguy.com, vuelva a cargar la página aquí.
Y fíjense, todavía se ve como Google.
Y sólo si estoy fuerte lo suficiente para asomar por aquí
puedo ver que es incluso ir a ir a un lugar diferente.
>> Así que si alguna vez has metido un correo electrónico, en especial
uno de Paypal, o aparentemente de PayPal
pidiéndole que ingrese en su cuenta, esta
es por eso que nunca debe nunca haga clic en enlaces en correos electrónicos,
francamente, los enlaces en los correos electrónicos.
Si usted sabe que tiene real dinero en Paypal o Banco
de América o fidelidad o cualquier sitio web, escribir manualmente en.
Debido a que se vea lo fácil que es engañar a alguien en la presentación de lo que
se parece a un enlace.
Pero lo que realmente podía ir absolutamente en cualquier sitio.
>> Y hay mucho más amenazas que esto.
De hecho, este es un poco de una tangente ahora, pero uno
de los mejores que he visto que ya se ha cerrado,
es alguien llevado a la gente a-- por lo que este podría decir,
haga clic aquí para acceder a su cuenta, una cuenta bancaria.
Y este fue el Banco de Occidente.
>> Así que alguien compró esto.
Y es un poco más fácil de ver que en una fuente mono espaciada zoom
en en un proyector de 30 pies.
Pero cuando es pequeña fuente en un dirección de correo electrónico que usted está recibiendo,
esto parece bankofthewest.com, no bankofthevvest.com,
que alguien había pagado $ 10 a comprar.
Y entonces lo que les llevó a la equivalente a una mala página web.
>> Y verás también-- realidad que podemos hacer esto-- si voy a la página web real,
bankofthewest.com, de nuevo, el recuerdo de la última vez
que si esta es su página web y usted es curioso en cuanto a cómo funciona,
que sin duda puede ir a Herramientas para desarrolladores de Chrome.
Y usted puede ver toda la HTML con un formato agradable allí.
>> Pero más al punto, usted cam-- Cerremos
esto-- usted puede ir para Ver Desarrollador Ver código fuente.
¿Por qué no puedo simplemente copio todo eso y entonces yo
puede entrar en mi pequeña ventana gedit aquí y hacer mi propia página web.
Guarde esto en hello.html.
Y probablemente esto va a romper, porque no es tan fácil por lo general.
Pero ahora si vuelvo a cargar mi propia página en mi propia CS50 Appliance y recarga golpear,
Bueno, algunas cosas se rompió.
Pero estoy bastante cerca de tener mi propio sitio web bancario, ¿verdad?
Todo esto HTML--
>> [Risas]
>> DAVID J MALAN: --Yo no actually-- y usted
saben que hay alguien por ahí que sería realmente haga clic en estos enlaces también.
Así que claramente, algunas cosas se rompió.
Pero eso va a conducir nosotros en una discusión,
innecesariamente en este momento, en cuanto a lo CSS, hojas de estilo en cascada, son,
y cómo en realidad descargar los otros archivos HTML
y JPEG archivos GIF que el sitio web podría estar utilizando.
Pero todo eso es realizable.
Pero lo que realmente se reduce a estas muy simples heurísticas.
>> Así que ahora vamos a leerlo a través de un par de otros ejemplos de HTML
sólo para darle un sentido de qué otra cosa se puede hacer.
Por ejemplo, este es list.html.
Supongamos que yo quería hacer una página web con una lista de casas en el patio.
Podría utilizar la etiqueta ul para desordenada lista y entonces el niño elemento de la lista
y luego iterar over-- o lista, rather-- las casas en cuestión.
>> Y si abro esto, vamos a hacer esto.
Vamos a no hello.html, pero a list.html.
Maldita sea.
¿Cómo puedo solucionar esto?
Es el mismo problema que antes, ¿verdad?
Así que déjame hacer oops-- chmod-- chmod a + r de list.html.
Y ahora si me voy de vuelta a mi navegador y haga clic en Actualizar, ahí está.
Así que si alguna vez has querido hacer una lista con viñetas, se puede hacer eso.
Si quieres ser super lujoso y hacer una lista ordenada, no una lista desordenada,
cambiar aquellos a ol, vuelva a cargar la página, y ahora el navegador numerar por usted.
>> ¿Qué más podemos hacer?
Bueno, un par de otros-- si tienes largos párrafos de texto--
Por ejemplo, algunos Texto latino como esto--
y quiere que en párrafos separados, p abierto, cerca de p para la etiqueta de párrafo.
Y hacerlo una y otra vez.
Y si ahora abro este archivo, paragraphs.html, bueno, esto
es cada vez molesto.
Así que ahora vamos a volver a mi pronta, chmod a + r r estrella .html--
un pequeño comodín por así decirlo.
Se debe solucionar todos estos problemas para mí.
Vamos a volver a cargar.
Hay tres párrafos.
>> Y ahora vamos a seguir adelante y abrir otro.
¿Qué hay de mesa?
Se dará cuenta de las miradas de mesa un poco más complejo.
Pero es la misma idea-- etiqueta abierta, etiqueta abierta,
abierto, abierto, abierto, cerca de la etiqueta, etiqueta abierta.
Y esto sucede en reposo durante tabla, cuya frontera es aparentemente
va a ser un espesor 1-- cualquier que significa: fila de la tabla, tabla
datos, lo que significa una célula.
Y si vuelvo a mi navegador aquí e ir a table.html,
se puede ver algo así, horrible.
Pero vamos a llegar al punto donde podamos realmente
hacer las cosas más bonitas que eso.
>> Así que permítanme estipulo por ahora.
Hay racimos de más etiquetas.
Y HTML es maravilloso para recoger porque, francamente, todo lo que tiene que hacer
es mirar a las páginas web existentes con el que está familiarizado.
Y usted es como, ¡oh, así es como lo hicieron estéticamente.
>> O usted puede buscar cualquier línea de recursos en cuanto a cómo funciona el HTML,
y verás que hay una todo el vocabulario de otras etiquetas.
Pero con el modelo mental sencillo solo que casi cualquier etiqueta se abre
tiene que ser cerrado, lo que realmente no es suficiente para enseñar a uno mismo
HTML después de entender estas ideas básicas de etiquetas
y atributos y la buena formación que hemos hablado,
nada de cerrar para que podamos abrir para que no confundamos un navegador.
Así que vamos a tomar ahora esta a un nivel más interesante
por ir a la real.
Y vamos a ir a mi Mac aquí, a google.com.
Y ahora notice-- vamos a hacer esto.
Estoy gong para ir a Configuración, Configuración de búsqueda.
Quiero desactivar esta instantánea molesto resultados cosa donde inmediatamente
comienza respondiendo a su escritura.
Vamos a hacer esta escuela más viejo, así vemos realmente lo que está pasando.
>> Así que me voy a salvar mi La configuración de Google aquí.
Y ahora notice-- voy a buscar algo como gatos.
Y todavía está haciendo auto completa aquí, pero sobre la base de las cosas
la gente ha escrito en el pasado.
Pero darse cuenta de lo que va a pasar.
>> En la dirección URL en el momento es esto, sólo google.com.
Y técnicamente, es barra.
Google acaba de salvar a un personaje y no nosotros que mostrar.
Ellos nos están mostrando https, sólo a ser super tranquilizador que estamos
en una página segura o cifrada.
>> Así que déjame ir por delante y la búsqueda de los gatos.
Ahora bien, esto se puso muy abrumadora rápidamente.
Mira la longitud de esta URL.
Pero resulta que la mayor parte de este material en el URL es en realidad bastante inútil.
Voy a empezar a borrar cosas que no entiendo.
Veo gatos.
Entiendo gatos.
No sé por qué los gatos son allí de nuevo.
Realmente no lo sé lo que es esta tontería.
Así que sólo voy a mantener destacando y eliminación de la materia
que yo no entiendo, destilación de la URL en sólo esto.
>> Ahora voy a conseguir entrar de nuevo.
Parece que Google sigue funcionando.
Así que, por alguna razón, están agregando un montón de cosas que por defecto de su URL.
Pero no es estrictamente necesario.
Así que lo que es bueno acerca de esto?
Bueno, déjame ir por delante y abrir el inspector de Chrome.
Hay un pequeño atajo de ratón para ello.
>> Ir a la ficha Red.
Y ahora permítanme recargo esta página una vez más.
Y yo estoy sosteniendo Shift.
Como acotación al margen, navegadores tienden a almacenar en caché o guardar
información sólo por el bien de la eficiencia.
Pero por lo general, Shift y la celebración de recarga obligará a todo lo
para empezar de nuevo desde el principio.
Y eso es lo que quiero hacer aquí.
>> Y cuenta todos estos filas que sólo aparecían.
Resulta que en cualquier web determinada página, puede que haya un solo archivo
involved-- hello.html-- o no podría ser 52, como en este caso.
Cuando visito a google.com, al parecer, mi navegador
arranca 52 peticiones HTTP separadas.
Porqué es eso?
>> Bueno, mira lo que hay dentro de esta página web hasta la parte superior.
No hay sólo texto, pero no hay imágenes reales
de gatos de más a la derecha.
Hay un logotipo colorido hasta aquí a la izquierda.
Hay todos estos iconos para un micrófono y así sucesivamente.
Hay una gran cantidad de piezas, construcción de bloques, piezas de arañazos, si se quiere,
a esta página web.
Y lo que el navegador está haciendo en consiguiendo el primer archivo, que
es esta fila aquí, es esencialmente iteración en la parte superior de HTML
a abajo, de izquierda a derecha, en busca de cosas como las etiquetas de imagen u otras etiquetas
que están mencionando otros archivos y cuando se los ve, va y les va a buscar
a través de HTTP, toda viable metáfora sobre,
y luego los muestra en la ubicación adecuada en la página web.
>> Pero nótese aquí si me centro en los primeros gatos tiro, búsqueda,
cuenta de que, de hecho, está utilizando HTTP 1.1.
Y, por desgracia, Google Chrome ahora en la versión 39
es una especie de embrutecimiento y cosas no nos muestra los encabezados reales.
Pero lo que en verdad es enviado una solicitud por no recortar, pero / búsqueda? q = gatos.
>> Ahora, ¿por qué es tan importante?
Bueno, yo voy a deducir de esto que si Google
apoya las consultas de esta forma, ¿por qué No puedo implementar mi propia búsqueda
motor para el CS50, pero sólo la parte delantera final, sólo la interfaz gráfica de usuario.
Y vamos a externalizar la parte de atrás, la búsqueda real da lugar a Google.
>> Entonces, ¿cómo puedo hacer esto?
Bueno, déjame ir en gedit aquí.
Y déjame ir por delante y abro hasta, digamos, un nuevo archivo.
Y me voy a guardar este temporalmente como búsqueda 0.html.
Y luego, finalmente, vamos rápido adelante a la que yo ya preparados.
>> Y yo voy a azotar rápidamente tipo doc
html soporte abierto html cerca soporte html.
Entonces me voy a hacer la cabeza cerca de la cabeza del título abierto CS50
Buscar en lugar de la búsqueda de Google.
Aquí abajo voy a tener el cuerpo, aquí abajo cerca del cuerpo.
Y ahora necesito CS50 Buscar.
Y, de hecho, vamos a construir esta forma incremental.
Voy a seguir adelante y cerrar esto y en realidad lo puso en mi directorio público.
Así que me dan sólo un momento.
búsqueda-0.html-- voy a temporalmente llamarlo search.html.
Voy a chmod un search.html + r.
Y ahora me voy a abrirlo.
Muy bien, así que eso fue rápido.
Pero el objetivo era simplemente para llevarnos al punto
de tener este texto archivo llamado search.html.
Así que no hay mucho que ver todavía.
De hecho, si me voy a mi navegador, y ir a search.html, eso es todo lo que es.
Pero ¿sabes qué?
Puedo ser un poco más lujoso.
Leí en un libro que hay una etiqueta de encabezado llamado h1.
Y yo voy a seguir adelante y utilizar ese h1 h1 se abren y cierran.
Actualizar la página.
Y ahora es más grande y más audaz, no tan interesante,
pero al menos estructuralmente más interesante.
Pero ahora permítanme presentarles a otra etiqueta.
Resulta que hay una etiqueta de formulario.
Y permítanme cerrar esa etiqueta.
Y resulta que hay una etiqueta de entrada que
tiene un atributo llamado tipo, que es el tipo de datos del campo,
si se quiere.
Y va a ser de tipo texto.
Y su valor se va ser CS50 Buscar.
Cerrar la etiqueta.
Y no va a haber ninguna noción de apertura y cierre con separar las etiquetas.
>> Permítanme volver aquí y ver lo que está pasando, vuelva a cargar.
Conseguir interesante.
Parece que se trata de un campo de texto.
Y en realidad, yo no quería para poner un valor todavía.
Permítanme volver aquí y realmente obtengo deshacerse de este valor para que sea sencillo.
En lugar de un valor, lo que quería para dar esta cosa era un nombre.
Y yo no sé lo que es, así que voy a volver a eso.
>> Pero debajo de eso, quiero hacer input type = enviar.
Y este valor será CS50 Buscar.
Y vamos a ver por qué movido el valor a este.
Cuando vuelvo a cargar, me parece que ahora tienen los inicios de mi propia búsqueda
motor, super horrible, aunque, francamente, es
no un tiro lejos de lo que Página predeterminada de Google se parece.
>> Si voy aquí ahora, yo puedo escribir gatos y ojalá haga clic en Buscar.
Pero no estoy muy hecho todavía, porque no he implementado,
obviamente, una base de datos.
No he rastreado la Web de resultados de búsqueda.
Así que tengo que subcontratar que Google.
Entonces, ¿cómo lo hago?
>> Bueno, en primer lugar me que tenga que agregar y acción
atribuir a mi forma de etiqueta que es http://www.google.com/search.
Y sé que sólo por tener inferida por mirar de cerca
en su URL.
Y ahora tomar una conjetura.
¿Qué le debo este campo de texto, probablemente, ser llamado, sobre la base de dónde venimos
desde antes?
>> AUDIENCIA:? Q.
>> DAVID J MALAN:? Q.
Y en realidad no necesitamos pregunta marcar resulta, pero q es de hecho,
q para consulta probablemente por De forma predeterminada, sólo porque eso es
lo que Larry y Sergey se le ocurrió hace años.
Así que ahora déjame volver a cargar esta página.
No se ve tan diferente.
Pero ahora observen lo que sucede.
>> Si escribo en gatos y clic CS50 Buscar y dejar ir,
noto consigo llevaron distancia a real Google.
Ahora, Google está siendo un poco molesto en que están
añadiendo un parámetro adicional, si se quiere, a la dirección URL.
Eso es todo suceso de forma automática en el lado de Google.
>> La parte importante es que me parece haber generado esta petición aquí.
Y, en efecto, eso es lo que pasa.
Cuando usted tiene que HTML se parece a esto, este
es una especie de notación de los desarrolladores web por decir, seguir adelante y crear un formulario
que cuando se presentó, que va a ir a esta dirección URL.
Y cuando la URL ha proporcionado valores para cosas como q,
no ir solo a esta dirección URL.
En realidad, pase a la pregunta marca y entonces q = gatos.
Anexar el parámetro, el Parámetro HTTP así.
>> Y sólo para ser super exacto, lo que está siendo inferir aquí--
pero voy a estar más explicit-- es que el método que quiero usar
es conseguir, en lugar de algo como puesto, que finalmente nos veremos.
Así que en resumen, sólo por la comprensión HTML y el uso de algunas etiquetas bastante simples,
ahora podemos empezar a crear nuestro propio usuario final frente
interfaz con una búsqueda motor detrás de él.
>> Pero esto, por supuesto, es bastante horrible.
Así que déjame en realidad abro un poco mejor versión.
Este es el que yo preparé en avanzar que tiene algunos comentarios.
Pero verás que yo más o menos recreado.
Así que esto ya está disponible en línea.
Y fue así que de forma preventiva ir a https sólo para mantener las cosas simples.
>> Y ahora vamos a abrir un siguiente iteración de este.
Es la versión 1 en lugar de 0.
Lo que salta a la vista como poco diferente en este ejemplo?
>> AUDIENCIA: [inaudible].
>> Sí, hay un centro de alineación de texto.
Esto es un poco raro aquí.
Pero esto es realmente nuevo.
Y tal vez de adivinar lo que va a suceder.
Si voy a mi navegador ahora y visitar búsqueda-1.html,
es casi la misma cosa.
Pero es un paso más cerca de siendo un poco más bonito.
Todavía es feo, pero más bonito en que al menos todo lo que ahora está centrado.
>> Así que resulta que lo que estoy usando es otro idioma por completo llamado
CSS, hojas de estilo en cascada.
Y CSS, francamente, es una especie de, en mi opinión personal,
un lenguaje diseñado atrozmente.
Es muy molesto para recordar todos los diversos detalles.
Pero es lo que estiliza la en toda la Web en todo el mundo hoy en día.
He ofendido a alguien.
Bien.
Así que vamos a volver aquí y ver cómo en realidad estamos usando esto.
Y resulta que, por lo menos es en realidad un lenguaje bastante simple.
Es sólo pares de valores clave, propiedades y valores, propiedades y valores.
De hecho, aquí está uno dicha propiedad y el valor.
>> Simplemente usando el estilo atribuir en mi cuerpo de la etiqueta
y que le da un valor de un de colon palabra y otra palabra,
o una propiedad y un valor, Puedo afectar la estética
de la página web, no necesariamente la estructura, sin embargo,
pero la estética de la misma.
Y con sólo buscar en Google alrededor, me doy cuenta que las hojas CSS, de estilo en cascada,
apoya una propiedad llamada text-align, cuyo valor puede
ser izquierda, derecha o centro, por ejemplo.
>> Así que ahora, cuando vuelvo a cargar esta página, lo que me hizo llegar
era una página centrado, pero aún así es bastante feo.
Vamos a seguir adelante y abrir hasta la versión 2 de Buscar.
Y ahora noto que he hecho un poco más.
Nótese que hasta aquí dentro de la cabeza etiqueta, no puede haber más de título.
De hecho, hay una etiqueta de estilo.
Y aquí es donde se acaba de crear una poco CSS visión desordenada a veces.
>> Tenga en cuenta que me parece que tienen algo que estructuralmente se ve muy diferente.
Pero aquí está el nombre de la etiqueta quiero estilizado.
Aquí están nuestros viejos amigos rizado aparatos ortopédicos y corchete cerrado.
Y entonces aquí es que propiedad y su valor.
>> Si se me carga este archivo, search2.html, el resultado final es idéntico.
Pero es un paso hacia un mejor diseño.
Por factorizar este CSS, tengo no mezclada con mi HTML.
Y, de hecho, como veremos, que podía reutilizar estas propiedades y valores.
Si yo quería hacer ramos de partes de mi página web centrados,
Yo no tengo que escribir style = text-align centro de todo el lugar.
Puedo poner en un solo lugar Tal vez, como en la parte superior.
>> Pero incluso esto no es el mejor diseño.
De hecho, una de las cosas que usted aprenderá a medida que pasan más y más tiempo con
programación web es que cuanto más se puede modularizar las cosas y las cosas de factores fuera
como archivos .h dejarnos factor de materia hacia fuera, helpers.c gustaría dejar que nos cosas de factores fuera
Hace un par de conjuntos de procesadores.
Del mismo modo, podríamos desee para lograr esto.
>> Así que notar en la versión tres de search.html tengo
limpiado la cabeza de la página y sólo hay que poner
en este, una etiqueta de enlace, que A pesar del nombre,
no te da un hipervínculo.
Vincula a otro archivo a través de un href cuyo valor en este caso,
es la búsqueda-3.css
Entonces me doy cuenta de que vamos rápidamente.
Pero todo lo que estoy haciendo es una especie de mover las cosas.
Déjame abierto búsqueda 3.css.
Ahí está, nada realmente a ella.
Acabo de copiar y pegar en un nuevo archivo, al igual que nos factorizada cosas fuera
en otros archivos antes.
Y el result-- completamente underwhelming--
va a ser exactamente lo mismo.
Pero nos estamos moviendo toward-- no, no lo es.
Oh, yo sé por qué.
>> Por lo tanto, parece ser un error.
Y es en algún sentido.
Pero permítanme abrir mi ficha Red.
Permítanme volver a cargar la página.
Ah, ¿por qué no se está aplicando la CSS?
Bueno, el archivo CSS, del mismo modo, tiene para ser legible mundo, por así decirlo.
Y también está prohibido.
Así que déjame hacer un chmod a + r de estrella dot CSS-- whoops--
estamos CSS punto es sólo el extensión de archivo para los archivos CSS.
Ahora voy a volver a mi navegador y recarga.
Bien, un poco mejor.
>> Ahora déjame hacer una última cosa.
En busca-4.html.
Tengo una versión que me acaba de ocurrir era manera más fría, aunque de forma más
complicado.
Veamos el resultado en primer lugar.
Cerrar esta para darnos más espacio.
Cambiar esta a la búsqueda-4, Enter.
>> Y ahora un montón de cosas están rotas.
Voy a volver en mi directorio aquí.
Y ahora sólo voy a hacer un chmod de a + r en un file--
porque sé que exists-- llama logo.gif, que es una imagen.
Y ahora recargar.
Y wow-- así que ahora estoy muy cerca, francamente,
al igual que la versión 1999 de Google, y francamente, la versión 2014 de Google,
¿verdad?
>> Así que es ahora ir a su sitio web, en última instancia, si la búsqueda para los gatos.
Y de hecho lo es.
Pero lo hice de manera diferente en esta versión 4?
Así que no vamos a insistir demasiado en ello aquí.
Usted verá esto en un problema establecer siete eventualmente.
Pero noto que hice un par de cosas.
>> Yo presenté un div etiqueta, que es la división,
similares en espíritu a una etiqueta de párrafo.
Pero una división es igual, aquí está una región rectangular invisible
de la pantalla.
Vamos a darle un único identificador, un pie de página, sólo
para que podamos hablar de en nuestro HTML en otro lugar.
Aquí hay otro div de la página cuyo ID va a ser contenido.
Es el contenido de la página.
Y hasta aquí es la cabecera de la página.
>> En otras palabras, no tengo esencialmente en HTML soy mentalmente
visualización de esta página web como tres componentes, una cabecera
hasta aquí con este rectángulo invisible, el contenido en el medio, y luego
el pie de página abajo, incluso aunque no vemos esas cosas.
Porque quiero en mi cabeza de La página de aquí, o en un archivo .css,
Puedo usar esta sintaxis.
>> Encabezado no es una etiqueta.
Es una identificación para que se ponga que haciendo #header,
Ahora puedo aplicar uno o más propiedades a la cabecera.
Yo puedo hacer el mismo contenido, el mismo para el contenido aquí.
>> Así, por ejemplo, en el pie de página, aviso todas estas propiedades que estoy añadiendo.
Y sé que existen sólo por la lectura arriba en la documentación para el CSS.
Tamaño de la fuente va a ser smaller-- por lo que algunos tamaño de la fuente relativa.
El peso va a ser audaces.
Margin-- cuántos píxeles alrededor it-- es de 20 píxeles.
Y va a estar centrado.
>> Pero en este momento, la página se parece a esto.
Si no estoy satisfecho con mi copia allí mismo,
Yo podría hacer algo como color rojo.
Y entonces puedo guardar este, vuelva a cargar, y ahora he stylized el pie de página.
Así que esto es sólo insinuando el poder de lo que puede hacer en una página web
de cambiar las cosas.
>> E incluso más frío que esto, si usted quiere a hurgar con los sitios web reales,
no se puede cambiar permanentemente.
Pero si abro Inspector de Chrome de nuevo
y yo no voy a la izquierda aquí, lo que muestra el código HTML de Facebook,
pero muestra a la derecha lado toda su CSS,
usted puede y cambiar las cosas sobre la marcha.
Así que déjame ir adelante y hacer esto.
>> Déjame ir por delante y control haga clic en esta palabra al azar aquí,
firmar, y haga clic en Inspeccionar Elemento.
Chrome salta muy convenientemente a la etiqueta h1 que Facebook está usando.
Y notar aquí Facebook tiene tipo de perezosamente
codificado tamaño de la fuente como una propiedad aquí.
>> Así que la cosa fresca, aunque es que si yo realmente voy aquí
y dicen, oh, Facebook, no me gusta que 64 píxeles, que ahora pueden cambiar de Facebook.
Por supuesto, sólo estamos cambiándolo para mí personalmente en el momento.
Pero esto es sólo otro herramienta en nuestra caja de herramientas
que va a permitir a nosotros para modificar y averiguar y también diagnosticar
asuntos en nuestras propias páginas web.
Y del mismo modo podríamos ir más aquí, que es la misma cosa.
Si usted realmente desea conseguir la suposición, yo decir, ahora que realmente puede mutar la página
y hacer cosas locas.
>> ¿Por qué es todo esto útil?
Pues bien, en última instancia, estamos va a querer ser
capaz de crear páginas web que son impulsados ​​por nuestros propios fines de espalda,
no sólo por Google y la externalización de la final de vuelta allí.
En realidad queremos que el valor, por ejemplo,
de la acción de nuestro motor de búsqueda atribuir a ir no a otra persona,
sino a algo como search.php, donde search.php está en nuestro propio servidor,
no en otra persona.
>> Y así, para llegar allí, que en realidad que tenga que introducir un nuevo lenguaje.
Así que ya hemos visto en un nuevo idioma aquí, o dos realmente, HTML
y CSS.
Pero lo que realmente son sólo idiomas estructurales y estéticas.
No están programando idiomas per se.
Y eso es lo más formal, tiempo que vamos a pasar sobre ellos.
Debido a que vamos a empezar ahora para la transición a PHP.
>> Así que PHP es un real lenguaje de programación.
Es un lenguaje de scripting en el sentido de que es
destinado a ser un peso más ligero que algo como C.
Y es un lenguaje interpretado, lo que significa que no está compilado.
Así que en pocas palabras, ¿qué significaba cuando utilizamos un lenguaje como C
y tuvimos que compilarlo?
¿Qué significa para compilar el código fuente en C?
AUDIENCIA: [inaudible].
DAVID J MALAN: Dígalo otra vez?
AUDIENCIA: [inaudible].
DAVID J MALAN: Perfecto.
Se convierte en binario.
Se convierte en ceros y unos a partir del código fuente Inglés-como real.
Y entonces podemos realmente ejecutar esos ceros y unos
haciéndolos pasar a través de la CPU haciendo doble clic en un icono
o ejecutar un comando.
>> PHP y Python y Ruby y Perl y JavaScript
y racimos de otro lenguas se interpretan
lenguas, lo que es decir no compila ellos.
Más bien, les das de comer como entrada a un programa que se llama un intérprete.
Y ese intérprete, que alguien más escribió,
lee el código fuente de arriba a abajo, izquierda a derecha y sólo interpreta
esas líneas y hace lo que dice.
>> Así que si te encuentras con un línea que dice de impresión,
no convierte necesariamente impresión a los ceros y unos correspondientes.
Sólo tiene este intérprete como si un estado grande que dice:
si las instrucciones del programador es impresión, y luego hacer lo siguiente.
Por lo tanto, lo interpreta sólo por tipo de razonamiento
a través de lo que usted está diciendo que haga.
>> Y PHP es uno de estos idiomas.
Y hace años PHP fue diseñado precisamente para la programación web.
Y fue inicialmente un lenguaje desordenado muy descuidado.
Y, en efecto, hay una enorme cantidad de mal código PHP por ahí.
Pero la propia lengua ha madurado con los años,
tanto es así que ahora es en realidad un maravilloso paso siguiente
pedagógicamente de C porque es tan condenadamente familiar para todo
usted acaba de ver en las últimas semanas.
>> La única diferencia inicial ya veremos es que no hay función principal ya.
Al iniciar la escritura de código, es sólo va a conseguir ejecutado no importa qué,
como veremos en un momento.
Mientras tanto, esto es lo que un la variable se ve como en PHP.
Es un poco diferente, pero sólo apenas.
>> En PHP, no hay tipado fuerte.
No hay semana escribiendo, que sólo significa que hay
son los tipos de datos, como las cadenas y los números y otras cosas.
Pero no te molestes especificando lo que son más.
PHP se lo imagina para usted.
El signo del dólar es sólo una decisión que las personas hacen de PHP años
hace de tal manera que cualquier variable en PHP sólo comienza con un signo de dólar.
Es en realidad un poco útil, ya que que salta a la vista un poco más.
>> Pero después de eso, este es una condición en PHP.
¿Qué es diferente en comparación con C?
Truco pregunta-- nada, que es realmente agradable.
Expresiones booleanas en PHP-- la misma.
Expresiones booleanas con y frente a o, los interruptores, los bucles, los bucles, loops-- Aceptar,
este es diferente.
>> Así que resulta que hay un par de otras funciones en PHP.
Uno de ellos es en realidad este, que es maravillosamente cómoda.
Si $ números es una matriz que tienes declarado previamente en un programa,
usted tiene esta fantasía para cada construcción que en lugar de hacer todo eso
me molesta es igual a 0, I es menos que esto, [? I ++?],
para cada uno de los números como el número, donde cada de esos valores de signo de dólar es simplemente
una variable, y el segundo usted puede pensar como yo
Se le podría llamar lo que quieras.
Lo llamé número.
Esto va a iterar sobre la matriz llama números.
Y en cada iteración, es va a actualizar de forma automática
para que el número de la muestra de dólar variable de modo que usted constantemente
tener acceso a la variable que desea sin tener que hacer ningún corchete
la notación o la indexación en una matriz.
>> Más allá de eso, incluso tenemos cosas como matrices, que parecen casi lo mismo,
excepto que es muy común, como veremos ver, tanto en PHP y JavaScript
de comprobar la validez inicializar una matriz utilizando corchetes.
C utiliza llaves.
Así que es ligeramente diferente, aunque nosotros no lo utilizamos mucho ese truco.
>> Pero incluso con más fuerza, PHP tiene matrices asociativas,
que es una forma elegante de decir las tablas hash.
De hecho, si usted quiere declarar un hash mesa en PHP, a diferencia de en cuántos C--
líneas de código se tarda en realmente implementar una tabla hash en C?
O el número de líneas de código es tomar para implementar una tabla hash en C?
Así que es probable que sea mucho, ¿verdad?
Es unas pocas docenas, tal vez 100 o 200.
Es trivial.
¿O se trata de ser, como pronto verás, no trivial
para implementar una tabla hash [Inaudible] y también una oportunidad.
Pero en PHP-- y francamente, probablemente no debería decir esto
hasta Monday-- en PHP, si quieres una mesa, hecho.
Eso es un hash table-- así con una línea de código.
Y
>> Una gran cantidad de idiomas que hacer.
Diviértete con pset cinco.
Así que una gran cantidad de idiomas hacer esto.
Te dan estas abstracciones que otras personas, otros programadores,
han creado para usted por lo que usted puede estar parado sobre sus hombros
y comenzar a usar las ideas que son super convincente, como tablas y árboles de hash
y trata.
Pero usted no tiene necesariamente que poner en práctica esas cosas por ti mismo.
>> Y así, en última instancia, lo que vamos a usar PHP para
está potencialmente escribir programas de la llamada de línea de comandos.
Podríamos recrear cada programa hemos escrito este semestre hasta el momento,
excepto tal vez Breakout que utiliza SPL, que es específico a C en el momento.
Pero todos los demás problemas configurado, sin duda Mario y César
y Vigenére y [? Grieta?] Y en adelante, nos
podría volver a poner en práctica en PHP, probablemente un poco más fácilmente.
>> Pero lo que estamos en última instancia, va usar PHP para programación web es.
Y vamos a introducir próximo semana un modelo mental, un paradigma llamado
MVC, controlador de vista de modelo, que si has hecho la programación
antes en Python o Rubí o en otro lugar, usted
podría saber de este equipo con Rails y Django y similares.
Pero si usted es nuevo en esto también, usted verá
que este es en realidad una muy natural extensión de la factorización
y el tipo de diseño de código que hemos
estado haciendo en C. Vamos a ahora aplicar algunas de esas lecciones a PHP
por lo que, en última instancia, somos la implementación de nuestros propios sitios web.
Y si usted es una especie de hipnotizado o sorprendido
que vamos a hacer todo el tan rápidamente,
darse cuenta de que casi todos los semestre, casi el 90%
de estudiantes CS50, incluidos los que nunca han programado antes,
terminar haciendo proyectos finales que se basan en la programación web.
Y por lo que verá que los retornos son altos en las próximas semanas.
Así que vamos a ver a continuación, el lunes.
>> ALTAVOZ 1: Y ahora, Deep Pensamientos de Daven Farnham.
Las tablas hash.
>> [Risas]