SlideShare uma empresa Scribd logo
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

Mais conteúdo relacionado

Mais procurados

JavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuaisJavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
William Oliveira
 
Você não precisa de uma sopa de letrinhas para criar web apps
Você não precisa de uma sopa de letrinhas para criar web appsVocê não precisa de uma sopa de letrinhas para criar web apps
Você não precisa de uma sopa de letrinhas para criar web apps
William Oliveira
 
Acessibilidade para web
Acessibilidade para webAcessibilidade para web
Acessibilidade para web
Diego Eis
 
Engenharia de front end de alta performance
Engenharia de front end de alta performanceEngenharia de front end de alta performance
Engenharia de front end de alta performance
Anderson Solano
 
It's Javascript Time
It's Javascript TimeIt's Javascript Time
It's Javascript Time
Davidson Fellipe
 
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
Html5,css3,javascript   o lugar onde sonhos se tornam realidade.Html5,css3,javascript   o lugar onde sonhos se tornam realidade.
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
Edmo Jeova
 
Guia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devsGuia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devs
Davidson Fellipe
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Cristofer Sousa
 
Como encarar o desenvolvimento front-end
Como encarar o desenvolvimento front-endComo encarar o desenvolvimento front-end
Como encarar o desenvolvimento front-end
Jean Carlo Emer
 
Estruturação Web
Estruturação WebEstruturação Web
Estruturação Web
Fabiano Pereira
 
Canal Coding Night - Sua primeira aplicação com Blazor
Canal Coding Night - Sua primeira aplicação com BlazorCanal Coding Night - Sua primeira aplicação com Blazor
Canal Coding Night - Sua primeira aplicação com Blazor
Gustavo Bellini Bigardi
 
Construindo um framework CSS
Construindo um framework CSSConstruindo um framework CSS
Construindo um framework CSS
Diego Eis
 
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignIntrodução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Gustavo Zimmermann
 
Lidar com Expectativas é a melhor forma de garantir a Experiência
Lidar com Expectativas é a melhor forma de garantir a ExperiênciaLidar com Expectativas é a melhor forma de garantir a Experiência
Lidar com Expectativas é a melhor forma de garantir a Experiência
Marcelo Sales
 
Introdução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignIntrodução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX Design
Gustavo Zimmermann
 
Usando a programação web para mobile com Twitter Bootstrap
Usando a programação web para mobile com Twitter BootstrapUsando a programação web para mobile com Twitter Bootstrap
Usando a programação web para mobile com Twitter Bootstrap
Flavio Souza
 
Dream 01
Dream 01Dream 01
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
Anyssa Ferreira
 
WordCamp Rio de Janeiro 2015 - Vinícius Lourenço | Desenvolvendo Plugins para...
WordCamp Rio de Janeiro 2015 - Vinícius Lourenço | Desenvolvendo Plugins para...WordCamp Rio de Janeiro 2015 - Vinícius Lourenço | Desenvolvendo Plugins para...
WordCamp Rio de Janeiro 2015 - Vinícius Lourenço | Desenvolvendo Plugins para...
Vinícius Lourenço
 
CMS e Midias Sociais
CMS e Midias SociaisCMS e Midias Sociais
CMS e Midias Sociais
Edney Souza
 

Mais procurados (20)

JavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuaisJavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
 
Você não precisa de uma sopa de letrinhas para criar web apps
Você não precisa de uma sopa de letrinhas para criar web appsVocê não precisa de uma sopa de letrinhas para criar web apps
Você não precisa de uma sopa de letrinhas para criar web apps
 
Acessibilidade para web
Acessibilidade para webAcessibilidade para web
Acessibilidade para web
 
Engenharia de front end de alta performance
Engenharia de front end de alta performanceEngenharia de front end de alta performance
Engenharia de front end de alta performance
 
