Translates developer docs to brazilian portuguese

developer_docs/pt-br/README.md

@@ -0,0 +1,14 @@
+Essa pasta contém documentos destinados à desenvolvedores do Editor Web de p5.js.
+
+## Lista de Documentos
+* [Guia de contribuição](https://github.com/processing/p5.js-web-editor/blob/master/.github/CONTRIBUTING.md) - Um lugar para começar!
+* [Instalação](installation.md) - Um guia para configurar seu ambiente de desenvolvimento
+* [Desenvolvimento](development.md) - Um guia para adicionar código para o editor web
+* [Preparando um pull-request](preparing_a_pull_request.md) - Instruções para como fazer um pull-request
+* [Orientações de Acessibilidade](accessibility.md) - Orientações para escrever código para criar uma aplicação acessível
+* [Deploy](deployment.md) - Um guia para realizar um deploy em produção e todas as plataformas que estão sendo usadas
+
+## Documentos para criar
+* 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)
+* Issue Labels - referencie [issue labels do p5.js](https://github.com/processing/p5.js/blob/master/contributor_docs/issue_labels.md)
+* Estrutura de Arquivos - Uma explicação da estrutura de arquivos dessa aplicação

developer_docs/pt-br/accessibility.md

@@ -0,0 +1,20 @@
+## Orientações de Acessiblidade
+
+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.
+
+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.
+
+**Estrutura do código**
+
+* 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)
+* Todos os botões/links/janelas precisam ser acessíveis ao teclado (Ao apertar tab, espaço, etc.)
+* 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)
+* 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)
+
+**Marcação**
+
+* 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)
+* 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)
+* 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)
+
+Para mais informações sobre acessibilidade veja o [tutorial teach access](https://teachaccess.github.io/tutorial/)

developer_docs/pt-br/deployment.md

@@ -0,0 +1,53 @@
+# Deploy
+
+Esse documento contém informações sobre como realizar um deploy para produção, todas as plataformas e ferramentas diferentes e como configura-las.
+
+WIP.
+* Configuração/Instalação de Produção
+* Travis
+* Docker Hub
+* Kubernetes
+* S3
+* Mailgun
+* Cloudflare
+* DNS/Dreamhost
+* mLab
+
+## Processo de Deploy
+
+Esses são os passos que acontecem quando você realiza o deploy da aplicação.
+
+1. Faça um push para a a branch `master`, ou faça um merge por um pull request para a branch `master`.
+2. Isso dispara uma build no [Travis CI](https://travis-ci.org/processing/p5.js-web-editor).
+3. O Travis CI constrói uma imagem Docker (desenvolvimento) de toda a aplicação.
+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í.
+5. Se os testes passarem, então o Travis CI constrói uma imagem Docker (produção) de toda a aplicação.
+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`.
+7. O deploy do Kubernetes é atualizado para a imagem que acabou de ser enviada ao Docker Hub no cluster no Google Kubernetes Engine.
+
+## Instalação de Produção
+
+Você só terá que fazer isso se estiver testando o ambinente de produção loclamente.
+
+_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`. 
+
+1. Clone esse repositório e use um `cd` para entrar nele
+2. `$ npm install`
+3. Instale o MongoDB e veja se está rodando
+4. `$ cp .env.example .env`
+5. (NÃO Opicional) edite `.env` e o preencha com todos os valores necessários
+6. `$ npm run fetch-examples` - isso faz o download dos esboços de exemplo para um usuário chamado 'p5'
+7. `$ npm run build`
+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).
+9. `$ npm run start:prod`
+
+## Auto hospedagem - Deploy no Heroku
+
+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.
+
+1. Se cadastre para uma conta grátis em: [Heroku](https://www.heroku.com/)
+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)
+3. Coloque um *Nome para o App* único, ele fará parte da url(i.e. https://nome-do-app.herokuapp.com/)
+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)
+5. Clique no botão "Deploy app" 
+6. Quando copleto, clique no botão "View app"

developer_docs/pt-br/development.md

@@ -0,0 +1,34 @@
+# Desenvolvimento
+
+Um guia para adicionar código nesse projeto.
+
+## Instalação
+Sigua o [guia de instalação](https://github.com/processing/p5.js-web-editor/blob/master/developer_docs/pt-br/installation.md).
+
+## Testes
+Para rodar a suite de testes apenas rode `npm test` (depois de instalar as dependências com `npm install`)
+
+Um exemplo de teste unitário pode ser encontrado aqui: [Nav.test.jsx](../client/components/__test__/Nav.test.jsx).
+
+## Design
+- [Guia de estilo/Design System on Figma](https://github.com/processing/p5.js-web-editor/labels/good%20medium%20issues)
+- [ù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.
+- [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)
+
+# Tecnologias usadas
+
+**MERN stack** - MongoDB, Express, React/Redux e Node. 
+
+ - 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).
+
+ - 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. 
+
+ - 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.
+
+ - Estamos usando [ES6](http://es6-features.org/) e transpilando para ES5 usando [Babel](https://babeljs.io/). 
+
+ - 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).
+
+ - 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.
+
+ - [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

@@ -0,0 +1,80 @@
+# Instalação para Desenvolvimento
+
+Sigua essas instruções para configurar sem ambiente de desenvolvimento, que você precisa fazer antes de começar a contribuir para esse projeto.
+
+## Instalação Manual
+
+_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`.
+
+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.
+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.
+3. Faça um [Clone](https://help.github.com/articles/cloning-a-repository/) do seu novo forkdo repositório do GitHub no seu computador.
+
+   ```
+   $ git clone https://github.com/YOUR_USERNAME/p5.js-web-editor.git
+   ```
+
+4. Se você estiver usando nvm, rode `$ nvm use` para configurar sua versão do Node para 12.16.1
+5. Navegue até a pasta do projeto e instale todas as suas dpendências necessárias com npm.
+
+   ```
+   $ cd p5.js-web-editor
+   $ npm install
+   ```
+6. Instale o MongoDB e cheque se está rodando.
+   * 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/)
+   * Para Windows e Linux: [Instalação do MongoDB](https://docs.mongodb.com/manual/installation/)
+7. `$ cp .env.example .env`
+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.
+9. `$ npm run fetch-examples` - isso faz o download dos exemplos de esboço para um usuário chamado 'p5'
+10. `$ npm start`
+11. Navegue para [http://localhost:8000](http://localhost:8000) no seu browser
+12. Intale o [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
+13. Abra e fecha o Redux DevTools usando `ctrl+h`, e os mova usando `ctrl+w`
+
+## Instalação com Docker
+
+_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`.
+
+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.
+
+Note que isso usa um espaço significante da sua máquina. Cheque se você tem pelo menos 5GB disponíveis.
+
+1. Instale o Docker no seu sistema operacional
+   * Mac: https://www.docker.com/docker-mac
+   * Windows: https://www.docker.com/docker-windows
+2. Clone esse repositŕio e use `cd` para entrar nele
+3. `$ docker-compose -f docker-compose-development.yml build`
+4. `$ cp .env.example .env`
+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.
+6. `$ docker-compose -f docker-compose-development.yml run --rm app npm run fetch-examples`
+
+Agora, em qualquer momento que você quiser iniciar o server com suas dependências você pode rodar:
+
+7. `$ docker-compose -f docker-compose-development.yml up`
+8. Navegue para [http://localhost:8000](http://localhost:8000) no seu browser
+
+Para abrir um terminal/shell no server Docker que está rodando  (i.e. depois de ter rodado `docker-compose up`):
+
+9. `$ docker-compose -f docker-compose-development.yml exec app bash -l`
+
+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):
+
+10.  `$ docker-compose -f docker-compose-development.yml run app --rm bash -l`
+
+## Configuração do S3 Bucket
+
+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.
+
+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
+environment/.env :
+
+`S3_BUCKET_URL_BASE=https://s3.amazonaws.com`
+
+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.:
+
+`S3_BUCKET_URL_BASE=https://files.mydomain.com`
+
+Para mais informações sobre um domínio personalizado, veja essa documentação:
+
+http://docs.aws.amazon.com/AmazonS3/latest/dev/VirtualHosting.html#VirtualHostingCustomURLs

developer_docs/pt-br/preparing_a_pull_request.md

@@ -0,0 +1,49 @@
+# Preparando um pull request
+
+Copiado e atualizado do [repositório do p5.js](https://github.com/processing/p5.js).
+
+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.
+
+## Salve e Atualize
+
+### Salve tudo que você tem!
+    git status
+    git add -u
+    git commit
+
+
+### Descubra a respeito de mudanças
+Verifique se você está acompanhando o repositório upstream p5.js.
+
+    git remote show upstream
+
+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.
+
+    git remote add upstream https://github.com/processing/p5.js
+
+Então pergunte ao git sobre as últimas mudanças.
+
+    git fetch upstream
+
+### Só para garantir: faça uma cópia das suas mudanças em uma nova branch
+    git branch your-branch-name-backup
+
+### Aplique mudanças da branch master, adicione suas mudanças *depois*
+    git rebase upstream/master
+
+### Volte para a branch master
+    git checkout master
+
+### Ajude outros contribuidores a entender as mudanças que você fez
+    git commit -m "Fixed documentation typos"   
+
+### Verifique o que o git estará commitando 
+    git status       
+
+## CONFLITOS
+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.
+
+## E finalmente, para grande glória
+    git push --set-upstream origin your-branch-name-backup
+
+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