SlideShare uma empresa Scribd logo
ESTRUTURA
DE UM
FRONT-END
EFICIENTE(PARA INICIANTES)
Um breve guia de
melhores práticas
QUEM
Desenvolvedor Php e Javascript focado
em Wordpress, CakePHP, social apps e
client-side apps.
Desenvolve pra web há mais de 5 anos.
SÉRGIO VILAR
Front-End Engineer @ Vertex Tecnologia
SOBRE
WTF?
O MODO COMO UM DESENVOLVEDOR
ORGANIZA SEU PROJETO DIZ MUITO
SOBRE ELE.
Muitos front-ends ao começar na área,
não possuem uma base sólida de como
funciona o back-end de uma aplicação.
Este guia tem como objetivo mostrar as
melhores práticas para uma melhor
produtividade de toda a equipe
partindo de uma boa organização.
ESTRUTURA
DE PASTAS
É importante que esteja claro sobre
onde determinado trecho de código
está no seu projeto. Veja esta estrutura:
/- css
/- pages
- ... (seus arquivos .css)
- main.css
/- img
/- sample
- ... ( suas imagens na raiz da pasta)
/- js
/- components
/- modules
- main.js
ESTRUTURA
DE PASTAS
CSS
main.css: importa os arquivos
correspondentes a cada página
pages: pasta que contém os
arquivos .css para cada página do seu
projeto
ESTRUTURA
DE PASTAS
IMG
sample: pasta que contém todas as
imagens de exemplo que você usou e
que serão preenchidas pelo back-end
... : as imagens ou sprites do seu projeto
vão na raiz da pasta img
ESTRUTURA
DE PASTAS
JS
components: nesta pasta ficarão as libs
que você está usando no seu projeto,
você pode apontar o bower para esta
pasta.
modules: nesta pasta fica cada módulo
responsável por cada página no seu
projeto front-end
main.js: seu arquivo javascript principal
DESMEMBRAMENTO
E COMO ISTO IRÁ TE SALVAR
Com uma aplicação
desmembrada, debugar
qualquer coisa é mamão-
com-açúcar, aproveite!
Cada desenvolvedor poderá
trabalhar em uma parte da
aplicação sem atrapalhar o
trabalho do colega.
Modularizando sua
aplicação, você saberá
exatamente onde procurar
ou implementar
determinada funcionalidade
para determinada página.
CADA UM NO SEU QUADRADO DEBUG FTW DESENVOLVIMENTO EM PARALELO
DESMEMBRAMENTO
CSS
Use seu arquivo main.css para importar
o CSS específico para cada página.
Ex:
@import “pages/home.css”
@import “pages/contato.css”
DESMEMBRAMENTO
JAVASCRIPT
Você pode usar o require.js para carregar
dinamicamente os arquivos .js para cada
módulo.
Ex:
var module = $('body').attr('rel');
require(['/js/modules/'+module+'.js'],function(Module){
Module.init();
});
Neste exemplo, armazenamos o módulo no qual
queremos carregar no atributo “rel” da tag body.
DESMEMBRAMENTO
JAVASCRIPT
E como fica esse módulo?
define('myModule', [], function(){
function Module(){
this.init = function(){
// aqui você inicializa o módulo
this.events();
};
this.events = function(){
// método de exemplo
};
}
return new Module();
});
A CÉSAR O QUE É DE CÉSAR
NO CSS OU NO HTML?
Tudo que é estático fica no CSS, como
aquela setinha ou aquele bg.
Tudo que é dinâmico fica no HTML.
Dessa forma, o back-end da aplicação
poderá manusear de acordo com os
dados oriundos do banco de dados.
DICA: Preferencialmente use a tag img
para conteúdo dinâmico e a
propriedade background do CSS para
conteúdo estático.
SEMÂNTICA
E UM POUQUINHO DE MINIMALISMO
Use apenas tags HTML necessárias.
Não coloque uma tag a mais para
resolver algo que você poderia fazer
com CSS.
Leia a documentação do HTML no site
da W3C e entenda para quê cada tag
serve (você pode até descobrir algumas
tags novas).
ESCREVENDO HTML EFICIENTE
ENTENDER O PROJETO É PRECISO!
Ao escrever seu HTML, preste muita
atenção para o que é estático e
dinâmico, isso fará total diferença.
Aquele texto é estático ou dinâmico?
Caso seja dinâmico, escreva o HTML de
acordo com isso.
Veja os dois exemplos a seguir:
ESCREVENDO HTML EFICIENTE
EXEMPLO DE TEXTO ESTÁTICO
<h3>Descrição da galeria de imagens</h3>
<figure>
<img src=”img.jpg” />
</figure>
<figure>
<img src=”img.jpg” />
</figure>
ESCREVENDO HTML EFICIENTE
EXEMPLO DE TEXTO DINÂMICO
<figure>
<img src=”img.jpg” />
<figcaption>Descrição da foto</figcaption>
</figure>
<figure>
<img src=”img.jpg” />
<figcaption>Descrição da foto</figcaption>
</figure>
HEADER E FOOTER?
COMO O BACK-END VERÁ SEU HTML
O header da sua página HTML é toda a
parte comum a todas as páginas no
início do arquivo, o footer é toda a parte
comum no final do arquivo.
Para o back-end da aplicação, ter cada
página com um head e footer diferente
será uma tortura. Sim, ele vai te xingar
muito.
HEADER E FOOTER?
COMO O BACK-END VERÁ SEU HTML
Use o mesmo header e footer para
todas as páginas HTML, se precisar de
algo diferente, faça no módulo do
javascript correspondente.
É preciso que o que exista de diferente
entre suas páginas HTML seja apenas o
“miolo”.
É ISSO AÍ,
ATÉ LOGO.
http://about.me/vilar
http://sergiovilar.com.br
http://github.com/sergiovilar

