Jen Looper
4 years ago
committed by
GitHub
commit
524304c655
@ -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)
|
||||
@ -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 |
|
||||
@ -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.
|
||||
|
||||
|
||||
> 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 <file>..." to update what will be committed)
|
||||
(use "git checkout -- <file>..." 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á <sua mensagem de commit aqui>
|
||||
|
||||
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/).
|
||||
|
||||
|
||||
|
||||
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)
|
||||
@ -0,0 +1,228 @@
|
||||
# Criando Webpages Acessíveis
|
||||
|
||||
|
||||
> 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. `<span>` poderia ser usado para criar um `<button>`, e `<b>` poderia se tornar um hiperlink. Embora isso possa ser considerado mais fácil de estilizar, não transmite nada para um leitor de tela. Use o HTML apropriado ao criar controles em uma página. Se você quiser um hiperlink, use `<a>`. Usar o HTML certo para o controle certo é chamado de usar HTML semântico.
|
||||
|
||||
✅ Vá a qualquer site e veja se os designers e desenvolvedores estão usando HTML corretamente. Você consegue encontrar um botão que deveria ser um link? Dica: clique com o botão direito e escolha 'Exibir código-fonte da página' em seu navegador para ver o código subjacente.
|
||||
|
||||
### Crie uma hierarquia descritiva de títulos
|
||||
|
||||
Pessoas usuárias de leitores de tela [dependem muito de títulos](https://webaim.org/projects/screenreadersurvey8/#finding) para encontrar informações e navegar por uma página. Escrever conteúdo de título descritivo e usar tags de título semântico são importantes para criar um site facilmente navegável para usuários de leitores de tela.
|
||||
|
||||
### Use boas dicas visuais
|
||||
|
||||
CSS oferece controle completo sobre a aparência de qualquer elemento em uma página. Você pode criar caixas de texto sem contorno ou hiperlinks sem sublinhado. Infelizmente, remover esses sinais pode tornar mais difícil para alguém que depende deles ser capaz de reconhecer o tipo de controle.
|
||||
|
||||
## A importância do texto do link
|
||||
|
||||
Os hiperlinks são essenciais para navegar na web. Como resultado, garantir que um leitor de tela possa ler os links corretamente permite que todos os usuários naveguem em seu site sem problemas.
|
||||
|
||||
### Leitores de tela e links
|
||||
|
||||
Como seria de se esperar, os leitores de tela lêem o texto do link da mesma forma que leriam qualquer outro texto na página. Com isso em mente, o texto demonstrado abaixo pode parecer perfeitamente aceitável.
|
||||
|
||||
> O pequeno pinguim, também conhecido como pinguim fada, é o menor pinguim do mundo. [Clique aqui](https://en.wikipedia.org/wiki/Little_penguin) para mais informações.
|
||||
|
||||
> O pequeno pinguim, também conhecido como pinguim fada, é o menor pinguim do mundo. Visite https://en.wikipedia.org/wiki/Little_penguin para mais informações.
|
||||
|
||||
> **NOTA** Como você está prestes a ler, **nunca** deve-se criar links que se pareçam com o acima.
|
||||
|
||||
Lembre-se de que os leitores de tela são uma interface diferente de navegadores com um conjunto diferente de recursos.
|
||||
|
||||
### O problema de usar o URL
|
||||
|
||||
Leitores de tela leem o texto. Se um URL aparecer no texto, o leitor de tela lerá o URL. De modo geral, a URL não transmite informações significativas e pode parecer irritante. Você pode ter experimentado isso se o seu telefone já leu de forma audível uma mensagem de texto com um URL.
|
||||
|
||||
### O problema com "clique aqui"
|
||||
|
||||
Os leitores de tela também têm a capacidade de ler apenas os hiperlinks em uma página, da mesma forma que uma pessoa com visão examinaria uma página em busca de links. Se o texto do link for sempre "clique aqui", tudo o que o usuário ouvirá é "clique aqui, clique aqui, clique aqui, clique aqui, clique aqui, ..." Todos os links agora são indistinguíveis uns dos outros.
|
||||
|
||||
### Bom texto de link
|
||||
|
||||
Um bom texto de link descreve resumidamente o que está do outro lado do link. No exemplo acima, falando sobre pequenos pinguins, o link é para a página da Wikipedia sobre a espécie. A frase *pequenos pinguins* seria um texto de link perfeito, pois deixa claro o que alguém encontrará se clicar no link - pequenos pinguins.
|
||||
|
||||
> O [pequeno pinguim](https://en.wikipedia.org/wiki/Little_penguin), às vezes conhecido como pinguim fada, é o menor pinguim do mundo.
|
||||
|
||||
✅ Navegue na web por alguns minutos para encontrar páginas que usam estratégias de links obscuras. Compare-os com outros sites com links melhores. O que voce aprende?
|
||||
|
||||
#### Notas sobre Mecanismos de Pesquisa
|
||||
|
||||
Como um bônus adicional por garantir que seu site seja acessível a todes, você também ajudará os mecanismos de pesquisa a navegar em seu site. Os mecanismos de pesquisa usam o texto do link para aprender quais são os tópicos das páginas. Portanto, usar um bom texto de link ajuda a todos!
|
||||
|
||||
### ARIA
|
||||
|
||||
Imagine a seguinte página:
|
||||
|
||||
| Produto | Descrição | Pedido |
|
||||
| ------------ | ------------------ | ------------ |
|
||||
| Widget | [Descrição]('#') | [Pedido]('#') |
|
||||
| Super widget | [Descrição]('#') | [Pedido]('#') |
|
||||
|
||||
Neste exemplo, duplicar o texto de descrição e ordem faz sentido para alguém que usa um navegador. No entanto, alguém usando um leitor de tela ouviria apenas as palavras *descrição* e *pedido* repetidas sem contexto.
|
||||
|
||||
Para oferecer suporte a esses tipos de cenários, o HTML oferece suporte a um conjunto de atributos conhecido como [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Esses atributos permitem fornecer informações adicionais aos leitores de tela.
|
||||
|
||||
> **NOTA**: Como muitos aspectos do HTML, o suporte ao navegador e ao leitor de tela pode variar. No entanto, a maioria dos clientes principais oferece suporte a atributos ARIA.
|
||||
|
||||
Você pode usar `aria-label` para descrever o link quando o formato da página não permitir. A descrição do widget pode ser definida como
|
||||
|
||||
``` html
|
||||
<a href="#" aria-label="descrição do widget">descrição</a>
|
||||
```
|
||||
|
||||
✅ Em geral, o uso da marcação semântica conforme descrito acima substitui o uso de ARIA, mas às vezes não há equivalente semântico para vários widgets HTML. Um bom exemplo é uma Tree. Não há HTML equivalente para uma Tree, então você identifica o `<div>` genérica para este elemento com um papel apropriado e valores de aria. A [documentação MDN sobre ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) contém mais informações úteis.
|
||||
|
||||
```html
|
||||
<h2 id="tree-label">Visualizador de arquivos</h2>
|
||||
<div role="tree" aria-labelledby="tree-label">
|
||||
<div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Imagens
|
||||
|
||||
Nem é preciso dizer que os leitores de tela não conseguem ler automaticamente o que há em uma imagem. Garantir que as imagens sejam acessíveis não dá muito trabalho - é disso que se trata o atributo `alt`. Todas as imagens significativas devem ter um `alt` para descrever o que são.
|
||||
Imagens que são puramente decorativas devem ter seu atributo `alt` definido como uma string vazia:` alt = "" `. Isso evita que os leitores de tela anunciem desnecessariamente a imagem decorativa.
|
||||
|
||||
✅ Como você pode esperar, os mecanismos de pesquisa também não conseguem entender o que está em uma imagem. Eles também usam texto alternativo. Portanto, mais uma vez, garantir que sua página esteja acessível fornece bônus adicionais!
|
||||
|
||||
## O teclado
|
||||
|
||||
Alguns usuários não conseguem usar um mouse ou trackpad, em vez disso, contam com as interações do teclado para passar de um elemento para o próximo. É importante que o seu site apresente o seu conteúdo em ordem lógica para que um usuário do teclado possa acessar cada elemento interativo à medida que avança em um documento. Se você construir suas páginas da web com marcação semântica e usar CSS para estilizar seu layout visual, seu site deve ser navegável pelo teclado, mas é importante testar esse aspecto manualmente. Aprenda mais sobre [ v](https://webaim.org/techniques/keyboard/).
|
||||
|
||||
✅ Vá a qualquer site da web e tente navegar por ele usando apenas o teclado. O que funciona, o que não funciona? Porque?
|
||||
|
||||
## Resumo
|
||||
|
||||
Uma web acessível a alguns não é uma verdadeira 'rede mundial'. A melhor maneira de garantir que os sites que você cria sejam acessíveis é incorporar as práticas recomendadas de acessibilidade desde o início. Embora haja etapas extras envolvidas, incorporar essas habilidades em seu fluxo de trabalho agora significará que todas as páginas que você criar estarão acessíveis.
|
||||
---
|
||||
|
||||
## 🚀 Desafio
|
||||
|
||||
Pegue este HTML e reescreva-o para ser o mais acessível possível, de acordo com as estratégias que você aprendeu.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
Examplo
|
||||
</title>
|
||||
<link href='../assets/style.css' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body>
|
||||
<div class="site-header">
|
||||
<p class="site-title">Tartaruga Ipsum</p>
|
||||
<p class="site-subtitle">O Fan Club Premier Mundial de tartarugas</p>
|
||||
</div>
|
||||
<div class="main-nav">
|
||||
<p class="nav-header">Recursos</p>
|
||||
<div class="nav-list">
|
||||
<p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"Eu gosto de tartarugas"</a></p>
|
||||
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Informações básicas sobre tartarugas</a></p>
|
||||
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Tartarugas Chocolate</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-content">
|
||||
<div>
|
||||
<p class="page-title">Welcome to Turtle Ipsum.
|
||||
<a href="">Click here</a> to learn more.
|
||||
</p>
|
||||
<p class="article-text">
|
||||
Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-section">
|
||||
<span class="button">Sign up for turtle news</span>
|
||||
</div><div class="footer-section">
|
||||
<p class="nav-header footer-title">
|
||||
Internal Pages
|
||||
</p>
|
||||
<div class="nav-list">
|
||||
<p class="nav-item nav-item-bull"><a href="../">Index</a></p>
|
||||
<p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="footer-copyright">© 2016 Instrument</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Quiz Pós-Aula
|
||||
[Quiz Pós-Aula](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/6)
|
||||
|
||||
## Revisão e autoestudo
|
||||
|
||||
Muitos governos têm leis relacionadas aos requisitos de acessibilidade. Leia sobre as leis de acessibilidade do seu país. O que é coberto e o que não é? Um exemplo é [esse site de govermo](https://accessibility.blog.gov.uk/).
|
||||
|
||||
## Lição de casa
|
||||
|
||||
[Analise um site não acessível](assignment.pt.md)
|
||||
|
||||
Créditos: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) por Instrument
|
||||
@ -0,0 +1,13 @@
|
||||
# Analise um site não acessível
|
||||
|
||||
## Instruções
|
||||
|
||||
Identifique um site que você acredita que NÃO está acessível e crie um plano de ação para melhorar sua acessibilidade.
|
||||
Sua primeira tarefa seria identificar este site, detalhar as maneiras pelas quais você acha que ele é inacessível sem o uso de ferramentas analíticas e, em seguida, submetê-lo a uma análise Lighthouse. P
|
||||
egue os resultados desta análise e esboce um plano detalhado com um mínimo de dez pontos mostrando como o site poderia ser melhorado.
|
||||
|
||||
## Rubrica
|
||||
|
||||
| Critérios | Exemplar | Adequado | Precisa Melhorar |
|
||||
| -------------- | -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------- | --------------------------- | --------------------------- |
|
||||
| relatório | inclui parágrafos sobre como o site é inadequado, o relatório Lighthouse capturado em pdf, uma lista de dez pontos a melhorar, com detalhes sobre como melhorá-lo | faltando 20% do exigido | faltando 50% do exigido |
|
||||
@ -0,0 +1,17 @@
|
||||
# Getting Started with Web Development
|
||||
|
||||
In this section of the curriculum, you will be introduced to non project-based concepts important to becoming a professional developer.
|
||||
|
||||
### Topics
|
||||
|
||||
1. [Introduction to Programming Languages and Tools of the Trade](1-intro-to-programming-languages/README.md)
|
||||
2. [Basics of GitHub](2-github-basics/README.md)
|
||||
3. [Basics of Accessibility](3-accessibility/README.md)
|
||||
|
||||
### Créditos
|
||||
|
||||
Básico em Acessibilidade foi escrito com ♥️ por [Christopher Harrison](https://twitter.com/geektrainer)
|
||||
|
||||
Introdução ao GitHub foi escrito com ♥️ por [Floor Drees](https://twitter.com/floordrees)
|
||||
|
||||
Introdução a Linguagens de Programação e Ferramentas foi escrito com ♥️ por [Jasmine Greenaway](https://twitter.com/paladique)
|
||||
@ -0,0 +1,195 @@
|
||||
# Noções básicas de JavaScript: Tipos de dados
|
||||
|
||||
|
||||
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Quiz Pré-Aula
|
||||
[Quiz Pré-Aula](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/7)
|
||||
|
||||
Esta lição cobre o básico do JavaScript, a linguagem que fornece interatividade na web.
|
||||
|
||||
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Tipos de dados em JavaScript")
|
||||
|
||||
|
||||
Vamos começar com variáveis e os tipos de dados que as preenchem!
|
||||
|
||||
## Variáveis
|
||||
|
||||
Variáveis armazenam valores que podem ser usados e alterados em todo o código.
|
||||
|
||||
A criação e **declaração** de uma variável tem a seguinte sintaxe **[palavra-chave] [nome]**. É composto de duas partes:
|
||||
|
||||
- **Palavra-chave**. Palavras-chave podem ser `let` ou` var`.
|
||||
|
||||
> Nota, a palavra-chave `let` foi introduzida no ES6 e dá a sua variável o chamado _block scope_ ou escopos do bloco. É recomendado que você use `let` sobre `var`. Abordaremos os escopos do bloco mais detalhadamente em partes futuras.
|
||||
- **O nome da variável**, este é um nome que você escolhe.
|
||||
|
||||
### Tarefa - trabalhando com variáveis
|
||||
|
||||
1. **Declare uma variável**. Vamos declarar uma variável usando a palavra-chave `let`:
|
||||
|
||||
```javascript
|
||||
let minhaVariável;
|
||||
```
|
||||
|
||||
`minhaVariável` agora foi declarada usando a palavra-chave`let`. Atualmente não tem um valor.
|
||||
|
||||
1. **Atribua um valor**. Armazene um valor em uma variável com o operador `=`, seguido pelo valor esperado.
|
||||
```javascript
|
||||
minhaVariável = 123;
|
||||
```
|
||||
|
||||
> Nota: o uso de `=` nesta lição significa que fazemos uso de um "operador de atribuição", usado para definir um valor para uma variável. Não denota igualdade.
|
||||
|
||||
`minhaVariável` agora foi *inicializada* com o valor 123.
|
||||
|
||||
1. **Refatorar**. Substitua seu código pela seguinte instrução.
|
||||
|
||||
```javascript
|
||||
let minhaVariável = 123;
|
||||
```
|
||||
|
||||
O acima é chamado de _inicialização explícita_ quando uma variável é declarada e recebe um valor ao mesmo tempo.
|
||||
|
||||
1. **Altere o valor da variável**. Altere o valor da variável da seguinte maneira:
|
||||
|
||||
```javascript
|
||||
minhaVariável = 321;
|
||||
```
|
||||
|
||||
Uma vez que uma variável é declarada, você pode alterar seu valor em qualquer ponto do seu código com o operador `=` e o novo valor.
|
||||
|
||||
✅ Tente isso! Você pode escrever JavaScript diretamente no seu navegador. Abra uma janela do navegador e navegue até Ferramentas do desenvolvedor. No console, você encontrará um prompt; digite `let myVariable = 123`, pressione return e, em seguida, digite` myVariable`. O que acontece? Observe que você aprenderá mais sobre esses conceitos nas lições subsequentes.
|
||||
|
||||
## Constantes
|
||||
|
||||
A declaração e a inicialização de uma constante seguem os mesmos conceitos de uma variável, com exceção da palavra-chave `const`. Normalmente, as constantes são declaradas com todas as letras maiúsculas.
|
||||
|
||||
```javascript
|
||||
const MY_VARIABLE = 123;
|
||||
```
|
||||
|
||||
As constantes são semelhantes às variáveis, com duas exceções:
|
||||
|
||||
- **Deve ter um valor**. As constantes devem ser inicializadas ou ocorrerá um erro ao executar o código.
|
||||
- **A referência não pode ser alterada**. A referência de uma constante não pode ser alterada depois de inicializada, ou ocorrerá um erro ao executar o código. Vejamos dois exemplos:
|
||||
- **Valor simples**. O seguinte NÃO é permitido:
|
||||
|
||||
```javascript
|
||||
const PI = 3;
|
||||
PI = 4; // NÃO é permitido
|
||||
```
|
||||
|
||||
- **A referência do objeto está protegida**. O seguinte NÃO é permitido.
|
||||
|
||||
```javascript
|
||||
const obj = { a: 3 };
|
||||
obj = { b: 5 } // NÃO é permitido
|
||||
```
|
||||
|
||||
- **O valor do objeto não está protegido**. O seguinte é permitido:
|
||||
|
||||
```javascript
|
||||
const obj = { a: 3 };
|
||||
obj.a = 5; // permitido
|
||||
```
|
||||
|
||||
Acima você está alterando o valor do objeto, mas não a referência em si, o que o torna permitido.
|
||||
|
||||
> Nota, um `const` significa que a referência está protegida contra reatribuição. O valor não é _imutável_ e pode mudar, especialmente se for uma construção complexa como um objeto.
|
||||
|
||||
## Tipos de Dados
|
||||
|
||||
As variáveis podem armazenar muitos tipos diferentes de valores, como números e texto. Esses vários tipos de valores são conhecidos como **tipo de dados**. Os tipos de dados são uma parte importante do desenvolvimento de software porque ajudam as pessoas desenvolvedoras a tomar decisões sobre como o código deve ser escrito e como o software deve ser executado. Além disso, alguns tipos de dados têm recursos exclusivos que ajudam a transformar ou extrair informações adicionais em um valor.
|
||||
|
||||
✅ Os tipos de dados também são chamados de primitivos de dados JavaScript, pois são os tipos de dados de nível mais baixo fornecidos pela linguagem. Existem 6 tipos de dados primitivos: string, number, bigint, boolean, undefined, e symbol. Reserve um minuto para visualizar o que cada uma dessas primitivas pode representar. O que é uma `zebra`? Que tal `0`? `true`?
|
||||
|
||||
### Números (Numbers)
|
||||
|
||||
Na seção anterior, o valor de `myVariable` era um tipo de dado numérico.
|
||||
|
||||
`let myVariable = 123;`
|
||||
|
||||
As variáveis podem armazenar todos os tipos de números, incluindo decimais ou números negativos. Os números também podem ser usados com operadores aritméticos, abordados na [próxima seção](#operadores).
|
||||
|
||||
### Operadores aritméticos
|
||||
|
||||
Existem vários tipos de operadores para usar ao executar funções aritméticas, e alguns estão listados aqui:
|
||||
|
||||
| Símbolo | Descrição | Examplo |
|
||||
| ------ | ------------------------------------------------------------------------ | -------------------------------- |
|
||||
| `+` | **Adição**: Calcula a soma de dois números | `1 + 2 //a resposta esperada é 3` |
|
||||
| `-` | **Subitração**: Calcula a diferença de dois números | `1 - 2 //a resposta esperada é -1` |
|
||||
| `*` | **Multiplicação**: Calcula o produto de dois números | `1 * 2 //a resposta esperada é 2` |
|
||||
| `/` | **Divisão**: Calcula o quociente de dois números | `1 / 2 //a resposta esperada é 0.5` |
|
||||
| `%` | **Restante**: Calcula o resto da divisão de dois números | `1 % 2 //a resposta esperada é 1` |
|
||||
|
||||
✅ Tente isso! Tente uma operação aritmética no console do seu navegador. Os resultados surpreendem você?
|
||||
|
||||
### Strings
|
||||
|
||||
Strings são conjuntos de caracteres que residem entre aspas simples ou duplas.
|
||||
|
||||
- `'Isso é uma string'`
|
||||
- `"Isso também é uma string"`
|
||||
- `let myString = 'Este é um valor de string armazenado em uma variável';`
|
||||
|
||||
Lembre-se de usar aspas ao escrever uma string, caso contrário, o JavaScript assumirá que é um nome de variável.
|
||||
|
||||
### Formatando Strings
|
||||
|
||||
Strings são textuais e requerem formatação de vez em quando.
|
||||
|
||||
Para **concatenar** duas ou mais strings, ou juntá-las, use o operador `+`.
|
||||
|
||||
```javascript
|
||||
let myString1 = "Olá";
|
||||
let myString2 = "Mundo";
|
||||
|
||||
myString1 + myString2 + "!"; //OláMundo!
|
||||
myString1 + " " + myString2 + "!"; //Olá Mundo!
|
||||
myString1 + ", " + myString2 + "!"; //Olá, Mundo!
|
||||
|
||||
```
|
||||
|
||||
✅ Por que `1 + 1 = 2` em JavaScript, mas` '1' + '1' = 11? `Pense nisso. Que tal `'1' + 1`?
|
||||
|
||||
**Template literals (Literais de modelo)** são outra maneira de formatar strings, exceto em vez de aspas, o crase é usado. Qualquer coisa que não seja texto simples deve ser colocado dentro dos espaços reservados `$ {}`. Isso inclui todas as variáveis que podem ser strings.
|
||||
|
||||
```javascript
|
||||
let myString1 = "Olá";
|
||||
let myString2 = "Mundo";
|
||||
|
||||
`${myString1} ${myString2}!` //Olá Mundo!
|
||||
`${myString1}, ${myString2}!` //Olá, Mundo!
|
||||
```
|
||||
|
||||
Você pode atingir seus objetivos de formatação com qualquer um dos métodos, mas os Template literals respeitarão todos os espaços e quebras de linha.
|
||||
|
||||
✅ Quando você usaria um literal de modelo em vez de uma string simples?
|
||||
|
||||
### Booleanos
|
||||
|
||||
Os booleanos podem ter apenas dois valores: `true` ou` false`. Os booleanos podem ajudar a tomar decisões sobre quais linhas de código devem ser executadas quando certas condições são atendidas. Em muitos casos, [operadores](#operadores) auxiliam na configuração do valor de um booleano e você freqüentemente notará e escreverá variáveis sendo inicializadas ou seus valores sendo atualizados com um operador.
|
||||
|
||||
- `let myTrueBool = true`
|
||||
- `let myFalseBool = false`
|
||||
|
||||
✅ Uma variável pode ser considerada 'true' se for avaliada como um booleano `true`. Curiosamente, em JavaScript, [todos os valores são verdadeiros, a menos que definidos como falsos](https://developer.mozilla.org/docs/Glossary/Truthy).
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Desafio
|
||||
|
||||
JavaScript é notório por suas maneiras surpreendentes de lidar com tipos de dados ocasionalmente. Pesquise sobre essas 'pegadinhas'. Por exemplo: a diferenciação de maiúsculas e minúsculas pode afetar! Tente isto em seu console: `let age = 1; deixe Idade = 2; age == Age` (resolve `false` - por quê?). Que outras dicas você pode encontrar?
|
||||
|
||||
## Quiz Pós-Aula
|
||||
[Quiz Pós-Aula](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/8)
|
||||
|
||||
## Revisão e autoestudo
|
||||
|
||||
Dê uma olhada [nessa lista de exercícios de JavaScript](https://css-tricks.com/snippets/javascript/) e tente um. O que você aprendeu?
|
||||
|
||||
## Tarefa
|
||||
|
||||
[Prática de Tipos de Dados](assignment.pt.md)
|
||||
@ -0,0 +1,11 @@
|
||||
# Prática de Tipos de Dados
|
||||
|
||||
## Instruções
|
||||
|
||||
Imagine que você está construindo um carrinho de compras. Escreva alguma documentação sobre os tipos de dados de que você precisa para completar sua experiência de compra. Como você fez suas escolhas?
|
||||
|
||||
## Rubrica
|
||||
|
||||
Critérios | Exemplar | Adequado | Precisa de melhorias
|
||||
--- | --- | --- | - |
|
||||
|| Os seis tipos de dados são listados e explorados em detalhes, documentando seu uso | Quatro tipos de dados são explorados | Dois tipos de dados são explorados |
|
||||
@ -0,0 +1,194 @@
|
||||
# Noções básicas de JavaScript: métodos e funções
|
||||
|
||||
|
||||
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Quiz Pré-Aula
|
||||
[Quiz Pré-Aula](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/9)
|
||||
|
||||
Quando pensamos em escrever código, sempre queremos garantir que nosso código seja legível. Embora isso pareça contra-intuitivo, o código é lido muito mais vezes do que escrito. Uma ferramenta central na caixa de ferramentas de uma pessoa desenvolvedora para garantir código sustentável é a **função**.
|
||||
|
||||
[](https://youtube.com/watch?v=XgKsD6Zwvlc "Métodos e Funções")
|
||||
|
||||
> Clique na imagem acima para ver um vídeo sobre métodos e funções.
|
||||
|
||||
|
||||
## Funções
|
||||
|
||||
Em sua essência, uma função é um bloco de código que podemos executar sob demanda. Isso é perfeito para cenários em que precisamos realizar a mesma tarefa várias vezes; em vez de duplicar a lógica em vários locais (o que tornaria difícil atualizá-la quando chegar a hora), podemos centralizá-la em um local e chamá-la sempre que precisarmos que a operação seja realizada - você pode até chamar funções de outras funções !.
|
||||
|
||||
Também importante é a capacidade de nomear uma função. Embora isso possa parecer trivial, o nome fornece uma maneira rápida de documentar uma seção de código. Você pode pensar nisso como um rótulo em um botão. Se eu clicar em um botão que diz "Cancelar cronômetro", sei que o relógio vai parar de funcionar.
|
||||
|
||||
## Criar e chamar uma Função
|
||||
|
||||
A sintaxe de uma função é semelhante a esta:
|
||||
|
||||
```javascript
|
||||
function nameOfFunction() { // definição de função
|
||||
// definição de função/corpo
|
||||
}
|
||||
```
|
||||
|
||||
Se eu quisesse criar uma função para exibir uma saudação, poderia ser assim:
|
||||
|
||||
```javascript
|
||||
function displayGreeting() {
|
||||
console.log('Olá, mundo!');
|
||||
}
|
||||
```
|
||||
|
||||
Sempre que quisermos chamar (ou invocar) nossa função, usamos o nome da função seguido por `()`. É importante notar o fato de que nossa função pode ser definida antes ou depois de decidirmos chamá-la; o compilador JavaScript encontrará ela para você.
|
||||
|
||||
```javascript
|
||||
// calling our function
|
||||
displayGreeting();
|
||||
```
|
||||
|
||||
> **NOTA:** Existe um tipo especial de função conhecido como **método**, que você já está usando! Na verdade, vimos isso em nossa demonstração acima, quando usamos `console.log`. O que torna um método diferente de uma função é que um método é anexado a um objeto (`console` em nosso exemplo), enquanto uma função está flutuando livremente. Você ouvirá muitas pessoas desenvolvedoras usarem esses termos alternadamente.
|
||||
|
||||
### Práticas recomendadas de função
|
||||
|
||||
Existem várias práticas recomendadas para se ter em mente ao criar funções
|
||||
|
||||
- Como sempre, use nomes descritivos para sabermos o que a função fará
|
||||
- Use **camelCasing** para combinar palavras
|
||||
- Mantenha suas funções focadas em uma tarefa específica
|
||||
|
||||
## Passando informações para uma função
|
||||
|
||||
Para tornar uma função mais reutilizável, você frequentemente desejará passar informações para ela. Se considerarmos nosso exemplo `displayGreeting` acima, ele exibirá apenas **Olá, mundo!**. Não é a função mais útil que se poderia criar. Se quisermos torná-lo um pouco mais flexível, como permitir que alguém especifique o nome da pessoa a ser cumprimentada, podemos adicionar um **parâmetro**. Um parâmetro (às vezes também chamado de **argumento**), é uma informação adicional enviada para uma função.
|
||||
|
||||
Os parâmetros são listados na parte de definição entre parênteses e são separados por vírgulas, assim:
|
||||
|
||||
```javascript
|
||||
function name(param, param2, param3) {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
Podemos atualizar nosso `displayGreeting` para aceitar um nome e exibi-lo.
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name) {
|
||||
const message = `Hello, ${name}!`;
|
||||
console.log(message);
|
||||
}
|
||||
```
|
||||
|
||||
Quando queremos chamar nossa função e passar o parâmetro, especificamos entre parênteses.
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// displays "Hello, Christopher!" when run
|
||||
```
|
||||
|
||||
## Valores padrão
|
||||
|
||||
Podemos tornar nossa função ainda mais flexível adicionando mais parâmetros. Mas e se não quisermos que todos os valores sejam especificados? Seguindo nosso exemplo de saudação, poderíamos deixar o nome conforme necessário (precisamos saber quem estamos saudando), mas queremos permitir que a própria saudação seja personalizada conforme desejado. Se alguém não quiser personalizá-lo, fornecemos um valor padrão. Para fornecer um valor padrão a um parâmetro, nós o definimos da mesma forma que definimos um valor para uma variável - `parameterName = 'defaultValue'`. Para ver um exemplo completo:
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name, salutation='Hello') {
|
||||
console.log(`${salutation}, ${name}`);
|
||||
}
|
||||
```
|
||||
|
||||
Quando chamamos a função, podemos decidir se queremos definir um valor para `salutation`.
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// displays "Hello, Christopher"
|
||||
|
||||
displayGreeting('Christopher', 'Hi');
|
||||
// displays "Hi, Christopher"
|
||||
```
|
||||
|
||||
## Valores de retorno
|
||||
|
||||
Até agora, a função que construímos sempre será enviada para o [console](https://developer.mozilla.org/docs/Web/API/console). Às vezes, isso pode ser exatamente o que estamos procurando, especialmente quando criamos funções que chamarão outros serviços. Mas e se eu quiser criar uma função auxiliar para realizar um cálculo e fornecer o valor de volta para que eu possa usá-lo em outro lugar?
|
||||
|
||||
Podemos fazer isso usando um **valor de retorno**. Um valor de retorno é retornado pela função e pode ser armazenado em uma variável da mesma forma que podemos armazenar um valor literal, como uma string ou número.
|
||||
|
||||
Se uma função retornar algo, então a palavra-chave `return` é usada. A palavra-chave `return` espera um valor ou referência do que está sendo retornado assim:
|
||||
|
||||
```javascript
|
||||
return myVariable;
|
||||
```
|
||||
|
||||
Poderíamos criar uma função para criar uma mensagem de saudação e retornar o mensagem para a pessoa usuária.
|
||||
|
||||
```javascript
|
||||
function createGreetingMessage(name) {
|
||||
const message = `Hello, ${name}`;
|
||||
return message;
|
||||
}
|
||||
```
|
||||
|
||||
Ao chamar esta função, armazenaremos o valor em uma variável. É quase da mesma forma que definiríamos uma variável com um valor estático (como `const name = 'Christopher'`).
|
||||
|
||||
```javascript
|
||||
const greetingMessage = createGreetingMessage('Christopher');
|
||||
```
|
||||
|
||||
## Funções como parâmetros para funções
|
||||
|
||||
Conforme você progride em sua carreira de programação, encontrará funções que aceitam funções como parâmetros. Esse truque interessante é normalmente usado quando não sabemos quando algo vai ocorrer ou se completar, mas sabemos que precisamos realizar uma operação em resposta.
|
||||
|
||||
Como exemplo, considere [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), que inicia um cronômetro e executará o código quando ele for concluído. Precisamos dizer a ele qual código queremos executar. Parece um trabalho perfeito para uma função!
|
||||
|
||||
Se você executar o código abaixo, após 3 segundos verá a mensagem **3 segundos decorreram**.
|
||||
|
||||
```javascript
|
||||
function displayDone() {
|
||||
console.log('3 seconds has elapsed');
|
||||
}
|
||||
// timer value is in milliseconds
|
||||
setTimeout(displayDone, 3000);
|
||||
```
|
||||
|
||||
### Funções Anônimas
|
||||
|
||||
Vamos dar outra olhada no que construímos. Estamos criando uma função com um nome que será usado uma vez. Conforme nossa aplicação fica mais complexa, podemos nos ver criando uma série de funções que serão chamadas apenas uma vez. Isso não é o ideal. Acontece que nem sempre precisamos fornecer um nome!
|
||||
|
||||
Quando passamos uma função como parâmetro, podemos pular a criação de uma com antecedência e, em vez disso, construir uma como parte do parâmetro. Usamos a mesma palavra-chave `function`, mas em vez disso, a construímos como um parâmetro.
|
||||
|
||||
Vamos reescrever o código acima para usar uma função anônima:
|
||||
|
||||
```javascript
|
||||
setTimeout(function() {
|
||||
console.log('3 seconds has elapsed');
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
Se você executar nosso novo código, notará que obtemos os mesmos resultados. Criamos uma função, mas não precisamos dar um nome a ela!
|
||||
|
||||
### Arrow Functions
|
||||
|
||||
Um atalho comum em muitas linguagens de programação (incluindo JavaScript) é a capacidade de usar o que é chamado de função **arrow** ou **arrow function**. Ela usa um indicador especial de `=>`, que se parece com uma flecha (arrow, em inglês) - daí o nome! Usando `=>`, podemos pular a palavra-chave `function`.
|
||||
|
||||
Vamos reescrever nosso código mais uma vez para usar arrow function:
|
||||
|
||||
```javascript
|
||||
setTimeout(() => {
|
||||
console.log('3 seconds has elapsed');
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
### Quando usar cada estratégia
|
||||
|
||||
Agora você viu que temos três maneiras de passar uma função como parâmetro e você pode estar se perguntando quando usar cada uma delas. Se você sabe que usará a função mais de uma vez, crie-a normalmente. Se você for usá-lo apenas para um local, geralmente é melhor usar uma função anônima. Sobre usar Arrow Functions ou a sintaxe mais tradicional de `function` é com você, mas você notará que a maioria das pessoas desenvolvedoras modernas prefere` => `.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Desafio
|
||||
|
||||
Você pode articular em uma frase a diferença entre funções e métodos? Tente!
|
||||
|
||||
## Quiz Pós-Aula
|
||||
[Quiz Pós-Aula](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/10)
|
||||
|
||||
## Revisão e autoestudo
|
||||
|
||||
Vale a pena [ler um pouco mais sobre arrow functions](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), como elas são cada vez mais usados em bases de código. Pratique escrever uma função e, em seguida, reescrevê-la com esta sintaxe.
|
||||
## Tarefa
|
||||
|
||||
[Diversão com funções](assignment.pt.md)
|
||||
@ -0,0 +1,12 @@
|
||||
# Diversão com funções
|
||||
|
||||
## Instruções
|
||||
|
||||
Crie funções diferentes, ambas funções que retornam algo e funções que não retornam nada.
|
||||
Veja se você pode criar uma função que possui uma combinação de parâmetros e parâmetros com valores padrão.
|
||||
|
||||
## Rubrica
|
||||
|
||||
| Critério | Exemplar | Adequada | Precisa de melhorias |
|
||||
| -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- |
|
||||
| | A solução é oferecida com duas ou mais funções de bom desempenho com diversos parâmetros | A solução é oferecida com uma função e alguns parâmetros | A solução tem bugs |
|
||||
Loading…
Reference in new issue