Responsive web design

1,847 views
1,747 views

Published on

Published in: Technology
2 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total views
1,847
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
78
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide
  • Inicialmente o trabalho de web designers se focava apenas em adequar seus websites para monitores normaisA terrível briga entre mozilla (firefox) e internet explorer Apenas 2 ambientes para homologar o trabalhoTínhamos resoluções de 800 x 600, 1024 x 768
  • Posteriormente surgiram os notebooks com resoluções de 1280 x 800Tipo de tela um pouco diferente, mas nada muito difícil de se trabalhar
  • Na sequencia vieram os monitores widescreen com proporção de 16:9Neste momento surgiu uma situação onde as aplicações precisavam de uma certa adaptaçãoPois tivemos resoluções maiores, como: 1440 x 900 Isso deixava um espaço muito grande em branco
  • Para complicar mais ainda, surgiram os netbooksTínhamos 2 extremos, uma tela com resolução muito grande de um lado e um netbook com tela reduzida de outro
  • Então temos ai vários tipos de telaIsso já nos daria um certo trabalho homologar nosso websiteJá fugia daquela simples disputa entre Internet Explorer e Mozilla (Firefox)
  • Para completar ainda tem aquele nerd que quer não gosta do alt+tabQuer ver várias telas ao mesmo tempo
  • Em 2006 começou aparecer os primeiros smartfones Ainda eram aparelhos muito limitadosNão dava para se fazer muita coisa prática
  • Em 2007 começou a revolução na linha de smartfonesCom o lançamento do iPhone as coisas mudamTemos ai um aparecem com grande quantidade de recursoE uma tela de boa visibilidadeNada comparado ao que havia na época
  • Em 2008 vieram outros smartfones Nada que chegasse próximo ao iPhone mas já era uma evolução
  • Em 2009 surgiram novas versões de smartfones
  • Neste mesmo ano surgiu uma versão melhorada do Blackberry chamada de BlackBerry Curve 8900E teve ascenção o Android, que surgiu com muita força, apoiado na Gigante Google
  • Em 2010 a Apple lançou o iPad, que veio com muita força 3 milhões de venda em apenas 80 diasE não suportava flash, que ainda era uma forte ferramenta para web
  • Em 2010 também foi lançado o iPhone 4 Com resolução de 960 x 640, de fato uma ótima resolução Com 361 pixels por polegadasSob a afirmação de que 300 ppi a cerca de 30 centimetros do olho era o máximo que um humano poderia enxergar
  • Agora tempos um pouco mais de trabalho para homologar nossas aplicaçõesAlém da famosa disputa de Internet Explorer x Mozilla Firefox no desktopAgora temos que homologar uma aplicação acessível em smartfones
  • Show example of Amscan.org
  • Responsive web design

    1. 1. ProfessorAdriano Teixeira de Souza
    2. 2.  Adriano Teixeira de Souza  Fasul: Professor nas disciplinas de Estrutura de Dados, Paradigmas de Linguagens de Programação, Sistemas Distribuídos  C.Vale: Analista de sistemas sênior e líder técnico de desenvolvimento de sistemas em ambiente web e desktop
    3. 3. 1280 x 800 Photo: Steve Rhodes
    4. 4. 16 : 9 Photo: Steve Rhodes
    5. 5. Netbook tela de 8.9” Photo: Steve Rhodes
    6. 6. Várias telas
    7. 7. Mais é melhor 5120 x 1600
    8. 8. 2006 Smart Phones Flickr: photographer
    9. 9. 9 de Janeiro de 2007 Flickr: photographer
    10. 10. 2008 Smart Phones Flickr: photographer
    11. 11. 2009 Smart Phones Flickr: photographer
    12. 12. Android, BlackBerryFlickr: photographer
    13. 13. 2010 iPad – Vendas de 3 milhões de dispositivos em 80 diasFlickr: photographer
    14. 14. iPhone 4 – 960 x 640 @ 326 ppi “Retina Display”Flickr: photographer
    15. 15. Muitas telasFlickr: photographer
    16. 16. A web deve ser acessível por qualquer pessoa em qualquer lugar.
    17. 17.  1 em 5 usuários acessam a internet de dispositivos móveis todo os dias O tráfego de dados móveis quase triplicou em 2010. Mantendo a tendências dos últimos 3 anos. Acesso a internet por dispositivos móveis deve ultrapassar a de desktops entre 3 a 5 anos. Vídeo-games e televisões atuais estão vindo com acesso a internet.
    18. 18.  Design Web Responsivo  Trabalhar com um layout que se adapta as diferentes telas onde será apresentado  A mesma página web poderia ser apresentada de forma diferente em diversos dispositivos
    19. 19. “Uma grid flexível, com imagens flexíveis e que incorpore media queries para criar um layout adaptável e responsivo” Ethan Marcotte (@beep) http://www.alistapart.com/articles/responsive-web-design/
    20. 20. Mobile design
    21. 21.  Grid Flexível Imagens Flexíveis Media Queries
    22. 22.  Grid flexível  Definindo tamanho em proporção ▪ % em vez de px, cria o fluid layout ▪ imagens também podem utilizar esta técnica CSS3 Media Queries  Estilo condicional  Permite a você definir apresentações para específicos tamanhos de tela, dispositivos e mais Jeffrey Zeldman: “It’s what some of us were going for with ‘liquid’ web design back in the 1990s, only it doesn’t suck.”
    23. 23.  Utilize Eric Meyer CSS Reset Divida o site em módulos, ou partes, de forma que possam ser movidas e redimensionadas conforme a necessidade Utilize em’s e % para dimensionar tamanhos e larguras Elemento / contexto = resultado Não arredonde casas decimais
    24. 24.  Esta regra diz para a imagem não exceder a largura do container. Overflow: hidden também funciona.
    25. 25.  Use Javascript para carregar imagens no tamanho apropriado  https://github.com/filamentgroup/responsive- images Problemas de redimensionamento  http://unstoppablerobotninja.com/entry/fluid- images
    26. 26.  min-width: referência as dimensões do viewport (área que o web site aparece) min-device-width referencia as dimensões de tela do dispositivos (talvez a forma mais segura para identificar dispositivos, iPad, iPhone, etc.) É possível selecionar baseado em dpi não somente width É possível selecionar baseado em profundidade de cores
    27. 27. O que nós podemos testar width • color height • color-index device-width • monochrome device-height • resolution orientation • scan aspect-ratio • grid device-aspect-ratio http://www.w3.org/TR/css3-mediaqueries/
    28. 28.  Antes de iniciar com smartfones, precisamos adicionar isto na seção head do nosso HTML. A propriedade Initial-scale configura o nível de zoom para 1.0 ou 100%, então o browsers viewport sabe que irá mostrar um website igual a largura da tela do dispositivo e não no seu layout padrão.
    29. 29.  Consolidação Web browsers são mais compatíveis com padrões de mercado  Google Chrome: Webkit  Safari: Webkit  Firefox: Gecko  IE8 é muito bom em relação aos anteriores
    30. 30.  Opera 9.5+ Firefox 3.5+ Safari 3 Chrome Mobile Webkit Opera Mobile
    31. 31. code.google.com/p/css3-mediaqueries-js/ IE8 e anteriores Firefox 1 & 2 Safari 2
    32. 32.  Android: Chrome: Webkit iOS: Safari: Webkit Blackberry: Webkit (últimas versões)
    33. 33.  Faixa de dispositivos que o conteúdo será visto Como o layout será apresentado de forma eficiente em diferentes plataformas O tamanho padrão de imagens não deve estar baseado no layout alvo padrão (você pode ter algumas imagens diferentes para dispositivos diferentes). Tenha um plano para uma diversidade de largura de telas

    ×