Introdução as práticas de desenvolvimento web com design responsivo

1,851 views
1,704 views

Published on

Apresentação de Introdução as práticas de Desenvolvimento Web com Design Responsivo utilizada no 4° Meditec - Medianeira In Technology, realizado em Medianeira - PR.

Autores:
Anderson Rodrigo Davi - andersonrdavi@gmail.com;
Régis Eduardo Weizenmann Gregol - regiseduardogregol@gmail.com.

Código fonte disponível no Github: http://github.com/bicoco/agenda-meditec
Exemplo layout fixo: http://agendameditec.herokuapp.com/index.html
Exemplo layout responsivo: http://agendameditec.herokuapp.com/responsivo.html

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total views
1,851
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
78
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Introdução as práticas de desenvolvimento web com design responsivo

  1. 1. Introdução as práticas deDesenvolvimento Web comDesign ResponsivoMeditec 2013Anderson Daviandersonrdavi@gmail.comRégis Eduardoregiseduardogregol@gmail.com
  2. 2. Roteiro● Introdução● Sites mobiles ou sites responsivos● Resoluções de telas● Técnicas do design responsivo● Tipos de Medidas no CSS● Media Queries● Metatag ViewPort● Ferramentas
  3. 3. IntroduçãoO que é web design responsivo?É um web design que responde a quaisquer dispositivos com diferentesresoluções de tela e, devido a uma série de técnicas é bem apresentado emqualquer um deles.Como surgiu?Tudo começou em um blog chamado A List Part de Ethan Marcotte. Em2010, ele publicou um artigo com o título Responsive Web Design dandosugestões e explicações de seus conceitos para o que ele chamou de webdesign responsivo.
  4. 4. IntroduçãoPorque design responsivo?"Web não é mais sinônimo de desktops e notebooks. Novos meios deacesso, novos usuários, novos hábitos." Lopes, 2012.
  5. 5. Site Mobile ouSite Responsivo?
  6. 6. Sites MobileUOLhttp://m.uol.com.brGLOBOhttp://m.globo.com/
  7. 7. Sites Responsivos● MediaQuerieshttp://mediaqueri.es/● Highway Hurricaneshttp://www.highwayhurricanes.com/
  8. 8. Resoluções de telaFonte: ZEMEL (2012, p.21).
  9. 9. Técnicas dodesign responsivoAs três técnicas do Web Design Responsivo:● Layout Fluído: Também chamado de Flexible Grid Layout, adaptação"natural", evita barra de rolagens;● Recursos Flexíveis: Imagens flexíveis, vídeos, etc;● Media Queries: Reposicionamento de elementos conforme a resoluçãoatual da tela.
  10. 10. Vamos praticar?
  11. 11. Layout Fluído
  12. 12. Tipos de Medida do CSSPixel (px): A mais usada em folhas de estilo (CSS). É uma unidade demedida fixa. Um píxel, representa um ponto não divisível na tela.Point (pt): Pontos são mais utilizados em folhas de estilo deimpressão. Um ponto é igual a 1/72 polegadas e também são medidasfixas.
  13. 13. Tipos de Medida do CSSEms (em): Ems são utilizados frequentemente para tamanhos de fonte.São unidades escaláveis. 1em representa o tamanho da fonte doelemento pai.Porcentagem (%): Unidade semelhante com "em". Unidade maisadaptável, pois se adequa a diferentes resoluções de tela.Boas práticas:● Utilizar "em" para tamanhos de fonte;● Utilizar "%" para elementos de bloco.
  14. 14. Elementos vs TextosElementos são flexíveis, podem se ajustar aoespaço de tela disponível.Textos não são flexíveis.
  15. 15. Vamos praticar?
  16. 16. RecursosFlexíveis
  17. 17. Recursos Flexíveis● imagens● vídeos● object● embed● iframe
  18. 18. Vamos praticar?
  19. 19. Media Queries
  20. 20. Media QueriesMedia Types: Recomendação da W3C, desde o CSS2. Apresentar osite conforme a media.Tais como:● all: Folha de estilo para todos os dispositivos;● print: Utilizada para layout de impressão;● screen: Utilizada para telas coloridas de computador.Também existem outras medias como:braille, embosed, handheld, projection, speech, tty, tv.
  21. 21. Media QueriesExemplos de Media Queries.<!-- no html --><link rel="stylesheet" href="style.css" media="all and (max-width: 320px)">/** No arquivo */@media all and (max-width: 320px) {h1 {font-size: 0.7em;}}
  22. 22. Vamos praticar?
  23. 23. Metatag viewport
  24. 24. Metatag viewport● Descobrindo o tamanho da viewport○ http://benfrain.com/downloads/respond.html
  25. 25. Metatag viewport<meta name="viewport" content="">width Define uma largura para o viewport. Os valores podem ser em PX ou“device-width”, que determina automaticamente um valor igual a largura datela do dispositivo.height Define uma altura para o viewport. Os valores podem ser em PX ou“device-height”, que determina automaticamente um valor igual a altura datela do dispositivo.initial-scale Define a escala inicial do viewport.user-scalable Define a possibilidade de o usuário fazer “zoom” em um determinado lugarda tela. É ativado quando o usuário bate duas vezes com o dedo em umlugar da tela.
  26. 26. Responsivo ou não?● O que vale a pena?○ Montar layout responsivo ou site específico pramobile ?● Vantagens● Desvantagens● Bootstrap
  27. 27. Ferramentas● Responsive Play - Sergio Lopes○ http://sergiolopes.github.io/responsive-play/● Responsive web design testing tool○ http://mattkersley.com/responsive/● Screenfly○ http://quirktools.com/screenfly/
  28. 28. Curiosidades● CSS3 font-size techniques○ http://css-tricks.com/viewport-sized-typography/● Imagens Responsivas○ http://tableless.com.br/3-parametros-de-html-que-voce-dev-usar-em-um-futuro-proximo/
  29. 29. ReferênciasZEMEL, Tárcio. Web design Responsivo, Páginas adaptáveis para todos osdispositivos. 2012, Casa do código.LOPES, Sérgio. Design Resposivo Por Uma Web Única. 2012. Disponível em:<http://sergiolopes.org/responsive-web-design/>EIS, Diego. Manipulando a metatag viewport. Disponível em: <http://tableless.com.br/manipulando-metatag-viewport/>
  30. 30. Código Fonte● Github○ https://github.com/bicoco/agenda-meditec● Exemplo layout fixo:○ http://agendameditec.herokuapp.com/index.html● Exemplo layout responsivo:○ http://agendameditec.herokuapp.com/responsivo.html
  31. 31. Obrigado!

×