DAVID J. MALAN: Tudo bem. Estamos de volta. Assim, o objetivo desta sessão final é introduzir mais alguns conceitos mas também dar a todos uma chance ao tipo de esticar os dedos e realmente fazer alguma coisa um pouco de prática. O objetivo não é transformar todos nós para desenvolvedores web por qualquer meio, mas realmente apenas para lhe dar um gosto de alguns das construções fundamentais de que entra em programação web e hoje web desenvolvimento, de modo que o lado estática de coisas- nenhuma lógica, nenhuma programação língua, apenas conteúdo estático. E isso nos dará uma oportunidade para ver realmente o que um servidor web é, ver o que um arquivo HTML é, ver o que é HTTP é realmente servindo-se. Mas antes de mergulhar, qualquer retrospectiva perguntas sobre a computação em nuvem ou de segurança ou qualquer coisa no meio? Não? Tudo bem, bem, vamos fazer isso, apenas no caso o processo de se inscrever para algo leva alguns minutos. Vamos deixá-lo fazê-lo em segundo plano. Vá em frente, se pudesse, para c9.io. esta URL aqui-- Este é um terceiro serviço-- plataforma como serviço, se você will-- que vai convidá-lo para se inscrever para uma conta, e vai dar a cada um de vocês uma conta na chamada nuvem na infra-estrutura de outra pessoa, uma empresa chamada Cloud9. Mas o que é agradável sobre isto é que eles dão-lhe uma aproximação de um desenvolvimento real do mundo real ambiente, embora no nuvem e em um navegador web, e vamos usar isso para realmente experimentar um pouco hoje. E, em seguida, vá em frente e apenas navegar seu caminho para o processo de inscrição se você pudesse. Então, nós acontecer para usar esta na classe Eu ensino para todos os nossos alunos, tanto no campus como fora agora, e é substituído o que historicamente foi software de outra forma para download. Então, o que você estava ganhando acesso a é uma dessas máquinas virtuais, no essencial, que eu descrevi anteriormente. Portanto, esta empresa Cloud9 provavelmente rendas de um terço party-- fato Neste caso, Google-- um todo grupo de máquinas virtuais que de alguma forma pique em a ilusão de servidores individuais que cada um de nós tem total controle sobre. Não é muito preciso dizer que eles são máquinas virtuais, no entanto, porque o que Cloud9 realmente usa é uma tecnologia um pouco mais recente chamado de conteinerização. E deixe-me agarrar esta imagem aqui para pintar o quadro. 

Um recipiente é, se Lembra-se da imagem de mais cedo, um pouco mais leve peso do que uma máquina virtual. De facto, enquanto que a última vez que falamos sobre lá sendo um operacional sistema e um hypervisor e, em seguida, sistema operacional convidado, convidado sistema operacional, operacional convidado sistema, em cima do seu hardware físico, a diferença com esta nova tecnologia, contentorização, é que todos eles de alguma forma compartilhar o mesmo sistema operativo. Mas eles ainda criar a ilusão de todos ter o seu próprio exclusivo direitos administrativos e arquivos no servidor. Mas há menos software em entre você eo hardware. O resultado é que, em Teoricamente, um desempenho superior, porque você está usando ou desperdiçando menos recursos em que a camada de virtualização chamada. Então, isso é chamado conteinerização por natureza por meio de uma tecnologia chamada de encaixe, que é muito entrando em seu próprio. E isso é algo que engenheiros da sua empresa pode tipo de tipo de começar a falar sobre em breve, se já não o fez, porém não há dúvida nenhuma razão para saltar sobre quaisquer bandwagons. 

Então, com isso dito, o que você provavelmente vê agora é uma tela que parece um pouco com isso. ESTÁ BEM. E apenas chamar-me sobre se não. E se assim-- eu vou vir se não. Vá em frente e clique tão grande além de criar um espaço de trabalho, e você verá uma tela como esta. Você pode chamar o espaço de trabalho nomear qualquer coisa que você quer para agora. E, assim, na verdade, para simplificar, vá e- bem, alguns de vocês já têm espaços de trabalho. Chame-lhe o que você want-- negócio, Harvard, quinta-feira, o que quer que você gostaria. Você não precisa de uma descrição. Você pode deixá-lo privado, a menos que você já tem um monte de espaços de trabalho. Se você é forçado a torná-la pública, isso é bom para fins de hoje. Aqui, também, é um dos upsells. Você ganha um espaço de trabalho privado por padrão. Mas se você quiser mais, você tem que pagar por mais. Caso contrário, eles forçá-lo para fazer o seu público trabalho. Mas isso é bom, porque eles também alvo isso em comunidades de código aberto para incentivar as pessoas a realmente colaborar. 

E a última coisa que é importante, no entanto, é, depois de escolher um nome e depois de escolher privado ou público, clique HTML5, o ícone laranja grande segundo a partir da esquerda, e em seguida, clique em Criar Espaço de Trabalho. E, provavelmente, tomar um minuto ou assim, mas então você vai ter um meio ambiente, uma vez que você fazer isso, que parece uma reminiscência de o que eu tenho na tela aqui agora. Mas, novamente, isso pode levar um minuto ou mais para chegar a esta tela uma vez que você clicou em Criar Espaço de Trabalho. Mas, assim mim a bandeira mais se você gostasse de mim para dar uma olhada em qualquer coisa ou aconselhar. Tudo certo. Então, eu vou fundo isso por enquanto. Ligue-me mais se parecem temos dificuldades técnicas. Mas, novamente, isso pode levar um pouco para que a abrir. E vamos em frente e falar sobre o ele realmente significa para fazer uma página web, o HTML é, e como tudo isso agora interliga como estamos começando para realmente usar algumas das tecnologias. Assim, verifica-se que eu puder ir em meu pequeno Mac aqui, abrir um programa simples chamado TextEdit, ou no Windows eu poderia algo aberto chamado Notepad.exe. E eu poderia simplesmente fazer algo como isto-- "Olá, mundo". E então eu poderia salvar isto como hello.txt Então há mágica lá. Isto não tem nada a ver com a web programação, nada a ver com HTML. Basta criar um arquivo de texto simples. Mas verifica-se que a web A página é, literalmente, apenas isso. É um texto simples arquivo de texto contendo que você pode digitar em seu teclado, mas normalmente, mas nem sempre termina em não .txt, mas .html ou .htm. E você não apenas digitar palavras no arquivo. Você realmente tem que usar coisas chamadas etiquetas ou, mais geralmente, algo chamado de linguagem de marcação. 

Então eu vou para digitar muito rapidamente e, em seguida, explicar o seguinte. Eu vou primeiro digite este, que diz: hey, browser, aí vem um A página web escrito em HTML. E essas duas coisas juntas dizer, hey, navegador, a seguinte é de fato HTML. Hey, browser, aí vem o cabeça ou parte superior da minha página. Hey, browser, dentro da parte superior da minha página, coloque um título que é, "Olá, mundo." Hey, browser, após a cabeça do meu página, aqui vem o corpo da minha página. E, hey, browser, o corpo do meu página também deveria dizer, "Olá mundo". Então, quais são os detalhes salientes aqui? Isto é o que geralmente é chamado de uma declaração do tipo doc, e, francamente, é um pouco difícil de memorizar esta em primeiro lugar. Você só tipo de copiar-colar. Esta é a maneira formal de dizer, hey, browser, Eu estou usando HTML versão 5, que saiu um pouco recentemente. É um encantamento mágico que alguns seres humanos com um mau senso de design decidiu colocar no muito superior do arquivo. Mesmo que seja um pouco arcano, isso é tudo -lo means-- hey, browser, aqui vem com a versão 5 do HTML. 

O restante deste esteve conosco já há algum tempo, historicamente, mas foi evoluindo, e é provavelmente, foi ficando um pouco mais simples. Observe algumas características do que eu tenho realçado. Há essas coisas com angular brackets-- suporte esquerdo e o suporte direito. E observe a simetria aqui. E por simetria, quero dizer, como eu ter essa marca de início aqui ou uma tag aberta se quiserem, aqui eu tenho um perto tag ou uma marca de fim que é diferentes apenas na medida em que tem este barra no início da palavra HTML. E você pode pensar isso como eu estava casualmente propondo antes, hey, navegador, aí vem um pouco de HTML. E, inversamente, hey, browser, que é -lo para o início HTML-- e fim. 

Enquanto isso hey, browser, aqui vem a cabeça de minha página. Hey, navegador, é isso para a cabeça. Hey, browser, aqui é o corpo de minha página. Hey, navegador, é isso para o corpo. E dentro desse alguma texto arbitrário para agora. E dentro da cabeça, enquanto isso, é algum arbitrária, mas com etiquetas, por assim dizer, texto que diz, o título da minha página deve ser "Olá, mundo". Agora, por agora, você pode supor que os navegadores tem only-- ou melhor, páginas da web têm apenas dois parts-- da cabeça e do corpo. E a cabeça é geralmente apenas como a barra de menu, o material realmente apenas no topo. E o corpo é a coragem da página, tudo em tão grande rectângulo que enche a tela. Então, eu estou indo para ir em frente e fazer isso. Eu indo para ir em frente e clique em Salvar, Salvar arquivo. E eu estou indo para salvar isto como hello.html, e eu estou indo só para colocá-lo no meu desktop. E eu estou indo para ir em frente e clique em Salvar. E notice-- meu Mac em menos está gritando para mim. Você tem certeza de que quer fazer isso? E eu vou dizer, sim, usar HTML. Eu sei melhor neste caso. E agora eu estou indo para ir para o meu desktop onde eu tenho esse arquivo de repente. E eu vou dar um duplo clique nele. E você vai perceber que, por padrão, o Chrome aberto. Isso é porque é isso meu navegador padrão. E ele só diz: "Olá, mundo". Mas ele diz "Olá, mundo "em dois lugares. Observe superior esquerdo. Muito difícil de perder. É grande e corajoso. E onde mais é que parece quer dizer, "Olá, mundo"? 

AUDIÊNCIA: A guia. 

