Skip to content

Commit 9d3e9a4

Browse files
nachoamattnachoamatt
committed
initial commit
0 parents  commit 9d3e9a4

File tree

110 files changed

+25113
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

110 files changed

+25113
-0
lines changed

‎.eleventy.js

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
2+
const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
3+
const toBootstrapNav = require('eleventy-navigation-bootstrap')
4+
const pluginTOC = require("eleventy-plugin-toc");
5+
const markdownIt = require("markdown-it");
6+
const markdownItAnchor = require("markdown-it-anchor");
7+
const markdownItHighlightJS = require("markdown-it-highlightjs");
8+
const readerBar = require("henry-reader-bar");
9+
const readingTime = require("henry-reading-time");
10+
11+
const mdOptions = {
12+
html: true,
13+
breaks: true,
14+
linkify: true,
15+
typographer: true,
16+
};
17+
18+
const mdAnchorOpts = {
19+
permalink: true,
20+
permalinkClass: "anchor-link",
21+
permalinkSymbol: "",
22+
level: [1, 2, 3, 4],
23+
};
24+
25+
module.exports = function (eleventyConfig) {
26+
27+
eleventyConfig.setLibrary(
28+
"md",
29+
markdownIt(mdOptions)
30+
.use(markdownItAnchor, mdAnchorOpts)
31+
.use(markdownItHighlightJS)
32+
);
33+
34+
eleventyConfig.addPlugin(eleventyNavigationPlugin);
35+
eleventyConfig.addPlugin(readingTime);
36+
eleventyConfig.addPlugin(readerBar);
37+
eleventyConfig.addPlugin(syntaxHighlight);
38+
39+
eleventyConfig.addPlugin(pluginTOC, {
40+
tags: ['h2', 'h3'],
41+
ul: true
42+
})
43+
44+
eleventyConfig.addPassthroughCopy("_src/styles");
45+
eleventyConfig.addPassthroughCopy("_src/assets");
46+
eleventyConfig.addPassthroughCopy("_src/fonts");
47+
48+
eleventyConfig.addNunjucksFilter('bootstrapNav', toBootstrapNav)
49+
50+
eleventyConfig.addLinter("Spelling check", function(content, inputPath, outputPath) {
51+
let words = "lenght, .lenght, .rigth".split(",");
52+
53+
// Eleventy 1.0+: use this.inputPath and this.outputPath instead
54+
if( inputPath.endsWith(".md") ) {
55+
for( let word of words) {
56+
let regexp = new RegExp("\\b(" + word + ")\\b", "gi");
57+
if(content.match(regexp)) {
58+
console.warn(`Spelling check (${inputPath}) Found: ${word}`);
59+
}
60+
}
61+
}
62+
});
63+
64+
return {
65+
dir: {
66+
includes: "/_src/layouts",
67+
data: "/_src/data",
68+
output: "_dist",
69+
pathPrefix: "/Prep-Course-Stage/"
70+
},
71+
};
72+
};

‎.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
3+
# Eleventy build
4+
_dist
5+

‎00-PrimerosPasos/README.md