Mais conteúdo relacionado

Mais procurados

Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSSledsifes
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a InternetLeonardo Soares
 
React JS - Parte 1
React JS - Parte 1React JS - Parte 1
React JS - Parte 1Bruno Catão
 
Node.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançadoNode.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançadoEduardo Bohrer
 
Wireframes para sites e dispositivos móveis
Wireframes para sites e dispositivos móveisWireframes para sites e dispositivos móveis
Wireframes para sites e dispositivos móveisTersis Zonato
 
TESTE DE AVALIAÇÃO - Microsot Word
TESTE DE AVALIAÇÃO - Microsot WordTESTE DE AVALIAÇÃO - Microsot Word
TESTE DE AVALIAÇÃO - Microsot WordP.ESPERANCA
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebAnderson Luís Furlan
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScriptCarlos Eduardo Kadu
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Bruno Grange
 
PHP Aula07 - conexão Com Banco de Dados
PHP Aula07 - conexão Com Banco de DadosPHP Aula07 - conexão Com Banco de Dados
PHP Aula07 - conexão Com Banco de DadosDaniel Brandão
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento WebSérgio Souza Costa
 
JavaScript - Introdução com Orientação a Objetos
JavaScript - Introdução com Orientação a ObjetosJavaScript - Introdução com Orientação a Objetos
JavaScript - Introdução com Orientação a ObjetosEduardo Mendes
 
Aula 01 - JavaScript: Introdução
Aula 01 - JavaScript: IntroduçãoAula 01 - JavaScript: Introdução
Aula 01 - JavaScript: IntroduçãoJessyka Lage
 

Mais procurados (20)

Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
 
React JS - Parte 1
React JS - Parte 1React JS - Parte 1
React JS - Parte 1
 
Node.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançadoNode.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançado
 
Wireframes para sites e dispositivos móveis
Wireframes para sites e dispositivos móveisWireframes para sites e dispositivos móveis
Wireframes para sites e dispositivos móveis
 
TESTE DE AVALIAÇÃO - Microsot Word
TESTE DE AVALIAÇÃO - Microsot WordTESTE DE AVALIAÇÃO - Microsot Word
TESTE DE AVALIAÇÃO - Microsot Word
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento Web
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
 
Introdução a HTML5
Introdução a HTML5Introdução a HTML5
Introdução a HTML5
 
PHP Aula07 - conexão Com Banco de Dados
PHP Aula07 - conexão Com Banco de DadosPHP Aula07 - conexão Com Banco de Dados
PHP Aula07 - conexão Com Banco de Dados
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
 
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
 
JavaScript - Introdução com Orientação a Objetos
JavaScript - Introdução com Orientação a ObjetosJavaScript - Introdução com Orientação a Objetos
JavaScript - Introdução com Orientação a Objetos
 