It's Javascript Time
It's Javascript TimeIt's Javascript Time
It's Javascript Time
 
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
Html5,css3,javascript   o lugar onde sonhos se tornam realidade.Html5,css3,javascript   o lugar onde sonhos se tornam realidade.
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
 
Guia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devsGuia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devs
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
 
Como encarar o desenvolvimento front-end
Como encarar o desenvolvimento front-endComo encarar o desenvolvimento front-end
Como encarar o desenvolvimento front-end
 
Estruturação Web
Estruturação WebEstruturação Web
Estruturação Web
 
Canal Coding Night - Sua primeira aplicação com Blazor
Canal Coding Night - Sua primeira aplicação com BlazorCanal Coding Night - Sua primeira aplicação com Blazor
Canal Coding Night - Sua primeira aplicação com Blazor
 
Construindo um framework CSS
Construindo um framework CSSConstruindo um framework CSS
Construindo um framework CSS
 
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignIntrodução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
 
Lidar com Expectativas é a melhor forma de garantir a Experiência
Lidar com Expectativas é a melhor forma de garantir a ExperiênciaLidar com Expectativas é a melhor forma de garantir a Experiência
Lidar com Expectativas é a melhor forma de garantir a Experiência
 
Introdução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignIntrodução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX Design
 
Usando a programação web para mobile com Twitter Bootstrap
Usando a programação web para mobile com Twitter BootstrapUsando a programação web para mobile com Twitter Bootstrap
Usando a programação web para mobile com Twitter Bootstrap
 
Dream 01
Dream 01Dream 01
Dream 01
 
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
 
WordCamp Rio de Janeiro 2015 - Vinícius Lourenço | Desenvolvendo Plugins para...
WordCamp Rio de Janeiro 2015 - Vinícius Lourenço | Desenvolvendo Plugins para...WordCamp Rio de Janeiro 2015 - Vinícius Lourenço | Desenvolvendo Plugins para...
WordCamp Rio de Janeiro 2015 - Vinícius Lourenço | Desenvolvendo Plugins para...
 
CMS e Midias Sociais
CMS e Midias SociaisCMS e Midias Sociais
CMS e Midias Sociais
 

Destaque

CSS 4 - What's coming up
CSS 4 - What's coming upCSS 4 - What's coming up
CSS 4 - What's coming up
Diego Eis
 
Um pequeno estudo sobre a microsoft
Um pequeno estudo sobre a microsoftUm pequeno estudo sobre a microsoft
Um pequeno estudo sobre a microsoft
Diego Eis
 
Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.
Diego Eis
 
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?
Diego Eis
 
O básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked DataO básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked Data
Diego Eis
 
Front end, back end, full stack. onde vivem o que comem hoje na uni_granrio
Front end, back end, full stack.  onde vivem  o que comem   hoje na uni_granrioFront end, back end, full stack.  onde vivem  o que comem   hoje na uni_granrio
Front end, back end, full stack. onde vivem o que comem hoje na uni_granrio
Anna Cruz
 
WPI Aula 01
WPI Aula 01WPI Aula 01
WPI Aula 01
Leandro Alves
 
Backbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosBackbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectados
Henrique Gogó
 
User Interface (UI) x User Experience (UX)
User Interface (UI) x User Experience (UX)User Interface (UI) x User Experience (UX)
User Interface (UI) x User Experience (UX)
Gustavo Gobbi
 
WPI – Pós Design de Interação IEC PUC Minas aula06
WPI – Pós Design de Interação IEC PUC Minas aula06WPI – Pós Design de Interação IEC PUC Minas aula06
WPI – Pós Design de Interação IEC PUC Minas aula06
Leandro Alves
 
WPI – Pós Design de Interação IEC PUC Minas aula04
WPI – Pós Design de Interação IEC PUC Minas aula04WPI – Pós Design de Interação IEC PUC Minas aula04
WPI – Pós Design de Interação IEC PUC Minas aula04
Leandro Alves
 
