diff --git a/.github/PULL_REQUEST_TEMPLATE/translation_checklist.md b/.github/PULL_REQUEST_TEMPLATE/translation_checklist.md index 2cd8d256..458020f1 100644 --- a/.github/PULL_REQUEST_TEMPLATE/translation_checklist.md +++ b/.github/PULL_REQUEST_TEMPLATE/translation_checklist.md @@ -7,6 +7,7 @@ Each lesson includes a translation of the README.md and the Assignment.md file, - [ ] 1-2 - [ ] 1-3 - [ ] 2 +- [ ] 2 - [ ] 2-1 - [ ] 2-2 - [ ] 2-3 diff --git a/.github/PULL_REQUEST_TEMPLATE/translation_checklist.pt.md b/.github/PULL_REQUEST_TEMPLATE/translation_checklist.pt.md new file mode 100644 index 00000000..812fcc1a --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE/translation_checklist.pt.md @@ -0,0 +1,38 @@ +## Track translation progress by opening a draft PR using this template and checking off the translations completed + +Each lesson includes a translation of the README.md and the Assignment.md file, if available. Only mark the lesson complete if both those files are translated per lesson, please. + +- [ x ] 1 +- [ x ] 1-1 +- [ x ] 1-2 +- [ x ] 1-3 +- [ ] 2 +- [ ] 2 +- [ ] 2-1 +- [ ] 2-2 +- [ ] 2-3 +- [ ] 2-4 +- [ ] 3 +- [ ] 3-1 +- [ ] 3-2 +- [ ] 3-3 +- [ ] 4 +- [ ] 4-1 +- [ ] 5 +- [ ] 5-1 +- [ ] 5-2 +- [ ] 5-3 +- [ ] 6 +- [ ] 6-1 +- [ ] 6-2 +- [ ] 6-3 +- [ ] 6-4 +- [ ] 6-5 +- [ ] 6-6 +- [ ] 7 +- [ ] 7-1 +- [ ] 7-2 +- [ ] 7-3 +- [ ] 7-4 + +- [ ] Quiz (add a file in the quiz-app with all localizations) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.pt.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.pt.md new file mode 100644 index 00000000..2982abeb --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.pt.md @@ -0,0 +1,213 @@ +# Introdução a Linguagens de Programação e Ferramentas + +Essa lição trata dos básicos de linguagens de programação. Os tõpicos tratados aqui se aplicam na maioria das linguages de prorgamação modernas. Na sessão 'Ferramentas', você vai aprender sobre softwares úteis que que ajudarão como uma pessoa desenvolvedora. + +![Introdução a Programação](webdev101-programming.png) + +> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) + +## Quiz Pré-Lição + +[Quiz Pré-Lição](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1) + +## Introdução + +Nessa lição, vamos falar sobre: + +- O que é Programação? +- Tipos de linguagens de programação +- Elementos básicos de um programa +- Ferramentas e softwares utéis para a pessoa desenvolvedora + +## O que é Programação? + +Programação (também conhecida como codificação) é o processo de escrever instruções em um dispositivo, como um computador ou dispositivo móvel. Escrevemos essas instruções com uma linguagem de programação, que é então interpretada pelo dispositivo. Esses conjuntos de instruções podem ser chamados de vários nomes, mas _programa_, _programa de computador_, _aplicativo (app_ e _executável_ são alguns nomes populares. + +Um _programa_ pode ser qualquer coisa escrita com código; sites, jogos e aplicativos de celular são programas. Embora seja possível criar um programa sem escrever código, a lógica subjacente é interpretada para o dispositivo e essa lógica provavelmente foi escrita com o código. Um programa que está * executando* ou *executando código* está executando instruções. O dispositivo com o qual você está lendo esta lição está executando um programa para exibi-la em sua tela. + +✅ Faça uma pequena pesquisa: quem é considerado a primeira pessoa programadora de computador do mundo? + +## Linguagens de Programação + +Linguagens de programação têm um propósito principal: Serem usadas por pessoas desenvolvedoras para criar instruções para enviar a um dispositivo. Os dispositivos só podem entender binários (1s e 0s) e, para *a maioria* das pessoas desenvolvedoras, essa não é uma maneira muito eficiente de se comunicar. As linguagens de programação são um veículo de comunicação entre humanos e computadores. + +As linguagens de programação vêm em formatos diferentes e podem servir a propósitos diferentes. Por exemplo, JavaScript é usado principalmente para aplicativos da web, enquanto Bash é usado principalmente para sistemas operacionais. + +*Linguagens de baixo nível* normalmente requerem menos etapas do que *linguagens de alto nível* para um dispositivo interpretar as instruções. No entanto, o que torna as linguagens de alto nível populares é sua legibilidade e suporte. JavaScript é considerado uma linguagem de alto nível. + +O código a seguir ilustra a diferença entre uma linguagem de alto nível com JavaScript e uma linguagem de baixo nível com código ARM assembly. + +```javascript +let number = 10; +let n1 = 0, + n2 = 1, + nextTerm; + +for (let i = 1; i <= number; i++) { + console.log(n1); + nextTerm = n1 + n2; + n1 = n2; + n2 = nextTerm; +} +``` + +```c + area ascen,code,readonly + entry + code32 + adr r0,thumb+1 + bx r0 + code16 +thumb + mov r0,#00 + sub r0,r0,#01 + mov r1,#01 + mov r4,#10 + ldr r2,=0x40000000 +back add r0,r1 + str r0,[r2] + add r2,#04 + mov r3,r0 + mov r0,r1 + mov r1,r3 + sub r4,#01 + cmp r4,#00 + bne back + end +``` + +Acredite ou não, *ambos estão fazendo a mesma coisa*: imprimir uma sequência de Fibonacci de até 10. + +✅ A sequência de Fibonacci [definida](https://en.wikipedia.org/wiki/Fibonacci_number) como um conjunto de números em que cada número é a soma dos dois anteriores, começando em 0 e 1. + +## Elementos de um programa + +Uma única instrução em um programa é chamada de _declaração_ e geralmente terá um caractere ou espaçamento de linha que marca onde a instrução termina, ou _acaba_. Como um programa termina varia com cada idioma. + + +A maioria dos programas depende do uso de dados de um usuário ou de outro lugar, onde as declarações podem se basear em dados para realizar as instruções. Os dados podem alterar o comportamento de um programa, portanto, as linguagens de programação vêm com uma maneira de armazenar dados temporariamente que podem ser usados ​​posteriormente. Esses dados são chamados de _variáveis_. Variáveis ​​são statements que instruem um dispositivo a salvar dados em sua memória. As variáveis ​​nos programas são semelhantes às da álgebra, onde têm um nome exclusivo e seu valor pode mudar com o tempo. + + +Há uma chance de que algumas instruções não sejam executadas por um dispositivo. Isso geralmente ocorre de propósito, quando escrito pela pessoa desenvolvedora, ou por acidente, quando ocorre um erro inesperado. Esse tipo de controle de um aplicativo o torna mais robusto e sustentável. Normalmente, essas mudanças no controle acontecem quando certas decisões são cumpridas. Uma declaração comum em linguagens de programação modernas para controlar como um programa é executado é a declaração `if..else`. + + +✅ Você aprenderá mais sobre esse tipo de declaração nas lições seguintes + + +## Ferramentas + +[![Ferramentas](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Ferramentas") + +Nesta seção, você aprenderá sobre alguns softwares que podem ser muito úteis ao iniciar sua jornada de desenvolvimento profissional. + + +Um **ambiente de desenvolvimento** é um conjunto exclusivo de ferramentas e recursos que uma pessoa desenvolvedora usará com frequência ao escrever software. Algumas dessas ferramentas foram personalizadas para as necessidades específicas de uma pessoa desenvolvedora e podem mudar com o tempo se as prioridades de trabalho ou projetos pessoais forem alterados, ou quando usar uma linguagem de programação diferente. Os ambientes de desenvolvimento são tão exclusivos quanto as pessoas desenvolvedoras que os utilizam. + + +### Editores + +Uma das ferramentas mais importantes para o desenvolvimento de software é o editor. Os editores são onde você escreve seu código e, às vezes, onde o executará. + +Também contamos com os editores por alguns motivos adicionais: + + +- _Debugging_ Descobrir bugs e erros ao passar pelo código, linha por linha. Alguns editores têm recursos de depuração ou podem ser personalizados e adicionados para linguagens de programação específicas. +- _Destaque da sintaxe_ Adiciona cores e formatação de texto ao código, tornando-o mais fácil de ler. A maioria dos editores permite destaque de sintaxe personalizada. +- _Extensões e integrações_ Adições especializadas para pessoas desenvolvedoras, por pessoas desenvolvedoras, para acesso a ferramentas adicionais que não são incorporadas ao editor de base. Por exemplo, muitas vezes precisamos de uma maneira de documentar nosso código e explicar como ele funciona, nesse caso, instalaremos uma extensão de verificação ortográfica para verificar erros de digitação. A maioria dessas adições se destina ao uso em um editor específico, e a maioria dos editores vem com uma maneira de pesquisar as extensões disponíveis. +- _Personalização_ A maioria dos editores é extremamente personalizável e cada pessoa desenvolvedora terá seu ambiente de desenvolvimento exclusivo que atende às suas necessidades. Muitos também permitem que você crie suas próprias extensões. + + +#### Editores Populares e Extensões para Desenvolvimento de Web + +- [Visual Studio Code](https://code.visualstudio.com/) + - [Code Spell Checker - verificador ortográfico de código ](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) + - [Live Share - Compartilhamento ao vivo](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack) + - [Prettier - Formatador de Código](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) +- [Atom](https://atom.io/) + - [spell-check - verificador ortográfico](https://atom.io/packages/spell-check) + - [teletype](https://atom.io/packages/teletype) + - [atom-beautify](https://atom.io/packages/atom-beautify) + +### Navegadores + +Outra ferramenta crucial é o navegador. As pessoas desenvolvedoras da web contam com o navegador para observar como seu código é executado na internet, isso também é usado para visualizar elementos visuais de uma página da web que são escritos no editor, como HTML. + +Muitos navegadores vêm com _ferramentas para desenvolvimento_ (DevTools) que contêm um conjunto de recursos e informações úteis que ajudam a coletar e capturar percepções importantes sobre seus aplicativos. Por exemplo: se uma página da web contém erros, às vezes é útil saber quando eles ocorreram. DevTools em um navegador pode ser configurado para capturar essas informações. + + +#### Navegadores Populares e DevTools + +- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa) +- [Chrome](https://developers.google.com/web/tools/chrome-devtools/) +- [Firefox](https://developer.mozilla.org/docs/Tools) + +### Ferramentas da Linah de Comando + +Algumas pessoas desenvolvedoras preferem uma visualização menos gráfica para suas tarefas diárias e contam com a linha de comando para fazer isso. O desenvolvimento de código requer uma quantidade significativa de digitação e algumas pessoas desenvolvedoras preferem não interromper seu fluxo no teclado e usam atalhos de teclado para alternar entre as janelas da área de trabalho, trabalhar em arquivos diferentes e usar ferramentas. +A maioria das tarefas pode ser concluída com um mouse, mas um benefício de usar a linha de comando é que muito pode ser feito com ferramentas de linha de comando sem a necessidade de alternar entre o mouse e o teclado. Outro benefício da linha de comando é que ela é configurável ​​e você pode salvar sua configuração personalizada, alterá-la posteriormente e também importá-la para novas máquinas de desenvolvimento. Como os ambientes de desenvolvimento são tão exclusivos para cada pessoa desenvolvedora, algumas evitam o uso da linha de comando e outras dependem dela inteiramente e existem também aquelas que preferem uma combinação dos dois. + + +### Opções Populares de Linhas de Comando + +As opções da linha de comando variam de acordo com o sistema operacional que você usa. + + +_💻 = já vem pré-instalado no sistema operacional._ + +#### Windows + +- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻 +- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻 +- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa) +- [mintty](https://mintty.github.io/) + +#### MacOS + +- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻 +- [iTerm](https://iterm2.com/) +- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa) + +#### Linux + +- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 +- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html) +- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa) + +#### Ferramentas Populares para Linha de Comando + +- [Git](https://git-scm.com/) (💻 na maioria dos sistemas operacionais) +- [NPM](https://www.npmjs.com/) +- [Yarn](https://classic.yarnpkg.com/en/docs/cli/) + +### Documentação + +Quando uma pessoa desenvolvedora deseja aprender algo novo, provavelmente recorrerá à documentação para aprender como usá-la. As pessoas desenvolvedoras geralmente contam com a documentação para orientá-las sobre como usar ferramentas e linguagens de maneira adequada e também para obter um conhecimento mais profundo de como funciona. + +#### Documentações Populares para Desenvolvimento de Web + +- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web) +- [Frontend Masters](https://frontendmasters.com/learn/) + +✅ Faça uma pesquisa: agora que você conhece os fundamentos do ambiente de desenvolvimento da web, compare-o com o ambiente de um web designer. + + +--- + +## 🚀 Desafio + +Compare algumas linguagens de programação. Quais são algumas das características únicas de JavaScript vs. Java? E COBOL x Go? + + + +## Quiz Pós-Aula + +[Quiz Pós-Aula](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2) + +## Revisão & Autoestudo + +Estude um pouco sobre as diferentes linguagens de programação à disposição. Tente escrever uma linha em uma delas e depois refaça em outras duas. O que você aprende? + + +## Lição de casa + +[Lendo Documentação](assignment.pt.md) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.pt.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.pt.md new file mode 100644 index 00000000..65dea896 --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.pt.md @@ -0,0 +1,11 @@ +# Lendo a documentação + +## Instruções + +Existem muitas ferramentas que uma pessoa desenvolvedora de web pode precisar que estão na [documentação MDN para ferramentas do lado do cliente](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selecione 3 ferramentas não abordadas na lição, explique por que uma dev Web as usaria, procure uma ferramenta que se enquadre nesta categoria e compartilhe sua documentação. Não use o mesmo exemplo de ferramenta em documentos MDN. + +## Rubrica + +Exemplar | Adequado | Precisa de melhorias +--- | --- | - | +| Explicado por que uma pessoa desenvolvedora de web usaria a ferramenta | Explicou como, mas não por que uma pessoa desenvolvedora de web usaria a ferramenta | Não mencionou como ou por que uma pessoa desenvolvedora de web usaria a ferramenta | \ No newline at end of file diff --git a/1-getting-started-lessons/2-github-basics/translations/README.pt.md b/1-getting-started-lessons/2-github-basics/translations/README.pt.md new file mode 100644 index 00000000..170cf9f5 --- /dev/null +++ b/1-getting-started-lessons/2-github-basics/translations/README.pt.md @@ -0,0 +1,317 @@ +# Introdução ao GitHub + +Esta lição cobre os fundamentos do GitHub, uma plataforma para hospedar e gerenciar alterações em seu código. + +![Intro ao Github](images/webdev101-github.png) +> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) + +## Quiz Pré-Aula +[Quiz Pré-Aula](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/3) + +## Introdução + +Nesta lição vamos falar sobre: + +- rastreando o trabalho que você faz em sua máquina +- trabalhando em projetos com outros +- como contribuir com software de código aberto + +### Pré-requisitos + +Antes de começar, você precisará verificar se o Git está instalado. No terminal, digite: +`git --version` + +Se o Git não estiver instalado, [baixe o Git aqui](https://git-scm.com/downloads). Em seguida, configure seu perfil Git local no terminal: +* `git config --global user.name "your-name"` +* `git config --global user.email "your-email"` + +Para verificar se o Git já está configurado, você pode digitar: +`git config --list` + +Você também precisará de uma conta do GitHub, um editor de código (como o Visual Studio Code) e abrir seu terminal (ou: prompt de comando). + +Navegue para [github.com](https://github.com/) e crie uma conta, caso ainda não o tenha feito, ou faça login e preencha o seu perfil. + +✅ O GitHub não é o único repositório de código do mundo; existem outros, mas o GitHub é o mais conhecido + +### Preparação + +Você precisará de uma pasta com um projeto de código em sua máquina local (laptop ou PC) e de um repositório público no GitHub, que servirá como um exemplo de como contribuir com os projetos de outras pessoas. + +--- + +## Gerenciamento de código + +Digamos que você tenha uma pasta localmente com algum projeto de código e deseja começar a monitorar seu progresso usando git - o sistema de controle de versão. Algumas pessoas comparam o uso do git a escrever uma carta de amor para o seu futuro eu. Lendo suas mensagens de commit dias, semanas ou meses depois, você será capaz de se lembrar por que tomou uma decisão, ou "reverter" uma mudança - isto é, quando você escreve boas "mensagens de commit". + +### Tarefa: Faça um repositório e conmmit o código + +1. **Crie um repositório no GitHub**. No GitHub.com, na guia de repositórios ou na barra de navegação superior direita, encontre o botão **new repo** . + + 1. Dê um nome ao seu repositório (pasta) + 1. Selecione **create repository**. + +1. **Navegue até sua pasta de trabalho**. Em seu terminal, mude para a pasta (também conhecida como diretório) que deseja iniciar o rastreamento. Digite: + + ```bash + cd [nome da sua pasta] + ``` + +1. **Inicialize um repositório git**. No seu projeto, digite: + + ```bash + git init + ``` + +1. **Cheque status**. Para checar o status de seu repositório, digite: + + ```bash + git status + ``` + + a saída pode ser parecida com esta: + + ```output + Changes not staged for commit: + (use "git add ..." to update what will be committed) + (use "git checkout -- ..." to discard changes in working directory) + + modified: file.txt + modified: file2.txt + ``` + + Geralmente o comando `git status` diz a você coisas como quais arquivos estão prontos para serem _salvos_ para o repo ou tem alterações que você pode querer persistir. + +1. **Adicionar todos os arquivos para rastreamento** + Isso também é chamado de arquivos de teste / adição de arquivos à área de teste. + + ```bash + git add . + ``` + + O argumento `git add` plus `.` indiciona todos os seus arquivos e alterações para rastreamento. + +1. **Adicionar arquivos selecionados para rastreamento** + + ```bash + git add [nome do arquivo ou pasta] + ``` + +Isso nos ajuda a adicionar apenas os arquivos selecionados à área de teste quando não queremos enviar todos os arquivos de uma vez. + +1. **Unstage todos os arquivos** + + ```bash + git reset + ``` + Este comando nos ajuda a unstage todos os arquivos de uma vez. + +1. **Unstage um arquivo em particular** + + ```bash + git reset [nome do arquivo ou pasta] + ``` + + Este comando nos ajuda a remover stage de apenas um arquivo específico de uma vez que não queremos incluir no próximo commit. + +1. **Persistindo no seu trabalho**. Neste ponto, você adicionou os arquivos a um local chamado _staging area_. Um lugar onde o Git está rastreando seus arquivos. Para tornar a mudança permanente, você precisa _committar_ os arquivos. Para fazer isso, crie um _commit_ com o comando `git commit`. Um _commit_ representa um ponto na história do seu repo sendo salvo. Digite o seguinte para criar um _commit_: + + ```bash + git commit -m "first commit" + ``` + + Isso confirma todos os seus arquivos, adicionando a mensagem "first commit" (primeiro commit). Para mensagens de commit futuras, você desejará ser mais descritiva em sua descrição para transmitir que tipo de mudança você fez. + +1. **Conecte seu repositório Git local com GitHub**. Um repositório Git é bom em sua máquina, mas em algum momento você vai querer fazer backup de seus arquivos em algum lugar e também convidar outras pessoas para trabalhar com você em seu repositório. Um ótimo lugar para fazer isso é o GitHub. Lembre-se de que já criamos um repositório no GitHub, então a única coisa que precisamos fazer é conectar nosso repositório Git local ao GitHub. O comando `git remote add` fará exatamente isso. Digite o seguinte comando: + + > Antes de digitar o comando, vá para a página do repositório GitHub para encontrar o URL do repositório. Você o usará no comando abaixo. Substitua `repository_name` pelo seu URL do GitHub. + + ```bash + git remote add origin https://github.com/username/repository_name.git + ``` + + Isso cria um _remote_, ou conexão, chamada "origin" apontando para o repositório GitHub que você criou anteriormente. + +1. **Envie arquivos locais para GitHub**. Até agora, você criou uma _conexão_ entre o repositório local e o repositório GitHub. Vamos enviar esses arquivos para o GitHub com o seguinte comando `git push`, assim: + + ```bash + git push -u origin main + ``` + + Isso envia seus commits em seu branch "principal" para o GitHub. + +1. **Para adicionar mais mudanças**. Se quiser continuar fazendo alterações e enviando-as para o GitHub, você só precisará usar os três comandos a seguir: + + ```bash + git add . + git commit -m "digite sua mensagem de commit aqui" + git push + ``` + + > Dica, você também pode adotar um arquivo `.gitignore` para evitar que arquivos que você não deseja rastrear apareçam no GitHub - como aquele arquivo de notas que você armazena na mesma pasta, mas não tem lugar em um repositório público. Você pode encontrar modelos para arquivos `.gitignore` em [modelos .gitignore](https://github.com/github/gitignore). + +#### Mensagens de Commit + +Uma ótima mensagem de Git commit completa a seguinte frase: +Se aplicado, este commit irá + +Para o assunto use o tempo presente imperativo: "mudar" e não "mudou" nem "muda". +Assim como no sujeito, no corpo (opcional) também use o tempo presente imperativo. O corpo deve incluir a motivação para a mudança e contrastar isso com o comportamento anterior. Você está explicando o `porquê`, não o` como`. + +✅ Reserve alguns minutos para navegar no GitHub. Você consegue encontrar uma mensagem de commit realmente ótima? Você pode encontrar uma ruim? Quais informações você acha que são as mais importantes e úteis para transmitir em uma mensagem de commit? + +### Tarefa: Colabore + +O principal motivo para colocar coisas no GitHub foi possibilitar a colaboração com outros desenvolvedores. + +## Trabalhando em projetos com outras pessoas + +Em seu repositório, navegue até `Insights> Community` para ver como seu projeto se compara aos padrões recomendados da comunidade. + + Aqui estão algumas coisas que podem melhorar seu repositório GitHub: + - **Descrição**. Você adicionou uma descrição para o seu projeto? + - **README**. Você adicionou um README? O GitHub fornece orientação para escrever um [README](https://docs.github.com/articles/about-readmes/). + - **Guia de Contribuição**. Seu projeto tem um [guia para contribuição](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/), + - **Código de Conduta**. Um [Código de Conduta](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), + - **Licença**. Talvez o mais importante, a [licença](https://docs.github.com/articles/adding-a-license-to-a-repository/)? + + +Todos esses recursos irão beneficiar a integração de novos membros da equipe. E esses são normalmente o tipo de coisas que os novas pessoas colaboradoras olham antes mesmo de olhar para o seu código, para descobrir se o seu projeto é o lugar certo para elas passarem o tempo. + +✅ Arquivos README, embora levem tempo para serem preparados, são freqüentemente negligenciados por pessoas mantenedores ocupadas. Você pode encontrar um exemplo particularmente descritivo? Nota: existem algumas [ferramentas para ajudar a criar bons READMEs](https://www.makeareadme.com/) que você pode querer experimentar. + +### Tarefa: Dar merge em algum código + +Documentos contribuintes ajudam as pessoas a contribuir para o projeto. Ele explica quais tipos de contribuições você está procurando e como funciona o processo. As pessoas colaboradoras precisarão seguir uma série de etapas para poder contribuir com seu repo no GitHub: + + + 1. **Bifurcando seu repo** Você provavelmente vai querer que as pessoas _fork_ seu projeto. Bifurcação significa criar uma réplica de seu repositório em seu perfil GitHub. +1. **Clone**. A partir daí, elas clonarão o projeto em sua máquina local. +1. **Crie um branch**. Você vai querer pedir a elas que criem um _branch_ para seu trabalho. +1. **Concentre sua mudança em uma área**. Peça aos colaboradores para concentrarem suas contribuições em uma coisa de cada vez - dessa forma, as chances de você se _mergir_ no trabalho delas são maiores. Imagine que elas escrevam uma correção de bug, adicionem um novo recurso e atualizem vários testes - e se você quiser ou só puder implementar 2 de 3, ou 1 de 3 alterações? + +✅ Imagine uma situação em que os branches são particularmente críticos para escrever e distribuir bons códigos. Em quais casos de uso você consegue pensar? + +> Nota, seja a mudança que você deseja ver no mundo e crie ramificações para o seu próprio trabalho também. Todos os commits que você fizer serão feitos no branch em que você está atualmente “check-out”. Use `git status` para ver qual branch é. + +Vamos analisar o fluxo de trabalho de uma pessoa colaboradora. Suponha que ela já _forked_ e _cloned_ o repo para que ela tenha um repositório Git pronto para ser trabalhado, em sua máquina local: + +1. **Crie um brancj**. Use o comando `git branch` para criar um branch que conterá as mudanças que pretendem contribuir: + + ```bash + git branch [branch-name] + ``` + +1. **Mudar para o branch de trabalho**. Mude para o branch especificado e atualize o diretório de trabalho com `git checkout`: + + ```bash + git checkout [branch-name] + ``` + +1. **Trabalhe**. Neste ponto, você deseja adicionar suas alterações. Não se esqueça de contar ao Git sobre isso com os seguintes comandos: + + ```bash + git add . + git commit -m "minhas mudancas" + ``` + + Certifique-se de dar ao seu commit um bom nome, para seu bem e também para os mantenedores do repo no qual você está ajudando. + +1. **Combine seu trabalho com o branch `main`**. Em algum ponto, você concluiu o trabalho e deseja combinar seu trabalho com o do branch `principal`. O branch `main` pode ter mudado enquanto isso, certifique-se de primeiro atualizá-lo para o mais recente com os seguintes comandos: + + ```bash + git checkout main + git pull + ``` + + Neste ponto, você quer ter certeza de que quaisquer _conflitos_, situações em que o Git não pode _combinar_ facilmente as mudanças aconteçam em seu branch de trabalho. Portanto, execute os seguintes comandos: + + ```bash + git checkout [branch_name] + git merge main + ``` + + Isso trará todas as mudanças de `main` em seu branch e esperançosamente você pode simplesmente continuar. Caso contrário, o VS Code dirá onde o Git está _confundido_ e você apenas alterará os arquivos afetados para dizer qual conteúdo é o mais preciso. + +1. **Envie seu trabalho para o GitHub**. Enviar seu trabalho para o GitHub significa duas coisas. Enviando seu branch para o repo e, em seguida, abra um PR, Pull Request. + + ```bash + git push --set-upstream origin [branch-name] + ``` + + O comando acima cria o branch em seu repositório bifurcado. + +1. **Abra um PR**. Em seguida, você deseja abrir um PR. Você faz isso navegando até o repositório bifurcado no GitHub. Você verá uma indicação no GitHub onde pergunta se você deseja criar um novo PR, você clica nele e é levado a uma interface onde pode alterar o título da mensagem de commit, dê-lhe uma descrição mais adequada. Agora, a mantenedora do repo que você bifurcou verá este PR e _dedos cruzados_, eles apreciarão e _mergirão_ seu PR. Agora você é uma pessoa contribuidora, eba :) + +1. **Limpeza**. É considerado uma boa prática _limpar_ após mesclar com sucesso um PR. Você deseja limpar seu branch local e o branch que você enviou para o GitHub. Primeiro, vamos excluí-lo localmente com o seguinte comando: + + ```bash + git branch -d [branch-name] + ``` + + Em seguida, vá para a página GitHub do repositório bifurcado e remova o branch remoto que você acabou de enviar para ele. + +`Pull request` parece um termo bobo porque na verdade você deseja enviar suas alterações para o projeto. Mas a pessoa mantendo o repo ou equipe central precisa considerar suas mudanças antes de fundi-las com o branch "principal" do projeto, então você está realmente solicitando uma decisão de mudança de uma pessoa mantenedora. + +Uma PR é o lugar para comparar e discutir as diferenças introduzidas em um branch com revisões, comentários, testes integrados e muito mais. Uma boa PR segue aproximadamente as mesmas regras de uma mensagem de commit. Você pode adicionar uma referência a um problema no rastreador de problemas, quando seu trabalho, por exemplo, corrige um problema. Isso é feito usando um `#` seguido pelo número do seu problema. Por exemplo `# 97`. + +🤞 Dedos cruzados para que todas as verificações sejam aprovadas e as pessoas proprietárias do projeto deem merge nas suas alterações no projeto🤞 + +Atualize seu branch de trabalho local atual com todos os novos commits do branch remoto correspondente no GitHub: + +`git pull` + +## How to contribute to open source + +First, let's find a repository (or **repo**) on GitHub of interest to you and to which you'd like to contribute a change. You will want to copy its contents to your machine. + +✅ A good way to find 'beginner-friendly' repos is to [search by the tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). + +![Copy a repo locally](images/clone_repo.png) + +There are several ways of copying code. One way is to "clone" the contents of the repository, using HTTPS, SSH, or using the GitHub CLI (Command Line Interface). + +Open your terminal and clone the repository like so: +`git clone https://github.com/ProjectURL` + +To work on the project, switch to the right folder: +`cd ProjectURL` + +You can also open the entire project using [Codespaces](https://github.com/features/codespaces), GitHub's embedded code editor / cloud development environment, or [GitHub Desktop](https://desktop.github.com/). + +Lastly, you can download the code in a zipped folder. + +### A few more interesting things about GitHub + +You can star, watch and/or "fork" any public repository on GitHub. You can find your starred repositories in the top-right drop-down menu. It's like bookmarking, but for code. + +Projects have an issue tracker, mostly on GitHub in the "Issues" tab unless indicated otherwise, where people discuss issues related to the project. And the Pull Requests tab is where people discuss and review changes that are in progress. + +Projects might also have discussion in forums, mailing lists, or chat channels like Slack, Discord or IRC. + +✅ Take a look around your new GitHub repo and try a few things, like editing settings, adding information to your repo, and creating a project (like a Kanban board). There's a lot you can do! + +--- + +## 🚀 Challenge + +Pair with a friend to work on each other's code. Create a project collaboratively, fork code, create branches, and merge changes. + +## Post-Lecture Quiz +[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/4) + +## Review & Self Study + +Read more about [contributing to open source software](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). + +[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/). + +Practice, practice, practice. GitHub has great learning paths available via [lab.github.com](https://lab.github.com/): + +- [First Week on GitHub](https://lab.github.com/githubtraining/first-week-on-github) + +You'll also find more advanced labs. + +## Assignment + +Complete [the First Week on GitHub training lab](https://lab.github.com/githubtraining/first-week-on-github) diff --git a/1-getting-started-lessons/3-accessibility/assignment.md b/1-getting-started-lessons/3-accessibility/assignment.md index 9ae681f0..2c860da0 100644 --- a/1-getting-started-lessons/3-accessibility/assignment.md +++ b/1-getting-started-lessons/3-accessibility/assignment.md @@ -1,11 +1,13 @@ -# Analyze a non-accessible web site +# Analyze an inaccessible site ## Instructions -Identify a web site that you believe is NOT accessible, and create an action plan to improve its accessibility. Your first task would be to identify this site, detail the ways that you think it is inaccessible without using analytic tools, and then put it through a Lighthouse analysis. Take the results of this analysis and outline a detailed plan with a minimum of ten points showing how the site could be improved. +Identify a website that you believe is NOT accessible and create an action plan to improve its accessibility. +Your first task would be to identify this site, detail the ways in which you think it is inaccessible without using analytical tools, and then submit it to a Lighthouse analysis. P +egue the results of this analysis and outline a detailed plan with a minimum of ten points showing how the site could be improved. -## Rubric +## Heading -| Criteria | Exemplary | Adequate | Needs Improvement | -| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------- | -| student report | includes paragraphs on how the site is inadequate, the Lighthouse report captured as a pdf, a list of ten points to improve, with details on how to improve it | missing 20% of the required | missing 50% of the required | \ No newline at end of file +| Criteria | Exemplary | Adequate | Need to Improve | +| -------------- | -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------- | --------------------------- | --------------------------- | +| Student report | includes paragraphs on how inappropriate the site is, the Lighthouse report captured in pdf, a list of ten points to improve, with details on how to improve it | missing 20% ​​of what is required | missing 50% of what is required | \ No newline at end of file diff --git a/1-getting-started-lessons/3-accessibility/translations/README.pt.md b/1-getting-started-lessons/3-accessibility/translations/README.pt.md new file mode 100644 index 00000000..e265a4fa --- /dev/null +++ b/1-getting-started-lessons/3-accessibility/translations/README.pt.md @@ -0,0 +1,228 @@ +# Criando Webpages Acessíveis + +![Tudo sobre acessibilidade](webdev101-a11y.png) +> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) + +## Quiz Pré-Aula +[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/5) + +> O poder da Web está em sua universalidade. O acesso de todos, independentemente de deficiências, é um aspecto essencial. +> +> \- Senhor Timothy Berners-Lee, Diretor da W3C e inventor da World Wide Web + +Esta citação destaca perfeitamente a importância de criar sites acessíveis. Um aplicativo que não pode ser acessado por todos é, por definição, excludente. Como pessoas desenvolvedoras da web, devemos sempre ter a acessibilidade em mente. Tendo esse foco desde o início, você estará no caminho certo para garantir que todos possam acessar as páginas que você cria. Nesta lição, você aprenderá sobre as ferramentas que podem te ajudar a garantir que seus programas da web sejam acessíveis e como construir tendo a acessibilidade em mente. + +## Ferramentas para uso + +### Leitores de Tela + +Uma das ferramentas de acessibilidade mais conhecidas são os leitores de tela. + +[Leitores de Tela](https://pt.wikipedia.org/wiki/Leitor_de_tela) são clientes comumente usados por pessoas com deficiência visual. Como gastamos tempo garantindo que um navegador transmita adequadamente as informações que desejamos compartilhar, também devemos garantir que um leitor de tela faça o mesmo. + +Basicamente, um leitor de tela lê uma página de cima para baixo de forma audível. Se sua página for totalmente de texto, o leitor transmitirá as informações de maneira semelhante a um navegador. Claro, as páginas da web raramente são puramente texto; elas conterão links, gráficos, cores e outros componentes visuais. Deve-se ter cuidado para garantir que essas informações sejam lidas corretamente por um leitor de tela. + +Toda pessoa desenvolvedora da web deve se familiarizar com um leitor de tela. Conforme destacado acima, é o cliente que seus usuários utilizarão. Da mesma forma que você está se familiarizando com o funcionamento de um navegador, deve aprender como funciona um leitor de tela. Felizmente, os leitores de tela são integrados à maioria dos sistemas operacionais. + +Alguns navegadores também possuem ferramentas e extensões integradas que podem ler texto em voz alta ou até mesmo fornecer alguns recursos básicos de navegação, como [essas ferramentas do navegador Edge com foco em acessibilidade](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Essas também são ferramentas de acessibilidade importantes, mas funcionam de maneira muito diferente dos leitores de tela e não devem ser confundidas com ferramentas de teste de leitores de tela. + +✅ Experimente um leitor de tela e um leitor de texto do navegador. No Windows [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) é includso por padrão. [JAWS](https://webaim.org/articles/jaws/) e [NVDA](https://www.nvaccess.org/about-nvda/) também podem ser instalados. No macOS e iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) vem instalado por padrão. + +### Zoom + +Outra ferramenta normalmente usada por pessoas com deficiência visual é o zoom. O tipo mais básico de zoom é o zoom estático, controlado por `Ctrl + sinal de mais (+)` ou diminuindo a resolução da tela. Este tipo de zoom faz com que a página inteira seja redimensionada, portanto, usar [design responsivo](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) é importante para fornecer uma boa experiência do usuário em níveis de zoom aumentados. + +Outro tipo de zoom depende de um software especializado para ampliar uma área da tela e panoramizar, de maneira muito parecida com o uso de uma lente de aumento real. No Windows, [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) vem de fábrica, e o [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) é um software de ampliação de terceiros com mais recursos e uma base de usuários maior. Tanto o macOS quanto o iOS têm um software de ampliação integrado chamado [Zoom](https://www.apple.com/accessibility/mac/vision/). + +### Verificadores de contraste + +As cores nos sites precisam ser cuidadosamente escolhidas para atender às necessidades de usuários daltônicos ou pessoas que têm dificuldade em ver cores de baixo contraste. + +✅ Teste um site que você goste de usar com uma extensão de navegador para verificar o contraste das cores, como por exemplo o [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). O que você aprendeu? + +### Lighthouse + +Na área de ferramenta do desenvolvedor do seu navegador, você encontrará a ferramenta Lighthouse. Esta ferramenta é importante para obter uma primeira visão da acessibilidade (bem como outras análises) de um site. Embora seja importante não depender exclusivamente do Lighthouse, uma pontuação de 100% é muito útil como base. + +✅ Encontre o Lighthouse no painel Dev Tools do seu navegador e execute uma análise em qualquer site. o que você descobriu? + +## Criando Designs para acessibilidade + +Acessibilidade é um tópico relativamente amplo. Para te ajudar, existem vários recursos disponíveis. + +- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers) + +Embora não possamos cobrir todos os aspectos da criação de sites acessíveis, a seguir estão alguns dos princípios básicos que você deseja implementar. Projetar uma página acessível desde o início é **sempre** mais fácil do que voltar a uma página existente para torná-la acessível. + +## Boas práticas de display + +### Paletas de cores seguras + +As pessoas veem o mundo de maneiras diferentes, e isso inclui cores. Ao selecionar um esquema de cores para o seu site, você deve garantir que ele seja acessível a todos. Uma ótima [ferramenta para gerar paletas de cores é Color Safe](http://colorsafe.co/). + +✅ Identifique um site que seja muito problemático no uso de cores. Porque esse site é problemático? + +### Use o HTML correto + +Com CSS e JavaScript é possível fazer com que qualquer elemento se pareça com qualquer tipo de controle. `` poderia ser usado para criar um `