Aula 01 - JavaScript: Introdução
Aula 01 - JavaScript: IntroduçãoAula 01 - JavaScript: Introdução
Aula 01 - JavaScript: Introdução
 
Curso javascript básico
Curso javascript básicoCurso javascript básico
Curso javascript básico
 
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
 
Extreme programming (xp)
 Extreme programming   (xp) Extreme programming   (xp)
Extreme programming (xp)
 

Destaque

Guia do Front-end das Galáxias
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das GaláxiasDavidson Fellipe
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndRael Max
 
Criando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroCriando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroEduardo Shiota Yasuda
 
O que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endO que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endDiego Eis
 
1 - Introdução Ao Desenvolvimento Web - Estrutura Básica
1 - Introdução Ao Desenvolvimento Web - Estrutura Básica1 - Introdução Ao Desenvolvimento Web - Estrutura Básica
1 - Introdução Ao Desenvolvimento Web - Estrutura BásicaMauro Duarte
 
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
 
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...Hugo Brioso
 
Mercado Front-End no Brasil e no mundo
Mercado Front-End no Brasil e no mundoMercado Front-End no Brasil e no mundo
Mercado Front-End no Brasil e no mundoRodrigo Nogueira
 
Front-end Development
Front-end DevelopmentFront-end Development
Front-end DevelopmentEdy Segura
 
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 performanceAnderson Solano
 
Apresentacao Institucional da MKM Consulting
Apresentacao Institucional da MKM ConsultingApresentacao Institucional da MKM Consulting
Apresentacao Institucional da MKM ConsultingMauro Martins
 
SASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-endSASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-endAnderson Aguiar
 
Construindo um framework CSS
Construindo um framework CSSConstruindo um framework CSS
Construindo um framework CSSDiego Eis
 

Destaque (20)

Guia do Front-end das Galáxias
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das Galáxias
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front End
 
Criando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroCriando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zero
 
O que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endO que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-end
 
Webstandards
WebstandardsWebstandards
Webstandards
 
1 - Introdução Ao Desenvolvimento Web - Estrutura Básica
1 - Introdução Ao Desenvolvimento Web - Estrutura Básica1 - Introdução Ao Desenvolvimento Web - Estrutura Básica
1 - Introdução Ao Desenvolvimento Web - Estrutura Básica
 
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.
 
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
 
Mercado Front-End no Brasil e no mundo
Mercado Front-End no Brasil e no mundoMercado Front-End no Brasil e no mundo
Mercado Front-End no Brasil e no mundo
 
Front-end Development
Front-end DevelopmentFront-end Development
Front-end Development
 
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
 
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)
 
ENERMETER – COMPANY PROFILE
ENERMETER – COMPANY PROFILE ENERMETER – COMPANY PROFILE
ENERMETER – COMPANY PROFILE
 
Apresentacao Institucional da MKM Consulting
Apresentacao Institucional da MKM ConsultingApresentacao Institucional da MKM Consulting
Apresentacao Institucional da MKM Consulting
 
Company Profile
Company ProfileCompany Profile
Company Profile
 
SASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-endSASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-end
 
Minicurso Web. Front-end e HTML5 (parte 1)
Minicurso Web. Front-end e HTML5 (parte 1)Minicurso Web. Front-end e HTML5 (parte 1)
Minicurso Web. Front-end e HTML5 (parte 1)
 
Construindo um framework CSS
Construindo um framework CSSConstruindo um framework CSS
Construindo um framework CSS
 
FMZ Consulting
FMZ ConsultingFMZ Consulting
FMZ Consulting
 
SEO para Front-End
SEO para Front-EndSEO para Front-End
SEO para Front-End
 

Semelhante a Estrutura de um Front-End eficiente (para iniciantes)

Otimização Front-end para WordPress
Otimização Front-end para WordPressOtimização Front-end para WordPress
Otimização Front-end para WordPressGuga Alves
 
Criando e Usando Helpers
Criando e Usando HelpersCriando e Usando Helpers
Criando e Usando HelpersJoaoVagner
 
Navegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosNavegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosiMasters
 
Boas Práticas de programação WordPress
Boas Práticas de programação WordPressBoas Práticas de programação WordPress
Boas Práticas de programação WordPressThiago Mendes
 
The Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPressThe Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPressJackson F. de A. Mafra
 
