Web Design Responsivo

649 visualizações

Publicada em

Slides da apresentação realizada dia 29/10/2014, para a disciplina Programação para Internet I, do curso de Análise e Desenvolvimento de Sistemas da faculdade Senac Porto Alegre.

Publicada em: Tecnologia
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
649
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
38
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Web Design Responsivo

  1. 1. Web Design Responsivo Victor Melo Programação para Internet I ADS - Senac
  2. 2. 1. Introdução
  3. 3. O que é web design responsivo Web Design Responsivo é uma abordagem de web design destinada a elaborar sites para fornecer uma ótima experiência de visualização, fácil leitura e navegação com um mínimo de redimensionamento e visionamento, para uma ampla gama de dispositivos (de monitores de computador a telefones celulares). “Wikipédia”
  4. 4. O que é web design responsivo Site Design Conteúdo Diversos Dispositivos Ou seja:
  5. 5. O que é web design responsivo
  6. 6. Case Revista W Antes: http://revistaw.com.br/
  7. 7. Case Revista W http://revistaw.com.br/ Depois:
  8. 8. 2. Na prática
  9. 9. •Fundação Flexível •Media Queries •Grids Fluídos •Mobile First •Otimização Tópicos
  10. 10. Fundação Flexível É o esqueleto básico do layout:
  11. 11. Fundação Flexível •Na mão, com medidas relativas e um pouco de matemática •Grids Fluídos Pode ser feita de duas formas:
  12. 12. Fundação Flexível - Medidas (Quase) tudo é relativo •PX para definir altura ou largura máxima •EM ou REM para definir tamanho de fonte max-width: 1200px; height: 700px; •% para definir largura width: 70%; Font-size: 1.2em; Font-size: 1.2rem;
  13. 13. Fundação Flexível - Fonte PX: Medida na fonte : •Medida absoluta. Usuário não pode alterar o tamanho da fonte através de configurações do browser. EM/REM: Adaptável,Flexível, melhor acessibilidade •Medida relativa. Usuário pode alterar o tamanho da fonte através de configurações do browser. Preciso, inflexível, acessibilidade ruim
  14. 14. Fundação Flexível - Fonte html { font-size: 62.5%; } EM passa a ser em base 10, ou seja: 1.5em = 15px; 1.2em = 12px; 2.5em = 25px; target ÷ context = result 1em equivale ao tamanho do font-size do body, que em geral é 16px. 1.5em = 24px Truque: Exemplos: 24 ÷ 16 = 1.5 2em = 32px 32 ÷ 16 = 2 Fórmula EM: OBS: •Com EM, pode-se aplicar o font- size no body. •Com REM, apenas no html
  15. 15. Fundação Flexível - Fonte EM é relativo ao font-size do contâiner REM é relativo ao font-size do elemento html body { font-size: 20%; } html { font-size: 62.5%; } Body .p1 { font-size: 1rem; } Não afetado pelo font-size do body Body .p2 { font-size: 1.6rem; } Afetado pelo font-size do body Font-size REM: * { font-size: 1.6rem; line-height:1.6rem; }
  16. 16. Fundação Flexível - Fonte Exemplo EM vs REM
  17. 17. Fundação Flexível – Containers e Imagens •Largura em porcentagem; •Usar max-width ou min-width quando necessário. #container{ width: 90%; max-width: 850px; } <section id=“container”> </section> 2 Regras
  18. 18. Media Queries “consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color.” Developer.mozilla.org
  19. 19. Media Queries Ex: •All: Para todos os dispositivos. •Braille: Para dispositivos táteis. •Handheld: Para dispositivos portáteis, geralmente com telas pequenas e banda limitada. •Print: Para impressão em papel. •Screen: Para monitores ou dispositivos com telas coloridas e resolução adequada. <link rel="stylesheet" media="Handheld" href="example.css" /> Media Types: definem para que tipo de media um certo código CSS é direcionado.
  20. 20. Media Queries Handheld ou Screen? Screen Problema: Falta de padronização de aparelhos.
  21. 21. Media Queries <link rel="stylesheet" media="only screen and (max- width: 800px)" href="example.css" /> No HTML: @media screen and (max-width: 600px) { p { font-size: 20px; color: red; } } No CSS: Estas definições são conhecidas como breakpoints. Dica: Solução: Definir estilo por tamanho de tela, e não por dispositivo utilizado.
  22. 22. Media Queries @media only screen and (max-width: 480px) { body{ font-size:25em; } }
  23. 23. Fundação Flexível - Viewport Viewport é o quanto de conteúdo cabe na tela, em CSS pixels, não device pixels. Existem 3 tipos de pixels: •Pixel do dispositivo: corresponde ao tamanho da tela do seu aparelho. •CSS pixel: medida definida no CSS. •Dpi pixel: quantidade de pixels que cabe em uma polegada. A equivalência entre estes varia, dependendo do aparelho.
  24. 24. Fundação Flexível - Viewport Sem tela retina: 163dpi Com tela retina: 326dpi •Dois aparelhos •mesmo tamanho de tela •Dpis diferentes Resoluções diferentes Por isso, devemos nos preocupar com o pixel do dispositivo, e não a sua resolução.
  25. 25. Coloque no <head> o seguinte trecho: <meta name="viewport" content="width=device- width,initial-scale=1"> Fundação Flexível - Viewport Como definir que o parâmetro é o pixel do dispositivo:
  26. 26. Exemplo Site Responsivo Responsivo na mão
  27. 27. Frameworks como Bootstrap utilizam classes para definir grids: Grids Fluídos http://getbootstrap.com/
  28. 28. Exemplo Site Responsivo Bootstrap Responsivo com Bootstrap
  29. 29. Mobile First
  30. 30. Mobile First - Características Capacidades técnicas mais interessantes •acelerometro •GPS •multitouch •giroscópio •etc.
  31. 31. Mobile First - Características Foco Focar nas ações essenciais do usuário.
  32. 32. Mobile First - Características Atenção dobrada com: Em mobiles, decidir onde cada botão vai ser posicionado é tão essencial quanto a programação server-side ou um HTML bem feito. •Arquitetura de Informação •Usabilidade •Acessibilidade
  33. 33. Otimização Pensar na experiência do usuário não é apenas fazer seu site responsivo. Mas também, torná-lo acessível. http://browserdiet.com http://browserdiet.com
  34. 34. Otimização Algumas dicas do BrowserDiet: •Evite código inline/incorporado •Prefira <link> a @import •Comprima sua folha de estilo (CSS) •Combine vários arquivos CSS em um só http://browserdiet.com
  35. 35. 3. Internet além dos sites
  36. 36. Internet é um ambiente de desenvolvimento de aplicações, e não apenas de sites comerciais. Você pode usar as tecnologias web pra desenvolver aplicativos e serviços. Internet além dos sites
  37. 37. Internet além dos sites http://www.html5gamedevelopment.com/ http://browserquest.mozilla.org/
  38. 38. Internet além dos sites http://bjork.com/
  39. 39. Outros cenários Sites mobile são só o começo!
  40. 40. Referências http://blog.popupdesign.com.br/desenvolvimento-responsivo-e-viewport/ http://browserdiet.com/pt/ http://tableless.com.br/ http://sergiolopes.org/responsive-web-design/
  41. 41. Obrigado! Victor Melo victordossantosmelo@gmail.com fb.com/victormelooo

×