como pensar front para wordpress
bernard de luna
@bernarddeluna
- team leader de produto na Petrobras
- creative director da Melt DSP
- criador do framework Formee
- colunista do iMaster...
@bernarddeluna
@bernarddeluna
qual o ponto fraco
do seu código?
@suco_de_uva
meu ponto fraco é o cansaço. chega um
momento que não consigo mais pensar e vou
metendo classe :/
@netofonten...
@rafasato
organização de css e falta de criatividade para
nomear elementos
@fabriciofmsilva
dúvidas para nomear elementos,...
@juliobitencourt
a minha é o tal do DRY :(
@fernahh
dar nome aos bois, digo, as variáveis D:
@matos_eduardo
organização.
@...
bonito
novos estilos são adicionados
bagunçado
estilos existentes não são reutilizados
estilos não utilizados não são remo...
bernard de luna
@bernarddeluna
bernard de luna
@bernarddeluna
defina os componentes
do seu framework
dribbble.com
dedique-se às
convenções de nome
imagine uma empresa
imagine uma empresa
função-nome
imagine uma empresa
nav
nav-item
nav-link
imagine uma empresa
btn
btn-primary
btn-large, btn-small
imagine uma empresa
gallery
gallery-item
gallery-link
gallery-thumb
imagine uma empresa
gallery
gallery-item
gallery-link
gallery-thumb
camelCase não é
recomendado para CSS
http://csswizardr...
agrupe e teste todos os
seus componentes
dribbble.com
dribbble.com
incluindo wordpress no
processo de front-end
falta de um wrapper
<header id="branding" role="banner"></div>
<span class="sep">Posted on </span>
<span class="sep"> by </span>
<span class="sep">Posted on </span>
<span class="sep"> by </span>
<footer class="entry-meta">
	 This entry was posted in <...
<div id="secondary" class="widget-area" role="complementary">
	 <aside id="search-2" class="widget widget_search"></aside>...
contribuímos uma gota
para melhorar isso
fui!obrigado!
@bernarddeluna
como pensar front para wordpress
como pensar front para wordpress
como pensar front para wordpress
como pensar front para wordpress
como pensar front para wordpress
como pensar front para wordpress
como pensar front para wordpress
como pensar front para wordpress
Próximos SlideShares
Carregando em…5
×

como pensar front para wordpress

2.249 visualizações

Publicada em

Vamos analisar um pouco sobre como devemos pensar em front-end, identificando pontos de planejamento e de atenção e o que podemos melhorar no front do wordpress para atingirmos a modularização.

1 comentário
16 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
2.249
No SlideShare
0
A partir de incorporações
0
Número de incorporações
30
Ações
Compartilhamentos
0
Downloads
44
Comentários
1
Gostaram
16
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

como pensar front para wordpress

  1. 1. como pensar front para wordpress
  2. 2. bernard de luna @bernarddeluna
  3. 3. - team leader de produto na Petrobras - creative director da Melt DSP - criador do framework Formee - colunista do iMasters e Tableless - +50 eventos pelo Brasil - HTML5DevConf em San Francisco
  4. 4. @bernarddeluna
  5. 5. @bernarddeluna qual o ponto fraco do seu código?
  6. 6. @suco_de_uva meu ponto fraco é o cansaço. chega um momento que não consigo mais pensar e vou metendo classe :/ @netofontenelle organização não sei como separar bem o meu CSS. :/ @zenorocha refatoração. uma vez pronto, quase nunca volto para otimizar o CSS @srmarcosalberto ainda rola uma certa dificuldade de nomear bem os elementos
  7. 7. @rafasato organização de css e falta de criatividade para nomear elementos @fabriciofmsilva dúvidas para nomear elementos, falta de organização e refatoração @wl_lf refatoração e nomear elementos. @cironunesdev meu ponto fraco é nomear as classes. Sem um plano, é dificil manter a disciplina de ter "carinho" ao escolher os nomes.
  8. 8. @juliobitencourt a minha é o tal do DRY :( @fernahh dar nome aos bois, digo, as variáveis D: @matos_eduardo organização. @glaucoweb eu acho que eh falta de compromisso até o final. Ahh depois eu refatoro td. Começa mt bem mas nao termina :(
  9. 9. bonito novos estilos são adicionados bagunçado estilos existentes não são reutilizados estilos não utilizados não são removidos não consertar o que não estiver quebrando o layout css tempo https://speakerdeck.com/winston/wah-lau-css-can-be-tested-too
  10. 10. bernard de luna @bernarddeluna
  11. 11. bernard de luna @bernarddeluna
  12. 12. defina os componentes do seu framework
  13. 13. dribbble.com
  14. 14. dedique-se às convenções de nome
  15. 15. imagine uma empresa
  16. 16. imagine uma empresa função-nome
  17. 17. imagine uma empresa nav nav-item nav-link
  18. 18. imagine uma empresa btn btn-primary btn-large, btn-small
  19. 19. imagine uma empresa gallery gallery-item gallery-link gallery-thumb
  20. 20. imagine uma empresa gallery gallery-item gallery-link gallery-thumb camelCase não é recomendado para CSS http://csswizardry.com/2010/12/css-camel-case-seriously-sucks/
  21. 21. agrupe e teste todos os seus componentes
  22. 22. dribbble.com
  23. 23. dribbble.com
  24. 24. incluindo wordpress no processo de front-end
  25. 25. falta de um wrapper
  26. 26. <header id="branding" role="banner"></div>
  27. 27. <span class="sep">Posted on </span> <span class="sep"> by </span>
  28. 28. <span class="sep">Posted on </span> <span class="sep"> by </span> <footer class="entry-meta"> This entry was posted in <a href="http://localhost:8888/wordpress/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a> and tagged <a href="#" rel="tag">cursus</a> by <a href="#">admin</a>. Bookmark the <a href="#" title="Permalink to Mais um tipo de post" rel="bookmark">permalink</a>. </footer>
  29. 29. <div id="secondary" class="widget-area" role="complementary"> <aside id="search-2" class="widget widget_search"></aside> </div>
  30. 30. contribuímos uma gota para melhorar isso
  31. 31. fui!obrigado! @bernarddeluna

×