Skip to content

Latest commit

 

History

History
361 lines (220 loc) · 30.4 KB

File metadata and controls

361 lines (220 loc) · 30.4 KB

Logo del proyecto

Logo Created with 💖 By CandidDeer

Tweet

Discord PRs Welcome Open Source Love


Anuncio:

Te gustaría formar parte de este proyecto y ayudar a mantenerlo? Si estás interesado, lee la guía para mantenedores y envíame un DM en Twitter.


Índice de acceso rápido

General

Pasos


Introducción

Éste es un tutorial para ayudar a aquellos que quieren contribuir por primera vez a un proyecto fácil y simple.

Objetivos

  • Hacer una contribución a un proyecto de código abierto.
  • Ganar confianza usando Github.

Para quién es?

  • Es para principiantes absolutos. Si sabes como escribir y editar una etiqueta de hipertexto <a href="" target=""></a> entonces deberías ser capaz de seguir este tutorial.
  • Es también para aquellos que, aún con un poco más de experiencia, quieran hacer su primera contribución al código abierto, o hacer más contribuciones para ganar experiencia y confianza.

Por qué debería hacer esto?

Cualquier desarrollador web, principiante o experimentado, necesita usar el control de versiones Git y Github es el servicio más popular. Es también el corazón de la comunidad de código abierto. Sentirse cómodo usando Github es una habilidad esencial. Hacer una contribución al código abierto aumenta tu confianza y te provee de algo para mostrar en tu perfil de Github.
Si eres nuevo en el desarrollo de software y te estás preguntando si necesitas aprender Git y Github, la respuesta es: Deberías haber aprendido Git ayer.

Con qué voy a contribuir?

Tarjeta de contribuyente

Vas a contribuir con una tarjeta como ésta a la página del proyecto. La tarjeta va a incluir tu nombre, tu usuario de twitter, una descripción y tres recomendaciones de hipervínculos apuntando a recursos que tú creas útiles para desarrolladores.

Vas a hacer una copia de la plantilla de la tarjeta dentro del archivo HTML y vas a personalizarla con tu información.


Traducciones

Este tutorial tambien está disponible en otros idiomas

Árabe Bengalí Chino (Tradicional) Inglés Francés
Alemán Hindú Italiano Japonés Coreano
Polaco Portugués Ruso Serbio Español
Turco Ucraniano

Las traducciones para la documentación del proyecto son bienvenidas. Lee la Guia de traducciones para contribuir.


Preparación

Nota: Este tutorial está basado en GitHub para escritorio. Si te sientes cómodo usando la terminal ve a este tutorial (Click Aquí)

Primero, vamos a preparar lo necesario:

  1. Inicia sesión en tu cuenta de GitHub. Si aún no tienes una, créala. Te recomiendo que sigas el tutorial Hello World Github tutorial antes de continuar.
  2. Descarga el software GitHub Desktop.
    • Si te sientes cómodo usando Git en la consola de comandos, puedes hacerlo (el tutorial first-contributions es un proyecto similar a éste que puede servirte de guia para los comandos que necesitarás).
    • Si usas VS Code, trae integrado Git y te permite hacer lo que necesites directamente desde el editor.
    • Sin embargo, la forma más simple y fácil de seguir este tutorial es usar GitHub Desktop.

Ahora que tenemos todo listo vamos a ponernos manos a la obra para contribuir al proyecto.

↑ Ir arriba ↑


Contribuye

Conviértete en un contribuyente al código abierto en 10 sencillos pasos.

Tiempo estimado: Menos de 30 minutos.

Paso 1: Copia el repositorio

  • El objetivo aquí es hacer una copia de éste proyecto para colocarlo en tu cuenta.
  • Un repositorio (repo) el nombre que se le da a un proyecto en GitHub y una bifurcación (fork) es una copia del mismo.
  • Asegúrate de estar en la página principal de éste repositorio.
  • Haz click en el botón Fork
Fork
  • Ahora tienes una copia completa del proyecto en tu propia cuenta.

↑ Ir arriba ↑


