Contribute To This Project : Contribute To This Project

Contribute To This Project

Otro código fuente

1.0.0

Descargar

Contribuir a este proyecto

información de la imagen

Logotipo creado con? Por candiddeer

Anuncio:
¿Le gustaría convertirse en un mantenedor en este proyecto y ayudar a mantenerlo en funcionamiento? Si está interesado, lea la Guía del mantenedor, únase a nuestro servidor de Discord y solicite unirse al equipo de los mantenedores del proyecto.

Índice de acceso rápido

Introducción
Objetivos
¿Para quién es esto?
¿Por qué necesito hacer esto?
¿Qué voy a contribuir?
Traducciones
¡Configuración! :)
Contribuir
- Paso 1: Bifurca este repositorio
- Paso 2: Clonar el repositorio
- Paso 3: crear una nueva rama
- Paso 4: Abra el archivo index.html
- Paso 5: Copie la plantilla de la tarjeta
- Paso 6: Aplique sus cambios
- Paso 7: comete sus cambios
- Paso 8: Empuje sus cambios a GitHub
- Paso 9: Envíe un PR (solicitud de extracción)
- Paso 10: Celebrar
Siguientes pasos
Expresiones de gratitud
Licencia
Top 100 contribuyentes

Introducción

Este es un tutorial para ayudar a los contribuyentes primerizos a participar en un proyecto simple y fácil.

Objetivos

Hacer una contribución a un proyecto de código abierto.
Póngase más cómodo al usar Github.

¿Para quién es esto?

Esto es para principiantes absolutos. Si sabe cómo escribir y editar una etiqueta de anclaje <a href="" target=""></a> entonces debería poder hacerlo.
También es para aquellos con un poco más de experiencia, pero que desean hacer su primera contribución de código abierto, o obtener más contribuciones para obtener más 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 alojamiento GIT más popular utilizado por todos. También es el corazón de la comunidad de código abierto. Ponerse cómodo usando GitHub es una habilidad esencial. Hacer una contribución a un proyecto aumenta su confianza y le da algo que mostrar en su perfil de GitHub.

Si es un nuevo desarrollador y se pregunta si necesita aprender Git y Github, entonces aquí está la respuesta: debería haber aprendido Git ayer.

¿Qué voy a contribuir?

Contributor Card

Vas a contribuir con una tarjeta como esta a la página web de este proyecto. Incluirá su nombre, su identificador de Twitter, una breve descripción y 3 enlaces a recursos útiles para desarrolladores web que recomiende.

Hará una copia de la plantilla de tarjeta dentro del archivo HTML y la personalizará con su propia información.

Traducciones

Este tutorial también está disponible en otros idiomas.

Árabe (عربي)	Bangla (বাংলা)	Chino (tradicional) (繁體中文)	Holandés	Inglés (inglés)
Francés (Français)	Alemán (Deutsch)	Hindi (हिंदी)	Italiano (italiano)	Japonés (日本語)
Coreano (한국어)	Polaco (Polski)	Portugués (portugués)	Ruso (рсий)	Serbio (српски)
Español (español)	Turco (Türkçe)	Ukrainian (українська)	Noruego (norsk)	Malyalam

Las traducciones para las documentos de los proyectos son bienvenidas. Lea Translation Guide para contribuir.

¡Configuración! :)

Nota

Este tutorial se basa en GitHub PC. Si se siente cómodo con la terminal, vaya a este tutorial (haga clic aquí)

Primero obtengamos la configuración para hacer el trabajo

Inicie sesión en su cuenta de GitHub. Si aún no tiene una cuenta, únase a GitHub. Te recomiendo que hagas el tutorial Github Hello World antes de continuar.
Descargar la aplicación Github Desktop.
- Alternativamente, si se siente cómodo usando Git en la línea de comandos, puede hacerlo, aquí está el enlace al tutorial CLI.
- Si usa el código VS, viene con GIT integrado y le permite hacer lo que necesitamos directamente del editor.
- Sin embargo, la forma más simple y fácil de seguir este tutorial es usar GitHub Desktop.

Ahora que están configurados con el negocio de contribuir al proyecto.

↑ ir a la parte superior ↑

Contribuir

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

Tiempo estimado: menos de 30 minutos .

Paso 1: Bifurca este repositorio

