+HTML 5 E CSS 3 Experiência para usuário!
HTML 5• Novos elementos estruturais • <header> • <section> • <article> • <footer> • <nav>   <aside>
HTML 5• Novos elementos estruturais • <header> • <section> • <article> • <footer> • <nav>   <aside>
HTML 5• Elementos   de Conteúdo • <figure> - Associa legenda a uma img, video, audio, obj, iframe • <canvas> - render de im...
HTML 5• Elementos        de Conteúdo • <figure>   •   <figure id="figura01">   •         <legend>Figura 1. Esquema de uma pág...
HTML 5• Elementosde Conteúdo • <canvas>   •   Bibliotecas Javascript utilizam essa tag para renderizar imagens ou mesmo ut...
HTML 5• Elementosde Conteúdo • <audio>, <video>   •   <audio src="musica.mp3" autoplay="autoplay" loop="20000" />   •   <v...
HTML 5• Elementosde Conteúdo • <dialog>   •   <dialog>   •       <dt> Olá! Tudo bem?   •       <dd>Olá! Tudo certo e com v...
HTML 5• Ganhou  um logo!  • E tem elementos que indicam quais recursos estão sendo    usados na página.• Todas as tags do ...
HTML 5• Ganhou  um logo!  • E tem elementos que indicam quais recursos estão sendo    usados na página.• Todas as tags do ...
CSS 3• Alguns  elementos já conhecemos da nossa realidade• alguns são novos ou nunca usamos.• overflow-style: {auto|scrollb...
CSS 3• CSS3Layout body{ grid: “ a a a”             “ b c d” “ #head { flow: a } #nav { flow: b } #adv {flow: c } #body { flow:...
CSS 3• Seletores  • s1  > s2 - s2 filho de s1  • s1 + s2 - s2 precede imediatamente por s1  • s1 ~ s2 - s2 precede de s1  •...
CSS 3• Seletores  • E:only-of-type   - unico filho do seu tipo  • E:only-child - unico filho  • E:last-of-type - ultimo de u...
CSS 3• Seletores  • E[attr         ? ”val”]    • Aonde ? pode ser:      • ~ - aonde o atributo eh uma lista separada por e...
HTML 5.1 E CSS 4      MAS JÁ?
PORQUE!• Mesmo, com   o CSS3 e o HTML 5 liberados • Não   temos browsers suportam • Mas devemos ficar espertos e aprender j...
SELETORES CSS4• $E  >F   • Aonde selecionamos ($E) que contenham F     • $DIV UL.menu { ... }     • $H2 > A { ... }     • ...
SELETORES CSS4• E:matches(s1, s2)    S  • Seleciona todos os elementos s1 e s2 que a regra contém  • DIV:matches(A,P)  • :...
SELETORES CSS4• A:local-link(0) { ... }  • Seleciona os links que funcionam localmente (prop. dom.)• A:not(:local-link(0))...
HTML 5.1• W3C  ainda está começando a nova especificação• Com a finalização do HTML 5, irá ser inserido novas  tendencias• M...
REFERENCIAS• http://www.w3.org/TR/2011/WD-selectors4-20110929/    #overview• http://davidwalsh.name/css4-preview•
Apresentação - HTML5 e CSS3 Fabrica do Design
Próximos SlideShares
Carregando em…5
×

Apresentação - HTML5 e CSS3 Fabrica do Design

1.206 visualizações

Publicada em

Apresentação da Fabrica do Design - Workshop de HTML e CSS

Publicada em: Design
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.206
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
57
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Comentar sobre os atributos que foram retirados (porque o CSS pode reproduzir eles semant..):\ntarget no elemento &lt;a&gt;;\nalign nos elementos &lt;table&gt; e demais tags de tabelas, &lt;iframe&gt;, &lt;img&gt;, &lt;input&gt;, &lt;hr&gt;, &lt;div&gt;, &lt;p&gt;, entre outros;\nbackground em &lt;body&gt;;\nbgcolor nos elementos de tabela e no &lt;body&gt;;\nborder em &lt;table&gt; e &lt;object&gt;;\ncellpadding e cellspacing em &lt;table&gt;;\nheight em &lt;td&gt; e &lt;th&gt;;\nwidth nos elementos &lt;hr&gt;, &lt;table&gt;, &lt;td&gt;, &lt;th&gt; e &lt;pre&gt;;\nhspace e vspace em &lt;img&gt; e &lt;object&gt;;\nnoshade e size em &lt;hr&gt;.\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • $ seleciona um elemento e verifica se tem as regras abaixo\n\n
  • $ seleciona um elemento e verifica se tem as regras abaixo\n\n
  • $ seleciona um elemento e verifica se tem as regras abaixo\n\n
  • $ seleciona um elemento e verifica se tem as regras abaixo\n\n
  • \n
  • Apresentação - HTML5 e CSS3 Fabrica do Design

    1. 1. +HTML 5 E CSS 3 Experiência para usuário!
    2. 2. HTML 5• Novos elementos estruturais • <header> • <section> • <article> • <footer> • <nav> <aside>
    3. 3. HTML 5• Novos elementos estruturais • <header> • <section> • <article> • <footer> • <nav> <aside>
    4. 4. HTML 5• Elementos de Conteúdo • <figure> - Associa legenda a uma img, video, audio, obj, iframe • <canvas> - render de imagens personalizado • <audio> - usado para streaming • <video> - usado para streaming • <dialog> - junto ao dd, dt serve para criar uma rep. de diálogo • <time> - representação de data e hora • <meter> - utilizado para representar medidas
    5. 5. HTML 5• Elementos de Conteúdo • <figure> • <figure id="figura01"> • <legend>Figura 1. Esquema de uma página em HTML5</legend> • <img src="html5.png" border="0" width="200" height="300" • alt="Estrutura de uma página escrita com os novos elementos do HTML5" /> • </figure>
    6. 6. HTML 5• Elementosde Conteúdo • <canvas> • Bibliotecas Javascript utilizam essa tag para renderizar imagens ou mesmo utilizar a API para renderizar webGL. • Ex.: treeJS, jCanvaScript, fabric.js, cakejs, doodle.js,
    7. 7. HTML 5• Elementosde Conteúdo • <audio>, <video> • <audio src="musica.mp3" autoplay="autoplay" loop="20000" /> • <video src="video.mov" width="400" height="360" />
    8. 8. HTML 5• Elementosde Conteúdo • <dialog> • <dialog> • <dt> Olá! Tudo bem? • <dd>Olá! Tudo certo e com você? • <dt> Que bom! • <dd> Como está sua familia?. • <dt> Ah, tudo certo com eles, e com a sua? • <dd> Tudo certo com a minha também! • </dialog>
    9. 9. HTML 5• Ganhou um logo! • E tem elementos que indicam quais recursos estão sendo usados na página.• Todas as tags do HTML5 devem ser fechadas• Doctype: • <!DOCTYPE html>• Elementos que deixaram de existir: • <basefont>,<big>, <center>, <font>, <s>, <strike>, <tt>, <u>, <frame>, <frameset> e <noframes>
    10. 10. HTML 5• Ganhou um logo! • E tem elementos que indicam quais recursos estão sendo usados na página.• Todas as tags do HTML5 devem ser fechadas• Doctype: • <!DOCTYPE html>• Elementos que deixaram de existir: • <basefont>,<big>, <center>, <font>, <s>, <strike>, <tt>, <u>, <frame>, <frameset> e <noframes>
    11. 11. CSS 3• Alguns elementos já conhecemos da nossa realidade• alguns são novos ou nunca usamos.• overflow-style: {auto|scrollbar|panner|move|marquee}• Multi-collum layout: • collumn-width : INT{px|inch|cm|em} • collumn-gap: INT{px|inch|cm|em} • collumn-rule: idem da config da borda
    12. 12. CSS 3• CSS3Layout body{ grid: “ a a a” “ b c d” “ #head { flow: a } #nav { flow: b } #adv {flow: c } #body { flow: d }
    13. 13. CSS 3• Seletores • s1 > s2 - s2 filho de s1 • s1 + s2 - s2 precede imediatamente por s1 • s1 ~ s2 - s2 precede de s1 • E:first-letter - primeira letra do elemento E • E:firt-line - primeira linha do elemento E • E:lang(fr) - elemento formatado para a linguagem FR ou qq outra • E:empty - elemento que não tem filhos nem conteudo
    14. 14. CSS 3• Seletores • E:only-of-type - unico filho do seu tipo • E:only-child - unico filho • E:last-of-type - ultimo de um tipo • E:first-of-type - primeiro de um tipo • E:last-child - ultimo filho • E:first-child - primeiro filho • E:nth-... (todos os outros seletores so que para o enésimo elemento)
    15. 15. CSS 3• Seletores • E[attr ? ”val”] • Aonde ? pode ser: • ~ - aonde o atributo eh uma lista separada por espaço • ^ - valor do atributo começa com o val • $ - valor que termina exatamente como val • * - comparação parcial de val no atributo • | - aonde o atributo eh uma lista separada por hifens
    16. 16. HTML 5.1 E CSS 4 MAS JÁ?
    17. 17. PORQUE!• Mesmo, com o CSS3 e o HTML 5 liberados • Não temos browsers suportam • Mas devemos ficar espertos e aprender ja as novas tecnologias• CSS4 e HTML 5.1 vem com novas especificações que permitem muito mais
    18. 18. SELETORES CSS4• $E >F • Aonde selecionamos ($E) que contenham F • $DIV UL.menu { ... } • $H2 > A { ... } • $UL > LI:only-child { ... } • $DIV H2 ~ P { ... }• :NOT(s1, s2) • Seletor presente no CSS3, agora permite selecionar • Não suporta os operadores +, ~, > • *:not(DIV, P) { ... }
    19. 19. SELETORES CSS4• E:matches(s1, s2) S • Seleciona todos os elementos s1 e s2 que a regra contém • DIV:matches(A,P) • :matches(DIV,SPAN.foto) img { ... } • input:matches(:focus, :hover) { ... }• E[attr=”val” i ] • o adicional nesse atributo i é o fato dele dizer insensitive• A:local-link { ... } • Seleciona os links que funcionam localmente (prop. pag.)• A:not(:local-link) { ... }• Todos os links que apontam para outras paginas.
    20. 20. SELETORES CSS4• A:local-link(0) { ... } • Seleciona os links que funcionam localmente (prop. dom.)• A:not(:local-link(0)) { ... } • Todos os links que apontam para outros domínios.• E /attr/ F • LABEL:matches(:hover, :focus) /for/ INPUT • Seleciona o input quando seu estado for hover e focus • O atributo F não precisa estar dentro de E e nem ser irmão•
    21. 21. HTML 5.1• W3C ainda está começando a nova especificação• Com a finalização do HTML 5, irá ser inserido novas tendencias• Mas ainda não tem nada!• Somente uma idéia!• hahahaha
    22. 22. REFERENCIAS• http://www.w3.org/TR/2011/WD-selectors4-20110929/ #overview• http://davidwalsh.name/css4-preview•

    ×