Conheça o Tainacan 1.0 – Parte 1: Nova Interface Admin e Dashboard

Este é o primeiro de uma série de quatro artigos pré-lançamento tratando das novidades do Tainacan 1.0.0. Não deixe de ler os outros três:

Neste artigo vamos apresentar as principais novidades que você vai descobrir “de cara” no Tainacan 1.0.0. Estas novidades foram possíveis graças à uma considerável refatoração de nosso código, buscando dar maior extensibilidade por terceiros, além de atender a desejos antigos da comunidade. Após o refinamento de mais de um ano e até algumas avaliações com usuários, estamos confiantes de que chegamos em um Tainacan muito mais maduro, flexível e poderoso digno da versão 1.0.0. Agradecemos especialmente à Luiza Peixe, da Cardume, pelo incrível trabalho e apoio na criação destas telas.

Um Admin mais Integrado ao WordPress

Assim que você atualizar seu plugin para a versão 1.0.0, poderá notar uma pequena diferença: o link do plugin está mais acima. Antes escanteado para o ponto mais inferior da lista de links do Admin do WordPress, agora promovemos o plugin para bem acima, próximo à sua lista Páginas. Consideramos isso importante porque o Tainacan não é uma mera ferramenta de customização do seu WordPress, mas é essencialmente um gerenciador de conteúdos.

Captura de tela do painel adminstrativo do Tainacan integrado ao WordPress

Mas a primeira grande mudança a ser notada certamente está na aparência do admin. Pra começar, o plugin não esconde mais a interface administrativa do WordPress, ele se apresenta, como outros plugins costumam ficar, dentro dela.

Fizemos isso para que os usuários mantenham noção de estarem no contexto administrativo do WordPress, oferecendo fácil acesso à outras opções relevantes que não são gerenciadas dentro do Tainacan, como seu Perfil (no canto superior direito) e suas páginas, mídias e posts.

Sabemos que isto certamente pegará usuários mais acostumados de surpresa. Mas não se preocupe! Este comportamento pode ser configurado.

Cada usuário pode acessar as “Opções de tela” no canto superior direito e clicar em “Esconder navegação do WordPress” no campo “Integração com a interface administrativa do WordPress”:

Esta informação será persistida como uma escolha do usuário e as telas do Tainacan só voltarão a dar espaço para o menu e a barra do WordPress se o usuário voltar a configurar esta opção. Se você deseja que este seja o comportamento padrão para todos os usuários, mencionaremos em outro artigo como customizar isso por função de usuário.

Algumas pessoas podem chamar isto de um “modo tela cheia”. Nós achamos uma terminologia fácil de aprender porém meio confusa, visto que o site todo pode ser colocado em tela cheia pelo navegador com atalhos do sistema.

Com o plugin neste modo, ainda é possível retornar ao painel Administrativo do WordPress. Só que ao contrário de versões anteriores, este link agora fica no canto superior esquerdo e não direito da tela. Fizemos isso para manter consistência com outras telas que adotam este comportamento no WordPress, como é caso do editor de blocos (Gutenberg).

Dashboard Tainacan: sua nova Tela Inicial do Admin do Plugin

Ao acessar a tela do plugin pela primeira vez, a grande novidade será a tela inicial do Admin. Veja uma comparação do antes e depois:

Ao invés dos nossos cartões engessados de antigamente, esta nova interface trás mais flexibilidade:

  • Os cartões são colapsáveis e reordenáveis: cada usuário pode decidir quais links tem maior prioridade em sua página inicial;
  • Os cartões podem ser ocultados: caso você não se interesse em ver um certo cartão, acesse as “Opções de tela” no canto superior direito. Lá haverá uma lista com um checkbox para cada cartão;
Reordenando, colapsando e desabilitando alguns cartões.

