Um subset do curso de HTML/CSS Patterns

1. globo
.com
GBD Pattern
Leonardo Quixadá

2. 1 Apresentação

3. 2 Problema

4. Problemas em HTML
‣ Não existe um pattern para solucionar os problemas
mais comuns de implementação
‣ Div-itis
‣ Class-itis

5. Problemas em HTML
‣ Div-itis
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

6. Problemas em HTML
‣ Class-itis
<div class="cnn_adtitle"><img src="http://i.cdn.turner.com/cnn/.e/img/3.0/
global/misc/advertisement.gif" alt="" border="0" height="5" width="58"/></div>
<div class="cnn_divline"></div>
</div>
<div class="cnn_hppersonal">
<div class="cnn_pad12top"></div>
<div class="cnn_hppersonalhdr">
<div class="cnn_hppersonalhdr1"><a href="/SPORT/olympics/results-and-schedule/?
hpt=hp_r1">LATEST OLYMPICS RESULTS »</a></div>
<div class="cnn_divline"></div>
</div>
<div id="cnn_olympic_widget"></div>
</div>
<div class="cnn_hppersonal">
<div class="cnn_pad12top"></div>
<div class="cnn_hppersonalhdr">
<div class="cnn_hppersonalhdr1">MARKETS</div>
<div class="cnn_divline"></div>
</div>

7. Padrões de Desenvolvimento
‣ Rails: MVC
‣ Django: MTV
‣ CSS: Grid e Reset.css
‣ HTML: Tableless

8. 3 GBD Pattern

9. GBD Pattern
‣ Grid
‣ Box
‣ Data

10. GBD Pattern
‣ Válido (W3C friendly)
‣ Semântico
‣ Enxuto
‣ Otimizado para SEO (Google friendly)
‣ Acessível
‣ Progressive Enhancement
‣ Fácil de entender

11. 3.1 Grids

12. Grids
“Todo trabalho de design envolve a solução de problemas
em níveis visuais e organizativos. Figuras, símbolos, massa de
textos, títulos e tabelas devem se reunir para transmitir
informação. O grid é uma maneira de juntar esses
elementos.”
- Luiz Agner, designer, arquiteto e professor
Fonte: http://www.slideshare.net/agner/a-construo-do-grid

13. Grids
“O grid introduz uma ordem sistemática num leiaute e
permite que o designer diagrame uma grande quantidade de
informação. Também permite vários colaboradores num
mesmo projeto.”
- Luiz Agner, designer, arquiteto e professor
Fonte: http://www.slideshare.net/agner/a-construo-do-grid

14. Grids
“Vantagens do grid:
- Clareza
- Eficiência
- Economia
- Identidade”
- Luiz Agner, designer, arquiteto e professor
Fonte: http://www.slideshare.net/agner/a-construo-do-grid

15. Grids
‣ Padrão de-facto para layouts em CSS.
‣ Permite o intercâmbio de componentes entre
produtos
‣ Define o espaço horizontal que os componentes
podem ocupar (o conteúdo dos componentes
definem o espaço vertical)
‣ Dada uma largura fixa, pode-se compor “linhas” com
até 12 colunas.

16. Grids

17. colunas
Grids

18. Grids
linhas

19. Grids: Colunas
‣ 1 unidade ou coluna de 1:
<div class=”span1”></div>
width (60px)

20. Grids: Colunas
‣ 2 unidades:
span1 span1
60px 20px 60px
‣ coluna de 2:
span2
140px
<div class=”span2”></div>

21. Grids: Colunas
‣ 3 unidades:
span1 span1 span1
60px 20px 60px 20px 60px
span1 span2
60px 20px 140px
‣ coluna de 3:
span3
220px
<div class=”span3”></div>

22. Grids: Colunas
‣ 4 unidades:
span1 span1 span1 span1
60px 20px 60px 20px 60px 20px 60px
span1 span2 span1
60px 20px 140px 20px 60px
‣ coluna de 4:
span4
300px
<div class=”span4”></div>

23. Grids

24. Grids: Linhas
‣ As linhas são definidas pela classe .row
row
span2 span8 span2
<div class=”row”>
<div class=”span2”></div>
<div class=”span8”></div>
<div class=”span2”></div>
</div>

25. Grids: Aninhamento
‣ Pode-se ter linhas dentro de outras linhas
span4
span1 span2 span1
<div class=”span4”>
<div class=”row”>
<div class=”span1”></div>
<div class=”span2”></div>
<div class=”span1”></div>
</div>
</div>

26. Grids: Exemplo
header
1 2
3 4 5
footer