Paso 2: Clona el repositorio

  • Ahora queremos hacer una copia local del proyecto, ésto es, una copia guardada en tu computadora.
  • Abre la aplicacion GitHub Desktop y en la aplicación:
  • Haz click en File y luego en Clone repository
Clone
  • Vas a ver una lista de tus proyectos y bifurcaciones en GitHub.
  • Selecciona <tu-nombre-de-usuario-de-github'>/Contribute-To-This-Project.
  • Haz click en Clone
Clona el proyecto
Pega la plantilla de la tarjeta
  • Va a tomar un momento realizar la copia del proyecto a tu disco duro. Te recomiendo que dejes la ruta por defecto que normalmente es ..\Documentos\GitHub.
  • Ahora tienes una copia local del proyecto

↑ Ir arriba ↑


Paso 3: Crea una nueva rama

  • Una vez que el repositorio se ha clonado y tienes abierto GitHub Desktop es hora de crear una nueva rama (branch).
  • Una rama es la manera de mantener separados tus cambios del proyecto principal llamado Master. Si, por ejemplo, las cosas van mal y no estas conforme con los cambios que has hecho, simplemente puedes borrar la rama y el proyecto principal no se verá afectado.
  • Haz click en Current branch
  • Luego en New
Crear rama
  • Dale un nombre a tu rama
  • Haz click en Create branch
Nombra tu rama
  • La puedes llamar como desees pero dado que es una rama en la que agregarás una tarjeta al proyecto, llamarla tarjeta-de-tu-nombre es una buena práctica, ya que quedará clara cual es la intención de la rama.
  • Publica tu nueva rama en Github
Nombre de la rama
  • Haz creado una nueva rama separada de la rama 'master' (que es la principal).
  • Para los próximos cambios asegúrate de estar trabajando en ésta rama. Arriba y al centro de GitHub Desktop (donde se lee Current Branch) podrás ver el nombre de la rama en la que estas ubicado.

NO trabajes en la rama master

↑ Ir arriba ↑


Paso 4: Abre el archivo html

  • En éste momento necesitaremos abrir el archivo que vamos a modificar con tu editor de código favorito.
  • Busca la carpeta en tu computadora. Si usaste las opciones por defecto debería estar en tu-nombre-de-usuario-de-windows > Documentos > GitHub > Contribute-To-This-Project
  • El archivo index.html está justo en la carpeta Contribute-To-This-Project.
  • Abre tu editor (Sublime, VS Code, Atom, etc.) y utiliza el comando Open file para localizar el archivo index.html en el directorio principal del proyecto
  • También puedes hacerlo localizando el archivo en tu disco duro, darle click derecho y abrir con tu editor.
Abrir el archivo index
  • Ahora tienes el archivo que vas a editar abierto en tu editor y estás listo para comenzar a hacer cambios en él.

↑ Ir arriba ↑


Paso 5: Copia la plantilla de la tarjeta

  • Vamos a hacer una copia de la tarjeta para empezar a trabajar en ella
  • Desplázate hacia abajo hasta el final del archivo, donde encontrarás una sección etiquetada como == TEMPLATE ==
  • Copia todo lo que está dentro del recuadro rojo en la imagen, desde el comentario Contributor card START hasta el comentario Contributor card END
Copia la plantilla de la tarjeta
  • Pega todo justo debajo del comentario que lo indica
  • Asegúrate de dejar sólo una linea entre el final de la última tarjeta y el principio de tu tarjeta. Es una buena práctica dejar tu código tan claro como sea posible
  • Asegúrate de que la indentación de tu código es la correcta y que coincide con la de la plantilla
Pega la plantilla de la tarjeta
  • Ésta es ahora tu tarjeta y puedes personalizarla.

↑ Ir arriba ↑


Paso 6: Aplica tus cambios

  • Comenzaremos editando el html, cambiando los campos personalizables en nuestra tarjeta.
  • Reemplaza 'Name' con tu nombre
  • Nota: No cambies class="name"
Cambia el nombre
  • Inserta la URL de tu cuenta de Twitter href="Insert URL here"
  • Escribe tu @ en el campo de texto
