oficina html5 + css3

29
Oficina de Desenvolvimento com HTML5 e CSS3 por Frederick Moschkowich

Upload: frederick-moschkowich

Post on 17-Aug-2015

128 views

Category:

Internet


2 download

TRANSCRIPT

Page 1: Oficina HTML5 + CSS3

Oficina de Desenvolvimento com HTML5 e CSS3por Frederick Moschkowich

Page 2: Oficina HTML5 + CSS3

Quem sou?

Frederick MoschkowichDesenvolvedor web há 10 anosAtualmente estagiário back-end developer no Instituto de Tecnologia Aplicada e Inovação (ITAI)

Visão de um back-end sobre o Front-end

por Frederick Moschkowich

Page 3: Oficina HTML5 + CSS3

O que vamos ver hoje?

● Semântica● O que é HTML5?● Por que usar?● Como usar?● CSS3● Design Responsivo / Bootstrap● Perguntas e Respostas

por Frederick Moschkowich

Page 4: Oficina HTML5 + CSS3

Semântica

● O que é?● Para que serve?● Web acessível a todos● WAI-Aria● Pagerank do Google● Plugins

o HTML5 Outliner

por Frederick Moschkowich

Page 5: Oficina HTML5 + CSS3

por Frederick Moschkowich

Page 6: Oficina HTML5 + CSS3

O design na web hoje!

● Web 3.0● Material Design● Falta conhecimento de Front-end● Utilizar DIV em casos específicos

por Frederick Moschkowich

Page 7: Oficina HTML5 + CSS3

Nosso Layout de hoje!

por Frederick Moschkowich

Page 8: Oficina HTML5 + CSS3

Plugin e Inspecionar Elementos

● F12 é nosso amigo ● HTML5 Outliner

por Frederick Moschkowich

Page 9: Oficina HTML5 + CSS3

Documento HTML5

por Frederick Moschkowich

Page 10: Oficina HTML5 + CSS3

Novas tags HTML5

● <head><head> X <header></header>

por Frederick Moschkowich

Page 11: Oficina HTML5 + CSS3

Novas tags HTML5

● <head><head> X <header></header>

por Frederick Moschkowich

Page 12: Oficina HTML5 + CSS3

Novas tags HTML5

● <head><head> X <header></header>

por Frederick Moschkowich

Page 13: Oficina HTML5 + CSS3

Novas tags HTML5

● <nav> </nav>

por Frederick Moschkowich

Page 14: Oficina HTML5 + CSS3

Novas tags HTML5

● <section> </section>

por Frederick Moschkowich

Page 15: Oficina HTML5 + CSS3

Novas tags HTML5

● <article> </article>

por Frederick Moschkowich

Page 16: Oficina HTML5 + CSS3

Novas tags HTML5

● <aside> </aside>

por Frederick Moschkowich

Page 17: Oficina HTML5 + CSS3

Novas tags HTML5

● <footer> </footer>

por Frederick Moschkowich

Page 18: Oficina HTML5 + CSS3

Novas tags HTML5

● <figure> </figure> ● <figcaption> </figcaption>

por Frederick Moschkowich

Page 19: Oficina HTML5 + CSS3

Novas tags HTML5

● <canvas> </canvas>

por Frederick Moschkowich

Page 20: Oficina HTML5 + CSS3

Novas tags HTML5

● <video> </video>

por Frederick Moschkowich

Page 21: Oficina HTML5 + CSS3

Novas tags HTML5

● <audio> </audio>

por Frederick Moschkowich

Page 22: Oficina HTML5 + CSS3

Intervalo

Page 23: Oficina HTML5 + CSS3

Formulários HTML5

● Novos inputso emailo urlo numbero rangeo dateo color

por Frederick Moschkowich

Page 24: Oficina HTML5 + CSS3

Formulários HTML5

● Atributoso autofocuso min e maxo patterno placeholdero requiredo step

por Frederick Moschkowich

Page 25: Oficina HTML5 + CSS3

CSS3

● O que há de novidade● Exemplos

o border-radiuso box-shadowo rotationo text-shadowo opacityo animationso transitions

por Frederick Moschkowich

Page 26: Oficina HTML5 + CSS3

Layout Responsivo

● O que é● Importância● Media Queries● CSS Reset● Grid

por Frederick Moschkowich

Page 27: Oficina HTML5 + CSS3

Bootstrap

● O que é● Importância● O que existe● Como criar um

por Frederick Moschkowich

Page 28: Oficina HTML5 + CSS3

Perguntas e Respostas

Page 29: Oficina HTML5 + CSS3

Obrigado!

/fredmosc /fred_mosc /fredmosc