Skip to content

Commit 99b1533

Browse files
authored
Merge pull request #1321 from Phe0/docs-translation-backup
Translates developer docs to brazilian portuguese
2 parents 08205b5 + d0cedcd commit 99b1533

File tree

8 files changed

+705
-0
lines changed

8 files changed

+705
-0
lines changed

developer_docs/pt-br/README.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
Essa pasta contém documentos destinados à desenvolvedores do Editor Web de p5.js.
2+
3+
## Lista de Documentos
4+
* [Guia de contribuição](https://github.com/processing/p5.js-web-editor/blob/master/.github/CONTRIBUTING.md) - Um lugar para começar!
5+
* [Instalação](installation.md) - Um guia para configurar seu ambiente de desenvolvimento
6+
* [Desenvolvimento](development.md) - Um guia para adicionar código para o editor web
7+
* [Preparando um pull-request](preparing_a_pull_request.md) - Instruções para como fazer um pull-request
8+
* [Orientações de Acessibilidade](accessibility.md) - Orientações para escrever código para criar uma aplicação acessível
9+
* [Deploy](deployment.md) - Um guia para realizar um deploy em produção e todas as plataformas que estão sendo usadas
10+
11+
## Documentos para criar
12+
* Princípios de Design - referencie [princípios de design do p5.js](https://github.com/processing/p5.js/blob/master/contributor_docs/design_principles.md)
13+
* Issue Labels - referencie [issue labels do p5.js](https://github.com/processing/p5.js/blob/master/contributor_docs/issue_labels.md)
14+
* Estrutura de Arquivos - Uma explicação da estrutura de arquivos dessa aplicação

developer_docs/pt-br/accessibility.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
## Orientações de Acessiblidade
2+
3+
Qui está um guia de [como usar o editor acessível](https://gist.github.com/MathuraMG/e86666b7b41fbc8c078bad9aff3f666d) e aqui está uma visão geral da biblioteca [p5-accessibility.js](https://github.com/processing/p5.accessibility) que torna esboços p5.js acessíveis para leitores de tela.
4+
5+
O código para o editor web de p5.js adere os padrões de acessibilidade web. As orientações a seguir irão ajudar a assegurar que a acessibilidade continue sendo uma prioridade no decorrer do desenvolvimento.
6+
7+
**Estrutura do código**
8+
9+
* Leitores de tela são uma tecnologia assistiva para perda de visão, que ajuda usuários a navegar páginas web. Eles são capazes de priorizar conteúdo baseado na semantica de tags HTML. Portanto, é importante usar tags específicas como `nav`, `ul`, `li`, `section` e por aí vai. `div` é a tag menos adequada para leitores de tela. Por exemplo, [aqui está o significado semântico da tag `body`](http://html5doctor.com/element-index/#body)
10+
* Todos os botões/links/janelas precisam ser acessíveis ao teclado (Ao apertar tab, espaço, etc.)
11+
* Em casos em que tags não são adequadas para leitores de tela, podemos tomar vantagem de [tabIndex](http://webaim.org/techniques/keyboard/tabindex). Usar tabIndex assegura que todos os elementos são acessíveis pelo teclado. [exemplo de código](https://github.com/processing/p5.js-web-editor/blob/master/client/modules/IDE/components/Editor.jsx#L249)
12+
* Enquanto abrir uma nova janela ou pop up, assegure que o foco do teclaod também irá para a nova janela. [exemplo de código](https://github.com/processing/p5.js-web-editor/blob/master/client/modules/IDE/components/NewFileForm.jsx#L16)
13+
14+
**Marcação**
15+
16+
* Enquanto criar ícones de botões, imagens ou algo sem texto (isso não inclui o `<button>` do HTML5), use [aria-labels](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute). [exemplo de código](https://github.com/processing/p5.js-web-editor/blob/master/client/modules/IDE/components/Toolbar.jsx#L67)
17+
* Todas `<table>`s precisam ter um atributo `summary`. Isso irá assegurar que o usuário terá o contexto para que serve a tabela. [exemplo de código](https://github.com/processing/p5.js-web-editor/blob/master/client/modules/IDE/components/SketchList.jsx#L39)
18+
* Menus `ul`s e `nav`s precisam incluir um título. [exemplo de código](https://github.com/processing/p5.js-web-editor/blob/master/client/components/Nav.jsx#L7)
19+
20+
Para mais informações sobre acessibilidade veja o [tutorial teach access](https://teachaccess.github.io/tutorial/)

developer_docs/pt-br/deployment.md

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# Deploy
2+
3+
Esse documento contém informações sobre como realizar um deploy para produção, todas as plataformas e ferramentas diferentes e como configura-las.
4+
5+
WIP.
6+
* Configuração/Instalação de Produção
7+
* Travis
8+
* Docker Hub
9+
* Kubernetes
10+
* S3
11+
* Mailgun
12+
* Cloudflare
13+
* DNS/Dreamhost
14+
* mLab
15+
16+
## Processo de Deploy
17+
18+
Esses são os passos que acontecem quando você realiza o deploy da aplicação.
19+
20+
1. Faça um push para a a branch `master`, ou faça um merge por um pull request para a branch `master`.
21+
2. Isso dispara uma build no [Travis CI](https://travis-ci.org/processing/p5.js-web-editor).
22+
3. O Travis CI constrói uma imagem Docker (desenvolvimento) de toda a aplicação.
23+
4. O Travis CI realiza alguns testes, que nesse caso são apenas `npm run lint`. Isso pode ser atualizado no futuro para incluir testes mais extensos. Se os testes falharem, a build para aí.
24+
5. Se os testes passarem, então o Travis CI constrói uma imagem Docker (produção) de toda a aplicação.
25+
6. Essa imagem é enviada ao [Docker Hub](https://hub.docker.com/r/catarak/p5.js-web-editor/) com um nome único (O commit Travis) e também para a tag `latest`.
26+
7. O deploy do Kubernetes é atualizado para a imagem que acabou de ser enviada ao Docker Hub no cluster no Google Kubernetes Engine.
27+
28+
## Instalação de Produção
29+
30+
Você só terá que fazer isso se estiver testando o ambinente de produção loclamente.
31+
32+
_Nota_: Os passos de instalação assumem que você está usando um shell baseado em Unix. Se você está usando Windows, você terá que usar `copy` no lugar de `cp`.
33+
34+
1. Clone esse repositório e use um `cd` para entrar nele
35+
2. `$ npm install`
36+
3. Instale o MongoDB e veja se está rodando
37+
4. `$ cp .env.example .env`
38+
5. (NÃO Opicional) edite `.env` e o preencha com todos os valores necessários
39+
6. `$ npm run fetch-examples` - isso faz o download dos esboços de exemplo para um usuário chamado 'p5'
40+
7. `$ npm run build`
41+
8. Já que produção assume que suas variáveis de ambiente estão no ambiente da shell e não em um arquivo `.env`, você terá que rodar `export $(grep -v '^#' .env | xargs)` ou um comando similar, veja essa [resposta do Stack Overflow](https://stackoverflow.com/a/20909045/4086967).
42+
9. `$ npm run start:prod`
43+
44+
## Auto hospedagem - Deploy no Heroku
45+
46+
Se você está interessado em hospedar e fazer deploy da sua própria instância do Editor Web de p5.js, você pode! Seria o mesmo da instância do editor oficial em editor.p5js.org, porém com um domínio diferente, e você estará responsável pela manutenção. Nós recomendamos usar o Heroku, já que você pode hospeda-lo de graça.
47+
48+
1. Se cadastre para uma conta grátis em: [Heroku](https://www.heroku.com/)
49+
2. Clique aqui: [![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/processing/p5.js-web-editor/tree/master)
50+
3. Coloque um *Nome para o App* único, ele fará parte da url(i.e. https://nome-do-app.herokuapp.com/)
51+
4. Atualize qualquer variável de configuração ou aceite os valores default para uma avaliação rápida (elas podem ser alteradas depois para permitir total funcionalidade)
52+
5. Clique no botão "Deploy app"
53+
6. Quando copleto, clique no botão "View app"

developer_docs/pt-br/development.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Desenvolvimento
2+
3+
Um guia para adicionar código nesse projeto.
4+
5+
## Instalação
6+
Sigua o [guia de instalação](https://github.com/processing/p5.js-web-editor/blob/master/developer_docs/pt-br/installation.md).
7+
8+
## Testes
9+
Para rodar a suite de testes apenas rode `npm test` (depois de instalar as dependências com `npm install`)
10+
11+
Um exemplo de teste unitário pode ser encontrado aqui: [Nav.test.jsx](../client/components/__test__/Nav.test.jsx).
12+
13+
## Design
14+
- [Guia de estilo/Design System on Figma](https://github.com/processing/p5.js-web-editor/labels/good%20medium%20issues)
15+
- [ùltimo Design no Figma](https://www.figma.com/file/5KychMUfHlq97H0uDsen1U/p5-web-editor-2017.p.copy?node-id=0%3A1). Note que o design atual no website se divergiu, partes desse design não serão implementados, mas ainda é útil telos por perto para referência.
16+
- [Designs para dispositivos móveis](https://www.figma.com/file/5KychMUfHlq97H0uDsen1U/p5-web-editor-2017.p.copy?node-id=0%3A2529), [Designs Responsivos](https://www.figma.com/file/5KychMUfHlq97H0uDsen1U/p5-web-editor-2017.p.copy?node-id=0%3A3292)
17+
18+
# Tecnologias usadas
19+
20+
**MERN stack** - MongoDB, Express, React/Redux e Node.
21+
22+
- Para uma referência para a **estrutura de arquivos** que esse projeto está usando, por favor olhe no [Mern Starter](https://github.com/Hashnode/mern-starter).
23+
24+
- Esse projeto não utiliza CSS Modules, styled-components, ou outras bibliotecas CSS-in-JS, mas usa Sass. [Orientações BEM e convenções de nome](http://getbem.com/) são seguidas.
25+
26+
- Para estilos comuns e reutilizáveis, escreva OOSCSS (Object-Oriented SCSS) com placeholders e mixins. Para organizar estilos, siga o [Padrão 7-1](https://sass-guidelin.es/#the-7-1-pattern) para Sass.
27+
28+
- Estamos usando [ES6](http://es6-features.org/) e transpilando para ES5 usando [Babel](https://babeljs.io/).
29+
30+
- Para referência para o guia de estilo de Javascript, veja o [Guia de Estilo do Airbnb](https://github.com/airbnb/javascript), [React ESLint Plugin](https://github.com/yannickcr/eslint-plugin-react).
31+
32+
- A configuração de ESLint é baseada em alguns boilerplates populares de React/Redux. Abra para sugerir nisso. Se em desenvolvimento, você estiver ficando irritado com o ESLint, você pode remover temporariamente o `eslint-loader` do `webpack/config.dev.js` no JavaScript loader ou desativar qualquer linha de usar o eslint comentando `// eslint-disable-line` na linha.
33+
34+
- [Jest](https://jestjs.io/) para testes unitários e testes de snapshop junto com o [Enzyme](https://airbnb.io/enzyme/) para testar React.

developer_docs/pt-br/installation.md

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
# Instalação para Desenvolvimento
2+
3+
Sigua essas instruções para configurar sem ambiente de desenvolvimento, que você precisa fazer antes de começar a contribuir para esse projeto.
4+
5+
## Instalação Manual
6+
7+
_Nota_: Os passos de instalação assumem que você está usando um shell baseado em Unix. Se você estiver usando Windows, você precisará usar `copy` no lugar de `cp`.
8+
9+
1. Instale o Node.js. A forma recomendada é pelo [nvm](https://github.com/nvm-sh/nvm). Você também pode instalar a versão 12.16.1 do [node.js](https://nodejs.org/download/release/v12.16.1/) diretamente do website do Node.js.
10+
2. Faça um [Fork](https://help.github.com/articles/fork-a-repo) do [repositŕio do p5.js Web Editor](https://github.com/processing/p5.js-web-editor) para a sua conta do GitHub.
11+
3. Faça um [Clone](https://help.github.com/articles/cloning-a-repository/) do seu novo forkdo repositório do GitHub no seu computador.
12+
13+
```
14+
$ git clone https://github.com/YOUR_USERNAME/p5.js-web-editor.git
15+
```
16+
17+
4. Se você estiver usando nvm, rode `$ nvm use` para configurar sua versão do Node para 12.16.1
18+
5. Navegue até a pasta do projeto e instale todas as suas dpendências necessárias com npm.
19+
20+
```
21+
$ cd p5.js-web-editor
22+
$ npm install
23+
```
24+
6. Instale o MongoDB e cheque se está rodando.
25+
* Para Mac OSX com [homebrew](http://brew.sh/): `brew tap mongodb/brew` e então `brew install mongodb-community` e finalmente comece o server com `brew services start mongodb-community` ou você pode visitar o guia de instalação aqui [Guia de Instalação para MacOS](https://docs.mongodb.com/manual/tutorial/install-mongodb-on-os-x/)
26+
* Para Windows e Linux: [Instalação do MongoDB](https://docs.mongodb.com/manual/installation/)
27+
7. `$ cp .env.example .env`
28+
8. (Opcional) Atualize o `.env` com as chaves necessárias para permitir certos comportamentos do app, i.e. adicionar GiHub ID e GitHub Secret se você quer conseguir entrar com o GitHub.
29+
9. `$ npm run fetch-examples` - isso faz o download dos exemplos de esboço para um usuário chamado 'p5'
30+
10. `$ npm start`
31+
11. Navegue para [http://localhost:8000](http://localhost:8000) no seu browser
32+
12. Intale o [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
33+
13. Abra e fecha o Redux DevTools usando `ctrl+h`, e os mova usando `ctrl+w`
34+
35+
## Instalação com Docker
36+
37+
_Nota_: Os passos de instalação assumem que você está usando um shell baseado em Unix. Se você estiver usando Windows, você precisará usar `copy` no lugar de `cp`.
38+
39+
Usando Docker você pode ter um ambiente de desenvolvimento completo e consistente sem ter que instalar manualmente dependências como o Node, Mongo, etc. Ele também ajuda a isolar dependências e suas informações de outros projetos que você pode ter no mesmo computador que usa versões diferentes/conflitantes, etc.
40+
41+
Note que isso usa um espaço significante da sua máquina. Cheque se você tem pelo menos 5GB disponíveis.
42+
43+
1. Instale o Docker no seu sistema operacional
44+
* Mac: https://www.docker.com/docker-mac
45+
* Windows: https://www.docker.com/docker-windows
46+
2. Clone esse repositŕio e use `cd` para entrar nele
47+
3. `$ docker-compose -f docker-compose-development.yml build`
48+
4. `$ cp .env.example .env`
49+
5. (Opcional) Atualize o `.env` com as chaves necessárias para permitir certos comportamentos do app, i.e. adicionar GiHub ID e GitHub Secret se você quer conseguir entrar com o GitHub.
50+
6. `$ docker-compose -f docker-compose-development.yml run --rm app npm run fetch-examples`
51+
52+
Agora, em qualquer momento que você quiser iniciar o server com suas dependências você pode rodar:
53+
54+
7. `$ docker-compose -f docker-compose-development.yml up`
55+
8. Navegue para [http://localhost:8000](http://localhost:8000) no seu browser
56+
57+
Para abrir um terminal/shell no server Docker que está rodando (i.e. depois de ter rodado `docker-compose up`):
58+
59+
9. `$ docker-compose -f docker-compose-development.yml exec app bash -l`
60+
61+
Se você não tem todo o ambiente rodando, você pode rodar a instância de apenas um container (e deleta-lo automaticamente depois de ter o utilizado):
62+
63+
10. `$ docker-compose -f docker-compose-development.yml run app --rm bash -l`
64+
65+
## Configuração do S3 Bucket
66+
67+
Note que isso é opcioal, a menos que você esteja trabalhando na parte da aplicação que permite que o usuário faça o upload de imagens, vídeos, etc. Por favor consulte o [gist](https://gist.github.com/catarak/70c9301f0fd1ac2d6b58de03f61997e3) para configurar um S3 bucket para ser usado com esse projeto.
68+
69+
Se seu S3 bucket está na região Leste dos EUA (N Virginia) (us-east-1), você irá precisar configurar um URL customizada para isso, porque ele não segue o padrão de nomes do resto das regiões. Em vez disso, adicione o seguinte para seu arquivo
70+
environment/.env :
71+
72+
`S3_BUCKET_URL_BASE=https://s3.amazonaws.com`
73+
74+
Se você configurou seu S3 bucket e DNS para usar um nome de domínio personalizado, você pode configura-lo usando essa variável. I.e.:
75+
76+
`S3_BUCKET_URL_BASE=https://files.mydomain.com`
77+
78+
Para mais informações sobre um domínio personalizado, veja essa documentação:
79+
80+
http://docs.aws.amazon.com/AmazonS3/latest/dev/VirtualHosting.html#VirtualHostingCustomURLs
Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# Preparando um pull request
2+
3+
Copiado e atualizado do [repositório do p5.js](https://github.com/processing/p5.js).
4+
5+
Pull-requests são mais fáceis quando seu código está atualizado! Você pode usar git rebase para atualizar seu código para incorporar mudanças de outros contribuidores. Aqui está como.
6+
7+
## Salve e Atualize
8+
9+
### Salve tudo que você tem!
10+
git status
11+
git add -u
12+
git commit
13+
14+
15+
### Descubra a respeito de mudanças
16+
Verifique se você está acompanhando o repositório upstream p5.js.
17+
18+
git remote show upstream
19+
20+
Se você ver um erro, você terá que começar a acompanhar o repositŕio principal do p5.js como um repositório remoto "upstrem". Você só terá que fazer isso uma vez! Mas nada de ruim irá acontecer se fizer uma segunda vez.
21+
22+
git remote add upstream https://github.com/processing/p5.js
23+
24+
Então pergunte ao git sobre as últimas mudanças.
25+
26+
git fetch upstream
27+
28+
### Só para garantir: faça uma cópia das suas mudanças em uma nova branch
29+
git branch your-branch-name-backup
30+
31+
### Aplique mudanças da branch master, adicione suas mudanças *depois*
32+
git rebase upstream/master
33+
34+
### Volte para a branch master
35+
git checkout master
36+
37+
### Ajude outros contribuidores a entender as mudanças que você fez
38+
git commit -m "Fixed documentation typos"
39+
40+
### Verifique o que o git estará commitando
41+
git status
42+
43+
## CONFLITOS
44+
Você pode ter alguns conflitos! Tudo bem. Se sinta a vontade para pedir ajuda. Se merjar com a última master upstream causar conflitos, você pode sempre fazer um pull request com o repositório upstream, que torna os conflitos públicos.
45+
46+
## E finalmente, para grande glória
47+
git push --set-upstream origin your-branch-name-backup
48+
49+
Aqui está uma boa referência sobre rebases, caso você esteja curioso sobre os detalhes técnicos. https://www.atlassian.com/git/tutorials/merging-vs-rebasing

0 commit comments

Comments
 (0)