DIW

Appearance

Repo de DIW en GitHub ​

ATENCIÓN

Esta actividad no debe documentarse ni incluirse en el repositorio del curso. Su finalidad es únicamente proporcionar las instrucciones necesarias para configurar el entorno de trabajo.

Al finalizar, únicamente debes comprobar que:

  • El repositorio de DIW se ha creado correctamente a partir de la plantilla.
  • La documentación del curso se publica correctamente mediante GitHub Pages.

Este será el repositorio utilizado para documentar todas las actividades de DIW. La primera actividad que deberá incorporarse a la documentación será la A1.

Objetivos ​

  • Crear o comprobar una cuenta personal de GitHub.
  • Asociar y verificar el correo de la identidad digital del centro.
  • Establecer un nombre de usuario adecuado para el curso.
  • Comprobar el acceso a GitHub Education.
  • Identificar correctamente la cuenta que se utilizará durante el curso.
  • Comprobar el acceso a la organización de GitHub del curso.
  • Crear el repositorio personal de DIW a partir de la plantilla proporcionada.
  • Clonar el repositorio en el equipo local.

Pasos ​

Realiza los siguientes pasos y comprueba que tu cuenta de GitHub y el repositorio de DIW quedan correctamente configurados.

1. Identidad digital ​

Identifica tu cuenta de correo de la identidad digital proporcionada por el centro.

Tiene el siguiente formato: usuario@alu.edu.gva.es

El identificador situado antes de @alu.edu.gva.es será el nombre de usuario de referencia que utilizaremos durante el curso.

Ejemplo

En la cuenta de correo laumargar@alu.edu.gva.es

El nombre de usuario será: laumargar

2. Cuenta de GitHub ​

Accede a:

https://github.com

Si ya tienes una cuenta de GitHub, utiliza tu cuenta existente.

Si todavía no tienes una cuenta, crea una cuenta personal. Puedes elegir libremente tu nombre de usuario de GitHub.

Identificación de los repositorios

El nombre de usuario de GitHub no tiene que coincidir con el usuario de tu identidad digital.

Para identificar los repositorios del curso se utilizará el usuario de la identidad digital, es decir, la parte situada antes de @alu.edu.gva.es.

Por ejemplo:

text
Identidad digital:    laumargar@alu.edu.gva.es
Usuario GitHub:       laura-dev
Usuario del curso:    laumargar

El repositorio de DIW utilizará este último identificador: laumargar-diw

3. Correo institucional ​

Una vez iniciada la sesión en GitHub:

  1. Accede a Settings.
  2. Entra en Emails.
  3. Comprueba si aparece tu dirección @alu.edu.gva.es.
  4. Si no aparece, añádela.
  5. Completa el proceso de verificación enviado por GitHub a esa dirección.

Comprueba que el correo institucional aparece como verificado en GitHub.

ATENCIÓN

No es necesario publicar tu dirección de correo electrónico en tu perfil de GitHub.

El objetivo es asociarla y verificarla en tu cuenta para poder acreditar tu vinculación académica.

4. GitHub Education ​

Con la sesión iniciada en GitHub, accede a:

https://github.com/settings/education/benefits

Comprueba el estado de GitHub Education de tu cuenta.

Si ya dispones de los beneficios para estudiantes, verifica que aparecen asociados a tu cuenta.

Si todavía no dispones de ellos, inicia la solicitud siguiendo las instrucciones proporcionadas por GitHub.

Durante el proceso puede ser necesario seleccionar o verificar el correo académico @alu.edu.gva.es.

5. Organización y equipo DIW ​

