Slides da apresentação e do workshop de responsivo para iniciantes

1. Responsivo
RES
PON
SIVO!!

2. Sérgio Aragão Kopplin
Desenvolvedor Renascentista
http://koppl.in

3. Sérgio Aragão Kopplin
Desenvolvedor Renascentista

4. Sérgio Aragão Kopplin
Desenvolvedor Renascentista

5. Sérgio Aragão Kopplin
Desenvolvedor Renascentista

6. Sérgio Aragão Kopplin
Desenvolvedor Renascentista

7. Sérgio Aragão Kopplin
Desenvolvedor Renascentista

8. VELHOS TEMPOS DA WEB!
poucos tinham acesso,
poucos tamanhos de tela.

11. 640x480
800x600
1024x768

12. Um pouco do cenário atual:
Hoje, a Web é:
~> amplamente consumida;
~> tem crescimento exponencial;
~> explora novas tecnologias;
~> acessada por diversos dispositivos;
Logo:
~> MUITOS tamanhos de telas, tipos de dispositivos, larguras de banda,
tipos de portabilidade, etc.

16. “MUITOS TAMANHOS
DE TELAS”!!!

17. E o que é responsivo?
Tudo começou com um artigo do blog “A
List Apart” assinado por Ethan Marcotte no
começo de 2010.

19. tela > 1400

20. tela entre: 960 ~ 1400

21. tela entre: 450 ~ 960

22. tela < 450

23. #COMOFAZ? Media Queries!

24. ‘Setando’ o background padrão:
div {
…
background-image: url(../imagem+1700.png);
…
}

25. ‘Setando’ para maiores de 960 e
menores que 1400:
@media (min-width: 961px) and (max-width: 1400) {
div {
…
background-image: url(../imagem+1400.png);
…
}
}

26. ‘Setando’ para maiores de 960 e
menores que 1400:
@media (min-width: 451px) and (max-width: 960) {
div {
…
background-image: url(../imagem-960.png);
…
}
}

27. ‘Setando’ para maiores de 960 e
menores que 1400:
@media (max-width: 450px) {
div {
…
background-image: url(../imagem-450.png);
…
}
}

28. Resumindo:
> 1401: imagem-1700.png;
> 961 && < 1400: imagem-1400.png;
> 451 && < 960: imagem-960.png;
< 450: imagem-450.png.

30. tela < 768
tela > 768

31. Estrutura HTML
body
~ header
~ logo
~ menu
~ section
~ título / texto
~ lista de artigos
~ item da lista
~ texto
~ rodapé
~ texto

32. Arquivos Less:
~ less/base.less
~ less/style.less
Arquivo JS:
~ js/less.min.js
Repositório:
source ~ branch master:
github.com/sergiokopplin
/responsivo-catho
live ~ branch gh-pages:
sergiokopplin.github.io/
responsivo-catho/

34. Variáveis:

35. EM:
A unidade de medida de comprimento em referencia-se ao
tamanho da fonte (letra) do seletor onde for declarada.
em = base de pixels * ele mesmo
body ~ font-size: 16px
2em = 16 x 2 = 32px

36. Começando os trabalhos:

37. Helper:

38. Section principal:

39. Header:

43. Artigos:

44. Artigos:

45. Rodapé:

47. Resumo:

48. Referências:
1. alura.com.br/course/responsivo
2. blog.popupdesign.com.br/design-responsivo-i-o-que-e-e-por-que-usar/
3. alistapart.com/article/responsive-web-design
4. tableless.com.br/bem-um-novo-metodo-para-seu-css/
5. getbem.com/introduction/
6. tableless.com.br/oocss-smacss-bem-dry-css-afinal-como-escrever-css/
7. en.bem.info/method/
8. mediaqueri.es/
9. tableless.com.br/design-responsivo-na-pratica-do-rascunho-ao-digita/
10.maujor.com/tutorial/medidascss.php

49. Obricatho.