5 - Web HTML CSS JS PHP

Enviado por

victor menezes

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

22 visualizações27 páginas

5 - Web HTML CSS JS PHP

Enviado por

victor menezes

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 27

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