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.
69 lines
5.3 KiB
69 lines
5.3 KiB
# Assignment: Exploring Modern Web Development Tools
|
|
|
|
## Instruções
|
|
|
|
O ecossistema de desenvolvimento web inclui centenas de ferramentas especializadas que ajudam os programadores a construir, testar e manter aplicações de forma eficiente. A sua tarefa é pesquisar e compreender ferramentas que complementem as abordadas nesta lição.
|
|
|
|
**A sua missão:** Selecione **três ferramentas** que **não foram abordadas nesta lição** (evite escolher editores de código, navegadores ou ferramentas de linha de comando já listados). Foque em ferramentas que resolvem problemas específicos nos fluxos de trabalho modernos de desenvolvimento web.
|
|
|
|
**Para cada ferramenta, forneça:**
|
|
|
|
1. **Nome da ferramenta e categoria** (ex.: "Figma - Ferramenta de Design" ou "Jest - Framework de Testes")
|
|
2. **Propósito e benefícios** - Explique em 2-3 frases por que um programador web utilizaria esta ferramenta e que problemas ela resolve
|
|
3. **Link da documentação oficial** - Forneça um link para a documentação oficial ou website da ferramenta (não apenas sites de tutorial)
|
|
4. **Contexto no mundo real** - Mencione uma forma como esta ferramenta se integra num fluxo de trabalho profissional de desenvolvimento
|
|
|
|
## Categorias Sugeridas de Ferramentas
|
|
|
|
Considere explorar ferramentas destas categorias:
|
|
|
|
| Categoria | Exemplos | O que Fazem |
|
|
|----------|----------|--------------|
|
|
| **Ferramentas de Build** | Vite, Webpack, Parcel, esbuild | Empacotar e otimizar código para produção com servidores de desenvolvimento rápidos |
|
|
| **Frameworks de Testes** | Vitest, Jest, Cypress, Playwright | Garantir que o código funciona corretamente e encontrar bugs antes do deploy |
|
|
| **Ferramentas de Design** | Figma, Adobe XD, Penpot | Criar mockups, protótipos e sistemas de design colaborativamente |
|
|
| **Plataformas de Deploy** | Netlify, Vercel, Cloudflare Pages | Hospedar e distribuir websites com CI/CD automático |
|
|
| **Controle de Versão** | GitHub, GitLab, Bitbucket | Gerir alterações de código, colaboração e fluxos de trabalho de projetos |
|
|
| **Frameworks CSS** | Tailwind CSS, Bootstrap, Bulma | Acelerar a estilização com bibliotecas de componentes pré-construídos |
|
|
| **Gestores de Pacotes** | npm, pnpm, Yarn | Instalar e gerir bibliotecas de código e dependências |
|
|
| **Ferramentas de Acessibilidade** | axe-core, Lighthouse, Pa11y | Testar design inclusivo e conformidade com WCAG |
|
|
| **Desenvolvimento de API** | Postman, Insomnia, Thunder Client | Testar e documentar 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 estejam ativamente mantidas e amplamente usadas em 2025
|
|
- **Foque no valor**: Explique os benefícios específicos, não apenas o que a ferramenta faz
|
|
- **Contexto profissional**: Considere ferramentas usadas por equipas de desenvolvimento, não apenas por amadores individuais
|
|
- **Seleção diversificada**: Escolha ferramentas de categorias diferentes para mostrar a abrangência do ecossistema
|
|
- **Relevância moderna**: Priorize ferramentas alinhadas com as tendências atuais e boas práticas de desenvolvimento web
|
|
|
|
## Rubrica
|
|
|
|
| Excelente | Bom | Precisa de Melhoria |
|
|
|-----------|------|--------------------|
|
|
| **Explicou claramente por que os programadores usam cada ferramenta e que problemas ela resolve** | **Explicou o que a ferramenta faz, mas faltou contexto sobre o seu valor** | **Listou ferramentas, mas não explicou o propósito ou benefícios** |
|
|
| **Forneceu links oficiais para documentação de todas as ferramentas** | **Forneceu principalmente links oficiais com 1-2 sites de tutorial** | **Dependeu principalmente de sites de tutorial em vez de documentação oficial** |
|
|
| **Selecionou ferramentas atuais, usadas profissionalmente e de categorias diversas** | **Selecionou boas ferramentas, mas com variedade limitada de categorias** | **Selecionou ferramentas desatualizadas ou só de uma categoria** |
|
|
| **Demonstrou compreensão sobre como as ferramentas se encaixam nos fluxos de trabalho de desenvolvimento** | **Mostrou alguma compreensão do contexto profissional** | **Focou apenas nas funcionalidades da ferramenta sem contexto de fluxo de trabalho** |
|
|
|
|
> 💡 **Dica de Pesquisa**: Procure ferramentas mencionadas em anúncios de trabalho para programadores web, consulte pesquisas populares com desenvolvedores ou explore as dependências usadas por projetos open-source de sucesso no GitHub!
|
|
|
|
---
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
**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 por garantir a precisão, por favor tenha em conta que traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas resultantes da utilização desta tradução.
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |