SlideShare uma empresa Scribd logo
1 de 37
<FRONT-END />
  ENGINEER
<ivanbanov />
APLICAÇÃO WEB
Yahoo!
Yahoo!
Nike
Nike
Apple
Apple
E onde entra o tal
   Front-End?
Layout
(designer)
Layout     java, python, ruby,
(designer)          C# ...
                 (back-end)
Layout     html / css/ js   java, python, ruby, C# ...
(designer)                           (back-end)
              (front-end)
Ahh
    h, é
reco     o ca
    rta la ra que
          yout
               ...
ENGENHARIA
  FRONT-END
<html>
- marcação semântica
- arquitetura e corpo da aplicação
<html>
 - marcação semântica
 - arquitetura e corpo da aplicação


{css}
 - estilização
 - classes modulares
<html>
- marcação semântica
- arquitetura e corpo da aplicação


{css}
- estilização
- classes modulares


js()
- comportamento
- eventos, metodos e firulas
Performance
"80-90% of the end-user response
time is spent on the frontend."

                      - Steve Souder
E...
- Usabilidade (humano ~ computador)
- Acessibilidade
- Webstandards (w3c)
- Cross-browser
- Modularização de arquivos
- Escalabilidade
- HTTP
SEO
Bonus Track
<div class="titulo"> Harlem Shake </div>
<div class="subtitulo"> crazy dance </div>

<div class="conteudo">
      Con los terroristas
      (ta-ta-ta-ta-ta-ta-ta-ta-ta-ta-ta-ta)
      And do the Harlem Shake
      Shake, Ey (shake)
</div>
<h1> Harlem Shake </h1>
<h2> crazy dance </h2>

<article>
      Con los terroristas
      (ta-ta-ta-ta-ta-ta-ta-ta-ta-ta-ta-ta)
      And do the Harlem Shake
      Shake, Ey (shake)
</article>
E mais
para os robôs...
E mais para os robôs...
- meta tags
- tiltes
- alternative texts para imagens
- url amigavel
- sitemap.xml
- flash #fail
Ajuda?
maujor.com                  @maujor
tableless.com.br            @diegoeis
css-trick.com               @chriscoyier
frontendbrasil.com.br       @zenorocha
lea.verou.me                @leaverou
imasters.com.br/front-end
google.com :)
Obrigado!

Mais conteúdo relacionado

Destaque

Normal junio 2012
Normal junio 2012Normal junio 2012
Normal junio 2012
gaalvarezg
 
Apresentação club invest garantido2
Apresentação club invest garantido2Apresentação club invest garantido2
Apresentação club invest garantido2
clubinvest
 
Incursion en el entorno educativo
Incursion en el entorno educativoIncursion en el entorno educativo
Incursion en el entorno educativo
marianitalliguicota
 
Patricio pa la caro
Patricio pa la caroPatricio pa la caro
Patricio pa la caro
ahava92
 
Pdf do livro_a_tematica_indigena_na_escola
Pdf do livro_a_tematica_indigena_na_escolaPdf do livro_a_tematica_indigena_na_escola
Pdf do livro_a_tematica_indigena_na_escola
natielemesquita
 
TÉCNICAS DE APRESENTAÇÃO.
TÉCNICAS DE APRESENTAÇÃO.TÉCNICAS DE APRESENTAÇÃO.
TÉCNICAS DE APRESENTAÇÃO.
Vitória Silva
 
Estatistica e Matemática Finaceira
Estatistica e Matemática FinaceiraEstatistica e Matemática Finaceira
Estatistica e Matemática Finaceira
luiz soares
 
Eb chães a semana da cor
Eb chães   a semana da corEb chães   a semana da cor
Eb chães a semana da cor
belece
 

Destaque (19)

Normal junio 2012
Normal junio 2012Normal junio 2012
Normal junio 2012
 
Folha Notícias Regionais® | Oeste Paulista - Edição 120
Folha Notícias Regionais® | Oeste Paulista - Edição 120Folha Notícias Regionais® | Oeste Paulista - Edição 120
Folha Notícias Regionais® | Oeste Paulista - Edição 120
 
Projeto campeonato 2013
Projeto campeonato 2013Projeto campeonato 2013
Projeto campeonato 2013
 
Mapeamento de clientes
Mapeamento de clientesMapeamento de clientes
Mapeamento de clientes
 
Apresentação club invest garantido2
Apresentação club invest garantido2Apresentação club invest garantido2
Apresentação club invest garantido2
 
La leyenda de pyrene
La leyenda de pyreneLa leyenda de pyrene
La leyenda de pyrene
 
Dijousgras
Dijousgras Dijousgras
Dijousgras
 
Incursion en el entorno educativo
Incursion en el entorno educativoIncursion en el entorno educativo
Incursion en el entorno educativo
 
Mídia f5 - Apresentação de proposta, temática e objetivos.
Mídia f5 - Apresentação de proposta, temática e objetivos.Mídia f5 - Apresentação de proposta, temática e objetivos.
Mídia f5 - Apresentação de proposta, temática e objetivos.
 
Patricio pa la caro
Patricio pa la caroPatricio pa la caro
Patricio pa la caro
 
XIII Jornades de Museus i Educació 2010
XIII Jornades de Museus i Educació 2010XIII Jornades de Museus i Educació 2010
XIII Jornades de Museus i Educació 2010
 
Folha Notícias Regionais | Edição 99
Folha Notícias Regionais | Edição 99Folha Notícias Regionais | Edição 99
Folha Notícias Regionais | Edição 99
 
