>> [Música tocando]
DAVID J Malan: Todo ben, Benvido de volta.
Este é CS50.
Este é o fin de semana de sete.
E é o final deste limpador caza do conxunto de problemas de catro
que pode lembrar.
Tras recuperarse de todo estes JPEGs de persoal,
foi desafiado, se o desexa, para fotografía-se co maior número
daquelas persoas que poida.
Temos unha morea de submissões ao longo das últimas semanas,
de feito, algunhas dereito bastante antes do mediodía hoxe, algúns dos cales son aqueles aquí,
pego aquí em-- parece como-- Annenberg Salón en horario de oficina, un aquí
en Lowell Casa con Nick.
Velaquí Ramón ser pego no teléfono.
Isto foi nunha CS50 xantar.
Este foi Jason Skyping con un compañeiro de clase máis creativo,
que lle chamou desta forma.
Non sabemos o que iso era.
>> [Risas]
>> DAVID J Malan: Pero que paga a pena un gigabyte.
Aquí é Chang, que literalmente, foi para fóra do escenario
para evitar ser fotografado unha día, pero foi finalmente capturado.
Aquí é Nick.
E aquí é Alison abaixo polos campos.
E Zamyla mesmo se atopou nunha competición de salón.
Entón imos pasar por estas fotos, descubrir
que presentou o maior como mínimo, e recompensa
un premio fabuloso, como prometido na spec.
E nós tamén imos seguir uns o espazo que foi implicado.
>> Unha parella de announcements-- tan xantar é, de novo, este venres 13:15.
Se desexa unirse a nós, De RSVP en que dirección aquí.
Jason aparece de novo aquí desde unha das seccións de un par de anos
volta, o que pasou caer no Halloween.
E, de feito, el se vestía como un cabaza ese mesmo ano.
Se asistir a esta sección da súa sección desde 2011
oito, se está curioso, en CS50.tv, creo
este foi o ano no que súa bomba de aire estaba funcionando.
>> Se, a continuación, asistir a sección semellante en 2012,
verás esta Jason moi baleirado, xa que o feito xa non funcionaba,
que é só para dicir este venres, se
quere esculpir unha cabaza con Daven e Gabe e outros, RSVP para as cabezas
no enderezo cs50.harvard.edu.
Promete ser unha gran diversión.
Daven, din, ten esculpido cabazas toda a súa vida.
Gabriel de Brasil nunca esculpida unha cabaza para o Halloween.
Entón, sexa alí con eles como aprende.
>> Seminarios, meanwhile-- así que vai aprender pronto
sobre o que as nosas expectativas son para o proxecto final, que, esencialmente,
vai se resumen a deseño e implementación de
máis calquera proxecto de interese para ti, aínda suxeito á aprobación
e orientación do seu compañeiro de ensino.
Preto do fin do semestre, nós introducimos un número
de seminarios, que son clases opcionais liderada polos compañeiros de ensino e Harvard
persoal, os amigos do curso en todo campus, sobre varios temas que
son tanxenciais á Syllabus do curso subxacente
pero aínda así o caso, divertido, e diferente para potenciais proxectos finais.
>> Por exemplo, en primeiro lugar, se quere para rexistrar, siga para a URL alí.
E esta é a programación para só seminarios deste ano.
Pero entendemos que temos decenas de seminarios de anos pasados, os cales
están ligados no menú Seminarios opción do sitio web do curso.
Entón, se está a pensar en indo alén da súa zona de confort
ou incorporarse algunhas novas habilidades, por exemplo, a programación iPhone
aplicacións con Swift, unha nova linguaxe Apple ou Objective-C
ou Android Apps ou programación [? cue?] lámpadas, ou calquera dos temas
aquí enriba e máis, debido verificación a páxina de inscrición.
>> Entón comezamos e concluído en Luns con mirando HTTP.
Entón HTTP refresher-- rápida, Hipertexto Transfer Protocol.
Pero o que iso realmente significa?
O que isto realmente significa?
É que unha man?
Sei que está só coçando a cabeza.
Pero quere propoñer o que é HTTP?
>> Audiencia: Como os computadores comunicarse con [inaudível].
DAVID J Malan: perdín a última parte.
Como os computadores comunícanse com--
>> Servidores de Internet: audiencia.
DAVID J Malan: boa-- con internet servidores e, especialmente, servidores web.
Porque lembre, hai unha morea de servizos en Internet, algúns dos cales
usa probablemente diariamente entre chat e de mensaxes, chat e web, correo electrónico,
e semellantes.
E HTTP é só o protocolo que navegadores web
falar ao comunicarse con servidores web, e viceversa.
E o analóxico en mundo humano podería ser,
Eu estendo a miña man para usar algúns outro ser humano do e el ou ela
recoñece, ampliando a súa man tamén.
Entón, iso é só un protocolo, un conxunto de convencións.
>> E o que de feito son esas convencións?
Ben, iso só se reduce a envío de mensaxes e cara atrás,
como se describe aquí.
E hai un par de formas en cal pode enviar estas mensaxes.
E quizais o máis común é coñecido como get.
E nós imos ver un contraste para iso antes de tempo.
>> Pero unha proposta get dende un navegador ao servidor só se parece con isto.
É unha chea de texto que pon dentro dun sobre virtual.
Na parte exterior do sobre que ir algunhas pezas de información.
Que ten que ir para a sobre, por así dicir,
a fin de obter unha proposta como iso de min para un servidor web?
Si.
>> Audiencia: O seu enderezo IP.
>> DAVID J Malan: O meu enderezo IP no campo de, por así dicir,
e, por suposto, o enderezo IP do destinatario.
Pero, no caso dun paquete de tea, necesitamos un pouco máis de detalles
Non é suficiente só para enviar un sobre para un servidor,
porque ese servidor pode ser escoita a diferentes tipos
do tráfico de Internet.
Entón, o que máis necesitamos ademais de IP do destinatario?
Si?
>> Audiencia: É TCP?
DAVID J Malan: Good.
TCP--
>> Audiencia: Enderezo.
>> DAVID J Malan: Enderezo, ou porta, como se chama.
Preto, pero un número de porto TCP.
E hai unha morea delas.
Pero, certamente, o máis familiarizado debería eventualmente
ser de 80, que é o estándar utilizado para o tráfico web.
E outra familiarizado unha breve estará 443,
que se usa para seguro web tráfico, URLs que comezan con https.
>> Entón é iso que vai dentro dese sobre.
E obter / significa só, dar me a páxina web estándar.
Dáme a raíz do disco dirixir no servidor web.
E espero que, a web servidor responderá con, OK
eo número 200, que é só unha convención di que, si, todo
é realmente Aceptar.
Aquí está a páxina.
O tipo de páxina web vai ser de texto, pero, máis en concreto, HTML,
que estamos a piques de mergullo de volta para.
E o dot dot dot só medios, aquí está o HTML.
E é aí onde nós incorporarse á historia de hoxe,
realmente escribir HTML, Hipertexto Markup Language, que
é a lingua en que páxinas web son escritos.
Non é unha linguaxe de programación.
Non hai funcións ou lazos ou condicións.
É unha linguaxe de reserva, ben de novo vemos hoxe,
que permite que especifique como estruturar e estilizar
esteticamente unha páxina web.
>> Polo tanto, este foi o único e só páxina que realmente
mirou, se breve, o luns.
E teña en conta algúns características máis saíntes.
Hai unha morea de apertura angular soporte e preto do soporte angular.
Entre aqueles angular corchetes son palabras.
E nós imos comezar chamando esas etiquetas palabras.
Cabeza soporte de forma aberta e soporte de cabeza pechada
son as etiquetas abertas e pechadas, ou as etiquetas de inicio e fin
respectivamente, de un elemento HTML, como imos chamalo, chamado cabeza.
E o mesmo se aplica xerga ao corpo en HTML e así por diante.
>> E o que é bo é HTML-- e, en realidade, nós imos
pasar terriblemente pouco tempo con el, porque vai na maior parte só descubrir
cales as características que ten cando realmente ten un problema concreto
para solve-- vai descubrir que un navegador é moi burro.
El só vai fazer-- non ao contrario un Computador-- o que diga a el para facer.
E así, cando ten aberto HTML soporte na parte superior
alí, que, esencialmente Significa só que, hey, navegador,
aquí vén unha páxina web escritas en HTML.
>> Cando se ve soporte aberto cabeza, iso só significa que,
hey, navegador, aquí vén a cabeza, ou a parte superior da miña páxina web.
Cando se ve un soporte pechado cabeza, o que significa só, hey,
iso é para a cabeza.
Espera para outra cousa.
E que outra cousa é aparentemente será o corpo.
E cando non ten unha marca, como ten só Ola, coma, mundo,
que só será un texto cru que en definitiva, amósase na pantalla.
>> Agora, vai notar tamén a retirada aquí.
Probablemente pódese inferir como estamos estilizando-lo.
Cada vez que eu abrir unha etiqueta, por así dicir, eu recuar.
E cada vez que eu peche unha etiqueta, eu un-indent,
similares en espírito á claves.
E ademais, eu son do tipo de utilizar o meu xuízo.
Teña en conta que eu non me incomoda bater Escriba dentro desa etiqueta título.
Por que?
Ben, eu só decidín que parecía un pouco máis limpo para min, o ser humano,
só para non incomodar a facelo.
Entón, de novo, hai algúns xuízo chama só
como hai en C ou calquera outra linguaxe.
>> Pero teña en conta tamén que este recuar préstase a un modelo mental,
para non complicar máis iso.
Pero unha árbore, non?
Se pensar nunha web páxina aparentemente escrita
así, como ben recuado desa forma,
case pode pensar o soporte aberto HTML tag soporte pechado é demarcar
a raíz dun nó, unha árbore da familia nó de estilo ao estilo das árbores
miramos para o pasado venres.
>> E, de feito, temos á dereita aquí o que imos chamar DON, D-O-M, un documento
modelo de obxecto, un xeito elegante de dicir unha árbore que representa ese HTML.
E teña en conta que o HTML ten, imos dicir, como unha árbore de familia, dous fillos.
Á esquerda está a cabeza.
Á dereita está o corpo.
>> E así como un exercicio de pensamento irracional, cabeza, por suposto, ten cantas nenos
segundo esta estrutura?
Así, só un, title-- e é por iso que temos
a frecha que vai da cabeza ao título.
Entón, é como se a persoa no árbore de familia tiña só un fillo.
E, a continuación propio título pode pode dicir de ter un fillo tamén.
>> Lembre que o HTML tiña Ola, coma, mundo, abaixo dela.
E eu simplemente tirado el dentro dunha oval no canto de só un rectángulo
para transmitir semanticamente que, aínda é un nodo da árbore, por así dicir,
é unha especie de fundamentalmente diferente.
Non é unha etiqueta.
Ou, máis propiamente, non é un elemento.
É só un nó de texto, se quere.
Pero estes son completamente convencións humanas arbitrarias.
Este é só agora a miña forma de representando o que eu vou como un engadido
chamar o documento.
>> E como un aparte, a cousa en o super esquina superior esquerda,
soporte aberto punto de exclamación doc tipo HTML, esta parece ser unha marca,
pero é o caso canto estúpido onde que é só alí, copiado e pegado
para indicar os navegadores esta é a versión 5 do HTML.
O mundo segue a cambiar o que o primeira liña de código nunha páxina debe ser.
Isto só significa que a versión 5.
Por iso, non chega a parecido cos outros.
>> Todo ben, entón, con que dixo, agora vai apreciar
esta bastante este estúpido tatuaxe alguén ten.
>> [Risas]
>> DAVID J Malan: Todo ben, e agora imos realmente mergullo
en facer algo con iso.
Debe lembrar que a última vez Abrín o Appliance CS50
e eu fixen algo tan simple como apertura gedit.
E eu salvo o ficheiro, mesmo en meu desktop-- sitio ningún especial--
como hello.html.
>> Entón deixe-me facelo novamente-- hello.html Intro.
E agora, neste ficheiro, eu vou dalle replicar o que acabamos de
doc saw-- tipo html Entón eu vou facer aberto html soporte de soporte pechado.
E entón eu vou preventivamente abrir e pechar a etiqueta.
Por que?
Só eu non esquecer máis tarde.
É só unha boa práctica, como apertura e pechando claves dunha vez.
>> E entón o que veu a continuación?
Pode pensar a tatuaxe.
>> Audiencia: A cabeza.
>> DAVID J Malan: A cabeza.
E entón, aquí, eu tiña o título, eu creo.
E o título foi arbitrariamente, Ola, título próximo mundo.
E entón para acá, o corpo, de course-- entón pechar a etiqueta body.
E despois é só un pouco redundante, Tiven o mesmo aquí en baixo.
>> Entón, eu afirmo que esta é unha páxina web.
Isto é algo que agora podía vivir na web,
aínda que, por suposto, é literalmente vivindo no meu escritorio agora.
Pero, en realidade, se eu minimizar gedit, Vou ver no meu escritorio na súa icona.
Aínda que este sexa o aparello, pode facelo en Mac OS
sen TextEdit ou Windows co bloque de notas mesmo.
>> E se eu ir adiante e dun dobre clic que mesmo, e select-- ben, imos
Non seleccione isto porque Chrome non está abrindo.
Imos adiante e abra o Chrome.
E despois facer Command-O para abrir E desprácese ata a zona de traballo
e abrir o ficheiro.
É así que un navegador interpreta HTML, de arriba abaixo, de esquerda a dereita.
Ei, aquí está o navegador HTML.
Aquí está a cabeza.
Aquí está o título.
Aquí está o corpo.
E, de feito, é así fai esa páxina web.
>> Pero teña en conta a URL.
Ningún de vós pode puxar arriba este específico páxina en seus portátiles agora,
mesmo dentro do seu aparello vía que URL,
porque file: // indica que é, en realidade, no meu sistema de ficheiros, o meu disco duro,
non o seu.
Entón iso non é todo o que útil.
>> Imos agora avanzar usando un servidor web real.
E resulta que o CS50 Appliance é máis que un ambiente onde
pode escribir código C e compilar e executa-lo como se está facendo.
Tamén foi configurado pola equipo para representar un típico web
servidor que está en Internet, un que pode pagar por
ou un que está na chamada nube.
>> E está correndo estándar libre de código aberto
software, por exemplo, algo chámase Apache, que é quizais
aínda o máis popular web software de servidor no mundo
que miles de sitios usan hoxe.
E, el tamén ten aínda software como MySQL,
que é un servidor de base de datos que vai finalmente chegar a,
que é só para dicir Podo comezar a tratar
meu dispositivo como un servidor de pleno dereito que eu non estou pagando a outro lugar.
E só vive no meu propio portátil para fins de desenvolvemento e de barrio.
>> Entón, imos adiante e sacar proveito desta.
Eu estou indo a ir adiante e abrir unha xanela de terminal.
E eu estou indo a ir adiante e move-- en realidade, primeiro eu son
indo para navegar para o escritorio.
Se eu fai ls, hai hello.html.
E eu estou indo a ir adiante e comezar a usar
un novo directorio temos non utilizado antes de hoxe.
>> hello.html-- Vou mover para ../vhosts para hosts-- virtual
máis sobre iso no future-- e despois nun directorio chamado localhost,
que é o alcume dado a case calquera ordenador, sexa un Mac, PC,
ou Linux, e logo especialmente nun directorio que nós,
o persoal xa creado para vostede cando baixou o aparello chamado
público.
E, como o propio nome suxire, nada Engada aquí, en teoría,
será agora público, polo menos para a xente
que teñen unha relación directa conexión co meu ordenador.
>> Entón, agora deixe-me ir adiante e facer cd para ese mesmo directorio
para que eu poida ver o que está pasando e escriba ls.
E, de feito, esta é a único dentro.
Eu afirmo agora que por que eu colocar este arquivar hello.html dentro dun directorio
chamado dentro dun directorio público chamado localhost dentro dun directorio
vhosts chamados, que grazas ao persoal CS50
foi pre-configurado para ser a raíz do seu servidor web,
Podo agora espero facelo.
>> Vou abrir un separador novo.
E eu estou indo a ir non file: //.
Vou usar real http / localhost, que
unha vez máis, é o apelido para o meu propio servidor.
E entón eu estou indo a ir ao nome do ficheiro, só para quedar claro?
Onde está esta historia, probablemente, vai?
hello.html.
>> Polo tanto, noutras palabras, quero agora esta é o meu propio ordenador, o meu propio dispositivo,
como se fose un servidor real.
O seu apelido é localhost.
Pero pense como localhost como Facebook.com google.com, o que sexa.
É só o meu nome local.
E, a continuación, a finais que quero é o raíz do disco duro, por así dicir,
ou a raíz do servidor web, ergo a barra e, a continuación,
o hello.html nome do ficheiro.
>> Déixeme zoom e prema Intro.
E, de feito, existe agora a miña páxina web.
Por iso, é un pouco diferente.
E é tan asombroso.
Esta é a versión antiga.
Déixeme encoller a fonte de volta.
Este é o vello.
Este é o novo.
Pero o que está pasando fundamentalmente agora é que HTTP está a ser usado.
>> Imos facelo un pouco máis claro, ou, se o desexa, un pouco máis complicado.
Déixeme ir ao ángulo inferior dereito canto do meu aparato.
E entender que todo isto tempo, houbo un número.
Este é o enderezo único do seu dispositivo CS50.
É un enderezo privado, como implica a 172,16,
que significa que só fisicamente Pode acceder a este servidor web.
Todo pasa polo cortalumes e ben protexido contra o resto
do mundo por mor desta visión.
>> E agora entende que se eu for a Neste enderezo, non no meu dispositivo,
pero en Mac OS-- vou para volver para aquí.
Este é o meu Mac agora.
E agora eu vou abrir esta versión de Chrome aquí.
E eu estou indo a ir a http: //172.16.25 / E eu esquezo o rest-- 133.
>> Entón eu vou te visitar o meu Mac que o enderezo IP /hello.html Intro.
E agora vexo o meu Mac que o meu CS50 Appliance, que é
Enderezo IP é que número, é de feito comportándose
como un servidor web en Internet.
Non ten un bo fácil lembrar do nome como Facebook.com,
pero el está a usar HTTP aparentemente, aínda Chrome
é unha especie de simplificación do mundo para nós, pero non nos mostra HTTP.
Pero esta é realmente exactamente isto.
Chrome é só aforrar algo teclas escritas nos días de hoxe.
E iso é o que vemos agora.
>> Entón, iso é moi bo e correcto.
Pero é unha páxina moi por baixo do esperado.
Déixeme entrar e facer algo un pouco diferente agora.
Entón deixe-me volver a gedit.
E no canto de Ola, mundo, imos poñer unha imaxe.
E eu reclamada antes-- déixeme ir para o meu público directorio localhost.
E deixe-me ir adiante e copiar un todo morea de arquivos a partir de hoxe
da miña carpeta Dropbox en aquí.
>> Agora, se eu escribir ls, ollar en todos estes arquivos
que eu teña distribuído polo sitio do curso con antelación de hoxe,
unha das cales é aínda hello.html.
Polo tanto, non hai que un.
E lembrar este parvo do último cat.jpg tempo--.
Entón deixe-me tentar incorporar cat.jpg dentro da miña páxina web.
>> Eu estou indo a ir adiante e facer cat.jpg, gardar.
Déixeme volver para Chrome.
E déixeme ampliar o fonte e agora volver cargar.
Oops, onde poño isto?
Standby-- eu aínda teño o vello versión da miña aberto escritorio.
Entón deixe-me ir ao meu vhost, meu localhost, o meu público, e hello.html.
Entón, agora deixe-me ir adiante e din cat.jpg interior do corpo
onde quero que sexa exhibido e actualizar.
Por suposto, iso non é correcto.
>> Entón eu teño que dicir ao navegador algo máis deliberadamente o que quero que faga.
Escriba o nome é obviamente non é suficiente.
Entón lembro que había outra tag, imaxe, imaxe para breve.
Isto é só porque os seres humanos non me gusta das palabras cheas de tipos.
E entón o que podemos facer source = "cat.jpg".
>> E agora eu vou facer unha cousa diferente aquí.
A pesar de todos nosas marcas, ata agora, ten
tiña esa noción dun tag de inicio e unha etiqueta final,
que realmente non fai sentido dunha imaxe, non?
Unha imaxe pode existir ou non existe.
E así os seres humanos teñen benvida cunha convención simple.
Cando ten unha marca que pode tanto comezar e rematar na mesma tempo--
pode estar baleira, entón a speak-- só poñer a barra dentro da etiqueta
ao final.
Agora déixeme volver para o meu navegador.
Hit Reload Porra, algo está mal.
Probablemente xa viu iso ocasionalmente na web,
aínda que non foi a súa culpa.
É culpa do servidor web.
Que odes este indicaría?
É dobres.
É aí que a imaxe pertence.
Si?
>> Audiencia: Pero iso non acontece ter acceso á imaxe.
>> DAVID J Malan: Non fai ter acceso á imaxe.
Iso, ou, peor aínda, se cadra el nin sequera existe.
A ver se non podemos diagnosticar iso.
Teña en conta que a última vez que se en Chrome, o aparello,
ou incluso no seu Mac ou PC, vai ao menú creador
e ir as Ferramentas de Desenvolvemento opción, que, probablemente, ten
non moi usado ou nunca.
E se eu for facer unha rede e volva a páxina,
imos realmente ollar para o HTTP solicitudes que están sendo feitas.
>> Parece que é hello.html OK, en realidade, de aquí a 200.
Pero é un cat.jpg 403.
Polo tanto, non é un 404.
Ficheiro probablemente existe.
403 significa prohibido.
Entón, iso é un pouco confuso.
Vou volver a miña xanela de terminal.
Déixeme achegar-se aquí.
E deixe-me facer un ls.
Hai eses mesmos arquivos.
>> Agora déixeme facer un ls-l, que probablemente
utilizado antes de ollar para arquivo tamaños quizais ou timestamps.
E vemos unha morea de información esmagadora.
Pero teña en conta algúns detalles.
Aquí está hello.html neste remar aquí e aquí está cat.jpg.
E iso é só o aparello a ser user friendly, destacando JPEG
en vermello como este.
Pero o que máis é diferente xunto o tamaño do arquivo eo nome do ficheiro?
>> Audiencia: [inaudível].
DAVID J Malan: Si, non hai dous a máis ata aquí R.
Teña en conta o que ten hello.html pasando.
Así, verifícase que o nome de ese público directorio é importante.
Calquera cousa neste directorio pretende ser público.
Pero non é suficiente só para soltar os ficheiros alí.
Tamén cómpre cambiar o modo de os arquivos,
cambiar os permisos de o arquivo de forma pro-activa non
ser a configuración por defecto, que é o que só podo ler
e gravala-lo, eu sendo o propietario.
Quero todo o mundo para todo o mundo ser capaz de ler o meu ficheiro, por así dicir.
Ler significa só visualiza-lo.
>> E, de feito, como podes ver no problema definir sete, que é o que significan estas de R.
Media Estes dous de R deixar todo o mundo o resto do mundo tamén lelo,
sobre todo agora que é neste directorio.
Así, o xeito máis sinxelo de solucionar isto é ir á miña rápido e facer chmod para o cambio
xeito e, a continuación, facer a + r, en conxunto, todos, todos, máis r para lectura,
e despois cat.jpg Intro.
Nada parece ocorrer, o que normalmente significa algo bo.
Entón ls-l novamente-- agora imos ollar para cat.jpg.
E esa autorización parecen cambiado.
Como un aparte, se fai unha erro e, por exemplo,
só fixo your-- Non sabe-- ensaio accesible ao público por accidente,
pode facer o contrario, chmod a-r.
Aínda que, a verdade, non debería estar no directorio público
de calquera xeito, se esa é a preocupación.
>> Entón agora imos voltar a meu navegador e reload.
E eu vou clic o pequeno Ghostbusters
símbolo para limpar a parte do pantalla para que poidamos ver novas solicitudes.
E, de feito, é aquí Cat Grump de antes.
Pero, máis importante, tecnicamente, non hai
o número 200, que significa que chegamos Aceptar.
Todo ben, o que é moi bo e correcto.
Pero nós non estamos facendo o mellor de sitios web,
nin imos tratar demasiado duro para facer o máis extravagante dos sitios hoxe.
Pero imos polo menos facer algo Super familiarizado antes de chocalho
fóra algunhas outras etiquetas.
Entón supoño que eu non quero só un gato aquí.
Supoña que eu realmente quero que isto gato para conectarse a algo.
>> Podería, por exemplo, facer algo así.
unha para href referencia para amiga equals-- referencia
e imos facer algo como www.google.com preto
citar seguinte soporte.
E agora buscar gatos.
Pechar Referencia tag.
Polo tanto, este ten só un tipo de fundamentalmente novo detalle.
A etiqueta por suposto, é diferente.
É o nome dunha áncora para referencia href ou amiga.
>> Pero, máis importante, non hai esta función sintáctica aquí.
Isto é o que nós imos comezar a chamar non unha marca, pero un atributo.
E un atributo é algo que modifica o comportamento dunha etiqueta.
E ese atributo, href, medios modificar o comportamento desta áncora
para que, cando sexa premendo, vai a este URL aquí.
E, por suposto, que URL é Google.
>> Mentres tanto, o que é iso texto aquí vai ser?
Ben, iso será que o ser humano realmente
ve como o subliñado enlace, tan simple como iso.
Entón, imos tentar iso.
Déixeme salvalo.
Eu aínda estou en hello.html.
Pero, nas versións en liña, verás os nomes de ficheiros reais que pre-preparados.
Deixe-me ir adiante e actualizar.
E agora é moi páxina decepcionante aínda.
Pero se eu pasar o rato sobre há-- e é un pouco pequeno,
mas- podes ver na parte inferior esquina esquerda da pantalla,
el é de feito indo google.com.
E se eu premer en que, será bata me camiño á real Google.
>> Pero teña en conta aquí unha oportunidade para explotación, así como un aparte.
E nós imos voltar a outra cuestións de seguridade antes de tempo.
¿Por que non hai esa dicotomía entre onde vai eo que di,
podería facer algo así isto-- http://www.google.com.
OK, e agora se eu actualizar despois de gardar a páxina,
parece que eu estou indo a ir a Google.
Pero non hai ningunha razón que eu ten que ir a Google, non?
Podería realmente ir algo como badguy.com, volva a páxina aquí.
E noten, inda se parece con Google.
E só se me está afiada o suficiente para pasar o rato sobre aquí
vexo que está mesmo indo a ir a un lugar diferente.
>> Entón, se xa gañou un correo electrónico, especialmente
un do Paypal, ou aparentemente do Paypal
pedindo que faga login para a súa conta, este
É por iso que nunca debe nunca premer en ligazóns en correos electrónicos,
francamente, todos os enlaces en correos electrónicos.
Se sabe que ten real diñeiro no Paypal ou Banco
de América ou Fidelity ou en calquera web, escriba o manual no.
Porque mira como é doado enganar alguén para presentar o que
parécese unha ligazón.
Pero, en realidade, podería ir absolutamente en calquera lugar.
>> E hai moito máis ameazas que iso.
En realidade, iso é un pouco dunha tanxente agora, pero unha
dos mellores que eu xa vin que xa foi pechado,
é alguén levou a xente a-- entón iso pode dicir,
click aquí para iniciar sesión na súa conta, unha conta bancaria.
E este foi o banco do oeste.
>> Entón, alguén comprou iso.
E é un pouco máis fácil de ver lo nunha fonte mono espazos grande
no nun proxector de 30 pés.
Pero cando é pequena fonte nun correo electrónico que está a recibir,
isto parece bankofthewest.com, non bankofthevvest.com,
que alguén pagara 10 dólares para mercar.
E entón, o que levou-os para o equivalente a algún sitio mal.
>> E vai ver demasiado-- realmente podemos facer isto-- se eu ir ao sitio real,
bankofthewest.com, de novo, recordo a última vez
que, se esta é a súa páxina web e está curioso para saber como funciona,
certamente pode ir Ferramentas de creador de Chrome.
E pode ver a HTML cun formato alí.
>> Pero, máis ao punto, vostede cam-- imos pechar
isto-- pode ir Eventos Creador View Source.
Por que non podo simplemente copiar todo isto e entón eu
pode entrar na miña ventá pouco gedit aquí e facer a miña propia páxina web.
Salva esta en hello.html.
E, probablemente, que vai romper, por que non é tan fácil normalmente.
Pero agora, se eu actualizar a miña propia páxina en miña propia CS50 Appliance e recarga bater,
OK, algunhas cousas rompe.
Pero eu estou moi preto de ter o meu propio sitio web bancario, non?
Todo isto HTML--
>> [Risas]
>> DAVID J Malan: -Eu non actually-- e
sei que hai alguén aí fóra que sería, en realidade, prema nestes enlaces tamén.
Entón, claramente, algunhas cousas rompe.
Pero iso vai levar nos a unha discusión,
innecesariamente agora, en canto ao que CSS, follas de estilo en cascada, son,
e como realmente descargar outros arquivos HTML
e JPEG arquivos GIF que o sitio web pode estar a usar.
Pero todo isto é realizábel.
Pero realmente se reduce a estes heurística moi sinxelo.
>> Entón, agora imos percorrer un par de outros exemplos de HTML
só para lle dar un sentido o que máis pode facer.
Por exemplo, este é list.html.
Supoña que eu quería facer unha páxina web cunha lista de vivendas no quad.
Eu podería usar a etiqueta ul para desordenada lista e, a continuación, o neno elemento da lista
e despois iterado over-- ou lista, rather-- as casas en cuestión.
>> E se eu abrir isto, imos facelo.
Imos non hello.html, pero para list.html.
Caramba.
Como fago para solucionar isto?
É o mesmo problema de antes, non?
Entón deixe-me facer oops-- chmod-- chmod a + r de list.html.
E agora, se eu volver para o meu navegador e prema en Cargar de, alí está el.
Entón, se vostede sempre quixo facer unha lista con viñetas, pode facelo.
Se queres ser super chic e facer unha lista ordenada, non unha lista non ordenada,
cambiar aqueles para ol, volva a páxina e Agora o navegador numerar por vostede.
>> Que máis podemos facer?
Ben, un par de outros- se ten longos parágrafos de texto--
por exemplo, algúns Texto en latín como isto--
e quere que en letras separadas, aberto p, p preto da marca de parágrafo.
E facelo de novo e de novo.
E se eu agora abrir este ficheiro, paragraphs.html, así, este
está quedando aburrido.
Entón, agora imos voltar para o meu alerta, chmod a r r estrelas + .html--
un bo comodín pouco por así dicir.
Debe resolver todos estes problemas para min.
Imos actualizar.
Hai tres parágrafos.
>> E agora imos adiante e abrir outro.
Como sobre a mesa?
Vai notar miradas de mesa algo máis complexo.
Pero é o mesmo idea-- tag aberta, etiqueta aberta,
aberto, aberto, aberto, preto tag, tag aberta.
E estes acontecen en repouso por táboa, cuxa fronteira é aparentemente
será espesor 1-- o que quere que liña da táboa means--, mesa
datos, o que supón unha célula.
E se eu volver para o meu navegador aquí e ir table.html,
podes ver algo así, hediondo.
Pero nós imos chegar ao punto onde podemos realmente
facer as cousas máis bonitas do que iso.
>> Entón deixe-me estipular de momento.
Hai grupos de máis etiquetas.
E HTML é marabilloso para incorporarse porque, francamente, todo o que tes que facer
é mirar para as páxinas web existentes co cal está familiarizado.
E vostede é como, oh, é así que eles fixeron iso esteticamente.
>> Ou pode buscar calquera liña de recursos acerca de como funciona HTML,
e verás que hai unha todo o vocabulario doutras etiquetas.
Pero co modelo mental simple só que case calquera marca que abrir
ten que ser pechado, realmente é suficiente para ensinar a si mesmo
HTML despois de entender estas ideas básicas de marcas
e atributos ea boa formación que xa falamos sobre,
nada de pechar para que poidamos abrir para que non confunda un navegador.
Entón, imos agora dar isto para un nivel máis interesante
indo ao real.
E imos para o meu Mac aquí, a google.com.
E agora notice-- imos facelo.
Estou gongo para ir Configuración, Configuración de busca.
Quero desactivar ese instante irritante Resultados cousa onde se inmediatamente
comeza respondendo a súa dixitación.
Imos facelo de xeito máis vella escola nós realmente ver o que está pasando.
>> Entón, eu estou indo a salvar a miña Configuración de Google aquí.
E agora notice-- vou buscar algo como gatos.
E aínda está facendo auto completa aquí, pero en base a cousas
persoas escribiu no pasado.
Pero teña en conta o que vai ocorrer.
>> Na URL no momento é iso, só google.com.
E tecnicamente, é barra.
Google acaba de salvar un personaxe e non nos que amosar.
Eles están nos amosando https, só ser super reconfortante de que estamos
nunha páxina segura ou criptografía.
>> Entón deixe-me ir adiante e buscar gatos.
Agora iso quedou moi esmagadora rapidamente.
Olle o tamaño desta URL.
Pero parece que a maioría deste material na URL é realmente moi inútil.
Vou comezar a borrar cousas que non entendo.
Vexo gatos.
Entendo gatos.
Non sei por que os gatos están alí de novo.
Realmente non sei o que este absurdo é.
Entón, eu estou indo só para manter destacando e exclusión de material
que eu non entendo, Destilando a URL en só iso.
>> Agora déixeme se introducir de novo.
Parece que Google aínda traballa.
Entón, por algún motivo, están engadindo un chea de cousas para por defecto do seu URL.
Pero non é estrictamente necesario.
Entón, o que é bo sobre iso?
Ben, deixe-me ir adiante e abrir Inspector de Chrome.
Hai un pouco de atallo do rato para iso.
>> Vai á pestana Rede.
E agora déixeme volver cargar desta páxina unha vez máis.
E eu estou me sostendo Shift.
Como un aparte, navegadores tenden a almacenar en caché ou gardar
información só por mor da eficiencia.
Pero, normalmente, sostendo a tecla Shift e recarga obrigará todo
que comezar de novo desde o principio.
E iso é o que quero facer aquí.
>> E teña en conta todos estes liñas que só apareceron.
Acontece que en calquera web páxina, pode haber só un ficheiro
involved-- hello.html-- ou non 52 pode ser, como no presente caso.
Cando visitar google.com, Ao parecer, o meu navegador
arrinca 52 solicitudes HTTP separadas.
Por que?
>> Ben, mire para o que está dentro deste top web page up.
Non hai só texto, pero non hai imaxes reais
de gatos máis á dereita.
Hai un logotipo colorido aquí enriba á esquerda.
Hai todos estes iconos por un micrófono e así por diante.
Hai unha morea de pezas, construíndo bloques, pezas scratch, se quixeren,
a esta páxina web.
E o que o navegador está facendo encima quedando o primeiro arquivo, que
É esta liña aquí, é esencialmente iteración sobre o cumio HTML
abaixo, de esquerda a dereita, buscando cousas como etiquetas de imaxe ou doutras marcas
que están mencionando outros arquivos e cando se ve, vai e busca-los
vía HTTP, toda viable metáfora sobre,
e logo, exhibe os na lugar adecuado na páxina web.
>> Pero teña en conta aquí concentrarse en os primeiros gatos tiro, busca,
entender que, en realidade, está a usar HTTP 1.1.
E, por desgraza, Google Chrome agora na versión 39
é o tipo de cousas emburrecimento e non nos mostra as cabeceiras reais.
Pero o que foi de feito enviado é unha solicitude para non cortar, pero / search? q = gatos.
>> Agora, por que isto é importante?
Ben, eu estou indo a inferir de aí que se Google
soporta as consultas deste tipo, por que eu non aplicar a miña propia investigación
motor para CS50, pero só a parte dianteira final, só a interface gráfica de usuario.
E nós imos terceirizar o back-end, a procura real resulta para Google.
>> Entón, como podo facer iso?
Ben, deixe-me ir gedit aquí.
E deixe-me ir adiante e abrir ata, digamos, un novo arquivo.
E eu estou indo a gardar esta temporalmente como búscase 0.html.
E entón, finalmente, imos rápido fronte ao que eu pre-preparados.
>> E eu vou rapidamente látego tipo doc
html soporte aberto html preto html soporte.
Entón eu vou facer a cabeza preto cabeza Título aberto CS50
Buscar no canto de busca de Google.
Aquí abaixo eu vou ter o corpo, aquí preto do corpo.
E agora eu teño CS50 Search.
E, de feito, imos construír esta forma incremental.
Eu estou indo a ir adiante e pechar esta e realmente poñelas no meu directorio público.
Entón me dea só un momento.
búscase 0.html-- vou temporalmente chamalo search.html.
Vou chmod un search.html + r.
E agora eu vou abri-lo.
Todo ben, de xeito que foi rápido.
Pero o obxectivo era simplemente para levarnos ao punto
de ter este texto ficheiro chamado search.html.
Polo tanto, non hai moito para ollar aínda.
En realidade, se eu for ao meu navegador, e ir search.html, iso é todo o que é.
Pero vostede sabe o que?
Podo ser un pouco afeccionado.
Lin nun libro que hai unha rúbrica denominada etiqueta h1.
E eu estou indo a ir adiante e usar que h1 abrir e pechar h1.
Actualizar a páxina.
E agora é a maior e máis ousado, nin todo o que interesante,
pero polo menos estruturalmente máis interesante.
Pero agora deixe-me presentar outra etiqueta.
Acontece por aí é unha etiqueta de formulario.
E déixeme pechar a etiqueta.
E verifícase que hai unha marca de entrada que
ten un atributo chamado tipo, que é do tipo de campo de datos,
se quere.
E será do tipo texto.
E o seu valor vai ser CS50 Search.
Pechar etiqueta.
E non vai ser ningunha noción de abrindo e pechando con marcas separadas.
>> Déixeme volver para aquí e ver o que está pasando, actualizar.
Quedando interesante.
Parece que é un campo de texto.
E de feito, eu non quería poñer un valor alí aínda.
Déixeme volver aquí e realmente comezar librar dese valor para mantelo simple.
En vez de un valor, o que eu quería para dar esa cousa era un nome.
E eu non sei o que é, entón eu vou volver a iso.
>> Pero debaixo diso, quero facer input type = someter.
E este valor será CS50 Search.
E imos ver por que eu cambiou-se o valor para este.
Cando actualizar, eu parezo ter agora os inicios da miña propia investigación
motor, super hediondo, aínda que, a verdade, é
non un lanzamento lonxe do que Páxina estándar de Google parece.
>> Se eu ir aquí e agora, podo escribir gatos e esperamos prema Buscar.
Pero eu non estou ben feito aínda, porque eu non aplicaron,
obviamente, unha base de datos.
Non arrastrou o web para resultados de busca.
Entón eu teño terceirizar que para Google.
Entón, como podo facer iso?
>> Ben, primeiro de todo eu que engadir e acción
atribuír a miña forma de etiqueta que é http://www.google.com/search.
E sei que só de ter inferida polo ollar de preto
na súa URL.
E agora dar un palpite.
O que debe este campo de texto probablemente chamarse, desde onde nos vimos
de antes?
>> Audiencia :? Q.
>> DAVID J Malan: q.
E nós realmente non precisa pregunta marcalo saír, pero q é realmente iso,
q para consulta probablemente por defecto, só porque iso é
o que Larry e Sergey veu con anos.
Entón, agora deixe-me recargue esta páxina.
Non parece tan diferente.
Pero agora mira o que acontece.
>> Se eu escribir en gatos e prema CS50 procura e deixar ir,
entender que me levou lonxe de real Google.
Agora, Google está a ser un pouco irritante en que son
anexando un parámetro adicional, se, ao URL.
É todo o que está pasando automaticamente na parte de Google.
>> A parte importante é que eu parezo xerar esta solicitude aquí.
E, de feito, iso é o que pasa.
Cando ten HTML que parécese tanto, este
é unha especie de desenvolvedores web notación por dicir, vai adiante e crear un formulario
que cando é sometido, está indo a ir a esta URL.
E cando a URL proporcionou valores para cousas como q,
non van só para este URL.
De feito, vaia á cuestión marca e entón q = gatos.
Engada o parámetro, o Parámetro HTTP así.
>> E só para ser super precisa, o que está a ser inferida aquí-
pero eu vou ser máis explicit-- é que o método que desexa usar
é obter, no canto de algo como post, que imos finalmente ver.
Así, en breve, simplemente pola comprensión HTML e usando algunhas etiquetas moi sinxelo,
agora podemos comezar a crear noso propio usuario final fronte
de interface con unha busca motor detrás del.
>> Pero iso, claro, é moi hediondo.
Entón deixe-me realmente abrir unha versión un pouco mellor.
Iso é o que eu preparado en avanzar que ten algúns comentarios.
Pero vai ver que eu practicamente recriou.
Polo tanto, este xa está dispoñible en liña.
E eu fixen acontecer con cautelarmente ir https só para mantelo simple.
>> E agora imos abrir un próxima iteração deste.
É a versión 1 no canto de 0.
O que salta á vista como algo diferente neste exemplo?
>> Audiencia: [inaudível].
>> Si, non hai este centro align texto.
Isto é un pouco raro por aquí.
Pero esta é realmente novo.
E quizais adiviñar o que vai ocorrer.
Se eu ir ao meu navegador agora e visitar búscase 1.html,
é case o mesmo.
Pero é un paso máis preto de sendo un pouco máis fermosa.
Aínda é feo, pero máis fermosa en que polo menos, todo está agora centrado.
>> Así, verifícase que o que eu estou a usar é outra lingua completamente chamada
CSS, follas de estilo en cascada.
E CSS, a verdade, é unha especie de, na miña opinión persoal,
unha linguaxe atrozmente designado.
É moi aburrido para recordar todo varios detalles.
Pero é o que estiliza a toda web en todo o mundo hoxe.
Eu ofendín a alguén.
Todo correcto.
Entón, imos voltar aquí para ver como estamos realmente a usar iso.
E ao parecer, polo menos é en realidade, unha linguaxe moi sinxela.
É só pares de valores clave, propiedades e valores, propiedades e valores.
De feito, aquí é un tal propiedade e valor.
>> Simplemente usando o estilo atributo na miña tag corpo
e dándolle un valor dun colon palabra e outra palabra,
ou unha propiedade e un valor, I pode afectar a estética
da páxina web, non necesariamente da estrutura, con todo,
pero a estética do mesmo.
E só por buscar por aí, eu entendo que as follas de CSS, de estilo en cascada,
soporta unha propiedade chamada text-align, cuxo valor pode
ser á esquerda, dereita ou centro, por exemplo.
>> Entón agora cando recargar Nesta páxina, o que eu puiden
era unha páxina centrada, pero aínda así feo.
Imos ir adiante e abrir ata a versión 2 da Investigación.
E agora entende que fixen un pouco máis.
Lembra que até aquí dentro da cabeza tag, pode haber máis que título.
De feito, hai unha marca de estilo.
E é aí que só queda un pouco a ver CSS confuso ás veces.
>> Teña en conta que me parece algo que estruturalmente parece moi diferente.
Pero aquí é o nome tag Quero estilizado.
Aquí están os nosos vellos amigos crespos cintas e chaveta pechado.
E entón aquí é que propiedade eo seu valor.
>> Se eu cargar este ficheiro, search2.html, o resultado final é o mesmo.
Pero é un paso cara a unha mellor deseño.
Ao fatorar o presente CSS, eu teño non mesturado co meu HTML.
E, de feito, como veremos, eu podería reutilizar estas propiedades e valores.
Se eu quixese facer acios de partes da miña páxina web centrada,
Non teño que escribir style = text-align centro de todo o lugar.
Podo poñer nun só lugar Quizais, como na parte superior.
>> Pero aínda que non é o mellor deseño.
De feito, unha das cousas que vai aprender como gastar máis e máis tempo con
programación web é que canto máis lle poida modularizar cousas e factor de cousas
como ficheiros .h nós imos factor material para fóra, gusto helpers.c deixar-nos as cousas factor
algunhas Serie de exercicios atrás.
Do mesmo xeito, poderiamos quere conseguir isto.
>> Entón, observe na versión tres de search.html teño
limpa a cabeza de a páxina e pode poñer
nesta, unha etiqueta enlace, que contrariamente ao nome,
non lle dá un hipervínculo.
Ela une a outro ficheiro a través de un href cuxo valor, neste caso,
é procura-3.css
Entón eu entender que nós estamos indo rápido.
Pero todo o que eu estou facendo é unha especie de mover as cousas.
Déixeme aberto búscase 3.css.
Non é, nada realmente a el.
Eu só copiei e colei nunha nova ficheiro, así como nós consignado material para fóra
noutros arquivos antes.
E o result-- completamente underwhelming--
será exactamente o mesmo.
Pero estamos movendo toward-- non, non é.
Oh, eu sei por que.
>> Así, parece ser un erro.
E é nalgún sentido.
Pero déixeme abrir o meu guía Rede.
Déixeme volver cargar a páxina.
Ah, por que o CSS non sendo aplicado?
Ben, o arquivo CSS, do mesmo xeito, ten para ser lexible, por así dicir.
E iso tamén está prohibido.
Entón deixe-me facer un chmod a + r da estrela dot CSS-- whoops--
estamos CSS punto é só o extensión de ficheiro para ficheiros CSS.
Agora déixeme volver meu navegador e reload.
OK, un pouco mellor.
>> Agora, deixe-me facer unha última cousa.
En busca-4.html.
Eu teño unha versión que eu só pensaba era moito máis legal, aínda que forma máis
complicada.
Vexamos o resultado primeiro.
Pechar esta para dar máis espazo.
Cambie isto para buscar-4, Intro.
>> E agora unha chea de cousas están rotos.
Vou volver no meu directorio aquí.
E agora eu estou indo só para facer un chmod dun + r nun file--
porque sei que exists-- chamado logo.gif, que é unha imaxe.
E agora actualizar.
E wow-- entón agora eu son ben preto, francamente,
gusta da versión de 1999 de Google, e francamente, a versión 2014 de Google,
non?
>> Por iso, agora vai para o seu sitio web, en última instancia, se eu buscar gatos.
E de feito é.
Pero o que eu faría diferente nesta versión 4?
Polo tanto, non imos alongar moito sobre iso aquí.
Verá que en problema definir sete eventualmente.
Pero repare que eu fixen algunhas cousas.
>> Eu presentei unha div tag, que é a división,
semellante en espírito a un tag de parágrafo.
Pero a división é igual, é aquí unha rexión rectangular invisible
da pantalla.
Imos darlle unha única identificador, un pé de páxina, só
para que poidamos falar de Lo noutro lugar no noso HTML.
Aquí está outra div da páxina cuxo ID será o contido.
É o contido da páxina.
E aquí é a cabeceira da páxina.
>> Noutras palabras, eu teño esencialmente HTML son mental
ver esta páxina web como tres compoñentes, unha cabeceira
ata aquí con este rectángulo invisible, o contido no medio, e, a continuación
o pé por baixo, mesmo aínda que non vemos isto.
Porque quero na miña cabeza de páxina aquí, ou nun ficheiro .css,
Podo usar esta sintaxe.
>> Header non é unha etiqueta.
É unha ID para que se transforma que facendo #header,
Agora podo aplicar unha ou máis Propiedades para a cabeceira.
Podo facer o mesmo contido, o mesmo ao contido aquí.
>> Así, por exemplo, no rodapé, o aviso previo todas estas propiedades estou engadindo.
E sei que hai só pola lectura se sobre a documentación para CSS.
Tamaño da fonte será smaller-- de ningún xeito o tamaño da fonte relativa.
O peso será ousado.
Margin-- cantos píxeles en torno ele-- é de 20 píxeles.
E iso será centrado.
>> Pero agora, a páxina se parece con isto.
Se eu non está satisfeito con miña copia alí,
Podería facer algo parecido coa cor vermella.
E entón podo gardar este, reload, e agora eu teño estilizado rodapé.
Polo tanto, esta é só insinuando o poder do que se pode facer nunha páxina web
para cambiar as cousas ao redor.
>> E aínda máis frío do que iso, se quere para bisbilhotar sitios reais,
non pode muda-los permanentemente.
Pero se eu abrir Inspector de Chrome novo
e eu non vaia á esquerda aquí, o que demostra HTML de Facebook,
pero mostra á dereita lado todo o seu CSS,
pode e cambiar as cousas en tempo real.
Entón deixe-me ir adiante e facelo.
>> Deixe-me ir adiante e control clic sobre esta palabra aleatoria aquí,
asinar e prema en Inspect Element.
Chrome salta moi cómodo para tag h1 que Facebook está a usar.
E teña en conta aquí Facebook ten tipo de preguizosamente
codificado tamaño da fonte como unha propiedade aquí.
>> Entón, o legal é que que se eu realmente entrar aquí
e dicir, oh, Facebook, eu non me gusta que 64 píxeles, podemos agora cambiar Facebook.
Por suposto, estamos só mudándose o para min, persoalmente, no momento.
Pero este é só un ferramenta na nosa kit de ferramentas
que vai permitir axustar e descubrir e tamén diagnosticar
cuestións nas nosas propias páxinas web.
E poderiamos ir do mesmo xeito ao longo do aquí, que é o mesmo.
Se realmente quere comezar a fantasía, eu É dicir, agora pode realmente transformar a páxina
e facer cousas malucas.
>> Entón, por que todo isto é útil?
Ben, en definitiva, estamos Vai querer ser
capaz de crear páxinas web que son movidos polos nosos propios fins de volta,
non só por Google e terceirização de back-end alí.
Nós, en realidade, quere o valor, por exemplo,
da acción de noso buscador asignar a ir non a outra persoa,
pero para algo como search.php, onde search.php é no noso propio servidor,
non no doutra persoa.
>> E así, para chegar alí, nós realmente necesidade de introducir unha nova lingua.
Entón nós xa mirou para un novo linguaxe aquí, ou dous realmente, HTML
e CSS.
Pero realmente son só linguaxes estruturais e estéticos.
Eles non están programando linguas per se.
E iso é tanto formais tempo que imos gastar con eles.
Porque nós imos comezar agora a transición ao PHP.
>> Entón PHP é unha real linguaxe de programación.
É unha linguaxe de script no sentido de que é
pretende ser máis leve do que algo como C.
E é unha linguaxe interpretada, o que significa que non está compilado.
Así, en poucas palabras, o que significaba cando usamos unha linguaxe como C
e tivemos que recompila-lo?
Que significa para compilar o código fonte C?
Audiencia: [inaudível].
DAVID J Malan: Diga isto de novo?
Audiencia: [inaudível].
DAVID J Malan: Perfecto.
El transforma-lo en binario.
El transforma ceros e uns a partir do código fonte inglés-like real.
E entón podemos realmente realizar estes ceros e uns
pasando-os a través do CPU cun dobre clic nun icono
ou executar un comando.
>> PHP e Python e Ruby e Perl e JavaScript
e acios de outro linguas son interpretadas
linguas, o que quere dicir non recompila-los.
Pola contra, ten alimento-los como entrada para un programa chamado un intérprete.
E iso intérprete, que alguén escribiu,
le o código fonte superior para abaixo, esquerda a dereita e só interpreta
estas liñas e fai o que di.
>> Entón, se atopa un liña que di impresión,
iso non significa necesariamente converterse impresión para os ceros e uns correspondentes.
El só ten ese intérprete como un gran se a condición que di:
se a instrución do programador é de impresión, logo faga o seguinte.
Por iso, interprétase o só por tipo de razoamento
a través do que está dicindo que el faga.
>> E PHP é unha das linguas.
E PHP anos foi deseñado precisamente para programación web.
E foi inicialmente un linguaxe confusa moi desleixado.
E, de feito, hai unha enorme cantidade de código PHP malo por aí.
Pero a propia linguaxe madurou ó longo dos anos,
tanto que agora é en realidade, un marabilloso seguinte paso
pedagoxicamente de C, porque é tan enervante familiar para todo
acaba de ver nas últimas semanas.
>> A única diferenza inicial veremos é que non hai función principal máis.
Cando comezar a escribir código, só será executado, non importa o que,
como veremos en un momento.
Mentres tanto, aquí está o que un variable parece en PHP.
É un pouco diferente, pero só mal.
>> En PHP, non hai tipificação forte.
Hai semanas dixitación, que significa que non
son tipos de datos como cordas e números e outras cousas.
Pero non se molesta especificando o que son máis.
PHP figuras-lo para ti.
O sinal de dólar é só unha decisión que o pobo fixo PHP anos
detrás de tal forma que calquera variable en PHP só comeza con un sinal de dólar.
Realmente tipo de útil na que salta en ti un pouco máis.
>> Pero despois diso, este é unha condición en PHP.
¿Que é diferente en relación C?
Truco question-- nada, que é realmente moi bo.
As expresións booleanas en PHP-- o mesmo.
As expresións booleanas con e contra ou, interruptores, loops, loops, loops-- OK,
este é diferente.
>> Así, verifícase aí é un par doutros recursos de PHP.
Un deles é realmente iso, que é marabillosas cómodo.
Se $ números é unha matriz que ten declarados previamente nun programa,
ten esa fantasía para cada construto que en vez de facer todo isto
irritante I é igual a 0, I é menos que iso, [? I ++?],
para cada un dos números como o número, onde cada deses valores sinal de dólar é só
unha variable, e esta última pode pensar como I.
Podería chamalo de calquera cousa que sexa.
Chameino a de número.
Isto vai iterado a matriz de números de chamada.
E en cada iteración, é vai actualizar automaticamente
para ti o número cifrão variable para que constantemente
ter acceso á variable que desexe sen ter que facer calquera corchete
notación ou a indexación nunha matriz.
>> Ademais, aínda temos cousas como matrices, que parecen case o mesmo,
agás que é moi común, como veremos ver, tanto en PHP e JavaScript
para pre arrincar unha matriz usar corchetes.
C usa chaves.
Por iso, é un pouco diferente, aínda que nós realmente non usar ese truco moito.
>> Pero aínda máis poderosa, PHP ten matrices asociativas,
que é un xeito extravagante de dicir táboas de hash.
En realidade, se quere declarar un hash mesa en PHP, a diferenza de C-- cantos
liñas de código tardou para realmente implementar unha táboa hash en C?
Ou cantas liñas de código é tomando para aplicar unha táboa hash en C?
Por iso, pode ser moito, non?
É unha ducia, quizais 100 ou 200.
É trivial.
Ou que está a piques de ser, como en breve vai ver, non trivial
para aplicar unha táboa hash [Inaudível] e tamén un intento.
Pero en PHP-- e, francamente, eu probablemente non debería dicir iso
ata Monday-- en PHP, se quere unha mesa, feito.
Isto é un hash mesa-- así cunha liña de código.
E
>> Unha morea de linguas facelo.
Disfrútao con pset cinco.
Entón, unha morea de linguas facelo.
Eles dan-lle estas abstraccións que outras persoas, outros programadores,
creamos para ti, de xeito que pode estar nos seus ombreiros
e comezar a usar as ideas que son super convincente, como táboas de hash e árbores
e tenta.
Pero non ten que necesariamente aplicar estas cousas ti mesmo.
>> E así, en definitiva, o que imos usar o PHP para
é potencialmente escribir programas da liña de comandos chamada.
Poderiamos recrear cada programa escribimos neste semestre, ata o momento,
agás, quizais, Breakout, que utiliza SPL, o cal é específico para C no momento.
Pero todos os outros problemas definir, certamente Mario e César
e Vigenère e [? Crack?] E para adiante, nós
podería re-aplicar en PHP, e probablemente un pouco máis facilmente.
>> Pero o que nós estamos indo en definitiva, usar o PHP para programación web é.
E imos introducir próxima semana un modelo mental, un paradigma chamado
MVC, controlador de vista do modelo, que se ten feito a programación
antes en Python ou Ruby ou noutro lugar,
podería saber desa equipo con Rails e Django e afíns.
Pero se vostede é novo para iso tamén, verás
que este é realmente un moi natural extensión da fatoração
e do tipo de proxecto de código que temos
feito en C. Nós imos agora aplicar algunhas destas leccións para PHP
de xeito que, en definitiva, estamos aplicar os nosos propios sitios.
E se é unha especie de hipnotizado ou espantado
que nós imos facer todo o tan axiña,
entender que case todo semestre, preto de 90%
de estudantes CS50, incluíndo os quen nunca programou antes,
acaban facendo proxectos finais que están baseados en programación web.
E así vai ver que os retorno son altos nas semanas que virán.
Entón, imos velo logo o luns.
>> COLUMNA 1: E agora, o Deep Pensamentos por Daven Farnham.
As táboas de hash.
>> [Risas]