DAVID J. Malan: Todo ben. Estamos de volta. Así, o obxectivo desta sesión final é introducir algúns conceptos pero tamén dar a todos unha oportunidade ao tipo de estirar os dedos e realmente facer algo un pouco de práctica. O obxectivo non é converter todos para desenvolvedores web por calquera medio, pero realmente só para darlle un gusto dalgúns das construcións fundamentais de que entra programación web e hoxe web desenvolvemento, de xeito que o banda estática de coisas- ningunha lóxica, ningunha programación lingua, só contido estático. E iso daranos unha oportunidade para ver realmente o que un servidor web é, ver o que un arquivo HTML é, ver o que é HTTP é realmente servindo-se. Pero antes de mergullo, calquera retrospectiva preguntas sobre a computación en nube ou de seguridade ou algo no medio? Non? Todo ben, ben, imos facelo, só no caso o proceso de rexistrar a algo leva uns minutos. Imos deixalo facelo en segundo plano. Dalle, se puidese, para c9.io. este URL aqui-- Este é un terceiro serviço-- plataforma como servizo, se will-- que vai invite para rexistrar a unha conta, e vai dar a cada un de vós unha conta na chamada nube na infraestrutura de outra persoa, unha empresa chamada Cloud9. Pero o que é agradable sobre isto é que eles dan-lle unha aproximación dun desenvolvemento real do mundo real ambiente, aínda que no nube e un navegador web, e imos usar isto para realmente probar un pouco hoxe. E, a continuación, vai adiante e só navegar o seu camiño para o proceso de inscrición se puidese. Entón, nós pasar para acceder a esta na clase Eu ensino a todos os nosos alumnos, tanto no campus como fóra agora, e substitúese o que historicamente foi software doutro xeito para descargar. Entón, o que estaba gañando acceso a é unha desas máquinas virtuais, no esencial, que eu describe anteriormente. Polo tanto, esta empresa Cloud9 probablemente rendas dun terzo party-- feito Neste caso, Google-- un todo grupo de máquinas virtuais que dalgún xeito pique en a ilusión de servidores individuais que cada un de nós ten total control sobre. Non é moi preciso dicir que son máquinas virtuais, con todo, xa que o que Cloud9 realmente usa é unha tecnoloxía algo máis recente chamado conteinerização. E déixeme coller esta imaxe aquí para pintar o cadro. 

Un recipiente é, se Lembra-se da imaxe de antes, un pouco máis leve peso do que unha máquina virtual. De feito, mentres que o último xa que falamos de alí sendo un operativo sistema e un hypervisor e logo, sistema operativo convidado, invitado sistema operativo, operativo convidado sistema, encima do seu hardware físico, a diferenza con esta nova tecnoloxía, contentorização, é que todos eles de algunha maneira compartir o mesmo sistema operativo. Pero aínda crear a ilusión de todos ter o seu propio exclusivo dereitos administrativos e arquivos no servidor. Pero hai menos software entre vostede eo hardware. O resultado é que, en Teoricamente, un rendemento superior, porque está a usar ou perdendo menos recursos en que a capa de virtualización chamada. Entón, iso é chamado conteinerização por natureza por medio dunha tecnoloxía chamada de encaixe, que é moi entrando no seu propio. E iso é algo que enxeñeiros da súa empresa Pode tipo de tipo de comezar a falar sobre pronto, se xa non o fixo, porén non hai dúbida ningunha razón para ir sobre calquera bandwagons. 

Entón, con iso dito, o que probablemente ve agora é unha pantalla que parece un pouco con iso. OK. E só chamar-me sobre se non. E se assim-- vou vir se non. Dalle clic tan grande ademais de crear un espazo de traballo, e podes ver unha pantalla como esta. Pode chamar o espazo de traballo nomear calquera cousa que quere para o momento. E, así, de feito, para simplificar, vaia e- ben, algúns de vostedes xa espazos de traballo. Chama-lle o que want-- negocio, Harvard, xoves, o que quere que desexa. Non necesita unha descrición. Pode deixar lo privado, a menos que xa ten unha morea de espazos de traballo. Se está obrigado a facela pública, iso é bo para fins de hoxe. Aquí, tamén, é un dos upsells. Vostede gañou un espazo de traballo privado por estándar. Pero se quere máis, ten que pagar por máis. Se non, eles forzalo para facer o seu público traballo. Pero iso é bo, porque tamén obxectivo que en comunidades de código aberto para impulsar a xente a Realmente colaborar. 

E o último que é importante, con todo, é, despois de escoller un nome e despois de escoller privado ou público, clic HTML5, a icona laranxa grande segundo desde a esquerda, e a continuación, prema en Crear Espazo de Traballo. E, probabelmente, tomar un minuto ou así, pero entón vai ter un medio ambiente, xa que facelo, que parece unha reminiscencia o que eu teño na pantalla aquí agora. Pero, de novo, isto pode levar un minuto ou máis para chegar a esta pantalla xa que premeu Crear Espazo de Traballo. Pero, así min bandeira máis se me gustase de min para dar un ollo a algo ou aconsellar. Todo ben. Entón, eu vou fondo iso por agora. Chama-me máis se parecen temos dificultades técnicas. Pero, de novo, isto pode levar un pouco para que a abrir. E imos adiante e falar do realmente significa para facer unha páxina web, HTML é, e como todo isto agora interliga como estamos comezando para realmente usar algunhas das tecnoloxías. Así, verifícase que eu poida ir no meu pequeno Mac aquí, abrir un programa sinxelo chamado TextEdit, ou en Windows podería algo aberto chamado Notepad.exe. E eu podería simplemente facer algo como isto-- "Ola, mundo". E entón eu podería salvar isto como hello.txt Entón hai máxica alí. Isto non ten nada que ver coa web programación, nada que ver con HTML. Basta crear un arquivo de texto plano. Pero parece que a web A páxina é, literalmente, só iso. É un texto arquivo de texto que contén que podes escribir no seu teclado, pero normalmente, pero non sempre remata non .txt, pero .html ou .htm. E non só escribir palabras no ficheiro. Realmente ten que usar cousas chamadas etiquetas ou, máis xeralmente, algo chamado linguaxe de marcado. 

Entón eu vou para escribir moi rápido e logo, explicar o seguinte. Vou primeiro escriba este, que di: hey, navegador, aí ven un A páxina web escrito en HTML. E estas dúas cousas xuntas dicir, hey, navegador, a seguinte é de feito HTML. Hey, navegador, aí vén o cabeza ou parte superior da miña páxina. Hey, navegador, dentro da parte superior da miña páxina, poña un título que é, "Ola, mundo ". Hey, navegador, tras a cabeza do meu páxina, aquí vén o corpo da miña páxina. E, hey, navegador, o corpo do meu páxina tamén debería dicir, "Ola mundo". Entón, cales son os detalles saíntes aquí? Isto é o que normalmente é chamado dunha declaración do tipo doc, e, a verdade, é algo difícil de memorizar esta en primeiro lugar. Só tipo de copia-pegar. Esta é o xeito formal de dicir, hey, navegador, Eu estou usando HTML versión 5, que saíu un pouco recentemente. É un encantamento máxico que algúns humanos con un mal sentido de deseño decidiu poñer no moi superior do ficheiro. Aínda que sexa un pouco arcano, iso é todo Lo means-- hey, navegador, aquí vén coa versión 5 do HTML. 

O resto deste estivo connosco xa hai algún tempo, historicamente, pero foi evolucionando, e é Probablemente, foi quedando un pouco máis simple. Observe algunhas características que eu teño resaltado. Hai esas cousas con angular brackets-- soporte esquerdo eo soporte dereito. E teña en conta a simetría aquí. E por simetría, quero dicir, como eu ter esa marca de comezo aquí ou unha etiqueta aberta se quixeren, aquí eu teño un preto etiqueta ou marca de fin que é diferentes só na medida en que ten este barra no inicio da palabra HTML. E pode pensar isto como eu estaba casualmente propoñendo antes, hey, navegador, aí ven un pouco de HTML. E, inversamente, hey, navegador, que é Lo para o inicio HTML-- e fin. 

Mentres tanto hey, navegador, aquí vén a cabeza de miña páxina. Hey, navegador, é tanto para a cabeza. Hey, navegador, aquí é o corpo da miña páxina. Hey, navegador, é tanto para o corpo. E dentro dese algunha texto arbitrario para agora. E dentro da cabeza, mentres tanto, é un arbitraria, pero con etiquetas, por así dicir, texto que di, o título da miña páxina debe ser "Ola, mundo". Agora, por agora, pode supoñer que os navegadores ten only-- ou mellor, páxinas web teñen só dous parts-- da cabeza e do corpo. E a cabeza é xeralmente só como a barra de menú, o material realmente só na parte superior. E o corpo é a coraxe da páxina, todo en tan grande rectángulo que enche a pantalla. Entón, eu estou indo a ir adiante e facelo. Eu indo a ir adiante e prema Gardar, Gardar ficheiro. E eu estou indo a salvar isto como hello.html, e eu estou indo só para poñelas no meu escritorio. E eu estou indo a ir adiante e faga clic en Gardar. E notice-- meu Mac en menos está berrando para min. Está seguro de que quere facer isto? E eu vou dicir, si, usar HTML. Sei mellor neste caso. E agora eu estou indo a ir ao meu escritorio onde eu teño o ficheiro de súpeto. E eu vou dar un dobre clic nel. E vai entender que, por patrón, Chrome aberto. Isto é porque é iso meu navegador por defecto. E só di: "Ola, mundo". Pero el di "Ola, mundo "en dous lugares. Observe superior esquerda. Moi difícil de perder. É grande e valente. E onde máis é que parece quere dicir, "Ola, mundo"? 

Audiencia: A guía. 

