Aula 8, 9 e 10 - Exercícios

Questão 1 – Recursos de acessibilidade

Observe as situações a seguir, e relacione as opções.

• Aumentar fonte

• A navegação entre diferentes seções de um site não está funcionando para pessoas que utilizam o teclado.

• Alt-text

• O texto na seção de contatos está muito pequeno e difícil de ler.

• Alto-contraste

• Um botão na página não é visível o suficiente para pessoas com baixa visão, porque a sua cor é muito próxima da cor de fundo da página.

• TabIndex

• Uma imagem importante na página não tem uma descrição textual que ajude usuários de leitores de tela a entender seu conteúdo.

Questão 2 – TabIndex

Assinale a alternativa que associa corretamente o atributo TabIndex com a sua definição:

• Define a ordem de navegação pela tecla Ctrl, permitindo que elementos específicos sejam acessíveis por teclado.

• Fornece um comando de aumentar ou reduzir a fonte da página através da tecla Tab.

• Define a ordem de navegação pela tecla Tab, permitindo que elementos específicos sejam acessíveis por teclado.

• Fornece um comando para descrever as imagens do site ao clicar na tecla Ctrl.

Questão 3 – Site acessível

Jonathas aprendeu algumas formas de tornar o seu site acessível, por exemplo:

• Utilizando descrição nas imagens (alt-text);

• Criando o recurso de alto-contraste para a tela do site;

• Adicionando a navegação pela tecla Tab.

Agora, avalie as alternativas abaixo e selecione a opção que indica outras formas de garantir a acessibilidade em um site.

• Adicionar legendas para tornar o conteúdo audiovisual acessível para pessoas com deficiência auditiva e usar textos descritivos nos links.

• Usar fontes pequenas para um design criativo e garantir que todos os usuários acessem o conteúdo através do mesmo navegador.

• Garantir que o site funcione apenas em dispositivos móveis e de forma estática, removendo animações como vídeos e formulários.

• Utilizar imagens de alta resolução e garantir que o conteúdo possa ser acessado e navegado apenas pelo mouse.

Questão 4 – Gerenciando CDNs

Por que é tão importante usar a mesma rede de distribuição de conteúdo (CDN) para diferentes recursos em um site? Identifique a alternativa que responde corretamente à pergunta.

• Porque isso garante que todos os recursos sejam carregados da mesma fonte, com a mesma velocidade e qualidade, proporcionando um carregamento mais consistente e otimizado.

• Porque isso facilita a manutenção do site, afinal todos os recursos são gerenciados em um único local.

• Porque isso permite que o navegador carregue os recursos em paralelo, o que pode aumentar o tempo de carregamento do site.

• Porque isso aumenta a segurança do site, afinal os recursos são armazenados em servidores mais seguros.

Questão 5 – ScrollReveal

Qual o código correto para aplicar o ScrollReveal a um elemento com o ID contato, com um atraso de 1 segundo para a animação começar?

• ScrollReveal().reveal(‘.contato’, { delay: 1 });

• ScrollReveal().reveal(‘#contato’, { delay: 1 });

• ScrollReveal().reveal(‘#contato’, { delay: ‘1s’ });

• ScrollReveal().reveal(‘#contato’, { delay: 1000 });

Questão 6 – README.md

Qual a principal função do arquivo README.md em um projeto? Escolha a alternativa correta.

• O arquivo README.md é responsável por inserir uma interação na página, como, por exemplo, executar uma ação após o clique de um botão.

• O arquivo README.md é responsável por transmitir informações e instruções do código; ele explica o que o projeto faz, como instalá-lo, executá-lo e como contribuir com ele.

• O arquivo README.md é responsável pelo conteúdo da página, ou seja, textos, imagens, links e seções. Sem ele, o site não é exibido corretamente.

• O arquivo README.md é responsável por garantir um visual mais atrativo ao projeto, modificando a aparência do site com novas cores, fontes e espaçamentos.

Questão 7 – Avaliando algoritmos

Avalie os algoritmos a seguir e escolha a alternativa que indica todos os erros apresentados nos códigos:

• No primeiro algoritmo, a variável tamanhoAtualFonte não está sendo declarada corretamente. Já no segundo, o eventListener apresenta erro de sintaxe na declaração.

• No primeiro algoritmo, o bloco de códigos deveria estar dentro das chaves da função. Já no segundo algoritmo, o classList deveria receber o método toggle para alternar o estado da classe.

• No primeiro algoritmo, a declaração ${tamanhoAtualFonte}rem deveria aparecer entre aspas duplas. Já no segundo algoritmo, o classList deveria receber o método toggle para alternar o estado da classe.

• No primeiro algoritmo, o bloco de códigos deveria estar dentro das chaves da função. Já no segundo algoritmo, o método classList deveria ser removido, permitindo assim uma alternância entre classes.