DAVID J. MALAN: Sim, a guia em si. Então, quando eu disse que o chefe da A página é tudo para cima top-- e na verdade este é o título. É apenas na guia aqui. E eu posso puxar este guia de modo a não confundir. Esta é apenas uma única guia agora, e, na verdade vemos "Olá, mundo" aqui em cima e "Olá, mundo" aqui em baixo. Assim, bastante simples. Mas também é bastante simples. E, na verdade, eu ampliada. Eu posso mudar o tamanho da fonte apenas para ampliar a acessibilidade. Mas vamos agora fazer algo um pouco mais interessante. 

Vou vai-- gritos, vamos me voltar para o meu arquivo de texto. Vou voltar para o meu arquivo de texto, e eu vou para mudar isso e dizer "Olá, Disney World." Salvar. E voltar para o meu navegador e clique em Recarregar. E agora, é claro, diz que "Disney World". E eu vou aumentar artificialmente em apenas por isso é mais fácil de ver. Então, agora, infelizmente, eu meio que quero a-- na verdade, isso é uma característica Mac. Eu quero clicar em Disney World e ir em algum lugar como disney.com, mas isso não funciona. Assim, um princípio básico da web é hiperlinks, links que ir para outro lugar. Então, como posso fazer isso? Bem, eu poderia apenas dizer, "Olá, http://www.disney.com." Guarde isso. Recarregar. Mas isso também, não clicável. E o que é bom aqui, embora Isto não é funcional ainda, é que parece que o navegador, literalmente, só faz o que eu diga a ele para fazer. Então, se eu apenas digitar uma URL como esta, ele só vai me mostrar a URL. Eu preciso usar etiquetas ou marcação linguagem para realmente dizer o navegador para fazer ainda mais. Então, eu estou indo para ir em frente e eliminar este por um momento. E eu vou dizer, hey, navegador, iniciar uma âncora aqui, uma ligação por assim dizer. E a hiper-referência, o destino dessa âncora, deve ser esta URL. E observe minhas citações. Eu poderia usar aspas simples, também, mas você tem que ser consistente, e eu geralmente apenas usar aspas para mantê-lo simples. Repare que eu vou fechar a tag. E então aqui eu vou quer dizer, "Disney World". E agora eu preciso de alguma symmetry-- colchete de abertura, / a, fechou suporte. 

Então o que eu introduzido? Tivemos algumas tags já. HTML, cabeça, título, corpo são todas as tags, por assim dizer, com os seus homólogos abertos e fechados. Mas aviso prévio, isto é uma espécie de fundamentalmente diferente. Isto é o que nós chamaremos em HTML um atributo. E um atributo é apenas um par de valores-chave. Isso é uma coisa comum em computador science-- par chave-valor. É uma espécie de ferramenta de comércio. Uma chave e um valor. Uma palavra e então alguns outra palavra ou palavras. E, neste caso, a chave é href, eo valor é a URL completa. E o que um atributo faz é influencia o comportamento de uma etiqueta. E, neste caso, temos de influenciar o comportamento da marca de âncora, porque precisamos ancorar este link para algum lugar. E como você faz isso é por meio do atributo. 

Então, eu estou indo para ir em frente e salve o arquivo agora. Voltar para o meu navegador e recarregar. E, voila, temos agora a início de uma página da web legítimos. Super-simples, mas se eu passar o mouse sobre aviso isto-- no canto inferior esquerdo, É super-pequeno. Mas você vê www.disney.com. E se eu clicar nele, na verdade, este me leva longe para disney.com. Agora, a coisa curiosa aqui é que ele não é o best-- o URL mais comercializável, mas isso é bom, porque este arquivo não existem na World Wide Web. Ela existe como um arquivo local no aparentemente Meus usuários directory-- / jharvard-- para John Harvard-- / desktop. Mas tem um URL. Ele só passa a ser local. Infelizmente, nenhum de vocês pode visitar isso, porque se você digitar esta URL, você estaria dizendo a seu browser, procure um arquivo chamado hello.html no seu disco rígido. E, claro, a menos que você tem vindo a seguir ao longo manualmente, não vai existir lá. 

Então, isso é bom. Nós ainda precisamos de certa forma, em última instância, para obter esse arquivo para a web, mas vamos desmembrar um par de implicações de segurança que acabamos viu e amarrá-lo de volta para o início discussão desta manhã. Acontece que, se um navegador, literalmente, só faz o que eu diga a ele para fazer, e parece ser o caso de que uma marca de âncora é influenciada pelo valor de este atributo chamado href mas exibe esta texto, isso pareceria implicar que eu poderia colocar a URL em ambos os lugares e recoloque e agora ver a URL e ir para o URL. Observe, se eu passar o mouse sobre o canto inferior esquerdo, Eu estou na verdade indo ainda disney.com. 

Então, se você já esteve phished-- P-H-I-S-H-E-D-- com um desses e-mails falsos de como o PayPal seu banco, você provavelmente já conquistou ligações dentro do e-mail que você está lendo que diz-lhe para clicar aqui para ir confirm sua senha ou confirmar a sua data de nascimento ou social ou algo socialmente engenharia que você divulgue em formação. Bem, eu poderia tipo de exame vantagem deste, não poderia? Eu poderia dizer algo como, www.paypal.com. E em vez de disney.com, I poderia ir para, como, badguy.com. Recarregar. E como é que é fácil de enganar, especialmente um leitor não-técnico ou superficialmente lendo leitor do que para clicar um link como este, que se eu clicar ele-- Eu realmente não quero ir badguy.com. Eu não sei o que está realmente lá. Então paypal.com, aviso prévio, é o que diz que vai, mas é claro que, se eu olhar para baixo super-baixa, que é um pouco embaçada, mas ele diz que badguy.com. Essa é a única dizer agora que eu estou indo para o lugar errado. E quando eu disse anteriormente que os bancos realmente não deve incentivar ou treinar usuários em links clicando, este é apenas uma manifestação disso. E é tão simples. Você agora um adversário se você faz algo parecido com isto e tentar enganar um usuário para visitar o seu site. Mas, por agora, vamos continuar coisas agradável e limpo. Nós estamos indo para ir em frente e retroceder estas mudanças. Recarregar a página. E eu voltar para disney.com. 

Vamos ver se não podemos provocar este apart um pouco mais. Assim, "Olá, Disney World." Eu vou dizer aqui. Talvez eu vou fazer algum espaço. "Esperamos que aproveite sua estadia!" Salvar. Recarregar. Não é rea-- isso não é o que eu pretendia, certo? Quer dizer, se eu estou tratando meu texto arquivo como um processador de texto, O que você esperava que iria acontecer aqui? Sim, eu sinto que há deve ser uma quebra de linha aqui, por isso se sente carrinho de alguma forma. Mas isso é realmente deliberada, porque assim como antes, o navegador só vai fazer o que você diga a ele para fazer. Eu não disse a ele para quebrar linhas. Eu não lhe disse que ele se mova para baixo, mesmo porém, intuitivamente, eu sinto que eu fiz. Então não é que precisamos um pouco mais de marcação, e eu vou corrigir isso como se segue. Vou de prefaciar este primeiro Olá com o que é chamado de tag de parágrafo. E então eu estou indo para ir em frente e enrole esta outra sentença em outra tag de parágrafo, apesar de eles são parágrafos super-curtos. Agora eu estou indo para salvar. Recarregar. E agora temos que espaço, e nós tipo de tem a semântica de dois parágrafos separados. 

Isso é tudo muito bem e bom, mas seria ser bom para adicionar uma imagem para esta página, então eu estou indo para ir buscar Mickey Mouse no Google Images. E só por diversão, eu sou indo para agarrar esta imagem. Eu estou indo para ir em frente agora e agarrar a URL desta imagem, embora não é diferente maneiras de fazer isso. Por agora, eu só vou copiar a URL. Vou voltar para o meu texto arquivo, e eu vou dizer aqui, img src = entre aspas que URL, super-longa. E, em seguida, a noção de um imagem é um pouco diferente. Não há realmente nenhuma noção de partida uma imagem e terminando uma imagem, como um tag de início uma tag final. Então, ele se sente um pouco estranho me semanticamente para fazer isso, para ter uma tag close-imagem. Não é incorreto. É perfeitamente correto, e é incentivado, mas não há notação abreviada. Eu posso tipo de simultaneamente abrir e fechar a mesma tag, e que fará com que o navegador feliz. Por isso, é apenas um pouco mais sucinto para que as coisas que, conceitualmente realmente não sei fazer sentido para começar e terminar. Eles só estão lá, ou eles não são. 

Então eu vou para salvar este e voltar ao meu "Olá, mundo" página e recarga. E é um pouco fora de controle, porque a imagem é efectivamente um pouco grande, mas isso é OK. Eu poderia redimensioná-la em um programa. Ou você sabe o que. Apenas para demonstrar, eu sou vai realmente dizer que a largura desta coisa deve ser apenas 200 pixels, 200 pontos. Deixe-me ir em frente e salvar e recarregar, e agora a página parece um pouco mais razoável. Mas observe o padrão. Bem, eu meio que lhe ensinou tudo de HTML, em certo sentido, pelo menos, conceitualmente, porque todo HTML é é estes tags-- etiquetas abertos, fechados etiquetas, e atributos que modificar o seu comportamento. E, aparentemente, cada tag pode ter zero ou um ou dois ou mais atributos, cada um de que faz algo um pouco diferente. Agora, como você sabe o que existe? Você acabou de ouvir alguém como eu lhe dizer o que existe, ou você simplesmente Google em torno de um tutorial em HTML, e é realmente tão simples. 

Na verdade, quando eu era estudante anos e aprendi HTML, uma das minhas aulas de matemática assistentes apenas passado um pouco de tempo me tutoria para como meia hora, uma hora, e então eu estava no meu caminho. Eu estava no meu caminho para fazer os sites mais hediondos de todos os tempos, que, aparentemente, não têm realmente progredido além. Mas o ponto é que, uma vez que você compreender estas simples ideas-- se arcano texto-- mas estes simples ideias de começar um pensamento e fechando um pensamento, mantendo tudo bem equilibrado, olhando algo acima, modificar o comportamento dessa tag, isso é realmente tudo que existe para ela. E, de fato, se vamos agora algo como google.com-- na verdade, vamos um lugar um pouco mais reasonable-- stanford.edu. E eu estou indo para ir para Ver, Desenvolvedor, Vista Fonte. É feio, mas notice-- e eu vou fazer zoom aviso algumas coisas que já é familiar. Há este aqui em cima, que é um navegador. Aí vem HTML5. Há HTML. Aparentemente, há uma atributo que eu não fiz usar o que especifica idioma da página, e isso pode ajudar com automática tradução e coisas assim. Aqui está a cabeça da página. Aqui está o título de página de Stanford. Há um tag eu não fiz falar sobre yet-- tag Meta. É apenas uma espécie de informação de fundo. Ela contribui com SEO, ou otimização de motor de busca, ou os resultados do Google-search ou similares. Mas se ficarmos olhando, mantenha procurando, aqui está a tag do corpo. E não há cachos de outra etiquetas que não falamos sobre isso ainda. Mas é uma Div para uma divisão da página. É como um retângulo invisível se você meio que quero mentalmente dividir sua página em diferentes unidades on-line. E, em seguida, lotes de divs I ver, algo chamado de classe, mas vamos voltar a isso. 

