HTML/CSS Patterns

4,071
-1

Published on

Published in: Technology
3 Comments
23 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,071
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
3
Likes
23
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • A cada dia nossos layouts ficam cada vez mais rebuscados, será que apenas essas abordagens são eficientes?\n
  • \n
  • - Você olha o HTML e o CSS do cara do lado ou de terceiros e fala: “meu deus!” Salada de tags\n- Cada um por si. Faltam patterns.\n- Em Rails, temos o Model-View-Controller\n- Em Django, temos o Model-View-Template\n
  • \n
  • \n
  • \n
  • - Limpeza: evitar class-itis e div-itis\n- Clareza: utilizar tags semânticas e classes\n- Ao invés de corrigir bugs, evitá-los\n\n
  • - Slide mais importante: Resumo do curso\n- Container e conteúdo estão dentro de estrutura\n
  • \n
  • \n
  • Boa parte do que fazemos no CDA são boxes. É o que vamos nos concentrar no curso.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • - Grids são como estantes que alocam espaços para os componentes\n- É como se os espaços verticais dos compartimentos pudessem variar\n
  • \n
  • - Existem vários tipos de grid na web: blueprint, 960 (mais famoso), YUI Grids, etc.\n- Em geral seguem os mesmos princípios, só mudando alguns detalhes de implementação.\n
  • - Vamos usar o glb-grid como exemplo.\n
  • \n
  • \n
  • \n
  • \n
  • - um bloco não tem margens\n- glb-bloco é um glb-grid-12 sem margins\n
  • - Na prática, utilizamos mais grid-4, grid-8 e grid-12\n- glb-bloco é um glb-grid-12 sem margins\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \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ôzinho do BBB\n
  • \n
  • \n
  • \n
  • se possível utilizar tags HTML5: <section>, <header> e <footer>\n
  • Todo o css que vier dentro do <div class=”box-plantao”> será a partir dessa classe.\n
  • \n
  • \n
  • \n
  • - Comentários, de preferência, dinâmicos.\n
  • \n
  • \n
  • - Nativamente inline: <a>, <input>, <img>, <span>, etc...\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Vamos dar um zoom!\n
  • Perceba que só utilizei elementos inline, nenhum block. Blocks estruturam, inlines apresentam.\nNunca, nunca colocar um block dentro de um inline.\n
  • Sugestões: chapeu, plantao-chapeu, box-plantao-chapeu\n
  • \n
  • Nada de grids aqui dentro. Deixa o componente mais independente de grids. Ou seja, é possível alterar o grid da página sem afetar o componente.\n
  • Spoiler!\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Mostrar os diferentes contextos\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • - Fica mais fácil fazer um git blame também.\n
  • \n
  • \n
  • - Se o arquivo começar a ficar longo demais, melhor quebrar em arquivos menores.\n
  • \n
  • Problema da ordem alfabética: width longe do height, top longe do bottom, etc...\n
  • Permite ser sobrescrito para ser customizável em outros contextos.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Utilizar jsfiddle.net\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Combinação bombástica: IE6 + float:left\n
  • Utilizar jsfiddle.net\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Além de não fazer sentido, pode gerar efeitos colaterais.\n
  • \n
  • http://jsfiddle.net/lquixada/P3ED7/\n
  • \n
  • Mostrar diferença entre display:inline e display:block no jsFiddle\n
  • \n
  • \n
  • essa abordagem é mais usado quando há uma dependência de boxes.\n
  • essa abordagem é mais usado quando há uma dependência de boxes.\n
  • essa abordagem é mais usado quando há uma dependência de boxes.\n
  • \n
  • \n
  • http://jsfiddle.net/lquixada/4umjF/\n
  • \n
  • \n
  • \n
  • Mostrar a diferença entre as positions relative, absolute, fixed e static no jsFiddle\n
  • Essa abordagem é mais usado quando não há uma dependência de boxes.\nSe a foto sumir, o quote desloca?\n
  • \n
  • \n
  • imagem: 145px x 85px\nbox: 620px de largura\nduração: 1h\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • - Modularização. Ao tirar um widget, não é necessário caçar propriedades em arquivos separados.\n- Alguém conhece um hack para IE8-?\n
  • ver forma de validação coletiva\n
  • \n
  • Utilizar jsfiddle.net para demonstrações\n
  • \n
  • Utilizar jsfiddle.net\n
  • \n
  • \n
  • - Lembrar que o SD se aplica a matérias e páginas inteiras\n- Estruturar HTML e CSS abrindo caminho para CSS3 e Javascript\n- Abrimos caminho para SEO, Microdata...\n
  • \n
  • \n
  • \n
  • \n
  • HTML/CSS Patterns

    1. 1. globo .com HTML/CSS Patterns Leonardo Quixadá
    2. 2. 1 O Que Não Vou Apresentar
    3. 3. O Que Não Vou Apresentar‣ Fundamentos de seletores‣ Aplicação de propriedades‣ Tableless‣ Performance‣ CSS3
    4. 4. 2 HTML & CSS Hoje
    5. 5. Guidelines‣ CSS ‣ Reset.css ou normalize.css ‣ Grids‣ HTML & CSS ‣ Tableless
    6. 6. Mas e o resto? #comofaz
    7. 7. Problemas comuns‣ Layout em CSS não é fácil de aplicar, nem de explicar‣ Não existe sandbox, há muitos conflitos de propriedades‣ Inconsistência cross-browser‣ Não é automaticamente testável
    8. 8. TODO CUIDADO É POUCO!
    9. 9. 3 O Curso
    10. 10. Estrutura para HTML & CSS‣ Agilizar a criação e a manutenção de componentes.‣ Melhorar a limpeza, a clareza e a flexibilidade tanto do HTML, como do CSS.‣ Diminuir o tempo desperdiçado fazendo ajustes para um browser em específico.
    11. 11. Regras de Ouro1. Separar container de conteúdo2. Separar estrutura de estética -- Nicole Sulivan (Yahoo!), em OOCSS
    12. 12. Cronograma HTML CSS Patterns Patterns Grids Seletores EstratégiasMinidocumentos Propriedades de Mundo ValidaçãoMicrosemântica Layout Pós-IE6
    13. 13. 4 Modelo Globocore
    14. 14. Modelo Globocore page macroarea área box (widgets & destaques)
    15. 15. 5 HTML Patterns
    16. 16. HTML Patterns‣ Grids‣ Minidocumentos‣ Microsemântica
    17. 17. 5.1 Grids
    18. 18. 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
    19. 19. 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
    20. 20. Grids“Vantagens do grid:- Clareza- Eficiência- Economia- Identidade” - Luiz Agner, designer, arquiteto e professorFonte: http://www.slideshare.net/agner/a-construo-do-grid
    21. 21. 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.
    22. 22. Grids
    23. 23. colunasGrids
    24. 24. Grids linhas
    25. 25. Grids: Colunas‣ 1 unidade ou coluna de 1: <div class=”glb-grid-1”></div> width (60px) margin-left (10px) margin-right (10px)
    26. 26. Grids: Colunas‣ 2 unidades: grid 1 grid-1 10px 60px 20px 60px 10px‣ coluna de 2: 10px 140px 10px grid-2 <div class=”glb-grid-2”></div>
    27. 27. Grids: Colunas‣ 3 unidades: grid 1 grid-1 grid-1 10px 60px 20px 60px 20px 60px 10px grid 1 grid-2 10px 60px 20px 140px 10px‣ coluna de 3: 10px 220px 10px grid-3 <div class=”glb-grid-3”></div>
    28. 28. Grids: Colunas‣ 4 unidades: grid 1 grid-1 grid-1 grid-1 10px 60px 20px 60px 20px 60px 20px 60px 10px grid 1 grid-2 grid-1 10px 60px 20px 140px 20px 60px 10px‣ coluna de 4: 10px 300px 10px grid-4 <div class=”glb-grid-4”></div>
    29. 29. Grids
    30. 30. Grids: Linhas‣ As linhas podem ser definidas por blocos ou unidades do grid. glb-bloco glb-grid 2 glb-grid-8 glb-grid-2 <div class=”glb-bloco”> <div class=”glb-grid-2”></div> <div class=”glb-grid-8”></div> <div class=”glb-grid-2”></div> </div>
    31. 31. Grids: Linhas‣ As linhas podem ser definidas por blocos ou unidades do grid. glb-grid-4 glb-grid 1 glb-grid-2 glb-grid-1 <div class=”glb-grid-4”> <div class=”glb-grid-1 glb-primeiro”></div> <div class=”glb-grid-2”></div> <div class=”glb-grid-1 glb-ultimo”></div> </div>
    32. 32. Grids: Exemplo<body> <div id=”glb-doc”> <div class=”glb-topo”> ... </div> <div class=”glb-conteudo”> ... </div> <div class=”glb-rodape”> ... </div> </div></body>
    33. 33. Grids: Exemplo<body> <div id=”glb-doc”> <div class=”glb-topo”> ... </div> <div class=”glb-conteudo”> ... </div> <div class=”glb-rodape”> ... </div> </div></body>
    34. 34. Grids: Exemplo<div class="glb-topo"> <div class="glb-bloco"> <div class="glb-grid-4"></div> <div class="glb-grid-4"></div> <div class="glb-grid-4"></div> </div></div>
    35. 35. Grids: Exemplo<body> <div id=”glb-doc”> <div class=”glb-topo”> ... </div> <div class=”glb-conteudo”> ... </div> <div class=”glb-rodape”> ... </div> </div></body>
    36. 36. Grids: Exemplo<div class="glb-conteudo"> <div class="glb-bloco"> <div class="glb-grid-8"></div> <div class="glb-grid-4"></div> </div> <div class="glb-bloco"> <div class="glb-grid-4"></div> <div class="glb-grid-4"></div> <div class="glb-grid-4"></div> </div></div>
    37. 37. Grids: Exemplo<body> <div id=”glb-doc”> <div class=”glb-topo”> ... </div> <div class=”glb-conteudo”> ... </div> <div class=”glb-rodape”> ... </div> </div></body>
    38. 38. Grids: Exemplo<div class="glb-rodape"> <div class="glb-bloco"> <div class="glb-grid-12"></div> </div></div>
    39. 39. Hora do DEMO!!!
    40. 40. Exercício: Implementar header 1 2 3 4 5 6 7 8 9 10 footer
    41. 41. 5.2 Minidocumentos
    42. 42. Minidocumentos‣ Pattern que subdivide páginas web em pequenos “documentos” autosuficientes.‣ É como um pequeno grid para os componentes que vão preencher os compartimentos da estante.‣ Juntando-se vários componentes formam-se composições sólidas.
    43. 43. Minidocumentos‣ Podem ser utilizados por widgets, destaques, forms, menus, etc...‣ Baseado nas novas tags do HTML 5: article, section, header e footer.
    44. 44. Página
    45. 45. Página
    46. 46. Página
    47. 47. Página
    48. 48. Menu & Widget Lateral
    49. 49. Menu & Widget Lateral Header
    50. 50. Menu & Widget Lateral Content
    51. 51. Menu & Widget Lateral Footer
    52. 52. Form
    53. 53. Form
    54. 54. Form
    55. 55. Form
    56. 56. Widgets Centrais
    57. 57. Widgets Centrais
    58. 58. Widgets Centrais
    59. 59. Widgets Centrais
    60. 60. Widgets Centrais
    61. 61. Widgets Centrais
    62. 62. Widgets Centrais
    63. 63. Pattern Visual Container Header Content Footer
    64. 64. Pattern Visual Container Títulos, menus, logos... Todo o conteúdo Links “veja mais”, botões, informações extras...
    65. 65. Pattern HTML<div class=”container”> <div class=”header”> ... </div> <div class=”content”> ... </div> <div class=”footer”> ... </div></div>
    66. 66. Pattern Página<div class=”glb-doc”> <div class=”glb-top”> ... </div> <div class=”glb-content”> ... </div> <div class=”glb-base”> ... </div></div>
    67. 67. Pattern Matéria<div class=”materia”> <div class=”header”> ... </div> <div class=”content”> ... </div> <div class=”base”> ... </div></div>
    68. 68. Pattern Box<div class=”box”> <div class=”header”> ... </div> <div class=”content”> ... </div> <div class=”footer”> ... </div></div>
    69. 69. Box Plantão<div class=”box box-plantao”> <div class=”header”> ... </div> <div class=”content”> ... </div> <div class=”footer”> ... </div></div>
    70. 70. Se você usasse HTML5...<section class=”box box-plantao”> <header> ... </header> <section> ... </section> <footer> ... </footer></section>
    71. 71. Box Plantão<div class=”box box-plantao”> <div class=”header”> ... </div> <div class=”content”> ... </div> <div class=”footer”> ... </div></div>
    72. 72. Box Plantão<div class=”box box-plantao”> <div class=”header”> ... </div> <div class=”content”> ... </div> <div class=”footer”> ... </div></div>
    73. 73. 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 -->
    74. 74. Favor, não misturar <div>s ou .classes de grid com box.
    75. 75. 5.3 Microsemântica
    76. 76. Microsemântica‣ Utilização de elementos semânticos para descrever dados através de tags e/ou classes.‣ É uma variação dos Microdados e, antigamente, de Microformatos.‣ Não serve paras os search engines, apenas melhora a clareza do código.
    77. 77. Microsemântica‣ É a partir daqui que se preocupa com: ‣ SEO ‣ Semântica ‣ Acessibilidade ‣ Microdados ‣ ...
    78. 78. 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
    79. 79. 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>
    80. 80. 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>
    81. 81. 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>
    82. 82. 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>
    83. 83. 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>
    84. 84. Microdados‣ Mais exemplos em: http://schema.org
    85. 85. 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
    86. 86. Microsemântica‣ Por que não fazer nossos próprios microdados?‣ HTML com mais semântica e mais entendível.
    87. 87. Box Plantão<div class=”box box-plantao”> <div class=”header”> ... </div> <div class=”content”> ... </div> <div class=”footer”> .... </div></div>
    88. 88. Box Plantão<div class=”box box-plantao”> <div class=”header”> ... </div> <div class=”content”> ... </div> <div class=”footer”> .... </div></div>
    89. 89. Box Plantão<div class=”box box-plantao”> ... <div class=”content”> <ul> <li> ... </li> <li> ... </li> ... </ul> </div> ...</div>
    90. 90. 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>
    91. 91. 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
    92. 92. 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!!!
    93. 93. A partir daqui, nada degrid, e evite ao máximo utilizar <div>s.
    94. 94. Box Plantãodiv.box-plantao a { ... }div.box-plantao a.noticia { ... }div.box-plantao span.chapeu { ... }div.box-plantao span.titulo { ... }div.box-plantao ul { ... }
    95. 95. Vejamos rapidamente outro box...
    96. 96. Box Previsão do Tempo
    97. 97. Box Previsão do TempoVc consegue classificar semanticamente o content do box?
    98. 98. Outro exemplo....
    99. 99. Outro exemplo....div.brother-main
    100. 100. Outro exemplo.... cite.brother-tweetspan.brother-idade span.brother-cidade-natalspan.brother-signo cite.brother-tweet-tempo span.brother-time
    101. 101. Dica! <div> para descrever estrutura, <span> para descrever dados
    102. 102. Exercício‣ Transforme um box em HTML:
    103. 103. 6 CSS Patterns
    104. 104. Estratégias‣ Organizando Seletores‣ Organizando Propriedades‣ Elaborando Layouts
    105. 105. 6.1 Organizando Seletores
    106. 106. Organizando Seletores‣ Namespaces: define a área de atuação dos seletores e os agrupa visualmente.‣ tag[.class].‣ Separação por blocos.‣ Ordem: especificidade, alfabética.
    107. 107. Organizando Seletores‣ Namespaces: define a área de atuação dos seletores e os agrupa visualmente.‣ tag[.class].‣ Separação por blocos.‣ Ordem: especificidade, alfabética.
    108. 108. Namespacesdiv.box-plantao { ... }div.box-plantao a { ... }div.box-plantao h6 { ... }div.box-plantao li { ... }div.box-plantao span.barra { ... }div.box-plantao ul { ... }
    109. 109. Namespacesdiv.box-plantao { ... }div.box-plantao a { ... }div.box-plantao h6 { ... }div.box-plantao li { ... }div.box-plantao span.barra { ... }div.box-plantao ul { ... } Contexto ou Namespace
    110. 110. Organizando Seletores‣ Namespaces: define a área de atuação dos seletores e os agrupa visualmente.‣ tag[.class].‣ Separação por blocos.‣ Ordem: especificidade, alfabética.
    111. 111. tag[.class]div.box-plantao { ... }div.box-plantao a { ... }div.box-plantao h6 { ... }div.box-plantao li { ... }div.box-plantao span.barra { ... }div.box-plantao ul { ... } tag[.class] 1
    112. 112. tag[.class]div.box-plantao { ... }div.box-plantao a { ... }div.box-plantao h6 { ... }div.box-plantao li { ... }div.box-plantao span.barra { ... }div.box-plantao ul { ... } tag[.class] 2
    113. 113. tag[.class]‣ jQuery $(‘div.box-plantao span.barra’) ou $(‘div.box-plantao’).find(‘span.barra’) (para cachear o contexto)‣ Lxml html = lxml.etree.fromstring(response.content) html.cssselect(‘div.box-plantao span.barra’)‣ splinter browser = Browser() browser.find_by_css(‘div.box-plantao span.barra’)
    114. 114. tag[.class]‣ Problemas de se utilizar só a classe: ‣ Desenvolvedores são muito ruins em nomear coisas. ‣ O nome da tag é tão objetivo quanto uma ordem alfabética. Melhor utilizar os tokens já predefinidos do que ficar elaborando nomes malucos. ‣ Classes abertas indicam pra outros devs, que é permitido colocar a classe em qualquer tag.
    115. 115. tag[.class]‣ Exemplos: .fieldset-metadados fieldset.metadados (exemplo do widget SEO) .span_tag span.tag (catálogo de vídeo v1.0) .formulario-criacao-usuario form.criacao-usuario‣ Só utilizar classes abertas quando é realmente necessário aplicar a mais de uma tag (exemplo th, td).
    116. 116. tag[.class]‣ Recomendo sempre ter 2 tag[.class]. Claro e conciso!‣ Mínimo de 1 tag[.class] div.box-plantao { ... }‣ Máximo (prometa!) de 3 tag[.class] div.box-plantao ul.principal li.ativo { ... }
    117. 117. Organizando Seletores‣ Namespaces: define a área de atuação dos seletores e os agrupa visualmente.‣ tag[.class].‣ Separação por blocos.‣ Ordem: especificidade, alfabética.
    118. 118. Separação por blocosdiv.box { ... }div.box a { ... }div.box span.barra { ... }div.box-plantao h6 { ... }div.box-plantao li { ... }div.box-plantao ul { ... }div#box-plantao-principal h6 { ... }div#box-plantao-principal li { ... }
    119. 119. Separação por blocos div.box { ... }bloco div.box a { ... } div.box span.barra { ... } div.box-plantao h6 { ... }bloco div.box-plantao li { ... } div.box-plantao ul { ... } div#box-plantao-principal h6 { ... }bloco div#box-plantao-principal li { ... }
    120. 120. Ordemmenos específico div.box { ... } div.box a { ... } div.box span.barra { ... } div.box-plantao h6 { ... } div.box-plantao li { ... } div.box-plantao ul { ... } div#box-plantao-principal h6 { ... } div#box-plantao-principal li { ... }mais específico
    121. 121. Ordem div.box { ... } div.box a { ... } div.box span.barra { ... }ordem alfabética div.box-plantao h6 { ... } div.box-plantao li { ... } div.box-plantao ul { ... } div#box-plantao-principal h6 { ... } div#box-plantao-principal li { ... }
    122. 122. Resumão!
    123. 123. Teu HTML ficaria assim...<div class=”box box-plantao”> <div class=”header”> <h6>primeira página</h6> </div> <div class=”content”> <ul> <li></li> ... </ul> </div> <div class=”footer”> <a href=”#”>veja mais</a> </div></div>
    124. 124. E teu CSS ficaria assim...div.box { ... }div.box a { ... }div.box span.barra { ... }div.box-plantao h6 { ... }div.box-plantao li { ... }div.box-plantao ul { ... }div#box-plantao-principal h6 { ... }div#box-plantao-principal li { ... }
    125. 125. 6.2 Organizando Propriedades
    126. 126. Organizando Propriedades‣ Uma propriedade:valor por linha‣ Separar propriedades por contexto
    127. 127. Organizando Propriedades‣ Uma propriedade:valor por linha‣ Separar propriedades por contexto
    128. 128. Uma propriedade por linha‣ Facilita diffs!
    129. 129. Uma propriedade por linha‣ Inserir comentários é mais tranquilo
    130. 130. Uma propriedade por linha‣ CSS 3 com vendor prefix são bem longos e variados.box_shadow { -webkit-box-shadow: 0px 0px 4px #ffffff; -moz-box-shadow: 0px 0px 4px #ffffff; box-shadow: 0px 0px 4px #ffffff;}
    131. 131. Uma propriedade por linha‣ CSS 3 com vendor prefix são bem longos e variados.box_gradient { background-color: #444444; /* Saf4+, Chrome */ background-image: -webkit-gradient(linear, left top, left bottom, from(#444444),to(#999999)); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -webkit-linear-gradient(top, #444444, #999999); background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */ background-image: -ms-linear-gradient(top, #444444, #999999); /* IE10 */ /* Opera 11.10+ */ background-image: -o-linear-gradient(top, #444444, #999999); background-image: linear-gradient(top, #444444, #999999); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#444444,EndColorStr=#999999); /* IE6-IE9 */}
    132. 132. Organizando Propriedades‣ Uma propriedade:valor por linha‣ Separar propriedades por contexto
    133. 133. Organizando Propriedades‣ 1o grupo: layout position, display, float, top, left, bottom, right, margin, padding, width, height‣ 2o grupo: texto color, font, letter-spacing, line-height, text-align, text-decoration, text-transform...‣ 3o grupo: restante border, z-index, overflow, ...
    134. 134. importante!EVITE o !important
    135. 135. 6.3 Elaborando Layouts
    136. 136. Prequel‣ 1o grupo: layout position, display, float, top, left, bottom, right, margin, padding, width, height‣ 2o grupo: texto color, font, letter-spacing, line-height, text-align, text-decoration, text-transform...‣ 3o grupo: restante border, z-index, overflow, ...
    137. 137. Prequel‣ 1o grupo: layout position, display, float, top, left, bottom, right, margin, padding, width, height‣ 2o grupo: texto color, font, letter-spacing, line-height, text-align, text-decoration, text-transform...‣ 3o grupo: restante border, z-index, overflow, ...
    138. 138. Prequel‣ 1o grupo: layout position, display, float, top, left, bottom, right, margin, padding, width, height‣ 2o grupo: texto color, font, letter-spacing, line-height, text-align, text-decoration, text-transform...‣ 3o grupo: restante border, z-index, overflow, ...
    139. 139. float:left
    140. 140. Float:Left contra o Mundo‣ O float serve para alinhar à esquerda, à direita ou não alinhar (none).‣ A propriedade tem a ver mais com conteúdo do que com boxes.‣ Suas dimensões são reduzidas para acomodar apenas o próprio conteúdo ao contrário de display:block.‣ É fonte de muitas confusões no mundo CSS.
    141. 141. Float:Left em QuadrinhosABC
    142. 142. Float:Left em Quadrinhos A B C‣ A‣ B { float:left; }‣ C
    143. 143. Float:Left em Quadrinhos A B C‣ Box B perdeu espaço no flow de boxes, mas ocupou espaço à esquerda do conteúdo C, ou seja, virou conteúdo.
    144. 144. Float:Left em QuadrinhosABC
    145. 145. Float:Left em Quadrinhos A B C‣ A‣ B { float:left; }‣ C { float:left; }
    146. 146. Float:Left em QuadrinhosAA B C‣ B se alinhou à esquerda antes de C. Como saíram do flow de boxes, a altura de A diminuiu.‣ É como se estivessem caçando conteúdo abaixo.
    147. 147. Float:Left contra o Mundo‣ Float:left/right tem um funcionamento difícil de entender e de explicar.‣ A maioria dos bugs nos IEs encontrados e registrados pelo Position Is Everything tem o float envolvido. http://www.positioniseverything.net/explorer.html‣ Recomendação: evitar ao máximo.
    148. 148. Alternativas ao float:left { inline display block inline-block { static relative position absolute fixed
    149. 149. display:inline-block
    150. 150. Antes de existir o CSS...‣ No HTML, os elementos são divididos em inline-level (também chamado de text-level) e block-level. ‣ Elementos inline-level (também chamados de text- level) são os que convivem lado-a-lado com texto e outro elementos inline-level. ‣ Elementos block-level são containers para elementos inline-level, textos e outros elementos block-level
    151. 151. Antes de existir o CSS...Elementos inline-level Elementos block-level <input> <a> <form> <label> <img> <blockquote> <div> <li> <td><button> <cite> <em> <fieldset> <th> <strong> <span> <p><textarea> <select> <h1>, <h2>, <h3>, <h4>,<h5>,<h6>
    152. 152. Antes de existir o CSS...Elementos inline-level <dentro de> Elementos block-level <input> <a> <form> W3C <label> <img> <blockquote> <div> <li> <td><button> <cite> <em> <fieldset> <th> <strong> <span> <p><textarea> <select> <h1>, <h2>, <h3>, <h4>,<h5>,<h6>
    153. 153. Antes de existir o CSS...Elementos inline-level <dentro de> Elementos block-level <input> <a> <form> W3C <label> <img> <blockquote> <div> <li> <td><button> <cite> <em> W3C <fieldset> <th> <strong> <span> <p><textarea> <select> <h1>, <h2>, <h3>, <h4>,<h5>,<h6>
    154. 154. Antes de existir o CSS...Elementos inline-level <dentro de> Elementos block-level <input> <a> <form> W3C <label> <img> <blockquote> <div> <li> <td><button> <cite> <em> W3C <fieldset> <th> <strong> <span> <p><textarea> <select> <h1>, <h2>, <h3>, <h4>,<h5>,<h6> W3C
    155. 155. Antes de existir o CSS...‣ Leitura recomendada (é curto, prometo!): http://www.w3.org/TR/html401/struct/global.html#h-7.5.3‣ Regras da estrutura HTML: http://www.w3.org/TR/html4/strict.dtd
    156. 156. Nunca, nunca coloqueelementos block-leveldentro de inline-level.
    157. 157. Voltando ao CSS...
    158. 158. Displays‣ Os dois tipos básicos de display são: ‣ display:block permite um elemento ser dimensionado com width, height, padding, margin, etc. ‣ display:inline permite ficar lado-a-lado com outros elementos e textos. Não pode ser dimensionado com width e height. Apenas com valores laterais de margin.
    159. 159. Display:Inline-block‣ Junta características de elementos inlines e blocks.‣ Permite ficar lado-a-lado com outros elementos e ser dimensionados.‣ É mais intuitivo de aplicar e explicar.‣ É tratado como parte do texto.
    160. 160. Display:Inline-block‣ Propriedade também consistente no cross-browser.‣ No IE7, é simulado por *display:inline e *zoom:1.* isto não é uma nota de rodapé, é um hack pro IE.
    161. 161. Display:Inline-block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc massa sapien, rutrum ac dignissim at, iaculis sit amet libero. Aenean vehicula tortor vitae eros pulvinar quis consectetur arcu suscipit.Lorem ipsum dolor sit amet, consectetur adipiscingelit. Nunc massa sapien.Nunc massa sapien, rutrum ac dignissim at, iaculis sit amet libero. Aeneanvehicula tortor vitae eros pulvinar quis consectetur arcu suscipit. display:inline-block
    162. 162. Exemplo de Uso
    163. 163. Exemplo de Uso display:inline-block
    164. 164. Exemplo de Uso display:inline-block
    165. 165. position:absolute
    166. 166. Position:Absolute‣ Propriedade bem consistente cross-browser. Portanto bem mais seguro de se usar do que o float.‣ É sempre utilizado com uma ou mais das seguintes propriedades: top, bottom, left, right.
    167. 167. Position:Absolute <div> com position:relative
    168. 168. Position:Absolute <div> com <div> sem position:relative position
    169. 169. Position:Absolute <div> com <div> sem <div> com position:relative position position:absolute
    170. 170. Position:Absolute top:150px left:300px <div> com <div> sem <div> com position:relative position position:absolute
    171. 171. Exemplo de Uso
    172. 172. Resumo!
    173. 173. Recomendação‣ Tente utilizar na seguinte ordem: 1.não usar nada (css padrão do navegador) 2.display:inline-block 3.position:absolute ... ... 4.float:left
    174. 174. Exercício‣ Fazer o seguinte box:‣ Utilize o jsfiddle.net e o dummyimage.com
    175. 175. 7 Estratégias de Validação
    176. 176. Estratégias de Validação‣ Em vs Px‣ Hacks
    177. 177. 7.1 Em vs. Px
    178. 178. Em vs Px‣ “em” é uma unidade de medida relativa e mais flexível. 1em = 100%, logo 1.02em=102%.‣ “px” é uma unidade de medida absoluta e mais intuitiva. 1px é 1px e ponto final.
    179. 179. Funcionamento do “em”12px 1.2em 0.714em 14,4px 10px
    180. 180. Em vs Px‣ As principais vantagens do “em” são: ‣ O tamanho da página aumenta conforme o tamanho da fonte pré-definida pelo usuário em seu navegador. ‣ A funcionalidade aumentar/diminuir fonte do IE6/7 só funciona com unidades de medidas. ‣ Se adapta melhor em telas pequenas como a de celulares.
    181. 181. Em vs Px‣ As principais desvantagens do “em” são: ‣ Número quebrado gera inconsistência entre navegadores por causa do cálculo de conversão para px. Ex.: 1.33em pode ser 15px em um navegador, e 16px em outro. ‣ Todo valor em “em” tem que ser previamente calculado de acordo com o elemento pai.
    182. 182. Em vs Px‣ Vantagens do “px”: ‣ Previsibilidade: 1px = 1px e pronto! ‣ É a unidade padrão dos designers
    183. 183. Recomendação‣ Use apenas “px.” O desenvolvimento front-end já é instável o suficiente.‣ Caso esteja interessado na flexibilidade do “em,” considere utilizar o “rem.”
    184. 184. 7.2 Hacks
    185. 185. Hacks‣ Evite ao máximo utilizá-los.‣ É completamente possível fazer o mesmo CSS para Firefox, Chrome, Safari e Opera. (excetuando propriedades novas como border-radius e transition)‣ Para IE o transtorno é tão grande que compensa utilizar hacks.
    186. 186. Hacks: Quando usar?‣ O mais recomendado no mercado é fazer conditional comments.‣ Mas a experiência mostra que da seguinte forma é mais manutenível (na ordem): ‣ IE 9-: margin: 15px9; ‣ IE 7-: *margin: 15px; ‣ IE 6-: _margin: 15px;
    187. 187. Validação de BrowsersOrdem de preferência (ou audiência) Ordem de recência 9 8 7
    188. 188. Progressive Enhancement
    189. 189. Referências‣ CSS Compatibility and Internet Explorer (http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx)‣ When Can I Use... (http://caniuse.com)‣ CSS Frameworks (video com um overview) (http://www.youtube.com/watch?v=EuhDIRzUJgc)‣ Explorer Exposed! (http://www.positioniseverything.net/explorer.html)
    190. 190. Ferramentas‣ jsFiddle.net (http://jsfiddle.net)‣ Dummy Images (http://dummyimage.com)‣ Lorem Ipsum (http://lipsum.com)
    191. 191. Exemplos e Exercícios‣ Exemplo de Grid (http://jsfiddle.net/lquixada/KVSNn/show/)‣ Exercício do Grid (http://jsfiddle.net/lquixada/qxxkK/show/)‣ Exercício do Box Nas Novelas (http://jsfiddle.net/lquixada/6mWM7/show/)
    192. 192. The EndLeonardo Quixadá

    ×