View
128
Download
2
Category
Preview:
Citation preview
Oficina de Desenvolvimento com HTML5 e CSS3por Frederick Moschkowich
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
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
Semântica
● O que é?● Para que serve?● Web acessível a todos● WAI-Aria● Pagerank do Google● Plugins
o HTML5 Outliner
por Frederick Moschkowich
por Frederick Moschkowich
O design na web hoje!
● Web 3.0● Material Design● Falta conhecimento de Front-end● Utilizar DIV em casos específicos
por Frederick Moschkowich
Nosso Layout de hoje!
por Frederick Moschkowich
Plugin e Inspecionar Elementos
● F12 é nosso amigo ● HTML5 Outliner
por Frederick Moschkowich
Documento HTML5
por Frederick Moschkowich
Novas tags HTML5
● <head><head> X <header></header>
por Frederick Moschkowich
Novas tags HTML5
● <head><head> X <header></header>
por Frederick Moschkowich
Novas tags HTML5
● <head><head> X <header></header>
por Frederick Moschkowich
Novas tags HTML5
● <nav> </nav>
por Frederick Moschkowich
Novas tags HTML5
● <section> </section>
por Frederick Moschkowich
Novas tags HTML5
● <article> </article>
por Frederick Moschkowich
Novas tags HTML5
● <aside> </aside>
por Frederick Moschkowich
Novas tags HTML5
● <footer> </footer>
por Frederick Moschkowich
Novas tags HTML5
● <figure> </figure> ● <figcaption> </figcaption>
por Frederick Moschkowich
Novas tags HTML5
● <canvas> </canvas>
por Frederick Moschkowich
Novas tags HTML5
● <video> </video>
por Frederick Moschkowich
Novas tags HTML5
● <audio> </audio>
por Frederick Moschkowich
Intervalo
Formulários HTML5
● Novos inputso emailo urlo numbero rangeo dateo color
por Frederick Moschkowich
Formulários HTML5
● Atributoso autofocuso min e maxo patterno placeholdero requiredo step
por Frederick Moschkowich
CSS3
● O que há de novidade● Exemplos
o border-radiuso box-shadowo rotationo text-shadowo opacityo animationso transitions
por Frederick Moschkowich
Layout Responsivo
● O que é● Importância● Media Queries● CSS Reset● Grid
por Frederick Moschkowich
Bootstrap
● O que é● Importância● O que existe● Como criar um
por Frederick Moschkowich
Perguntas e Respostas
Obrigado!
/fredmosc /fred_mosc /fredmosc
Recommended