Os cartões foram feitos usando a mesma API que gera as Widgets do Dashboard do WordPress então se você está familiarizado com eles vai se sentir em casa. Também estamos reorganizando os links, dando destaques para aquilo que consideramos mais importante e apresentando algumas novidades:

  • O menu lateral estará disponível desde a página inicial, permitindo uma navegação imediata para locais não disponíveis via cartões.
  • A área de repositório, costumeiramente acessada com menos frequência e de importância maior apenas para administradores, ficará com menos destaque, concentrada no primeiro cartão.
  • A cada coleção criada, um novo cartão será criado com links para a mesma. Antigamente apenas um número restrito de coleções era carregado, o que frustrava gestores com múltiplas coleções.
  • Há um cartão dedicado para conteúdo educativo, oferecendo links diretos para nossa Wiki e nosso Fórum de usuários.
  • Há um cartão dedicado para postagens de lançamento como esta, para garantir que os usuários estejam sempre por dentro das novidades.
  • Dada a ausência de imagens de coleções em alguns cenários, estamos reduzindo a apresentação de imagens e dando mais destaque para a iconografia, reforçando as dicas visuais da navegação ao lado.

Quer definir quais atalhos aparecem nos cartões e quais cartões aparecem por padrão para um certo tipo de usuário? Mencionaremos em outro post como customizar isso por função de usuário. Mas o mais importante desta nova tela é que desenvolvedores podem criar, via código, seus próprios cartões, dando poder para futuros plugins e temas de registrarem informações de acesso imediato na tela inicial do usuário.

O Menu de Navegação do plugin unificado

Em versões anteriores, haviam três formas em locais diferentes para se navegar em telas do Admin do Tainacan:

  1. O menu flutuante que aparecia ao passar o mouse sobre o link do Tainacan, que dava acesso aos Relatórios, à tela de Diagnóstico do Sistema, Gestão de Perfis de Usuários e Opções da Submissão de Itens;
  2. O menu nível repositório, a área lateral azul escura que aparecia em páginas internas ao admin;
  3. O menu nível coleção, a área azul turquesa que aparecia horizontalmente sob as seções de páginas da coleção.

Embora muitos de nós aprendemos a nos acostumar com esta navegação composta, consideramos que ela seja uma barreira importante para novos usuários. Nesta versão estamos unificando todos estes acessos em um único menu lateral, mais próximo de como funciona a navegação do próprio painel administrativo do WordPress.

Por isso o link para o plugin Tainacan agora não possui mais submenus flutuantes. Ao clicar nele você terá acesso à nova navegação dedicada do Tainacan, agrupada inicialmente em três seções: Repositório, Coleções e Outros, além do link para o Dashboard, que chamamos de Home (“Início”).

Veja alguns destaques sobre esta nova organização:

  • A Lista de Coleções e a Lista de Todos os itens do repositório foi retirada de dentro da seção do Repositório e movida para uma seção “Coleções”. Fizemos isso por considerar que ali é onde está o coração das operações de editores de itens Tainacan. A maioria dos usuários não fica editando configurações nível repositório no dia a dia, isto é algo mais comum para gestores mais experientes. O acesso imediato à tela de coleções ou mesmo à lista de itens fica então privilegiado neste menu. Ele também é um menu dinâmico, que altera seus links quando um usuário clica em uma coleção. Você também verá links para as novas telas “Meus itens”… falamos sobre esta funcionalidade em outro artigo.
  • A Lista de Processos, que mostra o status de processos de importação, exportação e edição em massa, antes era acessível por um botão no canto superior direito. Este botão por si levava para a tela de Atividades do Repositório, com a aba “Processos” selecionada. Nós resolvemos promover esta lista para uma página dedicada, que pode ser acessada na seção “Repositório” -> “Processos” do menu.
  • A Página de Relatórios, que ficava no submenu flutuante do plugin, possuía um seletor para se escolher ver os Relatórios do Repositório ou de cada Coleção. Nós migramos isso para dentro da navegação. Agora os Relatórios de Repositório estão acessíveis diretamente na seção “Repositório” -> “Relatórios”. Já os de cada coleção estarão onde se espera: No menu “Coleção X” -> “Relatórios”, uma vez selecionada a coleção, claro.
  • O menu “Outros” restou como o espaço dedicado para administradores que desejam fazer alterações não apenas nos dados do repositório, mas no comportamento e nas funcionalidades do plugin. Está lá a nova tela de Configurações do plugin (sobre a qual falaremos mais em um post dedicado), a área de configuração de Perfis de Usuários e a tela de Diagnóstico do Sistema.

Como no menu lateral antigo, este menu pode ser comprimido para liberar espaço horizontal. Neste caso, os submenus se tornam painéis flutuantes que se abrem com um clique.

