Unha introdución ao desenvolvemento web

HTML 5 logo on an iPhone smartphone with app icons around it in a cloud
Benvido ao web.

Na miña época (Ok, antes do meu día), a profesión de programador web foi unha baixa. El clasificou baixo odia can, pero sobre Yankees fan na escala de honra profesional. Por mor de todas as marcas e imaxes transparencia espazos que usan, que eran vistos como hackers bruto con ningún sentido da estética.

Ben, que aínda se pode carente de sentido estético, pero como a web desenvolveuse así como a profesión de programador web. Hoxe en día hai moitas ferramentas que podemos empregar para facer ben escrito, normas acordes, e bonito (Ok, quizais non tan última) páxinas web. A maioría dos grandes sitios que usa hoxe (plug descarado: incluíndo este) son construídos utilizando estas ferramentas.

Noso banda de ferramentas ao final do navegador nos permitiron crear cousas na web que eran inimaxinábeis só 10 anos, como moitas redes sociais que afirman ser o mellor xeito de perder o seu tempo, “quente” startups de tecnoloxía afirman que revolucionou algo que xa se fixo mil veces, e clons Angry Birds alegando ser só un pouco peor que o orixinal. Todo na web. Entón quizais estas ferramentas non ir para o máis grande de usos.

Entón, cales son esas ferramentas incribles que eu teño benvida a falar? Liderando o camiño foi o (francamente sorprendente) linguas chamados HTML5, CSS3, e JavaScript, que eu apelido 3 cabaleiros do webocalypse. Aquí está un ollo a cada un:

HTML

HTML (propiamente coñecido como HyperText Markup Language; podes ver por que a xente que non queren quedar mal basta usar a sigla) é o linguaxe utilizada para formatar páxinas web. Fai clic co botón dereito do rato nesta páxina e prema “View Source”. Ese é o código HTML que esta páxina usa.

Esencialmente, HTML é unha morea de etiquetas, que o navegador interpreta e define. Por exemplo, mirar para este código HTML:

<p>Eu non sei sobre ti, pero me gusta de usar botóns.</p>

<br>

<botón>Prema en min!</botón>

Este código HTML ten texto envolto nun parágrafo (o <p> tag comeza un parágrafo, o </p> tag remata un parágrafo.) Hai un salto de liña (o <br>) e logo, un botón que pode facer clic ao contido do seu corazón. O seu navegador pode poñelas na pantalla para ti.

Entón, iso é todo moi ben. Pero se non ten nada, pero HTML, you get a webpage that looks like it came straight out of the 1990’s. Non moi bo saíu da década de calquera maneira (peiteados, música, etc) Pero espera! Hai máis!

CSS

Outra siglas. Verán. CSS significa CSS, que é un pouco de un equívoco, xa que non realmente en cascada (Whatever that Means… é o código de ordenador, non unha fervenza!) CSS é a linguaxe usada para páxinas de estilo. Este, tamén, é interpretado polo navegador.

CSS e HTML traballo xuntos – HTML fai o esquema da páxina, CSS dá o seu toque. Imaxina construír unha casa: HTML ofrece a estrutura de madeira monótono, pero necesario, CSS engade as cores neon e mobiliario peculiar.

CSS é unha linguaxe moi sinxelo: para unha determinada etiqueta HTML (como un parágrafo), pode especificar valores das clases diferentes de estilo. O seu navegador lerá o CSS e aplicala lo a todas as etiquetas HTML de correo. Por exemplo:

p {

cor: vermello;

font-size: 16px;

}

Así, cada parágrafo (cousas en HTML <p> etiquetas) terá vermello font e ser 16 píxeles de tamaño. Se entendeu, estes son algúns dos mesmos estilos que pode usar en Microsoft Word e outras aplicacións.

Entón agora as súas páxinas están definidos e eles parecen moi. Pero aquí está a cousa: iso é todo o que eles fan. Eles só sentir alí e estar fermosa. O que é óptimo e todos, pero os usuarios da web queren máis. Queren animacións extravagantes. Eles queren que os pop-ups (Ok, quizais fixo en 2002, pero eu desacordo.) Eles queren que os botóns que van facer cousas cando fai clic sobre eles.

Sobre este último – iso é un problema. Podes facer unha <botón> HTML, e pode premer nel durante toda a semana, pero el non está a facer nada en breve. Se desexa que o botón, oh eu non sei, mover o seu elefante a través da pantalla e atacar algo, then you need something more.

JavaScript

JavaScript é non un acrónimo, se estaba a pensar. Eles o chamaron de JavaScript, porque parecía que a linguaxe de programación chamado Java, o que é estraño porque non fai. De calquera xeito, JavaScript é a proper programming language that causes all the dynamic effects ve na web.

Como calquera linguaxe de programación, JavaScript é unha serie de comandos que fan variables e utilizan funcións. A parte legal sobre JavaScript (ben, tan legal como unha linguaxe de programación pode ser) é que pode acceder a estes elementos HTML (como parágrafos e botóns) e estilos CSS (como cor e tamaño de letra) e cambia-las. Olle a este código:

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 ‘pmeans it needs to choose paragraphs (remember the <p> element from HTML?) Then you can store the paragraphs to a variable, and the command the browser to change their color CSS style to blue.

What I find interesting (again, this is all from the viewpoint of awebdev”) is how elegantly the three languages work together. Esta última liña de JavaScript interactuar con HTML da páxina e CSS usa para denominala lo. Non é como linguas son só diferentes compoñentes da mesma cousa – son unha ea mesma cousa, lados diferentes da mesma máquina incrible.

Son fascinante? Creo que fai. Isto é só parte da beleza da web.

Publicado por

Neel Mehta

Harvard College. Creador web. Algún filósofo. Drogado Baseball.

One thought on “Unha introdución ao desenvolvemento web”

  1. wow was surprised to find out that u wrote it, good job it is a nice lead into this for me before i go to sawyer’s web programming packets.

Deixar unha resposta