Campus Party: Desing Responsivos
-
Upload
priscila-mayumi-sato -
Category
Technology
-
view
1.552 -
download
5
description
Transcript of Campus Party: Desing Responsivos
![Page 1: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/1.jpg)
![Page 2: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/2.jpg)
Ou Quase
Priscila Mayumi Sato5 anos como desenvolvedora@mayogaxhttp://dev.ayogax.me/
Jucinei Pereira dos Santos3 anos como desenvolvedor@jucineihttp://jucineisantos.com/
![Page 3: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/3.jpg)
Como acessávamos a web a alguns anos?
![Page 4: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/4.jpg)
![Page 5: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/5.jpg)
![Page 6: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/6.jpg)
Como acessamos a web hoje?
![Page 7: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/7.jpg)
![Page 8: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/8.jpg)
![Page 9: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/9.jpg)
O que nos aguarda no futuro?
![Page 10: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/10.jpg)
![Page 11: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/11.jpg)
![Page 12: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/12.jpg)
O que é Responsive Design?
![Page 13: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/13.jpg)
Responsive Web Design é um nome bonito para um conceito antigo. Hoje seus usuários utilizam diversos dispositivos e meios
de acesso para encontrar informação e por isso o conteúdo precisa se adaptar.
![Page 14: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/14.jpg)
![Page 15: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/15.jpg)
![Page 16: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/16.jpg)
![Page 17: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/17.jpg)
“O número total de pessoas acessando a web através de dispositivos móveis irá superar o acesso via desktop em 2015.”International Data Corporation (IDC)
![Page 18: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/18.jpg)
Layout Fixo
Estrutura definida com
medidas absolutas, não
possui qualquer flexibilidade
X
![Page 19: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/19.jpg)
Layout Fluido
Estrutura definida com
medidas relativas, possui uma
flexibilidade sem critérios
X
![Page 20: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/20.jpg)
Layout Adaptativo
Capaz de se reconfigurar de
acordo com a resolução da tela
ou tamanho da janela
X
![Page 21: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/21.jpg)
Layout Responsivo
Grids FluidosDesign AdaptativoConteúdo FlexívelOtimização de desempenho
V
![Page 22: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/22.jpg)
O Google recomenda,e também te recompensa.
“Sites que usam Web Design Responsivo, isto é, sites que funcionam em todos os dispositivos com o mesmo conjunto de URLs, com cada URL fornecendo o mesmo HTML a todos os dispositivos e usando apenas CSS para alterar como a página é processada no dispositivo. Essa é a configuração recomendada pelo Google.”
https://developers.google.com/webmasters/smartphone-sites/details
![Page 23: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/23.jpg)
![Page 24: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/24.jpg)
![Page 25: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/25.jpg)
![Page 26: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/26.jpg)
Arquitetura de informação
★ Estabelecer uma escala hierárquica de importância das informações textuais e gráficas do site
★ Repensar a pertinência de apresentação dessas
informações em diferentes contextos e dispositivos
![Page 27: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/27.jpg)
Arquitetura de informação
![Page 28: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/28.jpg)
Criando umaEstrutura Fluída
![Page 29: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/29.jpg)
Tamanho ÷ contexto = resultado
![Page 30: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/30.jpg)
Estrutura Fluida: Fontes
★ O tamanho padrão da fonte na maioria em praticamente todos os sites é de 16px
★ As medidas devem ser convertidas de medidasabsolutas (px) para medidas relativas (em)
★ Utilizamos para essa conversão a formulatamanho ÷ contexto = resultado
![Page 31: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/31.jpg)
Estrutura Fluida: Fontes
h1 { font-size: 24px; }
h1 span { font-size: 18px; }
___________________________________________
h1 { font-size: 1.5em; }
/* 24 ÷ 16 = 1.5 */
h1 span { font-size: 0.75em; }
/* 18 ÷ 24 = 0.75 */
![Page 32: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/32.jpg)
Estrutura Fluida: Grid
![Page 33: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/33.jpg)
Estrutura Fluida: Grid
![Page 34: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/34.jpg)
Estrutura Fluida: Margin & Padding
![Page 35: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/35.jpg)
Estrutura Fluida: Imagens
![Page 36: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/36.jpg)
Criando umDesign Adaptável
![Page 37: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/37.jpg)
Design Adaptável: Media Queries★ Expressões condicionais para aplicar diferentes regras CSS dependendo da largura do viewport, orientação da tela e/ou aspect ratio:
★ @media screen and (max-width:480px)(resolução máxima no viewport de 480px)
★ @media all and (orientation:landscape)Orientação “paisagem”
★ @media screen and (device-aspect-ratio: 16/9)Monitores 16:9 (ex.: resolução de 1280 x 720px)
★ @media screen and (min-width: 400px) and (max-width: 700px)Tela com resolução mínima de 400px e máxima de 700px
![Page 38: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/38.jpg)
Design Adaptável: Breakpoints
![Page 39: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/39.jpg)
Design Adaptável: Viewport
★ Viewport é a aréa de visualização do dispositivo aonde o site deve aparecer
★ A customização do viewport serve para definir aresolução inicial de visualização do site, e evitar aminiaturização do mesmo
★ Seus parâmetros são: width/height, initial-scale, userscalable e minimum/maximum-scale
<name="viewport" content=“width=device-width,initial-scale=1, maximum-scale=1.5">
![Page 40: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/40.jpg)
Design Adaptável: ViewportUma coleção de diferentes recursos e ferramentas para se trabalhar com Web Design Responsivo:
★ http://bradfrost.github.io/this-is-responsive/resources.html
![Page 41: Campus Party: Desing Responsivos](https://reader036.fdocumentos.com/reader036/viewer/2022062405/557ae564d8b42a8f648b555f/html5/thumbnails/41.jpg)
ObrigadaPriscila Sato e Jucinei Santos
(slides feitos por Thiago Chaves)