globo .com        GBD Pattern        Leonardo Quixadá
1   Apresentação
2   Problema
Problemas em HTML‣   Não existe um pattern para solucionar os problemas    mais comuns de implementação‣   Div-itis‣   Cla...
Problemas em HTML‣   Div-itis                            </div>                        </div>                    </div>   ...
Problemas em HTML‣   Class-itis<div class="cnn_adtitle"><img src="http://i.cdn.turner.com/cnn/.e/img/3.0/global/misc/adver...
Padrões de Desenvolvimento‣   Rails: MVC‣   Django: MTV‣   CSS: Grid e Reset.css‣   HTML: Tableless
3   GBD Pattern
GBD Pattern‣   Grid‣   Box‣   Data
GBD Pattern‣   Válido (W3C friendly)‣   Semântico‣   Enxuto‣   Otimizado para SEO (Google friendly)‣   Acessível‣   Progre...
3.1   Grids
Grids“Todo trabalho de design envolve a solução de problemasem níveis visuais e organizativos. Figuras, símbolos, massa de...
Grids“O grid introduz uma ordem sistemática num leiaute epermite que o designer diagrame uma grande quantidade deinformaçã...
Grids“Vantagens do grid:- Clareza- Eficiência- Economia- Identidade”                                                       ...
Grids‣   Padrão de-facto para layouts em CSS.‣   Permite o intercâmbio de componentes entre    produtos‣   Define o espaço ...
Grids
colunasGrids
Grids        linhas
Grids: Colunas‣   1 unidade ou coluna de 1:            <div class=”span1”></div>                        width (60px)
Grids: Colunas‣   2 unidades:                   span1                span1                   60px    20px         60px‣   ...
Grids: Colunas‣   3 unidades:            span1          span1           span1            60px    20px   60px    20px    60...
Grids: Colunas‣   4 unidades:          span1           span1           span1          span1          60px     20px   60px ...
Grids
Grids: Linhas‣   As linhas são definidas pela classe .row     row           span2             span8            span2    <di...
Grids: Aninhamento‣   Pode-se ter linhas dentro de outras linhas     span4             span1           span2              ...
Grids: Exemplo            header        1            2    3         4      5            footer
Demo de Grid com Boxhttp://jsfiddle.net/lquixada/xp8fC/
3.2   Box
Box‣   Pattern que subdivide páginas web em pequenos    “módulos” autosuficientes.‣   É como um pequeno chassi para os comp...
Box‣   Podem ser utilizados por widgets, destaques, forms,    menus, etc...‣   Baseado nas novas tags do HTML 5: article, ...
Página
Página
Página
Página
Menu & Widget Lateral
Menu & Widget Lateral          Header
Menu & Widget Lateral          Content
Menu & Widget Lateral          Footer
Form
Form
Form
Form
Widgets Centrais
Widgets Centrais
Widgets Centrais
Widgets Centrais
Pattern Visual Container  Header  Content  Footer
Pattern Visual Container  Títulos, menus, logos...  Todo o conteúdo  Links “veja mais”, botões, informações extras...
Pattern Box<section class=”box”> <header>   ... </header> <section class=”content”>   ... </section> <footer>   ... </foot...
Pattern Box<section class=”box”> <header>   ... </header> <section class=”content”>   opcionais   ... </section> <footer> ...
Pattern Box: HTML 4<div class=”box”> <div class=”header”>   ... </div> <div class=”content”>   ... </div> <div class=”foot...
Pattern Box 2<article class=”materia”> <header>   ... </header> <section class=”content”>   ... </section> <footer class=”...
Pattern Box 3<aside class=”box”> <header>   ... </header> <section class=”content”>   ... </section> <footer>   ... </foot...
Exemplo: Box Plantão<section class=”box box-plantao”> <header>   ... </header> <section class=”content”>   ... </section> ...
Exemplo: Box Plantão<div class=”box box-plantao”> <div class=”header”>   ... </div> <div class=”content”>   ... </div> <di...
Exemplo: Box Plantão<div class=”box box-plantao”> <div class=”header”>   ... </div> <!-- .header --> <div class=”content”>...
Pattern Box: Aninhamento‣   Pattern como uma estrutura HTML qualquer    <ul>         <form>                 <table>     <l...
Pattern Box: Aninhamento‣   E como tal ele pode ser aninhado.    <section class=”box”>      <header></header>      <sectio...
Demo de Grid com Boxhttp://jsfiddle.net/lquixada/scTcU/
Pitfalls‣   Favor, não misturar box com classes do grid    Exemplo: <section class=”box box-plantao span4”>‣   Evitar qual...
3.3   Dados
Dados‣   Utilização de elementos semânticos para descrever    dados através de tags e/ou classes.‣   É uma inspiraçao que ...
Mas antes...
Microdados“Microdados é uma especificação WHATWG HTML5usada para aninhar semântica dentro de conteúdosexistentes em páginas...
Microdados: Exemplo<div>  <h1>Avatar</h1>  <span>    Director:    James Cameron    (born August 16, 1954)  </span>  <span>...
Microdados: Exemplo<div itemscope>  <h1>Avatar</h1>  <span>    Director:    James Cameron    (born August 16, 1954)  </spa...
Microdados: Exemplo<div itemscope itemtype="http://schema.org/Movie">  <h1>Avatar</h1>  <span>    Director:    James Camer...
Microdados: Exemplo<div itemscope itemtype="http://schema.org/Movie">  <h1 itemprop="name">Avatar</h1>  <span>    Director...
Microdados: Exemplo<div itemscope itemtype="http://schema.org/Movie">  <h1 itemprop="name">Avatar</h1>  <span itemprop="di...
Microdados‣   Mais exemplos em: http://schema.org
Microformatos‣   Cartões    <div class="vcard">           <span class="fn">Nome</span>           <span class="org">Organiz...
De volta à nossaprogramação normal...
Dados‣   Por que não fazer nosso próprio formato?‣   HTML com mais semântica e mais entendível.
Box Plantão<section class=”box box-plantao”> <header>   ... </header> <section class=”content”>   ... </section> <footer> ...
Box Plantão<section class=”box box-plantao”> <header>   ... </header> <section class=”content”>   ... </section> <footer> ...
Box Plantão<section class=”box box-plantao”> ... <section class=”content”>     <ul>      <li> ... </li>      <li> ... </li...
Box Plantão <ul>  <li>      <a class=”noticia” href=”#”>       <img class=”thumb”           src=”foto.jpg” />       <span ...
Box Plantão <ul>  <li>      <a class=”noticia” href=”#”>       <img class=”thumb”           src=”foto.jpg” />       <span ...
Box Plantão <ul>  <li>      <a class=”noticia” href=”#”>       <img class=”thumb”           src=”foto.jpg” />       <span ...
Vejamos rapidamente    outro box...
Box Previsão do Tempo
Box Previsão do TempoVc consegue classificar semanticamente o           content do box?
Outro exemplo....
Outro exemplo....div.brother-main
Outro exemplo....                                                 cite.brother-tweetspan.brother-idade                    ...
Demo de Grid com Box com Dados http://jsfiddle.net/lquixada/WLZ8V/
Dica!‣   Div e span são “tags fallback,” quando não    houver uma tag mais semântica, use-as.‣   Use <div> para descrever ...
Pitfalls‣   Favor, não misturar box com classes do grid    Exemplo: <section class=”box box-plantao span4”>‣   Evitar qual...
Pitfalls‣   Não colocar elementos nativamente block    dentro de elementos nativamente inline      <li>       <a class=”no...
GBD Pattern‣   Válido (W3C friendly)‣   Semântico‣   Enxuto‣   Otimizado para SEO (Google friendly)‣   Acessível‣   Progre...
GBD Pattern
Obrigado! Leonardo Quixadá
Upcoming SlideShare
Loading in …5
×