Este é Forms interessante--. Os formulários estão por toda a web. Qualquer caixa de pesquisa que você está já usou é uma forma. E, por isso, vamos realmente ver. Formato. Açao. A ação desta forma, por qualquer razões históricas, é que URL. Método é "post". Acontece que as solicitações HTTP pode usar o verbo "ficar", como vimos antes, ou "post." E vai ver a diferença isso em um momento. Vamos ver realmente o que é isso. Deixe-me voltar à página de Stanford. Que forma eles estão falando sobre, que você acha? O que salta à vista? 

AUDIÊNCIA: Caixa de Pesquisa. 

DAVID J. MALAN: Yeah. Assim, se no canto superior direito aqui é esta caixa de pesquisa. E é assim que eles implementaram ele-- um tag que é, literalmente, forma-bracket aberto. E então vamos procurar alguma coisa. Vamos procurar um amigo de mine-- "Nick Parlante." Entrar. E, claro, ele foi para um URL ligeiramente diferente. Deixe-me voltar aqui. Vamos procurar por "cursos". Droga. Fui para uma URL diferente. Então, Stanford da adição de um pouco de magia que eles não estão me levando para o URL que vimos no atributo action lá. Mas esta forma aqui é implementado puramente por meio desta marcação aqui, essas tags. Na verdade, aqui está a entrada para o tipo de pesquisa que você deseja. Aqui é a entrada para outro tipo de busca. Aqui é a entrada para a própria corda. E assim, o objetivo não é para embrulhar nossas mentes em torno de todas estas tags mas só para ver. É só abrir e fechar tags e olhando as coisas. Sim? Victoria? 

AUDIÊNCIA: [inaudível] DAVID J. MALAN: Essa é uma boa pergunta. Isso é um pouco mais complicado de ver. Deixe-me voltar a isso pergunta em apenas alguns minutos quando olhamos para algo chamado folhas de CSS, ou de estilo em cascata, e podemos tentar inferir tanto a partir da página. Então, se nós agora dar uma olhada em google.com, vamos ver o que a sua página parece. Você teria they're-- que é bonito hoje. ESTÁ BEM. Tudo feito. Tudo bem, então View Source. Você poderia pensar que o Google tem código-fonte muito bom. Então, aparentemente, o que está acontecendo aqui? E, na verdade, isso não é nem HTML. Isso é algo chamado de JavaScript. E vamos continuar indo e indo. Eu não sei mesmo onde a página começa. Vou usar Command F, HTML suporte aberto. Tudo bem, aí está. Eu encontrei o início da página, e há tanta coisa aqui. 

O que está realmente acontecendo? Bem, você sabe o quê, podemos limpar isso. Se eu em vez de ir a este Inspecione barra de ferramentas, esta ferramenta especial de diagnóstico, e não vão para a rede, onde esperamos que continue hoje, mas se eu for para Elements, o que é muito bom que é um navegador tem um monte muito melhores olhos do que eu. E o navegador pode ler essa confusão de uma página web, que o correio HTML que acabamos olhou, e pode analisá-lo ou ler e analisá-lo e reformatá-lo de uma forma amigável-humano agradável. Então o que estou vendo agora nesta tela aqui em Elementos, exatamente o mesmo conteúdo, mas eles recuado tudo, eles colorized, mas que é exatamente o mesmo texto que eu baixado do servidor. 

E o que é bom agora é que eu posso ver no corpo, por aviso instance--, a página ainda é composta de apenas uma cabeça e um corpo, e eu posso hierarquicamente mergulhar aqui. Observe que o Google parece ter para divs-- este e este. Posso expandir isso. Há um monte de outros divs. Portanto, é um pouco complexo. Mas espere. Isto parece muito mais legível, relativamente, do que este. Por que o Google embaraçoso por si apenas o envio esta enorme confusão de código de algum tipo apenas para implementar algo que parece tão simples à primeira vista? Como, por que eles não adicionar mais espaços? Por que eles não pressione Enter como eu fiz? Olha como eu era em escrever uma página web. I pressione Enter tão diligentemente. I recuado, então tudo é tão bonita e legível. Por que o Google não praticar o mesmo? 

AUDIÊNCIA: [inaudível] DAVID J. MALAN: Good. Muito justo. Eles não têm alguns pessoa no Google manualmente atualizar mais a home page. Não é 1.999 mais. Então eles têm software. Eles têm outras ferramentas que gerar dinamicamente eles são HTML. É claro, que o próprio código foi escrita por seres humanos, mas a realidade é, é bastante justo dizer, o navegador certamente não faz importo o quão confuso o código é. Mas há uma ainda mais razão técnica convincente que o Google distribui o seu HTML código de tal desleixado, aparentemente esmagadora forma, todos embalados em conjunto com muito pouco way-- muito pouco na maneira de formatação, como eu fiz. 

AUDIÊNCIA: [inaudível] 

DAVID J. MALAN: Faster? Por quê? E o que você disse, Lydia? Mais rápido? Por mais rápido? AUDIÊNCIA: [inaudível] DAVID J. MALAN: Não há não há espaço para ler. Sim. Então, pense sobre o que um espaço é. Assim, cada caractere no teclado leva uma certa quantidade de espaço para representar, tanto fisicamente, como ele ocupa muito espaço, ou de alguma forma por baixo do capô, que requer memória. E como um aside-- e nós vamos falar mais sobre este tomorrow-- cada personagem no teclado normalmente requer de 8 bits, ou um byte. Então, um padrão de 8 zeros ou queridos, ou apenas 1 byte, como nós seres humanos que normalmente dizem. Então, isso é pequeno, mas ainda é diferente de zero. É ainda uma certa quantidade de espaço. Portanto, se um engenheiro ou Google bate a barra de espaço uma vez só, e suponha Google-- é super-popular-- Suponha que um bilhão de pessoas visite sua home page por dia, ou algum número de pessoas visite a página inicial de um bilhões de vezes por dia, quantos bytes adicionais que possui engenheiro de software apenas o custo Google por bater sua barra de espaço uma vez? 

AUDIÊNCIA: [inaudível] DAVID J. MALAN: Não é tão ruim assim. Apenas um byte vezes um bilhão. Então um-- AUDIÊNCIA: 8 bilhões de gigabytes. DAVID J. MALAN: Não 8 bilhões. 8 bilhões de bytes. Mas 1 gigabyte. 1 gigabytes seria a unidade de medida. Se ele ou ela faz dois espaços, 2 gigabytes. Três gigabytes. Certo? É escalas cara. E assim, em casos como o Google, que, concedido, são casos extremos, há outras questões que surgem apenas tomando decisões muito razoáveis ou tomar ações humanas muito simples, porque ele tem esse efeito ampliado. Portanto, uma das razões isso parece tão compactado é exatamente como Victoria disse- era apenas gerados por computadores de qualquer maneira. Então, não é grande coisa. Deixe o navegador descobrir isso. Mas também deliberadamente não tem muito espaço, porque o espaço não é necessário. E o espaço realmente custa dinheiro. 

Isso quer custa tempo, porque apenas a empurrar que muito mais dados em cada A sede da google.com apenas tem que tomar alguma quantidade de tempo, mesmo que seja milissegundos ou microssegundos, mas que acrescenta-se ao longo de tantos usuários, ou, mais provavelmente, ele provavelmente custa dinheiro. Google provavelmente conecta a outra pessoa no mundo, um daqueles que perscruta pontos, e se tiverem algum tipo de relação financeira segundo o qual os custos de seus dados dinheiro, Eles poderiam muito bem minimizar a quantidade de dados eles estão cuspindo em sua conexão com a internet. 

Então, a coisa engraçada, embora, em última análise, ou talvez a coisa reconfortante, é que mesmo que isso parece terrivelmente esmagadora, no final do dia, ainda é exatamente os mesmos princípios que Nesta página muito simples aqui de um HTML página. Então, só para resumir e para que você tem uma versão canônica se você não fosse acompanhando pela escolha aqui, aqui pode ser o mais simples de páginas web, por isso algo para brincar talvez mais tarde. 

Bem, vamos introduzir uma par de outras idéias agora. Estamos prestes a introduzir algo chamado de tag de estilo. Nós podemos estilizar desta página de maneiras mais interessantes. Assim, enquanto e-mail HTML é tudo sobre a marcação de os dados, tipo de especificando a um navegador como estruturar os dados, onde colocá-lo, CSS, ou folhas de estilo em cascata, é uma segunda língua que geralmente se misturarem com HTML como vamos see-- mas podemos limpar que numa moment-- que leva -lo a milha final, e estiliza-lo. Ela recebe as cores apenas para a direita, o tamanhos de letra apenas para a direita, o posicionamento apenas para a direita. É tudo sobre a estética ou formatação, e não sobre os dados em si fundamental. E a maneira mais fácil de mostrar este é talvez o exemplo. Então eu vou passar por cima para o meu arquivo de texto simples. E em apenas um momento, eu vou pé-nos através do processo de fazer isso nós mesmos. 

