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

1. Desenvolvedor
Front-End
Muito mais do que só HTML
Anderson Andrade
fb.com/andersao
!
07/11/2013
Faculdade Evolução

2. Quem é?
O desenvolvedor front-end é o profissional responsável por projetar,
criar e otimizar interfaces web.

3. Responsabilidades

4. SEO
SEO exige mais do que um especialista. É um esforço de equipe.

5. Performance
80% da performance de um website está do lado do client-side.

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. Escalabilidade
•
•
Modulariazação
Facilidade de manutenção

8. Ferramentas

9. Sublime Text

10. http://lesscss.org/

11. http://learnboost.github.io/stylus/

12. http://sass-lang.com/

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. Comandos SASS
sass style.scss:style.css
sass —watch style.scss:style.css
sass --watch app/sass:public/stylesheets

15. http://compass-style.org/

16. @import "compass";
!
@import "flags/*.png";
@include all-flags-sprites;
[dir-projeto] compass compile
[dir-projeto] compass watch

17. http://gruntjs.com/

18. http://yeoman.io/

19. http://git-scm.com/

20. Linguagens
Linguagens de marcação, programação e
folhas de estilo.

22. Tags removidas
•
acronym
•
dir
•
strike
•
applet
•
font
•
tt
•
basefont
•
frame
•
big
•
frameset
•
center
•
frameset

23. Estrutura do HTML

24. Novas tags
•
article
•
details
•
hgroup
•
aside
•
device
•
nav
•
audio
•
figure
•
progress
•
canvas
•
footer
•
section
•
command
•
header
•
video

25. Atributos Globais
•
contenteditable
•
data-*
•
draggable
•
dropzone
•
hidden
•
spellcheck

26. API's
•
Web Forms
•
Geolocation
•
Web Storage
•
Vídeos & Audio
•
Web Sockets
•
Canvas & SVG
•
Web Workes
•
Aplicações Offline

27. WEB FORMS 2.0
Mais tipos de input
Validação mais simples
Menos Javascript

28. NOVOS TIPOS DE INPUTS
- email
- search
- date
- url
- datetime
- color
- number
- range

29. WEB STORAGE
WEB STORAGE

30. API HISTORY

31. API HISTORY

32. GEOLOCATION

34. 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

35. div[id^="nav"] { background:#ff0; }
input[type="text"]:disabled { background:#ffc; }
table tr:nth-child(even) { color:#f00; }
body::selection:{ background:red; }

36. Sites de Referência
•
http://diveintohtml5.com.br/
•
http://www.html5rocks.com/pt/
•
http://developer.mozilla.org/pt-BR/
•
http://maujor.com

37. Blogs
•
http://net.tutsplus.com/
•
http://tableless.com.br
•
http://loopinfinito.com.br/
•
http://zofe.com.br/

38. Dúvidas?

39. Obrigado ;)