O que você precisa saber para se tornar um front-end

DIEGO EIS

@diegoeis @tableless !

!

!

tableless.com.br slideshare.net/diegoeis

"Uma das razões de haver uma execução

pobre no design é que os times de UX

precisam aprender mais que apenas design.

Eles precisam aprender mais

desenvolvimento front-end."

http://www.uxmatters.com/mt/archives/2012/04/great-user-experiences-require-great-front-end-development.php

“Ter apenas um desenvolvedor front-end

em um time que só há desenvolvedores

back-end, é uma receita para o desastre."

bit.ly/18MX8cgDon Roby no StackOverflow

POR QUE FRONT-END É IMPORTANTE?

Geralmente os fluxos são lineares.

Principalmente quando se trata de websites ou projetos pequenos.

!Com a adoção dos padrões web, esse fluxo pode ficar paralelo, o que é

ótimo para ganhar velocidade.

O FLUXO PODE SER LINEAR OU PARALELO

wireframe protótipo

design

front-end

back-end

wireframe protótipo

design front-end back-end

O FLUXO QUEBRADO

UX PSD back-end

UX back-endfront-end

UX back-endfront-end

O QUE É PRECISO APRENDER?

Não use editores WYSIWYG. Dizendo com todas as palavras: fique

longe de coisas como o Dreamweaver.

EDITORES DE CÓDIGO

HTML é parte essencial da web. Sem HTML a web não existe. Por isso,

aprenda HTML e todo o seu contexto de semântica e organização de

informação.

HTML

Eu li não sei aonde e não consegui encontrar o link, mas um dos ban-

ban-bans gringos disse mais ou menos assim: “você leva algumas horas

para aprender CSS, mas uma vida para se tornar um mestre.”

CSS

Deixa eu dizer uma coisa e vou ser bem duro: Se você ainda edita seu

código usando FTP, você é júnior.

ESQUEÇA FTP

Se você vai aprender GIT ou qualquer outro controle de versão, você

vai precisar mexer um pouquinho no terminal. Sem falar que uma série

de ferramentas essenciais para os devs front-end como Grunt, Bower,

Yeoman, Middleman, Jekyll e etc, são feitos em Ruby e você vai precisar

usar o terminal para fazer a mágica acontecer.

O BÁSICO DE TERMINAL

Acessibilidade não é altruísmo. Você não faz um site acessível por que

você está com pena de alguém cego ou por que não tem os dois braços.

Você faz um site acessível por que você precisa que seu site seja visto

por TODOS.

ACESSIBILIDADE

Você tem que aprender Javascript para usá-lo em comportamentos e

interações ou em projetos mais complicados, que usam Javascript no

lado do servidor.

JAVASCRIPT

JQuery não é Javascript. Pelamordedeus. JQuery é uma biblioteca que

abstrai a liguagem original, tornando muito mais fácil seu controle.

JQUERY

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

side também é responsável pro 90% da performance de um site mobile.

PERFORMANCE

Ao contrário do que muitos acham, SEO não é feito por apenas uma

iniciativa, mas várias. Não adianta nada você escrever um texto cheio de

palavras chaves e a estrutura do HTML não ser semântica.

SEO

Falo para aprender WordPress por que é o mais badalado. Você pode

aprender Joomla! ou Drupal, não tem problema. Mas não tem como, o

WordPress é o CMS mais usado no mundo. E pessoalmente eu acho

muito melhor que os outros dois.

WORDPRESS OU OUTRO CMS

Aprenda algum pré-processador. Algumas grandes empresas os pré-

processadores facilitam a manutenção do código CSS e o deixam

escalável. O SASS é o mais utilizado. LESS é o segundo. Para se ter uma

ideia LESS é usado pelo pessoal que faz o framework Bootstrap.

PRÉ-PROCESSADORES

Não precisa saber todas as ferramentas que surgirem, mas você precisa

saber que elas existem. Não precisa usar YEOMAN, Bower, Grunt, Gulp,

Inspector do browser e etc de uma vez, mas eles ajudam muito em

diversos momentos.

TOOLING

Em algumas empresas programadores back-end não encostam no front-

end. Eles não editam o HTML, nem tão pouco o Javascript. Isso

acontece por que ele passa mais tempo construindo e melhorando uma

API do que qualquer outra tarefa.

MANIPULAÇÃO DE JSON

Nunca, nunca comece pela parte prática. Eu sei que praticar e colocar a

mão na massa é a parte mais esperada por qualquer pessoa que está

começando na área.

ESTUDE A TEORIA

Saiba onde sua equipe se coloca perante a empresa. Saiba quais são os

resultados que sua equipe trazem para o projeto. Entenda como são

feitas as entregas para o cliente. Como o Marketing trabalha. Como os

vendedores vendem. Você não é uma ilha, e se for, seu lugar não é aí, é

no mar.

APRENDA OUTRAS DISCIPLINAS

Amplexos! Perguntas?

@diegoeis @tableless !

tableless.com.br !A PALESTRA FICA AQUI: slideshare.net/diegoeis