Vou voltar para o meu arquivo aqui e recarregar a página apenas para confirmar o que parece. Isso é onde estamos agora. Eu sinto que as crianças se aproveitar ter um pouco de cor a esta página web. Então, eu estou indo para ir aqui na cabeça da página. E eu vou fazer estilo, / estilo. E, em seguida, dentro deste, eu vou para dizer o corpo do meu página-- e essa formatação é, pelo primeira vista, talvez um pouco estranho, mas convencional. Eu vou dizer que o fundo cor desta página deve ser verde. E esta é, infelizmente, tipo de não o melhor design. Note-se que anteriormente no mundo do HTML, Eu disse que os atributos são esses pares chave-valor. Algo igual Citação unquote "algo". No mundo dos CSS, que estava desenhado por algumas pessoas diferentes, eles decidiram que, na sua mundo, pares chave-valor Seria palavra cólon alguma coisa. Então é a mesma idéia, embora. É associando um valor com alguma chave que de alguma maneira influencia o comportamento desta página. 

E você provavelmente pode adivinhar. O que é isso, provavelmente, vai para se fazer se você nunca visto HTML ou CSS antes? AUDIÊNCIA: Alterar a cor de fundo. DAVID J. MALAN: Sim, mudar a cor do fundo. E especificamente a cor de fundo do corpo. Mas desde que o corpo por agora é a web página-- é a única coisa abaixo do realmente-- barra de título ele provavelmente vai influenciar a mesma coisa. Então vamos ver. Vamos salvar este. Vá aqui e recarregar. É muito hediondo. E o que está acontecendo aqui é um efeito colateral. Eu só escolheu esta imagem aleatoriamente. Porque é que o não é verde permeando atrás de Mickey? AUDIÊNCIA: [inaudível] DAVID J. MALAN: Exatamente. Acontece que as imagens, muito muito todas as imagens para que possamos usar, são todos rectangles-- de retângulos. Mesmo se tem algumas curvas Mickey a si mesmo e tem um fundo, que o fundo tem que ser algo. Tem que ser branco. Tem que ser preto ou outra coisa. Ele pode ser transparente. E, na verdade, eu poderia abrir Mickey Mouse aqui em um programa chamado Photoshop ou algo semelhante e mudar tudo isso branca fundo para transparente, de modo que o verde iria brilhar. Mas isso é algo que eu preciso para perguntar de mim mesmo ou um artista gráfico ou um designer para o meu empresa, por exemplo, de fazer, especialmente desde que eu apenas emprestado esta da internet. Mas isso é porque isso está acontecendo. 

Então, o que mais poderia queremos fazer? Bem, nós pode querer dizer que realmente espero que você aproveite a sua estadia. E para dar ênfase, eu quero para fazer este forte, e assim eu vou dizer aberta forte e fechar forte e, em seguida, recarregar. E é um pouco difícil ver no projetor mas talvez realmente agora salta em você um pouco mais. Então você pode adicionar itálico neste forma, virados para o negrito desta forma. Nós poderíamos mudar as cores. Na verdade, apenas por diversão, eu sou indo para ir em frente e fazer isso. Eu realmente não gosto de como meu parágrafos são tão perto juntos, assim que eu poderia fazer algo assim. Vou dizer ao navegador, mudar a cada tag de parágrafo para ter, vamos dizer-- na verdade, você sabe o quê, vamos alinhar text-align, centro. E mais uma vez, eu sei que isso só porque alguém ensinou-me isso ou eu olhei para cima no uma referência online. Então deixe-me salvar este. E, ah, agora eu tenho centrada a imagem lá. E, na verdade, você sabe o que, se Eu movo minha imagem em um parágrafo tag-- então um terceiro parágrafo, embora não do texto. Vamos guardar isso e recarregar. Agora, a página está começando a parecer tipo de-- Quero dizer, ele é ainda muito feio, mas pelo menos parece que passei dois minutos em vez de um minuto fazendo isso. 

E assim, de forma incremental, podemos fazer essas mudanças estéticas agora para a página? Eu não tenho realmente mudado os dados no página que não seja adicionando a palavra de verdade. Eu adicionei metadados, se você quiser. Hey, browser, fazer o palavra "realmente" negrito. Mas os dados não é forte. Isso é metadados. Os dados são "realmente". Portanto, ainda temos alguns dos os mesmos conceitos como antes. Agora, é claro, isso não está na web, então eu vou fazer um passo final aqui. 

Eu estou indo para ir para hello.html e apenas destacar e copiar este. E agora eu vou entrar em Cloud9, que Vou levá-lo através de apenas um momento. E as probabilidades são em breve você vai ser, se não o fez, em uma tela como esta. E deixe-me apenas dar-lhe uma rápida excursão do que Cloud9 realmente é. Então, novamente Cloud 9 é este serviço baseado em nuvem que lhe dá e me a ilusão de ter a nossa própria máquina virtual na nuvem, tecnicamente um recipiente na nuvem, que temos plena privilégios administrativos para. Assim, em teoria, ninguém outra parte do mundo tem Acesso à tela que eu sou olhando agora, exceto talvez as pessoas que gerir o site, porque tecnicamente eles têm acesso físico e assim por diante. 

Então, o que vemos neste ambiente? Vou diminuir o zoom, porque é um pouco pequeno. E deixe-me salientar mais aqui por apenas um momento. No lado esquerdo do meu e seu tela, há um navegador de arquivos à esquerda. Então semelhante em espírito para Mac OS e Windows. Estes são todos do arquivos em minha conta. E, por padrão, se o seu conta é como o meu, você vai ver ou ver em breve HelloWorld.html e readme.md. Por aqui, à direita, este é onde meus arquivos de texto estão a ir. Se você já usou o Microsoft Word ou o Bloco de Notas ou TextEdit, esta é a palavra minha edição de arquivos está a ir. E então o mais arcano característica deste ambiente que não vamos realmente precisa usar é aqui chamado de uma janela de terminal. Se você já usou DOS de passado, este é o Linux ou o equivalente Linux do DOS. É um interface-- baseado em texto há cliques do mouse, sem arrastamento. Tudo que você pode fazer é digitar comandos, mas esses comandos pode criar arquivos, mover arquivos, aberta anuários, de anuários próximos, fazer qualquer número de coisas. Mas, por enquanto, vamos apenas gastar o nosso tempo aqui em cima. 

E assim vamos fazer isso. Se você está nesta ambiente, o que você deve se você criou um espaço de trabalho já, vá em frente e apenas ir para cima em File, New por um momento. E isso vai lhe dar um novo tab aqui mesmo no meio. E eu só-- e vamos vá em frente e fazer isso. Vamos em frente e agora não File, Save e vá em frente e chamá-lo hello.html, não deve ser confundido com HelloWorld.html, onde veio com a sua nova conta gratuita, que é apenas um exemplo de arquivo. Você vai vê-lo aparecer de repente, mais provável no lado da mão esquerda, ea guia ainda será aberto. E deixe-me encorajá-lo a recriar este arquivo ou algumas variantes do mesmo. E se você não consegue vê-lo no tela, esta é idêntica para os slides que você provavelmente tem em outra guia. 

Assim, em breve, fazer a sua primeira página web, salvá-lo e, em seguida, em apenas um momento, Eu vou te mostrar como você pode realmente ver isso. Mas mudar pelo menos uma coisa. Alterar helloworld para algo de sua própria escolha, de modo que você está convencido de que é a sua arquivo e não o que eu acabou de criar. Tudo certo. E quando você está ready-- não rush-- quando estiver pronto, vá em frente e salvar o arquivo uma vez que você fez essas alterações. E se você clicar no botão para cima correr superior, este deve abrir uma nova aba que vai dizer o que URL que você pode visitar o seu arquivo em, mas pode ter um momento para entre aspas "start Apache", que é o nome do servidor web. Portanto, tenha cuidado para fazer exatamente o que está no arquivo, em última instância. Então, agora, eu vou aumentar o zoom. Se eu começar a digitar -Colchete de abertura HTML, o aviso prévio isso está me levando para terminar o meu pensamento. E se eu terminar o meu pensamento, automaticamente me dá a marca de fechamento. Mas a expectativa é então eu vou bater Enter, e depois passar lá dentro e não a cabeça dentro e então eu faço corpo dentro. E é um pouco estranho no início, porque ele está fazendo o trabalho para você, mas perceber que, em última instância você economiza teclas. E, de fato, uma característica muito comum de programação ambientes nos dias de hoje tanto para o desenvolvimento da web como isso e programação real, que falaremos amanhã, São estas características de auto-completar, coisas que só permitem que um programador ou um designer para digitar menos teclas para realizar a mesma coisa. Às vezes é bom, no entanto. Às vezes é apenas irritante. E, novamente, uma vez que você transcrito a corrediça ou uma sua variante, você pode clicar no botão Executar em cima. E, em seguida, na parte inferior janela, você será informado em que URL você pode visitar sua página web. Mine, por exemplo, está em business-daharvard.c9users.io e assim por diante. Tudo bem, então, deixe-me-- alguma dúvida? Quaisquer outras perguntas sobre apenas começando este trabalho antes de adicionar recursos? E deixe-me propor, apenas para obter as pessoas comfortable-- porque é uma coisa a apenas copy-paste cegamente o que eu fiz. Mas só para que as pessoas lutam com pelo menos um de afazeres, Vou ligar uma música. Vou propor uma lista de coisas que você pode potencialmente adicionar. E certamente você pode usar o Google. E por que nós não apenas propor que você tenta resolver pelo menos, um problema particular aqui. Portanto, em termos de marcas, deixe-me reutilizar este aqui. 

Na verdade, deixe-me colocar -lo em uma forma textual. Vamos dizer que, entre as tags Poderíamos usar aqui estão algumas tags aqui. Nós vimos a marca de parágrafo. Agora ele vai auto-completar. tag de parágrafo, a tag âncora. Vamos dizer que você quer fazer algo maior, de modo que você pode como-- o tag span pode ajudar. Bem, você pode precisar de alguma ajuda para que, em apenas um momento. Nós vimos div. Você verá que há mesa. Há algo chamado tr, td. Th, td. Voltar a isso em um momento. O que mais pode ser útil? Há forte. Há ênfase, ou melhor, em. There's-- o que mais pode você gosta aqui? Bem, vamos dar uma olhar para isso juntos. Formulário, que nós vimos. Há formulário. Há entrada e alguns outros. Tudo bem, então vamos fazer isso. Para atender uma Victoria pergunta, deixe-me primeiro apenas certifique-se de que todos são capazes de obter seu trabalho Olá. Então deixe-me apresentar um par de outras idéias. Então vamos deixar povos resolver algum problema por conta própria. Então vamos realmente voltar a essa noção de um formulário, e nós realmente reimplementar junto a interface de front-end, por assim dizer, para o próprio Google. Vamos usar o Google como o back-end e deixe -los fazer o trabalho duro, a pesquisa, mas vamos recriar o front-end do Google e o formulário de busca que eles têm sobre a sua própria home page. E por isso vamos voltar a estas tags em apenas um momento. 

