SlideShare uma empresa Scribd logo
1 de 16
Baixar para ler offline
O papel do desenvolvedor
Front End
(Front End Enginner)
O que ele faz?
O desenvolvedor front end é o profissional responsável por projetar,
construir e otimizar as interfaces de projetos web.
Responsabilidades:
– Assegurar compatibilidade cross-browser e cross-platform;
– Produzir código limpo, bem documentado e estruturado;
– Criar páginas web rápidas;
– Seguir os web standards;
– Aplicar técnicas de SEO (Search Engine Optimization)
Qual a importância de um Front End
Enginner para o sucesso de um projeto?
– 80% do tempo de carregamento é gasto com o download dos
elementos do front end(css, javascript, imagens...).
– A interface das aplicações web estão ficando cada vez mais
complexas, logo é imprescindível a presença de um profissional
especialista em interfaces.
– Por mais que possamos dizer que a web é multiplataforma, ainda
temos grandes problemas de compatibilidade entre os browsers,
e o conhecimento das nuances de cada um deles é de total
importância para que o projeto atenda o máximo de clientes
possíveis.
As interfaces dos projetos web se
tornaram cada vez mais
complexas e por isso surgiu a
necessidade de alguém altamente
especializado. O Front End
Enginner.
Alguém lembra de como era a
home da globo.com em
2001? 2003? 2005? Pois
bem...
2001
2003
2005
2007
HOJE
Quais tecnologias fazem parte do
“arsenal de guerra” de um Front End
Enginner?
HTML + CSS + JAVASCRIPT
E mais...
– Design Patterns
– Perfomance
– SEO(on page)
– Testes
– E mais um monte de sigla legal!
Quem está investindo nesses
profissionais?
– Grandes portais (globo.com, r7.com...)
– Agências de desenvolvimento de sites
– Facebook, Yahoo!, Twitter, Google...
Gostei, e como faço pra me tornar um
ninja?
– Sites:
• Http://maujor.com/
• Http://tableless.com.br
– Livros:
• A bíblia do programador jQuery
• Javascript Design Patterns
– Listas de discussão:
• jquery-br
• webstandards-br
• frontend-br
• html5-css3-br
Davidson Fellipe
http://www.fellipe.com
@davidsonfellipe
Perguntas? ;-)
Rael Max
< contato@raelmax.com >
http://raelmax.com
@raelmax

Mais conteúdo relacionado

Mais procurados

DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?RC Comunicação
 
Como criar módulos para magento 2
Como criar módulos para magento 2Como criar módulos para magento 2
Como criar módulos para magento 2Rafael Corrêa Gomes
 
ASP.NET SignalR + SPA com AngularJS
ASP.NET SignalR + SPA com AngularJSASP.NET SignalR + SPA com AngularJS
ASP.NET SignalR + SPA com AngularJSWaldyr Felix
 
Guga Alves apresenta Gutenberg fase 2 e 3
Guga Alves apresenta Gutenberg fase 2 e 3Guga Alves apresenta Gutenberg fase 2 e 3
Guga Alves apresenta Gutenberg fase 2 e 3WordCamp Floripa
 
MSP Tech Days Online 2018 - SPA além do JavaScript com Blazor
MSP Tech Days Online 2018 - SPA além do JavaScript com BlazorMSP Tech Days Online 2018 - SPA além do JavaScript com Blazor
MSP Tech Days Online 2018 - SPA além do JavaScript com BlazorGustavo Bellini Bigardi
 
Do MVP ao PWA, melhorando o engajamento com cliente na CVC
Do MVP ao PWA, melhorando o engajamento com cliente na CVCDo MVP ao PWA, melhorando o engajamento com cliente na CVC
Do MVP ao PWA, melhorando o engajamento com cliente na CVCJanderson Silva
 
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGapAplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGapThiago Colares
 
Campus Party - Desenvolvendo aplicações .Net com software gratuito
Campus Party  - Desenvolvendo aplicações .Net com software gratuitoCampus Party  - Desenvolvendo aplicações .Net com software gratuito
Campus Party - Desenvolvendo aplicações .Net com software gratuitoAlexandre Tarifa
 
Responsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivosResponsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivosDiogo Souza Machado
 
Write once, run "everywhere"
Write once, run "everywhere"Write once, run "everywhere"
Write once, run "everywhere"Stefan Horochovec
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Sérgio Vilar
 
Introdução ao desenvolvimento de apps com Phonegap
Introdução ao desenvolvimento de apps com PhonegapIntrodução ao desenvolvimento de apps com Phonegap
Introdução ao desenvolvimento de apps com PhonegapDiogo Souza Machado
 
