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

Introduction To WordPress
Introduction To WordPressIntroduction To WordPress
Introduction To WordPressCraig Bailey
 
Front end development
Front end developmentFront end development
Front end developmentMaitrikpaida
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web DevelopmentRobert Nyman
 
Web development presentation.pptx
Web development presentation.pptxWeb development presentation.pptx
Web development presentation.pptxManjeetAgarwal
 
Web Development Ppt
Web Development PptWeb Development Ppt
Web Development PptBruce Tucker
 
Full stack web development
Full stack web developmentFull stack web development
Full stack web developmentCrampete
 
Introduction to Tailwind CSS - IM Tech Meetup - May 2022.pptx
Introduction to Tailwind CSS - IM Tech Meetup - May 2022.pptxIntroduction to Tailwind CSS - IM Tech Meetup - May 2022.pptx
Introduction to Tailwind CSS - IM Tech Meetup - May 2022.pptxIlesh Mistry
 
Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development PresentationTurnToTech
 
Tailwind CSS - KanpurJS
Tailwind CSS - KanpurJSTailwind CSS - KanpurJS
Tailwind CSS - KanpurJSNaveen Kharwar
 
Web development using HTML and CSS
Web development using HTML and CSSWeb development using HTML and CSS
Web development using HTML and CSSSiddhantSingh980217
 
Web Designing Presentation
Web Designing PresentationWeb Designing Presentation
Web Designing PresentationRahulSuri30
 
Web development using javaScript, React js, Node js, HTML, CSS and SQL
Web development using javaScript, React js, Node js, HTML, CSS and SQLWeb development using javaScript, React js, Node js, HTML, CSS and SQL
Web development using javaScript, React js, Node js, HTML, CSS and SQLJayant Surana
 
Responsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for BeginnersResponsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for BeginnersBootstrap Creative
 
Web Design 101
Web Design 101Web Design 101
Web Design 101vegdwk
 
Tech talk on Tailwind CSS
Tech talk on Tailwind CSSTech talk on Tailwind CSS
Tech talk on Tailwind CSSSquareboat
 

Mais procurados (20)

Introduction To WordPress
Introduction To WordPressIntroduction To WordPress
Introduction To WordPress
 
Front end development
Front end developmentFront end development
Front end development
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web Development
 
Web development presentation.pptx
Web development presentation.pptxWeb development presentation.pptx
Web development presentation.pptx
 
Web Development Ppt
Web Development PptWeb Development Ppt
Web Development Ppt
 
CSS
CSSCSS
CSS
 
Full stack web development
Full stack web developmentFull stack web development
Full stack web development
 
Introduction to Tailwind CSS - IM Tech Meetup - May 2022.pptx
Introduction to Tailwind CSS - IM Tech Meetup - May 2022.pptxIntroduction to Tailwind CSS - IM Tech Meetup - May 2022.pptx
Introduction to Tailwind CSS - IM Tech Meetup - May 2022.pptx
 
Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development Presentation
 
Tailwind CSS - KanpurJS
Tailwind CSS - KanpurJSTailwind CSS - KanpurJS
Tailwind CSS - KanpurJS
 
Web development using HTML and CSS
Web development using HTML and CSSWeb development using HTML and CSS
Web development using HTML and CSS
 
Web Designing Presentation
Web Designing PresentationWeb Designing Presentation
Web Designing Presentation
 
Web development using javaScript, React js, Node js, HTML, CSS and SQL
Web development using javaScript, React js, Node js, HTML, CSS and SQLWeb development using javaScript, React js, Node js, HTML, CSS and SQL
Web development using javaScript, React js, Node js, HTML, CSS and SQL
 
Style and Selector
Style and SelectorStyle and Selector
Style and Selector
 
SASS - CSS with Superpower
SASS - CSS with SuperpowerSASS - CSS with Superpower
SASS - CSS with Superpower
 
Responsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for BeginnersResponsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for Beginners
 
Web Design 101
Web Design 101Web Design 101
Web Design 101
 
Tech talk on Tailwind CSS
Tech talk on Tailwind CSSTech talk on Tailwind CSS
Tech talk on Tailwind CSS
 
CSS
CSSCSS
CSS
 

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