Portanto, este foi o que eu propôs apenas um momento atrás. Podemos acrescentar a estilização de um A página dentro desta tag estilo, e podemos estilizar a fundo cor, o alinhamento do texto, se é o centro ou para a esquerda ou para a direita. Mas muito rapidamente faria encontrar ou um web designer acharia que este se torna um pouco complicado, porque você está fazendo o que é chamado de conteúdo misturando com a apresentação dos mesmos. Você está misturando seus dados e a estética da mesma. E, de fato, se você considerar o que vai acontecer ao longo do tempo-- este é um muito pequeno A página web, é claro. Mas se eu adicionar conteúdo a esta página e eu adicionar estilo esta página, a página fica muito rapidamente mais e mais e mais. E suponha que eu quero ter uma segunda página da web que compartilha alguns desses atributos. Suponha que a minha segunda página web para o meu site-- também, eu quero tudo center, e eu também quero tudo com um fundo verde. Estou praticamente vai ter que copiar e colar algumas dessas linhas em que o segundo arquivo, o que se sente bem. Ele vai resolver o problema. 

Mas o que se eu quiser uma terceira página ou uma página 30 ou a página 40? Agora eu vou estar copiando e colar um monte de código duplicado em múltiplos arquivos. E assim supor que Eu decido ou eu sou dito, hey, não estamos usando um fundo verde mais. Nós vamos começar a usar laranja. O que você tem que mudar? Bem, você tem que mudar esse estilo de verde para laranja em quantos lugares? Como há 30 ou 40 lugares. É tedioso. É propenso a erros. Há uma série de razões onde você não gostaria de induzir esse tipo de dor para si mesmo. E por isso não seria bom se pudéssemos tomar o que eu apenas colocado entre estes dois amarelos etiquetas, estas marcas de estilo, incluí-lo para fora, e colocar toda a minha estilização em um arquivo central que todos os 30 ou 40 dos meus outros arquivos pedir emprestado ou de alguma forma de referência, não muito diferente da rede diagramas que estávamos fazendo antes? 

Então, se eu entrar aqui, eu sou indo para realmente propor que substitui o tag de estilo com algo chamado de tag link, que é horrivelmente, terrivelmente nomeado, porque você não usar o link de tag para criar o que nós, humanos, conhecido como um link em uma página da Web. Para isso, você usa o que marca? Como você cria um link em uma página da web? AUDIÊNCIA: A a. DAVID J. MALAN: A uma, ou âncora tag, que entrou para a Disney antes. O link tag aqui está dizendo isto-- link para um arquivo chamado styles.css, a relação aos quais vai ser que é o meu estilo. Portanto, este é um dos S de em folhas de estilo em cascata CSS--. Estilo sheet-- dois dos S de em CSS. Planilha em estilo cascata. Isto apenas significa que, hey, navegador, vá encontrar styles.css no servidor local e usá-lo como sua folha de estilo, o que significa que dentro desse arquivo vai ser toda a estilizações que temos de fazer. E então o que esse arquivo pode parecer é este. E eu vou fazer isso é um rápido exemplo, porque não precisamos para obter muito para as ervas daninhas aqui. Mas se eu copiar este, o que estou propondo é que um programador criar um novo arquivo, colar naqueles lines-- whoops-- colar nessas linhas, guardá-lo como styles.css e, em seguida, em o outro arquivo, apagar tudo isso e substituí-lo em vez com este link tag. Assim que se eu ligar href = "styles.css", a relação deve ser "estilo" perto tag. Salve isso. Voltar para o meu helloworld. Recarregar. 

Literalmente nada tivesse acontecido. Isso é uma coisa boa, porque significa que é realmente tudo de trabalho. Para provar tanto, suponha que eu faça uma erro de digitação, e eu chamo isso de "Styles.css" com um capital S, que é incorreto, e depois recarregar. Agora você pode vê-lo simplesmente não funciona. Agora, por quê? Bem, vamos usar um técnica de mais cedo. Deixe-me ir em frente e, em meu navegador, no Chrome, eu sou vai abrir esse especial separador de rede como antes, e deixe-me recarregar a página. O que não é você surpreso ao ver agora? Ou talvez você está surpresa ao vê-lo. De qualquer maneira, o que você vê agora? AUDIÊNCIA: [inaudível] DAVID J. MALAN: Não é encontrada. Por que não é encontrado? Bem, o capital Styles.css-- O S- não existe. I misnamed-lo. typo simples. Mas eu estou ficando compreensivelmente agora um 404, porque o servidor está dizendo, hey, não é encontrado. Literalmente, eu não sei onde esse arquivo é. Assim como resultado, o navegador mostra o que pode, o conteúdo bruto da página, que foi de 200, o código HTML, mas a estilização não pode ser adicionados posteriormente. E é isso que se quer dizer com cascata. Você pode tipo de adicioná-lo depois, e tipo de refina a estética da página da web. E você pode até mesmo substituir os estilos com ainda outros arquivos de estilo se você quiser. Não é encontrada, embora, neste caso, porque é claro, eu misnamed-lo. Então eu teria que consertar isso em primeiro lugar. 

Então, vamos em frente e propor o seguinte. Vamos ir em frente e fazer isso. Começando com talvez seu arquivo helloworld, deixe-me apenas convidar um casal apresentam de sugestões. Então, Victoria, que queria fazer algum texto maior, certo? Tudo bem, então nós podemos não tornar o texto maior. E nós vamos arrancar cada off apenas um problema para resolver. Tornar o texto maior. Eu não vou incomodá escrevendo isso quando nós têm tecnologia bala bem aqui. Então alguns problemas. Então, nós estamos indo para tentar para tornar o texto maior. Tudo certo. O que mais alguém propõe? O que mais poderia queremos a fazer em uma página web? Vamos chegar a um pequena lista de coisas e, em seguida, delegar ao grupo para descobrir isso. 

AUDIÊNCIA: [inaudível] 

DAVID J. MALAN: OK, texto da posição em diferentes lados da página? Tudo certo. Algo mais. 

AUDIÊNCIA: [inaudível] DAVID J. MALAN: É. Assim, um gif é apenas um formato de arquivo diferente. Acabamos utilizado, o que, a png ou jpg, provavelmente? Foi utilizado um jpg. Se você estiver curioso, uma excessiva responder à sua pergunta é um jpg é geralmente usado para fotografias, porque ele suporta milhões de cores ou cores de 24 bits. Um GIF é geralmente utilizado para, como, memes de internet Estas animações dias--, como GIFs animados. Mas isso acontece para usar uma cor mais pequena paleta, apenas 256 cores possíveis, mas ele suporta transparência e animação. E depois há o png, que suporta transparência e mais cores mas não animação. Portanto, é um trade-off. Assim, a adição de um gif, porém, seria funcionalmente equivalente a adicionar um png ou jpg. Sim. Fonte da imagem é igual. Então outra coisa. Vamos chegar a algo que que enviamos para Victoria a fazer aqui. 

AUDIÊNCIA: Adicionar botões de um formulário. DAVID J. MALAN: OK. Então adicionar botões em um formulário. E nós vamos fazer isso junto. Assim que vai ser um segue perfeita logo após este desafio. Algo mais? O que você gostaria de fazer? A web se sente muito abaixo do esperado se isso é tudo que podemos fazer. AUDIÊNCIA: Mude a cor do texto. DAVID J. MALAN: Alterar o quê? AUDIÊNCIA: cor do texto. DAVID J. MALAN: Alterar a cor do texto. Tudo certo. Então, vamos fazer isso. Apenas novamente não que você é, apenas de forma mecânica, fazendo exatamente o que estou fazendo, Eu estou indo para ligar a música para talvez cinco minutos aqui. Você está convidado a usar o Google. Você está convidado a me perguntar, e Vou sussurrar uma dica em seu ouvido. Você é bem-vindo para olhar sobre os ombros de outros. Mas resolver apenas um destes problemas. Mas vamos fazer o último, o constitui um, se pudéssemos, juntos. Assim, cinco minutos para resolver qualquer um destes problemas usando o Google, a intuição, ou qualquer outros meios disponíveis para você. 

[REPRODUÇÃO DE MÚSICA] Tudo certo. Não se preocupe se você quer para manter mexer, mas eu vou estragar um par destas respostas. Assim, a primeira sugestão de Victoria foi para tornar o texto maior. Portanto, há algumas maneiras de fazer isso. Eu atualmente restaurada minha tela para esse tamanho, embora eu tenha ampliado artificialmente só para ver as coisas. E vamos fazer isso. Deixe-me ir em frente e agarrar algum texto genérico Latina só assim temos algo para trabalhar. Então me dê apenas um momento. Vou fazer três parágrafos. ESTÁ BEM. Este será um exemplo melhor. Assim, para os curiosos, em meu hello.html, eu só colado três absurda parágrafos Latina só assim temos algum texto para trabalhar. E o objetivo da Victoria era fazem parte do texto maior. Então eu poderia, como antes, entrar aqui. E deixe-me fazê-lo da maneira certa. Eu vou ter um link tag que aponta para um arquivo chamado "styles.css," o relacionamento dos quais é novo "estilo". E então eu vou guardar esse e abrir este "styles.css." 

Então, como antes, tenho a capacidade neste arquivo CSS para realmente substituir o padrão estética de uma página web, ea estética padrão, é claro, são bastante aborrecido. É uma espécie de tamanho de fonte normal, preto texto, fundo branco, e assim por diante. Então, suponhamos que eu quero fazer tudo isso de texto maior. Eu poderia fazer algumas coisas. No meu arquivo styles.css, I poderia dizer, você sabe o quê, aplicarão o seguinte aos o corpo de minha página. Vá em frente e fazer a tamanho da fonte 24 pontos, que é um número que eu poderia usar no Microsoft Word. Deixe-me voltar para o meu web página aqui e recarregar, e você pode ver que já é muito maior. E nós podemos ficar um pouco louco, assim como nós pode em um desktop-- torná-lo 96 pontos. Recarregar. E está ficando um pouco complicado neste momento. 

