Baixe o app para aproveitar ainda mais
Prévia do material em texto
Rio de Janeiro/RJ 2024 NOME: VITOR HUGO FERNANDO PEREIRA BRANDÃO RA: 3478159801 DESENVOLVIMENTO WEB PORTIFÓLIO – RELATÓRIO DE AULA PRÁTICA DISCIPLINA: DESENVOLVIMENTO RESPONSIVO SUMÁRIO INTRODUÇÃO ............................................................................................... 3 METODOLOGIA ........................................................................................... 3 RESULTADOS ............................................................................................... 4 CONCLUSÃO ................................................................................................. 6 REFERÊNCIAS BIBLIÓGRAFICAS .............................................................. 6 3 INTRODUÇÃO A responsividade em páginas web é fundamental para garantir uma boa experiência do usuário, independentemente do dispositivo utilizado para acessar o conteúdo. Este relatório descreve o processo de implementação da responsividade em uma página web, utilizando media queries em CSS, com o objetivo de adaptar o layout da página em diferentes dispositivos, como computadores, tablets e smartphones. METODOLOGIA A atividade foi realizada utilizando o website Replit (https://replit.com), uma plataforma de edição de código online que permite a construção e teste de páginas web com conteúdos HTML, CSS e JavaScript. O template utilizado disponibiliza arquivos HTML, CSS e JS para a criação da página web. • Foi construída uma página web simples contendo seis blocos dentro de uma “<div>”. • Utilizando o conceito de media queries em CSS, a responsividade da página foi implementada com base em diferentes breakpoints: • Break Point 1280 pixels (largura mínima): A página exibe os seis blocos em seis colunas, adequado para acesso por computadores. • Break Point 768 pixels (largura mínima): A página adapta-se para exibir as informações em três colunas, adequado para tablets e dispositivos com telas menores. • Break Point 480 pixels (largura mínima): A página é ajustada para exibir as informações em duas colunas, considerando dispositivos com telas ainda 4 menores. • Break Point menor que 480 pixels (largura mínima): A página é adaptada para exibir as informações em uma única coluna, ideal para smartphones e outros dispositivos móveis com espaço limitado na tela. RESULTADOS Após a implementação da responsividade utilizando media queries, foram observados os seguintes resultados: Figura 1: Captura de tela – index.html em página web (width mínimo: 768px) Fonte: Visual Studio Code in Live Server. Elaborado pelo Autor (2024). A página web se ajusta de forma adequada e eficiente em diferentes dispositivos, mantendo a mesma funcionalidade e usabilidade. Os breakpoints definidos permitem uma transição suave do layout da página conforme o tamanho da tela do dispositivo. A seguir, estão os códigos HTML e CSS utilizados para a construção da página web e implementação da responsividade, respectivamente: Código 1: HTML 1 2 3 4 5 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <meta name="viewport" content="width=device-width"> <title>Desenvolvimento Responsivo</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="grid"> <h3 class="franca">França</h3> <h3 class="estadosunidos">Estados Unidos</h3> <h3 class="espanha">Espanha</h3> <h3 class="china">China</h3> <h3 class="italia">Itália</h3> <h3 class="turquia">Turquia</h3> </div> </body> </html> Fonte: Visual Studio Code. Elaborado pelo Autor (2024). Código 2: CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 html { height: 100%; width: 100%; } .grid { display: grid; } .franca { color: red; } .estadosunidos { color: green; } .espanha { color: blue; } .china { color: yellow; } .italia { color: orange; } .turquia { color: purple; } @media (min-width: 1280px) { .grid { 6 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } } @media (min-width: 768px) and (max-width: 1280px) { .grid { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } } @media (min-width: 480px) and (max-width: 767px) { .grid { grid-template-columns: 1fr 1fr 1fr; } } @media (min-width: 290px) and (max-width: 479px) { .grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 289px) { .grid { grid-template-columns: 1fr; } } Fonte: Visual Studio Code. Elaborado pelo Autor (2024). CONCLUSÃO A atividade demonstrou a importância e a aplicação prática da responsividade em páginas web. Através do uso de media queries em CSS, foi possível criar uma página que se adapta de forma eficiente a diferentes dispositivos, proporcionando uma experiência consistente e acessível para o usuário. REFERÊNCIAS BIBLIÓGRAFICAS Replit. The software creation platform. IDE, AI, and Deployments. Disponível em: https://replit.com/. Acesso em: 06 fev. 2024. MICROSOFT. Visual Studio Code. Versão 1.85.2. Microsoft Corporation, 2024. 7 Disponível em: https://code.visualstudio.com/. Acesso em: 06 fev. 2024. 2024-02-06T14:28:23-0300
Compartilhar