DAVID J. Malan: Si, a guía en si. Entón, cando dixo que o xefe da A páxina é todo para arriba top-- e en realidade este é o título. É só na guía aquí. E podo tirar esta guía para non confundir. Esta é só unha única guía agora, e, de feito vemos "Ola, mundo" aquí enriba e "Ola, mundo" aquí debaixo. Así, moi sinxelo. Pero tamén é moi sinxelo. E, de feito, eu ampliada. Podo cambiar o tamaño da fonte só para ampliar a accesibilidade. Pero imos agora facer algo un pouco máis interesante. 

Vou vai-- berros, imos me volver para o meu ficheiro de texto. Vou volver para o meu arquivo de texto, e eu vou para cambiar isto e dicir "Ola, Disney World." Salva. E volver ao meu navegador e prema en Cargar de. E agora, por suposto, di que "Disney World". E eu vou aumentar artificialmente en só polo que é máis fácil de ver. Entón, agora, por desgraza, eu medio que quero a-- en realidade, iso é unha característica Mac. Quero facer clic en Disney World e ir en algún lugar como disney.com, pero iso non funciona. Así, un principio básico da web é hiperlinks, enlaces que ir a outro lugar. Entón, como podo facelo? Ben, eu podería só dicir, "Ola, http://www.disney.com." Gardar este. Recargar. Pero iso tamén, non previsión. E o que é bo aquí, aínda que Isto non é funcional aínda, é que parece que o navegador, literalmente, só fai o que eu diga a el para facer. Entón, se eu só unha URL como esta, el só me vai amosar a URL. Eu teño usar etiquetas ou marcado linguaxe para realmente dicir o teu navegador para aínda máis. Entón, eu estou indo a ir adiante e eliminar este por un momento. E eu vou dicir, hey, navegador, iniciar unha áncora aquí, unha conexión por así dicir. E a amiga referencia ao destino desa referencia, debe ser este URL. E teña en conta as miñas citas. Eu podería usar comiñas simples, tamén, pero tes que ser consistente, e eu normalmente só usar comiñas para mantelo simple. Repare que eu vou pechar a etiqueta. E entón aquí eu vou quere dicir, "Disney World". E agora eu teño de symmetry-- paréntese de apertura, / a, pechou soporte. 

Entón o que eu introducido? Tivemos algunhas etiquetas xa. HTML, cabeza, título, corpo son todas as etiquetas, por así dicir, cos seus homólogos abertos e pechados. Pero aviso, isto é unha especie de fundamentalmente diferente. Isto é o que nós chamaremos HTML un atributo. E un atributo só un par de valores clave. Iso é unha cousa común en ordenador science-- par clave-valor. É unha especie de ferramenta de comercio. Unha clave e un valor. Unha palabra e entón algúns outra palabra ou palabras. E neste caso, a clave é href, eo valor é a URL completa. E o que un atributo fai é influencia o comportamento dunha etiqueta. E neste caso, debemos influír o comportamento da marca de referencia, porque necesitamos ancorar este enlace para algún lugar. E como fai iso é por medio do atributo. 

Entón, eu estou indo a ir adiante e salva o arquivo agora. Voltar o meu navegador e recargar. E, voila, temos agora a inicio dunha páxina web lexítimos. Super-simple, pero se eu pasar o rato sobre aviso isto-- na parte inferior esquerda, É super-pequeno. Pero ve www.disney.com. E se eu premer nel, de feito, este me leva lonxe para disney.com. Agora, a cousa curiosa aquí é que non é o best-- a URL máis comercializável, pero iso é bo, porque este ficheiro non existen na World Wide Web. Existe como un arquivo local no aparentemente Os meus usuarios directory-- / jharvard-- John Harvard-- / escritorio. Pero ten un URL. El só pasa a ser lugar. Por desgraza, ningún de vós pode visitar iso, porque se insire esta URL, estaría dicindo a súa web, procure un ficheiro chamado hello.html no seu disco duro. E, por suposto, a menos que ten está a seguir ao longo manualmente non existir alí. 

Entón, iso é bo. Aínda necesitamos de certa forma, en última instancia, para este ficheiro para a web, pero imos desmembrar un par de implicacións de seguridade que acabamos viu e amarra-lo de volta para o inicio discusión desta mañá. Acontece que, se un navegador, literalmente, só fai o que eu diga a el para facer, e parece ser o caso de que unha marca de referencia é influenciada polo valor de este atributo chamado href pero exhibe esta texto, isto parecería implicar que eu podería poñer a URL en ambos os lugares e recoloque e agora ver o URL e ir ao URL. Observe, se eu pasar o rato sobre o canto inferior esquerdo, Estou realmente indo aínda disney.com. 

Entón, se xa estivo phished-- P-H-I-S-H-E-D-- cun destes correos electrónicos falsos de como o PayPal base, probablemente xa conquistou conexións dentro do correo electrónico que está lendo que dille para premer aquí para ir confirm o seu contrasinal ou confirmar a súa data de nacemento ou social ou algo socialmente enxeñaría que divulgue información. Ben, eu podería tipo de exame vantaxe deste, non podería? Podería dicir algo como, www.paypal.com. E no canto de disney.com, I podería ir, como, badguy.com. Recargar. E como é que é fácil de enganar, especialmente un lector non-técnico ou superficialmente lendo lector que para premer unha ligazón como este, que se eu premer ele-- Eu realmente non quero ir badguy.com. Eu non sei o que está realmente alí. Entón paypal.com, previo aviso, é o que di que vai, pero está claro que, se eu ollar para abaixo super-baixo, que é un pouco embaçado, pero el di que badguy.com. Esa é a única dicir agora que eu estou indo ao lugar incorrecto. E cando eu dixen anteriormente que os bancos realmente non debe fomentar ou adestrar usuarios en enlaces premendo, este é só unha manifestación diso. E é tan sinxelo. Agora un adversario se fai algo coma isto e tratar de enganar un usuario para visitar o seu sitio. Pero, por agora, imos seguir cousas agradable e limpo. Estamos indo a ir adiante e retroceder estes cambios. Actualizar a páxina. E eu voltar disney.com. 

Imos ver se non podemos provocar este apart un pouco máis. Así, "Ola, Disney World." Eu vou dicir aquí. Poida que eu vou facer un espazo. "Esperamos que aproveite a súa estancia" Salva. Recargar. Non é rea-- iso non é o que eu pretendía, non? É dicir, se eu estou tratando meu texto arquivo como un procesador de texto, O que esperaba que ía ocorrer aquí? Si, eu sinto que hai debe ser unha quebra de liña aquí, polo que se sente cesta de algunha maneira. Pero iso é realmente deliberada, porque así como antes, o navegador só vai facer o que diga a el para facer. Eu non dixen a el para romper liñas. Non lle dixen que se mova abaixo, mesmo porén, intuitivamente, eu sinto que eu fixen. Non é que necesitamos un pouco máis de reserva, e eu vou solucionar isto como segue. Vou de prefaciar este primeiro Ola co que se chama tag de parágrafo. E entón eu estou indo a ir adiante e enrole estoutra sentenza noutra tag de parágrafo, a pesar de son parágrafos super-curtos. Agora eu estou indo a salvar. Recargar. E agora temos que espazo, e tipo de ten a semántica de dous parágrafos separados. 

Isto é todo moi ben e bo, pero sería ser bo para engadir unha imaxe a esta páxina, entón eu estou indo a ir buscar Mickey Mouse en Google Images. E só por diversión, eu son indo coller esta imaxe. Eu estou indo a ir adiante agora e coller a URL desta imaxe, aínda que non é diferente formas de facelo. Por agora, eu só vou copiar a URL. Vou volver para o meu texto arquivo, e eu vou dicir aquí, img src = entre comiñas que URL, super-longa. E, a continuación, a noción dun imaxe é un pouco diferente. Non hai realmente ningunha noción de partida unha imaxe e rematando nunha imaxe, como un tag de inicio dunha etiqueta final. Entón, se sente un pouco raro me semanticamente para facelo, para ter unha etiqueta primer imaxe. Non é correcto. É perfectamente correcto, e é animou, pero non hai notación abreviada. Podo tipo de vez abrir e pechar a mesma etiqueta, e que fará que o navegador feliz. Por iso, é só un pouco máis sucinto para que as cousas que, conceptualmente realmente non sei ter sentido para comezar e rematar. Eles só están aí, ou eles non son. 

Entón eu vou para salvar este e volver ao meu "Ola, mundo" páxina e recarga. E é un pouco fóra de control, porque a imaxe é realmente un pouco grande, pero iso é OK. Podería redimensiona-la nun programa. Ou sabe o que. Só para demostrar, eu son vai realmente dicir que o ancho desta cousa debe ser só 200 píxeles, 200 puntos. Deixe-me ir adiante e gardar e actualizar, e agora a páxina parece un pouco máis razoable. Pero teña en conta o patrón. Ben, eu medio que lle ensinou todo HTML, en certo sentido, polo menos, conceptualmente, porque todo HTML é é estes tags-- etiquetas abertos, pechados etiquetas, e atributos que modificar o seu comportamento. E, ao parecer, cada tag pode cero ou un ou dous ou máis atributos, cada un de que fai algo un pouco diferente. Agora, como vostede sabe o que hai? Acaba de escoitar alguén como eu lle dicir o que hai, ou simplemente Google en torno a un tutorial HTML, e é realmente tan sinxelo. 