Cambiar contacto
  • Si prefieres usar otro método de contacto en lugar de Twitter, deberás reemplazar el ícono<i class="fa fa-x-twitter"></i> yendo a Font Awesome 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.
  • Dinos algo acerca de tí
  • Hazlo corto y sencillo. Piensa mas en un tweet que en un artículo de un blog
Cambia el "Acerca de"
  • Comparte con la comunidad tres enlaces que puedan ser útiles para el desarrollo web
  • Puede ser lo que quieras: un vídeo, una charla, un podcast, un artículo, una referencia o una herramienta
  • Si eres un principiante no te sientas intimidado por ésto, comparte lo que conozcas aunque pienses que es básico. Te sorprenderá la cantidad de gente que se beneficiará de eso
Cambia recursos
  • Enlace: Inserta el enlace href="aquí" reemplazando el #
  • Título: Escribe una breve descripción title="aquí"
  • Nombre: Escribe el nombre del recurso en el campo de texto >aquí</a>
  • Asegúrate de haber guardado todos tus cambios.
  • Prueba tus cambios. ÉSTO ES IMPORTANTE! Abre el archivo html en tu navegador (dándole doble click, por ejemplo) y observa como se ve tu tarjeta en el sitio. Verifica que la página completa luce igual y que nada está roto. Haz click en tus enlaces y comprueba que funcionan. Abre la consola (Ctrl + Shift + J (Windows / Linux) o Cmd + Opt + J (Mac)) y verifica que no hay mensajes de error.
  • Genial, has terminado de editar tu código! Los pasos siguientes subirán tus cambios a GitHub y los enviarán para ser unidos con el proyecto principal.

↑ Ir arriba ↑


Paso 7: Confirma tus cambios

  • Ve hacia atrás en la aplicacion GitHub Desktop.
  • Tus cambios serán agregados automáticamente al area de trabajo (staging area).
  • Ésto significa que Git ha registrado todos los cambios guardados.
  • Puedes ver ésto reflejado en la aplicación. Todo lo que has agregado al archivo estará en verde y lo que has borrado se mostrará en rojo.
  • El próximo paso se llama Commit
  • Ésto significa "confirma los cambios"
confirma los cambios
  • Así es como debería verse la cabecera de GitHub Desktop
  • Nota el símbolo de bifurcación cerca del nombre del proyecto en Current repository (Repositorio actual)
  • Tu Current branch (Rama actual) tendrá el nombre que le diste en el paso 3
Confirma los cambios
  • Para confirmar tus cambios (Commit) deberás llenar el campo Summary (Resumen)
  • Éste es el mensaje de confirmación que explica tus cambios
  • En éste caso "Agregué mi tarjeta de información" sería un mensaje acorde
  • Opcionalmente puedes usar el campo Description para añadir mas información
  • Haz click en el botón Commit. Tu boton va a decir algo como Commit to "nombre-de-tu-rama"
Escribe un mensaje y confirma

↑ Ir arriba ↑


Paso 8: Sube tus cambios a GitHub

  • Tus cambios ahora están guardados o confirmados. Pero ellos están guardados localmente, es decir, en tu computadora.
  • Sincronizar cambios locales con tu repositorio en GitHub es llamado Push. Estás "pusheando" (subiendo) los cambios desde tu ambiente local a tu repositorio remoto en GitHub.
  • Haz click en el botón Push
Push a GitHub
  • Despues de unos segundos la operación se habrá completado y tendras exactamente la misma copia de esta rama tanto en tu computadora como en GitHub.

↑ Ir arriba ↑


Paso 9: Crea una solicitud para que añadan tus cambios

  • Éste es el momento por el que has estado esperando: enviar una solicitud para que añadan tus cambios (Pull Request o PR).
  • Hasta aquí, todo el trabajo que has hecho ha sido en tu bifurcación del proyecto que, como recuerdas, vive en tu propia cuenta de GitHub.
  • Es hora de enviar tus cambios al proyecto principal para que sea unido a él.
  • Ésto es llamado (Pull Request) porque estas solicitando a quien mantiene el proyecto original que "extraiga" tus cambios y los incluya en el proyecto.
  • Vé a la página principal de tu bifurcación en GitHub (tendrá el símbolo de bifurcación y tu nombre arriba).
  • Hacia la parte superior del repositorio verás un mensaje de Pull Request resaltado con un botón verde.
  • Haz click en Compare and pull request
