Relatório Desenvolvimento Responsivo

Prévia do material em texto

<p>Running head: TITLE OF YOUR PAPER</p><p>4.</p><p>Relatório de Atividade Prática Desenvolvimento Responsivo</p><p>Rayane Aryane Neves Magalhães</p><p>Universidade Unopar - Ribeirão das Neves</p><p>Número e nome do curso: 3521029303 - Desenvolvimento Web</p><p>Professor Anderson Emídio de Macedo Gonçalves</p><p>Data: 01/10/2024</p><p>Introdução</p><p>Este documento detalha a criação de uma página responsiva por meio de HTML e CSS , dando ênfase em Media Queries para adaptar o design aos vários tamanhos de telas. A responsividade é um elemento crucial na criação de sistemas web contemporâneos, assegurando que os usuários consigam acessar e usar as funcionalidades de maneira eficiente, independentemente de qual dispositivo seja utilizado , seja um computador , tablets ou até mesmo dispositivos móveis.</p><p>A atividade realizada investiga a ideia de breakpoints, que possibilitam os ajustes automáticos de componentes da página com base na largura da tela. Como vocês verão logo abaixo, a tarefa foi executada por meio da plataforma Réptil, que proporciona um espaço online para criação , modificação e execução de códigos, facilitando a criação de páginas web. Este documento não só apresenta soluções inovadoras , mas também ressalta a relevância do meu desenvolvimento responsivo no cenário dos sistemas web contemporâneos , enfatizando as práticas recomendadas e as estratégias empregadas para se assegurar a experiência do usuário em qualquer dispositivo.</p><p>Objetivos.</p><p>Para aprimorar a funcionalidade desse projeto, estou utilizando a plataforma Replay, que proporciona uma interface mais simples para o desenvolvimento de aplicações web que utilizam HTML, CSS e JavaScript diretamente no navegador.O modelo que selecionei, chamado "HTML, CSS, JS", já contém todos os documentos necessários para começar o desenvolvimento, simplificando a configuração do ambiente. Este modelo me ofereceu uma estrutura básica, permitindo-me focar na execução das funcionalidades desejadas, sem a necessidade de ajustar manualmente os arquivos e os elementos essenciais.</p><p>· Ponto de Interrupção 1280 pixels; mostrando o ponto de interrupção ao receber uma tela de largura mínima de 1280 pixels na coluna 6.</p><p>· Breakpoint 768px: Os blocos e dispositivos de exibição devem ter uma largura de 3 colunas de pelo menos 768px.</p><p>· Breakpoint 480px: mostra pontos de interrupção na coluna 2 em dispositivos com largura mínima de 480px.</p><p>· Ponto de interrupção menor que 480 pixels: mostra o ponto de interrupção na coluna 1 para caber no espaço reduzido da tela.</p><p>Metodologia</p><p>Configuração do Ambiente de Desenvolvimento</p><p>Para desenvolver a funcionalidade, é utilizado o site Replay, que permite criar projetos utilizando HTML, CSS e JavaScript no navegador. O template que eu escolhi para criar é “HTML, CSS, JS”, ​​que já contém os arquivos necessários para o projeto.</p><p>Estruturação do HTML</p><p>As páginas HTML são organizadas de acordo com a direção da ação. Criei um contêiner básico contendo seis blocos , rotulando cada um deles individualmente por classes. Logo abaixo está o código que eu utilizei no arquivo index.html:</p><p>Implementação da Responsividade com CSS</p><p>No arquivo style.css, regras de estilo são usadas para definir a exibição do bloco e consultas de mídia são usadas para alterar o layout com base no tamanho da tela. O código CSS básico foi projetado para exibir um bloco de 6 colunas em uma imagem grande. Espaçamento de 1280 pixels. Adicionada consulta de mídia para alterar o número de postagens quando a tela é minimizada. Aqui está o código CSS que eu utilizei:</p><p>Justificativa da Responsividade</p><p>A aplicação da responsividade de sistemas web é uma necessidade vital no progresso contemporâneo essencialmente considerando a crescente variedade de aparelhos utilizados para acessar a internet. A utilização de smartphone , tablets e computadores com diferentes tamanhos de telas requer que o conteúdo online seja flexível e ajustável.</p><p>Nesse projeto a seleção de queries média e o uso de layout em grade foram táticas para assegurar que o conteúdo da página web se adapte corretamente a diversas resoluções. A estratégia de segmentar as páginas em colunas foi conhecida como maximizar o espaço visual e assegurar uma disposição clara e compreensível. Independente do tamanho da tela. E a cada ponto de interrupção foi estabelecido com base nas práticas sugeridas para aprimorar a usabilidade e a experiência do usuário.</p><p>Resultados</p><p>A página passou por testes em diversas resoluções e a responsividade mostrou eficácia em todas as situações. Ao ampliar a janela do navegador, os blocos foram reorganizados de acordo com os pontos de interrupção estabelecidos. O comportamento da página assegurou uma excelente experiência para o usuário , adaptando o conteúdo conforme a dimensão da tela , preservando a funcionalidade e a estética.</p><p>Conclusão</p><p>A atividade obteve êxito ao implementar os princípios de responsividade por meio de Media Queries no CSS. Os experimentos mostraram que a página é adaptável a diversos dispositivos, desde grandes monitores de desktop até smartphones com ecrãs reduzidos. Este teste destacou a relevância da responsividade no desenvolvimento web contemporâneo, considerando que cada vez mais usuários acessam informações através de aparelhos móveis. É crucial criar páginas que proporcionem uma experiência de navegação agradável, independentemente do dispositivo, para satisfazer as expectativas dos usuários contemporâneos.</p><p>Referências</p><p>W3Schools. CSS Media Queries. Disponível em:</p><p>https://www.w3schools.com/css/css_rwd_mediaqueries.asp. Acesso em: Acesso em: 02 out. 2024.</p><p>Mozilla Developer Network (MDN). Using Media Queries. Disponível em:</p><p>https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Acesso em: 02 out. 2024.</p><p>Replit. Online Code Editor for Building and Sharing Projects. Disponível em:</p><p>https://replit.com/. Acesso em: 02 out. 2024.</p><p>image1.png</p>