Desenvolvedor Front-End

206 views

Published on

Apresentação para a semana de profissões na Faculdade Evolução. 07/11/2013

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
206
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Desenvolvedor Front-End

  1. 1. Desenvolvedor Front-End Muito mais do que só HTML Anderson Andrade fb.com/andersao ! 07/11/2013 Faculdade Evolução
  2. 2. Quem é? O desenvolvedor front-end é o profissional responsável por projetar, criar e otimizar interfaces web.
  3. 3. Responsabilidades
  4. 4. SEO SEO exige mais do que um especialista. É um esforço de equipe.
  5. 5. Performance 80% da performance de um website está do lado do client-side.
  6. 6. Acessibilidade /Usabilidade Você não faz um site acessível por que você está com pena de alguém cego. Você faz um site acessível por que você precisa que seu site seja visto por todos.
  7. 7. Escalabilidade • • Modulariazação Facilidade de manutenção
  8. 8. Ferramentas
  9. 9. Sublime Text
  10. 10. http://lesscss.org/
  11. 11. http://learnboost.github.io/stylus/
  12. 12. http://sass-lang.com/
  13. 13. $font-stack: "Helvetica, sans-serif ”; $primary-color: #333; ! body { font: 100% $font-stack; color: $primary-color; } body { font: 100% Helvetica, sans-serif; color: #333; }
  14. 14. Comandos SASS sass style.scss:style.css sass —watch style.scss:style.css sass --watch app/sass:public/stylesheets
  15. 15. http://compass-style.org/
  16. 16. @import "compass"; ! @import "flags/*.png"; @include all-flags-sprites; [dir-projeto] compass compile [dir-projeto] compass watch
  17. 17. http://gruntjs.com/
  18. 18. http://yeoman.io/
  19. 19. http://git-scm.com/
  20. 20. Linguagens Linguagens de marcação, programação e folhas de estilo.
  21. 21. Tags removidas • acronym • dir • strike • applet • font • tt • basefont • frame • big • frameset • center • frameset
  22. 22. Estrutura do HTML
  23. 23. Novas tags • article • details • hgroup • aside • device • nav • audio • figure • progress • canvas • footer • section • command • header • video
  24. 24. Atributos Globais • contenteditable • data-* • draggable • dropzone • hidden • spellcheck
  25. 25. API's • Web Forms • Geolocation • Web Storage • Vídeos & Audio • Web Sockets • Canvas & SVG • Web Workes • Aplicações Offline
  26. 26. WEB FORMS 2.0 Mais tipos de input Validação mais simples Menos Javascript
  27. 27. NOVOS TIPOS DE INPUTS - email - search - date - url - datetime - color - number - range
  28. 28. WEB STORAGE WEB STORAGE
  29. 29. API HISTORY
  30. 30. API HISTORY
  31. 31. GEOLOCATION
  32. 32. Seletores e Pseudo Classes • E:first-child • E:empty • E:last-child • E:enabled • E:nth-child() • E:disabled • E[attribute] • E:checked • E:before • E::selection • E:after • E~F http://bit.ly/17b3kK6
  33. 33. div[id^="nav"] { background:#ff0; } input[type="text"]:disabled { background:#ffc; } table tr:nth-child(even) { color:#f00; } body::selection:{ background:red; }
  34. 34. Sites de Referência • http://diveintohtml5.com.br/ • http://www.html5rocks.com/pt/ • http://developer.mozilla.org/pt-BR/ • http://maujor.com
  35. 35. Blogs • http://net.tutsplus.com/ • http://tableless.com.br • http://loopinfinito.com.br/ • http://zofe.com.br/
  36. 36. Dúvidas?
  37. 37. Obrigado ;)

×