WPI – Pós Design de Interação IEC PUC Minas aula05
WPI – Pós Design de Interação IEC PUC Minas aula05WPI – Pós Design de Interação IEC PUC Minas aula05
WPI – Pós Design de Interação IEC PUC Minas aula05
Leandro Alves
 
Programação web e o front-end
Programação web e o front-endProgramação web e o front-end
Programação web e o front-end
Anderson Luís Furlan
 
WPI Aula 05
WPI Aula 05WPI Aula 05
WPI Aula 05
Leandro Alves
 
Hack2B Startups - UX?
Hack2B Startups - UX?Hack2B Startups - UX?
Hack2B Startups - UX?
Ana Paula Batista
 
Desenvolvimento de Games com Phaser
Desenvolvimento de Games com PhaserDesenvolvimento de Games com Phaser
Desenvolvimento de Games com Phaser
leandroide
 
WPI Aula 04
WPI Aula 04WPI Aula 04
WPI Aula 04
Leandro Alves
 
Design Responsivo
Design ResponsivoDesign Responsivo
Design Responsivo
Juliano Toazza
 
Interface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-endInterface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-end
Talita Pagani
 
Processo de design digital
Processo de design digitalProcesso de design digital
Processo de design digital
Mário Barros
 

Destaque (20)

CSS 4 - What's coming up
CSS 4 - What's coming upCSS 4 - What's coming up
CSS 4 - What's coming up
 
Um pequeno estudo sobre a microsoft
Um pequeno estudo sobre a microsoftUm pequeno estudo sobre a microsoft
Um pequeno estudo sobre a microsoft
 
Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.
 
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?
 
O básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked DataO básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked Data
 
Front end, back end, full stack. onde vivem o que comem hoje na uni_granrio
Front end, back end, full stack.  onde vivem  o que comem   hoje na uni_granrioFront end, back end, full stack.  onde vivem  o que comem   hoje na uni_granrio
Front end, back end, full stack. onde vivem o que comem hoje na uni_granrio
 
WPI Aula 01
WPI Aula 01WPI Aula 01
WPI Aula 01
 
Backbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosBackbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectados
 
User Interface (UI) x User Experience (UX)
User Interface (UI) x User Experience (UX)User Interface (UI) x User Experience (UX)
User Interface (UI) x User Experience (UX)
 
WPI – Pós Design de Interação IEC PUC Minas aula06
WPI – Pós Design de Interação IEC PUC Minas aula06WPI – Pós Design de Interação IEC PUC Minas aula06
WPI – Pós Design de Interação IEC PUC Minas aula06
 
WPI – Pós Design de Interação IEC PUC Minas aula04
WPI – Pós Design de Interação IEC PUC Minas aula04WPI – Pós Design de Interação IEC PUC Minas aula04
WPI – Pós Design de Interação IEC PUC Minas aula04
 
WPI – Pós Design de Interação IEC PUC Minas aula05
WPI – Pós Design de Interação IEC PUC Minas aula05WPI – Pós Design de Interação IEC PUC Minas aula05
WPI – Pós Design de Interação IEC PUC Minas aula05
 
Programação web e o front-end
Programação web e o front-endProgramação web e o front-end
Programação web e o front-end
 
WPI Aula 05
WPI Aula 05WPI Aula 05
WPI Aula 05
 
Hack2B Startups - UX?
Hack2B Startups - UX?Hack2B Startups - UX?
Hack2B Startups - UX?
 
Desenvolvimento de Games com Phaser
Desenvolvimento de Games com PhaserDesenvolvimento de Games com Phaser
Desenvolvimento de Games com Phaser
 
WPI Aula 04
WPI Aula 04WPI Aula 04
WPI Aula 04
 
Design Responsivo
Design ResponsivoDesign Responsivo
Design Responsivo
 
Interface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-endInterface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-end
 
