You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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, aun con un poco mas de experiencia, quieran hacer su primera contribución al código abierto, o hacer mas 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 mas 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?
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.
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.
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.
Contribuye
Conviértete en un contribuyente al código abierto en 10 sencillos pasos.
Tiempo estimado: Menos de 30 minutos.
Paso 1: Haz una bifurcación del 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.
Un proyecto bifurcado va a tener el símbolo de bifurcación a la izquierda
Tu bifurcación va a tener tu propio nombre de usuario de GitHub.
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
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
Dale un nombre a tu rama
Haz click en Create branch
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
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
Paso 4: Abre el archivo index.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.
Ahora tienes el archivo que vas a editar abierto en tu editor y estás listo para comenzar a hacer cambios en él.
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
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
Ésta es ahora tu tarjeta y puedes personalizarla.
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"
Inserta la URL de tu cuenta de Twitter href="Insert URL here"
Escribe tu @ en el campo de texto
Si prefieres usar otro método de contacto en lugar de Twitter, deberás reemplazar el ícono<i class="fa fa-twitter"></i> yendo a Font Awesome Icons, buscando el ícono adecuado y reemplazando sólo la parte de fa-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
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
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.
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"
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
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"
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
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.
Paso 9: Crea una solicitud de extracción
Éste es el momento por el que has estado esperando: enviar una solicitud de extracción (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 Solicitud de extracción (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 solicitud de extracción resaltado con un botón verde.
Haz click en Compare and pull request
Así es como luce la página Open a pull request (Abrir una solicitud de extracción).
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 solicitud de extracción.
A la izquierda el proyecto original, seguido por la rama master. A la derecha está tu bifurcación y la rama que creaste.
Crear una solicitud de extracción:
Escribe un título
Agrega información adicional en la descripción
Haz click en Create 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.
Paso 10: A celebrar!
Eso es todo. Lo hiciste! Has contribuido al código abierto en GitHub.
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 solicitud de extracción. 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 solicitud de extracción 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.
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 solicitud de extracción 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
É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 solicitud de extracción
Gracias por contribuir a éste proyecto. Ahora puedes ir y tratar de contribuir a otros. Busca la etiqueta 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.
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.
para ver los issues orientados a principiantes.