Home viva do design da interface até a programação do sistema

591 visualizações

Publicada em

Home viva é aquela em que o desenho da interface e a gestão do conteúdo são integradas e altamente customizáveis permitindo à equipe de editores ampla liberdade para criar conteúdos com diferentes estruturas visuais.

Nesta apresentação vamos demonstrar como funciona o processo de criação gráfica e o desenvolvimento do sistema utilizando o customizer e criando de widgets que permitem à equipe de conteúdo atualizar a página inicial em tempo real, e ainda, com a integração do google analytics, avaliar quais estruturas visuais dão os melhores resultados.

Publicada em: Software
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
591
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6
Ações
Compartilhamentos
0
Downloads
14
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Home viva do design da interface até a programação do sistema

  1. 1. Ajude as fadinhas … não use query_posts( );
  2. 2. pre_get_posts(); Preguetinho para os íntimos.
  3. 3. Home Viva: Do design da interface até a programação do sistema WordCamp 2016 BELO HORIZONTE
  4. 4. 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
  5. 5. 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
  6. 6. 29% 27% 24% 20% SocialBusca Orgânica Parceiros Home Home Viva
  7. 7. Home Viva Conteúdo editorial Interface modular Análise de uso Curadoria Usuário Estratégia Home Viva
  8. 8. Interface Modular ● Notícias ● Blogs ● Álbuns ● Vídeos ● Ao Vivo ● Conteúdo social Home Viva
  9. 9. 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
  10. 10. Home Viva
  11. 11. Home Viva
  12. 12. Home Viva
  13. 13. Antigamente uma página era montada assim Home Viva
  14. 14. Home Viva
  15. 15. 3 homens e um desafio Home Viva
  16. 16. 3 homens e um desafio Home Viva
  17. 17. As vezes a roda não serve Home Viva ● Page builder by siteOrigin ● Visual composer
  18. 18. 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.
  19. 19. Show time! Home Viva
  20. 20. Criando um widget Home Viva
  21. 21. Criando um widget Home Viva
  22. 22. 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
  23. 23. 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.
  24. 24. Múltiplas posições Home Viva
  25. 25. 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.
  26. 26. Home Viva Se ela dança, eu danço...
  27. 27. Home Viva Se ela dança, eu danço...
  28. 28. Home Viva
  29. 29. 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.
  30. 30. Selecionando uma categoria Home Viva
  31. 31. 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?
  32. 32. Home Viva
  33. 33. Vamos as melhorias! Home Viva That`s very good, may I use that?
  34. 34. Auto complete na busca dos posts Home Viva ● jQuery UI - .autocomplete ● json estático com os últimos posts ● Be Happy!
  35. 35. Auto complete na busca dos posts. Home Viva
  36. 36. Auto complete na busca dos posts. Home Viva
  37. 37. Auto complete na busca dos posts. Home Viva
  38. 38. Live reload na página toda Home Viva
  39. 39. O que nós queremos? Home Viva
  40. 40. 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/
  41. 41. Atendimento Home Viva
  42. 42. E por hoje é só pessoal! Home Viva
  43. 43. Perguntas? Home Viva

×