De feito, cando eu era estudante anos e aprendín HTML, unha das miñas clases de matemáticas asistentes só pasado un pouco de tempo me titoría para como media hora, unha hora, e entón eu estaba no meu camiño. Eu estaba no meu camiño para facer os sitios máis hediondos de todos os tempos, que, ao parecer, non teñen realmente progresou alén. Pero o punto é que, unha vez que comprender estas simples ideas-- se arcano texto-- pero estes simples ideas de comezar un pensamento e pechando un pensamento, mantendo todo ben equilibrado, mirando algo anterior, modificar o comportamento desa etiqueta, iso é realmente todo que hai para ela. E, de feito, se imos agora algo así como google.com-- en realidade, imos un lugar un pouco máis reasonable-- stanford.edu. E eu estou indo a ir a ver, Creador, Vista Orixe. É feo, pero notice-- e eu vou facer zoom aviso algunhas cousas que xa é familiar. Hai este aquí enriba, que é un navegador. Aí vén HTML5. Hai HTML. Ao parecer, hai unha atributo que eu non fixen usar o que especifica idioma da páxina, e isto pode axudar con automática tradución e cousas así. Aquí está a cabeza da páxina. Aquí está o título da páxina de Stanford. Hai un tag eu non fixen falar yet-- tag Meta. É só unha especie de información de fondo. Ela contribúe con SEO, ou optimización de buscador, ou os resultados de Google-search ou similares. Pero se ficarmos mirando, manteña buscar, aquí está a etiqueta do corpo. E non hai acios doutra etiquetas que non falamos sobre iso aínda. Pero é unha Div para unha división da páxina. É como un rectángulo invisible se medio que quero mental dividir súa páxina en distintas unidades en liña. E, a continuación, lotes de divs I ver, algo chamado de clase, pero imos volver a iso. 

Este é Forms interessante--. Os formularios están por toda a web. Calquera caixa de busca que está xa usou é unha forma. E, por iso, imos realmente ver. Form. Acción. A acción deste xeito, por calquera razóns históricas, é que URL. Método é "post". Acontece que as solicitudes HTTP pode usar o verbo "estar", como vimos antes, ou "post". E vai ver a diferenza isto nun momento. Veremos realmente o que é iso. Déixeme volver á páxina de Stanford. Que forma eles están falando sobre, que pensas? O que salta á vista? 

Audiencia: Caixa de Investigación. 

DAVID J. Malan: Yeah. Así, se na parte superior dereita aquí é esta caixa de busca. E é así que aplicaron ele-- un tag que é, literalmente, fórmase bracket aberto. E entón imos buscar algo. Imos buscar un amigo de mine-- "Nick parlante." Intro. E, por suposto, foi a URL lixeiramente diferente. Déixeme volver aquí. Imos buscar "cursos". Carallo. Fun a unha URL diferente. Entón, Stanford da adición de un pouco de maxia que non están me levando a URL que vimos no atributo action alí. Pero esta forma aquí é aplicado puramente por medio desta cita aquí, estas etiquetas. De feito, aquí está a entrada o tipo de investigación que quere. Aquí é a entrada outro tipo de busca. Aquí é a entrada á propia corda. E así, o obxectivo non é para embrulhar nosas mentes en torno a todas estas etiquetas pero só para ver. É só abrir e pechar etiquetas e mirando as cousas. Si? Victoria? 

Audiencia: [inaudível] DAVID J. Malan: Esta é unha boa pregunta. Isto é un pouco máis complicado de ver. Déixeme volver a iso pregunta en só uns minutos cando miramos para algo chamado follas de CSS, ou de estilo en cascada, e podemos tentar deducir tanto desde a páxina. Entón, se nós agora dar un ollo a google.com, imos ver o que a súa páxina parece. Vostede tería they're-- que é bonito hoxe. OK. Todo feito. Todo ben, entón View Source. Vostede podería pensar que Google ten código fonte moi boa. Entón, ao parecer, o que está pasando aquí? E, de feito, iso non é nin HTML. Isto é algo chamado de JavaScript. E imos seguir indo e indo. Non sei ata onde a páxina comeza. Vou usar Command F, HTML soporte aberto. Todo ben, aí está. Eu atopei o inicio da páxina, e hai tanta cousa aquí. 

O que está realmente a suceder? Ben, vostede sabe o que, podemos limpar iso. Se eu en vez de ir a este Inspecionar barra de ferramentas, esta ferramenta especial de diagnóstico, e non van á rede, onde esperamos que continúe hoxe, pero se eu for a Elements, o que é moi bo que é un navegador ten unha morea moito mellores ollos do que eu. E o navegador pode ler esa confusión dunha páxina web, que o correo HTML que acabamos mirou, e pode analiza-lo ou ler e analizalo e reflexa-lo dunha forma agradable-humano agradable. Entón o que estou a ver agora nesta pantalla aquí en Elementos, exactamente o mesmo contido, pero recuado todo, eles colorized pero que é o mesmo texto que descargar do servidor. 

E o que é bo momento é que podo ver no corpo, por aviso instance--, a páxina aínda está composta de só unha cabeza e un corpo, e podo xerarquicamente mergullo aquí. Teña en conta que Google parece para divs-- este e este. Podo ampliar iso. Hai unha morea de outros divs. Polo tanto, é un pouco complexo. Pero espera. Isto parece moito máis lexible, relativamente, que este. Por que Google embaraçoso por si só o envío esta enorme confusión de código de calquera tipo só para aplicar algo que parece tan sinxelo a primeira vista? Como, por que non engadir máis espazos? Por que non prema Intro como eu fixen? Mira como eu era en escribir unha páxina web. I prema Intro tan dilixente. I recuado, entón todo é tan fermosa e lexible. Por que Google non practicar o mesmo? 

Audiencia: [inaudível] DAVID J. Malan: Good. Moi xusto. Eles non teñen algúns persoa en Google manualmente actualizar máis a páxina principal. Non é 1.999 máis. Entón eles teñen software. Teñen outras ferramentas que xerar dinamicamente son HTML. Claro, que o propio código foi escrita por seres humanos, pero a realidade é, é moi xusto dicir, o navegador por suposto non fai importa o quão confuso o código. Pero hai unha aínda máis razón técnica convincente que Google distribúe o HTML código de tal desleixado, aparentemente esmagadora xeito, todos embalados xuntos con moi pouco way-- moi pouco na forma de formato, como eu fixen. 

Audiencia: [inaudível] 

DAVID J. Malan: Faster? Por que? E o que dixo, Lydia? Máis rápido? Por máis rápido? Audiencia: [inaudível] DAVID J. Malan: Non hai non hai espazo para ler. Si. Entón, pense sobre o que un espazo é. Así, cada carácter no teclado leva unha certa cantidade de espazo para representar, tanto fisicamente, como ocupa moito espazo, ou de algunha maneira por baixo do capo, que require memoria. E como un aside-- e nós imos falar máis sobre este tomorrow-- cada personaxe no teclado normalmente require de 8 bits, ou un byte. Entón, un patrón de 8 ceros ou queridos, ou só 1 byte, como nós humanos que normalmente din. Entón, iso é pequeno, pero aínda é distinto de cero. É aínda unha certa cantidade de espazo. Polo tanto, se un enxeñeiro ou Google bate a barra de espazo xa só, e supoña Google-- é super-popular-- Supoña que mil millóns de persoas visite a súa páxina principal do día, ou algún número de persoas visite a páxina inicial dun millóns de veces ao día, cantos bytes adicionais que posúe enxeñeiro de software só o custo Google por bater a barra de espazo xa? 

Audiencia: [inaudível] DAVID J. Malan: Non é tan malo así. Só un byte veces mil millóns. entón um-- Audiencia: 8 millóns de gigabytes. DAVID J. Malan: Non 8 millóns. 8 millóns de bytes. Pero 1 gigabyte. 1 gigabytes sería a unidade de medida. Se el ou ela fai dous espazos, 2 gigabytes. Tres gigabytes. Non? É escalas cara. E así, en casos como Google, que, concedido, son casos extremos, hai outras cuestións que xorden só tomando decisións moi razoables ou tomar accións humanas moi sinxelo, porque ten ese efecto ampliado. Polo tanto, unha das razóns isto parece tan comprimido é exactamente como Victoria disse- era só xerados por ordenador de calquera maneira. Entón, non é gran cousa. Deixe o seu navegador descubrir iso. Pero tamén deliberadamente Non ten moito espazo, porque o espazo non é necesario. E o espazo realmente custa cartos. 

Iso quere custa tempo, porque só a empurrar que máis datos en cada A sede da google.com só Ten que tomar algunha cantidade de tempo, aínda que sexa milisegundos ou microssegundos, pero que engade-se ao longo de tantos usuarios, ou, máis probablemente, probablemente custa cartos. Google probablemente conecta a outra persoa no mundo, un dos que perscruta puntos, e se teñen algún tipo de relación financeira segundo o cal os custos dos seus datos diñeiro, Poderían moi ben minimizar a cantidade de datos están cuspindo en a súa conexión a Internet. 

Entón, a cousa divertido, aínda que, en definitiva, ou que a cousa reconfortante, é que aínda que iso parece terriblemente esmagadora, ao final do día, aínda é exactamente os mesmos principios que Nesta páxina moi sinxela aquí dun HTML páxina. Entón, só para resumir e para que ten unha versión canónica se non fose acompañando a opción aquí, aquí pode ser o máis simple de páxinas web, por iso algo para xogar quizais máis tarde. 

Ben, imos introducir unha par de outras ideas agora. Estamos a piques de presentar algo chamado tag de estilo. Podemos estilizar desta páxina de formas máis interesantes. Así, mentres correo electrónico HTML é todo sobre o marcado de os datos, tipo de especificando a un navegador como estruturar os datos, onde poñelas, CSS, ou follas de estilo en cascada, é unha segunda lingua que xeralmente se mesturaren co HTML como imos see-- pero podemos limpar que nunha moment-- que leva Lo a milla final, e estiliza lo. Recibe as cores só para a dereita, o tamaño de letra só para a dereita, o posicionamento só dereito. É todo sobre a estética ou formato, e non sobre os datos en si fundamental. E o xeito máis doado de amosar este é quizais o exemplo. Entón eu vou pasar por riba para o meu arquivo de texto simple. E en só un momento, eu vou pé connosco a través do proceso de facelo nós mesmos. 

