Programação para internet

Jousy Gomes
jousy@fgf.edu.br

Layouts
 Objetivos

• Criar um design responsivo.

 Layout fluído ou líquido
• Os layouts fluídos utilizam uma porcentagem do espaço em vez de
largura fixa, ou seja, eles acompanham o tamanho da tela do
dispositivo que você está usando sem mudar a estrutura;
• O maior problema com design fluido é o fato de que os elementos
na página não podem se ajustar em conformidade. Isto significa
que quando você mover para um monitor widescreen, a página e
seu conteúdo podem parecer esticados. Se mover para uma tela
menor como a de um tablet ou um smartphone tudo vai se
aglomerar no meio;
• Isso pode representar alguns problemas, especialmente quando se
trata de satisfação do cliente;
 Layout Adaptativo
• O design adaptativo é onde temos um conjunto de código para cada
tipo de dispositivo que acessa o site. É como ter um único site com
várias versões: quando o servidor detecta que tipo de dispositivo o
usuário está visualizando a página, ele envia a versão correta do
website para melhor visualização;
• A vantagem do uso do design adaptativo é que há uma
possibilidade de que as páginas carreguem mais rapidamente,
simplesmente porque muitos poucos ajustes serão feitos. Porém, se
você considerar o número enorme de dispositivos diferentes que
usamos hoje em dia, já tem praticamente uma ideia de quanto
trabalho é preciso para manter um design adaptável criando várias
versões diferentes para cada um deles;
 Layout Responsivo
• É a abordagem que sugere que o design e o desenvolvimento
devem responder ao comportamento e ao ambiente do usuário
com base no tamanho, na plataforma e na orientação da tela;
• Na prática consiste em uma combinação de grades e layouts
flexíveis, imagens e um uso inteligente de media queries CSS;
Visualizar a responsividade dos sites

http://www.responsinator.com/
Ajustando a resolução da tela
Ajustando a resolução da tela
 Objetivo do Design Responsivo
• Permitir que o website se adapte ao dispositivo que os
usuários estão utilizando;
• Fornece a capacidade de escrever uma vez e publicar em
todos os lugares, o que significa menos trabalho para
desenvolver o site;
Responsivo X Adaptativo
Design Responsivo
Layout Responsivo
Layout Responsivo
 Viewport
• Viewport é um espaço disponível do navegador para uma página
ser renderizada.
• Um pixel no mundo desktop.
 Em uma tela de computador 1px é 1px.
 Se o tamanho for definido em % o valor será calculado
proporcional ao tamanho da janela do navegador.
 Layouts Flexíveis
• Há algum tempo atrás, as únicas coisas que eram flexíveis em
um design eram as colunas de layout (elementos estruturais)
e o texto;
• As imagens podiam facilmente quebrar layouts e até
elementos estruturais flexíveis quebravam a forma de um
layout quando pressionados o suficiente;
• Projetos flexíveis não eram tão flexíveis; eles poderiam se
ajustar numa escala de centenas de pixels, mas muitas vezes
não podiam se ajustar de uma grande tela de computador
para um celular;
 Layouts Flexíveis
• Atualmente existe mais flexibilidade;
• As imagens podem ser ajustadas automaticamente e há
soluções alternativas para que os layouts nunca sejam
quebrados;
• Embora não seja uma correção completa, a solução nos
oferece muito mais opções e é ideal para dispositivos que
mudam da orientação retrato para paisagem ou quando os
usuários mudam de uma grande tela de computador para
um celular;
Ajustando a resolução da tela
Ajustando a resolução da tela
 Imagens Flexíveis
• Um grande problema que precisa ser resolvido com o
Web design responsivo é trabalhar com imagens;
• Há várias técnicas para redimensionar imagens
proporcionalmente e muitas são feitas facilmente;
• A opção mais popular e simples é usar a propriedade
max-width do CSS;
Imagens Flexíveis
Imagens Flexíveis
 Media Queries
• Media Queries é a utilização de Media Types com uma ou mais
expressões envolvendo características de uma media para definir
formatações para diversos dispositivos. O browser ou a aplicação lê as
expressões definidas na query, caso o dispositivo se encaixe nestas
requisições, o CSS será aplicado
 Tipos de mídia CSS3

• only: a única palavra-chave impede que navegadores mais antigos

que não suportam consultas de mídia com recursos de mídia
apliquem os estilos especificados. Não tem efeito nos navegadores
modernos.

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

only: é a única palavra-chave impede que navegadores mais antigos que não
suportam consultas de mídia com recursos de mídia apliquem os estilos
especificados. Não tem efeito nos navegadores modernos.
Index.html
pequeno.css
medio.css
grande.css
 Media Queries no CSS

Você pode aplicar as Media queries diretamente no CSS.

https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries
 Testando as Media Queries
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>

<h1>Resize the browser window to see the effect!</h1>

<p>The media query will only apply if the media type is screen
and the viewport is 480px wide or wider.</p>

</body>
 Media Queries - CSS
<style type="text/css"> /* min-width */
•
body { padding: 15px; background:#eee; font-family: Arial, @media screen and (min-width: 900px) {
•
Helvetica, sans-serif }. .dois {
background: #F90;
.caixa {
border: solid 1px #666; }
padding: 5px 10px; span.gt900 {
margin: 40px; display: inline-block;
} }
.area-visivel span {
}
color: #666;
display: none; /* min-width & max-width */
} @media screen and (min-width: 600px) and (max-width: 900px) {
/* max-width */
.tres {
@media screen and (max-width: 600px) { background: #9CF;
.um { }
background: #F9C; span.bt600-900 {
}
span.lt600 {
display: inline-block;
display: inline-block; }
} }
}
•
/* max device width */
@media screen and (max-device-width: 480px) {
.iphone {
background: #ccc;
}
}
</style>
 Media Queries - HTML
<head>
<title>Media Query</title>
<link rel="stylesheet" href="estilo.css" />
<!—Folha de estilo criada anteriormente carregada -->
</head>
<body>
<h1>TESTANDO MEDIA QUERIE – RESOLUÇÃO
DIFERENTE. </h1>
<p>Mude o tamanho do seu navegador para ver as
mudanças.</p>
<div class="caixa um">Esta caixa ficará rosa se a área de
visão for inferior a 600px</div>
<div class="caixa dois">Esta caixa ficará laranja se a
área de visão for maior que 900px</div>
•
• </html>
<div class="caixa tres">Esta caixa ficará azul se a
área
de visão estiver entre 600px e 900px</div>
<div class="wrapper iphone">Esta caixa só será
aplicável
a dispositivos com max-device-width: 480px (ou
seja, iPhone)</div>
<p class="area-visivel"><strong>Sua área de visão
atual é: </strong> <span class="lt600">menor que
600px</span> <span class="bt600-900">entre 600
-
900px</span> <span class="gt900">maior que
900px</span></p>
</body>
Testando as Media Queries
Testando as Media Queries
Testando as Media Queries
 Referências
Bibliografia Complementar

• Benyon, David. Interação humano-computador. 2ª ed.

São Paulo: Pearson Prentice Hall, 2011.
• Filatro, Andrea. Design instrucional na prática. São
Paulo: Pearson Education do Brasil, 2008.
• Lemay, Laura. Aprenda a criar páginas com HTML e
XHTML em 21 dias. São Paulo: Pearson Education do
Brasil, 2002.
• Page, Khristine Annwn. Dreamweaver MX. São Paulo:
Pearson Education do Brasil, 2003.
• Sharma, Vivek; Sharma, Rajiv. Desenvolvendo sites de
e-commerce. São Paulo: MAKRON Books, 2001.