Front-end o que é preciso saber?
Front-end o que é preciso saber?Front-end o que é preciso saber?
Front-end o que é preciso saber?João Praia
 
Walker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicaçãoWalker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicaçãoWordCamp Floripa
 
MVP ShowCast 2014 - Desenvolvendo APIs com WebAPI
MVP ShowCast 2014 - Desenvolvendo APIs com WebAPIMVP ShowCast 2014 - Desenvolvendo APIs com WebAPI
MVP ShowCast 2014 - Desenvolvendo APIs com WebAPIAndre Baltieri
 

Mais procurados (20)

SPA com CSharp
SPA com CSharpSPA com CSharp
SPA com CSharp
 
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
 
Como criar módulos para magento 2
Como criar módulos para magento 2Como criar módulos para magento 2
Como criar módulos para magento 2
 
ASP.NET SignalR + SPA com AngularJS
ASP.NET SignalR + SPA com AngularJSASP.NET SignalR + SPA com AngularJS
ASP.NET SignalR + SPA com AngularJS
 
Guga Alves apresenta Gutenberg fase 2 e 3
Guga Alves apresenta Gutenberg fase 2 e 3Guga Alves apresenta Gutenberg fase 2 e 3
Guga Alves apresenta Gutenberg fase 2 e 3
 
MSP Tech Days Online 2018 - SPA além do JavaScript com Blazor
MSP Tech Days Online 2018 - SPA além do JavaScript com BlazorMSP Tech Days Online 2018 - SPA além do JavaScript com Blazor
MSP Tech Days Online 2018 - SPA além do JavaScript com Blazor
 
Do MVP ao PWA, melhorando o engajamento com cliente na CVC
Do MVP ao PWA, melhorando o engajamento com cliente na CVCDo MVP ao PWA, melhorando o engajamento com cliente na CVC
Do MVP ao PWA, melhorando o engajamento com cliente na CVC
 
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGapAplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
 
Campus Party - Desenvolvendo aplicações .Net com software gratuito
Campus Party  - Desenvolvendo aplicações .Net com software gratuitoCampus Party  - Desenvolvendo aplicações .Net com software gratuito
Campus Party - Desenvolvendo aplicações .Net com software gratuito
 
Responsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivosResponsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivos
 
Write once, run "everywhere"
Write once, run "everywhere"Write once, run "everywhere"
Write once, run "everywhere"
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
 
Introdução ao desenvolvimento de apps com Phonegap
Introdução ao desenvolvimento de apps com PhonegapIntrodução ao desenvolvimento de apps com Phonegap
Introdução ao desenvolvimento de apps com Phonegap
 
Magento: Mitos vs Vantagens
Magento: Mitos vs VantagensMagento: Mitos vs Vantagens
Magento: Mitos vs Vantagens
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
O dia a dia de uma Desenvolvedora Front-end
O dia a dia de uma Desenvolvedora Front-endO dia a dia de uma Desenvolvedora Front-end
O dia a dia de uma Desenvolvedora Front-end
 
Front-end o que é preciso saber?
Front-end o que é preciso saber?Front-end o que é preciso saber?
Front-end o que é preciso saber?
 
Walker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicaçãoWalker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicação
 
MVP ShowCast 2014 - Desenvolvendo APIs com WebAPI
MVP ShowCast 2014 - Desenvolvendo APIs com WebAPIMVP ShowCast 2014 - Desenvolvendo APIs com WebAPI
MVP ShowCast 2014 - Desenvolvendo APIs com WebAPI
 

Semelhante a O papel do desenvolvedor Front End e como se tornar um profissional de frontend

O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndRael Max
 
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 PassosJackson F. de A. Mafra
 
Magrathea - Mil Devs
Magrathea  - Mil DevsMagrathea  - Mil Devs
Magrathea - Mil DevsVitor Batista
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sitesthiagolima
 
Automação de build para frontend
Automação de build para frontendAutomação de build para frontend
Automação de build para frontendVanessa Me Tonini
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento WebSérgio Souza Costa
 
Desenvolvimento Web Parte I
Desenvolvimento Web Parte IDesenvolvimento Web Parte I
Desenvolvimento Web Parte Iigorpimentel
 
Turbinando microsserviços em PHP
Turbinando microsserviços em PHPTurbinando microsserviços em PHP
Turbinando microsserviços em PHPFlávio Lisboa
 
