diff --git a/terminal_tutorial.md b/terminal_tutorial.md index 8adcd2549..8d4af86e7 100644 --- a/terminal_tutorial.md +++ b/terminal_tutorial.md @@ -86,7 +86,7 @@ This tutorial is also available in [other languages](/translations/README.md) | [English](/terminal_tutorial.md) | [Bangla](/translations/terminal_tutorial/terminal_tutorial.ben.md) | [Chinese (Traditional)](/translations/terminal_tutorial/terminal_tutorial.zho-tc.md) | [German](/translations/terminal_tutorial/terminal_tutorial.ger.md) | [Hindi](/translations/terminal_tutorial/terminal_tutorial.hin.md) | | :----: | :----: | :----: | :----: | :----: | -| [Portuguese (Brazilian)](/translations/terminal_tutorial/terminal_tutorial.por-br.md) | [Ukrainian](/translations/terminal_tutorial/terminal_tutorial.ukr.md) | +| [Portuguese (Brazilian)](/translations/terminal_tutorial/terminal_tutorial.por-br.md) | [Ukrainian](/translations/terminal_tutorial/terminal_tutorial.ukr.md) | [Spanish](/translations/terminal_tutorial/terminal_tutorial.spa.md) > Translations for projects documentations are welcome. Read [`Translation Guide`](/translations/README.md) to contribute. diff --git a/translations/terminal_tutorial/terminal_tutorial.spa.md b/translations/terminal_tutorial/terminal_tutorial.spa.md new file mode 100644 index 000000000..52e177465 --- /dev/null +++ b/translations/terminal_tutorial/terminal_tutorial.spa.md @@ -0,0 +1,385 @@ +# [Contribute To This Project](https://syknapse.github.io/Contribute-To-This-Project/) + +![image info](/favicon.png) + +> Logo creado con :sparkling_heart: por [CandidDeer](https://github.com/CandidDeer) + +[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)][twit] + +[![Discord](https://badgen.net/discord/online-members/tWkvS4ueVF?label=Join%20Our%20Discord%20Server&icon=discord)](https://discord.gg/tWkvS4ueVF '¡Únete a nuestro servidor de Discord!') +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://syknapse.github.io/Contribute-To-This-Project/) +[![Open Source Love](https://badges.frapsoft.com/os/v2/open-source.svg?v=103)](https://syknapse.github.io/Contribute-To-This-Project/) + +--- + +> ## **Anuncio:** +> +> ¿Te gustaría convertirte en mantenedor de este proyecto y ayudar a mantenerlo activo? Si estás interesado, lee la [guía de mantenedores](/maintainer_guide.md) y envíame un mensaje directo en [Twitter](https://twitter.com/Syknapse). + +--- + +### Índice de acceso rápido + +#### Vista general + +- [Anuncios](#announcement) +- [Introducción](#introduction) +- [¿Para quién es esto?](#who-is-this-for) +- [¿Por qué necesito hacer esto?](#why-do-i-need-to-do-this) +- [¿A qué voy a contribuir?](#what-am-i-going-to-contribute) +- [Traducciones](#translations) +- [Configuración](#setup-) +- [Próximos pasos](#next-steps) +- [Agradecimientos](#acknowledgements) +- [Top 100 Contribuidores](#top-100-contributors) + +#### Pasos + +- [Contribuir](#contribute) +- [Paso 1 - Fork](#step-1-fork-this-repository) +- [Paso 2 - Clonar](#step-2-clone-the-repository) +- [Paso 3 - Crear una nueva rama](#step-3-create-a-new-branch) +- [Paso 4 - Abrir el archivo index.html](#step-4-open-the-indexhtml-file) +- [Paso 5 - Copiar la plantilla de tarjeta](#step-5-copy-the-card-template) +- [Paso 6 - Aplicar tus cambios](#step-6-apply-your-changes) +- [Paso 7 - Hacer commit](#step-7-commit-your-changes) +- [Paso 8 - Hacer push a GitHub](#step-8-push-your-changes-to-github) +- [Paso 9 - Enviar un PR](#step-9-submit-a-prpull-request) +- [Paso 10 - Celebrar](#step-10-celebrate) + +--- + +## Introducción + +Aquí aprenderemos cómo contribuir a este proyecto o a GitHub/Git utilizando la _Terminal_. +Este es un tutorial para ayudar a contribuyentes primerizos a participar en un proyecto simple y fácil. + +### Objetivos + +- Realizar una contribución a un proyecto de código abierto. +- Sentirte más cómodo usando GitHub. + +### ¿Para quién es esto? + +- Esto es para principiantes absolutos. Si sabes cómo escribir y editar una etiqueta `` puedes hacerlo. +- También es para quienes ya tienen un poco de experiencia pero quieren hacer su primera contribución open source, o sumar más contribuciones para ganar experiencia y confianza. + +### ¿Por qué necesito hacer esto? + +Cualquier desarrollador web, aspirante o experimentado, necesita usar el control de versiones Git, y GitHub es el servicio de hosting de Git más popular utilizado por todos. También es el corazón de la comunidad de código abierto. Sentirse cómodo usando GitHub es una habilidad esencial. Hacer una contribución a un proyecto aumenta tu confianza y te da algo que mostrar en tu perfil de GitHub. + +Si eres un desarrollador nuevo y te preguntas si necesitas aprender Git y GitHub, aquí tienes la respuesta: +[Deberías haber aprendido Git ayer (eng., You Should've Learned Git Yesterday)](https://codeburst.io/number-one-piece-of-advice-for-new-developers-ddd08abc8bfa '¿Eres un desarrollador nuevo? Deberías haber aprendido Git ayer. por Brandon Morelli, creador de CodeBurst.io'). + +### ¿A qué voy a contribuir? + +![Tarjeta de contribuyente](/readme-only/card.PNG 'Tarjeta de contribuyente') + +Vas a contribuir una tarjeta como esta en la [página web del proyecto](https://syknapse.github.io/Contribute-To-This-Project/ 'https://syknapse.github.io/Contribute-To-This-Project'). Incluirá tu nombre, tu usuario de Twitter, una descripción corta y 3 enlaces a recursos útiles para desarrolladores web. + +Harás una copia de la plantilla dentro del archivo HTML y la personalizarás con tu información. + +--- + +### Traducciones + +Este tutorial también está disponible en [otros idiomas](/translations/README.md) + +| [English](/terminal_tutorial.md) | [Bangla](/translations/terminal_tutorial/terminal_tutorial.ben.md) | [Chinese (Traditional)](/translations/terminal_tutorial/terminal_tutorial.zho-tc.md) | [German](/translations/terminal_tutorial/terminal_tutorial.ger.md) | [Hindi](/translations/terminal_tutorial/terminal_tutorial.hin.md) | +| :----: | :----: | :----: | :----: | :----: | +| [Portuguese (Brazilian)](/translations/terminal_tutorial/terminal_tutorial.por-br.md) | [Ukrainian](/translations/terminal_tutorial/terminal_tutorial.ukr.md) | [Spanish](/translations/terminal_tutorial/terminal_tutorial.spa.md) + +> Las traducciones de la documentación del proyecto son bienvenidas. Leer [`Guía de traducciones`](/translations/README.md) para contribuir. + +--- + +### ¡Configuración! :) + +> [!Note] +> Si no eres bueno con la interfaz de línea de comandos, aquí tienes el [tutorial GUI usando GitHub Desktop](/README.md) + +Primero configuremos todo para comenzar. + +1. Inicia sesión en tu cuenta de GitHub. Si aún no tienes cuenta, puedes [crear una aquí](https://github.com/join). Se recomienda completar el [tutorial GitHub Hello World](https://guides.github.com/activities/hello-world/) antes de continuar. +2. Si no tienes Git instalado, [descárgalo desde aquí](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) + +> Ahora que ya tienes todo configurado, continuemos con la tarea de contribuir al proyecto. + +[↑ Volver arriba ↑](#quick-access-index) + +--- + +### Contribuir + +Conviértete en contribuidor open source en 10 pasos fáciles. + +_Tiempo estimado: Menos de 30 minutos._ + +#### Paso 1: Hacer un fork de este repositorio + +- El objetivo aquí es hacer una copia de este proyecto y colocarla en tu cuenta. +- Un repositorio (repo) es como se llama a un proyecto en GitHub y un fork es una copia del mismo. +- Asegúrate de estar en la [página principal](https://github.com/Syknapse/Contribute-To-This-Project 'https://github.com/Syknapse/Contribute-To-This-Project') de este repositorio. + +| ![Fork](/readme-only/fork.png "clic on 'Fork'") | +| :---------------------------------------------: | +| **Haz clic en el botón _Fork_** | + +- Ahora tienes una copia completa del proyecto en tu propia cuenta. + +[↑ Volver arriba ↑](#quick-access-index) + +--- + +### Paso 2: Clonar el repositorio + +- Ahora queremos hacer una copia local del proyecto. Es decir, una copia guardada en tu propia máquina. + +![Clone](/readme-only/clone-terminal.png) + +- Ahora clona este repositorio en tu máquina. Haz clic en el botón de clonar y luego en el icono de copiar al portapapeles. +- Un repositorio (repo) es como se llama a un proyecto en GitHub y un fork es una copia del mismo. + +Abre la terminal y ejecuta el siguiente comando: + +```bash +git clone "url que acabas de copiar" +``` + +Por ejemplo: + +```bash +git clone https://github.com/$Username/Contribute-To-This-Project.git +``` + +donde `$Username` es tu nombre de usuario de GitHub. Aquí estás copiando el contenido del repositorio first-contributions en GitHub a tu computadora. + +[↑ Volver arriba ↑](#quick-access-index) + +--- + +#### Paso 3: Crear una nueva rama + +Cambia al directorio del repositorio en tu computadora (si aún no estás allí): + +```bash +cd Contribute-To-This-Project +``` + +Ahora crea una nueva rama usando el comando `git checkout` + +```bash +git checkout -b tu-nombre-de-rama-nueva +``` + +Por ejemplo: + +```bash +git checkout -b add-$Username-card +``` + +Nota: Cambia `$Username` con tu nombre de usuario de GitHub. + +- Ahora has creado una nueva rama separada de la master. +- Para los siguientes pasos, asegúrate de estar trabajando en esta rama. Verás el nombre de la rama en la que estás en la parte inferior izquierda del editor de texto que estés usando, donde dice `$Username-card` como nombre de tu rama. + +**NO trabajes en la rama `master`** + +[↑ Volver arriba ↑](#quick-access-index) + +--- + +#### Paso 4: Abrir el archivo index.html + +Ahora necesitamos abrir el archivo que vamos a editar con tu editor de código favorito. Nosotros usamos [VSCode](https://code.visualstudio.com/) como nuestro editor de código preferido. + +- El archivo `index.html` está directamente en la carpeta `Contribute-To-This-Project`. +- Puedes abrir el archivo con el siguiente comando: + +```bash +code index.html +``` + +Nota: Este es un código de terminal para abrir el archivo: `index.html` en `VSCode`. + +- Ahora tienes el archivo que vas a editar abierto en tu editor y estás listo para comenzar a hacer cambios en él. + +[↑ Volver arriba ↑](#quick-access-index) + +--- + +#### Paso 5: Copiar la plantilla de la tarjeta + +- Haremos una copia de la plantilla de la tarjeta para comenzar a trabajar en ella +- En la parte superior del archivo html, debajo del `` justo dentro del elemento ``, hay disponible `
` que contiene otras secciones +- Las **primeras 2** secciones son exactamente como: `
` +- Contráelas haciendo clic en la flecha si usas VSCode como se muestra en la captura de pantalla + +| ![Encontrar plantilla de tarjeta](/readme-only/find-card-template.png 'Encontrar plantilla de tarjeta') | +| :--------------------------------------------------------------------------------: | + +- La plantilla de tarjeta de contribuciones llamada `
` debería ser visible ya que encontrarás la sección etiquetada como `== TEMPLATE ==` +- Copia todo dentro del cuadrado rojo en la imagen, desde el comentario `Contributor card START` hasta el comentario `Contributor card END` + +| ![Copiar plantilla de tarjeta](/readme-only/card-copy.PNG 'Copiar plantilla de tarjeta') | +| :-----------------------------------------------------------------------: | + +- Pega todo directamente debajo del comentario que lo indica +- Asegúrate de que haya una sola línea de espacio entre el inicio de tu tarjeta y el final de la última tarjeta. Es una buena práctica mantener nuestro código lo más claro posible +- Nunca uses linters o formateadores de estilo. El proyecto tiene Prettier configurado + +| ![Pegar plantilla de tarjeta](/readme-only/card-paste.PNG 'Pegar plantilla de tarjeta') | +| :---------------------------------------------------------------------------------: | + +- Esta ahora es **tu** tarjeta para que la personalices y edites. + +[↑ Volver arriba ↑](#quick-access-index) + +--- + +#### Paso 6: Aplicar tus cambios + +- Ahora comenzaremos a editar html, cambiando los campos personalizables en nuestra tarjeta. + +| :arrow_right_hook: Reemplaza 'Name' con tu nombre | ![Cambiar nombre](/readme-only/change-name.PNG 'Escribe tu nombre') | +| :------------------------------------------------ | :----------------------------------------------------------: | + +- **Note: No cambies`class="name"`** + +| :arrow_right_hook: Inserta la URL de tu cuenta de Twitter `href="Inserta URL aquí"`, Escribe tu nombre de usuario en el campo de texto | ![Cambiar contacto](/readme-only/change-contact.PNG 'Inserta un enlace a tu cuenta de Twitter y escribe tu nombre de usuario') | +| :--------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------: | + +- Si prefieres usar otro método de contacto diferente a Twitter, deberás reemplazar el ícono de Twitter `` yendo a [Font Awesome Icons](http://fontawesome.io/icons/), buscando el ícono adecuado y reemplazando sólo la parte de `fa-x-twitter` con la del nuevo ícono. `fa-facebook` por ejemplo. Luego continúa con los mismos pasos. + +|![Cambiar el "Aceca de"](/readme-only/change-about.PNG 'Escribe una oración acerca de ti')| +|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | +| :arrow_right_hook: **Cuéntanos algo sobre ti. Mantenlo breve y conciso. Piensa en ello más como un tweet que como una publicación de blog** | +| ![Cambiar recursos](/readme-only/change-resources.PNG 'Inserta un enlace, escribe una descripción corta y el nombre del recurso') | +| :arrow_right_hook: **Comparte con la comunidad 3 enlaces a recursos que sean útiles para el desarrollo web. Esto puede ser cualquier cosa: un video, una charla, un podcast, un artículo, una referencia o una herramienta. Si eres principiante, no te intimides por esto, comparte lo que sepas incluso si crees que es básico. Te sorprenderás de cuántas personas se beneficiarán.** | + +- **Link:** Inserta el enlace `href="aquí"` reemplazando el `#`. ¡Por favor, abstente de usar acortadores de URL o URLs que no sean del sitio que estás publicando! +- **Titulo:** Escribe una breve descripción `title="here"`. +- **Nombre:** Escribe el nombre del recurso en el campo de texto `>here`. +- Asegúrate de haber **guardado todos tus cambios**. +- **Prueba tus cambios**. ¡ESTO ES IMPORTANTE! Abre el archivo HTML en tu navegador (por ejemplo, haciendo doble clic en él) y observa cómo se verá tu tarjeta en el sitio. Verifica que toda la página aún se vea igual y que nada esté roto. Haz clic en tus enlaces y asegúrate de que funcionen. Abre la consola (Ctrl + Shift + J en Windows/Linux, o Cmd + Opt + J en Mac) y comprueba que no haya mensajes de error. +- ¡Genial, has terminado de editar tu código! Los siguientes pasos enviarán tus cambios a GitHub y luego los enviarán para que se fusionen con el proyecto principal. + +[↑ Volver arriba ↑](#quick-access-index) + +--- + +#### Paso 7: Hacer commit de tus cambios + +- Ahora abre la terminal en el directorio de tu proyecto y ejecuta `git status` y notarás que no hay cambios realizados en git. +- Puedes agregar esos cambios que hiciste usando el comando `git-add` + +```bash +git add index.html +``` + +- Ahora haz commit de esos cambios usando el comando `git commit` + +```bash +git commit -m "Add $Username card info" +``` + +- Reemplazando `$Username` con tu nombre de usuario de Github. + +[↑ Volver arriba ↑](#quick-access-index) + +--- + +#### Paso 8: Hacer push de tus cambios a GitHub + +- Tus cambios ahora están guardados o confirmados. Pero solo se guardan localmente, es decir, en tu computadora. +- Sincronizar los cambios locales con tu repositorio en GitHub se llama _Push_. Estás "empujando" los cambios desde tu repositorio local al repositorio remoto en GitHub. +- Usamos el comando `git push` para enviar cambios a github: + +```bash +git push -u origin $Username-card +``` + +- Reemplazando `$Username-card` con el nombre de tu rama. + +- Después de unos segundos, la operación se completa y ahora tienes exactamente la misma copia de esta rama en tu máquina y en GitHub. + +[↑ Volver arriba ↑](#quick-access-index) + +--- + +#### Paso 9: Enviar un PR (Pull Request) + +- ste es el momento que has estado esperando; enviar un _Pull Request_ (PR). +- Hasta ahora, todo el trabajo que has hecho ha sido en el fork del proyecto, que como recordarás reside en tu propia cuenta de GitHub. +- Ahora es el momento de enviar tus cambios al proyecto principal para que se fusionen con él. +- Esto se llama [_Pull Request_](https://help.github.com/articles/about-pull-requests/ 'Acerca de las Pull Requests - Ayuda de GitHub') porque estás pidiendo al mantenedor del proyecto original que "extraiga (pull)" tus cambios a su proyecto. +- Ve a la página principal de **tu fork** en GitHub (tendrá el icono de fork y tu propio nombre de usuario en la parte superior). +- Hacia la parte superior del repo verás un mensaje de pull request resaltado con un botón verde. + +| ![Enviar un Pull Request](/readme-only/pull-request.PNG 'Esto normalmente se encuentra hacia la parte superior de la página, debajo de la descripción y encima de los archivos y carpetas del proyecto.') | +| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: | +| :arrow_right_hook: **Haz clic en `Compare and pull request`** | +| ![Abrir un Pull Request](/readme-only/pull-request-branches.PNG 'Estás solicitando fusionar tu rama desde tu fork con la rama master del proyecto original.') | +| :arrow_right_hook: Así es como se ve la página `Open a pull request` (Abrir un Pull Request). | + +- RECUERDA _estás intentando fusionar tu rama con el proyecto original, no con la rama `Master` en tu fork_. +- La imagen de abajo te da una idea de cómo debería verse el encabezado de tu pull request. +- A la izquierda está el proyecto original, seguido de la rama master. A la derecha está tu fork y la rama que creaste. + +| ![Enviar un Pull Request](/readme-only/pull-request-open.PNG "¡Haz clic en el botón verde. ¡No tengas miedo!") | +| :-----------------------------------------------------------------------------------------------------------------------------------------: | +| :arrow_right_hook: **Crear un pull request: Escribe un título, agrega información opcional en la descripción y haz clic en `Create pull request` (Crear pull request)** | + +- No te sientas abrumado por todas las opciones. Solo necesitas hacer estos tres pasos por ahora. +- Deja marcada la opción `Allow edits from maintainers` (Permitir ediciones de los mantenedores). +- Ahora, se enviará un _Pull Request_ al mantenedor del proyecto. Tan pronto como sea revisado y aceptado, tus cambios aparecerán en la [página web del proyecto](https://syknapse.github.io/Contribute-To-This-Project 'Página web de Contribuir a este Proyecto'). + +[↑ Volver arriba ↑](#quick-access-index) + +--- + +#### Paso 10: Celebrar + +¡Eso es todo. ¡Lo has logrado! Ahora has contribuido al código abierto en GitHub. + +Has agregado código a una página web en vivo: [https://syknapse.github.io/Contribute-To-This-Project](https://syknapse.github.io/Contribute-To-This-Project) + +Tus cambios **no serán visibles inmediatamente**; primero deben ser revisados, aceptados y fusionados por el mantenedor del proyecto. Una vez que se fusionen, tu tarjeta debería ser visible y estar en vivo en la página. + +Es muy normal que un revisor solicite cambios en un PR. Considérelo una buena práctica si te sucede. Estate atento a los comentarios y cambios solicitados. Una vez que realices los cambios solicitados (nuevamente en tu rama), todo lo que tienes que hacer es confirmar y enviar tus cambios. El PR se actualizará automáticamente con los nuevos cambios. + +Prometo que intentaré revisar y fusionar lo antes posible, pero lo hago en mi tiempo libre, por lo que es inevitable un retraso de unos días. + +[↑ Volver arriba ↑](#quick-access-index) + +--- + +### Próximos pasos + +- Vuelve en un rato para verificar tu Pull Request fusionado. +- Deberías recibir un correo electrónico de GitHub cuando tus cambios hayan sido aprobados, o si se solicitan cambios adicionales. Y cuando el PR finalmente se fusiona con el master y se ha agregado tu tarjeta. +- También puedes aprender a contribuir desde esta serie _gratuita_: [How to Contribute to an Open Source Project on GitHub](https://kcd.im/pull-request) +- Si encontraste este proyecto **útil** por favor dale una :star: estrella :star: en la parte superior de la página y **Tweet** al respecto para ayudar a correr la voz [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)][twit] +- Puedes **seguirme** y ponerte en contacto en Twitter [Twitter](https://twitter.com/Syknapse '@Syknapse') o [usando cualquiera de estas otras opciones](https://syknapse.github.io/Syk-Houdeib/#contact 'Mi sección de contacto | Portafolio') +- Este es un proyecto de código abierto, por lo que aparte de contribuir con tu tarjeta, eres bienvenido a ayudar a corregir errores, mejoras o nuevas características. Abre un [issue](https://help.github.com/articles/creating-an-issue/ 'Dominando los Issues | Guías de GitHub') o envía un nuevo [pull request](https://help.github.com/articles/creating-a-pull-request-from-a-fork/ 'Creando un pull request desde un fork | Ayuda de GitHub') +- Para ayudar a mejorar nuestra comunidad, echa un vistazo a la pestaña de GitHub [Discussions](https://github.com/Syknapse/Contribute-To-This-Project/discussions) ubicada junto a Pull Requests. Esta área es un lugar para presentarte, profundizar en discusiones sobre Código Abierto y comunicarte con los Mantenedores del Proyecto. ¿Nos ayudarás a desarrollar esta función y mejorar nuestra comunidad? +- **Gracias por contribuir a este proyecto**. Ahora puedes seguir adelante y probar a contribuir a otros proyectos; busca la etiqueta ![Good First Issue](https://user-images.githubusercontent.com/29199184/33852733-e23b7070-debb-11e7-907b-4e7a03aad436.png) para opciones de contribución aptas para principiantes. +- También estoy buscando colaboradores que me ayuden a revisar y fusionar PRs. Si te gustaría obtener más práctica avanzada con Git, envíame un MD en Twitter y lee la [guía del mantenedor](/maintainer_guide.md). + +[↑ Volver arriba ↑](#quick-access-index) + +--- + +### Reconocimientos + +Este proyecto está fuertemente influenciado por [Roshan Jossey's](https://github.com/Roshanjossey) en su gran proyecto [first-contributions](https://github.com/Roshanjossey/first-contributions) con su excelente tutorial. + +También está particularmente inspirado por la gran comunidad alrededor de [#GoogleUdacityScholars](https://twitter.com/hashtag/GoogleUdacityScholars?src=hash) The Google Challenge Scholarship: Front-End Web Dev, class de 2017 Europa. + +### Top 100 Contributors + +[![GitHub Contributors Image](https://contrib.rocks/image?repo=Syknapse/Contribute-To-This-Project)](https://github.com/Syknapse/Contribute-To-This-Project/graphs/contributors) + +[↑ Volver arriba ↑](#quick-access-index) + +[twit]: https://twitter.com/intent/tweet?text=Contribute%20To%20This%20Project.%20An%20easy%20project%20for%20first-time%20contributors,%20with%20a%20full%20tutorial.%20By%20@Syknapse&url=https://github.com/Syknapse/Contribute-To-This-Project&hashtags=100DaysofCode 'Tweet este proyecto'