Mini Curso - jQuery - FMU
Mini Curso - jQuery - FMUMini Curso - jQuery - FMU
Mini Curso - jQuery - FMUThiago Ericson
 
Como Perder Peso (no browser)
Como Perder Peso (no browser)Como Perder Peso (no browser)
Como Perder Peso (no browser)Zeno Rocha
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfCesar Braz
 
Performance - Acelere seu site! Na web tempo é mais que dinheiro.
Performance - Acelere seu site! Na web tempo é mais que dinheiro.Performance - Acelere seu site! Na web tempo é mais que dinheiro.
Performance - Acelere seu site! Na web tempo é mais que dinheiro.Gustavo Corrêa Alves
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Cristofer Sousa
 
#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5Leandro Santos
 
COMO FAZER E-MAIL MARKETING EM HTML
COMO FAZER E-MAIL MARKETING EM HTMLCOMO FAZER E-MAIL MARKETING EM HTML
COMO FAZER E-MAIL MARKETING EM HTMLRenato Melo
 
RubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direitoRubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direitoCezinha Anjos
 
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02Marcelo Mattos
 
SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...
SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...
SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...Guga Alves
 

Semelhante a Estrutura de um Front-End eficiente (para iniciantes) (20)

Otimização Front-end para WordPress
Otimização Front-end para WordPressOtimização Front-end para WordPress
Otimização Front-end para WordPress
 
Criando e Usando Helpers
Criando e Usando HelpersCriando e Usando Helpers
Criando e Usando Helpers
 
Navegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosNavegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza Bastos
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 
Boas Práticas de programação WordPress
Boas Práticas de programação WordPressBoas Práticas de programação WordPress
Boas Práticas de programação WordPress
 
The Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPressThe Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPress
 
Mini Curso - jQuery - FMU
Mini Curso - jQuery - FMUMini Curso - jQuery - FMU
Mini Curso - jQuery - FMU
 
Como Perder Peso (no browser)
Como Perder Peso (no browser)Como Perder Peso (no browser)
Como Perder Peso (no browser)
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdf
 
Performance - Acelere seu site! Na web tempo é mais que dinheiro.
Performance - Acelere seu site! Na web tempo é mais que dinheiro.Performance - Acelere seu site! Na web tempo é mais que dinheiro.
Performance - Acelere seu site! Na web tempo é mais que dinheiro.
 
Criação de sites
Criação de sitesCriação de sites
Criação de sites
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
 
J query
J queryJ query
J query
 
#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5
 
COMO FAZER E-MAIL MARKETING EM HTML
COMO FAZER E-MAIL MARKETING EM HTMLCOMO FAZER E-MAIL MARKETING EM HTML
COMO FAZER E-MAIL MARKETING EM HTML
 
Curso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JSCurso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JS
 
RubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direitoRubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direito
 
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
 
SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...
SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...
SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...
 
Como desenvolver um tema wordpress de A a Z
Como desenvolver um tema wordpress de A a ZComo desenvolver um tema wordpress de A a Z
Como desenvolver um tema wordpress de A a Z
 