Vou volver para o meu arquivo aquí e actualizar a páxina só para confirmar o que parece. Isto é onde estamos agora. Eu sinto que os nenos se aproveitar ter un pouco de cor a esta páxina web. Entón, eu estou indo a ir aquí na cabeza da páxina. E eu vou facer estilo, / estilo. E, a continuación, dentro deste, eu vou para dicir o corpo do meu página-- e esa formato é, polo primeira vista, quizais un pouco raro, pero convencional. Eu vou dicir que o fondo cor desta páxina debe ser verde. E esta é, por desgraza, tipo de non o mellor deseño. Nótese que anteriormente no mundo do HTML, Eu dixen que os atributos son eses pares chave-valor. Algo igual Cita unquote "algo". No mundo dos CSS, que estaba deseñado por algunhas persoas diferentes, decidiron que, na súa mundo, pares chave-valor Sería palabra colon algo. Entón é a mesma idea, aínda que. É asociado un valor con algunha clave que dalgún xeito influencia o comportamento desta páxina. 

E probablemente pode adiviñar. ¿Que é iso, probablemente, vai para facer se nunca visto HTML ou CSS antes? Audiencia: Cambiar a cor de fondo. DAVID J. Malan: Si, cambiar a cor do fondo. E especialmente a cor de fondo do corpo. Pero desde que o corpo de momento é a web página-- é o único por baixo do realmente-- barra de título el probabelmente vai influír o mesmo. Entón imos ver. Imos salvar este. Vaia aquí e actualizar. É moi hediondo. E o que está a suceder aquí é un efecto colateral. Só escolleu esta imaxe aleatoria. Por que o non é verde permeando detrás Mickey? Audiencia: [inaudível] DAVID J. Malan: Exactamente. Acontece que as imaxes, moito moi todas as imaxes para que poidamos utilizar, son todos rectangles-- de rectángulos. Mesmo se ten algunhas curvas Mickey a si mesmo e ten un fondo, que o fondo ten que ser algo. Ten que ser negro. Ten que ser negro ou outra cousa. Pode ser transparente. E, de feito, eu podería abrir Mickey Mouse aquí nun programa chamado Photoshop ou algo semellante e cambiar todo isto branca fondo para transparente, de xeito que o verde vai brillar. Pero iso é algo que eu teño para preguntar de min mesmo ou un artista gráfico ou un estudio para o meu empresa, por exemplo, de facer, especialmente dende que eu só prestado esta de internet. Pero iso é porque isto está a suceder. 

Entón, o que máis podería queremos facer? Ben, nós pode querer dicir que Realmente espero que aproveite a súa estancia. E para dar énfase, quero para facer este forte, e así eu vou dicir aberta forte e pechar forte e, a continuación, volver cargar. E é un pouco difícil ver no proxector pero quizais realmente agora salta en ti un pouco máis. Entón podes engadir cursiva neste forma, orientados ao negra deste xeito. Poderíamos cambiar as cores. De feito, só por diversión, eu son indo a ir adiante e facelo. Eu realmente non me gusta de como o meu parágrafos son tan preto xuntos, así que eu podería facer algo así. Vou dicir ao navegador, cambiar cada etiqueta de parágrafo para ter, imos dizer-- en realidade, vostede sabe o que, imos aliñar text-align, centro. E unha vez máis, sei que iso só porque alguén ensinou-me isto ou eu mirei cara arriba no unha referencia en liña. Entón deixe-me salvar este. E, ah, agora eu teño centrada a imaxe alí. E, de feito, xa sabe o que, se Eu movo a miña imaxe nun parágrafo tag-- entón un parágrafo terceiro, aínda que non do texto. Imos gardar isto e volver cargar. Agora, a páxina está empezando a parecer tipo de-- Quero dicir, é aínda moi feo, pero polo menos parece que pase dous minutos no canto dun minuto facendo-o. 

E así, de forma incremental, podemos facer estas modificacións estéticas agora á páxina? Non teño realmente cambiaron os datos no páxina que non sexa engadindo a palabra de verdade. Eu engade metadatos, se quere. Hey, navegador, facer o palabra "realmente" negra. Pero os datos non é forte. Isto é metadatos. Os datos son "realmente". Polo tanto, aínda temos algúns dos os mesmos conceptos como antes. Agora, por suposto, iso non está na web, entón eu vou facer un paso final aquí. 

Eu estou indo a ir a hello.html e só destacar e copiar este. E agora eu vou entrar Cloud9, que Vou leva-lo a través de só un momento. E as probabilidades son en breve vai ser, se non o fixo, nunha pantalla como esta. E déixeme só darlle unha rápida excursión que Cloud9 realmente é. Entón, de novo Cloud 9 é este servizo baseado en nube que lle dá e me ilusión de ter a nosa propia máquina virtual na nube, tecnicamente un recipiente na nube, que temos plena privilexios administrativos para. Así, en teoría, ninguén outra parte do mundo ten Acceso á pantalla que eu son mirando agora, excepto quizais a xente que xestionar o sitio web, porque tecnicamente teñen acceso físico e así por diante. 

Entón, o que vemos neste ámbito? Vou reducir, porque é un pouco pequeno. E déixeme salientar máis aquí por só un momento. No lado esquerdo do meu e teu pantalla, hai un navegador de ficheiros á esquerda. Entón semellante en espírito para Mac OS e Windows. Estes son todos do arquivos na miña conta. E, por defecto, se o conta é como o meu, vai ver ou ver en breve HelloWorld.html e readme.md. Por aquí, á dereita, que é onde os meus arquivos de texto están a ir. Se xa usou o Microsoft Word ou o Bloc de Notas ou TextEdit, esta é a palabra miña edición de ficheiros está a ir. E entón o máis arcano característica deste medio que non imos realmente precisa utilizar é aquí chamado dunha xanela de terminal. Se xa usou DOS de pasado, este é o Linux ou o equivalente Linux do DOS. É un interface-- baseado en texto hai click do rato, sen arrastramento. Todo o que podes facer é escribir comandos, pero estes comandos Pode crear arquivos, mover arquivos, aberta Anuarios, de Anuarios próximos, facer calquera número de cousas. Pero, polo de agora, imos só gastar o noso tempo aquí enriba. 

E así imos facelo. Se está nesta ambiente, o que ten que se creou un espazo de traballo xa, vai adiante e só ir cara arriba en File, New un momento. E iso lle vai dar un novo guía aquí no medio. E eu só-- e imos dalle facelo. Imos adiante e agora non File, Save e dalle chamalo hello.html, Non debe ser confundido co HelloWorld.html, que veu coa súa nova conta gratuíta, que é só un exemplo de arquivo. Vai velo aparecer de súpeto, máis probable no lado da man esquerda, ea guía aínda será aberto. E déixeme encouraged-lo a recrear este ficheiro ou algunhas variantes do mesmo. E se non pode velo no pantalla, esta é idéntica aos diapositivas que probablemente ten noutra pestana. 

Así, en breve, facer a súa primeira páxina web, garda-lo e, a continuación, en só un momento, Eu vou te amosar como Pode realmente ver iso. Pero cambiar polo menos unha cousa. Cambiar helloworld para algo da súa propia elección, de xeito que está convencido de que é a súa arquivo e non o que eu acaba de crear. Todo ben. E cando está ready-- non rush-- cando estea listo, dalle gardar o ficheiro unha vez que fixo estas modificacións. E se fai clic no botón superior executar superior, este debe abrir unha nova guía que ha dicir o que URL que podes visitar o seu arquivo en, pero pode ter un momento para entre comiñas "start Apache", que é o nome do servidor web. Polo tanto, teña coidado de facer exactamente o que está no arquivo, en última instancia. Entón, agora, eu vou aumentar o zoom. Se eu comezar a escribir -Colchete Entrada HTML, o aviso previo iso está me levando para rematar o meu pensamento. E se eu rematar o meu pensamento, automaticamente me dá a marca de peche. Pero a esperanza é entón eu vou bater Intro, e despois pasar dentro e non a cabeza dentro e entón fago corpo dentro. E é un pouco raro no comezo, porque está facendo o traballo para ti, pero entender que, en última instancia aforrar teclas. E, de feito, unha característica moi común de programación ambientes nos días de hoxe tanto para o desenvolvemento da web como isto e programación real, que falaremos mañá, Son estas características de auto-completar, cousas que só permiten que un programador ou un estudio para escribir menos teclas para realizar o mesmo. Ás veces é bo, con todo. Ás veces é só irritante. E, de novo, xa que transcrito a corredías ou a súa variante, pode facer clic no botón Executar enriba. E, a continuación, na parte inferior fiestra, será informado en que URL podes visitar a súa páxina web. Mine, por exemplo, está business-daharvard.c9users.io e así por diante. Todo ben, entón, deixe-me-- algunha dúbida? Calquera outras preguntas sobre só comezando este traballo antes de engadir funcionalidades? E déixeme propoñer, só para as persoas comfortable-- porque é unha cousa a só copy-paste cegamente o que eu fixen. Pero só para que as persoas loitan con polo menos un de tarefas, Vou chamar unha música. Vou propoñer unha lista de cousas que podes potencialmente engadir. E certamente pode usar Google. E por que non só propoñer que intenta resolver polo menos, un problema particular aquí. Polo tanto, en termos de marcas, déixeme reutilizar este aquí. 

De feito, déixeme poñer Lo nunha forma textual. Imos dicir que, entre as etiquetas Poderiamos usar aquí están algunhas etiquetas aquí. Vimos a marca de parágrafo. Agora vai auto-completar. tag de parágrafo, a etiqueta Referencia. Digamos que quere facer algo grande, de modo que pode como-- o tag span pode axudar. Ben, pode ter de axuda para que, en só un momento. Vimos div. Verá que hai mesa. Hai algo chamado tr, td. Th, td. Volver a iso nun momento. O que máis pode ser útil? Hai forte. Hai énfase, ou mellor, en. There's-- o que máis Pode desexa aquí? Ben, imos dar un ollar para iso xuntos. Solicitude, que xa vimos. Hai formulario. Hai entrada e algúns outros. Todo ben, entón imos facelo. Para responder a unha Victoria pregunta, deixe-me primeiro só asegúrese de que todos son capaces de obter o seu traballo Ola. Entón deixe-me presentar un par de outras ideas. Entón imos deixar pobos resolver algún problema por conta propia. Entón imos realmente volver a esa noción dun formulario, e nós imos realmente volver a aplicar xunto a interface de front-end, por así dicir, para o propio Google. Imos usar Google como o back-end e deixar Los facer o traballo duro, a investigación, pero imos recrear o front-end Google eo formulario de procura que teñen sobre a súa propia páxina principal. E por iso imos volver estas etiquetas en só un momento. 

