Apresentação - HTML5 e CSS3 Fabrica do Design
•Download as KEY, PDF•
0 likes•1,337 views
Apresentação da Fabrica do Design - Workshop de HTML e CSS
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Apresentação - HTML5 e CSS3 Fabrica do Design
Similar to Apresentação - HTML5 e CSS3 Fabrica do Design (20)
More from Iuri Andreazza
Apresentação - HTML5 e CSS3 Fabrica do Design
- 1. + HTML 5 E CSS 3 Experiência para usuário!
- 3. HTML 5 • Novos elementos estruturais • <header> • <section> • <article> • <footer> • <nav> <aside>
- 4. HTML 5 • Novos elementos estruturais • <header> • <section> • <article> • <footer> • <nav> <aside>
- 5. 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
- 6. 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>
- 7. 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,
- 8. HTML 5 • Elementosde Conteúdo • <audio>, <video> • <audio src="musica.mp3" autoplay="autoplay" loop="20000" /> • <video src="video.mov" width="400" height="360" />
- 9. 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>
- 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. 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>
- 12. 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
- 13. CSS 3 • CSS3Layout body{ grid: “ a a a” “ b c d” “ #head { flow: a } #nav { flow: b } #adv {flow: c } #body { flow: d }
- 14. 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
- 15. 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)
- 16. 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
- 17. HTML 5.1 E CSS 4 MAS JÁ?
- 18. 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
- 19. 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) { ... }
- 20. 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.
- 21. 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 •
- 22. 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
- 23. REFERENCIAS • http://www.w3.org/TR/2011/WD-selectors4-20110929/ #overview • http://davidwalsh.name/css4-preview •
Editor's Notes
- \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