Pdf do livro_a_tematica_indigena_na_escola
Pdf do livro_a_tematica_indigena_na_escolaPdf do livro_a_tematica_indigena_na_escola
Pdf do livro_a_tematica_indigena_na_escola
 
Eleições 2014 versão 2
Eleições 2014  versão 2Eleições 2014  versão 2
Eleições 2014 versão 2
 
TÉCNICAS DE APRESENTAÇÃO.
TÉCNICAS DE APRESENTAÇÃO.TÉCNICAS DE APRESENTAÇÃO.
TÉCNICAS DE APRESENTAÇÃO.
 
Ficha 4 sustancias
Ficha 4 sustanciasFicha 4 sustancias
Ficha 4 sustancias
 
Estatistica e Matemática Finaceira
Estatistica e Matemática FinaceiraEstatistica e Matemática Finaceira
Estatistica e Matemática Finaceira
 
Eb chães a semana da cor
Eb chães   a semana da corEb chães   a semana da cor
Eb chães a semana da cor
 
Mercado de Franchise de moda no Brasil
Mercado de Franchise de moda no BrasilMercado de Franchise de moda no Brasil
Mercado de Franchise de moda no Brasil
 

Semelhante a Front-end ENGINEER

iMasters Intercon Dev WordPress - Segurança em WordPress
iMasters Intercon Dev WordPress - Segurança em WordPressiMasters Intercon Dev WordPress - Segurança em WordPress
iMasters Intercon Dev WordPress - Segurança em WordPress
Erick Belluci Tedeschi
 
WebSocket com Node.js ( socketstream && coffeescript ) X RoR ( Juggernaut )
WebSocket com Node.js ( socketstream && coffeescript ) X RoR ( Juggernaut )WebSocket com Node.js ( socketstream && coffeescript ) X RoR ( Juggernaut )
WebSocket com Node.js ( socketstream && coffeescript ) X RoR ( Juggernaut )
João Moura
 
Portfolio-Wesley-Magalhaes-Dev-2015v2
Portfolio-Wesley-Magalhaes-Dev-2015v2Portfolio-Wesley-Magalhaes-Dev-2015v2
Portfolio-Wesley-Magalhaes-Dev-2015v2
Wesley Magalhaes
 

Semelhante a Front-end ENGINEER (20)

Wicket - Brincando com Objetos
Wicket - Brincando com ObjetosWicket - Brincando com Objetos
Wicket - Brincando com Objetos
 
API's do HTML5 - Davidson Alencar - WebBR2013
API's do HTML5 - Davidson Alencar - WebBR2013API's do HTML5 - Davidson Alencar - WebBR2013
API's do HTML5 - Davidson Alencar - WebBR2013
 
Como Perder Peso (no browser)
Como Perder Peso (no browser)Como Perder Peso (no browser)
Como Perder Peso (no browser)
 
Speed up! Critical css to the rescue
Speed up! Critical css to the rescueSpeed up! Critical css to the rescue
Speed up! Critical css to the rescue
 
Nadando em Dinheiro com jQuery
Nadando em Dinheiro com jQueryNadando em Dinheiro com jQuery
Nadando em Dinheiro com jQuery
 
Laboratório Web 2013-2014 - CSS3
Laboratório Web 2013-2014 - CSS3Laboratório Web 2013-2014 - CSS3
Laboratório Web 2013-2014 - CSS3
 
Webstandards - Melhores práticas para construção de páginas web
Webstandards - Melhores práticas para construção de páginas webWebstandards - Melhores práticas para construção de páginas web
Webstandards - Melhores práticas para construção de páginas web
 
Mini Curso Mashup Coreu
Mini Curso Mashup CoreuMini Curso Mashup Coreu
Mini Curso Mashup Coreu
 
iMasters Intercon Dev WordPress - Segurança em WordPress
iMasters Intercon Dev WordPress - Segurança em WordPressiMasters Intercon Dev WordPress - Segurança em WordPress
iMasters Intercon Dev WordPress - Segurança em WordPress
 
Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)
 
Html5
Html5Html5
Html5
 
Minicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
Minicurso Ajax - 5. Semana de Informática PUC Minas São GabrielMinicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
Minicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
 
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PTLições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
WebSocket com Node.js ( socketstream && coffeescript ) X RoR ( Juggernaut )
WebSocket com Node.js ( socketstream && coffeescript ) X RoR ( Juggernaut )WebSocket com Node.js ( socketstream && coffeescript ) X RoR ( Juggernaut )
WebSocket com Node.js ( socketstream && coffeescript ) X RoR ( Juggernaut )
 
Html5 e css3
Html5 e css3Html5 e css3
Html5 e css3
 
Html5 workshop
Html5 workshopHtml5 workshop
Html5 workshop
 
Erick Belluci Tedeschi - Segurança em WordPress
Erick Belluci Tedeschi - Segurança em WordPressErick Belluci Tedeschi - Segurança em WordPress
Erick Belluci Tedeschi - Segurança em WordPress
 
Nodejs - A performance que eu sempre quis ter
Nodejs - A performance que eu sempre quis terNodejs - A performance que eu sempre quis ter
Nodejs - A performance que eu sempre quis ter
 
Portfolio-Wesley-Magalhaes-Dev-2015v2
Portfolio-Wesley-Magalhaes-Dev-2015v2Portfolio-Wesley-Magalhaes-Dev-2015v2
Portfolio-Wesley-Magalhaes-Dev-2015v2
 

Front-end ENGINEER