Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WP BH

  • Login to see the comments

  • Be the first to like this

WP BH

  1. 1. Home Viva: Do design da interface até a programação do sistema WordCamp 2016 BELO HORIZONTE
  2. 2. Leo Baiano Jeff Camargo #WebDev para pagar as contas Músico quando estou bêbado Poeta por vocação Romântico de nascença FAZEDOR DE SLIDES nas horas vagas UX / UI Designer O cara sério desta apresentação Não faço slides de fadinhas
  3. 3. Por que Home Viva? ● Apesar das redes sociais e compartilhamento de notícias a home ainda é a página mais acessada de forma direta ● Detêm cerca de 30% de todos os acessos ● Conteúdo da home apresenta a linha editorial da empresa ● 55% dos usuários são provenientes de dispositivos mobile, 45% dos usuários usam desktop Home Viva
  4. 4. 29% 27% 24% 20% SocialBusca Orgânica Parceiros Home Home Viva
  5. 5. Home Viva Conteúdo editorial Interface modular Análise de uso Curadoria Usuário Estratégia Home Viva
  6. 6. Interface Modular ● Notícias ● Blogs ● Álbuns ● Vídeos ● Ao Vivo ● Conteúdo social Home Viva
  7. 7. Módulos vivos ● Priorização e destaque de conteúdos ● A todo momento a disposição pode mudar ● A edição é totalmente flexível ● É possível agendar as notícias em todos os módulos ● É possível identificar a quantidade de interação em cada módulo Home Viva
  8. 8. Home Viva
  9. 9. Home Viva
  10. 10. Home Viva
  11. 11. Antigamente uma página era montada assim Home Viva
  12. 12. Home Viva
  13. 13. 3 homens e um desafio Home Viva
  14. 14. 3 homens e um desafio Home Viva
  15. 15. As vezes a roda não serve Home Viva ● Page builder by siteOrigin ● Visual composer
  16. 16. Customizer + Widgets = Home Viva Home Viva API Customizer para motar os blocos, ordenar e exibir as mudanças em tempo real. Widgets para criar os blocos e permitir que os editores gerenciem o conteúdo de cada um deles.
  17. 17. Show time! Home Viva
  18. 18. Criando um widget Home Viva
  19. 19. Criando um widget Home Viva
  20. 20. Especificações dos blocos Home Viva ● Cada bloco tem mais de uma posição ● O conteúdo de cada posição pode ser preenchido automaticamente ou pelo editor ● O editor pode definir de onde vem o conteúdo automático
  21. 21. Múltiplas posições Home Viva A segunda vez é sempre mais gostosa! Criar uma propriedade privada para definir a quantidade de posições que o bloco tem e fazer um for para gerar o formulário e salvar o conteúdo.
  22. 22. Múltiplas posições Home Viva
  23. 23. Conteúdo automático ou editado Home Viva Definições são como cantadas, o objetivo é fuder com você! No front end é preciso verificar se os campos da posição estão com conteúdo, se tiver exibe, caso contrário pega o conteúdo do post.
  24. 24. Home Viva Se ela dança, eu danço...
  25. 25. Home Viva Se ela dança, eu danço...
  26. 26. Home Viva
  27. 27. De onde vem os posts automáticos? Home Viva E é assim, sem um jantar, sem flores nem nada? O editor pode definir o conteúdo de cada posição do bloco, mas ele precisa poder escolher uma categoria, por exemplo, e mostrar os posts dela.
  28. 28. Selecionando uma categoria Home Viva
  29. 29. Home Viva Com os widgets prontos só precisa criar a área no template da página inicial e, pronto, o conteúdo já vem dos widgets que são gerenciados no customizer. Tá tranquilo? Tá favorável?
  30. 30. Home Viva
  31. 31. Vamos as melhorias! Home Viva That`s very good, may I use that?
  32. 32. Auto complete na busca dos posts Home Viva ● jQuery UI - .autocomplete ● json estático com os últimos posts ● Be Happy!
  33. 33. Auto complete na busca dos posts. Home Viva
  34. 34. Auto complete na busca dos posts. Home Viva
  35. 35. Auto complete na busca dos posts. Home Viva
  36. 36. Live reload na página toda Home Viva
  37. 37. O que nós queremos? Home Viva
  38. 38. Live reload "certeiro" Home Viva add_theme_support( 'customize-selective-refresh-widgets' ); $widget_ops = array( 'classname' => 'atendimento-loser', 'description' => 'Não sou fã de atendimento', 'customize_selective_refresh' => true ); Entrou no core na versão 4.5 do WordPress Referência: https://make.wordpress.org/core/2016/03/22/implementing-selective-refresh-support-for-widgets/
  39. 39. Atendimento Home Viva
  40. 40. E por hoje é só pessoal! Home Viva
  41. 41. Perguntas? Home Viva

×