Entón, iso era o que eu propuxo só un momento atrás. Podemos engadir a estilización dun A páxina neste tag estilo, e podemos estilizar a fondo cor, o aliñamento do texto, se é o centro ou á esquerda ou á dereita. Pero moi rapidamente faría atopar ou un Deseño Web pensaría que este se fai un pouco complicado, porque está facendo o que é chama contido mesturando coa presentación dos mesmos. Está mesturando os seus datos ea estética do mesmo. E, de feito, se considerar o que vai pasar ao longo do tempo-- este é un moi pequeno A páxina web, está claro. Pero se eu engadir contido a esta páxina e eu engadir estilo desta páxina, a páxina está moi rapidamente máis e máis e máis. E supoña que quero ter unha segunda páxina web que comparte algúns deses atributos. Supoñamos que a miña segunda páxina web para o meu site-- tamén, quero todo center, e eu tamén quero todo con un fondo verde. Estou case terá que copiar e pegar algunhas destas liñas en que o segundo ficheiro, o que se sente ben. Vai resolver o problema. 

Pero o que si queres unha terceira páxina ou nunha páxina 30 ou a páxina 40? Agora eu vou estar copiando e pegar unha morea de código duplicado en varios arquivos. E así supor que Eu decido ou eu son dito, hey, non estamos a usar un fondo verde máis. Nós imos comezar a usar laranxa. O que ten que cambiar? Ben, ten que cambiar ese estilo de verde para laranxa en cantos lugares? Como 30 ou 40 prazas. É tediosas. É propenso a erros. Hai unha serie de razóns onde non quere inducir este tipo de dor para si mesmo. E por iso non sería bo se puidésemos tomar o que eu só colocado entre estes dous amarelos etiquetas, estas marcas de estilo, inclui-lo para fóra, e poñer toda a miña estilización nun arquivo central que todos os 30 ou 40 dos meus outros ficheiros pedir prestado ou de algunha forma de referencia, non moi diferente da rede diagramas que estabamos facendo antes? 

Entón, se eu entrar aquí, eu son indo realmente propoñer que substitúe o tag de estilo con algo chamado tag enlace, que é horrible, terrible nomeado, porque non usar o link de etiqueta para crear o que nós, humanos, coñecido como unha ligazón nunha páxina web. Para iso, utiliza o que marca? Como se crea unha ligazón nunha páxina web? Audiencia: A a. DAVID J. Malan: A unha, ou referencia tag, que entrou na Disney antes. A ligazón tag aquí está dicindo isto-- ligazón a un ficheiro chamado styles.css, a respecto dos cales será que é o meu estilo. Polo tanto, este é un dos S de en follas de estilo en cascada CSS--. Estilo sheet-- dous dos S de en CSS. Fervenza folla de estilo. Isto só significa que, hey, navegador, vaia atopar styles.css no servidor local e usalo como súa folla de estilo, o que significa que dentro dese ficheiro será toda a estilizações que temos que facer. E entón o que este ficheiro pode parecer é este. E eu vou facer iso é un rápido exemplo, por que non necesitamos para moito para as herbas daniñas aquí. Pero se eu copiar este, o que estou propoñendo é que un programador crear un novo arquivo, colar naqueles lines-- whoops-- pegar nestas liñas, gardalo como styles.css e, a continuación, en o outro ficheiro, eliminar todo isto e substitúe-lo en vez con este enlace tag. Así que se eu conectar href = "styles.css", a relación debe ser "estilo" preto etiqueta. Gardalo. Volver ao meu helloworld. Recargar. 

Literalmente nada acontecese. Iso é unha cousa boa, porque significa que é realmente todo o traballo. Para probar que logo, supoña que faga unha erro de dixitación, e eu chamo iso de "Styles.css" cun capital S, que é incorrecto, e recarregar. Agora podes velo simplemente non funciona. Agora, por que? Ben, imos usar un técnica de antes. Deixe-me ir adiante e, en meu navegador, en Chrome, eu son abrirá este especial separador de rede como antes, e déixeme volver cargar a páxina. O que non é vostede sorprendido ao ver agora? Ou quizais está sorprendido ao velo. De calquera xeito, o que ve agora? Audiencia: [inaudível] DAVID J. Malan: Non se atopou. Por que non se atopa? Ben, o capital Styles.css-- O S- non existe. I misnamed lo. typo simple. Pero eu estou quedando comprensible agora un 404, xa que o servidor está dicindo, hey, non se atopa. Literalmente, non sei onde este ficheiro é. Así como resultado, o navegador amosa o que pode, o contido bruto da páxina, que foi de 200, o código HTML, pero a estilización non pode engadirse posteriormente. E iso é o que se quere dicir con cascada. Pode tipo de engadir lo despois, e tipo de refina a estética da páxina web. E pode incluso substituír os estilos con aínda outros ficheiros de estilo se ti queres. Non se atopou, aínda que, neste caso, porque está claro, eu misnamed lo. Entón eu tería que fixar iso en primeiro lugar. 

Entón, imos adiante e propoñer o seguinte. Imos ir adiante e facelo. Comezando quizais seu arquivo helloworld, déixeme só invitar unha parella presentan de suxestións. Entón, Victoria, que quería facer un texto grande, non? Todo ben, entón podemos non facer o texto máis grande. E nós imos arrincar cada ruta só un problema para resolver. Facer o texto máis grande. Non vou incomodá escribindo isto cando teñen tecnoloxía bala ben aquí. Entón algúns problemas. Entón, nós estamos indo a tentar para facer o texto máis grande. Todo ben. O que máis alguén propón? O que máis podería queremos facendo nunha páxina web? Imos chegar a un pequena lista de cousas e logo, delegar ao grupo para descubrir iso. 

Audiencia: [inaudível] 

DAVID J. Malan: OK, texto da posición en diferentes partes da páxina? Todo ben. Algo máis. 

Audiencia: [inaudível] DAVID J. Malan: É. Así, un gif é só un formato diferente. Acabamos utilizado, o que, a png ou jpg, probablemente? Foi utilizado un jpg. Se está curioso, unha excesiva responder á súa pregunta é un jpg é xeralmente usado para fotografías, porque soporta millóns de cores ou cores de 24 bits. Un GIF é xeralmente usado para, como, memes de internet Estas animacións dias--, como GIFs animados. Pero iso pasa a usar unha cor máis pequena paleta, só 256 cores posibles, pero soporta transparencia e animación. E despois hai o png, que soporta transparencia e máis cores pero non animación. Polo tanto, é un trade-off. Así, a adición dun gif, porén, sería funcionalmente equivalente a engadir un png ou jpg. Si. Fonte da imaxe é igual. Entón outra cousa. Imos chegar a algo que que enviamos para Victoria facendo aquí. 

Audiencia: Engadir botóns dun formulario. DAVID J. Malan: OK. Entón engadir botóns de un formulario. E nós imos facelo xunto. Así que vai ser un xeito perfecto logo este desafío. Algo máis? Que desexa facer? A web se sente moi por baixo do esperado se iso é todo o que podemos facer. Audiencia: Cambia a cor do texto. DAVID J. Malan: Cambiar o que? Audiencia: Cor do texto. DAVID J. Malan: Cambiar a cor do texto. Todo ben. Entón, imos facelo. Só de novo non que é, só de forma mecánica, facendo o que estou facendo, Eu estou indo a chamar a música para quizais cinco minutos aquí. Estás convidado a usar Google. Estás convidado a preguntarme, e Vou murmurio unha información no seu oído. Vostede é benvido para ollar sobre os ombreiros de outros. Pero resolver só un destes problemas. Pero imos facer o último, o constitúe un, se puidésemos, xuntos. Así, cinco minutos para resolver calquera destes problemas empregando Google, a intuición, ou calquera outros medios dispoñibles para ti. 

[Reprodución de música] Todo ben. Non te preocupes se quere para manter mexer, pero eu vou romper un par destas respostas. Así, a primeira suxestión Victoria foi para facer o texto máis grande. Polo tanto, hai algunhas formas de facelo. Eu actualmente restaurada miña pantalla para ese tamaño, aínda que eu teña ampliado artificialmente só para ver as cousas. E imos facelo. Deixe-me ir adiante e coller texto xenérico Latina só así temos algo para traballar. Entón me dea só un momento. Vou facer tres parágrafos. OK. Este será un exemplo mellor. Así, para os curiosos, en meu hello.html, só pegado tres absurda parágrafos Latina só así temos algún texto para traballar. E o obxectivo da Victoria era forman parte do texto máis grande. Entón eu podería, como antes, entrar aquí. E deixe-me facelo de maneira correcta. Vou ter unha ligazón tag que apunta a un ficheiro chamado "styles.css," a relación dos cales é novo "estilo". E entón eu vou gardar ese e abrir este "styles.css." 

Entón, como antes, teño a capacidade neste arquivo CSS para realmente substituír o patrón estética dunha páxina web, ea estética estándar, por suposto, son moi aburrido. É unha especie de tamaño de fonte normal, branco texto, fondo negro, e así por diante. Entón, supoñamos que quero facer todo isto de texto máis grande. Podería facer algunhas cousas. No meu arquivo styles.css, I podería dicir, vostede sabe o que, aplicarán o seguinte a o corpo da miña páxina. Dalle facer a tamaño de fonte 24 puntos, que é un número que podería usar o Microsoft Word. Déixeme volver para o meu web páxina aquí e actualizar, e podes ver que xa é moito maior. E podemos estar un pouco tolo, así como nós pode nun desktop-- facelo 96 puntos. Recargar. E está quedando un pouco complicado neste momento. 

