Pagina Web com Java Script

Ipanema barco no coral AMAZONAS Stone paved street with colorful buildings and people under blue sky City with palm trees classical buildings and three arched bridges over a grassy canal under a cloudy sky City view showing three bridges over a grassy canal surrounded by classical buildings and trees under a cloudy sky 4 4 Stephany Caroline Cavaleto Sant Anna Aberto sextafeira 7 mar 2025 0000 Vencimento terçafeira 18 mar 2025 2359 Objetivos Praticar o desenvolvimento de documentos dinâmicos utilizando HTML CSS e JavaScript URL GitHub Classroom httpsclassroomgithubcomaUbrdWKp Como entregar 1 No GitHub Classroom Completar a atividade de acordo com as questões enunciadas commitar commit e submeter push 2 No Moodle Colar o código hash do último commit efetuado essa é a versão que o professor irá corrigir A figura abaixo exemplifica onde encontrar a hash do último commit na página do seu repositório o código nesse exemplo é 661415f Alternativamente você pode obter o código de commit digitando git log no terminal do seu projeto Arquivos prévios srcindexhtml documento HTML inicialmente contendo apenas a estrutura mínima srcstylecss arquivo CSS contendo apenas a folha de estilos mínima img diretório contendo as imagens necessárias para a atividade Temos duas variações de imagens Thumbnails imagens menores 100x100 pixels que representam miniaturas Imagens de destaque imagens maiores aprox 800x600 pixels que representam tamanhos médios srcjsdatasetjs arquivo JavaScript contendo um um array de dados que deve ser utilizado para preencher a página web dinamicamente srcjsappjs arquivo JavaScript inicialmente vazio que deve conter a lógica da aplicação Ambiente de desenvolvimento As instruções abaixo assumem que você está usando o ambiente de desenvolvimento GitHub Codespaces com todas as dependências necessárias principalmente Nodejs e NPM já instaladas e configuradas Caso você esteja utilizando outro ambiente é sua responsabilidade garantir que todas as dependências estejam instaladas e configuradas corretamente Importante O código JavaScript está estruturado usando módulos ES6 Isso implica algumas precauções Não remova as linhas de importação e exportação dos módulos que já estão presentes Não altere o atributo type do elemento script no arquivo indexhtml Você deve necessariamente utilizar um servidor web para testar a aplicação Para tal você pode executar Marcar como feito 17032025 2250 MCZA01917SAprogweb Ativ 02 JavaScript UFABC httpsmoodleufabcedubrmodassignviewphpid126295 14 npx serve Confirmar a instalação do servidor Em seguida acesse a URL fornecida no terminal para visualizar a aplicação Caso seja exibida a raiz do projeto basta navegar até o diretório src para abrir o arquivo indexhtml Importante Não usar a extensão Live Preview Microsoft para esse fim pois ela tem um comportamento errático na presença de código modularizado em JavaScript O que fazer Você deve construir uma galeria de imagens dinâmica que exibe informações sobre cidades turísticas brasileiras A figura 1 ilustra o design da página web a ser reproduzido Screenshot da galeria de imagens A galeria tem o seguinte comportamento Na parte superior há uma lista de imagens menores thumbnails dispostas horizontalmente representando miniaturas das fotos das cidades Na parte inferior há uma área de detalhes que exibe a imagem de destaque resolução média da cidade o nome e o estado da cidade e uma descrição das suas qualidades turísticas Quando o usuário clica em uma imagem de thumbnail a imagem de destaque o nome o estado e a descrição da cidade correspondente devem ser exibidos na área de detalhes Tanto a lista de thumbnails quanto a área de detalhes devem ser preenchidas dinamicamente utilizando JavaScript para acessar os dados contidos no arquivo jsdatasetjs e injetálos no documento via manipulação do DOM O vídeo a seguir ilustra o comportamento esperado da aplicação Vídeo de demonstração Arquivo de dados O arquivo de dados datasetjs contém um array de objetos sendo que cada objeto representa uma cidade turística Cada objeto tem o seguinte formato 17032025 2250 MCZA01917SAprogweb Ativ 02 JavaScript UFABC httpsmoodleufabcedubrmodassignviewphpid126295 24 id aracati cidade Aracati estado CE descricao Aracati no litoral do Ceará é um destino turístico completo thumb aracatismalljpg image aracatilargejpg As propriedades são autoexplicativas Reforçase que a propriedade thumb contém o nome da imagem de thumbnail e a propriedade image contém o nome da imagem de destaque Todas as imagens com esses nomes estão disponíveis no diretório img do projeto Critérios de corretude A atividade deve atender aos seguintes requisitos mínimos Reproduzir minimamente o layout da Figura 1 ou seja ter no mínimo Área superior rolável com barra de rolagem contendo as imagens de thumbnail dica pesquise sobre a propriedade overflowx de CSS Área inferior contendo a imagem de destaque o nome o estado e a descrição da cidade Garantir que todas as informações venham do arquivo jsdatasetjs Garantir o comportamento de clique nas imagens de thumbnail que deve exibir as informações da cidade correspondente na área inferior Garantir que no primeiro carregamento da página a primeira cidade do array seja exibida na área inferior A avaliação considerará satisfatoriamente a entrega que cumprir os requisitos mínimos Outras questões como melhorias de layout estilo e funcionalidades adicionais ficam a seu critério e podem render pontos extras Testes automáticos de qualidade Os documentos tanto HTML quanto CSS e o código JavaScript devem passar nos testes automáticos de qualidade linters Nessa atividade temos um novo linter para o JavaScript chamado ESLint O ESLint é uma ferramenta de análise de código estática para identificar padrões problemáticos no código JavaScript Caso seu código JavaScript apresente avisos ou erros de linting você deve corrigilos antes de submeter a atividade Para facilitar a correção dos eventuais erros foi incluída no container uma extensão do Visual Studio Code chamada ESLint Microsoft que destaca os erros diretamente no código O ESLint utiliza o arquivo de configuração eslintconfigmjs para definir as regras de linting Não altere esse arquivo Para rodar os testes de qualidade executar Uma única vez npm install Sempre que desejar verificar a qualidade dos documentos npm test Atividades entregues com erros de linting terão desconto de nota Adicionar envio Status de envio Status de envio Nenhum envio foi feito ainda Status da avaliação Não há notas 17032025 2250 MCZA01917SAprogweb Ativ 02 JavaScript UFABC httpsmoodleufabcedubrmodassignviewphpid126295 34 Tempo restante 1 dia 1 hora restando Última modificação Comentários sobre o envio Comentários 0 Voltar para Curso Moodle UFABC Este é o Ambiente Virtual de Aprendizagem da UFABC Esta plataforma permite que os usuários educadoresalunos possam criar cursos gerenciálos e participar de maneira colaborativa Informação Conheça a UFABC Conheça o NTI Conheça o Netel Aplicativos Baixe o app do Moodle em seu smartphone Android IOS Contato Av dos Estados 5001 Bairro Bangu Santo André SP Brasil CEP 09210580 Siganos httpswwwfacebookcomufabc httpswwwinstagramcomufabc Resumo de retenção de dados Baixar o aplicativo móvel 17032025 2250 MCZA01917SAprogweb Ativ 02 JavaScript UFABC httpsmoodleufabcedubrmodassignviewphpid126295 44 Beach scene with people swimming and modern buildings in the background Openair auditorium with white curved roof structure in a town area with sign reading OMEPARITZ People swimming in clear water near boat labeled AMBULANHA with many others in the background Outdoor view of an openair amphitheater with a large white canopy roof and a tall light pole in the background under a partly cloudy blue sky A wide coastal scene featuring a palm treelined beach with people and umbrellas buildings in the background and an ocean extending to the horizon People swimming and relaxing in clear turquoise water near a boat labeled AMBULANCIA