Saltar al contenido principal

Configuración del entorno de desarrollo

Configuración del entorno de desarrollo

Para comenzar a desarrollar con HTML, CSS y JavaScript, es fundamental tener un entorno de desarrollo bien configurado. Este artículo te guiará a través de los pasos necesarios para descargar e instalar las herramientas esenciales.

Exploradores Web​

Tener varios navegadores instalados es crucial para probar y asegurar que tus sitios web funcionen correctamente en diferentes entornos. Aquí están los pasos para instalar los navegadores más populares:

Mozilla Firefox:​

  1. Visita la página de descarga de Firefox.
  2. Haz clic en el botón "Download Now" (Descargar ahora).
  3. Ejecuta el archivo descargado y sigue las instrucciones para completar la instalación.

Google Chrome:​

  1. Dirígete a la página de descarga de Google Chrome.
  2. Haz clic en el botón "Download Chrome" (Descargar Chrome).
  3. Ejecuta el archivo descargado y sigue las instrucciones de instalación.

Microsoft Edge:​

  1. Accede a la página de descarga de Microsoft Edge.
  2. Haz clic en el botón "Download" (Descargar).
  3. Ejecuta el archivo descargado y sigue las instrucciones para instalar el navegador.

Pruebas y Depuración

Para asegurarte de que tu sitio web funciona correctamente, es importante realizar pruebas y depuración. Aquí hay algunas herramientas y técnicas que puedes utilizar.

Herramientas de Desarrollo del Navegador​

La mayoría de los navegadores modernos incluyen herramientas de desarrollo que te permiten inspeccionar el código HTML, CSS y JavaScript de tu sitio web, así como depurar errores y realizar pruebas de rendimiento.

Estas herramientas son esenciales para el desarrollo web y te ayudarán a identificar y solucionar problemas en tu código.

Cómo acceder a las herramientas de desarrollo​

  • En Google Chrome, haz clic derecho en cualquier parte de la página y selecciona "Inspeccionar" o presiona Ctrl + Shift + I (Windows) o Cmd + Option + I (macOS).
  • En Mozilla Firefox, haz clic derecho y selecciona "Inspeccionar Elemento" o presiona Ctrl + Shift + I (Windows) o Cmd + Option + I (macOS).
  • En Microsoft Edge, haz clic derecho y selecciona "Inspeccionar" o presiona Ctrl + Shift + I (Windows) o Cmd + Option + I (macOS).

Editor de código​

Un buen editor de código es esencial para escribir y gestionar tu código de manera eficiente. Visual Studio Code es una opción recomendada por su robustez y extensibilidad.

Visual Studio Code​

  1. Visita la página de descarga de Visual Studio Code.
  2. Selecciona la versión adecuada para tu sistema operativo (Windows, macOS o Linux).
  3. Descarga el archivo y sigue las instrucciones de instalación.

Extensiones de VS Code fundamentales​

Auto Close Tag​

Id: formulahendry.auto-close-tag

Descripción: Agregue automáticamente una etiqueta de cierre HTML/XML.

Editor: Jun Han

Link de VS Marketplace: Link de Marketplace

Auto Rename Tag​

Id: formulahendry.auto-rename-tag

Descripción: Cambiar automáticamente el nombre de la etiqueta HTML/XML emparejada.

Editor: Jun Han

Link de VS Marketplace: Link de Marketplace

Autoprefixer​

Id: mrmlnc.vscode-autoprefixer

Descripción: Analice CSS y agregue prefijos de proveedores automáticamente.

Editor: mrmlnc

Link de VS Marketplace: Link de Marketplace

HTML CSS Support​

Id: ecmel.vscode-html-css

Descripción: CSS Intellisense para HTML

Editor: ecmel

Link de VS Marketplace: Link de Marketplace

html tag wrapper​

Id: hwencc.html-tag-wrapper

Descripción: Envuelva la etiqueta html seleccionada presionando ctrl+i, también puede cambiar el nombre de la etiqueta contenedora simplemente.

Editor: hwencc

Link de VS Marketplace: Link de Marketplace

JavaScript (ES6) code snippets​

Id: xabikos.JavaScriptSnippets

Descripción: Fragmentos de código para JavaScript en la sintaxis de ES6.

Editor: charalampos karypidis

Link de VS Marketplace: Link de Marketplace

Live Server​

