home viva do design da interface até a programação do sistema
TRANSCRIPT
![Page 1: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/1.jpg)
Ajude as fadinhas
… não use query_posts( );
![Page 2: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/2.jpg)
pre_get_posts();Preguetinho para os íntimos.
![Page 3: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/3.jpg)
Home Viva:Do design da interface até a programação do sistema
WordCamp 2016BELO HORIZONTE
![Page 4: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/4.jpg)
Leo Baiano Jeff Camargo#WebDev para pagar as contasMúsico quando estou bêbadoPoeta por vocaçãoRomântico de nascençaFAZEDOR DE SLIDES nas horas vagas
UX / UI DesignerO cara sério desta apresentaçãoNão faço slides de fadinhas
![Page 5: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/5.jpg)
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
![Page 6: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/6.jpg)
29%
27%24%
20%
SocialBusca Orgânica
Parceiros Home
Home Viva
![Page 7: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/7.jpg)
Home Viva
Conteúdo editorial
Interfacemodular
Análise de uso
Curadoria
Usuário
Estratégia
Home Viva
![Page 8: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/8.jpg)
Interface Modular● Notícias● Blogs● Álbuns● Vídeos● Ao Vivo● Conteúdo social
Home Viva
![Page 9: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/9.jpg)
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
![Page 10: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/10.jpg)
Home Viva
![Page 11: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/11.jpg)
Home Viva
![Page 12: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/12.jpg)
Home Viva
![Page 13: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/13.jpg)
Antigamente uma página era montada assim
Home Viva
![Page 14: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/14.jpg)
Home Viva
![Page 15: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/15.jpg)
3 homens e um desafioHome Viva
![Page 16: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/16.jpg)
3 homens e um desafioHome Viva
![Page 17: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/17.jpg)
As vezes a roda não serveHome Viva
● Page builder by siteOrigin ● Visual composer
![Page 18: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/18.jpg)
Customizer + Widgets = Home VivaHome 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.
![Page 19: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/19.jpg)
Show time!Home Viva
![Page 20: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/20.jpg)
Criando um widgetHome Viva
![Page 21: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/21.jpg)
Criando um widgetHome Viva
![Page 22: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/22.jpg)
Especificações dos blocosHome 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
![Page 23: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/23.jpg)
Múltiplas posiçõesHome 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.
![Page 24: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/24.jpg)
Múltiplas posiçõesHome Viva
![Page 25: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/25.jpg)
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.
![Page 26: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/26.jpg)
Home Viva
Se ela dança, eu danço...
![Page 27: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/27.jpg)
Home Viva
Se ela dança, eu danço...
![Page 28: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/28.jpg)
Home Viva
![Page 29: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/29.jpg)
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.
![Page 30: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/30.jpg)
Selecionando uma categoriaHome Viva
![Page 31: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/31.jpg)
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?
![Page 33: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/33.jpg)
Vamos as melhorias!Home Viva
That`s very good, may I use that?
![Page 34: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/34.jpg)
Auto complete na busca dos posts
Home Viva
● jQuery UI - .autocomplete ● json estático com os últimos posts● Be Happy!
![Page 35: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/35.jpg)
Auto complete na busca dos posts.
Home Viva
![Page 36: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/36.jpg)
Auto complete na busca dos posts.
Home Viva
![Page 37: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/37.jpg)
Auto complete na busca dos posts.
Home Viva
![Page 38: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/38.jpg)
Live reload na página todaHome Viva
![Page 39: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/39.jpg)
O que nós queremos?Home Viva
![Page 40: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/40.jpg)
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/
![Page 41: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/41.jpg)
AtendimentoHome Viva
![Page 43: Home viva do design da interface até a programação do sistema](https://reader033.vdocuments.pub/reader033/viewer/2022042706/586fe3ee1a28ab18428b8175/html5/thumbnails/43.jpg)
Perguntas?Home Viva