Mas eu poderia ser um pouco mais preciso. Em vez de aplicar este folha de estilo para o corpo da minha página, o que mais eu poderia aplicá-lo ao invés, o que outra tag que podem ainda funcionam da mesma maneira? 

AUDIÊNCIA: A tag p? DAVID J. MALAN: tag P. Então, a cabeça não seria correto, porque a cabeça, você não pode realmente controlar a estética. Não há qualquer texto lá ou não. Mas o p tag-- I pode mergulhar em um pouco mais profundo, por assim dizer, para o parágrafo etiquetas. E mesmo que há três, isso é perfeitamente bem, porque em CSS, quando eu apenas dizer "p", este significa aplicar o seguinte a qualquer tag que corresponde a esta selector, o selector de apenas sendo o nome da marca. Assim, sempre que você ver um "P", aplicar o tamanho da fonte, e vamos torná-lo mais razoável novamente-- 24 pontos. E sabe de uma coisa, apenas para uma boa medida, vamos fazer a cor apenas vermelho para o momento. E agora, se eu recarregar, agora nós veja três parágrafos feias. 

Mas agora suponha que eu sou uma espécie de-- eu quero o primeiro parágrafo para saltar para o usuário. Eu não quero apenas aumentar o tamanho da fonte de tudo. E assim eu realmente quero para identificar ou distinguir entre esses parágrafos. Então, vamos nos livrar do vermelho, porque é apenas um tipo de brega, e vamos em frente e fazer o tamanho de fonte de 12 pontos por padrão, de modo que estamos de volta a algo um pouco mais razoável. E agora eu só quero aumentar o tamanho da fonte do primeiro parágrafo. Eu posso fazer isso em poucos maneiras, mas uma forma que é talvez mais de instrução no momento é fazer o seguinte. Deixe-me ir em frente e dizer, este parágrafo tem uma identificação única de "primeira". Eu poderia chamar isso de qualquer coisa que eu quiser. Eu poderia chamar isso de "foo" ou qualquer outra palavra, mas eu vou dar-lhe algum nome semanticamente significativa como "primeiro". Este é o identificador único, a identificação, para o meu primeiro parágrafo. 

O que posso fazer agora na minha folha de estilo é ser um pouco mais precisa. Em vez de dizer, aplicar o seguinte para a tag p, Posso dizer que o following-- aplicar o seguinte, ou selecione, o elemento HTML que tem uma identificação única dos "primeiro". O que eu quero aplicar a ele? Um tamanho de fonte de 24 pontos. Então, eu tenho dois seletores agora. Um faz toda a n.os 12 pontos. Mas este, especialmente porque se trata second-- se trata último na file-- isto tem um efeito em cascata. Acabei de fazer todo o meu parágrafo marcas de 12 pontos, mas isso agora cascatas e substitui isso por quaisquer elementos na página, qualquer tag da página cujo ID único é entre aspas "em primeiro lugar." E a hashtag neste contexto apenas significa "identificador único". Eu não colocá-lo no arquivo HTML. Eu, aqui, apenas dizer entre aspas "em primeiro lugar." 

Então deixe-me recarregar. E agora eu vejo, ah, OK. Quer dizer, não é que bonita, mas é o tipo de como o prefácio de uma livro ou algo assim, onde o primeiro parágrafo é maior. Poderia ser ainda mais preciso com apenas as primeiras letras, mas pelo menos Eu tenho exercido mais controle. Agora maybe-- talvez eu quero fazer isso ocasionalmente, por qualquer motivo, e por isso eu não quero que isso aplicar-se a apenas uma tag HTML. Em vez disso, vamos dizer-- vamos também fazer o seguinte. Class = "importação". Considerando que a ID é usado para unicamente identificar uma coisa, uma tag, na sua página web, uma classe é para ser usado em qualquer número de elementos ou tags na sua página web. Portanto, é reutilizável. Um ID não é reutilizável. Uma classe é reutilizável. 

E você sabe o que, por qualquer reasons-- filosófica Eu não terminar a minha thought-- eu vou dizer que o primeiro parágrafo eo segundo parágrafo, são importantes. Então eu vou para aplicar a classe chamada "Importante", que, se eu salvar meu arquivo e recarregar, não tem impacto funcional ainda. Mas eu adicionei alguns metadados para o arquivo, tipo de algo separado a partir dos dados do núcleo do arquivo, de modo que agora na minha folha de estilo, se eu em vez dizer ".Importante" - você sabe, tudo o que é importante, eu sou vai fazer font-cor, red-- ou melhor, não font-cor, apenas a cor. Há inconsistências em CSS infelizmente. E recarregar. Agora observe o primeiro dois parágrafos são vermelhos mas não o terceiro, porque eu só aplicou a classe de "importante" para as duas primeiras dessas coisas. 

Assim, em IDs, você tem a capacidade para especificar de forma muito precisa. Com aulas, você tem a capacidade de reutilização. Mas em ambos os casos, observe a tipo de princípio de boa-design onde eu consignado fora todo o estética no meu arquivo styles.css. Portanto, não há confusão aqui. Não há nenhuma menção de vermelho ou bold-facing ou tamanho da fonte neste arquivo. Em vez disso eu tenho semanticamente, significativamente caracterizado meus dados como, aqui é alguns dados importantes. Aqui está alguns dados mais importantes. Além disso, aqui é o "Primeiro" dos meus dados importantes. Então HTML é tudo sobre a espécie de marcação, literalmente, palavras e parágrafos e construções em sua página com essas pequenas dicas, se você vai, que você pode de alguma forma, alavancar usando outras técnicas como CSS desta forma. 

Assim, em resposta à pergunta de Victoria, podemos fazer um texto maior nesse sentido. Há tantas outras maneiras, mas a fonte tag-- colchete de abertura "font" - é, na verdade vários anos de idade. E esse é o problema, também, com base apenas em resources-- on-line eles tendem a ser ultrapassada. E, de fato, que foi descontinuado, porque o mundo realizado, o que significa "font-size = 7" significa? Isso não acontece. E assim por muitos anos e este dia-- um do lado observa aqui é que é realmente incrivelmente dolorosa às vezes ainda para desenvolver sites para o web, porque a Microsoft e Google e Mozilla e os outros muitas vezes discordam sobre a forma como para interpretar uma especificação como HTML. 

Há um livro de regras para HTML que geralmente diz o que significa que cada tag. Mas às vezes é deixado à critério da aplicação, discrição e Google, da Microsoft. E assim você vai muitas vezes ver em um site algo parece diferente em um PC do que ele faz em um Mac, e isso é realmente porque, No fim do dia, eles não testá-lo bem em ambas as plataformas. Mas é também por causa razoável, pessoas inteligentes irão discordar e as empresas vão discordar, e assim um dos desafios da programação para a web ou design coisas para a web está escrevendo o seu site de uma forma que funciona em todos os navegadores web. Mas mesmo isso é razoável, certo? Há tantas versões de tantos navegadores lá fora, que, em algum momento, você também tem que fazer um julgamento e você tem que decidir como uma empresa, especialmente para e-commerce de estilo locais onde você está tentando usar o mais recente e maior tecnologias para dar realmente um bom usuário experiência. Mas alguma porcentagem de seus usuários podem ainda estar usando o Internet Explorer 6 ou 7 ou 8, em especial, dependendo do país que eles estão vindo. 

E assim por muito comumente consultada é algo como "estatísticas do navegador web." E se formos a-- vejamos Wikipedia e ver como up-to-date este gráfico é Se houver um. Então, aqui você pode ver onde os navegadores na verdade são, de acordo com dezembro de 2015, de acordo com o Governo dos Estados Unidos. Chrome é a quota de mercado de 42%, seguido pelo IE, em grande parte em ambientes corporativos ou as configurações do PC, é claro, seguido pelo Firefox, em seguida, Safari, então Opera não o fez fazer o mapa aqui por alguma razão, e que outros. Talvez seja sob outros. Mas mais problemático do que é-- vamos ver se Wikipedia também tem versões de navegadores version-- 

Vamos para as estatísticas do navegador. IE. Mesmo isso não é suficiente. estatísticas do navegador. Minha versão. Isso não vai ser certo. Vamos ver versões. navegador quota de mercado. Vamos ver se isso vem à tona. ESTÁ BEM. Agora isso está ficando um pouco mais útil. Então, aqui, perceber que todos nós temos diferentes versões de navegadores. E, meu Deus, se você look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45. Quer dizer, os navegadores cada vez mais atualizado, e, por vezes, algumas dessas mudanças são significativos em termos de funcionalidade. E assim, em algum momento, o gerentes de produto ou os engenheiros precisa fazer uma decision-- você sabe o que, apenas 1% da população mundial ainda está usando o IE 7. Para o inferno com eles. Nós apenas não vai apoiar esse browser. E o que significa não apoiar? Isso pode significar que os botões não funcionam na sua página web, ou pode significar a formatação está completamente desligado. Ou você pode ter que fazer esse mesmo julgamento em móveis nos dias de hoje, onde, estamos não vai apoiar IOS 5 mais. Então, as pessoas só tem que atualizar. Ou nós não vamos apoiar Cupcake no sistema operacional Android para dispositivos Android, porque, como o mundo-- como o mundo da tecnologia quer avançar, que tipo de quer arrastar o mundo com ele para que eles não tem que continuar a ser compatíveis com versões anteriores para que eles pode oferecer novas e boas características. Esta é certamente uma das razões por que tantas empresas estão lançando atualizações automáticas e tipo de forçando as últimas versões de software de nós. E até mesmo empresas como a Apple irá classificar de forçá-lo quase ou obrigar você em termos de forças de mercado para comprar um novo telefone, porque eles simplesmente não atualizará mais o seu telefone antigo. Então você perca a mais recentes e melhores recursos, porque é dispendiosa a eles como um empresa para manter mais velho, sem dúvida versões inferiores de software. Mas, o efeito líquido é que nós também sofrem isso também. 

