DESENV.
WEB EM
HTML5, CSS,
JAVASCRIPT E PHP
Profº: Luiz Felipe Cirqueira dos Santos
WEB RESPONSIVA E MOBILE FIRST
INTRODUÇÃO
Hoje é comum a navegação na web pelo
smartphone, ou seja, fazer o aceso pelo mobile, e
hoje ter um site que se adapte a isso é algo
essencial, além de uma ferramenta que padronize
e facilite o desenvolvimento e a nossa vida como
desenvolvedores. Como isso acontece?
Web responsiva
Abordagem de design de sites;
Visa criar páginas que se adaptam ao tamanho da
tela e à orientação do dispositivo do usuário.
Web responsiva - Objetivos
Garantir que o conteúdo seja legível;
Navegação fácil em qualquer dispositivo, seja um
desktop, tablet ou smartphone.
Mobile First
Estratégia de design que começa pela criação de uma
experiência otimizada para dispositivos móveis antes de
adaptar o layout para telas maiores;
Focar nas necessidades dos usuários móveis;
Aumentar progressivamente a complexidade do layout
para dispositivos maiores.
Importância
Acessibilidade: qualquer usuário, independente do dispositivo de
acesso, pode acessar e utilizar sua aplicação;
UX: Melhorar a experiência de usuário, com uma navegação mais
intuitiva e agradável.
Técnicas
Media Queries;
Layouts Flexíveis;
Frameworks CSS.
Media Queries
Regras CSS que aplicam estilos com
base nas características do dispositivo;
Largura e altura da tela, resolução e
orientação.
Media Queries - Exemplo
Layouts Flexíveis
Flexbox e Grid;
Permite criar layouts que se
adaptam automaticamente ao
tamanho da tela.
Layouts Flexíveis - Exemplo Flexbox
Layouts Flexíveis - Exemplo Grid
Frameworks CSS
Bootstrap e Foundation;
Fornecem uma estrutura sólida para criar layouts
responsivos rapidamente;
Incluem uma série de componentes e utilitários que
facilitam o desenvolvimento.
Frameworks CSS - Exemplo
EXEMPLOS
Blog Sobre Pets (Utilizando Media Queries)
Blog Sobre Pets (Utilizando Media Queries)
Blog Sobre Saúde (Utilizando Layouts Flexíveis)
Blog Sobre Saúde (Utilizando Layouts Flexíveis)
Blog Sobre Educação (Utilizando Bootstrap)
DESAFIO
Criação de uma Página de Blog Sobre
IA
Objetivo: Criar uma página de blog responsiva sobre
Inteligência Artificial que contenha uma galeria de imagens,
um formulário de contato e se ajuste a diferentes tamanhos
de tela utilizando uma das três técnicas: Media Queries,
Layouts Flexíveis com Flexbox ou Bootstrap.
Criação de uma Página de Blog Sobre
IA
Requisitos:
Crie uma página HTML com as seguintes seções:
Cabeçalho;
Conteúdo principal com uma introdução sobre
Inteligência Artificial;
Galeria de imagens relacionadas à IA;
Formulário de contato;
Rodapé;
Criação de uma Página de Blog Sobre
IA
Requisitos:
A galeria de imagens deve ajustar seu layout com
base no tamanho da tela:
Em telas pequenas, as imagens devem estar
dispostas em uma coluna;
Em telas médias, as imagens devem estar
dispostas em duas colunas;
Em telas grandes, as imagens devem estar
dispostas em três colunas;
Criação de uma Página de Blog Sobre
IA
Requisitos:
O formulário de contato deve incluir os seguintes
campos:
Nome;
E-mail;
Mensagem;
Botão de envio;
Utilize uma das três técnicas (Media Queries, Layouts
Flexíveis com Flexbox ou Bootstrap) para tornar a página
responsiva.
Dúvidas