+245
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,245 @@
1+
---
2+
title: Primeros Pasos
3+
feedbackID: 00-PrimerosPasos
4+
permalink: /Primeros_Pasos/
5+
eleventyNavigation:
6+
key: Primeros Pasos
7+
order: 1
8+
---
9+
10+
![HenryLogo](/_src/assets/logo.png)
11+
12+
<table class="feedback" width="100%" style='table-layout:fixed;'>
13+
<tr>
14+
<td>
15+
<a href="https://airtable.com/shrSzEYT4idEFGB8d?prefill_clase=00-PrimerosPasos">
16+
<img src="https://static.thenounproject.com/png/204643-200.png" width="100"/>
17+
<br>
18+
Hacé click acá para dejar tu feedback sobre esta clase.
19+
</a>
20+
</td>
21+
</tr>
22+
</table>
23+
24+
# Primeros Pasos
25+
26+
#### Preparando tu compu
27+
28+
<!-- Acá vas a encontrar todo lo que necesitas para arrancar el Curso de Preparación.
29+
30+
* [Editor de Texto](./editorTexto.md)
31+
* [Github](./github.md)
32+
* [Git](./git.md)
33+
* [Instalar Node](./node.md) -->
34+
35+
## Instructivo de Primeros Pasos
36+
37+
<div class="iframeContainer">
38+
<iframe src="https://player.vimeo.com/video/638636752" title="Instructivo de Primeros Pasos" allow="autoplay; fullscreen"></iframe>
39+
</div>
40+
41+
> **Importante**: Github cambió el método de autenticación, ahora es por PAT (Personal Access Token), para crearlo pueden seguir este [link](https://docs.github.com/es/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token). Pueden elegir expiration infinita para hacerlo una sóla vez.
42+
43+
## Cómo usar SLACK
44+
45+
<div class="iframeContainer">
46+
<iframe src="https://player.vimeo.com/video/548902078" title="Cómo usar SLACK" allow="autoplay; fullscreen; picture-in-picture"></iframe>
47+
</div>
48+
49+
> Gracias [Nico Constantin (FT#12)](https://github.com/NicoConstantin) por el video y la explicación!
50+
51+
## Editores de Texto
52+
53+
Para poder escribir código que pueda ser interpretado por un lenguaje de programación, necesitamos utilizar un editor de texto.
54+
55+
Hay varios, puedes probarlos y optar por el que te sientas más a gusto.
56+
57+
A continuación veremos una lista de los más populares:
58+
59+
### Sublime Text
60+
61+
![Sublime Text](/_src/assets/00-PrimerosPasos/sublimeText_screen.png)
62+
63+
Es un editor de texto liviano, que cuenta con una serie de plugins para adaptarlo a las necesidades de cada desarrollador.
64+
65+
Es multiplataforma, por lo que se puede instalar tanto en Windows, como Linux y OS X.
66+
67+
Para instalarlo, realizaremos los siguientes pasos:
68+
69+
#### En Windows o en OS X
70+
71+
1. Nos dirigimos a la página oficial de [Sublime Text](https://www.sublimetext.com).
72+
73+
2. Al ingresar, detectará automáticamente el sistema operativo que tenemos, y nos sugerirá descargar el instalador apropiado.
74+
75+
3. Presionamos el botón **_Download_**.
76+
77+
4. Elegimos la opción adecuada según nuestro sistema operativo e iniciamos la descarga.
78+
79+
![Sublime Text Download](/_src/assets/00-PrimerosPasos/sublimeText_download.png)
80+
81+
5. Finalizada la descarga, ejecutamos el instalador, seleccionamos las opciones **_siguiente, siguiente, etc_**, hasta completar el proceso.
82+
83+
#### En Linux, en la distribución Ubuntu y derivados
84+
85+
1. Nos dirigimos al sitio oficial de Sublime Text. Aquí encontrarás las instrucciones para instalarlo:
86+
87+
[Descargar Sublime Text para Linux](https://www.sublimetext.com/docs/3/linux_repositories.html)
88+
89+
2. En la terminal, ejecutamos el siguiente comando, para instalar la clave GPG:
90+
91+
```shell
92+
wget -q0 - https://download.sublimetext.com/sublimehq-pub.gpg | sudo apt-key add -
93+
```
94+
95+
3. Para asegurarnos de que `apt` esté configurado para trabajar con orígenes https, ejecutamos:
96+
97+
```shell
98+
sudo apt-get install apt-transport-https
99+
```
100+
101+
4. Luego para agregar el repositorio estable, ejecutamos:
102+
103+
```shell
104+
echo "deb https://download.sublimetext.com/ apt/stable/" | sudo tee /etc/apt/sources.list.d/sublime-text.list
105+
```
106+
107+
5. Finalmente, procedemos a instalar el programa:
108+
109+
```shell
110+
sudo apt-get install sublime-text
111+
```
112+
113+
Ahora, si en el **Menú de inicio** buscamos **Sublime text**, veremos la siguiente imagen:
114+
115+
![Sublime Text Linux](/_src/assets/00-PrimerosPasos/sublimeText_linux.png)
116+
117+
### Atom
118+
119+
![Atom Site](/_src/assets/00-PrimerosPasos/atom_site.png)
120+
121+
Es un editor de código abierto, disponible tanto para Windows, como Linux y para OS X.
122+
123+
Tiene integrada una consola de Git y Github, para llevar un control de versiones de tus proyectos.
124+
Para comenzar el proceso de instalación, realizamos los siguientes pasos:
125+
126+
En Windows, Linux o en OS X, nos dirigimos al sitio oficial, mediante el siguiente enlace:
127+
128+
<https://atom.io/>
129+
130+
Al ingresar, el navegador detecta automáticamente el instalador que necesitamos bajar, según nuestro sistema operativo.
131+
132+
Allí, presionamos el botón Download para almacenarlo en nuestra computadora.
133+
134+
#### En Windows
135+
136+
Una vez finalizada la descarga, hacemos doble click en el instalador y esperamos a que finalice el proceso de instalación.
137+
138+
#### En Ubuntu y derivados
139+
140+
Descomprimimos el instalador, hacemos doble click, y nos dirigimos a: `/usr/bin/atom`
141+
142+
Al hacer doble click, se abrirá el editor.
143+
144+
### Visual Studio Code
145+
146+
![VSC Console](/_src/assets/00-PrimerosPasos/vsc_console.png)
147+
148+
Es un editor desarrollado por Microsoft.
149+
150+
Tiene integrado el control de versiones mediante Git y Github para tener un seguimiento de tus proyectos. Brinda una cantidad de extensiones que facilitan el trabajo de un desarrollador.
151+
152+
Para descargarlo, nos dirigimos al sitio oficial, en la sección Dowload y descargamos el instalador según nuestro Sistema Operativo:
153+
154+
<https://code.visualstudio.com/download>
155+
156+
![VSC Download](/_src/assets/00-PrimerosPasos/vsc_download.png)
157+
158+
Una vez finalizada la descarga, procedemos a ejecutar el instalador.
159+
160+
## Instalando Node.JS
161+
162+
Para instalar Node js en nuestra computadora, nos dirigimos al sitio oficial:
163+
164+
<https://nodejs.org/es/>
165+
166+
Al ingresar, el sitio detectará nuestro Sistema Operativo y nos sugerirá que descarguemos el instalador adecuado.
167+
168+
![Node.JS Screen](/_src/assets/00-PrimerosPasos/nodejs_screen.png)
169+
170+
Para proceder a la descarga, seleccionamos la versión LTS, que es la versión estable.
171+
Una vez finalizada la descarga, procedemos a ejecutar el instalador.
172+
173+
Para corroborar que Node js se instaló correctamente, procedemos a ejecutar el siguiente comando por la consola o terminal de nuestro sistema operativo:
174+
175+
```shell
176+
node -v
177+
```
178+
179+
Y si seguimos los pasos anteriores, la consola o terminal, nos devolverá la versión de Node js que tenemos instalada:
180+
181+
```shell
182+
v12.18.3
183+
```
184+
185+
## Git
186+
187+
### Qué es Git?
188+
189+
Git es un sistema de control de versiones, distribuido y open source. Un control de versiones es un sistema que registra los cambios realizados en un archivo o conjunto de archivos a lo largo del tiempo, de modo que puedas recuperar versiones específicas más adelante.
190+
191+
### Instalación
192+
193+
#### Para Mac y Linux
194+
195+
Ver estos enlaces:
196+
197+
<https://git-scm.com/book/es/v2/Inicio---Sobre-el-Control-de-Versiones-Instalaci%C3%B3n-de-Git>
198+
199+
<https://www.youtube.com/watch?v=PSULlxUk744>
200+
201+
<https://www.youtube.com/watch?v=oV0spTF71AI>
202+
203+
#### Para Windows
204+
205+
Ingreso a <https://git-scm.com> y descargo la útlima versión.
206+
207+
![installGit](/_src/assets/00-PrimerosPasos/instalar_window.png)
208+
209+
Una vez descargado, se abre el archivo .exe y van a visualizar la siguiente ventana
210+
211+
![installGit](/_src/assets/00-PrimerosPasos/1.png)
212+
213+
Clickeamos “Next” hasta que llegamos a esta parte:
214+
215+
![installGit](/_src/assets/00-PrimerosPasos/2.png)
216+
217+
En este momento de la instalación si quieres puedes elegir el editor de texto que van a usar. (Importante, ténganlo instalado antes de instalar Git)
218+
219+
Seguimos clickeando “Next” y luego “Install”
220+
221+
![installGit](/_src/assets/00-PrimerosPasos/3.png)
222+
223+
Por último, finalizar! Si seleccionan la opción "Launch Git Bash", una vez que finalizan la instalación se va a abrir la consola
224+
225+
![installGit](/_src/assets/00-PrimerosPasos/4.png)
226+
227+
Otra forma de abrir la consola es haciendo click derecho sobre el escritorio y elegir la opción "Git Bash Here"
228+
229+
![installGit](/_src/assets/00-PrimerosPasos/consola.png)
230+
231+
Una vez instalado Git van a poder visualizar la consola: ingresamos el comando `git --version` para chequear que está instalado. Si ven la consola así, ya están listos para comenzar a trabajar!
232+
233+
![installGit](/_src/assets/00-PrimerosPasos/5.png)
234+
235+
<table class="feedback" width="100%" style='table-layout:fixed;'>
236+
<tr>
237+
<td>
238+
<a href="https://airtable.com/shrSzEYT4idEFGB8d?prefill_clase=00-PrimerosPasos">
239+
<img src="https://static.thenounproject.com/png/204643-200.png" width="100"/>
240+
<br>
241+
Hacé click acá para dejar tu feedback sobre esta clase.
242+
</a>
243+
</td>
244+
</tr>
245+
</table>

‎00-PrimerosPasos/github.md

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
---
2+
title: GitHub
3+
feedbackID: 00-PrimerosPasos
4+
permalink: /GitHub/
5+
eleventyNavigation:
6+
key: GitHub
7+
order: 4
8+
---
9+
10+
![HenryLogo](/_src/assets/logo.png)
11+
12+
# GitHub
13+
14+
## ¿Qué es GitHub?
15+
16+
Es una red para almacenar tus repositorios, sería un repositorio de repositorios. Es uno de los tantos disponibles en internet, y el más popular. GitHub **NO** es lo mismo que Git, aunque funcionen muy bien juntos. Github es un lugar donde podés compartir tu código o encontrar otros proyectos. También actúa como portfolio para cualquier código en el que hayas trabajado.
17+
18+
## Comenzando
19+
20+
1. Para comenzar nos creamos una cuenta --- > <https://github.com> 🚀
21+
22+
![GitHub-Register](/_src/assets/00-PrimerosPasos/github_register.png)
23+
24+
2. Una vez registrados, ingresamos con usuario y contraseña:
25+
26+
![GitHub-Login](/_src/assets/00-PrimerosPasos/github_login.png)
27+
28+
3. Listo! Ahora vemos una página de inicio como la siguiente:
29+
30+
![GitHub-Home](/_src/assets/00-PrimerosPasos/github_home.png)
31+
32+
A la izquierda tenemos un acceso rápido a **mis repositorios**.
33+
34+
En el centro vemos la actividad de los usuarios a quienes seguimos.
35+
36+
En la parte superior derecha, vemos nuestra imagen de perfil. Desde ahí podemos desplegar opciones para gestionar nuestro perfil, repositorios y configuración. Si accedemos a nuestro perfil encontramos algo parecido a esto:
37+
38+
![GitHub-profile](/_src/assets/00-PrimerosPasos/github_profile.png)
39+
40+
Podemos poner una foto de perfil, editar el nombre, agregar la ubicación, link y organizaciones a las que pertenecemos. En el centro podemos fijar los repositorios que queremos mostrar para que estén visibles en nuestro perfil.
41+
42+
Más abajo se muestra un diagrama de todas las contribuciones que vamos haciendo a los repositorios.
43+
44+
Si accedemos a la pestaña de arriba que dice `repositorios` veremos una lista de todos ellos. Cuando elegimos un repositorio para ver, nos lleva a una página como esta:
45+
46+
![GitHub-repo](/_src/assets/00-PrimerosPasos/github_repo.png)
47+
48+
Así se ve un repositorio. Arriba a la izquierda tenemos el `nombre de usuario/nombre del repo`.
49+
50+
En el centro podemos ver todos los archivos que tiene dentro el repo. El botón verde que dice `Code` es importante, si clickeamos ahí vamos a poder obtener la url del repo, para así poder ***clonarlo*** (esto lo veremos más adelante).
51+
52+
Arriba a la derecha encontramos tres botones. `Watch` nos permite seguir un repositorio, mientras que con `Star` podemos marcar como favorito un repo que nos guste. Por último tenemos `Fork`, este es **muy** importante, lo vamos a necesitar cuando hagamos el ***Challenge!***
53+
54+
Acá termina nuestro breve recorrido por GitHub! Éxitos! 🍀

0 commit comments

Comments
 (0)