Responsive web design
Transferir como PPTX, PDF3 gostaram1,476 visualizações
O documento discute o design responsivo para websites, propondo uma abordagem flexível com grid, imagens e media queries que permitem a adaptação do layout a diferentes telas. O design responsivo garante que a web seja acessível em qualquer dispositivo.
Responsive web design
- 1. Professor Adriano Teixeira de Souza
- 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
- 4. 1280 x 800 Photo: Steve Rhodes
- 5. 16 : 9 Photo: Steve Rhodes
- 6. Netbook tela de 8.9” Photo: Steve Rhodes
- 7. Várias telas
- 8. Mais é melhor 5120 x 1600
- 9. 2006 Smart Phones Flickr: photographer
- 10. 9 de Janeiro de 2007 Flickr: photographer
- 11. 2008 Smart Phones Flickr: photographer
- 12. 2009 Smart Phones Flickr: photographer
- 14. 2010 iPad – Vendas de 3 milhões de dispositivos em 80 dias Flickr: photographer
- 15. iPhone 4 – 960 x 640 @ 326 ppi “Retina Display” Flickr: photographer
- 17. A web deve ser acessível por qualquer pessoa em qualquer lugar.
- 18. 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.
- 19. 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
- 20. “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/
- 22. Mobile design
- 23. Grid Flexível Imagens Flexíveis Media Queries
- 24. 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.”
- 25. 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
- 31. Esta regra diz para a imagem não exceder a largura do container. Overflow: hidden também funciona.
- 32. Use Javascript para carregar imagens no tamanho apropriado https://github.com/filamentgroup/responsive- images Problemas de redimensionamento http://unstoppablerobotninja.com/entry/fluid- images
- 33. 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
- 36. 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/
- 37. 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.
- 38. 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
- 39. Opera 9.5+ Firefox 3.5+ Safari 3 Chrome Mobile Webkit Opera Mobile
- 40. code.google.com/p/css3-mediaqueries-js/ IE8 e anteriores Firefox 1 & 2 Safari 2
- 41. Android: Chrome: Webkit iOS: Safari: Webkit Blackberry: Webkit (últimas versões)
- 42. 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
Notas do Editor
- #4: 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
- #5: Posteriormente surgiram os notebooks com resoluções de 1280 x 800Tipo de tela um pouco diferente, mas nada muito difícil de se trabalhar
- #6: 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
- #7: 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
- #8: 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)
- #9: Para completar ainda tem aquele nerd que quer não gosta do alt+tabQuer ver várias telas ao mesmo tempo
- #10: Em 2006 começou aparecer os primeiros smartfones Ainda eram aparelhos muito limitadosNão dava para se fazer muita coisa prática
- #11: 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
- #12: Em 2008 vieram outros smartfones Nada que chegasse próximo ao iPhone mas já era uma evolução
- #13: Em 2009 surgiram novas versões de smartfones
- #14: 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
- #15: 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
- #16: 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
- #17: 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
- #25: Show example of Amscan.org