Loc801: Localización Web para Principiantes
📋 Esquema
TEMA 2

Configuración de Cuenta GitHub y Visual Studio Code

Configura tu entorno de desarrollo profesional con GitHub y Visual Studio Code. Crearás tu primer repositorio, publicarás un sitio web en vivo y establecerás la base para tu portafolio de localización web.

🧭 Resumen General

Quienes desarrollan software a menudo usan una combinación de Visual Studio Code y GitHub para proyectos de programación, y los equipos usan GitHub para colaborar en proyectos de programación. Vas a crear la cuenta de GitHub donde construirás tu portafolio de localización web. En esta página, también encontrarás instrucciones sobre cómo conectar tu cuenta de GitHub a Visual Studio Code.

❓ ¿Qué es GitHub?

GitHub es una plataforma web para control de versiones y colaboración. Permite a quienes desarrollan y a profesionales de la localización trabajar juntes en proyectos, rastrear cambios y administrar repositorios de código. Para aprender más sobre GitHub y Git, visita la documentación oficial:

Acerca de GitHub y Git - Documentación de GitHub

💻 ¿Qué es Visual Studio Code?

Visual Studio Code (VS Code) es un editor de código gratuito y potente que admite múltiples lenguajes de programación y ofrece funciones como resaltado de sintaxis, depuración e integración con Git. Es una herramienta esencial para el desarrollo web y el trabajo de localización. Para aprender más sobre VS Code, visita:

Descripción General de Configuración de Visual Studio Code

📋 Parte 1: Configura tu Cuenta de GitHub

⚠️ Nota Importante
Lo que observes en tu máquina al seguir estas instrucciones puede no coincidir exactamente con lo que se indica aquí. Si encuentras problemas, puedes pedir ayuda a ChatGPT u otro sistema basado en LLM. Además, hay múltiples formas de conectar GitHub a VS Code, y te recomendamos explorar varios métodos para encontrar el que funcione mejor para ti.

1

Crea tu Cuenta

Navega a https://github.com y regístrate para crear una cuenta. Si ya tienes una cuenta de GitHub, puedes omitir este paso.

2

Habilita la Autenticación de Dos Factores

Una vez que hayas creado y verificado tu cuenta, habilita la autenticación de dos factores navegando a Configuración de cuenta → Contraseña y autenticación → Habilitar 2FA.

3

Configura tu Perfil

Haz clic en Editar perfil. Agrega una imagen de avatar, tu nombre y una breve biografía. También puedes agregar tu correo electrónico y enlaces a redes sociales relevantes para hacer tu perfil profesional y completo.

⚙️ Parte 2: Instala Git en tu Computadora

1

Para Windows

  • Descarga Git desde https://git-scm.com/download/win
  • Ejecuta el instalador
  • Usa la configuración predeterminada (recomendado para principiantes)
  • Completa la instalación
2

Para macOS

  • Abre Terminal
  • Escribe: git --version
  • Si Git no está instalado, macOS te pedirá que instales Xcode Command Line Tools
  • Sigue las indicaciones para instalar
3

Verifica la Instalación de Git

  • Abre Git CMD (Windows) o Terminal (macOS/Linux)
  • Escribe: git --version
  • Deberías ver un número de versión (ej., "git version 2.43.0")
Ventana de terminal mostrando git version 2.48.1.windows.1 en respuesta al comando git --version
💡 Importante para Usuaries de Windows
Cuando instalas Git, viene con Git CMD - un programa de línea de comandos especial diseñado para trabajar con Git. Debes usar Git CMD (no el Command Prompt regular) siempre que necesites ejecutar comandos de Git. Encontrarás Git CMD en tu menú Inicio después de la instalación.

🔧 Parte 3: Configura Git

1

Establece tu Identidad

Abre Git CMD (Windows) o Terminal (macOS/Linux) y ejecuta los siguientes comandos:

  • Establece tu nombre de usuario de GitHub: git config --global user.name "tu nombre de usuario"
  • Verifica que tu nombre de usuario se configuró correctamente: git config user.name
  • Establece tu correo electrónico (usa el mismo correo electrónico de tu cuenta de GitHub): git config --global user.email "tu.correo@ejemplo.com"
  • Verifica que tu correo electrónico se configuró correctamente: git config user.email
Ventana de terminal mostrando comandos git config estableciendo nombre de usuario global a locessentials y correo electrónico a localization.essentials@gmail.com

📥 Parte 4: Descarga e Instala Visual Studio Code

1

Instala VS Code

Si aún no has instalado Visual Studio Code:

  • Ve a https://code.visualstudio.com
  • Haz clic en Descargar para tu sistema operativo
  • Instala VS Code siguiendo las indicaciones del instalador
  • Inicia VS Code

📦 Parte 5: Crea un Repositorio en GitHub

1

Crea tu Primer Repositorio

  • Navega a GitHub y asegúrate de haber iniciado sesión en tu cuenta
  • Haz clic en el ícono + en la esquina superior derecha y selecciona New repository
  • Nombre del repositorio: loc801-hello-world
  • Selecciona Public (para que puedas compartir tu trabajo)
  • No es necesario agregar un README o una licencia en este momento
  • Haz clic en Create repository
