Los fundamentos del desarrollo web

Entonces aquí estás, leyendo esta introducción, probablemente en un navegador de algún tipo. Tal vez en tu tableta, tal vez en tu smartphone, o tal vez en un viejo ordenador de sobremesa. La pregunta clave aquí es ¿cómo llega esta página a tu pantalla? Para aprender sobre los fundamentos del desarrollo web debemos responder las preguntas básicas primero: 

¿Qué es Internet?

Internet es esencialmente una red global de recursos informáticos. Se puede pensar en Internet como una colección física de routers y circuitos como un conjunto de recursos compartidos.

Algunas de las definiciones más comunes son:

• Una red de redes basada en el protocolo de comunicaciones 
• Una comunidad de personas que utilizan y desarrollan esas redes.

- Servicios basados en Internet
Algunos de los servicios básicos disponibles para los usuarios de Internet son

Correo electrónico - Una forma rápida, fácil y económica de comunicarse con otros usuarios de Internet de todo el mundo.

Telnet - Permite a un usuario entrar en un ordenador remoto como si fuera un sistema local.

FTP - Permite a un usuario transferir prácticamente todo tipo de archivos que puedan almacenarse en un ordenador de un ordenador conectado a Internet a otro.

UseNet news - Un tablón de anuncios distribuido que ofrece un servicio combinado de noticias y debates sobre miles de temas.

World Wide Web (WWW) - Una interfaz de hipertexto para los recursos de información de Internet.

Ahondemos un poco más en esta última:

¿Qué es WWW?

WWW son las siglas de World Wide Web. En términos sencillos, la World Wide Web es una forma de intercambiar información entre ordenadores en Internet, uniéndose en una vasta colección de recursos multimedia interactivos.

¿Qué es un navegador web?

Los navegadores web son programas instalados en tu PC. Para acceder a la Web se necesita un navegador web, como Netscape Navigator, Microsoft Internet Explorer o Mozilla Firefox.

En la Web, cuando se navega a través de las páginas de información, esto se conoce comúnmente como navegación o surf.

¿Qué es un servidor web?

Cada sitio web se encuentra en un ordenador conocido como servidor web. Este servidor está siempre conectado a Internet. Cada servidor conectado a Internet obtiene una dirección de carácter único compuesta por una serie de cuatro números entre 0 y 256 separados por puntos. Por ejemplo, 68.178.157.132 o 68.122.35.127.

Cuando se registra una dirección web, también conocida como nombre de dominio, como tutorialspoint.com hay que especificar la dirección IP del servidor web que aloja el sitio.

Con todo estos conceptos aclarados, ahondamos en uno que nos interesa especialmente: 
 

El HTTP

Comenzamos este artículo con una pregunta clave: ¿cómo llega esta página a tu pantalla? Pues verás, la página que estás viendo es el resultado de un navegador web que se comunica con un servidor web. Durante la conversación ocurren varias cosas importantes.

El navegador y el servidor "hablan" entre sí usando un protocolo relativamente simple llamado HTTP, que significa Protocolo de Transferencia de Hipertexto.

Si desglosamos HTTP en sus dos componentes, obtendremos un poco más de detalle:

- Hipertexto: la idea del hipertexto es que te enlaza de una página a otra. Sin embargo, el concepto de Hipertexto es central en los fundamentos del desarrollo web, ya que el texto específico que se transfiere sigue un estándar llamado Lenguaje de Marcado de Hipertexto (HTML).

- Protocolo de transferencia: cuando dos programas quieren hablar entre sí, ambos tienen que "hablar el mismo idioma". Un protocolo es una descripción muy específica de una serie de mensajes que dos programas utilizan para comunicarse.

El servidor web envía el HTML al navegador a través de Internet y el navegador convierte el HTML en la página con el formato que se ve en la pantalla.

Al principio de la World Wide Web sólo existía el HTML, y las páginas web eran un poco sosas comparadas con lo que estamos acostumbrados a ver hoy. Ahora las páginas web modernas se basan en tres tecnologías básicas: 

HTML - Hyper Text Markup Language (Lenguaje de Marcado de Hipertexto) 

HTML es un tipo de lenguaje web que se usa para expresar contenidos. El HTML es un lenguaje de marcas que anota el texto para que el ordenador pueda manipularlo con algún propósito. La mayoría de los lenguajes de marcas son legibles por los humanos y están diseñados para ser escritos con un editor de texto plano en lugar de un procesador de textos de lujo como Microsoft Word.

El trabajo de html es estructurar el documento y proporcionar contenido. HTML utiliza algo conocido como etiquetas que se usan para anotar (marcar) el documento. Todas las etiquetas tienen el siguiente aspecto: < tagname >  (etiqueta/marca de apertura) y están equilibradas para que al final del contenido de esa etiqueta haya </ tagname > (etiqueta/marca de cierre).

CSS - Cascading Style Sheets (Hojas de estilo en cascada) 

El CSS se puede utilizar para dar estilo al texto de un documento muy básico, por ejemplo, cambiando el color y el tamaño de los encabezados y los enlaces. Puede utilizarse para crear un diseño, por ejemplo, para convertir una columna de texto en un diseño con un área de contenido principal y una barra lateral para información relacionada. Incluso puede usarse para efectos como la animación.

- Sintaxis de CSS

CSS es un lenguaje basado en reglas: se definen reglas que especifican grupos de estilos que deben aplicarse a determinados elementos o grupos de elementos de la página web. Por ejemplo, "Quiero que el encabezado principal de mi página se muestre como un texto rojo grande".

El siguiente código muestra una regla CSS muy simple que lograría el estilo descrito anteriormente:
 

El lenguaje de programación JavaScript

JavaScript es un lenguaje de programación basado en texto que se utiliza tanto en el lado del cliente como en el del servidor y que permite hacer páginas web interactivas. HTML y CSS también son lenguajes pero orientados a la estructura y estilo, mientras que JavaScript tiene la función de aportar los elementos interactivos. Un ejemplo básico es el cuadro de búsqueda de Amazon, o cuando estás en una página web y al pasar sobre ciertos gráficos estos se mueven o te dan otras información o algo tan simple como los videos incrustados en los sitios web. 

La incorporación de JavaScript mejora la experiencia del usuario de la página web al convertirla de una página estática a una interactiva. Es decir, JavaScript es un lenguaje de programación que añade comportamiento a los sitios web.

Sin embargo, JavaScript no es el único lenguaje de programación que existe, también los desarrolladores web trabajan con Python, C++, C#, PHP, entre otros. 

HTML, CSS y los lenguajes de programación como JavaScript son los tres grandes del desarrollo web, conforman la base de cualquier página de internet en la que hagas clic. 
 

Conclusión

Estos conceptos son solo lo básico de lo que concierne al desarrollo web, que es un mundo extenso y que cada día se va actualizando. No obstante, si conoces estos conceptos y aprendes HTML y un lenguaje de programación como JavaScript ya estás dando el primer paso para tener una carrera en el desarrollo web y trabajar con empresas como Imagina Colombia en el área de diseño web.