jairogarcíarincón

Configuración del entorno


402

Introducción



Para poder aprovechar el curso, necesitaremos configurar en nuestro equipo un entorno de desarrollo, esto es, un conjunto de herramientas o aplicaciones que nos permitan desarrollar los sitios web que vayamos creando.

NOTA: Si ya tienes tu propio entorno configurado, puedes omitir este paso o, simplemente, instalar aquellos elementos que te falten.

Básicamente, nuestro entorno de desarrollo se va a componer de 3 elementos:

  1. Una carpeta en nuestro disco duro para almacenar los archivos.
  2. Un navegador web para visualizar y analizar nuestros desarrollos.
  3. Un entorno de desarrollo integrado o IDE (Integrated Development Environment), que es una aplicación que nos facilita la escritura de código en diferentes lenguajes, así como su análisis y depuración.


Carpeta



Respecto a la carpeta en nuestro disco duro, podemos crearla donde consideremos más oportuno, si bien se recomienda utilizar una carpeta que esté sincronizada con alguna nube para evitar perder información, o realizar copias e seguridad periódicamente.

Como nombre de carpeta, yo voy a utilizar, por ejemplo, Curso-Maquetacion-Responsive-2024. Verás que he evitado las tildes, los espacios y los caracteres extraños; en un entorno local no es necesario, pero por convención y de cara al uso de otros lenguajes de programación o de querer publicar en un servidor estos contenidos, es más recomendable hacerlo así.


Navegador web



Es posible utilizar cualquiera de los navegadores web instalados en nuestro equipo. Para el desarrollo del curso utilizaremos Google Chrome, pero se puede utilizar cualquier otro navegador que incluya herramientas de desarrollo, a las que normalmente se accede pulsando la tecla F12 o haciendo clic con el botón derecho y pulsando en Inspeccionar.


Entorno de desarrollo



Como entorno de desarrollo, utilizaremos el software gratuito Visual Studio Code, que puedes descargar haciendo clic en ESTE ENLACE.

Inicialmente, utilizaremos su configuración básica, si bien a medida que avance el curso le iremos añadiendo algunas extensiones que nos faciliten el desarrollo con SCSS/Sass y Angular.

Una vez instalado Visual Studio Code, al abrirlo notarás que está en inglés. Yo lo prefiero así, pero si prefieres ponerlo en español, puedes instalar tu primera extensión haciendo clic en el icono de extensiones y buscar e instalar la extensión oficial Spanish Language Pack de Microsoft.

01 VSC Extensiones
Fuente: Elaboración propia


02 VSC Español
Fuente: Elaboración propia



Con esto tendríamos instalado y configurado nuestro entorno desarrollo. En la siguiente entrada crearemos nuestra primera página web y comprobaremos que todo funciona adecuadamente.


Publicado el 21 de Noviembre de 2024

maquetacionwebresponsive flexboxgridangularmaterialmedia queries