>> ALTAVOZ 1: Todos, bienvenidos de nuevo a la derecha.
Este es CS50.
Y este es el comienzo de la novena semana.
Y esto es el comienzo de el resto de su tiempo en CS50, en el que
transición ahora, finalmente, a la web aspecto del curso, donde
encontrará que muchos de los fundamentos que hemos estado exportando durante semanas
aun así volver a visitar, o acosando, nosotros.
Pero ahora, usted encontrará que se trata de una orden de magnitud más fácil
realizar ciertas tareas y resolver ciertos problemas -
tanto es así que incluso si usted cree ciertos conjuntos de problemas eran divertidas en su
manera, creo que usted encontrará que p fijó 7, p set 8, y luego,
en última instancia, el proyecto final será tanto más gratificante porque se le
encontramos que empezamos a dar por sentado ahora cosas como la gestión de memoria, y
punteros, y lo que está pasando de debajo del capó.
Y de nuevo, temática, durante todo el semestre ha sido de esta estratificación
y todas las ocasiones.
Y ahora somos una especie de hasta aquí, de pie en el
hombros de semana pasado.
>> Ahora, recordar la última vez que hablado de cómo funcionaba el internet.
Y esto era quizás un simplificación excesiva, pero recuerde que
todos los ordenadores del mundo tiene una IP abordar, aunque eso es un poco de una
excesiva simplificación todavía.
Y esas direcciones se utilizan para únicamente identificar las máquinas de manera que
cuando se envía información o paquetes, por así decirlo, que pueden tener un origen
dirección y una dirección de destino.
Y esas mismas direcciones IP se pueden utilizar tanto para lo bueno y también para lo malo,
para efectuar su seguimiento, por ejemplo.
De hecho, cada uno de ustedes con un ordenador portátil abrir ahora, o un teléfono en su
bolsillo, tiene una dirección IP en la red de Harvard.
Y no es tan difícil correlacionar que a quién y donde se
son estos días.
Pero más sobre esto quizá en el futuro.
>> Ahora que pensé en traer de vuelta algunos recuerdos de [? mejorar?] y le dará
otro clip de un show que puede ser que encuentre familiarizado.
Si pudiéramos apagar las luces por tan sólo unos segundos.
El espectáculo Numb3rs.
>> ALTAVOZ 2: Es una dirección IPP4 32 bits.
>> ALTAVOZ 3: IPP, como en Internet?
>> ALTAVOZ 2: Red privada.
Para la red privada de Amita.
Ella es tan increíble.
>> ALTAVOZ 3: Vamos, Charlie.
>> ALTAVOZ 2: Es.
Una dirección IP espejo.
Ella está dejando velemos lo que está haciendo en tiempo real.
>> ALTAVOZ 1: OK, así que un par de cosas mal con esta imagen.
Así que uno, y éste es aceptable, esto es en realidad
no es una dirección IP válida.
Una dirección IP válida tiene que ser números de la forma w.x.y.z, donde cada uno de
esas cartas es de 0 a 255.
Pero eso está bien, porque al igual que el películas donde estén disponibles los números de teléfono falsos,
que las direcciones IP falsas.
En realidad no golpeas servidores reales.
>> Pero eso sí, se trata de un navegador.
Y los navegadores no empiezan salida código informático como este.
Y si miramos un poco más profundo, el aviso que el idioma que están viendo
en la pantalla es un lenguaje llamado Objetivo C, que es el idioma en el
aplicaciones para el iPhone que se escriben, en particular los que implican
lápices de colores, como se puede ver en el código fuente aquí.
>> Bueno, pensé que esto era gracioso.
Así que este fragmento de código no tiene absolutamente nada que ver con lo que esta
en particular episodio trataba.
Así que la broma es algo sobre la gente teniendo para este hecho.
Pero esto no es tan difícil de conseguir estos detalles técnicos.
Y les animo.
Y, de hecho, 50 muy bien podría estropear una gran cantidad de programas de televisión y películas o
porque usted encontrará que es justo no es posible lo que están
haciendo en la pantalla.
Pero de hecho, este es el código que puede verlo en una aplicación iPhone
o aplicación de Mac OS.
No tiene nada en absoluto que ver con la seguridad.
Así que mantener un ojo hacia fuera para más cosas tan divertidas como esas.
>> Pero hoy comenzamos a bucear en realidad profundamente a toda una variedad de idiomas.
Un hecho, uno de los objetivos globales comida para llevar de esta porción de la
Por supuesto que no es para aprender a programar en PHP, no aprender SQL per se, no
para aprender JavaScript per se, sino más bien a enseñar cómo enseñar
usted mismo los nuevos lenguajes, ya que, de hecho, empezamos a tomar ahora la
ruedas de entrenamiento fuera de modo que después de final del curso, que no esperes un 20
especificación de la página que le diga cómo implementar algún programa.
Usted tiene suficientes ingredientes en su mente, y las herramientas suficientes en su herramienta
Kit, con el que para empezar a construir soluciones a los problemas de interés para los
por algún grupo de estudiantes, por alguna proyecto de investigación, o en realidad cualquier cosa
de interés para usted.
>> Así que con ese fin, recordemos que esto era la foto se hizo la última vez.
Y esto es de dos ordenadores, el cliente y el cortar, hablando el uno al otro.
Y el protocolo, el idioma, por lo que hablan, que estos dos ordenadores suceden
que se habla se llama HTTP.
Y eso es sólo el protocolo utilizado por computadoras para transferir información a través
la World Wide Web.
La web, por supuesto, es sólo un servicio de que se ejecuta en la parte superior de la
llamado Internet.
¿Cuál es otro servicio disponible en parte superior de la Internet en estos días?
Algún otro protocolo o - ¿qué es eso?
>> AUDIENCIA: FTP.
>> ALTAVOZ 1: FTP.
Así Protocolo de transferencia de archivos es otra.
La mayoría de ustedes probablemente no lo han utilizado.
Pero la mayoría de ustedes probablemente han utilizado cosas como Gchat o instantánea
mensajería más en general, ciertamente de correo electrónico.
Y esos, también, son servicios que se ejecutan en parte superior de la Internet, ya que, en el
final del día, la propia Internet realmente sólo obtener los datos del punto A al
punto B. Y utiliza una serie de sí mismo partículas, uno de ellos o dos
de ellos más general, llamado TCP / IP, lo que quiere decir que un ordenador de
Internet puede realmente estar haciendo diferentes cosas, correo electrónico,
y web, y así sucesivamente.
Google hace un montón de esto.
Entonces, ¿cómo son los servicios de forma exclusiva identificado, dijimos, en un ordenador
que en realidad podría estar haciendo varias cosas?
>> El número de puerto.
Y estos son humanos arbitraria convenciones como 80 es la web, 443 es
Web cifrado, 25 es el correo electrónico.
Y hay un racimo de otros.
Y esas cifras son simplemente incluidos en los paquetes de información, los
envolvente virtual, que en realidad contenía una solicitud o una respuesta.
>> Así que cuando usted regrese una respuesta de la web, por lo general, no ve ninguna
número absoluto en términos de la código de estado de la respuesta.
En realidad no ve la funcionamiento interno de la
paquetes que regresar.
Pero 200 significa de hecho en Aceptar.
Y eso significa que todo está bien.
Usted podría haber visto un montón de ellos.
Lo cual es probablemente el más común que has visto en la web?
>> 404.
Sólo significa que el archivo no encontrado.
Significa que alguien metió la pata.
Lo hiciste por escribir mal la dirección, o alguien más hizo por darle un
URL no válida, o que eliminan el archivo y la URL es todavía
siendo utilizado por la gente.
Así que cualquier número de razones pueden explicar ¿por qué no se encuentra un archivo.
Y verás, en las próximas semanas, estos otros códigos de error, y se le
tomar ventaja de algunos de ellos.
Lo peor es 500.
Si obtiene un error 500 en el código que has por escrito, piensa en eso como una especie de
analógica de fallos seg en el mundo de la programación de web.
No es tan grave.
Pero sólo significa que, en algún lugar, te equivocaste.
Así que esperamos que esos.
>> Pero vamos a ver si podemos verlas en su contexto.
Déjame ir a un navegador aquí y haga lo siguiente.
Así que esto es Chrome, que pasa a ser instalado en el aparato.
Pero la mayoría de cada navegador en estos días tiene parte de la funcionalidad equivalente.
Voy a ir hasta el menú del cromo, e ir a Herramientas, y yo voy a ir
a Herramientas de desarrollo.
Y verás que este pequeño panel se abre en la parte inferior de la ventana.
Otro atajo, para ser honesto, que me suele utilizar a mí mismo es hacer clic derecho
o Control, haga clic en cualquier lugar de la web página y sólo tiene que ir a Inspeccionar Elemento.
Y eso no sólo se abrirá esto tiene para usted.
También se abrirá, específicamente, la parte de los elementos en
el lado izquierdo.
>> Así que estamos, por supuesto, ver a Google.
Cambiaron su logotipo de hoy.
Pero si me desplazo hasta aquí, el aviso que en virtud de los elementos, que se ve
lo que se llama HTML, marcado de hipertexto El lenguaje, y este es el lenguaje
que esta y todas las páginas web, Realmente, están escritos pulg
Pero en realidad es el formato para nosotros mucho más legible
de lo que normalmente es.
De hecho, si el zoom, y yo en su lugar simplemente Haga clic o control Click
haga clic en la página, y luego vaya a Ver Origen de la página, esto es, literalmente, lo que
Google ha hecho descender a mi navegador.
>> Así que alguna persona o personas escribieron Google.com utilizando este código fuente.
La mayor parte de esto no es HTML.
En realidad es un lenguaje llamado JavaScript, que
vamos a llegar a el miércoles.
Pero lo que Chrome, y lo que todos los navegadores puede hacer por nosotros, es una especie de ver
más allá de todas las distracciones de la sintaxis loco, y vuelva a insertar espacios en blanco
para nosotros, e incluso resaltado de sintaxis, o colorear las cosas para nosotros.
Así que usted encontrará que estos llamados herramientas de desarrollo integradas en navegadores;
le hará la vida mucho, mucho más fácil porque usted puede explorar, a través de este menú
interfaz, exactamente lo que el subyacente código fuente es para
cualquier página de internet.
Y, de hecho, este es uno de los más maneras eficaces de aprender cómo hacerlo
algo nuevo, por lo menos si la página no es tan complejo como para abrumar, es
para empezar a jugar es de HTML, busque en su llamado CSS, lo que vamos a venir
a un poco también, para obtener una comprensión de la forma que el programador
implementado algún particular, característica de la página.
>> Pero lo más interesante técnicamente correcto ahora va a ser esto.
Si voy a la pestaña Red, ahora vamos a aclarar esto.
Voy a hacer clic en el pequeño cruzar símbolo aquí, y luego
ir a otro sitio web.
Y yo sólo voy a escribir en Facebook.com.
Sin HTTP, HTTPS sin, sin WWW.
Vamos a ver realmente lo que pasa aquí.
>> Intro.
Ahora note un montón de cosas sólo aparecido en este panel inferior, en
Además de la página web que aparece en la parte superior.
Voy a desplazarse de nuevo hacia la Ficha Red aquí, y voy a
haga clic en la primera fila.
Lo que esta herramienta va a revelarnos es cada una de las peticiones HTTP
que rápidamente se acaba de ir hacia atrás y vuelta entre mi navegador
y el servidor de Facebook.
Y así, cada una de las filas representa uno de tales solicitud o
respuesta, uno o más de los envolvente virtual.
O más informal, es como una persona como una persona, un cliente en un
restaurante, pedir algo otra vez, y otra vez, y otra vez.
Y el camarero sigue trayendo de nuevo de uno en uno.
>> Así que ahora, si puedo ampliar sobre este tema, previo aviso y este será el tipo de cosas
que le invitamos a y alentó para jugar por su cuenta, ya que
no pasará a través de todo con gran detalle.
Pero note que hay una pocos subfichas aquí -
Cabezales, vista previa, la respuesta, Cookies, y el momento.
Yo sólo voy a mirar las cabeceras por ahora, porque estos son poco
ingredientes dentro de la envoltura que ayudan a obtener datos desde y hacia lugares.
>> Así que en primer lugar, permítanme Haga clic en este, Vistas Fuente junto a los encabezados de solicitud.
No es la petición de que mi navegador, Cromo, en este caso, envía dentro de
el sobre virtual.
Usted recordará la semana pasada tecleado manualmente mientras
haciéndose pasar por un navegador.
Entonces recordó el servidor que es buscando el host llamado
Facebook.com.
Y luego está un poco más arcano la información que vamos a agitamos
nuestras manos por ahora.
>> Pero si empiezo a desplazarse hacia abajo ahora en esta ventana, vamos a llegar a la
cabeceras de respuesta.
Esto era lo que hay en el mundo virtual sobre que regresó de
Facebook.com.
Y si hago clic en Ver código sólo para ver el texto sin procesar de la misma,
notar un par de cosas.
Uno, Facebook también habla el mismo protocolo, la versión 1.1 de la misma.
Así que eso es bueno.
Pero el código de estado 301, trasladado de manera permanente.
>> Bueno, ¿dónde diablos se fue de Facebook?
¿Qué es esto tratando de transmitir a nosotros?
Bueno, note aquí abajo hay otra cabecera llamó Ubicación.
¿Por qué es Facebook diciéndome que trasladado de manera permanente a la URL
al lado de Ubicación?
Se me olvidó el www.
>> Así que esa fue mi elección.
De hecho, la mayoría de nosotros rara vez, probablemente, escriba www.whatever.com estos días.
Pero resulta que un administrador del sistema, como Facebook de, puede
configurar sus servidores de tal manera que o Facebook.com funciona, o
www.Facebook.com trabaja, o, en realidad, cualquier prefijo delante de su
nombre de dominio.
Así que lo que han hecho por nosotros.
Y ellos nos están reorientando, probablemente por alguna técnica,
algunas de las razones de marketing.
Ellos sólo quieren canonizar en www.Facebook.com.
>> Pero eso no es todo ello.
Si me desplazo hasta aquí, vamos a ver qué pasa.
Esto me está diciendo que trasladado de manera permanente a
http://www.Facebook.com.
Así que echemos un vistazo a la segunda solicitud que mi navegador envía.
Por desgracia, parece que Facebook se ha trasladado de nuevo porque el segundo
solicitar, mediante la selección de la URL en su lugar, dice que, también, se trasladó
de forma permanente.
Y permítanme desplazo hasta aquí a las cabeceras de respuesta.
¿Dónde ha ido Facebook ahora?
>> Así HTTPS.
Así que ahora Facebook ha comenzado, particularmente a la luz de la actual
acontecimientos de los últimos meses, sobre todo y También en los últimos dos años
para obligar a la totalidad de sus usuarios, en una buena manera, para usar HTTPS, que es más
asegurar, aunque no del todo seguro.
Y ahora mi página, mi navegador no está va a pedir esta tercera URL.
Y ahora, por fin, tenemos la de otro modo invisible 200 OK.
>> Así que lo que en el mundo o la totalidad de estas otras filas de aquí abajo.
Yo, literalmente, escribí una cosa, y mi navegador parece haber solicitado como
20 algunas cosas extrañas.
¿Qué es eso?
>> AUDIENCIA: Scripts?
>> ALTAVOZ 1: Secuencias de comandos, por lo que otros archivos escrito en un lenguaje llamado
JavaScript, lo que, de nuevo, vamos a ver un poco de este miércoles.
¿Qué más?
Las hojas de estilo.
Así que algo en un lenguaje llamado CSS, que veremos en un momento.
Gifs e imágenes JPEG, y PNG, y las imágenes, y archivos de película - lo que una página web
tiene es más probable en la forma de un archivo.
Y así, lo que estamos viendo en el lado izquierdo lado no todos los archivos
que Chrome tuvo que descargar, recursivamente, si se quiere, con el fin de
componer la totalidad de la página.
>> Así que lo que vimos hace un momento con Google, si hago clic en los elementos
pestaña, esto, claro, es el HTML, el lenguaje que compone esta página.
Pero hay montones de otras cosas.
Hay un logo.
Hay quienes azulado iconos allá.
Y hay otros elementos aún en la página que ellos mismos podrían ser
archivos separados.
>> Así que lo bueno de un navegador es que se ve en el lenguaje que vamos
para empezar a escribir, o que ya ha comenzó a escribir en P puesto 7, figuras
dónde viven esos archivos, y va y les agarra también.
Y no puedo enfatizar lo suficiente, incluso aunque algo de esto podría parecer un poco
arcano o abrumador a primera vista, aprender a programar
aplicaciones para la web, es invaluable para entender cómo estos
pequeñas herramientas de trabajo.
Estos son una especie de GDB como herramientas, pero mucho más simple, en última instancia, a utilizar -
y realmente te da ojos a lo que hemos estado dando por sentado durante
desde hace bastante tiempo.
>> ¿Qué podemos hacer ahora con esta información?
Bueno, vamos a realmente echar un vistazo a Los conceptos HTML subyacente.
Y vamos a aplazar, como ya tenemos, a secciones esta semana, que el problema
establecer 7 especificación, a algunos de los más pormenores de estos idiomas.
Pero vamos a ver si no podemos pintar un imagen de lo que usted debe entender
general aquí.
>> Así HTML, HyperText Markup Language, no es un lenguaje de programación.
¿Qué significa eso realmente?
Así HTML se parece a esto.
Y algunos de ustedes ya saben esto.
Algunos de ustedes han estado haciendo esto durante algún tiempo.
Pero vamos a ver si no podemos llenar en algunos espacios en blanco también.
Así cuenta un par de cosas aquí.
Uno, es sólo texto.
Así es como el código fuente en C, o algún otro idioma.
>> Tenga en cuenta que no parece ser un patrón aquí.
Hay sangría, pero técnicamente la sangría es sólo humana
convención.
A navegadores no le importa si hay nueva líneas y las pestañas como vemos allí.
Pero note que hay simetrías aquí.
No es lo que yo llamo, en la parte superior de el archivo, la etiqueta abierta, o el inicio
etiqueta, llamado HTML.
Y luego, más abajo, perfectamente alineados arriba, al igual que hacemos con las llaves,
vemos paréntesis abierto, hacia adelante slash, HTML, corchete de cierre.
Así que esa es la estrecha correspondiente tag o etiqueta final, por esa cosa.
>> En conjunto, todo dentro de la llamado tag de apertura y cierre de etiquetas
componemos lo que llamaremos un elemento.
Y vamos a ver, en un momento, es realmente como un nodo dentro de los árboles.
Porque si lo piensas ahora la sangría que está implícito aquí,
tipo de tener, como, un abuelo nodo llamado HTML.
¿Cuántos niños puede usted decir, con base en esta imagen, el elemento HTML tiene?
>> Así probablemente dos.
Uno es el elemento de cabeza, al parecer.
Y uno es el elemento del cuerpo.
¿Y por qué dos niños?
Bueno, yo sólo tipo de inferir que si Tengo una etiqueta de la cabeza abierta y luego un
cerca etiqueta de la cabeza, que es un elemento.
Y luego, si hay otro cuerpo abierto etiqueta y una etiqueta de cierre del cuerpo, que es como
otro elemento.
Así, en el sentido de que si que tipo de rotar la imagen de su lado, es
como tener una etiqueta HTML, y luego un etiqueta de la cabeza, y luego un cuerpo de la etiqueta, y
a continuación, un poco de texto, hola mundo, colgando fuera del propio cuerpo de la etiqueta.
>> Así que podemos hacer un dibujo que podría tener este aspecto.
Las formas son arbitrarias.
Pero noto que he utilizado una especie de elipse en la parte superior para representar la
propio documento.
Resulta que no puede haber otras cosas dentro de una página web que no tengo
dibujado aquí.
Así que vamos a pasar el rato, incluso el código HTML nodo fuera de un nodo denominado documento.
Y luego tenemos la cabeza y cuerpo y el título, previo aviso,
que está anidado más.
No me molesté en poner línea adicional pausas dentro de la etiqueta del título.
Se sentía como que estaba recibiendo un poco demasiado detallado.
Así que lo dejé en una línea allí, con título abierto, hola mundo, cerca del título.
Y luego tenemos un poco de texto colgando fuera de aquí.
>> Así que la imagen volverá a nosotros cuando nos sumergimos en JavaScript.
Y la comprensión de que cuando usted escribir HTML como este, lo que
está haciendo un navegador?
Bueno, nosotros no tenemos que preocuparnos por cómo se está haciendo esto, o con lo que
algoritmo, pero al final de la día, cuando un navegador recibe HTML como
que, a partir de Facebook o Google, analiza que, por así decirlo, se lee,
con algo como fread, de arriba a abajo, de izquierda a derecha, y como
se da cuenta, oh, la etiqueta de apertura y cierre etiqueta, comienza a malloc, por así decirlo,
un nodo en un árbol.
Y cuando se encuentra, como hemos implícita aquí con la indentación, una
nodo hijo, mallocs un nodo para que y que se adjunta al árbol.
>> Así que las estructuras de árbol, árboles binarios, árboles ternarios, y los árboles más grandes, que
nos miró a una o dos semanas atrás, el aviso que el mismo principio es
viene de nuevo a nosotros.
Y quien implementó, Chrome lo equipo hizo que, presumiblemente tenía
para poner en práctica algún tipo de estructura de árbol debajo de la capucha.
Y eso en sí es, probablemente, en un lenguaje como C o C + +, o una menor
lenguaje de alto nivel que vamos a ahora utilizan la cima de la web.
>> Así que ahora, tal vez, esto hará tener más sentido.
Tatuaje real de un tipo que podría arrepentirá eventualmente, algo así.
Vale, de acuerdo, por lo que una gran cantidad de humor de la tela.
No es realmente va sobre tan bien hoy.
Así que vamos a seguir adelante.
Está bien.
>> Así que echemos un vistazo ahora algunos ejemplos.
El más simple posible cosa podría ser esto.
Voy a seguir adelante y abrir en gedit un archivo llamado hello.php.
Y dentro de aquí, voy a rápidamente sólo hacer esto, printf, cita
Lo dijeron ellos, "hola mundo".
>> Entonces noto, y voy a hacer mi barra invertida n, Yo no he molestado a declarar principal.
Resulta que, en php, y una gran cantidad de idiomas, no es necesario un principal
funcionar per se.
Usted puede simplemente comenzar a escribir su programa.
Ahora, al guardar el archivo, notará que soy va a tener que hacer lo siguiente.
Yo no voy a usar maquillaje, y no estoy va a utilizar clang porque PHP, a diferencia de
C, no es un lenguaje compilado.
Es lo que se llama un interpretados lenguaje, lo que significa que se ejecuta
como una entrada a través de otro programa llamada de un intérprete.
Y ese programa lo lee, de arriba a abajo, de izquierda a derecha, y lo hace
lo que sea que digas que haga.
>> Así que en este caso aquí tengo una línea que dice printf.
Así que cuando ejecuto el código fuente, hola.php, aunque un programa que
sucede, convenientemente, que se llamará PHP, ese programa PHP va a leer
este archivo, de arriba a abajo, de izquierda a derecha, y que va a hacer lo que
decirle que haga - la ejecución de código, y si que no reconoce algo,
escupirlo.
Así que voy a seguir adelante y ejecutar PHP de hello.php.
Intro.
>> Y eso no es exactamente lo que yo pretendía.
Bueno, ¿por qué es eso?
Bueno, PHP es un lenguaje que en realidad es diseñado para ser bastante
entrelazada con la web.
Al hacer páginas web con este lenguaje PHP, como pronto veremos, vamos a
querer hacer algo así como de impresión líneas fuera les gusta esto.
>> Así que voy a hacer esto.
Soporte abierto, signo de interrogación, PHP, y Ahora sólo voy guión sólo para mantener
cosas bonitas.
Y ahora me voy a hacer una pregunta marcar corchete de cierre.
Así que hay un poco de asimetría aquí.
Usted no hace esto.
Y no haces una barra, por lo que PHP es un poco diferente.
>> Pero ahora, si me vuelva a ejecutar este programa, Hello.php PHP, ahora
conseguir realmente Hello World.
Y vamos a ver por qué esto es valioso.
Uno de ellos, que me permite especificar, muy explícita, esto es
código, ejecutar este.
Y eso es precisamente lo que estos etiquetas especiales implican aquí.
>> Pero también significa que si acabo de hacer algo así como mi objetivo aquí, que
significa que, literalmente, que se acaba de pueden imprimir sin la necesidad de
en realidad llamar printf, o imprimir, o cualquier función similar.
Así que vamos a volver a la en un momento.
>> En primer lugar, vamos a hacer esto.
En el interior del aparato, tenemos una directorio llamado Vhosts, por virtuales
hosts, slash host local, slash público.
Así que es un poco prolijo, pero larga historia resumen, el aparato no está diseñado
sólo para el apoyo C. También es diseñado para soportar PHP.
Pero también está diseñado para ser una web servidor, y un servidor de base de datos.
Y está diseñado, y verdaderamente configurado, a ser una reminiscencia de cualquier
empresa de alojamiento web comercial que usted podría pagar $ 5 al mes para,
$ 100 al mes para.
Sea cual sea el servicio es, de que está configurado a ser muy similar a una
verdadero servidor de la producción mundial.
>> Y lo que eso significa es que se ejecuta en el aparato es un software de servidor web.
Le pasa a ser llamado Apache.
Es sólo libre y de código abierto, y muy popular.
Y hemos configurado Apache para saber que si vuelvo a visitar una determinada URL, con
Chrome o cualquier otro navegador en el interior del aparato, que debe buscar en este directorio
para los archivos que el usuario está solicitando.
>> En otras palabras, me dejó seguir adelante y hacerlo.
Dentro de mi directorio público, voy seguir adelante y crear un archivo de
llamado index.html.
Eso me da la pestaña aquí.
Y yo voy a ir muy rápido y seguir adelante y golpear a
este programa.
Doctype HTML, que por ahora, sólo se supone que tiene que escribir.
Es sólo una etiqueta arcano, eso no es verdaderamente una etiqueta HTML, que especifica que
aquí viene algo de HTML.
>> Voy a seguir adelante y volver a crear lo que vimos hace un momento.
Aquí está la cabeza de la página.
En el interior de la cabeza era el -
por lo que el título.
Así que vamos a decir hola, mundo.
Y luego aquí abajo era el cuerpo de la etiqueta.
Déjenme cerrar la etiqueta body.
Y entonces aquí También voy a decir, sólo por la claridad, hola mundo.
>> Así que este es, sin duda, la más sencilla posible la página web que
puede hacer que eso es válido.
Es sintácticamente válida.
Todo lo que ha abierto es cerrado.
Todo está muy bien en estilo y sangrada.
Así que vamos a ver ahora cómo me puede acceder a este archivo.
>> Bueno, déjame ir a Chrome aquí.
Y déjame ir a http://localhost/index.html.
¿Cuál es tan host local?
Bueno, la mayoría de cualquier computadora en el mundo, Linux, Mac OS, Windows, tiene un apodo
llamado host local.
Así que si alguna vez quieres hablar a su propia computadora -
aunque, por extraño que reflexivamente -
se llama a sí mismo host local.
No importa lo que su equipo actual es llama, si se trata de MacBook de David
Aire, o algo más verbose así.
>> Así que esta URL al parecer, va a utilizar el HTTP para hablar con el host local,
el mismo equipo, el aparato, y que va a pedir, simplemente tomar un
adivinar, qué archivo?
Index.html.
Así que el aparato ha sido configurado en avanzar a saber que si lo que estoy pidiendo
para algo como index.html, busca en una carpeta llamada Vhosts, en un
carpeta llamada localhost, en una carpeta en la misma llamada pública.
Ahí es donde todos los de mi público archivos van a ser.
Así que ahora voy a presionar Enter.
>> Y maldita sea, no es que prohíbe mensaje, conocido de otra manera como 403, la
código numérico por ello.
Así que lo que está mal aquí?
Bueno, no es suficiente con sólo poner el interior de archivos de mi carpeta.
Necesito hacer realidad lo siguiente.
>> Déjame ir a mi directorio Vhosts, en localhost, en público, y dejar
me hago ls tablero l.
Y hay algunas otras cosas aquí para los propósitos de la actualidad.
Pero fíjate en el lado izquierdo, junto de index.html, sólo vemos uno RW.
Y en el pasado, lo RW ha sido sinónimo de?
>> Acabo de leer o escribir.
El hecho de que se dice RW a la izquierda significa que, el dueño de este archivo, puede
leer o escribir en él.
Pero tengo que dejar todas las personas en el mundo leer esto, aunque lo escriba.
Así que me voy a cambiar el modo de la archivo, chmod, todo plus r para dar
todo el mundo el permiso de lectura en la archivo llamado index.html.
>> Y si ahora me vuelva a escribir ls tablero l, el aviso que, por aquí, un poco más
R han aparecido.
Y por ahora, la especificación va en más detalles.
Para P fijó 7, eso sólo significa que todo el mundo ahora puede leer este archivo.
Si regreso a mi navegador ahora y volver a cargar, voila.
¡Hola, mundo.
>> Y yo ni siquiera puedo abrir mis herramientas de Chrome y ver, al igual que con Google y
Facebook, que ahí está mi HTML, formateado un poco
de manera diferente y coloreada.
Si voy a la pestaña de la red y vuelva a cargar la página, observe que no es el get
solicitud de que Chrome es el envío de al aparato.
Ahí está el 200 para que archivo en particular.
Así que en resumen, se trata de cómo todos estos varias piezas se están uniendo.
Lo que pasa es que el servidor web que estamos utilizando en este momento no es remoto,
como Facebook.
Es, literalmente, en el mismo equipo, que es perfectamente correcto.
>> Entonces, ¿qué más podemos hacer en una página web?
Bueno, simplemente, vamos a pasar rápidamente por un par de estas cosas.
Pero déjame ir por delante y volver a abrir Gedit con index.html.
Y déjame seguir adelante y decir hola CS50, guardar este archivo, vuelva a la
navegador, el cambio realmente decepcionante.
>> Pero lo que si queremos realmente vincular a algo ahora?
Así resulta que podemos tener la enlaces en HTML que son sólo etiquetas
a sí mismos.
Le pasa a ser llamado el anclar la etiqueta. A es igual a href
https://www.cs50.net, www.cs50.net Cierre de comillas, paréntesis cerrado.
Y ahora vamos a ver lo cosa que viene a continuación.
>> He abierto la etiqueta.
Ahora necesito darle una frase como CS50.
Déjenme cerrar la etiqueta.
Y note algunas cosas.
A pesar de que hay una cosa críptica aquí, no he repetido cuando
cerrar la etiqueta.
Usted acaba de cerrar la etiqueta con su nombre por sí solo.
Y esto es lo que se conoce como un atributo con un valor.
Atributos simplemente modifican el comportamiento de alguna etiqueta en el interior de una página.
>> Así que esto está especificando que el hiper referencia, la forma elegante de decir la
URL de esta ancla, para este enlace, debe ser CS50.net.
Y el texto que queremos mostrar la usuario no es que dirección URL original, sino más bien
la palabra CS50.
>> Así que si ahora vuelvo a cargar, déjame hacer zoom para claridad, permítanme volver a cargar la página,
cuenta de que tenemos esta vieja escuela azul subrayado enlace.
Y si se ciernen sobre ella, y que va a ser difícil de ver, en la parte inferior izquierda
esquina de la pantalla, el aviso que dice que la URL a la que
Voy a ir.
Y si hago clic allí, voila, ahora estoy haciendo páginas web.
Y nosotros mismos hemos liderado a la página principal.
>> Pero note lo que el potencial esto nos ofrece.
La seguridad es muy en boga en estos días.
¿Qué pasa si en lugar de decir algo así como esto, y en lugar de ir a, por ejemplo, vamos a
ver, fakeCS50.net.
Actualizar esta página.
>> OK, así que observe que todavía se ve como si estuviera va a CS50, a menos que un ojo astuto
se dará cuenta de que voy a CS50 falso.
Supongo que este dominio no se toma.
OK, así que no está disponible.
Así que eso es bueno.
En realidad, nadie tiene ese dominio.
>> Pero vamos a ser un poco más malicioso porque eso es un poco estúpido.
¿Y si cambiamos esto a Paypal.
¿Y si a esto le llamamos, como, www.paypal.badguy.com,
cualquiera que sea el dominio es.
Eso probablemente existe.
Así que ahora quiero volver a cargar la página.
Y aquí tenemos una especie de phishing ataque, P-H-I-S-H-Me-N-G, que es la
palabra tonta dado para un ataque que intenta pescar información, o, mejor
sin embargo, el dinero de la gente engañando ellos para que proporcione información que
de otra manera no podrían hacer.
Esto parece totalmente legítimo, ¿no?
Debo tener un enlace aquí para Paypal.com.
Para ser justos, si yo sexuado para arriba con un poco de gráficos, podemos hacer que se vea
más como PayPal.
¿Cierto?
Debido a que he podido, en un aparte, Yo podría ir a Paypal.com.
Y que acabamos de ver cómo puedo ver todos los de su HTML.
Yo sólo podía copiarlo y volver a crear el estética de Paypal en vez de ir
vieja escuela aquí.
Pero aviso, por supuesto, y es un poco pequeña aún, sólo en la parte inferior
esquina izquierda, en como un punto de 10 fuente, ¿ves lo que estás URL
en realidad va a ser llevado a.
>> Y así, si alguna vez has conseguido dicho correo no deseado seguir adelante, y ya está en cuenta
ha sido comprometida.
Por favor, haga clic en este enlace y háganos saber su contraseña para poder asegurarse de que está
usted, no vuelvas a hacer eso.
Estas cosas deberían ser evidente.
Pero es maravillosamente divertido, y trágico, como cada año esto parece
pasar a algunos no-cero número de personas.
>> Y esa es la belleza de los ataques de phishing.
Usted puede enviar un millón de correos electrónicos.
E incluso si el 0,01% de las personas en realidad haga clic en Paypal y le dará su
contraseña, que sigue siendo un número que no sea cero de las personas que acaban de dar
usted su dinero.
Y el envío de correos electrónicos, por supuesto, es bastante fácil y, esencialmente, libre
estos días.
>> Así que cuento largo, maravillosamente hermosa idea, ¿verdad?
Hace años, esta fue la primera Web, permitiendo una red de
hipervínculos entre los recursos.
Pero tan rápido podía ser de utilizado para los propósitos enfermos.
Y el correo electrónico, basta con decir que estos día, han HTML incrustado dentro.
>> Bueno, permítanme una cosa más.
Y nos remitimos en gran medida a la sección de problema fijó siete para que pueda
explorar los detalles.
Pero déjame seguir adelante y hacer algunas cosas aquí.
Voy a entrar y declarar lo que se llama un div o
la división, de la página.
Déjenme cerrar esa etiqueta div.
>> Y yo voy a decir hasta aquí la parte superior de la página.
Y luego, por debajo de este, yo voy a hacer algo así como otro div, cierre esta
etiqueta, y haga parte inferior de la página.
Y vamos a guardarlo.
>> Así que ahora vamos a volver a mi archivo.
Muy decepcionante.
Pero lo que la división se utiliza para, debajo de la capilla, es en realidad es
un elemento estructural agradable.
No tiene ningún estética hasta ahora como podemos ver, que no sea, al parecer,
poner las cosas en líneas nuevas.
>> Pero aviso, como un aparte, simplemente con apretar Introduzca Sin Cortar en HTML como si
hace en C. Se podría pensar que eso es va a poner una agradable gran brecha entre
la parte superior e inferior de la página.
Pero se ignora.
El espacio en blanco se ignora esencialmente en páginas web distintas de la primera
carácter barra espaciadora, o retorno de carro, que se golpea en el teclado.
Si desea más saltos de línea, que que especificar usted mismo.
>> Así que me voy a hacer un par de cosas aquí para ver lo que está pasando.
Voy a añadir un atributo que existe y otra vez, el camino se aprende
qué atributos existe, existen lo que las etiquetas, Realmente, es referencias en línea.
HTML es el tipo de lenguaje - es no es un lenguaje de programación.
Es un lenguaje de marcas - que después de un buena media hora, tal vez, de una hora con
ella, sin duda va a comprender, la mayoría probablemente, la idea básica.
Y a continuación, una búsqueda en Google de distancia es todo las etiquetas posibles que usted puede ser
interese
Y por la especificación, que es bastante bienvenidos y alentados aquí.
>> Así que ahora me dejes ir adelante y hacer algo como esto.
Background-color.
Y ahora, voy a hacer algo como el rojo, punto y coma.
Y usted puede hacer esto en algunas maneras diferentes.
Estoy sólo tipo de escribirlo como súper explícitamente como sea posible.
>> Pero resulta que este valor aquí es lo que se llama CSS, Cascading Style
Sábanas, que es otra idioma por completo.
CSS no tiene nada que ver con etiquetas de apertura y cierre de etiquetas.
Tiene que ver con las propiedades.
>> Y las propiedades son simplemente valor clave pares, que sólo significa una palabra,
colon, y luego alguna otra palabra.
Y si usted tiene múltiples queridos, o simplemente de aquí, usted puede terminar con un
punto y coma, sólo para mayor claridad.
Pero eso, también, va a funcionar aquí.
>> Ahora, ¿qué es esto va a hacer?
Usted probablemente puede adivinar.
Déjame ir por delante y recarga esta página.
Y ahora está realmente llegando a lo largo.
Así que la parte superior de mi página es de color rojo.
Pero lo que es clave aquí es que, como he mencionado antes, que le da div
una división de la página.
Y eso es precisamente lo que hace.
En esencia, divide la página en un rectángulo que luego se puede
manipular.
>> Y esta noción de rectángulos es una especie de apremiante en que, si se piensa en
la mayoría de cualquier sitio web, es probable que haya alguna estructura a la misma.
La mayoría de ustedes probablemente han visto raramente Página de inicio de Facebook si has ingresado
en todo el tiempo.
>> Pero en la página principal de Facebook, hay algún tipo de div en la parte superior.
Y tal vez no sea tan sencillo como una div, pero hay una
región rectangular allí.
El resto de la página es como una gran div, como una gran parte
región rectangular más grande.
Así que cuento largo, sólo por tener estos pequeños bloques de construcción, la
capacidad de modelar cosas como rectángulos, ya sea amplia o estrecha, también puede
hacen potencialmente columnas, que permite a distribuir las páginas, de verdad, sin embargo,
le gustaría.
Realmente estamos sólo arañando la superficie aquí.
>> De hecho, si hago uno otro, déjame ir adelante y hacerlo estilo,
background-color, vamos a hacer algo como azules, muy próximo comillas.
Vamos Actualizar esta.
Así que ahora se está haciendo aún más feo.
Pero ahora puedo clase de mostrar mi P establece cinco habilidades, ¿verdad?
Rojo.
Me recuerda a RGB, Rojo Verde Azul triplica.
Bueno, resulta que en la programación web, o diseño de páginas web, que es esto, hemos
aún no programada nada per se, en realidad se puede
tener código hexadecimal.
Así que algo algo, algo algo, algo de algo.
Así que puedes tener seis hexadecimal caracteres, o tres, en algunos casos,
y cada uno de los signos de interrogación tiene que ser un dígito hexadecimal,
cero a f.
>> Si quiero tener un montón de rojo, y no verde, y no azul, ¿cuál es la
opuesto de cero cuando se utilice hexagonal?
Es f.
Así que yo puedo hacer ff, cero cero cero cero, salvar esto, y ahora venir aquí.
Y yo en realidad no veo un cambio.
Así citar "rojo" fin de la cita es al parecer sinónimo de toda roja,
no verde, no azul.
Mientras tanto, vamos a cambiar deliberadamente éste sea algo
al azar, como ABCDF.
>> Vamos a ver lo que es.
Es un muy bonito azul, En realidad, los azules cielos.
Muy bien, así que estos son ahora combinaciones aleatorias de algo
personajes.
Así que no te agobies aquí.
Pero de nuevo, esto habla de la precisión que usted puede comenzar a
aplicar - incluso si estás muy agobiada por la estética.
De hecho, si realmente quieres ser impresionado, déjame ir por delante y el cambio
el tamaño de la fuente, por ejemplo.
Y note el punto y coma, que es necesario allí.
>> Tamaño de la fuente, podemos estar simplemente ridículo aquí, 96 puntos.
Guarde eso.
Wow, eso es un gran tamaño de fuente.
Muy bien, así que es muy fácil.
Y en realidad, básicamente estás viendo la primera página web que hice
Hace años, cuando por primera vez aprendido estas cosas.
Es muy fácil de hacer muy cosas horribles rápidamente.
>> Y si usted está familiarizado con el Wayback Automático en archive.org, que
puede encontrar toda mi horrible páginas web de pregrado.
Uno tenía la rana Gustavo en el frente.
Pasé por una fase en la que yo pensaba que era genial para tomar el fondo de
una cortina roja, cuando me enteré de cómo se puede imágenes azulejo nuevo, y de nuevo, y
una vez más, para llenar una página con una gran cortina roja pegajosa.
Y luego, encima de esto, fue un icono que había que hacer clic para entrar en mi casa
página, ya que era muy en boga.
>> Y entonces mi primer programa que he escrito no era en PHP, pero en un lenguaje
conocida como la perla, escribió un libro de visitas, que es un dato bueno de que un
Mucha gente se puede esperar para tener en una página de inicio.
Al llegar a la página, te quieren iniciar sesión, y dices que eres,
y por qué estás allí.
Este es el diseño web de estilo de 1990 muy.
>> Pero en estos días, sin duda, hemos llegado mucho más lejos.
Y verás, en sección, e incluso en el conjunto de problemas y siete, por
el aprovechamiento de las bibliotecas en estos días, es mucho más fácil de hacer
cosas bonitas rápidamente.
Realmente aquí, sólo estamos rascando la superficie de lo que puede hacer
estilísticamente.
>> Y de hecho, ya, permítanme hacer hincapié en que esto ya está poniendo feo, no
sólo estéticamente, sino en términos del estilo de mi código, o la
diseño de mi código.
He comingled actualmente HTML, que es las etiquetas de apertura verdosos allí, con
Propiedades de CSS, que es totalmente legítimo.
Esto es realmente donde el idioma tuvo sus orígenes.
>> Pero en aras de diseño limpio, al igual que empezamos cosas factoring
a partir de archivos de C en archivos h., y mucho yo realmente practico ese tipo de
principio y empezar a hacer esta vez.
Permítanme decirlo de una etiqueta de estilo aquí, que existe también en HTML, y me dejó
especificar lo siguiente.
Déjame borro esto.
El color de fondo será de color rojo.
Voy a eliminar este completo.
Voy a deshacerse del estilo Atribuyo, y yo voy a unívocamente
identificar este div con una palabra -
arbitrariamente, pero razonablemente, cita "top". unquote Y id es un especial
atributo que define de forma única un cierto elemento HTML
como tener que id.
>> Si yo ahora quiero estilizada que, aquí, en la cabeza de mi página, en el interior del
etiqueta de estilo, observe que Yo puedo hacer la parte superior hash.
Y entonces puedo poner un par de rizado llaves, que recuerda a C, y luego dejar que
me pego en esa estilización.
Y déjame ir por delante aquí y anticipo donde voy con esto.
Permítanme también crear uno para el div inferior.
Déjame agarrar este código horrible desde abajo aquí, lo puso aquí, y voy a estar
un poco más anal ahora y estilizada que con solo colocar las cosas en su propia
línea, terminando con punto y coma.
Déjame deshacerme de la etiqueta de estilo.
>> Pero no he terminado todavía.
Tengo que hacer una cosa más.
Sí, id es igual, entre comillas, "fondo" o lo que sea Identificación quiero
dar a ese elemento.
Ahora, déjame volver por aquí.
Y esto es atroz.
No puedo lidiar con 96 puntos.
Vamos a hacer 24 puntos.
O bien, podría ser más preciso.
En realidad se puede utilizar píxeles, píxeles, por lo que que usted realmente consigue un grano más fino
control sobre su página.
>> Como acotación al margen, eso no es necesariamente lo mejor si los usuarios, por
razones de accesibilidad, quieren ser capaz de aumentar los tamaños.
Entonces se dan cuenta de que hay formas de hacer las cosas que no necesariamente
codificar todo.
>> Muy bien, así que es más grande, más de 24 puntos, que cualquiera que sea el valor por defecto es.
Pero ahora es un poco más limpio.
Y quiero aprovechar esta un paso más allá.
Al igual que la idea de los archivos de cabecera, notamos que estamos un paso más cerca de eso.
He factor fuera, pero aún quedan, dentro de mi página, esas reglas CSS.
¿Por qué podría querer dar un paso además, eliminar esta completo, y
ponerlo en un archivo separado?
>> Así que puedo volver a utilizarlo, ¿verdad?
Esto es sólo un poco de intuición en estos momentos.
Antes, yo decía que era sólo consiguiendo tener feo el estilo
atributos dentro del divs sí mismos.
Pero sólo un poco de pensar que a través de.
A medida que su página se hace más largo y más largo, si usted está poniendo aquí, y aquí, y
aquí, y aquí, todos estos diferentes colores y tamaños de fuente, y otro tipo de
atributos, su página es muy rápido va a ser difícil de manejar para usted.
>> Si alguien se te acerca y dice, oh, ¿sabes qué?
Realmente me gustaría cambiar el tamaño de la fuente por dos puntos adicionales,
podría tener que ir a buscar y reemplazar un gran número de líneas de código.
Es mucho más convincente para centralizar todos esos estética aquí.
Pero si desea volver a utilizar los estética en múltiples páginas web, todo
la más convincente, por ejemplo, crear un archivo
llamada con esos contenidos.
>> Y déjame hacer esto.
Guardar este archivo.
Digo styles.css, arbitraria, pero convencional.
Lo pondré en la casa de John Harvard directorio ahora para simplicidad.
Y lo que puedo hacer en mi página web es conseguir deshacerse de la etiqueta de estilo por completo,
y algo unintuitively, use un enlace etiqueta, que no te da un enlace en
en el hipervínculo, el sentido se puede hacer clic, pero donde digo vínculo, iguales href
styles.css.
Y la relación que este elemento tiene con la página web es la de servir como
su hoja de estilos.
>> Entonces, ¿cómo lo sé?
Uno de ellos, que acaba de leer el manual, o se busca en Google en todo, y usted
mirar a los distintos recursos.
Quiero decir, que realmente es la forma de recoger técnicas de este tipo, y, en consonancia
con esta idea de enseñar a sí mismo nuevo lenguas, de nuevo, usted encontrará que
sólo hay un número finito de cosas a cualquier idioma, que, una vez que llegue
ellos, usted encontrará que se pone más rápido y más rápido para escribir.
De hecho, el aprendizaje de una nueva programación idioma es mucho más rápido que un nuevo
lenguaje hablado, porque estas cosas son mucho más pequeño y mucho más
precisamente definido.
>> Pero yo he destacado un poco de una anomalía aquí.
¿Por qué he puesto de relieve este barra diagonal aquí?
Porque tengo que cerrar la etiqueta.
Debería cerrar la etiqueta.
Y usted encontrará innumerables recursos en línea que no lo hacen
necesariamente para abrir y cerrar.
Y siendo realistas, que no es estrictamente necesario por razones técnicas y hay
razones de la realidad, los navegadores son sólo bastante tolerante con los errores en la web
páginas, para bien o para mal, pero sobre todo peor.
>> Así que esta aquí es sólo una forma más limpia de diciendo algo estúpido como esto,
donde si desea abrir la etiqueta de enlace pero cerrarla, no hay realmente ninguna noción
de contenido para una etiqueta de enlace.
Sólo significa cargar este presentar y poner aquí.
Es como aguda incluyen en C. Puede abrir y cerrar una etiqueta a la vez
dentro de la misma etiqueta.
Y hay otros ejemplos de esto.
Esta no es la manera de hacer esto, pero la etiqueta de ancho, para saltos de línea, si
muchas ganas de lograr lo que yo estaba intentar antes de oprimir la tecla Enter, si
Yo digo explícitamente salto de línea, salto de línea, salto de línea, salto de línea y
a continuación, volver a cargar esta página, ahora se dará cuenta de que el fondo de la página es,
de hecho, mucho más abajo en la parte inferior de la página.
Pero incluso eso se puede hacer mucho más limpiamente con CSS, y con márgenes,
y con otras tales estética técnicas.
>> Así que por ahora, los robos de balón son esto.
En HTML, tenemos estos cosas llaman las etiquetas.
En CSS, tenemos estas cosas llamado propiedades.
Podemos comingle estas dos lenguas, ya sea mediante el atributo de estilo,
o la etiqueta de estilo, o mejor aún, el factoring que fuera en conjunto, como lo hacemos
en conjunto de problemas 7.
Preguntas y, a continuación, sobre el fundamentos conceptuales aquí?
>> AUDIENCIA: Tengo una pregunta.
>> ALTAVOZ 1: Oh, lo siento.
>> AUDIENCIA: ¿Por qué no es de color -
>> ALTAVOZ 1: Oh, en la otra pestaña?
Esta aquí?
>> AUDIENCIA: No, es como el -
>> ALTAVOZ 1: Oh, eso es porque Yo estaba siendo descuidado.
Puse el archivo en el lugar equivocado.
Así que si yo realmente pongo aquí, y yo chmod, todo r + para styles.css y
Ahora vuelva a cargar la página, ahora nos obtener la estilización de nuevo.
Y debido a que los tamaños de fuente son diferente, no vemos absolutamente tanto
espacio en blanco.
En su lugar vemos cuál es la defecto es su lugar.
Buena pregunta.
¿Sí?
>> AUDIENCIA: ¿Por qué es el enlace etiquetar dentro de la cabecera?
>> ALTAVOZ 1: ¿Por qué son los vínculos etiquetar dentro de la cabecera -
respuesta corta, porque sí.
Eso es lo que se decidió.
Ahí es donde las etiquetas de vínculos van cuando Tienes lo que se llama un
hoja de estilos externa.
Otras preguntas?
>> Muy bien, así que vamos a hacer esto.
Tenemos tanta diversión por delante de nosotros hoy en día.
Eso es sólo arañando la superficie de CSS.
Vamos a hacer esto.
Tomemos un descanso de cinco minutos aquí porque, por mi correo electrónico, colguemos en
allí hasta 2:30-ish hoy.
Pero si usted tiene que dejar, eso está bien.
Pero vamos a forjar adelante después un descanso de cinco minutos.
Y vamos a aprender un poco de algo sobre PHP, MySQL, y más.
>> Muy bien, así que vamos a tratar, ahora, para atar una algunas de estas ideas en conjunto y hacer,
decir, nuestro propio motor de búsqueda.
Me di cuenta, curiosamente, el siguiente.
Cuando usted está en Google.com, eres normalmente a una URL como esta de aquí
sin nada después del punto com.
Pero si busco algo estúpido como gatos, y presione Enter, nos pondremos en contacto - no
estúpido, pero ya sabes.
>> Aceptar, por lo que cuenta, en la parte superior de la página, ahora, la URL ha, por supuesto, cambiado.
Y esto no es nada nuevo a cualquiera de nosotros.
Haga clic en los enlaces y otras cosas que sucede en la web.
Pero lo que es interesante aquí es el siguiente.
Hay un montón de desorden, pero vamos me deshago de cosas que yo no sé
entiendo muy bien o no lo mirar realmente relevante.
>> Déjame deshacerme de esto.
Déjame deshacerme de esto.
Y déjame deshacerme de todo esto.
Y ahora notan que los gatos están en la URL, seguido de un q, entonces un igual
firmar en frente de él.
Así que resulta que esto es como el forma en que funciona cuando se trata de
a la entrada y la salida.
>> Durante mucho tiempo hemos hablado de cajas negras, ¿verdad?
Así que si esta es una función implementada aquí como un cuadro negro, toma de entrada
y la produce, así, los medios por el cual usted proporciona entrada a un
sitio web es a través, a menudo, de sus URLs.
Usted sólo tiene que poner un signo de interrogación y luego una clave igual valor.
Y entonces tal vez un símbolo de unión, y luego otra clave es igual al valor, entonces tal vez
otro signo, tecla igual valor.
Así es como se pasa en las llaves y valores, pares de entradas.
>> Así que si le pego Entra ahora, lo que es interesante de Google es que todos
que el desorden He eliminado no aparece ser estrictamente necesario.
Todo lo que necesito para enviar a Google es cuestión marca q es igual a los gatos para obtener
copias de algunos gatos.
Bueno, la implicación de que, a continuación, es que si me levanto gedit, he comenzado
hacer mi propio motor de búsqueda aquí en un archivo llamado seach0.html.
>> Y déjame seguir adelante y eliminar una línea más que usted
No se suponía que ver.
Y ahora, déjame ir a mi propio navegador, por lo que no a Google, y vaya a
http://localhost.
Y eso va a ponerse en el camino.
Así que vamos a tener que decir adiós a que, por ahora, mueve esto aquí,
oh, ahora vamos a tener que decir adiós a ese archivo.
>> Siempre que usted tiene un archivo llamado index.html o index.php en un
directorio, si el servidor web es se configura de esta manera, lo que va a
ver, por defecto, es el contenido de ese archivo en lugar de una lista de la
directorio, ya que quería aquí.
Más sobre esto en la especificación.
Usted no vio eso.
>> Así que esto es lo que yo realmente quería.
Pero hace un momento, hubo un presentar en esta carpeta llamada
index.html y index.php.
Y lo que el servidor web era mostrándome esos archivos.
En cambio, quiero este directorio aqui.
>> Así que voy a entrar en CSS y vaya a search0.
Y afirmo que esto se va a ser Al principio de mi propia competencia
motor de búsqueda.
Y para hacer esto, yo voy a ir en aquí, en CSS, y abrir con
gedit, búsqueda 0.
Pero, por desgracia, no hay No hay mucho que hacer aquí.
Todo lo que hice fue usar una etiqueta de partida, que pasa a llamarse h1, que
esencialmente significa grande y negrita, y eso es todo.
Pero el medio por el cual podemos proporcionan entradas son a través de estos
cosas llaman formas.
>> Así que déjame ir adelante y se abren y cierran, preventivamente, una etiqueta de formulario allí.
Y déjame seguir adelante y hacer algo como esto.
De entrada, el tipo es igual a texto.
Y luego vamos a cerrar la etiqueta dentro los corchetes.
No necesito para iniciar un campo de texto y detener un campo de texto.
Es que va a estar ahí o no.
>> Y luego, debajo de eso, vamos a hacer tipo de entrada es igual a presentar.
Guardar este.
Y ahora vamos a hacer una comprobación de validez rápida.
Vamos a volver a cargar.
>> OK, así que no está mal.
No es el estilo de Google, pero es bastante estrecha.
Hay un campo de texto.
Puedo escribir algunas cosas en, pulse intro, pero no pasa nada todavía.
Y eso es porque no he especificado una acción de este tipo, por así decirlo.
Así que si vuelvo al elemento de formulario, resulta, y sé que esto sólo
de no leer la documentación, que la etiqueta de formulario lleva un atributo
llamada acción que es la URL de la página web a la que se
desea enviar el formulario.
>> Yo realmente no creo que tengamos tiempo para implementar toda la parte de atrás de un
motor de búsqueda de la actualidad.
Así que sólo vamos a decir, eh, ir a google.com / categoría.
Y ahora déjame cierro comillas.
Y déjenme especificar, además, que el método a utilizar va
ser llamado get.
>> Larga historia corta, hay dos maneras, al menos, que se puede presentar información
desde el navegador al servidor.
Uno de ellos es conseguir, y, a efectos de la actualidad, eso sólo significa que en la URL.
Verá exactamente los signos de interrogación, el iguales signos y símbolos de unión que
vimos anteriormente.
O hay una alternativa llamada posterior.
Por ahora, sabemos que después se utiliza a menudo cuando se quiere cargar archivos, como
imágenes y demás, o cuando se quiere presentar la información de tarjetas de crédito, o
contraseñas, cualquier cosa que no hace realmente tiene sentido, conceptualmente, o
vista de la seguridad, para terminar en la dirección de su navegador, donde los padres de espionaje,
o compañeros, o cualquier persona con acceso a su ordenador podría ver.
>> Así que vamos sino esa.
Y tengo que hacer una cosa más.
No es suficiente sólo para digamos darme un campo de texto.
Tengo que dar ese campo de valorar un nombre.
Así que me preste la elección de Google de nombres, q, y especificar que la segunda
atribuyo yo realmente no importa el nombre del botón Enviar.
Todo lo que me importa es la presentación de lo que el usuario escribe pulg
>> Y ahora esto es un poco feo.
Sólo dice presente.
Resulta, y sé que esto de la documentación, realmente puedo decir
valor es igual, entre comillas CS50 " seach, "Cierre de comillas.
Entonces vamos a reload de nuevo.
Así que yo sigo golpeando Comando-R, o Control-R en mi teclado para recargar.
>> Ahora tenemos un más interesante motor de búsqueda.
Esto no acaba de ver como De Google, sin embargo.
Así que vamos a seguir adelante en el aquí y hacer un poco de salto de línea.
>> OK, así que ahora tenemos Google.
En realidad, casi tenemos Google.
¿Y ahora qué va a pasar?
Voy a escribir algo como los gatos.
Y el navegador va a analizar que la forma en que he definido.
Y se va a enviar el usuario a esa URL.
Así que esta vez, por alguna curiosa razón, Tengo más información acerca de las acciones
que alrededor de gatos reales.
Pero eso está bien porque aviso que todavía terminado aquí, q es igual a los gatos.
>> Así que cuento largo, parece bastante trivial para obtener la entrada del usuario.
Y para ser justos, hay racimos de otros tipos de campos de formulario.
Hay casillas de verificación y, poco mutuamente botones de opción de exclusividad, y
menús desplegables, y más.
Pero todos esos son relativamente fácilmente implementado como
este campo de texto era.
Y en última instancia, sólo tenemos que hacer seguro que alguien está escuchando en el otro
final de la línea con el fin de conseguir que la información procesada, de alguna manera, y
nos devuelva nuestros gatos.
>> Veamos un poco ejemplo más complicado.
Déjame ir en el directorio de mi Vhost, en host local, público, y donde yo
poner código fuente actual.
Todo esto va a ser en el curso de sitio web para que usted pueda jugar con.
Y si entro en froshims, déjame abrir seguridad de este archivo ahora, froshim0.php.
Éste es un poco más detallado, por lo que no vamos a escribir esto desde el principio.
Pero sólo cuenta ahora algunos un tanto características familiares.
>> Uno, etiqueta de formulario, acción diferente.
No es una dirección URL completa.
Ahora, es al parecer para archivo llamado register0.php porque, en un momento,
Voy a enseñar a mí mismo un poco algo acerca de PHP, una programación
idioma, debido a que PHP se puede utilizar para implementar lo que Google implementa como
la parte final de sus motores de búsqueda.
>> Google, en realidad, utiliza probablemente algunos de Python, algunos de C + +, y
racimos de otros idiomas.
Pero sin duda podríamos poner en práctica la búsqueda resultados utilizando PHP si queríamos.
Pero por ahora, vamos a mantener las cosas simples.
Y esto es en realidad una reminiscencia de una de los otros primeros sitios web que
hecho hace años.
>> En mis tiempos, se registró para deportes intramuros como un estudiante de primer año de
rellenando una hoja de papel, caminando a través del patio, y colocándolo en
el buzón de correo de un Proctor en Wigglesworth, y eso era cómo
registrado.
Y así mi proyecto poco después de CS50, iba a poner eso, lo que hace al maestro
sentido, sobre la banda, que no era tan en boga entonces como lo es ahora.
Pero todo lo que teníamos que hacer era crear, esencialmente, un formulario HTML.
>> Y esa forma parecía más o menos así.
Tenía una entrada para el El nombre del estudiante de primer año.
Tuve otra casilla de verificación de si o no querían ser capitán, lo que
era su género, y cuál era su dormitorio.
Y luego codificado en las cosas como Apley Corte y Canaday,
Grays, y así sucesivamente.
>> Así que de nuevo, las nuevas etiquetas.
No he visto esto antes, nuevo atributos, pero bastante accesible.
Una vez que vea un ejemplo, puede tipo de pedir prestado esa idea y hacer que una gota
en el menú desplegable para casi cualquier cosa.
Pero lo que es fundamental es que cada uno de estas cosas tienen nombres.
Y en la parte inferior de esta forma, no hay un botón cuya etiqueta presentar,
o el valor, es el registro.
>> Así que vamos a ir a esta página.
Permítanme volver a la lista de directorios.
Déjame ir a froshims, e ir a froshim0.php.
Así que es horrible, para ser justos.
Así que podría definitivamente estilizar esta con un poco de CSS, yo podría hacer algo de
gráficos, añadir tal vez algunos colores, y hacer de esta bonita.
Pero funcionalmente, yo diría que este es realmente muy completa.
>> Por desgracia, cuando complete, sin, David, Capitán, Hombre, vamos a elegir,
digamos Matthews, Register, todo lo que sucede es esto.
Pero notar un par de robos de balón.
Uno de ellos, lo que volvió a los archivos resultados, aparentemente?
Así es, en efecto, register0.php.
Así que el hecho de que vimos que la acción valorar hace un momento para register0, esta
corrobora que de hecho terminamos hacia ese archivo en particular.
>> Ahora bien, esto es sólo el texto feo.
Pero note que este texto es proveniente de host local,
que es desde el aparato.
Piense en el aparato ahora tan sólo un servidor web que podría estar en el
Science Center.
Podría ser en la web real.
Así que es de acceso público.
>> Así que, claramente, hay alguna manera de pasar entradas de campos de formulario a un servidor
para que se pueda hacer algo con ellos.
Desafortunadamente, register0 es bastante estúpido.
Todo lo que hace es imprimir un array que se parece a esto.
Y no es una matriz en la sentido que la conocemos.
Resulta que PHP, y una gran cantidad de idiomas, tienen no sólo numéricamente
arrays indexados cuyo primer índice es cero, uno, luego dos, luego del punto,
punto, punto, n menos 1.
>> Esto es lo que se llama un matriz asociativa.
Una matriz asociativa es una en la que puede almacenar pares de valores clave en los
la clave no es necesariamente un número.
Podría ser en realidad una cadena, una palabra.
Y por lo que este puede ser implementado, debajo de la capilla, que resulta,
utilizando una estructura de datos conocida como una?
El pensamiento algo dramático que iba a suceder -
la tabla de hash.
>> Así que una tabla hash, el recuerdo, las de usted quien lo hizo por P puesto 6, o incluso retirada
que, por lo menos, incluso si se hizo un intento, un tabla hash, en nuestro uso, se utiliza para
simplemente almacenar palabras.
Pero en realidad, estabas almacenando claves y valores.
Si implementa una tabla hash para P set 6 diccionario, las claves fueron la
propios, y los valores de palabras fueron efectivamente verdaderas o falsas.
Sí, aquí, o implícitamente, no, no aquí.
>> Bueno, podemos generalizar esa idea.
Y podríamos utilizar un dato muy similar estructura para almacenar la cadena no
sí solo en su tabla hash, pero supongamos que en cada uno de su hachís
nodos de la tabla.
Y que incluso podría hacer esto en una oportunidad en lugar de sólo tener un bool.
Usted podría tener algo más.
¿Qué pasa si la clave no era maxwell, para ejemplo, pero, entre comillas "nombre", o
comillas "capitán". Y en el interior de la estructura de datos C, se puso una
valor, no sólo un booleano, pero de valor como entre comillas "David", o
"M" o "Matthews", y así sucesivamente.
>> Así que esas mismas estructuras de datos que utilizamos aparentemente existen en otros idiomas.
Y yo diría que son en realidad mucho, mucho más sencillo acceder aquí.
Vamos, de hecho, miren ahora en algún tales sintaxis.
>> Voy a entrar en un directorio de PHP.
Y voy a abrir un mejor versión del hola-0 de antes.
Tenga en cuenta que todo lo que hice fue añadir algunos comentarios.
Así que podemos deshacernos de esa distracción.
>> Y este programa lo hace de hecho impresiones hola porque he especificado entre
etiquetas que quiero ejecutar ese código.
Ahora, vamos a ver en un momento ¿por qué esto es útil.
Pero vamos a abrir otro ejemplo aquí.
Déjame ir adelante y abro digamos, gedit de las condiciones de uno.
>> Esta es la forma en el tiempo ahora.
Pero hace semanas, creo, en la semana uno o la segunda semana, tuvimos un ejemplo llamado
conditions1.c.
Y decidí volverlo a implementar en PHP, sólo para tipo de destacar que
PHP, sintácticamente, es casi idéntico a C. Esto no es un gran salto
desde la semana pasada a esta.
>> Fíjese en la parte superior de este programa, que comienza, como antes, con algunos
comentarios, que me desharé como una distracción.
Fíjate que estoy en PHP el modo en este archivo.
Así que este código, ya veremos, se quieran realizar.
Tenga en cuenta que hay readline, que es probablemente la
analógico en PHP de getString.
Observe que es un poco diferente.
En realidad se especifica un mensaje para el función llamada línea leer, y eso es
lo que ve el usuario.
Así que usted no tiene que printf manualmente.
Pero eso no es una gran cosa.
Voy a guardar, en el interior de $ n, la valor de retorno de esta, por lo que cualquiera que sea el
usuario escribe es su int.
Y aquí hay otra curiosidad.
Resulta que, en PHP, cualquier variable sólo tiene que llevar el prefijo
con un signo de dólar.
Es un poco molesto.
Pero noto lo que yo no haya hecho en PHP.
¿Qué falta en la mano izquierda lado del signo igual?
>> No hay mención de tipo.
Así que esto es diferente de C. Para una mejor o para mal, PHP es un vagamente
lenguaje con tipo.
Se tiene números.
Se tiene cadenas.
Se tiene Booleanos.
Y sí tiene algunos otros tipos de datos.
Pero usted, el programador, por lo general no tienen que preocuparse por ellos.
La ventaja de esto es que hace un poco más fácil de programar.
Usted puede pensar en un poco menos.
Lo malo es que también le abre a errores potenciales si accidentalmente
tratar un número como una cadena, una cadena como un número, potencialmente, pero incluso
entonces, PHP, y una gran cantidad de idiomas, son bastante tolerantes.
Van a utilizar lo que se llama la conversión implícita.
Y si intenta utilizar n en el contexto de una situación numérica, lo hará
convertir lo que aquí se va a ser un cadena, ya que si el usuario escribe
algo, y se obtiene el resultado, al igual que con readline, o conseguir la secuencia,
eso va a devolver una cadena.
>> Pero fíjate, un par de líneas más tarde, comprobar si n es mayor que cero.
Así que PHP se va a lanzar de forma implícita mi "Cadena" 123, o lo que sea el usuario
tipos en, en un int.
Así que en resumen, sólo cosas funciona mucho más intuitiva.
Así que ahora empezamos a relajar algunas de las las cosas que hemos hecho en el pasado.
>> Una gran cantidad de este material es la misma, sin embargo.
Todavía tienen iguales iguales.
Como acotación al margen PHP también ha iguales iguales iguales, pero más de eso, tal vez, en
el futuro.
Esa fue una.
Typos pero dos signos de igualdad significa lo mismo cosa como antes, para la comparación.
printf significa lo mismo que antes.
Backslash n significa lo mismo Lo que antes.
>> Entonces, ¿cómo puedo ejecutar este programa?
Pues bien, como antes, si lo hago PHP, conditions1.php, y el tipo de
un número como 123.
Eso es un número positivo.
Si escribo en 0, recojo 0.
Y si escribo en negativo 123, recibo copias de un número negativo, que sólo es
decir, sintácticamente, PHP es super, super similar.
>> ¿Por qué es esto ahora útil en un contexto web?
Bueno, vamos a volver a este froshims ejemplo, que parecía,
una vez más, como esto aquí.
Y seamos realmente tire hacia arriba de la página web de nuevo, que se parecía a esto.
¿Qué podemos hacer con el datos que se presentaron?
>> Bueno, déjame abrir una nueva versión de este.
Y verás que el problema especificación de los conjuntos que camina
a través de algunos de estos.
En lugar de comenzar con cero, echemos un vistazo a froshims3,
que lo hace un poco más.
>> Nótese en primer lugar, de hecho, vamos a abrir por lo que era 0, por lo que se ve
lo que era el registro 0.
Note lo que el registro 0 lo hicieron.
Uno, no tengo comentarios en la parte superior.
Eliminar esos y centrarse sólo en esto.
La mayor parte de los contenidos de register0.php son, obviamente, ¿qué idioma?
PHP Justo prima.
>> Así que notar, este archivo no se inicia con, de momento, el soporte abierto,
signo de interrogación, PHP.
PHP no permite que se mezclen Código PHP con etiquetas HTML.
Pero lo he hecho aquí en el interior de la página de aquí.
>> Ahora, de nuevo, usted sólo lo sabe por habiendo mirado el manual. print_r,
Resulta que es print_recursive. _recursive Y esto es sólo un práctico
función de utilidad que sólo imprime, recursiva, lo que lo entrega.
Si usted lo da una matriz, que va a imprimir una matriz.
Si usted pasa una cantidad, que va a imprimir un número.
Pasa una cadena, que va a imprimir una cadena.
Si usted pasa una tabla hash, que imprimirá una tabla hash.
Usted no tiene que escribir todo de ese código por ti mismo.
>> Ahora noto que estoy entrando Modo PHP por aquí.
Estoy de salir del modo PHP por aquí.
Así que cuando el servidor Web lee este archivo arriba a abajo, de izquierda a derecha, porque
termina en un nombre de archivo llamado. php, todo lo que no hay dentro de las etiquetas PHP es
sólo va a ser escupido a cabo, al igual que el HTML puro.
No es gran cosa.
Pero tan pronto como las noticias del servidor web esto, que va a decir, que no debería
escupir, literalmente, print_r de correos.
Debería ejecutar el siguiente línea de código.
>> Así que la última pregunta, entonces, de este archivo es, bueno, ¿qué diablos es esto?
Tome una conjetura.
¿Qué es de $ _POST, probablemente?
>> AUDIENCIA: [inaudible]
>> ALTAVOZ 1: Sí, los datos publicados.
Recordemos, vamos a retroceder en tiempo para un momento.
froshim0, de nuevo, se veía así.
Una mayoría absoluta de que esto es sólo HTML.
Una vez más, algunas etiquetas no tiene visto todavía, o con los que
que ya está familiarizado.
Pero lo interesante era esto.
Esta línea es la que realmente vincula que en nuestro archivo register0.php.
Estoy presentando a través de método de entrada.
Y eso significa que los parámetros el usuario teclea no son
va a terminar donde.
>> Ellos no van a aparecer en la URL.
Todavía van a ser enviada desde el cliente, desde el navegador, a la
servidor, pero sólo a través de algún otro mecanismo que no te cobraremos nuestras manos
a para hoy, pero no lo es en la URL.
Pero nótese la relación ahora con destino que, por convención, es
minúsculas aquí.
>> Pero si abro register0.php, Aparentemente estoy imprimiendo esto.
Así que esto es una especie de extraño convención de nomenclatura.
Pero lo que es agradable en PHP es que cuando usando PHP en un contexto web, ni a una
línea de comandos como lo hice hace un momento, cuando en realidad estás usando en una web
página, en un directorio vhost como somos, automáticamente será PHP llenar este
cosa, que es una matriz asociativa, por así decirlo, una tabla hash, con
todo lo que el usuario escribió pulg
>> En resumen, $ _POST en mayúsculas es un variable global que acaba de PHP
mágicamente crea para usted cuando usando PHP en un contexto web.
Y pone dentro de ella toda la nombres de parámetros en la forma que
se presentó a este archivo y todas los valores que el usuario ha escrito pulg
Así que manos a lo que el usuario escrito en ese formulario.
>> Así que antes, tenemos salida realmente estúpido de sólo ver esto, porque todo lo que hice
se imprima recursivamente esta matriz.
La clave está en el nombre, el valor es David.
La clave es el capitán.
El valor está encendido.
Y la doble flecha y el ángulo soporte de ahí, esto es sólo arbitraria.
Este no es el código.
Esto es sólo forma de mostrar que de PHP lo que el valor de alguna llave.
>> Pero ahora permítanme proponer que, en froshIMs3, es casi idéntica
excepto que se somete a este archivo.
Y de nuevo, vamos a clase de sólo mirada a esto, sólo para ver un poco de
sintaxis, pero fíjate lo que este archivo tiene.
Tome una conjetura justa basada en las líneas de código, lo que probablemente no parezca
Griega, en cierta medida, aparentemente está haciendo.
>> Este archivo es de alguna manera relacionada para enviar por correo, correo electrónico.
Entonces, ¿qué está haciendo este programa?
En esta versión, si yo tuviera que realmente llenar este formulario - y déjame ir a
froshIMs3, no froshIMs0 -
la forma tiene el mismo aspecto.
David, capitán, hombre, dormitorio, Matthews.
Pero si presento esto, este archivo es va a ir a register3.php.
>> Y afirmo, al observar que es código fuente, que va a
de alguna manera involucrar correo electrónico.
Déjame ir por delante y abro este en una ventana más grande, por lo que
lo puede ver de forma más limpia.
Estamos en Vhosts, anfitrión local, pública, froshims.
Voy a abrir una diferente programa, por lo que sólo
puede ver más de una vez.
>> Así que ahora es, darse cuenta de algunas cosas.
En la parte superior del archivo está abierto soporte, signo de interrogación, PHP.
Luego hay un montón de comentarios, que podemos ignorar, es
sin interés por el momento.
>> Ahora está esto.
Resulta que PHP tiene mucho de código llamado requerir.
Es muy similar en espíritu a C de incluir, de hash incluye, que
esencialmente toma el contenido de algunos otro archivo y sólo les deja caer aquí,
para que pueda utilizarlos.
En este caso, el aparato tiene, preinstalado, una biblioteca, libre y
biblioteca de código abierto llamado PHP anuncio publicitario que cualquiera puede
descargar desde Internet.
Acabamos de hacer por usted.
Y esto significa que ahora tengo email funcionalidad a mi disposición.
>> Ahora, observe algunas cosas.
Voy a validar la presentación del formulario.
Resulta que PHP, uno, tiene exclamación puntos para el operador not, al igual que
C. Pero PHP también tiene una función llamado vacía.
>> Empty sólo devuelve true si el valor de lo que la mano en
paréntesis está vacía, al igual que el usuario no escribe nada pulg
Así que esto está diciendo, y observe la sintaxis, recuerda mucho a C, si el
clave, por lo que el campo de nombre en el formulario Nombre, que fue presentado a través de correo,
el usuario, es no vaciar, y su de género no está vacío en la forma como
bien, y su dormitorio no está vacío -
pero note que no se preocupan por el capitán, entonces, ¿qué vamos a hacer?
>> Voy a ejecutar esta línea de código.
Y usted puede pensar en este tipo de como malloc, pero es un poco
más elegante que eso.
Pero de momento, esto me da una especial estructura de tipo PHP mailer.
Pero ignorar la palabra clave new para hoy.
>> Ahora voy a llamar a una función llamada IsSMTP, que dice, usa SMTP.
Este es el puerto 25, al igual que el video la semana pasada, cuando la cosa estaba lanzando
mensajes de correo electrónico en el servidor de seguridad.
El puerto 25 es SMTP.
SMTP significa utilizar el servidor de correo.
¿Cuál, podemos utilizar Harvard SMTP.fas.harvard.edu.
>> Podemos ajustar la dirección de ser John Harvard.
Si me desplazo hacia abajo aún más, puedo establecer la dirección del destinatario, sólo
arbitrariamente, ser John Harvard también.
Así que él va a estar enviando un correo electrónico a sí mismo.
>> Ahora puedo configurar el tema a ser de registro.
Y puedo configurar el cuerpo de correo electrónico de la siguiente manera.
Esta línea se ve un poco más críptica, pero eso es sólo porque hay una gran cantidad
de la información en él.
Uno, hay un operador punto.
Alguien tiene que saber ya lo que el operador de punto hace.
Es concatenación.
Así que si usted desea tomar una cadena en PHP, y añadirlo, o anteponer, para
otra cadena en PHP, gracias a Dios que no tienen que usar strcopy y malloc,
y todo eso.
>> Si desea concatenar dos cadenas, que se preocupa por la memoria.
Deje que figura PHP que fuera para usted.
Lo que PHP lo hará con el operador punto Aquí es sólo hacer una gran frase en
de esta línea, esta línea, esta línea, esta línea.
Y ahora note, que va a ser de enchufar valores.
Así que el correo electrónico que John Harvard va recibir literalmente va a decir
nombre, de colon, algo, más bien, a continuación, nos cerrar la cadena y concatenar en
lo que el usuario escribió en, a continuación, una nueva línea.
>> Luego, en la siguiente línea de John Harvard correo electrónico, que va a decir
Capitán, On o Nada.
Se va a decir el sexo, hombre o mujer.
Dormitorio va a ser Matthews en mi caso.
Y a continuación, observe y coma familiarizado en el final.
Y entonces, aquí abajo, note, algo críptico todavía, pero de nuevo, después de un
patrón que se familiarice después de P fijó 7, si el envío de correo
devuelve false, entonces adelante y morir.
>> Así que PHP tiene una función llamada morir, que, literalmente, sólo mata al
sitio web y sólo imprime lo usted le dice - es está muriendo
palabras, por así decirlo.
Y eso, en el caso, se imprimirá lo que la información de error es de
¿qué pasó a ir mal.
Siempre cuento aquí, lo que tenemos es un ejemplo en el que cuando el usuario
envía el formulario, froshim0, froshims3.php, va a
register3.php.
Pero register3.php luego procede para ejecutar todas estas líneas.
>> Así que hay un par de tomar domicilio aquí.
Uno de ellos, al parecer es bastante fácil, programación, para enviar mensajes de correo electrónico,
lo cual es bueno.
Cuando los usuarios se registran para su sitio, en este caso, cuando se registran para su
deporte, usted puede enviar el primer año Proctor, o John
De Harvard, en este caso.
>> Pero también significa que usted puede hacer qué?
Enviar mensajes de correo electrónico de cualquier persona a cualquier persona.
Y esto es muy cierto.
Esto no se hace tan fácilmente si estás acostumbrado a usar Gmail.
Pero si alguna vez has utilizado Eudora o Outlook, se puede casi contar una
servidor de correo que usted es quien quieras.
Y aquí es donde tengo que poner en ese sombrero y decir, no hagas esto.
Pero esta es una prueba de lo fácil es para realizar ataques de phishing, y
enviar correos electrónicos anónimos, y correo no deseado, de manera más general.
Y que realmente se reduce a la hecho de que todo lo que necesita es un poco de
acceso programático.
>> Como acotación al margen, mi encuentro más cercano con el tablero de anuncios, mi primer año de estudios,
fue cuando descubrí este fresco truco que, wow, puede
enviar mensajes de correo electrónico de cualquier persona.
Y así nos lo estábamos pasando un estúpido argumento, literalmente, en Matthews,
entre mi grupo de Proctor.
Ni siquiera recuerdo ¿cuál era el problema.
Pero yo quería tratar de poner poner fin a este estúpido debate.
>> Así que decidí simplemente voy a enviar un correo electrónico a mi grupo Proctor, que pretende ser
el otro tipo, con cuya opinión en desacuerdo, y que él allanó a
cualquiera que sea mi opinión estaba en este debate particular.
Y así me forjé este correo electrónico utilizando un técnica similar en espíritu a esto.
Pero en realidad era más fácil en el momento.
Pulse enviar.
Él no estaba contento, ni tampoco han sido el tablero de anuncios.
>> Y me cogieron muy rápidamente dentro de segundo, porque, como usted sabe, firmo
mis correos electrónicos de una manera determinada.
Y aunque lo hago manualmente, en gran parte, 15 años más tarde porque estaba
traumatizados por eso.
Yo no tengo una firma en mi e-mail ahora.
Pero en 1995, sólo tenía un sig, una firma en mi correo electrónico.
Así que no había esta nota diciendo: Estimado Grupo Proctor, yo consentir mi opinión
y estoy de acuerdo con David, firmado tal y así, la nueva línea, la nueva línea, DJM.
>> Así que no hagas eso o, en general, tomar ventaja de esta técnica.
Pero al hacer una página web, como por su proyecto final, al realizar una
sitio web para algo empresarial, así es como, de manera pragmática, puede
aprovechar otros servicios en Internet como el correo y luego en realidad
enviar cosas mediante código.
>> Entonces, cómo podemos mejorar esto?
Bueno, primero vamos a echar un rápido recorrido por algunas de las cosas que se ven,
y luego echar un vistazo a un par de ejemplos.
Así que uno, para tranquilizar, porque estamos volando a través de PHP.
Y sé que, en algún momento, tendrá para realmente empezar a escribir esto si
No lo ha hecho.
Darse cuenta de que, uno, el principal es una especie de por la ventana con PHP.
Si desea escribir código que obtiene ejecutado, que acaba de empezar a escribir en
un archivo llamado. php, siempre y cuando usted tiene el corchete abierto
signo de interrogación de etiquetas PHP.
>> Pero nótese que son condiciones en php.
Aviso, esta es la misma diapositiva exacta tuvimos en una semana cuando tuvimos
condiciones en C. Condiciones en PHP son estructuralmente y
sintácticamente iguales.
La única diferencia real es que si tienes variables implicadas, que tienen los
signos de dólar.
>> Mientras tanto, las expresiones booleanas un aspecto como este para
o-ing o-ing y juntos.
Los interruptores son exactamente lo mismo.
Lo que es bueno en PHP, mientras que en C, interruptores tienen que ser en casos
primitivos como enteros o caracteres, en PHP declaraciones de su caso pueden ser realmente
en un todo las cadenas, que es realmente bonito.
Le ahorra algo de tiempo.
No se puede hacer eso en C.
>> Esto es un bucle en PHP.
Es idéntica.
Podría tener algunos signos de dólar para las variables.
Usted no tiene que mencionar que algo es un int.
Usted acaba de declarar con un signo de dólar y el nombre de la variable.
Sin embargo, un bucle for es la misma.
Un bucle while es la misma.
Un bucle Do While es el mismo.
>> Esto es un poco diferente.
Así que con PHP, con una gran variedad, puede declarar de forma estática una matriz, como en C,
pero utiliza corchetes.
En C, deberá utilizar llaves, si aun lo sabías.
Pero esto es en realidad muy común en PHP para declarar una matriz, en este caso,
de los números, y llame al un número variable.
>> Mismas variables se ven así.
Aquí es una cadena, fin de la cita cita "hola mundo. "Usted podría tener una barra invertida n.
Yo simplemente no lo hago en este caso.
>> Ahora bien, esto es una construcción interesante.
C no tiene esto.
Pero esto es muy servicial.
Y verás esto en P puesto 7 especificaciones - una para cada construcción.
Si desea reiterar sobre la totalidad de la elementos de una matriz, no tiene
para hacer frente a $ i y $ n, y + +, y todo eso.
Usted, literalmente, puede decir, en PHP, este -
para cada uno de los números como el número, por lo Estoy asumiendo que los números de $
es un conjunto de números.
Y cuando digo que por cada número como el número, esto va a
automáticamente, ya que mi bucle se ejecuta, actualización, en cada iteración, el valor
interior de número signo de dólar -
otra vez, y otra vez, y otra vez a caminar para mí en esa matriz.
Por lo que sólo nos salva código.
No hay punto y coma, no hay + s + ', no íes, n no lo es, es simplemente agradable.
>> Pero PHP también tiene esta.
Y esto es súper poderoso.
Y vamos a usar esto, las manos adelante, en P puesto 7.
Y array asociativo también se declara con corchetes.
Pero nótese la sintaxis ahora.
Es una reminiscencia de lo que vimos con print_r hace un momento.
¿Cuántas teclas, como una pequeña prueba de cordura, no esta matriz parecen tener.
>> Por lo tanto, tiene dos.
Y yo llamo a esto una matriz.
Pero si ayuda, se puede pensar de esta tabla como hash, o como
una matriz asociativa.
Pero es sólo una diferente tipo de matriz.
Y de nuevo, diferentes lenguas tener estos.
Veremos algo similar en JavaScript también.
Hay dos claves.
Uno de ellos es, entre comillas, "simbolo", uno es Citando "precio". unquote Y esas llaves
cada uno tiene un valor.
En este caso el valor del símbolo es FB, por Valor de Facebook, y su precio es de 49, 26,
que era la acción de Facebook Precio a partir de esta mañana.
>> Entonces, ¿qué es útil sobre una matriz asociativa.
Yo podría haber tenido una forma numérica matriz indexada con sólo
corchetes simples.
Y yo podría haber tenido el signo de dólar presupuesto equivale precisamente esto.
Déjame hacerlo realmente.
Supongamos que en lugar de simplemente declaré esta matriz de esa manera.
Esto es perfectamente válido, sintácticamente.
No pierde ninguna información, per se.
Todavía veo que el símbolo es fb, y que el precio es de 49, 26.
Así que ¿por qué asociativo matrices de peso?
>> AUDIENCIA: Usted no tiene que recordar donde poner cosas.
>> ALTAVOZ 1: Exactamente, usted no tiene recordar donde poner cosas.
Usted no tiene que recordar de manera arbitraria que símbolo de la acción se encuentra en el soporte de cero,
y precios de las acciones se encuentra en el soporte uno, lo que es particularmente peligroso si usted
cambiar las cosas, con el tiempo.
Es mucho más agradable para asociar lo que vamos a llamar a los metadatos
con sus datos reales.
Yo diría que lo que realmente importa aquí es de fb y 49, 26.
El símbolo y el precio es de metadatos que describe la que los datos
realmente se preocupan.
Pero esto es sólo tanto más fácil acceso.
>> Ahora, como un aparte lo que es el precio que pagamos?
Hemos estado haciendo esto en CS50 durante semanas.
Esta característica debe venir en algún costo.
Memoria.
Así que no sólo está almacenando una de 32 bits enteros, por ejemplo.
Usted está almacenando símbolo / 0, probablemente.
Así que usted está utilizando más memoria.
>> ¿Y cuál es el rendimiento de los buscando algo en un
matriz asociativa, probablemente?
Es probable que sea más lento.
El acceso aleatorio es agradable, especialmente cuando se puede hacer la búsqueda binaria.
Pero si en realidad estás ahora sin mirar para los números, pero para las cadenas, esta
verdaderamente se implementa debajo de la campana, probablemente como una tabla hash, donde
utiliza cualquiera una tabla hash con encadenamiento separado.
O utilice una oportunidad para realmente almacenar los valores.
Así que tal vez usted puede hacer a tiempo constante, pero usted todavía tiene que mirar a S-Y-M-B-O-L,
potencialmente, en lugar de 32 bits para buscar algo.
Así que de nuevo, esas mismas ideas que viene copia que se repita en este contexto.
>> Pero, de nuevo, PHP ahora tiene unos magníficos globales que, resulta, son
matrices asociativas.
Vimos uno hace un momento, $ _POST.
Y esa superpotencia mundial tiene las claves y valores.
Específicamente, las teclas alinearse con qué?
¿De dónde proceden las claves en $ _POST vienen?
Sólo para recapitular?
>> AUDIENCIA: Nombre.
>> ALTAVOZ 1: Nombre, ¿dónde?
>> AUDIENCIA: [inaudible]
>> ALTAVOZ 1: El nombre es el atributo.
Bien por dónde, de dónde han originalmente viene?
La forma.
Así que si una página HTML tiene una etiqueta de formulario, dentro de los cuales hay algunos insumos, como
casillas de verificación, cuadros de texto, desplegables menús, cada uno de los cuales tiene un nombre, los
nombres terminan como claves en $ _POST, y, francamente, para el caso, $ _GET.
Si el método se consigue, la misma idea.
Es sólo en una diferente superpotencia mundial.
Y los valores, por supuesto, vienen de cualquiera que sea el usuario escribió en su o
su navegador.
>> Pero hay algunos otros.
Hay galletas, que vamos a volver a la larga.
Pero esas son las cosas que usted sabe utiliza la web para un determinado bien o el mal.
Pero vamos a volver a eso.
Server y sesión, y los dos tener alguna utilidad especial.
>> Pero echemos un vistazo a esto.
Déjame ir adelante y abro un ejemplo llamado mvc0.php Así MVC
significa lo siguiente.
Y te presentamos esta antes de lo típico, de verdad, para que te diseñar
Boletín de problemas 7, así como los proyectos finales, en una especie de industria
manera estándar, y de forma limpia.
Es un buen diseño.
>> Así que estás a punto de ver, y usted experiencia, en P fijó 7, paradigma, tipo
de una mentalidad de programación, que se ve un poco de algo como esto.
M para el Modelo, C para el regulador, V para Vista.
Larga historia corta, MVC es sólo un poco de una metodología, una forma de hacer
sitios web, en particular, mediante el cual se poner todo su frase estúpida -
lógica de negocio -
toda su propiedad intelectual en lo que se llama un controlador, un archivo
como index.php, o vamos a ver, quote.php, o buy.php.
>> En el contexto del problema fije 7, su modelos típicamente contienen sus datos,
todo lo relacionado con una base de datos, como veremos finalmente ver, y sus puntos de vista
contener la estética de su sitio, el HTML, el CSS.
Así que ya vimos en C un poco bits utilizando archivos. h.
Realmente vimos hace un momento con CSS, al factorizar la estilización CSS
cosas fuera de nuestro HTML.
>> Así MVC es realmente sólo de dibujo líneas en la arena y decir, la
interesante código de programación para su web pertenece a lo que llamamos la
controlador.
Cosas relacionadas con la base de datos por lo general termina en un modelo.
Pero ya verás, en el problema fije 7, que fusionar C y M que sea sencillo.
Pero la visión es el lugar donde todos los de su HTML y la estética suelen ir.
>> Entonces, ¿qué significa esto en términos reales?
Bueno, déjame ir a nuestro MVC directorio de la siguiente manera.
Y verás más de estos realizado giras a través de la especificación.
Así que en mvc0, afirmo que se trata, al igual que, Versión 0 de los sitios web de CS50.
>> Todo lo que tenemos es un poco de HTML, como una gran etiqueta h1, al parecer.
Y a continuación, una lista con viñetas.
Nunca he visto una lista con viñetas antes, pero no es gran cosa.
Echemos un vistazo rápido al código fuente.
Resulta que una lista desordenada con balas Se paréntesis abierto UL con uno o
más elementos de lista, li.
Así que notar aquí es una etiqueta de ancla.
Vimos que hace un momento.
>> Así que esta es la forma en que he implementado esta página.
Tengo dos enlaces, dos elementos de la lista, uno ul de lista desordenada, y el final
resultado, estéticamente, es esta misma sitio bonito, versión 0 aquí.
Pero lo interesante es cómo esta se implementa bajo la campana.
>> Déjame ir en gedit y abro este primer ejemplo para pintar un cuadro.
Y vamos a ver lo que está viciado, potencialmente, aquí.
Ahora si voy a localhost, público, MVC, observe algunos archivos.
Voy a llamar a estos, para la momento, todos los controladores.
Pero eso es un poco de un abuso porque usted verá que todo está entremezclado
dentro de ellos.
>> Y déjame ir dentro de index.php.
Y vemos, literalmente, el mismo HTML.
Así que, aunque el archivo termina en . Php, No significa que tiene que
tener cualquier código PHP.
Simplemente puede ser HTML puro, aunque eso es un poco tonto.
Pero note que no hay soporte de PHP abierta etiquetar, a excepción de esto, que, francamente,
es justo allí para servir como un comentario.
Pero eso no es funcionalmente aun que interesante.
>> Pero fíjate en esto.
Lo interesante ahora es qué cambios en esta página.
Permítanme clic Conferencias.
Y note la URL está a punto de cambiar.
Ahora estoy en lectures.php.
Permítanme clic cero.
Ahora estoy en week0.php Y ahora dejo a abrir estos archivos en gedit.
No sólo índice, pero vamos me abro conferencias.
Y déjame deshacerme de los comentarios centrarse en sólo esta parte.
>> Y ahora déjame abro uno más, week0.php, deseche los comentarios,
sólo para limpiar esto.
Y ahora fíjense lo siguiente.
Pensando en realidad una especie de cuidado acerca de diseño, y vamos a hacer que la línea
por lo mismo, lo que se podría hacer mejor aquí, qué te parece?
>> ¿Cómo me puedo hacer una semana una?
¿Qué tal esto.
Así que esta es la forma en que hice la semana uno.
Subí a Archivo, Nuevo, Pegar, Guardar, week1.php, y luego me fui de aquí.
Y cambié uno -
lo que era esto, uno a viernes.
He cambiado los ceros a uno.
He cambiado esto a uno.
>> OK, así que ahora mira en mis archivos.
¿Qué podría hacerse de otra manera?
¿Dónde está la oportunidad, tal vez?
Así que hay la oportunidad de empezar factoring esta materia hacia fuera.
Permítanme abro, como un spoiler, para lo que verás en P fijó 7.
Si abro, ahora, index.php en la versión cinco de esto, parece camino
más críptico, hay que reconocerlo.
>> Pero esto, ahora, es lo que yo llamo un controlador que está controlando la
lógica de mi página.
Y usted puede tipo de reconstruir, intuitivamente, tal vez, lo que está pasando.
En la primera línea, es un poco críptico.
Pero noto que estoy exigiendo, al igual que con agudo incluyen, un archivo llamado
helpers.php.
Y luego te llamo, al parecer, un función, llamada render, pasando
dos argumentos.
>> Uno de ellos es, entre comillas, de cabecera.
Y la otra es, ¿qué tipo de tipo de datos es esta, basado
en nuestra sintaxis anterior?
Es un conjunto asociado.
En concreto, se está pasando en el título con algunos metadatos que recuerda
yo lo que es y su valor.
Entonces veo un duro Coded ul, por lo que algunos HTML puro.
Pero estoy de vuelta en el modo PHP llamar a una función de procesamiento.
Así que incluso si usted nunca ha usado HTML o PHP antes, y aunque esto se ve
más miedo, ¿por qué es esto probablemente mejor diseño?
¿Qué es mejor en ello, sobre la base de la inferencia?
>> AUDIENCIA: [inaudible]
>> ALTAVOZ 1: Menos redundante en ese no hay más etiquetas HTML, no más
cabezas de etiquetas, no más etiqueta del cuerpo en cada archivo maldita.
En lugar de ello, he eliminado casi la elementos comunes y, presumiblemente, ponerlos
en un archivo de alguna manera relacionada a un colector.
Y lo mismo para el cierre del cuerpo etiqueta, la etiqueta de cierre HTML.
Eso es probablemente por aquí dentro del pie en algún lugar.
Y verás, en el problema fije 7, un pequeño recorrido a través de este.
>> Entonces, ¿qué nos depara el futuro?
Lo único que no tenemos la capacidad sin embargo, para es realmente el de almacenar datos.
Y así lo vamos a empezar a ver Miércoles, por ejemplo, es que su
viejo amigo Excel, o números, le permite almacenar una gran cantidad de
datos en filas y columnas.
Resulta que puede hacer que en lo que es llamado una base de datos, mediante programación.
maníaco Y resulta que, después de eso, vamos a ser capaces de almacenar cosas como
esto, que usted verá de nuevo en conjunto P 7, un montón de nombres de usuario y
contraseñas, el último de los cuales son realidad cifrada, al igual que lo
fueron en P puesto la edición del 2 de piratería informática.
Y con el tiempo, podrás poner en práctica este, su propio sitio web eTrade-así
implementa en conjunto CS50 finanzas.
>> Por último, ya que se hospedó aquí tan tarde hoy en día, si usted se vuelve a esta parte
del campus, a las 4:00 horas de hoy, lo haremos le dará no sólo consejos, en los SCES
Asesoramiento Feria, a las 4:00 PM en la Maxwell-Dworkin, vamos a darle un poco de
Americone Sueño, Cherry Garcia, Chocolate Fudge Brownie, Chocolate
Galleta con trozos de masa, y, cuando Google Chunky Monkey, usted consigue esto.
Así que todos los que les espera a las 4:00 PM en Maxwell-Dworkin.
Nos vemos el miércoles también.
>> ALTAVOZ 2: En la siguiente CS50, RJ duerme pulg
>> RJ: Mi sección!
Ha!
Oh,