27. Demo de Grid com Box
http://jsfiddle.net/lquixada/xp8fC/

28. 3.2 Box

29. Box
‣ Pattern que subdivide páginas web em pequenos
“módulos” autosuficientes.
‣ É como um pequeno chassi para os componentes
que vão preencher os compartimentos da estante.
‣ Juntando-se vários componentes formam-se
composições sólidas.

30. Box
‣ Podem ser utilizados por widgets, destaques, forms,
menus, etc...
‣ Baseado nas novas tags do HTML 5: article, section,
aside, header e footer.

31. Página

32. Página

33. Página

34. Página

35. Menu & Widget Lateral

36. Menu & Widget Lateral
Header

37. Menu & Widget Lateral
Content

38. Menu & Widget Lateral
Footer

39. Form

40. Form

41. Form

42. Form

43. Widgets Centrais

44. Widgets Centrais

45. Widgets Centrais

46. Widgets Centrais

47. Pattern Visual
Container
Header
Content
Footer

48. Pattern Visual
Container
Títulos, menus, logos...
Todo o conteúdo
Links “veja mais”, botões, informações extras...

49. Pattern Box
<section class=”box”>
<header>
...
</header>
<section class=”content”>
...
</section>
<footer>
...
</footer>
</section>

50. Pattern Box
<section class=”box”>
<header>
...
</header>
<section class=”content”> opcionais
...
</section>
<footer>
...
</footer>
</section>

51. Pattern Box: HTML 4
<div class=”box”>
<div class=”header”>
...
</div>
<div class=”content”>
...
</div>
<div class=”footer”>
...
</div>
</div>

52. Pattern Box 2
<article class=”materia”>
<header>
...
</header>
<section class=”content”>
...
</section>
<footer class=”base”>
...
</footer>
</article>

53. Pattern Box 3
<aside class=”box”>
<header>
...
</header>
<section class=”content”>
...
</section>
<footer>
...
</footer>
</aside>

54. Exemplo: Box Plantão
<section class=”box box-plantao”>
<header>
...
</header>
<section class=”content”>
...
</section>
<footer>
...
</footer>
</section>

55. Exemplo: Box Plantão
<div class=”box box-plantao”>
<div class=”header”>
...
</div>
<div class=”content”>
...
</div>
<div class=”footer”>
...
</div>
</div>

56. Exemplo: Box Plantão
<div class=”box box-plantao”>
<div class=”header”>
...
</div> <!-- .header -->
<div class=”content”>
...
</div> <!-- .content -->
<div class=”footer”>
...
</div> <!-- .footer -->
</div> <!-- .box-plantao -->

57. Pattern Box: Aninhamento
‣ Pattern como uma estrutura HTML qualquer
<ul> <form> <table>
<li></li> <fieldset> <tr><th></th></tr>
<li></li> <label></label> <tr><td></td></tr>
<li></li> <input /> <tr><td></td></tr>
</ul> </fieldset> </table>
...
</form>

58. Pattern Box: Aninhamento
‣ E como tal ele pode ser aninhado.
<section class=”box”>
<header></header>
<section class=”content”>
<section class=”box”>
<header></header>
<section class=”content”></section>
</section>
<section class=”box”>
<header></header>
<section class=”content”></section>
<footer></footer>
</section>
</section>
</section>

59. Demo de Grid com Box
http://jsfiddle.net/lquixada/scTcU/

60. Pitfalls
‣ Favor, não misturar box com classes do grid
Exemplo: <section class=”box box-plantao span4”>
‣ Evitar qualquer tipo de <div> dentro do
box, inclusive do próprio grid.

61. 3.3 Dados

62. Dados
‣ Utilização de elementos semânticos para descrever
dados através de tags e/ou classes.
‣ É uma inspiraçao que veio de Microformatos e, mais
recentemente, de Microdados.
‣ Não serve paras os search engines, apenas melhora a
clareza do código.

63. Mas antes...

64. Microdados
“Microdados é uma especificação WHATWG HTML5
usada para aninhar semântica dentro de conteúdos
existentes em páginas web.
Isso é feito usando atributos específicos: itemscope,
itemtype, itemid, itemprop e itemref.
Search engines, web crawlers, e navegadores podem
extrair e processar microdados a partir de uma página
web e usar isso para prover uma experiência de
navegação mais rica para os usuários.”
- Wikipedia

65. Microdados: Exemplo
<div>
<h1>Avatar</h1>
<span>
Director:
James Cameron
(born August 16, 1954)
</span>
<span>Science fiction</span>
<a href="/movies/avatar.html">Trailer</a>
</div>

