o que você precisa saber para se tornar um dev front-end
DESCRIPTION
Ser um desenvolvedor front-end já foi mais fácil. Essa palestra mostra o caminho das pedras para os que estão iniciando na área e os que já estão, servindo como guia para assuntos importantes na área. Link do artigo relacionado: http://tableless.com.br/tornar-dev-front-end/TRANSCRIPT
![Page 1: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/1.jpg)
O que você precisa saber para se tornar um front-end
![Page 2: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/2.jpg)
DIEGO EIS
@diegoeis @tableless !
!
!
tableless.com.br slideshare.net/diegoeis
![Page 3: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/3.jpg)
![Page 4: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/4.jpg)
"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
![Page 5: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/5.jpg)
“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
![Page 6: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/6.jpg)
POR QUE FRONT-END É IMPORTANTE?
![Page 7: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/7.jpg)
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
![Page 8: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/8.jpg)
wireframe protótipo
design
front-end
back-end
![Page 9: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/9.jpg)
wireframe protótipo
design front-end back-end
![Page 10: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/10.jpg)
O FLUXO QUEBRADO
![Page 11: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/11.jpg)
UX PSD back-end
![Page 12: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/12.jpg)
![Page 13: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/13.jpg)
![Page 14: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/14.jpg)
![Page 15: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/15.jpg)
![Page 16: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/16.jpg)
![Page 17: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/17.jpg)
UX back-endfront-end
![Page 18: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/18.jpg)
UX back-endfront-end
![Page 19: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/19.jpg)
O QUE É PRECISO APRENDER?
![Page 20: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/20.jpg)
Não use editores WYSIWYG. Dizendo com todas as palavras: fique
longe de coisas como o Dreamweaver.
EDITORES DE CÓDIGO
![Page 21: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/21.jpg)
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
![Page 22: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/22.jpg)
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
![Page 23: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/23.jpg)
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
![Page 24: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/24.jpg)
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
![Page 25: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/25.jpg)
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
![Page 26: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/26.jpg)
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
![Page 27: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/27.jpg)
JQuery não é Javascript. Pelamordedeus. JQuery é uma biblioteca que
abstrai a liguagem original, tornando muito mais fácil seu controle.
JQUERY
![Page 28: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/28.jpg)
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
![Page 29: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/29.jpg)
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
![Page 30: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/30.jpg)
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
![Page 31: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/31.jpg)
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
![Page 32: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/32.jpg)
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
![Page 33: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/33.jpg)
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
![Page 34: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/34.jpg)
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
![Page 35: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/35.jpg)
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
![Page 36: O que você precisa saber para se tornar um dev front-end](https://reader033.vdocuments.pub/reader033/viewer/2022051111/5539429a550346e93a8b4968/html5/thumbnails/36.jpg)
Amplexos! Perguntas?
@diegoeis @tableless !
tableless.com.br !A PALESTRA FICA AQUI: slideshare.net/diegoeis