Interface modular e conteúdo dinâmico na Home Viva

Home Viva:
Do design da interface até a
programação do sistema
WordCamp 2016
BELO HORIZONTE

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

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

29%
27%
24%
20%
SocialBusca Orgânica
Parceiros Home
Home Viva

Home
Viva
Conteúdo
editorial
Interface
modular
Análise
de uso
Curadoria
Usuário
Estratégia
Home Viva

Interface
Modular
● Notícias
● Blogs
● Álbuns
● Vídeos
● Ao Vivo
● Conteúdo social
Home Viva

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

Antigamente uma página
era montada assim
Home Viva

3 homens e um desafio
Home Viva

As vezes a roda não serve
Home Viva
● Page builder by siteOrigin
● Visual composer

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.

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

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.

Múltiplas posições
Home Viva

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.

Home Viva
Se ela dança, eu danço...

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.

Selecionando uma categoria
Home Viva

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?

Vamos as melhorias!
Home Viva
That`s very good, may I use that?

Auto complete na busca dos posts
Home Viva
● jQuery UI - .autocomplete
● json estático com os últimos posts
● Be Happy!

Auto complete na busca dos
posts.
Home Viva

Auto complete na busca dos posts.
Home Viva

Live reload na página toda
Home Viva

O que nós queremos?
Home Viva

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/

E por hoje é só pessoal!
Home Viva

Interface modular e conteúdo dinâmico na Home Viva

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (12)

Interface modular e conteúdo dinâmico na Home Viva