66. Microdados: Exemplo
<div itemscope>
<h1>Avatar</h1>
<span>
Director:
James Cameron
(born August 16, 1954)
</span>
<span>Science fiction</span>
<a href="/movies/avatar.html">Trailer</a>
</div>

67. Microdados: Exemplo
<div itemscope itemtype="http://schema.org/Movie">
<h1>Avatar</h1>
<span>
Director:
James Cameron
(born August 16, 1954)
</span>
<span>Science fiction</span>
<a href="/movies/avatar.html">Trailer</a>
</div>

68. Microdados: Exemplo
<div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<span>
Director:
<span itemprop="director">James Cameron</span>
(born August 16, 1954)
</span>
<span itemprop="genre">Science fiction</span>
<a href="/movies/avatar.html" itemprop="trailer">Trailer</a>
</div>

69. Microdados: Exemplo
<div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<span itemprop="director" itemscope itemtype="http://schema.org/
Person">
Director:
<span itemprop="name">James Cameron</span>
(born <span itemprop="birthDate">August 16, 1954)</span>
</span>
<span itemprop="genre">Science fiction</span>
<a href="/movies/avatar.html" itemprop="trailer">Trailer</a>
</div>

70. Microdados
‣ Mais exemplos em: http://schema.org

71. Microformatos
‣ Cartões
<div class="vcard">
<span class="fn">Nome</span>
<span class="org">Organização</span>
<span class="tel">604-555-1234</span>
<a class="url" href="http://site.com/">Website</a>
</div>
‣ Calendário
‣ Reviews

72. De volta à nossa
programação normal...

73. Dados
‣ Por que não fazer nosso próprio formato?
‣ HTML com mais semântica e mais entendível.

74. Box Plantão
<section class=”box box-plantao”>
<header>
...
</header>
<section class=”content”>
...
</section>
<footer>
...
</footer>
</section>

75. Box Plantão
<section class=”box box-plantao”>
<header>
...
</header>
<section class=”content”>
...
</section>
<footer>
...
</footer>
</section>

76. Box Plantão
<section class=”box box-plantao”>
...
<section class=”content”>
<ul>
<li> ... </li>
<li> ... </li>
...
</ul>
</section>
...
</section>

77. Box Plantão
<ul>
<li>
<a class=”noticia” href=”#”>
<img class=”thumb”
src=”foto.jpg” />
<span class=”chapeu”></span>
<span class=”titulo”></span>
</a>
</li>
...
</ul>

78. Box Plantão
<ul>
<li>
<a class=”noticia” href=”#”>
<img class=”thumb”
src=”foto.jpg” />
<span class=”chapeu”></span>
<span class=”titulo”></span>
</a>
</li>
...
</ul> não dizem nada

79. Box Plantão
<ul>
<li>
<a class=”noticia” href=”#”>
<img class=”thumb”
src=”foto.jpg” />
<span class=”chapeu”></span>
<span class=”titulo”></span>
</a>
</li>
...
</ul>
semântico!!!

80. Vejamos rapidamente
outro box...

81. Box Previsão do Tempo

82. Box Previsão do Tempo
Vc consegue classificar semanticamente o
content do box?

83. Outro exemplo....

84. Outro exemplo....
div.brother-main

85. Outro exemplo....
cite.brother-tweet
span.brother-idade
span.brother-cidade-natal
span.brother-signo cite.brother-tweet-tempo
span.brother-time

86. Demo de Grid com Box com Dados
http://jsfiddle.net/lquixada/WLZ8V/

87. Dica!
‣ Div e span são “tags fallback,” quando não
houver uma tag mais semântica, use-as.
‣ Use <div> para descrever estrutura
‣ Use <span> para descrever dados

88. Pitfalls
‣ Favor, não misturar box com classes do grid
Exemplo: <section class=”box box-plantao span4”>
‣ Evitar qualquer tipo de <div> dentro do
box, inclusive do próprio grid.

89. Pitfalls
‣ Não colocar elementos nativamente block
dentro de elementos nativamente inline
<li>
<a class=”noticia” href=”#”>
<img class=”thumb”
src=”foto.jpg” />
<div class=”chapeu”>(chapeu)</div>
<h6>(titulo da noticia)</h6>
</a>
</li>

90. GBD Pattern
‣ Válido (W3C friendly)
‣ Semântico
‣ Enxuto
‣ Otimizado para SEO (Google friendly)
‣ Acessível
‣ Progressive Enhancement
‣ Fácil de entender

91. GBD Pattern

92. Obrigado!
Leonardo Quixadá