Introdução as práticas de Desenvolvimento Web com Design Responsivo

Apresentação de Introdução as práticas do Desenvolvimento Web com Design Responsivo, realizada no 4° Meditec - Medianeira In Technology em Medianeira - PR.
Autores:
Anderson Rodrigo Davi - andersonrdavi@gmail.com;
Régis Eduardo Weizenmann Gregol - regiseduardogregol@gmail.com.

Código Fonte: http://github.com/bicoco/agenda-meditec
Exemplo layout fixo: http://agendameditec.herokuapp.com/index.html
Exemplo layout responsivo: http://agendameditec.herokuapp.com/responsivo.html

Transcript

1. Introdução as práticas de Desenvolvimento Web com Design Responsivo Meditec 2013 Anderson Davi andersonrdavi@gmail.com Régis Eduardo regiseduardogregol@gmail.com
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. Introdução O que é web design responsivo? É um web design que responde a quaisquer dispositivos com diferentes resoluções de tela e, devido a uma série de técnicas é bem apresentado em qualquer um deles. Como surgiu? Tudo começou em um blog chamado A List Part de Ethan Marcotte. Em 2010, ele publicou um artigo com o título Responsive Web Design dando sugestões e explicações de seus conceitos para o que ele chamou de web design responsivo.
4. Introdução Porque design responsivo? "Web não é mais sinônimo de desktops e notebooks. Novos meios de acesso, novos usuários, novos hábitos." Lopes, 2012.
5. Site Mobile ou Site Responsivo?
6. Sites Mobile UOL http://m.uol.com.br GLOBO http://m.globo.com/
7. Sites Responsivos • MediaQueries http://mediaqueri.es/ • Highway Hurricanes http://www.highwayhurricanes.com/
14. Resoluções de tela Fonte: ZEMEL (2012, p.21).
15. Técnicas do design responsivo As 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ção atual da tela.
16. Vamos praticar?
17. Layout Fluído
18. Tipos de Medida do CSS Pixel (px): A mais usada em folhas de estilo (CSS). É uma unidade de medida fixa. Um píxel, representa um ponto não divisível na tela. Point (pt): Pontos são mais utilizados em folhas de estilo de impressão. Um ponto é igual a 1/72 polegadas e também são medidas fixas.
19. Tipos de Medida do CSS Ems (em): Ems são utilizados frequentemente para tamanhos de fonte. São unidades escaláveis. 1em representa o tamanho da fonte do elemento pai. Porcentagem (%): Unidade semelhante com "em". Unidade mais adaptável, pois se adequa a diferentes resoluções de tela. Boas práticas: • Utilizar "em" para tamanhos de fonte; • Utilizar "%" para elementos de bloco.
20. Elementos vs Textos Elementos são flexíveis, podem se ajustar ao espaço de tela disponível. Textos não são flexíveis.
21. Vamos praticar?
22. Recursos Flexíveis
23. Recursos Flexíveis • imagens • vídeos • object • embed • iframe
24. Vamos praticar?
25. Media Queries
26. Media Queries Media Types: Recomendação da W3C, desde o CSS2. Apresentar o site 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.
27. Media Queries Exemplos 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; } }
28. Vamos praticar?
29. Metatag viewport
30. Metatag viewport • Descobrindo o tamanho da viewport ◦ http://benfrain.com/downloads/respond.html
31. 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 da tela 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 da tela do dispositivo. initial-scale Define a escala inicial do viewport. user-scalable Define a possibilidade de o usuário fazer “zoom” em um determinado lugar da tela. É ativado quando o usuário bate duas vezes com o dedo em um lugar da tela.
32. Responsivo ou não? • O que vale a pena? ◦ Montar layout responsivo ou site específico pra mobile ? • Vantagens • Desvantagens • Bootstrap
33. 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/
34. 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/
35. Referências ZEMEL, Tárcio. Web design Responsivo, Páginas adaptáveis para todos os dispositivos. 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/>
36. 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
37. Obrigado!