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

- email

- 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 ;)