Desafios II Temporada

Prévia do material em texto

Temporada II
1º Desafio - Projeto de interface com o usuário
A acessibilidade é cada vez mais importante também na criação de sites e aplicações web. Pensando nisso, o W3C desenvolveu a Web Content Accessibility Guidelines (WCAG), onde define as diretrizes de acessibilidade para o conteúdo da web.
Em sua página oficial a W3C traz uma lista de ferramentas de avaliação de acessibilidade da web que ajudam a determinar se o conteúdo da web atende às diretrizes de acessibilidade. Trata-se da página https://www.w3.org/WAI/ER/tools/ que fornece uma lista de ferramentas de avaliação que você pode filtrar para encontrar aquelas que correspondem às suas necessidades específicas.
1 - Utilizando uma dessas ferramentas que avaliam sites segundo o WCAG 2.0, avalie cada um dos três sites:
a) https://www.amazon.com.br/
b) https://www.magazineluiza.com.br/
c) https://www.compracerta.com.br
2 - Tome por base a sua experiência como usuário, navegando pelos 3 sites propostos, avalie se concorda ou não com a avaliação e justifique a sua resposta.
Padrão de resposta esperado
Dada as ferramentas disponibilizadas pela W3C (https://www.w3.org/WAI/ER/tools/) e que avaliam segundo o WCAG você deve escolher uma e analisar a quantidade de violações/erros e relatar se concorda com a avaliação.
Por exemplo, poderá utilizar o validador WebAccessibility - https://www.webaccessibility.com/ . para verificar a acessibilidade do site. Assim, foram avaliados cada um dos sites sugeridos.
a) Amazon = 3 violações e score de 89%
b) Magazine Luiza = 295 violações e score de 73%
c) Compra certa = 47 violações e score de 76%
O site que melhor atende os padrões da WCAG 2.0 é o site da Amazon, possuindo o menor número de violações (erros) no teste. Isto pode ser percebido pela navegação em sua interface, que é mais amigável, simples e possui padronização nas páginas, com informações bem distribuídas e que possui recursos de acessibilidade. Porém, ao navegar pelo site percebe-se que ainda necessita de melhorias, como alt no HTML para descrição de imagens.
2º Desafio - Criação e formatação de páginas web com HTML
O seu professor de Ferramentas de Desenvolvimento Web lançou os seguintes desafios para a turma:
1 - Qual é a função do doctype em um documento HTML?
2 - Quais são os oito tipos de doctype que podem ser encontrados nos documentos atuais e a característica de cada um?
Padrão de resposta esperado
Veja como os grupos responderam ao desafio proposto pelo professor:
1 - Doctype ou “Document Type Definition” (traduzindo, “Definição de Tipo de Documento”) é usado para que os navegadores saibam qual a versão do código HTML que a página Web em questão usa. É a partir dessa informação que os navegadores saberão como renderizar do código HTML na tela.
2 - Os oito tipos de doctype encontrados na página atuais são: a) HTML 4.01 Strict - utilizado para renderizar as TAGs do HTML versão 4 não aceitando TAGs de versões anteriores.
b) HTML 4.01 Transitional - possui os recursos do 4.01 Strict, mas aceita também TAGs antigas.
c) HTML 4.01 Frameset - utilizado quando o documento contém molduras ("frames".). Esse doctype consiste no mesmo que o Transitional mais os elementos relacionados com as molduras ("frames").
d) XHTML 1.0 Strict - é o mesmo que HTML 4.01 Strict, mas também possui suporte a XML (mais moderno que o 4,01).
e) XHTML 1.0 Transitional - é o mesmo que HTML 4.01 Transitional, mas também possui suporte a XML (mais moderno que o 4,01).
f) XHTML 1.1 - é o mesmo que XHTML 1.0 Strict, mas também permite que se integrem módulos adicionais.
g) XHTML Mobile 1.0 - é o doctype quando o site tiver suporte a dispositivos móveis utilizando XHTML.
h) HTML 5 - na atual versão 5.0 no HTML basta declararmos como "Doctype HTML".
3º Desafio - Criação e formatação de páginas web com CSS
Leonardo é aluno da disciplina de Ferramentas de Desenvolvimento Web e está fazendo uma avaliação final do semestre. A quinta e última questão traz o seguinte contexto:
Você é um desenvolvedor de sites e precisa definir qual o tipo de seletor de CSS é usado para a formatação dos códigos HTML. Lembre-se que, na página a ser criada, várias formatações serão iguais em vários blocos, com códigos idênticos sendo reutilizados. Justifique o motivo da escolha da regra.
Padrão de resposta esperado
Na construção de uma página em que várias formatações idênticas são repetidas, a melhor escolha de um seletor de CSS é utilizar uma CLASSE.
A CLASSE, diferente dos outros seletores, permite que formatações sejam compartilhadas entre vários elementos dentro da página, evitando, assim, que o desenvolvedor tenha a necessidade de repetir a digitação de todos os códigos, otimizando a produtividade e o tempo de resposta do site.
4º Desafio - Comportamento com JavaScript
O JavaScript foi criado em 1995 para que houvesse mais recursos de interatividade nas páginas HTML e do CSS. Muitos usuários confundem o JavaScript com a linguagem de programação JAVA. O seu desafio nesta unidade será:
1 - Pesquisar a diferença entre o JavaScript e a linguagem JAVA.
2 - Quais empresas criaram o JavaScript e o JAVA, e quais são as que atualmente mantêm o desenvolvimento dessas linguagens?
3 - Criar um código HTML que tenha um botão que faça com que a página fique da cor AZUL, por meio de uma chamada de JavaScript (anexar o arquivo com o código).
Padrão de resposta esperado
Conheça as respostas para cada questão do desafio.
1 - As diferenças entre JAVA e JavaScript são: JAVA é uma linguagem de programação completa, ao passo que JavaScript é uma linguagem de scripts. JAVA cria aplicações executadas em uma máquina virtual ou em um browser, ao passo que o código JavaScript é executado apenas em um navegador, em conjunto com o HTML. O código Java precisa ser compilado, ao passo que os códigos JavaScript estão totalmente em texto.
2 - O JAVA foi criado pela Sun Microsystems, e o JavaScript pela Netscape Inc. Atualmente, o JAVA é mantido pela Oracle Inc., e o JavaScript é pela ECMA.