keynote campus party
DESCRIPTION
Apresentação na Campus Party sobre processo de trabalho em webdesign utilizando Fireworks, Html5 e CSS3TRANSCRIPT
![Page 1: Keynote Campus Party](https://reader033.vdocuments.net/reader033/viewer/2022051611/549ff108ac795977328b464c/html5/thumbnails/1.jpg)
Desbravando Fireworks, CSS3 e HTML5
![Page 2: Keynote Campus Party](https://reader033.vdocuments.net/reader033/viewer/2022051611/549ff108ac795977328b464c/html5/thumbnails/2.jpg)
Fabiano Meneghetti@FabianoMe
![Page 3: Keynote Campus Party](https://reader033.vdocuments.net/reader033/viewer/2022051611/549ff108ac795977328b464c/html5/thumbnails/3.jpg)
1- FireworksApresentar estudo de caso - LayoutExportar imagens / slices
2- Html5 + CSS3Análise dos códigosFoco da oficinaOnde houveram as principais mudanças
![Page 4: Keynote Campus Party](https://reader033.vdocuments.net/reader033/viewer/2022051611/549ff108ac795977328b464c/html5/thumbnails/4.jpg)
Sobre a oficina• Mostrar a estrutura e o resultado final
• Explicar o que foi feito de mais importante em cada passo
• Novos experimentos
![Page 5: Keynote Campus Party](https://reader033.vdocuments.net/reader033/viewer/2022051611/549ff108ac795977328b464c/html5/thumbnails/5.jpg)
Arquivos para download
http://goo.gl/HOtCd
![Page 6: Keynote Campus Party](https://reader033.vdocuments.net/reader033/viewer/2022051611/549ff108ac795977328b464c/html5/thumbnails/6.jpg)
Softwares utlizados
Fireworks - http://goo.gl/DAYc
Textmate - http://goo.gl/He5v
CSSEdit - http://goo.gl/QFQ2
![Page 7: Keynote Campus Party](https://reader033.vdocuments.net/reader033/viewer/2022051611/549ff108ac795977328b464c/html5/thumbnails/7.jpg)
Etapa 1- Layout
Fireworks
![Page 8: Keynote Campus Party](https://reader033.vdocuments.net/reader033/viewer/2022051611/549ff108ac795977328b464c/html5/thumbnails/8.jpg)
![Page 9: Keynote Campus Party](https://reader033.vdocuments.net/reader033/viewer/2022051611/549ff108ac795977328b464c/html5/thumbnails/9.jpg)
Etapa 2- Código
![Page 10: Keynote Campus Party](https://reader033.vdocuments.net/reader033/viewer/2022051611/549ff108ac795977328b464c/html5/thumbnails/10.jpg)
source: caniuse.com
![Page 11: Keynote Campus Party](https://reader033.vdocuments.net/reader033/viewer/2022051611/549ff108ac795977328b464c/html5/thumbnails/11.jpg)
• Semântica
• Formulários
• Controles Multimídia
• Suporte para desenhos
• API’s
O que tem de novo
![Page 12: Keynote Campus Party](https://reader033.vdocuments.net/reader033/viewer/2022051611/549ff108ac795977328b464c/html5/thumbnails/12.jpg)
• <header> ... </header>
• <nav> ... </nav>
• <article> ... </article>
• <section> ... </section>
• <aside> ... </aside>
• <footer> ... </footer>
SemânticaO que antes usávamos <div>, hoje podemos usar:
![Page 13: Keynote Campus Party](https://reader033.vdocuments.net/reader033/viewer/2022051611/549ff108ac795977328b464c/html5/thumbnails/13.jpg)
Vamos ao código!
![Page 14: Keynote Campus Party](https://reader033.vdocuments.net/reader033/viewer/2022051611/549ff108ac795977328b464c/html5/thumbnails/14.jpg)
![Page 15: Keynote Campus Party](https://reader033.vdocuments.net/reader033/viewer/2022051611/549ff108ac795977328b464c/html5/thumbnails/15.jpg)
Etapa 3 - Estilo
CSS3
![Page 16: Keynote Campus Party](https://reader033.vdocuments.net/reader033/viewer/2022051611/549ff108ac795977328b464c/html5/thumbnails/16.jpg)
![Page 17: Keynote Campus Party](https://reader033.vdocuments.net/reader033/viewer/2022051611/549ff108ac795977328b464c/html5/thumbnails/17.jpg)
![Page 18: Keynote Campus Party](https://reader033.vdocuments.net/reader033/viewer/2022051611/549ff108ac795977328b464c/html5/thumbnails/18.jpg)
E nosso código...
![Page 19: Keynote Campus Party](https://reader033.vdocuments.net/reader033/viewer/2022051611/549ff108ac795977328b464c/html5/thumbnails/19.jpg)
![Page 20: Keynote Campus Party](https://reader033.vdocuments.net/reader033/viewer/2022051611/549ff108ac795977328b464c/html5/thumbnails/20.jpg)
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
![Page 21: Keynote Campus Party](https://reader033.vdocuments.net/reader033/viewer/2022051611/549ff108ac795977328b464c/html5/thumbnails/21.jpg)
![Page 22: Keynote Campus Party](https://reader033.vdocuments.net/reader033/viewer/2022051611/549ff108ac795977328b464c/html5/thumbnails/22.jpg)
fabiano.me
@FabianoMe
![Page 23: Keynote Campus Party](https://reader033.vdocuments.net/reader033/viewer/2022051611/549ff108ac795977328b464c/html5/thumbnails/23.jpg)
Obrigado!
![Page 24: Keynote Campus Party](https://reader033.vdocuments.net/reader033/viewer/2022051611/549ff108ac795977328b464c/html5/thumbnails/24.jpg)
zee.com.brabduzeedo.com.br