Uma introdução ao desenvolvimento web

Na minha época (Ok, antes do meu dia), a profissão de desenvolvedor web foi uma baixa. É classificado abaixo cachorro invejoso, mas fã Yankees acima na escala de honra profissional. Por causa de todas as marcas e imagens espaçadoras transparência usamos, que eram vistos como hackers bruto com nenhum senso de estética.

Bem, ainda podemos ser falta de senso estético, mas como a Web se desenvolveu por isso tem a profissão de desenvolvedor web. Nos dias de hoje existem inúmeras ferramentas que podemos usar para fazer bem escrito, normas conformes, e bonito (Ok, talvez não tão última) páginas da web. A maioria dos grandes sites que você usa hoje (plug descarado: incluindo este) são construídos usando essas ferramentas.

Nosso bando de ferramentas no final do navegador nos permitiram criar coisas na web que eram inimagináveis ​​apenas 10 anos atrás, como inúmeras redes sociais que afirmam ser a melhor maneira de desperdiçar seu tempo, “quente” startups de tecnologia afirmam que revolucionou algo que já foi feito mil vezes, e clones Angry Birds alegando ser apenas um pouco pior do que o original. Tudo na web. Então talvez essas ferramentas não ter ido para o maior de usos.

Então, quais são essas ferramentas incríveis que eu tenho vindo a falar? Liderando o caminho tem sido o (francamente surpreendente) línguas chamados HTML5, CSS3, e JavaScript, que eu apelido 3 cavaleiros do webocalypse. Aqui está uma olhada em cada um:

HTML

HTML (propriamente conhecido como HyperText Markup Language; você pode ver por que as pessoas que não querem ficar mal basta usar a sigla) é o linguagem utilizada para formatar páginas da web. Clique com o botão direito do mouse nesta página e clique “View Source”. Esse é o código HTML que esta página usa.

Essencialmente, HTML é um monte de etiquetas, que o navegador interpreta e define. Por exemplo, olhar para este código HTML:

<p>Eu não sei sobre você, mas eu gosto de apertar botões.</p>

<br>

<botão>Clique em mim!</botão>

Este código HTML tem texto envolto em um parágrafo (o <p> tag começa um parágrafo, o </p> tag termina um parágrafo.) Há uma quebra de linha (o <br>) e, em seguida, um botão que você pode clicar para o conteúdo do seu coração. Seu navegador irá colocá-lo na tela para você.

Então, isso é tudo muito bem. Mas se você não tem nada, mas HTML, you get a webpage that looks like it came straight out of the 1990’s. Não muito bom saiu da década de qualquer maneira (penteados, música, etc) Mas espere! Há mais!

CSS

Outra sigla. Verão. CSS significa Cascading Style Sheets, que é um pouco de um equívoco, uma vez que não realmente em cascata (whatever that means… é o código de computador, não uma cachoeira!) CSS é a linguagem usada para páginas de estilo. Este, também, é interpretado pelo navegador.

CSS e HTML trabalho juntos – HTML faz o layout da página, CSS dá o seu toque. Imagine construir uma casa: HTML fornece a estrutura de madeira monótono, mas necessário, CSS adiciona as cores neon e mobiliário peculiar.

CSS é uma linguagem bastante simples: para uma determinada tag HTML (como um parágrafo), você pode especificar valores para as classes diferentes de estilo. Seu navegador lerá o CSS e aplicá-lo a todas as tags HTML de correspondência. Por exemplo:

p {

cor: vermelho;

font-size: 16px;

}

Assim, cada parágrafo (coisas no HTML <p> etiquetas) terá vermelho font e ser 16 pixels de tamanho. Se você percebeu, estes são alguns dos mesmos estilos que você pode usar no Microsoft Word e outras aplicações.

Então agora suas páginas estão definidos e eles parecem muito. Mas aqui está a coisa: isso é tudo o que eles fazem. Eles apenas sentar lá e ficar bonita. O que é ótimo e todos, mas os usuários da web querem mais. Eles querem animações extravagantes. Eles querem que os pop-ups (Ok, talvez eles fez em 2002, mas eu discordo.) Eles querem que os botões que vão fazer coisas quando você clicar sobre eles.

Sobre esse último – isso é um problema. Você pode fazer uma <botão> em HTML, e você pode clicar nele durante toda a semana, mas ele não está fazendo nada em breve. Se você deseja que o botão, oh eu não sei, mover o seu elefante através da tela e atacar algo, then you need something more.

JavaScript

JavaScript é não um acrônimo, se você estava pensando. Eles o chamaram de JavaScript, porque parecia que a linguagem de programação chamada Java, o que é estranho porque não faz. De qualquer maneira, JavaScript é a proper programming language that causes all the dynamic effects você vê na web.

Como qualquer linguagem de programação, JavaScript é a series of commands that make variables and use functions. The cool part about JavaScript (bem, as cool as a programming language can be) is that you can access those HTML elements (like paragraphs and buttons) and CSS styles (like font color and size) and change them. Look at this code:

var paragraph = $(‘p’);

paragraph.css(‘color’,’blue’);

This JavaScript code will find all the paragraphs on the page – o $ sign tells the browser to find all matching elements, and the ‘p’ means it needs to choose paragraphs (lembre-se do <p> elemento HTML?) Depois, você pode armazenar os parágrafos para uma variável, and the command the browser to change their color CSS style to azul.

O que eu acho interessante (novamente, isso é tudo do ponto de vista de um “webdev”) é como elegantemente três línguas trabalhar juntos. Essa última linha de JavaScript interagiu com HTML da página e CSS usado para denominá-lo. Não é como línguas são apenas diferentes componentes da mesma coisa – eles são uma ea mesma coisa, lados diferentes da mesma máquina incrível.

Som fascinante? Eu acho que ele faz. Isso é apenas parte da beleza da web.