GBD Pattern

569 views
513 views

Published on

Um subset do curso de HTML/CSS Patterns

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
569
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • Falar sobre mim e minha carreira como client.\n
  • \n
  • Quando o PO pede um box no planning, ou o UX desenha um box novo: o que vc pensa em termos de HTML?\n
  • Escada da Morte, Stairway to Hell\n
  • Esses s&amp;#xE3;o os problemas que o Tableless trouxe.\n
  • \n
  • Primeira vez apresentando como GBD.\nAntes era Grid, Minidocumentos e Microsemantica.\n
  • Falar sobre o que &amp;#xE9; a id&amp;#xE9;ia e como cheguei nela.\n\n
  • Sem&amp;#xE2;ntico: que fa&amp;#xE7;a sentido para humanos\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • - Grids s&amp;#xE3;o como estantes que alocam espa&amp;#xE7;os para os componentes\n- &amp;#xC9; como se os espa&amp;#xE7;os verticais dos compartimentos pudessem variar\n
  • \n
  • - Existem v&amp;#xE1;rios tipos de grid na web: blueprint, 960 (mais famoso), YUI Grids, etc.\n- Em geral seguem os mesmos princ&amp;#xED;pios, s&amp;#xF3; mudando alguns detalhes de implementa&amp;#xE7;&amp;#xE3;o.\n
  • - Vamos usar o grid do twitter como exemplo.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • - Na pr&amp;#xE1;tica, utilizamos mais span4, span8 e span12\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • - Lembrar rob&amp;#xF4;zinho do BBB\n
  • \n
  • \n
  • Melhor n&amp;#xE3;o divs e classes demais! EVITE-AS!!\n
  • Article = conte&amp;#xFA;do principal\nSection = Parte de um conte&amp;#xFA;do principal\n
  • Aside = conte&amp;#xFA;do perif&amp;#xE9;rico\n
  • \n
  • \n
  • - Coment&amp;#xE1;rios, de prefer&amp;#xEA;ncia, din&amp;#xE2;micos.\n
  • \n
  • \n
  • \n
  • Deixa o componente mais desacoplado do grid. Assim &amp;#xE9; poss&amp;#xED;vel alterar o grid da p&amp;#xE1;gina sem afetar o componente.\n
  • \n
  • elementos sem&amp;#xE2;nticos: h1, p, form, table, input, a, etc...\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Vamos dar um zoom!\n
  • Perceba que s&amp;#xF3; utilizei elementos inline, nenhum block. Blocks estruturam, inlines apresentam.\nNunca, nunca colocar um block dentro de um inline.\n
  • Sugest&amp;#xF5;es: chapeu, plantao-chapeu, box-plantao-chapeu\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Validar no W3C!\n
  • \n
  • Deixa o componente mais desacoplado do grid.\nAssim &amp;#xE9; poss&amp;#xED;vel alterar o grid da p&amp;#xE1;gina sem afetar o componente.\n
  • Inv&amp;#xE1;lido pelo W3C. N&amp;#xE3;o faz sentido.\n
  • Sem&amp;#xE2;ntico: que fa&amp;#xE7;a sentido para humanos\n
  • \n
  • \n
  • GBD Pattern

    1. 1. globo .com GBD Pattern Leonardo Quixadá
    2. 2. 1 Apresentação
    3. 3. 2 Problema
    4. 4. Problemas em HTML‣ Não existe um pattern para solucionar os problemas mais comuns de implementação‣ Div-itis‣ Class-itis
    5. 5. Problemas em HTML‣ Div-itis </div> </div> </div> </div> </div> </div> </div></div>
    6. 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. 7. Padrões de Desenvolvimento‣ Rails: MVC‣ Django: MTV‣ CSS: Grid e Reset.css‣ HTML: Tableless
    8. 8. 3 GBD Pattern
    9. 9. GBD Pattern‣ Grid‣ Box‣ Data
    10. 10. GBD Pattern‣ Válido (W3C friendly)‣ Semântico‣ Enxuto‣ Otimizado para SEO (Google friendly)‣ Acessível‣ Progressive Enhancement‣ Fácil de entender
    11. 11. 3.1 Grids
    12. 12. Grids“Todo trabalho de design envolve a solução de problemasem níveis visuais e organizativos. Figuras, símbolos, massa detextos, títulos e tabelas devem se reunir para transmitirinformação. O grid é uma maneira de juntar esseselementos.” - Luiz Agner, designer, arquiteto e professorFonte: http://www.slideshare.net/agner/a-construo-do-grid
    13. 13. Grids“O grid introduz uma ordem sistemática num leiaute epermite que o designer diagrame uma grande quantidade deinformação. Também permite vários colaboradores nummesmo projeto.” - Luiz Agner, designer, arquiteto e professorFonte: http://www.slideshare.net/agner/a-construo-do-grid
    14. 14. Grids“Vantagens do grid:- Clareza- Eficiência- Economia- Identidade” - Luiz Agner, designer, arquiteto e professorFonte: http://www.slideshare.net/agner/a-construo-do-grid
    15. 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. 16. Grids
    17. 17. colunasGrids
    18. 18. Grids linhas
    19. 19. Grids: Colunas‣ 1 unidade ou coluna de 1: <div class=”span1”></div> width (60px)
    20. 20. Grids: Colunas‣ 2 unidades: span1 span1 60px 20px 60px‣ coluna de 2: span2 140px <div class=”span2”></div>
    21. 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. 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. 23. Grids
    24. 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. 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. 26. Grids: Exemplo header 1 2 3 4 5 footer
    27. 27. Demo de Grid com Boxhttp://jsfiddle.net/lquixada/xp8fC/
    28. 28. 3.2 Box
    29. 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. 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. 31. Página
    32. 32. Página
    33. 33. Página
    34. 34. Página
    35. 35. Menu & Widget Lateral
    36. 36. Menu & Widget Lateral Header
    37. 37. Menu & Widget Lateral Content
    38. 38. Menu & Widget Lateral Footer
    39. 39. Form
    40. 40. Form
    41. 41. Form
    42. 42. Form
    43. 43. Widgets Centrais
    44. 44. Widgets Centrais
    45. 45. Widgets Centrais
    46. 46. Widgets Centrais
    47. 47. Pattern Visual Container Header Content Footer
    48. 48. Pattern Visual Container Títulos, menus, logos... Todo o conteúdo Links “veja mais”, botões, informações extras...
    49. 49. Pattern Box<section class=”box”> <header> ... </header> <section class=”content”> ... </section> <footer> ... </footer></section>
    50. 50. Pattern Box<section class=”box”> <header> ... </header> <section class=”content”> opcionais ... </section> <footer> ... </footer></section>
    51. 51. Pattern Box: HTML 4<div class=”box”> <div class=”header”> ... </div> <div class=”content”> ... </div> <div class=”footer”> ... </div></div>
    52. 52. Pattern Box 2<article class=”materia”> <header> ... </header> <section class=”content”> ... </section> <footer class=”base”> ... </footer></article>
    53. 53. Pattern Box 3<aside class=”box”> <header> ... </header> <section class=”content”> ... </section> <footer> ... </footer></aside>
    54. 54. Exemplo: Box Plantão<section class=”box box-plantao”> <header> ... </header> <section class=”content”> ... </section> <footer> ... </footer></section>
    55. 55. Exemplo: Box Plantão<div class=”box box-plantao”> <div class=”header”> ... </div> <div class=”content”> ... </div> <div class=”footer”> ... </div></div>
    56. 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. 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. 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. 59. Demo de Grid com Boxhttp://jsfiddle.net/lquixada/scTcU/
    60. 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. 61. 3.3 Dados
    62. 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. 63. Mas antes...
    64. 64. Microdados“Microdados é uma especificação WHATWG HTML5usada para aninhar semântica dentro de conteúdosexistentes em páginas web.Isso é feito usando atributos específicos: itemscope,itemtype, itemid, itemprop e itemref.Search engines, web crawlers, e navegadores podemextrair e processar microdados a partir de uma páginaweb e usar isso para prover uma experiência denavegação mais rica para os usuários.” - Wikipedia
    65. 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. 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. 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. 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. 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. 70. Microdados‣ Mais exemplos em: http://schema.org
    71. 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. 72. De volta à nossaprogramação normal...
    73. 73. Dados‣ Por que não fazer nosso próprio formato?‣ HTML com mais semântica e mais entendível.
    74. 74. Box Plantão<section class=”box box-plantao”> <header> ... </header> <section class=”content”> ... </section> <footer> ... </footer></section>
    75. 75. Box Plantão<section class=”box box-plantao”> <header> ... </header> <section class=”content”> ... </section> <footer> ... </footer></section>
    76. 76. Box Plantão<section class=”box box-plantao”> ... <section class=”content”> <ul> <li> ... </li> <li> ... </li> ... </ul> </section> ...</section>
    77. 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. 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. 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. 80. Vejamos rapidamente outro box...
    81. 81. Box Previsão do Tempo
    82. 82. Box Previsão do TempoVc consegue classificar semanticamente o content do box?
    83. 83. Outro exemplo....
    84. 84. Outro exemplo....div.brother-main
    85. 85. Outro exemplo.... cite.brother-tweetspan.brother-idade span.brother-cidade-natalspan.brother-signo cite.brother-tweet-tempo span.brother-time
    86. 86. Demo de Grid com Box com Dados http://jsfiddle.net/lquixada/WLZ8V/
    87. 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. 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. 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. 90. GBD Pattern‣ Válido (W3C friendly)‣ Semântico‣ Enxuto‣ Otimizado para SEO (Google friendly)‣ Acessível‣ Progressive Enhancement‣ Fácil de entender
    91. 91. GBD Pattern
    92. 92. Obrigado! Leonardo Quixadá

    ×