Pwa e o futuro do frontend
Pwa e o futuro do frontendPwa e o futuro do frontend
Pwa e o futuro do frontendRaphael Moraes
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxMarceloRosenbrock1
 
Desenvolvimento web com software livre
Desenvolvimento web com software livreDesenvolvimento web com software livre
Desenvolvimento web com software livreRuan Carvalho
 
Desenvolvimento web com Software Livre
Desenvolvimento web com Software LivreDesenvolvimento web com Software Livre
Desenvolvimento web com Software LivreRuan Carvalho
 
A 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignA 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignGustavo Zimmermann
 

Semelhante a O papel do desenvolvedor Front End e como se tornar um profissional de frontend (20)

O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front End
 
Gestão de Projetos
Gestão de ProjetosGestão de Projetos
Gestão de Projetos
 
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
 
Magrathea - Mil Devs
Magrathea  - Mil DevsMagrathea  - Mil Devs
Magrathea - Mil Devs
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Automação de build para frontend
Automação de build para frontendAutomação de build para frontend
Automação de build para frontend
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Meetup vue.js
Meetup vue.jsMeetup vue.js
Meetup vue.js
 
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
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
 
Desenvolvimento Web Parte I
Desenvolvimento Web Parte IDesenvolvimento Web Parte I
Desenvolvimento Web Parte I
 
Turbinando microsserviços em PHP
Turbinando microsserviços em PHPTurbinando microsserviços em PHP
Turbinando microsserviços em PHP
 
Pwa e o futuro do frontend
Pwa e o futuro do frontendPwa e o futuro do frontend
Pwa e o futuro do frontend
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptx
 
Desenvolvimento web com software livre
Desenvolvimento web com software livreDesenvolvimento web com software livre
Desenvolvimento web com software livre
 
Desenvolvimento web com Software Livre
Desenvolvimento web com Software LivreDesenvolvimento web com Software Livre
Desenvolvimento web com Software Livre
 
Escalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLIDEscalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLID
 
CV Alexandre R. de Castro
CV Alexandre R. de CastroCV Alexandre R. de Castro
CV Alexandre R. de Castro
 
A 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignA 3ª Área do Design: Web Design
A 3ª Área do Design: Web Design
 
Software gratuito
Software gratuitoSoftware gratuito
Software gratuito
 

O papel do desenvolvedor Front End e como se tornar um profissional de frontend

  • 1. O papel do desenvolvedor Front End (Front End Enginner)
  • 2. O que ele faz? O desenvolvedor front end é o profissional responsável por projetar, construir e otimizar as interfaces de projetos web. Responsabilidades: – Assegurar compatibilidade cross-browser e cross-platform; – Produzir código limpo, bem documentado e estruturado; – Criar páginas web rápidas; – Seguir os web standards; – Aplicar técnicas de SEO (Search Engine Optimization)
  • 3. Qual a importância de um Front End Enginner para o sucesso de um projeto? – 80% do tempo de carregamento é gasto com o download dos elementos do front end(css, javascript, imagens...). – A interface das aplicações web estão ficando cada vez mais complexas, logo é imprescindível a presença de um profissional especialista em interfaces. – Por mais que possamos dizer que a web é multiplataforma, ainda temos grandes problemas de compatibilidade entre os browsers, e o conhecimento das nuances de cada um deles é de total importância para que o projeto atenda o máximo de clientes possíveis.
  • 4. As interfaces dos projetos web se tornaram cada vez mais complexas e por isso surgiu a necessidade de alguém altamente especializado. O Front End Enginner.
  • 5. Alguém lembra de como era a home da globo.com em 2001? 2003? 2005? Pois bem...
  • 10. HOJE
  • 11. Quais tecnologias fazem parte do “arsenal de guerra” de um Front End Enginner?
  • 12. HTML + CSS + JAVASCRIPT
  • 13. E mais... – Design Patterns – Perfomance – SEO(on page) – Testes – E mais um monte de sigla legal!
  • 14. Quem está investindo nesses profissionais? – Grandes portais (globo.com, r7.com...) – Agências de desenvolvimento de sites – Facebook, Yahoo!, Twitter, Google...
  • 15. Gostei, e como faço pra me tornar um ninja? – Sites: • Http://maujor.com/ • Http://tableless.com.br – Livros: • A bíblia do programador jQuery • Javascript Design Patterns – Listas de discussão: • jquery-br • webstandards-br • frontend-br • html5-css3-br
  • 16. Davidson Fellipe http://www.fellipe.com @davidsonfellipe Perguntas? ;-) Rael Max < contato@raelmax.com > http://raelmax.com @raelmax