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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

DIEGO EIS @diegoeis @tableless ! ! ! tableless.com.br slideshare.net/diegoeis

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

"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

Slide 5

Slide 5 text

“Ter apenas um desenvolvedor front-end em um time que só há desenvolvedores back-end, é uma receita para o desastre." bit.ly/18MX8cg Don Roby no StackOverﬂow

Slide 6

Slide 6 text

POR QUE FRONT-END É IMPORTANTE?

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

wireframe protótipo design front-end back-end

Slide 9

Slide 9 text

wireframe protótipo design front-end back-end

Slide 10

Slide 10 text

O FLUXO QUEBRADO

Slide 11

Slide 11 text

UX PSD back-end

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

UX back-end front-end

Slide 18

Slide 18 text

UX back-end front-end

Slide 19

Slide 19 text

O QUE É PRECISO APRENDER?

Slide 20

Slide 20 text

Não use editores WYSIWYG. Dizendo com todas as palavras: ﬁque longe de coisas como o Dreamweaver. EDITORES DE CÓDIGO

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

JQuery não é Javascript. Pelamordedeus. JQuery é uma biblioteca que abstrai a liguagem original, tornando muito mais fácil seu controle. JQUERY

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Amplexos! Perguntas? @diegoeis @tableless ! tableless.com.br ! A PALESTRA FICA AQUI: slideshare.net/diegoeis