Enviar una Pull Request
  • Así es como luce la página Open a pull request (Abrir una Pull Request).
  • RECUERDA estás tratando de unir tu rama con el proyecto original, no con la rama master de tu bifurcación.
  • La imagen a continuación de una idea de como debería verse la cabecera de tu Pull Request.
  • A la izquierda el proyecto original, seguido por la rama master. A la derecha está tu bifurcación y la rama que creaste.
Abre una Pull Request
  • Crear una Pull Request:
  • Escribe un título
  • Agrega información adicional en la descripción
  • Haz click en Create pull request
Envía una Pull Request
  • No te marees con la cantidad de opciones. Solo necesitas seguir estos tres pasos por ahora.
  • Deja marcada la opción Allow edits from maintainers (Permitir que quien mantiene el proyecto haga cambios)
  • Ahora un Pull Request será enviado a quien mantiene el proyecto. Tan pronto como él lo revise y acepte tus cambios, ellos aparecerán en la página del proyecto.

↑ Ir arriba ↑


Paso 10: A celebrar!

Eso es todo. Lo hiciste! Has contribuido al código abierto en GitHub.

Has agregado código a la página: https://syknapse.github.io/Contribute-To-This-Project

Tus cambios no serán visibles inmediatamente; primero deben ser revisados, aceptados y unidos al proyecto por quien lo mantiene. Una vez que sean unidos, tu tarjeta será visible en la página.

Es muy normal que un revisor pida que hagas cambios en tu Pull Request. Piensa en ésto como una buena práctica si llega a sucederte. Presta atención a los comentarios y los cambios solicitados. Una vez que hagas esos cambios (nuevamente en tu rama), todo lo que tienes que hacer es confirmar tus cambios y subirlos (commit y push). La Pull Request se actualizará automáticamente con los nuevos cambios.

Te prometo tratar de revisar y unir los cambios tan pronto como me sea posible pero lo hago en mi tiempo libre, por lo que algunos dias de retraso son inevitables.

↑ Ir arriba ↑


Próximos pasos

  • Vuelve en un tiempo para verificar que tus cambios se hayan unido.
  • Deberías recibir un email de GitHub cuando tus cambios hayan sido aprobados, si te han pedido cambios adicionales y si la Pull Request está finalmente unida a master y tu tarjeta ha sido añadida.
  • Si encuentras útil éste proyecto, por favor dale una ⭐ estrella ⭐ al inicio de la página y twittea al respecto para hacer correr la voz Tweet
  • Puedes seguirme y estar en contacto en Twitter o usando cualquiera de estas otras opciones
  • Éste es un proyecto de código abierto, por lo que aparte de contribuir con tu tarjeta eres bienvenido a corregir errores, a proponer mejoras y a agregar funcionalidades. Abre un issue o envía una nueva Pull Request
  • Gracias por contribuir a éste proyecto. Ahora puedes ir y tratar de contribuir a otros. Busca la etiqueta Good First Issue para ver los issues orientados a principiantes.
  • También estoy buscando colaboradores para que me den una mano revisando y uniendo las solicitudes de extracción. Si te gustaría ganar conocimientos y práctica con Git, enviame un mensaje privado via Twitter.

↑ Ir arriba ↑


Agradecimientos

Éste proyecto está fuertemente influenciado por el grandioso proyecto first-contributions de Roshan Jossey con su excelente tutorial.

También está particularmente inspirado por la grandiosa comunidad alrededor de #GoogleUdacityScholars La beca Google: Desarrollo web Front-End, clase de 2017 Europa.

Licencias

MIT License

Top 100 Contributors

GitHub Contributors Image

Volver al principio ↑