El objetivo aquí es hacer una copia de este proyecto y colocarla en su cuenta.
Un repositorio (Repo) es cómo se llama a un proyecto en GitHub y una bifurcación es una copia de la misma.
Asegúrese de estar en la página principal de este repositorio.


Haga clic en el botón de la horquilla

Ahora tiene una copia completa del proyecto en su propia cuenta.

↑ ir a la parte superior ↑

Paso 2: Clonar el repositorio

Ahora queremos hacer una copia local del proyecto. Esa es una copia guardada en su propia máquina.
Abra la aplicación Github Desktop. En la aplicación:


Haga clic en el archivo y luego el repositorio de clones

Verá una lista de sus proyectos y tenedores en GitHub.
Seleccione <your-github-username>/Contribute-To-This-Project .
Haga clic en Clon

↪️ Un proyecto bifurcado tendrá el símbolo de la bifurcación a la izquierda. Su bifurcación tendrá su propio usuario de Github

Esto tomará un momento ya que el proyecto se copia en su disco duro. Le recomiendo que mantenga la ruta predeterminada que generalmente es ..DocumentsGitHub .
Ahora tiene una copia local del proyecto.

↑ ir a la parte superior ↑

Paso 3: crear una nueva rama

Una vez que el repositorio ha sido clonado y lo tiene abierto en el escritorio de Github, es hora de crear una nueva rama.
Una rama es una forma de mantener sus cambios separados de la parte principal del proyecto llamado Master . Por ejemplo, si las cosas salen mal y no está contento con sus cambios, simplemente puede eliminar la rama y el proyecto principal no se verá afectado.

↪️ Haga clic en `Current branch` , luego haga clic en `New`
↪️ Dé un nombre a su rama, luego haga clic en `Create branch`
↪️ Publica tu nueva sucursal a Github

Puede nombrarlo lo que quiera, pero dado que esta es una rama para agregar una tarjeta con su nombre al proyecto, llamarlo your-name-card es una buena práctica porque mantiene la intención de esta rama clara.
Ahora ha creado una nueva rama separada del maestro.
Para los siguientes pasos, asegúrese de estar trabajando en esta rama. Verá el nombre de la rama en el que se encuentra en el centro superior de la aplicación de escritorio GitHub donde dice la rama actual .

No trabajes en la rama master

↑ ir a la parte superior ↑

Paso 4: Abra el archivo index.html

Ahora necesitamos abrir el archivo que vamos a editar con su editor de código favorito.
Encuentre la carpeta del proyecto en su computadora. Si ha mantenido el valor predeterminado, esto debería ser algo así como your-computer > Documents > GitHub > Contribute-To-This-Project
El archivo index.html está directamente en la carpeta Contribute-To-This-Project .
Abra su editor de código (Sublime, VS Code, Atom..Etc) y use el comando Open file y ubique el archivo index.html en el directorio principal del proyecto


↪️ Alternativamente, puede localizar el archivo en su disco duro, hacer clic derecho y abrir con su editor

Ahora tiene el archivo que va a editar abierto en su editor y está listo para comenzar a hacer cambios.

↑ ir a la parte superior ↑

Paso 5: Copie la plantilla de la tarjeta

Haremos una copia de la plantilla de tarjeta para comenzar a trabajar en ella.
Justo dentro de la <body> , encontrará una sección <div class="container"> . Esto contiene muchas otras secciones.
Las primeras 2 secciones son exactamente como: <div class="row"> . Colapsarlos haciendo clic en la flecha por sus lados en su editor de código VS como se muestra en la imagen a continuación. (Si está utilizando otro editor, es posible que no pueda usar la función. Solo tendrá que desplazarse hacia abajo). El colapso facilita la ocultación de algunos componentes de código que no necesitará cambiar.
Ahora debe ver la sección que alberga todas las tarjetas de contribución: <div class="grid" id="contributions">

Dentro de esta sección, encontrará la sección etiquetada == TEMPLATE ==
Copie todo dentro del cuadrado rojo en la imagen, desde la Contributor card START el comentario de la Contributor card END

