O documento apresenta um estudo de caso sobre o uso de Fireworks, HTML5 e CSS3. Ele discute as principais mudanças nas tecnologias, como a semântica adicionada em HTML5 e novos recursos em CSS3. O documento fornece links para arquivos, softwares e referências adicionais sobre o assunto.

1. Desbravando Fireworks,
CSS3 e HTML5

2. Fabiano Meneghetti
@FabianoMe

3. 1- Fireworks
Apresentar estudo de caso - Layout
Exportar imagens / slices
2- Html5 + CSS3
Análise dos códigos
Foco da oficina
Onde houveram as principais mudanças

4. Sobre a oficina
• Mostrar a estrutura e o resultado final
• Explicar o que foi feito de mais importante em cada passo
• Novos experimentos

5. Arquivos para download
http://goo.gl/HOtCd

6. Softwares utlizados
Fireworks - http://goo.gl/DAYc
Textmate - http://goo.gl/He5v
CSSEdit - http://goo.gl/QFQ2

7. Fireworks
Etapa 1- Layout

9. Etapa 2- Código

10. source: caniuse.com

11. O que tem de novo
• Semântica
• Formulários
• Controles Multimídia
• Suporte para desenhos
• API’s

12. Semântica
O que antes usávamos <div>, hoje podemos usar:
• <header> ... </header>
• <nav> ... </nav>
• <article> ... </article>
• <section> ... </section>
• <aside> ... </aside>
• <footer> ... </footer>

13. Vamos ao código!

15. CSS3
Etapa 3 - Estilo

18. E nosso código...

20. 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

22. fabiano.me
@FabianoMe

23. Obrigado!

24. abduzeedo.com.br zee.com.br