Apresentação - HTML5 e CSS3 Fabrica do Design
Upcoming SlideShare
Loading in...5
×
 

Apresentação - HTML5 e CSS3 Fabrica do Design

on

  • 704 views

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

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

Statistics

Views

Total Views
704
Views on SlideShare
704
Embed Views
0

Actions

Likes
1
Downloads
16
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 e demais tags de tabelas, , , , , , , entre outros;\nbackground em ;\nbgcolor nos elementos de tabela e no ;\nborder em e ;\ncellpadding e cellspacing em ;\nheight em e ;\nwidth nos elementos , , , e ;\nhspace e vspace em e ;\nnoshade e size em .\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 Apresentação - HTML5 e CSS3 Fabrica do Design Presentation Transcript

  • +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 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
  • 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>
  • 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,
  • HTML 5• Elementosde Conteúdo • <audio>, <video> • <audio src="musica.mp3" autoplay="autoplay" loop="20000" /> • <video src="video.mov" width="400" height="360" />
  • 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>
  • 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>
  • 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>
  • 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
  • CSS 3• CSS3Layout body{ grid: “ a a a” “ b c d” “ #head { flow: a } #nav { flow: b } #adv {flow: c } #body { flow: d }
  • 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
  • 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)
  • 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
  • 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 ja as novas tecnologias• CSS4 e HTML 5.1 vem com novas especificações que permitem muito mais
  • 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) { ... }
  • 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.
  • 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•
  • 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
  • REFERENCIAS• http://www.w3.org/TR/2011/WD-selectors4-20110929/ #overview• http://davidwalsh.name/css4-preview•