Introdu§£o as prticas de desenvolvimento web com design responsivo

  • View
    1.233

  • Download
    1

Embed Size (px)

DESCRIPTION

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

Text of Introdu§£o as prticas de desenvolvimento web com design responsivo

  • 1. Introduo as prticas deDesenvolvimento Web comDesign ResponsivoMeditec 2013Anderson Daviandersonrdavi@gmail.comRgis Eduardoregiseduardogregol@gmail.com
  • 2. Roteiro Introduo Sites mobiles ou sites responsivos Resolues de telas Tcnicas do design responsivo Tipos de Medidas no CSS Media Queries Metatag ViewPort Ferramentas
  • 3. IntroduoO que web design responsivo? um web design que responde a quaisquer dispositivos com diferentesresolues de tela e, devido a uma srie de tcnicas bem apresentado emqualquer um deles.Como surgiu?Tudo comeou em um blog chamado A List Part de Ethan Marcotte. Em2010, ele publicou um artigo com o ttulo Responsive Web Design dandosugestes e explicaes de seus conceitos para o que ele chamou de webdesign responsivo.
  • 4. IntroduoPorque design responsivo?"Web no mais sinnimo de desktops e notebooks. Novos meios deacesso, novos usurios, novos hbitos." Lopes, 2012.
  • 5. Site Mobile ouSite Responsivo?
  • 6. Sites MobileUOLhttp://m.uol.com.brGLOBOhttp://m.globo.com/
  • 7. Sites Responsivos MediaQuerieshttp://mediaqueri.es/ Highway Hurricaneshttp://www.highwayhurricanes.com/
  • 8. Resolues de telaFonte: ZEMEL (2012, p.21).
  • 9. Tcnicas dodesign responsivoAs trs tcnicas do Web Design Responsivo: Layout Fludo: Tambm chamado de Flexible Grid Layout, adaptao"natural", evita barra de rolagens; Recursos Flexveis: Imagens flexveis, vdeos, etc; Media Queries: Reposicionamento de elementos conforme a resoluoatual da tela.
  • 10. Vamos praticar?
  • 11. Layout Fludo
  • 12. Tipos de Medida do CSSPixel (px): A mais usada em folhas de estilo (CSS). uma unidade demedida fixa. Um pxel, representa um ponto no divisvel na tela.Point (pt): Pontos so mais utilizados em folhas de estilo deimpresso. Um ponto igual a 1/72 polegadas e tambm so medidasfixas.
  • 13. Tipos de Medida do CSSEms (em): Ems so utilizados frequentemente para tamanhos de fonte.So unidades escalveis. 1em representa o tamanho da fonte doelemento pai.Porcentagem (%): Unidade semelhante com "em". Unidade maisadaptvel, pois se adequa a diferentes resolues de tela.Boas prticas: Utilizar "em" para tamanhos de fonte; Utilizar "%" para elementos de bloco.
  • 14. Elementos vs TextosElementos so flexveis, podem se ajustar aoespao de tela disponvel.Textos no so flexveis.
  • 15. Vamos praticar?
  • 16. RecursosFlexveis
  • 17. Recursos Flexveis imagens vdeos object embed iframe
  • 18. Vamos praticar?
  • 19. Media Queries
  • 20. Media QueriesMedia Types: Recomendao 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 impresso; screen: Utilizada para telas coloridas de computador.Tambm existem outras medias como:braille, embosed, handheld, projection, speech, tty, tv.
  • 21. Media QueriesExemplos de Media Queries./** No arquivo */@media all and (max-width: 320px) {h1 {font-size: 0.7em;}}
  • 22. Vamos praticar?
  • 23. Metatag viewport
  • 24. Metatag viewport Descobrindo o tamanho da viewport http://benfrain.com/downloads/respond.html
  • 25. Metatag viewportwidth Define uma largura para o viewport. Os valores podem ser em PX oudevice-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 oudevice-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 usurio fazer zoom em um determinado lugarda tela. ativado quando o usurio bate duas vezes com o dedo em umlugar da tela.
  • 26. Responsivo ou no? O que vale a pena? Montar layout responsivo ou site especfico pramobile ? Vantagens Desvantagens Bootstrap
  • 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. 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. RefernciasZEMEL, Trcio. Web design Responsivo, Pginas adaptveis para todos osdispositivos. 2012, Casa do cdigo.LOPES, Srgio. Design Resposivo Por Uma Web nica. 2012. Disponvel em:EIS, Diego. Manipulando a metatag viewport. Disponvel em:
  • 30. Cdigo 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. Obrigado!