desenvolvedor front-end
DESCRIPTION
Apresentação para a semana de profissões na Faculdade Evolução. 07/11/2013TRANSCRIPT
Desenvolvedor Front-End
Anderson Andrade fb.com/andersao
!07/11/2013
Faculdade Evolução
Muito mais do que só HTML
Quem é?
O desenvolvedor front-end é o profissional responsável por projetar, criar e otimizar interfaces web.
Responsabilidades
SEOSEO exige mais do que um especialista. É um esforço de equipe.
Performance80% da performance de um website está do lado do client-side.
Acessibilidade /UsabilidadeVocê 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.
Escalabilidade• Modulariazação • Facilidade de manutenção
Ferramentas
Sublime Text
http://lesscss.org/
http://learnboost.github.io/stylus/
http://sass-lang.com/
$font-stack: "Helvetica, sans-serif ”; $primary-color : #333; !
body { font: 100% $font-stack; color : $primary-color ; }
body { font: 100% Helvetica, sans-serif; color : #333; }
sass style.scss:style.css
sass —watch style.scss:style.css
sass --watch app/sass:public/stylesheets
Comandos SASS
http://compass-style.org/
@import "compass"; !
@import "flags/*.png"; @include all-flags-sprites;
[dir-projeto] compass compile
[dir-projeto] compass watch
http://gruntjs.com/
http://yeoman.io/
http://git-scm.com/
LinguagensLinguagens de marcação, programação e
folhas de estilo.
Tags removidas• acronym
• applet
• basefont
• big
• center
• dir
• font
• frame
• frameset
• frameset
• strike
• tt
Estrutura do HTML
Novas tags• article
• aside
• audio
• canvas
• command
• details
• device
• figure
• footer
• header
• hgroup
• nav
• progress
• section
• video
Atributos Globais• contenteditable
• data-*
• draggable
• dropzone
• hidden
• spellcheck
API's
• Web Forms
• Web Storage
• Web Sockets
• Web Workes
• Geolocation
• Vídeos & Audio
• Canvas & SVG
• Aplicações Offline
WEB FORMS 2.0
Mais tipos de input
Validação mais simples
Menos Javascript
NOVOS TIPOS DE INPUTS
- search
- url
- color
- date
- datetime
- number
- range
WEB STORAGEWEB STORAGE
API HISTORY
API HISTORY
GEOLOCATION
Seletores e Pseudo Classes• E:first-child
• E:last-child
• E:nth-child()
• E[attribute]
• E:before
• E:after http://bit.ly/17b3kK6
• E:empty
• E:enabled
• E:disabled
• E:checked
• E::selection
• E ~ F
div[id^="nav"] { background:#ff0; }
input[type="text"]:disabled { background:#ffc; }
table tr :nth-child(even) { color :#f00; }
body::selection:{ background:red; }
• http://diveintohtml5.com.br/
• http://www.html5rocks.com/pt/
• http://developer.mozilla.org/pt-BR/
• http://maujor.com
Sites de Referência
• http://net.tutsplus.com/
• http://tableless.com.br
• http://loopinfinito.com.br/
• http://zofe.com.br/
Blogs
Dúvidas?
Obrigado ;)