Front-End
Js
Clase 08 - “Git & Github”
¡Les damos la bienvenida!
Vamos a comenzar a grabar la clase
Clase 07. Clase 08. Clase 09.
CSS 4: Grid y Media Git y Github JS 1 - Introducción a
Queries JavaScript
1. ¿Qué es Grid? 1. ¿Qué es y para qué se usa
2. Implementación de Grid 1. Git: Descarga de Git
JavaScript?
3. Maquetado con Flex y Grid 2. Crear un repositorio externo
2. Conceptos generales. Sintaxis
4. Media Queries (GitHub)
básica
3. Comandos básicos (Init, commit,
3. Variable: ¿qué es y cómo
push)
declararla? Tipos
4. Asignación y cambio del valor
5. Operadores aritméticos
6. Conversión a entero y flotante
Git
Git
Git es un sistema de control de versiones distribuido, diseñado por Linus Torvalds.
Está optimizado para guardar cambios de forma incremental. Permite contar con
un historial, regresar a una versión anterior y agregar funcionalidades.
Además, es capaz de llevar un registro de los cambios que otras personas realicen
en los archivos, gracias a GitHub, donde podemos almacenar y compartir nuestros
proyectos de forma gratuita. Es multiplataforma, es decir, es compatible con Linux,
MacOS y Windows. En la máquina local se encuentra Git, se utiliza bajo la
terminal o línea de comandos y tiene comandos como merge, pull, add, commit y
rebase, entre otros.
Git | Instalación
Descargar Git.
Una vez descargado, se emplea la interfaz de línea de comando del sistema operativo para interactuar con GIT:
En Windows: abrir la aplicación Git Bash que se instaló junto con GIT.
En Mac: abrir la terminal mediante el finder.
En Linux: abrir la consola bash.
Para verificar si está instalado, podemos ejecutar el comando: git --version.
Si obtenemos respuesta nos indicará la versión de Git que tenemos instalada.
En caso de no tener éxito, ver instrucciones aquí
Git | Definición
Es un sistema que ayuda a organizar el código, el historial y su evolución, funciona como una máquina del tiempo que
permite navegar a diferentes versiones del proyecto y si queremos agregar una funcionalidad nueva nos permite crear
una rama (branch) para dejar intacta la versión estable y crear un ambiente de trabajo en el cual podemos trabajar en
una nueva funcionalidad sin afectar la versión original. Permite:
● Manejar distintas versiones del proyecto.
● Guardar el historial o guardar todas las versiones de los archivos del proyecto.
● Trabajar simultáneamente sobre un mismo proyecto.
Git | Funcionamiento
Git almacena instantáneas de un mini sistema de archivos. Cada vez que confirmamos un cambio, Git toma una "foto" del
aspecto del proyecto en ese momento y crea una referencia a esa instantánea. Si un archivo no cambió Git sólo crea un
enlace a la imagen anterior idéntica que tiene almacenada.
Git | Terminología
● Repositorio: es la carpeta principal donde se encuentran almacenados los archivos que componen el proyecto. El
directorio contiene metadatos gestionados por Git, de manera que el proyecto es configurado como un repositorio
local.
● Commit: un commit es el estado de un proyecto en un determinado momento de la historia del mismo, imaginemos
esto como punto por punto cada uno de los cambios que van pasando. Depende de nosotros determinar cuántos y
cuales archivos incluirá cada commit.
Git | Terminología
● Rama (branch): una rama es una línea alterna del tiempo en la historia de nuestro repositorio. Funciona para crear
features, arreglar bugs, experimentar, sin afectar la versión estable o principal del proyecto. La rama principal por
defecto es master.
● Pull request: en proyectos con un equipo de trabajo, cada persona puede trabajar en una rama distinta, pero llegado
el momento puede pasar que dicha rama se tenga que unir a la rama principal. Para eso se crea un pull request
donde comunicamos el código que incluye los cambios, es revisado, comentado y aprobado para darle merge. En el
contexto de GIT, merge significa unir dos trabajos, en este caso la rama branch con la rama master.
Git | Workflow
Git registra en nuestro directorio local los cambios que se
produzcan en los archivos o código, cada vez que se lo
indiquemos. De esta forma podemos “viajar en el tiempo”
revirtiendo cambios o restaurando versiones de código.
Esto puede hacerse localmente o de forma remota
(servidor externo).
Git | Estados
Working directory es nuestro directorio de trabajo. Cada
vez que queremos agregar un archivo al staging area,
usamos git add.
Luego, cuando queremos establecer un punto de
restauración, ejecutamos git commit, y los archivos son
actualizados en el repositorio (repository).
Git | Branch y Merge
Crear una rama: git branch nombreBranch
Unir la rama a Master: git merge nombreBranch
Mostrar en qué rama nos encontramos: git branch
Cambiar a una rama determinada: git checkout nombreBranch
Git | Comandos básicos
Una vez instalado git y con la consola de comandos abierta (puede ser la terminal de VSCode), podemos utilizar comandos
para movernos por el árbol de directorios (carpetas), ver su contenido, crear carpetas nuevas, etcétera.
Comando Descripción
pwd Ver en qué carpeta estamos ubicados.
ls Mostrar el contenido de la carpeta. Agregando -l o -lh obtenemos más
detalle y con -la muestra los archivos ocultos.
clear o CTRL+L Limpiar la pantalla.
cd carpeta Ingresar en la subcarpeta (cd: change directory).
Git | Comandos básicos
Comando Descripción
mkdir nombrecarpeta Nos permite crear una carpeta.
rm [Link] Elimina el archivo, donde ext es la extensión.
rm –r nombredecarpeta/ Elimina la carpeta.
mv [Link] Cambia el nombre a un archivo (agregando la extensión) o a una
[Link] carpeta.
exit Salimos de la terminal.
Git | Configurar Git
Antes de realizar algunas de las operaciones más importantes de git, necesitamos indicar cuál es nuestra
dirección de correo y cuál es nuestro nombre. Esto se hace con los comandos siguientes:
● Proporcionar la dirección de correo:
git config --global [Link] "correodelusuario@[Link]"
● Proporcionar el nombre del propietario:
git config --global [Link] "NombreDelUsuario"
● Consultar los datos que tenemos registrados:
git config --global -e
Git | git init
El primer paso para utilizar git en un proyecto consiste en
inicializar la carpeta que lo contiene, convirtiéndola en un
repositorio local. Para ello, utilizando los comandos
provistos por el sistema operativo debemos ubicarnos en
ella, y utilizar el comando git init.
Esto genera por defecto una rama llamada “master”.
Git | git status, git branch
Para ver el estado de la rama actual y su contenido
utilizamos:
git status
Es posible cambiar el nombre a la rama actual con el
comando:
git branch -m <nombre>
Actualmente se está realizando una campaña para utilizar
como rama principal main en lugar de master.
Git | git status, git branch
Podemos ver el estado de los archivos que
contiene la carpeta controlada por git usando
git status.
En color rojo vemos archivos
agregados/modificados, que aún no se han
incluido en el staging area.
Git | git add
git add incorpora los archivos que han sido creados o
modificados recientemente al staging area. Se puede
agregar un archivo con:
git add <archivo>
O todos con:
git add .
Los archivos listos para ser commiteados aparecen
ahora en verde.
Git | git commit
Los archivos del staging area se envían al repositorio local utilizando el comando git commit -
m”comentario”, donde “comentario” es una explicación de los cambios implicados. Es importante incluir
una descripción relevante en cada commit, ya que será lo que git nos mostrará cuando veamos el
“historial” de cambios realizados.
Cada vez que realizamos un commit, git genera un punto de restauración al cual es posible volver
en cualquier momento. Si no incluimos el comentario (git commit), y hemos configurado un editor de texto,
git abre una ventana para que lo hagamos. Grabamos, cerramos, y el commit se habrá realizado.
Git | git log
Luego de hacer el commit, si queremos obtener un
historial de los cambios realizados en los archivos que
integran nuestro repositorio usamos git log
El ciclo de trabajo, entonces, consiste en editar los
archivos, enviarlos al staging area, y cuando estamos
listos, hacemos un commit. Repetimos este proceso las
veces que sea necesario.
Git | git diff
Una característica muy potente de git es la posibilidad de visualizar los cambios que se han producido en
un archivo. Con git diff podemos ver que líneas se agregaron (verde), eliminaron (rojo) o modificaron
(amarillo) entre la versión actual del mismo y la del último commit:
git diff <archivo>
Git | git reset
Existen tres maneras de descartar cambios que hayamos realizado:
git checkout: descarta los cambios sobre el archivo y vuelve a la versión que esté en el último commit del repositorio.
git reset --hard: descarta todos los cambios no commiteados, sin guardarlos. Vuelve a las versiones del último commit
realizado.
git stash: descarta todos los cambios no commiteados, guardandolos para poder recuperarlos en un futuro.
Git | Recuperar cambios descartados
Los cambios que han sido descartados con git stash pueden ser recuperados.
git stash list: lista todos los “puntos de restauración” que hemos generado con “stash”. El más reciente
tiene el índice 0 (cero).
git stash show –p <stash-name>: Muestra los cambios que se encuentran guardados en un stash en
particular.
git stash apply <stash-name>: Recupera los cambios desde un stash en particular (no se elimina el punto
de restauración).
git stash drop <stash-name>: Elimina un “punto de restauración” de forma definitiva, y la pila de cambios
stasheados se reordenará. Esta acción es irreversible.
Git | .gitignore
Cuando no necesitamos que todos los archivos de
nuestro proyecto sean gestionados por git podemos hacer
una lista con los archivos y/o carpetas a excluir, y
guardarla en un archivo de texto que tenga el nombre
.gitignore. Se debe poner un nombre por línea y todos los
archivos allí listados serán ignorados por git.
Git | git branch
Podemos crear una nueva rama en nuestro proyecto,
mediante estos comandos:
git branch: muestra la(s) ramas que componen el
proyecto.
git branch <nombre de la rama>: crea una nueva rama
con el nombre indicado
git checkout <nombre de la rama>: cambio a otra rama
para trabajar en ella.
GitHub
Github
GitHub es una plataforma de repositorios remotos. Además de
permitir ver el código y descargar diferentes versiones de una aplicación, la
plataforma también conecta desarrolladores para que puedan colaborar en Ingresá a Github haciendo clic acá
un mismo proyecto.
Podemos sincronizar repositorios locales con repositorios remotos,
clonar en nuestra PC repositorios públicos de terceros, utilizar la
plataforma como un mecanismo de backup de nuestros repositorios
locales. Para poder subir gratis los proyectos deberán ser de código
abierto. Ofrece también una herramienta de revisión de código, en la que
se pueden dejar anotaciones para mejorar y optimizar el código.
Github | Crear y vincular repositorio
Creamos un repositorio (1), le damos un nombre (2) y lo enlazamos con nuestro repositorio local mediante el
comando que nos muestra la plataforma (3).
1 2
3
Github | push
El comando git push -u origin <rama> sincroniza una rama del
repositorio local con el repositorio externo. Necesitamos el nombre de usuario
en GitHub y un token que se obtiene desde “Usuario -> Settings -> Developer
settings -> Personal tokens” (cómo crear un token personal).
Ejecutado este comando, el repositorio se sincroniza en Github.
Github | push
git push es un comando de carga que permite subir los commits realizados en nuestro repositorio local a
GitHub. Una vez allí, estos pueden ser descargados por el resto del equipo de trabajo.
Para crear una rama local en el repositorio de destino utilizamos:
git push <remote> <branch>
Si queremos enviar todas las ramas locales a una rama remota especificada.
git push <remote> --all
Una vez movidos los conjuntos de cambios se puede ejecutar un comando git merge en el destino para
integrarlos. +info
Github | clone
En caso de querer sincronizar nuestro trabajo con el de alguien más, en forma local, podemos
clonar su repositorio:
git clone <url repositorio externo>
Hacer los cambios necesarios, commitearlos y luego, con push, enviarlos nuevamente al
repositorio remoto. En este caso, en el push usaremos nuestro usuario y el token de la
persona propietaria del repositorio.
Github | Sincronizando con github
De esta forma vemos en GitHub los commits hechos hasta el momento, tanto de quien posee el repositorio como
de quien colabora:
Github | pull
El comando git pull se emplea para extraer y descargar contenido desde un repositorio remoto y
actualizar al instante el repositorio local para reflejar ese contenido. El comando git pull es, en realidad, una
combinación de dos comandos, git fetch seguido de git merge.
git pull <remote> Recupera la copia del origen remoto especificado de la rama actual y la fusiona de
inmediato en la copia local.
git pull --no-commit <remote> Recupera la copia del origen remoto, pero no crea una nueva conformación de
fusión.
Github | Merge y conflictos
El mecanismo provisto por git no está exento de posibles conflictos… Veamos algunos ejemplos.
Un merge se genera cuando dos o más commits contienen cambios sobre las mismas líneas de código de los
mismos archivos. En ocasiones, git no puede resolver la situación automáticamente.
Github | Conflictos
En el ejemplo de la diapositiva anterior, en otra rama el color de fondo se había fijado en “green”. Al realizar
el pull request aparece el conflicto, y se nos pide que lo solucionemos manualmente:
Github | Conflictos
Lo resolvemos eliminando la(s) línea(s) que no sean pertinentes y lo marcamos como “resolved”. Hacemos el
commit merge, y el archivo finalmente quedará con los cambios elegidos:
Resumen | Comandos básicos
Ver más grande Ver más grande
Github | Articulos de interés
Guía rápida sobre GitHub: [Link]
GIT y GitHub | Tutoriales: Fundamentos de GIT GitHub Comandos explicados
Videos del Profesor Alejandro Zapata (Coordinador y Docente de Codo a Codo): link
GIT y GitHub (tutorial en español). Inicio Rápido para Principiantes link
¿Cómo trabajar con Git desde Visual Studio Code? video
Nota: con Visual Studio Code también se puede hacer commits, push, resolver conflictos, crear ramas y mucho más. Prácticamente
todo lo que se hace desde la línea de comandos lo podés hacer desde una interfaz gráfica. En el video se indica cómo hacerlo. Al
final se recomienda un plugin que hay que instalar si se quiere trabajar con Git desde Visual Studio Code.
Importante: se puede utilizar una interfaz gráfica para trabajar con Git, pero es importante saber qué es lo que pasa detrás de cada
clic que uno hace. Por ese motivo antes, hay que aprender los fundamentos de GIT.
¡Vamos a la práctica!
Ejercicios Prácticos
Optativos | No entregables
Crear una nueva rama en Git
Crear una nueva rama en tu repositorio Git además de Tips:
la rama principal (main o master). Nombrá la nueva
● Creación de la rama: Usá el comando git checkout -b nombre-de-la-
rama de acuerdo con la funcionalidad o característica
rama para crear y cambiarte a la nueva rama al mismo tiempo.
que estás desarrollando. Asegurate de hacer un
● Verificar la rama actual: Ejecutá git branch para verificar que estés
commit en la nueva rama y luego subila al repositorio
en la rama correcta antes de hacer cambios.
remoto en GitHub.
● Hacer commits en la nueva rama: No olvides usar git add . seguido
de git commit -m "" para registrar los cambios
Ejercicios Prácticos
Optativos | No entregables
Repositorio en Github
Crear un repositorio en GitHub para tu proyecto, subir el
Tips:
código actual, y realizar commits documentando los cambios.
Asegurarse de que el repositorio esté configurado para ● Organización del Repositorio: Asegurate de que el nombre
futuras actualizaciones. El repositorio debe ser nombrado de del repositorio siga el formato correcto: proyecto-final-
la siguiente manera: ecommerce-[nombre-apellido]. Documentación de
Nombre del Repositorio: proyecto-final-ecommerce- Commits: Siempre que hagas un commit, utilizá mensajes
[nombre-apellido] claros y descriptivos.
● Mantener el Repositorio Actualizado: A medida que
avances en tu proyecto, asegurate de hacer commits
frecuentemente y subir tus cambios a GitHub..
Pre-entrega de proyecto
Clase 08 - “Git y Github”
Revisión de progreso
Obligatorio | Entregable
Revisión de progreso Formato de Entrega:
Compartir un link al drive (público) que contenga los archivos y
Estamos acercándonos a un punto clave en el desarrollo
carpetas que conforman tu proyecto o compartí el link de tu
del proyecto, donde tendrán la oportunidad de compartir los repositorio de Github. Los links deberán ser entregados en el
avances realizados hasta el momento actual. apartado de “Pre-Entrega de Proyecto” en el Campus Virtual.
En este punto del proceso es fundamental que reúnan todo
el trabajo que han desarrollado hasta la clase N°8. Esta
es una gran oportunidad para consolidar sus ideas y
asegurarse de que están en el camino correcto
Revisión de progreso
Obligatorio | Entregable
Esta instancia evaluativa es de carácter obligatorio y es un punto clave dentro de la cursada ya que nos permitirá evaluar
tu progreso en el recorrido y asegurar que estás en el camino correcto en la construcción del Proyecto Final Integrador.
Este espacio de entrega está conformado por:
Revisión de progreso
Obligatorio | Entregable
A partir de la Clase N° 8 tendrás 7 días de corrido para realizar la autoevaluación y la entrega en el campus virtual
Cuestionario de autoevaluación Preentrega de proyecto:
Se evaluará la aplicación de los conocimientos adquiridos
Te permitirá reflexionar sobre tu propio aprendizaje, progreso y en la realización de un proyecto.
cumplimiento de las consignas o rúbricas previamente
establecidas y en caso de ser necesario realizar las La realización progresiva de los "Ejercicios prácticos" y el
modificaciones o ajustes correspondientes antes de realizar la seguimiento de las rúbricas de la "Ruta de avance" te
preentrega. guiará paso a paso hacia la realización de la "Preentrega" y
el "Proyecto Integrador Final"
Se encontrará disponible en la Ruta N°2 de Campus Virtual Se entregará en la Ruta N°2 de Campus Virtual
Pre Entrega de proyecto
Obligatorio | Entregable
Formato de entrega: Compartir un link al drive (público) que contenga los archivos y carpetas que conforman tu proyecto o
compartí el link de tu repositorio de Github. Los links deberán ser entregados en el apartado de “Pre-Entrega de Proyecto” en
el Campus Virtual.
Requisitos para la entrega:
1. Estructura Básica de HTML. 2. Formulario de Contacto.
● Estructura semántica: El HTML debe estar ● Formulario funcional: Crear un formulario
dividido en las etiquetas semánticas principales: de contacto con campos para nombre,
header, nav, main, section, footer. correo electrónico y mensaje, utilizando
● [Link]: Incluir un archivo que explique Formspree para manejar el envío de datos.
brevemente el propósito de la página.
Pre Entrega de proyecto
Requisitos para la entrega
3. Estilos básicos aplicados con CSS 4. Diseño responsivo con Flexbox y Grid
● Archivo [Link]: El proyecto debe contar con un ● Sección "Productos": Organizada en cards de forma
archivo CSS externo que incluya: responsiva utilizando Flexbox.
○ Estilos básicos aplicados a las secciones de ● Sección "Reseñas": Organizada utilizando Grid, con una
header, footer y lista de navegación. distribución lógica y estética.
○ Fuentes de Google Fonts correctamente ● Sección "Contacto": Debe ser responsiva mediante el uso
implementadas. de Media Queries para adaptarse a diferentes tamaños de
○ Propiedades de background aplicadas en pantalla.
alguna sección de la página (color, imagen,
degradado, etc.).
Pre Entrega de proyecto
Requisitos para la entrega:
5. Contenido multimedia y navegación 6. Subida del proyecto.
● Multimedia: deberá incluir archivos multimedia ● El proyecto debe estar subido a un hosting gratuito
(imágenes, video o iframe) correctamente integrado (Netlify o GitHub Pages), con una URL funcional
en la página. para visualizar el sitio.
● Lista de navegación: Implementar una lista
desordenada con enlaces que simulen una
navegación interna (Inicio, Productos, Contacto,
etc.).
Tendrás 7 días de corrido para realizar la entrega
¡NUEVO CUESTIONARIO EN
CAMPUS!
La resolución del cuestionario es de carácter obligatorio para poder
avanzar en la cursada.
