[Powered by Google Translate] [Semana 7, continuación]
[David J. Malan, Harvard University]
[Esta é CS50.] [CS50.TV]
Todo ben. Welcome Back. Este é CS50,
e este é o fin de semana 7.
Así, unha desas cousas estúpidas pequenas que xira en torno de Internet
e sorveu-se, e debe agora facer un pouco de sentido nerd para ti.
Ben, era máis divertido con este cara que era para vós.
Fala niso, así, persoal,
hoxe é o aniversario de Nate.
Para lle dar unha sensación de Nate o quão bo e eu somos
en desenvolvemento web con base na clase de luns e con base agora sobre iso,
Eu penso que eu ía tirar páxina Nate casa, se non viu aínda.
Este aquí HTML ía Nate.
Entón, ver o código fonte, se quere ver como facelo, e Nate,
se puidésemos embarass só brevemente, o equipo ten peixe
Se quere compartir algunha sobremesa con algunhas dos nenos da clase aquí.
Se desexa vir abaixo.
Vostedes todos aplauden e son moi agradables, pero ninguén está sentado preto Nate,
por algunha razón, aquela zona ao redor.
Entón quizais podes atopar algunhas persoas para gozar estes con.
Feliz Aniversario, Nate.
>> Hellos adicionais: Nós mostramos un clips parella nosos alumnos CS50x.
Se desexa ver quen é o mundo
que está acompañando, pode ir a esta URL,
onde José, un dos nosos TFS, montou unha especie de montaxe
de todos que ten enviado os vídeos, entre eles Rick Astley.
E se percorrer estes, é realmente moi inspirado
ver a diversidade de países e cidades a partir do cal as persoas están vindos.
Entón, se quere dar un ollo niso, que será de ata o final do semestre.
Hoxe imos seguir o noso ollar para a web, programación web, HTML e afíns,
e tamén comer chegando este venres
Se desexa, e, en particular, non o fixeron antes.
O tema deste venres será o aniversario de Nate,
Entón, se quere ter xantar de aniversario con Nate
e outros, algúns dos nosos amigos de Industria,
por favor cabeza para a URL alí.
Espazo, como sempre, é limitada. Ademais, se esqueceu,
entender que a próxima semana é o prazo para o problema definido 4 de cacería,
en que despois de se recuperar de todas esas JPEGs de card.raw,
vostede e os seus compañeiros de sección, se o desexa, pode tentar fotografía
como moitos dos científicos da computación de tarxeta de memoria que sexa posible,
e vostede ea súa sección pode gañar un premio fabuloso.
Remitir a pset 4 de especificación do que presentar e cando.
Ademais, se quere ter a súa obra imortalizada
na páxina web do curso ea súa historia de roupa,
sei que é benvido agora para comezar a enviar proxectos
para este ano, camisetas e camisolas e afíns.
Nós imos facer o noso mellor para incluír o maior número que pode,
pero imos ter algúns membros do persoal da revisión de todos os proxectos
para asegurarse de que eles están de acordo coas especificacións,
e en seguida, escoller xeralmente un puñado deles para ser exhibido.
Entón, se é o tipo de construción, só sei que os requisitos
para gráficos PNG son, polo menos 200 dpi,
non debe ser superior a 4000 x 4000 píxeles,
e non máis de 10 MB, pero é benvido para usar cousas como
Photoshop ou GIMP ou varios gráficos de programas,
o que ten á súa disposición.
>> Tamén no horizonte é o proxecto final. O proxecto final é realmente o clímax de 50,
cal de todas as atribucións do curso,
É a súa oportunidade de realmente facer a súa propia cousa.
E iso pode ser simplemente facer algo para divertirse,
pode ser para resolver un problema urxente seu grupo de estudante ten,
por algún novo sitio web, algún mecanismo de nova colección de datos.
Pode ser unha aplicación móbil para Android, para IOS.
Realmente, o ceo é o límite, e ao longo das próximas semanas,
como transición C para estas linguaxes de alto nivel como PHP e JavaScript,
vai atopar-se cada vez máis familiarizado con algunhas técnicas do mundo real,
algunhas ferramentas do mundo real, e para complementar que,
sei que o curso ten unha historia de seminarios,
en que ao longo das semanas seguintes, algúns dos docentes
e os nosos amigos de no campus ofrecerá seminarios opcionais
que van enriba e alén do que é normalmente feito na sección
para presentar-lle cousas como programación Android
para presentar-lle cousas como IOS programación
ou máis avanzadas técnicas de desenvolvemento web.
Hai toda unha historia de estes xa en liña.
Se vai para cs50.net/seminars, estamos facendo iso hai varios anos,
e vai ver que arquivada aquí con PDFs e vídeos e afíns
son decenas de vídeos de varios seminarios.
O ano pasado, por exemplo, tivemos un seminario sobre acing súas entrevistas técnicas,
se está realmente ollando para saír e facer un estadio ou de tempo completo show.
Windows Mobile desenvolvemento, desenvolvemento Android, Google Maps,
API, CSS, desenvolvemento para o BlackBerry, Emacs.
Realmente, vostede é benvido para dar un ollo en calquera destes seminarios da súa conveniencia.
E nós imos estar seguro algúns novos neste semestre, tamén.
>> Entón, o que está á fronte co proxecto final?
Ben, en primeiro lugar, aínda que esta data é un pouco inminente,
iso é realmente só unha oportunidade para comezar a pensar o proxecto final bastante realista.
Sabemos só o comezo algunhas das cousas que aínda imos facer a cobertura no curso,
HTML, PHP e afíns, pero estamos todos familiarizado coa web,
e prexuízo eu esta conversa para a web só porque
a maioría da xente acaban facendo proxectos baseados na web finais,
pero que non é de forma necesaria.
Usando C é bo, Objective C, Java,
calquera outra lingua que poida saber ou querer saber, é moi tenue.
Pero, para obter os zumes fluíndo inicialmente, imos esperar a presentación dun preproposal
que, polo PDF na web, que é agora de cs50.net,
e na esquina superior esquerda podes ver proxecto final
é a especificación para o proxecto final,
e existen máis detalles sobre a preproposal e similares.
Ferve practicamente resume a un correo electrónico para o seu compañeiro de ensino
só para iniciar unha conversa con el ou con ela sobre o que está a pensar.
En projects.cs50.net é un repositorio de ideas de persoas no campus
Se está loitando para chegar a algunha idea,
e manual.cs50.net/APIs é un repositorio de enlaces a APIs
>> O que, con todo, é unha API?
¿Que é unha API? Eu xa dixen iso polo menos dúas veces,
de acordo coas transcricións das últimas semanas.
¿Que é iso? [Estudante, inintelixible]
>> Ok, bo. Entón, interface de programación de algo.
Interface de programación de aplicación, e isto pode tomar varias formas,
pero o que dicir resume realmente para abaixo e de código
que alguén hs escrito ou datos que alguén teña recollidos
que está dispoñible para vostede de algunha maneira programática.
Podes escribir código en C, PHP, Python, Ruby,
calquera que sexa o idioma da súa elección xeralmente é,
e pode dalgún xeito construír enriba de outra persoa funcionalidade
ou outra persoa conxunto de datos.
Por exemplo, se eu ir a este enlace aquí,
e vai ver un par de enlaces que aparecen na páxina seguinte
polo que temos propias APIs CS50, que son moi Harvard-céntrica, e despois APIs de terceiros.
Entre as APIs de terceiros son cousas realmente útiles
como ser capaz de enviar a xente para o SMS, o
ser capaz de recibir as mensaxes de texto SMS de persoas.
E cousas así que pode ter ningunha idea de como aplicar a si mesmo,
pero grazas a servizos, algúns, libres e algúns comerciais
pode construír sobre os e facer algo de interese para vostede.
Entre APIs CS50 son estas cousas campus-céntrica como
Cursos de Harvard, enerxía, eventos, alimentación, mapas, novas, tweets e Shuttleboy propio,
e estes son APIs que mirar un pouco algo como isto.
>> Deixe-me puxar arriba a API HarvardFood.
Se xa foi para o sitio web do HUD, probablemente xa estivo alí
só para ver o que hai para a cea ou para ver o que as horas son para algúns d-hall.
Ben, non é particularmente fácil de navegar,
e así o que fixemos hai algún tempo foi que escribiu o software,
el pasa a ser en PHP, que realmente pantalla raspa a totalidade do web HUD.
Para a pantalla algo raspar significa escribir un programa nunha linguaxe como PHP
que pretende ser un navegador, aínda que poida executa-lo nun ventá de consola,
que pretende ser un navegador, se conecta a un sitio web,
traslada o seu HTML, a linguaxe en que está escrito,
e, a continuación, le-lo, ou máis especificamente, analiza-lo
de arriba abaixo, de esquerda a dereita.
E o que fixemos foi que escribir o noso código de tal forma que
cada vez que viu algo en que o HTML que parecía algo no menú,
como hamburguesa, teriamos entón que importar o noso propio banco de datos.
E cada vez que viu o contido nutricional, teriamos que importar o noso propio banco de datos.
E o que fixemos foi aproveitar o feito de que o sitio web do HUD,
aínda que poida ser un pouco de un desafío para nós seres humanos para navegar
debaixo da capa, todo o HTML é xerado polos seus propios programas de ordenador.
Entón, todo o seu HTML, aínda que poida parecer confuso,
como a maioría dos sitios debaixo do capó, segue un patrón.
Entón, só pasei un par de horas para descubrir que o patrón
de xeito que, ao final, nós xogamos fóra todo o HTML desorde,
todos da estética fronte negra e cursiva e afíns,
eo que nós somos entón capaces de facer é expoñer os mesmos datos.
Por exemplo, deste xeito.
Polo tanto, de acordo coa documentación aquí,
informaron o mundo que se solicite unha URL
que se parece iso, food.cs50.net / algo,
e proporcionar certos parámetros, que imos falar hoxe,
como data final hora de inicio da data comida, tempo, e así por diante,
o que os nosos servidores pode voltar a vostede, por exemplo,
é un ficheiro CSV coma, separted valores como un arquivo de Excel,
conteñen todo no almorzo, nesta data especial en marzo do ano pasado
cando pasou de eu escribir esta documentación.
>> Para os familiares, CSV non é o formato de ficheiro único.
Hai outro formato que é todo o máis versátil
chamado JSON, JavaScript Object Notation.
Os datos poden volver nese formato.
Así, o takeaway aquí é que se mergullar nesta API
ou calquera outro dos CS50 ou calquera cousa aí fóra, en Internet,
ou non en todo, entender que o mundo ten cada vez máis comezou a estandarizar
como as máquinas se intercomunicam.
Usan formatos estándar de datos como CSV ou JSON.
E o que isto significa para vostede é que pode escribir a parte interesante dun programa
que permite que o usuario procure un menú de comedor,
que lles permite crear listas de favoritos que lles permite recibir alertas de texto
cando a súa comida favorita está a piques de ser servido en algúns d-hall
usando conxuntos de datos de outra persoa e de construción enriba da súa API.
Así, máis do que en forma de seminarios e da documentación que ten aquí en liña.
Polo tanto, aqueles, entón, son APIs
>> Iso nos trae de volta ó HTML. Rápida recapitulação.
¿Que é HTML?
[Estudante, inintelixible] Boa. >> Formato Markup Language.
Outra persoa, o que é de formato Markup Language?
Formato Markup Language.
Okay. Entón, HTML, formato.
Formato refírese só á web, para a maior parte.
Replanteo significa que non é, en realidade, unha linguaxe de programación, HTML.
Non é unha linguaxe que pode expresar a lóxica dentro
El non ten loops. El non ten condicións.
El non ten funcións, per se.
Pola contra, ten estas cousas chamadas etiquetas, ou máis correctamente, elementos.
E eses elementos teñen marcas de inicio e etiquetas de final,
ou etiquetas abertas e etiquetas pechadas, e que esas marcas xeralmente significa para un navegador é,
comezar a facer algo e, a continuación, deixar de facer algo, aínda que haxa excepcións.
Ás veces é só "poñer unha quebra de liña aquí", por exemplo.
E nós vimos exemplos de que o outro día, entre o enfrontamento negra,
quebras de liña, e entón un par de outras etiquetas.
Entón HTML é a linguaxe no que páxinas están escritas.
Entón, se eu for a algo como Google.com
tire-se só a páxina a súa casa,
lembrar que, se prema co botón dereito ou controlar clic
e ollar para a orixe da páxina vista, normalmente
é unha desorde completa nestes días debaixo da capa, pero iso é porque
ordenadores non se preocupan o espazo en branco, para que isto non ten que ser fermosa.
Pero se ampliar en partes do mesmo,
observar que o Chrome, só para ser agradable, ten código de cor as cousas.
En realidade, esta é a primeira etiqueta que vimos nunha páxina web.
E, de novo, o HTML 5, a última versión desta linguaxe,
ten esa cousa no inicio,
<! Doctype html, se maiúscula ou minúscula,
pero iso é só unha especie de patrón que di, hey mundo, aí ven un arquivo HTML na versión 5.
>> A parte interesante comeza aquí. Entón <html, e despois había dous nenos
dos elementos HTML última vez.
O que eran aquelas dúas nenos principais?
Cabeza e corpo, así como o cara a tatuaxe dun momento atrás.
Hai dúas porcións de páxina web, cabeza e corpo,
e recordo, entón, que talvez a páxina máis simple web poderiamos facer coma este.
E eu teño recuado só para ser unha especie de limpo e arrumado con meu código,
pero o que é realmente importante aquí é que non hai unha xerarquía para iso.
E calquera marca que eu abri eu pechado e que non hai, polo tanto, esta simetría
todos marcado que eu creei.
Entón última vez que comece a escribir páxinas web no meu propio ordenador portátil.
Eu abrín edición de texto, eu salvei o ficheiro como hello.html,
Eu, entón, arrastrou o ficheiro para o meu navegador, e listo, eu tiña unha páxina en Internet.
Agora, non é ben así, eu tiña unha páxina no meu disco duro,
e eu estaba literalmente a única persoa no mundo que vai ver a páxina web en un navegador.
>> Entón, hoxe, nós introducimos un servidor web real
ea noción de verdade servindo de contido en internet
e como iso todo comeza a encaixar.
Así, verifícase que todo este tempo no aparello CS50
xa tivo un servidor web no seu computador.
Nós, con xustiza, só utilizado para gedit, por Clang, para o GDB e similares,
pero tamén instalado por nós para o aparello é un servidor web,
e que o servidor web pasa a ser libre, de código aberto,
un dos máis populares do mundo, chamado Apache.
O seu nome máis técnico é HTTPd, o d estar a servizo aquí,
que é un termo técnico para un servidor.
Entón instalado no aparello CS50 é un servidor web, eo que é o que significa isto?
Ben, un servidor web é, conceptualmente, algún servidor na Internet que serve de contido web.
Cando se lle pregunte sobre un arquivo, el cospe HTML que compón o arquivo, e listo.
Vostede ve algunha páxina de inicio do sitio web.
Pero un servidor é, máis precisamente, unha parte do software.
Non ten que estar nunha máquina física, el só ten que ser un anaco de funcionamento do software.
Así, o dispositivo CS50, por suposto, é un compoñente de software
aínda que é unha especie de finxir ser unha máquina.
El finxe ser un ordenador dentro dun ordenador,
pero iso só significa que o aparello pode certamente facer cousas como servidores web.
Pode executar servidores de correo electrónico.
Nós poderiamos facer un servidor de mensaxería instantánea no aparello, se quixésemos,
e, de feito, nós executar outro tipo de servidor, coñecido como un servidor de base de datos, MySQL.
Pero máis sobre iso a próxima semana.
Isto significa que podo realmente visitar páxinas web
dentro do meu aparello usando un navegador dentro do aparello
ou incluso no meu portátil, meu Mac ou o meu ordenador.
Entón, o que significa isto? Acontece que cada vez que está executando un ordenador con Linux,
seu apelido é "host local."
El non ten un nome de dominio, porque non compraron un nome de dominio
para algo así como o aparello, así que o seu nome por defecto é host local.
>> Pero, para obter o aparello para comezar a servir as páxinas,
temos que crealos primeiro.
Entón, imos facelo. Deixe-me entrar nunha xanela de terminal aquí
e entender que eu estou no meu típico John Harvard ventá.
Deixe-me ir adiante e escriba ls, e imos ver algunhas cousas familiares a partir deste semestre,
escritorio, descargas, dropbox e así por diante,
pero agora comezar a transformar a nosa atención sobre unha parella.
En moitos servidores web Linux hai esa carpeta chamada html público,
pero imos saltar esta unha para agora e centrar esta vhosts,.
Alguén sabe o que é un vhost?
Só xerga estúpido por máquina virtual,
eo que iso significa que, en un típico servidor
realmente pode hospedar varios sitios.
Podes mercar un nome de dominio como foo.com, e pode hóspede-lo nun servidor.
Pero tamén pode mercar bar.com e hóspede-lo no mesmo servidor.
A razón de ser, os navegadores son intelixentes o suficiente para informar ao servidor
cando un usuario está pedindo algunha páxina, o que o nome de dominio que o usuario quere a páxina de inicio para.
Entón, o que é legal sobre iso é que non precisa de un servidor físico
ou un aparello CS50 para cada sitio que pode crear.
Podes usar o mesmo servidor e desenvolver un centenar de sitios diferentes.
E, de feito, se vostede é unha persoa que intenta iniciar un sitio web,
para divertirse ou para o negocio, normalmente vai saír en Internet,
e vai pagar alguén 10 dólares por mes, cen dólares por mes
para hospedar o seu sitio para ti.
E a forma que funciona é que eles están cobrando outros
10 dólares por mes ou cen dólares por mes
para hospedar sitios de outras persoas no seu servidor mesmo.
A razón que poden facer iso é a causa deste recurso chamado bhosts,
pero máis sobre iso cando se trata tempo para proxectos finais.
>> De momento, imos mergullar alí. Entón vhosts cd, e se eu escribir ls agora,
entender que hai unha carpeta alí chamada host local.
Isto porque, por defecto, os números de aparellos
está sempre indo para executar un sitio web nun aparello.
Isto non é realmente o mundo real, non é un servidor web no mundo real.
Entón deixe-me ir a lugares de acollida, e agora imos ver alí
un último directorio chamado HTML.
Entón é un pouco profundo, a xerarquía, pero se e cando
decide comezar a desenvolver varios sitios ao longo dos próximos meses ou anos n,
este tipo de estrutura do cartafol tende a ser útil.
Agora imos HTML como eu fixen,
ls tipo, e nada está aí.
Entón agora imos seguir adiante e facelo. Deixe-me abrir Chrome
interior do aparello, e deixe-me ir a http://localhost.
Entón, literalmente, o nome para o meu aparello, entrar, e eu recibín índice de /.
Isto non é realmente mostrando-me calquera cousa de interese,
pero acontece que o que estamos vendo é que carpeta, HTML.
Non hai nada dentro desa carpeta, agora,
En vez diso, o que eu vou ter que facer é crear un arquivo.
Crear un arquivo HTML, como fixemos o luns, pero esta vez poñelas dentro do aparello.
Para aqueles de vostedes que están tentando seguir xunto con portátiles agora,
deixe-me facer unha separadamente que vai ser abordado no pset web-based,
pero para chegar a este traballo para a primeira vez,
vai ter que correr o comando: sudo start httpd servizo.
E isto, unha vez máis, vai ser repetida no pset último,
pero se está tocando na casa agora, o servidor web
é desactivado o aparello, e iso é para que non debilitar a memoria RAM
e memoria para 7 semanas do semestre cando non precisa.
Entón, ten que executar este comando unha vez, e terá unha saída como esta.
Entón ten que ser capaz de xogar xunto aquí.
Agora imos voltar a esta carpeta.
Este cartafol está baleira, entón deixe-me comezar a crear un arquivo,
gedit hello.html.
>> Todo ben. Gedit é aberta, como de costume. Deixe-me facer doctype, html,
html, deixe-me chegar á fronte de min e comezar a pechar as miñas marcas con antelación.
Agora eu teño a cabeza. Deixe-me ir á fronte e pechar a cabeza,
deixe-me agora facer o título da páxina, Ola mundo como a última vez,
título preto, agora déixeme facer un corpo.
Aquí eu vou dicir Hola, mundo con algúns exclams
para deixar claro que é unha secuencia diferente.
Corpo preto, e agora déixeme ir adiante e presentar gardar.
Deixe-me volver para a miña xanela de terminal, e se eu escribir ls,
Eu debería, supostamente, ver hello.html. E fago.
Entón agora imos voltar para o meu navegador, prema en Recargar,
e podes ver que estamos de feito neste cartafol HTML.
Eu non estou a ver unha páxina web aínda, o que é o Apache, servidor web,
só me amosando o contido da lista deste directorio.
Así como o Mac OS ou Windows normalmente fan na súa unidade local duro.
Entón, se eu quero ver esta páxina web, facer clic nese enlace pouco aquí, hello.html,
e, de feito, é o que eu estaba esperando para ver.
Agora, de novo, este non é un URL que calquera de vostedes pode visitar agora,
porque para aloxar, lugar, se ten un portátil aquí,
Está referíndose á súa propia instancia do aparello.
Iso está no meu dispositivo persoal,
pero este é o tipo de idiota que eu teño, de
un usuario como eu premer en hello.html para realmente ver o contido da páxina.
Acontece que os servidores web como Apache deixa vostede ten un arquivo por defecto para calquera servidor web.
Teña en conta aquí temos hello.html.
Cal é o comando Linux para renomear un ficheiro?
>> MV, para o movemento. Entón deixe-me facer isto,
e deixe-me o nome hello.html a index.html.
Deixe-me escribir ls para confirmala la agora foi renomeado.
Agora é que isto vai - se eu volver aos lugares de acollida,
entender agora que eu estou vendo que automaticamente páxina web.
Isto é o mesmo que o meu realmente facendo / index.html,
pero o bo é que agora o servidor web está imaxinando,
oh, se ten un arquivo que, por convencións humanas, é chamado index.html
deixe-me amosar o usuario arquivo por defecto
en vez de un directorio listaxe estúpido que non é de todo amigable.
En realidade, a maioría dos sitios que visita en Internet non ten unha lista de arquivos para premer,
eles só amosar-lle o contido. Entón é así que podemos facer iso, index.html.
Polo tanto, esta é toda a diversión e bo, pero esta é unha páxina web moi sinxelo.
Deixe-me ir adiante e abrir index.html meus vhosts,
hosts locais, directorio de HTML, e imos engadir algo de maior interese.
Polo tanto, non hai Ola mundo, imos en vez dicir 'Isto é CS50, Harvard College. . . '
Así, no inicio do curso da descrición do catálogo de calquera tipo alí.
Agora, se eu actualizar, eu debería ver iso na miña páxina de inicio.
Ok, e eu vexo iso, pero supoñamos que quero agora listar algúns contidos máis neste arquivo.
Eu podería ir ata aquí e dicir que ningún requisitos,
aínda que algúns de vostedes probablemente están como, "ha ha ha, ningún requisito.
Pero - oficialmente. Entón actualizar, e agora temos a peculiaridade mesmo que vimos a última vez.
Pero por que isto? Foi unha simple corrección.
Por que é que esta páxina roto?
[Estudante, inintelixible] >> Si, nós resolvemos isto antes
explicitamente dicindo ao navegador "poñer unha quebra de liña aquí."
E iso porque, de novo, un navegador só vai facer
explicitamente que a linguaxe de marcado di para facer,
por iso mesmo que pode atinxir entrar unha ou dúas veces incluso dez veces,
que vai combinar iso todo nun único espazo, só por convención.
Entón, se realmente quere unha quebra de liña, ten que usar a etiqueta br,
e agora o aviso previo, como o luns, eu coloque o dentro / desa marca,
só porque esta simplemente non se sente ben
para iniciar unha quebra de liña, entón para-lo con nada entre eles.
>> Así, a convención HTML é abrir e pechar unha etiqueta simultaneamente.
Como un aparte, vai ver unha morea de sitios de libros non facendo iso.
É correcto facer ou non facer, pero diriamos
que o proxecto-sabio e estilisticamente, é só mellor
porque, entón, cada marca é tanto abrir e pechar de algunha maneira.
Entón agora imos gardar e recargar. Voltar para o navegador, ok.
Agora estamos facendo algún progreso, pero non é o bastante.
Imos adiante e comezar a escribir nalgún tempo o corpo do texto.
Entón, imos dicir, 'A rápida raposo marrón salta sobre un can preguiceiro. "
E agora déixeme só copiar e pegar este algunhas veces
de xeito que temos un parágrafo de texto.
Deixe-me volver aquí. Polo tanto, non está mirando moi bo.
Eu teño unha quebra de liña, entón está todo ben,
pero agora, xa que estamos chegando ao punto de ter unha páxina web
que ten moito contido e non só liñas individuais para demostrar HTML
podemos empezar a pensar nesas cousas como parágrafos reais.
E podemos empezar a estruturar a nosa páxina web un pouco máis limpa.
E, de feito, o que podo facer é ir ata aquí, dentro da miña tag corpo,
e vostede sabe que, se 'Este é CS50. . . ' demarks realmente o inicio dun parágrafo,
así, imos marcalo como tal.
Deixe-me recuar o texto, só por convención, deixe-me dicir
que este parágrafo remata aquí,
e despois, no canto de facelo quebra de liña, deixe-me dicir
que este pertence alí e como un novo parágrafo
e eu vou só rapidamente guión por só superpoñer todas esas cousas.
>> Polo tanto, agora temos un parágrafo recuado alí,
e agora a nosa cita está empezando a estar un pouco máis
semanticamente consistente co que estamos intentando facer.
Temos un parágrafo, entón imos chamalo de un parágrafo coa tag p.
Temos un parágrafo segundo, entón imos chamalo de un parágrafo coa tag p.
E agora, que o navegador normalmente fan
é como un libro de inglés ou ensaio,
onde adoita ver algunhas quebras de liña entre os parágrafos.
Navegadores vai facelo por vostede automaticamente.
Polo tanto, agora temos dous parágrafos e podemos seguir iso.
Pero, por suposto, na web, cando ten corpos de texto
non é normalmente só manchas enormes de texto.
Existen moitas veces hiperlinks alí.
Entón, se queremos, por exemplo, incluír algúns enlaces alí,
creo que o que pode ser de interese en calquera páxina web que eu estou creando aquí é -
deixe-me ir ao Google.com,
e deixe-me buscar unha lixeira raposo marrón.
Ir imaxes de Google, e que tal - isto é bonito.
Nós imos con iso. Polo tanto, temos aquí un rápido salto marrón Fox sobre un can preguiceiro.
Entón o que eu vou facer aquí, só por unha cuestión de demostración,
é supoñer que esta imaxe foi no meu servidor,
e eu tiña benvida a crear esas imaxes.
O que eu fixen foi co botón dereito ou prema na imaxe,
eo que vai ver na maioría dos navegadores é un pequeno menú -
deixar de facelo - un pequeno menú que permite que escolla a localización copia ligazón ou URL copia.
Entón deixe-me volver agora para o meu HTML, e supoña que quero
Ligazón a esta a outra páxina web.
>> Cal foi a marca chamada para iso?
[Estudante, inintelixible] >> Yeah. Entón a href a referencia amiga.
Deixe-me ir adiante e pegar que dentro
É unha URL moi longa, entón deixe-me zoom out.
Soportes próximos, entón agora eu estou en conta camiño ata aquí
porque esa URL pasou a ser bastante longa.
Deixe-me desprazar ata aquí a final de lixeira raposo marrón,
e deixe-me terminar este comando con </ a,
onde só pechou o nome da marca.
Agora déixeme ir adiante e gardar o ficheiro, volva a páxina web,
e agora, por defecto, que vai ser subliñada en azul para min,
pero, en realidade, agora podo facer clic neste e listo. Hai esa imaxe.
E non ten que ser unha imaxe, podería ter conectado
para algún outro sitio aleatoria en internet.
Eu podería facelo, por exemplo, co CS50, para un último exemplo aquí.
'Este é CS50 "pode ​​facer sentido para ir un, href =
http://www.cs50.net, multimedia preto, referencia preto.
Polo tanto, agora que é unha URL aínda menor, e esta vez non imos chamar a imaxe.
Estamos en vez de ir de obrigar á outra páxina.
Agora, temos unha imaxe aquí.
Eu sinto que podemos facer un pouco mellor do que só unha ligazón a unha imaxe.
E se queremos realmente incorpora-lo na nosa páxina web?
>> Ben, o que podo facer aquí é, en vez de enlace para gráfico,
deixe-me en vez cortar a URL, e nós imos nos librar dese enlace e limpar isto.
E nós imos descender aquí e se librar desa.
Nós realmente non precisa de todas estas frases agora, entón deixe-me acurtar a páxina un pouco.
E entón, aquí déixame ir á fronte nun novo parágrafo
dicir que eu non quero texto agora, quero unha imaxe cuxa orixe vai ser esa URL.
Unha imaxe, como unha quebra de liña, pode existir ou non é.
Entón deixe-me inmediatamente pechar esa marca.
Deixe-me ir adiante agora e pechar o parágrafo que eu estou dentro,
e se todo funcionar ben con Ola, mundo, se eu actualizar agora,
Eu, de feito, ver ben dentro da miña propia páxina web unha imaxe.
Polo tanto, agora temos unha etiqueta de imaxe, unha marca de referencia e similares,
e para unha boa medida, deixe-me facer outra cousa que é moitas veces negligenciado
en sitios estes días: Imos fornecer un texto descritivo para esta imaxe
para persoas que están nun dispositivo móbil
e, polo tanto, pode non ser capaz de baixar esta imaxe moi rapidamente,
para as persoas que son cegas e pode non ser capaz de ver a imaxe
pero poden ter un lector de pantalla que pode dicir-lles que esta imaxe é de.
E para facelo, hai outro atributo para etiquetas de imaxe
chamado alt para texto alternativo.
E o que podo facer aquí é dicir: 'Esta é unha rápida raposo marrón.
De xeito que, aínda que o ser humano non pode ver a imaxe na pantalla,
el ou ela pode, polo menos, escoitar, como con algún anaco de software,
o que realmente está alí na pantalla.
>> Iso non vai cambiar a estética da páxina,
pero certamente é unha boa práctica para os usuarios.
Todo ben, imos saír desta páxina web na súa forma actual,
pero imos ver se non podemos agora presentar
algunhas enfoques mellores para escribir estas páxinas web,
algunhas leccións que van servir-nos así como as nosas páxinas máis e máis complexo.
O que nós non imos facer máis nas próximas semanas
e leva-lo a través de todas as etiquetas HTML de varias decenas que hai.
Así como no cero de volta a semana 0, el probablemente será suficiente
para dar unha visión xeral de alto nivel de algúns dos conceptos,
un rápido paseo de algúns dos bloques que probablemente eran capaces,
moi confort, para navegar no seu propio país, as varias pezas do puzzle.
E iso vai ocorrer de novo en HTML, o máis probable,
en que hai amplos recursos na web que nós imos apuntala-lo menos,
varios libros, se o prefire ler un libro,
que ha oriente-lo a través de todas as moitas cousas que podes facer con HTML,
pero realmente, vimos ata agora en HTML a maioría dos conceptos fundamentais.
Temos a noción de etiquetas sendo abertos, etiquetas de ser pechada.
Algunhas marcas que son ambos abertos e pechados
no sentido de que están baleiros e que debería haber nada dentro deles
como unha etiqueta de imaxe ou unha quebra de liña, que están aí só.
Buscamos tamén xa coa noción dun atributo, como alt ou fonte.
Teña en conta que estas palabras tenden, por convención, para ser curto e sucinto.
>> Non temos autoridade sobre o que estas cousas son chamados,
alguén que inventou o HTML veu con eses nomes.
Entón, só tes que empezar a coñecer ou buscar, sempre que precisa deles,
que os nomes son para estas etiquetas e atributos.
No caso de que estes atributos, atribúe xeralmente
modificar o comportamento dalgúns tag.
Neste caso, o atributo de fonte di a marca de imaxe
o que a fonte da imaxe debe ser.
O atributo href di a marca de referencia o que realmente debe ser vinculándoo.
Pero en termos da estrutura dunha páxina web, a pesar Facebook
e Google e do ollar como como unha desorde completa
debaixo do capó, a primeira vista, se comezar a le-lo
máis metodicamente, todos seguen esta estrutura básica, básica.
Pero podemos mellorar a estilización destas cousas.
Entón deixe-me ir a algúns exemplos que eu preparadas con antelación.
Deixe-me ir adiante e copia-los doutra pasta aquí
e poñer-los neste directorio.
De antemán, o que fixen foi preparar algúns arquivos:
search0, SEARCH1, Search2 e search3 e 4.
Deixe-me ir adiante e abrir o primeiro destes arquivos,
e imos ver se non podemos comezar a crear o noso propio motor de procura.
No cume deste arquivo, como é xeralmente o caso en clase, só unha morea de comentarios.
HTML, porén, os medios polos que iniciar un comentario
é <-! e entón está dentro dun comentario, un comentario multi-liña.
Cando estea listo para deixar ese comentario, podes facer ->.
Entón, todo enriba en azul é só un comentario.
>> Esta é a miña declaración doctype, que de novo,
pode só copiar e pegar na fe, por agora.
Isto só di ao navegador 'Aquí vén algún HTML 5. "
Abaixo diso, na liña 14, é a primeira das miñas marcas reais,
e iso só se, como antes, aquí vén un pouco de HTML,
aquí vén a cabeza da miña páxina, aquí vén o título,
e, inversamente, que é todo para o título, que é iso para a cabeza.
Aquí, agora, vén o corpo da miña páxina.
Entón algunhas etiquetas novas agora: h1 queda para a categoría 1.
Hai unha tradición en HTML moitos anos
de diferentes tamaños de texto.
E de volta ao día, cada un fixo, xeralmente, só grande e valente.
Pero hai tamén h2, que é grande, pero non tan grande e valente.
Hai h3, que é unha especie de gran, pero non tan grande e en negriña,
e así por diante, todo o camiño ata H6.
Estes días, porén, H1, H2 e H3 son realmente significaba
de significado máis semántica a eles,
en que h1 é realmente un título: o título dunha páxina web,
o título dunha columna ou algo así do texto.
Entón eu dixen deliberadamente h1 CS50 busca> h1
para especificar que esta é realmente o título, o título da miña páxina.
Non o título, no sentido barra de título,
pero o título que realmente ver na páxina web en si, no corpo.
Agora isto, probablemente pode adiviñar o que é,
aínda que teñamos algunhas pezas novas de sintaxe.
Este é un formulario. Así, a web realmente queda interesante
cando sitios tomar entrada de usuarios.
Nesta clase, no conxunto de problemas en programación web,
non imos facer un sitio, por si só,
con contido estático que amosa fotos que sacou,
ou este é o meu currículo, e cousas sobre min,
porque estas cousas son relativamente fáciles de montar.
É difícil facer cousas bonitas na web,
pero polo menos a colocación de contido é moi trivial.
Pero as cousas están realmente interesantes cando alguén pode visitar o seu sitio web
e proporcionar datos e pode encher formularios,
pode marcar caixas e pode interactuar co seu sitio web.
E, de feito, probablemente cada sitio que lle gusta
estes días, en calquera detalle, é dalgunha forma interactiva.
Facebook, Google e afíns, que levan a entrada do usuario
e producir unha saída personalizada.
>> Entón, imos comezar a facelo agora. Imos agora transición
a partir de só usar HTML reserva de contido estático
como, en vez de un mecanismo de entrega de contido dinámico.
E para iso, imos implementar o noso propio motor de procura.
Imos facer o seguinte. Aquí está a marca de formulario.
O atributo action especifica que cando o usuario enche o formulario
co seu teclado, será sometido a este URL aquí.
Entón, eu son o tipo de trapaça. Vai levar un pouco máis de tempo
dunha clase para aplicar o mecanismo de busca todo,
entón imos facer o front-end, por así dicir.
Nós imos facer a parte que permite a investigación do usuario, e nós imos resolver de punto a Google
a parte máis difícil de atopar resultados da procura,
pero, especialmente, eu vou falar para o servidor web de Google
utilizando un dos dous métodos moi populares.
Un ser obter, doutro, que vai finalmente ver, sendo post,
aínda que haxa outros que son menos utilizados.
Polo tanto, obter só evoca a idea de, quero obter algún contido, obter algúns resultados de busca.
Isto quizais pode adiviñar o que iso fai.
Isto é algún tipo de entrada, é, en realidade, vai parecer un campo de texto,
é o nome da entrada, o nome da variable que, por así dicir,
vai ser q para consulta por convención.
E, de novo, o tipo de esta entrada non vai ser unha caixa de verificación;
non vai ser un menú, que vai ser un campo de texto
como indicado por este atributo aquí, e esta caixa de texto,
como unha quebra de liña, pode existir ou non.
Polo tanto, temos un elemento en branco coa Barra dentro esa marca.
Entón eu vou poñer unha quebra de liña, e pode, talvez, creo que iso vai facer.
Este é un outro tipo de entrada de formulario.
>> Este vai ser usado para enviar o formulario.
Polo tanto, este vai ser o gran botón que o usuario pode premer para enviar o formulario,
ea etiqueta no botón que vai ser 'CS50 Procura.
Forma estreita, o corpo de preto, preto HTML.
Imos ver o que temos na forma desta páxina web.
Entón deixe-me ir para o meu navegador,
deixe-me ir, aínda, aos lugares de acollida.
Este aínda é index.html, entón se eu queira ver este ficheiro chamado search0,
Podo simplemente facer / search0.html, escriba -
eo primeiro dos meus erros.
O que está a suceder? Eu claramente non ten permiso
para acceder a este arquivo, por algún motivo.
Pero iso é porque, ao contrario do traballo que fixemos ata agora, en C,
onde os programas que escribe son consideradas runable por ti,
executábel por ti, iso non é realmente o caso da web,
en que ás veces pode querer crear arquivos nun servidor,
pero non quere que o mundo enteiro para poder velos.
En vez diso, vostede quere que o mundo vexa algúns arquivos
pero non noutros, só para fins de privacidade,.
Polo tanto, é máis de unha base opt-in cando está facendo as cousas na web.
E entón deixe-me realmente escribir ls aquí,
e podes ver os arquivos que eu teño, pero lembro que se eu fai ls-l por moito tempo,
Vou incorporarse un longo anuncio que me dá algúns detalles sobre estes arquivos
que agora son, en realidade, por primeira vez relevante para nós.
Teña en conta que, na extrema dereita son os nomes dos meus arquivos,
e, a continuación, o tempo en que foron última modificación ou copiado.
Ese número aquí é o que? Vostede recorda?
O tamaño en bytes, o tamaño do arquivo é.
>> Entón, me parece ter algún tipo de logotipo aquí que é maior que todos os outros arquivos.
Este é quen eu son, iso é o que eu son eo que eu estou dentro do grupo
Pero, entón, por aquí á esquerda é un pouco de secuencia enigmática,
e nós falamos, eu creo, un pouco sobre iso no pasado,
pero iso ten que ver coa permisos.
E aínda que sexa un pouco nebulosa,
RW probablemente significa ler e escribir.
Así, verifícase que estes trazos denotan conxuntos de permisos diferentes para persoas diferentes.
E o estándar é, esencialmente, como segue.
Cando ve unha secuencia de trazos aquí, miran como segue.
Hai un trazo, entón hai tres trazos,
despois hai outros tres, entón non hai tres.
A primeira é calquera trazo ou de publicidade para directorio.
De modo que un é moi fácil. Se é unha carpeta, el di d, se non é un trazo.
Hai un par de outros casos, pero por agora imos só se preocupan ficheiros e directorios.
Estes próximos tres trazos - e eu xa introducidos artificialmente os espazos.
Eles eran, obviamente, non existe cando os vimos hai pouco.
Estas son os permisos do dono do arquivo,
e lembrar dun segundo atrás que foi ler e escribir.
Isto era porque eu, como a persoa que creou este ficheiro dun momento atrás,
Eu, só, por defecto, nun computador Linux,
ten a capacidade de continuar a ler e escribir o arquivo.
>> Así, o sistema operativo só me dá RW automaticamente.
Os do medio se relacionan co meu grupo, que de estudantes,
que é unha especie de sentido no aparello, porque eu son a única persoa a usar o aparello.
Entón deixe-me acenar as mans en que, por agora.
Pero os últimos son os máis importantes para a web.
Este é todo o resto do mundo, e do feito de
de que é --- significa que ninguén máis no mundo
ten todos os permisos para este ficheiro.
Claramente é un problema, entón eu teño corrixir iso
por algunha forma darlle ao mundo o que? Ler e escribir?
Isto probablemente é mudo, non? Eu non quero que ninguén web
para ir visitar a miña páxina e dalgunha forma cambiar este ficheiro,
aínda que realmente non podía con un arquivo HTML
pero só no principio, probablemente só quere que eles sexan capaces de lelo.
O que significa para le-lo? Iso non significa que eles van se preocupar co código HTML real,
pero o seu navegador ten que ser capaz de analizar de que a linguaxe de marcado,
de arriba abaixo, de esquerda a dereita.
Entón, alguén na web ten que ser capaz de le-lo, entón eu minimamente precisa dar r.
Eu podo facer iso de algunhas formas diferentes, pero quizais
o máis sinxelo é executar este comando aquí.
Chmod, modo de alteración, a continuación, un r + todo para que todos, no mundo + ler,
e logo o nome do ficheiro, search0.html.
>> Ora, se fago ls-l novo, observe que o ficheiro cambiou,
e, de feito, eu me transformei en r para todos.
Eu tamén chamei o meu grupo, pero iso é bo,
porque se eu orientada a todos, meu grupo é un subconxunto do que iso.
Entón, todo ben tamén. Isto só significa que o ordenador fixo agora lexible.
Agora déixeme volver para o meu navegador, prema en actualizar.
Ah-ha. Temos, agora, CS50 Procura.
Eu ampliada un pouco artificial - motor de busca moi horrible.
Pero imos ver se realmente funciona.
En primeiro lugar, deixe-me facer unha proba de sanidade rápido, deixe-me controlar premer para ver fonte da páxina.
Teña en conta que dentro Chrome agora estamos vendo o mesmo HTML que eu mesmo creou.
Non se confunda aquí, con todo. Eu non podo comezar a cambiar o código aquí,
porque o seu navegador ten unha vista de só lectura deste código.
O navegador acaba de pedir host lugar para un arquivo chamado search0.html.
É agora pura coincidencia que o aparello
pasa a ser o mesmo ordenador como meu navegador.
Eu podería só ter, de forma equivalente, ter ingresaran www.facebook.com/search0.html,
e Facebook tivo un ficheiro chamado iso, eu sería, entón, ver o HTML.
E, claro, eu non podo mudar o arquivo redor do Facebook, tamén.
Polo tanto, agora estamos especie de borrar as liñas.
O aparello é tanto un servidor, servir as páxinas,
pero tamén é un cliente, no sentido de que eu estou usando un navegador
para realmente falar a ese servidor.
Entón, imos ver se o meu motor de procura Google funciona.
Deixe-me ir adiante e buscar lixeira raposo marrón, entrar.
E listo, agora teño o meu propio motor de procura.
>> Pero como isto funciona?
Bocado de un estiramento, pero - e agora non pode ver, precisamente, a parte que é de interese.
Teña en conta o que acontece.
Observe a URL. Acontece que o método que,
chamada comeza, é super-sinxelo.
Cando se especifica, de forma que quere "estar" resultados dalgún servidor,
o que vai facer é aproveitar o que escribiu no formulario
e poñelas na URL.
Vai para padronizar como é colocado na URL da seguinte forma.
Nótese que esta é a URL que foi o valor do meu atributo action.
É onde eu quería que a forma de acabar.
Pero, entón, entender este punto de interrogação.
Esta é unha convención na web a través do cal a facilitar a entrada do usuario
para un sitio web, engadir a URL dun punto de interrogación,
e entón tes unha morea de parellas clave-valor.
O nome dunha chave, doutro xeito coñecido como un parámetro na web,
entón tes un signo igual, entón tes o valor do parámetro.
Entón, é, esencialmente, un nome de variable e un valor variable,
pero os nomes de variables e valores viñeron do formulario HTML.
Por que as vantaxes alí, que pensas?
Por qué non escribir + entre as miñas palabras.
[Estudante, inintelixible]
>> Si, é só para paso. As probabilidades son, sempre que xa viu un URL,
nunca hai ningunha espazos, mesmo porque
se houbese, realmente non podería copiar e pegar
nunha mensaxe instantánea ou un e-mail en porque ía romper.
Quere que a cousa toda é unha secuencia contigua de caracteres.
>> Así, o navegador é intelixente o suficiente para entender, uh-uh.
Non basta colocar un espazo alí. Déixame codificam o espazo, dalgún modo normal.
Unha das convencións para facer isto é para que o navegador
automaticamente colocada a + onde se non ten un espazo.
Entón, agora, aviso Google foi o tipo de user-friendly.
Eu certamente non crear esta páxina web,
pero eles teñen cuberto previamente o seu campo propio texto
co que, exactamente, eu escriba dentro
Supoña que queira buscar outra cousa, como un can preguiceiro.
Eu podo só escribir isto aquí, re-search.
Teña en conta que a URL cambia-aquí,
pero observar, entón, que eu poida realmente buscar o que quere
só por entender como URLs funcionan.
Eu podería facer gato preguiceiro, entrar,
e observe agora estou tendo moi preguiceiro - hai? Eu sinto como se debería.
Recibe un gato moi preguiceiro.
Todo ben. Esta é unha das cousas máis estúpidas que xa fixemos.
Pero iso é un gato preguiceiro.
En calquera caso, o que é o takeaway clave aquí?
Agora estamos a sorte de xogar no mundo do HTTP.
HTML é só esa linguaxe de marcado, tag aberta, marca de preto,
que di un navegador como procesar o contido dunha páxina web.
Pero cando comeza a transmisión de datos a través de Internet
entre navegador e servidor, que é onde este protocolo
coñecido como formato Transfer Protocol asume.
Este é o tipo de convención humana, cando Sam e eu balancei as mans o luns,
iniciar unha conexión e, a continuación, pechar unha conexión idea, mesmo aquí.
Como son os resultados de Google vai volver para min?
Como a miña submisión do formulario indo a Google?
Ben, lembro do outro día que o que está realmente a suceder
debaixo do capó cando solicita unha páxina web é,
o seu navegador está enviando unha mensaxe un tanto enigmática, como
Get / HTTP/1.1 á páxina de inicio por defecto.
>> Ou, neste caso, porque I especificamente solicitado anteriormente
search0.html, este sería, entón, a mensaxe un tanto enigmática-
que o meu navegador envía ao dispositivo.
Ou, neste caso de Google, o que está realmente enviado
é unha proposta para / de investigación, e entón? q cat = preguiceiro, cun plus alí.
Polo tanto, esta mensaxe, que eu, o ser humano, nunca estou escribindo,
pero está sendo enviado polo meu navegador, é dicir como HTTP acontece.
Este é o equivalente das nosas mans tendo abalados.
Este é o pedido, o servidor está a piques de enviar unha resposta.
Entón, imos dar un ollo neste debaixo do capó.
Como antes, podemos abrir este campo especial nun navegador.
Ver páxina, inspeccionar elementos.
Así, baixo inspeccionar elemento, entender que o que pasou no Chrome,
e IE e Firefox mecanismos similares,
Temos estas ferramentas accesibles a desenvolvedores para nós.
Persoas normais non usar esas guías.
Pero, agora, están interesados ​​no que está a suceder
debaixo do capó no nivel de rede.
Entón, se eu puxar arriba o nivel de rede aquí,
deixe-me ir adiante e ampliar esta fiestra,
abrir esta entrada aquí, e mirar para as cabeceiras.
Entón, o que pasa cando pedir un ficheiro dun servidor web
é o meu navegador envía unha morea de cousas.
E deixe-me ver fonte. Así, baixo cabeceiras de solicitude,
E este é só Chrome me amosando algunha saída de diagnóstico,
como unha especie de depurador de algunha sorte,
entender que o que eu destaque aquí é precisamente o que
Chrome é o envío ao servidor, a fin de solicitar un ficheiro chamado search0.html.
É dicir co servidor que el pensa que o seu nome é,
Grazas a este campo de colon anfitrión, entón hai algúns
cousas moi esotérico aquí, como algo que ver coas datas e horarios,
algo que ver coas linguas que o navegador recoñece,
pero as liñas realmente importantes son estes dous primeiros aquí.
>> O que o servidor responda con? Ben, se rolar aquí
para ver o código fonte desta cousa, observe que o servidor
respondeu cunha mensaxe un tanto enigmática, así como, non 304 modificado.
Isto é un pouco raro, deixe-me realmente tentar corrixir isto.
Deixe-me Manteña Maiúsculas e prema actualizar-se aquí
para forzar o teu navegador para realmente facer esta solicitude por primeira vez.
Entón deixe-me aumentar o zoom, e imos ver agora que a resposta do servidor,
porque eu Manteña banda, é de 200 Aceptar.
Entón probablemente nunca viu o número 200
en números o contexto da web, pero o que
xa visto ás veces inesperada dun servidor?
Arquivo de 404, non se atopou; 403, prohibido; 500, erro do servidor.
Entón, existen eses códigos numéricos que o mundo usa na web
para referirse a erros, así como funcións C
pode devolver erros e principal pode devolver códigos de saída.
200, pero que raramente se ve, porque iso significa que está todo ben.
E 304 que probablemente nunca verás porque o que é o que significa?
Que nada ten - imos ver se podemos simular este novo -
Ah, agora non é cooperar. 304 dixo orixinal,
Entón, por que o servidor mesmo responder?
Ben, a eficiencia, un servidor web automaticamente para ti,
Se o ficheiro non cambiou, non vai retransmitir o ficheiro HTML.
Só vai dicir ao navegador que non cambiou.
Basta usar a copia que xa ten.
Entón hai esa noción de caché web
para o desempeño, de xeito que non perda tempo e ancho de banda residuos
descarga de arquivos de novo e de novo innecesariamente.
>> Pero esta páxina web, agora, era super-sinxelo,
e el só me mostrou o HTML que volveu.
Imos realmente usar a guía de rede agora a facer unha procura en Google como lixeira raposo marrón.
Deixe-me a continuación, prema CS50 investigación,
e agora, aviso no fondo aquí unha morea de cousas volveron
porque cando visitar un sitio real, como Google.com,
eles teñen fotos, elas teñen de texto, eles teñen unha linguaxe chamada JavaScript alí.
Así, cada liña nesta táboa aquí
representa algo que Google cuspir en resposta ao meu solicitude única.
O que me importa, pero é este primeiro.
E se eu for a busca, a solicitude, prema en ver fonte aquí,
entender que, de feito, a mensaxe críptica que o meu navegador enviou
Google foi esas dúas liñas aquí,
seguido unha información arcano aquí que imos ignorar.
Pero teña en conta, tamén, que o Chrome é moi accesible con,
Tamén me amosando a cadea de consulta que foi enviado dentro
Entón en vez de me amosar iso, que foi literalmente enviado,
se eu velo decodificar, Chrome, só para fins de depuración,
para os desenvolvedores coma nós, é só me amosar unha versión humana-friendly de -
non é así que se escribe raposo, aparentemente.
Eu só estou entendendo que agora - pero está amosando o que, ao parecer, ingresaran.
Mentres tanto, a resposta que volveu do servidor é novo 200 Aceptar.
Pero en que a resposta inclúe, por suposto,
realmente ver HTML da páxina -
Sentímolo, este é un atallo de teclado aos que deu mal hoxe.
>> Vou tratar con isto máis tarde. Entón, se nós realmente ver código fonte da páxina,
o que podo facer aquí, premendo resposta
este é o que foi realmente cuspir cara atrás, para alén de que a mensaxe 200 OK críptica do servidor.
Un pouco enigmático, pero onde está todo isto vén?
Ben, imos facer outra cousa aquí. Outro comando-pouco enigmático,
pero este tipo de un puro na medida en que nos revela exactamente o que está a suceder debaixo do capó.
Entón, estou de volta ao meu Mac aquí, eu ter conectado
través dun programa chamado SSH, Secure Shell, a outro servidor
porque a maioría dos ordenadores de Harvard bloquear o comando que está a piques de executar
porque non hai ese comando nalgúns servidores de chamada Traceroute
que permite trazar a ruta entre os puntos A e B,
e, ata agora, temos tomado completamente para concedida
que eu poida escribir no Google.com e dalgunha forma obter datos de volta
do outro lado do país ou do outro lado do mundo.
Con Traceroute podemos realmente mergullo un pouco máis fondo
sobre a forma como a Internet funciona, e ver o que está a suceder debaixo do capó.
Entón, imos adiante e arbitrariamente trazar unha ruta para, digamos, Stanford.edu,
que é en todo o país, e escriba Intro.
Este comando pode ser super-rápida ou super-lenta,
pero o que estamos a ver agora, liña por liña,
cada un dos pasos ou saltos entre nós e Palo Alto, ou Stanford,
onde teñen o seu servidor web.
Entón, o que cada unha destas liñas representan máis concretamente, aínda que?
Un anaco de xerga de Internet? [Estudante, inintelixible]
>> O que é isto? [Estudante, inintelixible]
>> Oh, por iso hai tempos, pero o que cada liña - o que quero dicir con hop?
>> Ben, existen estas cousas en Internet chamados routers.
E routers, como o nome suxire, a información de ruta a partir do punto A ó punto b.
Pero existen varios puntos ademais ae b.
Hai C e D e E e F entre a liña 1,
que pasa de ser o enderezo IP do meu ordenador,
ou o meu enderezo numérico que identifica o seu ordenador,
e paso 15, que en realidade é o servidor web sexta,
Ao parecer, que eu estou inferindo a partir deste, ou a versión 6 do seu servidor web en Stanford.
Pero o que é tipo de puro é, podemos ver o camiño
que o meu 0 e 1 están a tomar o meu ordenador para Stanford.
Entón, paso 1 é o enderezo do meu propio ordenador.
Cada ordenador en internet ten un identificador único que se parece con isto.
Number.number.number.number.
En algún lugar neste campus, probablemente no centro de ciencia,
é un router chamado Core Pasarela 2-te83, o que significa que,
polo que este é un dos grandes de Harvard routers fantasía de que as rutas moito do seu tráfico.
Aquí está outra de routers de Harvard, este é un Border Gateway,
significado fronteira pode ser na periferia do campus en algún lugar.
Entón hai unha NOx, liña 4, que é Crossroads do Norte,
que é un ISP gran provedor de servizos de Internet,
que lugares como Harvard conectar ata.
Pero despois as cousas están un pouco interesante na liña 6.
Onde están os meus anacos de súpeto? Kansas.
O mundo ten o hábito de usar códigos de aeroportos en moitas desas cousas,
ou polo menos abreviações para estados ou cidades,
entón parece que, en só 60 ms,
un paquete de información, 0 e 1 é do meu portátil
ten todo o camiño para o Kansas, e de novo, en 60 ms.
>> Ademais, despois de Kansas, que levou un paseo a través de Houston, probablemente,
como suxerido polo nome deste servidor.
Así como un servidor en Internet debe ter un enderezo numérico,
Tamén pode incluso ter un enderezo un pouco máis humanamente agradable que os seres humanos veu con.
Agora, na etapa 8, non sabemos o que é iso.
Ás veces, os routers só tipo de ignore-lo,
e eles simplemente non responder ás preguntas, de xeito que é bo.
Despois do paso 8 é aparentemente onde? L.A.
Teña en conta en só 78 ms, o que nos leva de seres humanos como 6 + horas para facer fisicamente,
leva paquetes de información en Internet 78 ms para viaxar tan lonxe.
Paso 10 é en Los Angeles, así como, e paso 11 parece ir cara ao norte, ata preto de Stanford.
Este é o seu router, límite ou fronteira router.
A dous pasos da Universidade de Stanford que están nos ignorando,
e, finalmente, chegamos ao servidor web en só 87 ms.
Agora, todos estes números, como un aparte,
só dicir-lle o tempo que leva para os datos para obter a min
cada un destes routers, e non é acumulativo.
O que este programa fai é, primeiro el envía unha mensaxe, esencialmente, para o primeiro router.
A continuación, un para o segundo router, a continuación, un terceiro para o roteador,
medición de cada vez. Polo tanto, en teoría, estes tempos será crecente
ou polo menos moi próximos un do outro,
e, de feito, os que están aquí no campus son super-pequeno.
Así que comezar a ir por todo o país, leva os datos
un pouco máis de tempo para viaxar, máis próximo a 100 ms, máis ou menos.
Pero imos ir na outra dirección agora. Como preto de Cambridge, no Reino Unido?
Deixe-me en vez de executar o Traceroute www.cam de Cambridge,
. AC para académica. Reino Unido, e escriba Intro aquí.
Iso foi moi moi rápido.
Os meus datos literalmente foi para Cambridge, Inglaterra, en que fracción de segundo de tempo.
>> Entón imos ver o camiño que tomou.
Harvard, Harvard, Harvard, Crossroads do Norte,
que é un ISP, e entón este é Crossroads do Norte, e entón Bam.
O que está en entre as etapas 6 e 7, 6 e 7 do router?
O Océano Atlántico. E estamos inferring iso a partir do feito de que
imos a partir de 20 ms 80 ms aquí para aquí.
Entón, algo levou 60 ms, máis ou menos, para obter máis.
E que foi probablemente un gran corpo de auga.
O que pasa despois? Ben, aquí estamos, en Londres,
só 88 ms máis tarde. Máis London, London máis,
non sei onde está, pero imos supor que é fóra de Londres,
Cambridge aquí, e finalmente nós - literalmente, da Universidade de Cambridge
. Something.net, e entón, finalmente, na liña 16,
servidor web é aparentemente chamado Scorpius
debaixo do capó, a pesar de sabermos como www.
Tipo de alucinante, eu creo. A primeira vez que fixen iso, estraguei a miña mente.
Desafortunadamente, Harvard bloquea este tipo de tráfico, tipicamente, na rede.
Entón non pode facelo super sinxelo.
Entenda, porén, iso aquí é posible.
Todo ben. Imos dar o noso intervalo de 5 minutos aquí. Nós imos voltar e mergullo no máis profundo.
Entón, estamos de volta, e tipo de ambled sobre nalgúns sentidos distintos aquí.
Entón imos resumir exactamente o que está a suceder aquí.
Comezamos a conversa falando sobre esta linguaxe chamada HTML.
De novo, non é unha linguaxe de programación. É só unha linguaxe de marcado
que é en gran parte sobre a estética e estruturación de contidos, en forma de páxina web.
Pero HTML, polo tanto, precisa de calquera tipo de mecanismo de
para viaxar entre navegador e servidor.
HTML especie, polo tanto, de paseos, encima do outro idioma,
ou, máis propiamente, un protocolo, coñecido como HTTP.
>> E HTTP, como vimos ata agora,
é unha especie de análoga a esta convención humana de apertar as mans.
Cando un navegador desexa solicitar unha páxina a partir dun servidor,
el envía que "pegar" petición do navegador para o servidor,
e, a continuación, o servidor responde cun número como 200, todo está ben,
así como o HTML ou algún número malo como 404, arquivo non atopado.
Pero á súa vez, HTTP en si non é a Internet, per se.
HTTP é só un servizo, unha característica de Internet
así como G chat é outro servizo, así como correo electrónico é outro servizo.
Hai todo tipo de cousas que podemos facer por Internet.
HTTP é só unha desas aplicacións.
Entón, por riba de - HTTP está encima doutra cousa
que non mencionou por nome, xa debe ter oído polo nome, o TCP / IP.
Así, a historia que acabamos dixo hai todo sobre
como os datos trafegam dun punto ao punto b.
E, neste caso, vimos nun nivel moi baixo
router para router para router para router,
como os datos son realmente a ser transmitida.
Pero ao longo do camiño, que vai atopar varios impedimentos.
Ademais destes terminais, existen cousas chamadas firewalls en Internet,
e para que os datos, como a que estabamos transmitindo
de min para Stanford, de min para Cambridge,
é enviado a, a este nivel, algo chamado de enderezo IP.
Vimos iso hai un momento e un enderezo IP
é só un enderezo numérico do w.x.y.z forma,
onde cada un deles é entre, máis ou menos, 0 e 255,
Se vostede non pode usar todos estes números.
Pero cada un destes titulares lugar é un número entre 0 e 255.
Así, un enderezo IP estes días é de 32 bits.
>> Agora, que nos dá os enderezos IP cantas posible no mundo?
Preto de 4 millóns, porque en calquera momento estamos contando en potencias de 2
todo o camiño ata 32 de algo, que, xeralmente, nos dá 4 millóns.
Entón, iso é unha chea de enderezos IP, pero pode ler,
ou pode agora notar na prensa popular,
un impulso cara a unha nova versión do IP chamado IPv6.
Agora estamos usando a versión 4.
Hai realmente non foi unha versión 5, estamos saltando dereito a 6.
Versión 6 vai utilizar 128 bits para enderezos IP, que é freaking enorme.
Non debemos correr para fóra por moito tempo agora,
pero comezaron a executar para fóra da versión 4 enderezos IP,
porque todos temos as cousas non só como portátiles e escritorios,
moitos de nós teñen teléfonos, moitos de nós teñen outros dispositivos
como o TiVo e similares que teñen enderezos IP si.
Harvard en si ten decenas de miles de ordenadores.
Así, o mundo está realmente quedando sen enderezos IP, polo menos deste xeito.
Así, ao longo dos próximos anos, vai ver os enderezos
nos seus propios ordenadores, probablemente, cambiar lentamente
como máis e máis empresas e universidades comezan a apoiar a versión máis recente.
Pero un enderezo IP non é suficiente para un ordenador para solicitar datos de ordenador b.
Porque o ordenador B pode ser un servidor,
e un servidor, como mencionei anteriormente, pode facer acios de cousas.
El pode albergar páxinas web, pode ser un servidor de correo electrónico,
pode ser un servidor Skype, pode ser un servidor de chat G.
>> Todos estes diferentes servizos que poden ser proporcionados nun servidor
todo pode, fisicamente, estar na mesma máquina.
Así, ademais de enderezos IP,
o mundo ten cousas chamadas portas en Internet.
Unha porta é só un número, por iso non é un número único para HTTP.
O seu número é de 80.
HTTP tamén usa o número 443, pero, máis especificamente, para HTTPS cifradas.
Sempre que ve o s, de seguro, que está a usar un número diferente.
Existen outros números, como o 25, usado para algo chamado de SMTP, tamén coñecido como e-mail.
Hai algo chamado 22 para SSH,
e hai unha morea de outras portas alí fora.
Agora, nós, seres humanos raramente ve estes números.
Sen embargo, cando escribe unha dirección como http://www.facebook.com,
o explorador é secretamente inserindo 80, porque está a usar HTTP.
Se, en vez diso, HTTPS tipo, é secretamente inserindo 443.
E podemos ver este tipo de man se eu tirar unha Brower
e vaia http://www.facebook.com:80.
Polo tanto, explicitamente, non citando só o nome do sitio
pero a porta que quero falar, e escriba Intro.
Teña en conta que desapareza, porque o seu navegador asume,
oh, 80, eu non vou nin molestar mostrando que a vostede.
Pero a razón para isto é que se realmente quería enviar un correo-e de alguén,
Eu realmente estar enviando a eles na porta 25, que sendo SMTP.
Un pouco de unha simplificación excesiva, pero algúns de vós teñen amigos
que efectivamente traballan en Facebook, e, do mesmo xeito, ten servidores que reciben e-mail.
>> Cada vez que enviar un correo electrónico, o que Gmail está facendo por ti
ou o Outlook ou calquera outro programa que utiliza,
é unha especie de segredo de introducir este número, así como, 25, nese caso.
É esta combinación de enderezo IP eo número que identifica
un ordenador en Internet e un servizo específico no ordenador.
Agora, por suposto, a maioría de nós probablemente nunca ingresaran manualmente un enderezo IP.
Quizais ten no aparello, pero no mundo real, non tanto.
Por que non escriba os enderezos IP en navegadores?
El ía traballar, de feito, podemos ver iso, deixe-me amosar-lle
outro mando que debe funcionar máis en calquera lugar no campus de Harvard, en un Mac ou PC.
Hai este comando chamado nslookup, investigación servidor de nome.
Se eu ollar para arriba www.cnn.com, verifícase que a CNN ten - oh, interesante.
CNN comezou a usar Amazon Web Services.
Podes saber de computación en nube, unha Amazonia dos grandes xogadores en computación en nube.
O que eu fixen foi, eu dixen: 'Déame o enderezo do servidor web da CNN, "
pero acontece que o servidor web da CNN é xestionado por Amazon,
Amazon Web Services, que suxire.
E o enderezo do servidor que é este aquí.
Entón, eu non estou seguro se iso vai funcionar, porque non adoitaba usar Amazon.
Pero imos tentar, enderezo, http:// IP, entrar, e -
é que vai funcionar?
Si Está indo para o traballo. Internet é super-lenta hoxe.
Pero, nun momento, vai ver algúns noticia.
Alí imos nós. O Bank of America está sendo procesado. Todo ben.
>> Isto porque este enderezo IP pasa só por sinónimo de www.cnn.com.
Por suposto, sería de marketing horrible dicir, vai-nos na web 50.112.94.127.
Vostede nunca me lembraría. Así, mesmo nos días de hoxe pode lembrar as cousas
como 1-800-COLLECT ou mnemônicos do mundo veu con números de teléfono.
Que, antes de os teléfonos móbiles foron bastante difícil recordar
ata que podería simplemente inserir-lo e esquece-la.
Así, a web tamén ten esa convención de nomes e enderezos IP,
e hai estas cousas alí fóra, chamados de servidores DNS,
sistemas de servidores de nomes de dominio, que traducen enderezos IP en nomes e viceversa.
Entón é iso que está a suceder debaixo do capó.
Ao final, temos o TCP / IP, que é este protocolo de nivel moi baixo
que, realmente, só queda 0 e 1 en toda a Internet,
e faino, poñendo-os en un sobre virtual,
se quere, e escribir ao lado de fóra do sobre
o enderezo IP de destino, así como o número de porto numérico
do servizo en que o destino que quere falar.
Mentres tanto, no sobre, hai tamén algo coñecido como un enderezo de retorno,
cal é o seu enderezo IP, de xeito que cando a CNN recibe un paquete de información sobre vostede,
abre ese Sobre virtual, ve que quere na páxina de inicio,
el sabe da parte remitente deste Sobre virtual de quen enviar as costas para HTML.
Entón, imos dar un ollo niso en detalle un pouco máis.
Isto é unha empresa chamada Ericson, de hai uns anos.
E tomaron algunhas liberdades coa forma como a Internet funciona realmente,
pero pinta un cadro moito máis visual do que giz mera aquí.
Entón, eu darlle "un pouco de internet."
>> [Narrador] Por primeira vez na historia,
persoas e máquinas traballan en conxunto, realizando un soño.
A forza de unión que non coñece límites xeográficos.
Sen distinción de raza, cor, credo ou.
Unha nova era onde a comunicación verdadeiramente une as persoas.
Isto é
O alvorecer da Internet.
Quere saber como funciona? Prema aquí para comezar a súa xornada para a rede.
Agora, exactamente o que pasou cando clic na ligazón?
Comezou un fluxo de información.
Esta información viaxa para abaixo na súa sala de correspondencia persoal
onde os paquetes IP Mr iso, rótula-lo e enviá-lo no seu camiño.
Cada paquete é limitada no seu tamaño.
A sala de correo ten que decidir como dividir a información
e como embalaxe-lo.
Agora, o paquete precisa de un rótulo que conteñen información importante
tales como o enderezo do remitente, o enderezo do receptor, é o tipo de paquete que é.
Porque este paquete especial vai para a Internet,
que tamén recibe un enderezo do servidor proxy,
que ten unha función especial, como veremos máis adiante.
O paquete é agora lanzado na súa rede de área local, ou LAN.
Esta rede é usada para conectar todos os ordenadores locais '
routers, impresoras, etc, para o intercambio de información dentro das paredes físicas do edificio.
A LAN é un lugar moi descontrolada, e, por desgraza,
accidentes poden ocorrer.
A autoestrada da LAN é embalado con todo tipo de información.
Estes son os paquetes IP, paquetes Novell, paquetes AppleTalk.
Eles están indo contra o tráfico, como de costume.
O router local le o enderezo e, se fose necesario,
levanta o paquete para outra rede.
Ah, o roteador. Un símbolo de control nun mundo aparentemente desorganizado.
[Encamiñador resmungando e falando para si mesmo]
>> [Narrador] Alí está el, sistemático, insensible, metódico,
conservador, e ás veces non completamente ata a velocidade.
Pero polo menos é exacto, para a maior parte.
Como os paquetes deixar o router, eles fan o seu camiño para a Internet corporativa
e de cabeza para o switch, roteador.
Un pouco máis eficiente que o router, switch, roteador xoga rápido e solto con paquetes IP,
habilmente reenvío deles ao longo do seu camiño.
A 'Pinball Wizard' dixital, se quere.
[Switch router falando para si mesmo]
[Narrador] Como os paquetes chegan ao seu destino,
eles están pegou pola interface de rede,
lista para ser enviada ao seguinte nivel.
Neste caso, o proxy.
O proxy é utilizado por moitas empresas como unha especie de home de media
, Co fin de diminuír a carga sobre a conexión a Internet
e por razóns de seguridade, tamén.
Como podes ver, os paquetes son de varios tamaños, dependendo do seu contido.
O proxy abre o paquete e busca o enderezo web ou URL.
Dependendo se o enderezo é aceptable,
o paquete é enviado para a Internet.
Hai, no entanto, algúns enderezos que non cumpren coa aprobación do fiscal.
Ou sexa, as directrices corporativas ou de xestión.
Estes son sumariamente tratados.
Nós imos ter nada diso.
Para aqueles que fan iso, é na estrada de novo.
>> A continuación, o firewall.
O firewall corporativo serve a dous propósitos.
Ela impide que algunhas cousas bastante desagradables de Internet de entrar na Intranet,
e tamén pode impedir que información confidencial da empresa sexan enviadas a Internet.
Despois de atravesar o firewall, un router recolle o paquete
e colócase en unha estrada moi estreita, ou ancho de banda, como se di.
Obviamente, a estrada non é grande o suficiente para leva-los todos.
Agora, pode preguntar o que ocorre todos os paquetes que non o fan ao longo do camiño.
Ben, cando o Sr IP non recibir unha confirmación
que un paquete foi recibido no debido tempo,
el simplemente envía un paquete de substitución.
Agora estamos preparados para entrar no mundo de Internet.
A tea de araña de redes interconectadas que abranguen todo o planeta.
Aquí, routers e switches establecen conexións entre redes.
Agora, a Internet é un medio totalmente diferente do que vai atopar
dentro dos muros de protección da súa rede LAN.
Aquí, é o Vello Oeste.
Moito espazo, moitas oportunidades,
moitas cousas para explorar e lugares para ir.
Grazas a moi pouco control e regulación,
novas ideas atopar solo fértil para empurrar o sobre das súas posibilidades.
Pero por mor desa liberdade, tamén algúns perigos axexan.
Vostede non sabe cando vai coñecer o ping temido da morte,
unha versión especial de solicitude normal de ping,
que algún imbécil, que ata descontrola os anfitrións incautos.
O camiño tomar os nosos paquetes poden ser vía satélite,
liñas telefónicas, sen fíos ou cable mesmo transoceânica.
Eles non sempre tomar as rutas máis rápidas ou máis curta posible,
pero eles van chegar alí un día.
Quizais sexa por iso que ás veces é chamado de "Wait A World Wide".
Pero cando todo está funcionando ben,
pode evitar o mundo cinco veces máis na caída dun sombreiro, literalmente.
E todo para o custo dunha chamada local ou menos.
Preto do fin do noso destino, nós imos atopar outro firewall.
>> Dependendo da súa perspectiva, como un paquete de datos,
o firewall pode ser un bastión de seguridade ou un adversario temible.
Todo depende de que lado está e cales son as súas intencións.
O firewall é designado para deixar entrar só os paquetes que atender os seus criterios.
Este firewall está operando nas portas 80 e 25.
Todos os intentos de entrar a través doutras portas están pechadas para as empresas.
A porta 25 é utilizada para paquetes de correo,
mentres que a porta 80 é a entrada para os paquetes de Internet para o servidor web.
Dentro do firewall, os paquetes son analizados máis profundamente.
Algúns paquetes de facelo facilmente pola alfándega,
mentres outros miran un pouco dubidosa.
Agora, o oficial de firewall non é facilmente erro,
como cando ese ping de paquete morte intenta disfrazar como un paquete de ping normal.
[Oficial Firewall charlar con paquetes]
[Narrador] Para aqueles paquetes afortunados o suficiente para facelo tan lonxe,
a viaxe está case no fin.
É só unha liña encima da interface a ser levados ao servidor web.
Hoxe en día, un servidor web pode ser executado en moitas cousas,
a partir dun Exposicións para unha web cam para o ordenador sobre a súa mesa.
Por que non o seu neveira?
Coa configuración axeitada, pode descubrir se ten o resultado
para Chicken Cacciatore, ou se ten que ir á tenda.
Lembre, este é o inicio do líquido.
Case todo é posible.
Un por un, os paquetes son recibidos,
aberto, e descomprimido.
A información que conteñen, é dicir, a súa solicitude de información,
é enviado ao servidor de aplicacións web.
O paquete en si é reciclado,
listo para ser usado de novo, e cuberto con información desexada,
abordar, e enviado no seu camiño de volta para ti.
Volver pasado o firewall, routers, e no medio da Internet.
De volta a través do firewall corporativo
e para a súa interface,
preparado para ofrecer o seu navegador coa información solicitada.
É dicir, esta película.
Satisfeito cos seus esforzos, e confiando nun mundo mellor,
Os nosos paquetes de datos fiables cabalgar alegremente no por do sol dun novo día,
seguro de serviren ben os seus mestres.
Agora, non é un final feliz?
[Malan] Ok, iso é o suficiente. Imos ver a próxima semana.
[CS50.TV]