Um detalhe importante é que quando o plugin está em “modo tela cheia”, ficam visíveis também na barra lateral dois links essenciais: O que volta ao admin do WordPress e o que leva ao site público.

Por fim, a refatoração deste menu nos permitiu criar uma estrutura que reaproveita internamente o sistema de submenus do WordPress. O que isto significa na prática é que desenvolvedores poderão, finalmente, registrar novos menus e submenus para aparecerem dentro deste sistema, permitindo que plugins e temas que complementem a funcionalidade do Tainacan sejam colocados “em casa”. Temos uma documentação prontinha na Wiki sobre como isso funcionará.

Evoluindo a identidade visual do Tainacan

Após tantos anos de projeto, temos muito orgulho da identidade visual que foi criada para o Tainacan. Mas em um cenário que muda e evolui tão rápido como o do Web Design, uma repaginada de tempos em tempos é inevitável. Estamos saindo de uma interface mais minimalista e sólida para uma mais expressiva e interativa. Com este pequeno redesign, estamos incorporando alguns aspectos modernos que identificamos tanto nos mais novos componentes do WordPress quanto em outros sistemas, sem deixar de respeitar princípios definidores da marca Tainacan e da carinha das telas que vocês puderam se acostumar nos últimos anos.

Na já visitada página do Dashboard você verá mais destaque para a marca e para as cores do Tainacan, dando boas vindas aos usuários que estão pela primeira vez tendo contato com o universo da tela de gestão de acervos.

Com a concentração de funcionalidades de navegação interna no novo menu lateral unificado, exibimos o restante das páginas em uma espécie de tela “concha”. Este é um padrão visual bastante comum hoje em dia e pode ser visto em interfaces como as do próprio WordPress (tela de padrões e editor do site), Slack, Google (Gmail, Drive) e Discourse (sim, no nosso fórum!).

Navegando pelas telas para explorar alguns elementos visuais.

Além disso, no novo Painel Admin do Tainacan você verá:

  • Mais bordas arredondadas;
  • Botões, campos de entrada de texto e checkboxes maiores;
  • Uso de sombras e contornos leves em mais lugares;
  • Um padronização visual do posicionamento dos botões de fechar dos modais e da cor de fundo da camada deles;
  • Uma presença maior de cabeçalhos e fixos com scroll em diversos telas, reforçando o contexto, assim como mais rodapés fixos em formulários;
  • Cartões clicáveis com dimensões e interações refinadas nas listas de importadores, exportadores e expositores;
  • Uma responsividade melhorada para telas mobile.

Um destaque fica para a presença, em diversas telas, dos “Links de acesso externo”. Estes links ficarão sempre no canto superior direito da área branca da página, oferecendo um acesso rápido para a versão pública no site de seja lá o que o usuário está acessando. Alguns destes links já existiam antes, mas estavam confusamente presentes em rodapés, subtítulos ou outras áreas da página.

Outro destaque não pode passar despercebido. Você verá nas listagens um novo botão “Ordenação” que abrirá um popup único para se alterar a Direção da Ordenação e o Metadado da Ordenação. Antes tínhamos uma caixa de seleção separada para cada um destes.

Este é o padrão visual adotado em componentes de DataViews modernos do WordPress e permite que as barras de controle de busca tenham um tamanho fixo, que não varie a depender do metadado selecionado.

Consideramos esta nova forma unificada mais interessante e pretendemos oferecer ela nas listagens públicas do Tainacan futuramente.

E claro, como tudo o que temos apresentado até aqui, este redesign também nos permite oferecer uma maior customização para desenvolvedores. O que isto quer dizer é que plugins ou temas que desejarem alterar aspectos visuais da identidade visual agora terão um caminho bem mais fácil, graças ao uso intenso de variáveis CSS.

Nós não consideramos que a customização ampla do Admin do Tainacan seja algo almejado por muita gente, mas entendemos que existem cenários, em acervos particulares, onde a mistura da identidade visual de outros sistemas da instituição com a interface do plugin pode ser desejado. Estamos delegando isso para configurações em código, mas preparamos alguns exemplos que servem de prova de conceito, onde a troca da logo, da paleta de cores e outros aspectos da identidade visual se tornam possíveis com algumas linhas:

E tem mais!

Não deixe de ler os outros artigos que cobrem as novidades do lançamento da 1.0:

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Posts relacionados