Introducción al desarrollo web

En mis tiempos (Aceptar, antes de mi día), la profesión de programador web era un mínimo de un. Se sitúa por debajo de perrito enemigo fanático de los Yankees, pero por encima de la escala del honor profesional. Debido a todas las etiquetas y las imágenes de las transparencias separadoras utilizamos, nos veían como hackers crudo sin sentido de la estética.

Bien, todavía pueden faltar en sentido estético, pero a medida que la Web se ha desarrollado lo ha hecho la profesión de programador web. En estos días hay un sinnúmero de herramientas que podemos utilizar para hacer bien escrito, normas conformes, y hermoso (Aceptar, tal vez no es que el último) páginas web. La mayoría de los grandes sitios web que usted utiliza hoy (descarado enchufe: incluido éste) se construyen utilizando estas herramientas.

Nuestro grupo de herramientas en el extremo del navegador han permitido crear cosas en la web, inimaginables apenas 10 Hace años, tales como un sinnúmero de redes sociales que dicen ser la mejor manera de perder el tiempo, “caliente” nuevas empresas de tecnología que afirman haber revolucionado algo que ya se ha hecho una y mil veces, y los clones de Angry Birds que dicen ser sólo ligeramente peor que el original. Todo en la web. Así que tal vez estas herramientas no han ido a la más grande de usos.

Entonces, ¿qué son estas herramientas increíbles que he estado hablando? Liderando el camino ha sido el (francamente increíble) lenguas llamadas HTML5, CSS3, y JavaScript, que yo apodo de la 3 jinetes del webocalypse. He aquí un vistazo a cada uno:

HTML

HTML (bien conocido como HyperText Markup Language; se puede ver por qué las personas que no quieren quedar mal sólo tiene que utilizar el acrónimo) es el lenguaje utilizado para diseñar páginas web. Haga clic derecho en esta página y haga clic en “Ver código”. Ese es el código HTML que esta página enlaza.

Esencialmente, HTML es un montón de etiquetas, que el navegador interpreta y establece. Por ejemplo, mira este código HTML:

<p>Yo no sé ustedes,, pero me gusta pulsar botones.</p>

<br>

<botón>Click me!</botón>

Este código HTML ha texto ajustado en un párrafo (la <p> tag comienza un párrafo, la </p> tag termina un párrafo.) Hay un salto de línea (la <br>) y luego un botón, usted puede hacer clic en el contenido de su corazón. Su navegador no lo pondrá en la pantalla para que usted.

Así que eso es todo bien y bueno. Pero si usted no tiene nada, pero HTML, you get a webpage that looks like it came straight out of the 1990’s. No hay mucho bueno salió de esa década de todos modos (peinados, música, etcétera) Pero espera! Hay más!

CSS

Otra sigla. Verano. CSS significa Hojas de Estilo en Cascada, que es un nombre poco apropiado, ya que no realmente en cascada (sea ​​lo que sea… es código informático, no una cascada!) CSS es el lenguaje utilizado para las páginas web de estilo. Este, demasiado, es interpretado por el navegador.

CSS y HTML trabajan juntos – HTML hace que el diseño de la página, CSS le da su toque. Imagina construir una casa: HTML proporciona el marco de madera monótono pero necesario, CSS agrega los colores de neón y muebles originales.

CSS es un lenguaje bastante sencillo: para un determinado tag HTML (como un párrafo), puede especificar valores para las clases diferentes de estilo. Su navegador leerá el CSS y aplicarlo a todas las etiquetas HTML a juego. Por ejemplo:

p {

color: rojo;

font-size: 16px;

}

Así que cada párrafo (cosas en el código HTML <p> etiquetas) tendrá rojo font y estar 16 píxeles de tamaño. Si se han fijado, estos son algunos de los mismos estilos que puede utilizar en Microsoft Word y otras aplicaciones.

Así que ahora sus páginas web están diseñadas, y se ven bastante. Pero aquí está la cosa: eso es todo lo que hacen. Ellos sólo se sientan allí y ven bastante. Lo cual es genial y todo, pero los usuarios de la web quieren más. Quieren animaciones de lujo. Ellos quieren que los pop-ups (Aceptar, tal vez lo hicieron en 2002, pero estoy divagando.) Quieren botones que hacer cosas cuando se hace clic en ellos.

Sobre esto último – eso es un problema. Usted puede hacer una <botón> en HTML, y usted puede hacer clic en él toda la semana, pero no está haciendo nada en el corto plazo. Si desea que el botón para, oh no sé, mover el elefante a través de la pantalla y atacar algo, then you need something more.

JavaScript

JavaScript es no un acrónimo, si se preguntan. Lo llamaron JavaScript porque parecía que el lenguaje de programación llamado Java, lo cual es extraño porque no lo hace. De todos modos, JavaScript es a proper programming language that causes all the dynamic effects que se ve en la web.

Al igual que cualquier lenguaje de programación, JavaScript es una serie de comandos que hacen que las variables y utilizan funciones. Lo bueno acerca de JavaScript (bien, tan fresco como un lenguaje de programación puede ser) es que se puede acceder a esos elementos HTML (como párrafos y botones) y estilos CSS (como el color y el tamaño de la fuente) y cambiarlos. Mira este código:

var paragraph = $(‘p’);

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

This JavaScript code will find all the paragraphs on the page – la $ sign tells the browser to find all matching elements, and the ‘p’ means 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 (de nuevo, this is all from the viewpoint of a “webdev”) is how elegantly the three languages work together. Esa última línea de JavaScript interactuó con el HTML de la página y el CSS utilizado para diseñarlo. No es que estas lenguas son sólo diferentes componentes de la misma cosa – son una y la misma, diferentes caras de una misma máquina asombrosa.

Suena fascinante? Yo creo que sí. Eso es sólo una parte de la belleza de la web.