Pero eu podería ser un pouco máis preciso. No canto de aplicar este folla de estilo para o corpo da miña páxina, o que máis podería aplicala lo ao contrario, o que outra etiqueta que poden aínda funcionan do mesmo xeito? 

Audiencia: A etiqueta p? DAVID J. Malan: etiqueta P. Entón, a cabeza non sería correcto, porque a cabeza, non pode realmente controlar a estética. Non hai ningunha texto alí ou non. Pero o p tag-- I pode mergullar un pouco máis profundo, por así dicir, para o parágrafo etiquetas. E aínda que hai tres, iso é perfectamente ben, porque en CSS, cando só dicir "p", este significa aplicar o seguinte a calquera etiqueta que corresponde a esta selector, o selector de só sendo o nome da marca. Así, sempre que ver un "P", aplicar o tamaño da fonte, e imos facelo máis razoable novamente-- 24 puntos. E vostede sabe o que, só para unha boa medida, imos facer a memoria só vermello para o momento. E agora, se eu actualizar, agora vexa tres parágrafos feas. 

Pero agora supoña que eu son unha especie de-- quero o primeiro parágrafo para ir para o usuario. Non quero só aumentar o tamaño da fonte de todo. E así eu realmente quero para identificar ou distinguir entre estes parágrafos. Entón, imos librar do vermello, porque iso é só un tipo de brega, e imos adiante e facer o tamaño de fonte de 12 puntos por defecto, de xeito que estamos de volta a algo algo máis razoable. E agora eu só quero aumentar o tamaño da fonte do parágrafo primeiro. Podo facelo en poucos formas, pero dunha forma que é quizais máis de instrución no momento é facer o seguinte. Deixe-me ir adiante e dicir, este parágrafo ten unha identificación única de "primeira". Podería chamar iso de calquera cousa que eu queira. Podería chamar iso de "foo" ou calquera outra palabra, pero eu vou darlle algún nome semanticamente significativa como "primeiro". Este é o identificador único, a identificación, ao meu primeiro parágrafo. 

¿Que podo facer agora na miña folla de estilo é ser un pouco máis precisa. No canto de dicir, aplicar o seguinte para a etiqueta p, Podo dicir que o following-- aplicar o seguinte, ou seleccione o elemento HTML que ten unha identificación única de "primeira". O que quero aplicar a el? Un tamaño de fonte de 24 puntos. Entón, eu teño dous selectores agora. Un fai toda a apartados 12 puntos. Pero este, sobre todo porque se trata second-- se trata último na file-- Isto ten un efecto en fervenza. Acaba de facer todo o meu parágrafo marcas de 12 puntos, pero iso agora fervenzas e substitúe iso por calquera elementos na páxina, calquera etiqueta de páxina cuxo ID único é entre comiñas "en primeiro lugar." E a hashtag neste contexto só significa "identificador único". Non colocar-lo no ficheiro HTML. Eu, aquí, só dicir entre comiñas "en primeiro lugar." 

Entón deixe-me volver cargar. E agora eu vexo, ah, OK. É dicir, non é que fermosa, pero é o tipo de como o prólogo dunha libro ou algo así, onde o primeiro parágrafo é maior. Podería ser aínda máis preciso con só as primeiras letras, pero polo menos Teño exercido máis control. Agora maybe-- quizais quero facelo en ocasións, por calquera motivo, e por iso eu non quero que iso aplica-se a só unha etiqueta HTML. Pola contra, imos dizer-- imos tamén facer o seguinte. Class = "importación". Tendo en conta que o ID é usado para unicamente identificar unha cousa, unha etiqueta, na súa páxina web, unha clase é para ser usado en calquera número de elementos ou etiquetas na súa páxina web. Polo tanto, é reutilizable. Un ID non é reutilizable. Unha clase é reutilizable. 

E vostede sabe o que, por calquera reasons-- filosófica Non rematar a miña thought-- eu vou dicir que o primeiro párrafo eo parágrafo segundo, son importantes. Entón eu vou para aplicar a clase chamada "Importante", que, se eu gardar o meu arquivo e actualizar, non ten impacto funcional aínda. Pero eu engade algúns metadatos para o arquivo, tipo de algo separado a partir dos datos do núcleo do ficheiro, de xeito que agora na miña folla de estilo, si no canto dicir ".Importante" - vostede sabe, todo o que é importante, eu son fará font-color, red-- ou mellor, non font-color, só a cor. hai inconsistencias en CSS desgraza. E recargar. Agora observe o primeiro dous parágrafos son vermellos pero non o terceiro, porque eu só aplicou a clase de "importante" para as dúas primeiras destas cousas. 

Así, en IDs, ten a capacidade para especificar de forma moi precisa. Con clases, ten a capacidade de reutilización. Pero en ambos os casos, teña en conta a tipo de principio de boa deseño onde consignado fóra todo o estética no meu arquivo styles.css. Polo tanto, non hai confusión aquí. Non hai ningunha mención de vermello ou bold-Facing ou tamaño da fonte neste arquivo. Pola contra eu teño semanticamente, significativamente caracterizado meus datos como, aquí é algúns datos importantes. Velaquí algúns datos máis importantes. Ademais, aquí é o "Primeiro" dos meus datos importantes. Entón HTML é todo sobre a especie de reserva, literalmente, palabras e parágrafos e construcións na súa páxina con esas pequenas suxestións, se Vai, que pode dalgún xeito, aproveitar a usar outras técnicas como CSS deste xeito. 

Así, en resposta á pregunta de Victoria, podemos facer un texto máis nese sentido. Hai tantas outras formas, pero a fonte tag-- paréntese de apertura "font" - é, en realidade varios anos de idade. E este é o problema, Tamén, con base só en resources-- en liña eles tenden a ser superada. E, de feito, que foi suspendido, porque o mundo realizado, o que significa "font-size = 7" significa? Isto non acontece. E así por moitos anos e este dia-- un do lado obsérvase aquí é que é realmente incrible Dolores ás veces aínda para desenvolver sitios ao web, porque a Microsoft e Google e Mozilla e os outros miúdo discordan sobre o xeito no que para interpretar unha especificación como HTML. 

Hai un libro de regras para HTML que xeralmente di o que quere dicir que cada etiqueta. Pero ás veces é deixar á criterio da aplicación, discreción e Google, Microsoft. E así vai a miúdo ver nunha web algo parece diferente nun PC do que fai nun Mac, e iso é realmente porque, ao final do día, non probalo ben en ambas plataformas. Pero é tamén a causa razoable, persoas intelixentes han desacordo e as empresas van desacordo, e así un dos retos da programación á web ou deseño cousas para a web Está escribindo o seu sitio web de forma que funciona en todos os navegadores web. Pero aínda que é razoable, non? Hai tantas versións de tantos navegadores aí que, nalgún momento, tamén ten que facer un xuízo e ten que decidir como unha empresa, todo para e-commerce de estilo lugares onde está intentando usar o máis recente e máis grande tecnoloxías para dar realmente un bo usuario experiencia. Pero algunha porcentaxe dos seus usuarios poden aínda estar usando Internet Explorer 6 ou 7 ou 8, en especial, en función do país que están vindo. 

E así por moito comunmente consultada é algo como "estatísticas do navegador web." E se somos a-- vexamos Wikipedia para ver como up-to-date este gráfico é Se hai un. Entón, aquí podes ver onde os navegadores en realidade son, segundo decembro de 2015, segundo o Goberno dos Estados Unidos. Chrome é a cota de mercado do 42%, seguido polo IE, en gran parte en ambientes corporativos ou a configuración do ordenador, por suposto, seguido polo Firefox, logo Safari, entón Opera non o fixo facer o mapa aquí por algunha razón, e que outros. Quizais sexa baixo outros. Pero máis problemático que é-- imos ver se Wikipedia tamén versións de navegadores version-- 

Imos para as estatísticas do seu navegador. IE. Mesmo iso non é suficiente. estatísticas do navegador. Miña versión. Isto non vai ser certo. Veremos versións. navegador cota de mercado. Imos ver se isto vén á tona. OK. Agora iso está quedando algo máis útil. Entón, aquí, entender que todos temos diferentes versións de navegadores. E, meu Deus, se look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45. É dicir, os navegadores cada vez máis actualizado, e, por veces, algunhas destas mudanzas son significativos en termos de funcionalidade. E así, nalgún momento, o xerentes de produto ou os enxeñeiros cómpre facer unha decision-- vostede sabe o que, só o 1% da poboación mundial aínda está a usar o IE 7. Ao inferno con eles. Nós só non vai apoiar este navegador. E o que significa non apoiar? Isto pode significar que os botóns non funcionan na súa páxina web, ou pode significar a formato está completamente apagado. Ou pode ter que facer ese mesmo xuízo en mobles nos días de hoxe, onde estamos non vai apoiar iOS 5 máis. Entón, a xente só ten que actualizar. Ou non imos apoiar Cupcake no sistema operativo Android para dispositivos Android, porque, como o mundo-- como o mundo da tecnoloxía quere avanzar, que tipo de quere arrastrar o mundo con el para que non Ten que seguir sendo compatibles con versións anteriores para que pode ofrecer novas e boas características. Esta é certamente unha das razóns por que tantas empresas están lanzando actualizacións automáticas e tipo de forzando as últimas versións de software de nós. E incluso empresas como Apple pode clasificar de forzalo case ou obrigar vostede en termos de forzas de mercado para mercar un novo teléfono, porque simplemente non actualizará máis o seu teléfono antigo. Entón perda a máis recentes e mellores recursos, porque é dispendiosa a eles como un empresa para manter máis vello, sen dúbida versións inferiores de software. Pero o efecto neto é que Tamén sofren iso tamén. 

