Introducción

En el año 1969 se estableció la primera conexión de computadoras pertenecientes a tres universidades de California (Estados Unidos). Dicha conexión fue posible gracias al internet.

Internet es una serie de protocolos establecidos para la comunicación entre dos puntos. Es decir, hablar de internet es hablar de las reglas que se deben seguir para poder ofrecer servicios accesibles mediante la aplicación de esas mismas reglas.

La World Wide Web (www o web) es uno de los servicios más conocidos que se generaron a partir de los protocolos de internet. De hecho, hoy en día es muy común confundirlos y considerarlos sinónimos.

La WWW, creada en 1990, es una serie de protocolos que, utilizando el internet como medio de transmisión, permite la consulta remota de archivos de hipertexto.

El Hipertexto es un documento de texto pensado para escribir, diseñar o componer contenidos que integren soportes tales como: texto, Imagen, video, audio, mapas y otros soportes de información emergentes, de tal modo que el resultado obtenido, además, tenga la posibilidad de interactuar con los usuarios.

Los Navegadores Web son programas que se usan para leer documentos de hipertexto. Para lograrlo se apoyan en el Protocolo HTTP.

El Protocolo HTTP (Hypertext Transfer Protocol) es un conjunto de reglas que utiliza la estructura cliente-servidor. Es decir, un cliente (navegador web) solicita un documento de hipertexto a un servidor (espacio de almacenamiento) que se lo transfiere mediante el internet. Cuando el navegador recibe el archivo, es capaz de mostrar la página web.

El Desarrollo Web consiste en la creación de documentos de hipertexto que se almacenarán en los servidores para que los distintos clientes (navegadores) pueden acceder a la página web solicitada.

Desarrollo Web

El Desarrollo Web se lleva a cabo trabajando con tres tecnologías (tres Lenguajes)

  • HTML (Hypertext Markup Languaje) - Lenguaje de Hipertexto, es la base de todo desarrollo. Permite la creación de los elementos que se verán en la página web. Los archivos HTML incorporan a los archivos CSS y JavaScript
  • CSS (Cascading Style Languaje) - Lenguaje de Selectores utilizado para indicar cómo deben verse los elementos creados con HTML
  • JavaScript - Lenguaje de programación que agrega funcionalidad e interacción a los elementos de la página web.

Todo desarrollador web debe tener un conocimiento mínimo de estos tres lenguajes. Sin embargo,  la profundidad de saberes que se puede alcanzar de cada una de estas, en especial con CSS y JavaScript, hace que sea muy común declinarse por ser más proficiente en uno u otro.

Sitio Web vs. Página Web

En el día a día es muy usual que el término Sitio Web se considere sinónimo de Página Web. Sin embargo, es importante entender que, como desarrolladores, nuestro trabajo es armar Páginas Web, para lo cual crearemos documentos HTML que contendrán archivos CSS y JavaScript.

El conjunto de documentos HTML (con sus respectivos archivos CSS y JavaScript) es conocido como Sitio Web.

Todos los archivos y documentos que conforman un Sitio Web deben quedar almacenados en una única carpeta. Esa carpeta es conocida como Proyecto.

Editores de Código

Los editores de código son programas de computadora pensados para ayudar a los desarrolladores con su trabajo. Existen muchísimos editores disponibles y la elección final sobre cuál utilizar, en última instancia, corresponde cada desarrollador. Sin embargo, de manera colectiva, muchos coinciden en la utilización de Visual Studio Code.

 El editor de código Visual Studio Code (VSCode) es gratuito, multiplataforma (se puede instalar en los Sistemas Operativos Linux, Windows y MAC) y que, además de las herramientas que ya trae incorporadas, permite la ampliación de funcionalidades gracias a las extensiones. 

Por otra parte, VSCode cuenta con una enorme comunidad de usuarios, haciendo muy fácil encontrar la solución a cualquier problema que surja con la utilización del programa mediante una simple búsqueda en Google. 

La ventaja de abrir nuestro Proyecto (carpeta que va a contener nuestros documentos HTML y archivos CSS y JS) con VSCode es que podremos crear, modificar y borrar cada archivo/documento directamente desde el programa.




Extensiones

Las extensiones permiten personalizar las capacidades de VSCode para cada tecnología. Gracias a ellas es posible que dos desarrolladores tengan una experiencia completamente distinta con el mismo programa. 

Instalar una extensión es tan sencillo como abrir la barra de extensiones y buscar cuál es la que queremos instalar. Una vez encontrada, simplemente hacemos la instalación apretando el botón correspondiente. El mismo proceso se haría en caso de querer desinstalar alguna.



A continuación, vamos a repasar algunas de las extensiones más populares para el desarrollo web. Tener en cuenta que algunas extensiones solo funcionan si tenemos un proyecto (carpeta) abierto en nuestro VSCode

  • Emmet Abreviation - Esta extensión viene preinstalada por lo que no es necesario que la busquemos. Con Emmet vamos a poder escribir pequeñas abreviaciones para indicar qué estructura/código necesitamos y Emmet se encargará de armarlo por nosotros. Para usarlo debemos escribir la abreviación correspondiente y después apretar enter. En su página oficial vas a encontrar una lista completa de abreviaciones disponibles. 
  • Live Server - Con esta extensión vamos a poder ver reflejado en nuestro navegador favorito todos los cambios que realizamos al proyecto. Tener en cuenta que es necesario guardar los cambios para que estos se muestren correctamente. Live Server solo funciona si tenemos abierto un proyecto (carpeta)
  • VSCode-icons - Cambia el ícono de los archivos que creamos por el ícono del Lenguaje al que dicho archivo corresponde. Esta ayuda visual hace mucho más sencillo navegar el proyecto

Conclusión

Un Desarrollador Web arma documentos de hipertexto que serán almacenados en servidores que, gracias a los protocolos del internet, pueden ser leídos por los navegadores web para mostrar las distintas páginas web.

Los editores de código son una herramienta fundamental para el desarrollador porque le permiten escribir de forma más cómoda y poder ver cómo los cambios que efectuados al proyecto afectan a lo que los navegadores web muestran.