Desbravando Fireworks, CSS3 e HTML5

Fabiano Meneghetti@FabianoMe

1- FireworksApresentar estudo de caso - LayoutExportar imagens / slices

2- Html5 + CSS3Análise dos códigosFoco da oficinaOnde houveram as principais mudanças

Sobre a oficina• Mostrar a estrutura e o resultado final

• Explicar o que foi feito de mais importante em cada passo

• Novos experimentos

Arquivos para download

http://goo.gl/HOtCd

Softwares utlizados

Fireworks - http://goo.gl/DAYc

Textmate - http://goo.gl/He5v

CSSEdit - http://goo.gl/QFQ2

Etapa 1- Layout

Fireworks

Etapa 2- Código

source: caniuse.com

• Semântica

• Formulários

• Controles Multimídia

• Suporte para desenhos

• API’s

O que tem de novo

• <header> ... </header>

• <nav> ... </nav>

• <article> ... </article>

• <section> ... </section>

• <aside> ... </aside>

• <footer> ... </footer>

SemânticaO que antes usávamos <div>, hoje podemos usar:

Vamos ao código!

Etapa 3 - Estilo

CSS3

E nosso código...

Referências• http://en.wikipedia.org/wiki/Cascading_Style_Sheets

• http://en.wikipedia.org/wiki/Html5

• http://dev.w3.org/html5/html4-differences/

• http://www.CSS3.info

• http://css-tricks.com/

• http://caniuse.com

• http://www.CSS3.info/preview

fabiano.me

@FabianoMe

Obrigado!

zee.com.brabduzeedo.com.br