Web Design Responsivo

  • View
    277

  • Download
    1

Embed Size (px)

DESCRIPTION

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.

Text of Web Design Responsivo

  • 1. Web Design Responsivo Victor Melo Programao para Internet I ADS - Senac

2. 1. Introduo 3. O que web design responsivoWeb Design Responsivo uma abordagem de web design destinada a elaborar sites para fornecer uma tima experincia de visualizao, fcil leitura e navegao com um mnimo de redimensionamento e visionamento, para uma ampla gama de dispositivos (de monitores de computador a telefones celulares).Wikipdia 4. O que web design responsivoSiteDesignContedoDiversos DispositivosOu seja: 5. O que web design responsivo 6. Case Revista WAntes:http://revistaw.com.br/ 7. Case Revista Whttp://revistaw.com.br/Depois: 8. 2. Na prtica 9. Fundao FlexvelMedia QueriesGrids FludosMobile FirstOtimizao Tpicos 10. Fundao Flexvel o esqueleto bsico do layout: 11. Fundao FlexvelNa mo, com medidas relativas e um pouco de matemticaGrids FludosPode ser feita de duas formas: 12. Fundao Flexvel - Medidas(Quase) tudo relativoPX para definir altura ou largura mximaEM ou REM para definir tamanho de fontemax-width: 1200px; height: 700px;% para definir largurawidth: 70%;Font-size: 1.2em;Font-size: 1.2rem; 13. Fundao Flexvel - Fonte PX: Medida na fonte :Medida absoluta. Usurio no pode alterar o tamanho da fonte atravs de configuraes do browser.EM/REM: Adaptvel,Flexvel, melhor acessibilidadeMedida relativa. Usurio pode alterar o tamanho da fonte atravs de configuraes do browser.Preciso, inflexvel, acessibilidade ruim 14. Fundao Flexvel - 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 Frmula EM: OBS:Com EM, pode-se aplicar o font- size no body.Com REM, apenas no html 15. Fundao Flexvel - Fonte EM relativo ao font-size do continer REM relativo ao font-size do elemento htmlbody { font-size: 20%;}html { font-size: 62.5%; } Body .p1 { font-size: 1rem; } No 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. Fundao Flexvel - FonteExemplo EM vs REM 17. Fundao Flexvel Containers e ImagensLargura em porcentagem;Usar max-width ou min-width quando necessrio. #container{ width: 90%; max-width: 850px; } 2 Regras 18. Media Queriesconsists 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. Media Queries Ex:All: Para todos os dispositivos.Braille: Para dispositivos tteis.Handheld: Para dispositivos portteis, geralmente com telas pequenas e banda limitada.Print: Para impresso em papel.Screen: Para monitores ou dispositivos com telas coloridas e resoluo adequada. Media Types: definem para que tipo de media um certo cdigo CSS direcionado. 20. Media QueriesHandheld ou Screen? Screen Problema: Falta de padronizao de aparelhos. 21. Media Queries No HTML: @media screen and (max-width: 600px) { p { font-size: 20px; color: red; } }No CSS:Estas definies so conhecidas como breakpoints.Dica: Soluo: Definir estilo por tamanho de tela, e no por dispositivo utilizado. 22. Media Queries @media only screen and (max-width: 480px) { body{ font-size:25em; } } 23. Fundao Flexvel - Viewport Viewport o quanto de contedo cabe na tela, em CSS pixels, no 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 equivalncia entre estes varia, dependendo do aparelho. 24. Fundao Flexvel - Viewport Sem tela retina: 163dpiCom tela retina:326dpiDois aparelhosmesmo tamanho de telaDpis diferentes Resolues diferentes Por isso, devemos nos preocupar com o pixel do dispositivo, e no a sua resoluo. 25. Coloque no o seguinte trecho: Fundao Flexvel - ViewportComo definir que o parmetro o pixel do dispositivo: 26. Exemplo Site Responsivo Responsivo na mo 27. Frameworks como Bootstrap utilizam classes para definir grids: Grids Fludos http://getbootstrap.com/ 28. Exemplo Site Responsivo Bootstrap Responsivo com Bootstrap 29. Mobile First 30. Mobile First - CaractersticasCapacidades tcnicas mais interessantesacelerometroGPSmultitouchgiroscpioetc. 31. Mobile First - Caractersticas FocoFocar nas aes essenciais do usurio. 32. Mobile First - CaractersticasAteno dobrada com:Em mobiles, decidir onde cada boto vai ser posicionado to essencial quanto a programao server-side ou um HTML bem feito.Arquitetura de InformaoUsabilidadeAcessibilidade 33. Otimizao Pensar na experincia do usurio no apenas fazer seu site responsivo. Mas tambm, torn-lo acessvel. http://browserdiet.comhttp://browserdiet.com 34. OtimizaoAlgumas dicas do BrowserDiet:Evite cdigo inline/incorporadoPrefira a @importComprima sua folha de estilo (CSS)Combine vrios arquivos CSS em um s http://browserdiet.com 35. 3. Internet alm dos sites 36. Internet um ambiente de desenvolvimento de aplicaes, e no apenas de sites comerciais. Voc pode usar as tecnologias web pra desenvolver aplicativos e servios.Internet alm dos sites 37. Internet alm dos siteshttp://www.html5gamedevelopment.com/http://browserquest.mozilla.org/ 38. Internet alm dos siteshttp://bjork.com/ 39. Outros cenrios Sites mobile so s o comeo! 40. Refernciashttp://blog.popupdesign.com.br/desenvolvimento-responsivo-e-viewport/http://browserdiet.com/pt/http://tableless.com.br/ http://sergiolopes.org/responsive-web-design/ 41. Obrigado! Victor Melo victordossantosmelo@gmail.com fb.com/victormelooo