You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
5.5 KiB
76 lines
5.5 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "17b8ec8e85d99e27dcb3f73842e583be",
|
|
"translation_date": "2025-10-22T23:02:39+00:00",
|
|
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
|
|
"language_code": "br"
|
|
}
|
|
-->
|
|
# Tarefa: Explorando Ferramentas Modernas de Desenvolvimento Web
|
|
|
|
## Instruções
|
|
|
|
O ecossistema de desenvolvimento web inclui centenas de ferramentas especializadas que ajudam os desenvolvedores a criar, testar e manter aplicações de forma eficiente. Sua tarefa é pesquisar e entender ferramentas que complementam as abordadas nesta aula.
|
|
|
|
**Sua Missão:** Escolha **três ferramentas** que **não foram abordadas nesta aula** (evite escolher editores de código, navegadores ou ferramentas de linha de comando já listadas). Foque em ferramentas que resolvam problemas específicos nos fluxos de trabalho modernos de desenvolvimento web.
|
|
|
|
**Para cada ferramenta, forneça:**
|
|
|
|
1. **Nome e categoria da ferramenta** (ex.: "Figma - Ferramenta de Design" ou "Jest - Framework de Testes")
|
|
2. **Propósito e benefícios** - Explique em 2-3 frases por que um desenvolvedor web usaria essa ferramenta e quais problemas ela resolve
|
|
3. **Link para a documentação oficial** - Forneça um link para a documentação oficial ou site da ferramenta (não apenas sites de tutoriais)
|
|
4. **Contexto no mundo real** - Mencione uma forma de como essa ferramenta se encaixa em um fluxo de trabalho profissional
|
|
|
|
## Categorias de Ferramentas Sugeridas
|
|
|
|
Considere explorar ferramentas dessas categorias:
|
|
|
|
| Categoria | Exemplos | O que fazem |
|
|
|-----------|----------|-------------|
|
|
| **Ferramentas de Build** | Vite, Webpack, Parcel, esbuild | Empacotam e otimizam o código para produção com servidores de desenvolvimento rápidos |
|
|
| **Frameworks de Teste** | Vitest, Jest, Cypress, Playwright | Garantem que o código funcione corretamente e detectam bugs antes da implantação |
|
|
| **Ferramentas de Design** | Figma, Adobe XD, Penpot | Criam mockups, protótipos e sistemas de design colaborativos |
|
|
| **Plataformas de Deploy** | Netlify, Vercel, Cloudflare Pages | Hospedam e distribuem sites com CI/CD automático |
|
|
| **Controle de Versão** | GitHub, GitLab, Bitbucket | Gerenciam alterações de código, colaboração e fluxos de trabalho de projetos |
|
|
| **Frameworks de CSS** | Tailwind CSS, Bootstrap, Bulma | Aceleram o estilo com bibliotecas de componentes pré-construídos |
|
|
| **Gerenciadores de Pacotes** | npm, pnpm, Yarn | Instalam e gerenciam bibliotecas de código e dependências |
|
|
| **Ferramentas de Acessibilidade** | axe-core, Lighthouse, Pa11y | Testam design inclusivo e conformidade com WCAG |
|
|
| **Desenvolvimento de APIs** | Postman, Insomnia, Thunder Client | Testam e documentam APIs durante o desenvolvimento |
|
|
|
|
## Requisitos de Formatação
|
|
|
|
**Para cada ferramenta:**
|
|
```
|
|
### [Tool Name] - [Category]
|
|
|
|
**Purpose:** [2-3 sentences explaining why developers use this tool]
|
|
|
|
**Documentation:** [Official website/documentation link]
|
|
|
|
**Workflow Integration:** [1 sentence about how it fits into development process]
|
|
```
|
|
|
|
## Diretrizes de Qualidade
|
|
|
|
- **Escolha ferramentas atuais**: Selecione ferramentas que sejam ativamente mantidas e amplamente utilizadas em 2025
|
|
- **Foco no valor**: Explique os benefícios específicos, não apenas o que a ferramenta faz
|
|
- **Contexto profissional**: Considere ferramentas usadas por equipes de desenvolvimento, não apenas por entusiastas individuais
|
|
- **Seleção diversificada**: Escolha ferramentas de diferentes categorias para mostrar a amplitude do ecossistema
|
|
- **Relevância moderna**: Priorize ferramentas que estejam alinhadas com as tendências e melhores práticas atuais de desenvolvimento web
|
|
|
|
## Rubrica
|
|
|
|
| Excelente | Bom | Precisa Melhorar |
|
|
|-----------|-----|------------------|
|
|
| **Explicou claramente por que os desenvolvedores usam cada ferramenta e quais problemas ela resolve** | **Explicou o que a ferramenta faz, mas perdeu parte do contexto sobre seu valor** | **Listou ferramentas, mas não explicou seu propósito ou benefícios** |
|
|
| **Forneceu links para a documentação oficial de todas as ferramentas** | **Forneceu principalmente links oficiais com 1-2 sites de tutoriais** | **Baseou-se principalmente em sites de tutoriais em vez de documentação oficial** |
|
|
| **Selecionou ferramentas atuais e usadas profissionalmente de categorias diversas** | **Selecionou boas ferramentas, mas com variedade limitada de categorias** | **Selecionou ferramentas desatualizadas ou apenas de uma categoria** |
|
|
| **Demonstrou compreensão de como as ferramentas se encaixam nos fluxos de trabalho de desenvolvimento** | **Mostrou alguma compreensão do contexto profissional** | **Focou apenas nos recursos da ferramenta sem contexto de fluxo de trabalho** |
|
|
|
|
> 💡 **Dica de Pesquisa**: Procure ferramentas mencionadas em vagas de emprego para desenvolvedores web, verifique pesquisas populares de desenvolvedores ou explore as dependências usadas por projetos de código aberto bem-sucedidos no GitHub!
|
|
|
|
---
|
|
|
|
**Aviso Legal**:
|
|
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional feita por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução. |