desenvolvedor front-end

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

Upload: anderson-silva-andrade

Post on 19-May-2015

120 views

Category:

Education


3 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Desenvolvedor Front-End

Desenvolvedor Front-End

Anderson Andrade fb.com/andersao

!07/11/2013

Faculdade Evolução

Muito mais do que só HTML

Page 2: Desenvolvedor Front-End

Quem é?

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

Page 3: Desenvolvedor Front-End

Responsabilidades

Page 4: Desenvolvedor Front-End

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

Page 5: Desenvolvedor Front-End

Performance80% da performance de um website está do lado do client-side.

Page 6: Desenvolvedor Front-End

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.

Page 7: Desenvolvedor Front-End

Escalabilidade• Modulariazação • Facilidade de manutenção

Page 8: Desenvolvedor Front-End

Ferramentas

Page 9: Desenvolvedor Front-End

Sublime Text

Page 10: Desenvolvedor Front-End

http://lesscss.org/

Page 11: Desenvolvedor Front-End

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

Page 12: Desenvolvedor Front-End

http://sass-lang.com/

Page 13: Desenvolvedor Front-End

$font-stack: "Helvetica, sans-serif ”; $primary-color : #333; !

body { font: 100% $font-stack; color : $primary-color ; }

body { font: 100% Helvetica, sans-serif; color : #333; }

Page 14: Desenvolvedor Front-End

sass style.scss:style.css

sass —watch style.scss:style.css

sass --watch app/sass:public/stylesheets

Comandos SASS

Page 15: Desenvolvedor Front-End

http://compass-style.org/

Page 16: Desenvolvedor Front-End

@import "compass"; !

@import "flags/*.png"; @include all-flags-sprites;

[dir-projeto] compass compile

[dir-projeto] compass watch

Page 17: Desenvolvedor Front-End

http://gruntjs.com/

Page 18: Desenvolvedor Front-End

http://yeoman.io/

Page 19: Desenvolvedor Front-End

http://git-scm.com/

Page 20: Desenvolvedor Front-End

LinguagensLinguagens de marcação, programação e

folhas de estilo.

Page 21: Desenvolvedor Front-End
Page 22: Desenvolvedor Front-End

Tags removidas• acronym

• applet

• basefont

• big

• center

• dir

• font

• frame

• frameset

• frameset

• strike

• tt

Page 23: Desenvolvedor Front-End

Estrutura do HTML

Page 24: Desenvolvedor Front-End

Novas tags• article

• aside

• audio

• canvas

• command

• details

• device

• figure

• footer

• header

• hgroup

• nav

• progress

• section

• video

Page 25: Desenvolvedor Front-End

Atributos Globais• contenteditable

• data-*

• draggable

• dropzone

• hidden

• spellcheck

Page 26: Desenvolvedor Front-End

API's

• Web Forms

• Web Storage

• Web Sockets

• Web Workes

• Geolocation

• Vídeos & Audio

• Canvas & SVG

• Aplicações Offline

Page 27: Desenvolvedor Front-End

WEB FORMS 2.0

Mais tipos de input

Validação mais simples

Menos Javascript

Page 28: Desenvolvedor Front-End

NOVOS TIPOS DE INPUTS

- search

- url

- color

- email

- date

- datetime

- number

- range

Page 29: Desenvolvedor Front-End

WEB STORAGEWEB STORAGE

Page 30: Desenvolvedor Front-End

API HISTORY

Page 31: Desenvolvedor Front-End

API HISTORY

Page 32: Desenvolvedor Front-End

GEOLOCATION

Page 33: Desenvolvedor Front-End
Page 34: Desenvolvedor Front-End

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

Page 35: Desenvolvedor Front-End

div[id^="nav"] { background:#ff0; }

input[type="text"]:disabled { background:#ffc; }

table tr :nth-child(even) { color :#f00; }

body::selection:{ background:red; }

Page 36: Desenvolvedor Front-End

• http://diveintohtml5.com.br/

• http://www.html5rocks.com/pt/

• http://developer.mozilla.org/pt-BR/

• http://maujor.com

Sites de Referência

Page 37: Desenvolvedor Front-End

• http://net.tutsplus.com/

• http://tableless.com.br

• http://loopinfinito.com.br/

• http://zofe.com.br/

Blogs

Page 38: Desenvolvedor Front-End

Dúvidas?

Page 39: Desenvolvedor Front-End

Obrigado ;)