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
Perguntas? ;-)


      Rael Max              Davidson Fellipe
  < contato@raelmax.com >     http://www.fellipe.com
      http://raelmax.com         @davidsonfellipe
           @raelmax

Mais conteúdo relacionado

Mais procurados

Web Development In 2018
Web Development In 2018Web Development In 2018
Web Development In 2018Traversy Media
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento webRodrigo Rodrigues
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao cssLéo Dias
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01 Léo Dias
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Bruno Grange
 
Web Development and Web Development technologies - Temitayo Fadojutimi
Web Development and Web Development technologies - Temitayo FadojutimiWeb Development and Web Development technologies - Temitayo Fadojutimi
Web Development and Web Development technologies - Temitayo FadojutimiTemitayo Fadojutimi
 
Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development PresentationTurnToTech
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web developmentbethanygfair
 
WEB DEVELOPMENT
WEB DEVELOPMENTWEB DEVELOPMENT
WEB DEVELOPMENTkhushi74
 
Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen Derin Dolen
 
O que é framework
O que é frameworkO que é framework
O que é frameworkfcdigital
 
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptDesvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptRodrigo Branas
 
Android - Programação para dispositivos móveis (Aula 1)
Android - Programação para dispositivos móveis (Aula 1)Android - Programação para dispositivos móveis (Aula 1)
Android - Programação para dispositivos móveis (Aula 1)Ricardo Longa
 
Desenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos BásicosDesenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos BásicosFabio Moura Pereira
 
presentation in html,css,javascript
presentation in html,css,javascriptpresentation in html,css,javascript
presentation in html,css,javascriptFaysalAhammed5
 
Primeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-endPrimeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-endDiego Eis
 

Mais procurados (20)

Web Development In 2018
Web Development In 2018Web Development In 2018
Web Development In 2018
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
Web development ppt
Web development pptWeb development ppt
Web development ppt
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao css
 
Introdução CSS
Introdução CSSIntrodução CSS
Introdução CSS
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
 
Web Development and Web Development technologies - Temitayo Fadojutimi
Web Development and Web Development technologies - Temitayo FadojutimiWeb Development and Web Development technologies - Temitayo Fadojutimi
Web Development and Web Development technologies - Temitayo Fadojutimi
 
Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development Presentation
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web development
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 
WEB DEVELOPMENT
WEB DEVELOPMENTWEB DEVELOPMENT
WEB DEVELOPMENT
 
Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen
 
O que é framework
O que é frameworkO que é framework
O que é framework
 
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptDesvendando a linguagem JavaScript
Desvendando a linguagem JavaScript
 
Android - Programação para dispositivos móveis (Aula 1)
Android - Programação para dispositivos móveis (Aula 1)Android - Programação para dispositivos móveis (Aula 1)
Android - Programação para dispositivos móveis (Aula 1)
 
Desenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos BásicosDesenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos Básicos
 
presentation in html,css,javascript
presentation in html,css,javascriptpresentation in html,css,javascript
presentation in html,css,javascript
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
 
Primeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-endPrimeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-end
 

Semelhante a O Papel do desenvolvedor Front End

O papel do desenvolvedor front end
O papel do desenvolvedor front endO papel do desenvolvedor front end
O papel do desenvolvedor front endRomário J. Santos
 
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
 
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
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sitesthiagolima
 
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
 
Lightning Talk: Webdev who?
Lightning Talk: Webdev who?Lightning Talk: Webdev who?
Lightning Talk: Webdev who?Leandro Nunes
 
Como encarar o desenvolvimento front-end
Como encarar o desenvolvimento front-endComo encarar o desenvolvimento front-end
Como encarar o desenvolvimento front-endJean Carlo Emer
 
Microsoft WebMatrix
Microsoft WebMatrixMicrosoft WebMatrix
Microsoft WebMatrixDenis Felix
 
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
 
Aula 2. frameworks js
Aula 2. frameworks jsAula 2. frameworks js
Aula 2. frameworks jsandreluizlc
 

Semelhante a O Papel do desenvolvedor Front End (20)

O papel do desenvolvedor front end
O papel do desenvolvedor front endO papel do desenvolvedor front end
O papel do desenvolvedor front end
 
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
 
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
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
CV Alexandre R. de Castro
CV Alexandre R. de CastroCV Alexandre R. de Castro
CV Alexandre R. de Castro
 
Front-end o que é preciso saber?
Front-end o que é preciso saber?Front-end o que é preciso saber?
Front-end o que é preciso saber?
 
Souza naves
Souza navesSouza naves
Souza naves
 
Producao para web
Producao para webProducao para web
Producao para web
 
Gestão de Projetos
Gestão de ProjetosGestão de Projetos
Gestão de Projetos
 
Lightning Talk: Webdev who?
Lightning Talk: Webdev who?Lightning Talk: Webdev who?
Lightning Talk: Webdev who?
 
Cv alexandre rezendedecastro
Cv alexandre rezendedecastroCv alexandre rezendedecastro
Cv alexandre rezendedecastro
 
A revolução do client side
A revolução do client sideA revolução do client side
A revolução do client side
 
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
 
Web Dev Camp
Web Dev CampWeb Dev Camp
Web Dev Camp
 
Como encarar o desenvolvimento front-end
Como encarar o desenvolvimento front-endComo encarar o desenvolvimento front-end
Como encarar o desenvolvimento front-end
 
Microsoft WebMatrix
Microsoft WebMatrixMicrosoft WebMatrix
Microsoft WebMatrix
 
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
 
Aula 2. frameworks js
Aula 2. frameworks jsAula 2. frameworks js
Aula 2. frameworks js
 
Dream 02
Dream 02Dream 02
Dream 02
 

O Papel do desenvolvedor Front End

  • 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. Perguntas? ;-) Rael Max Davidson Fellipe < contato@raelmax.com > http://www.fellipe.com http://raelmax.com @davidsonfellipe @raelmax