Entón, imos dar un ollo a só un par de cousas finais aquí. Imos derrubar rápido real algunhas das esas outras balas, se curioso. Entón, se estaba tentando, por exemplo, a posición O texto en lados diferentes do páxina, eu vou facer unha forma rápida, pero non é diferente formas de facelo. Deixe-me ir adiante e eliminate-- simplificar este como segue. Déixeme só volver ao meu , Parágrafos simple simple. Déixeme volver para o meu styles.css. E eu só vou usar o simple-- que pode ter visto en Google ou recollida de earlier-- text-align dereita. E recargue esta páxina. Agora todo parece para ser aliñado á dereita, como se pode ver na sobrecarga aquí. 

Podemos facelo parecer un pouco máis reservar-like, e podemos dicir "justify" e recargar. Agora é bo e cadrado en ambos lados, o que é moi ben. Outra meta que tivemos aquí era a cor do cambio do texto. Entón vimos que co meu texto en vermello. E agora engadir botóns de un formulario. Entón, por que non tentar facer exactamente isto? Pero, primeiro, deixe-me ir a un sitio web que a maioría de nós usar cada dia-- Google. E imos dar un ollo como Google realmente funciona. Pero eu vou facer iso. Primeiro déixeme facelo em-- si, deixe-me ir a Google en primeiro lugar. Vou ter que ir Configuración de Google, porque quero desactivar algo chamado resultados inmediatos. 

Entón ten que notar na Google estes dias-- déixeme volver e activar isto. Entón, se eu comezar a buscar para "gatos" como este, ter en conta que non só Recibe auto-completar-se superior, de súpeto, a propia páxina parece cambiar moi rapidamente, así como, e iso é o Google usando unha linguaxe chamada JavaScript tentando ser útil. Pero, desgraciadamente, tipo da mexe-se a nosa discusión do que está realmente a suceder por baixo do capuz aquí. Entón, eu son só unha especie de rápido Apague resultados inmediatos. E eu vou prema Gardar. E agora eu vou abrir esta barra de ferramentas de diagnóstico que manter apertura baixo a guía Rede. Entón, imos facelo. Agarde me-- whoops-- rolar esta un pouco para abaixo. E déixeme buscar "gatos". 

E agora notice-- en realidade, esta é unha boa oportunidade para discutir por un momento. Teña en conta o momento en que eu type-- paralo. Pare con iso. OK. Teña en conta o momento en que eu escriba a letra C, ver a parte inferior da pantalla. A- T- S. O que fai o fondo desta pantalla, meu guía Rede, suxiren está pasando cada xa que eu escriba unha carta? Desafortunadamente, o sapo é moi perturbador hoxe ou o trevo ou o que é. O que estaba a suceder cada vez que eu escriba? E déixeme borrar o tapón e escriba-lo de novo. whoops assim--. Cada vez que eu escribir unha letra, C- A- T-- así unha nova liña, obviamente, segue aparecendo. Que cada unha destas liñas representan, con base no que vimos e discutido ata agora? Audiencia: Unha busca? DAVID J. Malan: Unha investigación ou máis xenericamente, unha solicitude HTTP do meu navegador para o servidor. Ben, porque é o meu navegador facendo un HTTP solicitar cada vez que eu escriba unha carta? 

Audiencia: [inaudível] DAVID J. Malan: Si, está dando me este de auto-completar. Como, ¿Onde é que estes resultados da busca veñen? Así, cada vez que eu escriba un carta, Google envía máis e máis e máis de a palabra que eu estou escribindo. Por que? Porque queren me dar unha mellor e mellor, mellor suxestión, unha lista de suxestións, para que a palabra Estou intentando realmente completa. Entón, iso quere dicir literalmente cada carácter que escribir en Google está sendo enviado, en definitiva, granel, pero tamén, por veces, un á vez, a fin de aplicar estes recursos de enchido automático Cando os datos e, por suposto, na web. 

Agora, imos dar un ollo ao que realmente acontece cando premo Google Search. E entón nós imos aproveitar iso nós mesmos. Entón, se eu rolar para abaixo agora á propia primeiro pedido que acaba de pasar. Teña en conta o seguinte. Foi enviado a un longo URL-- https://www.google.com/search? e despois unha morea de cousas. Veremos que en realidade agora no separador do navegador en si. Imos librar da barra de ferramentas aquí. Aquí está a páxina de resultados de busca. E noten aquí o URL. Agora, probablemente pode adiviñar o que está pasando aquí, en parte. Entón, en primeiro lugar, unha definición. Isto parece é o destino onde o formulario é enviado. Entón, cando eu escriba no palabras "gatos" e prema Intro, Ao parecer, Google enviou a miña entrada de texto para este URL que teño resaltado alí, barra de procura. Acontece que, en unha URL, algo que acontece despois un punto de interrogación é, como nós seguir a dicir, un par de valores clave que foi introducido no formulario ou de algunha maneira transmitido a partir da navegador ao servidor. 

Entón cada vez que escribir a entrada para unha forma na web e é enviado como temos que chegou a discutir, a través dun get, un destes Virtual sobres, o contido de que envelope-- si, manter quedando recheo fisicamente no sobre en clase hoxe, pero tecnoloxicamente é realmente poñer na URL. Entón, en realidade, déixeme peneirar iso. Onde ve a entrada do usuario? Onde ve algo que eu mesmo escrito aquí enriba? Si, por iso "gatos". Non? Entón deixe-me destilar esta en algo máis simple. Vou borrar todo sobre este URL que eu non entendo, e eu só vou saír Lo como isto-- / search? q = gatos. Imos ver onde q ven en un momento, pero que se sente como mínimo cantidade de información que eu forneci. E agora eu vou bater Intro. E entender que aínda funciona. Aínda volver unha morea de gatos. Entón, Google é máis extravagante que iso nos días de hoxe. É 2016, non en 1999. Polo tanto, hai outras cousas que o meu navegador está enviando para o servidor. Pero esta é minimamente todo o que é necesario. 

Entón, o que está a suceder? Ben, primeiro déixeme ir adiante e ir ao Cloud9 e deixe-me ir adiante e pechar as guías anteriormente. E eu vou facer iso no meu posúe só por un momento. Eu estou indo a ir adiante e crear novo arquivo. E eu vou gardalo como google.html. E eu vou moi quickly-- Vou roubar, en realidade, algún deste texto só para aforrar tempo. Vou poñer esta aquí. Non vou molestar-se con estilización calquera momento. Nós imos chamar iso de "My Google." E eu estou indo para se librar de todo o corpo. E eu vou facer o seguinte. Deixe-me facer zoom. Formar Action-- e como eu brevemente mencionado earlier-- whoops-- como eu brevemente mencionado anteriormente, á acción dun formulario é onde envía os datos. Entón google.com/search. E o método que desexa usar pode ser unha de dúas cousas. Pode ser tanto "incorporarse", como temos discutir, ou pode ser "post". De momento, o esencial diferenza é que, se usa "obter", toda a información que o usuario ofrece envíase en URL. 

Isto é óptimo para cousas como investigación motores e algunhas outras aplicacións, pero en que circunstancias non quere encher un formulario e ter a información acabar o URL, como na barra de enderezos do seu navegador? Que tipo de formas de facer você-- Audiencia: [inaudível] DAVID J. Malan: Si, como o que? Audiencia: Os contrasinais. DAVID J. Malan: Si, entón rexistro en Facebook ou algún sitio. Esta é a entrada do usuario desde un formulario, unha caixa de texto, pero probablemente non quere que aparecendo na URL do navegador. Por que? É dicir, se cadra uns implicacións de seguridade na rede, pero more-- gusta, máis simplemente, o que se seu compañeiro de cuarto, o seu outro significativo, seus fillos, o seu cónxuxe parece a través do historial do navegador? Non é o seu contrasinal correcta hai na historia do seu navegador. Que non se sente como un bo deseño. Ou aínda máis tecnicamente, Supoña que está intentando para subir unha foto a Flickr ou Facebook ou wherever-- que é a entrada de usuario, aínda que é un pouco máis interessante-- como fago para empinar unha imaxe na barra de URL? Vostede tipo de medio que non pode. Vostede medio que pode. Pero, realmente, eu son duramente presionado imaxinar a facer iso. Entón eu teño un outro método para subir fotos a un sitio web, e que outro método é chamado de "post". Pero, polo de agora, imos só falar "Obter", que é o máis simple dos dous. El só pon toda a entrada do usuario para o URL. 

Entón aquí está o xeito que eu estou creando. Quero unha entrada. E vostede sabe o que? Vou dar un palpite aquí. Vou lembrar o meu input "q" a "consulta". E eu creo que este é un dos debuxos orixinais, se cadra, a partir de 1999. E, a continuación, o tipo de entrada é só vai ser "texto". E entón eu vou ter outra entrada que non precisa dun nome, como veremos en breve ver, o tipo de que é "enviar". E iso vai dáme un botón especial. E iso. 

Entón deixe-me ir adiante e salva este ficheiro. Vou volver para o meu navegador e vaia google.html. Intro. E é unha especie de escasa para dicir o mínimo. Pero deixe-me ir adiante e buscar "gatos". E noten que eu estou actualmente neste URL Cloud9. Pero no momento clic isto, onde espera que eu vou acabar? 

Audiencia: Google. 

DAVID J. Malan: Google. Entón, imos premer en Enviar. E, de feito eu re-aplicado Google. Non? É máis simple. É máis lixeiro. É dicir, o meu código é claramente mellor que deles, da confusión vimos anteriormente. E vostede sabe o que? Eu estou indo para apimentado iso un pouco. Non mencionei iso antes. Hai etiquetas como H1, para a rúbrica 1, o título máis importante nunha páxina. "O meu Google," Eu vou chamar este. Déixeme volver cargar. É mirar un pouco mellor xa. E, de feito, xa sabe o que? Teño já-- eu mentín. Eu dixen que non ía estilo este, pero eu vou estilo este como antes. E o meu corpo vai ser, digamos, centro de text-align. Está parecendo máis como Google xa. 