Então, vamos dar uma olhada em apenas um par de coisas finais aqui. Vamos derrubar rápido real algumas das essas outras balas, se curioso. Então, se você estava tentando, por exemplo, a posição o texto em lados diferentes do página, eu vou fazer uma maneira rápida, mas não é diferente maneiras de fazer isso. Deixe-me ir em frente e eliminate-- simplificar este como se segue. Deixe-me apenas voltar para o meu , parágrafos simples simples. Deixe-me voltar para o meu styles.css. E eu só vou usar o simple-- que você pode ter visto no Google ou recolha de earlier-- text-align direita. E recarregue esta página. Agora tudo parece para ser alinhado à direita, como você pode ver na sobrecarga aqui. 

Nós podemos fazê-lo parecer um pouco mais reservar-like, e podemos dizer "justify" e recarregar. Agora é bom e quadrado em ambos os lados, o que é bem legal. Outra meta que nós tivemos aqui era a cor da mudança do texto. Então vimos que com o meu texto em vermelho. E agora adicionar botões de um formulário. Então, por que não tentar fazer exatamente isso? Mas, primeiro, deixe-me ir a um site que a maioria de nós usar cada dia-- Google. E vamos dar uma olhada como o Google realmente funciona. Mas eu vou fazer isso. Primeiro deixe-me fazê-lo em-- sim, deixe-me ir para o Google em primeiro lugar. Eu vou ter que ir em Configurações do Google, porque eu quero desativar algo chamado resultados imediatos. 

Então você deve ter notado na Google estes dias-- deixe-me voltar e ativar isso. Então, se eu começar a procurar para "gatos" como este, notar que não só Recebo auto-completar-se superior, de repente, a própria página parece mudar muito rapidamente, bem como, e isso é o Google usando uma linguagem chamada JavaScript tentando ser útil. Mas, infelizmente, tipo da mexe-se a nossa discussão do que está realmente acontecendo por baixo do capuz aqui. Então, eu sou apenas uma espécie de rapidamente desligue resultados imediatos. E eu vou clique em Salvar. E agora eu vou abrir essa barra de ferramentas de diagnóstico que eu manter abertura sob a guia Rede. Então, vamos fazer isso. Deixe-me-- whoops-- rolar esta um pouco para baixo. E deixe-me procurar "gatos". 

E agora notice-- na verdade, esta é uma boa oportunidade para discutir por um momento. Observe o momento em que eu type-- pará-lo. Pare com isso. ESTÁ BEM. Observe o momento em que eu escreva a letra C, ver a parte inferior da tela. A- T- S. O que faz o fundo desta tela, meu guia Rede, sugerem está acontecendo cada vez que eu escreva uma carta? Infelizmente, o sapo é muito perturbador hoje ou o trevo ou o que ele é. O que estava acontecendo cada vez que eu digitei? E deixe-me limpar o tampão e digitá-lo novamente. whoops assim--. Toda vez que eu digitar uma letra, C- A- T-- assim uma nova linha, obviamente, continua aparecendo. O que cada uma dessas linhas representam, com base no que temos visto e discutido até agora? AUDIÊNCIA: Uma busca? DAVID J. MALAN: Uma pesquisa ou mais genericamente, uma solicitação HTTP do meu navegador para o servidor. Bem, porque é o meu navegador fazendo um HTTP solicitar cada vez que eu escreva uma carta? 

AUDIÊNCIA: [inaudível] DAVID J. MALAN: Sim, ele está dando me estes resultados de auto-completar. Como, Onde é que esses resultados da pesquisa vêm? Bem, cada vez que eu escreva um carta, o Google envia mais e mais e mais de a palavra que eu estou escrevendo. Por quê? Porque eles querem me dar uma melhor e melhor, melhor sugestão, uma lista de sugestões, para que a palavra Eu estou tentando realmente completa. Então, isso quer dizer literalmente cada caractere que você digitar no Google está a ser enviado, em última análise, granel, mas também, por vezes, um de cada vez, a fim de implementar esses recursos de preenchimento automático Quando os dados é, é claro, na web. 

Agora, vamos dar uma olhada no que realmente acontece quando clico Google Search. E então nós vamos aproveitar isso nós mesmos. Então, se eu rolar para baixo agora à própria primeiro pedido que acabou de acontecer. Observe o seguinte. Ele foi enviado para um longo URL-- https://www.google.com/search? e depois um monte de coisas. Vamos ver isso na verdade agora na aba do navegador em si. Vamos nos livrar da barra de ferramentas aqui. Aqui está a página de resultados de pesquisa. E notem aqui está a URL. Agora, você provavelmente pode adivinhar o que está acontecendo aqui, em parte. Então, em primeiro lugar, uma definição. Isto aparentemente é o destino onde o formulário é enviado. Então, quando eu digitei no palavras "gatos" e pressione Enter, Aparentemente, o Google enviou a minha entrada de texto para este URL que eu tenho realçado lá, barra de pesquisa. Acontece que, em uma URL, qualquer coisa que acontece após um ponto de interrogação é, como nós continuar a dizer, um par de valores-chave que foi digitado no formulário ou de alguma forma transmitido a partir da navegador para o servidor. 

Então toda vez que você digitar a entrada para uma forma na web e é enviado como nós temos vindo a discutir, através de um get, um destes Virtual envelopes, o conteúdo de que envelope-- sim, manter ficando recheado fisicamente no envelope em sala de aula hoje, mas tecnologicamente ele é realmente colocar na URL. Então, na verdade, deixe-me peneirar isso. Onde você vê a entrada do usuário? Onde você vê algo que eu mesmo digitado aqui em cima? Sim, por isso "gatos". Certo? Então deixe-me destilar esta em algo mais simples. Eu vou apagar tudo sobre esta URL que eu não entendo, e eu só vou sair -lo como isto-- / search? q = gatos. Vamos ver onde q vem em um momento, mas que se sente como o mínimo quantidade de informações que eu forneci. E agora eu vou bater Enter. E perceber que ainda funciona. Nós ainda voltar um monte de gatos. Então, o Google é mais extravagante do que isso nos dias de hoje. É 2016, não em 1999. Portanto, há outras coisas que o meu navegador está enviando para o servidor. Mas esta é minimamente tudo que é necessário. 

Então o que está acontecendo? Bem, primeiro deixe-me ir em frente e ir de volta para Cloud9 e deixe-me ir em frente e fechar os guias anteriormente. E eu vou fazer isso no meu possui apenas por um momento. Eu estou indo para ir em frente e criar novo arquivo. E eu vou guardá-lo como google.html. E eu vou muito quickly-- Eu vou roubar, na verdade, algum deste texto apenas para economizar tempo. Vou colocar esta aqui. Eu não vou incomodar-se com estilização qualquer momento. Nós vamos chamar isso de "My Google." E eu estou indo para se livrar de tudo no corpo. E eu vou fazer o seguinte. Deixe-me fazer zoom. Formar Action-- e como eu brevemente mencionado earlier-- whoops-- como eu brevemente mencionado anteriormente, à acção de um formulário é onde você envia os dados. Então google.com/search. E o método que deseja usar pode ser uma de duas coisas. Pode ser tanto "pegar", como mantemos discutir, ou pode ser "pós". Por agora, o essencial diferença é que, se você usar "obter", todas as informações que o usuário fornece é enviado na URL. 

Isso é ótimo para coisas como pesquisa motores e algumas outras aplicações, mas em que circunstâncias você não quer preencher um formulário e ter as informações acabar o URL, como na barra de endereços do seu navegador? Que tipo de formas de fazer você-- AUDIÊNCIA: [inaudível] DAVID J. MALAN: Sim, como o quê? AUDIÊNCIA: As senhas. DAVID J. MALAN: Sim, então você log no Facebook ou algum site. Essa é a entrada do usuário a partir de um formulário, uma caixa de texto, mas você provavelmente não quer que ele aparecendo na URL do navegador. Por quê? Quer dizer, talvez há alguns implicações de segurança na rede, mas more-- gosta, mais simplesmente, o que se seu companheiro de quarto, o seu outro significativo, seus filhos, seu cônjuge parece através do histórico do navegador? Não é a sua senha correta há na história do seu navegador. Que não se sente como um bom design. Ou ainda mais tecnicamente, suponha que você está tentando para fazer upload de uma foto para o Flickr ou Facebook ou wherever-- que é a entrada de utilizador, embora é um pouco mais interessante-- como faço para empinar uma imagem na barra de URL? Você tipo de meio que não pode. Você meio que pode. Mas, realmente, eu sou duramente pressionado imaginar fazendo isso. Então eu preciso de um outro método para upload de fotos para um site, e que outro método é chamado de "post." Mas, por enquanto, vamos apenas falar sobre "Obter", que é o mais simples dos dois. Ele só coloca toda a entrada do usuário para o URL. 

Então aqui está a forma que eu estou criando. Quero uma entrada. E sabe de uma coisa? Vou dar um palpite aqui. Eu vou lembrar o meu input "q" para "consulta". E eu acho que este é um dos desenhos originais, talvez, a partir de 1999. E, em seguida, o tipo de entrada é apenas vai ser "texto". E então eu vou ter outra entrada que não precisa de um nome, como veremos em breve ver, o tipo de que é "enviar". E isso vai dá-me um botão especial. E é isso. 

Então deixe-me ir em frente e salve este arquivo. Vou voltar para o meu navegador e vá para google.html. Entrar. E é uma espécie de escassa para dizer o mínimo. Mas deixe-me ir em frente e procure por "gatos". E notem que eu estou atualmente neste URL Cloud9. Mas no momento eu clico isto, onde você espera que eu vou acabar? 

AUDIÊNCIA: Google. 

DAVID J. MALAN: Google. Então, vamos clicar em Enviar. E, de fato eu re-implementado Google. Certo? É mais simples. É mais leve. Quer dizer, o meu código é claramente melhor do que deles, da confusão vimos anteriormente. E sabe de uma coisa? Eu estou indo para apimentar isso um pouco. Eu não mencionei isso antes. Há tags como H1, para a rubrica 1, o título mais importante em uma página. "Meu Google," Eu vou chamar este. Deixe-me recarregar. É olhar um pouco melhor já. E, na verdade, você sabe o quê? Eu tenho já-- eu menti. Eu disse que não ia estilo este, mas eu vou estilo este como antes. E meu corpo vai ser, digamos, centro de text-align. Está parecendo mais como o Google já. 