Formulario de creación de repositorio de GitHub con campos para nombre del repositorio, descripción, configuración de visibilidad y opciones de inicialización

📄 Parte 6: Agrega un Archivo a tu Repositorio

1

Crea tu Primer Archivo HTML

  • En tu nuevo repositorio en GitHub.com, haz clic en el enlace "creating a new file" en el cuadro azul claro de Quick setup
  • Nombra el archivo: index.html
  • Copia y pega este código en el archivo:
<!DOCTYPE html>
<html>
<head>
    <title>¡Hola, mundo!</title>
</head>
<body>
    <h1>Bienvenides a mi sitio</h1>
    <p>¡Próximamente! Una serie de proyectos web localizados</p>
</body>
</html>
  • Haz clic en Commit changes… Puedes actualizar el mensaje del commit y agregar una descripción extendida si deseas
Interfaz web de GitHub mostrando el editor de archivos index.html con estructura HTML básica incluyendo encabezado Bienvenides a mi sitio

💾 Parte 7: Clona tu Repositorio a tu Computadora

1

Obtén la URL del Repositorio

  • En la página principal de tu repositorio en GitHub.com, haz clic en el botón verde Code
  • Asegúrate de que HTTPS esté seleccionado (no SSH) y haz clic en el ícono de copiar para copiar la URL (se verá así: https://github.com/tunombredeusuario/loc801-hello-world.git)
2

Clona el Repositorio

  • Abre Git CMD (Windows) o Terminal (macOS/Linux) y navega a la ubicación de carpeta donde deseas almacenar el proyecto. Por ejemplo: cd C:\Users\alain\OneDrive\Documents\GitHub
  • Clona el repositorio: git clone https://github.com/tunombredeusuario/loc801-hello-world.git
  • Una carpeta con el nombre de tu repositorio que contiene tu archivo index.html debería estar ahora en la ubicación que indicaste
Explorador de archivos de Windows mostrando la carpeta loc801-hello-world que contiene una carpeta .git y el archivo index.html
3

Abre en Visual Studio Code

  • Abre la carpeta del repositorio en Visual Studio Code navegando a File → Open folder
  • Haz algunos cambios al contenido del archivo en VS Code, respetando la estructura del código HTML
Editor de Visual Studio Code mostrando el archivo index.html con estructura de código HTML incluyendo encabezado de bienvenida y párrafo sobre próximos proyectos web localizados
4

Envía los Cambios a GitHub

Ahora, envía los cambios a tu repositorio en GitHub. En Git CMD/Terminal:

  • Navega a la carpeta del repositorio usando el comando cd
  • git add .
  • git commit -m "Descripción de la actualización"
  • git push
Ventana de terminal mostrando comandos git add, commit y push con salida confirmando el envío exitoso al repositorio remoto

Navega de regreso a tu repositorio en GitHub y observa las actualizaciones.

🌐 Parte 8: Habilita GitHub Pages (¡Haz tu Sitio Visible!)

1

Configura GitHub Pages

  • Navega a la configuración del repositorio (no la configuración de tu cuenta)
  • En la barra lateral izquierda, desplázate hacia abajo y haz clic en Pages
  • En Source, selecciona Deploy from a branch
  • En Branch, elige main del menú desplegable
  • Mantén la carpeta configurada en / (root)
  • Haz clic en Save
2

Espera el Despliegue

  • GitHub mostrará un mensaje indicando que tu sitio se está desplegando
  • Actualiza la página después de unos 30 segundos
  • Verás un mensaje: "Your site is live at https://tunombredeusuario.github.io/loc801-hello-world/"
Página de configuración de GitHub Pages mostrando que el sitio está en vivo en locessentials.github.io/loc801-hello-world con opciones de despliegue
3

Visita tu Sitio en Vivo

  • Haz clic en el botón Visit site o copia la URL
  • ¡Tu página Hello World ahora está en vivo en internet!
  • La URL de tu sitio siempre será: https://tunombredeusuario.github.io/loc801-hello-world/
Ventana del navegador mostrando el sitio web publicado con encabezado Bienvenides a mi sitio y texto sobre próximos proyectos web localizados
📌 Notas Importantes
  • • Puede tomar 1-2 minutos para que tu sitio aparezca la primera vez
  • • Cada vez que envíes cambios a GitHub, tu sitio se actualizará automáticamente
  • • Puedes compartir esta URL con cualquier persona - es públicamente accesible
  • • ¡Esto es perfecto para mostrar tu portafolio de localización a posibles empleadores o clientes!

🗺️ Lo que Viene a Continuación

Ahora que tienes Git y GitHub configurados con VS Code y tu primer sitio web en vivo, ¡estás liste para comenzar a trabajar en proyectos de localización! En las próximas lecciones:

  • Aprenderás más sobre cómo trabajar en Visual Studio Code
  • Aprenderás sobre la estructura HTML y cómo identificar contenido traducible
  • Trabajarás con múltiples lenguajes de programación web para construir sitios web bilingües
  • Usarás GitHub Pages para publicar sitios web bilingües
  • Usarás GitHub para administrar tu portafolio de localización

¡Ahora que tienes GitHub, también podrás colaborar con equipos en proyectos de localización web!