Id: ritwickdey.LiveServer

Descripción: Inicie un servidor local de desarrollo con función de recarga en vivo para páginas estáticas y dinámicas.

Editor: Ritwick Dey

Link de VS Marketplace: Link de Marketplace

npm Intellisense​

Id: christian-kohler.npm-intellisense

Descripción: Complemento de Visual Studio Code que completa automáticamente los módulos npm en declaraciones de importación.

Editor: Christian Kohler

Link de VS Marketplace: Link de Marketplace

Control de Versiones​

Git es una herramienta de control de versiones que te permitirá gestionar el historial de tu código y colaborar con otros desarrolladores. Para comenzar a utilizar Git, necesitarás instalarlo en tu sistema.

Instalar Git​

  1. Ve a la página de descarga de Git.
  2. Selecciona la versión correspondiente a tu sistema operativo y descarga el instalador.
  3. Ejecuta el instalador y sigue las instrucciones para completar la instalación.
  4. Una vez instalado, abre una terminal (o la línea de comandos en Windows) y verifica la instalación ejecutando:
bash
git --version
  1. Deberías ver la versión de Git instalada en tu sistema.

Configuración de Git​

Una vez que hayas instalado las herramientas mencionadas, sigue estos pasos para configurar tu entorno de desarrollo:

  1. Abre una terminal (o la línea de comandos en Windows).

  2. Luego configura tu nombre de usuario y correo electrónico en Git:

bash
  git config --global user.name "Tu Nombre"
  git config --global user.email "tuemail@ejemplo.com"
  1. Para ver la configuración de nuestro nombre de usuario y correo electrónico, ejecutar:
bash
  git config --global -l

  1. Deberías ver tu nombre de usuario y correo electrónico configurados correctamente.

  2. Si deseas cambiar la configuración de Git en el futuro, puedes editar el archivo de configuración global ubicado en ~/.gitconfig (en Linux y macOS) o %USERPROFILE%\.gitconfig (en Windows).

Repositorios de código​

GitHub es una plataforma de alojamiento de repositorios Git que te permitirá almacenar tu código en línea y colaborar con otros desarrolladores. Para comenzar a utilizar GitHub, necesitarás crear una cuenta.

Crear una Cuenta en GitHub​

  1. Visita GitHub.
  2. Haz clic en "Sign up" (Registrarse) en la esquina superior derecha.
  3. Completa el formulario de registro con tu información personal.
  4. Verifica tu dirección de correo electrónico para activar tu cuenta.
  5. Una vez registrado, podrás crear repositorios y colaborar en proyectos de código abierto.

Clonar un Repositorio desde GitHub​

  1. Abre GitHub y crea un nuevo repositorio.
  2. Copia la URL del repositorio.
  3. Abre la terminal y ejecuta:
bash
git clone https://github.com/tuusuario/tu-repositorio.git

Configurar Visual Studio Code​

  1. Abre Visual Studio Code.

  2. Instala extensiones útiles para el desarrollo web: Live Server: Para lanzar un servidor local y ver tus cambios en tiempo real. Prettier: Para formatear tu código automáticamente. ESLint: Para identificar y corregir problemas en tu códigoJavaScript.

  3. Abre tu proyecto clonado desde GitHub en Visual Studio Code: Haz clic en "File" (Archivo) > "Open Folder" (Abrir Carpeta) y selecciona la carpeta de tu proyecto.

Diseño​

Figma es una herramienta de diseño colaborativa basada en la web que te permitirá crear y compartir maquetas y prototipos de tu sitio web.

Crear una Cuenta en Figma​

  1. Accede a Figma.
  2. Haz clic en "Sign up" (Registrarse) en la esquina superior derecha.
  3. Completa el formulario de registro con tu información personal.
  4. Verifica tu dirección de correo electrónico para activar tu cuenta.
  5. Una vez registrado, podrás crear nuevos diseños y colaborar con otros usuarios en tiempo real.

Conclusión​

Tener un entorno de desarrollo bien configurado es crucial para el éxito en el desarrollo web. Siguiendo estos pasos, estarás preparado para comenzar a crear proyectos con HTML, CSS y JavaScript de manera eficiente y organizada. Además, podrás colaborar con otros desarrolladores y probar tus proyectos en diferentes navegadores para asegurar su compatibilidad y funcionalidad.

Recursos