como pensar front para wordpress

2.171 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.171
No SlideShare
0
A partir de incorporações
0
Número de incorporações
30
Ações
Compartilhamentos
0
Downloads
43
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

×