Eu teño unha quebra de liña, con todo, para ese botón Enviar. E ocorre, Pode usar n, ou pode máis literalmente só dicir, dáme unha liña de creba aqui-- tag br. E se eu volver cargar tanto, agora que vai máis alá. É un pouco feo, entón eu podería facer varias quebras de liña, pero non imos ser moi ganancioso aquí. Entón agora imos ver se funciona para "cans". Parece que traballa para "cans", como ben. Entón cal é o takeaway convincente aquí? Um-- non era un gran salto para introducir algunhas marcas, como a marca de formulario na marca de entrada. pero fundamentalmente é, todo o que estamos facendo Está panca a nosa comprensión HTTP eo feito en definitiva, que as formas cambiar o que está en URL do navegador, e así, polo tanto, podemos mecánicamente proporcionar datos para un servidor facendo un formulario HTML e saber que comprende o servidor HTTP, Así como o noso corpo comprende, como, axustado a man, que mesmo protocolo, e así que volvemos a resposta que en definitiva, de esperar. 

Entón, imos tratar de facer un último momento co móbil, e eu vou make-- vou engadir este código para diapositivas. Entón, se quere xogar, ten certamente pode leva-la de alí. Pero eu estou indo a ir adiante e facer unha cousa. Eu estou indo a ir adiante e abrir o meu índice página-- miña páxina Ola, como antes, o que Ten unha morea de este texto faux-Latina, ou un texto sen sentido Latina e has-- parece que iso neste tipo de letra. Pero deixe-me ir adiante e facelo. Eu estou indo a ir a Cloud9. E non ten que facer este paso. Eu só vou facelo só. Vou prema Compartir. E esta é unha característica só de Cloud9, en que Eu podo facer o meu ambiente público. 

E só por unha cuestión de demostración, déixeme facer. Vou facer a miña aplicación pública. Teña en conta que me avisando, son I seguro se quero facelo, porque iso vai facer que no mundo, se eles están aquí agora ou ver o vídeo máis tarde na Internet capaz de ver o que vexo. Pero iso é OK. Eu vou dicir "Done". E déixeme encouraged-lo, se eu fixen este correctly-- déixeme probalo primeiro. Dalle, se non mente-- nun navegador no seu ordenador, vaia a este URL, e espero vai ver o meu texto en latín. E para quedar claro, é non en execución no meu portátil. É na nube. Está na Cloud9 literalmente pero Eu fixen o meu escritorio público para que calquera persoa en Internet Pode acceder a miña páxina Latina. 

Ir ao mesmo URL na teléfono, se puidese. Se vai custa-lle, con todo, pode só ollar por riba do ombreiro. Audiencia: [inaudível] DAVID J. Malan: Eu sinto moito? Audiencia: [inaudível] DAVID J. Malan: Só palabras latinas. Iso é todo. Pero iso é o que ten que ver. 

Audiencia: É. DAVID J. Malan: Yeah. Si. OK. Para que eu poida manter o seu teléfono por un momento? Entón, espero que, se está accedendo Lo, debe ollar case ilegível. É still-- Quero dicir, é ilexíbeis debido á Latina. Pero tamén é lexible para que outro motivo? Como, o que lle desagrada sobre iso? Audiencia: É pequeno. DAVID J. Malan: É super, super pequeno. Entón, como podemos solucionar isto? É super, super pequeno no teléfono do Victoria e, se tirou Lo mesmo, probablemente, pequeno no seu teléfono, así como, a menos que teñen opcións de accesibilidade activado. ¿Que é iso? Podería simplemente usar e zoom, o que é viable, pero entón só ve algunhas palabras de cada vez. Entón, agarde un minuto. Sei como fixar iso. Non? Eu podería usar CSS, e eu podería cambiar o tamaño de fonte de 12 puntos a 24 puntos. Pero o efecto colateral de que, por suposto, será o momento, nun escritorio ou un portátil, Agora o texto é dúas veces maior. E por iso sería tipo de ser agradable para distinguir entre dispositivos, e verifica-se alí fóra son formas de facelo. existen varios formas diferentes, de feito, polo cal mediante CSS e recursos máis sofisticados que non vai entrar en en gran detalle, podes esencialmente consulta o navegador e dicir: se a súa pantalla é menor que iso moitos píxeles, use este tipo de letra. Se a pantalla é maior que iso moitos píxeles, use este outro tipo de letra. 

Pode ser aínda máis extravagante aínda. Se xa visitou un páxina web que, nun escritorio, ten un gran menú quizais fóra á banda, e entón todo o contido é para o lado de que menu-- que é unha especie de paradigma común. Menú do lado esquerdo, o contido á dereita, ou viceversa. realmente non funciona no móbil cando o seu pantalla é só iso moitas píxeles de ancho. Entón, máis común no móbil é, seu menú de súpeto comezar entrou en colapso, e ten que facer clic nun botón para velo, ou o sitio web pode pór o menú enriba del e poñer o contido baixo del. E pode aplicar estas cousas de varias maneiras, tamén. Podes preguntar aos seus programadores, hey, o equipo, a calquera hora ve unha solicitude HTTP desde un Android dispositivo, un dispositivo Microsoft, Google dispositivo, un dispositivo de Apple, use esta tamaño de fonte e utilizar ese esquema do menú, ou entón usar este estándar maior esquema. 

Agora, usando o técnica fundamental hoxe podería usar os enxeñeiros para saber se é un iPhone, un teléfono Android, un ordenador portátil, un escritorio visitar o servidor da empresa? En que é que van obter esa información? 

Audiencia: cabeceira? 

DAVID J. Malan: Si, a cabeceira HTTP. Así, cada petición HTTP proveniente seus clientes para os seus servidores incluír, dentro dese virtual sobre, un grupo enteiro de cabeceiras HTTP, un dos cales está o navegador eo sistema operativo aínda, se o coidado de este nivel de detalle. Agora, é unha cadea de críptica de aparencia, pero hai software que só vai simplificar isto, e pode simplemente pedir na programación code-- PHP, Java, C ++, whatever-- o teléfono isto-- o dispositivo é este usuario a usar? E entón pode dicir, amosar-lles esta versión do sitio web, se é un teléfono. B-lles que esta versión do web de ser un portátil ou de escritorio. Pero non precisa aínda complexidade do lado do servidor. Podes facer mesmo a máis simple das cousas. 

Eu vou facelo. Eu estou indo a ir adiante para meu ambiente Cloud9, e eu estou indo a engadir unha marca que viu en Google antes. É o chamado metalag. E eu nunca me lembro un regalo, entón Vou transcrevê-lo aquí. meta name = "viewport" e, a continuación, content = "width = ancho do dispositivo, intital scale = 1 "e é iso. 

Por iso, podería moi ben ser como un encanto máxico. Non é todo o que claro, pero iso ten algo que ver coa ventá de visualización, e ventá de visualización é só o corpo dun A páxina web, a rexión rectangular que define a maior parte da páxina. E este é só dicir o navegador, vostede sabe o que? Fai o ancho da páxina efectivamente igual á anchura do dispositivo. Noutras palabras, non pense que temos un tipo de espazo ilimitado. Supoña que só ten tanto espazo como o propio dispositivo é grande. E agora, se eu volver cargar esta no meu navegador, non vexo ningún cambio. Pero se eu fixese iso correctly-- e déixeme pola miña fingers-- todos recargar os seus teléfonos, ver un cambio atractivo? Si, é isso-- 

Audiencia: [inaudível] DAVID J. Malan: Si. OK. Entón, sen dúbida, máis lexible agora? Aínda pequeno, para ser xusto, pero non tan pequena como a imparable. E eu certamente podería substituír esa aínda máis con CSS ou do lado do servidor, pero cada vez que está ver é máis e máis recursos ser engadido a environments-- do lado do cliente JavaScript, como discutir mañá, CSS e HTML-- así que todas esas consultas se pode facer no cliente para incomodar a servidor moito menos e non ter que manter-se con, por exemplo, o constante ataque de novo o sistema operativo versións, novas versións do navegador. Pode simplemente deixar o navegador pedir o dispositivo, o grande é vostede, e logo facer un pouco lóxico decisións con base niso. Pero imos ver máis oportunidades para decisións lóxicas mañá no contexto dunha linguaxe de programación. 

Así, todas as preguntas, entón, sobre o desenvolvemento web? Hoxe non é de programación web, por se, xa que a maioría todo o que fixemos foi moi estético, se quixeren. Non hai ningunha toma de decisións en o código que escribimos, e é por iso que o HTML é unha cita linguaxe, non unha linguaxe de programación. Pero mañá imos dar un ollar rápido, en definitiva, en JavaScript, que é unha programación real linguaxe que nos permite facer un pouco máis. 

Algunha pregunta? Ben, deixe-me propor dous oportunidades opcionais para traballos de casa. Un é-- estes Cloud9 contas non expirará. Estás convidado a empregar Los para xogar con. É o nivel de servizo de balde. Entenda que, ao crear seu espazo de traballo, fixo público, que significa que calquera persoa na Internet pode ver o que está escribindo. Entón, talvez só considere non embaraçar a si mesmo se está poñendo o seu primeiro web Páxina aí publicamente accidentalmente, pero ninguén vai saber para ollar alí de calquera maneira. 

E dois-- déixeme tirar -Se esta URL, así como, especialmente se veu hoxe unha algo menos cómodo que outros, sen saber o que significa todo isto. Entender que máis gusta, que é tanto unha boa forma de adormecer e tamén para rir mentres Facendo iso, tamén ten unha morea de socialmente interesante e discusións relevantes para a seguridade nel de John Oliver, aínda que un comediante. 

Pero se non hai máis dúbidas, que nos trae para a recepción. Entón por que non ligo a música. Debe haber bebidas e lanches fóra. Estou feliz por convivir por tanto sempre que a xente quere, responder a preguntas máis one-on-one. Pero, se non, vostede é benvido para despegar en calquera momento, e imos velo de novo mañá de mañá para un pouco máis. Todo ben, grazas.