En esta guía aprenderás a configurar un entorno de desarrollo para el sistema operativo Windows, también, conocerás las herramientas básicas necesarias para tener un correcto y eficiente flujo de trabajo utilizando las herramientas y los estándares de la industria.
El Objetivo, es que aprendas cómo configurar las herramientas necesarias para iniciar a programar, mantener tu código y tener las mejores prácticas para que tu trabajo sea eficiente.
Conocerás y configurarás:
- Navegador y sus herramientas de desarrollo.
- Editores de texto para la escritura de código de programación.
- Windows subsystem for Linux (WSL).
- Git y GitHub.
No te preocupes si no sabes a qué refieren todas estas herramientas, a través de esta guía, hablaremos de cada una de ellas.
El Navegador web y sus herramientas de desarrollo
El navegador web es un software que nos permite acceder a Internet. A través de este acceso, nosotros podemos consumir contenidos, hacer compras, realizar transacciones bancarias e incluso pagar nuestros servicios públicos.
Pero, te has preguntado ¿Cómo funciona un navegador web?
Para acceder a Internet, el navegador utiliza un protocolo denominado: Hypertext Transfer Protocol (HTTP) o (Protocolo de transferencia de Hipertexto) que nos conecta con los servidores que alojan las páginas, aplicaciones o los servicios de Internet a los cuales deseamos acceder.
El protocolo HTTP, también existe de forma segura (HTTPS) y este tipo de conexión, garantiza una capa de seguridad adicional que encripta la información que compartimos a los portales y aplicaciones disponibles en Internet.
Por eso la importancia de observar el protocolo https://mipagina.com en la barra del navegador cuando accedemos a un carrito de compras, por ejemplo. Para que el protocolo HTTPS funcione, se necesita de certificados SSL, sin embargo, no hablaremos de esta tecnología en esta guía.
El navegador muestra las páginas y aplicaciones web interpretando tres tecnologías: Hypertext Markup Language (HTML), El Cascade Style Sheet (CSS) y el Javascript (JS). Estas tres, son estándares y funcionan en todos los navegadores web.
Tipos de navegadores web
La mayoría de personas utilizamos las versiones estándar de navegadores web, entre las más utilizadas están: Google Chrome, Mozilla Firefox, Safari, Opera, Edge e Internet Explorer. Estos navegadores son para el uso común, es decir, para personas que utilizan el navegador solamente para interactuar en internet.
Todas las versiones estándar de navegadores web, ofrecen herramientas de desarrollo, sin embargo, cada navegador tiene una versión para uso específico de desarrollo y ese tipo de navegadores son los que vamos a utilizar.
Versiones de navegadores
Sabemos que todos los navegadores tienen versiones estándar y son para el uso general, sin embargo, las personas que desarrollan para Internet, deben utilizar navegadores con herramientas específicas para el desarrollo, estas permiten probar el código, identificar errores y probar características futuras de HTML, CSS y JavaScript.
Versiones de navegadores para el desarrollo web
- Chrome Dev y Chrome Canary. La diferencia entre Dev y Canary, es que la última se actualiza todas las noches conforme a las nuevas actualizaciones disponibles del navegador.
- Firefox Dev.
- Edge Dev Tools.
Instalación de navegadores web para el desarrollo
Google Chrome for Developers
Descarga esta versión de Google Chrome haciendo clic aquí.
Firefox Browser Developer Edition
Descarga esta versión de Firefox haciendo clic aquí.
Windows DevTools
Primero, debes descargar la versión estándar del navegador web, clic aquí.
Luego, en la tienda de aplicaciones de Microsoft, en su buscador escribe “Edge DevTools”
Editores de texto para código de programación
Cuando escribimos código de programación, básicamente estamos escribiendo texto, entonces, necesitamos de un software editor de código que facilite el trabajo de desarrollo.
Y la verdad, es que el código de programación se puede escribir con cualquier editor de texto, incluso, con el bloc de notas; pero, ¿para qué complicarte? Existen editores de código de todo tipo y entre estos, obviamente existen editores de código para la programación.
Los editores de texto para código de programación, proporcionan herramientas para garantizar que estamos escribiendo bien el código, nos lo presenta de manera legible y nos facilita la tarea de identificación de errores de lógica o de escritura.
De forma instantánea, los editores de código para programar nos informan el avance de la escritura de código y agilizan nuestro trabajo con herramientas de: navegación entre carpetas, acceso a consola, legibilidad del código y muchas otras más que vamos a necesitar en nuestro trabajo de desarrollo web y de aplicaciones.
Editores de texto para escribir código de programación más utilizados
- Visual Studio Code. Gratuito.
- Atom. Gratuito.
- Webstorm. No es gratuito.
- Sublime Text. Se puede utilizar gratis pero comprando la licencia te quitas de encima el molesto recordatorio de comprarlo.
Ninguno de la lista es mejor que otro, todos tienen lo suyo y son buenos. Tómate el tiempo de utilizarlos y selecciona tu editor de código basado en tu experiencia y como te sientas al utilizarlo.
Además, los editores de código mencionados permiten personalizar la experiencia de uso dependiendo de los lenguajes de programación que utilices.
En esta guía sugerimos utilizar Visual Studio Code, la verdad, es muy bueno y está siendo muy utilizado últimamente por la comunidad de desarrolladores.
Configuración básica de Visual Studio Code
Una vez instalado, Visual Studio Code es una completa herramienta para programar, sin embargo, algunas veces necesitarás algunas herramientas adicionales que no están instaladas por defecto. Estas herramientas, se descargan desde el mismo editor de código y se instalan con un simple clic.
Cómo instalar extensiones en Visual Studio Code
Instalar extensiones
- Te diriges al botón para acceder a la interfaz donde buscas las extensiones
- Buscas la extensión deseada en la caja de texto para buscar
- Instalas la extensión seleccionada haciendo clic en install
Extensiones recomendadas para instalar
A continuación comparto una lista de extensiones para instalar en Visual Studio Code.
Prettier Code Formatter. Permite visualizar de forma bonita y legible el código escrito para la gran mayoría de lenguajes de desarrollo web existentes, incluso, funciona para algunas librerías.
Color Highlight. Coloca en un pequeño recuadro los colores que se están aplicando en las hojas de estilos de las aplicaciones web que se están desarrollando. Es decir, nos permite confirmar que el código hexadecimal del color si corresponde al deseado.
Live Server. Una vez actualizas tu código y lo guardas, esta extensión se encarga de actualizar automáticamente el navegador web para visualizar los cambios. Es decir, nos ahorra el trabajo de presionar F5 o de actualizar desde el botón en el navegador para ver los cambios.
Path Intellisense. Todos los recursos que se visualizan en Internet como imágenes, videos y audios, están almacenados de forma interna en un sistema de carpetas dispuesto por nosotros. Para que estos recursos puedan ser mostrados a través del navegador, se deben introducir en el código las rutas donde están ubicados estos recursos. Entonces, la Extensión Path Intellisense, permite autocompletar las rutas de estos recursos y facilita el trabajo para referenciarlos en nuestras aplicaciones.
Auto rename tag. Hace que escribamos menos letras a la hora de renombrar tags.
Material Icon Theme. Agrega bellos íconos que nos permiten identificar los diferentes lenguajes de programación o herramientas.
Windows Subsystem for Linux (WSL)
Años atrás, y antes de Windows 10, Windows no era un sistema operativo orientado para quienes desarrollan aplicaciones e Internet. Microsoft, siempre había enfocado sus esfuerzos en garantizar una excelente experiencia de uso y eso implicaba dejar a un lado a las personas que desarrollan, esto, por tratarse de un pequeño grupo de personas que en definitiva, no les generaba “ganancias”.
Ahora el panorama es distinto. Resulta que la comunidad de personas que desarrollan aplicaciones e Internet ha crecido exponencialmente y Microsoft no tuvo otra salida que implementar herramientas para volverse competitivo en este campo, el campo del desarrollo.
De ahí surge Windows Subsystem for Linux, una virtualización del Kernel de Linux que funciona dentro del sistema operativo y que convierte a Windows 10 en una potente herramienta para el desarrollo.
Instalación de Windows Subsystem for Linux
Para poder utilizar el kernel de Linux en Windows solo necesitas un requisito, y es tener instalado Windows 10. Más específicamente la versión 2004, compilación 1904 o superior.
Hacer tu Windows 10 una máquina virtual para WSL
Microsoft dispone de una guía para poder instalar WSL.
Instalar la distribución de Linux para WSL. Buscamos la distribución de Linux Ubuntu en la tienda de aplicaciones de Microsoft y la instalamos.
Configuración de WSL y Ubuntu
Requisitos: Tener instalado WSL y la distribución de Ubuntu.
Instalar Windows Terminal. Windows 10 tiene una terminal, sin embargo, Microsoft ha ido desarrollando una terminal mucho más bonita y con mejores características. Para obtenerla, introduce la palabra “terminal” en la tienda de aplicaciones de Microsoft.
Si utilizas por primera vez Ubuntu en tu sistema operativo Windows 10, este terminará de instalarse y te pedirá que ingreses los datos para la creación de un usuario y una contraseña.
Una vez creados el usuario y la contraseña, ya podrás utilizar la distribución de Ubuntu en tu sistema operativo de Windows 10 de Microsoft.
Se recomienda que todo tu trabajo como programador o programadora sea almacenado en una carpeta dentro del entorno WSL Ubuntu. Esto es una buena práctica. Entonces crea una carpeta en el lugar que desees.
mkdir proyectosmkdir sudo proyectoscode .Con este comando abrirás el programa editor de código de Visual Studio Code.
Debes tener en cuenta que como lo estás ejecutando desde WSL, deberás instalar las extensiones nuevamente. También, Visual Studio Code te instalará la extensión WSL para trabajar correctamente con Ubuntu.
Git y Github
Git, es un sistema para el control de versiones distribuido open source diseñado para manejar proyectos de desarrollo de forma veloz y eficiente.
Git fue creado en el año 2005 por Linus Torvalds el creador del kernel de Linux y desde ahí, se ha convertido en el estándar utilizado en la industria para supervisar el avance del desarrollo de los productos de software.
El sistema distribuido de control de versiones es básicamente un repositorio que almacena y documenta cada uno de los cambios que se aplican al código de cualquier producto de software. Es tan potente, que gracias a estos repositorios se pueden revertir errores graves y permite mantener un flujo de trabajo entre desarrolladores de forma eficiente.
Github
Github es un servicio en la nube que nos permite almacenar nuestros repositorios, además, es una red social de personas dedicadas al desarrollo donde se comparte código y se apoya en el desarrollo de proyectos open source.
Git y Github no son lo mismo. Git es la tecnología y Github es un servicio que permite almacenar, mantener y actualizar repositorios basados en el sistema de control de versiones distribuidas Git.
Entonces, si no tienes una cuenta en Github, sugiero que la crees a partir de ahora haciendo clic aquí.
Y obvio existen más servicios como Github. Está GitLab y ambos son los más populares. Sin embargo, sugiero Github porque es el más utilizado por la comunidad de desarrollo en el mundo.
Instalación de Git en la distribución de Ubuntu WSL
La mayoría de distribuciones de Linux tienen Git instalado por defecto, sin embargo, comprueba primero si tienes Git instalado con el siguiente comando.
git –versionEn caso de que no tengas instalado Git, actualiza los paquetes de tu sistema operativo e instala.
sudo apt-get updatesudo apt-get upgradeInstalar Git
sudo apt install gitSi deseas aprender a manejar Git y Github, haz clic aquí.
Y listo, en esta guía conociste las tecnologías básicas y cómo configurarlas para generar un completo entorno de desarrollo en tu sistema operativo Windows. Existen muchas más herramientas, pero estas son las que sí o sí, debes tener y comprender.