Durante el curso utilizaremos la organización de GitHub: iesgrao-daw-2627

  • Comprueba que puedes acceder a la organización (https://github.com/iesgrao-daw-2627)
  • Los alumnos de DIW estarán incorporados en el Team: DIW
  • Este equipo proporciona acceso a los repositorios y recursos de GitHub necesarios para el módulo.

ATENCIÓN

Si has recibido una invitación para incorporarte a la organización y todavía aparece como pendiente, deberás aceptarla antes de continuar.

6. Repositorio plantilla ​

El repositorio inicial del curso se creará a partir de: diw-template-markdown

ATENCIÓN

No debes clonar directamente diw-template-markdown.

Este repositorio se utiliza únicamente como plantilla para crear tu propio repositorio.

7. Crear el repositorio personal ​

  1. Desde diw-template-markdown, pulsa:

    Use this template → Create a new repository

  2. Configura el nuevo repositorio de la siguiente forma:

    • Owner: iesgrao-daw-2627
    • Repository name: usuario-diw
      Por ejemplo, para: laumargar@alu.edu.gva.es el repositorio será: laumargar-diw
    • Visibility: Private

  3. Tras crear el repositorio, comprueba que contiene los archivos y carpetas proporcionados por la plantilla.

8. Clonar el repositorio ​

Una vez creado tu propio repositorio, debes clonarlo en el equipo en el que vas a trabajar.

Utilizando SSH:

bash
git clone git@github.com:iesgrao-daw-2627/usuario-diw.git

Por ejemplo:

bash
git clone git@github.com:iesgrao-daw-2627/laumargar-diw.git

Problemas al clonar con SSH

Si no puedes clonar el repositorio mediante SSH, comprueba la configuración siguiendo estos pasos:

  1. Comprueba si ya tienes claves SSH:

    bash
    ls -la ~/.ssh

    Comprueba si existen archivos como id_ed25519 e id_ed25519.pub.

  2. Si no tienes una clave SSH, genera una sin frase de contraseña:

    bash
    ssh-keygen -t ed25519 -C "tu_email@alu.edu.gva.es"

    Pulsa Enter para aceptar la ubicación propuesta y deja vacía la frase de contraseña pulsando Enter cuando se solicite.

  3. Muestra la clave pública:

    bash
    cat ~/.ssh/id_ed25519.pub

    Copia su contenido y añádelo en GitHub desde Settings → SSH and GPG keys → New SSH key.

  4. Configura GitHub para utilizar el puerto 443 editando el archivo:

    bash
    nano ~/.ssh/config

    Añade:

    text
    Host github.com
    Hostname ssh.github.com
    Port 443
    User git

  5. Comprueba la conexión SSH con GitHub:

    bash
    ssh -T git@github.com

    La primera vez deberás confirmar la conexión escribiendo yes.

  6. Vuelve a clonar el repositorio:

    bash
    git clone git@github.com:iesgrao-daw-2627/usuario-diw.git

Accede al repositorio:

bash
cd usuario-diw

Por ejemplo:

bash
cd laumargar-diw

Comprueba el repositorio remoto configurado:

bash
git remote -v

El remoto origin debe apuntar a tu repositorio, no a diw-template-markdown.

Por ejemplo:

text
git@github.com:iesgrao-daw-2627/laumargar-diw.git

IMPORTANTE

A partir de este momento trabajarás siempre sobre tu propio repositorio.

El repositorio diw-template-markdown es únicamente la plantilla inicial y no debe utilizarse como repositorio de trabajo.

9. GitHub Pages ​

El repositorio se utilizará también para publicar la documentación de las actividades de DIW mediante GitHub Pages.

Desde tu repositorio personal:

  1. Accede a Settings.
  2. En el menú lateral, selecciona Pages.
  3. En Build and deployment, selecciona Deploy from a branch como origen.
  4. Selecciona la rama main.
  5. Selecciona la carpeta / (root).
  6. Pulsa Save.

La configuración debe quedar:

text
Source:    Deploy from a branch
Branch:    main
Folder:    / (root)

GitHub iniciará automáticamente el despliegue del contenido del repositorio.

Una vez finalizado, la documentación estará disponible en una dirección similar a:

text
https://iesgrao-daw-2627.github.io/usuario-diw/

Por ejemplo:

text
https://iesgrao-daw-2627.github.io/laumargar-diw/

Accede a la dirección proporcionada por GitHub Pages y comprueba que se muestra correctamente la página principal de la documentación.

10. Flujo de trabajo con Git ​

Utilizaremos Git como sistema de control de versiones para mantener sincronizado el repositorio, registrar los cambios realizados y publicarlos en GitHub.

Por ejemplo, supongamos que has realizado cambios en la actividad A1. Diseño de una aplicación web y deseas guardarlos y subirlos a GitHub (repositorio remoto). Antes de hacerlo, debes comprobar si el repositorio remoto contiene cambios que todavía no tienes en tu copia local.

  1. Comprueba si existen cambios en el repositorio remoto: git fetch

  2. Actualiza el repositorio local con los últimos cambios: git pull

    De esta forma comenzarás a trabajar sobre la versión más reciente del repositorio.

  3. Realiza los cambios necesarios en la actividad A1. Diseño de una aplicación web.

  4. Comprueba los cambios realizados: git status

  5. Añade los cambios al área de preparación: git add .

  6. Crea un commit describiendo los cambios realizados:

    bash
    git commit -m "Complete web application design activity"

  7. Sube los cambios a GitHub: git push

  8. Comprueba el repositorio en GitHub:

    • Accede a tu repositorio en GitHub.
    • Comprueba que los archivos modificados contienen los últimos cambios.
    • Accede al apartado Commits y verifica que aparece el commit que acabas de realizar.

  9. Accede a la web publicada con GitHub Pages y comprueba que la actividad se visualiza correctamente.

Flujo habitual de trabajo

Antes de comenzar a trabajar:

text
git fetch
    ↓
git pull

Después de realizar los cambios:

text
git status
    ↓
git add .
    ↓
git commit
    ↓
git push

Es especialmente importante realizar git fetch y git pull cuando se trabaja con el mismo repositorio desde diferentes equipos.

11. Extensiones de Visual Studio Code ​

Instala las siguientes extensiones de Visual Studio Code, que utilizaremos durante el curso.

Git Graph ​

La extensión Git Graph permite visualizar gráficamente el historial del repositorio, los commits y las ramas.

Instalar la extensión correcta

Puedes instalar directamente Git Graph utilizando su identificador:

bash
code --install-extension mhutchie.git-graph

El identificador mhutchie.git-graph permite asegurarte de que estás instalando la extensión correcta.

Para instalarla desde Visual Studio Code:

  1. Abre Visual Studio Code.
  2. Accede a Extensions (Ctrl + Shift + X).
  3. Busca Git Graph.
  4. Selecciona la extensión Git Graph de mhutchie.
  5. Pulsa Install.

Una vez instalada, podrás acceder a Git Graph desde Visual Studio Code para consultar gráficamente el historial de cambios del repositorio.

Markdown PDF ​

La extensión Markdown PDF permite generar documentos PDF a partir de los archivos Markdown (.md) utilizados para documentar las actividades.

Instalar la extensión correcta

Puedes instalar directamente Markdown PDF utilizando su identificador:

bash
code --install-extension yzane.markdown-pdf

El identificador yzane.markdown-pdf permite asegurarte de que estás instalando la extensión correcta.

Para instalarla desde Visual Studio Code:

  1. Abre Visual Studio Code.
  2. Accede a Extensions (Ctrl + Shift + X).
  3. Busca Markdown PDF.
  4. Selecciona la extensión Markdown PDF de yzane.
  5. Pulsa Install.

Para generar un PDF:

  1. Abre el archivo .md que quieres convertir.
  2. Abre la paleta de comandos con Ctrl + Shift + P.
  3. Ejecuta Markdown PDF: Export (pdf).
  4. Comprueba que se ha generado el archivo .pdf.

Entrega de actividades

Cuando se solicite una actividad en formato PDF, utiliza Markdown PDF para generar el documento a partir de la documentación realizada en el repositorio.