Roteiro de Atividade Prática
Nome: Turma:
.
Criando um site responsivo com abordagem mobile-
first
Objetivo da aula:
Entender e aplicar os conceitos de design responsivo e metodologia mobile-
first na criação de um site, utilizando fluid grid layouts, flexible images, media
queries, e os princípios de desempenho para dispositivos móveis. Além disso,
explorar o uso do framework foundation para construir uma página web
responsiva e eficiente.
Situação-problema:
Você foi contratado para criar um site para uma pequena empresa que deseja
garantir que seus clientes tenham uma ótima experiência em qualquer
dispositivo, desde smartphones até desktops. A empresa prioriza o design
responsivo, começando com uma abordagem mobile-first. Sua tarefa é
desenvolver uma página inicial que se adapte a diferentes tamanhos de tela e
ofereça uma interface amigável e rápida para dispositivos móveis.
Situação fictícia elaborada especialmente para o curso.
Passos para implementação:
Configuração do projeto:
Crie a estrutura inicial do projeto, organizando as pastas e os arquivos
necessários. Inclua as seguintes pastas:
o css/: para os arquivos de estilo.
o img/: para as imagens do site.
o [Link]: página principal do site.
Estrutura final das pastas:
meu-site/
│
├── css/
│ └── [Link]
│
├── img/
│ └── [Link]
│
[SIS] [U2] [C3]
1/5
└── [Link]
Desenvolvimento da página com abordagem mobile-first:
HTML básico: comece criando uma estrutura básica em HTML para a
página inicial, com um cabeçalho, uma imagem de logo, uma breve
descrição da empresa e um menu de navegação.
CSS para dispositivos móveis: estilize a página para dispositivos
móveis, focando em simplicidade e minimalismo. Use um layout de uma
coluna, priorize o conteúdo essencial e certifique-se de que todos os
elementos sejam touch-friendly.
Exemplo de código HTML e CSS:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minha Empresa</title>
<link rel="stylesheet" href="css/[Link]">
</head>
<body>
<header>
<img src="img/[Link]" alt="Logo da Empresa" class="logo">
<h1>Bem-vindo à Minha Empresa</h1>
</header>
<nav>
<ul>
<li><a href="#">Início</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
<section>
<p>Oferecemos serviços de alta qualidade para atender suas
necessidades.</p>
</section>
</body>
</html>
/* [Link] */
/* Estilos básicos para mobile-first */
body {
font-family: Arial, sans-serif;
padding: 10px;
}
[SIS] [U2] [C3]
2/5
.logo {
max-width: 100%;
height: auto;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline-block;
margin-right: 10px;
}
nav ul li a {
text-decoration: none;
color: #333;
}
Adaptação para telas maiores com media queries:
Adicione complexidade ao design usando media queries. Para telas
maiores, mude para um layout de múltiplas colunas e ajuste o tamanho
dos elementos para melhor utilizar o espaço disponível.
Exemplo de media query:
/* Layout para telas maiores */
@media (min-width: 768px) {
nav ul li {
margin-right: 20px;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
}
section {
max-width: 1200px;
margin: 0 auto;
}
}
Aplicação de grid layout com Foundation:
[SIS] [U2] [C3]
3/5
Utilize o framework Foundation para implementar um sistema de grid
que permita maior flexibilidade e personalização do layout. Reestruture a
página para aproveitar o sistema de grid do Foundation, garantindo que
os elementos se alinhem de maneira fluida em diferentes tamanhos de
tela.
Exemplo de uso do grid do Foundation:
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell small-12 medium-6 large-4">
<h2>Nossos Serviços</h2>
<p>Descrição dos serviços oferecidos.</p>
</div>
<div class="cell small-12 medium-6 large-4">
<h2>Contato</h2>
<p>Informações de contato e localização.</p>
</div>
<div class="cell small-12 medium-6 large-4">
<h2>Sobre Nós</h2>
<p>História e missão da empresa.</p>
</div>
</div>
</div>
Otimização para desempenho em dispositivos móveis:
Otimize o desempenho da página minimizando os arquivos CSS e
JavaScript, comprimindo as imagens e implementando técnicas de
carregamento assíncrono para melhorar o tempo de carregamento em
dispositivos móveis.
Exemplo de compressão de imagem e minificação:
Comprimir imagens usando ferramentas como TinyPNG.
Minificar o arquivo CSS para reduzir seu tamanho.
Testes e validação:
Teste o site em diferentes dispositivos e navegadores para garantir que o
design responsivo funcione conforme o esperado. Verifique se o
conteúdo é acessível, os elementos são touch-friendly, e o tempo de
carregamento é adequado.
Lista de materiais
Computador com internet;
Caderno para anotações;
[SIS] [U2] [C3]
4/5
Uma caneta.
[SIS] [U2] [C3]
5/5