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.
130 lines
6.8 KiB
130 lines
6.8 KiB
# Trabalho de Investigação sobre Elementos DOM
|
|
|
|
## Visão Geral
|
|
|
|
Agora que já experimentaste o poder da manipulação do DOM na prática, é hora de explorar o mundo mais amplo das interfaces DOM. Este trabalho vai aprofundar a tua compreensão de como diferentes tecnologias web interagem com o DOM para além da simples arrastação de elementos.
|
|
|
|
## Objetivos de Aprendizagem
|
|
|
|
Ao completar este trabalho, vais:
|
|
- **Investigar** e compreender em profundidade uma interface DOM específica
|
|
- **Analisar** implementações reais de manipulação DOM
|
|
- **Relacionar** conceitos teóricos com aplicações práticas
|
|
- **Desenvolver** competências em documentação técnica e análise
|
|
|
|
## Instruções
|
|
|
|
### Passo 1: Escolhe a Tua Interface DOM
|
|
|
|
Visita a lista abrangente da MDN sobre [interfaces DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) e seleciona uma interface que te interesse. Considera escolher entre estas categorias para variedade:
|
|
|
|
**Opções para Iniciantes:**
|
|
- `Element.classList` - Gerir classes CSS dinamicamente
|
|
- `Document.querySelector()` - Seleção avançada de elementos
|
|
- `Element.addEventListener()` - Manipulação de eventos para além dos eventos pointer
|
|
- `Window.localStorage` - Armazenamento de dados no lado do cliente
|
|
|
|
**Desafios Intermédios:**
|
|
- `Intersection Observer API` - Detetar visibilidade de elementos
|
|
- `MutationObserver` - Monitorizar mudanças no DOM
|
|
- `Drag and Drop API` - Alternativa à nossa abordagem baseada em ponteiros
|
|
- `Geolocation API` - Acesso à localização do utilizador
|
|
|
|
**Exploração Avançada:**
|
|
- `Web Components` - Elementos personalizados e shadow DOM
|
|
- `Canvas API` - Gráficos programáticos
|
|
- `Web Workers` - Processamento em segundo plano
|
|
- `Service Workers` - Funcionalidade offline
|
|
|
|
### Passo 2: Pesquisa e Documentação
|
|
|
|
Cria uma análise compreensiva (300-500 palavras) que inclua:
|
|
|
|
#### Visão Técnica
|
|
- **Define** o que a interface escolhida faz com uma linguagem clara e acessível
|
|
- **Explica** os principais métodos, propriedades ou eventos que disponibiliza
|
|
- **Descreve** os tipos de problemas que esta interface visa resolver
|
|
|
|
#### Implementação no Mundo Real
|
|
- **Encontra** um site que utilize a tua interface escolhida (inspeciona o código ou pesquisa exemplos)
|
|
- **Documenta** a implementação específica com excertos de código, se possível
|
|
- **Analisa** por que razão os desenvolvedores optaram por esta abordagem
|
|
- **Explica** como melhora a experiência do utilizador
|
|
|
|
#### Aplicação Prática
|
|
- **Compara** a tua interface com as técnicas que usamos no projeto do terrário
|
|
- **Sugere** como a tua interface poderia melhorar ou ampliar a funcionalidade do terrário
|
|
- **Identifica** outros projetos onde esta interface seria valiosa
|
|
|
|
### Passo 3: Exemplo de Código
|
|
|
|
Inclui um exemplo simples e funcional de código que demonstre a interface em ação. Este deverá ser:
|
|
- **Funcional** - O código deve funcionar realmente quando testado
|
|
- **Comentado** - Explica o que cada parte faz
|
|
- **Relevante** - Ligado a um caso de uso realista
|
|
- **Acessível** - Compreensível para alguém a aprender desenvolvimento web
|
|
|
|
## Formato de Submissão
|
|
|
|
Estrutura a tua submissão com títulos claros:
|
|
|
|
```markdown
|
|
# [Interface Name] DOM Investigation
|
|
|
|
## What It Does
|
|
[Technical overview]
|
|
|
|
## Real-World Example
|
|
[Website analysis and implementation details]
|
|
|
|
## Code Demonstration
|
|
[Your working example with comments]
|
|
|
|
## Reflection
|
|
[How this connects to our terrarium project and future applications]
|
|
```
|
|
|
|
## Rubrica de Avaliação
|
|
|
|
| Critério | Exemplar (A) | Proficiente (B) | Em Desenvolvimento (C) | Precisa Melhorar (D) |
|
|
|----------|--------------|-----------------|------------------------|----------------------|
|
|
| **Compreensão Técnica** | Demonstra compreensão profunda com explicações precisas e terminologia correta | Mostra boa compreensão com explicações maioritariamente corretas | Compreensão básica com algumas ideias erradas | Compreensão limitada com erros significativos |
|
|
| **Análise do Mundo Real** | Identifica e analisa minuciosamente implementação real com exemplos específicos | Encontra exemplo real com análise adequada | Localiza exemplo mas análise é superficial | Ligação ao mundo real vaga ou incorreta |
|
|
| **Exemplo de Código** | Código funcional, bem comentado, que demonstra claramente a interface | Código funcional com comentários adequados | Código funciona mas precisa de melhor documentação | Código tem erros ou explicação insuficiente |
|
|
| **Qualidade da Redação** | Escrita clara, envolvente, com estrutura e comunicação técnica corretas | Bem organizada com boa redação técnica | Organização e clareza adequadas | Má organização ou comunicação pouco clara |
|
|
| **Pensamento Crítico** | Faz ligações perspicazes entre conceitos e sugere aplicações inovadoras | Mostra bom pensamento analítico e ligações relevantes | Análise presente mas poderia ser mais profunda | Pouca evidência de pensamento crítico |
|
|
|
|
## Dicas para o Sucesso
|
|
|
|
**Estratégias de Pesquisa:**
|
|
- **Começa** pela documentação da MDN para informação autoritária
|
|
- **Procura** exemplos de código no GitHub ou CodePen
|
|
- **Consulta** sites populares usando ferramentas para desenvolvedores no browser
|
|
- **Assiste** a vídeos tutoriais para explicações visuais
|
|
|
|
**Diretrizes de Escrita:**
|
|
- **Usa** as tuas próprias palavras em vez de copiar a documentação
|
|
- **Inclui** exemplos específicos e excertos de código
|
|
- **Explica** conceitos técnicos como se estivesses a ensinar um amigo
|
|
- **Relaciona** a tua interface com conceitos mais amplos de desenvolvimento web
|
|
|
|
**Ideias para o Exemplo de Código:**
|
|
- **Cria** uma demonstração simples que mostre as principais funcionalidades da interface
|
|
- **Baseia-te** em conceitos do nosso projeto do terrário quando aplicável
|
|
- **Foca-te** na funcionalidade em vez do design visual
|
|
- **Testa** o teu código para garantir que funciona corretamente
|
|
|
|
## Prazo de Submissão
|
|
|
|
[Inserir prazo aqui]
|
|
|
|
## Perguntas?
|
|
|
|
Se precisares de esclarecimentos sobre qualquer aspeto deste trabalho, não hesites em perguntar! Esta investigação vai aprofundar a tua compreensão de como o DOM permite as experiências web interativas que usamos todos os dias.
|
|
|
|
---
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
**Aviso Legal**:
|
|
Este documento foi traduzido utilizando o serviço de tradução automática [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, por favor tenha em conta que traduções automatizadas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se a tradução profissional por um humano. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações erradas decorrentes da utilização desta tradução.
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |