Introducción a los entornos de desarrollo

Imagen de un PC con un entorno de desarrollo encendido
Poco a poco nos vamos acercando al código. Hoy veremos qué son los entornos de desarrollo e instalaremos uno….

¿Qué es un entorno de desarrollo integrado (IDE)?

Los entornos de desarrollo integrado (IDE) son unos programas que facilitan la vida al desarrollador, que nos ayudan a hacer nuestro trabajo de una forma más eficiente.

Si estás haciendo este curso y leyendo estas clases introductorias, es muy posible que aún no hayas tocado nunca código. Pero sí estoy seguro de que lo has visto alguna vez, y realmente es a primera vista difícil de entender.

Yo podría perfectamente picar ese código en un documento en blanco en mi ordenador, o en bloc de notas pero… Me sería muy complicado. Un bloc de notas no me pintará el código de colores según su función, ni me va a autogenerar código según unos atajos (lo veremos más adelante), ni me va a mostrar los errores etc. En resumen: picar código en un documento en blanco en el ordenador o escribir el código en papel (como me tocó hacer algunos exámenes en la FP) no tiene el más mínimo sentido en 2021. Es complicarse la vida para nada.

Hay muchos entornos de desarrollo integrados (los programadores acortamos el nombre normalmente y los llamamos entornos de desarrollo o IDEs) y no podemos decir de forma absoluta que haya uno mejor que otro. Simplemente hay preferencias. A mí me gusta mucho Visual Studio Code y es el IDE con el que vamos a trabajar en todo el curso.

Instalación de Visual Studio Code

Web de Visual Studio Code
¡Vamos, que cada vez estamos más cerca de tocar código!

¿Qué es Visual Studio Code?

Visual Studio Code es un entorno de desarrollo sumamente ligero, compatible con una gran mayoría de lenguajes de programación modernos (y no digo todos por no pillarme los dedos, pero siempre he programado con Visual Studio Code-salvo Java, dónde usé Netbeans, que es otro IDE), gratuito y de código abierto.

Es de Microsoft, tiene una gran cantidad de extensiones (pequeños programas que podemos instalar en Visual Studio Code que nos hacen la vida más fácil a la hora de programar), nos ofrece atajos de teclado (ya veremos lo que son más adelante etc.).

Por lo pronto, en esta clase vamos a instalarlo para que en la siguiente ya podamos tocar código.

Instalando Visual Studio Code.

Imagen de la pantalla de descarga de Visual Studio Code
Selecciona tu sistema operativo y descárgate el Visual Studio Code que corresponda

Accederemos a la web de Visual Studio Code y nos descargaremos el instalador de Visual Studio Code que corresponda. No te ralles: si eres de Windows, clicka en el icono grande que ya te detectará automáticamente los bits de tu sistema; y si tienes un sistema operativo basado en Linux simplemente descárgate el apropiado para tu distribución de Linux. Tienes dos opciones. Si tienes conocimientos avanzados de informática (que si estás leyendo esto dudo que sea el caso), puedes descargarte los instaladores desde los ficheros de abajo, pero aquí vamos a hacer una instalación sencilla y sin complicaciones. Resumen: descarga desde los iconos grandes y hazlo fácil.

Ejecutaremos el archivo que nos hemos descargado, que tendrá una extensión .exe. Es decir, se llamará algo parecido a VSCodeUserSetup+x.exe, siendo +x detalles relativos a la versión que nos hemos descargado para nuestro sistema operativo. Un archivo .exe significa que es un archivo ejecutable.

Configuración de Instalación de Visual Studio Code
Es importante que en la instalación marques todas estas opciones

Es una instalación muy sencilla, en la que daremos «siguiente» a todo pero en las tareas adicionales marcaremos todas las casillas.

Tras unos minutos, tendremos Visual Studio Code instalado.

Preparándonos para escribir código.

Ahora que ya tenemos nuestro entorno de desarrollo instalado, sólo nos falta aprender cómo crear proyectos y algunas nociones básicas de cómo funciona un entorno de desarrollo como Visual Studio Code.

Disco-Local-C
Aquí crearemos la carpeta dónde guardaremos los proyectos del curso

Para empezar, quiero que te crees en el Disco Local C: (lo puedes hacer también en el escritorio, pero me gusta más en C:) una carpeta que se llamará CursoHTMLCSS.

Abriendo la carpeta con Visual Studio Code
Abro la carpeta con Visual Studio Code

Clicko en la carpeta con click derecho, y selecciono Abrir con Code, como puedes ver en la imagen de arriba.

Ahora, al abrirse el IDE, estamos dentro de la carpeta de CursoHTMLCSS.

Imagen de Visual Studio Code recién instalado
Vamos a ver algunas cosas básicas de Visual Studio Code

Debajo de dónde pone CURSOHTMLCSS (que es el nombre de la carpeta dónde nos encontramos) nos aparecerán las carpetas y ficheros que tenga cada carpeta. Esa barra cambia según lo que clickemos en los iconos de la izquierda. ¿Qué significan esos iconos? Los veremos de arriba hacia abajo.

  • Los folios uno sobre otro activa la barra que estábamos viendo antes, ya que es el explorador de archivos y ficheros.
  • La lupa abre a su derecha un formulario que nos permite realizar búsquedas de ficheros, carpetas etc.
  • El tercer icono nos sirve para el control de versiones. Cómo no quiero liarte con ello ahora mismo, quédate con que es algo importante para el desarrollo web y lo veremos en el futuro.
  • El cuarto icono nos permite debuggear con VS Code. Debuggear significa buscar el origen de un fallo en nuestro programa. Como este es un curso de HTML y CSS (que son lenguajes de marcas) y los bugs (errores del programa) aparecen cuando usamos lenguajes de programación, no nos preocuparemos de ello de momento.
  • El quinto icono me interesa mucho más, ya que son las extensiones de Visual Studio Code.
Extensiones de Visual Studio Code
Aquí podemos acceder a las extensiones de Visual Studio Code

Las extensiones son pequeños programas que nos ayudarán a que nuestra tarea de escribir código sea más fácil. Las veremos a partir de la próxima clase.

Acceso al índice del curso.

Recuerda que para seguir nuestro curso de HTML y CSS sólo tienes que ir al índice y seguir por la clase de tu interés. ¡Feliz aprendizaje!

Esta clase, al ser práctica, no tiene ejercicios. Si has podido realizar la instalación sin problemas y crear tu carpeta como he detallado arriba, clase finalizada. En caso de duda, recuerda que puedes preguntarle a la comunidad con el hashtag #SoySalvajeHTMLCSS en Twitter y que puedes contactar con nosotros (aunque no me comprometo a responder por falta de tiempo, aunque responderé si puedo)  por TwitterInstagram o por nuestro formulario. Por supuesto, recuerda que si quieres que te ayudemos a crecer como profesional de forma más personalizada, no dudes en consultar nuestros servicios.  Y si estás pensando en comprar algún producto relacionado con informática, no dudes en consultar nuestras recomendaciones en la sección Productos. Nos vemos en la siguiente clase.