Relatório de Aula Prática - Desenvolvimento Responsivo

Prévia do material em texto

NOME: SAMUEL POTTER BARBOSA
RA: 3853759205 
PORTIFÓLIO – RELATÓRIO DE AULA PRÁTICA
 DISCIPLINA: DESENVOLVIMENTO RESPONSIVO 
 
Sumário
 INTRODUÇÃO ............................................................................... 3
 METODOLOGIA ............................................................................ 3
 RESULTADOS ............................................................................... 4
 CONCLUSÃO ................................................................................ 8
 REFERÊNCIAS BIBLIOGRÁFICAS ............................................ 8
 
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 celulares 
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 
• 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 menores. 
3
 
• 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.
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:
4
 
Código HTML
5
 
Código 2: CSS 
6
 
7
 
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.
MICROSOFT. Visual Studio Code. Versão 1.85.2. 
8