Oficina HTML5 + CSS3

342 visualizações

Publicada em

Apresentação da oficina de HTML5 + CSS3 na primeira semana acadêmica do Instituto Federal do Paraná (IFPR) campus Foz do Iguaçu.
Primeira turma de Análise e Desenvolvimento de Sistemas
3o período

Publicada em: Internet
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
342
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
8
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Oficina HTML5 + CSS3

  1. 1. Oficina de Desenvolvimento com HTML5 e CSS3 por Frederick Moschkowich
  2. 2. Quem sou? Frederick Moschkowich Desenvolvedor web há 10 anos Atualmente 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
  3. 3. 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
  4. 4. Semântica ● O que é? ● Para que serve? ● Web acessível a todos ● WAI-Aria ● Pagerank do Google ● Plugins o HTML5 Outliner por Frederick Moschkowich
  5. 5. por Frederick Moschkowich
  6. 6. O design na web hoje! ● Web 3.0 ● Material Design ● Falta conhecimento de Front-end ● Utilizar DIV em casos específicos por Frederick Moschkowich
  7. 7. Nosso Layout de hoje! por Frederick Moschkowich
  8. 8. Plugin e Inspecionar Elementos ● F12 é nosso amigo ● HTML5 Outliner por Frederick Moschkowich
  9. 9. Documento HTML5 por Frederick Moschkowich
  10. 10. Novas tags HTML5 ● <head><head> X <header></header> por Frederick Moschkowich
  11. 11. Novas tags HTML5 ● <head><head> X <header></header> por Frederick Moschkowich
  12. 12. Novas tags HTML5 ● <head><head> X <header></header> por Frederick Moschkowich
  13. 13. Novas tags HTML5 ● <nav> </nav> por Frederick Moschkowich
  14. 14. Novas tags HTML5 ● <section> </section> por Frederick Moschkowich
  15. 15. Novas tags HTML5 ● <article> </article> por Frederick Moschkowich
  16. 16. Novas tags HTML5 ● <aside> </aside> por Frederick Moschkowich
  17. 17. Novas tags HTML5 ● <footer> </footer> por Frederick Moschkowich
  18. 18. Novas tags HTML5 ● <figure> </figure> ● <figcaption> </figcaption> por Frederick Moschkowich
  19. 19. Novas tags HTML5 ● <canvas> </canvas> por Frederick Moschkowich
  20. 20. Novas tags HTML5 ● <video> </video> por Frederick Moschkowich
  21. 21. Novas tags HTML5 ● <audio> </audio> por Frederick Moschkowich
  22. 22. Intervalo
  23. 23. Formulários HTML5 ● Novos inputs o email o url o number o range o date o color por Frederick Moschkowich
  24. 24. Formulários HTML5 ● Atributos o autofocus o min e max o pattern o placeholder o required o step por Frederick Moschkowich
  25. 25. CSS3 ● O que há de novidade ● Exemplos o border-radius o box-shadow o rotation o text-shadow o opacity o animations o transitions por Frederick Moschkowich
  26. 26. Layout Responsivo ● O que é ● Importância ● Media Queries ● CSS Reset ● Grid por Frederick Moschkowich
  27. 27. Bootstrap ● O que é ● Importância ● O que existe ● Como criar um por Frederick Moschkowich
  28. 28. Perguntas e Respostas
  29. 29. Obrigado! /fredmosc /fred_mosc /fredmosc

×