Apresentação - HTML5 e CSS3 Fabrica do Design

1,115 views
968 views

Published on

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

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,115
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
53
Comments
0
Likes
1
Embeds 0
No embeds

No notes for 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 <a>;\nalign nos elementos <table> e demais tags de tabelas, <iframe>, <img>, <input>, <hr>, <div>, <p>, entre outros;\nbackground em <body>;\nbgcolor nos elementos de tabela e no <body>;\nborder em <table> e <object>;\ncellpadding e cellspacing em <table>;\nheight em <td> e <th>;\nwidth nos elementos <hr>, <table>, <td>, <th> e <pre>;\nhspace e vspace em <img> e <object>;\nnoshade e size em <hr>.\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•

    ×