Pegue todo todo directamente debajo del comentario que lo indica; Justo encima de la tarjeta de contribuyente más reciente.
Asegúrese de que haya una sola línea de espacio entre el extremo de su tarjeta y el inicio de la última tarjeta. También agregue una línea de espacio entre el inicio de su tarjeta y la línea con el comentario === Paste YOUR CARD directly BELOW this line === . Es una buena práctica mantener nuestro código lo más claro posible
Nunca use un enlace o formatúas de estilo. El proyecto tiene una configuración más bonita

Esta ahora es su tarjeta para personalizar y editar.

↑ ir a la parte superior ↑

Paso 6: Aplique sus cambios

Ahora comenzaremos a editar HTML, cambiando los campos personalizables en nuestra tarjeta.

↪️ reemplazar 'nombre' con su nombre

Nota: No cambie class="name"

↪️ Inserte la URL de su cuenta de Twitter `href="Insert URL here"` , escriba su mango en el campo de texto

Si prefiere usar un contacto que no sea Twitter, deberá reemplazar el icono de Twitter <i class="fa fa-x-twitter"></i> iba a iconos impresionantes que buscan el icono correcto y reemplazando solo la parte fa-x-twitter con el nuevo icono como fa-facebook , por ejemplo. Luego siga los mismos pasos anteriores.


↪️ Cuéntanos algo sobre ti. Mantenlo corto y dulce. Piénselo más como un tweet que una publicación de blog

↪️ Comparta con la comunidad 3 enlaces a recursos que son ú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 un principiante, no te sientas intimidado por esto, comparte lo que sabes, incluso si crees que es básico. Te sorprenderá cuántas personas se beneficiarán.

Enlace: inserte el enlace href="here" reemplazando el # . ¡Abstenerse de usar cortes de URL o URL que no sean del sitio que está publicando!
Título: Escriba una breve descripción title="here" .
Nombre: Escriba el nombre del recurso en el campo de texto >here</a> .
Asegúrese de haber guardado todos sus cambios .
Pon a prueba tus cambios . ¡Esto es importante! Abra el archivo HTML en su navegador (haciendo doble clic en él, por ejemplo) y vea cómo se verá su tarjeta en el sitio. Vea que toda la página todavía se ve igual y nada está roto. Haga clic en sus enlaces y asegúrese de que estén funcionando. Abra la consola (CTRL + Shift + J (Windows / Linux) o CMD + OPT + J (Mac)) y verifique que no haya mensajes de error.
¡Genial, has terminado de editar tu código! Los próximos pasos enviarán sus cambios a GitHub y luego los enviarán para fusionar el proyecto principal.

↑ ir a la parte superior ↑

Paso 7: comete sus cambios

Regrese a la aplicación Github Desktop.
Sus cambios se habrán agregado automáticamente al área de preparación.
Esto significa que Git ha registrado todos los cambios guardados .
Puedes ver esto reflejado en la aplicación. Todo lo que haya agregado al archivo será verde, y las eliminaciones se mostrarán como rojos.


↪️ El siguiente paso se llama `Commit` . Esto significa aproximadamente `confirm the changes`

↪️ Así es como debería ser su encabezado de escritorio GitHub. Observe el símbolo de la horquilla junto al nombre del proyecto en `Current repository` , su `Current branch` tendrá el nombre que le dio en el paso 3

↪️ Para `Commit` debe completar el campo `Summary` . Este es el mensaje de confirmación que explica lo que ha cambiado. En este caso, `"Add my card information"` sería un mensaje razonable. Opcionalmente puede agregar una `Description` más detallada. Haga clic en el botón `Commit` . Su botón dirá algo como `Commit to "your-branch-name"`

↑ ir a la parte superior ↑

Paso 8: Empuje sus cambios a GitHub

Sus cambios ahora se guardan o comprometen. Pero se guardan solo localmente, eso está en su computadora.
La sincronización de los cambios locales con su repositorio en GitHub se llama Push . Está "presionando" los cambios de su repositorio local al repositorio remoto en GitHub.

↪️ Haga clic en el botón `Push`

Después de unos segundos, la operación está completa y ahora tiene exactamente la misma copia de esta rama en su máquina y en GitHub.

↑ ir a la parte superior ↑

Paso 9: Envíe un PR (solicitud de extracción)