Processo de design digital
Processo de design digitalProcesso de design digital
Processo de design digital
 

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

[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
iMasters
 
Composição e Integração de Sistemas em 2013
Composição e Integração de Sistemas em 2013Composição e Integração de Sistemas em 2013
Composição e Integração de Sistemas em 2013
Leandro Silva
 
#Moving br workshop
#Moving br workshop#Moving br workshop
#Moving br workshop
Fernanda Ferreira
 
PHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHPPHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHP
Flávio Lisboa
 
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.jsJava script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Vinicius Reis
 
Além do MVP com PHP - TDC POA 2015
Além do MVP com PHP  - TDC POA 2015Além do MVP com PHP  - TDC POA 2015
Além do MVP com PHP - TDC POA 2015
Romeu Mattos
 
além do mvp com php
além do mvp com phpalém do mvp com php
além do mvp com php
tdc-globalcode
 
Aprenda a ser um webmaster
Aprenda a ser um webmasterAprenda a ser um webmaster
Aprenda a ser um webmaster
Jeferson Souza
 
Receita do Sucesso no Mercado Front End
Receita do Sucesso no Mercado Front EndReceita do Sucesso no Mercado Front End
Receita do Sucesso no Mercado Front End
Leonardo Balter
 
O que move a web atualmente?
O que move a web atualmente?O que move a web atualmente?
O que move a web atualmente?
Fabio Janiszevski
 
Mapa de aprendizado Front End
Mapa de aprendizado Front EndMapa de aprendizado Front End
Mapa de aprendizado Front End
Caio Vaccaro
 
Performance em-front-end-luiz-tanure
Performance em-front-end-luiz-tanurePerformance em-front-end-luiz-tanure
Performance em-front-end-luiz-tanure
Luiz Tanure
 
Ebook - Processo de Otimização de Sites WordPress
Ebook - Processo de Otimização de Sites WordPressEbook - Processo de Otimização de Sites WordPress
Ebook - Processo de Otimização de Sites WordPress
Daniel Paz
 
apresentacao e instalacao do Joomla3
apresentacao e instalacao do Joomla3apresentacao e instalacao do Joomla3
apresentacao e instalacao do Joomla3
Ben-Hur Oliveira Morais
 
Desenvolvedor Front-End
Desenvolvedor Front-EndDesenvolvedor Front-End
Desenvolvedor Front-End
Anderson Silva Andrade
 
Além do MVP com PHP - TDC Floripa 2016
Além do MVP com PHP - TDC Floripa 2016Além do MVP com PHP - TDC Floripa 2016
Além do MVP com PHP - TDC Floripa 2016
Romeu Mattos
 
O que vi na QCon 2012 São Paulo
O que vi na QCon 2012 São PauloO que vi na QCon 2012 São Paulo
O que vi na QCon 2012 São Paulo
Ismael
 
Hangout Tempo Real Eventos - Javascript - Os Primeiros Passos
Hangout  Tempo Real Eventos - Javascript - Os Primeiros PassosHangout  Tempo Real Eventos - Javascript - Os Primeiros Passos
Hangout Tempo Real Eventos - Javascript - Os Primeiros Passos
Jackson F. de A. Mafra
 
DrupalCamp SP 2015 - DevOps, por onde começar? Por Sebastian Ferrari
DrupalCamp SP 2015 - DevOps, por onde começar? Por Sebastian FerrariDrupalCamp SP 2015 - DevOps, por onde começar? Por Sebastian Ferrari
DrupalCamp SP 2015 - DevOps, por onde começar? Por Sebastian Ferrari
Taller Negócio Digitais
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.
Valmir Justo
 

Semelhante a O que você precisa saber para se tornar um dev front-end (20)

[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
 
Composição e Integração de Sistemas em 2013
Composição e Integração de Sistemas em 2013Composição e Integração de Sistemas em 2013
Composição e Integração de Sistemas em 2013
 
#Moving br workshop
#Moving br workshop#Moving br workshop
#Moving br workshop
 
PHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHPPHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHP
 
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.jsJava script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
 
Além do MVP com PHP - TDC POA 2015
Além do MVP com PHP  - TDC POA 2015Além do MVP com PHP  - TDC POA 2015
Além do MVP com PHP - TDC POA 2015
 
além do mvp com php
além do mvp com phpalém do mvp com php
além do mvp com php
 
Aprenda a ser um webmaster
Aprenda a ser um webmasterAprenda a ser um webmaster
Aprenda a ser um webmaster
 
Receita do Sucesso no Mercado Front End
Receita do Sucesso no Mercado Front EndReceita do Sucesso no Mercado Front End
Receita do Sucesso no Mercado Front End
 
O que move a web atualmente?
O que move a web atualmente?O que move a web atualmente?
O que move a web atualmente?
 
Mapa de aprendizado Front End
Mapa de aprendizado Front EndMapa de aprendizado Front End
Mapa de aprendizado Front End
 
Performance em-front-end-luiz-tanure
Performance em-front-end-luiz-tanurePerformance em-front-end-luiz-tanure
Performance em-front-end-luiz-tanure
 
Ebook - Processo de Otimização de Sites WordPress
Ebook - Processo de Otimização de Sites WordPressEbook - Processo de Otimização de Sites WordPress
Ebook - Processo de Otimização de Sites WordPress
 
apresentacao e instalacao do Joomla3
apresentacao e instalacao do Joomla3apresentacao e instalacao do Joomla3
apresentacao e instalacao do Joomla3
 
Desenvolvedor Front-End
Desenvolvedor Front-EndDesenvolvedor Front-End
Desenvolvedor Front-End
 
Além do MVP com PHP - TDC Floripa 2016
Além do MVP com PHP - TDC Floripa 2016Além do MVP com PHP - TDC Floripa 2016
Além do MVP com PHP - TDC Floripa 2016
 
O que vi na QCon 2012 São Paulo
O que vi na QCon 2012 São PauloO que vi na QCon 2012 São Paulo
O que vi na QCon 2012 São Paulo
 
Hangout Tempo Real Eventos - Javascript - Os Primeiros Passos
Hangout  Tempo Real Eventos - Javascript - Os Primeiros PassosHangout  Tempo Real Eventos - Javascript - Os Primeiros Passos
Hangout Tempo Real Eventos - Javascript - Os Primeiros Passos
 
DrupalCamp SP 2015 - DevOps, por onde começar? Por Sebastian Ferrari
DrupalCamp SP 2015 - DevOps, por onde começar? Por Sebastian FerrariDrupalCamp SP 2015 - DevOps, por onde começar? Por Sebastian Ferrari
DrupalCamp SP 2015 - DevOps, por onde começar? Por Sebastian Ferrari
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.
 

Mais de Diego Eis

Carreira de Product Manager em 18 minutos
Carreira de Product Manager em 18 minutosCarreira de Product Manager em 18 minutos
Carreira de Product Manager em 18 minutos
Diego Eis
 
Service Dominant Logic - S-D Logic em Produtos Digitais
Service Dominant Logic - S-D Logic em Produtos DigitaisService Dominant Logic - S-D Logic em Produtos Digitais
Service Dominant Logic - S-D Logic em Produtos Digitais
Diego Eis
 
Métricas para times Ágeis usando Estatística Básica
Métricas para times Ágeis usando Estatística BásicaMétricas para times Ágeis usando Estatística Básica
Métricas para times Ágeis usando Estatística Básica
Diego Eis
 
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na webWAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
Diego Eis
 
A verdadeira semântica do HTML
A verdadeira semântica do HTMLA verdadeira semântica do HTML
A verdadeira semântica do HTML
Diego Eis
 
HTML5 e CSS3 - A nova novidade
HTML5 e CSS3 - A nova novidadeHTML5 e CSS3 - A nova novidade
HTML5 e CSS3 - A nova novidade
Diego Eis
 
Manual de Sobrevivência do Desenvolvedor Empreendedor
Manual de Sobrevivência do Desenvolvedor EmpreendedorManual de Sobrevivência do Desenvolvedor Empreendedor
Manual de Sobrevivência do Desenvolvedor Empreendedor
Diego Eis
 
CSS3 - Novo contexto
CSS3 - Novo contextoCSS3 - Novo contexto
CSS3 - Novo contexto
Diego Eis
 
Padrões Web passado, presente, futuro
Padrões Web passado, presente, futuroPadrões Web passado, presente, futuro
Padrões Web passado, presente, futuro
Diego Eis
 
Padrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designerPadrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designer
Diego Eis
 
Padrões Web - Um elogio ao ócio do desenvolvedor
Padrões Web - Um elogio ao ócio do desenvolvedorPadrões Web - Um elogio ao ócio do desenvolvedor
Padrões Web - Um elogio ao ócio do desenvolvedor
Diego Eis
 

Mais de Diego Eis (11)

Carreira de Product Manager em 18 minutos
Carreira de Product Manager em 18 minutosCarreira de Product Manager em 18 minutos
Carreira de Product Manager em 18 minutos
 
Service Dominant Logic - S-D Logic em Produtos Digitais
Service Dominant Logic - S-D Logic em Produtos DigitaisService Dominant Logic - S-D Logic em Produtos Digitais
Service Dominant Logic - S-D Logic em Produtos Digitais
 
Métricas para times Ágeis usando Estatística Básica
Métricas para times Ágeis usando Estatística BásicaMétricas para times Ágeis usando Estatística Básica
Métricas para times Ágeis usando Estatística Básica
 
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na webWAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
 
A verdadeira semântica do HTML
A verdadeira semântica do HTMLA verdadeira semântica do HTML
A verdadeira semântica do HTML
 
HTML5 e CSS3 - A nova novidade
HTML5 e CSS3 - A nova novidadeHTML5 e CSS3 - A nova novidade
HTML5 e CSS3 - A nova novidade
 
Manual de Sobrevivência do Desenvolvedor Empreendedor
Manual de Sobrevivência do Desenvolvedor EmpreendedorManual de Sobrevivência do Desenvolvedor Empreendedor
Manual de Sobrevivência do Desenvolvedor Empreendedor
 
CSS3 - Novo contexto
CSS3 - Novo contextoCSS3 - Novo contexto
CSS3 - Novo contexto
 
Padrões Web passado, presente, futuro
Padrões Web passado, presente, futuroPadrões Web passado, presente, futuro
Padrões Web passado, presente, futuro
 
Padrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designerPadrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designer
 
Padrões Web - Um elogio ao ócio do desenvolvedor
Padrões Web - Um elogio ao ócio do desenvolvedorPadrões Web - Um elogio ao ócio do desenvolvedor
Padrões Web - Um elogio ao ócio do desenvolvedor
 

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

  • 1. O que você precisa saber para se tornar um front-end
  • 3.
  • 4. "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
  • 5. “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
  • 6. POR QUE FRONT-END É IMPORTANTE?
  • 7. 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
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 19. O QUE É PRECISO APRENDER?
  • 20. Não use editores WYSIWYG. Dizendo com todas as palavras: fique longe de coisas como o Dreamweaver. EDITORES DE CÓDIGO
  • 21. 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
  • 22. 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
  • 23. 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
  • 24. 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
  • 25. 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
  • 26. 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
  • 27. JQuery não é Javascript. Pelamordedeus. JQuery é uma biblioteca que abstrai a liguagem original, tornando muito mais fácil seu controle. JQUERY
  • 28. 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
  • 29. 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
  • 30. 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
  • 31. 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
  • 32. 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
  • 33. 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
  • 34. 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
  • 35. 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