globo .com        HTML/CSS Patterns        Leonardo Quixadá
1   O Que Não Vou Apresentar
O Que Não Vou Apresentar‣   Fundamentos de seletores‣   Aplicação de propriedades‣   Tableless‣   Performance‣   CSS3
2   HTML & CSS Hoje
Guidelines‣   CSS    ‣   Reset.css ou normalize.css    ‣   Grids‣   HTML & CSS    ‣   Tableless
Mas e o resto? #comofaz
Problemas comuns‣   Layout em CSS não é fácil de aplicar, nem de explicar‣   Não existe sandbox, há muitos conflitos de    ...
TODO CUIDADO É   POUCO!
3   O Curso
Estrutura para HTML & CSS‣   Agilizar a criação e a manutenção de componentes.‣   Melhorar a limpeza, a clareza e a flexibi...
Regras de Ouro1. Separar container de conteúdo2. Separar estrutura de estética                -- Nicole Sulivan (Yahoo!), ...
Cronograma  HTML             CSS Patterns        Patterns    Grids         Seletores                                Estrat...
4   Modelo Globocore
Modelo Globocore        page   macroarea         área box (widgets & destaques)
5   HTML Patterns
HTML Patterns‣   Grids‣   Minidocumentos‣   Microsemântica
5.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=”glb-grid-1”></div>                                 wid...
Grids: Colunas‣   2 unidades:                   grid 1            grid-1     10px          60px     20px     60px     10px...
Grids: Colunas‣   3 unidades:            grid 1          grid-1            grid-1     10px   60px     20px   60px      20p...
Grids: Colunas‣   4 unidades:            grid 1          grid-1            grid-1          grid-1     10px   60px     20px...
Grids
Grids: Linhas‣   As linhas podem ser definidas por blocos ou unidades    do grid.     glb-bloco          glb-grid 2      gl...
Grids: Linhas‣   As linhas podem ser definidas por blocos ou unidades    do grid.     glb-grid-4          glb-grid 1      g...
Grids: Exemplo<body>  <div id=”glb-doc”>   <div class=”glb-topo”>     ...   </div>   <div class=”glb-conteudo”>     ...   ...
Grids: Exemplo<body>  <div id=”glb-doc”>   <div class=”glb-topo”>     ...   </div>   <div class=”glb-conteudo”>     ...   ...
Grids: Exemplo<div class="glb-topo">  <div class="glb-bloco">    <div class="glb-grid-4"></div>    <div class="glb-grid-4"...
Grids: Exemplo<body>  <div id=”glb-doc”>   <div class=”glb-topo”>     ...   </div>   <div class=”glb-conteudo”>     ...   ...
Grids: Exemplo<div class="glb-conteudo">  <div class="glb-bloco">    <div class="glb-grid-8"></div>    <div class="glb-gri...
Grids: Exemplo<body>  <div id=”glb-doc”>   <div class=”glb-topo”>     ...   </div>   <div class=”glb-conteudo”>     ...   ...
Grids: Exemplo<div class="glb-rodape">  <div class="glb-bloco">    <div class="glb-grid-12"></div>  </div></div>
Hora do DEMO!!!
Exercício: Implementar             header    1          2                         3    4          5         6             ...
5.2   Minidocumentos
Minidocumentos‣   Pattern que subdivide páginas web em pequenos    “documentos” autosuficientes.‣   É como um pequeno grid ...
Minidocumentos‣   Podem ser utilizados por widgets, destaques, forms,    menus, etc...‣   Baseado nas novas tags do HTML 5...
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
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 HTML<div class=”container”> <div class=”header”>   ... </div> <div class=”content”>   ... </div> <div class=”foote...
Pattern Página<div class=”glb-doc”> <div class=”glb-top”>   ... </div> <div class=”glb-content”>   ... </div> <div class=”...
Pattern Matéria<div class=”materia”> <div class=”header”>   ... </div> <div class=”content”>   ... </div> <div class=”base...
Pattern Box<div class=”box”> <div class=”header”>   ... </div> <div class=”content”>   ... </div> <div class=”footer”>   ....
Box Plantão<div class=”box box-plantao”> <div class=”header”>   ... </div> <div class=”content”>   ... </div> <div class=”...
Se você usasse HTML5...<section class=”box box-plantao”> <header>   ... </header> <section>   ... </section> <footer>   .....
Box Plantão<div class=”box box-plantao”> <div class=”header”>   ... </div> <div class=”content”>   ... </div> <div class=”...
Box Plantão<div class=”box box-plantao”> <div class=”header”>   ... </div> <div class=”content”>   ... </div> <div class=”...
Box Plantão<div class=”box box-plantao”> <div class=”header”>   ... </div> <!-- .header --> <div class=”content”>   ... </...
Favor, não misturar <div>s  ou .classes de grid com            box.
5.3   Microsemântica
Microsemântica‣   Utilização de elementos semânticos para descrever    dados através de tags e/ou classes.‣   É uma variaç...
Microsemântica‣   É a partir daqui que se preocupa com:    ‣   SEO    ‣   Semântica    ‣   Acessibilidade    ‣   Microdado...
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...
Microsemântica‣   Por que não fazer nossos próprios microdados?‣   HTML com mais semântica e mais entendível.
Box Plantão<div class=”box box-plantao”> <div class=”header”>   ... </div> <div class=”content”>   ... </div> <div class=”...
Box Plantão<div class=”box box-plantao”> <div class=”header”>   ... </div> <div class=”content”>   ... </div> <div class=”...
Box Plantão<div class=”box box-plantao”> ... <div 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 ...
A partir daqui, nada degrid, e evite ao máximo      utilizar <div>s.
Box Plantãodiv.box-plantao a { ... }div.box-plantao a.noticia { ... }div.box-plantao span.chapeu { ... }div.box-plantao sp...
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                    ...
Dica! <div> para descrever estrutura,  <span> para descrever dados
Exercício‣   Transforme um box em HTML:
6   CSS Patterns
Estratégias‣   Organizando Seletores‣   Organizando Propriedades‣   Elaborando Layouts
6.1   Organizando Seletores
Organizando Seletores‣   Namespaces: define a área de atuação dos seletores e    os agrupa visualmente.‣   tag[.class].‣   ...
Organizando Seletores‣   Namespaces: define a área de atuação dos seletores e    os agrupa visualmente.‣   tag[.class].‣   ...
Namespacesdiv.box-plantao { ... }div.box-plantao a { ... }div.box-plantao h6 { ... }div.box-plantao li { ... }div.box-plan...
Namespacesdiv.box-plantao { ... }div.box-plantao a { ... }div.box-plantao h6 { ... }div.box-plantao li { ... }div.box-plan...
Organizando Seletores‣   Namespaces: define a área de atuação dos seletores e    os agrupa visualmente.‣   tag[.class].‣   ...
tag[.class]div.box-plantao              { ... }div.box-plantao a            { ... }div.box-plantao h6            { ... }di...
tag[.class]div.box-plantao                   { ... }div.box-plantao a                 { ... }div.box-plantao h6           ...
tag[.class]‣   jQuery       $(‘div.box-plantao span.barra’)       ou $(‘div.box-plantao’).find(‘span.barra’) (para cachear ...
tag[.class]‣   Problemas de se utilizar só a classe:    ‣   Desenvolvedores são muito ruins em nomear coisas.    ‣   O nom...
tag[.class]‣   Exemplos:    .fieldset-metadados               fieldset.metadados    (exemplo do widget SEO)    .span_tag    ...
tag[.class]‣   Recomendo sempre ter 2 tag[.class]. Claro e conciso!‣   Mínimo de 1 tag[.class]      div.box-plantao { ... ...
Organizando Seletores‣   Namespaces: define a área de atuação dos seletores e    os agrupa visualmente.‣   tag[.class].‣   ...
Separação por blocosdiv.box { ... }div.box a { ... }div.box span.barra { ... }div.box-plantao h6 { ... }div.box-plantao li...
Separação por blocos        div.box { ... }bloco        div.box a { ... }        div.box span.barra { ... }        div.box...
Ordemmenos específico            div.box { ... }            div.box a { ... }            div.box span.barra { ... }        ...
Ordem             div.box { ... }             div.box a { ... }             div.box span.barra { ... }ordem alfabética    ...
Resumão!
Teu HTML ficaria assim...<div class=”box box-plantao”>  <div class=”header”>    <h6>primeira página</h6>  </div>  <div cla...
E teu CSS ficaria assim...div.box { ... }div.box a { ... }div.box span.barra { ... }div.box-plantao h6 { ... }div.box-plan...
6.2   Organizando Propriedades
Organizando Propriedades‣   Uma propriedade:valor por linha‣   Separar propriedades por contexto
Organizando Propriedades‣   Uma propriedade:valor por linha‣   Separar propriedades por contexto
Uma propriedade por linha‣   Facilita diffs!
Uma propriedade por linha‣   Inserir comentários é mais tranquilo
Uma propriedade por linha‣   CSS 3 com vendor prefix são bem longos e variados.box_shadow {  -webkit-box-shadow: 0px 0px 4p...
Uma propriedade por linha‣   CSS 3 com vendor prefix são bem longos e variados.box_gradient {  background-color: #444444;  ...
Organizando Propriedades‣   Uma propriedade:valor por linha‣   Separar propriedades por contexto
Organizando Propriedades‣   1o grupo: layout    position, display, float, top, left, bottom, right, margin, padding,    wid...
importante!EVITE o !important
6.3   Elaborando Layouts
Prequel‣   1o grupo: layout    position, display, float, top, left, bottom, right, margin, padding,    width, height‣   2o ...
Prequel‣   1o grupo: layout    position, display, float, top, left, bottom, right, margin, padding,    width, height‣   2o ...
Prequel‣   1o grupo: layout    position, display, float, top, left, bottom, right, margin, padding,    width, height‣   2o ...
float:left
Float:Left contra o Mundo‣   O float serve para alinhar à esquerda, à direita ou não    alinhar (none).‣   A propriedade te...
Float:Left em QuadrinhosABC
Float:Left em Quadrinhos    A    B    C‣   A‣   B { float:left; }‣   C
Float:Left em Quadrinhos    A    B    C‣   Box B perdeu espaço no flow de boxes, mas    ocupou espaço à esquerda do conteúd...
Float:Left em QuadrinhosABC
Float:Left em Quadrinhos    A    B    C‣   A‣   B { float:left; }‣   C { float:left; }
Float:Left em QuadrinhosAA    B     C‣   B se alinhou à esquerda antes de C. Como saíram    do flow de boxes, a altura de A...
Float:Left contra o Mundo‣   Float:left/right tem um funcionamento difícil de    entender e de explicar.‣   A maioria dos ...
Alternativas ao float:left            {                inline display        block                inline-block            ...
display:inline-block
Antes de existir o CSS...‣   No HTML, os elementos são divididos em inline-level    (também chamado de text-level) e block...
Antes de existir o CSS...Elementos inline-level        Elementos block-level       <input> <a>                   <form>  <...
Antes de existir o CSS...Elementos inline-level        <dentro de> Elementos block-level       <input> <a>                ...
Antes de existir o CSS...Elementos inline-level        <dentro de> Elementos block-level       <input> <a>                ...
Antes de existir o CSS...Elementos inline-level         <dentro de> Elementos block-level       <input> <a>               ...
Antes de existir o CSS...‣   Leitura recomendada (é curto, prometo!):    http://www.w3.org/TR/html401/struct/global.html#h...
Nunca, nunca coloqueelementos block-leveldentro de inline-level.
Voltando ao CSS...
Displays‣   Os dois tipos básicos de display são:    ‣   display:block permite um elemento ser        dimensionado com wid...
Display:Inline-block‣   Junta características de elementos inlines e blocks.‣   Permite ficar lado-a-lado com outros elemen...
Display:Inline-block‣   Propriedade também consistente no cross-browser.‣   No IE7, é simulado por *display:inline e *zoom...
Display:Inline-block                                              Lorem ipsum dolor sit amet, consectetur                 ...
Exemplo de Uso
Exemplo de Uso            display:inline-block
Exemplo de Uso            display:inline-block
position:absolute
Position:Absolute‣   Propriedade bem consistente cross-browser. Portanto    bem mais seguro de se usar do que o float.‣   É...
Position:Absolute   <div> com position:relative
Position:Absolute   <div> com         <div> sem position:relative    position
Position:Absolute   <div> com         <div> sem      <div> com position:relative    position   position:absolute
Position:Absolute                                   top:150px          left:300px   <div> com           <div> sem         ...
Exemplo de Uso
Resumo!
Recomendação‣   Tente utilizar na seguinte ordem:    1.não usar nada (css padrão do navegador)    2.display:inline-block  ...
Exercício‣   Fazer o seguinte box:‣   Utilize o jsfiddle.net e o dummyimage.com
7   Estratégias de Validação
Estratégias	de Validação‣   Em vs Px‣   Hacks
7.1   Em vs. Px
Em vs Px‣   “em” é uma unidade de medida relativa e mais    flexível. 1em = 100%, logo 1.02em=102%.‣   “px” é uma unidade d...
Funcionamento do “em”12px       1.2em                        0.714em               14,4px             10px
Em vs Px‣   As principais vantagens do “em” são:    ‣   O tamanho da página aumenta conforme o        tamanho da fonte pré...
Em vs Px‣   As principais desvantagens do “em” são:    ‣   Número quebrado gera inconsistência entre        navegadores po...
Em vs Px‣   Vantagens do “px”:    ‣   Previsibilidade: 1px = 1px e pronto!    ‣   É a unidade padrão dos designers
Recomendação‣   Use apenas “px.” O desenvolvimento front-end já é    instável o suficiente.‣   Caso esteja interessado na fl...
7.2   Hacks
Hacks‣   Evite ao máximo utilizá-los.‣   É completamente possível fazer o mesmo CSS para    Firefox, Chrome, Safari e Oper...
Hacks: Quando usar?‣   O mais recomendado no mercado é fazer conditional    comments.‣   Mas a experiência mostra que da s...
Validação de BrowsersOrdem de preferência (ou audiência)                                          Ordem de recência       ...
Progressive Enhancement
Referências‣   CSS Compatibility and Internet Explorer    (http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx)‣ ...
Ferramentas‣   jsFiddle.net    (http://jsfiddle.net)‣   Dummy Images    (http://dummyimage.com)‣   Lorem Ipsum    (http://l...
Exemplos e Exercícios‣   Exemplo de Grid    (http://jsfiddle.net/lquixada/KVSNn/show/)‣   Exercício do Grid    (http://jsfid...
The EndLeonardo Quixadá
HTML/CSS Patterns
Upcoming SlideShare
Loading in...5
×

HTML/CSS Patterns

3,912

Published on

Published in: Technology
3 Comments
23 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,912
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&amp;#xE1; que apenas essas abordagens s&amp;#xE3;o eficientes?\n
  • \n
  • - Voc&amp;#xEA; olha o HTML e o CSS do cara do lado ou de terceiros e fala: &amp;#x201C;meu deus!&amp;#x201D; 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&amp;#xE2;nticas e classes\n- Ao inv&amp;#xE9;s de corrigir bugs, evit&amp;#xE1;-los\n\n
  • - Slide mais importante: Resumo do curso\n- Container e conte&amp;#xFA;do est&amp;#xE3;o dentro de estrutura\n
  • \n
  • \n
  • Boa parte do que fazemos no CDA s&amp;#xE3;o boxes. &amp;#xC9; o que vamos nos concentrar no curso.\n
  • \n
  • \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 glb-grid como exemplo.\n
  • \n
  • \n
  • \n
  • \n
  • - um bloco n&amp;#xE3;o tem margens\n- glb-bloco &amp;#xE9; um glb-grid-12 sem margins\n
  • - Na pr&amp;#xE1;tica, utilizamos mais grid-4, grid-8 e grid-12\n- glb-bloco &amp;#xE9; 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&amp;#xF4;zinho do BBB\n
  • \n
  • \n
  • \n
  • se poss&amp;#xED;vel utilizar tags HTML5: &lt;section&gt;, &lt;header&gt; e &lt;footer&gt;\n
  • Todo o css que vier dentro do &lt;div class=&amp;#x201D;box-plantao&amp;#x201D;&gt; ser&amp;#xE1; a partir dessa classe.\n
  • \n
  • \n
  • \n
  • - Coment&amp;#xE1;rios, de prefer&amp;#xEA;ncia, din&amp;#xE2;micos.\n
  • \n
  • \n
  • - Nativamente inline: &lt;a&gt;, &lt;input&gt;, &lt;img&gt;, &lt;span&gt;, etc...\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
  • Nada de grids aqui dentro. Deixa o componente mais independente de grids. Ou seja, &amp;#xE9; poss&amp;#xED;vel alterar o grid da p&amp;#xE1;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&amp;#xE1;cil fazer um git blame tamb&amp;#xE9;m.\n
  • \n
  • \n
  • - Se o arquivo come&amp;#xE7;ar a ficar longo demais, melhor quebrar em arquivos menores.\n
  • \n
  • Problema da ordem alfab&amp;#xE9;tica: width longe do height, top longe do bottom, etc...\n
  • Permite ser sobrescrito para ser customiz&amp;#xE1;vel em outros contextos.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Utilizar jsfiddle.net\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Combina&amp;#xE7;&amp;#xE3;o bomb&amp;#xE1;stica: IE6 + float:left\n
  • Utilizar jsfiddle.net\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Al&amp;#xE9;m de n&amp;#xE3;o fazer sentido, pode gerar efeitos colaterais.\n
  • \n
  • http://jsfiddle.net/lquixada/P3ED7/\n
  • \n
  • Mostrar diferen&amp;#xE7;a entre display:inline e display:block no jsFiddle\n
  • \n
  • \n
  • essa abordagem &amp;#xE9; mais usado quando h&amp;#xE1; uma depend&amp;#xEA;ncia de boxes.\n
  • essa abordagem &amp;#xE9; mais usado quando h&amp;#xE1; uma depend&amp;#xEA;ncia de boxes.\n
  • essa abordagem &amp;#xE9; mais usado quando h&amp;#xE1; uma depend&amp;#xEA;ncia de boxes.\n
  • \n
  • \n
  • http://jsfiddle.net/lquixada/4umjF/\n
  • \n
  • \n
  • \n
  • Mostrar a diferen&amp;#xE7;a entre as positions relative, absolute, fixed e static no jsFiddle\n
  • Essa abordagem &amp;#xE9; mais usado quando n&amp;#xE3;o h&amp;#xE1; uma depend&amp;#xEA;ncia de boxes.\nSe a foto sumir, o quote desloca?\n
  • \n
  • \n
  • imagem: 145px x 85px\nbox: 620px de largura\ndura&amp;#xE7;&amp;#xE3;o: 1h\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • - Modulariza&amp;#xE7;&amp;#xE3;o. Ao tirar um widget, n&amp;#xE3;o &amp;#xE9; necess&amp;#xE1;rio ca&amp;#xE7;ar propriedades em arquivos separados.\n- Algu&amp;#xE9;m conhece um hack para IE8-?\n
  • ver forma de valida&amp;#xE7;&amp;#xE3;o coletiva\n
  • \n
  • Utilizar jsfiddle.net para demonstra&amp;#xE7;&amp;#xF5;es\n
  • \n
  • Utilizar jsfiddle.net\n
  • \n
  • \n
  • - Lembrar que o SD se aplica a mat&amp;#xE9;rias e p&amp;#xE1;ginas inteiras\n- Estruturar HTML e CSS abrindo caminho para CSS3 e Javascript\n- Abrimos caminho para SEO, Microdata...\n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "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á

    ×