Este es el momento en que has estado esperando; Enviar una solicitud de extracción (PR).
Hasta ahora, todo el trabajo que ha realizado ha estado en la bifurcación del proyecto, que como recuerda reside en su propia cuenta de GitHub.
Ahora es el momento de enviar sus cambios al proyecto principal para fusionarlo.
Esto se llama una solicitud de extracción porque le está pidiendo al mantenedor del proyecto original que "extraiga" sus cambios en su proyecto.
Vaya a la página principal de su horquilla en GitHub (tendrá el icono de la horquilla y su propio nombre de usuario en la parte superior).
Hacia la parte superior del repositorio verá un mensaje de solicitud de extracción resaltado con un botón verde.


↪️ Haga clic en la `Compare and pull request`

↪️ Así es como se ve la página `Open a pull request` .

Recuerde que está tratando de fusionar su rama con el proyecto original, no con la rama Master en su horquilla .
La siguiente imagen le da una idea de cómo debería ser el encabezado de su solicitud de extracción.
A la izquierda está el proyecto original, seguido por la rama maestra. A la derecha está tu bifurcación y la rama que creaste.


↪️ Cree una solicitud de extracción: escriba un título, agregue información opcional en la descripción y haga clic en `Create pull request`

No se deje caer por todas las opciones. Solo necesita hacer estos tres pasos por ahora.
Deje la opción Allow edits from maintainers marcados.
Ahora, se enviará una solicitud de extracción al mantenedor del proyecto. Tan pronto como sea revisado y aceptado, sus cambios aparecerán en la página web del proyecto.

↑ ir a la parte superior ↑

Paso 10: Celebrar

Eso es todo. Lo has hecho! Ahora ha contribuido al código abierto en GitHub.

Ha agregado código a una página web en vivo: https://syknapse.github.io/contribute-to-this-project

Sus cambios no serán visibles de inmediato ; Primero tienen que ser revisados, aceptados y fusionados por el mantenedor del proyecto. Una vez que se fusionan, su tarjeta debe ser visible y vivir en la página.

Es muy normal que un revisor solicite cambios en un PR. Piense en ello como una buena práctica si le sucede. Esté atento a los comentarios y los cambios solicitados. Una vez que realice los cambios solicitados (de vuelta en su rama), todo lo que tiene que hacer es comprometer y impulsar sus 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 un retraso de unos días es inevitable.

↑ ir a la parte superior ↑

Siguientes pasos

Regrese en un tiempo para verificar su solicitud de extracción fusionada.
Debe recibir un correo electrónico de GitHub cuando se hayan aprobado sus cambios, o si se solicitan cambios adicionales. Y cuando el PR finalmente se fusione con el maestro y se ha agregado su tarjeta.
También puede aprender a contribuir de esta serie gratuita : cómo contribuir a un proyecto de código abierto en GitHub
Si encontró que este proyecto es útil , dale una estrella en la parte superior de la página y tuitea al respecto para ayudar a correr la voz
Puede unirse a nuestro servidor de discordia
¿Puedes seguirme y ponerse en contacto? (Twitter) o usar cualquiera de estas otras opciones
Este es un proyecto de código abierto, por lo que, además de contribuir con su tarjeta, puede ayudar a solucionar errores, mejoras o nuevas funciones. Abra un problema o envíe una nueva solicitud de extracción
Para ayudar a mejorar nuestra comunidad, eche un vistazo a la pestaña Discusiones de GitHub ubicada junto a las solicitudes de extracción. Esta área es un lugar para presentarse, entrar en discusiones más profundas sobre código abierto y comunicarse con los mantenedores de proyectos. ¿Nos ayudará a desarrollar esta característica y mejorar nuestra comunidad?
Gracias por contribuir a este proyecto . Ahora puede seguir adelante e intentar contribuir a otros proyectos; Busque el Etiqueta para opciones de contribución para principiantes.
También estoy buscando colaboradores para darme una mano para revisar y fusionar PRS. Si desea obtener una práctica Git más avanzada, lea la Guía del mantenedor, únase a nuestro servidor de Discord y solicite unirse al equipo de los mantenedores del proyecto.

↑ ir a la parte superior ↑

Expresiones de gratitud

Este proyecto está fuertemente influenciado por el gran proyecto de primeras contribuciones de Roshan Jossey con su excelente tutorial.

También está particularmente inspirado en la gran comunidad alrededor de #GoogleudacityScholars The Google Challenge Scholarship: Front-end Web Dev, Clase de 2017 Europa.