Estrutura de um Front-End eficiente (para iniciantes)

  • 2. QUEM Desenvolvedor Php e Javascript focado em Wordpress, CakePHP, social apps e client-side apps. Desenvolve pra web há mais de 5 anos. SÉRGIO VILAR Front-End Engineer @ Vertex Tecnologia
  • 3. SOBRE WTF? O MODO COMO UM DESENVOLVEDOR ORGANIZA SEU PROJETO DIZ MUITO SOBRE ELE. Muitos front-ends ao começar na área, não possuem uma base sólida de como funciona o back-end de uma aplicação. Este guia tem como objetivo mostrar as melhores práticas para uma melhor produtividade de toda a equipe partindo de uma boa organização.
  • 4. ESTRUTURA DE PASTAS É importante que esteja claro sobre onde determinado trecho de código está no seu projeto. Veja esta estrutura: /- css /- pages - ... (seus arquivos .css) - main.css /- img /- sample - ... ( suas imagens na raiz da pasta) /- js /- components /- modules - main.js
  • 5. ESTRUTURA DE PASTAS CSS main.css: importa os arquivos correspondentes a cada página pages: pasta que contém os arquivos .css para cada página do seu projeto
  • 6. ESTRUTURA DE PASTAS IMG sample: pasta que contém todas as imagens de exemplo que você usou e que serão preenchidas pelo back-end ... : as imagens ou sprites do seu projeto vão na raiz da pasta img
  • 7. ESTRUTURA DE PASTAS JS components: nesta pasta ficarão as libs que você está usando no seu projeto, você pode apontar o bower para esta pasta. modules: nesta pasta fica cada módulo responsável por cada página no seu projeto front-end main.js: seu arquivo javascript principal
  • 8. DESMEMBRAMENTO E COMO ISTO IRÁ TE SALVAR Com uma aplicação desmembrada, debugar qualquer coisa é mamão- com-açúcar, aproveite! Cada desenvolvedor poderá trabalhar em uma parte da aplicação sem atrapalhar o trabalho do colega. Modularizando sua aplicação, você saberá exatamente onde procurar ou implementar determinada funcionalidade para determinada página. CADA UM NO SEU QUADRADO DEBUG FTW DESENVOLVIMENTO EM PARALELO
  • 9. DESMEMBRAMENTO CSS Use seu arquivo main.css para importar o CSS específico para cada página. Ex: @import “pages/home.css” @import “pages/contato.css”
  • 10. DESMEMBRAMENTO JAVASCRIPT Você pode usar o require.js para carregar dinamicamente os arquivos .js para cada módulo. Ex: var module = $('body').attr('rel'); require(['/js/modules/'+module+'.js'],function(Module){ Module.init(); }); Neste exemplo, armazenamos o módulo no qual queremos carregar no atributo “rel” da tag body.
  • 11. DESMEMBRAMENTO JAVASCRIPT E como fica esse módulo? define('myModule', [], function(){ function Module(){ this.init = function(){ // aqui você inicializa o módulo this.events(); }; this.events = function(){ // método de exemplo }; } return new Module(); });
  • 12. A CÉSAR O QUE É DE CÉSAR NO CSS OU NO HTML? Tudo que é estático fica no CSS, como aquela setinha ou aquele bg. Tudo que é dinâmico fica no HTML. Dessa forma, o back-end da aplicação poderá manusear de acordo com os dados oriundos do banco de dados. DICA: Preferencialmente use a tag img para conteúdo dinâmico e a propriedade background do CSS para conteúdo estático.
  • 13. SEMÂNTICA E UM POUQUINHO DE MINIMALISMO Use apenas tags HTML necessárias. Não coloque uma tag a mais para resolver algo que você poderia fazer com CSS. Leia a documentação do HTML no site da W3C e entenda para quê cada tag serve (você pode até descobrir algumas tags novas).
  • 14. ESCREVENDO HTML EFICIENTE ENTENDER O PROJETO É PRECISO! Ao escrever seu HTML, preste muita atenção para o que é estático e dinâmico, isso fará total diferença. Aquele texto é estático ou dinâmico? Caso seja dinâmico, escreva o HTML de acordo com isso. Veja os dois exemplos a seguir:
  • 15. ESCREVENDO HTML EFICIENTE EXEMPLO DE TEXTO ESTÁTICO <h3>Descrição da galeria de imagens</h3> <figure> <img src=”img.jpg” /> </figure> <figure> <img src=”img.jpg” /> </figure>
  • 16. ESCREVENDO HTML EFICIENTE EXEMPLO DE TEXTO DINÂMICO <figure> <img src=”img.jpg” /> <figcaption>Descrição da foto</figcaption> </figure> <figure> <img src=”img.jpg” /> <figcaption>Descrição da foto</figcaption> </figure>
  • 17. HEADER E FOOTER? COMO O BACK-END VERÁ SEU HTML O header da sua página HTML é toda a parte comum a todas as páginas no início do arquivo, o footer é toda a parte comum no final do arquivo. Para o back-end da aplicação, ter cada página com um head e footer diferente será uma tortura. Sim, ele vai te xingar muito.
  • 18. HEADER E FOOTER? COMO O BACK-END VERÁ SEU HTML Use o mesmo header e footer para todas as páginas HTML, se precisar de algo diferente, faça no módulo do javascript correspondente. É preciso que o que exista de diferente entre suas páginas HTML seja apenas o “miolo”.
  • 19. É ISSO AÍ, ATÉ LOGO. http://about.me/vilar http://sergiovilar.com.br http://github.com/sergiovilar