diff --git a/public/data/academy/1-fundamentos/readme.mdx b/public/data/academy/1-fundamentos/readme.mdx index e69de29..a0b7ba6 100644 --- a/public/data/academy/1-fundamentos/readme.mdx +++ b/public/data/academy/1-fundamentos/readme.mdx @@ -0,0 +1,12 @@ +--- +title: 'Fundamentos de Programacion' +publishedAt: '2021-05-13' +author: 'Ema, Lucas, Meison, Pablo' +summary: 'Empezamos nuestros primeros pasos en la programción! Donde vamos a ver nuestros primeros algoritomos en pseudo código, para luego pasar a manejar datos y funciones con JavaScript.' +--- + +# Introducción + +### Empezamos nuestros primeros pasos en la programación! +### Donde vamos a ver nuestros primeros algoritmos en pseudocódigo, +### para luego pasar a manejar datos y funciones con JavaScript. diff --git a/public/data/academy/2-git/1-git-init/readme.mdx b/public/data/academy/2-git/1-git-init/readme.mdx new file mode 100644 index 0000000..4651eba --- /dev/null +++ b/public/data/academy/2-git/1-git-init/readme.mdx @@ -0,0 +1,737 @@ +--- +title: 'Git init' +publishedAt: '2021-06-24' +author: 'Tomas' +summary: 'Vamos a ver cómo guardar el progreso de nuestros proyectos y las ventajas de los sistemas de control de versiones. Hay que aprender a usar la consola. Veremos cómo publicar y guardar nuestros proyectos en la nube para accederlos y descargarlos donde queramos, que otros puedan verlo.' +youtubeURL: 'https://www.youtube.com/watch?v=7_d_sx773gs' +--- + +import { themes, Image } from 'mdx-deck' + + +# Clase 1: `git init` + +### Tabla de contenido + +1. Sistema de control de versiones (VCS) + +1. ¿Qué es Git? + +1. ¿Cómo usar la terminal? + +1. Mi primer repositorio + +1. GitHub, publicar un repositorio + +--- + +## Sistema de control de versiones (VCS) + +### Version control system (VCS) + +Es un programa o herramienta que nos permite gestionar los cambios que suceden en un proyecto a lo largo del tiempo, crea una "historia" del proyecto + +Los cambios pueden ser: + +- agregar un archivo +- eliminar un archivo +- editar un archivo (modificar el código fuente de nuestro proyecto) +- agregar una carpeta + +También guarda quién es el autor de los cambios, la fecha y un mensaje. + +--- + +### ¿Por qué usar un VCS? + +supongamos que arrancamos un proyecto y hasta ahora tenemos los siguientes archivos: + +``` +Documentos +└── proyecto + ├── ejercicio1.js + ├── ejercicio2.js + ├── informe.pdf + ├── informe.doc + └── practica.pdf +``` + +Luego se nos ocurre una mejor manera de hacer el ejercicio2, pero como el que tenemos ya funciona, no queremos perderlo... + +``` +Documentos +└── proyecto + ├── ejercicio1.js + ├── ejercicio2.js + ├── ejercicio2_nuevo.js + ├── informe.pdf + ├── informe.doc + └── practica.pdf +``` + +Más tarde le pedimos a un amigo que revise el informe y nos lo devuelva con cambios... + +``` +Documentos +└── proyecto + ├── ejercicio1.js + ├── ejercicio2.js + ├── ejercicio2_nuevo.js + ├── informe.pdf + ├── informe.doc + └── informe_de_ema.doc +``` + +con el tiempo y sin darnos cuenta nuestro proyecto quedo asi ☠️ + +``` +Documentos +└── proyecto + ├── ejercicio1.js + ├── ejercicio2.js + ├── ejercicio2_nuevo.js + ├── ejercicio2_final.js + ├── ejercicio3_NO_FUNCIONA.js + ├── ejercicio3_de_pablo.js + ├── informe.pdf + ├── informe.doc + ├── informe_de_ema.doc + ├── informe_final.doc + ├── informe_final2.doc + └── informe_final_corrgido.doc +``` + +Y peor todavía, podemos copiar la carpeta y nunca más encontrar cuál era la que teníamos que entregar 🤯 + +``` +Documentos +├── proyecto +│ ├── ejercicio1.js +│ ├── ... +│ └── informe.doc +├── proyecto_corregido +│ ├── ejercicio1_ANDA.js +│ ├── ... +│ └── informe_final.doc +└── proyecto_final + ├── ejercicio1.js + ├── ... + └── informe_final_final_B.doc +``` + +--- + +### Solución + +#### Sistemas de control de versiones 💜 + +1. están para evitar duplicar información +2. gestionar los cambios en el proyecto de forma más inteligente +3. facilitar el trabajo en equipo en un mismo proyecto y hasta en un mismo archivo + +--- + +## ¿Qué es Git? + +> ##### Es un sistema de control de versiones 😛 + +En git, a un proyecto lo llamamos _repositorio_ y es una carpeta que contiene todos los archivos y otras carpetas del proyecto. + +Git se encarga de rastrear (track) y controlar el historial de todos los archivos dentro del _repositorio_. + +Los archivos pueden estar en tres estados distintos: + * confirmado (committed) + * modificado (modified) + * preparado (staged) + +--- + +### Los tres estados + +**Confirmado (committed)**: +* significa que los archivos están almacenados de manera segura en el repositorio. + +**Modificado (modified)**: +* significa que has modificado el archivo pero todavía no fue confirmado. + +**Preparado (staged)**: +* significa que has marcado un archivo modificado en su _versión actual_ para que entre en la próxima confirmación. + + +--- + +### Paquetes de modificaciones + +Los _commits_ son paquetes de modificaciones, una parte fundamental de git. + +La historia del repositorio está conformada por una cadena de _commits_, es decir, una cadena de paquetes de modificaciones. + +Cadena de commits + +> ##### La rama `master` tiene una historia con 3 _commits_. + +--- +## ¿Cómo usar la terminal? + +### Terminal + +Línea de comandos (CLI), consola, terminal o _shell_ es una interfaz para comunicarnos con la computadora ejecutando programas + +CLI, GUI, NUI, evolución de interfaces de usuario + +1. CLI: interfaz de línea de comando, o Command Line Interface +1. GUI: interfaz gráfica de usuario, o Graphic User Interface +1. NUI: interfaz natural de usuario, Natural User Interface + +### Distintas terminales + +ya viene instalada en el sistema operativo, pero cada uno tiene la suya: + +- Windows + - CMD +- GNU/Linux y macOS (unix-like) + - bash + +> #### ⚠️ +> +> ##### git funciona en **bash** o terminales para sistemas operativos unix-like + +--- + +### Usuarios de windows + +Hay que instalar **bash** en el OS ([Operating system](https://es.wikipedia.org/wiki/Sistema_operativo)) o sistma operativo + +#### [Git for Windows](https://gitforwindows.org/) + + 1. botón de `Download` + 2. la cosa se pone rara, pero hay que hacer scroll a la parte de `Assets` + 3. descargar el instalador `Git-2.31.1-32-bit.exe` o `PortableGit-2.31.1-32-bit.7z.exe` + +#### [Cmder](https://cmder.net/) +Una mejor opción y mi recomendada ✨ + 1. hacer scroll + 2. boton `Download Full` que dice `(with Git for Windows)` + +--- + +### Primeros pasos + +vamos a empezar a ejecutar programas para interactuar con la terminal: + +- `pwd`: (print working directory) muestra en que directorio o carpeta estamos +- `ls`: (list) lista o muestra el contenido de la carpeta actual +- `cd`: (change directory) nos permite movernos o cambiar a otra carpeta + +> #### ¿que es el [prompt](https://es.wikipedia.org/wiki/Prompt)? 🤔 +> +> ##### carácter o conjunto de caracteres que se muestran en una línea de comandos para indicar que está a la espera de órdenes. +> +> ##### suele dar info de donde estamos + +### Parámetros, argumentos, opciones o flags + +- `ls -l`: `-l` es una opción o flag que se le agrega a `ls` para decirle que muestre la versión larga (long) +- `ls -a`: `-a` muestra todo (all) los que hay en la carpeta, incluidos archivos ocultos (o que empiezan con `.`) +- `ls `: le pasamos el nombre de una carpeta como parámetro y nos muestra el contenido esa carpeta + + - `ls Academy`: muestra el contenido del directorio `Academy` + +- `cd `: nos envía a la carpeta + - `cd Academy`: + +--- + +### [Path o Ruta]() + +Es la ruta o ubicación de un archivo o carpeta, puede ser **absoluto** o **relativo** + +#### Path absoluto + +Es la ruta _completa_ a la carpeta o archivo en cuestión, **es único!** + +- en windows: + - `C:\Users\tomasdisk\Documents\repos\` + - `C:\Users\tomasdisk\Documents\repos\archivo.txt` +- en linux o mac + - `/home/tomasdisk/Documents/repos/` (linux) + - `/Users/tomasdisk/Documents/repos/archivo.txt` (mac) + +#### Path relativo + +Es la dirección a un archivo o carpeta desde otra carpeta + +- en windows: + - `Documents\repos\` + - `.\Documents\repos\archivo.txt` +- en linux o mac + - `Documents/repos/` + - `./Documents/repos/archivo.txt` + - `../Downloads/` + +> #### Info 💡 +> +> - path `.`: es la carpeta actual, donde estamos ahora, podemos ver cual es con `pwd` +> - path `..`: es la carpeta que contiene a la actual, si hacemos `cd ..` nos envía a la carpeta previa +> - path `~`: es la carpeta de nuestro usuario, `cd ~` nos envía a esa carpeta + +--- + +### Más comandos + +- `mkdir`: (make directory) crea un nuevo directorio + + - `mkdir nueva_carpeta`: crea un directorio o carpeta llamado `nueva_carpeta` + +- `cp `: (copy) crea una copia de un archivo + + - `cp archivo_original archivo_copia`: copia el archivo llamado `archivo_original` creando uno nuevo llamado `archivo_copia` + +### Más comandos (o programas) 🤯 + +- `mv `: (move) mueve un archivo, también se usa para renombrar un archivo + + - `mv Downloads\archivo.txt Documents\repos\info.txt`: mueve el archivo `archivo.txt` ubicado en `Downloads` a la carpeta `Documents\repos\` cambiandole el nombre a `info.txt` + +- `rm `: (remove) elimina un archivo, o una carpeta si se usa el flag `-r` de recursión + - `rm Documents\repos\info.txt`: elimina el archivo `info.txt` en el directorio `Documents\repos\` + - `rm -r Documents\repos`: elimina la carpeta `Documents\repos\` y todos los archivos y carpetas que contenga + +--- + +## Mi primer repositorio + +#### Recordemos + +Un repositorio es una carpeta (con archivos y subcarpetas dentro) controlada por git para gestionar los cambios y el historial de su contenido. Hay dos formas de crear un repositorio. + +Vamos a + +1. crear una carpeta + +``` +mkdir mi-repositorio +``` + +2. nos metemos adentro + +``` +cd mi-repositorio +``` + +3. vamos convertirla en un repositorio usando git + +``` +git init +``` + +🎉 🎉 🎋 + +--- + +### Un nuevo mejor amigo `git status` + +Este comando lo vamos a usar todo el tiempo, nos va a mostrar el estado actual del repositorio + +``` +git status +``` + +nos va a devolver algo como esto + +``` +On branch master + +No commits yet + +nothing to commit (create/copy files and use "git add" to track) +``` + +dice que estoy en la rama _master_, todavía no hay commits y no hay nada para commitear. + +> #### Info: +> +> ##### siempre lean lo que devuelven los comandos, suelen venir con consejos de como continuar 😉 + +--- + +### Nuevos cambios + +Vamos a crear algunos archivos (`README.md` y `script.js`) en el repo para luego agregarlos a la historia de git. + +Ahora si hago `ls` en al carpeta del repo, me va a mostrar los archivos recién creados + +``` +README.md script.js +``` + +pero `git status` va a mostrar como git ve al repo + +``` +$ git status +``` + +> ##### 💥 el `$` no va en la consola +> +> ##### esta para diferenciar un comando de su respuesta + +--- + +### git status + +`git status` no va a mostrar como git ve al repo + +> ##### 💥 el `$` no va en la consola + +``` +$ git status +On branch master + +No commits yet + +Untracked files: + (use "git add ..." to include in what will be committed) + README.md + script.js + +nothing added to commit but untracked files present (use "git add" to track) +``` + +dice que estoy en la rama _master_, todavía no hay commits, + +**hay 2 archivos sin trackear** y no hay nada agregado para commitear. + +Usar `git add` para rastrear (track) 🤔 + +--- + +### git add + +**hay 2 archivos sin rastrear!** + +`git add ...` va a preparar nuestros archivos para ser incluido en el próximo commit + +voy a _stagear_ el archivo `README.md` + +``` +$ git add README.md +``` + +ahora los cambios que tenemos en el archivo están preparados (staged) para entrar en el próximo paquete. + +--- + +### ¿Cómo vamos? + +``` +$ git status +On branch master + +No commits yet + +Changes to be committed: + (use "git rm --cached ..." to unstage) + new file: README.md + +Untracked files: + (use "git add ..." to include in what will be committed) + script.js +``` + +dice que estoy en la rama _master_, todavía no hay commits, + +**hay 1 _cambio_ para commitear** y 1 archivo sin trackear. + +--- + +### Nuevos cambios + +Ahora edito/cambio el archivo `README.md` y vuelvo a ejecutar `git status` + +``` +$ git status +On branch master + +No commits yet + +Changes to be committed: + (use "git rm --cached ..." to unstage) + new file: README.md + +Changes not staged for commit: + (use "git add ..." to update what will be committed) + (use "git restore ..." to discard changes in working directory) + modified: README.md + +Untracked files: + (use "git add ..." to include in what will be committed) + script.js +``` + +En `README.md` hay _cambios_ preparados (staged) para el próximo commit y cambios que no están staged. + +--- + +Para incluir los nuevo cambios usamos `git add README.md` otra vez + +``` +$ git add README.md +$ git status +On branch master + +No commits yet + +Changes to be committed: + (use "git rm --cached ..." to unstage) + new file: README.md + +Untracked files: + (use "git add ..." to include in what will be committed) + script.js +``` + +> ##### 💥 el `$` al principio de los comandos no va en la consola +> +> ##### está para que se entienda que se ejecutan de a uno a la vez + +--- + +### Más formas de usar `git add` + +Con `add` podemos preparar para el próximo _commit_ carpetas enteras o varios archivos a la vez. + +``` +git add . +git add +git add +``` + +> ##### Con `.` estamos agregando la carpeta donde estemos posicionados en la consola. + +--- + +### Mi primer commit + +Llegó el momento de crear el primer commit con los cambios ya preparados! + +``` +$ git commit -m "Primer commit de mi primer repo :D" +``` + +Así creamos un commit con el mensaje `Primer commit de mi primer repo :D` + +> ##### ℹ️ Info: +> +> 1. ##### Si no agregamos el flag `-m` para definir el mensaje desde el comando, git nos va a abrir el editor que tengamos configurado por defecto (vim, nano, code, etc). +> +> 1. ##### Git se va a quedar esperando hasta que guardamos y cerramos el archivo del mensaje. +> +> 1. ##### Si no agregamos un mensaje a la creación del commit, este se va a abortar! + +--- +### Ciclo de vida de un archivo 🌟 + +Para pensar... + +Ciclo de vida + +--- + +## GitHub + +* Crearse una cuenta +* Crear un repositorio nuevo + +--- + +### git remote add + +Usando el comando `remote` conectamos nuestro repo con un repositorio remoto desde donde podemos traer o enviar cambios (_commits_) del proyecto. + +``` +$ git remote add +``` + +El nombre que se usa por defecto es _origin_. + +``` +$ git remote add origin git@github.com:tomasdisk/test-1.git +``` +Lo siguiente cambia el nombre de la rama principal a `main`, antes de eso se llamaba `master`. +``` +$ git branch -M main +``` +> ##### 🤔 Por ahora solo es necesario saber que existe una rama principal llamada _master_, pero este nombre puede ser cambiado. +> +> ##### La próxima clase veremos cómo usar las _ramas_ de git. 🔀 + +--- + +### git push + +Para publicar nuestros commits (paquetes de cambios) usamos `git push`, todos los cambios que no estén dentro de un commit no son publicados. + +``` +git push +``` + +A nuestro remote le pusimos el nombre `origin` cuando usamos el comando `git add remote` y nuestra rama, que antes se llamaba `master`, le cambiamos el nombre a `main`. + +Por lo tanto + +``` +$ git push -u origin main +``` + +El flag `-u` solo va a ser necesario la primera vez, es para que git entienda que nuestra rama local `main` hace referencia a la _rama_ `main` del _remote_ `origin`. + +Con esto, la segunda vez podemos hacer solo `git push` y git ya sabe a que _rama_ y _remote_ enviar nuestros commits. + +> ##### 🔒 Nos va a pedir usuario y contraseña, solo va a funcionar si tenemos permisos de escritura para el repo + +--- + +### git clone + +La segunda forma de crear un repositorio 😸 + +``` +$ git clone +$ git clone https://github.com/coderhood-dev/coderhood.dev.git +``` + +Este comando nos va a crear una carpeta llamada `coderhood.dev` y dentro va a descargar toda la info del _repositorio remoto_. + +clone github coderhood + +--- + +### Último comando + +``` +$ git log +``` + +Se usa para obtener información de la historia de commits del repo. + +``` +git log --oneline +git log --stat +``` + +> ##### se sale del log apretando `q` + +--- + +### Ejercicios + +#### 1. Primer repo + +- Crear un repo +- agregar y editar varios archivos +- prepararlos (_stagearlos_) +- crear el primer commit + +#### 2. Github + +- Crearse una cuenta en github +- crear un repo en github +- publicar el repo del ejercicio 1 + +#### 3. Clonar + +- clonar su propio repo (o el de alguien más) +- hacer cambios +- publicar los nuevos commits + +--- + +### Resumen + +Todos los comandos usados en la clase ✨ + +> ##### 💥 el `$` al principio de los comandos no va en la consola, +> +> ##### está para que se entienda que se ejecutan de a uno a la vez + +### crear el repo + +``` +$ mkdir mi-repo +$ cd mi-repo +$ git init +$ git status +``` + +#### crear los archivos `README.md` y `script.js` usando el comando `echo` + +``` +$ echo "# Hola" > README.md +$ echo "const saludo = 'Hola mundo'; console.log(saludo);" > script.js +$ ls +$ git status +``` + +#### preparar los cambios para el próximo commit + +``` +$ git add README.md +$ git status +``` + +#### editar `README.md` y volver a preparar los cambios + +``` +$ echo "# Hola mi repo" > README.md +$ git status +$ git add README.md +$ git status +``` + +#### crear primer commit + +``` +$ git commit -m "Primer commit de mi primer repo: D" +$ git status +``` + +#### agregar _origin_ como repositorio remoto y cambiar la rama **default** de _master_ a _main_ + +``` +$ git remote add origin https://github.com/tomasdisk/test-1.git +$ git branch -M main +$ git status +``` + +#### publicar los commits creados + +``` +$ git push -u origin main +$ git status +``` + +--- + +### Bibliografía + +### 1. [Pro Git, Capitulo 1: Inicio - Sobre el Control de Versiones](https://git-scm.com/book/es/v2/Inicio---Sobre-el-Control-de-Versiones-Acerca-del-Control-de-Versiones) + +### 2. [Pro Git, Capitulo 2: Fundamentos de Git](https://git-scm.com/book/es/v2/Fundamentos-de-Git-Obteniendo-un-repositorio-Git) + +
+
+
+
+
diff --git a/public/data/academy/2-git/readme.mdx b/public/data/academy/2-git/readme.mdx new file mode 100644 index 0000000..f7513a4 --- /dev/null +++ b/public/data/academy/2-git/readme.mdx @@ -0,0 +1,29 @@ +--- +title: 'Git y la terminal' +publishedAt: '2021-06-20' +author: 'Tomas' +summary: 'Módulo de git, donde aprenderemos a usar git en la terminal para versionar nuestros proyectos.' +--- + +# Git + +## 1. `git init` + + ### Sistemas de control de versiones (VCS) ¿Qué es Git? ¿Cómo usar la terminal? + + Vamos a ver cómo guardar el progreso de nuestros proyectos y las ventajas de los sistemas de control de versiones *vs* usar archivos con nombres como *proyecto_final_final_B*. + + Hay que aprender a usar la aterradora consola. + + Veremos cómo publicar y guardar nuestros proyectos en la nube para accederlos y descargarlos donde queramos, que otros puedan verlos y por último poder ver y usar repositorios de otros. + +## Próximamente, domingo 27 de Junio +## 2. `git branch` + +### Crearemos ramas y vamos a trabajar en distintas versiones o tareas del proyecto + + Esto nos permite trabajar en grupo en el mismo repositorio. + + Porque si programar solo está bueno, ¡programar en equipo está mejor! + + Aprenderemos a colaborar entre varias personas en un mismo repositorio y así sacarle el máximo potencial a Git. diff --git a/public/images/2-git/1-git-init/CLI-GUI-NUI_evolucion_de_interfaces_de_usuario.png b/public/images/2-git/1-git-init/CLI-GUI-NUI_evolucion_de_interfaces_de_usuario.png new file mode 100644 index 0000000..e5731b2 Binary files /dev/null and b/public/images/2-git/1-git-init/CLI-GUI-NUI_evolucion_de_interfaces_de_usuario.png differ diff --git a/public/images/2-git/1-git-init/areas.png b/public/images/2-git/1-git-init/areas.png new file mode 100644 index 0000000..da98fb0 Binary files /dev/null and b/public/images/2-git/1-git-init/areas.png differ diff --git a/public/images/2-git/1-git-init/basic-branching-1.png b/public/images/2-git/1-git-init/basic-branching-1.png new file mode 100644 index 0000000..acc3866 Binary files /dev/null and b/public/images/2-git/1-git-init/basic-branching-1.png differ diff --git a/public/images/2-git/1-git-init/github-clone-https.png b/public/images/2-git/1-git-init/github-clone-https.png new file mode 100644 index 0000000..1f031b5 Binary files /dev/null and b/public/images/2-git/1-git-init/github-clone-https.png differ diff --git a/public/images/2-git/1-git-init/lifecycle.png b/public/images/2-git/1-git-init/lifecycle.png new file mode 100644 index 0000000..922b02c Binary files /dev/null and b/public/images/2-git/1-git-init/lifecycle.png differ diff --git a/src/components/Container.jsx b/src/components/Container.jsx index db0752f..d2ac5b2 100644 --- a/src/components/Container.jsx +++ b/src/components/Container.jsx @@ -1,10 +1,11 @@ import { motion } from 'framer-motion' import { Header } from '@/components/Header' +import Footer from './Footer' export const Container = ({ title, children, column, className }) => { return ( { {/* TODO: Hacksito para fixear despues, el header esta tapando la scrollbar */}
{children}
-
Footer
+ {/*
Footer
*/} +