# 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. --- **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.