Eu preciso de uma quebra de linha, no entanto, para esse botão Enviar. E acontece, você pode utilizar n, ou você pode mais literalmente apenas dizer, dá-me uma linha de quebra aqui-- a tag br. E se eu recarregar isso, agora ele vai para lá. É um pouco feio, então eu poderia fazer várias quebras de linha, mas não vamos ficar muito ganancioso aqui. Então agora vamos ver se ele funciona para "cães". Parece que funciona para "cães", como bem. Então qual é o takeaway convincente aqui? Um-- não era um grande salto para introduzir mais algumas marcas, como a marca de formulário na marca de entrada. Mas fundamentalmente é, tudo o que estamos fazendo está alavancando a nossa compreensão de HTTP e o facto em última análise, que as formas alterar o que está na URL do navegador, e assim, portanto, nós podemos mecanicamente fornecer dados para um servidor fazendo um formulário HTML e saber que compreende o servidor HTTP, Tal como o nosso corpo compreende, como, apertando minha mão, que mesmo protocolo, e assim que voltarmos a resposta que em última análise, de esperar. 

Então, vamos tentar fazer um última coisa agora com móvel, e eu vou make-- vou acrescentar este código para os slides. Então, se você gostaria de mexer, você certamente pode levá-la de lá. Mas eu estou indo para ir em frente e fazer uma coisa. Eu estou indo para ir em frente e abrir meu índice página-- minha página Olá, como antes, o que tem um monte de este texto faux-Latina, ou um texto sem sentido Latina e has-- parece que isso neste tamanho da fonte. Mas deixe-me ir em frente e fazer isso. Eu estou indo para ir para Cloud9. E você não tem que fazer este passo. Eu só vou fazer isso sozinho. Vou clique em Compartilhar. E esta é uma característica apenas de Cloud9, em que Eu posso fazer o meu ambiente público. 

E apenas por uma questão de demonstração, deixe-me fazer isso. Vou fazer a minha aplicação pública. Observe que está me avisando, sou I certeza se quero fazer isso, porque isso vai fazer com que todos no mundo, se eles estão aqui agora ou assistir o vídeo mais tarde na internet capaz de ver o que eu vejo. Mas isso é OK. Eu vou dizer "Done". E deixe-me encorajá-lo, se eu fiz este correctly-- deixe-me testá-lo primeiro. Vá em frente, se você não mente-- em um navegador no seu computador, vá a este URL, e espero você vai ver o meu texto em latim. E para ficar claro, é não em execução no meu laptop. É na nuvem. Está na Cloud9, literalmente, mas Eu fiz a minha área de trabalho público para que qualquer pessoa na internet pode acessar minha página Latina. 

Ir para o mesmo URL em seu telefone, se pudesse. Se ele vai custar-lhe, porém, você pode apenas olhar por cima do ombro. AUDIÊNCIA: [inaudível] DAVID J. MALAN: Eu sinto muito? AUDIÊNCIA: [inaudível] DAVID J. MALAN: Apenas palavras latinas. Isso é tudo. Mas isso é o que você deve ver. 

AUDIÊNCIA: É. DAVID J. MALAN: Yeah. Sim. ESTÁ BEM. Para que eu possa manter o seu telefone por um momento? Então, espero que, se você está acessando -lo, ele deve olhar quase ilegível. É still-- Quero dizer, é ilegíveis por causa da Latina. Mas também é ilegível para que outro motivo? Como, o que lhe desagrada sobre isso? AUDIÊNCIA: É pequeno. DAVID J. MALAN: É super, super pequeno. Então, como podemos corrigir isso? É super, super pequeno no telefone do Victoria e, se você puxou -lo você mesmo, provavelmente, pequeno em seu telefone, bem como, a menos que você têm configurações de acessibilidade habilitado. O que é isso? Você poderia simplesmente apertar e zoom, o que é viável, mas então você só vê algumas palavras de cada vez. Então, espere um minuto. Eu sei como consertar isso. Certo? Eu poderia usar CSS, e eu poderia mudar o tamanho de fonte de 12 pontos para 24 pontos. Mas o efeito colateral de que, é claro, vai ser agora, em um desktop ou um laptop, Agora o texto é duas vezes maior. E por isso seria tipo de ser agradável para distinguir entre dispositivos, e verifica-se lá fora são maneiras de fazer isso. Existem vários maneiras diferentes, de facto, pelo qual usando CSS e recursos mais sofisticados que não vai entrar em em grande detalhe, você pode essencialmente consulta o navegador e dizer: se a sua tela é menor do que isso muitos pixels, use este tamanho da fonte. Se a tela é maior do que isso muitos pixels, use este outro tamanho da fonte. 

Pode ser ainda mais extravagante ainda. Se você já visitou um página web que, em um desktop, tem um grande menu talvez fora para a lado, e então todo o conteúdo é para o lado de que menu-- que é uma espécie de paradigma comum. Menu do lado esquerdo, o conteúdo à direita, ou vice-versa. realmente não funciona no celular quando seu tela é apenas isso muitas pixels de largura. Então, mais comum no celular é, seu menu de repente começar entrou em colapso, e você tem que clicar em um botão para vê-lo, ou o site irá colocar o menu acima dele e colocar o conteúdo abaixo dele. E você pode implementar estas coisas de várias maneiras, também. Você pode perguntar a seus programadores, hey, a equipe, a qualquer hora você vê uma solicitação HTTP a partir de um Android dispositivo, um dispositivo Microsoft, a Google dispositivo, um dispositivo da Apple, use esta tamanho da fonte e usar esse layout do menu, ou então usar este padrão maior do layout. 

Agora, usando o técnica fundamental hoje poderia usar os engenheiros para saber se é um iPhone, um telefone Android, um computador portátil, um desktop visitar o servidor da empresa? Em que é que vão obter essa informação? 

AUDIÊNCIA: cabeçalho? 

DAVID J. MALAN: Sim, o cabeçalho HTTP. Assim, a cada pedido HTTP proveniente de seus clientes para os seus servidores incluir, dentro desse virtual envelope, um grupo inteiro de cabeçalhos de HTTP, um dos quais está o navegador eo sistema operacional ainda, se o cuidado de esse nível de detalhe. Agora, é uma cadeia de críptica de aparência, mas existe software que só vai simplificar isso, e você pode simplesmente pedir na programação code-- PHP, Java, C ++, whatever-- o telefone é isto-- o dispositivo é este usuário usando? E então você pode dizer, mostrar-lhes esta versão do site, se é um telefone. Mostre-lhes esta versão do website se for um laptop ou desktop. Mas você não precisa mesmo complexidade do lado do servidor. Você pode fazer mesmo a mais simples das coisas. 

Eu vou fazer isso. Eu estou indo para ir em frente para meu ambiente Cloud9, e eu estou indo para adicionar uma marca que você viu no Google antes. É o chamado metatag. E eu nunca me lembro um presente, então Vou transcrevê-lo aqui. meta name = "viewport" e, em seguida, content = "width = largura do dispositivo, intital scale = 1 "e é isso. 

Por isso, poderia muito bem ser como um encantamento mágico. Não é todo o que claro, mas isso tem algo a ver com a janela de exibição, e janela de exibição é apenas o corpo de um A página web, a região retangular que define a maior parte da página. E este é apenas dizer o navegador, você sabe o quê? Faça a largura da página efectivamente igual à largura do dispositivo. Em outras palavras, não assuma que temos um tipo de espaço ilimitado. Suponha que você só tem tanto espaço como o próprio dispositivo é grande. E agora, se eu recarregar esta no meu navegador, não vejo nenhuma mudança. Mas se eu fizesse isso correctly-- e deixe-me pela minha fingers-- se todos recarregar seus telefones, você ver uma mudança atraente? Sim, é isso-- 

AUDIÊNCIA: [inaudível] DAVID J. MALAN: Sim. ESTÁ BEM. Então, sem dúvida, mais legível agora? Ainda pequeno, para ser justo, mas não tão pequena quanto a ser incontrolável. E eu certamente poderia substituir essa ainda mais com CSS ou no lado do servidor, mas cada vez que você está vendo é mais e mais recursos sendo adicionado a environments-- do lado do cliente JavaScript, como discutiremos amanhã, CSS e HTML-- assim que todas essas consultas pode ser feito no cliente de modo a incomodar o servidor muito menos e não ter que manter-se com, por exemplo, o constante ataque de novo o sistema operativo versões, novas versões do navegador. Você pode simplesmente deixar o navegador pedir o dispositivo, quão grande é você, e em seguida, fazer um pouco lógico decisões com base nisso. Mas vamos ver mais oportunidades para decisões lógicas amanhã no contexto de uma linguagem de programação. 

Assim, todas as perguntas, então, sobre o desenvolvimento web? Hoje não é de programação web, por se, já que a maioria tudo o que fizemos foi muito estético, se quiserem. Não há nenhuma tomada de decisões em o código que nós escrevemos, e é por isso que o HTML é uma marcação linguagem, não uma linguagem de programação. Mas amanhã vamos dar um olhar rápido, em última análise, em JavaScript, que é uma programação real linguagem que nos permite fazer um pouco mais. 

Alguma pergunta? Bem, deixe-me propor dois oportunidades opcionais para trabalhos de casa. Um é-- estes Cloud9 contas não irá expirar. Você está convidado a usar -los para mexer com. É o nível de serviço grátis. Perceba que, se ao criar seu espaço de trabalho, você tornou público, que significa que qualquer pessoa na Internet pode ver o que você está digitando. Então, talvez apenas considere não embaraçar a si mesmo se você está colocando o seu primeiro web Página lá fora publicamente acidentalmente, mas ninguém vai saber para olhar lá de qualquer maneira. 

E dois-- deixe-me atirar -se esta URL, bem como, especialmente se você veio hoje uma pouco menos confortável do que outros, sem saber o que significa tudo isso. Perceber que muito mais deste vídeo, que é tanto uma boa maneira de adormecer e também para rir enquanto Fazendo isso, também tem um monte de socialmente interessante e discussões relevantes para a segurança nele de John Oliver, embora um comediante. 

Mas se não há mais dúvidas, que nos traz para a recepção. Então por que não ligo a música. Deve haver bebidas e lanches fora. Estou feliz por conviver por tanto desde que as pessoas gostariam, responder a perguntas mais one-on-one. Mas, caso contrário, você é bem-vindo para decolar a qualquer momento, e vamos vê-lo novamente amanhã de manhã para um pouco mais. Tudo bem, obrigado.